diff --git a/src/styles/components/_fileinfo.scss b/src/styles/components/_fileinfo.scss index 4c19b322..5e08c62b 100644 --- a/src/styles/components/_fileinfo.scss +++ b/src/styles/components/_fileinfo.scss @@ -18,134 +18,129 @@ * along with this program. If not, see . * */ - .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 { - font-size: 20em; - color: #eee; +.file-info { + background: $fileinfo-background; + 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 { - font-size: 1.1em; - padding: 0 .2em; - margin:0.2em 0; - min-width:140px; + font-size: 1.1em; + margin: .2em 0; + min-width: 140px; + padding: 0 .2em; } .file-info-size { - font-size: 0.8em; - position:relative; - height: 20px; -} - -.file-info.downloader .file-info-size { - margin-bottom: 10px; -} - -.file-info.downloading .file-info-size{ - border-color: #ddd; -} - -.file-info-size > span { - padding: 4px; - z-index:5; - display:block; - position:relative; - text-shadow: 1px 1px 1px white; - position: absolute; - margin: 0 auto; - top:1px; - right:0px; - left:0px; -} - -.file-info-size > div { - z-index:0; - width:0%; - -webkit-box-shadow: none !important; - box-shadow: none !important; - position: absolute; - left:0px; - bottom:0px; - top:0px; -} - -.file-info-size > div.progress-bar { - opacity: 0.5; -} - -.file-info-size > div.progress-bar.download { - z-index:1; - opacity: 1; -} - -div.file-info-speed { - position: absolute; - left: 0px; - right: 0px; - bottom: 8px; - text-align: center; - font-size: 0.8em; -} -.file-info.uploader div.file-info-speed { - bottom: 6px; -} - -.file-info.downloader .anim { - margin-left: -40px; -} - -.file-info.uploader .anim { - margin-left: 0px; -} -.file-info.uploader .hovercontrol:hover .anim { - margin-left: -50px; -} - -.file-info.uploader .hovercontrol > div { - -webkit-transition: all .2s ease-in-out; - -moz-transition: all .2s ease-in-out; - -o-transition: all .2s ease-in-out; - transition: all .2s ease-in-out -} - -.file-info .actions { - position: absolute; - 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; + font-size: .8em; + height: 20px; + position: relative; + > span { + display: block; + left: 0; + margin: 0 auto; + padding: 4px; + position: absolute; + text-shadow: 1px 1px 1px white; + top: 1px; + right: 0; + z-index: 5; + } + > div { + bottom: 0; + box-shadow: none !important; + left: 0; + position: absolute; + top: 0; + width: 0; + z-index: 0; + &.progress-bar { + opacity: .5; + } + &.progress-bar.download { + opacity: 1; + z-index: 1; + } + } +} + +.file-info-speed { + bottom: 8px; + font-size: .8em; + left: 0; + position: absolute; + 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; + } } diff --git a/src/styles/components/_rightslide.scss b/src/styles/components/_rightslide.scss index 9623bae6..a6d78df6 100644 --- a/src/styles/components/_rightslide.scss +++ b/src/styles/components/_rightslide.scss @@ -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 . + * + */ + #rightslide { -position: absolute; -top: 44px; -right: -260px; -bottom: 0px; -left: 0px; -z-index:5; --webkit-transition: right 200ms ease-in-out; --moz-transition: right 200ms ease-in-out; --ms-transition: right 200ms ease-in-out; --o-transition: right 200ms ease-in-out; -transition: right 200ms ease-in-out; -pointer-events:none; -overflow-x: auto; -overflow-y: hidden; + bottom: 0; + left: 0; + overflow-x: auto; + overflow-y: hidden; + pointer-events: none; + position: absolute; + right: -260px; + top: 44px; + transition: right 200ms ease-in-out; + z-index: 5; } + .withBuddylist #rightslide { -right:0px; + right: 0; } + #rightslide .rightslidepane { -position:relative; -width:100%; -height:100%; -min-width:520px; -} \ No newline at end of file + height: 100%; + min-width: 520px; + position: relative; + width: 100%; +} diff --git a/src/styles/components/_roombar.scss b/src/styles/components/_roombar.scss index 87130b2e..0d5d24a8 100644 --- a/src/styles/components/_roombar.scss +++ b/src/styles/components/_roombar.scss @@ -18,18 +18,20 @@ * along with this program. If not, see . * */ + #roombar { - position: absolute; - left:0px; - top:44px; - right:0px; - min-width:260px; - z-index:4; + left: 0; + min-width: 260px; + position: absolute; + right: 0; + top: 44px; + z-index: 4; } + #roombar .roombar { - position: absolute; - left:0px; - top:0px; - right:0px; + left: 0; + position: absolute; + right: 0; + top: 0; } diff --git a/src/styles/components/_screenshare.scss b/src/styles/components/_screenshare.scss index e01ca121..e80bf237 100644 --- a/src/styles/components/_screenshare.scss +++ b/src/styles/components/_screenshare.scss @@ -19,39 +19,45 @@ * */ -.mainScreenshare #screenshare { - display: block; -} .screenshare { - position:absolute; - left:0px; - right:0px; - top:0px; - bottom:0px; + bottom: 0; + left: 0; + position: absolute; + right: 0; + top: 0; } -.screensharepane { - position:absolute; - left:0px; - right:0px; - bottom:0px; - top:0px; - overflow:auto; - background:black; + +.mainScreenshare #screenshare { + display: block; } -.screensharepane .remotescreen { - position:relative; + +.screensharepane { + background: black; + bottom: 0; + left: 0; + overflow: auto; + position: absolute; + right: 0; + top: 0; } -.screensharepane video { - width: 100%; - max-height: 99%; + +.screensharepane { + .remotescreen { + position: relative; + } + video { + max-height: 99%; + width: 100%; + } } + .remotesize .screensharepane video { - width: auto; - max-height: none; + max-height: none; + width: auto; } .screenshare .overlaybar { - bottom: 0px; - left: 0px; - right: 0px; -} \ No newline at end of file + bottom: 0; + left: 0; + right: 0; +} diff --git a/src/styles/components/_settings.scss b/src/styles/components/_settings.scss index 02a34721..d4743f45 100644 --- a/src/styles/components/_settings.scss +++ b/src/styles/components/_settings.scss @@ -18,68 +18,66 @@ * along with this program. If not, see . * */ + #settings { -position:fixed; -top:44px; -right:-520px; -bottom:0px; -width:520px; -z-index: 50; --webkit-transition: right 200ms ease-in-out; --moz-transition: right 200ms ease-in-out; --ms-transition: right 200ms ease-in-out; --o-transition: right 200ms ease-in-out; -transition: right 200ms ease-in-out; -padding-right: 20px; -border-top:1px solid $bordercolor; + border-top: 1px solid $bordercolor; + bottom: 0; + padding-right: 20px; + position: fixed; + right: -520px; + top: 44px; + transition: right 200ms ease-in-out; + width: 520px; + z-index: 50; } + #settings.show { -right:0px; + right: 0; } + .settings { -position:absolute; -left:0px; -right:0px; -top:0px; -bottom:0px; -background: $sidepanebg; -overflow-x: hidden; -overflow-y: auto; -padding:10px; + background: $sidepanebg; + bottom: 0; + left: 0; + overflow-x: hidden; + overflow-y: auto; + padding: 10px; + position: absolute; + right: 0; + top: 0; } + .settings .version { -position:absolute; -top:10px; -right:10px; -font-size:10px; -color:#ccc; + color: #ccc; + font-size: 10px; + position: absolute; + right: 10px; + top: 10px; } + @media only screen and (max-width: 630px) { - .settings .form-horizontal .controls { - margin-left:110px; - } - .settings .form-horizontal .control-label { - width:100px; - word-wrap:break-word; - } - .settings { - padding-bottom:10px; - } - #settings.show { - width:auto; - left:0px; - background:white; - } - #settings.show .form-actions { - position: fixed; - bottom: 0px; - left:0px; - right:0px; - margin-bottom:0px; - padding-bottom:0px; - height:60px; - padding-left:120px; - padding-top:6px; - padding-bottom:6px; - } + .settings .form-horizontal .controls { + margin-left: 110px; + } + .settings .form-horizontal .control-label { + width: 100px; + word-wrap: break-word; + } + .settings { + padding-bottom: 10px; + } + #settings.show { + background: white; + left: 0; + width: auto; + } + #settings.show .form-actions { + bottom: 0; + height: 60px; + left: 0; + margin-bottom: 0; + padding: 6px 0 6px 120px; + position: fixed; + right: 0; + } } diff --git a/src/styles/global/_variables.scss b/src/styles/global/_variables.scss index 6dbfe4d3..a3059471 100644 --- a/src/styles/global/_variables.scss +++ b/src/styles/global/_variables.scss @@ -80,6 +80,11 @@ $chat-bottom-background: $chat-background; $chat-typing: $chat-meta; $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); $breakpoint-small: 480px;