pimhwang
/
spreed-webrtc
mirror of https://github.com/strukturag/spreed-webrtc.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Merge pull request #186 from theurere/fix-scss-lint-mergeableselector 

Fix scss-lint error MergeableSelector.
pull/189/head
Simon Eisenmann 11 years ago
parent
bf516b5423 c9bc20d3dc
commit
b30aa57172
14 changed files with 919 additions and 951 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 113
      src/styles/components/_audiovideo.scss
  2. 40
      src/styles/components/_buddylist.scss
  3. 4
      src/styles/components/_buddypicturecapture.scss
  4. 13
      src/styles/components/_buddypictureupload.scss
  5. 334
      src/styles/components/_chat.scss
  6. 101
      src/styles/components/_fileinfo.scss
  7. 247
      src/styles/components/_presentation.scss
  8. 12
      src/styles/components/_rightslide.scss
  9. 5
      src/styles/components/_roombar.scss
  10. 21
      src/styles/components/_screenshare.scss
  11. 7
      src/styles/components/_settings.scss
  12. 22
      src/styles/components/_usability.scss
  13. 131
      src/styles/components/_youtubevideo.scss
  14. 44
      src/styles/global/_overlaybar.scss

113
src/styles/components/_audiovideo.scss
Unescape View File

@ -26,9 +26,7 @@
right: 0; right: 0;
top: $minbarheight; top: $minbarheight;
user-select: none; user-select: none;
}
#audiovideo {
@include breakpt($breakpoint-video-small, max-width, only screen) { @include breakpt($breakpoint-video-small, max-width, only screen) {
right: 0; right: 0;
} }
@ -109,9 +107,7 @@
video { video {
object-fit: cover; object-fit: cover;
} }
}
.audiovideo {
.remoteContainer { .remoteContainer {
bottom: 0; bottom: 0;
left: 0; left: 0;
@ -159,9 +155,8 @@
transition-property: opacity; transition-property: opacity;
width: 100%; width: 100%;
} }
}
.audiovideo .remoteVideos { .remoteVideos {
bottom: 0; bottom: 0;
left: 0; left: 0;
opacity: 0; opacity: 0;
@ -176,9 +171,32 @@
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
} }
.overlayActions {
background: $video-overlayactions;
bottom: 0;
height: 140px;
left: 0;
margin: auto 0;
opacity: 0;
padding: 3px 0;
position: absolute;
top: 0;
width: 40px;
z-index: 5;
.btn {
color: #ccc;
cursor: pointer;
display: block;
outline: 0;
text-shadow: 0 0 5px #000;
width: 40px;
}
}
.audiovideo .remoteVideo { .remoteVideo {
background: $video-background; background: $video-background;
display: inline-block; display: inline-block;
max-height: 100%; max-height: 100%;
@ -196,6 +214,10 @@
&.onlyaudio { &.onlyaudio {
background: $video-onlyaudio-background; background: $video-onlyaudio-background;
//visibility: visible; //visibility: visible;
.onlyaudio {
display: block;
}
} }
.onlyaudio { .onlyaudio {
@ -216,16 +238,12 @@
visibility: hidden; visibility: hidden;
} }
&.onlyaudio .onlyaudio {
display: block;
}
&.dummy .onlyaudio { &.dummy .onlyaudio {
display: block; display: block;
} }
.peerActions { .peerActions {
// scss-lint:disable SelectorDepth // scss:lint:disable NestingDepth, SelectorDepth
bottom: 5%; bottom: 5%;
left: 40px; left: 40px;
opacity: 0; opacity: 0;
@ -261,30 +279,7 @@
white-space: nowrap; white-space: nowrap;
z-index: 8; z-index: 8;
} }
}
.audiovideo .overlayActions {
background: $video-overlayactions;
bottom: 0;
height: 140px;
left: 0;
margin: auto 0;
opacity: 0;
padding: 3px 0;
position: absolute;
top: 0;
width: 40px;
z-index: 5;
.btn {
color: #ccc;
cursor: pointer;
display: block;
outline: 0;
text-shadow: 0 0 5px #000;
width: 40px;
} }
} }
.remoteVideo { .remoteVideo {
@ -327,28 +322,6 @@
} }
} }
.renderer-auditorium {
position: relative;
span:before {
content: '\f183';
left: 50%;
margin-left: -.8em;
margin-top: -.5em;
position: absolute;
top: 50%;
}
span:after {
content: '\f183';
margin-right: -.9em;
margin-top: -.5em;
position: absolute;
right: 50%;
top: 50%;
}
}
.renderer-smally { .renderer-smally {
// scss-lint:disable SelectorDepth // scss-lint:disable SelectorDepth
background: #000; background: #000;
@ -457,6 +430,26 @@
} }
.renderer-auditorium { .renderer-auditorium {
position: relative;
span:before {
content: '\f183';
left: 50%;
margin-left: -.8em;
margin-top: -.5em;
position: absolute;
top: 50%;
}
span:after {
content: '\f183';
margin-right: -.9em;
margin-top: -.5em;
position: absolute;
right: 50%;
top: 50%;
}
.remoteContainer { .remoteContainer {
border-left: 40px solid #000; border-left: 40px solid #000;
} }
@ -467,10 +460,6 @@
top: 180px; top: 180px;
width: 320px; width: 320px;
.overlayLogo {
display: none;
}
video { video {
height: 100%; height: 100%;
margin-top: -9px; margin-top: -9px;

40
src/styles/components/_buddylist.scss
Unescape View File

@ -76,9 +76,7 @@
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
}
.buddylist {
&.loading { &.loading {
.buddylistloading { .buddylistloading {
display: block; display: block;
@ -139,13 +137,11 @@
position: relative; position: relative;
text-align: left; text-align: left;
width: 100%; width: 100%;
}
.buddy:hover { &:hover {
background: $buddylist-action-background; background: $buddylist-action-background;
} }
.buddy {
&.withSubline .buddy1, &.withSubline .buddy1,
&.contact .buddy1 { &.contact .buddy1 {
top: 15px; top: 15px;
@ -156,10 +152,17 @@
display: block; display: block;
} }
&.hovered .buddyactions { &.hovered {
.buddyactions {
right: 0; right: 0;
} }
.buddysessions {
max-height: 999px;
}
}
.fa.contact:before { .fa.contact:before {
content: '\f006'; content: '\f006';
} }
@ -249,9 +252,8 @@
white-space: nowrap; white-space: nowrap;
width: 120px; width: 120px;
} }
}
.buddy .buddyactions { .buddyactions {
background: $buddylist-action-background; background: $buddylist-action-background;
height: 66px; height: 66px;
line-height: 66px; line-height: 66px;
@ -274,9 +276,9 @@
vertical-align: middle; vertical-align: middle;
width: 42px; width: 42px;
} }
} }
.buddysessions { .buddysessions {
margin-bottom: 10px; margin-bottom: 10px;
margin-top: 56px; margin-top: 56px;
max-height: 0; max-height: 0;
@ -292,25 +294,23 @@
padding-top: 10px; padding-top: 10px;
} }
li { ul li {
// scss-lint:disable NestingDepth
list-style-type: none; list-style-type: none;
margin-bottom: 2px; margin-bottom: 2px;
margin-left: 0; margin-left: 0;
.btn-group {
visibility: hidden;
}
&:hover .btn-group { &:hover .btn-group {
visibility: visible; visibility: visible;
} }
} }
.btn-group {
visibility: hidden;
}
.currentsession .buddy3 { .currentsession .buddy3 {
font-weight: bold; font-weight: bold;
} }
} }
.buddy.hovered .buddysessions {
max-height: 999px;
} }

