bigbluebutton-Github/labs/bbb-html5-client/public/css/layout.less

// Color   
//-------------------------------------

@white:                 #fff;
@grayLight:             #aaa;
@grayLight1:            #999;
@grayLighter:           #ddd;
@grayLighter1:          #eee;
@grayLightest:          #f6f6f6;
@grayLightest1:         #f7f7f7;
@gray:                  #666;
@grayDark:              #999a9d; 
@garyDark1:             #555; 
@grayDarker:            #6d6f77;
@grayDarker1:           #33343b;
@grayDarkest:           #333;
@grayDarkest1:          #2f3138;
@grayDarkest2:          #222;
@red:                   #a72424;
@blueLight:             #007fff;
@blue:                  #0000ff;

// Font  
//-------------------------------------

@baseFontSize:          14px;
@fontSizeMini:          @baseFontSize * 0.65;    // 9px
@fontSizeSmall:         @baseFontSize * 0.85;    // 12px
@fontSizeLarge:         @baseFontSize * 1.7;     // 24px
@fontSizeXLarge:        @baseFontSize * 2.28;    //32px
@baseFontFamily:        Arial, Helvetica, "Helvetica Neue", sans-serif;

//Z-index list
//-------------------------------------

@zindexChat:                    0;
@zindexWhiteboard:              1;
@zindexUsers:                   2;
@zindexNavbar:                  3;
@zindexColorPicker:             9;
@zindexButton:                  1000;


//Mixins 
//--------------------------------------

.bordered(@top,@left,@right,@bottom){
  border-top:@top;
  border-left:@left;
  border-right:@right;
  border-bottom:@bottom;
}

.position(@position,@top,@left,@right,@bottom){
  position: @position;
  top: @top;
  left: @left;
  right: @right;
  bottom: @bottom;
}

.linear-gradient(@angle,@startColor,@endColor){
  background: -moz-linear-gradient(@angle, @startColor, @endColor);
  background: -webkit-linear-gradient(@angle, @startColor, @endColor);
}

.width-height(@width:100%,@height:100%){
  width: @width; 
  height: @height;
}

//Components
//-----------------------------------------

html,#container,#session-view { 
  .width-height;
}


body { 
  .width-height;
  overflow: hidden; 
  font: @fontSizeSmall @baseFontFamily;
}


#layout {
  position: relative;
  background: @grayLight;
  .width-height;
  display: table;
}


#whiteboard {
  .position(absolute,0,-1px,-1px,69px);
  overflow: hidden;
  background: @grayLight;
  -moz-transition: right .5s, left .5s;
  -webkit-transition: right .5s, left .5s;
  z-index: @zindexWhiteboard;
  .bordered(none,1px solid @grayLight1,1px solid @grayLight1,none);
  vertical-align: middle;
  display: table-cell;

    object {
      .position(absolute,0,0,0,0);
      display: block;
      max-width: 100%;
      max-height: 100%;
      margin: auto;
    }
}


#chat {
  .position(absolute,0,none,0,65px);
  width: 300px;
  background: @grayLightest;
  z-index: @zindexChat;
  top: 200px;
    > h3 {
      .linear-gradient(top,@white,@grayLighter);
      font-size: @fontSizeSmall;
      line-height: 32px;
      font-weight: bold;
      padding: 0 16px;
      text-transform: uppercase;
      color: @gray;
      border-bottom: 1px solid @grayLight;
    }
}


.chat-enabled #whiteboard {
  right: 300px;
}


.users-enabled #whiteboard {
  left: -1px;
}


#navbar {
  .position(fixed,none,0,0,0);
  height: 67px;
  background: @grayDarkest;
  .linear-gradient(top,#494c56,#42444c);
  .bordered(1px solid @grayDarkest1,none,none,1px solid @grayDarkest1);
  text-align: left;
  z-index: @zindexNavbar; /* over #whiteboard and sidebars */
    a {
      color: @white;
      text-decoration: none;
    }
}


