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

UI redesign: Change background color. 

Fixes: #21750
This commit is contained in:
evykassirer 2023-03-23 16:09:48 -07:00 committed by Tim Abbott
parent cc2278d6e2
commit e026aa1217
8 changed files with 116 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
templates/zerver/app/index.html
View File

@ -13,7 +13,7 @@
<style>
#app-loading {
font-size: 16px;
background-color: hsl(0, 0%, 100%);
background-color: hsl(0, 0%, 94%);
position: fixed;
height: 100%;
width: 100%;
@ -48,7 +48,7 @@
visibility: hidden;
}
:root.dark-theme #app-loading {
background-color: hsl(212, 28%, 18%);
background-color: hsl(0, 0%, 11%);
color: hsl(236, 33%, 90%);
}
@media (prefers-color-scheme: dark) {

17
web/styles/compose.css
View File

@ -52,11 +52,12 @@
/* Main geometry for this element is in zulip.css */
#compose-content {
border-top: 1px solid hsl(0deg 0% 0% / 7%);
background-color: hsl(232deg 30% 92%);
transition: background-color 200ms linear;
padding: 4px 4px 8px;
border-left: 1px solid hsl(0deg 0% 93%);
border-right: 1px solid hsl(0deg 0% 93%);
border: 1px solid hsl(0deg 0% 0% / 10%);
border-radius: 9px 9px 0 0;
box-shadow: 0 0 0 hsl(236deg 11% 28%);
height: 100%;
display: flex;
flex-flow: column;
@ -94,6 +95,10 @@
flex-flow: column;
.stream-selection-header-colorblock {
box-shadow: none;
border: 1px solid hsl(0deg 0% 80%);
border-right: none;
&.message_header_private_message {
border-radius: 3px 0 0 3px;
border-bottom: 0;
@ -218,8 +223,6 @@
left: 0;
z-index: 4;
width: 100%;
background-color: hsl(0deg 0% 100%);
}
#compose-container {
@ -683,7 +686,7 @@ input.recipient_box {
}
.divider {
color: hsl(0deg 0% 88%);
color: hsl(0deg 0% 75%);
font-size: 20px;
margin: 0 3px;
}
@ -763,7 +766,7 @@ a.compose_control_button.hide {
border: 1px solid hsl(0deg 0% 67%);
border-radius: 4px;
background-color: hsl(0deg 0% 0% / 2%);
background-color: hsl(0deg 0% 98%);
cursor: not-allowed;
}

110
web/styles/dark_theme.css
View File

@ -63,9 +63,10 @@
border-top: 1px solid hsl(0deg 0% 100% / 20%);
}
/* Restate this here for more selector specificity */
.modal-bg,
.modal__container {
background-color: hsl(212deg 28% 18%);
background-color: var(--color-background);
}
.modal__close {
@ -203,18 +204,14 @@
& body,
.app-main,
.header-main,
.column-middle,
#compose,
.column-left .left-sidebar,
.column-right .right-sidebar,
#groups_overlay .right,
#subscription_overlay .right,
#settings_page .right,
#streams_header,
.private_messages_container,
.header {
background-color: hsl(212deg 28% 18%);
background-color: var(--color-background);
}
#scroll-to-bottom-button-container {
@ -402,13 +399,6 @@
color: inherit !important;
}
/* It's a little annoying that we need to specify the different
background colors for these, but this alert feature can't use a
transparent background without creating other problems */
.alert-msg {
background-color: hsl(212deg 28% 18%);
}
.private-message .alert-msg {
background-color: hsl(208deg 17% 29%);
}
@ -499,7 +489,7 @@
}
& select option {
background-color: hsl(212deg 28% 18%);
background-color: var(--color-background);
color: hsl(236deg 33% 90%);
}
@ -519,6 +509,10 @@
background-color: hsl(0deg 86% 14%) !important;
}
#compose-direct-recipient.pill-container {
background-color: hsl(0deg 0% 0% / 20%);
}
#search_arrows .pill,
#compose-direct-recipient.pill-container .pill {
color: inherit;
@ -593,12 +587,28 @@
color: hsl(236deg 33% 90% / 50%);
}
#compose-content {
background-color: hsl(228deg 11% 17%);
border-color: hsl(0deg 0% 0% / 60%);
}
.compose_table .stream-selection-header-colorblock {
border-color: hsl(240deg 11% 5%);
}
/* Not that .message_row (below) needs to be more contrast on dark theme */
#compose-content,
.message_list .recipient_row,
.message_row,
.draft-row .draft-info-box,
.preview_message_area {
border-color: hsl(0deg 0% 0% / 20%);
}
.preview_message_area {
background-color: inherit;
}
.spectator_narrow_login_button,
.top-navbar-border {
border-color: hsl(0deg 0% 0% / 60%);
@ -748,7 +758,6 @@
#streamlist-toggle,
#userlist-toggle {
color: inherit;
border-color: hsl(0deg 0% 0% / 60%);
}
#streamlist-toggle-button {
@ -764,31 +773,9 @@
}
}
& li.active-filter,
li.active-sub-filter {
background-color: hsl(199deg 33% 46% / 20%);
}
:not(.active-sub-filter) {
&.top_left_row:hover,
&.bottom_left_row:hover,
&#stream_filters li.highlighted_stream {
background-color: hsl(136deg 25% 73% / 20%);
}
}
#stream_filters .narrow-filter.active-filter {
.topic-list .filter-topics,
> .bottom_left_row {
background-color: hsl(208deg 31% 24%);
}
}
.zoom-in {
#topics_header,
.narrow-filter > .bottom_left_row,
#stream_filters .topic-list .filter-topics {
background-color: hsl(212deg 28% 18%);
#topics_header {
background-color: var(--color-background);
}
}
@ -838,12 +825,8 @@
}
}
.recent_topics_container {
background-color: hsl(212deg 28% 18%) !important;
}
#recent_topics_table tr {
background-color: hsl(212deg 28% 18%);
background-color: var(--color-background);
&:hover {
background-color: hsl(208deg 26% 11% / 60%);
@ -851,12 +834,16 @@
}
#recent_topics_table .unread_topic {
background-color: hsl(212deg 30% 22% / 40%);
&:hover {
background-color: hsl(212deg 30% 22% / 60%);
}
}
.btn-recent-selected,
#recent_topics_table thead th {
background-color: hsl(0deg 0% 0%) !important;
background-color: hsl(228deg 11% 17%) !important;
&[data-sort]:hover {
background-color: hsl(211deg 29% 14%) !important;
@ -902,7 +889,7 @@
}
.table-striped tbody tr:nth-child(odd) td {
background-color: hsl(212deg 28% 18%);
background-color: var(--color-background);
}
.user-groups-container .right .display-type,
@ -938,6 +925,10 @@
text-shadow: none;
}
.unread_marker {
left: 0;
}
.selected_message .messagebox-content {
border-color: hsl(217deg 64% 59% / 70%);
}
@ -964,8 +955,12 @@
.codehilite code,
.codehilite pre {
color: hsl(212deg 100% 82%);
background-color: hsl(212deg 25% 15%);
color: hsl(212deg 98% 82%);
background-color: hsl(212deg 0% 11%);
}
.codehilite pre {
border: 1px solid hsl(0deg 0% 0% / 50%);
}
.codehilite .hll {
@ -1350,7 +1345,7 @@
/* Content: */
.hotspot.overlay .hotspot-popover .hotspot-popover-content,
.hotspot.overlay .hotspot-popover .hotspot-popover-bottom {
background-color: hsl(212deg 28% 18%);
background-color: var(--color-background);
}
.scheduled-messages-loading-logo,
@ -1386,13 +1381,20 @@
background-color: hsl(51deg 100% 23%);
}
.streams_subheader {
color: hsl(240deg 11% 85%);
& span::before,
span::after {
border-color: hsl(240deg 11% 85%);
}
}
.sub-unsub-message span::before,
.sub-unsub-message span::after,
.date_row span::before,
.date_row span::after,
.streams_subheader span::before,
.streams_subheader span::after {
opacity: 0.5;
.date_row span::after {
opacity: 0.15;
border-bottom: 1px solid hsl(0deg 0% 100%);
}
@ -1403,7 +1405,7 @@
#bots_lists_navbar .active a {
color: hsl(0deg 0% 87%);
background-color: hsl(212deg 28% 18%);
background-color: var(--color-background);
border-color: hsl(0deg 0% 87%);
border-bottom-color: transparent;
}

