paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-12 18:06:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

modals: Set new background, border colors.

Browse Source
This commit is contained in:
Karl Stolley
2024-10-07 16:24:04 -04:00
committed by Tim Abbott
parent cd1f58080b
commit 8c90c9d68d
6 changed files with 35 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
web/styles/app_components.css
View File

@@ -443,8 +443,8 @@ input.settings_text_input {
.grey-box { .grey-box {
margin: 0; margin: 0;
padding: 5px 10px; padding: 5px 10px;
background-color: hsl(0deg 0% 98%); background-color: var(--color-background-modal-bar);
border: 1px solid hsl(0deg 0% 87%); border: 1px solid var(--color-border-modal-bar);
border-radius: 4px; border-radius: 4px;
list-style-type: none; list-style-type: none;
@@ -1004,7 +1004,8 @@ input.settings_text_input {
padding-top: 4px; padding-top: 4px;
padding-bottom: 8px; padding-bottom: 8px;
text-align: center; 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 { & h1 {
margin: 0; margin: 0;

10
web/styles/app_variables.css
View File

@@ -585,7 +585,10 @@
--color-unread-marker: hsl(217deg 64% 59%); --color-unread-marker: hsl(217deg 64% 59%);
--color-masked-unread-marker: hsl(0deg 0% 80%); --color-masked-unread-marker: hsl(0deg 0% 80%);
--color-failed-message-send-icon: hsl(3.88deg 98.84% 66.27%); --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-background-invitee-emails-pill-container: hsl(0deg 0% 100%);
--color-unmuted-or-followed-topic-list-item: hsl(0deg 0% 20%); --color-unmuted-or-followed-topic-list-item: hsl(0deg 0% 20%);
--color-topic-indent-border: hsl(0deg 0% 0% / 19%); --color-topic-indent-border: hsl(0deg 0% 0% / 19%);
@@ -1098,7 +1101,10 @@
--color-navbar-bottom-border: hsl(0deg 0% 0% / 60%); --color-navbar-bottom-border: hsl(0deg 0% 0% / 60%);
--color-unread-marker: hsl(217deg 64% 59%); --color-unread-marker: hsl(217deg 64% 59%);
--color-masked-unread-marker: hsl(0deg 0% 30%); --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-background-invitee-emails-pill-container: hsl(0deg 0% 0% / 20%);
--color-unmuted-or-followed-topic-list-item: hsl(236deg 33% 90%); --color-unmuted-or-followed-topic-list-item: hsl(236deg 33% 90%);
--color-recipient-bar-controls-spinner: hsl(0deg 0% 100%); --color-recipient-bar-controls-spinner: hsl(0deg 0% 100%);

35
web/styles/dark_theme.css
View File

@@ -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, #message-formatting,
#keyboard-shortcuts { #keyboard-shortcuts {
& kbd { & 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 { #stream-actions-menu-popover .sp-container {
background-color: transparent; background-color: transparent;
@@ -466,7 +456,6 @@
#message-edit-history-overlay-container { #message-edit-history-overlay-container {
.flex.overlay-content > .overlay-container { .flex.overlay-content > .overlay-container {
box-shadow: 0 0 30px hsl(213deg 31% 0%); box-shadow: 0 0 30px hsl(213deg 31% 0%);
background-color: var(--color-background);
} }
} }
@@ -561,21 +550,13 @@
background-color: hsl(228deg 11% 17%); background-color: hsl(228deg 11% 17%);
} }
& .drafts-container .drafts-header, & .overlay-messages-header,
.subscriptions-container .subscriptions-header,
.user-groups-container .user-groups-header,
.overlay-messages-header,
.grey-box, .grey-box,
.white-box, .white-box,
.stream-email, .stream-email,
#generate-integration-url-modal .integration-url, #generate-integration-url-modal .integration-url,
#settings_page .settings-header,
#settings_page .sidebar li.active, #settings_page .sidebar li.active,
#settings_page .sidebar-wrapper .tab-container, .table-striped tbody tr:nth-child(odd) th {
.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%);
background-color: hsl(0deg 0% 0% / 20%); 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-box .subscriber_list_container .subscriber-list td, .subscriber-list-box .subscriber_list_container .subscriber-list td,
.member-list-box, .member-list-box,
.member-list-box .member_list_container .member-list td, .member-list-box .member_list_container .member-list td,
#subscription_overlay .settings-radio-input-parent, #subscription_overlay .settings-radio-input-parent,
#settings_page .sidebar,
#settings_page .sidebar .sidebar-item,
#recent_view_table table td { #recent_view_table table td {
border-color: hsl(0deg 0% 0% / 20%); border-color: hsl(0deg 0% 0% / 20%);
} }
@@ -755,9 +726,7 @@
} }
#feedback_container { #feedback_container {
background-color: hsl(212deg 25% 15%);
border-color: hsl(0deg 0% 0% / 50%); border-color: hsl(0deg 0% 0% / 50%);
color: inherit;
& a:hover { & a:hover {
color: hsl(0deg 0% 100%); color: hsl(0deg 0% 100%);

19
web/styles/settings.css
View File

@@ -1290,7 +1290,8 @@ $option_title_width: 180px;
box-sizing: border-box; box-sizing: border-box;
height: $settings_header_height; height: $settings_header_height;
padding: 6px; 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) { @media (width >= $md_min) {
.tab-switcher { .tab-switcher {
@@ -1322,7 +1323,7 @@ $option_title_width: 180px;
.sidebar { .sidebar {
height: calc(100% - $settings_header_height); height: calc(100% - $settings_header_height);
overflow-y: auto; overflow-y: auto;
border-right: 1px solid hsl(0deg 0% 93%); border-right: 1px solid var(--color-border-modal-bar);
.header { .header {
height: auto; height: auto;
@@ -1332,8 +1333,8 @@ $option_title_width: 180px;
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
background-color: hsl(180deg 6% 93%); background-color: var(--color-background-modal-bar);
border-bottom: 1px solid hsl(0deg 0% 87%); border-bottom: 1px solid var(--color-border-modal-bar);
} }
.sidebar-item { .sidebar-item {
@@ -1351,15 +1352,16 @@ $option_title_width: 180px;
transition: transition:
background-color 0.2s ease, background-color 0.2s ease,
border-bottom 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 { &:last-of-type .text {
border-bottom: none; border-bottom: none;
} }
&.active { &.active {
background-color: hsl(0deg 0% 93%); /* TODO: Check with Vlad about highlight
border-bottom: 1px solid transparent; colors such as this. */
background-color: hsl(0deg 0% 98%);
} }
.sidebar-item-icon { .sidebar-item-icon {
@@ -1462,7 +1464,8 @@ $option_title_width: 180px;
width: 100%; width: 100%;
height: $settings_header_height; height: $settings_header_height;
box-sizing: border-box; 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 { & h1 .section {
font-weight: 400; font-weight: 400;

18
web/styles/subscriptions.css
View File

@@ -320,7 +320,8 @@ h4.user_group_setting_subsection_title {
text-align: center; text-align: center;
text-transform: uppercase; text-transform: uppercase;
font-weight: 700; 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 { .fa-chevron-left {
display: none; display: none;
@@ -378,12 +379,12 @@ h4.user_group_setting_subsection_title {
} }
.left { .left {
border-right: 1px solid hsl(0deg 0% 87%); border-right: 1px solid var(--color-border-modal-bar);
.list-toggler-container { .list-toggler-container {
align-items: center; align-items: center;
padding: 6px 8px; padding: 6px 8px;
border-bottom: 1px solid hsl(0deg 0% 87%); border-bottom: 1px solid var(--color-border-modal-bar);
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -409,7 +410,7 @@ h4.user_group_setting_subsection_title {
padding: 2px; padding: 2px;
text-align: center; text-align: center;
font-weight: 600; font-weight: 600;
border-bottom: 1px solid hsl(0deg 0% 87%); border-bottom: 1px solid var(--color-border-modal-bar);
& a { & a {
color: inherit; color: inherit;
@@ -496,7 +497,7 @@ h4.user_group_setting_subsection_title {
justify-content: center; justify-content: center;
margin-bottom: 0; margin-bottom: 0;
height: auto; height: auto;
border-bottom: 1px solid hsl(0deg 0% 87%); border-bottom: 1px solid var(--color-border-modal-bar);
} }
.user-groups-list, .user-groups-list,
@@ -537,7 +538,7 @@ h4.user_group_setting_subsection_title {
.stream-row, .stream-row,
.group-row { .group-row {
padding: 15px 10px 11px; padding: 15px 10px 11px;
border-bottom: 1px solid hsl(0deg 0% 93%); border-bottom: 1px solid var(--color-border-modal-bar);
cursor: pointer; cursor: pointer;
display: flex; display: flex;
@@ -763,9 +764,8 @@ h4.user_group_setting_subsection_title {
width: calc(100% - 27px); width: calc(100% - 27px);
padding: 9px 15px 15px; padding: 9px 15px 15px;
text-align: right; text-align: right;
background-color: hsl(0deg 0% 96%); background-color: var(--color-background-modal-bar);
border-top: 1px solid hsl(0deg 0% 87%); border-top: 1px solid var(--color-border-modal-bar);
box-shadow: inset 0 1px 0 hsl(0deg 0% 100%);
} }
@media (width > $md_min) { @media (width > $md_min) {

2
web/styles/zulip.css
View File

@@ -229,7 +229,7 @@ p.n-margin {
top: 0; top: 0;
left: calc(50vw - 220px); left: calc(50vw - 220px);
padding: 15px; padding: 15px;
background-color: hsl(0deg 0% 98%); background-color: var(--color-background-modal);
border-radius: 5px; border-radius: 5px;
box-shadow: 0 0 30px hsl(0deg 0% 0% / 25%); box-shadow: 0 0 30px hsl(0deg 0% 0% / 25%);
z-index: 110; z-index: 110;