Convert fileinfo to scss.

Rearrage elements in fileinfo.

Colors to variables.

Rearrange rightslide elements.

Rearrange the roombar scss.

Rearrange screenshare.

Rearrange settings elements.

src/styles/components/_fileinfo.scss

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

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 <http://www.gnu.org/licenses/>.
+ *
+ */
+
 #rightslide {
+  bottom: 0;
+  left: 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  pointer-events: none;
   position: absolute;
-top: 44px;
   right: -260px;
-bottom: 0px;
+  top: 44px;
-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;
+  z-index: 5;
-overflow-x: auto;
-overflow-y: hidden;
 }
+
 .withBuddylist #rightslide {
-right:0px;
+  right: 0;
 }
+
 #rightslide .rightslidepane {
-position:relative;
-width:100%;
   height: 100%;
   min-width: 520px;
+  position: relative;
+  width: 100%;
 }

src/styles/components/_roombar.scss

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

src/styles/components/_screenshare.scss

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

src/styles/components/_settings.scss

@@ -18,42 +18,43 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  *
  */
+
 #settings {
+  border-top: 1px solid $bordercolor;
+  bottom: 0;
+  padding-right: 20px;
   position: fixed;
-top:44px;
   right: -520px;
-bottom:0px;
+  top: 44px;
+  transition: right 200ms ease-in-out;
   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;
 }
+
 #settings.show {
-right:0px;
+  right: 0;
 }
+
 .settings {
-position:absolute;
-left:0px;
-right:0px;
-top:0px;
-bottom:0px;
   background: $sidepanebg;
+  bottom: 0;
+  left: 0;
   overflow-x: hidden;
   overflow-y: auto;
   padding: 10px;
+  position: absolute;
+  right: 0;
+  top: 0;
 }
+
 .settings .version {
+  color: #ccc;
+  font-size: 10px;
   position: absolute;
-top:10px;
   right: 10px;
-font-size:10px;
+  top: 10px;
-color:#ccc;
 }
+
 @media only screen and (max-width: 630px) {
   .settings .form-horizontal .controls {
     margin-left: 110px;
@@ -66,20 +67,17 @@ color:#ccc;
     padding-bottom: 10px;
   }
   #settings.show {
- 		width:auto;
- 		left:0px;
     background: white;
+    left: 0;
+    width: auto;
   }
   #settings.show .form-actions {
-		position: fixed;
+    bottom: 0;
-		bottom: 0px;
-		left:0px;
-		right:0px;
-		margin-bottom:0px;
-		padding-bottom:0px;
     height: 60px;
-		padding-left:120px;
+    left: 0;
-		padding-top:6px;
+    margin-bottom: 0;
-		padding-bottom:6px;
+    padding: 6px 0 6px 120px;
+    position: fixed;
+    right: 0;
   }
 }

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;