/* @charset="UTF-8"; */

@import "variables.styl"
@import "growl.notifications.styl"
@import "mixins.styl"
@import "responsive.styl"
@import "locale_en_US.styl"
@import "locale_ru_RU.styl"
@import "normalize.styl"

vertical-gradient(topColor, bottomColor)
  background topColor
  background -webkit-linear-gradient(topColor, bottomColor)
  background -o-linear-gradient(topColor, bottomColor)
  background -moz-linear-gradient(topColor, bottomColor)
  background linear-gradient(topColor, bottomColor)


body
  font-family -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"
  box-sizing border-box



button,input,textarea
  font-family inherit
  font-size inherit
  box-sizing border-box
  margin-right 0

button,input[type=submit],input[type=reset]
  padding 0.25em 1em
  text-align center
  text-decoration none
  overflow hidden
  text-overflow ellipsis
  margin 0.1em
  white-space nowrap



input[type=text],
input[type=password],
input[type=email],
input[type=tel],
input[type=number],
textarea
  padding 0.3em 0.5em
  margin 0.1em

.flex
  display flex

.flex-column 
  display flex
  flex-direction column

.flex-row 
  display flex
  flex-direction row

.container 
  height 100vh

.flex-column 
  display flex
  flex-direction column

.flex-row
  display flex
  flex-direction row

.flex-center
  justify-content center

.header  
  height calc(3em + 1vh)

.body
  height calc(99vh - 3em )

body >
  .container
    .body
      opacity 0.1
      transition opacity $fastAnimationDuration linear
      cursor wait
      z-index 1
  > .connecting
    position fixed
    left 0
    top 0
    width 100vw
    height 100vh
    display flex
    align-content center
    justify-content center
    z-index 5
    background-color alpha($blueDark, 0.9)
    div.center
      justify-content center
      color $darkGrey
      font-size 2vh
      h1
        color $orange
        font-size 10vh
        margin 1vh 0
      .text-right
        text-align right
      small
        color $greenDark

body > .container.websocketAlive .body
  opacity 1
  cursor default

.categories
  width $categoriesPanelWidth
  overflow hidden
  text-overflow ellipsis

  .total-online
    position absolute
    width $categoriesPanelWidth
    left 0
    bottom calc(4em + 1vh)
    a
      font-size 0.6em

.categories > .menu
  height calc(98vh - 6em)
  .menu
    margin 0
    padding 0

.categories > .settings
  height calc(3em + 1vh)
  border-top solid 1px rgba(255, 255, 255, 0.024)
  line-height calc(3em + 1vh)
  vertical-align middle
  text-align center
  transition all $slowAnimationDuration ease
  &.ng-hide
    line-height 0
    opacity 0
  a
    text-decoration none

.categories

  ul.menu
    text-overflow ellipsis
    li
      margin 0
      padding-top 1vh
      user-select none

      a
        transition all ease $slowAnimationDuration
        display block
        min-height calc(1em + 1vh)
        // color rgb(143,161,180)
        text-decoration none
        line-height calc(1em + 3vh)
        padding-left 2vw
        font-size calc(0.8em + 1vh * 0.25)
        border-left solid 0.0vw transparent
        text-overflow ellipsis
        overflow hidden

    li.active
      a
        padding-left 1.5vw

.button,
input[type="submit"],
input[type="reset"]
  // background-color $blueRegular
  // color white
  padding 1vh 1vw
  text-align center
  text-decoration none

.button,
.topic-info,
.show-old-comments,
input[type="submit"],
input[type="reset"]
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select none

.menu
  .button
    display block
    opacity 0.8
    margin 0
    text-overflow ellipsis
    overflow hidden
    white-space nowrap

.view-panel 
  width $topicPanelWidth
  overflow-wrap break-word

  > div
    width inherit

  blockquote
    padding 0 0.5vw
    margin 0 0.1vw