.navbar-btngroup {
  .bordered(none,1px solid @grayDarkest2,1px solid @garyDark1,none);
  display: inline-block;
  font-size: 0;
    &.pull-right {
      position: absolute;
      right: 0;
      border-right: none;
    }
}


.navbar-btn {
  display: inline-block;
 .width-height(74px,67px);
  padding: 38px 3px 5px 3px;
  .linear-gradient(top,#494c56,#42444c);
  .bordered(none,1px solid #62646c,1px solid #2f3138,none);
  color: @white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  text-transform: uppercase;
  font-size: @fontSizeMini;
  line-height: 24px;
  position: relative;
  cursor: pointer;
    &:hover {
      background: @grayDarker;
      color: @white;
    }

    &.active {
      background: @grayDarker1;
      color: @grayDark;
     .bordered(none,1px solid @grayDarker1,1px solid @grayDarker1,none);
    }

    &:active {
      background: @grayDarker1;
      color: @grayDark;
      .bordered(none,1px solid @grayDarker1,1px solid @grayDarker1,none);
      background-image: -moz-linear-gradient(top, #58ade3, #58ade3), -moz-linear-gradient(top, @grayDarker1, @grayDarker1);
      background-image: -webkit-linear-gradient(top, #58ade3, #58ade3), -webkit-linear-gradient(top, @grayDarker1, @grayDarker1);
      background-size: 72px 3px, 100% 100%;
      background-repeat: no-repeat;
      background-position: 0 63px, 0 0;
    }

    &.active:hover {
      background-image: -moz-linear-gradient(top, #58ade3, #58ade3), -moz-linear-gradient(top, @grayDarker, @grayDarker);
      background-image: -webkit-linear-gradient(top, #58ade3, #58ade3), -webkit-linear-gradient(top, @grayDarker, @grayDarker);
      color: @white;
    }

    &.active:active {
      background-image: -moz-linear-gradient(top, #58ade3, #58ade3), -moz-linear-gradient(top, @grayDarker1, @grayDarker1);
      background-image: -webkit-linear-gradient(top, #58ade3, #58ade3), -webkit-linear-gradient(top, @grayDarker1, @grayDarker1);
      background-size: 72px 3px, 100% 100%;
      background-repeat: no-repeat;
      background-position: 0 63px, 0 0;
      color: @grayDark;
    }

     .notification {
        display: block;
        .position(absolute,11px,none,17px,none);      
        background: @red;
        background-image: -moz-linear-gradient(top, @red, #8f1f1f);
        background-image: -webkit-linear-gradient(top, @red, #8f1f1f);
        text-shadow: 0 -1px rgba(0,0,0,0.5);
        border-top: 1px solid #cc7e7e;   
        padding: 1px 4px;
        font-size: @fontSizeMini;
        border-radius: 2px;
        line-height: 12px;
        color: @white;
        font-weight: bold;
        box-shadow: 0 1px 1px rgba(0,0,0,0.5);
    }

    i {
        display: block;
        .position(absolute,10px,0,0,none);
        font-size: @fontSizeXLarge;
        line-height: 32px;
        margin: auto;
    }
}


button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
}


button:focus, textarea:focus, input:focus {
  box-shadow: 0 0 4px rgba(88,173,227,0.5) inset;
  outline: none;
  z-index: @zindexButton;
}


#chat-entry {
  .position(absolute,none,0,0,16px);
    > textarea {
      .position(absolute,none,16px,none,0);
      font-family: @baseFontFamily;
      font-size: @fontSizeSmall;
      .width-height(197px,25px);
      resize: none;
      background: @white;
      border: 1px solid #ccc;
      margin: 0;
      padding: 3px;
      border-radius: 4px 0 0 4px;
    }

    > button {
      .position(absolute,none,none,16px,0);
      .width-height(63px,33px);
      margin: 0;
      border: 1px solid #ccc;
      border-left: none;
      border-radius: 0 4px 4px 0;
      .linear-gradient(top,@white,@grayLighter);
    }

    > button:active {
      background: @grayLighter;
    }
}


#chat-messages {
  .position(absolute,33px,0,0,62px);
  overflow: auto;
  background: @white;
  padding: 8px;
  border-radius: 4px 4px 0 0;
  border-bottom: 1px solid #ccc;
}


#chat-input-box {
  width: 250px;
}


.textinput {
  font-family: @baseFontFamily;
  font-size:14px; /* keep in pixels*/
  resize:none;
  display:block;
}

.user {
  height: 32px;
  line-height: 32px;
  border-bottom: 1px solid @grayLighter;
  padding: 0 8px;
    &:nth-child(even) {
      background: @grayLighter1;
    }

    &:before {
      content: "\f007";
      font-family: FontAwesome;
      font-weight: normal;
      font-style: normal;
      display: inline-block;
      margin-right: 8px;
    }

    &:nth-child(even).selected {
      color: @white;
      background: @blueLight;
      .linear-gradient(top,@blueLight,#005fdf);
    }

}


.presenter:before {
  content: "\f0d0";
}


.clickable {
  cursor:pointer;
}


.selected {
  color: @white;
  background: @blueLight;
  .linear-gradient(top,@blueLight,#005fdf);
}


#chat_input {
  clear: both;
  display: block;
  float: right;
}


#slide-upload-controls {

}


#chat_title {
  padding-left: 25px;
}


#listUsers {
  float: right;
}


#current-users {
  .position(absolute,33px,0,0,65px);
  background: @white;
}


#switch-presenter {
  .position(absolute,none,0,0,0);
  height: 32px;
  margin: 16px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  .linear-gradient(top,@white,@grayLighter);
  height: 32px;
  cursor: pointer;
}


#ChatAndControls {
  float:right;
}


#logout {
  float: right;
}