4
src/styles/components/_buddypicturecapture.scss
Unescape View File

@ -61,11 +61,11 @@
top: 0; top: 0;
visibility: hidden; visibility: hidden;
z-index: 5; z-index: 5;
}
.videoFlash.flash { &.flash {
visibility: visible; visibility: visible;
} }
}
.preview { .preview {
left: 0; left: 0;

13
src/styles/components/_buddypictureupload.scss
Unescape View File

@ -39,6 +39,7 @@
} }
.showUploadPicture { .showUploadPicture {
// scss-lint:disable NestingDepth
background-color: $componentbg; background-color: $componentbg;
border: 1px solid $bordercolor; border: 1px solid $bordercolor;
height: 200px; height: 200px;
@ -52,12 +53,16 @@
&.imgData { &.imgData {
background-color: #000; background-color: #000;
}
&.imgData .chooseUploadPicture { .chooseUploadPicture {
display: none; display: none;
} }
&:hover .imageUtilites {
visibility: visible;
}
}
.chooseUploadPicture { .chooseUploadPicture {
color: $componentfg4; color: $componentfg4;
left: 0; left: 0;
@ -95,10 +100,6 @@
} }
} }
.showUploadPicture.imgData:hover .imageUtilites {
visibility: visible;
}
.moveHorizontal { .moveHorizontal {
position: relative; position: relative;
top: -4px; top: -4px;

334
src/styles/components/_chat.scss
Unescape View File

@ -135,6 +135,7 @@
} }
.chat { .chat {
// scss-lint:disable NestingDepth
background: $chat-background; background: $chat-background;
bottom: 0; bottom: 0;
display: none; display: none;
@ -143,109 +144,106 @@
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
}
.chat { &.newmessage {
&.active { .chatheadertitle:after {
&.visible { content: '***';
position: absolute;
right: 32px;
top: 2px;
}
.chatheader {
animation: newmessage 1s ease -.3s infinite;
}
}
&.active.visible {
display: block; display: block;
} }
.chatbody { &.with_pictures .message {
// nothing &.is_self {
padding-right: 54px;
.timestamp {
right: 58px;
}
} }
.chatheader { &.is_remote {
// nothing padding-left: 58px;
} }
} }
}
.chatmenu { .chatbodybottom {
height: 36px; background: $chat-bottom-background;
bottom: 1px;
left: 0; left: 0;
padding: 2px 4px; margin: 0 auto;
position: absolute; position: absolute;
right: 0; right: 0;
top: 36px;
@include breakpt($breakpoint-chat-small, max-height) { @include breakpt($breakpoint-chat-small, max-height) {
display: none; height: auto;
}
} }
}
.chatbody { .typinghint {
border-left: 1px solid $bordercolor; color: $chat-typing;
bottom: -1px; font-size: .8em;
left: 0; height: 14px;
position: absolute; overflow: hidden;
right: 0; padding: 0 6px;
top: 74px; white-space: nowrap;
@include breakpt($breakpoint-chat-small, max-height) { @include breakpt($breakpoint-chat-small, max-height) {
border-top: 1px solid $bordercolor; display: none;
top: 0; }
top: 0;
} }
}
.chatheader { .inputbox {
background: $chat-header; position: relative;
border-bottom: 1px solid $bordercolor;
border-left: 1px solid $bordercolor;
height: 36px;
left: 0;
line-height: 34px;
padding: 0 4px 0 8px;
position: absolute;
right: 0;
top: 0;
@include breakpt($breakpoint-chat-small, max-height) { @include breakpt($breakpoint-chat-small, max-height) {
display: none; height: auto;
} }
.chatstatusicon { .btn {
cursor: pointer; display: none;
display: block; padding: .5em 1em;
font-size: 1.4em;
height: 36px;
left: 0;
position: absolute; position: absolute;
text-align: center; right: 6px;
top: 0; top: 1px;
width: 36px;
} }
.chatheadertitle { > div {
display: inline; border-top: 1px solid $bordercolor;
padding-left: 28px; }
} }
.ctrl { .input {
color: $chat-ctrl; border-color: transparent;
position: absolute; border-radius: 0;
right: 1px; box-shadow: none;
top: 0; display: block;
height: 54px;
margin: 0;
max-height: 54px; /* FF hack */
resize: none;
width: 100%;
.#{$fa-css-prefix} { @include breakpt($breakpoint-chat-small, max-height) {
cursor: pointer; max-height: 2.5em;
padding: 6px;
}
} }
span { &:active,
display: inline-block; &:focus {
max-width: 60%; border-color: $chat-input-border-color;
overflow: hidden; }
pointer-events: none;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
} }
}
.chat .outputbox { .outputbox {
bottom: 75px; bottom: 75px;
left: 0; left: 0;
position: absolute; position: absolute;
@ -255,9 +253,9 @@
@include breakpt($breakpoint-chat-small, max-height) { @include breakpt($breakpoint-chat-small, max-height) {
bottom: 45px; bottom: 45px;
} }
} }
.chat .output { .output {
height: 100%; height: 100%;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
@ -276,23 +274,10 @@
padding: 6px 0; padding: 6px 0;
} }
} }
}
.chat.with_pictures .message {
&.is_self {
padding-right: 54px;
.timestamp {
right: 58px;
}
} }
&.is_remote { .message {
padding-left: 58px; // scss-lint:disable DuplicateProperty
}
}
.chat .message {
background: $chat-msg-background; background: $chat-msg-background;
border: 1px solid $chat-msg-border; border: 1px solid $chat-msg-border;
border-radius: 6px; border-radius: 6px;
@ -310,23 +295,6 @@
padding-left: 0; padding-left: 0;
} }
li {
line-height: 1.1em;
margin: 4px 0;
padding-left: 1.2em;
position: relative;
&:before {
color: $chat-msg-default-icon-color;
content: '\f075';
font-family: FontAwesome;
left: 0;
position: absolute;
text-align: center;
width: 12px;
}
}
.timestamp { .timestamp {
color: $chat-timestamp; color: $chat-timestamp;
font-size: .8em; font-size: .8em;
@ -350,15 +318,23 @@
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
}
.chat .message { li {
&.is_self li:before { line-height: 1.1em;
margin: 4px 0;
padding-left: 1.2em;
position: relative;
&:before {
color: $chat-msg-default-icon-color; color: $chat-msg-default-icon-color;
transform: scale(-1, 1); content: '\f075';
font-family: FontAwesome;
left: 0;
position: absolute;
text-align: center;
width: 12px;
} }
li {
&.unread:before { &.unread:before {
color: $chat-msg-unread-icon-color; color: $chat-msg-unread-icon-color;
content: $chat-msg-unread-icon; content: $chat-msg-unread-icon;
@ -389,13 +365,6 @@
content: $chat-msg-read-icon; content: $chat-msg-read-icon;
} }
} }
}
.chat .message {
&.is_self .buddyPicture {
left: auto;
right: 4px;
}
.buddyPicture { .buddyPicture {
background: $actioncolor1; background: $actioncolor1;
@ -425,10 +394,7 @@
top: 0; top: 0;
} }
} }
}
.chat .message {
// scss-lint:disable DuplicateProperty
&:before, &:before,
&:after { &:after {
border-style: solid; border-style: solid;
@ -479,20 +445,34 @@
bottom: auto; bottom: auto;
right: -11px; right: -11px;
} }
li:before {
color: $chat-msg-default-icon-color;
transform: scale(-1, 1);
}
.buddyPicture {
left: auto;
right: 4px;
}
} }
&.with_name { &.with_name {
// none // none
} }
&.with_hoverimage { &.with_hoverimage {
.buddyPicture { .buddyPicture {
overflow: visible; overflow: visible;
z-index: initial; z-index: initial;
&:hover .buddyInfoActions { &:hover .buddyInfoActions {
height: 40px; height: 40px;
opacity: 1; opacity: 1;
} }
} }
.buddyInfoActions { .buddyInfoActions {
cursor: default; cursor: default;
display: inline-block; display: inline-block;
@ -505,88 +485,107 @@
transition: opacity 0.1s .1s linear, height .4s .1s ease-out; transition: opacity 0.1s .1s linear, height .4s .1s ease-out;
white-space: nowrap; white-space: nowrap;
z-index: 1; z-index: 1;
.btn-group { .btn-group {
display: block; display: block;
margin: 0 auto; margin: 0 auto;
width: 55px; width: 55px;
} }
.btn-primary { .btn-primary {
padding: 2px 5px; padding: 2px 5px;
} }
.fa { .fa {
color: #fff; color: #fff;
line-height: 24px; line-height: 24px;
} }
} }
} }
}
} }
.chat { .chatmenu {
.chatbodybottom { height: 36px;
background: $chat-bottom-background;
bottom: 1px;
left: 0; left: 0;
margin: 0 auto; padding: 2px 4px;
position: absolute; position: absolute;
right: 0; right: 0;
top: 36px;
@include breakpt($breakpoint-chat-small, max-height) { @include breakpt($breakpoint-chat-small, max-height) {
height: auto; display: none;
}
} }
}
.typinghint { .chatbody {
color: $chat-typing; border-left: 1px solid $bordercolor;
font-size: .8em; bottom: -1px;
height: 14px; left: 0;
overflow: hidden; position: absolute;
padding: 0 6px; right: 0;
white-space: nowrap; top: 74px;
@include breakpt($breakpoint-chat-small, max-height) { @include breakpt($breakpoint-chat-small, max-height) {
display: none; border-top: 1px solid $bordercolor;
} top: 0;
top: 0;
} }
}
.inputbox { .chatheader {
position: relative; background: $chat-header;
border-bottom: 1px solid $bordercolor;
border-left: 1px solid $bordercolor;
height: 36px;
left: 0;
line-height: 34px;
padding: 0 4px 0 8px;
position: absolute;
right: 0;
top: 0;
@include breakpt($breakpoint-chat-small, max-height) { @include breakpt($breakpoint-chat-small, max-height) {
height: auto; display: none;
} }
.btn { .chatstatusicon {
display: none; cursor: pointer;
padding: .5em 1em; display: block;
font-size: 1.4em;
height: 36px;
left: 0;
position: absolute; position: absolute;
right: 6px; text-align: center;
top: 1px; top: 0;
width: 36px;
} }
> div { .chatheadertitle {
border-top: 1px solid $bordercolor; display: inline;
} padding-left: 28px;
} }
.input { .ctrl {
border-color: transparent; color: $chat-ctrl;
border-radius: 0; position: absolute;
box-shadow: none; right: 1px;
display: block; top: 0;
height: 54px;
margin: 0;
max-height: 54px; /* FF hack */
resize: none;
width: 100%;
@include breakpt($breakpoint-chat-small, max-height) { .#{$fa-css-prefix} {
max-height: 2.5em; cursor: pointer;
padding: 6px;
} }
&:active,
&:focus {
border-color: $chat-input-border-color;
} }
span {
display: inline-block;
max-width: 60%;
overflow: hidden;
pointer-events: none;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
} }
} }
@ -595,16 +594,3 @@
50% {background-color: $componentbg;} 50% {background-color: $componentbg;}
100% {background-color: $actioncolor1;} 100% {background-color: $actioncolor1;}
} }
.chat.newmessage {
.chatheadertitle:after {
content: '***';
position: absolute;
right: 32px;
top: 2px;
}
.chatheader {
animation: newmessage 1s ease -.3s infinite;
}
}

