Merge upstream. Fix buddylist conflicts.

Conflicts:

	Makefile
	src/styles/global/_branding.scss
	src/styles/global/_variables.scss

Update vars.

Remove old files. Change scss comments to new app name.

Improve variables.

Remove duplicate form vars. Fix whitespace.

README.md

@@ -87,7 +87,7 @@ The latest version of Spreed WebRTC can be found on GitHub:
 
 ## Branding
 
-  Insert logo in `static/img/`. Edit `src/styles/global/_branding.scss` to link 
+  Insert logo in `static/img/`. Edit `src/styles/global/_branding.scss` to link
   to desired custom logo. It is also possible to insert the raw svg data.
 
 

src/styles/components/_bar.scss

@@ -29,7 +29,7 @@
 }
 
 .bar {
-  background-color: $componentbg;
+  background: $bar-background;
   box-shadow: 0 2px 10px 0 $componentfg3;
   color: $componentfg1;
   font: bold 1em/40px $font-sans-serif;
@@ -170,7 +170,7 @@
     }
     &:hover {
       background-color: none;
-      border-color: $bordercolor;
+      border-color: $bar-btn-action-border;
       color: $bar-btn-action-hover;
     }
     &.active {

src/styles/components/_buddylist.scss

@@ -29,14 +29,14 @@
 }
 
 #buddylist:before {
-  background: $componentbg;
+  background: $buddylist-tab-background;
   border-left: 1px solid $bordercolor;
   border-top: 1px solid $bordercolor;
   border-bottom: 1px solid $bordercolor;
   border-top-left-radius: 6px;
   border-bottom-left-radius: 6px;
   bottom: 0;
-  color: $buddylist-background;
+  color: $buddylist-tab-color;
   content: "\f100";
   cursor: pointer;
   display: none;
@@ -62,7 +62,7 @@
 }
 
 .buddylist {
-  background: $componentbg;
+  background: $buddylist-background;
   border-top: 1px solid $bordercolor;
   bottom: 0;
   left: 25px;
@@ -93,7 +93,7 @@
   .buddylistloading,
   .buddylistempty {
     bottom: 0;
-    color: $buddylist-background;
+    color: $font-color-accent;
     display: none;
     font-size: 1.4em;
     height: 2em;
@@ -175,7 +175,7 @@
     }
   }
   .buddy1 {
-    color: $componentfg1;
+    color: $buddylist-buddy1;
     font-weight: bold;
     font-size: 14px;
     height: 28px;
@@ -188,7 +188,7 @@
     white-space: nowrap;
   }
   .buddy2 {
-    color: $componentfg2;
+    color: $buddylist-buddy2;
     left: 65px;
     overflow: hidden;
     position: absolute;
@@ -253,4 +253,4 @@
 
 .buddy.hovered .buddysessions {
   max-height:999px;
-}
+}

src/styles/components/_chat.scss

@@ -167,7 +167,7 @@
 }
 
 .chatheader {
-  background: $componentbg;
+  background: $chat-header;
   border-top: 1px solid $bordercolor;
   border-bottom: 1px solid $bordercolor;
   border-right: 1px solid $bordercolor;

src/styles/components/_fileinfo.scss

@@ -56,6 +56,17 @@
   }
 }
 
