kleks/admin/static/css/theme.styl

/* Admin theme.styl CSS */

$availableThemeColors = 'theme-default' $defaultColor, 'theme-blue' $blueColor, 'theme-green' $greenColor, 'theme-brown' $brownColor, 'theme-chocolate' $chocolateColor, 'theme-teal' $tealColor, 'theme-aqua' $aquaColor, 'theme-purple' $purpleColor, 'theme-red' $redColor

$navbarWidth  = 180px

#app
  position: absolute
  top: 0
  bottom: 0
  left: 0
  right: 0

.site-name
  font-size: 1.65em
  line-height: 1em
  font-weight: $normalFont
  color: #C4C4C4
  letter-spacing: -0.06em
  word-spacing: 0em
  white-space: nowrap
  a
    color: $lightGrey
  // b, strong
  //   color: $primaryColor

  // loop through all available theme colors
  for c in $availableThemeColors
    &.{c[0]}
      b, strong
        color: c[1]

span.label
  font-weight: $normalFont
  color: $lightGrey

.filter-box
  position: absolute
  top: 0
  right: 0
  width: 35%
  background: #fff
  z-index: 10

  .filter-input
    display: block
    width: 100%
    color: $lightGrey
    background: #fff
    font-size: 1.5em
    font-weight: $normalFont
    padding: 5px 40px 5px 10px
    margin: 0
    border: 1px solid $faintGrey
    outline: none

  .icon
    position: absolute
    top: 8px
    right: 10px
    color: $lightGrey
    font-size: 1.5em
    line-height: 1em

  .clear-filter
    display: none
    position: absolute
    top: 0
    right: 0
    width: 22px
    height: 20px
    background: $alertColor
    padding: 0
    margin: 10px
    color: white
    text-align: center
    line-height: 1em
    cursor: pointer

    &.active
      display: block

  .selected-site
    position: relative
    padding: 10px 40px 10px 10px
    border: 1px solid $faintGrey
    border-top: 0
    line-height: 1em
    cursor: pointer
    -webkit-user-select: none

    .icon
      top: 10px

    html.no-touch &:hover
    html.touch &:active
      background: lighten($faintGrey, 50%)

  ul.site-selector
    display: none
    list-style-type: none
    margin: 0
    padding: 0
    background: #fff
    border: 1px solid $faintGrey
    border-top: 0
    max-height: 500px
    overflow-y: scroll
    overflow-x: hidden
    -webkit-overflow-scrolling: touch
    -webkit-user-select: none

    li
      padding: 10px 10px
      cursor: pointer

      html.no-touch &:hover
      html.touch &:active
        background: lighten($faintGrey, 50%)

      &.selected
        opacity: 0.5

  .filter-sort
    position: relative
    padding: 10px 40px 10px 10px
    border: 1px solid $faintGrey
    border-top: 0
    line-height: 1em
    cursor: pointer
    -webkit-user-select: none
    background: #f9f9f9