101
src/styles/components/_fileinfo.scss
Unescape View File

@ -27,9 +27,23 @@
padding: 1em; padding: 1em;
position: relative; position: relative;
text-align: center; text-align: center;
}
.file-info { &.downloader {
.anim {
margin-left: -40px;
}
.file-info-size {
margin-bottom: 10px;
}
}
&.downloading {
.file-info-size {
border-color: $fileinfo-downloading-size-border;
}
}
> div { > div {
position: relative; position: relative;
z-index: 3; z-index: 3;
@ -54,6 +68,37 @@
text-align: left; text-align: left;
top: 14px; top: 14px;
} }
.uploader {
// scss-lint:disable NestingDepth
.file-info-speed {
bottom: 6px;
}
.actions {
margin-left: 30px;
opacity: 0;
}
.anim {
margin-left: 0;
}
.hovercontrol {
&:hover .anim {
margin-left: -50px;
}
&:hover .actions {
margin-left: 0;
opacity: 1;
}
> div {
transition: all .2s ease-in-out;
}
}
}
} }
.is_remote .file-info { .is_remote .file-info {
@ -91,6 +136,7 @@
} }
> div { > div {
//scss-lint:disable NestingDepth
bottom: 0; bottom: 0;
box-shadow: none !important; box-shadow: none !important;
left: 0; left: 0;
@ -101,13 +147,14 @@
&.progress-bar { &.progress-bar {
opacity: .5; opacity: .5;
}
&.progress-bar.download { &.download {
opacity: 1; opacity: 1;
z-index: 1; z-index: 1;
} }
} }
}
} }
.file-info-speed { .file-info-speed {
@ -118,49 +165,3 @@
right: 0; right: 0;
text-align: center; text-align: center;
} }
.file-info.uploader {
.file-info-speed {
bottom: 6px;
}
.actions {
margin-left: 30px;
opacity: 0;
}
.anim {
margin-left: 0;
}
.hovercontrol {
&:hover .anim {
margin-left: -50px;
}
&:hover .actions {
margin-left: 0;
opacity: 1;
}
> div {
transition: all .2s ease-in-out;
}
}
}
.file-info.downloader {
.anim {
margin-left: -40px;
}
.file-info-size {
margin-bottom: 10px;
}
}
.file-info.downloading {
.file-info-size {
border-color: $fileinfo-downloading-size-border;
}
}

