From 8c90c9d68d40f546771abc3f8909d2df65f20bd0 Mon Sep 17 00:00:00 2001 From: Karl Stolley Date: Mon, 7 Oct 2024 16:24:04 -0400 Subject: [PATCH] modals: Set new background, border colors. --- web/styles/app_components.css | 7 ++++--- web/styles/app_variables.css | 10 ++++++++-- web/styles/dark_theme.css | 35 ++--------------------------------- web/styles/settings.css | 19 +++++++++++-------- web/styles/subscriptions.css | 18 +++++++++--------- web/styles/zulip.css | 2 +- 6 files changed, 35 insertions(+), 56 deletions(-) diff --git a/web/styles/app_components.css b/web/styles/app_components.css index cb32085483..574f0a2f7b 100644 --- a/web/styles/app_components.css +++ b/web/styles/app_components.css @@ -443,8 +443,8 @@ input.settings_text_input { .grey-box { margin: 0; padding: 5px 10px; - background-color: hsl(0deg 0% 98%); - border: 1px solid hsl(0deg 0% 87%); + background-color: var(--color-background-modal-bar); + border: 1px solid var(--color-border-modal-bar); border-radius: 4px; list-style-type: none; @@ -1004,7 +1004,8 @@ input.settings_text_input { padding-top: 4px; padding-bottom: 8px; text-align: center; - border-bottom: 1px solid hsl(0deg 0% 87%); + background-color: var(--color-background-modal-bar); + border-bottom: 1px solid var(--color-border-modal-bar); & h1 { margin: 0; diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css index 25191a4c81..aa21a0fe15 100644 --- a/web/styles/app_variables.css +++ b/web/styles/app_variables.css @@ -585,7 +585,10 @@ --color-unread-marker: hsl(217deg 64% 59%); --color-masked-unread-marker: hsl(0deg 0% 80%); --color-failed-message-send-icon: hsl(3.88deg 98.84% 66.27%); - --color-background-modal: hsl(0deg 0% 98%); + --color-background-modal: #ededed; + --color-background-modal-bar: #f5f5f5; + --color-border-modal: #8c8c8c; + --color-border-modal-bar: #c2c2c2; --color-background-invitee-emails-pill-container: hsl(0deg 0% 100%); --color-unmuted-or-followed-topic-list-item: hsl(0deg 0% 20%); --color-topic-indent-border: hsl(0deg 0% 0% / 19%); @@ -1098,7 +1101,10 @@ --color-navbar-bottom-border: hsl(0deg 0% 0% / 60%); --color-unread-marker: hsl(217deg 64% 59%); --color-masked-unread-marker: hsl(0deg 0% 30%); - --color-background-modal: hsl(212deg 28% 18%); + --color-background-modal: #242424; + --color-background-modal-bar: #333; + --color-border-modal: color-mix(in srgb, #fff 15%, transparent); + --color-border-modal-bar: color-mix(in srgb, #fff 12%, transparent); --color-background-invitee-emails-pill-container: hsl(0deg 0% 0% / 20%); --color-unmuted-or-followed-topic-list-item: hsl(236deg 33% 90%); --color-recipient-bar-controls-spinner: hsl(0deg 0% 100%); diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css index 114b57c7fe..ccf6f7909e 100644 --- a/web/styles/dark_theme.css +++ b/web/styles/dark_theme.css @@ -43,11 +43,6 @@ } } - #subscription_overlay #stream-creation .settings-sticky-footer, - #groups_overlay #user-group-creation .settings-sticky-footer { - box-shadow: inset 0 1px 0 hsl(0deg 0% 0% / 20%); - } - #message-formatting, #keyboard-shortcuts { & kbd { @@ -286,11 +281,6 @@ } } - .stream_name_search_section, - .group_name_search_section { - border-color: hsl(0deg 0% 0% / 20%); - } - #stream-actions-menu-popover .sp-container { background-color: transparent; @@ -466,7 +456,6 @@ #message-edit-history-overlay-container { .flex.overlay-content > .overlay-container { box-shadow: 0 0 30px hsl(213deg 31% 0%); - background-color: var(--color-background); } } @@ -561,21 +550,13 @@ background-color: hsl(228deg 11% 17%); } - & .drafts-container .drafts-header, - .subscriptions-container .subscriptions-header, - .user-groups-container .user-groups-header, - .overlay-messages-header, + & .overlay-messages-header, .grey-box, .white-box, .stream-email, #generate-integration-url-modal .integration-url, - #settings_page .settings-header, #settings_page .sidebar li.active, - #settings_page .sidebar-wrapper .tab-container, - .table-striped tbody tr:nth-child(odd) th, - #subscription_overlay #stream-creation .settings-sticky-footer, - #groups_overlay #user-group-creation .settings-sticky-footer { - border-color: hsl(0deg 0% 0% / 20%); + .table-striped tbody tr:nth-child(odd) th { background-color: hsl(0deg 0% 0% / 20%); } @@ -588,21 +569,11 @@ ); } - .user-groups-container .right .display-type, - .subscriptions-container .right .display-type, - .stream-row, - .group-row, - .subscriptions-container .left .list-toggler-container, - .user-groups-container .left .list-toggler-container, - .subscriptions-container .left, - .user-groups-container .left, .subscriber-list-box, .subscriber-list-box .subscriber_list_container .subscriber-list td, .member-list-box, .member-list-box .member_list_container .member-list td, #subscription_overlay .settings-radio-input-parent, - #settings_page .sidebar, - #settings_page .sidebar .sidebar-item, #recent_view_table table td { border-color: hsl(0deg 0% 0% / 20%); } @@ -755,9 +726,7 @@ } #feedback_container { - background-color: hsl(212deg 25% 15%); border-color: hsl(0deg 0% 0% / 50%); - color: inherit; & a:hover { color: hsl(0deg 0% 100%); diff --git a/web/styles/settings.css b/web/styles/settings.css index 943bc438f8..01d972cade 100644 --- a/web/styles/settings.css +++ b/web/styles/settings.css @@ -1290,7 +1290,8 @@ $option_title_width: 180px; box-sizing: border-box; height: $settings_header_height; padding: 6px; - border-bottom: 1px solid hsl(0deg 0% 87%); + background-color: var(--color-background-modal-bar); + border-bottom: 1px solid var(--color-border-modal-bar); @media (width >= $md_min) { .tab-switcher { @@ -1322,7 +1323,7 @@ $option_title_width: 180px; .sidebar { height: calc(100% - $settings_header_height); overflow-y: auto; - border-right: 1px solid hsl(0deg 0% 93%); + border-right: 1px solid var(--color-border-modal-bar); .header { height: auto; @@ -1332,8 +1333,8 @@ $option_title_width: 180px; text-align: center; text-transform: uppercase; - background-color: hsl(180deg 6% 93%); - border-bottom: 1px solid hsl(0deg 0% 87%); + background-color: var(--color-background-modal-bar); + border-bottom: 1px solid var(--color-border-modal-bar); } .sidebar-item { @@ -1351,15 +1352,16 @@ $option_title_width: 180px; transition: background-color 0.2s ease, border-bottom 0.2s ease; - border-bottom: 1px solid hsl(0deg 0% 93%); + border-bottom: 1px solid var(--color-border-modal-bar); &:last-of-type .text { border-bottom: none; } &.active { - background-color: hsl(0deg 0% 93%); - border-bottom: 1px solid transparent; + /* TODO: Check with Vlad about highlight + colors such as this. */ + background-color: hsl(0deg 0% 98%); } .sidebar-item-icon { @@ -1462,7 +1464,8 @@ $option_title_width: 180px; width: 100%; height: $settings_header_height; box-sizing: border-box; - border-bottom: 1px solid hsl(0deg 0% 87%); + border-bottom: 1px solid var(--color-border-modal-bar); + background-color: var(--color-background-modal-bar); & h1 .section { font-weight: 400; diff --git a/web/styles/subscriptions.css b/web/styles/subscriptions.css index 1642862f30..b2a887c050 100644 --- a/web/styles/subscriptions.css +++ b/web/styles/subscriptions.css @@ -320,7 +320,8 @@ h4.user_group_setting_subsection_title { text-align: center; text-transform: uppercase; font-weight: 700; - border-bottom: 1px solid hsl(0deg 0% 87%); + background-color: var(--color-background-modal-bar); + border-bottom: 1px solid var(--color-border-modal-bar); .fa-chevron-left { display: none; @@ -378,12 +379,12 @@ h4.user_group_setting_subsection_title { } .left { - border-right: 1px solid hsl(0deg 0% 87%); + border-right: 1px solid var(--color-border-modal-bar); .list-toggler-container { align-items: center; padding: 6px 8px; - border-bottom: 1px solid hsl(0deg 0% 87%); + border-bottom: 1px solid var(--color-border-modal-bar); display: flex; justify-content: space-between; @@ -409,7 +410,7 @@ h4.user_group_setting_subsection_title { padding: 2px; text-align: center; font-weight: 600; - border-bottom: 1px solid hsl(0deg 0% 87%); + border-bottom: 1px solid var(--color-border-modal-bar); & a { color: inherit; @@ -496,7 +497,7 @@ h4.user_group_setting_subsection_title { justify-content: center; margin-bottom: 0; height: auto; - border-bottom: 1px solid hsl(0deg 0% 87%); + border-bottom: 1px solid var(--color-border-modal-bar); } .user-groups-list, @@ -537,7 +538,7 @@ h4.user_group_setting_subsection_title { .stream-row, .group-row { padding: 15px 10px 11px; - border-bottom: 1px solid hsl(0deg 0% 93%); + border-bottom: 1px solid var(--color-border-modal-bar); cursor: pointer; display: flex; @@ -763,9 +764,8 @@ h4.user_group_setting_subsection_title { width: calc(100% - 27px); padding: 9px 15px 15px; text-align: right; - background-color: hsl(0deg 0% 96%); - border-top: 1px solid hsl(0deg 0% 87%); - box-shadow: inset 0 1px 0 hsl(0deg 0% 100%); + background-color: var(--color-background-modal-bar); + border-top: 1px solid var(--color-border-modal-bar); } @media (width > $md_min) { diff --git a/web/styles/zulip.css b/web/styles/zulip.css index a58889bf10..eeb1c9755e 100644 --- a/web/styles/zulip.css +++ b/web/styles/zulip.css @@ -229,7 +229,7 @@ p.n-margin { top: 0; left: calc(50vw - 220px); padding: 15px; - background-color: hsl(0deg 0% 98%); + background-color: var(--color-background-modal); border-radius: 5px; box-shadow: 0 0 30px hsl(0deg 0% 0% / 25%); z-index: 110;