Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

modals: Set new background, border colors.

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
Show Stats 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 {
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;

10
web/styles/app_variables.css
View File

@ -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%);

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,
#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%);

19
web/styles/settings.css
View File

@ -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;

18
web/styles/subscriptions.css
View File

@ -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) {

2
web/styles/zulip.css
View File

@ -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;