BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
3c447287f3
bigbluebutton-Github/labs/bbb-html5-client/assets/css/layout.less
Leonardo Crauss Daronco a20f3f3f6d HTML5: use less instead of plain css 
Using connect-assets to automatically compile less files into css files and
serve them. All less files should be under assets/css/.
The current layout file is using less but it's a plain css, with its content
simply copied from the old layout.css file.
2013-10-31 12:50:52 -02:00

1062 lines
20 KiB
Plaintext
Raw Blame History

/* All Smartphones in portrait and landscape ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* YOUR STYLE GOES HERE */
}
/* All Smartphones in landscape ----------- */
@media only screen
and (min-width : 321px) {
/* YOUR STYLE GOES HERE */
}
/* All Smartphones in portrait ----------- */
@media only screen
and (max-width : 479px) {
/* YOUR STYLE GOES HERE */
}
/***** ANDROID DEVICES *****/
/* Android 240 X 320 ----------- */
@media only screen
and (max-width: 241px){
/* YOUR STYLE GOES HERE */
}
/* Android(Samsung Galaxy) in portrait 380 X 685 ----------- */
@media only screen
and (min-width: 375px)
and (max-width: 385px){
/* YOUR STYLE GOES HERE */
}
/* Android(Samsung Galaxy) in Landscape 685 X 380 ----------- */
@media only screen
and (min-width: 680px)
and (max-width: 690px){
/* YOUR STYLE GOES HERE */
}
/* Kindle Portrait 600 X 1024 ----------- */
@media only screen
and (min-width: 595px)
and (max-width: 610px){
/* YOUR STYLE GOES HERE */
}
/* Kindle Landscape 1024 X 600 ----------- */
@media only screen
and (min-width: 1000px)
and (max-width: 1030px){
/* YOUR STYLE GOES HERE */
}
/***** ALL GENERATION IPADS *****/
/* iPads in portrait and landscape----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* YOUR STYLE GOES HERE */
}
/* iPad in landscape----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* YOUR STYLE GOES HERE */
}
/* iPad in portrait----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait){
/* YOUR STYLE GOES HERE */
}
/***** Retina IPAD 3 & 4*****/
/* Retina iPad 3 & 4 in portrait and landscape----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2){
/* YOUR STYLE GOES HERE */
}
/* Retina iPad 3 & 4 in landscape----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2){
/* YOUR STYLE GOES HERE */
}
/* Retina iPad 3 & 4 in landscape----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2){
/* YOUR STYLE GOES HERE */
}
/***** IPAD 1 & 2 (ALSO IPAD MINI)*****/
/* iPad 1 & 2 in portrait and landscape ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1){
/* YOUR STYLE GOES HERE */
}
/* iPad 1 & 2 in landscape ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1) {
/* YOUR STYLE GOES HERE */
}
/* iPad 1 & 2 in portrait ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1){
/* YOUR STYLE GOES HERE */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* YOUR STYLE GOES HERE */
}
/* Only iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* YOUR STYLE GOES HERE */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
html,body,#container, #session-view, #layout{
width: 100%;
height: 100%;
}
body {
overflow: hidden;
font: 12px Arial, Helvetica, "Helvetica Neue", sans-serif;
color:#666;
}
img.logo {
bottom: 5%;
height: 50px;
left: 35%;
position: absolute;
width: 50px;
}
#layout {
background: #ddd;
position: relative;
overflow: scroll;
}
#whiteboard {
position: relative;
background: #ddd;
top: 6vh;
left: -1px;
width:100%;
bottom: 2vh;
z-index: 1;
border-top: none;
border-bottom: none;
vertical-align: middle;
text-align: center;
overflow: hidden;
height:88vh;
}
#chat {
position: absolute;
right: 0;
top: 35vh;
bottom: 0vh;
width: 22vw;
background: #fff;
z-index: 6;
display:none;
overflow: hidden;
border-left:1px solid #ccc;
}
#video {
position: absolute;
top: 6vh;
right: 0;
background: blue;
z-index: 5;
width:22vw;
height:29vh;
display:none;
overflow: hidden;
}
#whiteboard object {
display: block;
position: absolute;
max-width: 100%;
max-height: 100%;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
#navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 6vh;
min-height: 0.75cm;
background: #333;
background: -moz-linear-gradient(top, #494c56, #42444c);
background: -webkit-linear-gradient(top, #494c56, #42444c);
background: -ms-linear-gradient(top,#494c56, #42444c);
background: -o-linear-gradient(top, #494c56, #42444c);
border-left: none;
border-right: none;
border-bottom: 1px solid #2f3138;
text-align: center;
z-index: 13;
}
#hide-menu-btn{
position:absolute;
right: 0px;
top: 0;
z-index: 12
}
#navbar a {
color: #ffffff;
text-decoration: none;
}
.navbar-btngroup-left {
border-left: 1px solid #222;
border-right: 1px solid #555;
display: inline-block;
font-size: 0;
vertical-align: middle;
text-align: left;
white-space: nowrap;
position: absolute;
left:0;
height:6vh;
position: block;
}
.navbar-btngroup-right {
border-left: 1px solid #222;
border-right: 1px solid #555;
display: inline-block;
font-size: 0;
vertical-align: middle;
text-align: right;
white-space: nowrap;
position: absolute;
height:6vh;
width: 8vh;
right:8vh;
}
.navbar-btn {
width: 8vh;
height: 6vh;
min-height: 0.75cm;
min-width: 1cm;
padding: 0;
background: -moz-linear-gradient(top, #494c56, #42444c);
background: -webkit-linear-gradient(top, #494c56, #42444c);
background: -ms-linear-gradient(top,#494c56, #42444c);
background: -o-linear-gradient(top, #494c56, #42444c);
border-top: none;
border-left: 1px solid #62646c;
border-right: 1px solid #2f3138;
border-bottom: none;
color: #ffffff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
text-transform: uppercase;
position:relative;
cursor: pointer;
text-align: center;
vertical-align: middle;
margin-bottom: 0;
font-size: 2.5vh;
line-height:4vh;
}
.icon{
height:6vh;
width:4vh;
min-height: 1.5625cm;
min-width: 1.75cm;
}
.navbar-btn:hover {
background: #6d6f77;
color: #ffffff;
}
.navbar-btn:active, .navbar-btn.active {
background: #33343b;
color: #999a9d;
border-top: none;
border-right: 1px solid #33343b;
border-bottom: none;
}
.navbar-btn:active {
background: #33343b;
color: #999a9d;
border-top: none;
border-left: 1px solid #33343b;
border-right: 1px solid #33343b;
border-bottom: none;
background-image: -moz-linear-gradient(top, #33343b, #33343b), -moz-linear-gradient(bottom, #58ade3, #58ade3);
background-image: -webkit-linear-gradient(top, #33343b, #33343b), -webkit-linear-gradient(bottom, #58ade3, #58ade3);
background-size: 100px 45px, 100% 98%;
background-repeat: no-repeat;
}
.navbar-btn.active:hover {
background-image: -moz-linear-gradient(top, #33343b, #33343b), -moz-linear-gradient(bottom, #58ade3, #58ade3);
background-image: -webkit-linear-gradient(top, #33343b, #33343b), -webkit-linear-gradient(bottom, #58ade3, #58ade3);
background-image: -ms-linear-gradient(top, #33343b, #33343b3),-ms-linear-gradient(bottom, #58ade3, #58ade3);
background-image: -o-linear-gradient(top, #33343b, #33343b),-o-linear-gradient(bottom, #58ade3, #58ade3);
color: #ffffff;
}
.navbar-btn.active, .navbar-btn.active:active {
background-image: -moz-linear-gradient(top, #33343b, #33343b), -moz-linear-gradient(bottom, #58ade3, #58ade3);
background-image: -webkit-linear-gradient(top, #33343b, #33343b), -webkit-linear-gradient(bottom, #58ade3, #58ade3);
background-image: -ms-linear-gradient(top, #33343b, #33343b),-ms-linear-gradient(bottom, #58ade3, #58ade);
background-image: -o-linear-gradient(top, #33343b, #33343b),-o-linear-gradient(bottom, #58ade3, #58ade);
background-size: 100px 45px, 100% 98%;
background-repeat: no-repeat;
color: #999a9d;
}
.navbar-btn .notification {
display: block;
position: absolute;
background: #a72424;
background-image: -moz-linear-gradient(top, #a72424, #8f1f1f);
background-image: -webkit-linear-gradient(top, #a72424, #8f1f1f);
background-image: -ms-linear-gradient(top, #a72424, #8f1f1f);
background-image: -o-linear-gradient(top, #a72424, #8f1f1f);
text-shadow: 0 -1px rgba(0,0,0,0.5);
border-top: 1px solid #cc7e7e;
top: 10px;
left: none;
right: 5px;
bottom: none;
background: #a72424;
background-image: -moz-linear-gradient(top, #a72424, #8f1f1f);
background-image: -webkit-linear-gradient(top, #a72424, #8f1f1f);
text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
border-top: 1px solid #cc7e7e;
padding: 1px 4px;
font-size: 9.1px;
border-radius: 2px;
line-height: 12px;
color: #ffffff;
font-weight: bold;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}
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: 11;
}
#chat-entry {
position: absolute;
bottom: 1em;
left: 0;
right: 0;
bottom: 10px;
height:35px;
background:#f7f7f7;
border-top:1px solid #ccc;
z-index:10;
}
#chat-entry > textarea {
position: absolute;
bottom: 0;
left: 5%;
font-family: sans-serif;
font-size: 1em;
width: 68%;
height: 16px;
resize: none;
background: #ffffff;
border: 1px solid #ccc;
margin: 0;
padding: 3px;
border-radius: 4px 0 0 4px;
}
#chat-entry > button {
position: absolute;
bottom: 0;
right: 5%;
width: 20%;
height: 24px;
margin: 0;
border: 1px solid #ccc;
border-left: none;
border-radius: 0 4px 4px 0;
background: -moz-linear-gradient(top, #fff, #ddd);
background: -webkit-linear-gradient(top, #fff, #ddd);
background: -ms-linear-gradient(top, #fff, #ddd);
background: -o-linear-gradient(top, #fff, #ddd);
font-size: 1em;
}
#chat-entry > button:active {
background: #dddddd;
}
#chat-messages {
clear: both;
font-size: 1em;
height: 80%;
line-height: 1em;
overflow: scroll;
position: relative;
padding:15px;
font-size:12px;
color:#999;
line-height:14px;
margin-bottom:15px;
}
#chat-messages p {
font-size:12px;
color:#999;
line-height:14px;
margin-bottom:15px;
}
#chat-messages p span {
font-weight:bold;
color:#666;
}
.private-chat-box{
overflow-y:scroll;
height:auto;
position:relative;
width:auto;
background:#fff;
font-size:1em;
padding:15px;
height:100%;
z-index:9;
}
#users > h3, #chatbox-head > h3 {
/* background: -moz-linear-gradient(top, #fff, #ddd);
background: -webkit-linear-gradient(top, #fff, #ddd);
background: -ms-linear-gradient(top, #fff, #ddd);
background: -o-linear-gradient(top, #fff, #ddd);
*/
background:#f7f7f7;
font-size: 1em;
line-height: 2em;
font-weight: bold;
color: #666;
border-bottom: 1px solid #d7d7d7;
padding: 5px 10px;
}
#chatbox-head {
/* background: -moz-linear-gradient(top, #fff, #ddd);
background: -webkit-linear-gradient(top, #fff, #ddd);
background: -ms-linear-gradient(top, #fff, #ddd);
background: -o-linear-gradient(top, #fff, #ddd);
font-size: 2em;
line-height: 2em;
font-weight: bold;
color: #666;
border-bottom: 1px solid #aaa;
text-align: center;
height: 6vh; */
}
#slide {
position: absolute;
margin: 0 auto;
overflow:hidden;
width: 99%;
height: 99%;
border: 1px solid #888;
}
.textinput {
font-family: Arial, Helvetica, "Helvetica Neue", sans-serif;
font-size: 14px;
/* keep in pixels*/
resize: none;
display: block;
}
.user {
height: 16px;
line-height: 16px;
padding: 0 8px;
text-align:center;
}
.user:nth-child(even) {
background: #eeeeee;
}
.user:before {
content: "\f007";
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
display: inline-block;
margin-right: 8px;
}
.user:nth-child(even).selected {
color: #ffffff;
background: #007fff;
background: -moz-linear-gradient(top, #007fff, #005fdf);
background: -webkit-linear-gradient(top, #007fff, #005fdf);
}
.presenter:before {
content: "\f0d0";
}
.clickable {
cursor: pointer;
}
.selected {
color: #ffffff;
background: #007fff;
background: -moz-linear-gradient(top, #007fff, #005fdf);
background: -webkit-linear-gradient(top, #007fff, #005fdf);
background: -ms-linear-gradient(top, #007fff, #005fdf);
background: -o-linear-gradient(top, #007fff, #005fdf);
}
#chat_input {
clear: both;
display: block;
float: right;
}
#slide-upload-controls {
display:none;
width:200px;
height:100px;
position:absolute;
top:-350px;
left:50px;
border: 5px double grey;
z-index:20;
background:#cccccc;
}
#chat_title {
padding-left: 25px;
}
#listUsers {
float: right;
}
#current-users {
position: absolute;
bottom: auto;
left: 0;
background: #fff;
width:100%;
}
#switch-presenter {
position: absolute;
left: 0;
bottom:1vh;
margin-left: 16px;
text-align: center;
border: 1px solid #ccc;
border-radius: 4px;
background: -moz-linear-gradient(top, #fff, #ddd);
background: -webkit-linear-gradient(top, #fff, #ddd);
background: -ms-linear-gradient(top, #fff, #ddd);
background: -o-linear-gradient(top, #fff, #ddd);
cursor: pointer;
z-index:10;
}
#ChatAndControls {
float: right;
}
#logout {
float: right;
}
#send_chat {
float: right;
}
#slide-controls {
display: none;
width: 800px;
margin: 0 auto;
}
#slide-controls form {
display: inline;
}
#slide-controls * {
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: 9;
}
.canvas {
border: 1px solid #0000ff;
position: absolute;
}
#login-view {
width: 100%;
margin: 50px auto;
border: 10x solid #dddddd;
padding: 10px;
background: #30406b;
color: white;
}
#login-view h1 {
font-size: 23.8px;
font-weight: bold;
text-align: center;
margin: 5px 0 20px 0;
}
#login-container {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
#slide {
position: relative;
margin: 0 auto;
overflow: hidden;
/* so they don't overlap */
width: 99%;
height: 99%;
border: 1px solid #888;
}
#slide .preupload-image {
display: none;
}
#slide > svg {
width: 100%;
height: 100%;
margin: 0 auto;
}
#slide-controls {
display: none;
}
#users {
z-index: 11;
border: 3px solid #33343b;
display: none;
position: absolute;
left: 0;
top: 6vh;
min-height:35vh;
background: #ffffff;
overflow: scroll;
resize:both;
min-width: 16vw;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
#slide-upload-button,#tool-toggle-btn,#tool-zoom-btn{
height: 100%;
}
#tableheader{
width:100%;
text-align: center;
position:relative;
}
#usertable{
width:100%;
position:absolute;
top:0;
left:0;
text-align:left;
color:#666;
}
#usertable tr {
border-bottom:1px solid #f2f2f2;
}
#usertable tr:hover {
background-color:#f6f6f6;
}
#usertable td {
/* width:15px;
height:10px; */
padding:8px;
}
#closeUploadWindow{
position: absolute;
right:0;
bottom:0;
}
image {
position:absolute;
top:0;
margin: 10px auto;
}
#chat-options-bar {
height:3vh;
width:100%;
position:relative;
font-size:1.5em;
border-bottom:1px solid #ccc;
}
#chat-options-bar button:active{
background: -moz-linear-gradient(top, #fff, #ddd);
background: -webkit-linear-gradient(top, #fff, #ddd);
background: -ms-linear-gradient(top, #fff, #ddd);
background: -o-linear-gradient(top, #fff, #ddd);
}
#all-users-list {
border:1px solid #ccc;
background:#fff;
width: 7vw;
height:auto;
overflow-y: scroll;
display:none;
position: absolute;
top: 7.5vh;
left: 8.1vh;
z-index:7;
padding:5px;
-webkit-border-bottom-right-radius: 3px;
-webkit-border-bottom-left-radius: 3px;
-moz-border-radius-bottomright: 3px;
-moz-border-radius-bottomleft: 3px;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
.private-chat-box .icon-remove-sign {
position: absolute;
top:0;
right:1vh;
font-size: 1.5em;
line-height: 1.5em;
cursor: pointer;
}
i.icon-remove-sign:hover{
color:red;
}
i.icon-angle-up{
position:absolute;
right:0;
}
#chatButtonWrapper{
float:left;
height: 100%;
overflow-y: scroll;
top: 0;
}
#chatButtonWrapper button{
cursor: pointer;
height: 100%;
margin-bottom: 0;
overflow: hidden;
padding: 0;
text-align: center;
vertical-align: middle;
width: auto;
display:block;
padding: 0 10px;
margin:0;
border:0;
background:#fff;
border-right:1px solid #ccc;
color:#666;
}
#publicChat{
cursor: pointer;
display: inline-block;
height: 100%;
left: 0;
overflow: hidden;
padding-left: 0;
padding-right: 0;
position: relative;
text-align: center;
vertical-align: middle;
padding:0 10px;
border:0;
margin:0;
background:#fff;
border-right:1px solid #ccc;
float:left;
margin:0;
color:#666;
}
#privateChat{
cursor: pointer;
display: inline-block;
height: 100%;
overflow: hidden;
padding: 0;
position: relative;
text-align: center;
vertical-align: middle;
padding:0 5px;
border:0;
margin:0;
background:#fff;
float:left;
color:#666;
}
#generalbutton{
height: 100%;
left: 0;
position: absolute;
width: 100%;
}
i{
cursor: pointer;
}
#leftcol{
float:left;
width:25%;
height:50%;
border-bottom: 2px solid black;
position:relative;
}
#centercol{
border: 2px solid black;
float: left;
height: 90%;
position: relative;
width: 50%;
text-align: center;
}
#rightcol{
border-bottom: 2px solid black;
float: left;
height: 50%;
width: 24%;
}
#system-check{
border:1px solid black;
width:50%;
height:90%;
position:relative;
margin-left:25%;
margin-right:24%;
}
.system-check-table-td{
border-right:1px solid black;
text-align:left;
width:70%;
}
#system-check-table{
margin-top:10px;
width:100%;
}
#system-check-title{
border-bottom:1px solid black;
width:100%;
}
#user-name {
margin-left:15px;
padding: 10px;
margin-bottom: 0 ;
width: 206px;
background-color: #ffffff;
border: 1px solid #cccccc;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
display: inline-block;
height: 20px;
font-size: 15px;
line-height: 20px;
color: #555555;
vertical-align: middle;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.submit_btn {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background-image: none;
box-shadow: none;
border: none;
font-size: 15px;
padding: 13px 10px;
margin:0 0 0 15px;
background: #76ab3b;
background: -moz-linear-gradient(top, #90c356 0%, #649a27 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#90c356), color-stop(100%,#649a27));
background: -webkit-linear-gradient(top, #90c356 0%,#649a27 100%);
background: -o-linear-gradient(top, #90c356 0%,#649a27 100%);
background: -ms-linear-gradient(top, #90c356 0%,#649a27 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#90c356', endColorstr='#649a27',GradientType=0 );
background: linear-gradient(top, #90c356 0%,#649a27 100%);
color: #fff !important;
text-shadow: 0 -1px 0 rgba(0,0,0,.4);
width:140px;
}
.submit_btn:hover {
background:#649a27;
cursor: pointer;
}
#meeting-id{
font-size:20px;
}
#welcomeMsg{
margin-bottom: 20px;
}
#bbb-title{
display:inline;
font-size: 60px;
}
/*#bbb-logo{
display:"inline";
}*/
}
Reference in New Issue View Git Blame Copy Permalink