mirror of
https://github.com/element-hq/element-web
synced 2024-11-22 09:15:41 +03:00
move status theme into a dedicated dir, and make fonts work
This commit is contained in:
Matthew Hodgson
parent
b28192cc0b
commit
01b3d6128c
7 changed files with 453 additions and 5 deletions
|
|
@ -45,7 +45,7 @@ const COPY_LIST = [
|
|||
["res/home/**", "webapp/home"],
|
||||
["res/{media,vector-icons}/**", "webapp"],
|
||||
["res/flags/*", "webapp/flags/"],
|
||||
["src/skins/vector/{fonts,img}/**", "webapp"],
|
||||
["src/skins/vector/{fonts,img,themes}/**", "webapp"],
|
||||
["node_modules/emojione/assets/svg/*", "webapp/emojione/svg/"],
|
||||
["node_modules/emojione/assets/png/*", "webapp/emojione/png/"],
|
||||
["./config.json", "webapp", { directwatch: 1 }],
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
@import "_base.scss";
|
||||
@import "_status.scss";
|
||||
@import "../_components.scss";
|
||||
291
src/skins/vector/themes/status/css/_StatusLogin.scss
Normal file
291
src/skins/vector/themes/status/css/_StatusLogin.scss
Normal file
|
|
@ -0,0 +1,291 @@
|
|||
/*
|
||||
Copyright 2017 New Vector Ltd
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
// overrides for mx_Login* specific to Status.
|
||||
// Ideally this would be all Status prefixes for a Status specific version of the component
|
||||
// but given we're not doing Status as a dedicated 'skin' yet...
|
||||
.mx_Login {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.mx_Login h2 {
|
||||
color: $primary-fg-color;
|
||||
font-weight: 300;
|
||||
margin-top: 32px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.mx_Login_box {
|
||||
width: 300px;
|
||||
min-height: 450px;
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.mx_Login_logo {
|
||||
text-align: center;
|
||||
height: 150px;
|
||||
margin-bottom: 45px;
|
||||
}
|
||||
|
||||
.mx_Login_logo img {
|
||||
max-height: 100%
|
||||
}
|
||||
|
||||
.mx_Login_support {
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
margin-top: 0px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.mx_Login_field {
|
||||
width: 280px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid $strong-input-border-color;
|
||||
font-weight: 300;
|
||||
font-size: 13px;
|
||||
padding: 9px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.mx_Login_field_disabled {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.mx_Login_fieldLabel {
|
||||
margin-top: -10px;
|
||||
margin-left: 8px;
|
||||
margin-bottom: 14px;
|
||||
font-size: 13px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.mx_Login_submit {
|
||||
margin-top: 35px;
|
||||
margin-bottom: 24px;
|
||||
width: 100%;
|
||||
border-radius: 40px;
|
||||
height: 40px;
|
||||
border: 0px;
|
||||
background-color: $accent-color;
|
||||
font-size: 15px;
|
||||
color: $accent-fg-color;
|
||||
}
|
||||
|
||||
.mx_Login_submit:disabled {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.mx_Login_label {
|
||||
font-size: 13px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.mx_Login_checkbox,
|
||||
.mx_Login_radio {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.mx_Login_create {
|
||||
display: block;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
font-size: 13px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.mx_Login_create:link {
|
||||
color: $primary-fg-color;
|
||||
}
|
||||
|
||||
.mx_Login_links {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-top: 15px;
|
||||
width: 100%;
|
||||
font-size: 13px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.mx_Login_links a:link {
|
||||
color: $primary-fg-color;
|
||||
}
|
||||
|
||||
.mx_Login_prompt {
|
||||
padding-top: 15px;
|
||||
padding-bottom: 15px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.mx_Login_forgot {
|
||||
font-size: 13px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.mx_Login_forgot:link {
|
||||
color: $primary-fg-color;
|
||||
}
|
||||
|
||||
.mx_Login_loader {
|
||||
display: inline;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
.mx_Login_loader .mx_Spinner {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.mx_Login_loader .mx_Spinner img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.mx_Login_error {
|
||||
color: $warning-color;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
/*
|
||||
height: 24px;
|
||||
*/
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.mx_Login_type_container {
|
||||
display: flex;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.mx_Login_type_label {
|
||||
flex-grow: 1;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
.mx_Login_type_dropdown {
|
||||
display: inline-block;
|
||||
min-width: 170px;
|
||||
align-self: flex-end;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.mx_Login_field_group {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.mx_Login_field_prefix {
|
||||
height: 34px;
|
||||
padding: 0px 5px;
|
||||
line-height: 33px;
|
||||
|
||||
background-color: #eee;
|
||||
border: 1px solid #c7c7c7;
|
||||
border-right: 0px;
|
||||
border-radius: 3px 0px 0px 3px;
|
||||
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.mx_Login_field_suffix {
|
||||
height: 34px;
|
||||
padding: 0px 5px;
|
||||
line-height: 33px;
|
||||
|
||||
background-color: #eee;
|
||||
border: 1px solid #c7c7c7;
|
||||
border-left: 0px;
|
||||
border-radius: 0px 3px 3px 0px;
|
||||
|
||||
text-align: center;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.mx_Login_username {
|
||||
height: 16px;
|
||||
flex-shrink: 1;
|
||||
min-width: 0px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.mx_Login_phoneNumberField {
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.mx_Login_field_has_prefix {
|
||||
border-top-left-radius: 0px;
|
||||
border-bottom-left-radius: 0px;
|
||||
}
|
||||
|
||||
.mx_Login_field_has_suffix {
|
||||
border-top-right-radius: 0px;
|
||||
border-bottom-right-radius: 0px;
|
||||
}
|
||||
|
||||
.mx_Login_phoneSection {
|
||||
display:flex;
|
||||
}
|
||||
|
||||
.mx_Login_phoneCountry {
|
||||
margin-bottom: 14px;
|
||||
width: 150px;
|
||||
|
||||
/* To override mx_Login_field_prefix */
|
||||
text-align: left;
|
||||
padding: 0px;
|
||||
background-color: $primary-bg-color;
|
||||
}
|
||||
|
||||
.mx_Login_field_prefix .mx_Dropdown_input {
|
||||
/* To use prefix border instead of dropdown border */
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.mx_Login_phoneCountry .mx_Dropdown_option {
|
||||
/*
|
||||
To match height of mx_Login_field
|
||||
33px + 2px border from mx_Dropdown_option = 35px
|
||||
*/
|
||||
height: 33px;
|
||||
line-height: 33px;
|
||||
}
|
||||
|
||||
.mx_Login_phoneCountry .mx_Dropdown_option img {
|
||||
margin: 3px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.mx_Login_language {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
min-width: 60%;
|
||||
}
|
||||
|
||||
.mx_Login_language_div {
|
||||
display: flex;
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
155
src/skins/vector/themes/status/css/_status.scss
Normal file
155
src/skins/vector/themes/status/css/_status.scss
Normal file
|
|
@ -0,0 +1,155 @@
|
|||
@font-face {
|
||||
font-family:PostGrotesk-Medium;
|
||||
src:url('https://status.im/fonts/PostGrotesk-Medium.eot');
|
||||
src:url('https://status.im/fonts/PostGrotesk-Medium.eot?#iefix') format("embedded-opentype"),url('https://status.im/fonts/PostGrotesk-Medium.woff') format("woff"),url('https://status.im/fonts/PostGrotesk-Medium.svg#PostGrotesk-Medium') format("svg");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family:PostGrotesk-Book;
|
||||
src:url('https://status.im/fonts/PostGrotesk-Book.eot');
|
||||
src:url('https://status.im/fonts/PostGrotesk-Book.eot?#iefix') format("embedded-opentype"),url('https://status.im/fonts/PostGrotesk-Book.woff') format("woff"),url('https://status.im/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;
|
||||
4
src/skins/vector/themes/status/css/status.scss
Normal file
4
src/skins/vector/themes/status/css/status.scss
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
@import "../../../css/themes/_base.scss";
|
||||
@import "_status.scss";
|
||||
@import "../../../css/_components.scss";
|
||||
@import "_StatusLogin.scss";
|
||||
1
src/skins/vector/themes/status/fonts/README
Normal file
1
src/skins/vector/themes/status/fonts/README
Normal file
|
|
@ -0,0 +1 @@
|
|||
We link out to status.im for fonts, although ideally we'd put them here.
|
||||
|
|
@ -20,7 +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",
|
||||
"theme-status": "./src/skins/vector/themes/status/css/status.scss",
|
||||
},
|
||||
module: {
|
||||
preLoaders: [
|
||||
|
|
|
|||
Loading…
Reference in a new issue