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 #177 from theurere/fix-scss-lint-warnings 

Fix scss lint warnings and errors.
pull/180/head
Simon Eisenmann 11 years ago
parent
c4a411fd82 2fc0778e78
commit
7c89b6fc37
30 changed files with 790 additions and 503 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 30
      src/styles/_shame.scss
  2. 6
      src/styles/bootstrap.scss
  3. 2
      src/styles/components/_audiolevel.scss
  4. 177
      src/styles/components/_audiovideo.scss
  5. 100
      src/styles/components/_bar.scss
  6. 114
      src/styles/components/_buddylist.scss
  7. 56
      src/styles/components/_buddypicturecapture.scss
  8. 47
      src/styles/components/_buddypictureupload.scss
  9. 189
      src/styles/components/_chat.scss
  10. 33
      src/styles/components/_contactsmanager.scss
  11. 24
      src/styles/components/_fileinfo.scss
  12. 74
      src/styles/components/_presentation.scss
  13. 3
      src/styles/components/_screenshare.scss
  14. 16
      src/styles/components/_settings.scss
  15. 5
      src/styles/components/_social.scss
  16. 22
      src/styles/components/_usability.scss
  17. 50
      src/styles/components/_youtubevideo.scss
  18. 2
      src/styles/csp.scss
  19. 6
      src/styles/font-awesome.scss
  20. 11
      src/styles/global/_animations.scss
  21. 3
      src/styles/global/_base.scss
  22. 21
      src/styles/global/_loader.scss
  23. 7
      src/styles/global/_nicescroll.scss
  24. 29
      src/styles/global/_overlaybar.scss
  25. 44
      src/styles/global/_pages.scss
  26. 40
      src/styles/global/_variables.scss
  27. 6
      src/styles/global/_views.scss
  28. 60
      src/styles/main.scss
  29. 2
      static/css/bootstrap.min.css
  30. 2
      static/css/font-awesome.min.css

30
src/styles/_shame.scss
Unescape View File

@ -30,31 +30,37 @@ @@ -30,31 +30,37 @@
#toast-container > .toast {
background-image: none !important;
}
#toast-container > .toast:before {
position: fixed;
color: #fff;
float: left;
font-family: FontAwesome;
font-size: 20px;
line-height: 20px;
float: left;
color: #fff;
padding-right: 0.5em;
margin: auto 0.5em auto -1.5em;
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 {
#toast-container > :hover,
#toast-container > div {
box-shadow: none !important;
}
@ -65,12 +71,12 @@ @@ -65,12 +71,12 @@
// Update position of toastr close icon.
.toast-close-button {
top: -0.6em;
font-size: 1em;
top: -.6em;
}
// No opacity for toastr.
#toast-container > div {
opacity: 1;
filter: alpha(opacity=100);
opacity: 1;
}

6
src/styles/bootstrap.scss vendored
Unescape View File

@ -1,4 +1,4 @@ @@ -1,4 +1,4 @@
@import "compass";
@import "global/variables";
@import "libs/bootstrap/bootstrap";
@import 'compass';
@import 'global/variables';
@import 'libs/bootstrap/bootstrap';

2
src/styles/components/_audiolevel.scss
Unescape View File

@ -27,7 +27,9 @@ @@ -27,7 +27,9 @@
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 */

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