.topics-panel
  width: $topicsPanelWidth
  padding-top 0vh
  overflow hidden
  > .search-box
    height 1.2em
    padding 1vh 0.5vw
    overflow hidden
    border-bottom solid 1px rgba(255,255,255,0.025)
    box-shadow: 0 3px 5px -5px #000000;
    margin-top -1px
    input.search
      width  calc(100% - 2em)
      background-color transparent
      border none

  > .topics
    height calc(96vh - 7.2em)
    overflow-y auto
    margin-right 3px
    position relative

  > .topics-switch
      height calc(3em + 1vh)
      line-height calc(3em + 1vh)
      vertical-align middle
      text-align center
      transition all $slowAnimationDuration
      opacity 1
      &.ng-hide
        line-height 0
        opacity 0

      a
        padding 0 ($topicsPanelWidth/16)
        // color $darkGrey
        height calc(3em + 1vh - 2px)
        display inline-block
      a.active
        &::before
          content ''

  .topic-info
    width $topicsPanelWidth
    display: block
    .fa-lock
      font-size 0.8em
  .topic-status
    width 2vw
    text-align center
    display flex
    flex-direction row
    justify-content center
    vertical-align middle
    align-items center
    .counter
      font-size 0.75em
      line-height 1em
      display block
      width 1em
      height 1em

      justify-content center

  .topic
    margin 0
    padding 0
    font-size 1em

    a
      display block
      padding 1vh 1vw
      padding-left 0
      min-height 1em
      word-break keep-all
      hyphens auto
      line-break auto
      overflow hidden
      text-decoration none
      text-overflow ellipsis

    &.active
      position relative


    &.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


.topic-panel
  width $topicPanelWidth

@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


.topic-info h1
  margin-top 0

.top-bar
  font-size 1em

  .slogan
    display block
    width 65vw
    line-height calc(3em + 1vh)

  .user
    margin-top 0vh
    width 20vw
    img.avatar
      height 2.5em
    .name
      white-space nowrap
      text-overflow ellipsis

  .button
    display block
    padding-top 1vh
    padding-bottom 1vh
    padding-left 1vw
    padding-right 1vw
    text-decoration none
    cursor pointer

.loggedIn .view-panel .topic-view .topic
  height: calc(98vh - 6em);