247
src/styles/components/_presentation.scss
Unescape View File

@ -19,122 +19,51 @@
* *
*/ */
.presentation {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.mainPresentation #presentation { .mainPresentation #presentation {
display: block; display: block;
} }
.presentationpane { .presentation {
bottom: 0; bottom: 0;
left: 0; left: 0;
overflow: auto;
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
.welcome { .overlaybar {
padding: 0; bottom: 0;
.btn {
margin-top: 30px;
}
}
h1 {
white-space: normal;
}
.download-info {
color: $text-color;
left: 0; left: 0;
position: absolute; right: 0;
text-shadow: 1px 1px 1px #fff; text-align: center;
width: 100%;
}
}
.presentationpane {
.canvasContainer {
height: 100%;
width: 100%;
}
canvas {
display: block;
margin: 0 auto;
position: relative;
}
.odfcanvas {
cursor: default;
user-select: none;
body { .overlaybar-content {
background-color: transparent; // scss-lint:disable NestingDepth
} max-width: 100%;
document { .pagecontrol {
display: block; height: 30px;
} }
} }
.odfcontainer { .btn-prev {
display: none; left: 40px;
margin: 0;
padding: 0;
}
.odfcontainer.showonepage {
overflow: hidden;
text-align: center;
} }
}
.presentation .overlaybar { .btn-next {
bottom: 0; left: auto;
left: 0;
right: 0; right: 0;
text-align: center; }
}
.presentation .overlaybar .overlaybar-content {
max-width: 100%;
}
.presentation .overlaybar .overlaybar-button { .overlaybar-button {
font-size: 20px; font-size: 20px;
line-height: 28px; line-height: 28px;
padding: 4px 6px; padding: 4px 6px;
position: absolute; position: absolute;
top: 0; top: 0;
} }
}
.overlaybar-content .pagecontrol {
height: 30px;
}
.presentation .overlaybar .btn-prev {
left: 40px;
}
.presentation .overlaybar .btn-next {
left: auto;
right: 0;
}
.pageinfo input {
display: inline;
width: 70px;
}
.presentation .thumbnail { .thumbnail {
color: #333; color: #333;
display: inline-block; display: inline-block;
height: 122px; height: 122px;
@ -144,34 +73,38 @@
text-shadow: none; text-shadow: none;
vertical-align: middle; vertical-align: middle;
width: 160px; width: 160px;
}
.presentation .thumbnail.presentable { &:first-child {
margin-left: 0;
}
&.presentable {
cursor: pointer; cursor: pointer;
} }
.presentation .thumbnail:first-child { &:hover .presentation-action {
margin-left: 0; display: block;
} }
&:hover .notavailable {
display: block;
}
.presentation .thumbnail .caption { .caption {
// scss-lint:disable NestingDepth
overflow: hidden; overflow: hidden;
padding-bottom: 0; padding-bottom: 0;
text-overflow: ellipsis; text-overflow: ellipsis;
}
.presentation .thumbnail .caption .size { .size {
// scss-lint:disable SelectorDepth
font-size: 10px; font-size: 10px;
} }
.presentation .thumbnail .caption .progress { .progress {
// scss-lint:disable SelectorDepth
position: relative; position: relative;
} }
.presentation .thumbnail .caption .download-info { .download-info {
// scss-lint:disable SelectorDepth
bottom: 0; bottom: 0;
color: $text-color; color: $text-color;
left: 0; left: 0;
@ -180,9 +113,10 @@
right: 0; right: 0;
text-shadow: 1px 1px 1px #fff; text-shadow: 1px 1px 1px #fff;
top: 0; top: 0;
} }
}
.presentation .thumbnail .active { .active {
bottom: 0; bottom: 0;
color: #84b819; color: #84b819;
font-size: 10em; font-size: 10em;
@ -192,9 +126,9 @@
right: 0; right: 0;
text-align: center; text-align: center;
top: 0; top: 0;
} }
.presentation .thumbnail .notavailable { .notavailable {
bottom: 0; bottom: 0;
color: #d2322d; color: #d2322d;
display: none; display: none;
@ -205,32 +139,99 @@
right: 0; right: 0;
text-align: center; text-align: center;
top: 0; top: 0;
} }
.presentation .thumbnail:hover .notavailable {
display: block;
}
.presentation .thumbnail .presentation-action { .presentation-action {
display: none; display: none;
position: absolute; position: absolute;
top: 1px; top: 1px;
} }
.presentation .thumbnail .download { .download {
left: 1px; left: 1px;
} }
.presentation .thumbnail .delete { .delete {
right: 1px; right: 1px;
}
.filetype {
font-size: 5em;
}
}
} }
.presentation .thumbnail:hover .presentation-action { .presentationpane {
bottom: 0;
left: 0;
overflow: auto;
position: absolute;
right: 0;
top: 0;
.welcome {
padding: 0;
h1 {
white-space: normal;
}
.btn {
margin-top: 30px;
}
.progress span {
text-shadow: none;
}
.progress .download-info {
color: $text-color;
left: 0;
position: absolute;
text-shadow: 1px 1px 1px #fff;
width: 100%;
}
}
.canvasContainer {
height: 100%;
width: 100%;
}
canvas {
display: block; display: block;
margin: 0 auto;
position: relative;
}
.odfcanvas {
cursor: default;
user-select: none;
body {
background-color: transparent;
}
document {
display: block;
}
}
.odfcontainer {
display: none;
margin: 0;
padding: 0;
&.showonepage {
overflow: hidden;
text-align: center;
}
}
} }
.presentation .thumbnail .filetype { .pageinfo input {
font-size: 5em; display: inline;
width: 70px;
} }
.presentations { .presentations {

12
src/styles/components/_rightslide.scss
Unescape View File

@ -28,14 +28,14 @@
top: $minbarheight; top: $minbarheight;
transition: right 200ms ease-in-out; transition: right 200ms ease-in-out;
z-index: 5; z-index: 5;
}
.withBuddylist #rightslide {
right: 0;
}
#rightslide .rightslidepane { .rightslidepane {
height: 100%; height: 100%;
position: relative; position: relative;
width: 100%; width: 100%;
}
}
.withBuddylist #rightslide {
right: 0;
} }

