PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4
element-web/res/themes/light-custom/css/_custom.scss

147 lines
6.5 KiB
SCSS
Raw Normal View History

add copyright headers
2019-10-02 09:05:57 +00:00
/*
Copyright 2019 The Matrix.org Foundation C.I.C.
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.
*/
allow changing the font-family
2020-06-23 15:53:16 +00:00
$font-family: var(--font-family, $font-family);
$monospace-font-family: var(--font-family-monospace, $monospace-font-family);
Allow for customization of compound colors Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
2021-09-27 06:35:02 +00:00
// Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A741
Fix issues with custom themes (#6937) Fallback to non-custom colors in custom themes Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
2021-10-13 14:43:01 +00:00
$accent: var(--accent, $accent);
$alert: var(--alert, $alert);
$links: var(--links, $links);
$primary-content: var(--primary-content, $primary-content);
$secondary-content: var(--secondary-content, $secondary-content);
$tertiary-content: var(--tertiary-content, $tertiary-content);
$quaternary-content: var(--quaternary-content, $quaternary-content);
$quinary-content: var(--quinary-content, $quinary-content);
Fix some issues with threads rendering (#8305)
2022-04-13 11:24:44 +00:00
// XXX: workaround for Safari 15.3 linear-gradient bug https://github.com/vector-im/element-web/issues/21670
$system-transparent: var(--system-transparent, rgba($system, 0.0));
Fix issues with custom themes (#6937) Fallback to non-custom colors in custom themes Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
2021-10-13 14:43:01 +00:00
$system: var(--system, $system);
$background: var(--background, $background);
Allow for customization of compound colors Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
2021-09-27 06:35:02 +00:00
$panels: rgba($system, 0.9);
Fix issues with custom themes (#6937) Fallback to non-custom colors in custom themes Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
2021-10-13 14:43:01 +00:00
$panel-base: var(--panel-base, $tertiary-content); // This color is not intended for use in the app
Allow for customization of compound colors Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
2021-09-27 06:35:02 +00:00
$panel-selected: rgba($panel-base, 0.3);
$panel-hover: rgba($panel-base, 0.1);
$panel-actions: rgba($panel-base, 0.2);
$space-nav: rgba($panel-base, 0.1);
better comment headers
2019-09-26 14:15:45 +00:00
//
apply new pallete with 13 colors
2019-10-01 13:31:43 +00:00
// --accent-color
initial custom theme using a reduced set of CSS variables to change the colors at runtime
2019-09-26 10:07:45 +00:00
$username-variant3-color: var(--accent-color);
better comment headers
2019-09-26 14:15:45 +00:00
//
apply new pallete with 13 colors
2019-10-01 13:31:43 +00:00
// --timeline-background-color
$button-secondary-bg-color: var(--timeline-background-color);
$lightbox-border-color: var(--timeline-background-color);
$menu-bg-color: var(--timeline-background-color);
$message-action-bar-bg-color: var(--timeline-background-color);
$primary-bg-color -> $background Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
2021-08-12 09:10:47 +00:00
$background: var(--timeline-background-color);
apply new pallete with 13 colors
2019-10-01 13:31:43 +00:00
$togglesw-ball-color: var(--timeline-background-color);
Make a few colors customizable (#7270)
2021-12-03 09:05:25 +00:00
$togglesw-off-color: var(--togglesw-off-color);
apply new pallete with 13 colors
2019-10-01 13:31:43 +00:00
$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
Make custom themes acceptable with recent changes for element theme Note that custom themes are still based on the old theme, now called legacy-light/dark
2020-07-14 16:20:28 +00:00
$roomheader-bg-color: var(--timeline-background-color);
better comment headers
2019-09-26 14:15:45 +00:00
//
apply new pallete with 13 colors
2019-10-01 13:31:43 +00:00
// --roomlist-highlights-color
Use correct color for a selected room in the Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
2021-08-25 07:17:22 +00:00
$panel-actions: var(--roomlist-highlights-color);
better comment headers
2019-09-26 14:15:45 +00:00
//
apply new pallete with 13 colors
2019-10-01 13:31:43 +00:00
// --sidebar-color
Delete groups (legacy communities system) (#8027) * Remove deprecated feature_communities_v2_prototypes * Update _components * i18n * delint * Cut out a bit more dead code * Carve into legacy components * Carve into mostly the room list code * Carve into instances of "groupId" * Carve out more of what comes up with "groups" * Carve out some settings * ignore related groups state * Remove instances of spacesEnabled * Fix some obvious issues * Remove now-unused css * Fix variable naming for legacy components * Update i18n * Misc cleanup from manual review * Update snapshot for changed flag * Appease linters * rethemedex * Remove now-unused AddressPickerDialog * Make ConfirmUserActionDialog's member a required prop * Remove useless override from RightPanelStore * Remove extraneous CSS * Update i18n * Demo: "Communities are now Spaces" landing page * Restore linkify for group IDs * Demo: Dialog on click for communities->spaces notice * i18n for demos * i18n post-merge * Update copy * Appease the linter * Post-merge cleanup * Re-add spaces_learn_more_url to the new SdkConfig place * Round 1 of post-merge fixes * i18n Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
2022-03-22 23:07:37 +00:00
$spacePanel-bg-color: var(--sidebar-color);
apply new pallete with 13 colors
2019-10-01 13:31:43 +00:00
$tooltip-timeline-bg-color: var(--sidebar-color);
$dialog-backdrop-color: var(--sidebar-color-50pct);
better comment headers
2019-09-26 14:15:45 +00:00
//
apply new pallete with 13 colors
2019-10-01 13:31:43 +00:00
// --roomlist-background-color
$header-panel-bg-color: var(--roomlist-background-color);
$panel-gradient: var(--roomlist-background-color-0pct), var(--roomlist-background-color);
// these were #f2f5f8 instead of #f3f8fd, but close enough
$dark-panel-bg-color: var(--roomlist-background-color);
$input-lighter-bg-color: var(--roomlist-background-color);
$secondary-accent-color: var(--roomlist-background-color);
$selected-color: var(--roomlist-background-color);
$widget-menu-bar-bg-color: var(--roomlist-background-color);
Rename RoomList2 SCSS variables
2020-07-17 21:59:35 +00:00
$roomlist-bg-color: var(--roomlist-background-color);
better comment headers
2019-09-26 14:15:45 +00:00
//
apply new pallete with 13 colors
2019-10-01 13:31:43 +00:00
// --timeline-text-color
$message-action-bar-fg-color: var(--timeline-text-color);
$primary-fg-color -> $primary-content Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
2021-08-12 09:27:12 +00:00
$primary-content: var(--timeline-text-color);
apply new pallete with 13 colors
2019-10-01 13:31:43 +00:00
$roomtopic-color: var(--timeline-text-color-50pct);
$tab-label-fg-color: var(--timeline-text-color);
also theme values close to custom palette variables these values are not exactly the same as the palette values, so we're essentially flattening the color palette used in the theme, but this is needed when assigning custom colors for it to look good.
2019-09-26 14:16:05 +00:00
// was #212121
apply new pallete with 13 colors
2019-10-01 13:31:43 +00:00
$topleftmenu-color: var(--timeline-text-color);
also theme values close to custom palette variables these values are not exactly the same as the palette values, so we're essentially flattening the color palette used in the theme, but this is needed when assigning custom colors for it to look good.
2019-09-26 14:16:05 +00:00
// was #45474a
apply new pallete with 13 colors
2019-10-01 13:31:43 +00:00
$dialog-title-fg-color: var(--timeline-text-color);
$tab-label-fg-color: var(--timeline-text-color);
also theme values close to custom palette variables these values are not exactly the same as the palette values, so we're essentially flattening the color palette used in the theme, but this is needed when assigning custom colors for it to look good.
2019-09-26 14:16:05 +00:00
// was #4e5054
apply new pallete with 13 colors
2019-10-01 13:31:43 +00:00
$authpage-lang-color: var(--timeline-text-color);
Set dark theme colors for auth components Fixes https://github.com/vector-im/element-web/issues/18865 Signed-off-by: Andrew Ferrazzutti <fair@miscworks.net>
2021-09-09 06:11:47 +00:00
// was #232f32
$authpage-primary-color: var(--timeline-text-color);
apply new pallete with 13 colors
2019-10-01 13:31:43 +00:00
// --roomlist-text-secondary-color
Rename remaining SCSS variables to remove 2 suffix
2020-07-17 22:18:15 +00:00
$roomtile-default-badge-bg-color: var(--roomlist-text-secondary-color);
Make custom themes acceptable with recent changes for element theme Note that custom themes are still based on the old theme, now called legacy-light/dark
2020-07-14 16:20:28 +00:00
apply new pallete with 13 colors
2019-10-01 13:31:43 +00:00
//
// --roomlist-separator-color
$input-darker-bg-color: var(--roomlist-separator-color);
$primary-hairline-color: var(--roomlist-separator-color);// originally #e5e5e5, but close enough
better comment headers
2019-09-26 14:15:45 +00:00
//
apply new pallete with 13 colors
2019-10-01 13:31:43 +00:00
// --timeline-text-secondary-color
$authpage-secondary-color: var(--timeline-text-secondary-color);
$pinned-color: var(--timeline-text-secondary-color);
$settings-subsection-fg-color: var(--timeline-text-secondary-color);
$roomheader-addroom-bg-color: var(--timeline-text-secondary-color);
also theme values close to custom palette variables these values are not exactly the same as the palette values, so we're essentially flattening the color palette used in the theme, but this is needed when assigning custom colors for it to look good.
2019-09-26 14:16:05 +00:00
// was #747474
apply new pallete with 13 colors
2019-10-01 13:31:43 +00:00
$light-fg-color: var(--timeline-text-secondary-color);
Make a few colors customizable (#7270)
2021-12-03 09:05:25 +00:00
$focus-bg-color: var(--focus-bg-color, $focus-bg-color);
$room-highlight-color: var(--room-highlight-color);
$rte-room-pill-color: $room-highlight-color;
also theme values close to custom palette variables these values are not exactly the same as the palette values, so we're essentially flattening the color palette used in the theme, but this is needed when assigning custom colors for it to look good.
2019-09-26 14:16:05 +00:00
// was #888888
apply new pallete with 13 colors
2019-10-01 13:31:43 +00:00
$info-plinth-fg-color: var(--timeline-text-secondary-color);
better comment headers
2019-09-26 14:15:45 +00:00
//
apply new pallete with 13 colors
2019-10-01 13:31:43 +00:00
// --primary-color
Color cleanup 8 (#7108) * $accent-color -> $accent Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Remove $accent-bg-color Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * $notice-primary-color -> $alert Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Remove $notice-primary-bg-color Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Remove $accent-50pct Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * $warning-color -> $alert Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Remove $accent-darker Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Remove $orange-warning-color Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Remove $warning-bg-color Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com> * Remove $info-bg-color Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
2021-11-11 13:37:29 +00:00
$accent-alt: var(--primary-color);
better comment headers
2019-09-26 14:15:45 +00:00
//
apply new pallete with 13 colors
2019-10-01 13:31:43 +00:00
// --warning-color
create 0% and 50% opaque vars as #rgba trick doesn't work
2019-09-26 14:14:39 +00:00
$button-danger-disabled-bg-color: var(--warning-color-50pct); // still needs alpha at 0.5
Make custom themes acceptable with recent changes for element theme Note that custom themes are still based on the old theme, now called legacy-light/dark
2020-07-14 16:20:28 +00:00
//
fix index mismatch
2020-09-28 14:20:16 +00:00
// --username colors (which use a 0-based index)
$username-variant1-color: var(--username-colors_0, $username-variant1-color);
$username-variant2-color: var(--username-colors_1, $username-variant2-color);
$username-variant3-color: var(--username-colors_2, $username-variant3-color);
$username-variant4-color: var(--username-colors_3, $username-variant4-color);
$username-variant5-color: var(--username-colors_4, $username-variant5-color);
$username-variant6-color: var(--username-colors_5, $username-variant6-color);
$username-variant7-color: var(--username-colors_6, $username-variant7-color);
$username-variant8-color: var(--username-colors_7, $username-variant8-color);
Make custom themes acceptable with recent changes for element theme Note that custom themes are still based on the old theme, now called legacy-light/dark
2020-07-14 16:20:28 +00:00
//
// --timeline-highlights-color
actually use timeline highlight color
2020-04-28 14:49:25 +00:00
$event-selected-color: var(--timeline-highlights-color);
$event-highlight-bg-color: var(--timeline-highlights-color);
Make custom themes acceptable with recent changes for element theme Note that custom themes are still based on the old theme, now called legacy-light/dark
2020-07-14 16:20:28 +00:00
//
// redirect some variables away from their hardcoded values in the light theme
$primary-fg-color -> $primary-content Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
2021-08-12 09:27:12 +00:00
$settings-grey-fg-color: $primary-content;
allow customizing the bubble layout colors - correct fallback values in the _legacy_dark.scss files - read variables to override default values
2021-08-06 11:07:09 +00:00
// --eventbubble colors
$eventbubble-self-bg: var(--eventbubble-self-bg, $eventbubble-self-bg);
$eventbubble-others-bg: var(--eventbubble-others-bg, $eventbubble-others-bg);
$eventbubble-bg-hover: var(--eventbubble-bg-hover, $eventbubble-bg-hover);
$eventbubble-reply-color: var(--eventbubble-reply-color, $eventbubble-reply-color);
Make a few colors customizable (#7270)
2021-12-03 09:05:25 +00:00
$reaction-row-button-selected-bg-color: var(--reaction-row-button-selected-bg-color, $reaction-row-button-selected-bg-color);
$menu-selected-color: var(--menu-selected-color, $menu-selected-color);
Improve pills (#6398)
2022-05-05 09:13:09 +00:00
$pill-bg-color: var(--other-user-pill-bg-color, $pill-bg-color);
$pill-hover-bg-color: var(--other-user-pill-bg-color, $pill-hover-bg-color);
set icon-button-color to be configurable (#7725)
2022-02-17 09:40:23 +00:00
$icon-button-color: var(--icon-button-color, $icon-button-color);
Reference in a new issue Copy permalink