Convert social to scss.

Convert colors to variables.

Rename color.

Rearrange usability.

Remove unused help border.

Improved variables for bar.

Update variables for bar and base.

src/styles/components/_bar.scss

@@ -71,7 +71,7 @@
       top: 26px;
     }
     span a {
-      color: $dgrey;
+      color: $bar-logo-text-desc;
     }
   }
 }
@@ -155,7 +155,7 @@
   .btn {
     background: transparent;
     border-color: transparent;
-    color: $grey3;
+    color: $bar-btn-action-color;
     display: inline-block;
     height: 42px;
     font: 24px/40px $font-sans-serif;
@@ -170,22 +170,22 @@
     }
     &:hover {
       background-color: none;
-      border-color: #ccc;
-      color: $grey4;
+      border-color: $bordercolor;
+      color: $bar-btn-action-hover;
     }
     &.active {
       background-color: none;
-      border-color: #ccc;
-      color: $grey4;
+      border-color: $bordercolor;
+      color: $bar-btn-action-hover;
     }
     &.active.amutebtn {
-      background-color: $red;
-      border-color: $red;
+      background-color: $bar-btn-action-mute;
+      border-color: $bar-btn-action-mute;
       color: white;
     }
     &.active.aenablebtn {
-      background-color: $actioncolor1;
-      border-color: $actioncolor1;
+      background-color: $bar-btn-action-enable;
+      border-color: $bar-btn-action-enable;
       color: white;
     }
   }

src/styles/components/_social.scss

@@ -1,15 +1,38 @@
-i.email, span.email {
-color: #aaa;
+/*
+ * 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/>.
+ *
+ */
+
+.#{$fa-css-prefix} {
+  &.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;
+  }
 }
-i.facebook, span.facebook {
-color: #45619d;
-}
-i.twitter, span.twitter {
-color: #00aced;
-}
-i.google, span.google {
-color: #dd4b39;
-}
-i.xing, span.xing {
-color: #fff;
-}

src/styles/components/_usability.scss

@@ -18,53 +18,45 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  *
  */
+
 #help {
-    position:absolute;
-    top:80px;
-    bottom:10px;
-    left:0px;
-    right:0px;
-    width:350px;
-    font-size:1.1em;
-    color:#aaa;
-    text-shadow: 0 0 5px black;
-    margin: 0 auto;
-    -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;
-    boder-top:1px solid $bordercolor;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -o-user-select: none;
-    user-select: none;
+  bottom: 10px;
+  color: #aaa;
+  font-size: 1.1em;
+  left: 0;
+  margin: 0 auto;
+  position: absolute;
+  right: 0;
+  text-shadow: 0 0 5px black;
+  transition: right 200ms ease-in-out;
+  top: 80px;
+  user-select: none;
+  width: 350px;
 }
-.withChat #help, .withBuddylist #help {
-    right:260px;
+
+.withChat #help,
+.withBuddylist #help {
+  right: 260px;
 }
-.withChat.withBuddylist #help, .withSettings #help {
-    right:520px;
+
+.withChat.withBuddylist #help,
+.withSettings #help {
+  right: 520px;
 }
-#help > div {
-    margin:0 10px;
-}
-#help .help-subline {
-    padding:20px 0;
-    color:#888;
-}
-@media only screen and (max-width: 1020px) and (min-width: 400px) {
-    #help {
-        width:250px;
-        font-size:1em;
-    }
-    #help > div {
-        //margin-left:10px;
-    }
-}
-@media only screen and (max-width: 400px) {
-	#help {
-		display:none;
-	}
+
+#help {
+  > div {
+    margin: 0 10px;
+  }
+  .help-subline {
+    color: #888;
+    padding: 20px 0;
+  }
+  @include breakpt-only-screen($breakpoint-useability-small){
+    display: none;
+  }
+  @include breakpt-only-screen-with-min($breakpoint-useability-small, $breakpoint-useability-large){
+    font-size: 1em;
+    width: 250px;
+  }
 }

src/styles/global/_base.scss

