From d3a57e00d3e88afea100c7f9c1c643f634c38908 Mon Sep 17 00:00:00 2001 From: Evan Theurer Date: Wed, 7 May 2014 17:44:16 +0200 Subject: [PATCH] Add branding options. Conflicts: src/styles/global/_variables.scss Add branding and theme, dark. --- src/styles/components/_bar.scss | 4 +- src/styles/global/_base.scss | 2 +- src/styles/global/_branding.scss | 32 +++++++++ src/styles/global/_variables.scss | 6 +- src/styles/global/theme/_dark.scss | 102 +++++++++++++++++++++++++++++ src/styles/main.scss | 1 + 6 files changed, 141 insertions(+), 6 deletions(-) create mode 100644 src/styles/global/_branding.scss create mode 100644 src/styles/global/theme/_dark.scss diff --git a/src/styles/components/_bar.scss b/src/styles/components/_bar.scss index 694735e2..92b2c3cd 100644 --- a/src/styles/components/_bar.scss +++ b/src/styles/components/_bar.scss @@ -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; @@ -212,4 +212,4 @@ transform-origin:50% 50%; animation-iteration-count: infinite; animation-timing-function: linear; -} \ No newline at end of file +} diff --git a/src/styles/global/_base.scss b/src/styles/global/_base.scss index 63825c38..f8f88206 100644 --- a/src/styles/global/_base.scss +++ b/src/styles/global/_base.scss @@ -72,7 +72,7 @@ a { } #background { - background: url("../img/bg-tiles.png") repeat; + background: $main-background repeat; bottom: 0; left: 0; position:fixed; diff --git a/src/styles/global/_branding.scss b/src/styles/global/_branding.scss new file mode 100644 index 00000000..03fdc4e2 --- /dev/null +++ b/src/styles/global/_branding.scss @@ -0,0 +1,32 @@ +/* + * 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 . + * + */ + +// ** Branding ** +// Quickly change out logo and colors +// -------------------------------------------------- + +$logo: url("../img/logo-small.png"); +$main-background: url("../img/bg-tiles.png"); +$menu-background-color: rgba(24, 24, 24, 1); +$componentfg1: constrast-color($menu-background-color); + +// menu background color +$componentbg: $menu-background-color; diff --git a/src/styles/global/_variables.scss b/src/styles/global/_variables.scss index 7393ca79..eb0a3438 100644 --- a/src/styles/global/_variables.scss +++ b/src/styles/global/_variables.scss @@ -21,8 +21,8 @@ // general $background: #e5e5e5; -$componentbg: #f5f5f5; -$componentfg1: #262626; +$componentbg: #f5f5f5 !default; +$componentfg1: #262626 !default; $componentfg2: rgba(0,0,0,.5); $componentfg3: rgba(0,0,0,.2); //#ccc $componentfg4: #737373; @@ -145,4 +145,4 @@ $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; \ No newline at end of file +$line-height-base: $base-line-height; diff --git a/src/styles/global/theme/_dark.scss b/src/styles/global/theme/_dark.scss new file mode 100644 index 00000000..bdf2e539 --- /dev/null +++ b/src/styles/global/theme/_dark.scss @@ -0,0 +1,102 @@ +/*! + * 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 . + * + */ + +$theme-name: "Dark Theme"; +$theme-version: "0.0.1"; + +@function branding-colors($base-lightness) { + @if($base-lightness == "light") { + @return "lighten"; + } + @if($base-lightness == "dark") { + @return "darken"; + } +} + +$theme-lightness: branding-colors("dark"); +$theme-color: rgb(33, 33, 33); + +$contrasted-dark-default: rgb(38, 38, 38); // compass +$contrasted-light-default: rgba(252, 252, 252, 1); // compass + +// background +$main-background: url("../img/bg-tiles.png"); +$main-background-retina: url("../img/bg-tiles_x2.png"); + +// menu background color +$menu-background-color: $theme-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%); +$input-bg-color: lighten($menu-background-color, 20%); +$chat-msg-self-background: lighten($chat-background, 10%); +$chat-msg-remote-background: lighten($chat-msg-self-background, 10%); +$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; + +$fileinfo-icon-background-color: $chat-msg-self-background; +$fileinfo-icon-background-color-remote: $chat-msg-remote-background; + + +// font +$base-font-size: 13px; // compass +$base-line-height: 19px; // compass + +// 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; +$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%); +$input-border-color: $bar-btn-action-border; +$fileinfo-border-remote: $chat-msg-remote-background; +$fileinfo-border: $chat-msg-self-background; + +// boostrap 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%); + diff --git a/src/styles/main.scss b/src/styles/main.scss index 90b959ad..35215c37 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -22,6 +22,7 @@ // must set custom compass variables before import of compass @import "global/variables"; @import "compass"; +@import "global/branding"; @import "libs/libs"; @import "global/mixins";