.main.navbar
  position: absolute
  top: 0
  left: 0
  bottom: 0
  width: $navbarWidth
  padding: 0
  margin: 0
  background: $primaryColor
  box-shadow(-4px 4px 0 rgba(0, 0, 0, 0.1))
  overflow-y: scroll
  overflow-x: hidden
  -webkit-overflow-scrolling: touch
  -webkit-user-select: none
  transition(0.3s, all)
  z-index: 0

  .app-logo
    padding: 16px 18px
    margin-bottom: 20px
    font-size: 4.25em
    line-height: 1em
    font-weight: $boldFont
    color: #fff
    letter-spacing: -0.07em
    word-spacing: 0em
    white-space: nowrap
    // text-shadow: 0px -1px 0 rgba(0,0,0,0.2)

    a
      color: #fff

  > form.login
    display: none
    padding: 20px 30px
    // text-shadow: 0px -1px 0 rgba(0,0,0,0.2)

    > input
      display: inline-block
      width: 140px
      margin: 10px
      vertical-align: middle
      color: #fff
      font-weight: $boldFont
      font-size: 1.2em

      ::-webkit-input-placeholder
        color: lighten($primaryColor, 1%)
        font-weight: $normalFont

      &.button
        background: darken($primaryColor, 5%)

        html.no-touch &:hover
        html.touch &:active
          background: darken($primaryColor, 10%)

  > ul
    list-style-type: none
    padding: 0
    margin: 0

    > li
      padding: 0

      a
        display: block
        padding: 10px 20px
        font-weight: $boldFont
        color: #fff

        html.no-touch &:hover
        html.touch &:active
          background: darken($primaryColor, 5%)

        &.active
          background: darken($primaryColor, 10%)

        .icon
          margin-right: 0.5em

      &.seperator
        margin: 0.5em 0
        border-bottom: 1px solid rgba(255,255,255,0.2)

  &.show-login
    top: 30%
    left: 26%
    right: 26%
    bottom: auto
    width: initial
    padding: 0 10px
    z-index: 200

    .app-logo
      margin: 30px
      padding: 0

    .offline
      top: 32px
      right: 0
      left: auto

    > form.login
      display: block

    > ul
      display: none

  .user-greeting
    position: absolute
    top: 0
    left: -($navbarWidth)
    width: $navbarWidth
    padding: 16px 18px
    color: #fff
    background: $primaryColor
    transition(0.6s, left)
    strong
      display: block
      font-size: 2.5em
      border-bottom: 5px solid white
      padding-bottom: 0.3em
      letter-spacing: -0.07em
      word-spacing: 0em
      white-space: nowrap
    &.show
      left: 0

  .offline
    display: none
    position: absolute
    top: 22px
    left: 0
    width: $navbarWidth
    font-size: 2em
    line-height: 2em
    font-weight: $boldFont
    text-transform: uppercase
    text-align: center
    color: #fff
    background: $alertColor 

