@import '../../node_modules/bootstrap-styl/bootstrap/index.styl'
@import '../components/widget'
@import 'colors/che-colors.styl'

che-separator()
  position absolute
  top 0
  height 24px
  margin-top 12px
  border-left solid 1px $label-primary-color
  content ""

che-roundimage()
  border-radius 50%

che-developers-face()
  box-shadow-simple()
  border-radius 1px
  height 14px
  width 14px
  padding 0

$che-logs-output-font = "Droid Sans Mono", monospace

.browsehappy
  margin 0.2em 0
  background #ccc
  color #000
  padding 0.2em 0

.thumbnail
  height 200px

.dark-menu-bg
  background-color $menu-bg-color

md-sidenav.dark-menu-bg
  overflow hidden

  img.pull-right
    width 50px

md-sidenav
  box-shadow none !important
  width 200px
  min-width 200px

md-sidenav > *
  width 200px
  min-width 200px

html
body
  font-size 13px
  font-family 'Open Sans'
  background-color $background-site-color
  min-width 600px

button,
select,
html,
textarea,
input
  font-family 'Open Sans'

label
  margin-bottom 0

.h1 .small, .h1 small, .h2 .small, .h2 small, .h3 .small, .h3 small, h1 .small, h1 small, h2 .small, h2 small, h3 .small, h3 small, h4 .small, h4 small, h5 .small, .h5 small, h6 small, h6 .small
  font-size 65%
  color #777

label
  font-weight normal !important

md-divider
  border-top-color #353E5D !important
  margin 0 10px

md-toolbar
  font-size 1em
  flex 1

md-option
  padding 5px
  height auto

md-option:hover
  background-color $hover-on-list-color

.md-open-menu-container
  transition none !important

  md-menu-item
    transition none !important

.main-page
  min-width 320px

.progress-line
  position absolute
  left 0
  right 0
  height 5px
  z-index 80

.main-page-loader
  position absolute
  top 0
  bottom 0
  left 0
  right 0
  margin auto
  color white
  background-color black
  z-index 80

  .ide-page-loader-content img
    position fixed
    top 0
    bottom 0
    left 0
    right 0
    margin auto

.not-visible
  visibility hidden

// injector
// endinjector

.che-logo
  width 137px
  margin-top 10px
  margin-bottom 20px

.che-hover:hover
  che-brightness(80%)

.animate-show.ng-hide-add
  opacity 0

.animate-show.ng-hide
  transition 0.5s linear all

.ng-cloak
  display none !important

.image-loader-fadein.ng-enter
  opacity 0
  animation popInEffect 0.5s

.image-loader-fadein.ng-enter-active
  opacity 1

@keyframes popInEffect
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }

/*
.ide-show.ng-hide-remove
  transition 0.5s linear all
  opacity 1

.ide-show.ng-hide-add
  opacity 0
  transition 0.5s linear all
*/

::-webkit-scrollbar
  width 10px

::-webkit-scrollbar-track
  border-radius 5px
  background rgba(0, 0, 0, 0.1)

::-webkit-scrollbar-thumb
  border-radius 5px
  background rgba(0, 0, 0, 0.2)

::-webkit-scrollbar-thumb:hover
  background rgba(0, 0, 0, 0.4)

::-webkit-scrollbar-thumb:window-inactive
  background rgba(0, 0, 0, 0.05)

.spinner
  width 120px
  height 110px
  text-align center
  font-size 10px

.spinner > div
  background-color $che-medium-blue-color
  height 100%
  width 8px
  border-radius 6px
  margin-right 6px
  display inline-block
  animation sk-stretchdelay 1.2s infinite ease-in-out

.spinner .rect2
  animation-delay -1.1s

.spinner .rect3
  animation-delay -1.0s

@-webkit-keyframes sk-stretchdelay
  0%, 40%, 100%
    -webkit-transform scaleY(0.4)
  20%
    -webkit-transform scaleY(1.0)

@keyframes sk-stretchdelay
  0%, 40%, 100%
    transform scaleY(0.4)
    -webkit-transform scaleY(0.4)
  20%
    transform scaleY(1.0)
    -webkit-transform scaleY(1.0)

.logo-color-white .outer-fill
  fill $che-white-color

.noselect
  user-select none

md-tabs-canvas md-tab-item
  margin-right -1px
  .md-tab.md-active
    border-bottom 5px solid #fdb940
    height 100%

.error
  color $error-color

md-tabs-wrapper
  z-index 1
  md-tab-item
    background-color inherit !important
    .error-state, .warning-state
      position absolute
      display inline-block
      font-size 14px
      margin-top 5px
      margin-left -15px
    .error-state
      color $error-color !important

    .warning-state
      color $warning-color !important
      margin-left -18px

.popover
  font-family 'Open Sans'
  font-size 12px
  border-radius 2px

.authorization-error
  color: $error-color
  font-weight: 600
  width: 100%
  text-align: center
  position: absolute
  top: 50%
