523 lines
10 KiB
Plaintext
523 lines
10 KiB
Plaintext
// 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;
|
|
}
|
|
|