diff --git a/README.md b/README.md index a4343ec8..d50f4b29 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 "theme/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/global/_variables.scss b/src/styles/global/_variables.scss index eb0a3438..5a75a3b3 100644 --- a/src/styles/global/_variables.scss +++ b/src/styles/global/_variables.scss @@ -19,17 +19,30 @@ * */ +@import "compass/utilities/color/contrast"; +@import "branding"; +@import "skins/dark"; + // general $background: #e5e5e5; $componentbg: #f5f5f5 !default; $componentfg1: #262626 !default; -$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); +$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; +$font-color: lighten(#000, 20%) !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); diff --git a/src/styles/global/theme/_dark.scss b/src/styles/global/skins/_dark.scss similarity index 88% rename from src/styles/global/theme/_dark.scss rename to src/styles/global/skins/_dark.scss index b5febb3a..ec0f661d 100644 --- a/src/styles/global/theme/_dark.scss +++ b/src/styles/global/skins/_dark.scss @@ -19,20 +19,20 @@ * */ -$theme-name: "Dark Theme"; -$theme-version: "0.0.1"; +$skin-name: "Dark Theme"; +$skin-version: "0.0.1"; -$theme-color: rgb(33, 33, 33); +$base-skin-color: #212121; -$contrasted-dark-default: rgb(38, 38, 38); // compass -$contrasted-light-default: rgba(252, 252, 252, 1); // compass +$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: $theme-color; +$menu-background-color: $base-skin-color; $menu-background-color-accent: lighten($menu-background-color, 5%); $componentfg1: contrast-color($menu-background-color); @@ -50,10 +50,9 @@ $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 +$base-font-size: 13px; // compass vertical_rhythm mixin +$base-line-height: 19px; // compass vertical_rhythm mixin // font color $font-color: contrast-color($menu-background-color); @@ -89,4 +88,3 @@ $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/global/skins/_light.scss b/src/styles/global/skins/_light.scss new file mode 100644 index 00000000..55965f1b --- /dev/null +++ b/src/styles/global/skins/_light.scss @@ -0,0 +1,27 @@ +/*! + * 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 . + * + */ + +$skin-name: "Light Theme"; +$skin-version: "0.0.1"; + +// font +$base-font-size: 13px; // compass vertical_rhythm mixin +$base-line-height: 19px; // compass vertical_rhythm mixin