mirror of https://github.com/zulip/zulip.git
1524 lines
37 KiB
CSS
1524 lines
37 KiB
CSS
@import url("flatpickr/dist/themes/dark.css");
|
|
|
|
%dark-theme {
|
|
color-scheme: dark;
|
|
|
|
body {
|
|
color: hsl(236, 33%, 90%);
|
|
}
|
|
|
|
.placeholder {
|
|
color: hsl(0, 0%, 55%);
|
|
opacity: 1;
|
|
}
|
|
|
|
textarea::placeholder,
|
|
input::placeholder {
|
|
@extend .placeholder;
|
|
}
|
|
|
|
a:hover {
|
|
color: hsl(200, 79%, 66%);
|
|
}
|
|
|
|
ul.filters a:hover {
|
|
color: inherit;
|
|
}
|
|
|
|
/************************* MODAL DARK THEME *******************/
|
|
.dialog_cancel_button {
|
|
background-color: hsl(211, 29%, 14%);
|
|
color: hsl(0, 0%, 100%);
|
|
border: 1px solid hsla(0, 0%, 0%, 0.6);
|
|
}
|
|
|
|
.modal__btn:disabled {
|
|
opacity: 1;
|
|
background-color: hsla(0, 0%, 83%, 0.5);
|
|
}
|
|
|
|
.modal__content.simplebar-scrollable-y + .modal__footer {
|
|
border-top: 1px solid hsla(0, 0%, 100%, 0.2);
|
|
}
|
|
|
|
.modal-bg,
|
|
.modal__container {
|
|
background-color: hsl(212, 28%, 18%);
|
|
}
|
|
|
|
.modal__close {
|
|
&::before {
|
|
color: hsl(236, 33%, 90%);
|
|
}
|
|
|
|
&:hover {
|
|
background: hsla(0, 0%, 91%, 0.1);
|
|
}
|
|
}
|
|
|
|
.modal-footer {
|
|
box-shadow: inset 0 1px 0 hsla(0, 0%, 0%, 0.2);
|
|
}
|
|
|
|
.enter_sends,
|
|
.enter_sends_choices {
|
|
color: hsl(236, 33%, 90%);
|
|
|
|
kbd {
|
|
background-color: hsl(211, 29%, 14%);
|
|
border-color: hsl(211, 29%, 14%);
|
|
box-shadow: inset 0 -1px 0 hsl(210, 5%, 34%, 0.2);
|
|
text-shadow: none;
|
|
color: hsl(236, 33%, 90%);
|
|
}
|
|
|
|
.enter_sends_minor {
|
|
color: hsl(0, 0%, 80%);
|
|
}
|
|
}
|
|
|
|
table.table-striped thead.table-sticky-headers th {
|
|
background-color: hsl(0, 0%, 0%);
|
|
|
|
&[data-sort]:hover {
|
|
background-color: hsl(211, 29%, 14%) !important;
|
|
}
|
|
}
|
|
|
|
/* Extend the 'light-border' TippyJS theme, which is intended for
|
|
popovers/menus that should use default background colors, to use
|
|
our dark theme colors in Zulip's dark theme.
|
|
*/
|
|
.tippy-box[data-theme~="light-border"] {
|
|
.tippy-content a {
|
|
color: hsl(236, 33%, 90%);
|
|
|
|
&.compose_control_button:hover {
|
|
color: hsl(200, 79%, 66%);
|
|
}
|
|
}
|
|
|
|
&[data-placement^="top"] {
|
|
> .tippy-arrow {
|
|
&::before {
|
|
border-top-color: hsl(235, 18%, 7%);
|
|
}
|
|
}
|
|
}
|
|
|
|
&[data-placement^="bottom"] {
|
|
> .tippy-arrow {
|
|
&::before {
|
|
border-bottom-color: hsl(235, 18%, 7%);
|
|
}
|
|
}
|
|
}
|
|
|
|
&[data-placement^="left"] {
|
|
> .tippy-arrow {
|
|
&::before {
|
|
border-left-color: hsl(235, 18%, 7%);
|
|
}
|
|
}
|
|
}
|
|
|
|
&[data-placement^="right"] {
|
|
> .tippy-arrow {
|
|
&::before {
|
|
border-right-color: hsl(235, 18%, 7%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tippy-box:not([data-theme]) {
|
|
background: hsla(0, 0%, 0%, 1);
|
|
|
|
&[data-placement^="top"] > .tippy-arrow::before {
|
|
border-top-color: hsla(0, 0%, 0%, 1);
|
|
}
|
|
|
|
&[data-placement^="bottom"] > .tippy-arrow::before {
|
|
border-bottom-color: hsla(0, 0%, 0%, 1);
|
|
}
|
|
|
|
&[data-placement^="left"] > .tippy-arrow::before {
|
|
border-left-color: hsla(0, 0%, 0%, 1);
|
|
}
|
|
|
|
&[data-placement^="right"] > .tippy-arrow::before {
|
|
border-right-color: hsla(0, 0%, 0%, 1);
|
|
}
|
|
}
|
|
|
|
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,
|
|
.message_header,
|
|
.header {
|
|
background-color: hsl(212, 28%, 18%);
|
|
}
|
|
|
|
#scroll-to-bottom-button-container {
|
|
background: transparent;
|
|
|
|
span {
|
|
color: hsl(0, 0%, 27%);
|
|
}
|
|
}
|
|
|
|
.compose_banner {
|
|
.above_compose_banner_action_link {
|
|
color: hsl(200, 100%, 50%);
|
|
}
|
|
|
|
&.success {
|
|
background-color: hsl(147, 100%, 8%);
|
|
border-color: hsla(149, 48%, 52%, 0.4);
|
|
color: hsl(147, 51%, 80%);
|
|
|
|
.compose_banner_close_button {
|
|
color: hsl(147, 51%, 55%, 0.5);
|
|
|
|
&:hover {
|
|
color: hsl(147, 51%, 55%);
|
|
}
|
|
|
|
&:active {
|
|
color: hsl(147, 51%, 55%, 0.75);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.warning {
|
|
background-color: hsl(53, 100%, 11%);
|
|
border-color: hsla(38, 44%, 60%, 0.4);
|
|
color: hsl(50, 45%, 80%);
|
|
|
|
.compose_banner_close_button {
|
|
color: hsl(50, 45%, 61%, 0.5);
|
|
|
|
&:hover {
|
|
color: hsl(50, 45%, 61%);
|
|
}
|
|
|
|
&:active {
|
|
color: hsl(50, 45%, 61%, 0.75);
|
|
}
|
|
}
|
|
|
|
.compose_banner_action_button {
|
|
background-color: hsla(50, 45%, 61%, 0.1);
|
|
color: hsl(50, 45%, 61%);
|
|
|
|
&:hover {
|
|
background-color: hsla(50, 45%, 61%, 0.15);
|
|
}
|
|
|
|
&:active {
|
|
background-color: hsla(50, 45%, 61%, 0.2);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.error {
|
|
background-color: hsl(0, 60%, 19%);
|
|
border-color: hsla(3, 73%, 74%, 0.4);
|
|
color: hsl(3, 73%, 80%);
|
|
|
|
.compose_banner_close_button {
|
|
color: hsla(3, 73%, 74%, 0.5);
|
|
|
|
&:hover {
|
|
color: hsl(3, 73%, 74%);
|
|
}
|
|
|
|
&:active {
|
|
color: hsl(3, 73%, 74%, 0.75);
|
|
}
|
|
}
|
|
|
|
.compose_banner_action_button {
|
|
background-color: hsla(3, 73%, 74%, 0.1);
|
|
color: hsl(3, 73%, 74%);
|
|
|
|
&:hover {
|
|
background: hsla(3, 73%, 74%, 0.15);
|
|
}
|
|
|
|
&:active {
|
|
background: hsla(3, 73%, 74%, 0.2);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.info {
|
|
background-color: hsl(204, 100%, 12%);
|
|
border-color: hsla(205, 58%, 69%, 0.4);
|
|
position: relative;
|
|
color: hsl(205, 58%, 80%);
|
|
|
|
.compose_banner_close_button {
|
|
color: hsla(205, 58%, 69%, 0.5);
|
|
|
|
&:hover {
|
|
color: hsl(205, 58%, 69%);
|
|
}
|
|
|
|
&:active {
|
|
color: hsla(205, 58%, 69%, 0.75);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.upload_banner {
|
|
.moving_bar {
|
|
background: hsl(204, 63%, 18%);
|
|
}
|
|
}
|
|
|
|
textarea.new_message_textarea {
|
|
&.invalid,
|
|
&.invalid:focus {
|
|
border-color: hsl(3, 73%, 74%);
|
|
box-shadow: 0 0 2px hsl(3, 73%, 74%);
|
|
}
|
|
}
|
|
|
|
.message_embed .data-container::after {
|
|
background: linear-gradient(0deg, hsl(212, 28%, 18%), transparent 100%);
|
|
}
|
|
|
|
.column-left .left-sidebar,
|
|
.stream_name_search_section,
|
|
.group_name_search_section,
|
|
.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);
|
|
}
|
|
|
|
.streams_popover .sp-container {
|
|
background-color: transparent;
|
|
|
|
button {
|
|
background-color: hsl(208, 35%, 11%);
|
|
border: 1px solid hsl(210, 36%, 4%);
|
|
color: hsl(236, 31%, 90%);
|
|
}
|
|
|
|
.sp-picker-container {
|
|
border-left: solid 1px hsl(210, 36%, 4%);
|
|
}
|
|
}
|
|
|
|
/* this one is because in the app we have blue and in dark-theme 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;
|
|
}
|
|
|
|
/* 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(212, 28%, 18%);
|
|
}
|
|
|
|
.private-message .alert-msg {
|
|
background-color: hsl(208, 17%, 29%);
|
|
}
|
|
|
|
.active_private_messages_section {
|
|
#private_messages_section,
|
|
#private_messages_list,
|
|
#hide_more_private_messages {
|
|
background-color: hsla(199, 33%, 46%, 0.2);
|
|
}
|
|
}
|
|
|
|
/* 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 {
|
|
color: hsl(212, 28%, 18%);
|
|
}
|
|
|
|
.message_header {
|
|
box-shadow: 0 -1px 0 0 hsl(212, 28%, 18%);
|
|
}
|
|
|
|
/* these are converting grey things to "new grey" */
|
|
:disabled,
|
|
input:not([type="radio"]):read-only,
|
|
textarea:read-only {
|
|
color: inherit;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.sidebar-title {
|
|
color: inherit;
|
|
opacity: 0.75;
|
|
}
|
|
|
|
.rendered_markdown button,
|
|
.new-style .button {
|
|
background-color: hsla(0, 0%, 0%, 0.2);
|
|
|
|
&:not(
|
|
.sea-green,
|
|
.btn-danger,
|
|
.btn-warning,
|
|
.btn-link,
|
|
.poll-vote,
|
|
button.poll-option,
|
|
button.add-task
|
|
) {
|
|
border-color: hsla(0, 0%, 0%, 0.6);
|
|
color: inherit;
|
|
}
|
|
|
|
&.btn-link {
|
|
border-color: hsla(0, 0%, 0%, 0.6);
|
|
color: hsl(200, 79%, 66%);
|
|
}
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
background-color: hsla(0, 0%, 0%, 0.15);
|
|
}
|
|
}
|
|
|
|
.rendered_markdown .message_inline_image {
|
|
background: hsla(0, 0%, 100%, 0.03);
|
|
|
|
&:hover {
|
|
background: hsla(0, 0%, 100%, 0.15);
|
|
}
|
|
}
|
|
|
|
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,
|
|
.user_status_content_wrapper {
|
|
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%);
|
|
}
|
|
|
|
.unread_count,
|
|
/* The actions_popover unread_count object has its own variable CSS,
|
|
and thus needs to be repeated here with all three classes for precedence) */
|
|
.actions_popover .mark_as_unread .unread_count {
|
|
background-color: hsla(105, 2%, 50%, 0.5);
|
|
}
|
|
|
|
.pill-container {
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
}
|
|
|
|
.deactivated-pill {
|
|
background-color: hsl(0, 86%, 14%) !important;
|
|
}
|
|
|
|
#search_arrows .pill,
|
|
.pm_recipient .pill-container .pill {
|
|
color: inherit;
|
|
border: 1px solid hsla(0, 0%, 0%, 0.5);
|
|
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;
|
|
}
|
|
|
|
.create_user_group_plus_button,
|
|
.create_stream_plus_button {
|
|
color: hsl(0, 0%, 100%);
|
|
background-color: hsla(0, 0%, 0%, 0.2);
|
|
border-color: hsla(0, 0%, 0%, 0.6);
|
|
}
|
|
|
|
.emoji-info-popover
|
|
.emoji-popover
|
|
.emoji-popover-category-tabs
|
|
.emoji-popover-tab-item.active {
|
|
background-color: hsla(0, 0%, 0%, 0.5);
|
|
}
|
|
|
|
.new-style .tab-switcher .ind-tab.selected,
|
|
div.message_content thead,
|
|
.table-striped thead th,
|
|
.emoji-popover .reaction.reacted,
|
|
.message_reactions .message_reaction.reacted {
|
|
background-color: hsla(0, 0%, 0%, 0.5);
|
|
border-color: hsla(0, 0%, 0%, 0.9);
|
|
}
|
|
|
|
.ind-tab.disabled {
|
|
color: hsla(0, 0%, 42%, 0.9) !important;
|
|
}
|
|
|
|
.message_reactions:hover .message_reaction + .reaction_button,
|
|
.message_reactions .message_reaction {
|
|
background-color: transparent;
|
|
border-color: hsla(0, 0%, 0%, 0.8);
|
|
color: inherit;
|
|
|
|
&:hover {
|
|
border-color: hsl(236, 33%, 90%);
|
|
}
|
|
}
|
|
|
|
.emoji-popover .reaction:focus {
|
|
box-shadow: 0 0 1px hsl(0, 0%, 98%);
|
|
}
|
|
|
|
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 {
|
|
background-color: hsla(0, 0%, 0%, 0.2);
|
|
border-color: transparent;
|
|
}
|
|
|
|
.compose_control_buttons_container .divider {
|
|
color: hsla(236, 33%, 90%, 0.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: hsla(0, 0%, 0%, 0.2);
|
|
}
|
|
|
|
.recipient_row {
|
|
.message_row.unread {
|
|
.date_row {
|
|
background-color: hsl(212, 28%, 18%);
|
|
}
|
|
}
|
|
|
|
.private-message.unread {
|
|
.date_row {
|
|
background-color: hsl(208, 17%, 29%);
|
|
}
|
|
}
|
|
|
|
.message_row.unread ~ .message_row.unread {
|
|
.date_row {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
.private-message.unread ~ .private-message.unread {
|
|
.date_row {
|
|
background-color: hsl(208, 17%, 29%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.spectator_narrow_login_button,
|
|
.top-navbar-border {
|
|
border-color: hsla(0, 0%, 0%, 0.6);
|
|
}
|
|
|
|
#message_view_header .sub_count {
|
|
&::before,
|
|
&::after {
|
|
color: hsla(0, 0%, 100%, 0.5);
|
|
}
|
|
}
|
|
|
|
#message_view_header .stream {
|
|
color: hsl(236, 33%, 90%);
|
|
}
|
|
|
|
#message_view_header .sub_count,
|
|
#message_view_header .narrow_description {
|
|
color: hsla(0, 0%, 90%, 1);
|
|
}
|
|
|
|
div.overlay,
|
|
#subscription_overlay
|
|
#stream-creation
|
|
#stream_creation_form
|
|
#stream_creating_indicator:not(:empty),
|
|
#groups_overlay
|
|
#user-group-creation
|
|
#user_group_creation_form
|
|
#user_group_creating_indicator:not(:empty),
|
|
.emoji-info-popover
|
|
.emoji-popover
|
|
.emoji-popover-emoji:not(.reacted):focus {
|
|
background-color: hsla(212, 28%, 8%, 0.75);
|
|
}
|
|
|
|
div.overlay .flex.overlay-content > div,
|
|
.dropdown-menu.typeahead,
|
|
#settings_page,
|
|
.informational-overlays .overlay-content {
|
|
box-shadow: 0 0 30px hsl(212, 32%, 7%);
|
|
}
|
|
|
|
.tippy-box[data-theme~="light-border"],
|
|
.dropdown-menu ul,
|
|
.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;
|
|
}
|
|
|
|
#gear_menu_about_zulip {
|
|
.white_zulip_icon_without_text {
|
|
filter: invert(10%) sepia(16%) saturate(175%) hue-rotate(194deg)
|
|
brightness(99%) contrast(89%);
|
|
}
|
|
}
|
|
|
|
#gear-menu {
|
|
.dark-theme {
|
|
display: none;
|
|
}
|
|
|
|
.light-theme {
|
|
display: block;
|
|
}
|
|
|
|
.dropdown-menu a:hover {
|
|
color: hsl(0, 0%, 100%);
|
|
}
|
|
}
|
|
|
|
.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%);
|
|
}
|
|
|
|
.narrow_to_compose_recipients,
|
|
.expand_composebox_button,
|
|
.collapse_composebox_button,
|
|
#message_edit_tooltip,
|
|
.clear_search_button,
|
|
.clear_search_button:focus,
|
|
.clear_search_button:active,
|
|
.clear_search_button:disabled:hover,
|
|
#user-groups .save-instructions,
|
|
.close,
|
|
#user_presences li:hover .user-list-sidebar-menu-icon,
|
|
li.top_left_all_messages:hover .all-messages-sidebar-menu-icon,
|
|
li.top_left_starred_messages:hover .starred-messages-sidebar-menu-icon,
|
|
li.top_left_drafts:hover .drafts-sidebar-menu-icon,
|
|
#stream_filters li:hover .stream-sidebar-menu-icon,
|
|
li.topic-list-item:hover .topic-sidebar-menu-icon {
|
|
color: hsl(236, 33%, 80%);
|
|
}
|
|
|
|
#message_edit_tooltip:hover,
|
|
.clear_search_button:hover {
|
|
color: hsl(0, 0%, 100%);
|
|
}
|
|
|
|
.spectator_login_buttons a {
|
|
color: hsl(236, 33%, 90%);
|
|
|
|
&:hover {
|
|
color: hsl(0, 0%, 100%);
|
|
}
|
|
}
|
|
|
|
.spectator_narrow_login_button .login_button i {
|
|
color: hsl(236, 33%, 90%);
|
|
}
|
|
|
|
#user_presences li .user-list-sidebar-menu-icon:hover,
|
|
.all-messages-sidebar-menu-icon:hover,
|
|
.starred-messages-sidebar-menu-icon:hover,
|
|
.drafts-sidebar-menu-icon:hover,
|
|
.stream-sidebar-menu-icon:hover,
|
|
.topic-sidebar-menu-icon:hover {
|
|
color: hsl(0, 0%, 100%) !important;
|
|
}
|
|
|
|
#streamlist-toggle,
|
|
#userlist-toggle {
|
|
color: inherit;
|
|
border-color: hsla(0, 0%, 0%, 0.6);
|
|
}
|
|
|
|
#streamlist-toggle-button {
|
|
color: inherit;
|
|
background-color: inherit;
|
|
}
|
|
|
|
#userlist-toggle-button {
|
|
color: hsl(221, 9%, 54%);
|
|
|
|
&:hover {
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
li.active-filter,
|
|
li.active-sub-filter {
|
|
background-color: hsla(199, 33%, 46%, 0.2);
|
|
}
|
|
|
|
:not(.active-sub-filter) {
|
|
&.top_left_row:hover,
|
|
&.bottom_left_row:hover,
|
|
&#stream_filters li.highlighted_stream {
|
|
background-color: hsla(136, 25%, 73%, 0.2);
|
|
}
|
|
}
|
|
|
|
#stream_filters .narrow-filter.active-filter {
|
|
.topic-list .filter-topics,
|
|
> .bottom_left_row {
|
|
background-color: hsl(208, 31%, 24%);
|
|
}
|
|
}
|
|
|
|
.zoom-in {
|
|
#topics_header,
|
|
.narrow-filter > .bottom_left_row,
|
|
#stream_filters .topic-list .filter-topics {
|
|
background-color: hsl(212, 28%, 18%);
|
|
}
|
|
}
|
|
|
|
#topics_header {
|
|
.show-all-streams {
|
|
color: hsl(236, 33%, 90%);
|
|
opacity: 0.75;
|
|
}
|
|
}
|
|
|
|
#user_presences li:hover,
|
|
#user_presences li.highlighted_user {
|
|
background-color: hsla(136, 25%, 73%, 0.2);
|
|
}
|
|
|
|
.group-row.active,
|
|
.stream-row.active,
|
|
.emoji-info-popover .emoji-showcase-container,
|
|
.emoji-info-popover .emoji-popover .emoji-popover-category-tabs,
|
|
.emoji-info-popover .emoji-popover .emoji-popover-top {
|
|
background-color: hsla(0, 0%, 0%, 0.2);
|
|
}
|
|
|
|
.recent_topics_participant_overflow {
|
|
color: hsl(0, 0%, 100%) !important;
|
|
background-color: hsl(211, 18%, 25%) !important;
|
|
}
|
|
|
|
.recent_topics_container #recent_topics_table .btn-recent-filters {
|
|
background-color: hsl(211, 29%, 14%);
|
|
border-color: hsl(0, 0%, 0%);
|
|
color: hsl(0, 0%, 100%);
|
|
|
|
&:focus {
|
|
background-color: hsla(0, 0%, 0%, 0.5) !important;
|
|
outline: 0;
|
|
}
|
|
|
|
&.fake_disabled_button {
|
|
cursor: not-allowed;
|
|
opacity: 0.5;
|
|
|
|
&:hover {
|
|
background-color: hsla(0, 0%, 0%, 0.5);
|
|
border-color: hsl(0, 0%, 0%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.recent_topics_container {
|
|
background-color: hsl(212, 28%, 18%) !important;
|
|
}
|
|
|
|
#recent_topics_table tr {
|
|
background-color: hsl(212, 28%, 18%);
|
|
|
|
&:hover {
|
|
background-color: hsl(208, 26%, 11%, 0.6);
|
|
}
|
|
}
|
|
|
|
#recent_topics_table .unread_topic {
|
|
background-color: hsla(212, 30%, 22%, 0.6);
|
|
}
|
|
|
|
.btn-recent-selected,
|
|
#recent_topics_table thead th {
|
|
background-color: hsl(0, 0%, 0%) !important;
|
|
|
|
&[data-sort]:hover {
|
|
background-color: hsl(211, 29%, 14%) !important;
|
|
}
|
|
}
|
|
|
|
#recent_topics_table td a {
|
|
color: hsl(206, 89%, 74%);
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
color: hsl(208, 64%, 52%);
|
|
}
|
|
}
|
|
|
|
#recent_topics_table {
|
|
border-color: hsla(0, 0%, 0%, 0.6);
|
|
|
|
.fa-envelope,
|
|
.fa-group {
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
|
|
thead,
|
|
.drafts-container .drafts-header,
|
|
.nav > li > a:focus,
|
|
.nav > li > a:hover,
|
|
.subscriptions-container .subscriptions-header,
|
|
.user-groups-container .user-groups-header,
|
|
.grey-box,
|
|
.white-box,
|
|
.stream-email,
|
|
#settings_page .settings-header,
|
|
#settings_page .sidebar li.active,
|
|
#settings_page .sidebar-wrapper .tab-container,
|
|
.table-striped tbody tr:nth-child(even) 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);
|
|
}
|
|
|
|
.table-striped tbody tr:nth-child(odd) td {
|
|
background-color: hsl(212, 28%, 18%);
|
|
}
|
|
|
|
.user-groups-container .right .display-type,
|
|
.subscriptions-container .right .display-type,
|
|
.stream-row,
|
|
.group-row,
|
|
.subscriptions-container .left .search-container,
|
|
.subscriptions-container .left,
|
|
.user-groups-container .left,
|
|
.subscriber-list-box,
|
|
.subscriber-list-box .subscriber_list_container .subscriber-list tr,
|
|
.member-list-box,
|
|
.member-list-box .member_list_container .member-list tr,
|
|
#subscription_overlay .subsection-parent div,
|
|
#subscription_overlay .settings-radio-input-parent,
|
|
#settings_page .sidebar-wrapper,
|
|
#settings_page .sidebar-wrapper *,
|
|
table,
|
|
table th,
|
|
table td {
|
|
border-color: hsla(0, 0%, 0%, 0.2);
|
|
}
|
|
|
|
.draft-row .draft-info-box,
|
|
.message_header_private_message .message-header-contents {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.draft-row .message_header_private_message .message_label_clickable {
|
|
padding: 4px 6px 3px;
|
|
color: inherit;
|
|
}
|
|
|
|
.nav-list > li > a,
|
|
.nav-list .nav-header {
|
|
text-shadow: none;
|
|
}
|
|
|
|
.group_mention .messagebox,
|
|
.direct_mention .messagebox {
|
|
background-color: hsla(8, 78%, 43%, 0.15);
|
|
}
|
|
|
|
.rendered_markdown {
|
|
.user-mention,
|
|
.user-group-mention {
|
|
background: linear-gradient(
|
|
to bottom,
|
|
hsla(0, 0%, 0%, 0.2) 0%,
|
|
hsla(0, 0%, 0%, 0.1) 100%
|
|
);
|
|
box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.4);
|
|
}
|
|
|
|
.user-mention-me :not(.silent) {
|
|
background-color: hsla(355, 37%, 31%, 1);
|
|
box-shadow: 0 0 0 1px hsla(330, 40%, 20%, 1);
|
|
}
|
|
|
|
.codehilite code,
|
|
.codehilite pre {
|
|
color: hsl(212, 100%, 82%);
|
|
background-color: hsl(212, 25%, 15%);
|
|
}
|
|
|
|
.codehilite .hll {
|
|
background-color: hsl(0, 0%, 13%);
|
|
}
|
|
|
|
.codehilite .err {
|
|
color: hsl(1, 67%, 66%);
|
|
background-color: hsl(0, 7%, 22%);
|
|
}
|
|
|
|
.codehilite .k {
|
|
color: hsl(31, 85%, 59%);
|
|
}
|
|
|
|
.codehilite .p {
|
|
color: hsl(179, 27%, 35%);
|
|
}
|
|
|
|
.codehilite .cs {
|
|
color: hsl(0, 100%, 40%);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.codehilite .gd {
|
|
color: hsl(0, 100%, 40%);
|
|
}
|
|
|
|
.codehilite .ge {
|
|
color: hsl(0, 0%, 80%);
|
|
font-style: italic;
|
|
}
|
|
|
|
.codehilite .gr {
|
|
color: hsl(0, 100%, 50%);
|
|
}
|
|
|
|
.codehilite .go {
|
|
color: hsl(0, 0%, 50%);
|
|
}
|
|
|
|
.codehilite .gs {
|
|
color: hsl(0, 0%, 80%);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.codehilite .gu {
|
|
color: hsl(300, 100%, 25%);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.codehilite .gt {
|
|
color: hsl(222, 100%, 41%);
|
|
}
|
|
|
|
.codehilite .kc {
|
|
color: hsl(0, 45%, 75%);
|
|
}
|
|
|
|
.codehilite .kd {
|
|
color: hsl(60, 100%, 76%);
|
|
}
|
|
|
|
.codehilite .kn {
|
|
color: hsl(24, 56%, 72%);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.codehilite .kp {
|
|
color: hsl(62, 36%, 71%);
|
|
}
|
|
|
|
.codehilite .kr {
|
|
color: hsl(359, 58%, 56%);
|
|
}
|
|
|
|
.codehilite .ni {
|
|
color: hsl(359, 35%, 63%);
|
|
}
|
|
|
|
.codehilite .ne {
|
|
color: hsl(53, 23%, 69%);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.codehilite .nn {
|
|
color: hsl(204, 54%, 72%);
|
|
}
|
|
|
|
.codehilite .vi {
|
|
color: hsl(60, 100%, 89%);
|
|
}
|
|
|
|
.codehilite .c,
|
|
.codehilite .g,
|
|
.codehilite .cm,
|
|
.codehilite .cp,
|
|
.codehilite .c1 {
|
|
color: hsl(209, 15%, 55%);
|
|
}
|
|
|
|
.codehilite .l,
|
|
.codehilite .x,
|
|
.codehilite .no,
|
|
.codehilite .nd,
|
|
.codehilite .nl,
|
|
.codehilite .nx,
|
|
.codehilite .py,
|
|
.codehilite .w {
|
|
color: hsl(0, 0%, 80%);
|
|
}
|
|
|
|
.codehilite .n,
|
|
.codehilite .nv,
|
|
.codehilite .vg {
|
|
color: hsl(60, 19%, 83%);
|
|
}
|
|
|
|
.codehilite .o,
|
|
.codehilite .ow {
|
|
color: hsl(58, 52%, 88%);
|
|
}
|
|
|
|
.codehilite .gh,
|
|
.codehilite .gp {
|
|
color: hsl(60, 19%, 83%);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.codehilite .gi,
|
|
.codehilite .kt {
|
|
color: hsl(120, 100%, 40%);
|
|
}
|
|
|
|
.codehilite .ld,
|
|
.codehilite .s,
|
|
.codehilite .sb,
|
|
.codehilite .sc,
|
|
.codehilite .sd,
|
|
.codehilite .s2,
|
|
.codehilite .se,
|
|
.codehilite .sh,
|
|
.codehilite .si,
|
|
.codehilite .sx,
|
|
.codehilite .sr,
|
|
.codehilite .s1,
|
|
.codehilite .ss {
|
|
color: hsl(0, 36%, 69%);
|
|
}
|
|
|
|
.codehilite .m,
|
|
.codehilite .mf,
|
|
.codehilite .mh,
|
|
.codehilite .mi,
|
|
.codehilite .mo,
|
|
.codehilite .il {
|
|
color: hsl(183, 45%, 69%);
|
|
}
|
|
|
|
.codehilite .na,
|
|
.codehilite .nt {
|
|
color: hsl(127, 25%, 68%);
|
|
}
|
|
|
|
.codehilite .nb,
|
|
.codehilite .nc,
|
|
.codehilite .nf,
|
|
.codehilite .bp,
|
|
.codehilite .vc {
|
|
color: hsl(60, 75%, 75%);
|
|
}
|
|
}
|
|
|
|
#message-edit-history {
|
|
.message_edit_history_content {
|
|
.highlight_text_inserted {
|
|
color: hsl(122, 100%, 81%);
|
|
background-color: hsla(120, 64%, 95%, 0.3);
|
|
}
|
|
|
|
.highlight_text_deleted {
|
|
color: hsl(0, 90%, 67%);
|
|
background-color: hsla(7, 54%, 62%, 0.38);
|
|
}
|
|
}
|
|
}
|
|
|
|
time {
|
|
background: hsla(0, 0%, 0%, 0.2);
|
|
box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.4);
|
|
}
|
|
|
|
.upgrade-tip,
|
|
.upgrade-or-sponsorship-tip,
|
|
.tip {
|
|
color: inherit;
|
|
background-color: hsla(46, 28%, 38%, 0.27);
|
|
border: 1px solid hsl(49, 38%, 46%);
|
|
}
|
|
|
|
#request-progress-status-banner {
|
|
background-color: hsl(212, 32%, 14%);
|
|
|
|
.alert-content {
|
|
color: hsl(236, 33%, 90%);
|
|
}
|
|
}
|
|
|
|
.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;
|
|
|
|
.close {
|
|
color: inherit;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.close:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.alert.alert-success {
|
|
color: inherit;
|
|
background-color: hsla(161, 60%, 46%, 0.2);
|
|
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-box .alert,
|
|
.alert-box .stacktrace,
|
|
.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: hsl(0, 75%, 65%);
|
|
}
|
|
|
|
.stacktrace {
|
|
color: hsl(314, 22%, 85%);
|
|
|
|
.expand {
|
|
color: hsl(318, 14%, 36%);
|
|
}
|
|
|
|
.subtle {
|
|
color: hsl(314, 19%, 63%);
|
|
}
|
|
|
|
.code-context {
|
|
color: hsl(314, 27%, 82%);
|
|
background-color: hsl(312, 7%, 14%);
|
|
box-shadow: inset 0 11px 10px -10px hsl(0, 0%, 6%),
|
|
inset 0 -11px 10px -10px hsl(0, 0%, 6%);
|
|
|
|
.line-number {
|
|
color: hsl(318, 14%, 44%);
|
|
}
|
|
|
|
.focus-line {
|
|
background-color: hsl(307, 9%, 19%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Popover: */
|
|
.hotspot.overlay .hotspot-popover {
|
|
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);
|
|
}
|
|
|
|
#invite-user-modal {
|
|
#clipboard_image {
|
|
path {
|
|
fill: hsl(236, 33%, 90%);
|
|
}
|
|
}
|
|
}
|
|
|
|
#user-profile-modal {
|
|
#default-section {
|
|
.default-field {
|
|
.name {
|
|
color: hsl(236, 33%, 90%);
|
|
}
|
|
}
|
|
}
|
|
|
|
#content {
|
|
.field-section {
|
|
.name {
|
|
color: hsl(236, 33%, 90%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.subscription-group-list,
|
|
.subscription-stream-list,
|
|
.subscription-stream-list .user-stream-list tr,
|
|
.subscription-group-list .user-group-list tr {
|
|
border-color: hsla(0, 0%, 0%, 0.4);
|
|
}
|
|
}
|
|
|
|
/* Arrows: */
|
|
.hotspot.overlay {
|
|
.hotspot-popover.arrow-right::before {
|
|
border-left-color: hsla(0, 0%, 0%, 0.2);
|
|
}
|
|
|
|
.hotspot-popover.arrow-right::after {
|
|
border-left-color: hsl(212, 28%, 18%);
|
|
}
|
|
|
|
.hotspot-popover.arrow-bottom::before {
|
|
border-top-color: hsla(0, 0%, 0%, 0.2);
|
|
}
|
|
|
|
.hotspot-popover.arrow-bottom::after {
|
|
border-top-color: hsl(212, 28%, 18%);
|
|
}
|
|
|
|
.hotspot-popover.arrow-left::before {
|
|
border-right-color: hsla(0, 0%, 0%, 0.2);
|
|
}
|
|
|
|
.hotspot-popover.arrow-left::after {
|
|
border-right-color: hsl(212, 28%, 18%);
|
|
}
|
|
|
|
.hotspot-popover.arrow-top::before {
|
|
border-bottom-color: hsla(0, 0%, 0%, 0.2);
|
|
}
|
|
|
|
.hotspot-popover.arrow-top::after {
|
|
border-bottom-color: hsl(212, 28%, 18%);
|
|
}
|
|
}
|
|
|
|
/* Content: */
|
|
.hotspot.overlay .hotspot-popover .hotspot-popover-content,
|
|
.hotspot.overlay .hotspot-popover .hotspot-popover-bottom {
|
|
background-color: hsl(212, 28%, 18%);
|
|
}
|
|
|
|
.alert-zulip-logo,
|
|
.top-messages-logo,
|
|
.bottom-messages-logo {
|
|
svg path {
|
|
fill: hsl(214, 27%, 18%);
|
|
stroke: hsl(214, 27%, 18%);
|
|
}
|
|
|
|
svg circle {
|
|
fill: hsl(0, 0%, 100%);
|
|
stroke: hsl(0, 0%, 100%);
|
|
}
|
|
}
|
|
|
|
.history-limited-box,
|
|
.all-messages-search-caution {
|
|
background-color: hsla(0, 0%, 0%, 0.2);
|
|
}
|
|
|
|
#feedback_container,
|
|
code,
|
|
.typeahead.dropdown-menu {
|
|
background-color: hsl(212, 25%, 15%);
|
|
border-color: hsla(0, 0%, 0%, 0.5);
|
|
color: inherit;
|
|
}
|
|
|
|
/* Search highlight used in both topics and rendered_markdown */
|
|
.highlight {
|
|
background-color: hsla(51, 100%, 64%, 0.42);
|
|
}
|
|
|
|
.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;
|
|
border-bottom: 1px solid hsl(0, 0%, 100%);
|
|
}
|
|
|
|
.star:not(.empty-star),
|
|
.empty-star:hover {
|
|
color: hsla(126, 66%, 72%, 0.75);
|
|
}
|
|
|
|
#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 {
|
|
filter: invert(100%);
|
|
}
|
|
|
|
.simplebar-track .simplebar-scrollbar::before {
|
|
background-color: hsl(0, 0%, 100%);
|
|
box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.33);
|
|
}
|
|
|
|
.collapse-settings-btn:hover {
|
|
color: hsl(200, 79%, 66%);
|
|
}
|
|
|
|
#request-progress-status-banner .loading-indicator,
|
|
#loading_older_messages_indicator,
|
|
#recent_topics_loading_messages_indicator {
|
|
path {
|
|
fill: hsl(0, 0%, 100%);
|
|
}
|
|
}
|
|
|
|
.small_square_button {
|
|
&.small_square_x {
|
|
background-color: hsl(0, 0%, 95%);
|
|
color: hsl(0, 0%, 42%);
|
|
|
|
&:hover {
|
|
color: hsl(0, 0%, 18%);
|
|
}
|
|
}
|
|
}
|
|
|
|
a:not(:active):focus,
|
|
button:focus,
|
|
.new-style label.checkbox input[type="checkbox"]:focus ~ span,
|
|
i.fa:focus,
|
|
i.zulip-icon:focus,
|
|
.auto-select:focus,
|
|
[role="button"]:focus {
|
|
outline-color: hsl(0, 0%, 67%);
|
|
}
|
|
|
|
.animated-purple-button:focus {
|
|
box-shadow: 0 1px 4px 0 hsl(0, 0%, 100%, 0.666);
|
|
}
|
|
|
|
.color_animated_button {
|
|
background-color: hsl(211, 29%, 14%);
|
|
|
|
* {
|
|
color: hsl(0, 0%, 100%);
|
|
}
|
|
|
|
&:hover {
|
|
background-color: hsl(240, 96%, 68%);
|
|
}
|
|
}
|
|
|
|
/* Widgets: Poll */
|
|
.poll-widget {
|
|
.poll-vote {
|
|
color: hsl(185, 35%, 65%);
|
|
border-color: hsl(185, 35%, 35%);
|
|
|
|
&:hover {
|
|
color: hsl(185, 50%, 70%);
|
|
border-color: hsl(185, 40%, 40%);
|
|
background-color: hsl(185, 20%, 20%);
|
|
}
|
|
|
|
&:focus {
|
|
color: hsl(185, 50%, 65%);
|
|
border-color: hsl(185, 40%, 50%);
|
|
background-color: hsl(185, 40%, 35%);
|
|
}
|
|
}
|
|
|
|
.poll-names {
|
|
color: hsl(236, 15%, 70%);
|
|
}
|
|
}
|
|
|
|
/* Widgets: Todo */
|
|
.todo-widget {
|
|
label.checkbox {
|
|
input[type="checkbox"] {
|
|
~ span {
|
|
border-color: hsl(185, 40%, 45%);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
&:hover ~ span {
|
|
background-color: hsl(185, 20%, 20%);
|
|
border-color: hsl(185, 40%, 35%);
|
|
}
|
|
|
|
&:checked ~ span {
|
|
background-color: hsl(185, 40%, 45%);
|
|
}
|
|
|
|
&:focus ~ span {
|
|
outline-color: hsla(0, 0%, 100%, 0);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Originally the icon inherits the color of label, but when the setting
|
|
is disabled, the color of the label is changed and thus the icon becomes
|
|
too light. So, we set the color explicitly to original color of label to
|
|
keep the color of the icon same even when the setting is disabled. */
|
|
#id_realm_enable_spectator_access_label a {
|
|
color: hsl(236, 33%, 90%);
|
|
}
|
|
|
|
#stream-specific-notify-table .unmute_stream {
|
|
&:hover {
|
|
color: hsl(0, 0%, 100%);
|
|
}
|
|
}
|
|
|
|
#read_receipts_modal #read_receipts_list li {
|
|
&:hover {
|
|
background-color: hsla(0, 0%, 100%, 0.05);
|
|
}
|
|
|
|
&:active,
|
|
&:focus {
|
|
background-color: hsla(0, 0%, 100%, 0.1);
|
|
}
|
|
}
|
|
|
|
#settings_page,
|
|
#stream_settings {
|
|
.save-button-controls .discard-button {
|
|
color: hsl(0, 0%, 80%);
|
|
|
|
&:hover {
|
|
.save-discard-widget-button-text {
|
|
color: hsl(0, 0%, 100%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@supports (-moz-appearance: none) {
|
|
%dark-theme #settings_page select {
|
|
background-color: hsla(0, 0%, 0%, 0.2);
|
|
}
|
|
}
|
|
|
|
:root.dark-theme {
|
|
@extend %dark-theme;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root.color-scheme-automatic {
|
|
@extend %dark-theme;
|
|
}
|
|
}
|