Merge pull request #50 from theurere/scss-branding

Branding - customizable logos and skins

README.md

@@ -85,6 +85,20 @@ The latest version of Spreed WebRTC can be found on GitHub:
   and CSS reload directly.
 
 
+## Branding
+
+  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.
+
+
+## Skins
+
+  Insert skins in `src/styles/global/skins` and edit the `@import "skins/light";`
+  line in `src/styles/global/_variables.scss`. Available skins are light and
+  dark. It is recommended to create a new skin file if you wish to customize
+  colors.
+
+
 ## Production use
 
   Spreed WebRTC should be run through a SSL frontend proxy with
@@ -107,6 +121,7 @@ The latest version of Spreed WebRTC can be found on GitHub:
 4. Do your commits (run ``make fmt`` before commit).
 5. Send "pull request".
 
+
 ## License
 
 `Spreed WebRTC` uses the AGPL license, see our `LICENSE` file.

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;
@@ -55,7 +55,7 @@
   padding-left: 12px;
   position: absolute;
   .logo {
-    background: url(../img/logo-small.png) no-repeat;
+    background: $logo no-repeat;
     background-size: 100%;
     display: inline-block;
     color: black;
@@ -170,7 +170,7 @@
     }
     &:hover {
       background-color: none;
-      border-color: $bordercolor;
+      border-color: $bar-btn-action-border;
       color: $bar-btn-action-hover;
     }
     &.active {
@@ -212,4 +212,4 @@
   transform-origin:50% 50%;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
-}
+}

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/skins/_dark.scss

@@ -0,0 +1,91 @@
+/*!
+ * Spreed WebRTC.
+ * Copyright (C) 2013-2014 struktur AG
+ *
+ * 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
+ * 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/>.
+ *
+ */
+
+$skin-name: "Dark Theme";
+$skin-version: "0.0.1";
+
+$base-skin-color: #212121;
+
+$contrasted-dark-default: #262625;  // compass color utility
+$contrasted-light-default: #FCFCFC;  // compass color utility
+
+// background
+$main-background: url("../img/bg-tiles.png");
+$main-background-retina: url("../img/bg-tiles_x2.png");
+
+// menu background color
+$menu-background-color: $base-skin-color;
+$menu-background-color-accent: lighten($menu-background-color, 5%);
+
+$componentfg1: contrast-color($menu-background-color);
+$componentbg: $menu-background-color;
+$buddylist-tab-background: $menu-background-color;
+$chat-background: darken($menu-background-color, 5%);
+$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;
+
+// font
+$font-color: contrast-color($menu-background-color);
+$font-color-accent: darken($font-color, 20%);
+
+$chat-ctrl: $font-color;
+$bar-btn-action-color: $font-color;
+$chat-meta: $font-color-accent;
+$chat-timestamp: $font-color-accent;
+$form-help-text: $font-color-accent;
+$bar-logo-text-desc: $font-color-accent;
+$buddylist-browser: $font-color-accent;
+$buddylist-tab-color: $font-color-accent;
+$bar-btn-action-hover: darken($font-color, 20%);
+$bar-btn-action-border: darken($font-color, 50%);
+
+$bordercolor: lighten($menu-background-color, 10%);
+$chat-msg-border: lighten($chat-background, 5%);
+$fileinfo-border-remote: $chat-msg-remote-background;
+$fileinfo-border: $chat-msg-self-background;
+$overlaybar-btn: $font-color-accent;
+$overlaybar-color: $font-color-accent;
+
+// 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;
+$input-bg: lighten($menu-background-color, 20%);
+$input-color: $font-color;
+$input-border: $bar-btn-action-border;
+$progress-bg: lighten($input-bg, 30%);
+$modal-content-bg: $menu-background-color-accent;
+$dialog-header-neutral: $menu-background-color-accent !default;
+$close-color: white;
+$modal-header-border-color: $bordercolor;

src/styles/global/skins/_light.scss

@@ -0,0 +1,23 @@
+/*!
+ * Spreed WebRTC.
+ * Copyright (C) 2013-2014 struktur AG
+ *
+ * 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
+ * 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/>.
+ *
+ */
+
+$skin-name: "Light Theme";
+$skin-version: "0.0.1";