@ -29,22 +29,25 @@ @@ -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 @@ @@ -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 @@ @@ -96,6 +105,7 @@
transform: scale(-1, 1);
z-index: 2;
}
video {
object-fit: cover;
}
@ -112,36 +122,40 @@ @@ -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 @@ @@ -153,8 +167,9 @@
position: absolute;
right: 0;
top: 0;
transition-property: opacity;
transition-duration: 2s;
transition-property: opacity;
video {
display: block;
height: 100%;
@ -172,13 +187,16 @@ @@ -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 @@ @@ -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 @@ @@ -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;
}
@ -247,31 +273,35 @@ @@ -247,31 +273,35 @@
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;
content: '\f183';
left: 50%;
margin-left: -.8em;
margin-top: -.5em;
position: absolute;
top: 50%;
margin-left: -0.8em;
margin-top: -0.5em;
content: "\f183";
}
span:after {
content: '\f183';
margin-right: -.9em;
margin-top: -.5em;
position: absolute;
top:50%;
right: 50%;
margin-right: -0.9em;
margin-top: -0.5em;
content: "\f183";
top: 50%;
}
}
}
@ -280,11 +310,13 @@ @@ -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 @@ @@ -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 @@ @@ -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 @@ @@ -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 @@ @@ -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%;
}
}
}

100
src/styles/components/_bar.scss
Unescape View File

@ -20,6 +20,7 @@ @@ -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 @@ @@ -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 @@ @@ -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 @@ @@ -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,64 +124,75 @@ @@ -113,64 +124,75 @@
}
.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';
}
}
@ -178,8 +200,8 @@ @@ -178,8 +200,8 @@
@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); }
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); }
@ -187,13 +209,13 @@ @@ -187,13 +209,13 @@
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); }
}
.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%;
}

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

@ -30,14 +30,14 @@ @@ -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 @@ @@ -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 {
@ -84,16 +84,19 @@ @@ -84,16 +84,19 @@
display: block;
}
}
&.empty {
.buddylistempty {
display: block;
}
}
.buddycontainer {
pointer-events: auto;
position: relative;
user-select: none;
}
.buddylistempty {
bottom: 0;
color: $font-color-accent;
@ -108,6 +111,7 @@ @@ -108,6 +111,7 @@
text-align: center;
top: 0;
}
.buddylistloading {
bottom: 0;
color: $font-color-accent;
@ -123,6 +127,8 @@ @@ -123,6 +127,8 @@
}
.buddy {
@include tap-highlight-color($tap-highlight);
background: $sidepanebg;
border-bottom: 1px solid $bordercolor;
cursor: pointer;
@ -133,7 +139,6 @@ @@ -133,7 +139,6 @@
position: relative;
text-align: left;
width: 100%;
@include tap-highlight-color($tap-highlight);
}
.buddy:hover {
@ -141,24 +146,32 @@ @@ -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";
.fa.contact:before {
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 @@ @@ -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;
margin: 0;
margin-left: 0;
margin-right: 0;
width: 30px;
margin-right:0px;
.#{$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;
text-overflow: ellipsis;
padding: 0 6px;
text-align: left;
text-overflow: ellipsis;
vertical-align: middle;
display: inline-block;
white-space: nowrap;
width: 120px;
padding: 0px 6px;
}
}
@ -235,53 +255,59 @@ @@ -235,53 +255,59 @@
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;
}

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

@ -24,76 +24,92 @@ @@ -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;
position: absolute;
top: 50%;
left: 0;
margin: 0 auto;
max-width: 40%;
position: absolute;
right: 0;
top: 50%;
}
.btn-retakePicture {
visibility: hidden;
}
.videoPictureVideo:hover .btn-retakePicture {
visibility: visible;
}
.countdownPicture {
color: $componentbg;
font-size: 45px;
left: 0px;
right: 0px;
position: absolute;
top: 75px;
left: 0;
margin: 0 auto;
opacity: .8;
position: absolute;
right: 0;
text-align: center;
text-shadow: 0 0 5px black;
opacity:0.8;
text-shadow: 0 0 5px #000;
top: 75px;
}
}

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