+.is_remote .file-info {
+  background: $fileinfo-background-remote;
+  border: 1px solid $fileinfo-border-remote;
+  .file-info-bg {
+    .#{$fa-css-prefix} {
+      color: $fileinfo-icon-background-color-remote;
+      font-size: 20em;
+    }
+  }
+}
+
 .file-info-name {
   font-size: 1.1em;
   margin: .2em 0;

src/styles/components/_settings.scss

@@ -34,7 +34,7 @@
 #settings.show {
   right: 0;
   @include breakpt($breakpoint-settings-medium, max-width, only screen) {
-    background: white;
+    background: $settings-background;
     left: 0;
     width: auto;
   }
@@ -52,7 +52,7 @@
 }
 
 .settings {
-  background: $sidepanebg;
+  background: $settings-background;
   bottom: 0;
   left: 0;
   overflow-x: hidden;

src/styles/global/_overlaybar.scss

@@ -20,8 +20,8 @@
  */
 
 .overlaybar {
-  background: $componentfg3;
-  color: $bordercolor;
+  background: $overlaybar-background;
+  color: $overlaybar-color;
   min-height: 36px;
   padding: 3px 8px 0 30px;
   position: absolute;
@@ -68,7 +68,7 @@
     }
   }
   .overlaybar-button {
-    color: $bordercolor;
+    color: $overlaybar-btn;
     display: block;
     font-size: 20px;
     top: 0px;

src/styles/global/_variables.scss

@@ -21,10 +21,10 @@
 
 @import "compass/utilities/color/contrast";
 @import "branding";
-@import "skins/dark";
+@import "skins/light";
 
 // general
-$background: #e5e5e5;
+$background: #e5e5e5 !default;
 $componentbg: #f5f5f5 !default;
 $componentfg1: #262626 !default;
 $componentfg2: rgba(0,0,0,.5) !default;
@@ -34,7 +34,6 @@ $sidepanebg: white !default;
 $bordercolor: #ccc !default;
 $actioncolor1: rgb(132,184,25) !default;
 $actioncolor2: rgb(0,149,52) !default;
-$font-color: lighten(#000, 20%) !default;
 
 // branding
 $logo: url("../img/logo-small.png") !default;
@@ -45,117 +44,132 @@ $main-background: url("../img/bg-tiles.png") !default;
 $main-background-retina: url("../img/bg-tiles_x2.png") !default;
 
 // general action based colors
-$action-hover: rgba(0,0,0,.4);
-$action-mute: rgb(219,79,57);
-$action-enable: $actioncolor1;
+$action-hover: rgba(0,0,0,.4) !default;
+$action-mute: rgb(219,79,57) !default;
+$action-enable: $actioncolor1 !default;
 
 // base
-$welcome: #aaa;
-$loading: #ddd;
+$welcome: #aaa !default;
+$loading: #ddd !default;
 
 // font
 $font-sans-serif: "Helvetica Neue",Helvetica,Arial,sans-serif !default;
 $base-font-size: 13px !default; // compass vertical_rhythm mixin
 $base-line-height: 1.53846156 !default; // compass vertical_rhythm mixin
+$font-color: lighten(#000, 20%) !default;
+$font-color-accent: lighten($font-color, 50%) !default;
 
 // audio video
-$audiovideolevel: $action-enable;
+$audiovideolevel: $action-enable !default;
 
 // 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;
+$minbarheight: 44px !default;
+$bar-background: $componentbg;
+$bar-logo-text-desc: rgb(34,34,34) !default;
+$bar-btn-action-border: $bordercolor !default;
+$bar-btn-action-color: rgba(0,0,0,.3) !default;
+$bar-btn-action-hover: $action-hover !default;
+$bar-btn-action-mute: $action-mute !default;
+$bar-btn-action-enable: $action-enable !default;
+
+// overlaybar
+$overlaybar-background: $componentfg3;
+$overlaybar-color: $bordercolor !default;
+$overlaybar-btn: $bordercolor !default;
 
 // 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);
+$video-background: rgba(0,0,0,.4) !default;
+$video-onlyaudio-background: #666 !default;
+$video-onlyaudio: rgba(255,255,255,.3) !default;
+$video-overlayactions: rgba(0,0,0,.9) !default;
 
 // buddylist
-$buddylist-background: rgba(0,0,0,.3);
-$buddylist-action-background: rgba(255,255,255,0.5);
+$buddylist-background: $componentbg;
+$buddylist-tab-color: rgba(0,0,0,.3) !default;
+$buddylist-tab-background: $componentbg !default;
+$buddylist-action-background: rgba(255,255,255,0.5) !default;
+$buddylist-buddy1: $componentfg1 !default;
+$buddylist-buddy2: $componentfg2 !default;
 
 // chat
-$chat-background: #e7e7e7;
-$chat-disabled: #aaa;
-$chat-badge: #84b819;
-$chat-ctrl: rgba(0,0,0,.3);
-$chat-timestamp: #aaa;
-$chat-meta: #aaa;
-$chat-msg-background: white;
-$chat-msg-border: #e5e5ef;
-
-$chat-msg-default-icon-color: #ccc;
-$chat-msg-unread-icon-color: #FE9A2E;
-$chat-msg-sending-icon-color: $chat-msg-default-icon-color;
-$chat-msg-sent-icon-color: #5882FA;
-$chat-msg-delivered-icon-color: #5882FA;
-$chat-msg-received-icon-color: #84b819;
-$chat-msg-read-icon-color: $chat-msg-default-icon-color;
-
-$chat-msg-unread-icon: '\f0eb';
-$chat-msg-sending-icon: '\f0ec';
-$chat-msg-sent-icon: '\f003';
-$chat-msg-delivered-icon: '\f019';
-$chat-msg-received-icon: '\f06e';
-$chat-msg-read-icon: '\f00c';
-
-$chat-msg-self-background: white;
-$chat-msg-remote-background: white;
-
-$chat-bottom-background: $chat-background;
-$chat-typing: $chat-meta;
-$chat-input-border-color: #66afe9;
+$chat-background: #e7e7e7 !default;
+$chat-header: $componentbg !default;
+$chat-disabled: #aaa !default;
+$chat-badge: #84b819 !default;
+$chat-ctrl: rgba(0,0,0,.3) !default;
+$chat-timestamp: #aaa !default;
+$chat-meta: #aaa !default;
+$chat-msg-background: white !default;
+$chat-msg-border: #e5e5ef !default;
+
+$chat-msg-default-icon-color: #ccc !default;
+$chat-msg-unread-icon-color: #FE9A2E !default;
+$chat-msg-sending-icon-color: $chat-msg-default-icon-color !default;
+$chat-msg-sent-icon-color: #5882FA !default;
+$chat-msg-delivered-icon-color: #5882FA !default;
+$chat-msg-received-icon-color: #84b819 !default;
+$chat-msg-read-icon-color: $chat-msg-default-icon-color !default;
+
+$chat-msg-unread-icon: '\f0eb' !default;
+$chat-msg-sending-icon: '\f0ec' !default;
+$chat-msg-sent-icon: '\f003' !default;
+$chat-msg-delivered-icon: '\f019' !default;
+$chat-msg-received-icon: '\f06e' !default;
+$chat-msg-read-icon: '\f00c' !default;
+
+$chat-msg-self-background: white !default;
+$chat-msg-remote-background: white !default;
+
+$chat-bottom-background: $chat-background !default;
+$chat-typing: $chat-meta !default;
+$chat-input-border-color: #66afe9 !default;
 
 // fileinfo
-$fileinfo-background: white;
-$fileinfo-border: #ddd;
-$fileinfo-icon-background-color: #eee;
-$fileinfo-downloading-size-border: #ddd;
+$fileinfo-background: white !default;
+$fileinfo-border: #ddd !default;
+$fileinfo-icon-background-color: #eee !default;
+$fileinfo-downloading-size-border: #ddd !default;
+$fileinfo-background-remote: $fileinfo-background !default;
+$fileinfo-border-remote: $fileinfo-border !default;
+$fileinfo-icon-background-color-remote: $fileinfo-icon-background-color !default;
 
 // settings
-$settings-version: #ccc;
+$settings-version: #ccc !default;
+$form-help-text: #737373 !default;
+$settings-background: white !default;
 
 // social
-$social-email-color: #aaa;
-$social-facebook-color: #45619d;
-$social-google-color: #dd4b39;
-$social-twitter-color: #00aced;
-$social-xing-color: white;
+$social-email-color: #aaa !default;
+$social-facebook-color: #45619d !default;
+$social-google-color: #dd4b39 !default;
+$social-twitter-color: #00aced !default;
+$social-xing-color: white !default;
 
 // useability
-$breakpoint-useability-small: 400px;
-$breakpoint-useability-large: 1020px;
+$breakpoint-useability-small: 400px !default;
+$breakpoint-useability-large: 1020px !default;
 
 // breakpoints
-$breakpoint-small: 480px;
-$breakpoint-medium: 700px;
-$breakpoint-large: 1280px;
-$breakpoint-video-small: 590px;
-$breakpoint-video-medium: 630px;
-$breakpoint-chat-small: 210px;
-$breakpoint-settings-medium: 630px;
+$breakpoint-small: 480px !default;
+$breakpoint-medium: 700px !default;
+$breakpoint-large: 1280px !default;
+$breakpoint-video-small: 590px !default;
+$breakpoint-video-medium: 630px !default;
+$breakpoint-chat-small: 210px !default;
+$breakpoint-settings-medium: 630px !default;
 
 // touch specific
-$tap-highlight: rgba(0, 0, 0, 0);
+$tap-highlight: rgba(0, 0, 0, 0) !default;
 
-// Fontawsome changed variables
-// original at libs/fontawesome/_variables.scss
-$fa-css-prefix: fa;
+// Fontawsome targeted variables
+$fa-css-prefix: fa !default;
 
 // Bootstrap changed variables
-// original at libs/bootstrap/_variables.scss
-$body-bg: $background;
-
-// typography
-// font, line-height, and color for body text, headings, and more
-$font-family-sans-serif:  $font-sans-serif;
-$font-family-serif:       Georgia, "Times New Roman", Times, serif;
-$font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
-$font-family-base:        $font-family-sans-serif;
-$font-size-base:          $base-font-size;
-$line-height-base:        $base-line-height;
+$body-bg: $background !default;
+
+$font-family-sans-serif: $font-sans-serif !default;
+$font-family-base: $font-family-sans-serif !default;
+$font-size-base: $base-font-size !default;
+$font-size-base: $base-font-size !default;
+$line-height-base: $base-line-height !default;
+$text-color: $font-color !default;

src/styles/global/skins/_dark.scss

@@ -1,8 +1,8 @@
 /*!
- * Spreed Speak Freely.
+ * Spreed WebRTC.
  * Copyright (C) 2013-2014 struktur AG
  *
- * This file is part of Spreed Speak Freely.
+ * This file is part of Spreed WebRTC.
  *
  * 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
@@ -39,13 +39,13 @@ $componentfg1: contrast-color($menu-background-color);
 $componentbg: $menu-background-color;
 $buddylist-tab-background: $menu-background-color;
 $chat-background: darken($menu-background-color, 5%);
-$input-bg-color: lighten($menu-background-color, 20%);
 $chat-msg-self-background: lighten($chat-background, 10%);
 $chat-msg-remote-background: $chat-msg-self-background;
 $fileinfo-background: darken($chat-msg-self-background, 10%);
 $fileinfo-background-remote: darken($chat-msg-remote-background, 10%);
 $buddylist-action-background: transparent;
 $sidepanebg: $menu-background-color-accent;
+$settings-background: $menu-background-color;
 
 $fileinfo-icon-background-color: $chat-msg-self-background;
 $fileinfo-icon-background-color-remote: $chat-msg-remote-background;
@@ -53,14 +53,11 @@ $fileinfo-icon-background-color-remote: $chat-msg-remote-background;
 // font
 $base-font-size: 13px; // compass vertical_rhythm mixin
 $base-line-height: 1.53846156; // compass vertical_rhythm mixin
-
-// font color
 $font-color: contrast-color($menu-background-color);
 $font-color-accent: darken($font-color, 20%);
 
 $chat-ctrl: $font-color;
 $bar-btn-action-color: $font-color;
-$input-text-color: $font-color;
 $chat-meta: $font-color-accent;
 $chat-timestamp: $font-color-accent;
 $form-help-text: $font-color-accent;
@@ -72,19 +69,21 @@ $bar-btn-action-border: darken($font-color, 50%);
 
 $bordercolor: lighten($menu-background-color, 10%);
 $chat-msg-border: lighten($chat-background, 5%);
-$input-border-color: $bar-btn-action-border;
 $fileinfo-border-remote: $chat-msg-remote-background;
 $fileinfo-border: $chat-msg-self-background;
+$overlaybar-btn: $font-color-accent;
+$overlaybar-color: $font-color-accent;
 
-// boostrap vars
+// bootstrap vars
 $text-color: $font-color;
 $legend-color: $font-color;
 $legend-border-color: $bordercolor;
 $hr-border: $bordercolor;
-
 $list-group-bg: $menu-background-color-accent;
 $list-group-border: $bordercolor;
 $list-group-hover-bg: $menu-background-color;
 $list-group-link-color: $font-color-accent;
-
-$progress-bg: lighten($input-bg-color, 30%);
+$input-bg: lighten($menu-background-color, 20%);
+$input-color: $font-color;
+$input-border: $bar-btn-action-border;
+$progress-bg: lighten($input-bg, 30%);

src/styles/global/skins/_light.scss

@@ -1,8 +1,8 @@
 /*!
- * Spreed Speak Freely.
+ * Spreed WebRTC.
  * Copyright (C) 2013-2014 struktur AG
  *
- * This file is part of Spreed Speak Freely.
+ * This file is part of Spreed WebRTC.
  *
  * 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

src/styles/main.scss

@@ -22,7 +22,6 @@
 // must set custom compass variables before import of compass
 @import "global/variables";
 @import "compass";
-@import "global/branding";
 @import "libs/libs";
 
 @import "global/mixins";