@@ -103,7 +103,7 @@ a {
   transition-property: opacity;
   transition-duration: .5s;
   div {
-    color: $lighter-text;
+    color: $loading;
     display: block;
     font-size: 3em;
     left: 0;
@@ -128,7 +128,7 @@ a {
 }
 
 .welcome {
-  color: $light-text;
+  color: $welcome;
   font-size: 1.1em;
   margin-top: 80px;
   text-shadow: 0 0 5px black;

src/styles/global/_mixins.scss

@@ -17,6 +17,12 @@
   }
 }
 
+@mixin breakpt-only-screen-with-min($pt1, $pt2) {
+  @media only screen and (min-width: $pt1) and (max-width: $pt2) {
+    @content;
+  }
+}
+
 // not handled by autoprefixer
 @mixin tap-highlight-color($color) {
   -webkit-tap-highlight-color: $color;

src/styles/global/_variables.scss

@@ -21,6 +21,8 @@
 
 // ** Custom Variables **
 // --------------------------------------------------
+
+// general
 $background: #e5e5e5;
 $componentbg: #f5f5f5;
 $componentfg1: #262626;
@@ -32,21 +34,38 @@ $bordercolor: #ccc;
 $actioncolor1: rgb(132,184,25);
 $actioncolor2: rgb(0,149,52);
 
-$light-text: #aaa;
-$lighter-text: #ddd;
+// general action based colors
+$action-hover: rgba(0,0,0,.4);
+$action-mute: rgb(219,79,57);
+$action-enable: $actioncolor1;
 
-$grey3: rgba(0,0,0,.3);
-$grey4: rgba(0,0,0,.4);
-$dgrey: rgb(34,34,34);
-$red: rgb(219,79,57);
+// base
+$welcome: #aaa;
+$loading: #ddd;
 
-$tap-highlight: rgba(0, 0, 0, 0);
+// font
+$font-sans-serif: "Helvetica Neue",Helvetica,Arial,sans-serif;
+$base-font-size: 13px; // compass
+$base-line-height: 19px; // compass
+
+// audio video
+$audiovideolevel: $action-enable;
 
+// main navigation bar
+$minbarheight: 44px;
+$bar-logo-text-desc: rgb(34,34,34);
+$bar-btn-action-color: rgba(0,0,0,.3);
+$bar-btn-action-hover: $action-hover;
+$bar-btn-action-mute: $action-mute;
+$bar-btn-action-enable: $action-enable;
+
+// video
 $video-background: rgba(0,0,0,.4);
 $video-onlyaudio-background: #666;
 $video-onlyaudio: rgba(255,255,255,.3);
 $video-overlayactions: rgba(0,0,0,.9);
 
+// buddylist
 $buddylist-background: rgba(0,0,0,.3);
 $buddylist-action-background: rgba(255,255,255,0.5);
 
@@ -91,6 +110,18 @@ $fileinfo-downloading-size-border: #ddd;
 // settings
 $settings-version: #ccc;
 
+// social
+$social-email-color: #aaa;
+$social-facebook-color: #45619d;
+$social-google-color: #dd4b39;
+$social-twitter-color: #00aced;
+$social-xing-color: white;
+
+// useability
+$breakpoint-useability-small: 400px;
+$breakpoint-useability-large: 1020px;
+
+// breakpoints
 $breakpoint-small: 480px;
 $breakpoint-medium: 700px;
 $breakpoint-large: 1280px;
@@ -102,22 +133,17 @@ $breakpoint-chat-small: 210px;
 
 $breakpoint-settings-medium: 630px;
 
-$font-sans-serif: "Helvetica Neue",Helvetica,Arial,sans-serif;
+// touch specific
+$tap-highlight: rgba(0, 0, 0, 0);
 
-// compass
-$base-font-size: 13px;
-$base-line-height: 19px;
 
-$audiovideolevel: #9dd53a;
-
-//main navigation bar
-$minbarheight: 44px;
 
 // ** Fontawsome changed variables **
 // original at libs/fontawesome/_variables.scss
 // --------------------------
 $fa-css-prefix:       fa;
 
+
 // ** Bootstrap changed variables **
 // original at libs/bootstrap/_variables.scss
 // --------------------------------------------------
@@ -129,7 +155,6 @@ $fa-css-prefix:       fa;
 //** Background color for `<body>`.
 $body-bg:               $background;
 
-
 //== Typography
 //
 //## Font, line-height, and color for body text, headings, and more.