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

Convert fileinfo to scss. 

Rearrage elements in fileinfo.

Colors to variables.

Rearrange rightslide elements.

Rearrange the roombar scss.

Rearrange screenshare.

Rearrange settings elements.
pull/30/head
Evan Theurer 11 years ago
parent
171e8d6ed9
commit
b9f0ee22cf
6 changed files with 260 additions and 235 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 241
      src/styles/components/_fileinfo.scss
  2. 59
      src/styles/components/_rightslide.scss
  3. 22
      src/styles/components/_roombar.scss
  4. 60
      src/styles/components/_screenshare.scss
  5. 108
      src/styles/components/_settings.scss
  6. 5
      src/styles/global/_variables.scss

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

@ -18,134 +18,129 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>. * along with this program. If not, see <http://www.gnu.org/licenses/>.
* *
*/ */
.file-info {
text-align:center;
border: 1px solid #ddd;
padding: 1em;
background: #fff;
border-radius: 4px;
padding: 1em;
position: relative;
max-width: 170px;
}
.file-info > div {
z-index: 3;
position: relative;
}
.file-info div.file-info-bg {
position:absolute;
left:41px;
top:-17px;
right:0px;
bottom:0px;
z-index:2;
overflow:hidden;
}
.file-info-bg i { .file-info {
font-size: 20em; background: $fileinfo-background;
color: #eee; border: 1px solid $fileinfo-border;
border-radius: 4px;
padding: 1em;
position: relative;
text-align: center;
max-width: 170px;
}
.file-info {
> div {
position: relative;
z-index: 3;
}
.file-info-bg {
bottom: 0;
left: 41px;
right: 0;
overflow: hidden;
position: absolute;
top: -17px;
z-index: 2;
.#{$fa-css-prefix} {
color: $fileinfo-icon-background-color;
font-size: 20em;
}
}
.actions {
left: 50%;
margin-left: 10px;
position: absolute;
text-align: left;
top: 14px;
}
} }
.file-info-name { .file-info-name {
font-size: 1.1em; font-size: 1.1em;
padding: 0 .2em; margin: .2em 0;
margin:0.2em 0; min-width: 140px;
min-width:140px; padding: 0 .2em;
} }
.file-info-size { .file-info-size {
font-size: 0.8em; font-size: .8em;
position:relative; height: 20px;
height: 20px; position: relative;
} > span {
display: block;
.file-info.downloader .file-info-size { left: 0;
margin-bottom: 10px; margin: 0 auto;
} padding: 4px;
position: absolute;
.file-info.downloading .file-info-size{ text-shadow: 1px 1px 1px white;
border-color: #ddd; top: 1px;
} right: 0;
z-index: 5;
.file-info-size > span { }
padding: 4px; > div {
z-index:5; bottom: 0;
display:block; box-shadow: none !important;
position:relative; left: 0;
text-shadow: 1px 1px 1px white; position: absolute;
position: absolute; top: 0;
margin: 0 auto; width: 0;
top:1px; z-index: 0;
right:0px; &.progress-bar {
left:0px; opacity: .5;
} }
&.progress-bar.download {
.file-info-size > div { opacity: 1;
z-index:0; z-index: 1;
width:0%; }
-webkit-box-shadow: none !important; }
box-shadow: none !important; }
position: absolute;
left:0px; .file-info-speed {
bottom:0px; bottom: 8px;
top:0px; font-size: .8em;
} left: 0;
position: absolute;
.file-info-size > div.progress-bar { right: 0;
opacity: 0.5; text-align: center;
} }
.file-info-size > div.progress-bar.download { .file-info.uploader {
z-index:1; .file-info-speed {
opacity: 1; bottom: 6px;
} }
.actions {
div.file-info-speed { margin-left: 30px;
position: absolute; opacity: 0;
left: 0px; }
right: 0px; .anim {
bottom: 8px; margin-left: 0;
text-align: center; }
font-size: 0.8em; .hovercontrol {
} &:hover .anim {
.file-info.uploader div.file-info-speed { margin-left: -50px;
bottom: 6px; }
} &:hover .actions {
margin-left: 0;
.file-info.downloader .anim { opacity: 1;
margin-left: -40px; }
} > div {
transition: all .2s ease-in-out
.file-info.uploader .anim { }
margin-left: 0px; }
} }
.file-info.uploader .hovercontrol:hover .anim {
margin-left: -50px; .file-info.downloader {
} .anim {
margin-left: -40px;
.file-info.uploader .hovercontrol > div { }
-webkit-transition: all .2s ease-in-out; .file-info-size {
-moz-transition: all .2s ease-in-out; margin-bottom: 10px;
-o-transition: all .2s ease-in-out; }
transition: all .2s ease-in-out }
}
.file-info.downloading {
.file-info .actions { .file-info-size{
position: absolute; border-color: $fileinfo-downloading-size-border;
top: 14px; }
left: 50%;
margin-left: 10px;
text-align: left;
}
.file-info.uploader .actions {
margin-left:30px;
opacity:0;
}
.file-info.uploader .hovercontrol:hover .actions {
margin-left:0px;
opacity:1;
} }

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