5
src/styles/components/_roombar.scss
Unescape View File

@ -26,12 +26,11 @@
right: 0; right: 0;
top: $minbarheight; top: $minbarheight;
z-index: 4; z-index: 4;
}
#roombar .roombar { .roombar {
left: 0; left: 0;
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
}
} }

21
src/styles/components/_screenshare.scss
Unescape View File

@ -19,16 +19,22 @@
* *
*/ */
.mainScreenshare #screenshare {
display: block;
}
.screenshare { .screenshare {
bottom: 0; bottom: 0;
left: 0; left: 0;
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
}
.mainScreenshare #screenshare { .overlaybar {
display: block; bottom: 0;
left: 0;
right: 0;
}
} }
.screensharepane { .screensharepane {
@ -39,9 +45,6 @@
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
}
.screensharepane {
.remotescreen { .remotescreen {
position: relative; position: relative;
} }
@ -56,9 +59,3 @@
max-height: none; max-height: none;
width: auto; width: auto;
} }
.screenshare .overlaybar {
bottom: 0;
left: 0;
right: 0;
}

7
src/styles/components/_settings.scss
Unescape View File

@ -20,6 +20,7 @@
*/ */
#settings { #settings {
// scss-lint:disable NestingDepth
background: $settings-background; background: $settings-background;
border-left: 1px solid $bordercolor; border-left: 1px solid $bordercolor;
bottom: 0; bottom: 0;
@ -30,9 +31,8 @@
transition: right 200ms ease-in-out; transition: right 200ms ease-in-out;
width: 520px; width: 520px;
z-index: 50; z-index: 50;
}
#settings.show { &.show {
right: 0; right: 0;
@include breakpt($breakpoint-settings-medium, max-width, only screen) { @include breakpt($breakpoint-settings-medium, max-width, only screen) {
@ -53,6 +53,7 @@
right: 0; right: 0;
} }
} }
}
} }
.settings { .settings {
@ -65,9 +66,7 @@
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
}
.settings {
@include breakpt($breakpoint-settings-medium, max-width, only screen) { @include breakpt($breakpoint-settings-medium, max-width, only screen) {
padding-bottom: 10px; padding-bottom: 10px;
} }

22
src/styles/components/_usability.scss
Unescape View File

@ -19,6 +19,16 @@
* *
*/ */
.withChat #help,
.withBuddylist #help {
right: 260px;
}
.withChat.withBuddylist #help,
.withSettings #help {
right: 520px;
}
#help { #help {
bottom: 10px; bottom: 10px;
color: #aaa; color: #aaa;
@ -32,19 +42,7 @@
transition: right 200ms ease-in-out; transition: right 200ms ease-in-out;
user-select: none; user-select: none;
width: 350px; width: 350px;
}
.withChat #help,
.withBuddylist #help {
right: 260px;
}
.withChat.withBuddylist #help,
.withSettings #help {
right: 520px;
}
#help {
@include breakpt($breakpoint-useability-small, max-width, only screen) { @include breakpt($breakpoint-useability-small, max-width, only screen) {
display: none; display: none;
} }

