diff --git a/bigbluebutton-html5/app/client/stylesheets/whiteboard.less b/bigbluebutton-html5/app/client/stylesheets/whiteboard.less index d9569c675e..75bee992c8 100755 --- a/bigbluebutton-html5/app/client/stylesheets/whiteboard.less +++ b/bigbluebutton-html5/app/client/stylesheets/whiteboard.less @@ -4,10 +4,6 @@ padding: 0 !important; min-width: 0; - #whiteboard-container{ - min-height: 60px; - } - @media @landscape { border-top: 0px; border-left: 0px; @@ -71,6 +67,8 @@ #whiteboard-container { position: relative; // makes the fullscreen button's absolute position work + min-height: 60px; //For the case when the slide is not loaded and a raise hand button overlaps the hamburger button in portrait views + border-bottom: 1px solid #d7d7d7; @media @landscape { display: -moz-flex; display: -ms-flexbox; @@ -80,36 +78,17 @@ align-items: center; -webkit-align-items: center; -ms-align-items: center; - //border-bottom: 1px solid extract(@lightGrey, 3); } } #whiteboard-controls { - position: absolute; - left: 0; - right: 0; - bottom: 0; - padding: 4em 5px 5px; - - /* - opacity: 0; - -webkit-transition: opacity .3s; - transition: opacity .3s; - - &:hover, - &:focus { - opacity: 1; - } - */ + width: 100%; + height: 70px; button, .btn { - outline: none; - display: inline-block; + outline: none; // overwriting default Foundation's outline margin: 0; padding: 0; - border: none; - background: none; - color: #fff; height: 50px; width: 50px; border-radius: 50%; @@ -127,48 +106,42 @@ } .whiteboard-buttons { - &-left, - &-center, - &-right { - - } - &-left { float: left; - } - - &-center { - pointer-events: none; - position: absolute; - width: 100%; - text-align: center; - bottom: 5px; + width: 20%; } &-right { float: right; + width: 20%; + } + + &-center { + margin: 0 auto; + text-align: center; + width: 60%; } &-slide { - pointer-events: auto; - color: #fff; + margin-top: 10px; + margin-bottom: 10px; background-color: #3896D3; border-color: #007095; display: inline-block; border-radius: 50px; - > button, .button { - background-color: transparent; - } - .current { - color: #fff; + color: extract(@white, 1); font-weight: bold; vertical-align: super; } } } +/******************************/ +/* Upload Menu Styling */ +/******************************/ + .presenter-uploader { @presenteUploaderBg: #eee; @presenteUploaderColor: rgba(0, 0, 0, .5); @@ -179,19 +152,15 @@ max-width: 20vw; min-width: 300px; position: relative; - z-index: 100; - + margin-top: 10px; + margin-bottom: 10px; + margin-left: 10px; &-btn { - position: absolute; - bottom: 0; - left: 0; - .presenter-uploader-container & { - z-index: 1; + float: left; background-color: @presenteUploaderBg !important; border-color: transparent !important; color: @presenteUploaderColor !important; - &:focus, &:hover { color: @presenteUploaderColorHover; @@ -202,10 +171,10 @@ &-container { overflow: hidden; - z-index: 1000; + color: @presenteUploaderColor; background-color: @presenteUploaderBg; padding: 10px 10px; - border-radius: 10px 10px 10px 25px; + border-radius: 10px 10px 10px 10px; display: none; transition: all .3s; position: absolute; @@ -213,24 +182,22 @@ .is-open & { display: block; + z-index: 1; box-shadow: 2px 2px 6px rgba(0, 0, 0, .2); } } &-tip { padding: 10px 10px 10px 60px; - text-transform: uppercase; font-size: 9px; font-weight: bold; margin: -10px; text-align: right; min-height: 50px; - color: @presenteUploaderColor; } &-dropzone { margin-bottom: 10px; - color: @presenteUploaderColor; opacity: .4; transition: opacity 3s; text-align: center; @@ -420,11 +387,13 @@ from { background-position: 0 0; } to { background-position: 40px 0; } } +/******************************/ +/* End of Upload Menu Styling */ +/******************************/ + .presenter-whiteboard { - height: calc(~'100% - 2px'); - //-2px is for something who is going of the canvas an generating scroll - padding-bottom: 60px; + height: calc(~'100% - 70px'); } .poll-whiteboard { @@ -642,8 +611,6 @@ background-color: #34495E; } - - .FABContainer { &.noPresentation{ right: 60px;