1
web/styles/input_pill.css
View File

@ -114,6 +114,7 @@
flex-grow: 1;
align-content: center;
border: 1px solid hsl(0deg 0% 0% / 20%);
background-color: hsl(0deg 0% 100%);
.input {
height: 20px;

19
web/styles/left_sidebar.css
View File

@ -132,7 +132,6 @@ li.show-more-topics {
position: sticky;
top: calc($sections_vertical_gutter + 43px);
z-index: 2;
background-color: hsl(0deg 0% 100%);
}
}
}
@ -188,7 +187,6 @@ li.show-more-topics {
}
.private_messages_container {
background: hsl(0deg 0% 100%);
margin-right: 16px;
margin-left: 6px;
z-index: 1;
@ -303,7 +301,7 @@ li.show-more-topics {
&.top_left_row:hover,
&.bottom_left_row:hover,
&#stream_filters li.highlighted_stream {
background-color: hsl(120deg 12.3% 71.4% / 38%);
background-color: var(--color-background-hover-narrow-filter);
border-radius: 4px;
}
}
@ -411,15 +409,15 @@ ul.filters {
li.active-filter,
li.active-sub-filter {
font-weight: 600 !important;
background-color: hsl(202deg 56% 91%);
position: relative;
border-radius: 4px;
background-color: var(--color-background-active-narrow-filter);
}
#stream_filters .narrow-filter.active-filter {
.topic-list .filter-topics,
> .bottom_left_row {
background-color: hsl(202deg 56% 91%);
background-color: var(--color-background-active-narrow-filter);
border-radius: 4px;
}
}
@ -661,11 +659,11 @@ li.topic-list-item {
#topics_header {
position: sticky;
top: 0;
background-color: hsl(0deg 0% 100%);
z-index: 2;
margin-right: 10px;
padding-top: $sections_vertical_gutter;
color: hsl(0deg 0% 43%);
background-color: var(--color-background);
.show-all-streams {
color: inherit;
@ -686,10 +684,10 @@ li.topic-list-item {
cursor: pointer;
padding: $sections_vertical_gutter 0 3px calc($far_left_gutter_size + 2px);
position: sticky;
background-color: var(--color-background);
/* Ideally, 0px should work here, but maybe simplebar is doing something
that is creating `0.5px` extra gap in zoomed-in windows. */
top: -0.5px;
background: hsl(0deg 0% 100%);
z-index: 1;
& input {
@ -704,6 +702,7 @@ li.topic-list-item {
cursor: pointer;
text-align: center;
margin-right: 12px;
color: hsl(240deg 10% 50%);
& span {
display: flex;
@ -720,8 +719,8 @@ li.topic-list-item {
flex: 1 1;
vertical-align: middle;
margin: auto;
border-top: 1px solid hsl(0deg 0% 88%);
border-bottom: 1px solid hsl(0deg 0% 100%);
border: 0.5px solid hsl(240deg 10% 50%);
opacity: 0.2;
}
& span::before {
@ -763,7 +762,7 @@ li.topic-list-item {
top: calc($sections_vertical_gutter + 20px);
z-index: 2;
padding-bottom: 1px;
background-color: hsl(0deg 0% 100%);
background-color: var(--color-background);
}
#subscribe-to-more-streams,

1
web/styles/recent_topics.css
View File

@ -1,7 +1,6 @@
.recent_topics_container {
padding: 0;
border-radius: 4px;
background-color: hsl(0deg 0% 100%);
overflow: hidden;
display: flex;
flex-direction: column;

1
web/styles/right_sidebar.css
View File

@ -193,7 +193,6 @@ $user_status_emoji_width: 24px;
right: 0;
text-align: center;
vertical-align: middle;
border-left: 1px solid hsl(0deg 0% 88%);
}
#userlist-toggle-button {

59
web/styles/zulip.css
View File

@ -8,6 +8,11 @@ html {
touch-action: manipulation;
}
.column-middle,
#main_div {
background-color: var(--color-background);
}
#app-loading.loaded {
display: none !important; /* We are now loaded, by definition. */
}
@ -18,10 +23,9 @@ body {
font-family: "Source Sans 3", sans-serif;
}
/* Common background color */
body,
#message_view_header_underpadding {
background-color: hsl(0deg 0% 100%);
background-color: var(--color-background);
transition: background-color 200ms linear;
}
@ -61,15 +65,22 @@ body,
--color-background-private-message-header: hsl(46deg 35% 93%);
--color-text-private-message-header: hsl(0deg 0% 100%);
--color-background-private-message-content: hsl(45deg 20% 96%);
--color-background-stream-message-content: hsl(0deg 0% 100%);
--color-text-message-header: hsl(0deg 0% 15%);
--color-message-list-border: hsl(0deg 0% 80%);
--color-message-list-border: hsl(0deg 0% 0% / 10%);
--color-message-header-contents-border: hsl(0deg 0% 0% / 5%);
--color-message-header-icon-non-interactive: hsl(0deg 0% 0% / 30%);
--color-message-header-icon-interactive: hsl(0deg 0% 0%);
--color-background: hsl(0deg 0% 100%);
--color-background: hsl(0deg 0% 94%);
--color-background-direct-mention: hsl(240deg 52% 95%);
--color-background-group-mention: hsl(180deg 40% 94%);
--color-background-dropdown-input: hsl(0deg 0% 100%);
--color-text-dropdown-input: hsl(0deg 0% 13.33%);
--color-background-navbar: hsl(0deg 0% 96%);
--color-background-active-narrow-filter: hsl(202deg 56% 91%);
--color-background-hover-narrow-filter: hsl(120deg 12.3% 71.4% / 38%);
--color-navbar-bottom-border: hsl(0deg 0% 80%);
--color-unread-marker: hsl(217deg 100% 50%);
}
%dark-theme {
@ -78,15 +89,21 @@ body,
--color-background-private-message-header: hsl(46deg 15% 20%);
--color-text-private-message-header: hsl(0deg 0% 100%);
--color-background-private-message-content: hsl(46deg 10% 15%);
--color-background-stream-message-content: hsl(0deg 0% 14%);
--color-text-message-header: hsl(0deg 0% 100%);
--color-message-header-icon-non-interactive: hsl(0deg 0% 100% / 30%);
--color-message-header-icon-interactive: hsl(0deg 0% 100%);
--color-message-list-border: hsl(0deg 0% 7%);
--color-background: hsl(212deg 28% 18%);
--color-message-header-contents-border: hsl(0deg 0% 0% / 60%);
--color-background: hsl(0deg 0% 11%);
--color-background-direct-mention: hsl(240deg 13% 20%);
--color-background-group-mention: hsl(180deg 13% 15%);
--color-background-dropdown-input: hsl(225deg 6% 10%);
--color-text-dropdown-input: hsl(0deg 0% 95%);
--color-background-navbar: hsl(0deg 0% 13%);
--color-background-active-narrow-filter: hsl(200deg 17% 18%);
--color-background-hover-narrow-filter: hsl(136deg 25% 73% / 20%);
--color-navbar-bottom-border: hsl(0deg 0% 0% / 60%);
--color-unread-marker: hsl(217deg 100% 60%);
}
:root.dark-theme {
@ -305,11 +322,15 @@ p.n-margin {
width: 100%;
height: var(--header-height);
/* Since the headers are sticky, we need non-transparent background. */
background-color: hsl(0deg 0% 100%);
background-color: var(--color-background);
}
#top_navbar {
border-bottom: 1px solid hsl(0deg 0% 0% / 20%);
#navbar-middle .column-middle-inner,
#userlist-toggle-button,
.header-main,
#message_view_header {
background-color: var(--color-background-navbar);
box-shadow: inset 0 -1px 0 var(--color-navbar-bottom-border);
}
#navbar_alerts_wrapper {
@ -434,7 +455,6 @@ p.n-margin {
margin: 0 auto;
padding: 0;
position: relative;
background-color: hsl(0deg 0% 100%);
}
.column-right {
@ -970,7 +990,6 @@ td.pointer {
but it works. */
.alert-msg {
color: hsl(170deg 48% 54%);
background-color: hsl(0deg 0% 100%);
z-index: 999;
font-weight: 400;
display: none;
@ -1138,7 +1157,7 @@ td.pointer {
align-items: center;
justify-content: space-between;
height: 28px;
border: 1px solid var(--color-message-list-border);
border: 1px solid var(--color-message-header-contents-border);
border-radius: 7px 7px 0 0;
}
@ -1453,6 +1472,7 @@ td.pointer {
z-index: 2;
bottom: 1px;
transition: all 0.3s ease-out;
left: -1px;
&.slow_fade {
transition: all 2s ease-out;
@ -1464,7 +1484,7 @@ td.pointer {
}
.unread-marker-fill {
border-left: 2px solid hsl(107deg 74% 29%);
border-left: 2px solid var(--color-unread-marker);
height: 100%;
}
@ -1581,6 +1601,7 @@ div.message_table {
position: relative;
border-left: 1px solid var(--color-message-list-border);
border-right: 1px solid var(--color-message-list-border);
background-color: var(--color-background-stream-message-content);
&.group_mention {
background-color: var(--color-background-group-mention);
@ -1591,9 +1612,9 @@ div.message_table {
}
.date_row {
background-color: var(--color-background-stream-message-content);
/* We only want padding for the date rows between recipient blocks */
padding-bottom: 0;
background-color: var(--color-background);
& span {
font-size: calc(12em / 14);
@ -1813,11 +1834,6 @@ div.focused_table {
font-weight: bold;
}
.top-navbar-border {
border-right: 1px solid hsl(0deg 0% 88%);
border-left: 1px solid hsl(0deg 0% 88%);
}
.search_icon {
/* These rules match the .dropdown-toggle CSS for the gear menu. */
color: inherit;
@ -2071,7 +2087,6 @@ div.focused_table {
color: hsl(0deg 0% 52%);
display: block;
position: relative;
background-color: hsl(0deg 0% 89%);
width: 40px;
height: 19px;
padding-top: 12px;
@ -2729,7 +2744,6 @@ select.invite-as {
top: 0;
.right-sidebar {
background-color: hsl(0deg 0% 100%);
box-shadow: 0 -2px 3px 0 hsl(0deg 0% 0% / 10%);
border-left: 1px solid hsl(0deg 0% 87%);
@ -2740,6 +2754,7 @@ select.invite-as {
padding: var(--header-padding-bottom) 15px 0 15px;
height: 100%;
right: 0;
background-color: var(--color-background);
}
}
}
@ -2791,7 +2806,7 @@ select.invite-as {
top: 0;
.left-sidebar {
background-color: hsl(0deg 0% 100%);
background-color: var(--color-background);
box-shadow: 0 2px 3px 0 hsl(0deg 0% 0% / 10%);
border-right: 1px solid hsl(0deg 0% 87%);