
@import 'variables.less';

::-webkit-scrollbar {
	width: 14px;
}

// ::-webkit-scrollbar-track {
// 	background: @darkGray;
// }

::-webkit-scrollbar-thumb {
	background: @darkGray;
	border: 1px solid @darkGray;
  
  &:hover{
    background: lighten(@darkGray, 2.5%);
  }
  
  &:active{
    background: lighten(@darkGray, 5%);
  }
}

html{
  
  body{
    font-family: 'Armata';
    font-size: 16px;
    line-height: 1.5;
    background-color: @lightGray;
    border: 1px solid darken(@darkGray, 5%);
    
    .font-code-light{
      font-family: 'Code Light';
    }
    
    .font-code{
      font-family: 'Code';
    }
    
    .font-armata{
      font-family: 'Armata';
    }
    
    h1,h2,h3,h4,h5,h6 {
      font-family: 'Code Light';
    }
    
    .btnWithHover(@color){
      background-color: lighten(@color, 6%);
      
      // Normal or clicked but not hovering
      &:active:not(:hover){
        background-color: lighten(@color, 6%);
        box-shadow: none;
      }
            
      &:hover{
        background-color: lighten(@color, 3%);
      }
      
      &:hover:active{
        background-color: @color;
      }
    }
    
    button, a{
      &:focus,
      &:active,
      &:hover{
        outline: 0 !important;
      }
    }
    
    .btn
    {        
      &.btn-default { .btnWithHover(@lightestGray); color: @white; }
      &.btn-primary { .btnWithHover(@lightBlue); }
      &.btn-success { .btnWithHover(@lime); }
      &.btn-info { .btnWithHover(@purple); }
      &.btn-warning { .btnWithHover(@orange); }
      &.btn-danger { .btnWithHover(@magenta); }
    }
    
    .panel{
      background-color: @darkGray;
           
      & > .panel-heading{
        background-color: @darkGray;
        border-bottom: 2px solid @white;
        font-size: 18px;
      }
      
      &.panel-default{
        .panel-heading {
          border-bottom: 2px solid @white;
        }
      }
      
      &.panel-primary{
        .panel-heading {
          border-bottom: 2px solid @lightBlue;
        }
      }
            
      &.panel-success{
        .panel-heading {
          border-bottom: 2px solid @lime;
        }
      }
      
      &.panel-info{
        .panel-heading {
          border-bottom: 2px solid @purple;
        }
      }
      
      &.panel-warning{
        .panel-heading {
          border-bottom: 2px solid @orange;
        }
      }
      
      &.panel-danger{
        .panel-heading {
          border-bottom: 2px solid @magenta;
        }
      }
    }
    
    .modal-dialog{
      .modal-content{
        background-color: @lighterGray;
        
        .modal-header,.modal-footer{
          background-color: @lightGray;
        }
      }
    }
    
    .form-horizontal{
      .control-label{
        padding-top: 6px;
      }
    }
    
    label,
    .radio label,
    .checkbox label,
    .help-block {
      font-size: 16px;
      font-weight: normal;
    }
    
    input{
      background-color: @white;
      color: @black;
      transition: 0.2s linear all;
      
      &.ng-invalid{
        box-shadow: 0px 0px 8px 3px @lightMagenta;
        transition: 0.1s linear all;
      }
    }
    
    .content{
      
      .side-nav {
        font-family: 'Code';
        background-color: @darkGray;
        
        .side-header{
          background-color: @darkBlue;
          border-bottom: 4px solid @lime;
        }
        
        .list-group {
          
          .hover-border(@color, @width: 8px){
            border-right: @width solid @color;
            border-left: @width solid @color;
          }
          
          
          .menu-item-transition() {
            transition: border 0.1s linear, background-color 0.2s linear;
          }
          
          .list-group-item{
            border: 0px solid @magenta;
            background-color: @darkGray;
            
            .menu-item-transition();
            
            &:not(.active){
              &:hover{
                .hover-border(@magenta);
                .menu-item-transition();
              }
            }
            
            &.active{
              background-color: @lightGray;
              .hover-border(@lime);
              .menu-item-transition();
            }            
          }
        }
      }
      
      .main-content{
        overflow: hidden;
        .page-title{
          background-color: @darkGray;
          border-bottom: 4px solid @magenta;
        }
        
        .scroll-wrapper{
          
        }
      }
    }
  }
}