131
src/styles/components/_youtubevideo.scss
Unescape View File

@ -19,12 +19,66 @@
* *
*/ */
.mainYoutubevideo #youtubevideo {
display: block;
}
.youtubevideo { .youtubevideo {
bottom: 0; bottom: 0;
left: 0; left: 0;
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
.click-container {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 5;
}
.welcome {
max-width: 700px;
h1 {
margin-top: 10px;
}
.welcome-container {
max-width: 700px;
}
.welcome-logo {
background: transparent;
font-size: 10em;
}
}
.overlaybar {
bottom: 0;
left: 0;
right: 0;
}
.overlaybar-content {
max-width: 100%;
width: 100%;
form .overlaybar-buttons {
position: absolute;
right: 23px;
top: 6px;
}
}
.overlaybar-input {
padding-right: 15px;
position: relative;
width: 100%;
}
} }
.youtubevideopane { .youtubevideopane {
@ -55,67 +109,14 @@
&:hover { &:hover {
opacity: .8; opacity: .8;
} }
}
#youtubeplayerinfo div { div {
background-color: #f9f2f4; background-color: #f9f2f4;
border-radius: 10px; border-radius: 10px;
display: inline-block; display: inline-block;
font-size: 2em; font-size: 2em;
padding: 20px 40px; padding: 20px 40px;
} }
.youtubevideo .click-container {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 5;
}
.youtubevideo .welcome {
max-width: 700px;
}
.youtubevideo .welcome h1 {
margin-top: 10px;
}
.youtubevideo .welcome .welcome-container {
max-width: 700px;
}
.youtubevideo .welcome .welcome-logo {
background: transparent;
font-size: 10em;
}
.mainYoutubevideo #youtubevideo {
display: block;
}
.youtubevideo .overlaybar {
bottom: 0;
left: 0;
right: 0;
}
.youtubevideo .overlaybar-content {
max-width: 100%;
width: 100%;
}
.youtubevideo .overlaybar-input {
padding-right: 15px;
position: relative;
width: 100%;
}
.youtubevideo .overlaybar-content .overlaybar-buttons {
position: absolute;
right: 23px;
top: 6px;
} }
.volumecontrol { .volumecontrol {
@ -143,37 +144,37 @@
display: inline-block; display: inline-block;
padding: 6px 8px; padding: 6px 8px;
vertical-align: middle; vertical-align: middle;
}
.volumebar .bar { .bar {
-webkit-appearance: none; -webkit-appearance: none;
background-color: #aaa; background-color: #aaa;
border: 1px solid #aaa; border: 1px solid #aaa;
height: 3px; height: 3px;
outline: 0; outline: 0;
width: 100px; width: 100px;
}
.volumebar .bar::-webkit-slider-thumb { &::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
background-color: #fff; background-color: #fff;
height: 20px; height: 20px;
width: 6px; width: 6px;
} }
.volumebar .bar::-moz-range-track { &::-moz-range-track {
background: #aaa; background: #aaa;
border: 0; border: 0;
} }
.volumebar .bar::-moz-range-thumb { &::-moz-range-thumb {
background-color: #fff; background-color: #fff;
border-radius: 0; border-radius: 0;
height: 20px; height: 20px;
width: 6px; width: 6px;
} }
.volumebar .bar::-moz-focusring { &::-moz-focusring {
outline: 1px solid #aaa; outline: 1px solid #aaa;
outline-offset: -1px; outline-offset: -1px;
}
}
} }

