diff --git a/README.md b/README.md
index a4343ec8..2f426cfe 100644
--- a/README.md
+++ b/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.
diff --git a/src/styles/components/_bar.scss b/src/styles/components/_bar.scss
index 694735e2..fa36ea13 100644
--- a/src/styles/components/_bar.scss
+++ b/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;
-}
\ No newline at end of file
+}
diff --git a/src/styles/components/_buddylist.scss b/src/styles/components/_buddylist.scss
index 8eeaff88..d2542cdd 100644
--- a/src/styles/components/_buddylist.scss
+++ b/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;
-}
\ No newline at end of file
+}
diff --git a/src/styles/components/_chat.scss b/src/styles/components/_chat.scss
index a76ab562..96de2d24 100644
--- a/src/styles/components/_chat.scss
+++ b/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;
diff --git a/src/styles/components/_fileinfo.scss b/src/styles/components/_fileinfo.scss
index 7906254f..74e3c87c 100644
--- a/src/styles/components/_fileinfo.scss
+++ b/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;
diff --git a/src/styles/components/_settings.scss b/src/styles/components/_settings.scss
index 171fed4f..3c4a6fa6 100644
--- a/src/styles/components/_settings.scss
+++ b/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;
diff --git a/src/styles/global/_base.scss b/src/styles/global/_base.scss
index 63825c38..86a6a2af 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;
@@ -80,13 +80,13 @@ a {
top: 0;
z-index: 0;
@include hidpi {
- background-image: url("../img/bg-tiles_x2.png");
+ background-image: $main-background-retina;
background-size: 198px 200px;
}
}
#loader {
- background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiCiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiCiAgIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIgogICBpZD0ic3ZnMiIKICAgdmVyc2lvbj0iMS4xIgogICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjQ4LjMuMSByOTg4NiIKICAgd2lkdGg9IjEzNy4wMDA0OSIKICAgaGVpZ2h0PSIxMjYuNSIKICAgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIKICAgc29kaXBvZGk6ZG9jbmFtZT0ic3ByZWVkV2F2ZXMuc3ZnIgogICBpbmtzY2FwZTpleHBvcnQtZmlsZW5hbWU9Ii9ob21lL2RvbWFpbi9sb25nc2xlZXAvRGVza3RvcC9zcHJlZWRpby9zcHJlZWRfd2F2ZXNfYmlnLnBuZyIKICAgaW5rc2NhcGU6ZXhwb3J0LXhkcGk9IjM5NC4xNiIKICAgaW5rc2NhcGU6ZXhwb3J0LXlkcGk9IjM5NC4xNiI+PG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhOCI+PHJkZjpSREY+PGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPjxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PjxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz48ZGM6dGl0bGUgLz48L2NjOldvcms+PC9yZGY6UkRGPjwvbWV0YWRhdGE+PGRlZnMKICAgICBpZD0iZGVmczYiPjxjbGlwUGF0aAogICBjbGlwUGF0aFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIKICAgaWQ9ImNsaXBQYXRoMTgiPjxwYXRoCiAgICAgZD0ibSAwLDAgNTI0NCwwIDAsMTg3MC44NyAtNTI0NCwwIEwgMCwwIHoiCiAgICAgaWQ9InBhdGgyMCIKICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiAvPjwvY2xpcFBhdGg+CjwvZGVmcz48c29kaXBvZGk6bmFtZWR2aWV3CiAgICAgcGFnZWNvbG9yPSIjZmZmZmZmIgogICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IgogICAgIGJvcmRlcm9wYWNpdHk9IjEiCiAgICAgb2JqZWN0dG9sZXJhbmNlPSIxMCIKICAgICBncmlkdG9sZXJhbmNlPSIxMCIKICAgICBndWlkZXRvbGVyYW5jZT0iMTAiCiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAiCiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIKICAgICBpbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjEyNjUiCiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iNzUyIgogICAgIGlkPSJuYW1lZHZpZXc0IgogICAgIHNob3dncmlkPSJmYWxzZSIKICAgICBzaG93Z3VpZGVzPSJ0cnVlIgogICAgIGlua3NjYXBlOmd1aWRlLWJib3g9InRydWUiCiAgICAgZml0LW1hcmdpbi10b3A9IjAiCiAgICAgZml0LW1hcmdpbi1sZWZ0PSIwIgogICAgIGZpdC1tYXJnaW4tcmlnaHQ9IjAiCiAgICAgZml0LW1hcmdpbi1ib3R0b209IjAiCiAgICAgYm9yZGVybGF5ZXI9ImZhbHNlIgogICAgIHNob3dib3JkZXI9InRydWUiCiAgICAgaW5rc2NhcGU6c2hvd3BhZ2VzaGFkb3c9InRydWUiCiAgICAgaW5rc2NhcGU6em9vbT0iMiIKICAgICBpbmtzY2FwZTpjeD0iMTI2Ljc4NDk3IgogICAgIGlua3NjYXBlOmN5PSI4LjQyNzQzMDQiCiAgICAgaW5rc2NhcGU6d2luZG93LXg9Ijg5NyIKICAgICBpbmtzY2FwZTp3aW5kb3cteT0iMzY3IgogICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjAiCiAgICAgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0ibGF5ZXIyIgogICAgIGlua3NjYXBlOnNuYXAtZnJvbS1ndWlkZT0idHJ1ZSI+PHNvZGlwb2RpOmd1aWRlCiAgICAgICBwb3NpdGlvbj0iMC4wMDAzMjM1OTEzNiwtMTA4LjUwMzgyIgogICAgICAgb3JpZW50YXRpb249IjAsODU1LjUxMDAxIgogICAgICAgaWQ9Imd1aWRlMzgwMSIgLz48c29kaXBvZGk6Z3VpZGUKICAgICAgIHBvc2l0aW9uPSI4NTUuNTEwMzQsLTEwOC41MDM4MiIKICAgICAgIG9yaWVudGF0aW9uPSItMjMzLjg2MjUsMCIKICAgICAgIGlkPSJndWlkZTM4MDMiIC8+PHNvZGlwb2RpOmd1aWRlCiAgICAgICBwb3NpdGlvbj0iLTYuNSwxMjYuNSIKICAgICAgIG9yaWVudGF0aW9uPSIwLC04NTUuNTEwMDEiCiAgICAgICBpZD0iZ3VpZGUzODA1IiAvPjxzb2RpcG9kaTpndWlkZQogICAgICAgcG9zaXRpb249IjAuMDAwMzIzNTkxMzYsMTI1LjM1ODY3IgogICAgICAgb3JpZW50YXRpb249IjIzMy44NjI1LDAiCiAgICAgICBpZD0iZ3VpZGUzODA3IiAvPjxzb2RpcG9kaTpndWlkZQogICAgICAgb3JpZW50YXRpb249IjAsMSIKICAgICAgIHBvc2l0aW9uPSItOS41LC0zLjA1MTc1NzhlLTA2IgogICAgICAgaWQ9Imd1aWRlMzgxNSIgLz48c29kaXBvZGk6Z3VpZGUKICAgICAgIG9yaWVudGF0aW9uPSIxLDAiCiAgICAgICBwb3NpdGlvbj0iMTQ2LjUwMDQ5LDEyNS4zNTg2NyIKICAgICAgIGlkPSJndWlkZTQ1NjEiIC8+PC9zb2RpcG9kaTpuYW1lZHZpZXc+PGcKICAgICBpZD0iZzEwIgogICAgIGlua3NjYXBlOmdyb3VwbW9kZT0ibGF5ZXIiCiAgICAgaW5rc2NhcGU6bGFiZWw9IndhdmVzIgogICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMjUsMCwwLC0xLjI1LDMuMjM1OTEzNmUtNCwyMzUuMDAzODMpIgogICAgIHN0eWxlPSJkaXNwbGF5OmlubGluZSI+PGcKICAgdHJhbnNmb3JtPSJtYXRyaXgoMC4xLDAsMCwwLjEsLTguNDAwMzksMzAuNjY3MDAzKSIKICAgaWQ9ImcxNiIKICAgY2xpcC1wYXRoPSJ1cmwoI2NsaXBQYXRoMTgpIj48cGF0aAogICAgIGQ9Im0gNjY3LjQzNCwxNDI3LjIzIGMgNS42MjUsNDAuMzIgNTAsMTA1IDEzMS4yNSwxMDUgODEuMjUsMCAyNjMuNzUsMCAyOTIuNDk2LDAgMjguNzUsMCA2Mi41LC02LjI1IDgzLjc1LDQwIC0xLjI1LC0zMCAtOC43NSwtMTMwIC0xMS4yNSwtMTQ2LjI1IC0yLjUsLTE2LjI1IC0yMi41LC0xMzcuNSAtMTM2LjI0NiwtMTM4Ljc1IC0xMTMuNzUsMCAtMjk3LjUsMCAtMjk3LjUsMCAwLDAgLTU4Ljc1LDYuODggLTg4LjQzOCwtNDYuMjUgLTAuMTkxLC0wLjM5IDIwLjkzOCwxNTIuNSAyNS45MzgsMTg2LjI1IgogICAgIHN0eWxlPSJmaWxsOiMwMDk1MzQ7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgaWQ9InBhdGgyMiIKICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiAvPjxwYXRoCiAgICAgZD0ibSAxMzUuNzg1Miw5MzkuMzk4IGMgMTEuMjMwNCw4MS40OTMgOTkuODIzOCwyMTIuMjcgMjYyLjAzNDgsMjEyLjI3IDE2Mi4yMTUsMCA1MjYuNTcxLDAgNTgzLjk2OSwwIDU3LjM5OSwwIDEyNC43ODEsLTEyLjYzNyAxNjcuMjAxLDgwLjg2MiAtMi40OSwtNjAuNjQ3IC0xNy40NywtMjYyLjgxMSAtMjIuNDYsLTI5NS42NTkgLTQuOTksLTMyLjg1MSAtNDQuOTIsLTI3Ny45NzMgLTI3Mi4wMTQsLTI4MC41IC0yMjcuMDk4LDAgLTU5My45NSwwIC01OTMuOTUsMCAwLDAgLTExOC45ODc5LDEzLjA5OCAtMTc2LjU2MjEsLTkzLjUgLTAuMzgyOCwtMC44MDEgNDEuODAwOCwzMDguMzAxIDUxLjc4MTMsMzc2LjUyNyIKICAgICBzdHlsZT0iZmlsbDojODRiODE5O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgIGlkPSJwYXRoMjQiCiAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgLz48L2c+PHRleHQKICAgdHJhbnNmb3JtPSJzY2FsZSgxLC0xKSIKICAgc29kaXBvZGk6bGluZXNwYWNpbmc9IjEyNSUiCiAgIGlkPSJ0ZXh0MzAxMyIKICAgeT0iLTg3LjE5OTk5NyIKICAgeD0iNTgwIgogICBzdHlsZT0iZm9udC1zaXplOjkuNjAwMDAwMzhweDtmb250LXN0eWxlOm5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7bGluZS1oZWlnaHQ6MTI1JTtsZXR0ZXItc3BhY2luZzowcHg7d29yZC1zcGFjaW5nOjBweDtmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7Zm9udC1mYW1pbHk6Qml0c3RyZWFtIFZlcmEgU2FucyIKICAgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHRzcGFuCiAgICAgeT0iLTg3LjE5OTk5NyIKICAgICB4PSI1ODAiCiAgICAgaWQ9InRzcGFuMzAxNSIKICAgICBzb2RpcG9kaTpyb2xlPSJsaW5lIiAvPjwvdGV4dD4KCjxnCiAgIGlua3NjYXBlOmdyb3VwbW9kZT0ibGF5ZXIiCiAgIGlkPSJsYXllcjIiCiAgIGlua3NjYXBlOmxhYmVsPSJtYXNrIgogICBzdHlsZT0iZGlzcGxheTppbmxpbmUiIC8+PC9nPjwvc3ZnPg==") no-repeat center;
+ background: $load-logo no-repeat center;
background-size: contain;
bottom: 15%;
left: 15%;
@@ -133,3 +133,12 @@ a {
text-shadow: 0 0 5px black;
max-width:500px;
}
+
+.help-block {
+ color: $form-help-text;
+}
+
+.dialog-header-notify,
+.dialog-header-confirm {
+ background-color: $dialog-header-neutral;
+}
diff --git a/src/styles/global/_branding.scss b/src/styles/global/_branding.scss
new file mode 100644
index 00000000..44ca05b5
--- /dev/null
+++ b/src/styles/global/_branding.scss
@@ -0,0 +1,25 @@
+/*
+ * 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 .
+ *
+ */
+
+// Quickly change out logo
+// --------------------------------------------------
+$logo: url("../img/logo-small.png");
+$load-logo: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiCiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiCiAgIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIgogICBpZD0ic3ZnMiIKICAgdmVyc2lvbj0iMS4xIgogICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjQ4LjMuMSByOTg4NiIKICAgd2lkdGg9IjEzNy4wMDA0OSIKICAgaGVpZ2h0PSIxMjYuNSIKICAgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIKICAgc29kaXBvZGk6ZG9jbmFtZT0ic3ByZWVkV2F2ZXMuc3ZnIgogICBpbmtzY2FwZTpleHBvcnQtZmlsZW5hbWU9Ii9ob21lL2RvbWFpbi9sb25nc2xlZXAvRGVza3RvcC9zcHJlZWRpby9zcHJlZWRfd2F2ZXNfYmlnLnBuZyIKICAgaW5rc2NhcGU6ZXhwb3J0LXhkcGk9IjM5NC4xNiIKICAgaW5rc2NhcGU6ZXhwb3J0LXlkcGk9IjM5NC4xNiI+PG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhOCI+PHJkZjpSREY+PGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPjxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PjxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz48ZGM6dGl0bGUgLz48L2NjOldvcms+PC9yZGY6UkRGPjwvbWV0YWRhdGE+PGRlZnMKICAgICBpZD0iZGVmczYiPjxjbGlwUGF0aAogICBjbGlwUGF0aFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIKICAgaWQ9ImNsaXBQYXRoMTgiPjxwYXRoCiAgICAgZD0ibSAwLDAgNTI0NCwwIDAsMTg3MC44NyAtNTI0NCwwIEwgMCwwIHoiCiAgICAgaWQ9InBhdGgyMCIKICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiAvPjwvY2xpcFBhdGg+CjwvZGVmcz48c29kaXBvZGk6bmFtZWR2aWV3CiAgICAgcGFnZWNvbG9yPSIjZmZmZmZmIgogICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IgogICAgIGJvcmRlcm9wYWNpdHk9IjEiCiAgICAgb2JqZWN0dG9sZXJhbmNlPSIxMCIKICAgICBncmlkdG9sZXJhbmNlPSIxMCIKICAgICBndWlkZXRvbGVyYW5jZT0iMTAiCiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAiCiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIKICAgICBpbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjEyNjUiCiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iNzUyIgogICAgIGlkPSJuYW1lZHZpZXc0IgogICAgIHNob3dncmlkPSJmYWxzZSIKICAgICBzaG93Z3VpZGVzPSJ0cnVlIgogICAgIGlua3NjYXBlOmd1aWRlLWJib3g9InRydWUiCiAgICAgZml0LW1hcmdpbi10b3A9IjAiCiAgICAgZml0LW1hcmdpbi1sZWZ0PSIwIgogICAgIGZpdC1tYXJnaW4tcmlnaHQ9IjAiCiAgICAgZml0LW1hcmdpbi1ib3R0b209IjAiCiAgICAgYm9yZGVybGF5ZXI9ImZhbHNlIgogICAgIHNob3dib3JkZXI9InRydWUiCiAgICAgaW5rc2NhcGU6c2hvd3BhZ2VzaGFkb3c9InRydWUiCiAgICAgaW5rc2NhcGU6em9vbT0iMiIKICAgICBpbmtzY2FwZTpjeD0iMTI2Ljc4NDk3IgogICAgIGlua3NjYXBlOmN5PSI4LjQyNzQzMDQiCiAgICAgaW5rc2NhcGU6d2luZG93LXg9Ijg5NyIKICAgICBpbmtzY2FwZTp3aW5kb3cteT0iMzY3IgogICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjAiCiAgICAgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0ibGF5ZXIyIgogICAgIGlua3NjYXBlOnNuYXAtZnJvbS1ndWlkZT0idHJ1ZSI+PHNvZGlwb2RpOmd1aWRlCiAgICAgICBwb3NpdGlvbj0iMC4wMDAzMjM1OTEzNiwtMTA4LjUwMzgyIgogICAgICAgb3JpZW50YXRpb249IjAsODU1LjUxMDAxIgogICAgICAgaWQ9Imd1aWRlMzgwMSIgLz48c29kaXBvZGk6Z3VpZGUKICAgICAgIHBvc2l0aW9uPSI4NTUuNTEwMzQsLTEwOC41MDM4MiIKICAgICAgIG9yaWVudGF0aW9uPSItMjMzLjg2MjUsMCIKICAgICAgIGlkPSJndWlkZTM4MDMiIC8+PHNvZGlwb2RpOmd1aWRlCiAgICAgICBwb3NpdGlvbj0iLTYuNSwxMjYuNSIKICAgICAgIG9yaWVudGF0aW9uPSIwLC04NTUuNTEwMDEiCiAgICAgICBpZD0iZ3VpZGUzODA1IiAvPjxzb2RpcG9kaTpndWlkZQogICAgICAgcG9zaXRpb249IjAuMDAwMzIzNTkxMzYsMTI1LjM1ODY3IgogICAgICAgb3JpZW50YXRpb249IjIzMy44NjI1LDAiCiAgICAgICBpZD0iZ3VpZGUzODA3IiAvPjxzb2RpcG9kaTpndWlkZQogICAgICAgb3JpZW50YXRpb249IjAsMSIKICAgICAgIHBvc2l0aW9uPSItOS41LC0zLjA1MTc1NzhlLTA2IgogICAgICAgaWQ9Imd1aWRlMzgxNSIgLz48c29kaXBvZGk6Z3VpZGUKICAgICAgIG9yaWVudGF0aW9uPSIxLDAiCiAgICAgICBwb3NpdGlvbj0iMTQ2LjUwMDQ5LDEyNS4zNTg2NyIKICAgICAgIGlkPSJndWlkZTQ1NjEiIC8+PC9zb2RpcG9kaTpuYW1lZHZpZXc+PGcKICAgICBpZD0iZzEwIgogICAgIGlua3NjYXBlOmdyb3VwbW9kZT0ibGF5ZXIiCiAgICAgaW5rc2NhcGU6bGFiZWw9IndhdmVzIgogICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMjUsMCwwLC0xLjI1LDMuMjM1OTEzNmUtNCwyMzUuMDAzODMpIgogICAgIHN0eWxlPSJkaXNwbGF5OmlubGluZSI+PGcKICAgdHJhbnNmb3JtPSJtYXRyaXgoMC4xLDAsMCwwLjEsLTguNDAwMzksMzAuNjY3MDAzKSIKICAgaWQ9ImcxNiIKICAgY2xpcC1wYXRoPSJ1cmwoI2NsaXBQYXRoMTgpIj48cGF0aAogICAgIGQ9Im0gNjY3LjQzNCwxNDI3LjIzIGMgNS42MjUsNDAuMzIgNTAsMTA1IDEzMS4yNSwxMDUgODEuMjUsMCAyNjMuNzUsMCAyOTIuNDk2LDAgMjguNzUsMCA2Mi41LC02LjI1IDgzLjc1LDQwIC0xLjI1LC0zMCAtOC43NSwtMTMwIC0xMS4yNSwtMTQ2LjI1IC0yLjUsLTE2LjI1IC0yMi41LC0xMzcuNSAtMTM2LjI0NiwtMTM4Ljc1IC0xMTMuNzUsMCAtMjk3LjUsMCAtMjk3LjUsMCAwLDAgLTU4Ljc1LDYuODggLTg4LjQzOCwtNDYuMjUgLTAuMTkxLC0wLjM5IDIwLjkzOCwxNTIuNSAyNS45MzgsMTg2LjI1IgogICAgIHN0eWxlPSJmaWxsOiMwMDk1MzQ7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgaWQ9InBhdGgyMiIKICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiAvPjxwYXRoCiAgICAgZD0ibSAxMzUuNzg1Miw5MzkuMzk4IGMgMTEuMjMwNCw4MS40OTMgOTkuODIzOCwyMTIuMjcgMjYyLjAzNDgsMjEyLjI3IDE2Mi4yMTUsMCA1MjYuNTcxLDAgNTgzLjk2OSwwIDU3LjM5OSwwIDEyNC43ODEsLTEyLjYzNyAxNjcuMjAxLDgwLjg2MiAtMi40OSwtNjAuNjQ3IC0xNy40NywtMjYyLjgxMSAtMjIuNDYsLTI5NS42NTkgLTQuOTksLTMyLjg1MSAtNDQuOTIsLTI3Ny45NzMgLTI3Mi4wMTQsLTI4MC41IC0yMjcuMDk4LDAgLTU5My45NSwwIC01OTMuOTUsMCAwLDAgLTExOC45ODc5LDEzLjA5OCAtMTc2LjU2MjEsLTkzLjUgLTAuMzgyOCwtMC44MDEgNDEuODAwOCwzMDguMzAxIDUxLjc4MTMsMzc2LjUyNyIKICAgICBzdHlsZT0iZmlsbDojODRiODE5O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgIGlkPSJwYXRoMjQiCiAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgLz48L2c+PHRleHQKICAgdHJhbnNmb3JtPSJzY2FsZSgxLC0xKSIKICAgc29kaXBvZGk6bGluZXNwYWNpbmc9IjEyNSUiCiAgIGlkPSJ0ZXh0MzAxMyIKICAgeT0iLTg3LjE5OTk5NyIKICAgeD0iNTgwIgogICBzdHlsZT0iZm9udC1zaXplOjkuNjAwMDAwMzhweDtmb250LXN0eWxlOm5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7bGluZS1oZWlnaHQ6MTI1JTtsZXR0ZXItc3BhY2luZzowcHg7d29yZC1zcGFjaW5nOjBweDtmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7Zm9udC1mYW1pbHk6Qml0c3RyZWFtIFZlcmEgU2FucyIKICAgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHRzcGFuCiAgICAgeT0iLTg3LjE5OTk5NyIKICAgICB4PSI1ODAiCiAgICAgaWQ9InRzcGFuMzAxNSIKICAgICBzb2RpcG9kaTpyb2xlPSJsaW5lIiAvPjwvdGV4dD4KCjxnCiAgIGlua3NjYXBlOmdyb3VwbW9kZT0ibGF5ZXIiCiAgIGlkPSJsYXllcjIiCiAgIGlua3NjYXBlOmxhYmVsPSJtYXNrIgogICBzdHlsZT0iZGlzcGxheTppbmxpbmUiIC8+PC9nPjwvc3ZnPg==");
diff --git a/src/styles/global/_overlaybar.scss b/src/styles/global/_overlaybar.scss
index f4285c35..925a8829 100644
--- a/src/styles/global/_overlaybar.scss
+++ b/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;
diff --git a/src/styles/global/_variables.scss b/src/styles/global/_variables.scss
index 7393ca79..4a207351 100644
--- a/src/styles/global/_variables.scss
+++ b/src/styles/global/_variables.scss
@@ -19,130 +19,158 @@
*
*/
+@import "compass/utilities/color/contrast";
+@import "branding";
+@import "skins/light";
+
// general
-$background: #e5e5e5;
-$componentbg: #f5f5f5;
-$componentfg1: #262626;
-$componentfg2: rgba(0,0,0,.5);
-$componentfg3: rgba(0,0,0,.2); //#ccc
-$componentfg4: #737373;
-$sidepanebg: white;
-$bordercolor: #ccc;
-$actioncolor1: rgb(132,184,25);
-$actioncolor2: rgb(0,149,52);
+$background: #e5e5e5 !default;
+$componentbg: #f5f5f5 !default;
+$componentfg1: #262626 !default;
+$componentfg2: rgba(0,0,0,.5) !default;
+$componentfg3: rgba(0,0,0,.2) !default;
+$componentfg4: #737373 !default;
+$sidepanebg: white !default;
+$bordercolor: #ccc !default;
+$actioncolor1: rgb(132,184,25) !default;
+$actioncolor2: rgb(0,149,52) !default;
+
+// branding
+$logo: url("../img/logo-small.png") !default;
+$load-logo: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiCiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiCiAgIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIgogICBpZD0ic3ZnMiIKICAgdmVyc2lvbj0iMS4xIgogICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjQ4LjMuMSByOTg4NiIKICAgd2lkdGg9IjEzNy4wMDA0OSIKICAgaGVpZ2h0PSIxMjYuNSIKICAgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIKICAgc29kaXBvZGk6ZG9jbmFtZT0ic3ByZWVkV2F2ZXMuc3ZnIgogICBpbmtzY2FwZTpleHBvcnQtZmlsZW5hbWU9Ii9ob21lL2RvbWFpbi9sb25nc2xlZXAvRGVza3RvcC9zcHJlZWRpby9zcHJlZWRfd2F2ZXNfYmlnLnBuZyIKICAgaW5rc2NhcGU6ZXhwb3J0LXhkcGk9IjM5NC4xNiIKICAgaW5rc2NhcGU6ZXhwb3J0LXlkcGk9IjM5NC4xNiI+PG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhOCI+PHJkZjpSREY+PGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPjxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PjxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz48ZGM6dGl0bGUgLz48L2NjOldvcms+PC9yZGY6UkRGPjwvbWV0YWRhdGE+PGRlZnMKICAgICBpZD0iZGVmczYiPjxjbGlwUGF0aAogICBjbGlwUGF0aFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIKICAgaWQ9ImNsaXBQYXRoMTgiPjxwYXRoCiAgICAgZD0ibSAwLDAgNTI0NCwwIDAsMTg3MC44NyAtNTI0NCwwIEwgMCwwIHoiCiAgICAgaWQ9InBhdGgyMCIKICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiAvPjwvY2xpcFBhdGg+CjwvZGVmcz48c29kaXBvZGk6bmFtZWR2aWV3CiAgICAgcGFnZWNvbG9yPSIjZmZmZmZmIgogICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IgogICAgIGJvcmRlcm9wYWNpdHk9IjEiCiAgICAgb2JqZWN0dG9sZXJhbmNlPSIxMCIKICAgICBncmlkdG9sZXJhbmNlPSIxMCIKICAgICBndWlkZXRvbGVyYW5jZT0iMTAiCiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAiCiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIKICAgICBpbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjEyNjUiCiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iNzUyIgogICAgIGlkPSJuYW1lZHZpZXc0IgogICAgIHNob3dncmlkPSJmYWxzZSIKICAgICBzaG93Z3VpZGVzPSJ0cnVlIgogICAgIGlua3NjYXBlOmd1aWRlLWJib3g9InRydWUiCiAgICAgZml0LW1hcmdpbi10b3A9IjAiCiAgICAgZml0LW1hcmdpbi1sZWZ0PSIwIgogICAgIGZpdC1tYXJnaW4tcmlnaHQ9IjAiCiAgICAgZml0LW1hcmdpbi1ib3R0b209IjAiCiAgICAgYm9yZGVybGF5ZXI9ImZhbHNlIgogICAgIHNob3dib3JkZXI9InRydWUiCiAgICAgaW5rc2NhcGU6c2hvd3BhZ2VzaGFkb3c9InRydWUiCiAgICAgaW5rc2NhcGU6em9vbT0iMiIKICAgICBpbmtzY2FwZTpjeD0iMTI2Ljc4NDk3IgogICAgIGlua3NjYXBlOmN5PSI4LjQyNzQzMDQiCiAgICAgaW5rc2NhcGU6d2luZG93LXg9Ijg5NyIKICAgICBpbmtzY2FwZTp3aW5kb3cteT0iMzY3IgogICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjAiCiAgICAgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0ibGF5ZXIyIgogICAgIGlua3NjYXBlOnNuYXAtZnJvbS1ndWlkZT0idHJ1ZSI+PHNvZGlwb2RpOmd1aWRlCiAgICAgICBwb3NpdGlvbj0iMC4wMDAzMjM1OTEzNiwtMTA4LjUwMzgyIgogICAgICAgb3JpZW50YXRpb249IjAsODU1LjUxMDAxIgogICAgICAgaWQ9Imd1aWRlMzgwMSIgLz48c29kaXBvZGk6Z3VpZGUKICAgICAgIHBvc2l0aW9uPSI4NTUuNTEwMzQsLTEwOC41MDM4MiIKICAgICAgIG9yaWVudGF0aW9uPSItMjMzLjg2MjUsMCIKICAgICAgIGlkPSJndWlkZTM4MDMiIC8+PHNvZGlwb2RpOmd1aWRlCiAgICAgICBwb3NpdGlvbj0iLTYuNSwxMjYuNSIKICAgICAgIG9yaWVudGF0aW9uPSIwLC04NTUuNTEwMDEiCiAgICAgICBpZD0iZ3VpZGUzODA1IiAvPjxzb2RpcG9kaTpndWlkZQogICAgICAgcG9zaXRpb249IjAuMDAwMzIzNTkxMzYsMTI1LjM1ODY3IgogICAgICAgb3JpZW50YXRpb249IjIzMy44NjI1LDAiCiAgICAgICBpZD0iZ3VpZGUzODA3IiAvPjxzb2RpcG9kaTpndWlkZQogICAgICAgb3JpZW50YXRpb249IjAsMSIKICAgICAgIHBvc2l0aW9uPSItOS41LC0zLjA1MTc1NzhlLTA2IgogICAgICAgaWQ9Imd1aWRlMzgxNSIgLz48c29kaXBvZGk6Z3VpZGUKICAgICAgIG9yaWVudGF0aW9uPSIxLDAiCiAgICAgICBwb3NpdGlvbj0iMTQ2LjUwMDQ5LDEyNS4zNTg2NyIKICAgICAgIGlkPSJndWlkZTQ1NjEiIC8+PC9zb2RpcG9kaTpuYW1lZHZpZXc+PGcKICAgICBpZD0iZzEwIgogICAgIGlua3NjYXBlOmdyb3VwbW9kZT0ibGF5ZXIiCiAgICAgaW5rc2NhcGU6bGFiZWw9IndhdmVzIgogICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMjUsMCwwLC0xLjI1LDMuMjM1OTEzNmUtNCwyMzUuMDAzODMpIgogICAgIHN0eWxlPSJkaXNwbGF5OmlubGluZSI+PGcKICAgdHJhbnNmb3JtPSJtYXRyaXgoMC4xLDAsMCwwLjEsLTguNDAwMzksMzAuNjY3MDAzKSIKICAgaWQ9ImcxNiIKICAgY2xpcC1wYXRoPSJ1cmwoI2NsaXBQYXRoMTgpIj48cGF0aAogICAgIGQ9Im0gNjY3LjQzNCwxNDI3LjIzIGMgNS42MjUsNDAuMzIgNTAsMTA1IDEzMS4yNSwxMDUgODEuMjUsMCAyNjMuNzUsMCAyOTIuNDk2LDAgMjguNzUsMCA2Mi41LC02LjI1IDgzLjc1LDQwIC0xLjI1LC0zMCAtOC43NSwtMTMwIC0xMS4yNSwtMTQ2LjI1IC0yLjUsLTE2LjI1IC0yMi41LC0xMzcuNSAtMTM2LjI0NiwtMTM4Ljc1IC0xMTMuNzUsMCAtMjk3LjUsMCAtMjk3LjUsMCAwLDAgLTU4Ljc1LDYuODggLTg4LjQzOCwtNDYuMjUgLTAuMTkxLC0wLjM5IDIwLjkzOCwxNTIuNSAyNS45MzgsMTg2LjI1IgogICAgIHN0eWxlPSJmaWxsOiMwMDk1MzQ7ZmlsbC1vcGFjaXR5OjE7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOm5vbmUiCiAgICAgaWQ9InBhdGgyMiIKICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiAvPjxwYXRoCiAgICAgZD0ibSAxMzUuNzg1Miw5MzkuMzk4IGMgMTEuMjMwNCw4MS40OTMgOTkuODIzOCwyMTIuMjcgMjYyLjAzNDgsMjEyLjI3IDE2Mi4yMTUsMCA1MjYuNTcxLDAgNTgzLjk2OSwwIDU3LjM5OSwwIDEyNC43ODEsLTEyLjYzNyAxNjcuMjAxLDgwLjg2MiAtMi40OSwtNjAuNjQ3IC0xNy40NywtMjYyLjgxMSAtMjIuNDYsLTI5NS42NTkgLTQuOTksLTMyLjg1MSAtNDQuOTIsLTI3Ny45NzMgLTI3Mi4wMTQsLTI4MC41IC0yMjcuMDk4LDAgLTU5My45NSwwIC01OTMuOTUsMCAwLDAgLTExOC45ODc5LDEzLjA5OCAtMTc2LjU2MjEsLTkzLjUgLTAuMzgyOCwtMC44MDEgNDEuODAwOCwzMDguMzAxIDUxLjc4MTMsMzc2LjUyNyIKICAgICBzdHlsZT0iZmlsbDojODRiODE5O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgIGlkPSJwYXRoMjQiCiAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgLz48L2c+PHRleHQKICAgdHJhbnNmb3JtPSJzY2FsZSgxLC0xKSIKICAgc29kaXBvZGk6bGluZXNwYWNpbmc9IjEyNSUiCiAgIGlkPSJ0ZXh0MzAxMyIKICAgeT0iLTg3LjE5OTk5NyIKICAgeD0iNTgwIgogICBzdHlsZT0iZm9udC1zaXplOjkuNjAwMDAwMzhweDtmb250LXN0eWxlOm5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7bGluZS1oZWlnaHQ6MTI1JTtsZXR0ZXItc3BhY2luZzowcHg7d29yZC1zcGFjaW5nOjBweDtmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7Zm9udC1mYW1pbHk6Qml0c3RyZWFtIFZlcmEgU2FucyIKICAgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHRzcGFuCiAgICAgeT0iLTg3LjE5OTk5NyIKICAgICB4PSI1ODAiCiAgICAgaWQ9InRzcGFuMzAxNSIKICAgICBzb2RpcG9kaTpyb2xlPSJsaW5lIiAvPjwvdGV4dD4KCjxnCiAgIGlua3NjYXBlOmdyb3VwbW9kZT0ibGF5ZXIiCiAgIGlkPSJsYXllcjIiCiAgIGlua3NjYXBlOmxhYmVsPSJtYXNrIgogICBzdHlsZT0iZGlzcGxheTppbmxpbmUiIC8+PC9nPjwvc3ZnPg==") !default;
+
+// background
+$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;
-$base-font-size: 13px; // compass
-$base-line-height: 1.53846156; // compass
+$font-sans-serif: "Helvetica Neue",Helvetica,Arial,sans-serif !default;
+$base-font-size: 13px; // compass vertical_rhythm mixin
+$base-line-height: 1.53846156; // 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;
\ No newline at end of file
+$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;
+$dialog-header-neutral: #eee !default;
diff --git a/src/styles/global/skins/_dark.scss b/src/styles/global/skins/_dark.scss
new file mode 100644
index 00000000..64892917
--- /dev/null
+++ b/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 .
+ *
+ */
+
+$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;
diff --git a/src/styles/global/skins/_light.scss b/src/styles/global/skins/_light.scss
new file mode 100644
index 00000000..d88c7ef0
--- /dev/null
+++ b/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 .
+ *
+ */
+
+$skin-name: "Light Theme";
+$skin-version: "0.0.1";