PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

initial wip theme

Browse source
This commit is contained in:
Matthew Hodgson 2017-10-20 18:43:06 +01:00
parent 6fa2d35630
commit cd31e6532b
5 changed files with 170 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/skins/vector/css/_common.scss
View file

@ -23,12 +23,7 @@ html {
}
body {
/* Open Sans lacks combining diacritics, so these will fall through
to the next font. Helevetica's diacritics however do not combine
nicely with Open Sans (on OSX, at least) and result in a huge
horizontal mess. Arial empirically gets it right, hence prioritising
Arial here. */
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
font-family: $font-family;
font-size: 15px;
background-color: $primary-bg-color;
color: $primary-fg-color;
@ -73,7 +68,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
/* Required by Firefox */
textarea {
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
font-family: $font-family;
}
/* Prevent ugly dotted highlight around selected elements in Firefox */
@ -211,7 +206,7 @@ textarea {
border: solid 1px $accent-color;
font-weight: 600;
font-size: 14px;
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
font-family: $font-family;
margin-left: 0px;
margin-right: 8px;
padding-left: 1.5em;
@ -304,7 +299,8 @@ textarea {
}
.changelog_text {
font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
// why on earth is this needed? and with the wrong namespacing? >:(
font-family: $font-family;
}
.mx_Beta {

6
src/skins/vector/css/themes/_base.scss
View file

@ -1,3 +1,9 @@
/* Open Sans lacks combining diacritics, so these will fall through
to the next font. Helevetica's diacritics however do not combine
nicely with Open Sans (on OSX, at least) and result in a huge
horizontal mess. Arial empirically gets it right, hence prioritising
Arial here. */
$font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
// typical text (dark-on-white in light skin)
$primary-fg-color: #454545;

155
src/skins/vector/css/themes/_status.scss Normal file
View file

@ -0,0 +1,155 @@
@font-face {
font-family:PostGrotesk-Medium;
src:url(../fonts/PostGrotesk-Medium.eot);
src:url(../fonts/PostGrotesk-Medium.eot?#iefix) format("embedded-opentype"),url(../fonts/PostGrotesk-Medium.woff) format("woff"),url(../fonts/PostGrotesk-Medium.svg#PostGrotesk-Medium) format("svg");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family:PostGrotesk-Book;
src:url(../fonts/PostGrotesk-Book.eot);
src:url(../fonts/PostGrotesk-Book.eot?#iefix) format("embedded-opentype"),url(../fonts/PostGrotesk-Book.woff) format("woff"),url(../fonts/PostGrotesk-Book.svg#PostGrotesk-Book) format("svg");
font-weight: 400;
font-style: normal;
}
// We deliberately prioritise Arial over Helvetica here due to diacritic problems (see _base.scss)
// N.B. that the status.im website uses:
// font-family:PostGrotesk-Book,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
// ...but can't be bothered to work out how the apple fonts & segoe interact, so keepingn it simple for now.
$font-family: PostGrotesk-Book, Arial, Helvetica, Sans-Serif;
// typical text (dark-on-white in light skin)
$primary-fg-color: #70808D;
$primary-bg-color: #EEF2F5;
// ***** Status theme specifics ******
$header-color: #49555F;
$header-font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif;
h1,h2,h3,h4,h5 {
color: $header-color;
font-family: $header-font-family;
font-weight: 400 ! important;
}
// used for dialog box text
$light-fg-color: #747474;
// used for focusing form controls
$focus-bg-color: #dddddd;
// button UI (white-on-green in light skin)
$accent-fg-color: #ffffff;
$accent-color: #76CFA6;
$selection-fg-color: $primary-bg-color;
$focus-brightness: 125%;
// red warning colour
$warning-color: #ff0064;
$mention-user-pill-bg-color: #ff0064;
$other-user-pill-bg-color: rgba(0, 0, 0, 0.1);
$group-alert-color: #774f7e;
$preview-bar-bg-color: #f7f7f7;
// left-panel style muted accent color
$secondary-accent-color: #eaf5f0;
// used by RoomDirectory permissions
$plinth-bg-color: $secondary-accent-color;
// used by RoomDropTarget
$droptarget-bg-color: rgba(255,255,255,0.5);
// used by AddressSelector
$selected-color: #eaf5f0;
// selected for hoverover & selected event tiles
$event-selected-color: #f7f7f7;
// used for the hairline dividers in RoomView
$primary-hairline-color: #e5e5e5;
// used for the border of input text fields
$input-border-color: #f0f0f0;
// apart from login forms, which have stronger border
$strong-input-border-color: #c7c7c7;
// used for UserSettings EditableText
$input-underline-color: rgba(151, 151, 151, 0.5);
$input-fg-color: rgba(74, 74, 74, 0.9);
// context menus
$menu-border-color: rgba(187, 187, 187, 0.5);
$menu-bg-color: #f6f6f6;
$avatar-initial-color: #ffffff;
$h3-color: #3d3b39;
$dialog-background-bg-color: #e9e9e9;
$lightbox-background-bg-color: #000;
$greyed-fg-color: #888;
$neutral-badge-color: #dbdbdb;
$preview-widget-bar-color: #ddd;
$preview-widget-fg-color: $greyed-fg-color;
$blockquote-bar-color: #ddd;
$blockquote-fg-color: #777;
$settings-grey-fg-color: #a2a2a2;
$voip-decline-color: #f48080;
$voip-accept-color: #80f480;
$rte-bg-color: #e9e9e9;
$rte-code-bg-color: rgba(0, 0, 0, 0.04);
$rte-room-pill-color: #aaa;
// ********************
$roomtile-name-color: rgba(69, 69, 69, 0.8);
$roomtile-selected-bg-color: rgba(255, 255, 255, 0.8);
$roomtile-focused-bg-color: rgba(255, 255, 255, 0.9);
$roomsublist-label-fg-color: $h3-color;
$roomsublist-label-bg-color: #d3efe1;
// ********************
// event tile lifecycle
$event-encrypting-color: #abddbc;
$event-sending-color: #ddd;
$event-notsent-color: #f44;
// event redaction
$event-redacted-img: url('../../img/redacted.jpg');
// event timestamp
$event-timestamp-color: #acacac;
$edit-button-url: "../../img/icon_context_message.svg";
$copy-button-url: "../../img/icon_copy_message.svg";
// e2e
$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
$e2e-unverified-color: #e8bf37;
$e2e-warning-color: #ba6363;
/*** ImageView ***/
$lightbox-bg-color: #454545;
$lightbox-fg-color: #ffffff;
$lightbox-border-color: #ffffff;
// unused?
$progressbar-color: #000;

3
src/skins/vector/css/themes/status.scss Normal file
View file

@ -0,0 +1,3 @@
@import "_base.scss";
@import "_status.scss";
@import "../_components.scss";

1
webpack.config.js
View file

@ -20,6 +20,7 @@ module.exports = {
// CSS themes
"theme-light": "./src/skins/vector/css/themes/light.scss",
"theme-dark": "./src/skins/vector/css/themes/dark.scss",
"theme-status": "./src/skins/vector/css/themes/status.scss",
},
module: {
preLoaders: [