orbit-4-2/app/assets/stylesheets/lib/main-list.css.erb

/* Main List */
.main-list {
  margin-bottom: 10px;
}
.main-list tbody {
  border: 1px solid #dddddd;
}
.main-list thead {
  border: 1px solid #454545;
}
.main-list thead th {
  vertical-align: middle;
  background-color: #454545;
  white-space: nowrap;
  color: #FFFFFF;
}
.main-list tbody tr.disable td {
  color: #C5C5C5;
  background-color: #eeeeee;
}
.main-list tbody tr.disable td .label-info {
  background-color: #999999;
}
.main-list tbody tr.active td:first-child {
  position: relative;
}
.main-list tbody tr.active td:first-child:before {
  content: "";
  width: 0px;
  height: 0px;
  left: -21px;
  top: 50%;
  margin-top: -6px;
  position: absolute;
  border-style: solid;
  border-width: 6px 0 6px 6px;
  border-color: transparent transparent transparent #333333;
}
.main-list td {
  background-color: #FFFFFF;
}
.main-list td input[type="text"] {
  margin-bottom: 0;
  margin-left: -.4em;
  margin-right: 3px;
  padding: 0 .3em;
  width: 4em;
}
.main-list td.action {
  vertical-align: middle;
  text-align: right;
}
.main-list td.preview img {
  width: 100%;
}
.main-list td .banner-link {
  width: 100px;
  max-width: 120px;
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden;
}
.main-list td .file-type {
  position: relative;
  list-style: none;
  display: inline-block;
}
.main-list td .file-type a {
  background-color: #A6A6A6;
  color: #FFFFFF;
  padding: 2px 5px 2px 3px;
  border-radius: 3px;
  text-decoration: none;
  text-shadow: 0px -1px 0px rgba(100, 100, 100, .6);
}
.main-list td .file-type i,
.main-forms fieldset .input-area .controls .file-type i {
  width: 16px;
  height: 16px;
  margin-bottom: -1px;
  display: inline-block;
}
.main-list td .file-type[class^="type-"] i,
.main-list td .file-type[class*=" type-"] i,
.main-forms fieldset .input-area .controls .file-type[class*=" type-"] i,
.main-forms fieldset .input-area .controls .file-type[class^="type-"] i {
  background-image: url(<%= asset_path 'file_type.png' %>);
}
.file-type.type-pdf i   {background-position: 0px 0px;}
.file-type.type-psd i   {background-position: -16px 0px;}
.file-type.type-ai i    {background-position: -32px 0px;}
.file-type.type-fla i   {background-position: -48px 0px;}
.file-type.type-in i    {background-position: -64px 0px;}
.file-type.type-acc i   {background-position: 0px -16px;}
.file-type.type-do i    {background-position: -16px -16px;}
.file-type.type-xl i    {background-position: -32px -16px;}
.file-type.type-pp i    {background-position: -48px -16px;}
.file-type.type-zip i   {background-position: -64px -16px;}
.file-type.type-txt i   {background-position: 0px -32px;}
.file-type.type-jp i    {background-position: -16px -32px;}
.file-type.type-gif i   {background-position: -32px -32px;}
.file-type.type-png i   {background-position: -48px -32px;}
.file-type.type-audio i {background-position: -64px -32px;}

.main-list td .quick-edit {
  height: 24px;
  margin-top: 5px;
}
.main-list td .quick-edit .nav {
  display: none; 
  margin-bottom: 0;
}
.main-list tr:hover .quick-edit .nav {
  display: block;
}
.main-list td .quick-edit .nav > li > a {
  padding-top: 4px;
  padding-bottom: 4px;
  margin-top: 0px;
  margin-bottom: 0px;
  border: 1px dotted #d1d1d1;
}
.main-list td .quick-edit .nav > li > a:hover {
  border: 1px dotted transparent;
}
.main-list thead tr.sort-header th a {
  padding: 8px;
  margin: -8px;
  display: block;
  color: #FFFFFF;
  text-decoration: none;
}
.main-list thead tr.sort-header th.active a {
  padding-bottom: 4px;
  border-bottom: 4px solid #08c;
}
.main-list .footable-row-detail td {
  padding: 0;
  border-top: none;
}
.main-list .footable-row-detail td .footable-row-detail-inner {
  display: none;
  padding: 8px;
  position: relative;
  border-radius: 5px;
  margin: 0 8px 8px;
  background-color: #ededed;
}
.main-list .footable-row-detail td .footable-row-detail-inner:after {
  display: block;
  height: 0px;
  width: 0px;
  position: absolute;
  top: -6px;
  left: 50%;
  margin-left: -3px;
  content: "";
  border-style: solid;
  border-width: 0 6px 6px 6px;
  border-color: transparent transparent #ededed transparent;
}
.main-list .footable-row-detail td .footable-row-detail-inner div {
  margin: 10px 0;
}
#preview .preview {
  margin: 0 auto;
}


/* For Retina */
@media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max--moz-device-pixel-ratio: 2) {
  .main-list td .file-type[class^="type-"] i,
  .main-list td .file-type[class*=" type-"] i,
  .main-forms fieldset .input-area .controls .file-type[class*=" type-"] i,
  .main-forms fieldset .input-area .controls .file-type[class^="type-"] i {
    background-image: url(<%= asset_path 'file_type@2x.png' %>);
    background-size: 80px 48px;
  }
}


/* Responsive */
@media (max-width: 480px) {
  .main-list td .quick-edit .nav {
    display: block;
  }
}