#send_chat {
  float:right;
}


#slide-controls {
  display: none;
  width: 800px;
  margin: 0 auto;
    form {
      display: inline;
    }

    * {
      float: left;
      margin: 5px 10px 0 0;
    }
}


#thickness-slider {
  width: 60px;
}


#colour-text {
  width: 50px;
  margin-left: 5px;
}


#colour-view {
  margin-left: 5px;
  cursor:pointer;
}


#colour-picker {
  position: absolute;
  z-index: @zindexColorPicker; /* over everything */
}


.canvas {
  border: 1px solid @blue;
  position: absolute;
}


#login-view {
  width: 400px;
  margin: 50px auto;
  border: 10x solid @grayLighter;
  padding: 10px;
  background: @grayLightest;
  h1 {
    font-size: @fontSizeLarge;
    font-weight: bold;
    text-align: center;
    margin: 5px 0 20px 0;
  }
}


#slide {
  position: relative;
  margin: 0 auto;
  overflow:hidden; /* so they don't overlap */
  .width-height(99%,99%);
  border: 1px solid #888;
    .preupload-image {
      display: none;
    }
     > svg {
      .width-height;
      margin: 0 auto;
    }
}


/* TODO: temporary adaptation for iPads */


.whiteboard-tools {
  display: none;
}


#users {
  .position(absolute,0,auto,0,65px);
  background: @grayLightest;
  z-index: @zindexUsers;
  border-left: 1px solid #888;
  width: 300px;
  display: none;
   > h3 {
      .linear-gradient(top,@white,@grayLighter);
      font-size: @fontSizeSmall;
      line-height: 32px;
      font-weight: bold;
      padding: 0 16px;
      text-transform: uppercase;
      color: @gray;
      border-bottom: 1px solid @grayLight;
    }
}


#video {
  .position(absolute,0,none,0,none);
  .width-height(300px,200px);
  background: blue;
}