44
src/styles/global/_overlaybar.scss
Unescape View File

@ -20,6 +20,7 @@
*/ */
.overlaybar { .overlaybar {
// scss-lint:disable QualifyingElement
background: $overlaybar-background; background: $overlaybar-background;
border-bottom: 1px solid #222; border-bottom: 1px solid #222;
border-top: 1px solid #222; border-top: 1px solid #222;
@ -30,14 +31,30 @@
text-shadow: 0 0 5px #000; text-shadow: 0 0 5px #000;
user-select: none; user-select: none;
vertical-align: middle; vertical-align: middle;
}
.overlaybar {
// scss-lint:disable QualifyingElement
&:hover { &:hover {
background: $componentfg2; background: $componentfg2;
} }
&.notvisible {
background: transparent;
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
pointer-events: none;
&:hover {
background: transparent;
}
.overlaybar-content {
display: none;
}
.overlaybar-overlay {
display: block;
}
}
.btn { .btn {
text-shadow: none; text-shadow: none;
} }
@ -59,27 +76,6 @@
label { label {
padding-top: 6px !important; padding-top: 6px !important;
} }
}
.overlaybar {
&.notvisible {
background: transparent;
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
pointer-events: none;
&:hover {
background: transparent;
}
.overlaybar-content {
display: none;
}
.overlaybar-overlay {
display: block;
}
}
.overlaybar-button { .overlaybar-button {
color: $overlaybar-btn; color: $overlaybar-btn;

Write Preview
Loading…
Cancel
Save