OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

create 0% and 50% opaque vars as #rgba trick doesn't work

pull/21833/head
Bruno Windels 2019-09-26 16:14:39 +02:00
parent f9d5d807e3
commit b9d0de1b7d
2 changed files with 40 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
res/themes/light-custom/css/_custom.scss
View File

@ -9,8 +9,8 @@ $roomsublist-chevron-color: var(--accent-color);
$tab-label-active-bg-color: var(--accent-color); $tab-label-active-bg-color: var(--accent-color);
$togglesw-on-color: var(--accent-color); $togglesw-on-color: var(--accent-color);
$username-variant3-color: var(--accent-color); $username-variant3-color: var(--accent-color);
$accent-color-50pct: var(--accent-color)"7F"; // uses #rrggbbaa notation, alpha at .5
// background color // background color
$accent-color-50pct: var(--accent-color-50pct); //still needs alpha at .5
$authpage-body-bg-color: var(--background-color); $authpage-body-bg-color: var(--background-color);
$avatar-bg-color: var(--background-color); $avatar-bg-color: var(--background-color);
$button-secondary-bg-color: var(--background-color); $button-secondary-bg-color: var(--background-color);
@ -22,9 +22,9 @@ $primary-bg-color: var(--background-color);
$roomtile-focused-bg-color: var(--background-color); $roomtile-focused-bg-color: var(--background-color);
$roomtile-selected-bg-color: var(--background-color); $roomtile-selected-bg-color: var(--background-color);
$togglesw-ball-color: var(--background-color); $togglesw-ball-color: var(--background-color);
$droptarget-bg-color: var(--background-color)"7F"; // uses #rrggbbaa notation, alpha at .5
$authpage-modal-bg-color: var(--background-color)"CF"; // uses #rrggbbaa notation, alpha at .59
// base color // base color
$droptarget-bg-color: var(--background-color-50pct); //still needs alpha at .5
$authpage-modal-bg-color: var(--background-color-50pct); //still needs alpha at .59
$interactive-tooltip-bg-color: var(--base-color); $interactive-tooltip-bg-color: var(--base-color);
$tagpanel-bg-color: var(--base-color); $tagpanel-bg-color: var(--base-color);
$tooltip-timeline-bg-color: var(--base-color); $tooltip-timeline-bg-color: var(--base-color);
@ -32,7 +32,7 @@ $tooltip-timeline-bg-color: var(--base-color);
$event-selected-color: var(--panel-color); $event-selected-color: var(--panel-color);
$header-panel-bg-color: var(--panel-color); $header-panel-bg-color: var(--panel-color);
$reaction-row-button-bg-color: var(--panel-color); $reaction-row-button-bg-color: var(--panel-color);
$panel-gradient: var(--panel-color)"00", var(--panel-color)"FF"; $panel-gradient: var(--panel-color-0pct), var(--panel-color);
// these were #f2f5f8 instead of #f3f8fd, but close enough // these were #f2f5f8 instead of #f3f8fd, but close enough
$dark-panel-bg-color: var(--panel-color); $dark-panel-bg-color: var(--panel-color);
$input-lighter-bg-color: var(--panel-color); $input-lighter-bg-color: var(--panel-color);
@ -48,8 +48,8 @@ $panel-divider-color: var(--panel-contrast-color);// originally #dee1f3, not #e3
$message-action-bar-fg-color: var(--body-text-color); $message-action-bar-fg-color: var(--body-text-color);
$primary-fg-color: var(--body-text-color); $primary-fg-color: var(--body-text-color);
$settings-profile-overlay-placeholder-fg-color: var(--body-text-color); $settings-profile-overlay-placeholder-fg-color: var(--body-text-color);
$dialog-backdrop-color: var(--body-text-color)"82"; // uses #rrggbbaa notation, alpha at .38
// body contrast color // body contrast color
$dialog-backdrop-color: var(--body-text-color-50pct); //still needs alpha at .38
$authpage-secondary-color: var(--body-contrast-color); $authpage-secondary-color: var(--body-contrast-color);
$memberstatus-placeholder-color: var(--body-contrast-color); $memberstatus-placeholder-color: var(--body-contrast-color);
$notice-secondary-color: var(--body-contrast-color); $notice-secondary-color: var(--body-contrast-color);
@ -68,17 +68,5 @@ $mention-user-pill-bg-color: var(--warning-color);
$notice-primary-color: var(--warning-color); $notice-primary-color: var(--warning-color);
$pinned-unread-color: var(--warning-color); $pinned-unread-color: var(--warning-color);
$warning-color: var(--warning-color); $warning-color: var(--warning-color);
$button-danger-disabled-bg-color: var(--warning-color)"7C";
// defaults $button-danger-disabled-bg-color: var(--warning-color-50pct); // still needs alpha at 0.5
body {
--accent-color: #03b381;
--background-color: #ffffff;
--base-color: #27303a;
--panel-color: #f3f8fd;
--panel-contrast-color: #e3e8f0;
--body-text-color: #2e2f32;
--body-contrast-color: #61708b;
--primary-color: #368bd6;
--warning-color: #ff4b55;
}

34
res/themes/light-custom/css/light-custom.scss
View File

@ -3,3 +3,37 @@
@import "../../light/css/_light.scss"; @import "../../light/css/_light.scss";
@import "_custom.scss"; @import "_custom.scss";
@import "../../../../res/css/_components.scss"; @import "../../../../res/css/_components.scss";
// defaults
body {
// fully opaque
--accent-color: #03b381;
--background-color: #ffffff;
--base-color: #27303a;
--panel-color: #f3f8fd;
--panel-contrast-color: #e3e8f0;
--body-text-color: #2e2f32;
--body-contrast-color: #61708b;
--primary-color: #368bd6;
--warning-color: #ff4b55;
// 0% opaque
--accent-color-0pct: #03b38100;
--background-color-0pct: #ffffff00;
--base-color-0pct: #27303a00;
--panel-color-0pct: #f3f8fd00;
--panel-contrast-color-0pct: #e3e8f000;
--body-text-color-0pct: #2e2f3200;
--body-contrast-color-0pct: #61708b00;
--primary-color-0pct: #368bd600;
--warning-color-0pct: #ff4b5500;
// 50% opaque
--accent-color-50pct: #03b3817f;
--background-color-50pct: #ffffff7f;
--base-color-50pct: #27303a7f;
--panel-color-50pct: #f3f8fd7f;
--panel-contrast-color-50pct: #e3e8f07f;
--body-text-color-50pct: #2e2f327f;
--body-contrast-color-50pct: #61708b7f;
--primary-color-50pct: #368bd67f;
--warning-color-50pct: #ff4b557f;
}