
@import 'variables.less';

@sideNavWidth: 220px;
@logoMargin: 15px;
@logoSize: @sideNavWidth - 2 * @logoMargin;
@pageHeaderHeight: 80px;

.no-select{
  -webkit-user-select: none;
}

html{ 
  height:100%;
  
  body{
    width:100%;
    height: 100%;
    
    .no-select();
    
    textarea{
      resize: none;
      //-webkit-user-select: text;
    }
        
    .full-height{
      height: 100%;
    }
    
    button, a, input{
      outline: none;
    }
    
    .modal-dialog{
      margin-top: 100px;
    }
    
    .hover-area{
      
      .hover-hint{
        opacity: 0;
        transition: opacity 0.2s linear;
        transition-delay: 0.2s;
        font-size: 14px;
        display: block;
        position: relative;
      }
      
      &:hover{
        .hover-hint{
          .no-select();
          opacity: 0.8;
          transition: opacity 0.2s linear;
        }
      }
    }
    
    .content{
      width:100%;
      height: 100%;
            
      .side-nav,
      .main-content {
        float: left;
        height: 100%;
      }
      
      .side-nav {
        position: relative;
        width: @sideNavWidth;
        .no-select();
        
        .side-header{
          width:100%;
          margin-bottom: 10px;
          padding: 4px;
          
          .sc-logo {
            display: block;
            font-size: 34px;
            line-height: 1;
            text-align: right;
            -webkit-app-region: drag; // Draggable (frameless)
          }
        }
        
        .list-group {
          
          
          
          .list-group-item{
            outline: none;
            
            &.active{
              cursor: default;
            }            
          }
          
          &.top {
            margin: 0;
            font-size: 20px;
            
            .list-group-item {
              
              > .glyphicon {
                margin-right: 15px;
              }
              
            }
            
          }
          
          &.bottom {
            position: absolute;
            bottom: 0;
            left: 0;
            width: @sideNavWidth;
          }
        }
      }
      
      .main-content {
        width: ~"calc(100% - @{sideNavWidth})";
        overflow: hidden;
        
        .page-title {
          width: 100%;
          height: @pageHeaderHeight;
          overflow: hidden;
          .no-select();
          padding-top: 4px;
          
          h1{
            margin: 0;
            padding-top: 10.5px;
            padding-bottom: 21px;
            -webkit-app-region: drag; // Draggable (frameless)
            
            button{
              -webkit-app-region: no-drag;
            }
          }
        }
        
        .scroll-wrapper{
          height: ~"calc(100% - @{pageHeaderHeight})";
          overflow-x: hidden;
          overflow-y: auto;
          
          .scroll-container{
            padding-top: 15px;
          }
          
        }
        
      }
    }
    
    #scripts{
      display:none;
    }
  }
}