@import "../mixins.styl"

$blueDark = #303E4D
$baseThemeColor = #F0F0F0
$blueLight = #81A5D4
$orange = #EBA36F
$greenLight = #97A346
$greenDark = #808942
$greenBright = #65c178


$lightGrey = #D5D8DE
$normalGrey = #BCC9CE
$darkGrey = #8E949F
$lightColor = #F7FAFC

$red = #B2150A

$categoriesTopColor = rgb(36, 50, 64)
// $categoriesTopColor = rgb(36, 50, 64)
$categoriesTopColor = darken($blueDark, 3)
$categoriesBottomColor = rgb(49, 68, 87)
$categoriesBottomColor = lighten($blueDark, 1)


body.winter
  background-color #f0f0f0
  color darken($blueDark, 25)
  font-family -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"

  a
    color darken($baseThemeColor, 35)

  :focus
    outline dotted 1px $blueLight


  .button,
  button,input[type=submit],input[type=reset]
    background-color darken($baseThemeColor, 15)
    border solid 1px darken($baseThemeColor, 25)
    color white
    box-shadow 1px 1px 1px -1px rgba(255,255,255,0.2) inset

  button\:active,
  input[type=submit]:active,input[type=reset]:active
    box-shadow 1px 1px 1px -1px rgba(0,0,0,0.2) inset

  button[disabled],input[type=submit][disabled],input[type=reset][disabled]
    background-color desaturate($baseThemeColor, 20)

  input[type=text],
  input[type=password],
  input[type=email],
  input[type=tel],
  input[type=number],
  textarea
    border solid 1px $baseThemeColor


  >
    .container
    > .connecting
      background-color alpha($blueDark, 0.9)
      div.center
        color $darkGrey
        h1
          color $baseThemeColor
        small
          color $greenDark

  .header
    background-color darken($baseThemeColor, 80)

  .categories > .settings
    border-top solid 1px rgba(255, 255, 255, 0.024)
    color $darkGrey
    &.ng-hide
      opacity 0
    a
      color $darkGrey

  .categories
    ul.menu
      li
        a
          color #34281a
          border-left solid 0.0vw transparent
          &:hover
            color lighten($baseThemeColor, 20)

      li.active
        a
          color $baseThemeColor
          border-left solid 0.5vw $baseThemeColor
          padding-left 1.5vw
          background-color rgba(0,0,0,0.1)


  .menu
    .button
      opacity 0.8

  .view-panel
    blockquote
      border-left: 5px solid #faf0e6
    kbd
      background-color rgba(0,0,0,0.025)

  .topics-panel
    > .search-box
      border-bottom solid 1px rgba(255,255,255,0.025)
      box-shadow: 0 3px 5px -5px #000000;
      input.search
        background-color transparent
        border none
        color $darkGrey
      a
        color darken($darkGrey, 50%)

      a+input.search:focus
        color $lightGrey

    > .topics
      border-left solid 1px rgba(255,255,255,0.025)

    > .topics-switch
        a
          color $darkGrey
        a.active
          color white
          border-bottom solid 2px $baseThemeColor
          &::before
            box-shadow 1px 1px 1px #fff

    .topic-info
      .fa-lock
        color $greenLight
    .topic-status
      .counter
        color $greenDark
        background-color $blueDark

    .topic
      border-bottom solid 1px rgba(255,255,255,0.025)
      border-left solid 1px rgba(255,255,255,0)

      a
        color lighten($blueDark, 50)

      &.active
        background-color lighten($blueDark, 25)
        border-left solid 1px rgba(255,255,255,0.25)
        a
          color white

      small
        color darken($blueDark, 10)
        &.tag
          color lighten($blueDark, 50)

      &.ng-animate
          transition:all
          animation-iteration-count 1
          animation-duration $slowAnimationDuration
      &.ng-enter
          animation-name fadeInQuick
          animation-timing-function ease-out
      &.ng-leave
          animation-name fadeOutQuick
          animation-timing-function ease-in


  @keyframes fadeInQuick
    0%
      height 0
      opacity  0
    20%
      height calc(0.5em + 1vh + 1px)

    50%
      opacity 0.05

    100%
      height calc(1em + 2vh + 2px)
      opacity 1

  @keyframes fadeOutQuick
    0%
      height calc(1em + 2vh + 2px)
      opacity 1
    100%
      height 0
      opacity 0

  @keyframes flyTopRightAndDisappear
    0%
      opacity 1
      transform translate(0, 0)
    59%
      opacity 0
      transform translate(2em, -2em)
    60%
      opacity 0
      transform translate(-2em, 2em) scale(0)
    100%
      opacity 1
      transform translate(0, 0) scale(1)


  .topic-info
    p
      color darken($blueDark, 10)

  .top-bar
    .slogan
      color $greenDark
    .user
      color $lightGrey

    .button
      background-color $baseThemeColor
      color #fff

  .view-panel
    .topic-view
      > .topic
        .details
          background-color lighten($baseThemeColor, 70)
          .topic-body
            text-rendering optimizeLegibility
            -webkit-font-smoothing antialiased
          .topic-authoring
            border-top solid 1px lighten($baseThemeColor, 60)

            .col
              a
              .date
                i.fa-pencil
                  color $lightGrey
            .col.private
              color $greenLight
              img
                border solid 0.1vh $lightColor
              div.padlock
                border solid 0.1vh  $lightColor
          pre
            overflow auto
          h1
            margin-bottom 1vh
            word-break break-word
          div.date
            color $normalGrey
            margin-bottom 2vh

      > .compose
        background-color white
        box-shadow 0 0 5px -2px #000000

        button
          border dotted 1px transparent
          background-color white
          -webkit-appearance none
          color $lightGrey
        .controls
          button
            color $lightGrey
            border solid 2px $lightGrey
        .send
          border-left solid 0 $lightGrey
          button
            color $baseThemeColor
          button.sending
            animation-name flyTopRightAndDisappear
            animation-timing-function ease-out

        button[disabled]
            color $lightGrey
        .text
          .progress
            height 0.5vh
            .bar
              background-color $greenDark
      .comments
        .pagination
          .show-old-comments
            background-color transparent
            color $normalGrey
            border solid 1px $lightGrey
            &:hover
              color darken($normalGrey, 10)
              border solid 1px $normalGrey
              box-shadow 1px 1px 0px white inset
            &:active
              box-shadow 1px 1px 1px rgba(0,0,0,0.1) inset
            &:focus
              color darken($normalGrey, 10)
              box-shadow 1px 1px 0px white inset

        .comment
          .date
            color lighten($blueDark, 50)
            .time
              color alpha($blueDark, 0.2)
          &:hover
            background-color rgba(0,0,0,0.01)
            .date
              .time
                color alpha($blueDark, 50)
          .avatar
            img
              background-color $lightGrey

          .comment-details
            .author
              a
                color darken($baseThemeColor, 25)
            .text
              color $blueDark
              line-height 1.618
              text-rendering optimizeLegibility
              -webkit-font-smoothing antialiased
              img, video
                box-shadow 0 0 1vw -0.5vw $blueDark
                &.alpha
                  box-shadow none
              video
                background-color $darkGrey
            .text-feedback
              border solid 1px $lightGrey
              background-color white
              a
                &:hover
                  color $blueDark
              span
                color $greenDark
              .fa-flag
                float right
            .text-moderation
              border-bottom solid 0 $lightGrey
              .button
                &.spam
                  background-color red
          &:hover
              .text-feedback
                opacity 1
          &.me
            .text
              color lighten($blueDark, 20)
          &.spam
            .text
              opacity 0.1
          &.solution
            .text::before
              content ""
              font-family FontAwesome
              color $greenDark
              background-color white
            .text
              background-color rgba(255, 255, 255, 0.5)
              border 1px solid alpha($greenDark, 50%)


    .ask-form
      select,textarea,input[type="text"],button
        box-sizing border-box
        -webkit-appearance none
        -moz-appearance none
        font-family inherit
      select,input[type="text"],textarea
        border solid 1px $normalGrey
        color $blueDark
        background-color lighten($lightColor, 10)

      button
        background-color $baseThemeColor
        color $lightColor
        border solid 1px $baseThemeColor

      button[disabled]
        background-color desaturate($baseThemeColor, 10%)

      .private
        background rgba(0,0,0,0.1)
      .acl-list-box
        border solid 1px $normalGrey
        background-color lighten($lightColor, 10)

        $aclItemHeight = calc(1em + 1vh)
        $aclItemHalfHeight = calc(0.75em + 1vh)
        .tip
          color $darkGrey

        .item
          background-color lighten($normalGrey, 20)
          color $darkGrey
          border solid 1px lighten($normalGrey, 15)

          .name
            color $darkGrey

          img
            background-color $normalGrey

        $searchBoxWidth = 15em
        .search-box
          background-color lighten($normalGrey, 20)
          border solid 1px lighten($normalGrey, 10)

          input[type=text]
            background-color transparent
            border solid 1px transparent
          .search-box-dropdown
            background-color lighten($normalGrey, 20)
            border solid 1px lighten($normalGrey, 10)
            border-top-color transparent
            .search-box-item
              color $darkGrey
              &:hover
                background-color $blueDark
                .name
                  color white
              .name
                color $darkGrey
              img
                background-color $normalGrey


      form
        i.fa-times
          color red
        i.fa-check
          color $greenDark

  .topic-view.private > .topic
    .details
      background-color alpha($greenLight, 5%)

  .preview
      background rgba(250,250,250,0.1)
      border dashed 1px rgba(0,0,0,0.1)


    .join
      .welcoming
        color $greenDark
        text-shadow 0px 1px 1px white


  .signinform
    background-color lighten($blueDark, 70)
    .message
      color $orange
      background-color white


  .text-facebook
    color $brandFacebook
  .text-twitter
    color $brandTwitter
  .text-vk
    color $brandVK
  .text-windows
    color $brandMicrosoft
  .text-google
    color $brandGoogle
  .text-github
    color $brandGithub

  .help-block
    background-color lighten($baseThemeColor, 20)
    border solid 1px $lightGrey


  .online
    color $greenBright

  .color-secure
    color $greenLight

  .text-danger
    color $red

  .upload-container
    background-color alpha($blueLight, 0.5)
    div.center
      color white


  .categories
    .total-online
      color alpha($baseThemeColor, 50%)
      a
        color alpha($baseThemeColor, 50%)
        text-decoration-color alpha($baseThemeColor, 10%)
    .menu
      .button
        color white

  .view-panel
    background-color lighten($baseThemeColor, 10)
    blockquote
      background-color lighten(complement($baseThemeColor), 73)

  .topics-panel
    background-color lighten($baseThemeColor, 3)
    > .search-box
      border-bottom solid 1px rgba(255,255,255,0.025)
      box-shadow: 0 3px 5px -5px #000000;
      input.search
        background-color transparent
        border none
        color $darkGrey
      a
        color darken($darkGrey, 50%)

      a+input.search:focus
        color $lightGrey
    > .topics
      border-left solid 1px rgba(255,255,255,0.025)

    > .topics-switch
      height calc(3em + 1vh)
      background-color $baseThemeColor
      border-left solid 1px rgba(255,255,255,0.025)
      color $darkGrey
      box-shadow 0 0 1px -1px #000000

    .topic
      border-bottom solid 1px rgba(255,255,255,0.025)
      border-left solid 1px rgba(255,255,255,0)
      &.active
        background-color darken($baseThemeColor, 50)
        border-left solid 1px rgba(255,255,255,0.25)
        position relative
        a
          color white
          small
            color darken($baseThemeColor, 10)
            &.tag
              color lighten($baseThemeColor, 50)
      a
        color #080604