.main.stack
  position: absolute
  top: 0
  left: $navbarWidth
  right: 0
  bottom: 0
  min-width: 800px
  overflow: hidden

  .panel
    position: absolute
    top: 0
    bottom: 0
    left: 0
    right: 0
    overflow: hidden

    > .panel
      background: $faintGrey
      overflow-y: scroll
      overflow-x: hidden
      -webkit-overflow-scrolling: touch

      .content
        position: relative
        float: left
        width: 65%
        min-height: 100%
        padding: 20px 3% 40px 3%
        background: #fff

      .sidebar
        float: right
        width: 35%
        padding: 20px 3%

        .top-spacer
          display: block
          height: 4em

        .buttons
          position: fixed
          width: 26%
          margin-top: -21px
          margin-left: -5px
          padding-top: 20px
          padding-bottom: 10px
          border-bottom: 1px solid #fff
          background: #F3F3F3
          box-shadow: 0 5px 0 rgba(0,0,0,0.05)
          z-index: 10

          button, .button
            margin: 0 10px 10px 0
            padding: 10px 25px
            &:last-of-type
              margin-right: 0

        .delete-button
          display: inline-block
          float: right
          height: 44px
          width: 44px
          background: #ddd
          line-height: 44px
          text-align: center
          cursor: pointer
          html.no-touch &:hover
          html.touch &:active
            color: #fff
            background: $alertColor

        input[type='text'],
        input[type='search'],
        textarea,
        select
          border-color: #d3d3d3

        ::-webkit-input-placeholder
          color: #d3d3d3
      
      &.form
        z-index: 20

    h1
      margin: 0 0 0.5em -0.05em

      .icon
        color: $lightGrey
        font-size: 0.85em
        line-height: 1em

      .new
        font-weight: $heavyFont
        line-height: 1em

      .count, .status
        float: right
        color: $lightGrey
        font-size: 0.5em
        font-weight: 300
        margin-left: 0.5em
        white-space: nowrap

      .count
        cursor: pointer

    .item-title
      color: $primaryColor

    ul.list
      list-style-type: none
      margin: 0
      padding: 0
      border-top: 1px dotted $faintGrey
      clearfix()

      > li
        border-bottom: 1px dotted $faintGrey
        padding: 1em 0
        clearfix()

        > a
          display: block
          font-size: 1.5em
          line-height: 1.2em
          html.no-touch &:hover
          html.touch &:active
            color: $textDarkColor
          &.site-name
            font-size: 2em
          &.title
            padding-left: 1.5em
            .icon
              margin-left: -1.5em
              margin-right: 0.5em
              color: $textColor
            .status-icon
              margin-left: 0.5em
              color: $lightGrey
              font-size: 0.8em

        .note
          margin-top: 0.5em
          font-size: 0.9em
          line-height: 1em
          color: $lightGrey
        
        .meta
          margin-top: 0.5em
          padding-left: 2.5em
          font-size: 0.9em
          line-height: 1em
          color: $lightGrey

          > div
            display: inline-block
            margin-right: 1em

          a
            color: $lightGrey
            html.no-touch &:hover
            html.touch &:active
              text-decoration: underline

        .actions
          float: right
          margin-left: 1em
          font-size: 1.5em
          line-height: 1.3em
          color: $lightGrey
          white-space: nowrap

          > div
            display: inline-block
            font-size: 0.6em
            line-height: 3em

          a
            color: $lightGrey
            html.no-touch &:hover
            html.touch &:active
              text-decoration: underline

    .no-data
      color: $lightGrey
      padding: 2em 1em
      margin-bottom: 2em
      text-align: center
      border: 1px dotted #ddd

    form
      margin: 0
      height: 100%

      .heading
        color: $primaryColor
        margin: 0.5em 0 0 0
        font-size: 1.4em
     
      .field
        position: relative
        padding: 10px 0
        clearfix()

        label
          display: block
          padding: 5px 0
          color: $lightGrey

        .note
          font-size: 0.8em
          margin-bottom: 0.5em

        .link-form
          margin-bottom: 0.5em

        input[type='text'],
        input[type='search'],
        textarea,
        select
          display: block
          width: 100%

        input[name='name'],
        input[name='name_html'],
        input[name='title'],
        input[name='code']
          font-size: 1.5em

        textarea[name='video']
          height: 60px

        textarea[name='body'],
        textarea[name='content']:not(.default)
          height: 600px

        input[type='checkbox']
          display: inline-block
          float: left
          margin: 4px 10px 4px 0

        .field-left
          float: left
          width: 48%

        .field-right
          float: right
          width: 48%

        .site-selected
          position: absolute
          top: 22px
          right: 10px
          padding: 0 3px
          background: #fff
        
        .inline
          
          label
            display: inline-block
            width: 20%
            float: left

          input[type='text'],
          input[type='search'],
          textarea,
          select
            display: block
            width: 75%
            float: right

          input[type='checkbox']
            width: auto
            float: none
            margin: 4px 10px

      .required label:after
        content: ' *'
        color: $textColor

      .error-message
        display: none
        color: #fff
        padding: 5px 10px
        background: $alertColor
      
      &.fullscreen

        &:before
          content: ''
          position: fixed
          top: 0
          bottom: 0
          left: 0
          right: 0
          background: $primaryColor
          z-index: 99

        input[name='title'],
        input[name='name']
          position: fixed
          top: 30px
          left: 20%
          right: 20%
          width: auto
          color: #fff
          font-size: 1.8em
          z-index: 100

        textarea[name='body'],
        textarea[name='content']
          position: fixed
          top: 90px
          bottom: 0
          left: 20%
          right: 20%
          width: auto
          height: 87%
          padding: 10px
          border: 0
          background: white
          // outline: 10px solid rgba(255, 255, 255, 0.5)
          z-index: 100
          transition(0.3s, all)

        textarea[name='intro'],
        textarea[name='video']
          display: none

        .ui-preview
          position: fixed
          top: 90px
          bottom: 0
          left: auto
          right: 10px
          width: 48%
          height: 87%
          padding: 10px
          border: 0
          background: white
          // outline: 10px solid rgba(255, 255, 255, 0.5)
          z-index: 100

        &.preview-mode
          
          textarea[name='body'],
          textarea[name='content']
            left: 10px
            right: auto
            width: 48%

        button.fullscreen-button
        .markdown-help:first-of-type
          position: fixed
          top: 0
          left: 20%
          margin: 0
          padding: 0 10px
          font-size: 18px
          font-weight: 300
          line-height: 1.5em
          background: darken($primaryColor, 5%)
          color: #fff
          border: 0
          z-index: 100

          html.no-touch &:hover
          html.touch &:active
            background: darken($primaryColor, 10%)
        
        button.fullscreen-button
          iconic('\66', #fff, 'before')
          &:before
            margin-right: 0.5em

        .markdown-help:first-of-type
          left: auto
          right: 20%

          &:after
            content: ' ?'
            color: #fff

    &.fixed-header
      
      h1
        position: fixed
        top: 0
        left: $navbarWidth
        right: 31%
        min-width: 520px
        margin: 0
        padding: 20px 2.5%
        border-bottom: 2px solid #ddd
        background: #fff

      ul.list
        margin-top: 87px


.stack .panel:not(.active)
  display: none


.panel.dashboard

  .content

    > h3
      color: $lightGrey
      margin-bottom: 0.5em

      .count
        float: right
        white-space: nowrap

    > ul.list
      margin-bottom: 2em


ul.ui-multi-select
  list-style-type: none
  padding: 10px
  margin: 0
  max-height: 170px
  border: 1px solid $faintGrey
  overflow-y: auto
  overflow-x: hidden
  -webkit-user-select: none

  > li
    display: inline-block
    padding: 4px 10px
    margin: 0 12px 12px 0
    // max-width: 100%
    width: 48%
    border: 1px solid $faintGrey
    ellipsis()
    cursor: pointer

    html.no-touch &:hover
    html.touch &:active
      background: lighten($faintGrey, 50%)

    &.selected
      color: $linkColor
      background: #fff
      font-weight: $boldFont
      border-color: $primaryColor
      outline: 2px solid rgba($primaryColor, 0.5)

      &:before
        content: '•'
        display: block
        float: right
        vertical-align: top
        margin-top: 5px
        color: $primaryColor
        font-size: 1.5em
        line-height: 0.5em

  .sidebar &
    border-color: #d3d3d3

    > li
      width: 100%
      margin-right: 0
      border: 1px solid darken($faintGrey, 10%)

      &:last-child
        margin-bottom: 0

      html.no-touch &:hover
      html.touch &:active
        background: lighten($faintGrey, 10%)

      &.selected
        background: lighten($faintGrey, 30%)

.ui-file-upload
  
  .dropzone
    padding: 20px
    border: 4px dashed #fff
    color: #fff
    font-size: 2em
    text-align: center
    cursor: default

  .filename
    background: #fff
    padding: 0 5px
    margin-top: -6px
    line-height: 1.7em
    text-align: center
    overflow: hidden

  ul.files-list
    list-style-type: none
    margin: 20px 0
    padding: 0

    li
      position: relative
      float: left
      max-height: 120px
      margin: 0 4% 10px 0
      overflow: hidden
      -webkit-user-select: none
      cursor: pointer

      &.selected
        outline: 4px solid $primaryColor

      > img
        display: block
        width: 100%

      > div
        border: 1px solid #e3e3e3
        em
          font-weight: $boldFont
          font-size: 0.8em

.ui-preview

  position: absolute
  top: 0
  bottom: 0
  right: 0
  left: 0
  background: #fff
  transition(0.3s, all)

  > .button
    position: absolute
    top: 2px
    right: 2px
    outline: 2px solid rgba(255,255,255,0.7)

    &.preview-button
      right: 60px

  > .inner
    position: absolute
    top: 0
    bottom: 0
    right: 0
    left: 0
    padding: 0 20px 10px 20px
    overflow-y: scroll
    overflow-x: auto
    -webkit-overflow-scrolling: touch

    h3, h4
      margin: 1em 0

    ol, ul
      margin: 0 0.8em

    p
      
      &.center
        text-align: center

      &.right
        text-align: right
      
    a
      font-weight: $boldFont

.ui-help
  position: absolute
  top: 15%
  right: 20px
  bottom: 20px
  max-width: 600px
  padding: 20px
  background: #333
  color: #fff
  font-size: 0.8em
  overflow-y: scroll
  overflow-x: hidden
  -webkit-overflow-scrolling: touch
  z-index: 110
  
  > h3
    color: $primaryColor
    margin: 1em 0

  .close-button
    float: right

  > table
    width: 100%
    border-collapse: separate
    border-spacing: 0 5px
    
    tbody

      td
        padding: 5px 10px
        
      td:first-of-type
        width: 45%
        padding: 5px 10px 5px 0
        font-size: 1.1em
        line-height: 1.2em

      td:nth-child(2)
        width: 5px
        padding: 0
        border: 1px solid rgba(255, 255, 255, 0.1)
        border-right: 0

      td:last-of-type
        padding: 5px 0 5px 10px