@ -21,79 +21,94 @@ @@ -21,79 +21,94 @@
.buddyPictureUpload {
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;
}
.moveHorizontal {
top: -4px;
position: relative;
top: -4px;
}
.moveVertical {
position: absolute;
left: 158px;
position: absolute;
}
.resize {
position: relative;
top: 108px;

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

@ -20,25 +20,27 @@ @@ -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 @@ @@ -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 @@ @@ -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 @@ @@ -125,8 +136,8 @@
.chat {
background: $chat-background;
display: none;
bottom: 0;
display: none;
left: 0;
overflow: hidden;
position: absolute;
@ -139,9 +150,11 @@ @@ -139,9 +150,11 @@
&.visible {
display: block;
}
.chatbody {
// nothing
}
.chatheader {
// nothing
}
@ -149,12 +162,13 @@ @@ -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 @@ @@ -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 @@ @@ -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 @@ @@ -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 @@ @@ -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 @@ @@ -229,6 +251,7 @@
position: absolute;
right: 0;
top: 0;
@include breakpt($breakpoint-chat-small, max-height) {
bottom: 45px;
}
@ -238,7 +261,8 @@ @@ -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 @@ @@ -246,6 +270,7 @@
font-size: .8em;
padding: 6px 0;
text-align: center;
&.p2p {
font-weight: bold;
padding: 6px 0;
@ -256,10 +281,12 @@ @@ -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 @@ @@ -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 @@ @@ -296,6 +326,7 @@
width: 12px;
}
}
.timestamp {
color: $chat-timestamp;
font-size: .8em;
@ -304,18 +335,20 @@ @@ -304,18 +335,20 @@
text-align: right;
top: 8px;
}
.timestamp-space {
width:40px;
height:10px;
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 @@ @@ -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 @@ @@ -357,6 +396,7 @@
left: auto;
right: 4px;
}
.buddyPicture {
background: $actioncolor1;
border-radius: 2px;
@ -368,69 +408,79 @@ @@ -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;
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,54 +494,64 @@ @@ -444,54 +494,64 @@
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;
}
}
}
@ -503,12 +563,13 @@ @@ -503,12 +563,13 @@
.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;
}
}

33
src/styles/components/_contactsmanager.scss
Unescape View File

@ -25,52 +25,64 @@ @@ -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 @@ @@ -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;
}

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

@ -23,10 +23,10 @@ @@ -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 @@ @@ -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 @@ @@ -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 @@ @@ -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 @@ @@ -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 @@ @@ -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,6 +158,7 @@ @@ -145,6 +158,7 @@
.anim {
margin-left: -40px;
}
.file-info-size {
margin-bottom: 10px;
}

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

@ -44,11 +44,11 @@ @@ -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 @@ @@ -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 @@ @@ -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 @@ @@ -123,8 +129,8 @@
}
.presentation .overlaybar a.btn-next {
right: 0px;
left: auto;
right: 0;
}
.pageinfo input {
@ -133,15 +139,15 @@ @@ -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 @@ @@ -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 @@ @@ -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 @@ @@ -207,9 +213,9 @@
}
.presentation .thumbnail .presentation-action {
display: none;
position: absolute;
top: 1px;
display: none;
}
.presentation .thumbnail .download {
@ -230,9 +236,9 @@ @@ -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;
}

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

@ -32,7 +32,7 @@ @@ -32,7 +32,7 @@
}
.screensharepane {
background: black;
background: #000;
bottom: 0;
left: 0;
overflow: auto;
@ -45,6 +45,7 @@ @@ -45,6 +45,7 @@
.remotescreen {
position: relative;
}
video {
max-height: 99%;
width: 100%;

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

@ -20,8 +20,8 @@ @@ -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 @@ @@ -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 {
@include breakpt($breakpoint-settings-medium, max-width, only screen) {
bottom: 0;
height: 60px;
@ -65,6 +68,10 @@ @@ -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 @@ @@ -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 @@ @@ -85,12 +94,9 @@
}
}
}
@include breakpt($breakpoint-settings-medium, max-width, only screen) {
padding-bottom: 10px;
}
}
settings-advanced {
padding-top: 15px;
display: block;
padding-top: 15px;
}

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

@ -23,18 +23,23 @@ @@ -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;
}

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

