mirror of https://github.com/zulip/zulip.git
1491 lines
36 KiB
CSS
1491 lines
36 KiB
CSS
@import url("flatpickr/dist/themes/dark.css");
|
|
|
|
%dark-theme {
|
|
color-scheme: dark;
|
|
|
|
.placeholder {
|
|
color: hsl(0deg 0% 55%);
|
|
opacity: 1;
|
|
}
|
|
|
|
& textarea::placeholder,
|
|
input::placeholder {
|
|
@extend .placeholder;
|
|
}
|
|
|
|
.demo-organization-warning {
|
|
background-color: hsl(0deg 60% 19%);
|
|
border-color: hsl(3deg 73% 74% / 40%);
|
|
color: hsl(3deg 73% 80%);
|
|
|
|
.convert-demo-organization-button {
|
|
&:focus {
|
|
color: hsl(200deg 79% 66%);
|
|
outline-color: hsl(200deg 79% 66%);
|
|
}
|
|
}
|
|
}
|
|
|
|
& a:hover {
|
|
color: hsl(200deg 79% 66%);
|
|
|
|
& code {
|
|
color: hsl(200deg 79% 66%);
|
|
}
|
|
}
|
|
|
|
& ul.dm-list,
|
|
& ul.filters {
|
|
color: hsl(0deg 0% 100% / 80%);
|
|
|
|
& a:hover {
|
|
color: inherit;
|
|
}
|
|
|
|
.has-unmuted-mentions .unread_mention_info {
|
|
color: hsl(236deg 33% 90%);
|
|
}
|
|
|
|
& li.muted_topic,
|
|
li.out_of_home_view {
|
|
color: hsl(236deg 33% 90%/50%);
|
|
}
|
|
|
|
& li.out_of_home_view {
|
|
&:hover {
|
|
color: hsl(236deg 33% 90%/ 75%);
|
|
}
|
|
}
|
|
}
|
|
|
|
/************************* MODAL DARK THEME *******************/
|
|
.user_profile_manage_own_edit_button,
|
|
.user_profile_manage_others_edit_button {
|
|
color: hsl(200deg 100% 50%);
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
color: hsl(200deg 79% 66%);
|
|
}
|
|
}
|
|
|
|
.modal__content.simplebar-scrollable-y + .modal__footer {
|
|
border-top: 1px solid hsl(0deg 0% 100% / 20%);
|
|
}
|
|
|
|
.modal__close {
|
|
&::before {
|
|
color: hsl(236deg 33% 90%);
|
|
}
|
|
|
|
&:hover {
|
|
background: hsl(0deg 0% 91% / 10%);
|
|
}
|
|
}
|
|
|
|
#subscription_overlay #stream-creation .settings-sticky-footer,
|
|
#groups_overlay #user-group-creation .settings-sticky-footer {
|
|
box-shadow: inset 0 1px 0 hsl(0deg 0% 0% / 20%);
|
|
}
|
|
|
|
.enter_sends_choices {
|
|
color: hsl(236deg 33% 90%);
|
|
|
|
& kbd {
|
|
background-color: hsl(211deg 29% 14%);
|
|
border-color: hsl(211deg 29% 14%);
|
|
text-shadow: none;
|
|
color: hsl(236deg 33% 90%);
|
|
}
|
|
|
|
.enter_sends_minor {
|
|
color: hsl(0deg 0% 80%);
|
|
}
|
|
}
|
|
|
|
.modal__btn:disabled,
|
|
.disabled-message-send-controls button {
|
|
opacity: 1;
|
|
background-color: hsl(0deg 0% 83% / 50%);
|
|
}
|
|
|
|
& 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,
|
|
p {
|
|
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%);
|
|
}
|
|
}
|
|
|
|
.tippy-box[data-theme="dropdown-widget"] {
|
|
background-color: hsl(240deg 5% 16%);
|
|
border: 1px solid hsl(0deg 0% 0%);
|
|
box-shadow:
|
|
0 7px 13px hsl(0deg 0% 0% / 35%),
|
|
0 5px 8px hsl(0deg 0% 0% / 32%),
|
|
0 2px 4px hsl(0deg 0% 0% / 20%);
|
|
}
|
|
|
|
.dropdown-list-container .dropdown-list .list-item {
|
|
&:focus {
|
|
background-color: hsl(220deg 12% 95.1% / 5%);
|
|
}
|
|
|
|
& > a {
|
|
color: hsl(0deg 0% 75%);
|
|
|
|
&:hover {
|
|
background-color: hsl(220deg 12% 95.1% / 5%);
|
|
}
|
|
}
|
|
}
|
|
|
|
#navbar-middle .column-middle-inner,
|
|
.header,
|
|
#message_view_header {
|
|
background-color: var(--color-background-navbar);
|
|
}
|
|
|
|
& body,
|
|
.app-main,
|
|
.column-middle,
|
|
#streams_header,
|
|
.direct-messages-container {
|
|
background-color: var(--color-background);
|
|
}
|
|
|
|
#scroll-to-bottom-button-container {
|
|
background: transparent;
|
|
|
|
& span {
|
|
color: hsl(0deg 0% 27%);
|
|
}
|
|
}
|
|
|
|
.main-view-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%);
|
|
|
|
.main-view-banner-close-button {
|
|
color: hsl(147deg 51% 55% / 50%);
|
|
|
|
&:hover {
|
|
color: hsl(147deg 51% 55%);
|
|
}
|
|
|
|
&:active {
|
|
color: hsl(147deg 51% 55% / 75%);
|
|
}
|
|
}
|
|
|
|
.main-view-banner-action-button {
|
|
background-color: hsl(147deg 51% 55% / 10%);
|
|
color: inherit;
|
|
|
|
&:hover {
|
|
background-color: hsl(147deg 51% 55% / 15%);
|
|
}
|
|
|
|
&:active {
|
|
background-color: hsl(147deg 51% 55% / 20%);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.warning,
|
|
&.warning-style {
|
|
background-color: hsl(53deg 100% 11%);
|
|
border-color: hsl(38deg 44% 60% / 40%);
|
|
color: hsl(50deg 45% 80%);
|
|
|
|
.main-view-banner-close-button {
|
|
color: hsl(50deg 45% 61% / 50%);
|
|
|
|
&:hover {
|
|
color: hsl(50deg 45% 61%);
|
|
}
|
|
|
|
&:active {
|
|
color: hsl(50deg 45% 61% / 75%);
|
|
}
|
|
}
|
|
|
|
.main-view-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%);
|
|
|
|
.main-view-banner-close-button {
|
|
color: hsl(3deg 73% 74% / 50%);
|
|
|
|
&:hover {
|
|
color: hsl(3deg 73% 74%);
|
|
}
|
|
|
|
&:active {
|
|
color: hsl(3deg 73% 74% / 75%);
|
|
}
|
|
}
|
|
|
|
.main-view-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%);
|
|
|
|
.main-view-banner-close-button {
|
|
color: hsl(205deg 58% 69% / 50%);
|
|
|
|
&:hover {
|
|
color: hsl(205deg 58% 69%);
|
|
}
|
|
|
|
&:active {
|
|
color: hsl(205deg 58% 69% / 75%);
|
|
}
|
|
}
|
|
|
|
.main-view-banner-action-button,
|
|
.upload_banner_cancel_button {
|
|
background-color: hsl(205deg 58% 69% / 10%);
|
|
border-color: transparent;
|
|
color: hsl(205deg 58% 69%);
|
|
|
|
&:hover {
|
|
background-color: hsl(205deg 58% 69% / 15%);
|
|
}
|
|
|
|
&:active {
|
|
background-color: hsl(205deg 58% 69% / 20%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.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%);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.active_private_messages_section {
|
|
#private_messages_section,
|
|
#direct-messages-list,
|
|
#hide-more-direct-messages {
|
|
background-color: hsl(199deg 33% 46% / 20%);
|
|
}
|
|
}
|
|
|
|
/* these are converting grey things to "new grey" */
|
|
:disabled,
|
|
input:not([type="radio"]):read-only,
|
|
textarea:read-only,
|
|
#org-join-settings .dropdown-widget-button:disabled {
|
|
color: inherit;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.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,
|
|
#custom-expiration-time-input,
|
|
#org-join-settings .dropdown-widget-button,
|
|
#compose_recipient_box {
|
|
background-color: hsl(0deg 0% 0% / 20%);
|
|
border-color: hsl(0deg 0% 0% / 60%);
|
|
color: inherit;
|
|
}
|
|
|
|
.dropdown-list-search .dropdown-list-search-input:focus {
|
|
background-color: hsl(225deg 6% 7%);
|
|
border: 1px solid hsl(0deg 0% 100% / 50%);
|
|
box-shadow: 0 0 5px hsl(0deg 0% 100% / 40%);
|
|
}
|
|
|
|
.dropdown-widget-button {
|
|
border-color: hsl(0deg 0% 0% / 60%);
|
|
background-color: hsl(0deg 0% 0% / 20%);
|
|
}
|
|
|
|
& select option {
|
|
background-color: var(--color-background);
|
|
color: hsl(236deg 33% 90%);
|
|
}
|
|
|
|
.pill-container {
|
|
border-style: solid;
|
|
border-width: 1px;
|
|
}
|
|
|
|
.deactivated-pill {
|
|
background-color: hsl(0deg 86% 14%) !important;
|
|
}
|
|
|
|
#compose-direct-recipient.pill-container {
|
|
background-color: hsl(0deg 0% 0% / 20%);
|
|
}
|
|
|
|
#searchbox {
|
|
/* Light theme shows hover mostly through box-shadow,
|
|
and dark theme shows it mostly through changing color
|
|
of the search button. */
|
|
.navbar-search:not(.expanded)
|
|
#searchbox-input-container:hover
|
|
.search_icon {
|
|
opacity: 0.75;
|
|
}
|
|
|
|
/* Colors are inherited in light theme */
|
|
.navbar-search .search_icon,
|
|
.navbar-search .search_close_button {
|
|
color: hsl(0deg 0% 78%);
|
|
}
|
|
}
|
|
|
|
.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-picker-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 {
|
|
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_time:hover {
|
|
color: var(--color-message-action-interactive);
|
|
}
|
|
|
|
.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_recipient_box:focus {
|
|
border-color: hsl(0deg 0% 0% / 90%);
|
|
}
|
|
|
|
.compose-control-buttons-container .divider {
|
|
color: hsl(236deg 33% 90% / 25%);
|
|
}
|
|
|
|
.compose_control_button:hover {
|
|
background-color: hsl(0deg 0% 100% / 10%);
|
|
}
|
|
|
|
#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-feed .recipient_row,
|
|
.message_row,
|
|
.overlay-message-row .overlay-message-info-box,
|
|
.preview_message_area {
|
|
border-color: hsl(0deg 0% 0% / 40%);
|
|
}
|
|
|
|
.preview_message_area {
|
|
background-color: inherit;
|
|
}
|
|
|
|
.spectator_narrow_login_button,
|
|
.top-navbar-border {
|
|
border-color: hsl(0deg 0% 0% / 60%);
|
|
}
|
|
|
|
& 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-picker-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%);
|
|
}
|
|
|
|
#draft_overlay,
|
|
#scheduled_messages_overlay_container {
|
|
.flex.overlay-content > div {
|
|
box-shadow: 0 0 30px hsl(213deg 31% 0%);
|
|
background-color: var(--color-background);
|
|
}
|
|
}
|
|
|
|
.tippy-box[data-theme~="light-border"],
|
|
.dropdown-menu ul,
|
|
.dropdown .dropdown-menu {
|
|
background-color: hsl(212deg 32% 14%);
|
|
}
|
|
|
|
/* Undo default dropdown background color for dark mode. */
|
|
#searchbox_form .dropdown-menu ul {
|
|
background-color: unset;
|
|
}
|
|
|
|
.dropdown-menu a {
|
|
color: inherit;
|
|
}
|
|
|
|
.dropdown .dropdown-menu li.divider,
|
|
.popover hr,
|
|
hr {
|
|
color: hsl(212deg 28% 18%);
|
|
opacity: 0.2;
|
|
}
|
|
|
|
.spectator-view #gear-menu-dropdown {
|
|
.gear-menu-select-dark-theme {
|
|
display: none;
|
|
}
|
|
|
|
.gear-menu-select-light-theme {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.nav .dropdown-menu::after {
|
|
border-bottom-color: hsl(235deg 18% 7%);
|
|
}
|
|
|
|
.narrow_to_compose_recipients,
|
|
.expand_composebox_button,
|
|
.collapse_composebox_button,
|
|
.clear_search_button,
|
|
.clear_search_button:focus,
|
|
.clear_search_button:active,
|
|
.clear_search_button:disabled:hover,
|
|
#user-groups .save-instructions,
|
|
.close {
|
|
color: hsl(236deg 33% 80%);
|
|
}
|
|
|
|
.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%);
|
|
}
|
|
|
|
.zoom-in {
|
|
#topics_header {
|
|
background-color: var(--color-background);
|
|
}
|
|
}
|
|
|
|
#topics_header {
|
|
.show-all-streams {
|
|
color: hsl(0deg 0% 100% / 75%);
|
|
opacity: 0.75;
|
|
}
|
|
}
|
|
|
|
#buddy-list-users-matching-view li:hover,
|
|
#buddy-list-users-matching-view li.highlighted_user {
|
|
background-color: hsl(136deg 25% 73% / 20%);
|
|
}
|
|
|
|
.group-row.active,
|
|
.stream-row.active,
|
|
.emoji-picker-popover .emoji-showcase-container,
|
|
.emoji-picker-popover .emoji-popover .emoji-popover-category-tabs,
|
|
.emoji-picker-popover .emoji-popover .emoji-popover-top {
|
|
background-color: hsl(0deg 0% 0% / 20%);
|
|
}
|
|
|
|
.stream-row,
|
|
.group-row {
|
|
/* This is for coluring the plus sign SVGs in stream-list UI */
|
|
/* public */
|
|
.check:not(.checked) svg {
|
|
fill: hsl(218deg 14% 33%);
|
|
}
|
|
|
|
/* private */
|
|
.disabled svg {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* public :hover */
|
|
.check:not(.checked, .disabled):hover svg {
|
|
fill: hsl(230deg 11% 67%);
|
|
}
|
|
}
|
|
|
|
.recent_view_participant_overflow {
|
|
color: hsl(0deg 0% 100%) !important;
|
|
background-color: hsl(211deg 18% 25%) !important;
|
|
}
|
|
|
|
.recent_view_container #recent_view_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_view_table tr {
|
|
background-color: var(--color-background);
|
|
|
|
&:hover {
|
|
background-color: hsl(208deg 26% 11% / 60%);
|
|
}
|
|
}
|
|
|
|
#recent_view_table .unread_topic {
|
|
background-color: hsl(212deg 30% 22% / 40%);
|
|
|
|
&:hover {
|
|
background-color: hsl(212deg 30% 22% / 60%);
|
|
}
|
|
}
|
|
|
|
.btn-recent-selected,
|
|
#recent_view_table thead th {
|
|
background-color: hsl(228deg 11% 17%) !important;
|
|
|
|
&[data-sort]:hover {
|
|
background-color: hsl(211deg 29% 14%) !important;
|
|
}
|
|
}
|
|
|
|
#recent_view_table td a {
|
|
color: hsl(206deg 89% 74%);
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
color: hsl(208deg 64% 52%);
|
|
}
|
|
}
|
|
|
|
#recent_view_table {
|
|
border-color: hsl(0deg 0% 0% / 60%);
|
|
|
|
.fa-envelope,
|
|
.fa-group {
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
|
|
.drafts-container .header-body .delete-drafts-group > *:focus {
|
|
background-color: hsl(228deg 11% 17%);
|
|
}
|
|
|
|
& thead,
|
|
.drafts-container .drafts-header,
|
|
.nav > li > a:focus,
|
|
.nav > li > a:hover,
|
|
.subscriptions-container .subscriptions-header,
|
|
.user-groups-container .user-groups-header,
|
|
.overlay-messages-header,
|
|
.grey-box,
|
|
.white-box,
|
|
.stream-email,
|
|
#generate-integration-url-modal .integration-url,
|
|
#settings_page .settings-header,
|
|
#settings_page .sidebar li.active,
|
|
#settings_page .sidebar-wrapper .tab-container,
|
|
.table-striped tbody tr:nth-child(even) td,
|
|
.table-striped tbody tr:nth-child(odd) th,
|
|
#subscription_overlay #stream-creation .settings-sticky-footer,
|
|
#groups_overlay #user-group-creation .settings-sticky-footer {
|
|
border-color: hsl(0deg 0% 0% / 20%);
|
|
background-color: hsl(0deg 0% 0% / 20%);
|
|
}
|
|
|
|
.table-striped tbody tr:nth-child(odd) td {
|
|
background-color: var(--color-background-modal);
|
|
}
|
|
|
|
.user-groups-container .right .display-type,
|
|
.subscriptions-container .right .display-type,
|
|
.stream-row,
|
|
.group-row,
|
|
.subscriptions-container .left .list-toggler-container,
|
|
.user-groups-container .left .list-toggler-container,
|
|
.subscriptions-container .left,
|
|
.user-groups-container .left,
|
|
.subscriber-list-box,
|
|
.subscriber-list-box .subscriber_list_container .subscriber-list 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,
|
|
#recent_view_table table td {
|
|
border-color: hsl(0deg 0% 0% / 20%);
|
|
}
|
|
|
|
.overlay-message-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;
|
|
}
|
|
|
|
/* There is no lefthand border to cover in
|
|
dark mode, so don't apply negative margin
|
|
that would otherwise pull the unread marker
|
|
to the left. */
|
|
.unread_marker {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.selected_message .messagebox-content {
|
|
border-color: hsl(217deg 64% 59% / 70%);
|
|
}
|
|
|
|
.rendered_markdown {
|
|
.alert-word {
|
|
background-color: hsl(22deg 70% 35%);
|
|
}
|
|
|
|
.codehilite code,
|
|
.codehilite pre {
|
|
color: hsl(212deg 98% 82%);
|
|
background-color: hsl(212deg 0% 11%);
|
|
}
|
|
|
|
.codehilite pre {
|
|
border: 1px solid hsl(0deg 0% 0% / 50%);
|
|
}
|
|
|
|
.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-info {
|
|
color: hsl(205deg 58% 80%);
|
|
background-color: hsl(204deg 100% 12%);
|
|
border-color: hsl(205deg 58% 69% / 40%);
|
|
}
|
|
|
|
.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%);
|
|
}
|
|
|
|
.stacktrace-more-info {
|
|
background-color: hsl(312deg 7% 14%);
|
|
}
|
|
|
|
.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%);
|
|
}
|
|
|
|
#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%);
|
|
}
|
|
|
|
.manage-profile-tab-footer {
|
|
&.modal__footer_wrapper {
|
|
border-top: 1px solid hsl(0deg 0% 100% / 20%);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 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: var(--color-background);
|
|
}
|
|
|
|
.top-messages-logo {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
.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% 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 {
|
|
opacity: 0.15;
|
|
border-bottom: 1px solid hsl(0deg 0% 100%);
|
|
}
|
|
|
|
#bots_lists_navbar .active a {
|
|
color: hsl(0deg 0% 87%);
|
|
background-color: var(--color-background);
|
|
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_view_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,
|
|
[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%);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen {
|
|
:root.dark-theme {
|
|
@extend %dark-theme;
|
|
}
|
|
}
|
|
|
|
@media screen and (prefers-color-scheme: dark) {
|
|
:root.color-scheme-automatic {
|
|
@extend %dark-theme;
|
|
}
|
|
}
|