.view-panel
  .wrapper
    margin 1vh 1vw
    #topic
      position relative
      height: calc(99vh - 4em);


  &.ng-leave
    opacity 0
    width 0
    overflow hidden

  .topic-view
    width 100%

    > .topic
      height: calc(98vh - 3em);
      overflow-y auto
      transition height ease $slowAnimationDuration
      position: relative

      .details
        padding-top 1px
        padding-bottom 1px
        .topic-body
          line-height 1.618
          text-rendering optimizeLegibility
          -webkit-font-smoothing antialiased
          img, video
            max-width 50vw
            max-height 90vh
        .topic-authoring
          margin-top 1em
          margin-bottom 1em
          padding: 0.5vh
          padding-left: 0
          padding-top: 1em
          line-height 3vh
          font-size: 1em;
          img
            height 3vh
            margin-left 0
            vertical-align middle
            border none

          .col
            margin-right 0.5vh
            line-height 3vh
            a
              text-decoration none
              font-weight 600
            .date
              i.fa-pencil
                // color $lightGrey

          .col.author
            margin-right 0
            line-height 1.5vh

            img
                float left
          .col.private
            height 2.5vh
            // color $greenLight
            padding 0.2vh 0.5vh
            // border-radius 2vh
            line-height 2vh
            font-size 1vh
            img
              height 2vh
              width 2vh
              // border-radius 1vh
              margin-left -1vh
              // border solid 0.1vh $lightColor
            .padlock + a > img
              margin-left -0.5vh
            div.padlock
              text-align center
              height 2vh
              width 2vh
              border-radius 1vh
              // border solid 0.1vh  $lightColor
              display inline-block

        pre
          overflow auto
        h1
          margin-bottom 1vh
          word-break break-word
        div.date
          // color $normalGrey
          margin-bottom 2vh

    > .compose
      min-height calc(3em + 1vh)
      max-height calc(60vh)
      line-height calc(3em + 1vh)
      // background-color white
      box-shadow 0 0 5px -2px #000000
      overflow hidden
      width $topicPanelWidth
      transition height ease 300ms
      position absolute
      bottom 0
      right 0

      button
        -webkit-appearance none
        cursor pointer
        width $topicPanelWidth * 0.065
        height calc(3em + 1vh)
        text-align center
      .controls
        width calc(4vh + 1vw)
        text-align center
        min-width 1.5em
        button
          // color $lightGrey
          // border solid 2px $lightGrey
          border-radius 1em
          width 1.5em
          height 1.5em
          text-align center
          padding 0
      .send
        width 3vw
        min-width 1em
        text-align center
        // border-left solid 0 $lightGrey
        button
          width 100%
          padding 0.25em 0
          // color $blueRegular
          font-size 1em
          text-align center
          transition:all
          animation-iteration-count 1
          animation-duration 200ms
          transform translate(0, 0) scale(1)
          margin 0
        button.sending
          animation-name flyTopRightAndDisappear
          animation-timing-function ease-out



      button[disabled]
          // color $lightGrey
      .text
        width calc(100% - 5vh - 5vw)

        textarea
          transition height ease $slowAnimationDuration
          width $topicPanelWidth * 0.85
          outline hidden
          font-size inherit
          height 2em
          border none
          padding 0
          line-height  1em
          margin-top 1em
          resize none
          outline 0
        .progress
          height 0.5vh
          .bar
            width 0
            margin-top 0.1vh
            // background-color $greenDark
            height 0.25vh
            transition width ease $slowAnimationDuration


    .details,.comments
      padding-left 1vw
      padding-right 1vw


      h1
        margin-top 1vh
        padding-top 0
        hyphens auto
        overflow-wrap break-word
        max-width $topicPanelWidth * 0.95
    .comments
      @import "typists.styl"
      .pagination
        margin-top 1vh
        text-align center
        .show-old-comments
          border-radius 3px
          font-size 0.8em
          padding 0.5vh 1vw
          text-align center
          margin-left auto
          margin-right auto
          white-space nowrap
          overflow hidden
          text-overflow ellipsis
          display inline-block
          max-width 40vw
          cursor pointer

      .comment
        margin-bottom 0
        margin-top 1vh
        padding 1vh 1vh 1vh 0
        .text
          transition all $slowAnimationDuration
          overflow-wrap break-word
        .date
          font-weight 100
          overflow hidden
          .time
            font-size 0.6em
            text-decoration none
            transition color ease $fastAnimationDuration

        .avatar
          width 4vh
          padding 0

          img
            height 3vh
            max-width 4vh

        .comment-details
          position relative
          width calc(100% - 4vh)
          .author
            font-size 0.8em
            margin-bottom 1vh
            a
              text-decoration none
              font-weight 600
          .text
            line-height 1.618
            text-rendering optimizeLegibility
            -webkit-font-smoothing antialiased
            img, video
              max-width 50vw
              max-height 80vh
              // box-shadow 0 0 1vw -0.5vw $blueDark
              display block
              margin 0.1vh auto
              &.alpha
                box-shadow none
          .text-feedback
            display flex
            opacity 0
            position absolute
            right 0
            top -1vh
            font-size 0.8em
            line-height 0.8em
            a
              display inline-block
              padding 2px 3px
              line-height inherit
              cursor pointer
            span
              line-height inherit
              padding 2px 3px

            .fa
              line-height inherit
              opacity 0.5
            .fa-flag
              float right
          .text-moderation
            display none
            .button
              padding 2px
              font-size 0.8em
          .attachments
            display flex
            flex-direction row
            flex-wrap wrap
            align-items flex-start
            justify-content space-around
            align-content space-between
            .attachment
              display inline-block
              flex auto
              margin-bottom 1vh
              margin-top 1vh
              width 24%
              align-self flex-start
              font-size 0.8em
              iframe, img
                max-width  ($topicPanelWidth / 5.1)
                max-height 20vh
                height auto
                background-color rgba(0,0,0,0.1)
              a.link
                font-size 0.8em

        &:hover
            .text-feedback
              opacity 1
        &.me
          .text
            color lighten($blueDark, 20)
        &.spam
          .text
            opacity 0.1
        &.lp
          margin-top 0
          margin-bottom 0
          padding-top 0.5vh
          padding-bottom 0.5vh
        &.up + .comment.lp
          margin-top -1vh
        &.solution
          .content::before
            content ""
            font-family FontAwesome
            font-size 1.2em
            margin-left -1.25em
            margin-right 0.4em
            padding 0
            border-radius 0.6em
            position absolute
          .content
            padding 1em

    &.advancedcompose
      > .topic
        height calc(40vh - 3em)
      > .compose
        max-height calc(3em + 60vh)
        .text
          textarea
            height calc(-0.5em + 29vh)
            margin-top 0

  .ask-form
    width 100%
    h1
      margin 1vmin
      white-space nowrap
      text-overflow ellipsis
      overflow hidden
    .label
      display block
      width 10vw
      margin 1vmin
      padding 2px 3px

    select,textarea,input[type="text"],button
      box-sizing border-box
      -webkit-appearance none
      -moz-appearance none
      font-size 1em
      margin-bottom  1vh
      padding 1vh 1vw
      font-family inherit
      border-radius 3px
    select,input[type="text"],textarea
      width 99%
      padding 1vh 1vw
      margin 0.5vh 0.5vw

    button
      margin 0.5vh 0.5vw


    .editor
      height calc(81.5vh - 14em)
    .private
      padding 1vh 1vw
      width 90%
      margin 0
      .acl-list
        flex-grow 1
      input[type="email"], button, .button
        padding 0.1vh 0.1vw
        margin 0
    .acl-list-box
      width 99%
      margin 0.5vh 0.5vw
      border-radius 3px
      display flex
      flex-wrap wrap
      padding 0.25vh 1vw

      $aclItemHeight = calc(1em + 1vh)
      $aclItemHalfHeight = calc(0.75em + 1vh)
      .tip
        display inline-block
        margin-left 0vw
        margin-right 0.5vw
        margin-top 0.3vh
        margin-bottom 0.3vh
        // color $darkGrey
        height $aclItemHeight
        line-height $aclItemHeight
        white-space nowrap
        padding 3px

      .item
        display inline-block
        max-width calc(9vw + 3em)
        margin-right 0.5vw
        height $aclItemHeight
        line-height $aclItemHeight
        white-space nowrap
        border-radius $aclItemHalfHeight
        padding 2px
        margin-top 0.3vh
        margin-bottom 0.5vh

        .name
          max-width 9vw
          font-size 0.7em
          line-height $aclItemHeight
          height calc(1.2em + 1vh)
        span
          overflow hidden
          text-overflow ellipsis
          line-height $aclItemHeight
          display inline-block

        img
          height $aclItemHeight
          width $aclItemHeight
          border-radius $aclItemHalfHeight
          display inline-block
          // background-color $normalGrey

      $searchBoxWidth = 15em
      .search-box
        display inline-block
        margin-right 0.1vw
        margin-top 0.3vh
        margin-bottom 0.5vh
        position relative
        white-space nowrap
        // background-color lighten($normalGrey, 20)
        height calc(1.25em + 1vh)
        line-height calc(1.25em + 1vh)
        width $searchBoxWidth
        padding 0px
        // border solid 1px lighten($normalGrey, 10)
        border-radius $aclItemHalfHeight

        input[type=text]
          position absolute
          top 0
          left 0
          background-color transparent
          padding 2px
          margin 0
          margin-left 0.5em
          height inherit
          line-height inherit
          width ($searchBoxWidth - 3em)
          // border solid 1px transparent
          border-bottom-left-radius $aclItemHalfHeight
          border-top-left-radius $aclItemHalfHeight
          z-index 2
          outline none
        .button
          position absolute
          top 0
          right -1px
          padding 0
          width 2.5em
          text-align center
          height: $aclItemHeight
          margin-bottom: 0;
          margin-top: -1px;
          padding-bottom: 3px;
          padding-top: 3px;
          padding-right 4px
          line-height $aclItemHeight
          display inline-block
          border-bottom-right-radius $aclItemHalfHeight
          border-top-right-radius $aclItemHalfHeight
          z-index 2
        .search-box-dropdown
          position absolute
          top calc(0.6120em + 0.5vh);
          width $searchBoxWidth
          border-top-color transparent
          border-bottom-left-radius $aclItemHalfHeight
          border-bottom-right-radius $aclItemHalfHeight
          z-index 1
          padding-top 1em
          padding-bottom 1em
          padding-left 0
          margin-left: -1px
          transition all 100ms
          .search-box-scroll-wrapper
            max-height 10em
            overflow-y auto

          .search-box-item
            display block
            max-width $searchBoxWidth
            margin-right 0
            margin-top 0
            margin-bottom 0
            color $darkGrey
            height $aclItemHeight
            line-height $aclItemHeight
            white-space nowrap
            padding 2px
            padding-left 0.5em

            &:hover
              background-color $blueDark
              .name
                color white

            .name
              max-width $searchBoxWidth - 3em
              font-size 0.7em
              line-height $aclItemHeight
              height calc(1em + 1vh)
              color $darkGrey
              overflow hidden
              text-overflow ellipsis
              display inline-block


            img
              display inline-block
              height $aclItemHeight
              width $aclItemHeight
              line-height $aclItemHeight
              border-radius $aclItemHalfHeight
              overflow hidden
              text-overflow ellipsis
              font-size 0.5em
              background-color $normalGrey


    form
      input + i.fa,
      input + i + i.fa,
      select + i.fa,
      select + i + i.fa,
      textarea + i.fa,
      textarea + i + i.fa
      .acl-list-box + i.fa
      .acl-list-box + i + i.fa
        line-height: calc(1.5em + 2.5vh);
        position absolute
        margin-left 0
        opacity 0.25
        right 1vw

      .ng-touched + .fa
        opacity 1

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

