mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-27 03:36:07 +03:00
Code Issues Projects Releases Packages Wiki Activity

Make custom themes acceptable with recent changes for element theme

Browse source 
Note that custom themes are still based on the old theme, now called legacy-light/dark
This commit is contained in:
Bruno Windels 2020-07-14 18:20:28 +02:00
parent 895dc9c37f
commit 7ca8b27dc1
1 changed files with 16 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
res/themes/light-custom/css/_custom.scss
View file

@ -44,15 +44,18 @@ $roomtile-focused-bg-color: var(--timeline-background-color);
$togglesw-ball-color: var(--timeline-background-color); $togglesw-ball-color: var(--timeline-background-color);
$droptarget-bg-color: var(--timeline-background-color-50pct); //still needs alpha at .5 $droptarget-bg-color: var(--timeline-background-color-50pct); //still needs alpha at .5
$authpage-modal-bg-color: var(--timeline-background-color-50pct); //still needs alpha at .59 $authpage-modal-bg-color: var(--timeline-background-color-50pct); //still needs alpha at .59
$roomheader-bg-color: var(--timeline-background-color);
// //
// --roomlist-highlights-color // --roomlist-highlights-color
$roomtile-selected-bg-color: var(--roomlist-highlights-color); $roomtile-selected-bg-color: var(--roomlist-highlights-color);
$roomtile2-selected-bg-color: var(--roomlist-highlights-color);
// //
// --sidebar-color // --sidebar-color
$interactive-tooltip-bg-color: var(--sidebar-color); $interactive-tooltip-bg-color: var(--sidebar-color);
$tagpanel-bg-color: var(--sidebar-color); $tagpanel-bg-color: var(--sidebar-color);
$tooltip-timeline-bg-color: var(--sidebar-color); $tooltip-timeline-bg-color: var(--sidebar-color);
$dialog-backdrop-color: var(--sidebar-color-50pct); $dialog-backdrop-color: var(--sidebar-color-50pct);
$roomlist2-button-bg-color: var(--sidebar-color-15pct);
// //
// --roomlist-background-color // --roomlist-background-color
$header-panel-bg-color: var(--roomlist-background-color); $header-panel-bg-color: var(--roomlist-background-color);
@ -67,6 +70,7 @@ $secondary-accent-color: var(--roomlist-background-color);
$selected-color: var(--roomlist-background-color); $selected-color: var(--roomlist-background-color);
$widget-menu-bar-bg-color: var(--roomlist-background-color); $widget-menu-bar-bg-color: var(--roomlist-background-color);
$roomtile-badge-fg-color: var(--roomlist-background-color); $roomtile-badge-fg-color: var(--roomlist-background-color);
$roomlist2-bg-color: var(--roomlist-background-color);
// //
// --timeline-text-color // --timeline-text-color
$message-action-bar-fg-color: var(--timeline-text-color); $message-action-bar-fg-color: var(--timeline-text-color);
@ -87,15 +91,19 @@ $roomheader-color: var(--timeline-text-color);
// --roomlist-text-color // --roomlist-text-color
$roomtile-notified-color: var(--roomlist-text-color); $roomtile-notified-color: var(--roomlist-text-color);
$roomtile-selected-color: var(--roomlist-text-color); $roomtile-selected-color: var(--roomlist-text-color);
//
// --roomlist-text-secondary-color // --roomlist-text-secondary-color
$roomsublist-label-fg-color: var(--roomlist-text-secondary-color); $roomsublist-label-fg-color: var(--roomlist-text-secondary-color);
$roomtile-name-color: var(--roomlist-text-secondary-color); $roomtile-name-color: var(--roomlist-text-secondary-color);
$roomtile2-preview-color: var(--roomlist-text-secondary-color);
$roomlist2-header-color: var(--roomlist-text-secondary-color);
$roomtile2-default-badge-bg-color: var(--roomlist-text-secondary-color);
// //
// --roomlist-separator-color // --roomlist-separator-color
$input-darker-bg-color: var(--roomlist-separator-color); $input-darker-bg-color: var(--roomlist-separator-color);
$panel-divider-color: var(--roomlist-separator-color);// originally #dee1f3, but close enough $panel-divider-color: var(--roomlist-separator-color);// originally #dee1f3, but close enough
$primary-hairline-color: var(--roomlist-separator-color);// originally #e5e5e5, but close enough $primary-hairline-color: var(--roomlist-separator-color);// originally #e5e5e5, but close enough
$roomsublist2-divider-color: var(--roomlist-separator-color);
// //
// --timeline-text-secondary-color // --timeline-text-secondary-color
$authpage-secondary-color: var(--timeline-text-secondary-color); $authpage-secondary-color: var(--timeline-text-secondary-color);
@ -126,7 +134,8 @@ $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-50pct); // still needs alpha at 0.5 $button-danger-disabled-bg-color: var(--warning-color-50pct); // still needs alpha at 0.5
//
// --username colors
$username-variant1-color: var(--username-colors_1, $username-variant1-color); $username-variant1-color: var(--username-colors_1, $username-variant1-color);
$username-variant2-color: var(--username-colors_2, $username-variant2-color); $username-variant2-color: var(--username-colors_2, $username-variant2-color);
$username-variant3-color: var(--username-colors_3, $username-variant3-color); $username-variant3-color: var(--username-colors_3, $username-variant3-color);
@ -135,6 +144,10 @@ $username-variant5-color: var(--username-colors_5, $username-variant5-color);
$username-variant6-color: var(--username-colors_6, $username-variant6-color); $username-variant6-color: var(--username-colors_6, $username-variant6-color);
$username-variant7-color: var(--username-colors_7, $username-variant7-color); $username-variant7-color: var(--username-colors_7, $username-variant7-color);
$username-variant8-color: var(--username-colors_8, $username-variant8-color); $username-variant8-color: var(--username-colors_8, $username-variant8-color);
//
// --timeline-highlights-color
$event-selected-color: var(--timeline-highlights-color); $event-selected-color: var(--timeline-highlights-color);
$event-highlight-bg-color: var(--timeline-highlights-color); $event-highlight-bg-color: var(--timeline-highlights-color);
//
// redirect some variables away from their hardcoded values in the light theme
$settings-grey-fg-color: $primary-fg-color;