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

Fix scss-lint error MergeableSelector.

pull/186/head
Evan Theurer 11 years ago
parent
bf516b5423
commit
c9bc20d3dc
14 changed files with 919 additions and 951 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 263
      src/styles/components/_audiovideo.scss
  2. 130
      src/styles/components/_buddylist.scss
  3. 6
      src/styles/components/_buddypicturecapture.scss
  4. 15
      src/styles/components/_buddypictureupload.scss
  5. 716
      src/styles/components/_chat.scss
  6. 105
      src/styles/components/_fileinfo.scss
  7. 301
      src/styles/components/_presentation.scss
  8. 12
      src/styles/components/_rightslide.scss
  9. 13
      src/styles/components/_roombar.scss
  10. 21
      src/styles/components/_screenshare.scss
  11. 37
      src/styles/components/_settings.scss
  12. 22
      src/styles/components/_usability.scss
  13. 185
      src/styles/components/_youtubevideo.scss
  14. 44
      src/styles/global/_overlaybar.scss

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

@ -26,9 +26,7 @@ @@ -26,9 +26,7 @@
right: 0;
top: $minbarheight;
user-select: none;
}
#audiovideo {
@include breakpt($breakpoint-video-small, max-width, only screen) {
right: 0;
}
@ -109,9 +107,7 @@ @@ -109,9 +107,7 @@
video {
object-fit: cover;
}
}
.audiovideo {
.remoteContainer {
bottom: 0;
left: 0;
@ -159,132 +155,131 @@ @@ -159,132 +155,131 @@
transition-property: opacity;
width: 100%;
}
}
.audiovideo .remoteVideos {
bottom: 0;
left: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
transition-duration: 2s;
transition-property: opacity;
video {
display: block;
height: 100%;
width: 100%;
}
}
.audiovideo .remoteVideo {
background: $video-background;
display: inline-block;
max-height: 100%;
max-width: 100%;
overflow: hidden;
position: relative;
vertical-align: bottom;
//visibility: hidden;
width: 100%;
&.withvideo {
//visibility: visible;
}
.remoteVideos {
bottom: 0;
left: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
transition-duration: 2s;
transition-property: opacity;
&.onlyaudio {
background: $video-onlyaudio-background;
//visibility: visible;
video {
display: block;
height: 100%;
width: 100%;
}
}
.onlyaudio {
color: $video-onlyaudio;
display: none;
font-size: 80px;
.overlayActions {
background: $video-overlayactions;
bottom: 0;
height: 140px;
left: 0;
margin-top: -40px;
pointer-events: auto;
margin: auto 0;
opacity: 0;
padding: 3px 0;
position: absolute;
right: 0;
text-align: center;
top: 45%;
}
top: 0;
width: 40px;
z-index: 5;
&.onlyaudio video,
&.dummy video {
visibility: hidden;
.btn {
color: #ccc;
cursor: pointer;
display: block;
outline: 0;
text-shadow: 0 0 5px #000;
width: 40px;
}
}
&.onlyaudio .onlyaudio {
display: block;
}
.remoteVideo {
background: $video-background;
display: inline-block;
max-height: 100%;
max-width: 100%;
overflow: hidden;
position: relative;
vertical-align: bottom;
//visibility: hidden;
width: 100%;
&.dummy .onlyaudio {
display: block;
}
&.withvideo {
//visibility: visible;
}
.peerActions {
// scss-lint:disable SelectorDepth
bottom: 5%;
left: 40px;
opacity: 0;
pointer-events: auto;
position: absolute;
right: 40px;
text-align: center;
transition-duration: .2s;
transition-property: opacity;
z-index: 10;
&.onlyaudio {
background: $video-onlyaudio-background;
//visibility: visible;
.onlyaudio {
display: block;
}
}
&:hover {
opacity: .5;
.onlyaudio {
color: $video-onlyaudio;
display: none;
font-size: 80px;
left: 0;
margin-top: -40px;
pointer-events: auto;
position: absolute;
right: 0;
text-align: center;
top: 45%;
}
i {
font-size: 3vw;
&.onlyaudio video,
&.dummy video {
visibility: hidden;
}
}
.peerLabel {
bottom: 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 #000;
white-space: nowrap;
z-index: 8;
}
}
&.dummy .onlyaudio {
display: block;
}
.audiovideo .overlayActions {
background: $video-overlayactions;
bottom: 0;
height: 140px;
left: 0;
margin: auto 0;
opacity: 0;
padding: 3px 0;
position: absolute;
top: 0;
width: 40px;
z-index: 5;
.peerActions {
// scss:lint:disable NestingDepth, SelectorDepth
bottom: 5%;
left: 40px;
opacity: 0;
pointer-events: auto;
position: absolute;
right: 40px;
text-align: center;
transition-duration: .2s;
transition-property: opacity;
z-index: 10;
&:hover {
opacity: .5;
}
i {
font-size: 3vw;
}
}
.btn {
color: #ccc;
cursor: pointer;
display: block;
outline: 0;
text-shadow: 0 0 5px #000;
width: 40px;
.peerLabel {
bottom: 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 #000;
white-space: nowrap;
z-index: 8;
}
}
}
.remoteVideo {
@ -327,28 +322,6 @@ @@ -327,28 +322,6 @@
}
}
.renderer-auditorium {
position: relative;
span:before {
content: '\f183';
left: 50%;
margin-left: -.8em;
margin-top: -.5em;
position: absolute;
top: 50%;
}
span:after {
content: '\f183';
margin-right: -.9em;
margin-top: -.5em;
position: absolute;
right: 50%;
top: 50%;
}
}
.renderer-smally {
// scss-lint:disable SelectorDepth
background: #000;
@ -457,6 +430,26 @@ @@ -457,6 +430,26 @@
}
.renderer-auditorium {
position: relative;
span:before {
content: '\f183';
left: 50%;
margin-left: -.8em;
margin-top: -.5em;
position: absolute;
top: 50%;
}
span:after {
content: '\f183';
margin-right: -.9em;
margin-top: -.5em;
position: absolute;
right: 50%;
top: 50%;
}
.remoteContainer {
border-left: 40px solid #000;
}
@ -467,10 +460,6 @@ @@ -467,10 +460,6 @@
top: 180px;
width: 320px;
.overlayLogo {
display: none;
}
video {
height: 100%;
margin-top: -9px;

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

@ -76,9 +76,7 @@ @@ -76,9 +76,7 @@
position: absolute;
right: 0;
top: 0;
}
.buddylist {
&.loading {
.buddylistloading {
display: block;
@ -139,13 +137,11 @@ @@ -139,13 +137,11 @@
position: relative;
text-align: left;
width: 100%;
}
.buddy:hover {
background: $buddylist-action-background;
}
&:hover {
background: $buddylist-action-background;
}
.buddy {
&.withSubline .buddy1,
&.contact .buddy1 {
top: 15px;
@ -156,8 +152,15 @@ @@ -156,8 +152,15 @@
display: block;
}
&.hovered .buddyactions {
right: 0;
&.hovered {
.buddyactions {
right: 0;
}
.buddysessions {
max-height: 999px;
}
}
.fa.contact:before {
@ -249,68 +252,65 @@ @@ -249,68 +252,65 @@
white-space: nowrap;
width: 120px;
}
}
.buddy .buddyactions {
background: $buddylist-action-background;
height: 66px;
line-height: 66px;
padding: 0 10px;
position: absolute;
right: -125px;
text-align: right;
top: 0;
transition-duration: .3s;
transition-property: right;
white-space: nowrap;
z-index: 5;
.btn {
font-size: $buddylist-action-font-size;
height: 40px;
line-height: 40px;
padding: 0;
text-align: center;
vertical-align: middle;
width: 42px;
.buddyactions {
background: $buddylist-action-background;
height: 66px;
line-height: 66px;
padding: 0 10px;
position: absolute;
right: -125px;
text-align: right;
top: 0;
transition-duration: .3s;
transition-property: right;
white-space: nowrap;
z-index: 5;
.btn {
font-size: $buddylist-action-font-size;
height: 40px;
line-height: 40px;
padding: 0;
text-align: center;
vertical-align: middle;
width: 42px;
}
}
}
.buddysessions {
margin-bottom: 10px;
margin-top: 56px;
max-height: 0;
transition-delay: .1s;
transition-duration: .5s;
transition-property: max-height;
ul {
border-left: 1px dotted $bordercolor;
border-right: 1px dotted $bordercolor;
margin: 0 14px;
padding-left: 0;
padding-top: 10px;
}
.buddysessions {
margin-bottom: 10px;
margin-top: 56px;
max-height: 0;
transition-delay: .1s;
transition-duration: .5s;
transition-property: max-height;
ul {
border-left: 1px dotted $bordercolor;
border-right: 1px dotted $bordercolor;
margin: 0 14px;
padding-left: 0;
padding-top: 10px;
}
li {
list-style-type: none;
margin-bottom: 2px;
margin-left: 0;
ul li {
// scss-lint:disable NestingDepth
list-style-type: none;
margin-bottom: 2px;
margin-left: 0;
&:hover .btn-group {
visibility: visible;
}
}
.btn-group {
visibility: hidden;
}
.btn-group {
visibility: hidden;
}
&:hover .btn-group {
visibility: visible;
}
}
.currentsession .buddy3 {
font-weight: bold;
.currentsession .buddy3 {
font-weight: bold;
}
}
}
.buddy.hovered .buddysessions {
max-height: 999px;
}

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

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

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

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

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

@ -135,6 +135,7 @@ @@ -135,6 +135,7 @@
}
.chat {
// scss-lint:disable NestingDepth
background: $chat-background;
bottom: 0;
display: none;
@ -143,450 +144,448 @@ @@ -143,450 +144,448 @@
position: absolute;
right: 0;
top: 0;
}
.chat {
&.active {
&.visible {
display: block;
}
.chatbody {
// nothing
&.newmessage {
.chatheadertitle:after {
content: '***';
position: absolute;
right: 32px;
top: 2px;
}
.chatheader {
// nothing
animation: newmessage 1s ease -.3s infinite;
}
}
}
.chatmenu {
height: 36px;
left: 0;
padding: 2px 4px;
position: absolute;
right: 0;
top: 36px;
@include breakpt($breakpoint-chat-small, max-height) {
display: none;
&.active.visible {
display: block;
}
}
.chatbody {
border-left: 1px solid $bordercolor;
bottom: -1px;
left: 0;
position: absolute;
right: 0;
top: 74px;
@include breakpt($breakpoint-chat-small, max-height) {
border-top: 1px solid $bordercolor;
top: 0;
top: 0;
}
}
&.with_pictures .message {
&.is_self {
padding-right: 54px;
.chatheader {
background: $chat-header;
border-bottom: 1px solid $bordercolor;
border-left: 1px solid $bordercolor;
height: 36px;
left: 0;
line-height: 34px;
padding: 0 4px 0 8px;
position: absolute;
right: 0;
top: 0;
.timestamp {
right: 58px;
}
}
@include breakpt($breakpoint-chat-small, max-height) {
display: none;
&.is_remote {
padding-left: 58px;
}
}
.chatstatusicon {
cursor: pointer;
display: block;
font-size: 1.4em;
height: 36px;
.chatbodybottom {
background: $chat-bottom-background;
bottom: 1px;
left: 0;
margin: 0 auto;
position: absolute;
text-align: center;
top: 0;
width: 36px;
}
.chatheadertitle {
display: inline;
padding-left: 28px;
}
.ctrl {
color: $chat-ctrl;
position: absolute;
right: 1px;
top: 0;
right: 0;
.#{$fa-css-prefix} {
cursor: pointer;
padding: 6px;
@include breakpt($breakpoint-chat-small, max-height) {
height: auto;
}
}
span {
display: inline-block;
max-width: 60%;
.typinghint {
color: $chat-typing;
font-size: .8em;
height: 14px;
overflow: hidden;
pointer-events: none;
text-overflow: ellipsis;
vertical-align: middle;
padding: 0 6px;
white-space: nowrap;
}
}
.chat .outputbox {
bottom: 75px;
left: 0;
position: absolute;
right: 0;
top: 0;
@include breakpt($breakpoint-chat-small, max-height) {
bottom: 45px;
@include breakpt($breakpoint-chat-small, max-height) {
display: none;
}
}
}
.chat .output {
height: 100%;
overflow-x: hidden;
overflow-y: auto;
padding: .4em 0;
> i {
clear: both;
color: $chat-meta;
display: block;
font-size: .8em;
padding: 6px 0;
text-align: center;
.inputbox {
position: relative;
&.p2p {
font-weight: bold;
padding: 6px 0;
@include breakpt($breakpoint-chat-small, max-height) {
height: auto;
}
}
}
.chat.with_pictures .message {
&.is_self {
padding-right: 54px;
.timestamp {
right: 58px;
.btn {
display: none;
padding: .5em 1em;
position: absolute;
right: 6px;
top: 1px;
}
}
&.is_remote {
padding-left: 58px;
> div {
border-top: 1px solid $bordercolor;
}
}
}
.chat .message {
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;
ul {
list-style-type: none;
.input {
border-color: transparent;
border-radius: 0;
box-shadow: none;
display: block;
height: 54px;
margin: 0;
padding-left: 0;
}
max-height: 54px; /* FF hack */
resize: none;
width: 100%;
li {
line-height: 1.1em;
margin: 4px 0;
padding-left: 1.2em;
position: relative;
@include breakpt($breakpoint-chat-small, max-height) {
max-height: 2.5em;
}
&:before {
color: $chat-msg-default-icon-color;
content: '\f075';
font-family: FontAwesome;
left: 0;
position: absolute;
text-align: center;
width: 12px;
&:active,
&:focus {
border-color: $chat-input-border-color;
}
}
.timestamp {
color: $chat-timestamp;
font-size: .8em;
.outputbox {
bottom: 75px;
left: 0;
position: absolute;
right: 8px;
text-align: right;
top: 8px;
}
right: 0;
top: 0;
.timestamp-space {
float: right;
height: 10px;
width: 40px;
@include breakpt($breakpoint-chat-small, max-height) {
bottom: 45px;
}
}
strong {
display: block;
margin-right: 40px;
overflow: hidden;
padding-bottom: 2px;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.output {
height: 100%;
overflow-x: hidden;
overflow-y: auto;
padding: .4em 0;
.chat .message {
&.is_self li:before {
color: $chat-msg-default-icon-color;
transform: scale(-1, 1);
}
> i {
clear: both;
color: $chat-meta;
display: block;
font-size: .8em;
padding: 6px 0;
text-align: center;
li {
&.unread:before {
color: $chat-msg-unread-icon-color;
content: $chat-msg-unread-icon;
&.p2p {
font-weight: bold;
padding: 6px 0;
}
}
}
.message {
// scss-lint:disable DuplicateProperty
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;
&.sending:before {
color: $chat-msg-sending-icon-color;
content: $chat-msg-sending-icon;
ul {
list-style-type: none;
margin: 0;
padding-left: 0;
}
&.sent:before {
color: $chat-msg-sent-icon-color;
content: $chat-msg-sent-icon;
.timestamp {
color: $chat-timestamp;
font-size: .8em;
position: absolute;
right: 8px;
text-align: right;
top: 8px;
}
&.delivered:before {
color: $chat-msg-delivered-icon-color;
content: $chat-msg-delivered-icon;
.timestamp-space {
float: right;
height: 10px;
width: 40px;
}
&.received:before {
color: $chat-msg-received-icon-color;
content: $chat-msg-received-icon;
strong {
display: block;
margin-right: 40px;
overflow: hidden;
padding-bottom: 2px;
text-overflow: ellipsis;
white-space: nowrap;
}
&.read:before {
color: $chat-msg-read-icon-color;
content: $chat-msg-read-icon;
li {
line-height: 1.1em;
margin: 4px 0;
padding-left: 1.2em;
position: relative;
&:before {
color: $chat-msg-default-icon-color;
content: '\f075';
font-family: FontAwesome;
left: 0;
position: absolute;
text-align: center;
width: 12px;
}
&.unread:before {
color: $chat-msg-unread-icon-color;
content: $chat-msg-unread-icon;
}
&.sending:before {
color: $chat-msg-sending-icon-color;
content: $chat-msg-sending-icon;
}
&.sent:before {
color: $chat-msg-sent-icon-color;
content: $chat-msg-sent-icon;
}
&.delivered:before {
color: $chat-msg-delivered-icon-color;
content: $chat-msg-delivered-icon;
}
&.received:before {
color: $chat-msg-received-icon-color;
content: $chat-msg-received-icon;
}
&.read:before {
color: $chat-msg-read-icon-color;
content: $chat-msg-read-icon;
}
}
}
}
.chat .message {
&.is_self .buddyPicture {
left: auto;
right: 4px;
}
.buddyPicture {
background: $actioncolor1;
border-radius: 2px;
height: 46px;
left: 4px;
overflow: hidden;
position: absolute;
text-align: center;
top: 4px;
width: 46px;
z-index: 0;
.buddyPicture {
background: $actioncolor1;
border-radius: 2px;
height: 46px;
left: 4px;
overflow: hidden;
position: absolute;
text-align: center;
top: 4px;
width: 46px;
z-index: 0;
.#{$fa-css-prefix} {
color: $actioncolor2;
line-height: 46px;
}
.#{$fa-css-prefix} {
color: $actioncolor2;
line-height: 46px;
img {
bottom: 0;
display: block;
left: 0;
max-height: 100%;
max-width: 100%;
position: absolute;
right: 0;
top: 0;
}
}
img {
bottom: 0;
&:before,
&:after {
border-style: solid;
content: '';
display: block;
left: 0;
max-height: 100%;
max-width: 100%;
position: absolute;
right: 0;
top: 0;
width: 0;
}
}
}
.chat .message {
// scss-lint:disable DuplicateProperty
&:before,
&:after {
border-style: solid;
content: '';
display: block;
position: absolute;
width: 0;
}
&.is_remote {
background: $chat-msg-remote-background;
&.is_remote {
background: $chat-msg-remote-background;
&:before { // arrow border
border-color: transparent $chat-arrow-border;
border-width: 7px 11px 7px 0;
bottom: auto;
left: -12px;
top: 4px;
}
&:before { // arrow border
border-color: transparent $chat-arrow-border;
border-width: 7px 11px 7px 0;
bottom: auto;
left: -12px;
top: 4px;
&:after { // arrow background
border-color: transparent $chat-msg-remote-background;
border-width: 6px 10px 6px 0;
bottom: auto;
left: -11px;
top: 5px;
}
}
&:after { // arrow background
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-left: 4px;
margin-right: 18px;
padding-right: 0;
&.is_self {
background: $chat-msg-self-background;
margin-left: 4px;
margin-right: 18px;
padding-right: 0;
&:before { // arrow border
border-color: transparent $chat-arrow-border;
border-width: 7px 0 7px 11px;
bottom: 4px;
bottom: auto;
right: -12px;
}
&:before { // arrow border
border-color: transparent $chat-arrow-border;
border-width: 7px 0 7px 11px;
bottom: 4px;
bottom: auto;
right: -12px;
}
&:after { // arrow background
border-color: transparent $chat-msg-self-background;
border-width: 6px 0 6px 10px;
bottom: 5px;
bottom: auto;
right: -11px;
}
}
&:after { // arrow background
border-color: transparent $chat-msg-self-background;
border-width: 6px 0 6px 10px;
bottom: 5px;
bottom: auto;
right: -11px;
}
&.with_name {
// none
}
&.with_hoverimage {
.buddyPicture {
overflow: visible;
z-index: initial;
&:hover .buddyInfoActions {
height: 40px;
opacity: 1;
li:before {
color: $chat-msg-default-icon-color;
transform: scale(-1, 1);
}
}
.buddyInfoActions {
cursor: default;
display: inline-block;
height: 0;
left: 0;
opacity: 0;
overflow: hidden;
position: absolute;
top: 48px;
transition: opacity 0.1s .1s linear, height .4s .1s ease-out;
white-space: nowrap;
z-index: 1;
.btn-group {
display: block;
margin: 0 auto;
width: 55px;
.buddyPicture {
left: auto;
right: 4px;
}
.btn-primary {
padding: 2px 5px;
}
&.with_name {
// none
}
&.with_hoverimage {
.buddyPicture {
overflow: visible;
z-index: initial;
&:hover .buddyInfoActions {
height: 40px;
opacity: 1;
}
}
.fa {
color: #fff;
line-height: 24px;
.buddyInfoActions {
cursor: default;
display: inline-block;
height: 0;
left: 0;
opacity: 0;
overflow: hidden;
position: absolute;
top: 48px;
transition: opacity 0.1s .1s linear, height .4s .1s ease-out;
white-space: nowrap;
z-index: 1;
.btn-group {
display: block;
margin: 0 auto;
width: 55px;
}
.btn-primary {
padding: 2px 5px;
}
.fa {
color: #fff;
line-height: 24px;
}
}
}
}
}
.chat {
.chatbodybottom {
background: $chat-bottom-background;
bottom: 1px;
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
.chatmenu {
height: 36px;
left: 0;
padding: 2px 4px;
position: absolute;
right: 0;
top: 36px;
@include breakpt($breakpoint-chat-small, max-height) {
height: auto;
}
@include breakpt($breakpoint-chat-small, max-height) {
display: none;
}
}
.typinghint {
color: $chat-typing;
font-size: .8em;
height: 14px;
overflow: hidden;
padding: 0 6px;
white-space: nowrap;
.chatbody {
border-left: 1px solid $bordercolor;
bottom: -1px;
left: 0;
position: absolute;
right: 0;
top: 74px;
@include breakpt($breakpoint-chat-small, max-height) {
display: none;
}
@include breakpt($breakpoint-chat-small, max-height) {
border-top: 1px solid $bordercolor;
top: 0;
top: 0;
}
}
.inputbox {
position: relative;
.chatheader {
background: $chat-header;
border-bottom: 1px solid $bordercolor;
border-left: 1px solid $bordercolor;
height: 36px;
left: 0;
line-height: 34px;
padding: 0 4px 0 8px;
position: absolute;
right: 0;
top: 0;
@include breakpt($breakpoint-chat-small, max-height) {
height: auto;
}
@include breakpt($breakpoint-chat-small, max-height) {
display: none;
}
.btn {
display: none;
padding: .5em 1em;
position: absolute;
right: 6px;
top: 1px;
}
.chatstatusicon {
cursor: pointer;
display: block;
font-size: 1.4em;
height: 36px;
left: 0;
position: absolute;
text-align: center;
top: 0;
width: 36px;
}
> div {
border-top: 1px solid $bordercolor;
}
.chatheadertitle {
display: inline;
padding-left: 28px;
}
.input {
border-color: transparent;
border-radius: 0;
box-shadow: none;
display: block;
height: 54px;
margin: 0;
max-height: 54px; /* FF hack */
resize: none;
width: 100%;
.ctrl {
color: $chat-ctrl;
position: absolute;
right: 1px;
top: 0;
@include breakpt($breakpoint-chat-small, max-height) {
max-height: 2.5em;
.#{$fa-css-prefix} {
cursor: pointer;
padding: 6px;
}
}
&:active,
&:focus {
border-color: $chat-input-border-color;
}
span {
display: inline-block;
max-width: 60%;
overflow: hidden;
pointer-events: none;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
}
}
@ -595,16 +594,3 @@ @@ -595,16 +594,3 @@
50% {background-color: $componentbg;}
100% {background-color: $actioncolor1;}
}
.chat.newmessage {
.chatheadertitle:after {
content: '***';
position: absolute;
right: 32px;
top: 2px;
}
.chatheader {
animation: newmessage 1s ease -.3s infinite;
}
}

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

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

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

@ -19,16 +19,146 @@ @@ -19,16 +19,146 @@
*
*/
.mainPresentation #presentation {
display: block;
}
.presentation {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
.mainPresentation #presentation {
display: block;
.overlaybar {
bottom: 0;
left: 0;
right: 0;
text-align: center;
.overlaybar-content {
// scss-lint:disable NestingDepth
max-width: 100%;
.pagecontrol {
height: 30px;
}
}
.btn-prev {
left: 40px;
}
.btn-next {
left: auto;
right: 0;
}
.overlaybar-button {
font-size: 20px;
line-height: 28px;
padding: 4px 6px;
position: absolute;
top: 0;
}
}
.thumbnail {
color: #333;
display: inline-block;
height: 122px;
margin-left: 20px;
margin-top: 20px;
position: relative;
text-shadow: none;
vertical-align: middle;
width: 160px;
&:first-child {
margin-left: 0;
}
&.presentable {
cursor: pointer;
}
&:hover .presentation-action {
display: block;
}
&:hover .notavailable {
display: block;
}
.caption {
// scss-lint:disable NestingDepth
overflow: hidden;
padding-bottom: 0;
text-overflow: ellipsis;
.size {
font-size: 10px;
}
.progress {
position: relative;
}
.download-info {
bottom: 0;
color: $text-color;
left: 0;
line-height: 20px;
position: absolute;
right: 0;
text-shadow: 1px 1px 1px #fff;
top: 0;
}
}
.active {
bottom: 0;
color: #84b819;
font-size: 10em;
left: 0;
opacity: .7;
position: absolute;
right: 0;
text-align: center;
top: 0;
}
.notavailable {
bottom: 0;
color: #d2322d;
display: none;
font-size: 10em;
left: 0;
opacity: .25;
position: absolute;
right: 0;
text-align: center;
top: 0;
}
.presentation-action {
display: none;
position: absolute;
top: 1px;
}
.download {
left: 1px;
}
.delete {
right: 1px;
}
.filetype {
font-size: 5em;
}
}
}
.presentationpane {
@ -42,25 +172,27 @@ @@ -42,25 +172,27 @@
.welcome {
padding: 0;
h1 {
white-space: normal;
}
.btn {
margin-top: 30px;
}
}
h1 {
white-space: normal;
}
.progress span {
text-shadow: none;
}
.download-info {
color: $text-color;
left: 0;
position: absolute;
text-shadow: 1px 1px 1px #fff;
width: 100%;
.progress .download-info {
color: $text-color;
left: 0;
position: absolute;
text-shadow: 1px 1px 1px #fff;
width: 100%;
}
}
}
.presentationpane {
.canvasContainer {
height: 100%;
width: 100%;
@ -89,150 +221,19 @@ @@ -89,150 +221,19 @@
display: none;
margin: 0;
padding: 0;
}
.odfcontainer.showonepage {
overflow: hidden;
text-align: center;
&.showonepage {
overflow: hidden;
text-align: center;
}
}
}
.presentation .overlaybar {
bottom: 0;
left: 0;
right: 0;
text-align: center;
}
.presentation .overlaybar .overlaybar-content {
max-width: 100%;
}
.presentation .overlaybar .overlaybar-button {
font-size: 20px;
line-height: 28px;
padding: 4px 6px;
position: absolute;
top: 0;
}
.overlaybar-content .pagecontrol {
height: 30px;
}
.presentation .overlaybar .btn-prev {
left: 40px;
}
.presentation .overlaybar .btn-next {
left: auto;
right: 0;
}
.pageinfo input {
display: inline;
width: 70px;
}
.presentation .thumbnail {
color: #333;
display: inline-block;
height: 122px;
margin-left: 20px;
margin-top: 20px;
position: relative;
text-shadow: none;
vertical-align: middle;
width: 160px;
}
.presentation .thumbnail.presentable {
cursor: pointer;
}
.presentation .thumbnail:first-child {
margin-left: 0;
}
.presentation .thumbnail .caption {
overflow: hidden;
padding-bottom: 0;
text-overflow: ellipsis;
}
.presentation .thumbnail .caption .size {
// scss-lint:disable SelectorDepth
font-size: 10px;
}
.presentation .thumbnail .caption .progress {
// scss-lint:disable SelectorDepth
position: relative;
}
.presentation .thumbnail .caption .download-info {
// scss-lint:disable SelectorDepth
bottom: 0;
color: $text-color;
left: 0;
line-height: 20px;
position: absolute;
right: 0;
text-shadow: 1px 1px 1px #fff;
top: 0;
}
.presentation .thumbnail .active {
bottom: 0;
color: #84b819;
font-size: 10em;
left: 0;
opacity: .7;
position: absolute;
right: 0;
text-align: center;
top: 0;
}
.presentation .thumbnail .notavailable {
bottom: 0;
color: #d2322d;
display: none;
font-size: 10em;
left: 0;
opacity: .25;
position: absolute;
right: 0;
text-align: center;
top: 0;
}
.presentation .thumbnail:hover .notavailable {
display: block;
}
.presentation .thumbnail .presentation-action {
display: none;
position: absolute;
top: 1px;
}
.presentation .thumbnail .download {
left: 1px;
}
.presentation .thumbnail .delete {
right: 1px;
}
.presentation .thumbnail:hover .presentation-action {
display: block;
}
.presentation .thumbnail .filetype {
font-size: 5em;
}
.presentations {
height: 156px;
margin-left: -25px;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Write Preview
Loading…
Cancel
Save