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

Color cleanup number 7 (#7094) 

* $reaction-row-button-selected-border-color -> $accent-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $reaction-row-button-bg-color -> $header-panel-bg-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Remove $room-warning-bg-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Remove $button-link-bg-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Remove $tab-label-icon-bg-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Remove $tab-label-bg-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Remove $event-redacted-border-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Remove $event-redacted-fg-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Remove $panel-divider-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $search-placeholder-color -> #61708b

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $search-bg-color -> #181b21

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $header-panel-border-color -> #000000

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* Remove $scrollbar-track-color

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>

* $eventbubble-avatar-outline -> $background

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
pull/21833/head
Šimon Brandner 2021-11-10 10:46:33 +01:00 committed by GitHub
parent 50ff00084f
commit 71d8946641
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 16 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
res/css/structures/_AutoHideScrollbar.scss
View File

@ -16,7 +16,7 @@ limitations under the License.
// make any scrollbar grey and thin
html {
scrollbar-color: $scrollbar-thumb-color $scrollbar-track-color;
scrollbar-color: $scrollbar-thumb-color transparent;
}
// scrollbar-width is not inherited (but -color is, why?!),
// so declare it on every element
@ -27,7 +27,6 @@ html {
::-webkit-scrollbar {
width: 6px;
height: 6px;
background-color: $scrollbar-track-color;
}
::-webkit-scrollbar-thumb {
@ -37,11 +36,7 @@ html {
// make auto-hide scrollbars not transparent again on hover
.mx_AutoHideScrollbar:hover {
scrollbar-color: $scrollbar-thumb-color $scrollbar-track-color;
&::-webkit-scrollbar {
background-color: $scrollbar-track-color;
}
scrollbar-color: $scrollbar-thumb-color transparent;
&::-webkit-scrollbar-thumb {
background-color: $scrollbar-thumb-color;

2
res/css/views/dialogs/_KeyboardShortcutsDialog.scss
View File

@ -44,7 +44,7 @@ limitations under the License.
kbd {
padding: 5px;
border-radius: 4px;
background-color: $reaction-row-button-bg-color;
background-color: $header-panel-bg-color;
margin-right: 5px;
min-width: 20px;
text-align: center;

2
res/css/views/elements/_AccessibleButton.scss
View File

@ -101,7 +101,6 @@ limitations under the License.
.mx_AccessibleButton_kind_link {
color: $accent-color;
background-color: $button-link-bg-color;
}
.mx_AccessibleButton_kind_link.mx_AccessibleButton_disabled {
@ -111,7 +110,6 @@ limitations under the License.
.mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_link_sm {
padding: 5px 12px;
color: $accent-color;
background-color: $button-link-bg-color;
}
.mx_AccessibleButton_kind_link_sm.mx_AccessibleButton_disabled {

4
res/css/views/elements/_ResizeHandle.scss
View File

@ -37,10 +37,6 @@ limitations under the License.
padding: 0 8px 0 0;
}
.mx_ResizeHandle > div {
background: $panel-divider-color;
}
.mx_ResizeHandle.mx_ResizeHandle_horizontal > div {
width: 1px;
height: 100%;

1
res/css/views/messages/_DateSeparator.scss
View File

@ -27,7 +27,6 @@ limitations under the License.
flex: 1 1 0;
height: 0;
border: none;
border-bottom: 1px solid $panel-divider-color;
}
.mx_DateSeparator > div {

4
res/css/views/messages/_ReactionsRowButton.scss
View File

@ -21,7 +21,7 @@ limitations under the License.
padding: 1px 6px;
border: 1px solid $reaction-row-button-border-color;
border-radius: 10px;
background-color: $reaction-row-button-bg-color;
background-color: $header-panel-bg-color;
cursor: pointer;
user-select: none;
vertical-align: middle;
@ -32,7 +32,7 @@ limitations under the License.
&.mx_ReactionsRowButton_selected {
background-color: $reaction-row-button-selected-bg-color;
border-color: $reaction-row-button-selected-border-color;
border-color: $accent-color;
}
&.mx_AccessibleButton_disabled {

2
res/css/views/rooms/_EventBubbleTile.scss
View File

@ -219,7 +219,7 @@ limitations under the License.
line-height: 1;
z-index: 9;
img {
box-shadow: 0 0 0 3px $eventbubble-avatar-outline;
box-shadow: 0 0 0 3px $background;
border-radius: 50%;
}
}

1
res/css/views/rooms/_RoomPreviewBar.scss
View File

@ -73,7 +73,6 @@ limitations under the License.
.mx_RoomPreviewBar_panel {
padding: 8px 8px 8px 20px;
border-top: 1px solid $panel-divider-color;
flex-direction: row;

24
res/themes/dark/css/_dark.scss
View File

@ -21,12 +21,9 @@ $space-nav: rgba($panel-base, 0.1);
// unified palette
// try to use these colors when possible
$header-panel-bg-color: #20252B;
$header-panel-border-color: #000000;
$header-panel-text-primary-color: #B9BEC6;
$header-panel-text-secondary-color: #c8c8cd;
$text-secondary-color: #B9BEC6;
$search-bg-color: #181b21;
$search-placeholder-color: #61708b;
$room-highlight-color: #343a46;
// typical text (dark-on-white in light skin)
@ -62,8 +59,8 @@ $primary-hairline-color: transparent;
// used for the border of input text fields
$input-border-color: rgba(231, 231, 231, 0.2);
$input-darker-bg-color: $search-bg-color;
$input-darker-fg-color: $search-placeholder-color;
$input-darker-bg-color: #181b21;
$input-darker-fg-color: #61708b;
$input-lighter-bg-color: #f2f5f8;
$input-focused-border-color: #238cf5;
@ -71,10 +68,9 @@ $resend-button-divider-color: #b9bec64a; // muted-text with a 4A opacity.
// scrollbars
$scrollbar-thumb-color: rgba(255, 255, 255, 0.2);
$scrollbar-track-color: transparent;
// context menus
$menu-border-color: $header-panel-border-color;
$menu-border-color: #000000;
$menu-bg-color: $header-panel-bg-color;
$menu-box-shadow-color: $background;
$menu-selected-color: $room-highlight-color;
@ -121,15 +117,9 @@ $roomtile-default-badge-bg-color: #61708b;
// ********************
$panel-divider-color: transparent;
$widget-menu-bar-bg-color: $header-panel-bg-color;
$widget-body-bg-color: rgba(141, 151, 165, 0.2);
// event redaction
$event-redacted-fg-color: #606060;
$event-redacted-border-color: #000000;
$event-highlight-bg-color: #25271F;
// event timestamp
@ -138,8 +128,6 @@ $event-timestamp-color: $text-secondary-color;
// Tabbed views
$tab-label-fg-color: $primary-content;
$tab-label-active-fg-color: $primary-content;
$tab-label-bg-color: transparent;
$tab-label-icon-bg-color: $primary-content;
$tab-label-active-icon-bg-color: $primary-content;
// Buttons
@ -148,7 +136,6 @@ $button-secondary-bg-color: transparent;
$button-danger-fg-color: $primary-content;
$button-danger-disabled-fg-color: $primary-content;
$button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color
$button-link-bg-color: transparent;
// Toggle switch
$togglesw-off-color: $room-highlight-color;
@ -160,8 +147,6 @@ $progressbar-bg-color: $system;
$visual-bell-bg-color: #800;
$room-warning-bg-color: $header-panel-bg-color;
$authpage-primary-color: $primary-content;
$dark-panel-bg-color: $header-panel-bg-color;
@ -172,11 +157,9 @@ $message-action-bar-fg-color: $header-panel-text-primary-color;
$message-action-bar-border-color: #616b7f;
$message-action-bar-hover-border-color: $header-panel-text-primary-color;
$reaction-row-button-bg-color: $header-panel-bg-color;
$reaction-row-button-border-color: #616b7f;
$reaction-row-button-hover-border-color: $header-panel-text-primary-color;
$reaction-row-button-selected-bg-color: #1f6954;
$reaction-row-button-selected-border-color: $accent-color;
$kbd-border-color: #000000;
@ -204,7 +187,6 @@ $codeblock-background-color: #2a3039;
$eventbubble-self-bg: #14322E;
$eventbubble-others-bg: $event-selected-color;
$eventbubble-bg-hover: #1C2026;
$eventbubble-avatar-outline: $background;
$eventbubble-reply-color: #C1C6CD;
// ***** Mixins! *****

28
res/themes/legacy-dark/css/_legacy-dark.scss
View File

@ -7,13 +7,10 @@ $bg-color: #181b21;
$base-color: #15171b;
$base-text-color: #edf3ff;
$header-panel-bg-color: #22262e;
$header-panel-border-color: #000000;
$header-panel-text-primary-color: #a1b2d1;
$header-panel-text-secondary-color: #c8c8cd;
$text-primary-color: #edf3ff;
$text-secondary-color: #a1b2d1;
$search-bg-color: #181b21;
$search-placeholder-color: #61708b;
$room-highlight-color: #343a46;
// typical text (dark-on-white in light skin)
@ -49,12 +46,12 @@ $selected-color: $room-highlight-color;
$event-selected-color: $header-panel-bg-color;
// used for the hairline dividers in RoomView
$primary-hairline-color: $header-panel-border-color;
$primary-hairline-color: #000000;
// used for the border of input text fields
$input-border-color: #e7e7e7;
$input-darker-bg-color: $search-bg-color;
$input-darker-fg-color: $search-placeholder-color;
$input-darker-bg-color: #181b21;
$input-darker-fg-color: #61708b;
$input-lighter-bg-color: #f2f5f8;
$input-focused-border-color: #238cf5;
@ -62,10 +59,9 @@ $resend-button-divider-color: $muted-fg-color;
// scrollbars
$scrollbar-thumb-color: rgba(255, 255, 255, 0.2);
$scrollbar-track-color: transparent;
// context menus
$menu-border-color: $header-panel-border-color;
$menu-border-color: #000000;
$menu-bg-color: $header-panel-bg-color;
$menu-box-shadow-color: $bg-color;
$menu-selected-color: $room-highlight-color;
@ -89,7 +85,7 @@ $settings-subsection-fg-color: $text-secondary-color;
$topleftmenu-color: $text-primary-color;
$roomheader-color: $text-primary-color;
$roomheader-addroom-bg-color: #3c4556; // $search-placeholder-color at 0.5 opacity
$roomheader-addroom-bg-color: #3c4556;
$roomheader-addroom-fg-color: $text-primary-color;
$groupFilterPanel-button-color: $header-panel-text-primary-color;
$groupheader-button-color: $header-panel-text-primary-color;
@ -137,15 +133,9 @@ $roomtile-selected-bg-color: #1A1D23;
// ********************
$panel-divider-color: $header-panel-border-color;
$widget-menu-bar-bg-color: $header-panel-bg-color;
$widget-body-bg-color: #1A1D23;
// event redaction
$event-redacted-fg-color: #606060;
$event-redacted-border-color: #000000;
$event-highlight-bg-color: #25271F;
// event timestamp
@ -154,8 +144,6 @@ $event-timestamp-color: $text-secondary-color;
// Tabbed views
$tab-label-fg-color: $text-primary-color;
$tab-label-active-fg-color: $text-primary-color;
$tab-label-bg-color: transparent;
$tab-label-icon-bg-color: $text-primary-color;
$tab-label-active-icon-bg-color: $text-primary-color;
// Buttons
@ -164,7 +152,6 @@ $button-secondary-bg-color: transparent;
$button-danger-fg-color: #ffffff;
$button-danger-disabled-fg-color: #ffffff;
$button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color
$button-link-bg-color: transparent;
// Toggle switch
$togglesw-off-color: $room-highlight-color;
@ -173,8 +160,6 @@ $progressbar-bg-color: #21262c;
$visual-bell-bg-color: #800;
$room-warning-bg-color: $header-panel-bg-color;
$dark-panel-bg-color: $header-panel-bg-color;
$panel-gradient: rgba(34, 38, 46, 0), rgba(34, 38, 46, 1);
@ -183,11 +168,9 @@ $message-action-bar-fg-color: $header-panel-text-primary-color;
$message-action-bar-border-color: #616b7f;
$message-action-bar-hover-border-color: $header-panel-text-primary-color;
$reaction-row-button-bg-color: $header-panel-bg-color;
$reaction-row-button-border-color: #616b7f;
$reaction-row-button-hover-border-color: $header-panel-text-primary-color;
$reaction-row-button-selected-bg-color: #1f6954;
$reaction-row-button-selected-border-color: $accent-color;
$kbd-border-color: #000000;
@ -211,7 +194,6 @@ $codeblock-background-color: #2a3039;
$eventbubble-self-bg: #14322E;
$eventbubble-others-bg: $event-selected-color;
$eventbubble-bg-hover: #1C2026;
$eventbubble-avatar-outline: $bg-color;
$eventbubble-reply-color: #C1C6CD;
// ***** Mixins! *****

17
res/themes/legacy-light/css/_legacy-light.scss
View File

@ -95,7 +95,6 @@ $input-underline-color: rgba(151, 151, 151, 0.5);
$input-fg-color: rgba(74, 74, 74, 0.9);
// scrollbars
$scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
$scrollbar-track-color: transparent;
// context menus
$menu-border-color: #e7e7e7;
$menu-bg-color: #fff;
@ -199,8 +198,6 @@ $username-variant6-color: #2dc2c5;
$username-variant7-color: #5c56f5;
$username-variant8-color: #74d12c;
$panel-divider-color: #dee1f3;
// ********************
$widget-menu-bar-bg-color: $secondary-accent-color;
@ -208,7 +205,7 @@ $widget-body-bg-color: #fff;
// ********************
// both $event-highlight-bg-color and $room-warning-bg-color share this value,
// $event-highlight-bg-color shares this value,
// so to not make their order dependent on who depends on who, have a shared value
// defined before both
$yellow-background: #fff8e3;
@ -218,10 +215,6 @@ $event-notsent-color: #f44;
$event-highlight-bg-color: $yellow-background;
// event redaction
$event-redacted-fg-color: #e2e2e2;
$event-redacted-border-color: #cccccc;
// event timestamp
$event-timestamp-color: #acacac;
@ -243,8 +236,6 @@ $lightbox-border-color: #ffffff;
// Tabbed views
$tab-label-fg-color: #45474a;
$tab-label-active-fg-color: #ffffff;
$tab-label-bg-color: transparent;
$tab-label-icon-bg-color: #454545;
$tab-label-active-icon-bg-color: $tab-label-active-fg-color;
// Buttons
@ -253,7 +244,6 @@ $button-secondary-bg-color: $accent-fg-color;
$button-danger-fg-color: #ffffff;
$button-danger-disabled-fg-color: #ffffff;
$button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color
$button-link-bg-color: transparent;
$visual-bell-bg-color: #faa;
@ -266,8 +256,6 @@ $slider-background-color: #c1c9d6;
$progressbar-bg-color: rgba(141, 151, 165, 0.2);
$room-warning-bg-color: $yellow-background;
$memberstatus-placeholder-color: $muted-fg-color;
$authpage-bg-color: #2e3649;
@ -285,11 +273,9 @@ $message-action-bar-fg-color: $primary-fg-color;
$message-action-bar-border-color: #e9edf1;
$message-action-bar-hover-border-color: $focus-bg-color;
$reaction-row-button-bg-color: $header-panel-bg-color;
$reaction-row-button-border-color: #e9edf1;
$reaction-row-button-hover-border-color: $focus-bg-color;
$reaction-row-button-selected-bg-color: #e9fff9;
$reaction-row-button-selected-border-color: $accent-color;
$kbd-border-color: $reaction-row-button-border-color;
@ -315,7 +301,6 @@ $codeblock-background-color: $header-panel-bg-color;
$eventbubble-self-bg: #F0FBF8;
$eventbubble-others-bg: $system;
$eventbubble-bg-hover: #FAFBFD;
$eventbubble-avatar-outline: #fff;
$eventbubble-reply-color: #C1C6CD;
// pinned events indicator

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

@ -39,7 +39,6 @@ $space-nav: rgba($panel-base, 0.1);
// --accent-color
$accent-color: var(--accent-color);
$accent-bg-color: var(--accent-color-15pct);
$reaction-row-button-selected-border-color: var(--accent-color);
$username-variant3-color: var(--accent-color);
$accent-color-50pct: var(--accent-color-50pct); //still needs alpha at .5
//
@ -65,7 +64,6 @@ $roomlist-button-bg-color: var(--sidebar-color-15pct);
//
// --roomlist-background-color
$header-panel-bg-color: var(--roomlist-background-color);
$reaction-row-button-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);
@ -81,7 +79,6 @@ $primary-content: var(--timeline-text-color);
$settings-profile-overlay-placeholder-fg-color: var(--timeline-text-color);
$roomtopic-color: var(--timeline-text-color-50pct);
$tab-label-fg-color: var(--timeline-text-color);
$tab-label-icon-bg-color: var(--timeline-text-color); //was #454545
// was #212121
$topleftmenu-color: var(--timeline-text-color);
// was #45474a
@ -98,7 +95,6 @@ $roomtile-default-badge-bg-color: var(--roomlist-text-secondary-color);
//
// --roomlist-separator-color
$input-darker-bg-color: var(--roomlist-separator-color);
$panel-divider-color: var(--roomlist-separator-color);// originally #dee1f3, but close enough
$primary-hairline-color: var(--roomlist-separator-color);// originally #e5e5e5, but close enough
//
// --timeline-text-secondary-color
@ -146,5 +142,4 @@ $settings-grey-fg-color: $primary-content;
$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-avatar-outline: var(--eventbubble-avatar-outline, $eventbubble-avatar-outline);
$eventbubble-reply-color: var(--eventbubble-reply-color, $eventbubble-reply-color);

1
res/themes/light-high-contrast/css/_light-high-contrast.scss
View File

@ -32,7 +32,6 @@ $presence-offline: $quinary-content;
$pinned-color: $tertiary-content;
$button-secondary-bg-color: $accent-fg-color;
$message-action-bar-fg-color: $primary-content;
$reaction-row-button-selected-border-color: $accent-color;
$voice-record-stop-border-color: $quinary-content;
$voice-record-icon-color: $tertiary-content;
$appearance-tab-border-color: $input-darker-bg-color;

17
res/themes/light/css/_light.scss
View File

@ -106,7 +106,6 @@ $input-underline-color: rgba(151, 151, 151, 0.5);
$input-fg-color: rgba(74, 74, 74, 0.9);
// scrollbars
$scrollbar-thumb-color: rgba(0, 0, 0, 0.2);
$scrollbar-track-color: transparent;
// context menus
$menu-border-color: #e7e7e7;
$menu-bg-color: #fff;
@ -187,8 +186,6 @@ $username-variant6-color: #2dc2c5;
$username-variant7-color: #5c56f5;
$username-variant8-color: #74d12c;
$panel-divider-color: transparent;
// pinned events indicator
$pinned-color: $tertiary-content;
@ -199,7 +196,7 @@ $widget-body-bg-color: #FFF;
// ********************
// both $event-highlight-bg-color and $room-warning-bg-color share this value,
// $event-highlight-bg-color shares this value,
// so to not make their order dependent on who depends on who, have a shared value
// defined before both
$yellow-background: #fff8e3;
@ -209,10 +206,6 @@ $event-notsent-color: #f44;
$event-highlight-bg-color: $yellow-background;
// event redaction
$event-redacted-fg-color: #e2e2e2;
$event-redacted-border-color: #cccccc;
// event timestamp
$event-timestamp-color: #acacac;
@ -234,8 +227,6 @@ $lightbox-border-color: #ffffff;
// Tabbed views
$tab-label-fg-color: #45474a;
$tab-label-active-fg-color: $background;
$tab-label-bg-color: transparent;
$tab-label-icon-bg-color: #454545;
$tab-label-active-icon-bg-color: $tab-label-active-fg-color;
// Buttons
@ -244,7 +235,6 @@ $button-secondary-bg-color: $accent-fg-color;
$button-danger-fg-color: $background;
$button-danger-disabled-fg-color: $background;
$button-danger-disabled-bg-color: #f5b6bb; // TODO: Verify color
$button-link-bg-color: transparent;
$visual-bell-bg-color: #faa;
@ -257,8 +247,6 @@ $slider-background-color: #c1c9d6;
$progressbar-bg-color: rgba(141, 151, 165, 0.2);
$room-warning-bg-color: $yellow-background;
$memberstatus-placeholder-color: $muted-fg-color;
$authpage-bg-color: #2e3649;
@ -276,11 +264,9 @@ $message-action-bar-fg-color: $primary-content;
$message-action-bar-border-color: #e9edf1;
$message-action-bar-hover-border-color: $focus-bg-color;
$reaction-row-button-bg-color: $header-panel-bg-color;
$reaction-row-button-border-color: #e9edf1;
$reaction-row-button-hover-border-color: $focus-bg-color;
$reaction-row-button-selected-bg-color: #e9fff9;
$reaction-row-button-selected-border-color: $accent-color;
$kbd-border-color: $reaction-row-button-border-color;
@ -313,7 +299,6 @@ $codeblock-background-color: $header-panel-bg-color;
$eventbubble-self-bg: #F0FBF8;
$eventbubble-others-bg: $system;
$eventbubble-bg-hover: #FAFBFD;
$eventbubble-avatar-outline: $background;
$eventbubble-reply-color: $quaternary-content;
// ***** Mixins! *****