.topic-view.private > .topic
  .details
    h1
      margin-bottom 0.1vh

.preview
    overflow auto
    padding 1vmin
    margin 1vmin
    background rgba(250,250,250,0.1)
    border dashed 1px rgba(0,0,0,0.1)
    height 35vh
    width  auto

  .user-info
    width 100%
    h1
      text-align center
    div
      text-align center
  .user-topics
    margin-left 1vw
    .topic
      margin-left 1vw

  h1
    margin-left 0
    font-weight 200
    @media (max-width $screen-xs-max)
      font-size 1.2em

  h2
    @media (max-width $screen-xs-max)
      font-size 1.2em


    pre, code
      font-size 1em

  .join
    .welcoming
      color $greenDark
      text-shadow 0px 1px 1px white
      font-size 1.5em
      text-align center
      font-style italic
      padding 1em

pre,
code,
.mono,
kbd
  tab-size: 4;
  -moz-tab-size: 4;
  -webkit-tab-size: 4;
  -o-tab-size: 4;

pre,
code,
.mono
  white-space: pre-wrap
  -webkit-font-smoothing auto

.signinform
  padding 1vh 2vw
  label
    display inline-block
    min-width 5em
    width 5vw
  input, textarea
    font-family inherit
    font-size inherit
  .message
    padding 0.5em
    color $orange
    background-color white


