mirror of https://github.com/zulip/zulip.git
555 lines
14 KiB
SCSS
555 lines
14 KiB
SCSS
body.night-mode {
|
|
background-color: hsl(212, 28%, 18%);
|
|
color: hsl(236, 33%, 90%);
|
|
-webkit-font-smoothing: antialiased;
|
|
|
|
.app-main,
|
|
.header-main,
|
|
#tab_bar_underpadding,
|
|
.floating_recipient .message-header-wrapper,
|
|
.column-middle,
|
|
#compose,
|
|
.column-left .left-sidebar,
|
|
.column-right .right-sidebar,
|
|
#subscription_overlay .right,
|
|
#settings_page .form-sidebar,
|
|
#settings_page .right {
|
|
background-color: hsl(212, 28%, 18%);
|
|
}
|
|
|
|
.message_embed .data-container::after {
|
|
background: linear-gradient(0deg, hsl(212, 28%, 18%), transparent 10%);
|
|
}
|
|
|
|
.column-left .left-sidebar,
|
|
#settings_page .form-sidebar,
|
|
.column-right .right-sidebar {
|
|
border-color: hsla(0, 0%, 0%, 0.2);
|
|
}
|
|
|
|
.dark .message_label_clickable.stream_label,
|
|
.dark .stream_label,
|
|
.stream_label {
|
|
color: hsl(212, 28%, 18%);
|
|
}
|
|
|
|
.new-style label.checkbox input[type=checkbox] ~ span {
|
|
border-color: hsla(0, 0%, 100%, 0.4);
|
|
}
|
|
|
|
.modal-bg {
|
|
background-color: hsl(212, 28%, 18%);
|
|
}
|
|
|
|
.streams_popover .sp-container {
|
|
background-color: transparent;
|
|
}
|
|
|
|
/* this one is because in the app we have blue and in night-mode it should be white. */
|
|
.popover a {
|
|
color: inherit;
|
|
}
|
|
|
|
.dark_background a,
|
|
a.dark_background:hover,
|
|
.dark_background,
|
|
.message_reactions .message_reaction_count,
|
|
.message_reactions .reaction_button i,
|
|
.message_reactions:hover .message_reaction + .reaction_button {
|
|
color: inherit !important;
|
|
}
|
|
|
|
/* this one makes the border of the reactions highlighted on hovering. */
|
|
.message_reaction:hover,
|
|
.reaction_button:hover {
|
|
border-color: hsl(0, 0%, 100%) !important;
|
|
}
|
|
|
|
/* do not turn the .message_header .stream_label text dark on hover because they're
|
|
on a dark background, and don't change the dark labels dark either. */
|
|
.message_header:not(.dark_background) a.stream_label:not(.dark_background):hover,
|
|
#tab_list li.stream:not(.dark_background) {
|
|
color: hsl(212, 28%, 18%) !important;
|
|
}
|
|
|
|
/* these are converting grey things to "new grey" */
|
|
*[disabled=disabled],
|
|
.sidebar-title,
|
|
.recipient_row_date {
|
|
color: inherit;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.new-style .button:not(.save-status),
|
|
.new-style .button[disabled=disabled]:hover,
|
|
input[type="text"],
|
|
input[type="email"],
|
|
input[type="password"],
|
|
input[type="number"],
|
|
input[type="url"],
|
|
input[type="date"],
|
|
textarea,
|
|
.new-style .tab-switcher .ind-tab:not(.selected),
|
|
select,
|
|
.pill-container {
|
|
background-color: hsla(0, 0%, 0%, 0.2);
|
|
border-color: hsla(0, 0%, 0%, 0.6);
|
|
color: inherit;
|
|
}
|
|
|
|
select option {
|
|
background-color: hsl(212, 28%, 18%);
|
|
color: hsl(236, 33%, 90%);
|
|
}
|
|
|
|
.topic-unread-count,
|
|
.private_message_count {
|
|
background-color: hsla(105, 2%, 50%, 0.5);
|
|
}
|
|
|
|
.pill-container {
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
}
|
|
|
|
#search_arrows .pill,
|
|
.pm_recipient .pill-container .pill {
|
|
color: inherit;
|
|
border: 1px solid hsla(0, 0%, 0%, 0.50);
|
|
background-color: hsla(0, 0%, 0%, 0.25);
|
|
font-weight: 600;
|
|
}
|
|
|
|
#search_arrows .pill:focus,
|
|
.pm_recipient .pill-container .pill:focus {
|
|
color: hsl(0, 0%, 100%);
|
|
border: 1px solid hsla(176, 78%, 28%, 0.6);
|
|
background-color: hsla(176, 49%, 42%, 0.4);
|
|
}
|
|
|
|
.new-style .button.no-style {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.new-style .tab-switcher .ind-tab.selected,
|
|
div.message_content thead,
|
|
.table-striped thead th,
|
|
.message_reactions .message_reaction.reacted,
|
|
.message_reactions:hover .message_reaction + .reaction_button {
|
|
background-color: hsla(0, 0%, 0%, 0.5);
|
|
border-color: hsla(0, 0%, 0%, 0.9);
|
|
}
|
|
|
|
/* this one makes the reacted reactions appear differently for the logged in user. */
|
|
.message_reactions .message_reaction.reacted {
|
|
background-color: hsl(200, 100%, 25%);
|
|
}
|
|
|
|
.message_reactions .message_reaction {
|
|
background-color: hsla(0, 0%, 0%, 0.2);
|
|
border-color: hsla(0, 0%, 0%, 0.5);
|
|
color: inherit;
|
|
}
|
|
|
|
.new-style .button:not(.save-status):focus,
|
|
input[type="text"]:focus,
|
|
input[type="email"]:focus,
|
|
input[type="number"]:focus,
|
|
textarea:focus,
|
|
textarea.new_message_textarea:focus,
|
|
.compose_table .recipient_box:focus {
|
|
border-color: hsla(0, 0%, 0%, 0.9);
|
|
}
|
|
|
|
.message-header-contents,
|
|
.message_header_private_message .message-header-contents,
|
|
#tab_list li.active {
|
|
background-color: hsla(0, 0%, 0%, 0.2);
|
|
}
|
|
|
|
.message-header-contents,
|
|
.message_header_private_message .message-header-contents {
|
|
border-color: transparent;
|
|
}
|
|
|
|
/* Not that .message_row (below) needs to be more contrast on dark mode */
|
|
.compose-content,
|
|
.message_list .recipient_row,
|
|
.message_row,
|
|
.draft-row .draft-info-box,
|
|
.preview_message_area {
|
|
border-color: hsla(0, 0%, 0%, 0.2);
|
|
}
|
|
|
|
#searchbox_legacy {
|
|
border-color: hsla(0, 0%, 0%, 0.6);
|
|
}
|
|
|
|
.overlay,
|
|
#stream_creation_form #stream_creating_indicator:not(:empty),
|
|
.emoji-popover-emoji:not(.reacted):focus {
|
|
background-color: hsla(212, 28%, 8%, 0.75);
|
|
}
|
|
|
|
.overlay .flex.overlay-content > div,
|
|
#settings_page,
|
|
.informational-overlays .overlay-content {
|
|
box-shadow: 0px 0px 30px hsl(212, 32%, 7%);
|
|
}
|
|
|
|
.dropdown .dropdown-menu,
|
|
.popover,
|
|
.popover-title,
|
|
.popover-content {
|
|
background-color: hsl(212, 32%, 14%);
|
|
}
|
|
|
|
.dropdown-menu a {
|
|
color: inherit;
|
|
}
|
|
|
|
.dropdown .dropdown-menu li.divider,
|
|
.popover hr,
|
|
hr {
|
|
color: hsl(212, 28%, 18%);
|
|
opacity: 0.2;
|
|
}
|
|
|
|
.nav .dropdown-menu::after,
|
|
.popover.bottom .arrow {
|
|
border-bottom-color: hsl(235, 18%, 7%);
|
|
}
|
|
|
|
.popover.left .arrow {
|
|
border-left-color: hsl(235, 18%, 7%);
|
|
}
|
|
|
|
.popover.top .arrow {
|
|
border-top-color: hsl(235, 18%, 7%);
|
|
}
|
|
|
|
.popover.right .arrow {
|
|
border-right-color: hsl(235, 18%, 7%);
|
|
}
|
|
|
|
#message_edit_tooltip,
|
|
.clear_search_button,
|
|
.clear_search_button:focus,
|
|
.clear_search_button:active,
|
|
.clear_search_button[disabled]:hover,
|
|
#user-groups .save-instructions,
|
|
#searchbox_legacy a.search_icon,
|
|
#searchbox_legacy .search_button,
|
|
#searchbox a.search_icon,
|
|
#searchbox .search_button,
|
|
.close,
|
|
ul.filters li:hover .arrow {
|
|
color: hsl(236, 33%, 80%);
|
|
}
|
|
|
|
#message_edit_tooltip:hover,
|
|
.clear_search_button:hover,
|
|
#searchbox_legacy a.search_icon:hover,
|
|
#searchbox_legacy .search_button:hover,
|
|
#searchbox a.search_icon:hover,
|
|
#searchbox .search_button:hover,
|
|
.close:hover,
|
|
ul.filters li .arrow:hover {
|
|
color: hsl(0, 0%, 100%);
|
|
}
|
|
|
|
#streamlist-toggle,
|
|
#userlist-toggle {
|
|
border-color: hsla(199, 33%, 46%, 0.2);
|
|
}
|
|
|
|
#streamlist-toggle-button,
|
|
#userlist-toggle-button {
|
|
color: inherit;
|
|
background-color: inherit;
|
|
}
|
|
|
|
li.active-filter,
|
|
li.active-sub-filter {
|
|
background-color: hsla(199, 33%, 46%, 0.2);
|
|
}
|
|
|
|
#global_filters li:hover,
|
|
#stream_filters li:hover,
|
|
#stream_filters li.highlighted_stream,
|
|
#group-pms li:hover,
|
|
#user_presences li:hover,
|
|
#user_presences li.highlighted_user {
|
|
background-color: hsla(136, 25%, 73%, 0.2);
|
|
}
|
|
|
|
#stream_filters li.active-sub-filter:hover {
|
|
background-color: hsla(136, 25%, 73%, 0.5);
|
|
}
|
|
|
|
.floating_recipient .recipient_row {
|
|
border-top: none;
|
|
}
|
|
|
|
.stream-row.active,
|
|
.emoji-showcase-container,
|
|
.emoji-popover-category-tabs,
|
|
.emoji-popover-top {
|
|
background-color: hsla(0, 0%, 0%, 0.2);
|
|
}
|
|
|
|
#searchbox,
|
|
#searchbox_legacy,
|
|
.drafts-header,
|
|
.nav > li > a:hover,
|
|
.subscriptions-header,
|
|
.grey-box,
|
|
.white-box,
|
|
.stream-email,
|
|
#settings_page .settings-header,
|
|
#settings_page .form-sidebar .title,
|
|
#settings_page .sidebar li.active,
|
|
#settings_page .sidebar .tab-container,
|
|
.table-striped tbody tr:nth-child(odd) td,
|
|
.table-striped tbody tr:nth-child(odd) th,
|
|
.modal-footer,
|
|
.modal-bg .modal-header {
|
|
border-color: hsla(0, 0%, 0%, 0.2);
|
|
background-color: hsla(0, 0%, 0%, 0.2);
|
|
}
|
|
|
|
.modal-footer {
|
|
-webkit-box-shadow: inset 0 1px 0 hsla(0, 0%, 0%, 0.2);
|
|
box-shadow: inset 0 1px 0 hsla(0, 0%, 0%, 0.2);
|
|
}
|
|
|
|
.subscriptions-container .right .display-type,
|
|
.stream-row,
|
|
.subscriptions-container .left .search-container,
|
|
.subscriptions-container .left,
|
|
.subscriber-list-box,
|
|
.subscriber-list tr,
|
|
#subscription_overlay ul.grey-box li,
|
|
#stream_privacy_modal ul.grey-box li,
|
|
#settings_page .sidebar,
|
|
#settings_page .sidebar *,
|
|
table,
|
|
table th,
|
|
table td {
|
|
border-color: hsla(0, 0%, 0%, 0.2);
|
|
}
|
|
|
|
.draft-row .draft-info-box,
|
|
.private-message .messagebox,
|
|
.message_header_private_message .message-header-contents {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.draft-row .message_header_private_message .message_label_clickable {
|
|
padding: 4px 6px 3px 6px;
|
|
color: inherit;
|
|
}
|
|
|
|
.nav-list > li > a,
|
|
.nav-list .nav-header {
|
|
text-shadow: none;
|
|
}
|
|
|
|
.mention .messagebox {
|
|
background-color: hsla(8, 78%, 43%, 0.15);
|
|
}
|
|
|
|
.user-mention,
|
|
.user-group-mention {
|
|
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, hsla(0, 0%, 0%, 0.1)), color-stop(100%, hsla(0, 0%, 0%, 0.0)));
|
|
background: -webkit-linear-gradient(top, hsla(0, 0%, 0%, 0.2) 0%, hsla(0, 0%, 0%, 0.1) 100%);
|
|
background: -o-linear-gradient(top, hsla(0, 0%, 0%, 0.2) 0%, hsla(0, 0%, 0%, 0.1) 100%);
|
|
background: -ms-linear-gradient(top, hsla(0, 0%, 0%, 0.2) 0%, hsla(0, 0%, 0%, 0.1) 100%);
|
|
background: linear-gradient(to bottom, hsla(0, 0%, 0%, 0.2) 0%, hsla(0, 0%, 0%, 0.1) 100%);
|
|
box-shadow: 0px 0px 0px 1px hsla(0, 0%, 0%, 0.4);
|
|
}
|
|
|
|
.user-mention-me :not(.silent) {
|
|
background-color: hsla(355, 37%, 31%, 1);
|
|
box-shadow: 0px 0px 0px 1px hsla(330, 40%, 20%, 1);
|
|
}
|
|
|
|
.tip {
|
|
color: inherit;
|
|
background-color: hsla(46, 28%, 38%, 0.27);
|
|
border: 1px solid hsl(49, 38%, 46%);
|
|
}
|
|
|
|
.alert.home-error-bar {
|
|
color: hsl(236, 33%, 90%);
|
|
background-color: hsla(35, 84%, 62%, 0.25);
|
|
border: 1px solid hsl(11, 46%, 54%);
|
|
}
|
|
|
|
.alert {
|
|
text-shadow: none;
|
|
}
|
|
|
|
.alert.alert-success {
|
|
color: inherit;
|
|
background-color: hsla(161, 60%, 46%, 0.20);
|
|
border-color: hsl(165, 68%, 37%);
|
|
}
|
|
|
|
.alert.alert-error,
|
|
.alert.alert-danger {
|
|
background-color: hsl(318, 12%, 21%);
|
|
color: inherit;
|
|
border: 1px solid hsl(0, 75%, 65%);
|
|
}
|
|
|
|
.alert .close {
|
|
color: inherit;
|
|
}
|
|
|
|
.alert-box .alert,
|
|
.alert.alert-error {
|
|
background-color: hsl(318, 12%, 21%);
|
|
color: inherit;
|
|
border: 1px solid hsl(0, 75%, 65%);
|
|
}
|
|
|
|
.alert-box .alert.alert-error::before {
|
|
color: 1px solid hsl(0, 75%, 65%);
|
|
}
|
|
|
|
/* Popover: */
|
|
.hotspot.overlay .hotspot-popover,
|
|
#hotspot_intro_reply_icon {
|
|
border-color: hsla(0, 0%, 0%, 0.2) !important;
|
|
/* Based on the `.hotspot-popover` shadow in `hotspots.css`, but with a new
|
|
color. */
|
|
box-shadow: 0 5px 10px hsla(0, 0%, 0%, 0.4);
|
|
}
|
|
|
|
/* Arrows: */
|
|
.hotspot.overlay .hotspot-popover.arrow-right::before {
|
|
border-left-color: hsla(0, 0%, 0%, 0.2);
|
|
}
|
|
|
|
.hotspot.overlay .hotspot-popover.arrow-right::after {
|
|
border-left-color: hsl(212, 28%, 18%);
|
|
}
|
|
|
|
.hotspot.overlay .hotspot-popover.arrow-bottom::before {
|
|
border-top-color: hsla(0, 0%, 0%, 0.2);
|
|
}
|
|
|
|
.hotspot.overlay .hotspot-popover.arrow-bottom::after {
|
|
border-top-color: hsl(212, 28%, 18%);
|
|
}
|
|
|
|
.hotspot.overlay .hotspot-popover.arrow-left::before {
|
|
border-right-color: hsla(0, 0%, 0%, 0.2);
|
|
}
|
|
|
|
.hotspot.overlay .hotspot-popover.arrow-left::after {
|
|
border-right-color: hsl(212, 28%, 18%);
|
|
}
|
|
|
|
.hotspot.overlay .hotspot-popover.arrow-top::before {
|
|
border-bottom-color: hsla(0, 0%, 0%, 0.2);
|
|
}
|
|
|
|
.hotspot.overlay .hotspot-popover.arrow-top::after {
|
|
border-bottom-color: hsl(212, 28%, 18%);
|
|
}
|
|
|
|
/* Content: */
|
|
.hotspot.overlay .hotspot-popover .hotspot-popover-content,
|
|
#hotspot_intro_reply_icon,
|
|
.hotspot.overlay .hotspot-popover .hotspot-popover-bottom {
|
|
background-color: hsl(212, 28%, 18%);
|
|
}
|
|
|
|
.top-messages-logo svg path {
|
|
fill: hsl(214, 27%, 18%);
|
|
stroke: hsl(214, 27%, 18%);
|
|
}
|
|
|
|
.top-messages-logo svg circle {
|
|
fill: hsl(0, 0%, 100%);
|
|
stroke: hsl(0, 0%, 100%);
|
|
}
|
|
|
|
.history-limited-box {
|
|
background-color: rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
#feedback_container,
|
|
.message_content code,
|
|
.message_edit_content code,
|
|
.preview_content code,
|
|
#settings_page code,
|
|
.typeahead.dropdown-menu {
|
|
background-color: hsl(212, 25%, 15%);
|
|
border-color: hsla(0, 0%, 0%, 0.5);
|
|
color: inherit;
|
|
}
|
|
|
|
.highlight {
|
|
background-color: hsla(51, 100%, 64%, 0.42);
|
|
}
|
|
|
|
.highlight_text_inserted {
|
|
color: hsl(122, 100%, 81%);
|
|
background-color: hsla(120, 64%, 95%, 0.3);
|
|
}
|
|
|
|
.highlight_text_deleted {
|
|
text-decoration: line-through;
|
|
background-color: hsla(7, 54%, 62%, 0.38);
|
|
}
|
|
|
|
.sub-unsub-message span::before,
|
|
.sub-unsub-message span::after,
|
|
.date_row span::before,
|
|
.date_row span::after {
|
|
opacity: 0.2;
|
|
}
|
|
|
|
.star:not(.empty-star),
|
|
.empty-star:hover {
|
|
color: hsla(126, 66%, 72%, 0.75);
|
|
}
|
|
|
|
#out-of-view-notification {
|
|
border: 1px solid 1px solid hsl(144, 45%, 62%);
|
|
}
|
|
|
|
.email_tooltip {
|
|
background-color: hsl(211, 16%, 30%);
|
|
}
|
|
|
|
.email_tooltip::after {
|
|
border-bottom-color: hsl(211, 16%, 30%) !important;
|
|
}
|
|
|
|
.ps__rail-y {
|
|
background-color: hsl(212, 28%, 18%);
|
|
}
|
|
|
|
#bots_lists_navbar .active a {
|
|
color: hsl(0, 0%, 87%);
|
|
background-color: hsl(212, 28%, 18%);
|
|
border-color: hsl(0, 0%, 87%);
|
|
border-bottom-color: transparent;
|
|
}
|
|
|
|
.searching-for-more-topics img {
|
|
-webkit-filter: invert(100%);
|
|
filter: invert(100%);
|
|
}
|
|
}
|
|
|
|
@-moz-document url-prefix() {
|
|
body.night-mode #settings_page select {
|
|
background-color: hsla(0, 0%, 0%, 0.2);
|
|
}
|
|
}
|