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

771 lines
19 KiB
SCSS
Raw Normal View History

styles: Rename dark-mode to night-mode. This matches the externally-facing name for the feature as well as the setting variable in the code.
2018-03-28 19:41:26 +02:00
body.night-mode {
dark-mode: Change hex color codes to HSL.
2017-12-07 05:33:16 +01:00
background-color: hsl(212, 28%, 18%);
color: hsl(236, 33%, 90%);
Add an experimental dark mode stylesheet. Note from tabbott: While this initial version is experimental and definitely incomplete, we expect to have a solid version done over the next few weeks (after more refactoring). We're merging this now to make it easy to test both versions when refactoring our CSS. Fixes #267.
2017-11-14 18:50:06 +01:00
cleanup: Remove unnecessary 'magic' style for night mode. This was introduced in e0236646 For 1.5 years we did not find a case that needed it (besides the `a` tag hover state, that is not obvious if it was needed or it was used as an example) It is not obvious if this solution was a good idea. The concern was that `body.night-mode` is more specific than `body` and some styles might override others less specific in cases we might not want that. Of course, we want that in the majority of cases, and css-specificity rules are not simple to comprehend. Good further reading: http://cssspecificity.com/ https://specificity.keegan.st/ The added complexity of the resulting styles and the added code that might not serve any practical purpose seem to not be worth it.
2019-03-07 18:09:20 +01:00
a:hover {
color: hsl(200, 79%, 66%);
}
ul.filters a:hover {
color: inherit;
}
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.app-main,
.header-main,
#tab_bar_underpadding,
.floating_recipient .message-header-wrapper,
.column-middle,
#compose,
.column-left .left-sidebar,
.column-right .right-sidebar,
#subscription_overlay .right,
#settings_page .form-sidebar,
#settings_page .right {
background-color: hsl(212, 28%, 18%);
}
dark-mode: Fix background colors of modals and sidebars in mobile view. Fixes #7623.
2017-12-06 03:37:16 +01:00
night mode: Fix how "x" is displayed on "You have nothing to send!". Enhance visibility of "x" to dismiss the dialog box of "You have nothing to send!" message. To achieve this: Added class 'compose-send-status-close' with new color attribute in file night_mode.scss. Fixes: #14459 Co-authored-by: @MariaGkoulta <43913366+MariaGkoulta@users.noreply.github.com>
2020-04-07 01:21:05 +02:00
.compose-send-status-close {
color: hsl(0, 0%, 100%);
composebox: Make empty msg alert's cross prominent in night mode. Increased opacity of the cross in night mode to make the cross easily visible. Previously, low values of opacity caused the cross to be not easily visible. Fixes #14459.
2020-04-27 22:02:03 +02:00
opacity: 1.0;
}
.compose-send-status-close:hover {
opacity: .4;
night mode: Fix how "x" is displayed on "You have nothing to send!". Enhance visibility of "x" to dismiss the dialog box of "You have nothing to send!" message. To achieve this: Added class 'compose-send-status-close' with new color attribute in file night_mode.scss. Fixes: #14459 Co-authored-by: @MariaGkoulta <43913366+MariaGkoulta@users.noreply.github.com>
2020-04-07 01:21:05 +02:00
}
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.message_embed .data-container::after {
url preview: Fix CSS to make url preview titles clickable. 06f3cb2b78ffcd29bd2742bd03a374871f3fab36 added some styling to make the embed previews prettier, and in particular added a bottom fading gradient to make the embed description text fade out slowly, when it is out of bounds. The fading used an ::after pseudo-element which had 100% height of the `.data-container` which contained the title and the description of the preview. This pseudo-element got overlaid on the title and made it un-clickable. This commit retains the visual appearance of the fade, while reducing the height of the ::after pseudo element, so that it never gets overlaid on the title, keeping it clickable always.
2019-06-23 15:45:52 +02:00
background: linear-gradient(0deg, hsl(212, 28%, 18%), transparent 100%);
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
}
message-feed: Add some styling to open graph previews. This adds some styling to make the open graph previews look a bit nicer, including: 1. Adding a bottom fading gradient to slowly fade out text that is out of bounds rather than chopping it off. 2. Using font anti-aliasing to make the characters appear smoother. 3. Increasing the font size of the title to give it prominence. 4. Changing the height to 80px from 70px.
2018-01-09 23:19:58 +01:00
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.column-left .left-sidebar,
#settings_page .form-sidebar,
stream settings: Correct alignment of filter streams div. The div containing options for filtering streams was placed in the centre. Aligned it towards the right. Had to pass a special check variable in subs.js:540 to add the specific class for this purpose. This was a specific scenario where this sort of CSS was to be added, hence had to make a specific case. Also, fixed the bottom border color of the search streams bar for night mode.
2020-04-20 22:41:03 +02:00
.stream_name_search_section,
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.column-right .right-sidebar {
border-color: hsla(0, 0%, 0%, 0.2);
}
dark-mode: Fix background colors of modals and sidebars in mobile view. Fixes #7623.
2017-12-06 03:37:16 +01:00
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.dark .message_label_clickable.stream_label,
.dark .stream_label,
.stream_label {
color: hsl(212, 28%, 18%);
}
Add an experimental dark mode stylesheet. Note from tabbott: While this initial version is experimental and definitely incomplete, we expect to have a solid version done over the next few weeks (after more refactoring). We're merging this now to make it easy to test both versions when refactoring our CSS. Fixes #267.
2017-11-14 18:50:06 +01:00
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.new-style label.checkbox input[type=checkbox] ~ span {
border-color: hsla(0, 0%, 100%, 0.4);
}
dark-mode: Remove unnecessary CSS and fix dark mode bugs.
2017-11-16 01:43:43 +01:00
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.modal-bg {
styles: Convert background properties to background-color.
2018-10-08 22:31:26 +02:00
background-color: hsl(212, 28%, 18%);
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
}
dark-mode: Remove unnecessary CSS and fix dark mode bugs.
2017-11-16 01:43:43 +01:00
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.streams_popover .sp-container {
styles: Convert background properties to background-color.
2018-10-08 22:31:26 +02:00
background-color: transparent;
popover: Use zulip style for `Choose` button. This commit will change the style of `Choose` btn in both day and night mode to match with the style of other buttons of the app.
2020-05-01 03:03:43 +02:00
button {
background-color: hsl(208, 35%, 11%);
border: 1px solid hsl(210, 36%, 4%);
color: hsl(236, 31%, 90%);
}
popover: Change the divider color in `Choose custom color`. Changed the divider color in to match the style of day/night mode.
2020-05-01 03:34:10 +02:00
.sp-picker-container {
border-left: solid 1px hsl(210, 36%, 4%);
}
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
}
dark-mode: Remove unnecessary CSS and fix dark mode bugs.
2017-11-16 01:43:43 +01:00
topic-popover: Change design of topic popover. Extracts the topic name from the list items and display it in the popover title. Add a seperator between normal user and admin only options.
2020-05-15 16:08:25 +02:00
ul.topics_popover {
.admin-separator {
&::before,
&::after {
color: hsl(212, 28%, 18%);
opacity: 0.2;
}
}
}
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
/* this one is because in the app we have blue and in night-mode it should be white. */
.popover a {
color: inherit;
}
dark-mode: Remove unnecessary CSS and fix dark mode bugs.
2017-11-16 01:43:43 +01:00
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.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;
}
Add an experimental dark mode stylesheet. Note from tabbott: While this initial version is experimental and definitely incomplete, we expect to have a solid version done over the next few weeks (after more refactoring). We're merging this now to make it easy to test both versions when refactoring our CSS. Fixes #267.
2017-11-14 18:50:06 +01:00
messagebox: Change alert message background to dark in night mode. When copying a message by clicking on "copy and close" button in message edit box an alert appears that says "Copied!"; Background of the message is set corresponding with the day mode but not the night mode. This changes the background of the alert message to the dark color in night mode.
2019-02-15 16:00:58 +01:00
/* 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%);
}
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
/* do not turn the .message_header .stream_label text dark on hover because they're
dark-mode: Fix incorrect hover colors on `.stream_label`. The headers on some dark stream labels would turn dark and and on some light turn light. This makes sure that does not happen.
2017-11-30 00:56:36 +01:00
on a dark background, and don't change the dark labels dark either. */
navbar: Improve structure & styling for top navbar. This updates the logged-in top navbar to display the stream/message name, number of users, and description. It also replaces the search bar with a search icon that expands into a full-width search bar. Co-authored-by: Max Nussenbaum <max@maxnuss.com> Fixes: #164. Fixes: #5198.
2020-02-03 17:01:11 +01:00
.message_header:not(.dark_background) a.stream_label:not(.dark_background):hover {
color: hsl(212, 28%, 18%);
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
}
dark-mode: Darken background color of unread topic/PM counts. Fixes #8763.
2018-01-30 06:15:18 +01:00
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
/* these are converting grey things to "new grey" */
night-mode: Change coloring of disabled items to fit night mode.
2018-08-06 03:13:23 +02:00
*[disabled=disabled],
design: Use CSS instead of disabled property for non-editable text. The disabled property actually prevented text selection, so it seems better to use CSS through the `readonly="readonly"` property. For this, swapped .prop() with .attr() since .prop() was setting it as `readonly=""`.
2020-04-16 15:30:31 +02:00
*[readonly=readonly],
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.sidebar-title,
.recipient_row_date {
color: inherit;
opacity: 0.5;
}
night-mode: Add borders to input pill containers.
2018-04-19 05:10:49 +02:00
widgets: Style buttons properly in night-mode.
2020-05-06 15:45:52 +02:00
.rendered_markdown button,
night mode: Improve coloring of .new-style buttons. Border and text color applied by specific classes such as sea-green were nullified by the previous selector; this commit restores the coloring for these buttons.
2019-06-11 05:38:39 +02:00
.new-style .button {
background-color: hsla(0, 0%, 0%, 0.2);
night mode: Fix loss of border color on default style buttons.
2019-07-19 09:36:10 +02:00
&:not(.sea-green):not(.btn-danger):not(.btn-warning):not(.btn-link) {
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%);
}
night mode: Improve coloring of .new-style buttons. Border and text color applied by specific classes such as sea-green were nullified by the previous selector; this commit restores the coloring for these buttons.
2019-06-11 05:38:39 +02:00
&:hover,
&:focus,
&:active {
background-color: hsla(0, 0%, 0%, 0.15);
}
}
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="date"],
textarea,
.new-style .tab-switcher .ind-tab:not(.selected),
select,
.pill-container {
background-color: hsla(0, 0%, 0%, 0.2);
border-color: hsla(0, 0%, 0%, 0.6);
color: inherit;
}
compose: Add pills for typing in PM recipients. @brockwhittaker wrote the original prototype for having pills in the recipient box when users compose PMs (either 1:1 or huddle). The prototype was test deloyed on our main realm for several weeks. This commit includes all the original CSS and HTML from the prototype. After some things changed with the codebase after the initial test deployment, I made the following changes: * In prior commits I refactored out a module called `user_pill.js` that implemented some common functions against a more streamlined version of `input_pill.js`, and this commit largely integrates with that. * I made changes in a prior commit to handle Zephyr semantics (emails don't get validated) and tested this commit with zephyr. * I fixed a reload bug by extracting code out to `compose_pm_pill.js` and re-ordering some calls to `initialize`. There are still two flaws related to un-pill-ified text in the input: * We could be more aggressive about trying to pill-ify emails when you blur or tab away. * We only look at the pills when you send the message, instead of complaining about the un-pill-ified text. (Some folks may consider that a feature, but it's probably surprising to others.)
2018-03-06 15:07:55 +01:00
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
select option {
background-color: hsl(212, 28%, 18%);
color: hsl(236, 33%, 90%);
}
compose: Add pills for typing in PM recipients. @brockwhittaker wrote the original prototype for having pills in the recipient box when users compose PMs (either 1:1 or huddle). The prototype was test deloyed on our main realm for several weeks. This commit includes all the original CSS and HTML from the prototype. After some things changed with the codebase after the initial test deployment, I made the following changes: * In prior commits I refactored out a module called `user_pill.js` that implemented some common functions against a more streamlined version of `input_pill.js`, and this commit largely integrates with that. * I made changes in a prior commit to handle Zephyr semantics (emails don't get validated) and tested this commit with zephyr. * I fixed a reload bug by extracting code out to `compose_pm_pill.js` and re-ordering some calls to `initialize`. There are still two flaws related to un-pill-ified text in the input: * We could be more aggressive about trying to pill-ify emails when you blur or tab away. * We only look at the pills when you send the message, instead of complaining about the un-pill-ified text. (Some folks may consider that a feature, but it's probably surprising to others.)
2018-03-06 15:07:55 +01:00
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.topic-unread-count,
.private_message_count {
background-color: hsla(105, 2%, 50%, 0.5);
}
dark-mode: Respect ".no-style" attr on buttons. This respects the ".no-style" declaration on buttons and sets the background back to transparent in dark mode (from a slightly darkened background).
2017-11-30 22:44:45 +01:00
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.pill-container {
border-style: solid;
border-width: 1px;
}
Add an experimental dark mode stylesheet. Note from tabbott: While this initial version is experimental and definitely incomplete, we expect to have a solid version done over the next few weeks (after more refactoring). We're merging this now to make it easy to test both versions when refactoring our CSS. Fixes #267.
2017-11-14 18:50:06 +01:00
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
#search_arrows .pill,
.pm_recipient .pill-container .pill {
color: inherit;
border: 1px solid hsla(0, 0%, 0%, 0.50);
styles: Convert background properties to background-color.
2018-10-08 22:31:26 +02:00
background-color: hsla(0, 0%, 0%, 0.25);
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
font-weight: 600;
}
Add an experimental dark mode stylesheet. Note from tabbott: While this initial version is experimental and definitely incomplete, we expect to have a solid version done over the next few weeks (after more refactoring). We're merging this now to make it easy to test both versions when refactoring our CSS. Fixes #267.
2017-11-14 18:50:06 +01:00
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
#search_arrows .pill:focus,
.pm_recipient .pill-container .pill:focus {
styles: Convert 3-digit hex values to HSL values.
2018-09-27 21:57:07 +02:00
color: hsl(0, 0%, 100%);
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
border: 1px solid hsla(176, 78%, 28%, 0.6);
styles: Convert background properties to background-color.
2018-10-08 22:31:26 +02:00
background-color: hsla(176, 49%, 42%, 0.4);
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
}
Add an experimental dark mode stylesheet. Note from tabbott: While this initial version is experimental and definitely incomplete, we expect to have a solid version done over the next few weeks (after more refactoring). We're merging this now to make it easy to test both versions when refactoring our CSS. Fixes #267.
2017-11-14 18:50:06 +01:00
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.new-style .button.no-style {
background-color: transparent;
}
dark-mode: Remove unnecessary CSS and fix dark mode bugs.
2017-11-16 01:43:43 +01:00
css: Add similar nesting to night-mode emoji elements as in reactions.scss. Due to additional nesting added in reactions.scss, night-mode styles were prioritized lower than the original rules defined. Fixes regressions introduced by changes in PR #12473
2019-06-05 13:33:51 +02:00
.emoji-info-popover .emoji-popover .emoji-popover-category-tabs .emoji-popover-tab-item.active {
night mode: Improve coloring of emoji picker.
2019-02-19 04:49:17 +01:00
background-color: hsla(0, 0%, 0%, 0.5);
}
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.new-style .tab-switcher .ind-tab.selected,
div.message_content thead,
.table-striped thead th,
night mode: Improve coloring of message reactions.
2019-02-18 23:20:42 +01:00
.emoji-popover .reaction.reacted,
.message_reactions .message_reaction.reacted {
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
background-color: hsla(0, 0%, 0%, 0.5);
border-color: hsla(0, 0%, 0%, 0.9);
}
Add an experimental dark mode stylesheet. Note from tabbott: While this initial version is experimental and definitely incomplete, we expect to have a solid version done over the next few weeks (after more refactoring). We're merging this now to make it easy to test both versions when refactoring our CSS. Fixes #267.
2017-11-14 18:50:06 +01:00
night mode: Improve coloring of message reactions.
2019-02-18 23:20:42 +01:00
.message_reactions:hover .message_reaction + .reaction_button,
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.message_reactions .message_reaction {
night mode: Improve coloring of message reactions.
2019-02-18 23:20:42 +01:00
background-color: transparent;
border-color: hsla(0, 0%, 0%, 0.8);
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
color: inherit;
night mode: Improve coloring of message reactions.
2019-02-18 23:20:42 +01:00
&:hover {
border-color: hsl(236, 33%, 90%);
}
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
}
Add an experimental dark mode stylesheet. Note from tabbott: While this initial version is experimental and definitely incomplete, we expect to have a solid version done over the next few weeks (after more refactoring). We're merging this now to make it easy to test both versions when refactoring our CSS. Fixes #267.
2017-11-14 18:50:06 +01:00
night mode: Improve coloring of emoji picker.
2019-02-19 04:49:17 +01:00
.emoji-popover .reaction:focus {
box-shadow: 0 0 1px hsl(0, 0%, 98%);
}
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
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);
}
navbar: Fix transparency issue.
2017-11-22 21:34:04 +01:00
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.message-header-contents,
navbar: Improve structure & styling for top navbar. This updates the logged-in top navbar to display the stream/message name, number of users, and description. It also replaces the search bar with a search icon that expands into a full-width search bar. Co-authored-by: Max Nussenbaum <max@maxnuss.com> Fixes: #164. Fixes: #5198.
2020-02-03 17:01:11 +01:00
.message_header_private_message .message-header-contents {
styles: Convert background properties to background-color.
2018-10-08 22:31:26 +02:00
background-color: hsla(0, 0%, 0%, 0.2);
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
}
Add an experimental dark mode stylesheet. Note from tabbott: While this initial version is experimental and definitely incomplete, we expect to have a solid version done over the next few weeks (after more refactoring). We're merging this now to make it easy to test both versions when refactoring our CSS. Fixes #267.
2017-11-14 18:50:06 +01:00
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.message-header-contents,
.message_header_private_message .message-header-contents {
border-color: transparent;
}
Add an experimental dark mode stylesheet. Note from tabbott: While this initial version is experimental and definitely incomplete, we expect to have a solid version done over the next few weeks (after more refactoring). We're merging this now to make it easy to test both versions when refactoring our CSS. Fixes #267.
2017-11-14 18:50:06 +01:00
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
/* Not that .message_row (below) needs to be more contrast on dark mode */
.compose-content,
.message_list .recipient_row,
.message_row,
.draft-row .draft-info-box,
compose: Change preview_message_area and preview_content to classes. Preview box is to be reused in message edit. ID does not remain the same in message-edit section so the styles are changed to classes.
2019-02-05 14:44:16 +01:00
.preview_message_area {
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
border-color: hsla(0, 0%, 0%, 0.2);
}
Add an experimental dark mode stylesheet. Note from tabbott: While this initial version is experimental and definitely incomplete, we expect to have a solid version done over the next few weeks (after more refactoring). We're merging this now to make it easy to test both versions when refactoring our CSS. Fixes #267.
2017-11-14 18:50:06 +01:00
navbar: Extract navbar border into outer div. This is a prep commit for the new navbar, since the new navbar switches between a search bar and stream descriptions, it's easier to have the border defined in an outer div. Due to the way the changesets is generated, this may seem like a large diff, however, the only change to navbar.html is to add an opening div with the ".top-navbar-border" class and a corrseponding closing div to wrap around "#search_box" and "#search_box_legacy". Apart from this, a few styles have been edited in zulip.scss and night_mode.scss.
2020-02-21 20:02:49 +01:00
.top-navbar-border {
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
border-color: hsla(0, 0%, 0%, 0.6);
}
night-mode: Update CSS for navbar separators.
2020-05-12 09:14:14 +02:00
#tab_bar #tab_list .sub_count {
&::before,
&::after {
color: hsla(0, 0%, 100%, 0.5);
}
navbar: Improve structure & styling for top navbar. This updates the logged-in top navbar to display the stream/message name, number of users, and description. It also replaces the search bar with a search icon that expands into a full-width search bar. Co-authored-by: Max Nussenbaum <max@maxnuss.com> Fixes: #164. Fixes: #5198.
2020-02-03 17:01:11 +01:00
}
navbar: Increase the click area of to initiate search. This commit: - Switches margin for padding on the search closed icon, to ensure we cover the region to the right of icon as clickable area. - Applies the click handler that initiates the search to the second last element of the navbar: - This will most commonly be the narrow_description element, but may also be the entire navbar eg in the case of "ALL" or "starred". Applying this change to user names in "group-pm-with: ..." based narrows is a little questionable, but there are no other triggers on these names so this change makes sense for now. - The narrow_description may also contain links, which need to be handled correctly so that the behave like links should. We work around the onClick on the narrow_description, by applying a handler to <a> tags and invoking stopPropagation. - We also add CSS to change the cursor to a pointer to make the search icon change color on hover over the clickable area to indicate that the search box can be opened with a single click. - However, since <a> tags are handled differently, we add a hover listener which makes sure it behaves appropriately. We also increase the vertical padding of the <a> tags so they cover the entire vertical navbar region.
2020-04-22 19:24:52 +02:00
#tab_bar #tab_list span:nth-last-child(2):hover + .search_closed {
color: hsl(0, 0%, 100%);
}
navbar: Improve click area around stream name. Previously the click area to open the settings modal was limited to just the stream name (just the text). This, inconveniently, created a lot of empty, unclickable space around the stream name. This commit resolves the problem by: * Extracting the title and icon into a separate template as `navbar_title_and_icon.hbs` and calls this partial in `tab_bar.hbs`. * Calling the partial within an <a> tag for stream based narrows and in a <span> tag for non-stream narrows. * Making some CSS changes so that everything still renders correctly (visually). This commit also: * Leads us to "piggy back" all stream based narrow elements on the `stream_settings_link` conditional. (Previously the only "piggy backing" was by `narrow_description` on `sub_count`, which was necessary for the rendering of the `(no description)` string.) The end goal here is that the entire navbar is clickable. This is a step towards that goal, but some of the margins on the sub count and its ::before and ::after pseudo-elements still need to be fixed.
2020-06-12 17:21:30 +02:00
#tab_bar #tab_list .stream {
color: hsl(236, 33%, 90%);
}
search pills: Fix nightmode color of sub counts & narrow description.
2020-06-05 15:11:49 +02:00
#tab_bar #tab_list .sub_count,
#tab_bar #tab_list .narrow_description {
color: hsla(0, 0%, 90%, 1);
navbar: Improve structure & styling for top navbar. This updates the logged-in top navbar to display the stream/message name, number of users, and description. It also replaces the search bar with a search icon that expands into a full-width search bar. Co-authored-by: Max Nussenbaum <max@maxnuss.com> Fixes: #164. Fixes: #5198.
2020-02-03 17:01:11 +01:00
}
dark-mode: Make .dropdown-menu links base color in dark mode.
2018-02-02 03:17:59 +01:00
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.overlay,
css: Nest `#stream_creation_form` inside `#stream-creation`.
2019-07-21 19:54:45 +02:00
#subscription_overlay #stream-creation #stream_creation_form #stream_creating_indicator:not(:empty),
css: Add similar nesting to night-mode emoji elements as in reactions.scss. Due to additional nesting added in reactions.scss, night-mode styles were prioritized lower than the original rules defined. Fixes regressions introduced by changes in PR #12473
2019-06-05 13:33:51 +02:00
.emoji-info-popover .emoji-popover .emoji-popover-emoji:not(.reacted):focus {
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
background-color: hsla(212, 28%, 8%, 0.75);
}
Add an experimental dark mode stylesheet. Note from tabbott: While this initial version is experimental and definitely incomplete, we expect to have a solid version done over the next few weeks (after more refactoring). We're merging this now to make it easy to test both versions when refactoring our CSS. Fixes #267.
2017-11-14 18:50:06 +01:00
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.overlay .flex.overlay-content > div,
typeahead: Add a container div for the typeahead list. This change allows us to add custom changes to the HTML generated by the typeahead without interfering with the core functions that are provided by the library. At the end of this commit, the HTML structure is: $container <div> $menu <ul> list-items
2019-07-26 12:26:57 +02:00
.dropdown-menu.typeahead,
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
#settings_page,
.informational-overlays .overlay-content {
box-shadow: 0px 0px 30px hsl(212, 32%, 7%);
}
Add an experimental dark mode stylesheet. Note from tabbott: While this initial version is experimental and definitely incomplete, we expect to have a solid version done over the next few weeks (after more refactoring). We're merging this now to make it easy to test both versions when refactoring our CSS. Fixes #267.
2017-11-14 18:50:06 +01:00
typeahead: Add a container div for the typeahead list. This change allows us to add custom changes to the HTML generated by the typeahead without interfering with the core functions that are provided by the library. At the end of this commit, the HTML structure is: $container <div> $menu <ul> list-items
2019-07-26 12:26:57 +02:00
.dropdown-menu ul,
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.dropdown .dropdown-menu,
.popover,
.popover-title,
.popover-content {
background-color: hsl(212, 32%, 14%);
}
dark-mode: Change miscolored popover arrow colors. Fixes #8768.
2018-02-01 06:12:12 +01:00
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.dropdown-menu a {
color: inherit;
}
dark-mode: Change popover arrows to all be dark. This changes the position-based arrows on popovers to all be dark rather than light grey.
2017-11-29 23:29:01 +01:00
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.dropdown .dropdown-menu li.divider,
.popover hr,
hr {
color: hsl(212, 28%, 18%);
opacity: 0.2;
}
dark-mode: Change miscolored popover arrow colors. Fixes #8768.
2018-02-01 06:12:12 +01:00
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.nav .dropdown-menu::after,
.popover.bottom .arrow {
border-bottom-color: hsl(235, 18%, 7%);
}
dark-mode: Change Stream list chevrons colors to have more contrast. Fixes #7794.
2017-12-20 05:49:24 +01:00
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.popover.left .arrow {
border-left-color: hsl(235, 18%, 7%);
}
dark-mode: Change Stream list chevrons colors to have more contrast. Fixes #7794.
2017-12-20 05:49:24 +01:00
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.popover.top .arrow {
border-top-color: hsl(235, 18%, 7%);
}
Add an experimental dark mode stylesheet. Note from tabbott: While this initial version is experimental and definitely incomplete, we expect to have a solid version done over the next few weeks (after more refactoring). We're merging this now to make it easy to test both versions when refactoring our CSS. Fixes #267.
2017-11-14 18:50:06 +01:00
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.popover.right .arrow {
border-right-color: hsl(235, 18%, 7%);
}
Add an experimental dark mode stylesheet. Note from tabbott: While this initial version is experimental and definitely incomplete, we expect to have a solid version done over the next few weeks (after more refactoring). We're merging this now to make it easy to test both versions when refactoring our CSS. Fixes #267.
2017-11-14 18:50:06 +01:00
night mode: Fix coloring of message edit info tooltip.
2018-08-24 02:42:46 +02:00
#message_edit_tooltip,
night-mode: Fix color of clear search button for filter inputs.
2018-08-03 02:42:41 +02:00
.clear_search_button,
.clear_search_button:focus,
.clear_search_button:active,
.clear_search_button[disabled]:hover,
night mode: Improve styling of user groups in night mode.
2018-08-23 00:32:00 +02:00
#user-groups .save-instructions,
search: Simplify CSS for search_icon. This is preparatory refactoring for replacing the top navbar UI; in the new version, the search_icon may not be an <a> tag.
2020-01-23 02:41:38 +01:00
#searchbox_legacy .search_icon,
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
#searchbox_legacy .search_button,
search: Simplify CSS for search_icon. This is preparatory refactoring for replacing the top navbar UI; in the new version, the search_icon may not be an <a> tag.
2020-01-23 02:41:38 +01:00
#searchbox .search_icon,
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
#searchbox .search_button,
.close,
sidebar: Rename classes for menu icons in sidebars.
2020-04-16 16:15:39 +02:00
#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,
#stream_filters li:hover .stream-sidebar-menu-icon,
li.topic-list-item:hover .topic-sidebar-menu-icon {
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
color: hsl(236, 33%, 80%);
}
Add an experimental dark mode stylesheet. Note from tabbott: While this initial version is experimental and definitely incomplete, we expect to have a solid version done over the next few weeks (after more refactoring). We're merging this now to make it easy to test both versions when refactoring our CSS. Fixes #267.
2017-11-14 18:50:06 +01:00
night mode: Fix coloring of message edit info tooltip.
2018-08-24 02:42:46 +02:00
#message_edit_tooltip:hover,
night-mode: Fix color of clear search button for filter inputs.
2018-08-03 02:42:41 +02:00
.clear_search_button:hover,
search: Simplify CSS for search_icon. This is preparatory refactoring for replacing the top navbar UI; in the new version, the search_icon may not be an <a> tag.
2020-01-23 02:41:38 +01:00
#searchbox_legacy .search_icon:hover,
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
#searchbox_legacy .search_button:hover,
search: Simplify CSS for search_icon. This is preparatory refactoring for replacing the top navbar UI; in the new version, the search_icon may not be an <a> tag.
2020-01-23 02:41:38 +01:00
#searchbox .search_icon:hover,
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
#searchbox .search_button:hover,
css: Clean up left sidebar chevrons. This is a fairly big commit, but at the end it simplifies a lot of things. It's difficult to fix highly coupled code in incremental steps because, well, it's highly coupled code. The main thing this does is give each type of chevron in the left sidebar its own class * all-messages-arrow (NEW) * stream-sidebar-arrow * topic-sidebar-arrow Before this change, the "All messages" chevron was using stream-sidebar-arrow, which was a strange name for something that's not actually in the stream sidebar. Obviously this was cargo culted. There was not much JS to change here--we just fix the click handler for "All messsages". And then there's a one-line change to the template, and the rest is re-organizing the CSS.
2019-03-01 21:06:53 +01:00
.close:hover {
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
color: hsl(0, 0%, 100%);
}
Add an experimental dark mode stylesheet. Note from tabbott: While this initial version is experimental and definitely incomplete, we expect to have a solid version done over the next few weeks (after more refactoring). We're merging this now to make it easy to test both versions when refactoring our CSS. Fixes #267.
2017-11-14 18:50:06 +01:00
sidebar: Rename classes for menu icons in sidebars.
2020-04-16 16:15:39 +02:00
#user_presences li .user-list-sidebar-menu-icon:hover,
.all-messages-sidebar-menu-icon:hover,
.starred-messages-sidebar-menu-icon:hover,
.stream-sidebar-menu-icon:hover,
.topic-sidebar-menu-icon:hover {
css: Clean up left sidebar chevrons. This is a fairly big commit, but at the end it simplifies a lot of things. It's difficult to fix highly coupled code in incremental steps because, well, it's highly coupled code. The main thing this does is give each type of chevron in the left sidebar its own class * all-messages-arrow (NEW) * stream-sidebar-arrow * topic-sidebar-arrow Before this change, the "All messages" chevron was using stream-sidebar-arrow, which was a strange name for something that's not actually in the stream sidebar. Obviously this was cargo culted. There was not much JS to change here--we just fix the click handler for "All messsages". And then there's a one-line change to the template, and the rest is re-organizing the CSS.
2019-03-01 21:06:53 +01:00
color: hsl(0, 0%, 100%) !important;
}
style: Fix the stream and user list buttons on mobile in night mode. These buttons are displayed with a lighter background than other buttons. Update their borders and background colors (along with the border on the search box) so that they match the night theme. Fix #10301.
2018-08-16 02:03:52 +02:00
#streamlist-toggle,
#userlist-toggle {
userlist-toggle: Fix css styling errors.
2020-05-10 22:52:49 +02:00
color: inherit;
border-color: hsla(0, 0%, 0%, 0.6);
style: Fix the stream and user list buttons on mobile in night mode. These buttons are displayed with a lighter background than other buttons. Update their borders and background colors (along with the border on the search box) so that they match the night theme. Fix #10301.
2018-08-16 02:03:52 +02:00
}
userlist-toggle: Fix css styling errors.
2020-05-10 22:52:49 +02:00
#streamlist-toggle-button {
style: Fix the stream and user list buttons on mobile in night mode. These buttons are displayed with a lighter background than other buttons. Update their borders and background colors (along with the border on the search box) so that they match the night theme. Fix #10301.
2018-08-16 02:03:52 +02:00
color: inherit;
background-color: inherit;
}
userlist-toggle: Fix css styling errors.
2020-05-10 22:52:49 +02:00
#userlist-toggle-button {
color: hsl(221, 9%, 54%);
&:hover {
color: inherit;
}
}
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
li.active-filter,
li.active-sub-filter {
background-color: hsla(199, 33%, 46%, 0.2);
}
dark-mode: Remove unnecessary CSS and fix dark mode bugs.
2017-11-16 01:43:43 +01:00
css: Fix hover for "Private messages". It's ugly to hover the entire block--just hover the individual rows.
2019-03-12 15:38:32 +01:00
.top_left_row:hover,
css: Hover individual topic rows. Hovering the entire block was confusing.
2019-03-12 16:20:00 +01:00
.bottom_left_row:hover,
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
#stream_filters li.highlighted_stream,
#user_presences li:hover,
#user_presences li.highlighted_user {
background-color: hsla(136, 25%, 73%, 0.2);
}
Add an experimental dark mode stylesheet. Note from tabbott: While this initial version is experimental and definitely incomplete, we expect to have a solid version done over the next few weeks (after more refactoring). We're merging this now to make it easy to test both versions when refactoring our CSS. Fixes #267.
2017-11-14 18:50:06 +01:00
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
#stream_filters li.active-sub-filter:hover {
background-color: hsla(136, 25%, 73%, 0.5);
}
Add an experimental dark mode stylesheet. Note from tabbott: While this initial version is experimental and definitely incomplete, we expect to have a solid version done over the next few weeks (after more refactoring). We're merging this now to make it easy to test both versions when refactoring our CSS. Fixes #267.
2017-11-14 18:50:06 +01:00
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.floating_recipient .recipient_row {
border-top: none;
}
Add an experimental dark mode stylesheet. Note from tabbott: While this initial version is experimental and definitely incomplete, we expect to have a solid version done over the next few weeks (after more refactoring). We're merging this now to make it easy to test both versions when refactoring our CSS. Fixes #267.
2017-11-14 18:50:06 +01:00
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.stream-row.active,
css: Add similar nesting to night-mode emoji elements as in reactions.scss. Due to additional nesting added in reactions.scss, night-mode styles were prioritized lower than the original rules defined. Fixes regressions introduced by changes in PR #12473
2019-06-05 13:33:51 +02:00
.emoji-info-popover .emoji-showcase-container,
.emoji-info-popover .emoji-popover .emoji-popover-category-tabs,
.emoji-info-popover .emoji-popover .emoji-popover-top {
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
background-color: hsla(0, 0%, 0%, 0.2);
}
Add an experimental dark mode stylesheet. Note from tabbott: While this initial version is experimental and definitely incomplete, we expect to have a solid version done over the next few weeks (after more refactoring). We're merging this now to make it easy to test both versions when refactoring our CSS. Fixes #267.
2017-11-14 18:50:06 +01:00
recent_topics: Show unread count after topic name. We remove the non-obvious unread count column and move the unread counts to be displayed after topic.
2020-05-28 18:37:59 +02:00
.recent_topic_unread_count {
background-color: hsl(0, 0%, 15%) !important;
color: hsl(0, 0%, 100%);
}
recent_topics: Toggle topic display according to filters.
2020-05-23 09:04:51 +02:00
.btn-recent-filters {
recent_topics: Fix misplaced thead border and adjacent css properties.
2020-06-01 14:52:54 +02:00
background-color: hsl(211, 29%, 14%);
recent_topics: Toggle topic display according to filters.
2020-05-23 09:04:51 +02:00
border-color: hsl(0, 0%, 0%);
color: hsl(0, 0%, 100%);
}
recent_topics: Fix misplaced thead border and adjacent css properties.
2020-06-01 14:52:54 +02:00
.btn-recent-selected,
.recent_topics_table thead th {
recent_topics: Toggle topic display according to filters.
2020-05-23 09:04:51 +02:00
background-color: hsl(0, 0%, 0%) !important;
recent_topics: Fix misplaced thead border and adjacent css properties.
2020-06-01 14:52:54 +02:00
&: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: Toggle topic display according to filters.
2020-05-23 09:04:51 +02:00
}
settings: Fix broken headers in night mode. This bug turned out to pop up wherever a table existed in both 'settings' and 'organization settings', notably *excluding* both 'Custom Emoji' and 'Authentication Methods'. The first thought to the solution was to simply add `thead` to the css rule that applies the appropiate color for headers and the like. This was successful, however it brought attention to a sub-problem: `emoji-settings-admin` and `auth-mehtod-settings-admin` were both creating table headers in the body of the table. This was causing the rows in these two tables to be colored inversely from all the others. This is also the reason why these tables are the only ones correctly styled. These handlebars were updated with the headers moved out of the body. The even and odd rows of the tables were then colored appropriately. Fixes: #12209
2019-04-27 09:16:12 +02:00
thead,
css: Nest .drafts-header inside .drafts-container.
2019-08-16 03:42:45 +02:00
.drafts-container .drafts-header,
templates: Show Overlay of Recent Topics. * Show an empty overlay of recent topics. * Register click event to open recent topics. * Launch recent topics on "t" keypress. This is based on the draft overlay.
2020-04-08 13:59:56 +02:00
.recent_topics_container .recent_topics_header,
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.nav > li > a:hover,
css: Nest `.subscriptions-header` inside `.subscriptions-container`.
2019-07-18 18:22:58 +02:00
.subscriptions-container .subscriptions-header,
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.grey-box,
.white-box,
.stream-email,
#settings_page .settings-header,
#settings_page .form-sidebar .title,
#settings_page .sidebar li.active,
#settings_page .sidebar .tab-container,
settings: Fix broken headers in night mode. This bug turned out to pop up wherever a table existed in both 'settings' and 'organization settings', notably *excluding* both 'Custom Emoji' and 'Authentication Methods'. The first thought to the solution was to simply add `thead` to the css rule that applies the appropiate color for headers and the like. This was successful, however it brought attention to a sub-problem: `emoji-settings-admin` and `auth-mehtod-settings-admin` were both creating table headers in the body of the table. This was causing the rows in these two tables to be colored inversely from all the others. This is also the reason why these tables are the only ones correctly styled. These handlebars were updated with the headers moved out of the body. The even and odd rows of the tables were then colored appropriately. Fixes: #12209
2019-04-27 09:16:12 +02:00
.table-striped tbody tr:nth-child(even) td,
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.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);
}
Add an experimental dark mode stylesheet. Note from tabbott: While this initial version is experimental and definitely incomplete, we expect to have a solid version done over the next few weeks (after more refactoring). We're merging this now to make it easy to test both versions when refactoring our CSS. Fixes #267.
2017-11-14 18:50:06 +01:00
recent_topics: Display recent topics in a table. * Add action to mute topics. * We don't need to store muted data per topic as previously planned. * Moved launch topic test to the top so that they run on non-modified data.
2020-05-22 08:16:08 +02:00
.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {
background-color: hsla(0, 0%, 0%, 0.5);
}
settings: Fix broken headers in night mode. This bug turned out to pop up wherever a table existed in both 'settings' and 'organization settings', notably *excluding* both 'Custom Emoji' and 'Authentication Methods'. The first thought to the solution was to simply add `thead` to the css rule that applies the appropiate color for headers and the like. This was successful, however it brought attention to a sub-problem: `emoji-settings-admin` and `auth-mehtod-settings-admin` were both creating table headers in the body of the table. This was causing the rows in these two tables to be colored inversely from all the others. This is also the reason why these tables are the only ones correctly styled. These handlebars were updated with the headers moved out of the body. The even and odd rows of the tables were then colored appropriately. Fixes: #12209
2019-04-27 09:16:12 +02:00
.table-striped tbody tr:nth-child(odd) td {
background-color: hsl(212, 28%, 18%);
}
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.modal-footer {
box-shadow: inset 0 1px 0 hsla(0, 0%, 0%, 0.2);
}
dark-mode: Fix @-mention colors. This fixes mention colors for dark mode.
2017-11-29 23:07:07 +01:00
night-mode: Fix invite_user_form overlap bug. Adding the element for the invite link would cause the modal footer to shift upwards, in nightmode this caused the stream list to appear beneath the footer as the footer background was transparent. This commit replaces that styling with a solid equivalent color.
2019-06-07 20:59:26 +02:00
#invite_user_form .modal-footer {
text: Fix some typos (most of them found and fixed by codespell). Signed-off-by: Stefan Weil <sw@weilnetz.de>
2020-03-28 01:25:56 +01:00
// no transparency prevents overlap issues
night-mode: Fix invite_user_form overlap bug. Adding the element for the invite link would cause the modal footer to shift upwards, in nightmode this caused the stream list to appear beneath the footer as the footer background was transparent. This commit replaces that styling with a solid equivalent color.
2019-06-07 20:59:26 +02:00
background-color: hsl(211, 28%, 14%);
}
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.subscriptions-container .right .display-type,
.stream-row,
.subscriptions-container .left .search-container,
.subscriptions-container .left,
.subscriber-list-box,
css: Nest `.subscriber-list` inside `.subscriber_list_container`.
2019-07-11 14:04:22 +02:00
.subscriber-list-box .subscriber_list_container .subscriber-list tr,
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
#subscription_overlay ul.grey-box li,
#stream_privacy_modal ul.grey-box li,
#settings_page .sidebar,
#settings_page .sidebar *,
table,
table th,
table td {
border-color: hsla(0, 0%, 0%, 0.2);
}
dark-mode: Fix @-mention colors. This fixes mention colors for dark mode.
2017-11-29 23:07:07 +01:00
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.draft-row .draft-info-box,
.message_header_private_message .message-header-contents {
box-shadow: none;
}
dark-mode: Fix @-mention colors. This fixes mention colors for dark mode.
2017-11-29 23:07:07 +01:00
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.draft-row .message_header_private_message .message_label_clickable {
padding: 4px 6px 3px 6px;
color: inherit;
}
dark-mode: Fix @-mention colors. This fixes mention colors for dark mode.
2017-11-29 23:07:07 +01:00
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.nav-list > li > a,
.nav-list .nav-header {
text-shadow: none;
}
dark-mode: Style alerts to be darker red. This styles the alerts to be a darker red that blends more with the blue dark mode theme.
2017-11-29 23:40:42 +01:00
css: Move inline date separators from messagebox to message_row. Fixes border-related glitches introduced by commit 51c6c82003b0428f887bbf3c8d6cf79abc0e333d (#10820). Alternative to #11534. Signed-off-by: Anders Kaseorg <andersk@mit.edu>
2019-02-14 00:30:19 +01:00
.mention .messagebox {
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
background-color: hsla(8, 78%, 43%, 0.15);
}
dark-mode: Make settings "tip" boxes more compatible. This makes them compatible by making the background dark and the text base color.
2018-01-24 21:34:57 +01:00
css: SCSS nesting for `.rendered_markdown` in night_mode.scss.
2020-03-25 19:18:02 +01:00
.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: 0px 0px 0px 1px hsla(0, 0%, 0%, 0.4);
}
compose: Make compose alerts dark-mode compatible. This makes all the alerts in the compose box compatible with dark mode by choosing different colors and fixing borders to be properly pronounced, along with removing text shadows that make text unreadable.
2017-12-01 02:14:14 +01:00
css: SCSS nesting for `.rendered_markdown` in night_mode.scss.
2020-03-25 19:18:02 +01:00
.user-mention-me :not(.silent) {
background-color: hsla(355, 37%, 31%, 1);
box-shadow: 0px 0px 0px 1px hsla(330, 40%, 20%, 1);
}
edit_history: Highlight topic edit diffs by using correct CSS selector. Previously, topic edit diffs in the edit history modal were not highlighted in the same way as content diffs because the highlighting CSS rules were inside a .rendered_markdown block. So they affected the content diffs, which are classed as such, but not the topic diffs. This commit moves the highlight rules to a .message_edit_history_content block inside the already existing #message-edit-history block. .message_edit_history_content had already existed in the edit history template message_edit_history.hbs, and is assigned to both the content and topic diffs. The ability to see topic edits in the edit history was added in March 2019 in 38be5ea74394d2fd8586038de6ac447b4bbfbf67; the highlighting worked at that time. It broke four mounths later in July 2019 in 38ffde37e573385df92fc7007810e5e4098c8b56 when the highlight rules were moved into a .rendered_markdown block after having been global. (As a further aside, .rendered_markdown was only added to the content diffs in April 2019 in 5c36918c17f30bf7293e9708904d1559b71ed40c. .message_edit_history_content had been first added, to the content diffs, in February 2019 in 7d42d7b4dbe6eb144a148135db50ad35efc01295.) Aside from fixing topic edit diffs, this change is just more correct; the highlight rules don't belong under .rendered_markdown, and they don't need to be applied globally.
2020-06-06 09:11:24 +02:00
}
css: Reorder elements in `.rendered-markdown` in night_mode.scss. Some styling elements associated with '.rendered-markdown' were present separately. Reordering them so that they are together.
2020-03-25 19:33:27 +01:00
edit_history: Highlight topic edit diffs by using correct CSS selector. Previously, topic edit diffs in the edit history modal were not highlighted in the same way as content diffs because the highlighting CSS rules were inside a .rendered_markdown block. So they affected the content diffs, which are classed as such, but not the topic diffs. This commit moves the highlight rules to a .message_edit_history_content block inside the already existing #message-edit-history block. .message_edit_history_content had already existed in the edit history template message_edit_history.hbs, and is assigned to both the content and topic diffs. The ability to see topic edits in the edit history was added in March 2019 in 38be5ea74394d2fd8586038de6ac447b4bbfbf67; the highlighting worked at that time. It broke four mounths later in July 2019 in 38ffde37e573385df92fc7007810e5e4098c8b56 when the highlight rules were moved into a .rendered_markdown block after having been global. (As a further aside, .rendered_markdown was only added to the content diffs in April 2019 in 5c36918c17f30bf7293e9708904d1559b71ed40c. .message_edit_history_content had been first added, to the content diffs, in February 2019 in 7d42d7b4dbe6eb144a148135db50ad35efc01295.) Aside from fixing topic edit diffs, this change is just more correct; the highlight rules don't belong under .rendered_markdown, and they don't need to be applied globally.
2020-06-06 09:11:24 +02:00
#message-edit-history {
.message_edit_history_content {
.highlight_text_inserted {
color: hsl(122, 100%, 81%);
background-color: hsla(120, 64%, 95%, 0.3);
}
css: Reorder elements in `.rendered-markdown` in night_mode.scss. Some styling elements associated with '.rendered-markdown' were present separately. Reordering them so that they are together.
2020-03-25 19:33:27 +01:00
edit_history: Highlight topic edit diffs by using correct CSS selector. Previously, topic edit diffs in the edit history modal were not highlighted in the same way as content diffs because the highlighting CSS rules were inside a .rendered_markdown block. So they affected the content diffs, which are classed as such, but not the topic diffs. This commit moves the highlight rules to a .message_edit_history_content block inside the already existing #message-edit-history block. .message_edit_history_content had already existed in the edit history template message_edit_history.hbs, and is assigned to both the content and topic diffs. The ability to see topic edits in the edit history was added in March 2019 in 38be5ea74394d2fd8586038de6ac447b4bbfbf67; the highlighting worked at that time. It broke four mounths later in July 2019 in 38ffde37e573385df92fc7007810e5e4098c8b56 when the highlight rules were moved into a .rendered_markdown block after having been global. (As a further aside, .rendered_markdown was only added to the content diffs in April 2019 in 5c36918c17f30bf7293e9708904d1559b71ed40c. .message_edit_history_content had been first added, to the content diffs, in February 2019 in 7d42d7b4dbe6eb144a148135db50ad35efc01295.) Aside from fixing topic edit diffs, this change is just more correct; the highlight rules don't belong under .rendered_markdown, and they don't need to be applied globally.
2020-06-06 09:11:24 +02:00
.highlight_text_deleted {
color: hsl(0, 90%, 67%);
background-color: hsla(7, 54%, 62%, 0.38);
}
css: Reorder elements in `.rendered-markdown` in night_mode.scss. Some styling elements associated with '.rendered-markdown' were present separately. Reordering them so that they are together.
2020-03-25 19:33:27 +01:00
}
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
}
dark-mode: Make "success" alerts compatible with dark mode.
2018-01-24 21:35:34 +01:00
timestamp: Update night mode css after the syntax change.
2020-06-19 21:59:12 +02:00
time {
rendered_markdown: Add rendering functions for timestamps. This code generates the timestamp string to be shown to the user from the given timestamp in unix format using moment.js. We also render the timestamp in a pill.
2018-02-13 00:33:36 +01:00
background: hsla(0, 0%, 0%, 0.2);
box-shadow: 0px 0px 0px 1px hsla(0, 0%, 0%, 0.4);
}
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.tip {
color: inherit;
background-color: hsla(46, 28%, 38%, 0.27);
border: 1px solid hsl(49, 38%, 46%);
}
dark-mode: Make "error" alerts compatible. This makes them compatible by making the backgrounds darker and the text base color.
2018-01-24 21:36:17 +01:00
night mode: Alter compose warning background to fit night mode. Fixes #10916.
2018-12-12 03:42:17 +01:00
.alert.home-error-bar {
color: hsl(236, 33%, 90%);
background-color: hsla(35, 84%, 62%, 0.25);
border: 1px solid hsl(11, 46%, 54%);
}
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.alert {
text-shadow: none;
css: SCSS nesting in night_mode.scss for `.alert`.
2020-03-25 19:25:08 +01:00
.close {
color: inherit;
}
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
}
dark-mode: Make "error" alerts compatible. This makes them compatible by making the backgrounds darker and the text base color.
2018-01-24 21:36:17 +01:00
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.alert.alert-success {
color: inherit;
background-color: hsla(161, 60%, 46%, 0.20);
styles: Convert 6-digit hex values to HSL values.
2018-10-06 18:49:20 +02:00
border-color: hsl(165, 68%, 37%);
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
}
dark-mode: Style alerts to be darker red. This styles the alerts to be a darker red that blends more with the blue dark mode theme.
2017-11-29 23:40:42 +01:00
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.alert.alert-error,
.alert.alert-danger {
styles: Convert background properties to background-color.
2018-10-08 22:31:26 +02:00
background-color: hsl(318, 12%, 21%);
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
color: inherit;
border: 1px solid hsl(0, 75%, 65%);
}
dark-mode: Style alerts to be darker red. This styles the alerts to be a darker red that blends more with the blue dark mode theme.
2017-11-29 23:40:42 +01:00
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.alert-box .alert,
blueslip: Make stack trace more readable. The stack trace popup is now sourcemapped and each stackframe have a expandable code context window. [anders@zulipchat.com: Rebased and simplified.]
2019-06-20 11:59:55 +02:00
.alert-box .stacktrace,
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.alert.alert-error {
styles: Convert background properties to background-color.
2018-10-08 22:31:26 +02:00
background-color: hsl(318, 12%, 21%);
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
color: inherit;
border: 1px solid hsl(0, 75%, 65%);
}
night mode: Fix unreadable new user tips. Fix the border color, shadow color, arrow color, and background color of the tips popovers for new users in dark mode. Fix #8868.
2018-03-29 19:28:12 +02:00
css: SCSS nesting for `.alert-box` in night_mode.scss.
2020-03-25 19:23:54 +01:00
.alert-box {
.alert.alert-error::before {
color: 1px solid hsl(0, 75%, 65%);
blueslip: Make stack trace more readable. The stack trace popup is now sourcemapped and each stackframe have a expandable code context window. [anders@zulipchat.com: Rebased and simplified.]
2019-06-20 11:59:55 +02:00
}
css: SCSS nesting for `.alert-box` in night_mode.scss.
2020-03-25 19:23:54 +01:00
.stacktrace {
color: hsl(314, 22%, 85%);
blueslip: Make stack trace more readable. The stack trace popup is now sourcemapped and each stackframe have a expandable code context window. [anders@zulipchat.com: Rebased and simplified.]
2019-06-20 11:59:55 +02:00
css: SCSS nesting for `.alert-box` in night_mode.scss.
2020-03-25 19:23:54 +01:00
.expand {
color: hsl(318, 14%, 36%);
}
blueslip: Make stack trace more readable. The stack trace popup is now sourcemapped and each stackframe have a expandable code context window. [anders@zulipchat.com: Rebased and simplified.]
2019-06-20 11:59:55 +02:00
css: SCSS nesting for `.alert-box` in night_mode.scss.
2020-03-25 19:23:54 +01:00
.subtle {
color: hsl(314, 19%, 63%);
blueslip: Make stack trace more readable. The stack trace popup is now sourcemapped and each stackframe have a expandable code context window. [anders@zulipchat.com: Rebased and simplified.]
2019-06-20 11:59:55 +02:00
}
css: SCSS nesting for `.alert-box` in night_mode.scss.
2020-03-25 19:23:54 +01:00
.code-context {
color: hsl(314, 27%, 82%);
background-color: hsl(312, 7%, 14%);
box-shadow:
inset 0px 11px 10px -10px hsl(0, 0%, 6%),
inset 0px -11px 10px -10px hsl(0, 0%, 6%);
.line-number {
color: hsl(318, 14%, 44%);
}
.focus-line {
background-color: hsl(307, 9%, 19%);
}
blueslip: Make stack trace more readable. The stack trace popup is now sourcemapped and each stackframe have a expandable code context window. [anders@zulipchat.com: Rebased and simplified.]
2019-06-20 11:59:55 +02:00
}
}
}
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
/* Popover: */
hotspots: Change styling of intro to reply hotspot. Updated the styling so that it looks like other hotspots.
2018-10-01 18:05:47 +02:00
.hotspot.overlay .hotspot-popover,
#hotspot_intro_reply_icon {
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
border-color: hsla(0, 0%, 0%, 0.2) !important;
/* Based on the `.hotspot-popover` shadow in `hotspots.css`, but with a new
night mode: Fix unreadable new user tips. Fix the border color, shadow color, arrow color, and background color of the tips popovers for new users in dark mode. Fix #8868.
2018-03-29 19:28:12 +02:00
color. */
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
box-shadow: 0 5px 10px hsla(0, 0%, 0%, 0.4);
}
night mode: Fix unreadable new user tips. Fix the border color, shadow color, arrow color, and background color of the tips popovers for new users in dark mode. Fix #8868.
2018-03-29 19:28:12 +02:00
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
/* Arrows: */
css: SCSS nesting for `.hotspot.overlay` in night_mode.scss..
2020-03-25 19:30:38 +01:00
.hotspot.overlay {
.hotspot-popover.arrow-right::before {
border-left-color: hsla(0, 0%, 0%, 0.2);
}
night mode: Fix unreadable new user tips. Fix the border color, shadow color, arrow color, and background color of the tips popovers for new users in dark mode. Fix #8868.
2018-03-29 19:28:12 +02:00
css: SCSS nesting for `.hotspot.overlay` in night_mode.scss..
2020-03-25 19:30:38 +01:00
.hotspot-popover.arrow-right::after {
border-left-color: hsl(212, 28%, 18%);
}
night mode: Fix unreadable new user tips. Fix the border color, shadow color, arrow color, and background color of the tips popovers for new users in dark mode. Fix #8868.
2018-03-29 19:28:12 +02:00
css: SCSS nesting for `.hotspot.overlay` in night_mode.scss..
2020-03-25 19:30:38 +01:00
.hotspot-popover.arrow-bottom::before {
border-top-color: hsla(0, 0%, 0%, 0.2);
}
night mode: Fix unreadable new user tips. Fix the border color, shadow color, arrow color, and background color of the tips popovers for new users in dark mode. Fix #8868.
2018-03-29 19:28:12 +02:00
css: SCSS nesting for `.hotspot.overlay` in night_mode.scss..
2020-03-25 19:30:38 +01:00
.hotspot-popover.arrow-bottom::after {
border-top-color: hsl(212, 28%, 18%);
}
night mode: Fix unreadable new user tips. Fix the border color, shadow color, arrow color, and background color of the tips popovers for new users in dark mode. Fix #8868.
2018-03-29 19:28:12 +02:00
css: SCSS nesting for `.hotspot.overlay` in night_mode.scss..
2020-03-25 19:30:38 +01:00
.hotspot-popover.arrow-left::before {
border-right-color: hsla(0, 0%, 0%, 0.2);
}
night mode: Fix unreadable new user tips. Fix the border color, shadow color, arrow color, and background color of the tips popovers for new users in dark mode. Fix #8868.
2018-03-29 19:28:12 +02:00
css: SCSS nesting for `.hotspot.overlay` in night_mode.scss..
2020-03-25 19:30:38 +01:00
.hotspot-popover.arrow-left::after {
border-right-color: hsl(212, 28%, 18%);
}
night mode: Fix unreadable new user tips. Fix the border color, shadow color, arrow color, and background color of the tips popovers for new users in dark mode. Fix #8868.
2018-03-29 19:28:12 +02:00
css: SCSS nesting for `.hotspot.overlay` in night_mode.scss..
2020-03-25 19:30:38 +01:00
.hotspot-popover.arrow-top::before {
border-bottom-color: hsla(0, 0%, 0%, 0.2);
}
night mode: Fix unreadable new user tips. Fix the border color, shadow color, arrow color, and background color of the tips popovers for new users in dark mode. Fix #8868.
2018-03-29 19:28:12 +02:00
css: SCSS nesting for `.hotspot.overlay` in night_mode.scss..
2020-03-25 19:30:38 +01:00
.hotspot-popover.arrow-top::after {
border-bottom-color: hsl(212, 28%, 18%);
}
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
}
night mode: Fix unreadable new user tips. Fix the border color, shadow color, arrow color, and background color of the tips popovers for new users in dark mode. Fix #8868.
2018-03-29 19:28:12 +02:00
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
/* Content: */
.hotspot.overlay .hotspot-popover .hotspot-popover-content,
hotspots: Change styling of intro to reply hotspot. Updated the styling so that it looks like other hotspots.
2018-10-01 18:05:47 +02:00
#hotspot_intro_reply_icon,
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.hotspot.overlay .hotspot-popover .hotspot-popover-bottom {
background-color: hsl(212, 28%, 18%);
}
night mode: Fix unreadable new user tips. Fix the border color, shadow color, arrow color, and background color of the tips popovers for new users in dark mode. Fix #8868.
2018-03-29 19:28:12 +02:00
message view: Show indicator while fetching new messages. We already have a loading indicator for fetching older messages. Thus it makes sense to implement the same for displaying newer messages. We set the display of `bottom-messages-logo` to none, to prevent displaying two loading indicators during the initial message load. Fixes #15060.
2020-05-26 16:27:06 +02:00
.top-messages-logo,
.bottom-messages-logo {
css: SCSS nesting for `.top-messages-logo` in night_mode.scss.
2020-03-25 19:32:06 +01:00
svg path {
fill: hsl(214, 27%, 18%);
stroke: hsl(214, 27%, 18%);
}
night mode: Fix unreadable new user tips. Fix the border color, shadow color, arrow color, and background color of the tips popovers for new users in dark mode. Fix #8868.
2018-03-29 19:28:12 +02:00
css: SCSS nesting for `.top-messages-logo` in night_mode.scss.
2020-03-25 19:32:06 +01:00
svg circle {
fill: hsl(0, 0%, 100%);
stroke: hsl(0, 0%, 100%);
}
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
}
night mode: Fix unreadable new user tips. Fix the border color, shadow color, arrow color, and background color of the tips popovers for new users in dark mode. Fix #8868.
2018-03-29 19:28:12 +02:00
search: Advertise the ability to search shared history. When a user performs a search that might contain historical public streams messages that the user has access to (but doesn't because we're searching the user's own personal history), we add a notice above the first search result to let the user know that not all messages may have been searched. Fixes #12036.
2019-08-13 21:03:48 +02:00
.history-limited-box,
.all-messages-search-caution {
css: Convert colors from rgba to hsla format.
2019-06-19 04:53:16 +02:00
background-color: hsla(0, 0%, 0%, 0.2);
messages: Show banner when message history is limited. This communicates to users clearly about the situation when the history_limited flag is set by the backend (because message history was cutoff).
2018-10-01 20:27:22 +02:00
}
muting: Use more generic markup for undo-mute popup. This makes everything generic except for the main message given to the user.
2018-12-20 19:48:37 +01:00
#feedback_container,
settings page: Apply dark theme to 'code' elements in night mode. The example regexes for linkifier settings are not themed according to the user's dark theme setting. Modify 'night_mode.scss' to render all 'code' elements with dark theme.
2020-03-05 17:04:02 +01:00
code,
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.typeahead.dropdown-menu {
background-color: hsl(212, 25%, 15%);
border-color: hsla(0, 0%, 0%, 0.5);
color: inherit;
}
dark-mode: Change top-of-messages colors for dark mode. Make it a white background with the “Z” in the same dark grey/blue color as the background.
2017-11-30 01:02:15 +01:00
css: Move edit history highlighting CSS into rendered_markdown.
2019-07-31 21:04:36 +02:00
/* Search highlight used in both topics and rendered_markdown */
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.highlight {
background-color: hsla(51, 100%, 64%, 0.42);
}
Revert "dark-mode: Remove unnecessary CSS and fix dark mode bugs." This reverts commit 64381b6e38a934ebe5fff43fc7caeb09a287dd6a. It turns out we actually needed this for inline code blocks to work.
2017-11-30 21:44:25 +01:00
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.sub-unsub-message span::before,
.sub-unsub-message span::after,
.date_row span::before,
.date_row span::after {
opacity: 0.2;
}
message-edit-history: Make dark mode compatible. This makes the edit history overlay dark mode compatible by changing the background to the dark blue along with changing the highlight colors to work with white text and dark backgrounds.
2017-11-30 21:49:06 +01:00
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.star:not(.empty-star),
.empty-star:hover {
color: hsla(126, 66%, 72%, 0.75);
}
message-edit-history: Make dark mode compatible. This makes the edit history overlay dark mode compatible by changing the background to the dark blue along with changing the highlight colors to work with white text and dark backgrounds.
2017-11-30 21:49:06 +01:00
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
#out-of-view-notification {
border: 1px solid 1px solid hsl(144, 45%, 62%);
}
dark-mode: Change star color to be lighter. This changes the star color to be lighter and visually softer to be easier to spot in the page.
2017-11-30 22:52:39 +01:00
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.email_tooltip {
styles: Convert 6-digit hex values to HSL values.
2018-10-06 18:49:20 +02:00
background-color: hsl(211, 16%, 30%);
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
}
compose: Make compose alerts dark-mode compatible. This makes all the alerts in the compose box compatible with dark mode by choosing different colors and fixing borders to be properly pronounced, along with removing text shadows that make text unreadable.
2017-12-01 02:14:14 +01:00
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.email_tooltip::after {
styles: Convert 6-digit hex values to HSL values.
2018-10-06 18:49:20 +02:00
border-bottom-color: hsl(211, 16%, 30%) !important;
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
}
settings: Makes selector look better in firefox. This adds a custom selector icon to make our dropdowns look well-designed in Firefox. Fixes: #6707.
2017-10-28 19:26:36 +02:00
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
#bots_lists_navbar .active a {
styles: Convert 3-digit hex values to HSL values.
2018-09-27 21:57:07 +02:00
color: hsl(0, 0%, 87%);
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
background-color: hsl(212, 28%, 18%);
styles: Convert 3-digit hex values to HSL values.
2018-09-27 21:57:07 +02:00
border-color: hsl(0, 0%, 87%);
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
border-bottom-color: transparent;
}
email tooltip: Adjust background color of email toolip in dark-mode. This commit adjust the email tooltip of popover in dark-mode.
2018-02-03 18:13:57 +01:00
night_mode: Use nested selectors to change night mode element styling. This is a SASS-exclusive feature that simplifies a majority of the night mode selectors.
2018-08-01 02:40:49 +02:00
.searching-for-more-topics img {
filter: invert(100%);
}
css: Improve SimpleBar scrollbar contrast. Show black scrollbars with a thin light border in day mode, or white scrollbars with a thin dark border in night mode (both at 50% opacity). This matches the native scrollbars on macOS pretty closely. Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-05-21 06:32:44 +02:00
.simplebar-track .simplebar-scrollbar::before {
css: Convert colors from rgb to hsl format. Note that we are not converting the stream colors.
2019-06-18 20:58:40 +02:00
background-color: hsl(0, 0%, 100%);
css: Convert colors from rgba to hsla format.
2019-06-19 04:53:16 +02:00
box-shadow: 0px 0px 0px 1px hsla(0, 0%, 0%, 0.33);
css: Improve SimpleBar scrollbar contrast. Show black scrollbars with a thin light border in day mode, or white scrollbars with a thin dark border in night mode (both at 50% opacity). This matches the native scrollbars on macOS pretty closely. Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
2019-05-21 06:32:44 +02:00
}
org_settings: Add collapse/show settings button for users and guests. For non-admins some organisation settings tabs are 'collapsed' by default. A button at the bottom of these settings can be used to toggle show/collapse for these settings tabs. Resolves #12313.
2019-05-13 00:43:21 +02:00
.collapse-settings-btn:hover {
color: hsl(200, 79%, 66%);
}
css: Add nightmode variant for fetching more messages loading indicator Fixes: #12522.
2019-06-07 17:15:14 +02:00
minor: Rename loading_more_messages_indicator. `loading_more_messages_indicator` is renamed to `loading_older_messages_indicator`. This is a prep commit to introduce `loading_newer_messages_indicator`.
2020-05-24 15:27:58 +02:00
#loading_older_messages_indicator path {
css: Convert colors from rgb to hsl format. Note that we are not converting the stream colors.
2019-06-18 20:58:40 +02:00
fill: hsl(0, 0%, 100%);
css: Add nightmode variant for fetching more messages loading indicator Fixes: #12522.
2019-06-07 17:15:14 +02:00
}
css: Clean up styling of topic edit buttons. Related to: #11233.
2019-07-16 12:48:45 +02:00
.small_square_button {
&.small_square_check {
background-color: hsl(166, 35%, 52%);
color: hsl(0, 0%, 90%);
&:hover {
background-color: hsl(156, 30%, 45%);
color: hsl(0, 0%, 95%);
}
}
&.small_square_x {
background-color: hsl(0, 0%, 95%);
color: hsl(0, 0%, 42%);
&:hover {
color: hsl(0, 0%, 18%);
}
}
}
Dark-mode: Update rail-y to match dark theme.
2018-04-07 02:55:24 +02:00
}
settings: Makes selector look better in firefox. This adds a custom selector icon to make our dropdowns look well-designed in Firefox. Fixes: #6707.
2017-10-28 19:26:36 +02:00
@-moz-document url-prefix() {
styles: Rename dark-mode to night-mode. This matches the externally-facing name for the feature as well as the setting variable in the code.
2018-03-28 19:41:26 +02:00
body.night-mode #settings_page select {
settings: Makes selector look better in firefox. This adds a custom selector icon to make our dropdowns look well-designed in Firefox. Fixes: #6707.
2017-10-28 19:26:36 +02:00
background-color: hsla(0, 0%, 0%, 0.2);
}
}