Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
zulip/web/styles/app_variables.css

907 lines
41 KiB
CSS
Raw Normal View History

css: Extract CSS variables into own file.
2024-02-15 15:39:53 +01:00
:root {
color-scheme: light;
/*
This is the header, aka the navbar.
*/
--header-height: 40px;
/*
At 600px, the header starts taking up more than 5%
of the screen. We make it shorter to leave more space
to see the rest of the app. */
@media (height < $short_navbar_cutoff_height) {
--header-height: 30px;
}
/*
Height of the search box, which appears in the header.
On very short screens, the search box's height becomes
the height of its parent (i.e. the header height).
*/
--search-box-height: 28px;
--search-box-width: 150px;
@media (height < $short_navbar_cutoff_height) {
--search-box-height: var(--header-height);
}
@media (width < $md_min) {
--search-box-width: 40px;
}
/*
Since #navbar_alerts_wrapper can take variable height depending upon
window width / language, we sync its height in navbar_alerts.js
*/
--navbar-alerts-wrapper-height: 0px;
--navbar-fixed-height: calc(
var(--header-height) + var(--navbar-alerts-wrapper-height)
);
/* Keep content from colliding with the search box. */
--navbar-content-righthand-offset: 5px;
/*
We have a 10px gutter below the header,
which often needs to be respected by both
the elements above it and below it on
the y-axis, due to absolute positioning.
*/
--header-padding-bottom: 10px;
/*
Our sidebars (and anything that top-align
with them) go beneath the header.
*/
--left-sidebar-collapse-widget-gutter: 10px;
--left-sidebar-width: 270px;
--right-sidebar-width: 250px;
--left-sidebar-header-icon-width: 15px;
info_density: Declare em-based line-height vars for sidebar rows.
2024-05-30 18:03:15 +02:00
/* We base sidebar row heights on their line heights.
Prominent rows include things like headers (e.g., VIEWS)
as well as navigation items. Everything else takes
the smaller line-height. */
--line-height-sidebar-row-prominent: 1.7142em; /* 24px / 14px em */
--line-height-sidebar-row: 1.5714em; /* 22px / 14px em */
css: Extract CSS variables into own file.
2024-02-15 15:39:53 +01:00
/* Tippy popover related values */
popovers: Move from global popover min-width to per-popover basis. This removes the common min-width being used across all popovers and instead sets the min-width according to a popover's requirements. This allows for greater control over the popovers since we have a variety of use cases for them — which a single common min-width cannot accommodate.
2024-05-01 12:52:49 +02:00
--navbar-popover-menu-min-width: 230px;
--message-actions-popover-min-width: 230px;
--topic-actions-popover-min-width: 200px;
css: Extract CSS variables into own file.
2024-02-15 15:39:53 +01:00
info_density: Set font size, line height vars in dev.
2024-04-02 18:28:21 +02:00
/* Information density and typography values */
/* The legacy values here are updated via JavaScript */
--base-font-size-px: 14px;
info_density: Correct legacy line height and apply to message box. This fixes an incorrect value as noted by Anders Kaseorg on #29569.
2024-04-25 20:40:32 +02:00
--base-line-height-unitless: 1.214;
info_density: Calculate values for inline-box vertical alignment. Co-Authored-By: Greg Price <greg@zulip.com>
2024-05-10 20:30:31 +02:00
--base-maximum-block-height-em: 1.425em;
info_density: Size and align emoji precisely with line-fitted values.
2024-05-10 20:32:14 +02:00
--line-fitted-vertical-align-offset-em: 0;
info_density: Describe interelement Markdown spacing as CSS vars.
2024-04-26 20:55:40 +02:00
--markdown-interelement-space-px: 5px;
--markdown-interelement-doubled-space-px: calc(
var(--markdown-interelement-space-px) * 2
);
info_density: Size and align emoji precisely with line-fitted values.
2024-05-10 20:32:14 +02:00
/* Certain elements need to be fitted perfectly to
the line height; the length here can be used to set
precise heights, and in the case of square elements,
a matching precise width as well. */
--length-line-fitted-block: calc(var(--base-line-height-unitless) * 1em);
info_density: Sanely restore Zulip-style oversize emoji.
2024-06-11 18:05:07 +02:00
/* Emoji elements are allowed to exceed the perfectly-fit
line-height. Classic Zulip emoji sizing is a 20px square
emoji at a 14px font-size, for 1.4286em at 14px/1em. */
--length-line-oversize-block: 1.4286em;
/* To avoid disturbing the flow of text around emoji or other
oversize inline blocks, we calculate a negative margin
adjustment for offsetting the emoji, top and bottom. */
--length-line-oversize-block-margin-adjust: calc(
(
(
min(
var(--base-maximum-block-height-em),
var(--length-line-fitted-block)
)
) - var(--length-line-oversize-block)
) / 2
);
info_density: Set font size, line height vars in dev.
2024-04-02 18:28:21 +02:00
info_density: Set a minimum line-height on body.
2024-05-30 17:38:19 +02:00
/* Legacy values */
--legacy-body-line-height-unitless: calc(20 / 14);
info_density: Preserve legacy density behind .more-dense-mode.
2024-04-25 22:18:05 +02:00
.more-dense-mode {
/* The legacy values here are not altered by JavaScript */
--base-font-size-px: 14px;
--base-line-height-unitless: 1.214;
info_density: Describe interelement Markdown spacing as CSS vars.
2024-04-26 20:55:40 +02:00
--markdown-interelement-space-px: 5px;
--markdown-interelement-doubled-space-px: 10px;
info_density: Extend Markdown-aligned space to message content area.
2024-04-26 21:06:04 +02:00
--message-box-markdown-aligned-vertical-space: 5px;
info_density: Preserve legacy density behind .more-dense-mode.
2024-04-25 22:18:05 +02:00
}
css: Extract CSS variables into own file.
2024-02-15 15:39:53 +01:00
/*
Message box elements and values.
*/
--message-box-avatar-width: 35px;
--message-box-avatar-height: var(--message-box-avatar-width);
message_row: Introduce CSS variable for avatar column width.
2024-04-19 22:21:32 +02:00
--message-box-avatar-column-width: 46px;
message_row: Introduce CSS variable for vertical margin.
2024-04-19 22:30:08 +02:00
/* 6px appears to provide 5px of space between the avatar
and the selected-message outline, which is offset by -1px. */
--message-box-vertical-margin: 6px;
info_density: Extend Markdown-aligned space to message content area.
2024-04-26 21:06:04 +02:00
--message-box-markdown-aligned-vertical-space: var(
--markdown-interelement-space-px
);
css: Extract CSS variables into own file.
2024-02-15 15:39:53 +01:00
--message-box-icon-width: 26px;
--message-box-icon-height: 25px;
message_row: Replace sender-line margins with grid-coordinated line height. This expresses the height of the message row without need of margical margins. Extending the correct line-height to timestamps also means that single-line messages will be the height of their combined content and padding, and not erroneously held open by an oversize 28px timestamp line-height. Those corrections mean, too, that .message-time only needs to have its line-height declared a single place, regardless of context.
2024-04-19 22:34:23 +02:00
/* The line-height on the sender line should coordinate with the
height of the hover icons. The sender line never wraps, so this
just keeps the two in line with the grid definition. */
--message-box-sender-line-height: var(--message-box-icon-height);
timestamps: Consolidate variable-based timestamp width.
2024-03-28 23:38:18 +01:00
/* This width is updated with an exact pixel
width upon UI initialization. */
timestamps: Calculate the maximum timestamp width in use. Fixes: #26970
2024-03-28 21:00:04 +01:00
--message-box-timestamp-column-width: 0;
css: Extract CSS variables into own file.
2024-02-15 15:39:53 +01:00
/*
Reaction container UI scaling.
*/
--scale-message-reaction-active: 0.96;
/*
Left position of unread marker. Only needs to be tracked if it is negative so that
it doesn't leak through message header.
*/
--unread-marker-left: -1px;
/*
Compose-recipient box minimum height. Used in a flexbox context to
allow elements like DM pills to stack without breaking out of their
compose: Express recipient box height in ems.
2024-06-11 16:38:45 +02:00
flex item. 2.1786em is 30.5px at 14px/1em.
css: Extract CSS variables into own file.
2024-02-15 15:39:53 +01:00
*/
compose: Express recipient box height in ems.
2024-06-11 16:38:45 +02:00
--compose-recipient-box-min-height: 2.1786em;
css: Extract CSS variables into own file.
2024-02-15 15:39:53 +01:00
compose: Redesign and relocate compose expand / collapse button. The compose expand / collapse button is moved from the top right of the compose area to the top right corner inside the compose textarea / preview. The textarea / preview and the button area shares the same grid parent. 25px extra padding is added to and margin is subtracted from the right of the element so the button is visually inside it. It appears only on hovering the compose area, and uses a new custom icon. Fixes: #28791.
2024-04-23 01:28:39 +02:00
/*
Width of the area where the compose box buttons are placed, "inside"
the right edge of the compose box. This is used for the negative right
margin and the right padding of the textbox to extend it into the compose
expand / collapse buttons area, but keep the text from showing under the
the buttons.
*/
--composebox-buttons-width: 25px;
css: Extract CSS variables into own file.
2024-02-15 15:39:53 +01:00
/*
Width to be reserved for document scrollbar when scrolling is disabled.
Using `scrollbar-gutter` would be more appropriate but doesn't has wide
support and doesn't work for `fixed` elements.
*/
--disabled-scrollbar-width: 0px;
/*
Right offset of simplebar scrollbar for `.column-right` when browser has
overlay scrollbars which don't occupy any space. Currently only
known to present on Mac (all browsers) and Firefox (all OS?). This seems
more than enough to differentiate right sidebar scrollbar and browser
scrollbar even if the browser scrollbar is wider.
*/
--browser-overlay-scrollbar-width: 10px;
/* This is a rough estimate for height occupied by Recent Conversations filters.
We expect `resize.ts` to update this once UI is initialized. */
--recent-topics-filters-height: 50px;
/* Overlay heights for streams modal */
--overlay-container-height: 95vh;
--overlay-container-max-height: 1000px;
/* .subscriptions-header */
--subscriptions-overlay-header-height: 45px;
/* .display-type */
--subscriptions-overlay-display-type-height: 44px;
/* .settings-sticky-footer */
--subscriptions-overlay-sticky-footer-height: 60px;
/*
Maximum height of the compose box when it is not in expanded state. This
is equal to the height of `#bottom_whitespace`. We expect resize.ts to
replace it with its pixel calculation since even if `vh` has great support,
it can change depending on browser / OS on mobile devices.
*/
--max-unexpanded-compose-height: 40vh;
/*
Line height of the message buttons in compose box. Here it's necessary
to control this value uniformly and precisely to avoid issues with
layout shifts originating with non-Latin characters in this area.
compose: Size collapsed compose buttons relatively.
2024-06-06 22:14:14 +02:00
1.429em is 20px at 14px em.
css: Extract CSS variables into own file.
2024-02-15 15:39:53 +01:00
*/
compose: Size collapsed compose buttons relatively.
2024-06-06 22:14:14 +02:00
--line-height-compose-buttons: 1.429em;
css: Extract CSS variables into own file.
2024-02-15 15:39:53 +01:00
/*
Maximum height of the subscribers list in stream settings so that
it doesn't cause the container to have a second scrollbar.
This value will be overridden when stream settings is opened.
*/
compose: Size collapsed compose buttons relatively.
2024-06-06 22:14:14 +02:00
--stream-subscriber-list-max-height: 1.429em;
css: Extract CSS variables into own file.
2024-02-15 15:39:53 +01:00
settings: Add variable for field/hint bottom margin.
2024-03-19 21:35:28 +01:00
/*
Reusable dimensions and offsets.
*/
--margin-bottom-field-description: 3px;
personal_menu: Add theme switcher to personal menu popover. This commit introduces a theme switcher feature within the personal menu popover. The implementation begins with the development of a tab picker, which has the following features: * Utilization of radio buttons to emulate the tab picker. Radio input buttons provides the native way in HTML to select one value out of a set. * Support for both horizontal (default) and vertical orientations. Vertical orientation can be achieved by appending the `.tab-picker-vertical` class. * Respects the `prefers-reduced-motion` option set by the user. Disables the sliding tab animation to improve accessibility. Additionally, the theme switcher component incorporates error handling mechanisms. In the event of a server/network error, the tab slider reverts to the previous theme option after a delay of 500ms. This behavior visually communicates the occurrence of an error to the user, improving the UX. Fixes: #22803.
2024-03-08 22:54:17 +01:00
/* Gap between tabs in the tab picker */
--grid-gap-tab-picker: 2px;
popovers: Add consistent tippy arrows which support all placements. Added `tippy.js/dist/border.css` along with some custom CSS override, to add arrows which inherit the border color and width of the popover, while also supporting all placements. Also consolidates the CSS styling of the popovers to the `tippy-box` element, which is the recommended way to theme the element according to https://atomiks.github.io/tippyjs/v6/themes/#creating-a-theme. This further helps in unifying the styling of the popover and the arrow, and prevents inconsistencies such as shadow of the popover being casted onto the arrows.
2024-02-08 13:16:05 +01:00
/*
The tippy arrow which matches the color of the popover's border,
is formed by stacking two arrows on top of each other, via the
use of `::before` and `::after` pseudo-elements. This value overrides
the offset of the `::before` pseudo element to create a thicker border,
visually consistent with that of it's parent popover.
*/
--popover-tippy-arrow-before-offset: -6.5px;
css: Extract CSS variables into own file.
2024-02-15 15:39:53 +01:00
/* Colors used across the app */
--color-date: hsl(0deg 0% 15% / 75%);
--color-background-private-message-header: hsl(46deg 35% 93%);
--color-background-private-message-content: hsl(45deg 20% 96%);
--color-background-stream-message-content: hsl(0deg 0% 100%);
selected_message: Adjust light-mode border to specification. This introduces the alpha described by @terpimost in #22059.
2024-05-02 22:24:12 +02:00
--color-selected-message-outline: hsl(217deg 64% 59% / 60%);
css: Extract CSS variables into own file.
2024-02-15 15:39:53 +01:00
--color-message-list-border: hsl(0deg 0% 0% / 16%);
--color-message-header-contents-border: hsl(0deg 0% 0% / 10%);
--color-private-message-header-border: hsl(0deg 0% 0% / 10%);
--color-message-header-contents-border-bottom: hsl(0deg 0% 0% / 5%);
--color-private-message-header-border-bottom: hsl(0deg 0% 0% / 7%);
--color-message-header-icon-non-interactive: hsl(0deg 0% 0% / 30%);
--color-message-header-icon-interactive: hsl(0deg 0% 0%);
--color-background: hsl(0deg 0% 94%);
--color-background-widget-input: hsl(0deg 0% 100%);
--color-background-navbar: hsl(0deg 0% 97%);
--color-background-active-narrow-filter: hsl(202deg 56% 91%);
--color-background-hover-narrow-filter: hsl(120deg 12.3% 71.4% / 38%);
--color-navbar-bottom-border: hsl(0deg 0% 80%);
--color-unread-marker: hsl(217deg 64% 59%);
--color-masked-unread-marker: hsl(0deg 0% 80%);
--color-failed-message-send-icon: hsl(3.88deg 98.84% 66.27%);
--color-background-modal: hsl(0deg 0% 98%);
invite_user_modal: Fix background color of input field.
2024-05-21 20:10:56 +02:00
--color-background-invitee-emails-pill-container: hsl(0deg 0% 100%);
css: Extract CSS variables into own file.
2024-02-15 15:39:53 +01:00
--color-unmuted-or-followed-topic-list-item: hsl(0deg 0% 20%);
--color-outline-focus: hsl(215deg 47% 50%);
--color-background-search: hsl(0deg 0% 100%);
--color-background-search-option-hover: hsl(0deg 0% 94%);
--color-search-box-hover-shadow: hsl(0deg 0% 0% / 10%);
--color-search-shadow-wide: hsl(0deg 0% 0% / 25%);
--color-search-shadow-tight: hsl(0deg 0% 0% / 10%);
--color-search-dropdown-top-border: hsla(0deg 0% 0% / 10%);
--color-background-image-loader: hsl(0deg 0% 0% / 10%);
--color-icon-purple: hsl(240deg 35% 60%);
popovers: Rename "navbar-dropdown-menu" theme to "popover-menu" theme. Also renames the navbar dropdown related CSS terms, to their equivalent popover related terms to accompany the name change of the theme.
2024-04-04 22:33:25 +02:00
--color-background-popover-menu: hsl(0deg 0% 100%);
--color-border-popover-menu-separator: hsl(0deg 0% 0% / 10%);
css: Extract CSS variables into own file.
2024-02-15 15:39:53 +01:00
--color-hotkey-hint: hsl(227deg 78% 59%);
popovers: Update popover hotkey hint colors.
2024-03-04 11:52:25 +01:00
--color-popover-hotkey-hint: hsl(0deg 0% 40%);
--color-border-popover-hotkey-hint: hsl(0deg 0% 40% / 50%);
popovers: Rename "navbar-dropdown-menu" theme to "popover-menu" theme. Also renames the navbar dropdown related CSS terms, to their equivalent popover related terms to accompany the name change of the theme.
2024-04-04 22:33:25 +02:00
--color-background-hover-popover-menu: hsl(220deg 12% 5% / 5%);
--color-background-active-popover-menu: hsl(220deg 12% 5% / 7%);
--color-border-popover-menu: hsl(0deg 0% 0% / 40%);
css: Extract CSS variables into own file.
2024-02-15 15:39:53 +01:00
--color-border-personal-menu-avatar: hsl(0deg 0% 0% / 10%);
--color-background-unread-counter: hsl(105deg 2% 50%);
user_profile: Add focus to subscribe button. Also reduces the number of focusable elements between the "streams" heading and the stream picker. Fixes #26690. Co-authored-by: Tim Abbott <tabbott@zulip.com>
2023-11-18 08:44:06 +01:00
--color-border-add-subscription-button-focus: hsl(0deg 0% 20%);
css: Extract CSS variables into own file.
2024-02-15 15:39:53 +01:00
/* There's no alpha channel here, but this keeps
the variable names in line. */
--color-background-unread-counter-no-alpha: var(
--color-background-unread-counter
);
--color-background-unread-counter-dot: var(
--color-background-unread-counter
);
--color-border-unread-counter: var(--color-background-unread-counter);
--color-border-unread-counter-popover-menu: inherit;
--color-background-tab-picker-container: hsl(0deg 0% 0% / 7%);
--color-background-tab-picker-selected-tab: hsl(0deg 0% 100%);
--color-outline-tab-picker-tab-option: hsl(0deg 0% 0% / 30%);
--color-background-tab-picker-tab-option-hover: hsl(0deg 0% 100% / 60%);
personal_menu: Add theme switcher to personal menu popover. This commit introduces a theme switcher feature within the personal menu popover. The implementation begins with the development of a tab picker, which has the following features: * Utilization of radio buttons to emulate the tab picker. Radio input buttons provides the native way in HTML to select one value out of a set. * Support for both horizontal (default) and vertical orientations. Vertical orientation can be achieved by appending the `.tab-picker-vertical` class. * Respects the `prefers-reduced-motion` option set by the user. Disables the sliding tab animation to improve accessibility. Additionally, the theme switcher component incorporates error handling mechanisms. In the event of a server/network error, the tab slider reverts to the previous theme option after a delay of 500ms. This behavior visually communicates the occurrence of an error to the user, improving the UX. Fixes: #22803.
2024-03-08 22:54:17 +01:00
--color-background-tab-picker-tab-option-active: hsl(0deg 0% 100% / 35%);
css: Extract CSS variables into own file.
2024-02-15 15:39:53 +01:00
--color-background-popover: hsl(0deg 0% 100%);
--color-background-alert-word: hsl(18deg 100% 84%);
buddy list: Create section in buddy list for users from narrow. Fixes #21285.
2023-08-23 02:18:53 +02:00
--color-buddy-list-highlighted-user: hsl(120deg 12.3% 71.4% / 38%);
css: Use variables for border colors in sidebars. This is important step to fix a bug related to making sure css for `.column-right` doesn't apply in navbar but only `.app-main`.
2024-03-13 14:10:07 +01:00
--color-border-sidebar: hsl(0deg 0% 87%);
css: Extract CSS variables into own file.
2024-02-15 15:39:53 +01:00
recent_view: Use html as scroll container. Fixes #17933, #27517 Instead of `recent_view_table`, we make `html` as our scroll container. This fixes an important bug for us where filters sometimes disappear due to them scrolling under navbar which is unexpected. Since we are now using separate containers to display rows and filter (while includes table headers), where filters use sticky positioning, this bug will be fixed.
2024-06-03 12:05:29 +02:00
/* Recent view */
--color-border-recent-view-row: hsl(0deg 0% 87%);
--color-border-recent-view-table: hsl(0deg 0% 0% / 60%);
--color-background-recent-view-row: hsl(100deg 11% 96%);
--color-background-recent-view-row-hover: hsl(210deg 100% 97%);
--color-background-recent-view-unread-row: hsl(0deg 0% 100%);
--color-background-recent-view-unread-row-hover: hsl(210deg 100% 97%);
--color-recent-view-link: hsl(205deg 47% 42%);
--color-recent-view-link-hover: hsl(214deg 40% 58%);
css: Extract CSS variables into own file.
2024-02-15 15:39:53 +01:00
/* Compose box colors */
--color-compose-send-button-icon-color: hsl(0deg 0% 100%);
--color-compose-send-button-background: hsl(240deg 96% 68%);
--color-compose-send-button-background-interactive: hsl(240deg 41% 50%);
--color-compose-send-button-focus-border: hsl(232deg 20% 10%);
--color-compose-send-button-focus-shadow: hsl(230deg 100% 20%);
--color-compose-send-control-button: hsl(240deg 30% 50% / 80%);
--color-compose-send-control-button-background: transparent;
--color-compose-send-control-button-interactive: hsl(240deg 30% 50%);
--color-compose-send-control-button-background-interactive: hsl(
240deg 100% 30% / 5%
);
--color-compose-send-control-button-focus-shadow: var(
--color-compose-send-button-focus-shadow
);
--color-compose-collapsed-reply-button-area-background: hsl(0deg 0% 100%);
--color-compose-collapsed-reply-button-area-background-interactive: var(
--color-compose-collapsed-reply-button-area-background
);
--color-compose-collapsed-reply-button-area-border: hsl(0deg 0% 80%);
--color-compose-collapsed-reply-button-area-border-interactive: hsl(
0deg 0% 60%
);
--color-compose-embedded-button-text-color: hsl(231deg 20% 55%);
--color-compose-embedded-button-text-color-hover: hsl(231deg 20% 30%);
--color-compose-embedded-button-background: transparent;
--color-compose-embedded-button-background-hover: hsl(
231deg 100% 90% / 50%
);
compose: Redesign the arrow between stream and topic. The icon is now bigger, slimmer in stroke width, lighter in color, and has less horizontal spacing around it. Fixes: part of #28792.
2024-03-25 08:42:02 +01:00
--color-compose-chevron-arrow: hsl(0deg 0% 58%);
compose: Redesign limit indicator to show remaining characters count. Additionally, the text colors have been updated for both light and dark themes, it starts showing when 900 or less characters are left, as 999 was too soon, and has a tooltip to show the maximum characters limit. Fixes: #28706.
2024-04-24 08:46:47 +02:00
--color-limit-indicator: hsl(38deg 100% 36%);
--color-limit-indicator-over-limit: hsl(3deg 80% 40%);
compose: Make conversation arrow double as a go-to-conversation button. The chevron arrow icon before the topic / dm user field now also acts as a go to conversation button. Whenever the functionality is available, the plain icon changes to look and behave like a button. The old go to conversation button on the right of the field is removed. Fixes: #28697.
2024-05-09 04:50:53 +02:00
--color-narrow-to-compose-recipients-background: hsl(227deg 100% 70% / 25%);
--color-narrow-to-compose-recipients-background-hover: hsl(
227deg 100% 70% / 35%
);
--color-narrow-to-compose-recipients: hsl(227deg 76% 64%);
--color-narrow-to-compose-recipients-hover: hsl(227deg 78% 59%);
compose: Redesign and relocate compose expand / collapse button. The compose expand / collapse button is moved from the top right of the compose area to the top right corner inside the compose textarea / preview. The textarea / preview and the button area shares the same grid parent. 25px extra padding is added to and margin is subtracted from the right of the element so the button is visually inside it. It appears only on hovering the compose area, and uses a new custom icon. Fixes: #28791.
2024-04-23 01:28:39 +02:00
--color-composebox-button: hsl(0deg 100% 0% / 55%);
--color-composebox-button-hover: var(--color-text-default);
--color-composebox-button-background: hsl(0deg 100% 100% / 60%);
--color-composebox-button-background-hover: hsl(0deg 0% 95%);
css: Extract CSS variables into own file.
2024-02-15 15:39:53 +01:00
/* Text colors */
--color-text-default: hsl(0deg 0% 20%);
--color-text-message-default: hsl(0deg 0% 15%);
--color-text-message-view-header: hsl(0deg 0% 20% / 100%);
--color-text-message-header: hsl(0deg 0% 15%);
message_row: Add variable for color on sender hover.
2024-04-25 19:57:03 +02:00
/* Light and dark mode both use the same hover color on
sender names. */
--color-text-sender-name-hover: hsl(200deg 100% 40%);
css: Extract CSS variables into own file.
2024-02-15 15:39:53 +01:00
--color-text-dropdown-input: hsl(0deg 0% 13.33%);
--color-text-self-direct-mention: hsl(240deg 52% 45% / 100%);
--color-text-self-group-mention: hsl(183deg 52% 26% / 100%);
--color-text-show-more-less-button: hsl(240deg 52% 53%);
--color-text-search: hsl(0deg 0% 35%);
--color-text-search-hover: hsl(0deg 0% 0%);
--color-text-search-placeholder: hsl(0deg 0% 50%);
popovers: Rename "navbar-dropdown-menu" theme to "popover-menu" theme. Also renames the navbar dropdown related CSS terms, to their equivalent popover related terms to accompany the name change of the theme.
2024-04-04 22:33:25 +02:00
--color-text-popover-menu: hsl(0deg 0% 15%);
css: Extract CSS variables into own file.
2024-02-15 15:39:53 +01:00
--color-text-full-name: hsl(0deg 0% 15%);
--color-text-item: hsl(0deg 0% 40%);
--color-text-personal-menu-no-status: hsl(0deg 0% 50%);
--color-text-personal-menu-some-status: hsl(0deg 0% 40%);
--color-text-sidebar-heading: hsl(0deg 0% 43%);
--color-text-sidebar-popover-menu: hsl(0deg 0% 20%);
buddy list: Create section in buddy list for users from narrow. Fixes #21285.
2023-08-23 02:18:53 +02:00
--color-text-url: hsl(200deg 100% 40%);
--color-text-url-hover: hsl(200deg 100% 25%);
settings: Set light- and dark-mode color on field hints.
2024-03-15 16:49:15 +01:00
--color-text-settings-field-hint: hsl(0deg 0% 57%);
css: Extract CSS variables into own file.
2024-02-15 15:39:53 +01:00
/* Markdown code colors */
--color-markdown-code-text: hsl(0deg 0% 0%);
--color-markdown-code-background: hsl(0deg 0% 0% / 6%);
--color-markdown-code-background-mentions: hsl(0deg 0% 0% / 7%);
--color-markdown-pre-text: var(--color-markdown-code-text);
--color-markdown-pre-border: transparent;
--color-markdown-pre-background: hsl(0deg 0% 0% / 4%);
--color-markdown-pre-background-mentions: hsl(0deg 0% 0% / 4%);
--color-markdown-pre-border-mentions: transparent;
--color-markdown-link: hsl(200deg 100% 40%);
--color-markdown-code-link: var(--color-markdown-link);
--color-markdown-link-hover: hsl(200deg 100% 25%);
--color-markdown-code-link-hover: var(--color-markdown-link-hover);
/* Icon colors */
--color-icon-bot: hsl(180deg 8% 65% / 100%);
--color-message-action-visible: hsl(216deg 43% 20% / 50%);
--color-message-action-interactive: hsl(216deg 43% 20% / 100%);
--color-message-star-action: hsl(41deg 100% 47% / 100%);
/* The gray on the filter icons is the same as
what's set on ul.filters, but with 70% opacity. */
--color-left-sidebar-navigation-icon: hsl(0deg 0% 20% / 70%);
--color-vdots-hint: hsl(0deg 0% 0% / 30%);
--color-vdots-visible: hsl(0deg 0% 0% / 53%);
--color-vdots-hover: hsl(0deg 0% 0%);
--color-left-sidebar-header-vdots-visible: var(
--color-left-sidebar-navigation-icon
);
--color-tab-picker-icon: hsl(200deg 100% 40%);
user_circles: Specify colors as CSS variables.
2024-05-30 23:00:17 +02:00
--color-user-circle-active: hsl(106deg 74% 44%);
--color-user-circle-idle: hsl(29deg 84% 51%);
css: Extract CSS variables into own file.
2024-02-15 15:39:53 +01:00
/* Reaction container colors */
reactions: Increase prominence of own reactions. To address feedback that own emoji reactions were not sufficiently distinct, we increase the prominence of one's own emoji reactions by: - Setting a pixel-and-a-half border around own reactions. - Reducing the alpha on the inner drop shadow of other reactions. - Increasing the contrast on own reactions borders (and decreasing them, in dark mode, on other reactions). - Space around the emoji is maintained as in the current design in the own reactions. Other reactions benefit from an additional half pixel of padding, top and bottom, which is necessary to keep the pills (and the hover reaction button) the same height as each other--regardless of whether there's an own reaction among them or not. Padding is reduced in line with the increased border on own reactions.
2024-02-28 22:04:11 +01:00
--color-message-reaction-border: hsl(0deg 0% 0% / 10%);
--color-message-reaction-border-reacted: hsl(0deg 0% 0% / 45%);
css: Extract CSS variables into own file.
2024-02-15 15:39:53 +01:00
--color-message-reaction-background: hsl(0deg 0% 100%);
--color-message-reaction-background-reacted: hsl(0deg 0% 100%);
--color-message-reaction-background-hover: hsl(210deg 30% 96%);
reactions: Increase prominence of own reactions. To address feedback that own emoji reactions were not sufficiently distinct, we increase the prominence of one's own emoji reactions by: - Setting a pixel-and-a-half border around own reactions. - Reducing the alpha on the inner drop shadow of other reactions. - Increasing the contrast on own reactions borders (and decreasing them, in dark mode, on other reactions). - Space around the emoji is maintained as in the current design in the own reactions. Other reactions benefit from an additional half pixel of padding, top and bottom, which is necessary to keep the pills (and the hover reaction button) the same height as each other--regardless of whether there's an own reaction among them or not. Padding is reduced in line with the increased border on own reactions.
2024-02-28 22:04:11 +01:00
--color-message-reaction-shadow-inner: hsl(210deg 50% 50% / 8%);
css: Extract CSS variables into own file.
2024-02-15 15:39:53 +01:00
--color-message-reaction-text: hsl(210deg 20% 25% / 100%);
--color-message-reaction-text-reacted: hsl(210deg 20% 20% / 100%);
--color-message-reaction-button-text: hsl(210deg 20% 20% / 60%);
--color-message-reaction-button-text-hover: var(
--color-message-reaction-text
);
--color-message-reaction-button-background: inherit;
--color-message-reaction-button-background-hover: var(
--color-message-reaction-background
);
--color-message-reaction-button-border: transparent;
--color-message-reaction-button-border-hover: var(
--color-message-reaction-border
);
--font-weight-message-reaction: 600;
/* Message feed loading indicator colors */
--color-zulip-logo: hsl(0deg 0% 0% / 34%);
--color-zulip-logo-loading: hsl(0deg 0% 27%);
--color-recent-view-loading-spinner: hsl(0deg 0% 27%);
--color-zulip-logo-z: hsl(0deg 0% 100%);
/* Message collapsing/condensing button colors */
--color-show-more-less-button-background: hsl(240deg 44% 56% / 8%);
--color-show-more-less-button-background-hover: hsl(240deg 44% 56% / 15%);
--color-show-more-less-button-background-active: hsl(240deg 44% 56% / 20%);
/* Mention pill colors */
--color-background-direct-mention: hsl(240deg 52% 95%);
--color-background-group-mention: hsl(180deg 40% 94%);
--color-background-text-direct-mention: hsl(240deg 70% 70% / 20%);
--color-background-text-hover-direct-mention: hsl(240deg 70% 70% / 30%);
--color-background-text-group-mention: hsl(183deg 60% 45% / 18%);
--color-background-text-hover-group-mention: hsl(183deg 60% 45% / 30%);
/* Inbox view constants - Values from Figma design */
--height-inbox-search: 26px;
--width-inbox-search: 346px;
--width-inbox-filters-dropdown: 150px;
--color-background-inbox-no-unreads-illustration: hsl(147deg 57% 25%);
--color-background-inbox: var(--color-background);
--color-icon-search-inbox: hsl(0deg 0% 0%);
--color-inbox-search-text: hsl(0deg 0% 0%);
--color-border-inbox-search: hsl(229.09deg 21.57% 10% / 30%);
--color-border-inbox-search-hover: hsl(229.09deg 21.57% 10% / 60%);
--color-background-inbox-search: hsl(0deg 0% 100%);
--color-background-inbox-search-hover: hsl(0deg 0% 100%);
--color-background-inbox-search-focus: hsl(0deg 0% 100%);
--color-border-inbox-search-focus: hsl(229.09deg 21.57% 10% / 80%);
--color-box-shadow-inbox-search-focus: hsl(228deg 9.8% 20% / 30%);
--color-background-inbox-row: hsl(0deg 0% 100%);
--color-background-inbox-row-hover: linear-gradient(
0deg,
hsl(0deg 0% 0% / 5%) 0%,
hsl(0deg 0% 0% / 5%) 100%
),
hsl(0deg 0% 100%);
--color-background-btn-inbox-selected: hsl(0deg 0% 0% / 5%);
--color-background-btn-inbox-focus: hsl(0deg 0% 80%);
--color-icons-inbox: hsl(0deg 0% 0%);
--color-background-icon-close-hover: hsl(0deg 0% 0% / 5%);
/* Navbar dropdown menu constants - Values from Figma design */
popovers: Rename "navbar-dropdown-menu" theme to "popover-menu" theme. Also renames the navbar dropdown related CSS terms, to their equivalent popover related terms to accompany the name change of the theme.
2024-04-04 22:33:25 +02:00
--box-shadow-popover-menu: 0 2.78px 4.11px 0 hsl(0deg 0% 0% / 6%),
css: Extract CSS variables into own file.
2024-02-15 15:39:53 +01:00
0 5.5113px 8.5783px 0 hsl(0deg 0% 0% / 7%),
0 8.438px 13.9271px 0 hsl(0deg 0% 0% / 8%),
0 12.177px 21.4737px 0 hsl(0deg 0% 0% / 9%),
0 18.7257px 35.4802px 0 hsl(0deg 0% 0% / 9%),
0 41px 80px 0 hsl(0deg 0% 0% / 13%);
--box-shadow-gear-menu: 0 2.7798px 4.1129px 0 hsl(0deg 0% 0% / 10%),
0 5.5113px 8.5783px 0 hsl(0deg 0% 0% / 9%),
0 8.4377px 13.9271px 0 hsl(0deg 0% 0% / 11%),
0 12.177px 21.4737px 0 hsl(0deg 0% 0% / 11%),
0 18.7257px 35.4802px 0 hsl(0deg 0% 0% / 15%),
0 41px 80px 0 hsl(0deg 0% 0% / 20%);
--color-navbar-icon: hsl(240deg 20% 50%);
--color-navbar-spectator-low-attention-brand-button-text: hsl(
240deg 40% 50%
);
--color-navbar-spectator-low-attention-brand-button-background: transparent;
--color-navbar-spectator-low-attention-brand-button-background-hover: hsl(
240deg 100% 30% / 5%
);
--color-navbar-spectator-low-attention-brand-button-background-active: hsl(
240deg 100% 30% / 8%
);
--color-navbar-spectator-medium-attention-brand-button-text: hsl(
240deg 40% 40% / 100%
);
--color-navbar-spectator-medium-attention-brand-button-background: hsl(
244deg 64% 47% / 10%
);
--color-navbar-spectator-medium-attention-brand-button-background-hover: hsl(
244deg 64% 47% / 15%
);
--color-navbar-spectator-medium-attention-brand-button-background-active: hsl(
244deg 64% 47% / 18%
);
--color-gear-menu-lighter-text: hsl(0deg 0% 40%);
--color-gear-menu-blue-text: hsl(217deg 100% 50%);
--color-header-button-hover: hsl(0deg 0% 0% / 5%);
/* This is a technique for directing CSS to do
the color mixing ordinarily handled by the
alpha channel in hsl(); here, the alpha value
is omitted from the hsl() syntax and instead
used as the percentage for mixing over top of
the navbar background. This is needed so that
elements like the unread-count dot can make
use of the color, but neither compound alpha
values or apply alpha values over different
colors, such as the background color on the
unread dot.
The second color value aligns with
--color-background-navbar. We use the value
directly so that this gets compiled down to
an rgb() value by PostCSS Preset Env. */
--color-header-button-hover-no-alpha: color-mix(
in srgb,
hsl(0deg 0% 0%) 5%,
hsl(0deg 0% 97%)
);
--color-header-button-focus: hsl(0deg 0% 0% / 8%);
/* The second color value aligns with
--color-background-navbar */
--color-header-button-focus-no-alpha: color-mix(
in srgb,
hsl(0deg 0% 0%) 8%,
hsl(0deg 0% 97%)
);
--color-fill-hover-copy-icon: hsl(200deg 100% 40%);
--color-fill-user-invite-copy-icon: hsl(0deg 0% 46.7%);
--icon-chevron-down: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.52977 5.52973C3.78947 5.27004 4.21053 5.27004 4.47023 5.52973L8 9.05951L11.5298 5.52973C11.7895 5.27004 12.2105 5.27004 12.4702 5.52973C12.7299 5.78943 12.7299 6.21049 12.4702 6.47019L8.47023 10.4702C8.21053 10.7299 7.78947 10.7299 7.52977 10.4702L3.52977 6.47019C3.27008 6.21049 3.27008 5.78943 3.52977 5.52973Z' fill='%23333333'/%3E%3C/svg%3E%0A");
/* Button colors on modals and message editing. */
/* Don't define light theme colors for modal here
since the modal is also used on billing pages and
this file is not imported on billing pages. */
emoji_picker: Express colors as CSS variables. This also adds a previously missing dark-mode background color for reacted emoji's :focus state in the picker.
2024-03-05 21:22:05 +01:00
/* Emoji-picker colors */
--color-background-emoji-picker-popover: hsl(0deg 0% 93%);
--color-background-emoji-picker-popover-tab-item-active: hsl(
0deg 0% 100% / 20%
);
--color-background-emoji-picker-emoji-focus: hsl(0deg 0% 93%);
--color-box-shadow-emoji-picker-emoji-focus: transparent;
--color-background-emoji-picker-emoji-reacted: hsl(195deg 50% 95%);
--color-border-emoji-picker-emoji-reacted: hsl(195deg 52% 79%);
--color-background-emoji-picker-emoji-reacted-focus: hsl(195deg 55% 88%);
emoji_popover: Fix white arrow color in dark theme. Tested left, top and bottom placement of emoji popover to check if arrow color is correctly displayed in both dark and light theme.
2024-05-31 09:34:28 +02:00
/* Same color as background color of header / footer */
--color-border-emoji-picker-tippy-arrow: hsl(0deg 0% 93%);
css: Extract CSS variables into own file.
2024-02-15 15:39:53 +01:00
}
%dark-theme {
unread_marker: Handle offset entirely through CSS variables.
2024-04-30 18:03:34 +02:00
/* 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-left: 0;
/* Colors used across the app */
css: Extract CSS variables into own file.
2024-02-15 15:39:53 +01:00
--color-date: hsl(0deg 0% 100% / 75%);
--color-background-private-message-header: hsl(46deg 15% 20%);
--color-background-private-message-content: hsl(46deg 7% 16%);
--color-background-stream-message-content: hsl(0deg 0% 15%);
--color-message-header-icon-non-interactive: hsl(0deg 0% 100% / 30%);
--color-message-header-icon-interactive: hsl(0deg 0% 100%);
--color-message-header-contents-border: hsl(0deg 0% 0% / 60%);
--color-private-message-header-border: hsl(0deg 0% 0% / 48%);
--color-message-header-contents-border-bottom: hsl(0deg 0% 0% / 50%);
--color-private-message-header-border-bottom: hsl(0deg 0% 0% / 37%);
selected_message: Correctly express outline colors as variables.
2024-05-02 22:21:55 +02:00
--color-selected-message-outline: hsl(217deg 64% 59% / 70%);
css: Extract CSS variables into own file.
2024-02-15 15:39:53 +01:00
--color-message-list-border: hsl(0deg 0% 0% / 40%);
--color-background: hsl(0deg 0% 11%);
--color-background-widget-input: hsl(225deg 6% 10%);
--color-background-navbar: hsl(0deg 0% 13%);
--color-background-active-narrow-filter: hsl(200deg 17% 18%);
--color-background-hover-narrow-filter: hsl(136deg 25% 73% / 20%);
--color-navbar-bottom-border: hsl(0deg 0% 0% / 60%);
--color-unread-marker: hsl(217deg 64% 59%);
--color-masked-unread-marker: hsl(0deg 0% 30%);
--color-background-modal: hsl(212deg 28% 18%);
invite_user_modal: Fix background color of input field.
2024-05-21 20:10:56 +02:00
--color-background-invitee-emails-pill-container: hsl(0deg 0% 0% / 20%);
css: Extract CSS variables into own file.
2024-02-15 15:39:53 +01:00
--color-unmuted-or-followed-topic-list-item: hsl(236deg 33% 90%);
--color-recipient-bar-controls-spinner: hsl(0deg 0% 100%);
--color-background-search: hsl(0deg 0% 20%);
--color-background-search-option-hover: hsl(0deg 0% 30%);
--color-search-box-hover-shadow: hsl(0deg 0% 0% / 30%);
--color-search-dropdown-top-border: hsla(0deg 0% 0% / 35%);
--color-background-image-loader: hsl(0deg 0% 100% / 10%);
popovers: Rename "navbar-dropdown-menu" theme to "popover-menu" theme. Also renames the navbar dropdown related CSS terms, to their equivalent popover related terms to accompany the name change of the theme.
2024-04-04 22:33:25 +02:00
--color-background-popover-menu: hsl(0deg 0% 17%);
--color-border-popover-menu-separator: hsl(0deg 0% 0% / 40%);
css: Extract CSS variables into own file.
2024-02-15 15:39:53 +01:00
--color-hotkey-hint: hsl(225deg 100% 84%);
popovers: Update popover hotkey hint colors.
2024-03-04 11:52:25 +01:00
--color-popover-hotkey-hint: hsl(0deg 0% 65%);
--color-border-popover-hotkey-hint: hsl(0deg 0% 65% / 50%);
popovers: Rename "navbar-dropdown-menu" theme to "popover-menu" theme. Also renames the navbar dropdown related CSS terms, to their equivalent popover related terms to accompany the name change of the theme.
2024-04-04 22:33:25 +02:00
--color-background-hover-popover-menu: hsl(220deg 12% 95% / 5%);
--color-background-active-popover-menu: hsl(220deg 12% 95% / 7%);
--color-border-popover-menu: hsl(0deg 0% 0%);
css: Extract CSS variables into own file.
2024-02-15 15:39:53 +01:00
--color-border-personal-menu-avatar: hsl(0deg 0% 100% / 20%);
--color-background-unread-counter: hsl(105deg 2% 50% / 50%);
/* When unreads are hovered on the condensed
views, they should not have an alpha.
The second color aligns with dark mode's
--color-background. We use the value
directly so that this gets compiled down to
an rgb() value by PostCSS Preset Env. */
--color-background-unread-counter-no-alpha: color-mix(
in srgb,
hsl(105deg 2% 50%) 50%,
hsl(0deg 0% 11%)
);
--color-background-unread-counter-dot: hsl(105deg 2% 50% / 90%);
--color-border-unread-counter: hsl(105deg 2% 50%);
--color-border-unread-counter-popover-menu: var(
--color-border-unread-counter
);
--color-background-tab-picker-container: hsl(0deg 0% 0% / 30%);
--color-background-tab-picker-selected-tab: hsl(0deg 0% 100% / 7%);
--color-outline-tab-picker-tab-option: hsl(0deg 0% 100% / 12%);
--color-background-tab-picker-tab-option-hover: hsl(0deg 0% 100% / 5%);
personal_menu: Add theme switcher to personal menu popover. This commit introduces a theme switcher feature within the personal menu popover. The implementation begins with the development of a tab picker, which has the following features: * Utilization of radio buttons to emulate the tab picker. Radio input buttons provides the native way in HTML to select one value out of a set. * Support for both horizontal (default) and vertical orientations. Vertical orientation can be achieved by appending the `.tab-picker-vertical` class. * Respects the `prefers-reduced-motion` option set by the user. Disables the sliding tab animation to improve accessibility. Additionally, the theme switcher component incorporates error handling mechanisms. In the event of a server/network error, the tab slider reverts to the previous theme option after a delay of 500ms. This behavior visually communicates the occurrence of an error to the user, improving the UX. Fixes: #22803.
2024-03-08 22:54:17 +01:00
--color-background-tab-picker-tab-option-active: hsl(0deg 0% 100% / 3%);
css: Extract CSS variables into own file.
2024-02-15 15:39:53 +01:00
--color-background-alert-word: hsl(22deg 70% 35%);
buddy list: Create section in buddy list for users from narrow. Fixes #21285.
2023-08-23 02:18:53 +02:00
--color-buddy-list-highlighted-user: hsl(136deg 25% 73% / 20%);
css: Use variables for border colors in sidebars. This is important step to fix a bug related to making sure css for `.column-right` doesn't apply in navbar but only `.app-main`.
2024-03-13 14:10:07 +01:00
--color-border-sidebar: hsl(0deg 0% 0% / 20%);
css: Extract CSS variables into own file.
2024-02-15 15:39:53 +01:00
recent_view: Use html as scroll container. Fixes #17933, #27517 Instead of `recent_view_table`, we make `html` as our scroll container. This fixes an important bug for us where filters sometimes disappear due to them scrolling under navbar which is unexpected. Since we are now using separate containers to display rows and filter (while includes table headers), where filters use sticky positioning, this bug will be fixed.
2024-06-03 12:05:29 +02:00
/* Recent view */
--color-border-recent-view-row: hsl(0deg 0% 0% / 20%);
--color-border-recent-view-table: hsl(0deg 0% 88%);
--color-background-recent-view-row: hsl(0deg 0% 11%);
--color-background-recent-view-row-hover: hsl(208deg 26% 11% / 60%);
--color-background-recent-view-unread-row: hsl(212deg 30% 22% / 40%);
--color-background-recent-view-unread-row-hover: hsl(212deg 30% 22% / 60%);
--color-recent-view-link: hsl(206deg 89% 74%);
--color-recent-view-link-hover: hsl(208deg 64% 52%);
css: Extract CSS variables into own file.
2024-02-15 15:39:53 +01:00
/* Compose box colors */
--color-compose-send-button-focus-shadow: hsl(0deg 0% 100% / 80%);
--color-compose-send-control-button: hsl(240deg 30% 70%);
--color-compose-send-control-button-background: transparent;
--color-compose-send-control-button-interactive: var(
--color-compose-send-control-button
);
--color-compose-send-control-button-background-interactive: hsl(
235deg 100% 70% / 11%
);
--color-compose-send-control-button-focus-shadow: var(
--color-compose-send-button-focus-shadow
);
--color-compose-collapsed-reply-button-area-background: hsl(
0deg 0% 0% / 20%
);
--color-compose-collapsed-reply-button-area-background-interactive: hsl(
0deg 0% 0% / 15%
);
--color-compose-collapsed-reply-button-area-border: hsl(0deg 0% 0% / 60%);
--color-compose-collapsed-reply-button-area-border-interactive: var(
--color-compose-collapsed-reply-button-area-border
);
--color-compose-embedded-button-text-color: hsl(231deg 30% 65%);
--color-compose-embedded-button-text-color-hover: hsl(231deg 30% 70%);
--color-compose-embedded-button-background: transparent;
--color-compose-embedded-button-background-hover: hsl(
235deg 100% 70% / 11%
);
--color-background-popover: hsl(212deg 32% 14%);
compose: Redesign limit indicator to show remaining characters count. Additionally, the text colors have been updated for both light and dark themes, it starts showing when 900 or less characters are left, as 999 was too soon, and has a tooltip to show the maximum characters limit. Fixes: #28706.
2024-04-24 08:46:47 +02:00
--color-limit-indicator: hsl(38deg 100% 70%);
--color-limit-indicator-over-limit: hsl(3deg 80% 60%);
compose: Make conversation arrow double as a go-to-conversation button. The chevron arrow icon before the topic / dm user field now also acts as a go to conversation button. Whenever the functionality is available, the plain icon changes to look and behave like a button. The old go to conversation button on the right of the field is removed. Fixes: #28697.
2024-05-09 04:50:53 +02:00
--color-narrow-to-compose-recipients-background: hsl(227deg 80% 60% / 25%);
--color-narrow-to-compose-recipients-background-hover: hsl(
227deg 80% 60% / 35%
);
--color-narrow-to-compose-recipients: hsl(224deg 28% 81%);
--color-narrow-to-compose-recipients-hover: hsl(221deg 100% 95%);
compose: Redesign and relocate compose expand / collapse button. The compose expand / collapse button is moved from the top right of the compose area to the top right corner inside the compose textarea / preview. The textarea / preview and the button area shares the same grid parent. 25px extra padding is added to and margin is subtracted from the right of the element so the button is visually inside it. It appears only on hovering the compose area, and uses a new custom icon. Fixes: #28791.
2024-04-23 01:28:39 +02:00
--color-composebox-button: hsl(0deg 100% 100% / 55%);
--color-composebox-button-background: hsl(231deg 8% 13.5% / 80%);
--color-composebox-button-background-hover: hsl(231deg 12% 18%);
css: Extract CSS variables into own file.
2024-02-15 15:39:53 +01:00
/* Text colors */
--color-text-default: hsl(0deg 0% 100% / 75%);
/* Unlike the light theme, the dark theme renders message
text in the default color. */
--color-text-message-default: var(--color-text-default);
--color-text-message-view-header: hsl(0deg 0% 100% / 80%);
--color-text-message-header: hsl(0deg 0% 100% / 80%);
--color-text-sender-name: hsl(0deg 0% 100% / 85%);
--color-text-dropdown-input: hsl(0deg 0% 95%);
--color-text-other-mention: hsl(0deg 0% 100% / 80%);
--color-text-self-direct-mention: hsl(240deg 100% 88% / 100%);
--color-text-self-group-mention: hsl(184deg 52% 63% / 100%);
--color-text-show-more-less-button: hsl(240deg 30% 65%);
--color-text-search: hsl(0deg 0% 100% / 75%);
--color-text-search-hover: hsl(0deg 0% 100%);
--color-text-search-placeholder: hsl(0deg 0% 100% / 50%);
buddy list: Create section in buddy list for users from narrow. Fixes #21285.
2023-08-23 02:18:53 +02:00
--color-text-empty-list-message: hsl(0deg 0% 67%);
popovers: Rename "navbar-dropdown-menu" theme to "popover-menu" theme. Also renames the navbar dropdown related CSS terms, to their equivalent popover related terms to accompany the name change of the theme.
2024-04-04 22:33:25 +02:00
--color-text-popover-menu: hsl(0deg 0% 100% / 80%);
css: Extract CSS variables into own file.
2024-02-15 15:39:53 +01:00
--color-text-full-name: hsl(0deg 0% 100%);
--color-text-item: hsl(0deg 0% 50%);
--color-text-personal-menu-no-status: hsl(0deg 0% 100% 35%);
--color-text-personal-menu-some-status: hsl(0deg 0% 100% 50%);
--color-text-sidebar-popover-menu: hsl(236deg 33% 90%);
/* 75% opacity of --color-text-default against --color-background.
We use color-mix here to avoid defining a separate, compounding
`opacity` property, and also to preserve a record of the
relationship of the color of sidebar headings to other colors. */
--color-text-sidebar-heading: color-mix(
in srgb,
hsl(0deg 0% 75%) 75%,
hsl(0deg 0% 11%)
);
buddy list: Create section in buddy list for users from narrow. Fixes #21285.
2023-08-23 02:18:53 +02:00
--color-text-url-hover: hsl(200deg 79% 66%);
settings: Set light- and dark-mode color on field hints.
2024-03-15 16:49:15 +01:00
--color-text-settings-field-hint: hsl(0deg 0% 52%);
css: Extract CSS variables into own file.
2024-02-15 15:39:53 +01:00
/* Markdown code colors */
/* Note that Markdown code-link colors are identical
to light theme, and so are not redeclared here. */
--color-markdown-code-text: hsl(0deg 0% 100% / 85%);
--color-markdown-code-background: hsl(0deg 0% 100% / 8%);
--color-markdown-code-background-mentions: var(
--color-markdown-code-background
);
--color-markdown-pre-text: var(--color-markdown-code-text);
--color-markdown-pre-border: transparent;
--color-markdown-pre-background: hsl(0deg 0% 100% / 4%);
--color-markdown-pre-background-mentions: hsl(0deg 0% 100% / 5%);
--color-markdown-pre-border-mentions: var(--color-markdown-pre-border);
/* Icon colors */
--color-icon-bot: hsl(180deg 5% 50% / 100%);
--color-message-action-visible: hsl(217deg 41% 90% / 50%);
--color-message-action-interactive: hsl(217deg 41% 90% / 100%);
--color-left-sidebar-navigation-icon: hsl(0deg 0% 100% / 56%);
--color-vdots-hint: hsl(0deg 0% 100% / 30%);
--color-vdots-visible: hsl(236deg 33% 80%);
--color-vdots-hover: hsl(0deg 0% 100%);
--color-left-sidebar-header-vdots-visible: var(
--color-left-sidebar-navigation-icon
);
--color-tab-picker-icon: hsl(0deg 0% 80%);
/* Reaction container colors */
--color-message-reaction-border: hsl(0deg 0% 100% / 15%);
reactions: Increase prominence of own reactions. To address feedback that own emoji reactions were not sufficiently distinct, we increase the prominence of one's own emoji reactions by: - Setting a pixel-and-a-half border around own reactions. - Reducing the alpha on the inner drop shadow of other reactions. - Increasing the contrast on own reactions borders (and decreasing them, in dark mode, on other reactions). - Space around the emoji is maintained as in the current design in the own reactions. Other reactions benefit from an additional half pixel of padding, top and bottom, which is necessary to keep the pills (and the hover reaction button) the same height as each other--regardless of whether there's an own reaction among them or not. Padding is reduced in line with the increased border on own reactions.
2024-02-28 22:04:11 +01:00
--color-message-reaction-border-reacted: hsl(0deg 0% 100% / 70%);
css: Extract CSS variables into own file.
2024-02-15 15:39:53 +01:00
--color-message-reaction-background: hsl(0deg 0% 0% / 30%);
--color-message-reaction-background-reacted: hsl(0deg 0% 0% / 80%);
--color-message-reaction-background-hover: hsl(0deg 0% 100% / 10%);
/* No shadow in dark mode. */
--color-message-reaction-shadow-inner: transparent;
--color-message-reaction-text: hsl(0deg 0% 100% / 75%);
--color-message-reaction-text-reacted: hsl(0deg 0% 100% / 85%);
--color-message-reaction-button-text: var(--color-message-reaction-text);
--color-message-reaction-button-text-hover: var(
--color-message-reaction-text-reacted
);
--color-message-reaction-button-background: inherit;
--color-message-reaction-button-background-hover: var(
--color-message-reaction-background-hover
);
--color-message-reaction-button-border: transparent;
--color-message-reaction-button-border-hover: var(
--color-message-reaction-border
);
--font-weight-message-reaction: 550;
/* Message feed loading indicator colors */
--color-zulip-logo: hsl(0deg 0% 100% / 50%);
--color-zulip-logo-loading: hsl(0deg 0% 100%);
--color-recent-view-loading-spinner: hsl(0deg 0% 100% / 60%);
--color-zulip-logo-z: hsl(214deg 27% 18%);
/* Message collapsing/condensing button colors */
--color-show-more-less-button-background: hsla(240deg 44% 56% / 15%);
--color-show-more-less-button-background-hover: hsl(240deg 44% 56% / 25%);
--color-show-more-less-button-background-active: hsl(240deg 44% 56% / 15%);
/* Mention pill colors */
--color-background-direct-mention: hsl(240deg 13% 20%);
--color-background-group-mention: hsl(180deg 13% 15%);
--color-background-text-direct-mention: hsl(240deg 52% 60% / 25%);
--color-background-text-hover-direct-mention: hsl(240deg 52% 60% / 45%);
--color-background-text-group-mention: hsl(183deg 52% 40% / 20%);
--color-background-text-hover-group-mention: hsl(183deg 52% 40% / 30%);
/* Inbox view */
--color-background-inbox: var(--color-background);
--color-background-inbox-no-unreads-illustration: hsl(147deg 40% 55%);
--color-icon-search-inbox: hsl(0deg 0% 100%);
--color-inbox-search-text: hsl(0deg 0% 95%);
--color-border-inbox-search: hsl(0deg 0% 100% / 20%);
--color-border-inbox-search-hover: hsl(0deg 0% 100% / 40%);
--color-background-inbox-search: hsl(225deg 6% 10%);
--color-background-inbox-search-hover: hsl(225deg 6% 8%);
--color-background-inbox-search-focus: hsl(225deg 6% 7%);
--color-border-inbox-search-focus: hsl(0deg 0% 100% / 50%);
--color-box-shadow-inbox-search-focus: hsl(0deg 0% 100% / 40%);
--color-background-inbox-row: hsl(0deg 0% 14%);
--color-background-inbox-row-hover: linear-gradient(
0deg,
hsl(0deg 0% 100% / 5%) 0%,
hsl(0deg 0% 100% / 5%) 100%
),
hsl(0deg 0% 14.12%);
--color-background-btn-inbox-selected: hsl(0deg 0% 100% / 5%);
--color-background-btn-inbox-focus: hsl(0deg 0% 20%);
--color-icons-inbox: hsl(0deg 0% 100%);
--color-background-icon-close-hover: hsl(0deg 0% 100% / 5%);
/* Navbar dropdown menu constants - Values from Figma design */
popovers: Rename "navbar-dropdown-menu" theme to "popover-menu" theme. Also renames the navbar dropdown related CSS terms, to their equivalent popover related terms to accompany the name change of the theme.
2024-04-04 22:33:25 +02:00
--box-shadow-popover-menu: 0 2.78px 4.12px 0 hsl(0deg 0% 0% / 10%),
css: Extract CSS variables into own file.
2024-02-15 15:39:53 +01:00
0 5.5113px 8.5783px 0 hsl(0deg 0% 0% / 9%),
0 8.4377px 13.9271px 0 hsl(0deg 0% 0% / 11%),
0 12.177px 21.4737px 0 hsl(0deg 0% 0% / 11%),
0 18.7257px 35.4802px 0 hsl(0deg 0% 0% / 15%),
0 41px 80px 0 hsl(0deg 0% 0% / 20%);
--color-navbar-icon: hsl(240deg 35% 60%);
--color-navbar-spectator-low-attention-brand-button-text: hsl(
240deg 55% 72% / 100%
);
--color-navbar-spectator-low-attention-brand-button-background: transparent;
--color-navbar-spectator-low-attention-brand-button-background-hover: hsl(
240deg 56% 70% / 10%
);
--color-navbar-spectator-low-attention-brand-button-background-active: hsl(
240deg 56% 70% / 13%
);
--color-navbar-spectator-medium-attention-brand-button-text: hsl(
240deg 64% 76% / 100%
);
--color-navbar-spectator-medium-attention-brand-button-background: hsl(
240deg 56% 70% / 12%
);
--color-navbar-spectator-medium-attention-brand-button-background-hover: hsl(
240deg 56% 70% / 17%
);
--color-navbar-spectator-medium-attention-brand-button-background-active: hsl(
240deg 56% 70% / 12%
);
--color-gear-menu-lighter-text: hsl(0deg 0% 50%);
--color-gear-menu-blue-text: hsl(217deg 100% 65%);
--color-header-button-hover: hsl(0deg 0% 100% / 4%);
/* The second color value aligns with
--color-background-navbar */
--color-header-button-hover-no-alpha: color-mix(
in srgb,
hsl(0deg 0% 100%) 4%,
hsl(0deg 0% 13%)
);
--color-header-button-focus: hsl(0deg 0% 100% / 7%);
/* The second color value aligns with
--color-background-navbar */
--color-header-button-focus-no-alpha: color-mix(
in srgb,
hsl(0deg 0% 100%) 7%,
hsl(0deg 0% 13%)
);
--color-fill-user-invite-copy-icon: hsl(236deg 33% 90%);
--icon-chevron-down: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.52977 5.52973C3.78947 5.27004 4.21053 5.27004 4.47023 5.52973L8 9.05951L11.5298 5.52973C11.7895 5.27004 12.2105 5.27004 12.4702 5.52973C12.7299 5.78943 12.7299 6.21049 12.4702 6.47019L8.47023 10.4702C8.21053 10.7299 7.78947 10.7299 7.52977 10.4702L3.52977 6.47019C3.27008 6.21049 3.27008 5.78943 3.52977 5.52973Z' fill='%23FFFFFFBF'/%3E%3C/svg%3E%0A");
/* Button colors on modals and message editing. */
--color-exit-button-text: hsl(0deg 0% 100%);
css: Redesign exit / close buttons. We change the background colors for the close / cancel / exit buttons in modals and messages (when editing them or viewing their source). The border is also removed for those buttons in messages.
2024-04-02 16:48:34 +02:00
--color-exit-button-background: hsl(226deg 1% 30% / 50%);
--color-exit-button-background-interactive: hsl(226deg 1% 30% / 65%);
emoji_picker: Express colors as CSS variables. This also adds a previously missing dark-mode background color for reacted emoji's :focus state in the picker.
2024-03-05 21:22:05 +01:00
/* Emoji-picker colors */
--color-background-emoji-picker-popover: hsl(0deg 0% 0% / 20%);
--color-background-emoji-picker-popover-tab-item-active: hsl(
0deg 0% 0% / 50%
);
--color-background-emoji-picker-emoji-focus: hsl(212deg 28% 8% / 75%);
--color-box-shadow-emoji-picker-emoji-focus: hsl(0deg 0% 98%);
--color-background-emoji-picker-emoji-reacted: hsl(0deg 0% 0% / 50%);
--color-border-emoji-picker-emoji-reacted: hsl(0deg 0% 0% / 90%);
--color-background-emoji-picker-emoji-reacted-focus: hsl(0deg 0% 20% / 70%);
user_profile: Add focus to subscribe button. Also reduces the number of focusable elements between the "streams" heading and the stream picker. Fixes #26690. Co-authored-by: Tim Abbott <tabbott@zulip.com>
2023-11-18 08:44:06 +01:00
--color-border-add-subscription-button-focus: hsl(0deg 0% 67%);
emoji_popover: Fix white arrow color in dark theme. Tested left, top and bottom placement of emoji popover to check if arrow color is correctly displayed in both dark and light theme.
2024-05-31 09:34:28 +02:00
/* Same color as background color of header / footer */
--color-border-emoji-picker-tippy-arrow: hsl(211.58deg 33.33% 11.18%);
css: Extract CSS variables into own file.
2024-02-15 15:39:53 +01:00
}
@media screen {
:root.dark-theme {
@extend %dark-theme;
}
}
@media screen and (prefers-color-scheme: dark) {
:root.color-scheme-automatic {
@extend %dark-theme;
}
}