.text-center
  text-align center

.text-left
  text-align left

.text-right
  text-align right

.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($orange, 20)
  border solid 1px $lightGrey
  margin-top 0
  padding 1vh
  font-size 0.8em

lr-bookmark
  display inline-block
  .bookmark-this-topic
    font-size 100

.online
  color $greenBright
  font-size 0.6em
  vertical-align: middle;

.color-secure
  color $greenLight

.text-danger
  color $red

@import 'settings.styl'

@import 'logo.styl'

@import 'editor.styl'

@import 'user.styl'

@import 'googlecode.styl'

@import 'rank.styl'

@import 'call.styl'

@import 'themes/default-blue.styl'

@import 'themes/hacker.styl'

@import 'themes/orange.styl'

@import 'themes/winter.styl'

body > .upload-container
  position fixed
  left 0
  top 0
  width 100vw
  height 100vh
  display none
  align-content center
  justify-content center
  z-index 5
  background-color alpha($blueLight, 0.5)
  div.center
    justify-content center
    color white
    font-size 2em

body.upload-accept > .upload-container
  display flex

@-moz-document url-prefix()
  select
    text-indent -2px

.clearfix::after
  clear both
  content "."
  display block
  font-size 0
  height 0
  line-height 0
  visibility hidden

attachment
  display inline-block