From 42d332ce41a0378fd01970399e01a994a5f22015 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Fri, 3 Sep 2021 18:21:09 +0200 Subject: [PATCH 1/4] Fix Toast container color MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/structures/_ToastContainer.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/structures/_ToastContainer.scss b/res/css/structures/_ToastContainer.scss index 6024df5dc0..55181a8b53 100644 --- a/res/css/structures/_ToastContainer.scss +++ b/res/css/structures/_ToastContainer.scss @@ -122,7 +122,7 @@ limitations under the License. float: right; font-size: $font-12px; line-height: $font-22px; - color: $muted-fg-color; + color: $secondary-content; } } From 86cccc716c8725e7186db493c9e2f624188fd1fb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Wed, 25 Aug 2021 11:51:27 +0200 Subject: [PATCH 2/4] Remove $interactive-tooltip MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/themes/dark/css/_dark.scss | 3 --- res/themes/legacy-dark/css/_legacy-dark.scss | 3 --- res/themes/legacy-light/css/_legacy-light.scss | 3 --- res/themes/light-custom/css/_custom.scss | 1 - res/themes/light/css/_light.scss | 3 --- 5 files changed, 13 deletions(-) diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 0bc61d438d..e824b5638a 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -206,9 +206,6 @@ $kbd-border-color: #000000; $tooltip-timeline-bg-color: $groupFilterPanel-bg-color; $tooltip-timeline-fg-color: $primary-content; -$interactive-tooltip-bg-color: $background; -$interactive-tooltip-fg-color: $primary-content; - $breadcrumb-placeholder-bg-color: #272c35; $user-tile-hover-bg-color: $header-panel-bg-color; diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss index d5bc5e6dd7..22bd748f9a 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.scss +++ b/res/themes/legacy-dark/css/_legacy-dark.scss @@ -202,9 +202,6 @@ $kbd-border-color: #000000; $tooltip-timeline-bg-color: $groupFilterPanel-bg-color; $tooltip-timeline-fg-color: #ffffff; -$interactive-tooltip-bg-color: $base-color; -$interactive-tooltip-fg-color: #ffffff; - $breadcrumb-placeholder-bg-color: #272c35; $user-tile-hover-bg-color: $header-panel-bg-color; diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss index 47247e5e23..da0af6c905 100644 --- a/res/themes/legacy-light/css/_legacy-light.scss +++ b/res/themes/legacy-light/css/_legacy-light.scss @@ -326,9 +326,6 @@ $kbd-border-color: $reaction-row-button-border-color; $tooltip-timeline-bg-color: $groupFilterPanel-bg-color; $tooltip-timeline-fg-color: #ffffff; -$interactive-tooltip-bg-color: #27303a; -$interactive-tooltip-fg-color: #ffffff; - $breadcrumb-placeholder-bg-color: #e8eef5; $user-tile-hover-bg-color: $header-panel-bg-color; diff --git a/res/themes/light-custom/css/_custom.scss b/res/themes/light-custom/css/_custom.scss index 455798a556..cef15f613f 100644 --- a/res/themes/light-custom/css/_custom.scss +++ b/res/themes/light-custom/css/_custom.scss @@ -48,7 +48,6 @@ $roomheader-bg-color: var(--timeline-background-color); $roomtile-selected-bg-color: var(--roomlist-highlights-color); // // --sidebar-color -$interactive-tooltip-bg-color: var(--sidebar-color); $groupFilterPanel-bg-color: var(--sidebar-color); $tooltip-timeline-bg-color: var(--sidebar-color); $dialog-backdrop-color: var(--sidebar-color-50pct); diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 96e5fd7155..192327a03a 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -326,9 +326,6 @@ $inverted-bg-color: #27303a; $tooltip-timeline-bg-color: $inverted-bg-color; $tooltip-timeline-fg-color: $background; -$interactive-tooltip-bg-color: #27303a; -$interactive-tooltip-fg-color: $background; - $breadcrumb-placeholder-bg-color: #e8eef5; $user-tile-hover-bg-color: $header-panel-bg-color; From 02d42244a8a9dfdef0739f50c85e6a8104e1a3a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Wed, 25 Aug 2021 11:49:02 +0200 Subject: [PATCH 3/4] $user-tile-hover-bg-color -> $header-panel-bg-color MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/dialogs/_InviteDialog.scss | 4 ++-- res/css/views/right_panel/_VerificationPanel.scss | 2 +- res/themes/dark/css/_dark.scss | 2 -- res/themes/legacy-dark/css/_legacy-dark.scss | 2 -- res/themes/legacy-light/css/_legacy-light.scss | 2 -- res/themes/light/css/_light.scss | 2 -- 6 files changed, 3 insertions(+), 11 deletions(-) diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss index 3a2918f9ec..b1de9c8c37 100644 --- a/res/css/views/dialogs/_InviteDialog.scss +++ b/res/css/views/dialogs/_InviteDialog.scss @@ -28,7 +28,7 @@ limitations under the License. .mx_InviteDialog_editor { flex: 1; width: 100%; // Needed to make the Field inside grow - background-color: $user-tile-hover-bg-color; + background-color: $header-panel-bg-color; border-radius: 4px; min-height: 25px; padding-left: 8px; @@ -167,7 +167,7 @@ limitations under the License. padding: 5px 10px; &:hover { - background-color: $user-tile-hover-bg-color; + background-color: $header-panel-bg-color; border-radius: 4px; } diff --git a/res/css/views/right_panel/_VerificationPanel.scss b/res/css/views/right_panel/_VerificationPanel.scss index 12148b09de..95856a5d69 100644 --- a/res/css/views/right_panel/_VerificationPanel.scss +++ b/res/css/views/right_panel/_VerificationPanel.scss @@ -87,7 +87,7 @@ limitations under the License. } .mx_VerificationPanel_QRPhase_startOption { - background-color: $user-tile-hover-bg-color; + background-color: $header-panel-bg-color; border-radius: 10px; flex: 1; display: flex; diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index e824b5638a..bf65af69e3 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -208,8 +208,6 @@ $tooltip-timeline-fg-color: $primary-content; $breadcrumb-placeholder-bg-color: #272c35; -$user-tile-hover-bg-color: $header-panel-bg-color; - $message-body-panel-fg-color: $secondary-content; $message-body-panel-bg-color: $quinary-content; $message-body-panel-icon-bg-color: $system; diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss index 22bd748f9a..f4dbc25f8f 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.scss +++ b/res/themes/legacy-dark/css/_legacy-dark.scss @@ -204,8 +204,6 @@ $tooltip-timeline-fg-color: #ffffff; $breadcrumb-placeholder-bg-color: #272c35; -$user-tile-hover-bg-color: $header-panel-bg-color; - $message-body-panel-fg-color: $secondary-fg-color; $message-body-panel-bg-color: #394049; $message-body-panel-icon-fg-color: $secondary-fg-color; diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss index da0af6c905..92ff4ec722 100644 --- a/res/themes/legacy-light/css/_legacy-light.scss +++ b/res/themes/legacy-light/css/_legacy-light.scss @@ -328,8 +328,6 @@ $tooltip-timeline-fg-color: #ffffff; $breadcrumb-placeholder-bg-color: #e8eef5; -$user-tile-hover-bg-color: $header-panel-bg-color; - $message-body-panel-fg-color: $secondary-fg-color; $message-body-panel-bg-color: #E3E8F0; $message-body-panel-icon-fg-color: $secondary-fg-color; diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 192327a03a..ac19174b77 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -328,8 +328,6 @@ $tooltip-timeline-fg-color: $background; $breadcrumb-placeholder-bg-color: #e8eef5; -$user-tile-hover-bg-color: $header-panel-bg-color; - $message-body-panel-fg-color: $secondary-content; $message-body-panel-bg-color: $quinary-content; $message-body-panel-icon-bg-color: $system; From 71d1196692d91911f8529034689d82dd99fce04b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Wed, 25 Aug 2021 11:46:48 +0200 Subject: [PATCH 4/4] Get rid of message-body-panel colors MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/audio_messages/_PlaybackContainer.scss | 2 +- res/css/views/dialogs/_InviteDialog.scss | 2 +- res/css/views/dialogs/_SpaceSettingsDialog.scss | 2 +- res/css/views/messages/_MFileBody.scss | 4 ++-- res/css/views/messages/_MediaBody.scss | 4 ++-- res/themes/dark/css/_dark.scss | 9 ++------- res/themes/legacy-dark/css/_legacy-dark.scss | 5 ----- res/themes/legacy-light/css/_legacy-light.scss | 9 ++------- res/themes/light/css/_light.scss | 9 ++------- 9 files changed, 13 insertions(+), 33 deletions(-) diff --git a/res/css/views/audio_messages/_PlaybackContainer.scss b/res/css/views/audio_messages/_PlaybackContainer.scss index 773fc50fb9..3886e38583 100644 --- a/res/css/views/audio_messages/_PlaybackContainer.scss +++ b/res/css/views/audio_messages/_PlaybackContainer.scss @@ -39,7 +39,7 @@ limitations under the License. &.mx_Waveform_bar_100pct { // Small animation to remove the mechanical feel of progress transition: background-color 250ms ease; - background-color: $message-body-panel-fg-color; + background-color: $secondary-content; } } } diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss index b1de9c8c37..a753115614 100644 --- a/res/css/views/dialogs/_InviteDialog.scss +++ b/res/css/views/dialogs/_InviteDialog.scss @@ -395,7 +395,7 @@ limitations under the License. left: -24px; padding-left: 24px; padding-right: 24px; - border-top: 1px solid $message-body-panel-bg-color; + border-top: 1px solid $quinary-content; display: flex; flex-direction: row; diff --git a/res/css/views/dialogs/_SpaceSettingsDialog.scss b/res/css/views/dialogs/_SpaceSettingsDialog.scss index a1fa9d52a8..e26e4f8b49 100644 --- a/res/css/views/dialogs/_SpaceSettingsDialog.scss +++ b/res/css/views/dialogs/_SpaceSettingsDialog.scss @@ -38,7 +38,7 @@ limitations under the License. } & + .mx_SettingsTab_subheading { - border-top: 1px solid $message-body-panel-bg-color; + border-top: 1px solid $quinary-content; margin-top: 0; padding-top: 24px; } diff --git a/res/css/views/messages/_MFileBody.scss b/res/css/views/messages/_MFileBody.scss index d941a8132f..e23696e6a9 100644 --- a/res/css/views/messages/_MFileBody.scss +++ b/res/css/views/messages/_MFileBody.scss @@ -63,7 +63,7 @@ limitations under the License. cursor: pointer; .mx_MFileBody_info_icon { - background-color: $message-body-panel-icon-bg-color; + background-color: $system; border-radius: 20px; display: inline-block; width: 32px; @@ -78,7 +78,7 @@ limitations under the License. mask-position: center; mask-size: cover; mask-image: url('$(res)/img/element-icons/room/composer/attach.svg'); - background-color: $message-body-panel-icon-fg-color; + background-color: $secondary-content; width: 15px; height: 15px; diff --git a/res/css/views/messages/_MediaBody.scss b/res/css/views/messages/_MediaBody.scss index 7f4bfd3fdc..874de05c71 100644 --- a/res/css/views/messages/_MediaBody.scss +++ b/res/css/views/messages/_MediaBody.scss @@ -18,11 +18,11 @@ limitations under the License. // have unique styles). .mx_MediaBody { - background-color: $message-body-panel-bg-color; + background-color: $quinary-content; border-radius: 12px; max-width: 243px; // use max-width instead of width so it fits within right panels - color: $message-body-panel-fg-color; + color: $secondary-content; font-size: $font-14px; line-height: $font-24px; diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index bf65af69e3..f012dff0a1 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -208,16 +208,11 @@ $tooltip-timeline-fg-color: $primary-content; $breadcrumb-placeholder-bg-color: #272c35; -$message-body-panel-fg-color: $secondary-content; -$message-body-panel-bg-color: $quinary-content; -$message-body-panel-icon-bg-color: $system; -$message-body-panel-icon-fg-color: $secondary-content; - $voice-record-stop-border-color: $quaternary-content; $voice-record-waveform-incomplete-fg-color: $quaternary-content; $voice-record-icon-color: $quaternary-content; -$voice-playback-button-bg-color: $message-body-panel-icon-bg-color; -$voice-playback-button-fg-color: $message-body-panel-icon-fg-color; +$voice-playback-button-bg-color: $system; +$voice-playback-button-fg-color: $secondary-content; // Appearance tab colors $appearance-tab-border-color: $room-highlight-color; diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss index f4dbc25f8f..bed1e9c661 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.scss +++ b/res/themes/legacy-dark/css/_legacy-dark.scss @@ -204,11 +204,6 @@ $tooltip-timeline-fg-color: #ffffff; $breadcrumb-placeholder-bg-color: #272c35; -$message-body-panel-fg-color: $secondary-fg-color; -$message-body-panel-bg-color: #394049; -$message-body-panel-icon-fg-color: $secondary-fg-color; -$message-body-panel-icon-bg-color: #21262C; - // See non-legacy dark for variable information $voice-record-stop-border-color: #6F7882; $voice-record-waveform-incomplete-fg-color: #6F7882; diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss index 92ff4ec722..2ce5b6062c 100644 --- a/res/themes/legacy-light/css/_legacy-light.scss +++ b/res/themes/legacy-light/css/_legacy-light.scss @@ -328,19 +328,14 @@ $tooltip-timeline-fg-color: #ffffff; $breadcrumb-placeholder-bg-color: #e8eef5; -$message-body-panel-fg-color: $secondary-fg-color; -$message-body-panel-bg-color: #E3E8F0; -$message-body-panel-icon-fg-color: $secondary-fg-color; -$message-body-panel-icon-bg-color: $system; - // See non-legacy _light for variable information $voice-record-stop-symbol-color: #ff4b55; $voice-record-live-circle-color: #ff4b55; $voice-record-stop-border-color: #E3E8F0; $voice-record-waveform-incomplete-fg-color: #C1C6CD; $voice-record-icon-color: $tertiary-fg-color; -$voice-playback-button-bg-color: $message-body-panel-icon-bg-color; -$voice-playback-button-fg-color: $message-body-panel-icon-fg-color; +$voice-playback-button-bg-color: $system; +$voice-playback-button-fg-color: $secondary-content; // FontSlider colors $appearance-tab-border-color: $input-darker-bg-color; diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index ac19174b77..26cd1766c1 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -328,11 +328,6 @@ $tooltip-timeline-fg-color: $background; $breadcrumb-placeholder-bg-color: #e8eef5; -$message-body-panel-fg-color: $secondary-content; -$message-body-panel-bg-color: $quinary-content; -$message-body-panel-icon-bg-color: $system; -$message-body-panel-icon-fg-color: $secondary-content; - // These two don't change between themes. They are the $warning-color, but we don't // want custom themes to affect them by accident. $voice-record-stop-symbol-color: #ff4b55; @@ -341,8 +336,8 @@ $voice-record-live-circle-color: #ff4b55; $voice-record-stop-border-color: $quinary-content; $voice-record-waveform-incomplete-fg-color: $quaternary-content; $voice-record-icon-color: $tertiary-content; -$voice-playback-button-bg-color: $message-body-panel-icon-bg-color; -$voice-playback-button-fg-color: $message-body-panel-icon-fg-color; +$voice-playback-button-bg-color: $system; +$voice-playback-button-fg-color: $secondary-content; // FontSlider colors $appearance-tab-border-color: $input-darker-bg-color;