@import "base"

p.asset
  img.preview
    border: 5px solid white
    +box-shadow

.asset_filters
  float: left
  padding: 2px 0
  a
    +border-radius(100px)
    color: #555
    padding: 3px 8px
    text-decoration: none
    font-size: 12px
    &:hover
      background: #ccc
    &.pressed
      background: #888
      +box-shadow(0, 1px, 1px, #333, inset)
      color: white
      text-shadow: 0 1px 0 #333
      &:hover
        background: #888
        +box-shadow(0, 1px, 1px, #333, inset)
        color: white
        text-shadow: 0 1px 0 #333

.popup
  div.toolbar
    background: white
    +background-image(linear-gradient(white,#ddd))
    border-bottom: 1px solid #ccc
    +single-box-shadow(white, 0, 1px, 0)
    margin: -20px -20px 0
    padding: 6px 10px 3px 10px
    font-size: 95%
    height: 30px
    +clearfix
    .right
      float: right
    form.search
      padding: 4px 2px 0
      input[type=search]
        font-size: 12px
        +border-radius(100px)
        border: 1px solid #ccc
        border-top-color: #999
        border-left-color: #b0b0b0
        border-right-color: #bbb
        background: white image_url('admin/search.png') 4px center no-repeat
        +box-shadow(rgba(black, 0.2), 0, 1px, 0, inset)
        width: 180px
        padding: 2px 8px 2px 20px

#upload_holders
  display: none

#attach_asset
  .viewport
    overflow-x: hidden
    width: 610px
    height: 310px

.attachment_actions
  text-align: right
  margin-bottom: -1em
  ul
    +inline-list
  li
    padding-left: 1em
  a
    color: white !important
    text-shadow: 1px 1px 0 #888

.assets
  padding-left: 5px
  padding-right: 5px
  ul
    li.asset
      display: block
      float: left
      margin: 8px 0 0 8px
      width: 110px
      height: 110px
      position: relative
      line-height: 1.2em
      .front, .back
        display: block
        background: #e6eaed
        border: 5px solid white
        position: absolute
        width: 100px
        height: 100px
        text-align: center
      .front
        +box-shadow
        text-align: center
      .back
        color: #333
        overflow: hidden
        +opacity(0)
      .title
        color: #333
        font-size: 10px
        overflow: hidden
        margin: 10px 4px
        height: 15px
        line-height: 15px
        text-overflow: ellipsis
      .icon
        height: 63px
        line-height: 63px
        img
          vertical-align: bottom
      ul.actions
        li
          margin: 5px 0
          padding: 0 10px
          font-size: 10px
        a
          background: #666
          background: rgba(black, 0.8)
          +border-radius
          color: #ddd
          display: block
          padding: 2px 10px
          text-decoration: none
          &:hover
            background: #999
            background: rgba(black, 0.6)
            color: white
      &.unsaved
        .front
          opacity: 0.4
      &:hover
        .back
          +opacity(1)
          background: rgba(white, 0.6)
      &.waiting
        background-color: #E6EAED
        .back
          display: none
        .front
          background: transparent url(/images/admin/spinner.gif) no-repeat center center
          img
            opacity: 0.2

#attachment_list.assets
  background: #7e7e7e
  +border-bottom-radius
  margin: -1em 0.5em 1em 0.5em
  overflow-y: hidden
  overflow-x: auto
  ul.empty
    display: none
  p.note
    font-size: 80%
    margin: 0
    padding: 8px
    clear: left
    span.message
      float: right
      color: #aaa
      &.important
        color: #d99
  ul.sortable
    li.asset
      div.title
        cursor: move
        &:hover
          font-weight: bold

#assets_table.assets
  position: relative
  overflow: auto
  p
    padding: 40px
      top: 45px
    color: silver
    text-align: center
    font:
      size: 75%
      style: oblique
  ul
    clear: both
    li.asset
      input
        display: none
  div.pagination
    position: relative
    overflow: hidden
    clear: left
    width: 100%
    height: 3em
    padding: 0.5em
    span, a
      display: block
      float: left
      padding: 0.25em
      margin: 1em 2px 1em 0
      +border-radius(2px)
      text-decoration: none
    span.current
      color: #000
      font-weight: bold
    span.disabled
      background-color: #eee
      color: #ccc
    a
      background-color: #eee
      color: #444
      &:hover
        background-color: #c00
        color: #fff

    span
      color: #888
    span, a
      display: block
      float: left
      padding: 2px 6px
      line-height: 1.5em