@ -27,9 +27,9 @@ @@ -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 @@ @@ -45,20 +45,24 @@
}
#help {
> 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;
}
> div {
margin: 0 10px;
}
.help-subline {
color: #888;
padding: 20px 0;
}
.btn {
text-shadow: none;
}

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

@ -20,10 +20,10 @@ @@ -20,10 +20,10 @@
*/
.youtubevideo {
position: absolute;
bottom: 0;
left: 0;
position: absolute;
right: 0;
bottom: 0;
top: 0;
}
@ -41,16 +41,17 @@ @@ -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 @@ @@ -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 @@ @@ -86,8 +87,8 @@
}
.youtubevideo .welcome .welcome-logo {
font-size: 10em;
background: transparent;
font-size: 10em;
}
.mainYoutubevideo #youtubevideo {
@ -101,14 +102,14 @@ @@ -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 @@ @@ -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,36 +141,36 @@ @@ -139,36 +141,36 @@
.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 {

2
src/styles/csp.scss
Unescape View File

@ -19,4 +19,4 @@ @@ -19,4 +19,4 @@
*
*/
@import "libs/angular/angular-csp.scss";
@import 'libs/angular/angular-csp';

6
src/styles/font-awesome.scss vendored
Unescape View File

@ -1,4 +1,4 @@ @@ -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';

11
src/styles/global/_animations.scss
Unescape View File

@ -26,17 +26,20 @@ @@ -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;
}

3
src/styles/global/_base.scss
Unescape View File

@ -46,6 +46,7 @@ a { @@ -46,6 +46,7 @@ a {
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 { @@ -62,5 +63,5 @@ a {
}
.desktopnotify-icon {
background-image: url("../img/logo-48x48.png");
background-image: url('../img/logo-48x48.png');
}

21
src/styles/global/_loader.scss
Unescape View File

@ -24,34 +24,37 @@ @@ -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;
}
}

7
src/styles/global/_nicescroll.scss
Unescape View File

@ -25,16 +25,19 @@ @@ -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);
}
}
&::-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);
}
}
}

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

@ -21,35 +21,40 @@ @@ -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 @@ @@ -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;

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

@ -28,25 +28,26 @@ @@ -28,25 +28,26 @@
}
.welcome {
color: $welcome;
font-size: 1.1em;
margin-top: 80px;
text-shadow: 0 0 5px black;
max-width: 600px;
min-height: 160px;
padding-left: 105px;
padding-right: 0px;
padding-right: 0;
position: relative;
text-shadow: 0 0 5px #000;
@include breakpt($breakpoint-medium) {
margin: 0 auto;
padding-left: 10px;
padding-right: 20px;
margin: 0 auto;
}
h1 {
margin-top: 0px;
margin-top: 0;
white-space: nowrap;
@include breakpt($breakpoint-medium) {
white-space: normal;
}
@ -57,46 +58,50 @@ @@ -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 @@ @@ -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;
}
}

40
src/styles/global/_variables.scss
Unescape View File

@ -19,7 +19,7 @@ @@ -19,7 +19,7 @@
*
*/
@import "compass/utilities/color/contrast";
@import 'compass/utilities/color/contrast';
// general
$background: #e5e5e5 !default;
@ -28,19 +28,19 @@ $componentfg1: #262626 !default; @@ -28,19 +28,19 @@ $componentfg1: #262626 !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;
// 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;
@ -57,7 +57,7 @@ $loading: #ddd !default; @@ -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;
@ -93,14 +93,14 @@ $video-onlyaudio: rgba(255,255,255,.3) !default; @@ -93,14 +93,14 @@ $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-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; @@ -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-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; @@ -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 @@ -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;

6
src/styles/global/_views.scss
Unescape View File

@ -22,12 +22,14 @@ @@ -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;
}
}

60
src/styles/main.scss
Unescape View File

@ -20,37 +20,37 @@ @@ -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';

2
static/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
static/css/font-awesome.min.css vendored
View File

File diff suppressed because one or more lines are too long
Write Preview
Loading…
Cancel
Save