From e62eb6793c8946e9bd494932de9a09ad12b82c35 Mon Sep 17 00:00:00 2001 From: Evan Theurer Date: Fri, 20 Feb 2015 18:13:31 +0100 Subject: [PATCH] Fix scss-lint errors BorderZero ColorKeyword DeclarationOrder DuplicateProperty EmptyLineBetweenBlocks FinalNewline HexNotation ImportPath Indentation LeadingZero PropertySortOrder PropertySpelling Shorthand SingleLinePerSelector SpaceAfterComma SpaceAfterPropertyColon SpaceBeforeBrace StringQuotes TrailingSemicolon UnnecessaryParentReference UrlQuotes ZeroUnit. --- src/styles/_shame.scss | 50 +++-- src/styles/bootstrap.scss | 6 +- src/styles/components/_audiolevel.scss | 6 +- src/styles/components/_audiovideo.scss | 189 +++++++++++------ src/styles/components/_bar.scss | 114 ++++++---- src/styles/components/_buddylist.scss | 128 +++++++----- .../components/_buddypicturecapture.scss | 60 ++++-- .../components/_buddypictureupload.scss | 51 +++-- src/styles/components/_chat.scss | 195 ++++++++++++------ src/styles/components/_contactsmanager.scss | 33 ++- src/styles/components/_fileinfo.scss | 26 ++- src/styles/components/_presentation.scss | 74 ++++--- src/styles/components/_screenshare.scss | 3 +- src/styles/components/_settings.scss | 20 +- src/styles/components/_social.scss | 5 + src/styles/components/_usability.scss | 22 +- src/styles/components/_youtubevideo.scss | 52 ++--- src/styles/csp.scss | 2 +- src/styles/font-awesome.scss | 6 +- src/styles/global/_animations.scss | 11 +- src/styles/global/_base.scss | 7 +- src/styles/global/_loader.scss | 23 ++- src/styles/global/_nicescroll.scss | 11 +- src/styles/global/_overlaybar.scss | 29 ++- src/styles/global/_pages.scss | 50 +++-- src/styles/global/_variables.scss | 64 +++--- src/styles/global/_views.scss | 6 +- src/styles/main.scss | 60 +++--- 28 files changed, 803 insertions(+), 500 deletions(-) diff --git a/src/styles/_shame.scss b/src/styles/_shame.scss index e0cbbfd1..9822aa0f 100644 --- a/src/styles/_shame.scss +++ b/src/styles/_shame.scss @@ -23,54 +23,60 @@ // Remove boostrap 3 modal scroll bar. .modal { - overflow-y: auto; + overflow-y: auto; } // Toastr fontawesome support. #toast-container > .toast { - background-image: none !important; + background-image: none !important; } + #toast-container > .toast:before { - position: fixed; - font-family: FontAwesome; - font-size: 20px; - line-height: 20px; - float: left; - color: #fff; - padding-right: 0.5em; - margin: auto 0.5em auto -1.5em; + color: #fff; + float: left; + font-family: FontAwesome; + font-size: 20px; + line-height: 20px; + margin: auto .5em auto -1.5em; + padding-right: .5em; + position: fixed; } + #toast-container > .toast-warning:before { - content: "\f05a"; + content: '\f05a'; } + #toast-container > .toast-error:before { - content: "\f05a"; + content: '\f05a'; } + #toast-container > .toast-info:before { - content: "\f05a"; + content: '\f05a'; } + #toast-container > .toast-success:before { - content: "\f05a"; + content: '\f05a'; } // No shadows for toastr. -#toast-container > :hover, #toast-container > div { - box-shadow: none !important; +#toast-container > :hover, +#toast-container > div { + box-shadow: none !important; } // Update colors for toaster. .toast-info { - background-color: #5bc0de; + background-color: #5bc0de; } // Update position of toastr close icon. .toast-close-button { - top: -0.6em; - font-size: 1em; + font-size: 1em; + top: -.6em; } // No opacity for toastr. #toast-container > div { - opacity: 1; - filter: alpha(opacity=100); -} \ No newline at end of file + filter: alpha(opacity=100); + opacity: 1; +} diff --git a/src/styles/bootstrap.scss b/src/styles/bootstrap.scss index ed5c767a..1a22c6a0 100644 --- a/src/styles/bootstrap.scss +++ b/src/styles/bootstrap.scss @@ -1,4 +1,4 @@ -@import "compass"; -@import "global/variables"; -@import "libs/bootstrap/bootstrap"; +@import 'compass'; +@import 'global/variables'; +@import 'libs/bootstrap/bootstrap'; diff --git a/src/styles/components/_audiolevel.scss b/src/styles/components/_audiolevel.scss index 5ead0d6c..81d2f253 100644 --- a/src/styles/components/_audiolevel.scss +++ b/src/styles/components/_audiolevel.scss @@ -27,10 +27,12 @@ top: $audiolevel-top; width: 400px; z-index: 60; + .audio-level { + // scss-lint:disable DuplicateProperty background: $audiovideolevel; /* Old browsers */ - background: gradient(linear, left top, left bottom, color-stop(0%,$audiovideolevel), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); /* Chrome,Safari4+ */ - background: linear-gradient(to bottom, $audiovideolevel 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); /* W3C */ + background: gradient(linear, left top, left bottom, color-stop(0%, $audiovideolevel), color-stop(50%, #a1d54f), color-stop(51%, #80c217), color-stop(100%, #7cbc0a)); /* Chrome,Safari4+ */ + background: linear-gradient(to bottom, $audiovideolevel 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); /* W3C */ border-radius: 0 0 2px 2px; height: 4px; left: 0; diff --git a/src/styles/components/_audiovideo.scss b/src/styles/components/_audiovideo.scss index 44378921..954dc341 100644 --- a/src/styles/components/_audiovideo.scss +++ b/src/styles/components/_audiovideo.scss @@ -29,22 +29,25 @@ } #audiovideo { + @include breakpt($breakpoint-video-small, max-width, only screen) { + right: 0; + } + &.fullscreen { - background: black !important; + background: #000 !important; bottom: 0 !important; left: 0 !important; - top: 0 !important; right: 0 !important; + top: 0 !important; + .remoteVideo .peerActions { display: none; } } - @include breakpt($breakpoint-video-small, max-width, only screen) { - right: 0; - } } -.mainScreenshare #audiovideo, .mainPresentation #audiovideo { +.mainScreenshare #audiovideo, +.mainPresentation #audiovideo { @include breakpt($breakpoint-video-medium, max-width, only screen) { display: none; } @@ -63,29 +66,35 @@ bottom: 0; left: 0; position: absolute; - top: 0; right: 0; + top: 0; + &.active { perspective: 1000; + &:hover .overlayActions { opacity: .3; } + .overlayActions:hover { opacity: .6; } + .audiovideoBase { transform: rotateY(180deg); } } + .audiovideoBase { - position: relative; - width: 100%; height: 100%; - transition-property: transform; - transition-duration: 2s; + position: relative; transform: rotateY(0deg); + transition-duration: 2s; + transition-property: transform; + width: 100%; z-index: 2; } + .localContainer { bottom: 0; left: 0; @@ -96,6 +105,7 @@ transform: scale(-1, 1); z-index: 2; } + video { object-fit: cover; } @@ -112,36 +122,40 @@ transform: rotateY(180deg); z-index: 2; } + .miniContainer { + background: #000; bottom: 2px; - max-height: 18%; height: 100%; + max-height: 18%; opacity: 0; position: absolute; right: 2px; transform: scale(-1, 1); - transition-property: opacity; transition-duration: .5s; + transition-property: opacity; z-index: 25; - background: black; + &.visible { opacity: 1; } } + .miniVideo { display: block; + height: 100%; max-height: 100%; max-width: 100%; - height: 100%; width: 100%; } + .localVideo { background: $video-background; display: block; max-height: 100%; opacity: 0; - transition-property: opacity; transition-duration: 2s; + transition-property: opacity; width: 100%; } } @@ -153,8 +167,9 @@ position: absolute; right: 0; top: 0; - transition-property: opacity; transition-duration: 2s; + transition-property: opacity; + video { display: block; height: 100%; @@ -162,7 +177,7 @@ } } -.audiovideo .remoteVideo{ +.audiovideo .remoteVideo { background: $video-background; display: inline-block; max-height: 100%; @@ -172,13 +187,16 @@ vertical-align: bottom; //visibility: hidden; width: 100%; + &.withvideo { //visibility: visible; } + &.onlyaudio { background: $video-onlyaudio-background; //visibility: visible; } + .onlyaudio { color: $video-onlyaudio; display: none; @@ -191,15 +209,20 @@ text-align: center; top: 45%; } - &.onlyaudio video, &.dummy video { + + &.onlyaudio video, + &.dummy video { visibility: hidden; } + &.onlyaudio .onlyaudio { display: block; } + &.dummy .onlyaudio { display: block; } + .peerActions { bottom: 5%; left: 40px; @@ -208,28 +231,31 @@ position: absolute; right: 40px; text-align: center; - transition-property: opacity; transition-duration: .2s; + transition-property: opacity; z-index: 10; + &:hover { opacity: .5; } + i { font-size: 3vw; } } + .peerLabel { bottom: 4%; - color: white; - left: 4%; + color: #fff; font-size: 2.5vw; + left: 4%; max-width: 30%; opacity: .7; overflow: hidden; padding: 4px; position: absolute; text-overflow: ellipsis; - text-shadow: 0 0 4px black; + text-shadow: 0 0 4px #000; white-space: nowrap; z-index: 8; } @@ -240,38 +266,42 @@ bottom: 0; height: 140px; left: 0; - margin:auto 0; + margin: auto 0; opacity: 0; padding: 3px 0; position: absolute; top: 0; width: 40px; z-index: 5; + button { color: #ccc; cursor: pointer; display: block; outline: 0; - text-shadow: 0 0 5px black; + text-shadow: 0 0 5px #000; width: 40px; } + button.renderer-auditorium { position: relative; + span:before { - position:absolute; - left:50%; - top:50%; - margin-left: -0.8em; - margin-top: -0.5em; - content: "\f183"; + content: '\f183'; + left: 50%; + margin-left: -.8em; + margin-top: -.5em; + position: absolute; + top: 50%; } + span:after { - position:absolute; - top:50%; - right:50%; - margin-right: -0.9em; - margin-top: -0.5em; - content: "\f183"; + content: '\f183'; + margin-right: -.9em; + margin-top: -.5em; + position: absolute; + right: 50%; + top: 50%; } } } @@ -280,11 +310,13 @@ &.talking .peerLabel { color: $audiovideolevel; } + .peerLabel { transition: color 500ms ease-out; } + .overlayLogo { - background: url(../img/logo-overlay.png) no-repeat center; + background: url('../img/logo-overlay.png') no-repeat center; background-size: 100%; height: 20%; max-height: 40px; @@ -301,35 +333,40 @@ .miniContainer { &.talking:after { - content: ""; - position: absolute; - top: 2px; + bottom: 2px; + box-shadow: 0 0 20px $audiovideolevel inset; + content: ''; left: 2px; + position: absolute; right: 2px; - bottom: 2px; - box-shadow: 0px 0px 20px $audiovideolevel inset; + top: 2px; } + video { } } .renderer-smally { + background: #000; + border-right: 0; + border-top: 0; width: 150px; - background: black; - border-right: none; - border-top: none; + .remoteVideos { padding-bottom: 85px; } + .remoteVideo { .peerLabel { font-size: .9em; font-weight: bold; } + .peerActions i { font-size: 1em; } } + .miniContainer { bottom: 0; height: 85px; @@ -345,13 +382,13 @@ .renderer-democrazy { .remoteVideos .miniContainer { - position: relative; + bottom: auto; + display: inline-block; max-height: 100%; max-width: 100%; - display: inline-block; - vertical-align: bottom; - bottom: auto; + position: relative; right: auto; + vertical-align: bottom; } .active .miniContainer { @@ -369,27 +406,33 @@ text-align: center; top: auto; white-space: nowrap; + > div { cursor: pointer; height: 108px; width: 192px; } + .overlayLogo { display: none; } + .peerLabel, .peerActions i { font-size: 1.1em; } + .peerLabel { background: $video-overlayactions; } } + .miniContainer { height: 108px; max-height: none; width: 192px; } + .bigVideo { bottom: 112px; left: 0; @@ -398,71 +441,83 @@ position: absolute; right: 0; top: 2px; - transition-property: opacity; transition-duration: 2s; + transition-property: opacity; + video { - width: 100%; height: 100%; + width: 100%; } } } .renderer-auditorium { .remoteContainer { - border-left: 40px solid black; + border-left: 40px solid #000; } + .remoteVideos { + background: $video-background; + pointer-events: auto; top: 180px; width: 320px; - pointer-events: auto; - background: $video-background; + .overlayLogo { display: none; } + video { height: 100%; - width: 100%; - object-fit: cover; margin-top: -9px; + object-fit: cover; + width: 100%; } + > div { cursor: pointer; - width: 80px; - height: 60px; display: inline-block; + height: 60px; + width: 80px; } + .overlayLogo { display: none; } + .peerLabel { - font-size: 0.6em; background: $video-overlayactions; + bottom: 0; + font-size: .6em; + left: 0; + line-height: 9px; max-width: 100%; - bottom: 0px; - left: 0px; - right: 0px; padding: 0 4px; - line-height: 9px; + right: 0; } + .peerActions { display: none; } + .miniContainer { - right: auto; max-height: auto; + right: auto; } } + .bigVideo { - width: 320px; height: 180px; + width: 320px; + video { height: 100%; width: 100%; } + .peerLabel { + bottom: 8%; font-size: 1vw; max-width: 40%; - bottom: 8%; } } } diff --git a/src/styles/components/_bar.scss b/src/styles/components/_bar.scss index 5b861198..405eaf9b 100644 --- a/src/styles/components/_bar.scss +++ b/src/styles/components/_bar.scss @@ -20,6 +20,7 @@ */ .bar { + // scss-lint:disable PropertySpelling background: $bar-background; color: $componentfg1; font: bold 1em/50px $font-sans-serif; @@ -31,50 +32,57 @@ .bar .left { padding: 5px 5px 5px 15px; + + @include breakpt($breakpoint-medium) { + padding: 2px 5px 0 11px; + padding: 2px 5px 0 11px; + } + .logo { background: $logo no-repeat; background-size: 100%; + color: #000; display: inline-block; - color: black; - height: 32px; - width: 90px; font: normal 11px/11px $font-sans-serif; + height: 32px; text-align: left; vertical-align: middle; + width: 90px; + + @include breakpt($breakpoint-medium) { + background: $scalable-logo no-repeat center; + height: 46px; + width: 46px; + + span { + display: none; + } + } + span { font-style: italic; left: 38px; position: relative; top: 26px; } + span a { color: $bar-logo-text-desc; } - @include breakpt($breakpoint-medium) { - background: $scalable-logo no-repeat center; - width: 46px; - height: 46px; - span { - display: none; - } - } - } - @include breakpt($breakpoint-medium) { - padding: 2px 5px 0px 11px; } } .bar .middle { + left: 0; + pointer-events: none; position: absolute; - left: 0px; right: 60px; - top: 0px; - pointer-events: none; text-align: center; + top: 0; > span { - display: inline-block; background: $bar-background; + display: inline-block; min-height: 50px; pointer-events: auto; } @@ -82,9 +90,10 @@ .userpicture { border-radius: 2px; display: inline-block; - width: 46px; height: 46px; - margin: -1px .5em 0 .5em; + margin: -1px .5em 0; + width: 46px; + @include breakpt($breakpoint-medium) { display: none; } @@ -97,13 +106,15 @@ .status-reconnecting, .status-error, .status-ringing { + @include breakpt($breakpoint-medium) { - max-width: 100%; left: 0; + max-width: 100%; position: absolute; right: 0; } } + .status-connecting .actions, .status-closed .actions, .status-reconnecting .actions, @@ -113,87 +124,112 @@ } .bar .right { - padding-right: 4px; margin-top: -1px; + padding-right: 4px; + .badge { background-color: $actioncolor1; - border: 1px solid white; + border: 1px solid #fff; font-size: .4em; position: absolute; right: 0; top: 2px; } + .btn { background: $bar-btn-action-normal; border-color: $bar-btn-action-normal-border; color: $bar-btn-action-color; - height: 42px; font: 24px/40px $font-sans-serif; + height: 42px; margin-left: -2px; padding: 0; + position: relative; text-align: center; width: 42px; - position: relative; + &:focus { - border: none; - outline: none; + border: 0; box-shadow: 0; + outline: none; } + &:hover { background-color: transparent; border-color: $bar-btn-action-border; color: $bar-btn-action-hover; } + &.active { background-color: transparent; border-color: $bordercolor; color: $bar-btn-action-hover; } + &.active.amutebtn { background-color: $bar-btn-action-mute; border-color: $bar-btn-action-mute; - color: white; + color: #fff; } + &.active.aenablebtn { background-color: $bar-btn-action-enable; border-color: $bar-btn-action-enable; - color: white; + color: #fff; } } + .btn-mutemicrophone i:before { - content: "\f130"; + content: '\f130'; } + .btn-mutemicrophone.active i:before { - content: "\f131"; + content: '\f131'; } + .btn-mutecamera i:before { - content: "\f06e"; + content: '\f06e'; } + .btn-mutecamera.active i:before { - content: "\f070"; + content: '\f070'; } } @keyframes shakeityeah { 0% { transform: translate(2px, 1px) rotate(0deg); } + 2% { transform: translate(-1px, -2px) rotate(-1deg); } - 4% { transform: translate(-3px, 0px) rotate(1deg); } - 8% { transform: translate(0px, 2px) rotate(0deg); } + + 4% { transform: translate(-3px, 0) rotate(1deg); } + 4% { transform: translate(-3px, 0) rotate(1deg); } + + 8% { transform: translate(0, 2px) rotate(0deg); } + 8% { transform: translate(0, 2px) rotate(0deg); } + 10% { transform: translate(1px, -1px) rotate(1deg); } + 12% { transform: translate(-1px, 2px) rotate(-1deg); } + 14% { transform: translate(-3px, 1px) rotate(0deg); } + 16% { transform: translate(2px, 1px) rotate(-1deg); } + 18% { transform: translate(-1px, -1px) rotate(1deg); } + 20% { transform: translate(2px, 2px) rotate(0deg); } + 22% { transform: translate(1px, -2px) rotate(-1deg); } - 24% { transform: translate(0px, 0px) rotate(0deg); } + + 24% { transform: translate(0, 0) rotate(0deg); } + 24% { transform: translate(0, 0) rotate(0deg); } } .btn-shakeityeah { - animation-name: shakeityeah; - animation-duration: 4.0s; - transform-origin:50% 50%; + animation-duration: 4s; animation-iteration-count: infinite; + animation-name: shakeityeah; animation-timing-function: linear; + transform-origin: 50% 50%; } diff --git a/src/styles/components/_buddylist.scss b/src/styles/components/_buddylist.scss index 889aff60..506aeb92 100644 --- a/src/styles/components/_buddylist.scss +++ b/src/styles/components/_buddylist.scss @@ -30,14 +30,14 @@ #buddylist:before { background: $buddylist-tab-background; + border-bottom: 1px solid $bordercolor; + border-bottom-left-radius: 6px; border-left: 1px solid $bordercolor; border-top: 1px solid $bordercolor; - border-bottom: 1px solid $bordercolor; border-top-left-radius: 6px; - border-bottom-left-radius: 6px; bottom: 0; color: $buddylist-tab-color; - content: "\f100"; + content: '\f100'; cursor: pointer; display: none; font-family: FontAwesome; @@ -46,18 +46,18 @@ left: 0; line-height: 55px; margin: auto; + padding-right: 4px; pointer-events: auto; position: absolute; text-align: center; top: 0; width: 26px; z-index: 1; - padding-right: 4px; } .withBuddylist #buddylist:before { - content: "\f101"; - padding-right: 0px; + content: '\f101'; + padding-right: 0; } .withBuddylistAutoHide #buddylist:before { @@ -81,19 +81,22 @@ .buddylist { &.loading { .buddylistloading { - display:block; + display: block; } } + &.empty { .buddylistempty { - display:block; + display: block; } } + .buddycontainer { pointer-events: auto; position: relative; user-select: none; } + .buddylistempty { bottom: 0; color: $font-color-accent; @@ -102,12 +105,13 @@ height: 2em; left: 0; margin: auto; - padding:.4em; + padding: .4em; position: absolute; right: 0; text-align: center; top: 0; } + .buddylistloading { bottom: 0; color: $font-color-accent; @@ -115,7 +119,7 @@ font-size: 1.4em; height: 2em; margin: auto; - padding:.4em; + padding: .4em; position: absolute; right: 0; text-align: center; @@ -123,6 +127,8 @@ } .buddy { + @include tap-highlight-color($tap-highlight); + background: $sidepanebg; border-bottom: 1px solid $bordercolor; cursor: pointer; @@ -133,7 +139,6 @@ position: relative; text-align: left; width: 100%; - @include tap-highlight-color($tap-highlight); } .buddy:hover { @@ -141,24 +146,32 @@ } .buddy { - &.withSubline .buddy1, &.contact .buddy1 { + &.withSubline .buddy1, + &.contact .buddy1 { top: 15px; } - &.withSubline .buddy2, &.contact .buddy2 { + + &.withSubline .buddy2, + &.contact .buddy2 { display: block; } + &.hovered .buddyactions { right: 0; } + & .fa.contact:before { - content: "\f006"; + content: '\f006'; } + &.contact .fa.contact:before { - content: "\f005"; + content: '\f005'; } + &.isself .fa.contact:before { - content: "\f192"; + content: '\f192'; } + .buddyPicture { background: $actioncolor1; border-radius: 2px; @@ -169,65 +182,72 @@ position: relative; text-align: center; width: 46px; + .#{$fa-css-prefix} { color: $actioncolor2; - line-height: 46px; font-size: 3em; + line-height: 46px; } + img { bottom: 0; display: block; left: 0; + max-height: 100%; + max-width: 100%; position: absolute; right: 0; top: 0; - max-height: 100%; - max-width: 100%; } } + .buddyPictureSmall { - margin:0px; - margin-left:0px; - height:30px; - width:30px; - margin-right:0px; + height: 30px; + margin: 0; + margin-left: 0; + margin-right: 0; + width: 30px; + .#{$fa-css-prefix} { - line-height: 30px; font-size: 2em; + line-height: 30px; } } + .buddy1 { color: $buddylist-buddy1; - font-weight: bold; font-size: 14px; + font-weight: bold; height: 28px; left: 65px; - position: absolute; overflow: hidden; + position: absolute; right: 4px; text-overflow: ellipsis; top: 24px; white-space: nowrap; } + .buddy2 { color: $buddylist-buddy2; + display: none; left: 65px; overflow: hidden; position: absolute; - right: 0px; + right: 0; top: 33px; white-space: nowrap; - display: none; } + .buddy3 { + display: inline-block; overflow: hidden; - white-space: nowrap; + padding: 0 6px; + text-align: left; text-overflow: ellipsis; - text-align:left; - vertical-align:middle; - display: inline-block; + vertical-align: middle; + white-space: nowrap; width: 120px; - padding: 0px 6px; } } @@ -235,58 +255,64 @@ background: $buddylist-action-background; height: 66px; line-height: 66px; + padding: 0 10px; position: absolute; right: -125px; - padding: 0 10px; text-align: right; - top: 0px; - transition-property: right; + top: 0; transition-duration: .3s; + transition-property: right; white-space: nowrap; z-index: 5; + .btn { - width: 42px; + font-size: $buddylist-action-font-size; height: 40px; - padding: 0px; + line-height: 40px; + padding: 0; text-align: center; vertical-align: middle; - line-height: 40px; - font-size: $buddylist-action-font-size; + width: 42px; } } .buddy .buddysessions { - margin-top: 56px; - max-height:0px; margin-bottom: 10px; - transition-property: max-height; - transition-duration: .5s; + margin-top: 56px; + max-height: 0; transition-delay: .1s; + transition-duration: .5s; + transition-property: max-height; + ul { - padding-top: 10px; - margin: 0 14px; - padding-left: 0px; border-left: 1px dotted $bordercolor; border-right: 1px dotted $bordercolor; + margin: 0 14px; + padding-left: 0; + padding-top: 10px; } + ul li { - margin-bottom: 2px; - margin-left: 0px; list-style-type: none; + margin-bottom: 2px; + margin-left: 0; + .btn-group { visibility: hidden; } + &:hover { .btn-group { visibility: visible; } } } + .currentsession .buddy3 { font-weight: bold; } } .buddy.hovered .buddysessions { - max-height:999px; + max-height: 999px; } diff --git a/src/styles/components/_buddypicturecapture.scss b/src/styles/components/_buddypicturecapture.scss index 6a884a00..225e9cc1 100644 --- a/src/styles/components/_buddypicturecapture.scss +++ b/src/styles/components/_buddypicturecapture.scss @@ -24,76 +24,92 @@ display: block; margin-bottom: 5px; } + .videoPicture { margin-bottom: 4px; + .videoPictureVideo { - background-color: black; + background-color: #000; overflow: hidden; position: relative; } + video { object-fit: cover; } } + .videoPictureVideo { - width: 200px; height: 200px; - .videoPrev, video, .preview { - width: 100%; + width: 200px; + + .videoPrev, + video, + .preview { height: 100%; + width: 100%; } } + .videoFlash { - position: absolute; - left:0px; - right:0px; - top:0px; - bottom:0px; - background-color:white; + background-color: #fff; border: 1px dotted $bordercolor; + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; visibility: hidden; z-index: 5; } + .videoFlash.flash { visibility: visible; } + .preview { left: 0; position: absolute; top: 0; + &.previewPicture { position: relative; } } + .showTakePicture { .btn { } } + .btn-takePicture, .btn-retakePicture { - left: 0px; - right: 0px; + left: 0; + margin: 0 auto; + max-width: 40%; position: absolute; + right: 0; top: 50%; - margin:0 auto; - max-width:40%; } + .btn-retakePicture { - visibility:hidden; + visibility: hidden; } + .videoPictureVideo:hover .btn-retakePicture { - visibility:visible; + visibility: visible; } + .countdownPicture { color: $componentbg; font-size: 45px; - left: 0px; - right: 0px; + left: 0; + margin: 0 auto; + opacity: .8; position: absolute; - top: 75px; - margin:0 auto; + right: 0; text-align: center; - text-shadow: 0 0 5px black; - opacity:0.8; + text-shadow: 0 0 5px #000; + top: 75px; } } diff --git a/src/styles/components/_buddypictureupload.scss b/src/styles/components/_buddypictureupload.scss index 568d0b4f..82d3665c 100644 --- a/src/styles/components/_buddypictureupload.scss +++ b/src/styles/components/_buddypictureupload.scss @@ -20,80 +20,95 @@ */ .buddyPictureUpload { - position: relative; + position: relative; + .loader { + left: 90px; position: absolute; z-index: 1; - left: 90px; + .fa-spin { color: $componentfg4; } } + >p { - white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + white-space: nowrap; } + .showUploadPicture { - position: relative; + background-color: $componentbg; border: 1px solid $bordercolor; height: 200px; line-height: 200px; margin-bottom: 10px; overflow: hidden; + position: relative; text-align: center; - width: 200px; - background-color: $componentbg; user-select: none; + width: 200px; + &.imgData { - background-color: black; + background-color: #000; + .chooseUploadPicture { display: none; } } + .chooseUploadPicture { color: $componentfg4; + left: 0; + margin: 0 auto; position: absolute; + right: 0; z-index: 1; - left: 0px; - right: 0px; - margin: 0 auto; } + .fa { color: $componentbg; - text-shadow: 0 0 5px black; - opacity: 0.8; + opacity: .8; + text-shadow: 0 0 5px #000; } } + .preview { + left: 0; position: relative; - top: 0px; - left: 0px; + top: 0; } + .imageUtilites { line-height: 30px; position: absolute; visibility: hidden; width: 200px; z-index: 1; + .fa { cursor: pointer; font-size: 40px; - width: 50px; height: 50px; + width: 50px; } } + .showUploadPicture.imgData:hover .imageUtilites { - visibility:visible; + visibility: visible; } + .moveHorizontal { - top: -4px; position: relative; + top: -4px; } + .moveVertical { - position: absolute; left: 158px; + position: absolute; } + .resize { position: relative; top: 108px; diff --git a/src/styles/components/_chat.scss b/src/styles/components/_chat.scss index a4cdcbb9..7a15c88e 100644 --- a/src/styles/components/_chat.scss +++ b/src/styles/components/_chat.scss @@ -20,25 +20,27 @@ */ #chat { + bottom: 0; + min-width: $chat-width; + opacity: 0; pointer-events: none; position: absolute; - bottom: 0px; right: $chat-width; - top: 0px; + top: 0; width: $chat-width; - min-width: $chat-width; z-index: 45; - opacity: 0; } .withChat { #chat { opacity: 1; } + &.withChatMaximized #chat { left: 0; width: auto; } + .chat { pointer-events: auto; } @@ -46,18 +48,19 @@ .chatcontainer { background: $chat-background; - bottom: 0px; - left: 0px; - right: 0px; - top: 0px; + bottom: 0; + left: 0; overflow: hidden; position: absolute; + right: 0; + top: 0; } .showchatlist { .chatpane { right: 100%; } + .chatlist { left: 0; } @@ -70,42 +73,50 @@ position: absolute; top: 0; width: 100%; + .list-group { - margin-top: -1px; margin-bottom: -1px; + margin-top: -1px; max-height: 100%; overflow-x: hidden; overflow-y: auto; } + .list-group-item { - border-right: none; - border-left: none; + border-left: 0; border-radius: 0; + border-right: 0; + line-height: 26px; + min-height: 51px; padding-right: 70px; position: relative; - min-height: 51px; - line-height: 26px; + &.newmessage { - animation: newmessage 1s ease -0.3s infinite; + animation: newmessage 1s ease -.3s infinite; } + &.disabled { color: $chat-disabled; } + &:hover button { display: inline; } + .fa-lg { display: inline-block; text-align: center; width: 18px; } + .badge { background: $chat-badge; - border: 1px solid white; + border: 1px solid #fff; position: absolute; right: 50px; top: 14px; } + button { display: none; position: absolute; @@ -125,8 +136,8 @@ .chat { background: $chat-background; - display: none; bottom: 0; + display: none; left: 0; overflow: hidden; position: absolute; @@ -139,9 +150,11 @@ &.visible { display: block; } + .chatbody { // nothing } + .chatheader { // nothing } @@ -149,12 +162,13 @@ } .chatmenu { - position: absolute; - top: 36px; - left: 0px; - right: 0px; height: 36px; + left: 0; padding: 2px 4px; + position: absolute; + right: 0; + top: 36px; + @include breakpt($breakpoint-chat-small, max-height) { display: none; } @@ -167,9 +181,11 @@ position: absolute; right: 0; top: 74px; + @include breakpt($breakpoint-chat-small, max-height) { border-top: 1px solid $bordercolor; - top: 0px; + top: 0; + top: 0; } } @@ -184,6 +200,11 @@ position: absolute; right: 0; top: 0; + + @include breakpt($breakpoint-chat-small, max-height) { + display: none; + } + .chatstatusicon { cursor: pointer; display: block; @@ -195,20 +216,24 @@ top: 0; width: 36px; } + .chatheadertitle { display: inline; padding-left: 28px; } + .ctrl { color: $chat-ctrl; position: absolute; right: 1px; top: 0; + .#{$fa-css-prefix} { cursor: pointer; padding: 6px; } } + span { display: inline-block; max-width: 60%; @@ -218,9 +243,6 @@ vertical-align: middle; white-space: nowrap; } - @include breakpt($breakpoint-chat-small, max-height) { - display: none; - } } .chat .outputbox { @@ -229,6 +251,7 @@ position: absolute; right: 0; top: 0; + @include breakpt($breakpoint-chat-small, max-height) { bottom: 45px; } @@ -238,7 +261,8 @@ height: 100%; overflow-x: hidden; overflow-y: auto; - padding: 0.4em 0; + padding: .4em 0; + > i { clear: both; color: $chat-meta; @@ -246,6 +270,7 @@ font-size: .8em; padding: 6px 0; text-align: center; + &.p2p { font-weight: bold; padding: 6px 0; @@ -256,10 +281,12 @@ .chat.with_pictures .message { &.is_self { padding-right: 54px; + .timestamp { right: 58px; } } + &.is_remote { padding-left: 58px; } @@ -269,23 +296,26 @@ background: $chat-msg-background; border: 1px solid $chat-msg-border; border-radius: 6px; + box-shadow: 0 0 2px 0 $chat-msg-shadow; clear: both; display: block; margin: 0 4px 2px 18px; padding: 8px; position: relative; word-wrap: break-word; - box-shadow: 0px 0px 2px 0px $chat-msg-shadow; + ul { list-style-type: none; margin: 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'; @@ -296,6 +326,7 @@ width: 12px; } } + .timestamp { color: $chat-timestamp; font-size: .8em; @@ -304,18 +335,20 @@ text-align: right; top: 8px; } + .timestamp-space { - width:40px; - height:10px; - float:right; + float: right; + height: 10px; + width: 40px; } + strong { display: block; - padding-bottom: 2px; margin-right: 40px; - white-space: nowrap; overflow: hidden; + padding-bottom: 2px; text-overflow: ellipsis; + white-space: nowrap; } } @@ -324,30 +357,36 @@ color: $chat-msg-default-icon-color; transform: scale(-1, 1); } + li { &.unread:before { - content: $chat-msg-unread-icon; color: $chat-msg-unread-icon-color; + content: $chat-msg-unread-icon; } + &.sending:before { - content: $chat-msg-sending-icon; color: $chat-msg-sending-icon-color; + content: $chat-msg-sending-icon; } + &.sent:before { - content: $chat-msg-sent-icon; color: $chat-msg-sent-icon-color; + content: $chat-msg-sent-icon; } + &.delivered:before { - content: $chat-msg-delivered-icon; color: $chat-msg-delivered-icon-color; + content: $chat-msg-delivered-icon; } + &.received:before { - content: $chat-msg-received-icon; color: $chat-msg-received-icon-color; + content: $chat-msg-received-icon; } + &.read:before { - content: $chat-msg-read-icon; color: $chat-msg-read-icon-color; + content: $chat-msg-read-icon; } } } @@ -357,6 +396,7 @@ left: auto; right: 4px; } + .buddyPicture { background: $actioncolor1; border-radius: 2px; @@ -368,69 +408,79 @@ top: 4px; width: 46px; z-index: 0; + .#{$fa-css-prefix} { color: $actioncolor2; line-height: 46px; } + img { - display: block; bottom: 0; + display: block; left: 0; - right: 0; - position: absolute; - top: 0; max-height: 100%; max-width: 100%; + position: absolute; + right: 0; + top: 0; } } } .chat .message { + // scss-lint:disable DuplicateProperty &:before, &:after { border-style: solid; - content: ""; + content: ''; display: block; position: absolute; width: 0; } + &.is_remote { background: $chat-msg-remote-background; + &:before { // arrow border - border-width: 7px 11px 7px 0; border-color: transparent $chat-arrow-border; + border-width: 7px 11px 7px 0; bottom: auto; left: -12px; top: 4px; } + &:after { // arrow background - border-width: 6px 10px 6px 0; border-color: transparent $chat-msg-remote-background; - bottom:auto; + border-width: 6px 10px 6px 0; + bottom: auto; left: -11px; top: 5px; } } + &.is_self { background: $chat-msg-self-background; - margin-right:18px; margin-left: 4px; + margin-right: 18px; padding-right: 0; + &:before { // arrow border - border-width: 7px 0 7px 11px; border-color: transparent $chat-arrow-border; + border-width: 7px 0 7px 11px; + bottom: 4px; bottom: auto; right: -12px; - bottom: 4px; } + &:after { // arrow background - border-width: 6px 0 6px 10px; border-color: transparent $chat-msg-self-background; + border-width: 6px 0 6px 10px; + bottom: 5px; bottom: auto; right: -11px; - bottom: 5px; } } + &.with_name { // none } @@ -444,71 +494,84 @@ margin: 0 auto; position: absolute; right: 0; + @include breakpt($breakpoint-chat-small, max-height) { height: auto; } } + .typinghint { - padding: 0 6px 0 6px; - white-space: nowrap; - overflow: hidden; - font-size:.8em; color: $chat-typing; + font-size: .8em; height: 14px; + overflow: hidden; + padding: 0 6px; + white-space: nowrap; + @include breakpt($breakpoint-chat-small, max-height) { display: none; } } + .inputbox { position: relative; + + @include breakpt($breakpoint-chat-small, max-height) { + height: auto; + } + .btn { + display: none; + padding: .5em 1em; position: absolute; right: 6px; top: 1px; - padding: .5em 1em; - display: none; } + > div { border-top: 1px solid $bordercolor; } - @include breakpt($breakpoint-chat-small, max-height) { - height: auto; - } } + .input { - border-radius: 0; border-color: transparent; + border-radius: 0; box-shadow: none; display: block; height: 54px; - max-height: 54px; /* FF hack */ margin: 0; + max-height: 54px; /* FF hack */ resize: none; width: 100%; + + @include breakpt($breakpoint-chat-small, max-height) { + max-height: 2.5em; + } + &:active, &:focus { border-color: $chat-input-border-color; } - @include breakpt($breakpoint-chat-small, max-height) { - max-height: 2.5em; - } } } @keyframes newmessage { 0% {background-color: $actioncolor1;} + 50% {background-color: $componentbg;} + 100% {background-color: $actioncolor1;} } .chat.newmessage { .chatheadertitle:after { - content: "***"; + content: '***'; position: absolute; right: 32px; top: 2px; } + .chatheader { - animation: newmessage 1s ease -0.3s infinite; + animation: newmessage 1s ease -.3s infinite; } } diff --git a/src/styles/components/_contactsmanager.scss b/src/styles/components/_contactsmanager.scss index 04a89da6..f216ea58 100644 --- a/src/styles/components/_contactsmanager.scss +++ b/src/styles/components/_contactsmanager.scss @@ -25,52 +25,64 @@ font-weight: normal; text-align: baseline; } + .addbtn { font-size: 14px; + .fa-users { font-size: 22px; } + .fa-plus { font-size: 15px; } } + .editpicture { - vertical-align: middle; float: left; margin-right: 20px; + vertical-align: middle; } + .uploadbtn { margin-top: 7px; } + .editlist { max-height: 250px; overflow-y: auto; } + .picture { - display: table-cell; border-bottom: 0; cursor: auto; + display: table-cell; min-height: 46px; position: static; width: auto; + .buddyPicture { margin: 0 0 0 10px; } } + .table { - margin-bottom: 0px; + margin-bottom: 0; + tr:first-child td { - border-top: none; + border-top: 0; } + .name { - width: 40%; text-align: left; vertical-align: middle; + width: 40%; } + .action { + padding-right: 15px; text-align: right; vertical-align: middle; - padding-right: 15px; } } } @@ -83,14 +95,15 @@ .search { &:before { - position: absolute; - font-family: "fontAwesome"; - content: "\f002"; + content: '\f002'; + font-family: 'fontAwesome'; font-size: 14px; + left: 22px; opacity: .4; + position: absolute; top: 6px; - left: 22px; } + ~ input { padding-left: 25px; } diff --git a/src/styles/components/_fileinfo.scss b/src/styles/components/_fileinfo.scss index 74e3c87c..1a145e0f 100644 --- a/src/styles/components/_fileinfo.scss +++ b/src/styles/components/_fileinfo.scss @@ -23,10 +23,10 @@ background: $fileinfo-background; border: 1px solid $fileinfo-border; border-radius: 4px; + max-width: 170px; padding: 1em; position: relative; text-align: center; - max-width: 170px; } .file-info { @@ -34,19 +34,22 @@ position: relative; z-index: 3; } + .file-info-bg { bottom: 0; left: 41px; - right: 0; overflow: hidden; position: absolute; + right: 0; top: -17px; z-index: 2; + .#{$fa-css-prefix} { color: $fileinfo-icon-background-color; font-size: 20em; } } + .actions { left: 50%; margin-left: 10px; @@ -59,6 +62,7 @@ .is_remote .file-info { background: $fileinfo-background-remote; border: 1px solid $fileinfo-border-remote; + .file-info-bg { .#{$fa-css-prefix} { color: $fileinfo-icon-background-color-remote; @@ -78,17 +82,19 @@ font-size: .8em; height: 20px; position: relative; + > span { display: block; left: 0; margin: 0 auto; padding: 3px; position: absolute; - text-shadow: 1px 1px 1px white; - top: 0px; right: 0; + text-shadow: 1px 1px 1px #fff; + top: 0; z-index: 5; } + > div { bottom: 0; box-shadow: none !important; @@ -97,9 +103,11 @@ top: 0; width: 0; z-index: 0; + &.progress-bar { opacity: .5; } + &.progress-bar.download { opacity: 1; z-index: 1; @@ -120,23 +128,28 @@ .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 + transition: all .2s ease-in-out; } } } @@ -145,13 +158,14 @@ .anim { margin-left: -40px; } + .file-info-size { margin-bottom: 10px; } } .file-info.downloading { - .file-info-size{ + .file-info-size { border-color: $fileinfo-downloading-size-border; } } diff --git a/src/styles/components/_presentation.scss b/src/styles/components/_presentation.scss index 14af95bb..a282a574 100644 --- a/src/styles/components/_presentation.scss +++ b/src/styles/components/_presentation.scss @@ -44,11 +44,11 @@ } .presentationpane .welcome .progress .download-info { - position: absolute; + color: $text-color; left: 0; + position: absolute; + text-shadow: 1px 1px 1px #fff; width: 100%; - color: $text-color; - text-shadow: 1px 1px 1px white; } .mainPresentation #presentation { @@ -66,29 +66,35 @@ .presentationpane { .canvasContainer { - width: 100%; height: 100%; + width: 100%; } + canvas { - position: relative; display: block; margin: 0 auto; + position: relative; } + .odfcanvas { - user-select: none; cursor: default; + user-select: none; + body { background-color: transparent; } + document { display: block; } } + .odfcontainer { display: none; - padding: 0; margin: 0; + padding: 0; } + .odfcontainer.showonepage { overflow: hidden; text-align: center; @@ -107,11 +113,11 @@ } .presentation .overlaybar a.overlaybar-button { - position: absolute; font-size: 20px; - padding: 4px 6px; - top: 0px; line-height: 28px; + padding: 4px 6px; + position: absolute; + top: 0; } .overlaybar-content .pagecontrol { @@ -123,8 +129,8 @@ } .presentation .overlaybar a.btn-next { - right: 0px; left: auto; + right: 0; } .pageinfo input { @@ -133,15 +139,15 @@ } .presentation .thumbnail { - text-shadow: none; color: #333; - margin-top: 20px; - width: 160px; - height: 122px; display: inline-block; + height: 122px; margin-left: 20px; + margin-top: 20px; position: relative; + text-shadow: none; vertical-align: middle; + width: 160px; } .presentation .thumbnail.presentable { @@ -153,9 +159,9 @@ } .presentation .thumbnail .caption { + overflow: hidden; padding-bottom: 0; text-overflow: ellipsis; - overflow: hidden; } .presentation .thumbnail .caption .size { @@ -167,39 +173,39 @@ } .presentation .thumbnail .caption .download-info { - position: absolute; + bottom: 0; + color: $text-color; left: 0; + line-height: 20px; + position: absolute; right: 0; + text-shadow: 1px 1px 1px #fff; top: 0; - bottom: 0; - line-height: 20px; - text-shadow: 1px 1px 1px white; - color: $text-color; } .presentation .thumbnail .active { - font-size: 10em; + bottom: 0; color: #84b819; - opacity: 0.7; - position: absolute; + font-size: 10em; left: 0; + opacity: .7; + position: absolute; right: 0; - top: 0; - bottom: 0; text-align: center; + top: 0; } .presentation .thumbnail .notavailable { + bottom: 0; + color: #d2322d; display: none; font-size: 10em; - color: #d2322d; - opacity: 0.25; - position: absolute; left: 0; + opacity: .25; + position: absolute; right: 0; - top: 0; - bottom: 0; text-align: center; + top: 0; } .presentation .thumbnail:hover .notavailable { @@ -207,9 +213,9 @@ } .presentation .thumbnail .presentation-action { + display: none; position: absolute; top: 1px; - display: none; } .presentation .thumbnail .download { @@ -230,9 +236,9 @@ .presentations { height: 156px; + margin-left: -25px; + margin-right: 10px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; - margin-right: 10px; - margin-left: -25px; } diff --git a/src/styles/components/_screenshare.scss b/src/styles/components/_screenshare.scss index d1306fff..ad19392f 100644 --- a/src/styles/components/_screenshare.scss +++ b/src/styles/components/_screenshare.scss @@ -32,7 +32,7 @@ } .screensharepane { - background: black; + background: #000; bottom: 0; left: 0; overflow: auto; @@ -45,6 +45,7 @@ .remotescreen { position: relative; } + video { max-height: 99%; width: 100%; diff --git a/src/styles/components/_settings.scss b/src/styles/components/_settings.scss index 27dd825f..ae6f3ed3 100644 --- a/src/styles/components/_settings.scss +++ b/src/styles/components/_settings.scss @@ -20,8 +20,8 @@ */ #settings { - border-left: 1px solid $bordercolor; background: $settings-background; + border-left: 1px solid $bordercolor; bottom: 0; padding-right: 20px; position: fixed; @@ -34,12 +34,15 @@ #settings.show { right: 0; + @include breakpt($breakpoint-settings-medium, max-width, only screen) { background: $settings-background; left: 0; width: auto; } - .form-actions{ + + .form-actions { + @include breakpt($breakpoint-settings-medium, max-width, only screen) { bottom: 0; height: 60px; @@ -65,6 +68,10 @@ } .settings { + @include breakpt($breakpoint-settings-medium, max-width, only screen) { + padding-bottom: 10px; + } + .version { color: $settings-version; font-size: 10px; @@ -72,12 +79,14 @@ right: 10px; top: 10px; } + .form-horizontal { .controls { @include breakpt($breakpoint-settings-medium, max-width, only screen) { margin-left: 110px; } } + .control-label { @include breakpt($breakpoint-settings-medium, max-width, only screen) { width: 100px; @@ -85,12 +94,9 @@ } } } - @include breakpt($breakpoint-settings-medium, max-width, only screen) { - padding-bottom: 10px; - } } settings-advanced { - padding-top: 15px; display: block; -} \ No newline at end of file + padding-top: 15px; +} diff --git a/src/styles/components/_social.scss b/src/styles/components/_social.scss index 44ed86d2..f43b5545 100644 --- a/src/styles/components/_social.scss +++ b/src/styles/components/_social.scss @@ -23,18 +23,23 @@ &.link { color: $social-email-color; } + &.email { color: $social-email-color; } + &.facebook { color: $social-facebook-color; } + &.google { color: $social-google-color; } + &.twitter { color: $social-twitter-color; } + &.xing { color: $social-xing-color; } diff --git a/src/styles/components/_usability.scss b/src/styles/components/_usability.scss index 0762df0f..62c72463 100644 --- a/src/styles/components/_usability.scss +++ b/src/styles/components/_usability.scss @@ -27,9 +27,9 @@ margin: 0 auto; position: absolute; right: 0; - text-shadow: 0 0 5px black; - transition: right 200ms ease-in-out; + text-shadow: 0 0 5px #000; top: 80px; + transition: right 200ms ease-in-out; user-select: none; width: 350px; } @@ -45,20 +45,24 @@ } #help { + @include breakpt($breakpoint-useability-small, max-width, only screen) { + display: none; + } + + @include breakpt($breakpoint-useability-small, min-width, only screen, $breakpoint-useability-large) { + font-size: 1em; + width: 250px; + } + > div { margin: 0 10px; } + .help-subline { color: #888; padding: 20px 0; } - @include breakpt($breakpoint-useability-small, max-width, only screen){ - display: none; - } - @include breakpt($breakpoint-useability-small, min-width, only screen, $breakpoint-useability-large){ - font-size: 1em; - width: 250px; - } + .btn { text-shadow: none; } diff --git a/src/styles/components/_youtubevideo.scss b/src/styles/components/_youtubevideo.scss index 218bcf2d..3023bd98 100644 --- a/src/styles/components/_youtubevideo.scss +++ b/src/styles/components/_youtubevideo.scss @@ -20,10 +20,10 @@ */ .youtubevideo { - position: absolute; + bottom: 0; left: 0; + position: absolute; right: 0; - bottom: 0; top: 0; } @@ -41,16 +41,17 @@ } #youtubeplayerinfo { - position: absolute; - left: 0; - right: 0; bottom: 10%; + left: 0; opacity: 0; pointer-events: auto; + position: absolute; + right: 0; text-align: center; - transition-property: opacity; transition-duration: .2s; + transition-property: opacity; z-index: 10; + &:hover { opacity: .8; } @@ -59,17 +60,17 @@ #youtubeplayerinfo div { background-color: #f9f2f4; border-radius: 10px; - padding: 20px 40px; display: inline-block; font-size: 2em; + padding: 20px 40px; } .youtubevideo .click-container { - position: absolute; - left: 0; - top: 0; bottom: 0; + left: 0; + position: absolute; right: 0; + top: 0; z-index: 5; } @@ -86,8 +87,8 @@ } .youtubevideo .welcome .welcome-logo { - font-size: 10em; background: transparent; + font-size: 10em; } .mainYoutubevideo #youtubevideo { @@ -101,14 +102,14 @@ } .youtubevideo .overlaybar-content { - width: 100%; max-width: 100%; + width: 100%; } .youtubevideo .overlaybar-input { + padding-right: 15px; position: relative; width: 100%; - padding-right: 15px; } .youtubevideo .overlaybar-content form .overlaybar-buttons { @@ -118,15 +119,16 @@ } .volumecontrol { - position: absolute; - left: 0; - right: 0; + background: rgba(0, 0, 0, .6); bottom: 0; + left: 0; opacity: 0; + padding: 4px; pointer-events: auto; + position: absolute; + right: 0; z-index: 10; - background: rgba(0, 0, 0, 0.6); - padding: 4px; + &:hover { opacity: 1; } @@ -139,39 +141,39 @@ .volumebar { display: inline-block; - vertical-align: middle; padding: 6px 8px; + vertical-align: middle; } .volumebar input[type="range"] { -webkit-appearance: none; background-color: #aaa; border: 1px solid #aaa; - width: 100px; height: 3px; outline: 0; + width: 100px; } .volumebar input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; background-color: #fff; - width: 6px; height: 20px; + width: 6px; } .volumebar input[type="range"]::-moz-range-track { background: #aaa; - border: none; + border: 0; } .volumebar input[type="range"]::-moz-range-thumb { background-color: #fff; - width: 6px; - height: 20px; border-radius: 0; + height: 20px; + width: 6px; } -.volumebar input[type="range"]::-moz-focusring{ +.volumebar input[type="range"]::-moz-focusring { outline: 1px solid #aaa; outline-offset: -1px; } diff --git a/src/styles/csp.scss b/src/styles/csp.scss index b1a858e5..5fc6c5ce 100644 --- a/src/styles/csp.scss +++ b/src/styles/csp.scss @@ -19,4 +19,4 @@ * */ -@import "libs/angular/angular-csp.scss"; \ No newline at end of file +@import 'libs/angular/angular-csp'; diff --git a/src/styles/font-awesome.scss b/src/styles/font-awesome.scss index 1d0dcd70..dbb3a5c3 100644 --- a/src/styles/font-awesome.scss +++ b/src/styles/font-awesome.scss @@ -1,4 +1,4 @@ -@import "compass"; -@import "global/variables"; -@import "libs/font-awesome/scss/font-awesome"; +@import 'compass'; +@import 'global/variables'; +@import 'libs/font-awesome/scss/font-awesome'; diff --git a/src/styles/global/_animations.scss b/src/styles/global/_animations.scss index 7598770d..22f3e569 100644 --- a/src/styles/global/_animations.scss +++ b/src/styles/global/_animations.scss @@ -26,17 +26,20 @@ .animate-show { &.ng-hide-add { - opacity: 1; display: block !important; - transition: all linear 0.5s; + opacity: 1; + transition: all linear .5s; + &.ng-hide-add-active { opacity: 0; } } + &.ng-hide-remove { - opacity: 0; display: block !important; - transition: all linear 0.5s; + opacity: 0; + transition: all linear .5s; + &.ng-hide-remove-active { opacity: 1; } diff --git a/src/styles/global/_base.scss b/src/styles/global/_base.scss index 299402f3..6d021be3 100644 --- a/src/styles/global/_base.scss +++ b/src/styles/global/_base.scss @@ -42,10 +42,11 @@ a { background: $main-background; bottom: 0; left: 0; - position:fixed; + position: fixed; right: 0; top: 0; z-index: 0; + @include hidpi { background-image: $main-background-retina; background-size: image-width($main-background-image-retina)/2 image-height($main-background-image-retina)/2; @@ -62,5 +63,5 @@ a { } .desktopnotify-icon { - background-image: url("../img/logo-48x48.png"); -} \ No newline at end of file + background-image: url('../img/logo-48x48.png'); +} diff --git a/src/styles/global/_loader.scss b/src/styles/global/_loader.scss index dad3a41e..9f2e9ad4 100644 --- a/src/styles/global/_loader.scss +++ b/src/styles/global/_loader.scss @@ -24,34 +24,37 @@ background-size: contain; bottom: 15%; left: 15%; - max-width: 200px; - max-height: 150px; margin: auto; + max-height: 150px; + max-width: 200px; opacity: 1; pointer-events: none; position: fixed; right: 15%; top: 15%; - z-index: 20000; - transition-property: opacity; transition-duration: .5s; + transition-property: opacity; + z-index: 20000; + &.done { opacity: 0; } + > div { + bottom: 0; color: $loading; display: block; font-size: 2em; left: 0; margin: 0 auto; - right: 0; - position: absolute; - bottom: 0px; margin-bottom: -40px; + position: absolute; + right: 0; text-align: center; - text-shadow: 0 0 5px black; + text-shadow: 0 0 5px #000; } + .loader-message { - font-size: 0.5em; + font-size: .5em; } -} \ No newline at end of file +} diff --git a/src/styles/global/_nicescroll.scss b/src/styles/global/_nicescroll.scss index f7dda5f7..dc0f864c 100644 --- a/src/styles/global/_nicescroll.scss +++ b/src/styles/global/_nicescroll.scss @@ -25,16 +25,19 @@ border: solid transparent; height: 8px; width: 8px; + &:hover { background-color: $background; - border-left: 1px solid rgba(0,0,0,.12); - border-right: 1px solid rgba(0,0,0,.12); + border-left: 1px solid rgba(0, 0, 0, .12); + border-right: 1px solid rgba(0, 0, 0, .12); } } + &::-webkit-scrollbar-thumb { - background: rgba(0,0,0,0.2); + background: rgba(0, 0, 0, .2); + &:active { - background: rgba(0,0,0,0.4); + background: rgba(0, 0, 0, .4); } } } diff --git a/src/styles/global/_overlaybar.scss b/src/styles/global/_overlaybar.scss index c930a3db..0c91a1c5 100644 --- a/src/styles/global/_overlaybar.scss +++ b/src/styles/global/_overlaybar.scss @@ -21,35 +21,40 @@ .overlaybar { background: $overlaybar-background; + border-bottom: 1px solid #222; + border-top: 1px solid #222; color: $overlaybar-color; min-height: 36px; padding: 3px 8px 0 30px; position: absolute; - text-shadow: 0 0 5px black; + text-shadow: 0 0 5px #000; user-select: none; vertical-align: middle; - border-bottom: 1px solid #222; - border-top: 1px solid #222; } .overlaybar { &:hover { background: $componentfg2; } + .btn { text-shadow: none; } + .btn-link { - text-shadow: 0 0 5px black; + text-shadow: 0 0 5px #000; } + .form-group > * { float: left; padding-top: 0; } + input[type="radio"], input[type="checkbox"] { margin-top: 2px; } + label { padding-top: 6px !important; } @@ -58,44 +63,52 @@ .overlaybar { &.notvisible { background: transparent; - pointer-events: none; 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 { color: $overlaybar-btn; display: block; font-size: 20px; - top: 0px; left: 3px; opacity: .7; padding: 4px 6px; - position: absolute; pointer-events: auto; + position: absolute; + top: 0; vertical-align: middle; z-index: 15; } + .overlaybar-content { display: inline-block; - margin-left: .5em; margin-bottom: 0; + margin-left: .5em; max-width: 60%; + > * { padding-right: .5em; } + .input-group { max-width: 160px; } } + .overlaybar-overlay { display: none; margin-left: .5em; diff --git a/src/styles/global/_pages.scss b/src/styles/global/_pages.scss index 465a464f..5dcbc6f2 100644 --- a/src/styles/global/_pages.scss +++ b/src/styles/global/_pages.scss @@ -28,25 +28,26 @@ } .welcome { - color: $welcome; font-size: 1.1em; margin-top: 80px; - text-shadow: 0 0 5px black; - max-width:600px; + max-width: 600px; min-height: 160px; - padding-left:105px; - padding-right: 0px; + padding-left: 105px; + padding-right: 0; position: relative; + text-shadow: 0 0 5px #000; + @include breakpt($breakpoint-medium) { - padding-left:10px; - padding-right:20px; margin: 0 auto; + padding-left: 10px; + padding-right: 20px; } h1 { - margin-top: 0px; + margin-top: 0; white-space: nowrap; + @include breakpt($breakpoint-medium) { white-space: normal; } @@ -57,46 +58,50 @@ } .welcome-logo { + background: $scalable-logo no-repeat left top; + background-size: contain; + bottom: 0; + left: 0; position: absolute; - left: 0px; top: 1px; - bottom: 0px; width: 90px; - background: $scalable-logo no-repeat left top; - background-size: contain; + @include breakpt($breakpoint-medium) { - position: relative; height: 70px; - width: 70px; - margin-top: 30px; margin-bottom: 20px; + margin-top: 30px; + position: relative; + width: 70px; } } .welcome-input { position: relative; + input { padding-right: 105px; } } .welcome-input-buttons { - text-shadow: none; position: absolute; - top: 6px; right: 8px; + text-shadow: none; + top: 6px; + a { + color: #000; padding-right: .5em; - color: black; user-select: none; } } .room-link { margin-top: -10px; - white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + white-space: nowrap; + a { color: $welcome; } @@ -104,12 +109,15 @@ .rooms-history { margin-top: 3em; + a { + display: inline-block; + margin-right: .5em; + &:hover { text-decoration: none; } - margin-right: .5em; - display: inline-block; + } } diff --git a/src/styles/global/_variables.scss b/src/styles/global/_variables.scss index 9788d12e..dcf6f2fa 100644 --- a/src/styles/global/_variables.scss +++ b/src/styles/global/_variables.scss @@ -19,34 +19,34 @@ * */ -@import "compass/utilities/color/contrast"; +@import 'compass/utilities/color/contrast'; // general $background: #e5e5e5 !default; $componentbg: #f8f8f8 !default; $componentfg1: #262626 !default; -$componentfg2: rgba(0,0,0,.5) !default; -$componentfg3: rgba(0,0,0,.2) !default; +$componentfg2: rgba(0, 0, 0, .5) !default; +$componentfg3: rgba(0, 0, 0, .2) !default; $componentfg4: #737373 !default; -$sidepanebg: white !default; +$sidepanebg: #fff !default; $bordercolor: #e7e7e7 !default; -$actioncolor1: rgb(132,184,25) !default; -$actioncolor2: rgb(0,149,52) !default; +$actioncolor1: rgb(132, 184, 25) !default; +$actioncolor2: rgb(0, 149, 52) !default; // branding -$logo: url("../img/logo-small.png") !default; -$scalable-logo: url("../img/logo.svg") !default; +$logo: url('../img/logo-small.png') !default; +$scalable-logo: url('../img/logo.svg') !default; $load-logo: $scalable-logo !default; // background -$main-background-image: "../img/bg-tiles.jpg" !default; -$main-background-image-retina: "../img/bg-tiles_x2.jpg" !default; +$main-background-image: '../img/bg-tiles.jpg' !default; +$main-background-image-retina: '../img/bg-tiles_x2.jpg' !default; $main-background: url($main-background-image) !default; $main-background-retina: url($main-background-image-retina) !default; // general action based colors -$action-hover: rgba(0,0,0,.4) !default; -$action-mute: rgb(219,79,57) !default; +$action-hover: rgba(0, 0, 0, .4) !default; +$action-mute: rgb(219, 79, 57) !default; $action-enable: $actioncolor1 !default; // base @@ -57,7 +57,7 @@ $loading: #ddd !default; $pane-width: 260px !default; // font -$font-sans-serif: "Helvetica Neue",Helvetica,Arial,sans-serif !default; +$font-sans-serif: 'Helvetica Neue', Helvetica, Arial, sans-serif !default; $base-font-size: 13px; // compass vertical_rhythm mixin $base-line-height: 20px; // compass vertical_rhythm mixin $font-color: lighten(#000, 20%) !default; @@ -72,7 +72,7 @@ $audiolevel-top: 43px !default; // main navigation bar $minbarheight: 51px !default; $bar-background: $componentbg; -$bar-logo-text-desc: rgb(34,34,34) !default; +$bar-logo-text-desc: rgb(34, 34, 34) !default; $bar-btn-action-border: $bordercolor !default; $bar-btn-action-color: #333 !default; $bar-btn-action-hover: #666 !default; @@ -87,20 +87,20 @@ $overlaybar-color: $bordercolor !default; $overlaybar-btn: $bordercolor !default; // video -$video-background: rgba(0,0,0,.4) !default; +$video-background: rgba(0, 0, 0, .4) !default; $video-onlyaudio-background: #666 !default; -$video-onlyaudio: rgba(255,255,255,.3) !default; -$video-overlayactions: rgba(0,0,0,.9) !default; +$video-onlyaudio: rgba(255, 255, 255, .3) !default; +$video-overlayactions: rgba(0, 0, 0, .9) !default; // settings -$settings-background: white !default; +$settings-background: #fff !default; // buddylist $buddylist-width: $pane-width !default; $buddylist-background: $componentbg !default; -$buddylist-tab-color: rgba(0,0,0,.3) !default; +$buddylist-tab-color: rgba(0, 0, 0, .3) !default; $buddylist-tab-background: $componentbg !default; -$buddylist-action-background: rgba(255,255,255,0.5) !default; +$buddylist-action-background: rgba(255, 255, 255, .5) !default; $buddylist-buddy1: $componentfg1 !default; $buddylist-buddy2: $componentfg2 !default; $buddylist-action-font-size: 1.6em; @@ -108,22 +108,22 @@ $buddylist-action-font-size: 1.6em; // chat $chat-width: $pane-width !default; $chat-background: $componentbg !default; -$chat-header: rgba(255,255,255,0.9) !default; +$chat-header: rgba(255, 255, 255, .9) !default; $chat-disabled: #aaa !default; $chat-badge: #84b819 !default; -$chat-ctrl: rgba(0,0,0,.3) !default; +$chat-ctrl: rgba(0, 0, 0, .3) !default; $chat-timestamp: #aaa !default; $chat-meta: #aaa !default; -$chat-msg-background: white !default; +$chat-msg-background: #fff !default; $chat-msg-border: transparent !default; -$chat-msg-shadow: rgba(0, 0, 0, 0.03) !default; +$chat-msg-shadow: rgba(0, 0, 0, .03) !default; $chat-arrow-border: #eee; $chat-msg-default-icon-color: #ccc !default; -$chat-msg-unread-icon-color: #FE9A2E !default; +$chat-msg-unread-icon-color: #fe9a2e !default; $chat-msg-sending-icon-color: $chat-msg-default-icon-color !default; -$chat-msg-sent-icon-color: #5882FA !default; -$chat-msg-delivered-icon-color: #5882FA !default; +$chat-msg-sent-icon-color: #5882fa !default; +$chat-msg-delivered-icon-color: #5882fa !default; $chat-msg-received-icon-color: #84b819 !default; $chat-msg-read-icon-color: $chat-msg-default-icon-color !default; @@ -134,15 +134,15 @@ $chat-msg-delivered-icon: '\f019' !default; $chat-msg-received-icon: '\f06e' !default; $chat-msg-read-icon: '\f00c' !default; -$chat-msg-self-background: white !default; -$chat-msg-remote-background: white !default; +$chat-msg-self-background: #fff !default; +$chat-msg-remote-background: #fff !default; $chat-bottom-background: $chat-background !default; $chat-typing: $chat-meta !default; $chat-input-border-color: #66afe9 !default; // fileinfo -$fileinfo-background: white !default; +$fileinfo-background: #fff !default; $fileinfo-border: #ddd !default; $fileinfo-icon-background-color: #eee !default; $fileinfo-downloading-size-border: #ddd !default; @@ -153,14 +153,14 @@ $fileinfo-icon-background-color-remote: $fileinfo-icon-background-color !default // settings $settings-version: #ccc !default; $form-help-text: #737373 !default; -$settings-background: white !default; +$settings-background: #fff !default; // social $social-email-color: #aaa !default; $social-facebook-color: #45619d !default; $social-google-color: #dd4b39 !default; $social-twitter-color: #00aced !default; -$social-xing-color: white !default; +$social-xing-color: #fff !default; // useability $breakpoint-useability-small: 400px !default; diff --git a/src/styles/global/_views.scss b/src/styles/global/_views.scss index 1c2df37c..e563d1b1 100644 --- a/src/styles/global/_views.scss +++ b/src/styles/global/_views.scss @@ -22,12 +22,14 @@ .mainview { bottom: 0; display: none; - left: 0px; + left: 0; position: absolute; right: 0; top: $minbarheight; + @include breakpt($breakpoint-medium) { - left: 0px; + left: 0; + left: 0; } } diff --git a/src/styles/main.scss b/src/styles/main.scss index 4ec5bbc4..bb04b257 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -20,37 +20,37 @@ */ // must set custom compass variables before import of compass -@import "global/variables"; -@import "compass"; -@import "libs/libs"; +@import 'global/variables'; +@import 'compass'; +@import 'libs/libs'; -@import "global/mixins"; +@import 'global/mixins'; -@import "global/base"; -@import "global/loader"; -@import "global/views"; -@import "global/pages"; -@import "global/nicescroll"; -@import "global/animations"; -@import "global/overlaybar"; -@import "global/withs"; +@import 'global/base'; +@import 'global/loader'; +@import 'global/views'; +@import 'global/pages'; +@import 'global/nicescroll'; +@import 'global/animations'; +@import 'global/overlaybar'; +@import 'global/withs'; -@import "components/rightslide"; -@import "components/bar"; -@import "components/buddylist"; -@import "components/buddypicturecapture"; -@import "components/buddypictureupload"; -@import "components/settings"; -@import "components/chat"; -@import "components/usability"; -@import "components/audiolevel"; -@import "components/fileinfo"; -@import "components/audiovideo"; -@import "components/screenshare"; -@import "components/roombar"; -@import "components/social"; -@import "components/contactsmanager"; -@import "components/presentation"; -@import "components/youtubevideo"; +@import 'components/rightslide'; +@import 'components/bar'; +@import 'components/buddylist'; +@import 'components/buddypicturecapture'; +@import 'components/buddypictureupload'; +@import 'components/settings'; +@import 'components/chat'; +@import 'components/usability'; +@import 'components/audiolevel'; +@import 'components/fileinfo'; +@import 'components/audiovideo'; +@import 'components/screenshare'; +@import 'components/roombar'; +@import 'components/social'; +@import 'components/contactsmanager'; +@import 'components/presentation'; +@import 'components/youtubevideo'; -@import "shame"; +@import 'shame';