686 lines
16 KiB
Plaintext
Executable File
686 lines
16 KiB
Plaintext
Executable File
@import "variables";
|
|
|
|
#whiteboard {
|
|
padding: 0 !important;
|
|
min-width: 0;
|
|
|
|
@media @landscape {
|
|
border-top: 0px;
|
|
border-left: 0px;
|
|
border-right: 0px;
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
width: 70%;
|
|
height: 100%;
|
|
}
|
|
@media @mobile-portrait-with-keyboard, @desktop-portrait, @mobile-portrait {
|
|
-webkit-order: 1;
|
|
order: 1;
|
|
width: 100% !important; // overrides any width value set manually in landscape
|
|
}
|
|
&:-webkit-full-screen {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin-top: 0px;
|
|
#whiteboard-container {
|
|
height: 100%;
|
|
}
|
|
#whiteboard-paper {
|
|
height: 100%;
|
|
}
|
|
}
|
|
&:-moz-full-screen {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin-top: 0px;
|
|
#whiteboard-container {
|
|
height: 100%;
|
|
}
|
|
#whiteboard-paper {
|
|
height: 100%;
|
|
}
|
|
}
|
|
&:fullscreen {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin-top: 0px;
|
|
#whiteboard-container {
|
|
height: 100%;
|
|
}
|
|
#whiteboard-paper {
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
#whiteboard-paper {
|
|
background-color: white !important;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: 100%;
|
|
#svggroup {
|
|
display: block;
|
|
height: 100% !important;
|
|
width: 100% !important;
|
|
}
|
|
}
|
|
|
|
#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;
|
|
display: -ms-flex;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
align-items: center;
|
|
-webkit-align-items: center;
|
|
-ms-align-items: center;
|
|
}
|
|
}
|
|
|
|
#whiteboard-controls {
|
|
width: 100%;
|
|
height: 70px;
|
|
|
|
button, .btn {
|
|
outline: none; // overwriting default Foundation's outline
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 50px;
|
|
width: 50px;
|
|
border-radius: 50%;
|
|
background-color: #3896D3;
|
|
border-color: #007095;
|
|
font-size: 30px;
|
|
-webkit-transition: background .3s;
|
|
transition: background .3s;
|
|
|
|
&:focus,
|
|
&:hover {
|
|
background-color: #3A82D4;
|
|
}
|
|
}
|
|
}
|
|
|
|
.whiteboard-buttons {
|
|
&-left {
|
|
float: left;
|
|
width: 20%;
|
|
}
|
|
|
|
&-right {
|
|
float: right;
|
|
width: 20%;
|
|
}
|
|
|
|
&-center {
|
|
margin: 0 auto;
|
|
text-align: center;
|
|
width: 60%;
|
|
}
|
|
|
|
&-slide {
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
background-color: #3896D3;
|
|
border-color: #007095;
|
|
display: inline-block;
|
|
border-radius: 50px;
|
|
|
|
.current {
|
|
color: extract(@white, 1);
|
|
font-weight: bold;
|
|
vertical-align: super;
|
|
}
|
|
}
|
|
}
|
|
|
|
/******************************/
|
|
/* Upload Menu Styling */
|
|
/******************************/
|
|
|
|
.presenter-uploader {
|
|
@presenteUploaderBg: #eee;
|
|
@presenteUploaderColor: rgba(0, 0, 0, .5);
|
|
@presenteUploaderColorHover: #3A82D4;
|
|
|
|
&-control {
|
|
max-height: 75vh;
|
|
max-width: 20vw;
|
|
min-width: 300px;
|
|
position: relative;
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
margin-left: 10px;
|
|
&-btn {
|
|
.presenter-uploader-container & {
|
|
float: left;
|
|
background-color: @presenteUploaderBg !important;
|
|
border-color: transparent !important;
|
|
color: @presenteUploaderColor !important;
|
|
&:focus,
|
|
&:hover {
|
|
color: @presenteUploaderColorHover;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-container {
|
|
overflow: hidden;
|
|
color: @presenteUploaderColor;
|
|
background-color: @presenteUploaderBg;
|
|
padding: 10px 10px;
|
|
border-radius: 10px 10px 10px 10px;
|
|
display: none;
|
|
transition: all .3s;
|
|
position: absolute;
|
|
bottom: 0;
|
|
|
|
.is-open & {
|
|
display: block;
|
|
z-index: 1;
|
|
box-shadow: 2px 2px 6px rgba(0, 0, 0, .2);
|
|
}
|
|
}
|
|
|
|
&-tip {
|
|
padding: 10px 10px 10px 60px;
|
|
font-size: 9px;
|
|
font-weight: bold;
|
|
margin: -10px;
|
|
text-align: right;
|
|
min-height: 50px;
|
|
}
|
|
|
|
&-dropzone {
|
|
margin-bottom: 10px;
|
|
opacity: .4;
|
|
transition: opacity 3s;
|
|
text-align: center;
|
|
border: 3px dashed;
|
|
border-radius: 10px;
|
|
padding: 50px;
|
|
transition: all .3s;
|
|
cursor: pointer;
|
|
position: relative;
|
|
|
|
&:focus,
|
|
&:hover,
|
|
&.hover {
|
|
opacity: .8;
|
|
background-color: rgba(0, 0, 0, .1);
|
|
}
|
|
|
|
&-icon,
|
|
&-label {
|
|
display: block;
|
|
color: inherit;
|
|
}
|
|
|
|
&-icon {
|
|
font-size: 70px;
|
|
line-height: 1;
|
|
}
|
|
|
|
&-label {
|
|
color: inherit;
|
|
text-transform: uppercase;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
&-fileinput {
|
|
cursor: pointer;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
&-file {
|
|
&-list {
|
|
&::-webkit-scrollbar{width:5px;height:5px}
|
|
&::-webkit-scrollbar-button{width:0;height:0}
|
|
&::-webkit-scrollbar-thumb{background:rgba(0,0,0,.25);border:none;border-radius:50px}
|
|
&::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.5)}
|
|
&::-webkit-scrollbar-thumb:active{background:rgba(0,0,0,.25)}
|
|
&::-webkit-scrollbar-track{background:rgba(0,0,0,.25);border:none;border-radius:50px}
|
|
&::-webkit-scrollbar-track:hover{background:rgba(0,0,0,.25)}
|
|
&::-webkit-scrollbar-track:active{background:rgba(0,0,0,.25)}
|
|
&::-webkit-scrollbar-corner{background:0 0}
|
|
|
|
display: block;
|
|
margin: -10px;
|
|
margin-bottom: 10px;
|
|
list-style: none;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
max-height: 200px;
|
|
background:
|
|
linear-gradient(@presenteUploaderBg 30%, rgba(255,255,255,0)),
|
|
linear-gradient(rgba(255,255,255,0), @presenteUploaderBg 70%) 0 100%,
|
|
radial-gradient(50% 0, farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)),
|
|
radial-gradient(50% 100%,farthest-side, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
|
|
background:
|
|
linear-gradient(@presenteUploaderBg 30%, rgba(255,255,255,0)),
|
|
linear-gradient(rgba(255,255,255,0), @presenteUploaderBg 70%) 0 100%,
|
|
radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.2), rgba(0,0,0,0)),
|
|
radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0)) 0 100%;
|
|
background-repeat: no-repeat;
|
|
background-color: @presenteUploaderBg;
|
|
background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
|
|
background-attachment: local, local, scroll, scroll;
|
|
}
|
|
|
|
&-item {
|
|
color: @presenteUploaderColor;
|
|
display: table;
|
|
table-layout: fixed;
|
|
width: 100%;
|
|
padding: 10px;
|
|
border-bottom: 1px solid darken(@presenteUploaderBg, 10%);
|
|
border-top: 1px solid lighten(@presenteUploaderBg, 10%);
|
|
|
|
&:nth-child(odd) {
|
|
background-color: rgba(255, 255, 255, .5);
|
|
}
|
|
|
|
&.current {
|
|
background-color: fade(@presenteUploaderColorHover, 15%);
|
|
}
|
|
|
|
&.is-uploading {
|
|
background-image: -webkit-linear-gradient(-45deg, fade(@presenteUploaderColorHover, 15%) 25%,transparent 25%,transparent 50%, fade(@presenteUploaderColorHover, 15%) 50%, fade(@presenteUploaderColorHover, 15%) 75%,transparent 75%,transparent);
|
|
background-image: -o-linear-gradient(-45deg, fade(@presenteUploaderColorHover, 15%) 25%,transparent 25%,transparent 50%, fade(@presenteUploaderColorHover, 15%) 50%, fade(@presenteUploaderColorHover, 15%) 75%,transparent 75%,transparent);
|
|
background-image: linear-gradient(-45deg, fade(@presenteUploaderColorHover, 15%) 25%,transparent 25%,transparent 50%, fade(@presenteUploaderColorHover, 15%) 50%, fade(@presenteUploaderColorHover, 15%) 75%,transparent 75%,transparent);
|
|
-webkit-background-size: 40px 40px;
|
|
background-size: 40px 40px;
|
|
|
|
-webkit-animation: progress-bar-stripes 2s linear infinite;
|
|
-o-animation: progress-bar-stripes 2s linear infinite;
|
|
animation: progress-bar-stripes 2s linear infinite;
|
|
pointer-events: none;
|
|
}
|
|
|
|
&-name,
|
|
&-actions {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
&-name {
|
|
display: table-cell;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
|
|
.is-uploading & {
|
|
opacity: .4;
|
|
}
|
|
|
|
:not(.current) &:hover,
|
|
:not(.current) &:focus {
|
|
text-decoration: underline;
|
|
color: @presenteUploaderColorHover;
|
|
}
|
|
}
|
|
|
|
&-actions,
|
|
&-progress {
|
|
display: table-cell;
|
|
width: 65px;
|
|
text-align: right;
|
|
}
|
|
|
|
&-actions {
|
|
.is-uploading & {
|
|
display: none;
|
|
}
|
|
|
|
> i {
|
|
display: inline-block;
|
|
width: 30px;
|
|
height: 30px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
font-size: 20px;
|
|
line-height: 30px;
|
|
transition: background .3s;
|
|
|
|
&:focus,
|
|
&:hover {
|
|
color: @presenteUploaderColorHover;
|
|
}
|
|
|
|
&:active {
|
|
background-color: fade(@presenteUploaderColor, 5%);
|
|
border-radius: 4px;
|
|
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
|
|
box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
|
|
}
|
|
}
|
|
}
|
|
|
|
&-progress {
|
|
color: #3A82D4;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes progress-bar-stripes {
|
|
from { background-position: 0 0; }
|
|
to { background-position: 40px 0; }
|
|
}
|
|
|
|
@keyframes progress-bar-stripes {
|
|
from { background-position: 0 0; }
|
|
to { background-position: 40px 0; }
|
|
}
|
|
/******************************/
|
|
/* End of Upload Menu Styling */
|
|
/******************************/
|
|
|
|
|
|
.presenter-whiteboard {
|
|
height: calc(~'100% - 70px');
|
|
}
|
|
|
|
.poll-whiteboard {
|
|
height: calc(~'100% - 70px');
|
|
}
|
|
|
|
.polling {
|
|
width: 100%;
|
|
height: 70px;
|
|
text-align: center;
|
|
padding-top:10px;
|
|
padding-bottom:10px;
|
|
font-size: 0; /* to remove default 4px gaps between the buttons caused by display: inline-block */
|
|
}
|
|
|
|
.pollButtons {
|
|
color: extract(@white, 1);
|
|
background-color: #3896D3;
|
|
font-weight: bold;
|
|
border: 1px solid extract(@lightGrey, 3);
|
|
height: 100%;
|
|
padding-left: 0; /*overwriting the default foundation padding */
|
|
padding-right: 0; /*overwriting the default foundation padding */
|
|
margin-bottom: 0; /*overwriting the default foundation margin */
|
|
max-width: calc(~'100%/6'); /* the actual width and margins are calculated in the code */
|
|
/* truncating the text inside the buttons */
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
/* the end of truncating */
|
|
span {
|
|
max-width: 80%;
|
|
}
|
|
&:hover {
|
|
background: #3A82D4;
|
|
}
|
|
}
|
|
|
|
.viewer-whiteboard {
|
|
height: 100%;
|
|
}
|
|
|
|
.vertically-centered {
|
|
position: relative;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.whiteboardFullscreenButton {
|
|
@media @desktop-landscape, @phone-landscape, @tablet-landscape,
|
|
@phone-portrait-with-keyboard, @phone-portrait, @desktop-portrait {
|
|
height: 50px;
|
|
width: 50px;
|
|
}
|
|
@media @desktop-landscape {
|
|
top: 5px;
|
|
right: 5px;
|
|
}
|
|
@media @phone-landscape {
|
|
top: 4px;
|
|
right: 4px;
|
|
}
|
|
@media @tablet-landscape {
|
|
top: 5px;
|
|
right: 5px;
|
|
}
|
|
@media @phone-portrait-with-keyboard, @phone-portrait {
|
|
top: 4px;
|
|
right: 4px;
|
|
}
|
|
@media @tablet-portrait-with-keyboard, @tablet-portrait {
|
|
height: 53px;
|
|
width: 53px;
|
|
top: 3px;
|
|
line-height: 54px;
|
|
right: 5px;
|
|
}
|
|
@media @desktop-portrait {
|
|
top: 5px;
|
|
right: 5px;
|
|
}
|
|
}
|
|
|
|
.exitFullscreenButton {
|
|
top: 10px;
|
|
right: 10px;
|
|
height: 50px;
|
|
width: 50px;
|
|
}
|
|
|
|
.soaringButton {
|
|
@media @desktop-portrait{
|
|
margin-top: -60px;
|
|
}
|
|
position: absolute;
|
|
margin-bottom: 0;
|
|
padding: 0;
|
|
border-radius: 50%;
|
|
background: #3896D3;
|
|
opacity: 0.55;
|
|
&:hover {
|
|
background: #3A82D4;
|
|
}
|
|
&:focus {
|
|
background: #3896D3;
|
|
outline:0;
|
|
}
|
|
i {
|
|
@media @phone-landscape {
|
|
font-size: 29px;
|
|
}
|
|
@media @desktop-portrait, @desktop-landscape, @tablet-landscape {
|
|
font-size: 30px;
|
|
}
|
|
@media @phone-portrait-with-keyboard, @phone-portrait {
|
|
font-size: 35px;
|
|
}
|
|
@media @tablet-portrait-with-keyboard, @tablet-portrait {
|
|
font-size: 40px;
|
|
}
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
.iconChrome {
|
|
i {
|
|
font-size: 200%;
|
|
position: relative;
|
|
top: 1px;
|
|
}
|
|
}
|
|
|
|
.iconFirefox {
|
|
i {
|
|
font-size: 500%;
|
|
}
|
|
}
|
|
|
|
// Emojis FAB
|
|
|
|
.activeEmojiButton {
|
|
background-color: #3896D3;
|
|
border: 2px solid #34495E;
|
|
svg {
|
|
position: relative;
|
|
top: -2px;
|
|
left: -2px;
|
|
}
|
|
}
|
|
|
|
.FABContainer {
|
|
&.closedFAB {
|
|
.activeEmojiButton,
|
|
.inactiveEmojiButton {
|
|
pointer-events: none;
|
|
cursor: default;
|
|
}
|
|
}
|
|
}
|
|
|
|
.FABTriggerButton, .inactiveEmojiButton {
|
|
background-color: #3896D3;
|
|
}
|
|
|
|
.FABTriggerButton:hover {
|
|
background-color: #3896D3;
|
|
}
|
|
|
|
.FABTriggerButton {
|
|
position: absolute;
|
|
right: 4px;
|
|
bottom: 4px;
|
|
@media @desktop-landscape, @phone-landscape, @tablet-landscape,
|
|
@phone-portrait-with-keyboard, @phone-portrait, @desktop-portrait {
|
|
height: 50px;
|
|
width: 50px;
|
|
}
|
|
@media @tablet-portrait-with-keyboard, @tablet-portrait {
|
|
height: 53px;
|
|
width: 53px;
|
|
}
|
|
}
|
|
|
|
.openedFAB {
|
|
.FABTriggerButton {
|
|
i {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
button:nth-child(2), button:nth-child(3) {
|
|
animation: increaseOpacity 0.15s forwards;
|
|
}
|
|
button:nth-child(4), button:nth-child(5) {
|
|
animation: increaseOpacity 0.15s forwards;
|
|
animation-delay: 0.075s;
|
|
}
|
|
button:nth-child(6), button:nth-child(7) {
|
|
animation: increaseOpacity 0.15s forwards;
|
|
animation-delay: 0.15s;
|
|
}
|
|
}
|
|
|
|
.closedFAB {
|
|
button:nth-child(2), button:nth-child(3) {
|
|
animation: decreaseOpacity 0.15s forwards;
|
|
animation-delay: 0.15s;
|
|
}
|
|
button:nth-child(4), button:nth-child(5) {
|
|
animation: decreaseOpacity 0.15s forwards;
|
|
animation-delay: 0.075s;
|
|
}
|
|
button:nth-child(6), button:nth-child(7) {
|
|
animation: decreaseOpacity 0.15s forwards;
|
|
}
|
|
}
|
|
|
|
.FABContainer > button:nth-child(n + 2):hover {
|
|
background-color: #34495E;
|
|
}
|
|
|
|
.FABContainer {
|
|
&.noPresentation{
|
|
right: 60px;
|
|
.FABTriggerButton {
|
|
@media @mobile-portrait, @tablet-portrait{
|
|
.vertically-centered;
|
|
}
|
|
}
|
|
}
|
|
|
|
button {
|
|
padding: 0;
|
|
margin: 0;
|
|
font-size: 30px;
|
|
border-radius: 50%;
|
|
z-index: 100;
|
|
&:focus {
|
|
outline:0;
|
|
}
|
|
}
|
|
& > button:nth-child(n + 2) {
|
|
position: absolute;
|
|
height: 50px;
|
|
width: 50px;
|
|
opacity: 0;
|
|
}
|
|
& > button:nth-child(2) {
|
|
right: 70px;
|
|
bottom: 6px;
|
|
}
|
|
& > button:nth-child(3) {
|
|
right: 70px;
|
|
bottom: 59px;
|
|
}
|
|
& > button:nth-child(4) {
|
|
right: 130px;
|
|
bottom: 6px;
|
|
}
|
|
& > button:nth-child(5) {
|
|
right: 130px;
|
|
bottom: 59px;
|
|
}
|
|
& > button:nth-child(6) {
|
|
right: 190px;
|
|
bottom: 6px;
|
|
}
|
|
& > button:nth-child(7) {
|
|
right: 190px;
|
|
bottom: 59px;
|
|
}
|
|
}
|
|
|
|
.generateIncreaseOpacityAnimation (@i) when (@i < 105) {
|
|
@p: ~"@{i}%"; // local variable: iterator + a percent sign
|
|
@{p} {
|
|
opacity: @i * 0.01;
|
|
}
|
|
.generateIncreaseOpacityAnimation(@i + 5);
|
|
}
|
|
|
|
@keyframes increaseOpacity {
|
|
.generateIncreaseOpacityAnimation(0);
|
|
}
|
|
|
|
@keyframes decreaseOpacity {
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|