mirror of https://github.com/zulip/zulip.git
1532 lines
37 KiB
CSS
1532 lines
37 KiB
CSS
@import url("flatpickr/dist/themes/dark.css");
|
|
|
|
%dark-theme {
|
|
color-scheme: dark;
|
|
|
|
& body {
|
|
color: hsl(236deg 33% 90%);
|
|
}
|
|
|
|
.placeholder {
|
|
color: hsl(0deg 0% 55%);
|
|
opacity: 1;
|
|
}
|
|
|
|
& textarea::placeholder,
|
|
input::placeholder {
|
|
@extend .placeholder;
|
|
}
|
|
|
|
& a:hover {
|
|
color: hsl(200deg 79% 66%);
|
|
|
|
& code {
|
|
color: hsl(200deg 79% 66%);
|
|
}
|
|
}
|
|
|
|
& ul.filters a:hover {
|
|
color: inherit;
|
|
}
|
|
|
|
/************************* MODAL DARK THEME *******************/
|
|
.dialog_cancel_button {
|
|
background-color: hsl(211deg 29% 14%);
|
|
color: hsl(0deg 0% 100%);
|
|
border: 1px solid hsl(0deg 0% 0% / 60%);
|
|
}
|
|
|
|
.modal__btn:disabled {
|
|
opacity: 1;
|
|
background-color: hsl(0deg 0% 83% / 50%);
|
|
}
|
|
|
|
.modal__content.simplebar-scrollable-y + .modal__footer {
|
|
border-top: 1px solid hsl(0deg 0% 100% / 20%);
|
|
}
|
|
|
|
.modal-bg,
|
|
.modal__container {
|
|
background-color: hsl(212deg 28% 18%);
|
|
}
|
|
|
|
.modal__close {
|
|
&::before {
|
|
color: hsl(236deg 33% 90%);
|
|
}
|
|
|
|
&:hover {
|
|
background: hsl(0deg 0% 91% / 10%);
|
|
}
|
|
}
|
|
|
|
.modal-footer {
|
|
box-shadow: inset 0 1px 0 hsl(0deg 0% 0% / 20%);
|
|
}
|
|
|
|
.enter_sends,
|
|
.enter_sends_choices {
|
|
color: hsl(236deg 33% 90%);
|
|
|
|
& kbd {
|
|
background-color: hsl(211deg 29% 14%);
|
|
border-color: hsl(211deg 29% 14%);
|
|
box-shadow: inset 0 -1px 0 hsl(210deg 5% 34% / 20%);
|
|
text-shadow: none;
|
|
color: hsl(236deg 33% 90%);
|
|
}
|
|
|
|
.enter_sends_minor {
|
|
color: hsl(0deg 0% 80%);
|
|
}
|
|
}
|
|
|
|
& table.table-striped thead.table-sticky-headers th {
|
|
background-color: hsl(0deg 0% 0%);
|
|
|
|
&[data-sort]:hover {
|
|
background-color: hsl(211deg 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(236deg 33% 90%);
|
|
|
|
&.compose_control_button:hover {
|
|
color: hsl(200deg 79% 66%);
|
|
}
|
|
}
|
|
|
|
&[data-placement^="top"] {
|
|
> .tippy-arrow {
|
|
&::before {
|
|
border-top-color: hsl(235deg 18% 7%);
|
|
}
|
|
}
|
|
}
|
|
|
|
&[data-placement^="bottom"] {
|
|
> .tippy-arrow {
|
|
&::before {
|
|
border-bottom-color: hsl(235deg 18% 7%);
|
|
}
|
|
}
|
|
}
|
|
|
|
&[data-placement^="left"] {
|
|
> .tippy-arrow {
|
|
&::before {
|
|
border-left-color: hsl(235deg 18% 7%);
|
|
}
|
|
}
|
|
}
|
|
|
|
&[data-placement^="right"] {
|
|
> .tippy-arrow {
|
|
&::before {
|
|
border-right-color: hsl(235deg 18% 7%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.tippy-box:not([data-theme]) {
|
|
background: hsl(0deg 0% 0%);
|
|
|
|
&[data-placement^="top"] > .tippy-arrow::before {
|
|
border-top-color: hsl(0deg 0% 0%);
|
|
}
|
|
|
|
&[data-placement^="bottom"] > .tippy-arrow::before {
|
|
border-bottom-color: hsl(0deg 0% 0%);
|
|
}
|
|
|
|
&[data-placement^="left"] > .tippy-arrow::before {
|
|
border-left-color: hsl(0deg 0% 0%);
|
|
}
|
|
|
|
&[data-placement^="right"] > .tippy-arrow::before {
|
|
border-right-color: hsl(0deg 0% 0%);
|
|
}
|
|
}
|
|
|
|
& 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(212deg 28% 18%);
|
|
}
|
|
|
|
#scroll-to-bottom-button-container {
|
|
background: transparent;
|
|
|
|
& span {
|
|
color: hsl(0deg 0% 27%);
|
|
}
|
|
}
|
|
|
|
.compose_banner {
|
|
.above_compose_banner_action_link {
|
|
color: hsl(200deg 100% 50%);
|
|
}
|
|
|
|
&.success {
|
|
background-color: hsl(147deg 100% 8%);
|
|
border-color: hsl(149deg 48% 52% / 40%);
|
|
color: hsl(147deg 51% 80%);
|
|
|
|
.compose_banner_close_button {
|
|
color: hsl(147deg 51% 55% / 50%);
|
|
|
|
&:hover {
|
|
color: hsl(147deg 51% 55%);
|
|
}
|
|
|
|
&:active {
|
|
color: hsl(147deg 51% 55% / 75%);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.warning {
|
|
background-color: hsl(53deg 100% 11%);
|
|
border-color: hsl(38deg 44% 60% / 40%);
|
|
color: hsl(50deg 45% 80%);
|
|
|
|
.compose_banner_close_button {
|
|
color: hsl(50deg 45% 61% / 50%);
|
|
|
|
&:hover {
|
|
color: hsl(50deg 45% 61%);
|
|
}
|
|
|
|
&:active {
|
|
color: hsl(50deg 45% 61% / 75%);
|
|
}
|
|
}
|
|
|
|
.compose_banner_action_button {
|
|
background-color: hsl(50deg 45% 61% / 10%);
|
|
color: hsl(50deg 45% 61%);
|
|
|
|
&:hover {
|
|
background-color: hsl(50deg 45% 61% / 15%);
|
|
}
|
|
|
|
&:active {
|
|
background-color: hsl(50deg 45% 61% / 20%);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.error {
|
|
background-color: hsl(0deg 60% 19%);
|
|
border-color: hsl(3deg 73% 74% / 40%);
|
|
color: hsl(3deg 73% 80%);
|
|
|
|
.compose_banner_close_button {
|
|
color: hsl(3deg 73% 74% / 50%);
|
|
|
|
&:hover {
|
|
color: hsl(3deg 73% 74%);
|
|
}
|
|
|
|
&:active {
|
|
color: hsl(3deg 73% 74% / 75%);
|
|
}
|
|
}
|
|
|
|
.compose_banner_action_button {
|
|
background-color: hsl(3deg 73% 74% / 10%);
|
|
color: hsl(3deg 73% 74%);
|
|
|
|
&:hover {
|
|
background: hsl(3deg 73% 74% / 15%);
|
|
}
|
|
|
|
&:active {
|
|
background: hsl(3deg 73% 74% / 20%);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.info {
|
|
background-color: hsl(204deg 100% 12%);
|
|
border-color: hsl(205deg 58% 69% / 40%);
|
|
position: relative;
|
|
color: hsl(205deg 58% 80%);
|
|
|
|
.compose_banner_close_button {
|
|
color: hsl(205deg 58% 69% / 50%);
|
|
|
|
&:hover {
|
|
color: hsl(205deg 58% 69%);
|
|
}
|
|
|
|
&:active {
|
|
color: hsl(205deg 58% 69% / 75%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.upload_banner {
|
|
.moving_bar {
|
|
background: hsl(204deg 63% 18%);
|
|
}
|
|
}
|
|
|
|
& textarea.new_message_textarea {
|
|
&.invalid,
|
|
&.invalid:focus {
|
|
border-color: hsl(3deg 73% 74%);
|
|
box-shadow: 0 0 2px hsl(3deg 73% 74%);
|
|
}
|
|
}
|
|
|
|
.message_embed .data-container::after {
|
|
background: linear-gradient(
|
|
0deg,
|
|
hsl(212deg 28% 18%),
|
|
transparent 100%
|
|
);
|
|
}
|
|
|
|
.column-left .left-sidebar,
|
|
.stream_name_search_section,
|
|
.group_name_search_section,
|
|
.column-right .right-sidebar {
|
|
border-color: hsl(0deg 0% 0% / 20%);
|
|
}
|
|
|
|
.dark .message_label_clickable.stream_label,
|
|
.dark .stream_label,
|
|
.stream_label {
|
|
color: hsl(212deg 28% 18%);
|
|
}
|
|
|
|
.new-style label.checkbox input[type="checkbox"] ~ span {
|
|
border-color: hsl(0deg 0% 100% / 40%);
|
|
}
|
|
|
|
.streams_popover .sp-container {
|
|
background-color: transparent;
|
|
|
|
& button {
|
|
background-color: hsl(208deg 35% 11%);
|
|
border: 1px solid hsl(210deg 36% 4%);
|
|
color: hsl(236deg 31% 90%);
|
|
}
|
|
|
|
.sp-picker-container {
|
|
border-left: solid 1px hsl(210deg 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(212deg 28% 18%);
|
|
}
|
|
|
|
.private-message .alert-msg {
|
|
background-color: hsl(208deg 17% 29%);
|
|
}
|
|
|
|
.active_private_messages_section {
|
|
#private_messages_section,
|
|
#private_messages_list,
|
|
#hide_more_private_messages {
|
|
background-color: hsl(199deg 33% 46% / 20%);
|
|
}
|
|
}
|
|
|
|
/* 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(212deg 28% 18%);
|
|
}
|
|
|
|
.message_header {
|
|
box-shadow: 0 -1px 0 0 hsl(212deg 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: hsl(0deg 0% 0% / 20%);
|
|
|
|
&:not(
|
|
.sea-green,
|
|
.btn-danger,
|
|
.btn-warning,
|
|
.btn-link,
|
|
.poll-vote,
|
|
button.poll-option,
|
|
button.add-task
|
|
) {
|
|
border-color: hsl(0deg 0% 0% / 60%);
|
|
color: inherit;
|
|
}
|
|
|
|
&.btn-link {
|
|
border-color: hsl(0deg 0% 0% / 60%);
|
|
color: hsl(200deg 79% 66%);
|
|
}
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
background-color: hsl(0deg 0% 0% / 15%);
|
|
}
|
|
}
|
|
|
|
.rendered_markdown .message_inline_image {
|
|
background: hsl(0deg 0% 100% / 3%);
|
|
|
|
&:hover {
|
|
background: hsl(0deg 0% 100% / 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: hsl(0deg 0% 0% / 20%);
|
|
border-color: hsl(0deg 0% 0% / 60%);
|
|
color: inherit;
|
|
}
|
|
|
|
& select option {
|
|
background-color: hsl(212deg 28% 18%);
|
|
color: hsl(236deg 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: hsl(105deg 2% 50% / 50%);
|
|
}
|
|
|
|
.pill-container {
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
}
|
|
|
|
.deactivated-pill {
|
|
background-color: hsl(0deg 86% 14%) !important;
|
|
}
|
|
|
|
#search_arrows .pill,
|
|
.pm_recipient .pill-container .pill {
|
|
color: inherit;
|
|
border: 1px solid hsl(0deg 0% 0% / 50%);
|
|
background-color: hsl(0deg 0% 0% / 25%);
|
|
font-weight: 600;
|
|
}
|
|
|
|
#search_arrows .pill:focus,
|
|
.pm_recipient .pill-container .pill:focus {
|
|
color: hsl(0deg 0% 100%);
|
|
border: 1px solid hsl(176deg 78% 28% / 60%);
|
|
background-color: hsl(176deg 49% 42% / 40%);
|
|
}
|
|
|
|
.new-style .button.no-style {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.create_user_group_plus_button,
|
|
.create_stream_plus_button {
|
|
color: hsl(0deg 0% 100%);
|
|
background-color: hsl(0deg 0% 0% / 20%);
|
|
border-color: hsl(0deg 0% 0% / 60%);
|
|
}
|
|
|
|
.emoji-info-popover
|
|
.emoji-popover
|
|
.emoji-popover-category-tabs
|
|
.emoji-popover-tab-item.active {
|
|
background-color: hsl(0deg 0% 0% / 50%);
|
|
}
|
|
|
|
.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: hsl(0deg 0% 0% / 50%);
|
|
border-color: hsl(0deg 0% 0% / 90%);
|
|
}
|
|
|
|
.ind-tab.disabled {
|
|
color: hsl(0deg 0% 42% / 90%) !important;
|
|
}
|
|
|
|
.message_reactions:hover .message_reaction + .reaction_button,
|
|
.message_reactions .message_reaction {
|
|
background-color: transparent;
|
|
border-color: hsl(0deg 0% 0% / 80%);
|
|
color: inherit;
|
|
|
|
&:hover {
|
|
border-color: hsl(236deg 33% 90%);
|
|
}
|
|
}
|
|
|
|
.emoji-popover .reaction:focus {
|
|
box-shadow: 0 0 1px hsl(0deg 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: hsl(0deg 0% 0% / 90%);
|
|
}
|
|
|
|
.message-header-contents,
|
|
.message_header_private_message .message-header-contents {
|
|
background-color: hsl(0deg 0% 0% / 20%);
|
|
border-color: transparent;
|
|
}
|
|
|
|
.compose_control_buttons_container .divider {
|
|
color: hsl(236deg 33% 90% / 50%);
|
|
}
|
|
|
|
/* 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%);
|
|
}
|
|
|
|
.recipient_row {
|
|
.message_row.unread {
|
|
.date_row {
|
|
background-color: hsl(212deg 28% 18%);
|
|
}
|
|
}
|
|
|
|
.private-message.unread {
|
|
.date_row {
|
|
background-color: hsl(208deg 17% 29%);
|
|
}
|
|
}
|
|
|
|
.message_row.unread ~ .message_row.unread {
|
|
.date_row {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
.private-message.unread ~ .private-message.unread {
|
|
.date_row {
|
|
background-color: hsl(208deg 17% 29%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.spectator_narrow_login_button,
|
|
.top-navbar-border {
|
|
border-color: hsl(0deg 0% 0% / 60%);
|
|
}
|
|
|
|
#message_view_header .sub_count {
|
|
&::before,
|
|
&::after {
|
|
color: hsl(0deg 0% 100% / 50%);
|
|
}
|
|
}
|
|
|
|
#message_view_header .stream {
|
|
color: hsl(236deg 33% 90%);
|
|
}
|
|
|
|
#message_view_header .sub_count,
|
|
#message_view_header .narrow_description {
|
|
color: hsl(0deg 0% 90%);
|
|
}
|
|
|
|
& 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: hsl(212deg 28% 8% / 75%);
|
|
}
|
|
|
|
& div.overlay .flex.overlay-content > div,
|
|
.dropdown-menu.typeahead,
|
|
#settings_page,
|
|
.informational-overlays .overlay-content {
|
|
box-shadow: 0 0 30px hsl(212deg 32% 7%);
|
|
}
|
|
|
|
.tippy-box[data-theme~="light-border"],
|
|
.dropdown-menu ul,
|
|
.dropdown .dropdown-menu,
|
|
.popover,
|
|
.popover-title,
|
|
.popover-content {
|
|
background-color: hsl(212deg 32% 14%);
|
|
}
|
|
|
|
.dropdown-menu a {
|
|
color: inherit;
|
|
}
|
|
|
|
.dropdown .dropdown-menu li.divider,
|
|
.popover hr,
|
|
hr {
|
|
color: hsl(212deg 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(0deg 0% 100%);
|
|
}
|
|
}
|
|
|
|
.nav .dropdown-menu::after,
|
|
.popover.bottom .arrow {
|
|
border-bottom-color: hsl(235deg 18% 7%);
|
|
}
|
|
|
|
.popover.left .arrow {
|
|
border-left-color: hsl(235deg 18% 7%);
|
|
}
|
|
|
|
.popover.top .arrow {
|
|
border-top-color: hsl(235deg 18% 7%);
|
|
}
|
|
|
|
.popover.right .arrow {
|
|
border-right-color: hsl(235deg 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(236deg 33% 80%);
|
|
}
|
|
|
|
#message_edit_tooltip:hover,
|
|
.clear_search_button:hover {
|
|
color: hsl(0deg 0% 100%);
|
|
}
|
|
|
|
.spectator_login_buttons a {
|
|
color: hsl(236deg 33% 90%);
|
|
|
|
&:hover {
|
|
color: hsl(0deg 0% 100%);
|
|
}
|
|
}
|
|
|
|
.spectator_narrow_login_button .login_button i {
|
|
color: hsl(236deg 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(0deg 0% 100%) !important;
|
|
}
|
|
|
|
#streamlist-toggle,
|
|
#userlist-toggle {
|
|
color: inherit;
|
|
border-color: hsl(0deg 0% 0% / 60%);
|
|
}
|
|
|
|
#streamlist-toggle-button {
|
|
color: inherit;
|
|
background-color: inherit;
|
|
}
|
|
|
|
#userlist-toggle-button {
|
|
color: hsl(221deg 9% 54%);
|
|
|
|
&:hover {
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
& 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 {
|
|
.show-all-streams {
|
|
color: hsl(236deg 33% 90%);
|
|
opacity: 0.75;
|
|
}
|
|
}
|
|
|
|
#user_presences li:hover,
|
|
#user_presences li.highlighted_user {
|
|
background-color: hsl(136deg 25% 73% / 20%);
|
|
}
|
|
|
|
.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: hsl(0deg 0% 0% / 20%);
|
|
}
|
|
|
|
.recent_topics_participant_overflow {
|
|
color: hsl(0deg 0% 100%) !important;
|
|
background-color: hsl(211deg 18% 25%) !important;
|
|
}
|
|
|
|
.recent_topics_container #recent_topics_table .btn-recent-filters {
|
|
background-color: hsl(211deg 29% 14%);
|
|
border-color: hsl(0deg 0% 0%);
|
|
color: hsl(0deg 0% 100%);
|
|
|
|
&:focus {
|
|
background-color: hsl(0deg 0% 0% / 50%) !important;
|
|
outline: 0;
|
|
}
|
|
|
|
&.fake_disabled_button {
|
|
cursor: not-allowed;
|
|
opacity: 0.5;
|
|
|
|
&:hover {
|
|
background-color: hsl(0deg 0% 0% / 50%);
|
|
border-color: hsl(0deg 0% 0%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.recent_topics_container {
|
|
background-color: hsl(212deg 28% 18%) !important;
|
|
}
|
|
|
|
#recent_topics_table tr {
|
|
background-color: hsl(212deg 28% 18%);
|
|
|
|
&:hover {
|
|
background-color: hsl(208deg 26% 11% / 60%);
|
|
}
|
|
}
|
|
|
|
#recent_topics_table .unread_topic {
|
|
background-color: hsl(212deg 30% 22% / 60%);
|
|
}
|
|
|
|
.btn-recent-selected,
|
|
#recent_topics_table thead th {
|
|
background-color: hsl(0deg 0% 0%) !important;
|
|
|
|
&[data-sort]:hover {
|
|
background-color: hsl(211deg 29% 14%) !important;
|
|
}
|
|
}
|
|
|
|
#recent_topics_table td a {
|
|
color: hsl(206deg 89% 74%);
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
color: hsl(208deg 64% 52%);
|
|
}
|
|
}
|
|
|
|
#recent_topics_table {
|
|
border-color: hsl(0deg 0% 0% / 60%);
|
|
|
|
.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: hsl(0deg 0% 0% / 20%);
|
|
background-color: hsl(0deg 0% 0% / 20%);
|
|
}
|
|
|
|
.table-striped tbody tr:nth-child(odd) td {
|
|
background-color: hsl(212deg 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: hsl(0deg 0% 0% / 20%);
|
|
}
|
|
|
|
.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: hsl(8deg 78% 43% / 15%);
|
|
}
|
|
|
|
.rendered_markdown {
|
|
.user-mention,
|
|
.user-group-mention {
|
|
background: linear-gradient(
|
|
to bottom,
|
|
hsl(0deg 0% 0% / 20%) 0%,
|
|
hsl(0deg 0% 0% / 10%) 100%
|
|
);
|
|
box-shadow: 0 0 0 1px hsl(0deg 0% 0% / 40%);
|
|
}
|
|
|
|
.user-mention-me :not(.silent) {
|
|
background-color: hsl(355deg 37% 31%);
|
|
box-shadow: 0 0 0 1px hsl(330deg 40% 20%);
|
|
}
|
|
|
|
.codehilite code,
|
|
.codehilite pre {
|
|
color: hsl(212deg 100% 82%);
|
|
background-color: hsl(212deg 25% 15%);
|
|
}
|
|
|
|
.codehilite .hll {
|
|
background-color: hsl(0deg 0% 13%);
|
|
}
|
|
|
|
.codehilite .err {
|
|
color: hsl(1deg 67% 66%);
|
|
background-color: hsl(0deg 7% 22%);
|
|
}
|
|
|
|
.codehilite .k {
|
|
color: hsl(31deg 85% 59%);
|
|
}
|
|
|
|
.codehilite .p {
|
|
color: hsl(179deg 27% 35%);
|
|
}
|
|
|
|
.codehilite .cs {
|
|
color: hsl(0deg 100% 40%);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.codehilite .gd {
|
|
color: hsl(0deg 100% 40%);
|
|
}
|
|
|
|
.codehilite .ge {
|
|
color: hsl(0deg 0% 80%);
|
|
font-style: italic;
|
|
}
|
|
|
|
.codehilite .gr {
|
|
color: hsl(0deg 100% 50%);
|
|
}
|
|
|
|
.codehilite .go {
|
|
color: hsl(0deg 0% 50%);
|
|
}
|
|
|
|
.codehilite .gs {
|
|
color: hsl(0deg 0% 80%);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.codehilite .gu {
|
|
color: hsl(300deg 100% 25%);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.codehilite .gt {
|
|
color: hsl(222deg 100% 41%);
|
|
}
|
|
|
|
.codehilite .kc {
|
|
color: hsl(0deg 45% 75%);
|
|
}
|
|
|
|
.codehilite .kd {
|
|
color: hsl(60deg 100% 76%);
|
|
}
|
|
|
|
.codehilite .kn {
|
|
color: hsl(24deg 56% 72%);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.codehilite .kp {
|
|
color: hsl(62deg 36% 71%);
|
|
}
|
|
|
|
.codehilite .kr {
|
|
color: hsl(359deg 58% 56%);
|
|
}
|
|
|
|
.codehilite .ni {
|
|
color: hsl(359deg 35% 63%);
|
|
}
|
|
|
|
.codehilite .ne {
|
|
color: hsl(53deg 23% 69%);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.codehilite .nn {
|
|
color: hsl(204deg 54% 72%);
|
|
}
|
|
|
|
.codehilite .vi {
|
|
color: hsl(60deg 100% 89%);
|
|
}
|
|
|
|
.codehilite .c,
|
|
.codehilite .g,
|
|
.codehilite .cm,
|
|
.codehilite .cp,
|
|
.codehilite .c1 {
|
|
color: hsl(209deg 15% 55%);
|
|
}
|
|
|
|
.codehilite .l,
|
|
.codehilite .x,
|
|
.codehilite .no,
|
|
.codehilite .nd,
|
|
.codehilite .nl,
|
|
.codehilite .nx,
|
|
.codehilite .py,
|
|
.codehilite .w {
|
|
color: hsl(0deg 0% 80%);
|
|
}
|
|
|
|
.codehilite .n,
|
|
.codehilite .nv,
|
|
.codehilite .vg {
|
|
color: hsl(60deg 19% 83%);
|
|
}
|
|
|
|
.codehilite .o,
|
|
.codehilite .ow {
|
|
color: hsl(58deg 52% 88%);
|
|
}
|
|
|
|
.codehilite .gh,
|
|
.codehilite .gp {
|
|
color: hsl(60deg 19% 83%);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.codehilite .gi,
|
|
.codehilite .kt {
|
|
color: hsl(120deg 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(0deg 36% 69%);
|
|
}
|
|
|
|
.codehilite .m,
|
|
.codehilite .mf,
|
|
.codehilite .mh,
|
|
.codehilite .mi,
|
|
.codehilite .mo,
|
|
.codehilite .il {
|
|
color: hsl(183deg 45% 69%);
|
|
}
|
|
|
|
.codehilite .na,
|
|
.codehilite .nt {
|
|
color: hsl(127deg 25% 68%);
|
|
}
|
|
|
|
.codehilite .nb,
|
|
.codehilite .nc,
|
|
.codehilite .nf,
|
|
.codehilite .bp,
|
|
.codehilite .vc {
|
|
color: hsl(60deg 75% 75%);
|
|
}
|
|
}
|
|
|
|
#message-edit-history {
|
|
.message_edit_history_content {
|
|
.highlight_text_inserted {
|
|
color: hsl(122deg 100% 81%);
|
|
background-color: hsl(120deg 64% 95% / 30%);
|
|
}
|
|
|
|
.highlight_text_deleted {
|
|
color: hsl(0deg 90% 67%);
|
|
background-color: hsl(7deg 54% 62% / 38%);
|
|
}
|
|
}
|
|
}
|
|
|
|
& time {
|
|
background: hsl(0deg 0% 0% / 20%);
|
|
box-shadow: 0 0 0 1px hsl(0deg 0% 0% / 40%);
|
|
}
|
|
|
|
.upgrade-tip,
|
|
.upgrade-or-sponsorship-tip,
|
|
.tip {
|
|
color: inherit;
|
|
background-color: hsl(46deg 28% 38% / 27%);
|
|
border: 1px solid hsl(49deg 38% 46%);
|
|
}
|
|
|
|
#request-progress-status-banner {
|
|
background-color: hsl(212deg 32% 14%);
|
|
|
|
.alert-content {
|
|
color: hsl(236deg 33% 90%);
|
|
}
|
|
}
|
|
|
|
.alert.home-error-bar {
|
|
color: hsl(236deg 33% 90%);
|
|
background-color: hsl(35deg 84% 62% / 25%);
|
|
border: 1px solid hsl(11deg 46% 54%);
|
|
}
|
|
|
|
.alert {
|
|
text-shadow: none;
|
|
|
|
.close {
|
|
color: inherit;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.close:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.alert.alert-success {
|
|
color: inherit;
|
|
background-color: hsl(161deg 60% 46% / 20%);
|
|
border-color: hsl(165deg 68% 37%);
|
|
}
|
|
|
|
.alert.alert-error,
|
|
.alert.alert-danger {
|
|
background-color: hsl(318deg 12% 21%);
|
|
color: inherit;
|
|
border: 1px solid hsl(0deg 75% 65%);
|
|
}
|
|
|
|
.alert-box .alert,
|
|
.alert-box .stacktrace,
|
|
.alert.alert-error {
|
|
background-color: hsl(318deg 12% 21%);
|
|
color: inherit;
|
|
border: 1px solid hsl(0deg 75% 65%);
|
|
}
|
|
|
|
.alert-box {
|
|
.alert.alert-error::before {
|
|
color: hsl(0deg 75% 65%);
|
|
}
|
|
|
|
.stacktrace {
|
|
color: hsl(314deg 22% 85%);
|
|
|
|
.expand {
|
|
color: hsl(318deg 14% 36%);
|
|
}
|
|
|
|
.subtle {
|
|
color: hsl(314deg 19% 63%);
|
|
}
|
|
|
|
.code-context {
|
|
color: hsl(314deg 27% 82%);
|
|
background-color: hsl(312deg 7% 14%);
|
|
box-shadow: inset 0 11px 10px -10px hsl(0deg 0% 6%),
|
|
inset 0 -11px 10px -10px hsl(0deg 0% 6%);
|
|
|
|
.line-number {
|
|
color: hsl(318deg 14% 44%);
|
|
}
|
|
|
|
.focus-line {
|
|
background-color: hsl(307deg 9% 19%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Popover: */
|
|
.hotspot.overlay .hotspot-popover {
|
|
border-color: hsl(0deg 0% 0% / 20%) !important;
|
|
/* Based on the `.hotspot-popover` shadow in `hotspots.css`, but with a new
|
|
color. */
|
|
box-shadow: 0 5px 10px hsl(0deg 0% 0% / 40%);
|
|
}
|
|
|
|
#invite-user-modal {
|
|
#clipboard_image {
|
|
& path {
|
|
fill: hsl(236deg 33% 90%);
|
|
}
|
|
}
|
|
}
|
|
|
|
#user-profile-modal {
|
|
#default-section {
|
|
.default-field {
|
|
.name {
|
|
color: hsl(236deg 33% 90%);
|
|
}
|
|
}
|
|
}
|
|
|
|
#content {
|
|
.field-section {
|
|
.name {
|
|
color: hsl(236deg 33% 90%);
|
|
}
|
|
}
|
|
}
|
|
|
|
.subscription-group-list,
|
|
.subscription-stream-list,
|
|
.subscription-stream-list .user-stream-list tr,
|
|
.subscription-group-list .user-group-list tr {
|
|
border-color: hsl(0deg 0% 0% / 40%);
|
|
}
|
|
}
|
|
|
|
/* Arrows: */
|
|
.hotspot.overlay {
|
|
.hotspot-popover.arrow-right::before {
|
|
border-left-color: hsl(0deg 0% 0% / 20%);
|
|
}
|
|
|
|
.hotspot-popover.arrow-right::after {
|
|
border-left-color: hsl(212deg 28% 18%);
|
|
}
|
|
|
|
.hotspot-popover.arrow-bottom::before {
|
|
border-top-color: hsl(0deg 0% 0% / 20%);
|
|
}
|
|
|
|
.hotspot-popover.arrow-bottom::after {
|
|
border-top-color: hsl(212deg 28% 18%);
|
|
}
|
|
|
|
.hotspot-popover.arrow-left::before {
|
|
border-right-color: hsl(0deg 0% 0% / 20%);
|
|
}
|
|
|
|
.hotspot-popover.arrow-left::after {
|
|
border-right-color: hsl(212deg 28% 18%);
|
|
}
|
|
|
|
.hotspot-popover.arrow-top::before {
|
|
border-bottom-color: hsl(0deg 0% 0% / 20%);
|
|
}
|
|
|
|
.hotspot-popover.arrow-top::after {
|
|
border-bottom-color: hsl(212deg 28% 18%);
|
|
}
|
|
}
|
|
|
|
/* Content: */
|
|
.hotspot.overlay .hotspot-popover .hotspot-popover-content,
|
|
.hotspot.overlay .hotspot-popover .hotspot-popover-bottom {
|
|
background-color: hsl(212deg 28% 18%);
|
|
}
|
|
|
|
.alert-zulip-logo,
|
|
.top-messages-logo,
|
|
.bottom-messages-logo {
|
|
& svg path {
|
|
fill: hsl(214deg 27% 18%);
|
|
stroke: hsl(214deg 27% 18%);
|
|
}
|
|
|
|
& svg circle {
|
|
fill: hsl(0deg 0% 100%);
|
|
stroke: hsl(0deg 0% 100%);
|
|
}
|
|
}
|
|
|
|
.history-limited-box,
|
|
.all-messages-search-caution {
|
|
background-color: hsl(0deg 0% 0% / 20%);
|
|
}
|
|
|
|
#feedback_container,
|
|
code,
|
|
.typeahead.dropdown-menu {
|
|
background-color: hsl(212deg 25% 15%);
|
|
border-color: hsl(0deg 0% 0% / 50%);
|
|
color: inherit;
|
|
}
|
|
|
|
/* Search highlight used in both topics and rendered_markdown */
|
|
.highlight {
|
|
background-color: hsl(51deg 100% 64% / 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(0deg 0% 100%);
|
|
}
|
|
|
|
.star:not(.empty-star),
|
|
.empty-star:hover {
|
|
color: hsl(126deg 66% 72% / 75%);
|
|
}
|
|
|
|
#bots_lists_navbar .active a {
|
|
color: hsl(0deg 0% 87%);
|
|
background-color: hsl(212deg 28% 18%);
|
|
border-color: hsl(0deg 0% 87%);
|
|
border-bottom-color: transparent;
|
|
}
|
|
|
|
.searching-for-more-topics img {
|
|
filter: invert(100%);
|
|
}
|
|
|
|
.simplebar-track .simplebar-scrollbar::before {
|
|
background-color: hsl(0deg 0% 100%);
|
|
box-shadow: 0 0 0 1px hsl(0deg 0% 0% / 33%);
|
|
}
|
|
|
|
.collapse-settings-btn:hover {
|
|
color: hsl(200deg 79% 66%);
|
|
}
|
|
|
|
#request-progress-status-banner .loading-indicator,
|
|
#loading_older_messages_indicator,
|
|
#recent_topics_loading_messages_indicator {
|
|
& path {
|
|
fill: hsl(0deg 0% 100%);
|
|
}
|
|
}
|
|
|
|
.small_square_button {
|
|
&.small_square_x {
|
|
background-color: hsl(0deg 0% 95%);
|
|
color: hsl(0deg 0% 42%);
|
|
|
|
&:hover {
|
|
color: hsl(0deg 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(0deg 0% 67%);
|
|
}
|
|
|
|
.animated-purple-button:focus {
|
|
box-shadow: 0 1px 4px 0 hsl(0deg 0% 100% / 66.6%);
|
|
}
|
|
|
|
.color_animated_button {
|
|
background-color: hsl(211deg 29% 14%);
|
|
|
|
* {
|
|
color: hsl(0deg 0% 100%);
|
|
}
|
|
|
|
&:hover {
|
|
background-color: hsl(240deg 96% 68%);
|
|
}
|
|
}
|
|
|
|
/* Widgets: Poll */
|
|
.poll-widget {
|
|
.poll-vote {
|
|
color: hsl(185deg 35% 65%);
|
|
border-color: hsl(185deg 35% 35%);
|
|
|
|
&:hover {
|
|
color: hsl(185deg 50% 70%);
|
|
border-color: hsl(185deg 40% 40%);
|
|
background-color: hsl(185deg 20% 20%);
|
|
}
|
|
|
|
&:focus {
|
|
color: hsl(185deg 50% 65%);
|
|
border-color: hsl(185deg 40% 50%);
|
|
background-color: hsl(185deg 40% 35%);
|
|
}
|
|
}
|
|
|
|
.poll-names {
|
|
color: hsl(236deg 15% 70%);
|
|
}
|
|
}
|
|
|
|
/* Widgets: Todo */
|
|
.todo-widget {
|
|
& label.checkbox {
|
|
& input[type="checkbox"] {
|
|
~ span {
|
|
border-color: hsl(185deg 40% 45%);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
&:hover ~ span {
|
|
background-color: hsl(185deg 20% 20%);
|
|
border-color: hsl(185deg 40% 35%);
|
|
}
|
|
|
|
&:checked ~ span {
|
|
background-color: hsl(185deg 40% 45%);
|
|
}
|
|
|
|
&:focus ~ span {
|
|
outline-color: hsl(0deg 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(236deg 33% 90%);
|
|
}
|
|
|
|
#stream-specific-notify-table .unmute_stream {
|
|
&:hover {
|
|
color: hsl(0deg 0% 100%);
|
|
}
|
|
}
|
|
|
|
#read_receipts_modal #read_receipts_list li {
|
|
&:hover {
|
|
background-color: hsl(0deg 0% 100% / 5%);
|
|
}
|
|
|
|
&:active,
|
|
&:focus {
|
|
background-color: hsl(0deg 0% 100% / 10%);
|
|
}
|
|
}
|
|
|
|
#settings_page,
|
|
#stream_settings {
|
|
.save-button-controls .discard-button {
|
|
color: hsl(0deg 0% 80%);
|
|
|
|
&:hover {
|
|
.save-discard-widget-button-text {
|
|
color: hsl(0deg 0% 100%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@supports (-moz-appearance: none) {
|
|
%dark-theme #settings_page select {
|
|
background-color: hsl(0deg 0% 0% / 20%);
|
|
}
|
|
}
|
|
|
|
:root.dark-theme {
|
|
@extend %dark-theme;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root.color-scheme-automatic {
|
|
@extend %dark-theme;
|
|
}
|
|
}
|