@ -1,25 +1,44 @@
/*
* Spreed Speak Freely.
* Copyright (C) 2013-2014 struktur AG
*
* This file is part of Spreed Speak Freely.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
#rightslide { #rightslide {
position: absolute; bottom: 0;
top: 44px; left: 0;
right: -260px; overflow-x: auto;
bottom: 0px; overflow-y: hidden;
left: 0px; pointer-events: none;
z-index:5; position: absolute;
-webkit-transition: right 200ms ease-in-out; right: -260px;
-moz-transition: right 200ms ease-in-out; top: 44px;
-ms-transition: right 200ms ease-in-out; transition: right 200ms ease-in-out;
-o-transition: right 200ms ease-in-out; z-index: 5;
transition: right 200ms ease-in-out;
pointer-events:none;
overflow-x: auto;
overflow-y: hidden;
} }
.withBuddylist #rightslide { .withBuddylist #rightslide {
right:0px; right: 0;
} }
#rightslide .rightslidepane { #rightslide .rightslidepane {
position:relative; height: 100%;
width:100%; min-width: 520px;
height:100%; position: relative;
min-width:520px; width: 100%;
} }

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

@ -18,18 +18,20 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>. * along with this program. If not, see <http://www.gnu.org/licenses/>.
* *
*/ */
#roombar { #roombar {
position: absolute; left: 0;
left:0px; min-width: 260px;
top:44px; position: absolute;
right:0px; right: 0;
min-width:260px; top: 44px;
z-index:4; z-index: 4;
} }
#roombar .roombar { #roombar .roombar {
position: absolute; left: 0;
left:0px; position: absolute;
top:0px; right: 0;
right:0px; top: 0;
} }

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

@ -19,39 +19,45 @@
* *
*/ */
.mainScreenshare #screenshare {
display: block;
}
.screenshare { .screenshare {
position:absolute; bottom: 0;
left:0px; left: 0;
right:0px; position: absolute;
top:0px; right: 0;
bottom:0px; top: 0;
} }
.screensharepane {
position:absolute; .mainScreenshare #screenshare {
left:0px; display: block;
right:0px;
bottom:0px;
top:0px;
overflow:auto;
background:black;
} }
.screensharepane .remotescreen {
position:relative; .screensharepane {
background: black;
bottom: 0;
left: 0;
overflow: auto;
position: absolute;
right: 0;
top: 0;
} }
.screensharepane video {
width: 100%; .screensharepane {
max-height: 99%; .remotescreen {
position: relative;
}
video {
max-height: 99%;
width: 100%;
}
} }
.remotesize .screensharepane video { .remotesize .screensharepane video {
width: auto; max-height: none;
max-height: none; width: auto;
} }
.screenshare .overlaybar { .screenshare .overlaybar {
bottom: 0px; bottom: 0;
left: 0px; left: 0;
right: 0px; right: 0;
} }

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

@ -18,68 +18,66 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>. * along with this program. If not, see <http://www.gnu.org/licenses/>.
* *
*/ */
#settings { #settings {
position:fixed; border-top: 1px solid $bordercolor;
top:44px; bottom: 0;
right:-520px; padding-right: 20px;
bottom:0px; position: fixed;
width:520px; right: -520px;
z-index: 50; top: 44px;
-webkit-transition: right 200ms ease-in-out; transition: right 200ms ease-in-out;
-moz-transition: right 200ms ease-in-out; width: 520px;
-ms-transition: right 200ms ease-in-out; z-index: 50;
-o-transition: right 200ms ease-in-out;
transition: right 200ms ease-in-out;
padding-right: 20px;
border-top:1px solid $bordercolor;
} }
#settings.show { #settings.show {
right:0px; right: 0;
} }
.settings { .settings {
position:absolute; background: $sidepanebg;
left:0px; bottom: 0;
right:0px; left: 0;
top:0px; overflow-x: hidden;
bottom:0px; overflow-y: auto;
background: $sidepanebg; padding: 10px;
overflow-x: hidden; position: absolute;
overflow-y: auto; right: 0;
padding:10px; top: 0;
} }
.settings .version { .settings .version {
position:absolute; color: #ccc;
top:10px; font-size: 10px;
right:10px; position: absolute;
font-size:10px; right: 10px;
color:#ccc; top: 10px;
} }
@media only screen and (max-width: 630px) { @media only screen and (max-width: 630px) {
.settings .form-horizontal .controls { .settings .form-horizontal .controls {
margin-left:110px; margin-left: 110px;
} }
.settings .form-horizontal .control-label { .settings .form-horizontal .control-label {
width:100px; width: 100px;
word-wrap:break-word; word-wrap: break-word;
} }
.settings { .settings {
padding-bottom:10px; padding-bottom: 10px;
} }
#settings.show { #settings.show {
width:auto; background: white;
left:0px; left: 0;
background:white; width: auto;
} }
#settings.show .form-actions { #settings.show .form-actions {
position: fixed; bottom: 0;
bottom: 0px; height: 60px;
left:0px; left: 0;
right:0px; margin-bottom: 0;
margin-bottom:0px; padding: 6px 0 6px 120px;
padding-bottom:0px; position: fixed;
height:60px; right: 0;
padding-left:120px; }
padding-top:6px;
padding-bottom:6px;
}
} }

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

@ -80,6 +80,11 @@ $chat-bottom-background: $chat-background;
$chat-typing: $chat-meta; $chat-typing: $chat-meta;
$chat-input-border-color: #66afe9; $chat-input-border-color: #66afe9;
$fileinfo-background: white;
$fileinfo-border: #ddd;
$fileinfo-icon-background-color: #eee;
$fileinfo-downloading-size-border: #ddd;
$tap-highlight: rgba(0, 0, 0, 0); $tap-highlight: rgba(0, 0, 0, 0);
$breakpoint-small: 480px; $breakpoint-small: 480px;

Write Preview
Loading…
Cancel
Save