CodeCow/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2026-07-06 21:18:58 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity
cb487da45a
zulip/web/styles/app_variables.css
Sayam Samal b6ff748602 inbox: Standardize inbox filter input. 
This follow-up commit replaces the current inbox filter input
implementation with the redesigned input component.

Fixes part of #34476.
2025-07-03 11:45:35 -07:00

2906 lines
105 KiB
CSS
Raw Blame History

:root {
/* Zulip color palette */
/* stylelint-disable color-no-hex */
/* grey */
--grey-0: #f7f8fc;
--grey-50: #f2f3f7;
--grey-100: #e9ebf2;
--grey-150: #dfe1e8;
--grey-200: #cbcdd6;
--grey-250: #bbbdc8;
--grey-300: #aaadba;
--grey-350: #9ea1ae;
--grey-400: #9194a3;
--grey-450: #858897;
--grey-500: #767988;
--grey-550: #626573;
--grey-600: #535663;
--grey-650: #444754;
--grey-700: #393c49;
--grey-750: #2d303c;
--grey-800: #242631;
--grey-850: #181a25;
--grey-900: #11131e;
--grey-950: #0a0c17;
--grey-1000: #070812;
/* purple */
--purple-0: #f3f2fd;
--purple-50: #ededfc;
--purple-100: #e5e5fc;
--purple-150: #dbdaff;
--purple-200: #c9c7fd;
--purple-250: #b8b4ff;
--purple-300: #aba5fd;
--purple-350: #9e94fd;
--purple-400: #9283fd;
--purple-450: #8a70fc;
--purple-500: #7f63ee;
--purple-550: #7153dc;
--purple-600: #5f3cc5;
--purple-650: #522ab4;
--purple-700: #4615a3;
--purple-750: #370386;
--purple-800: #2c0070;
--purple-850: #200154;
--purple-900: #13013a;
--purple-950: #0d002c;
--purple-1000: #070020;
/* violet */
--violet-0: #f1f3fe;
--violet-50: #eceefc;
--violet-100: #e3e6fd;
--violet-150: #d8dcfc;
--violet-200: #c3c9fe;
--violet-250: #b1b7fe;
--violet-300: #a3a9fc;
--violet-350: #9398fd;
--violet-400: #8688fd;
--violet-450: #7977fe;
--violet-500: #6e69f3;
--violet-550: #6159e1;
--violet-600: #4f42c9;
--violet-650: #4331b8;
--violet-700: #381da7;
--violet-750: #2b0e8a;
--violet-800: #230773;
--violet-850: #180557;
--violet-900: #0e033c;
--violet-950: #08012e;
--violet-1000: #050121;
/* blue */
--blue-0: #eff3fe;
--blue-50: #e5edfe;
--blue-100: #dae5fd;
--blue-150: #cbdbfd;
--blue-200: #b4cafd;
--blue-250: #97b6fe;
--blue-300: #84a8fd;
--blue-350: #7199fe;
--blue-400: #5f8bfc;
--blue-450: #4d7bfd;
--blue-500: #406ef6;
--blue-550: #325ce3;
--blue-600: #2145cb;
--blue-650: #1633b9;
--blue-700: #0f23ac;
--blue-750: #0a089b;
--blue-800: #06037c;
--blue-850: #03025c;
--blue-900: #020145;
--blue-950: #010034;
--blue-1000: #010024;
/* green */
--green-0: #ebffee;
--green-50: #d0fed8;
--green-100: #b4ffc3;
--green-150: #a3f9b5;
--green-200: #82e89a;
--green-250: #6bd586;
--green-300: #57c273;
--green-350: #41ae61;
--green-400: #2f9f52;
--green-450: #158f44;
--green-500: #07833c;
--green-550: #087736;
--green-600: #09672e;
--green-650: #035926;
--green-700: #054f22;
--green-750: #05401b;
--green-800: #013112;
--green-850: #03260e;
--green-900: #001d07;
--green-950: #011505;
--green-1000: #010d03;
/* orange */
--orange-0: #fef4e3;
--orange-50: #ffeccd;
--orange-100: #ffda9b;
--orange-150: #fecb6f;
--orange-200: #febe3d;
--orange-250: #f8b325;
--orange-300: #eba002;
--orange-350: #db920d;
--orange-400: #c8850d;
--orange-450: #ba7401;
--orange-500: #a96a05;
--orange-550: #9c5c00;
--orange-600: #88520c;
--orange-650: #764607;
--orange-700: #623b0c;
--orange-750: #4f2e06;
--orange-800: #3f2404;
--orange-850: #321c04;
--orange-900: #291602;
--orange-950: #200f01;
--orange-1000: #180c03;
/* red */
--red-0: #fcf3f2;
--red-50: #ffe4e0;
--red-100: #ffd4cd;
--red-150: #ffbfb5;
--red-200: #fea497;
--red-250: #ff8b7c;
--red-300: #fd7465;
--red-350: #fd5f50;
--red-400: #f34c3e;
--red-450: #e1392e;
--red-500: #d22720;
--red-550: #c0070a;
--red-600: #ac0508;
--red-650: #960708;
--red-700: #7c0203;
--red-750: #650102;
--red-800: #4f0001;
--red-850: #400101;
--red-900: #330201;
--red-950: #280100;
--red-1000: #1a0200;
color-scheme: light;
/*
This is the header, aka the navbar.
*/
--header-height: 2.5em; /* 40px at 16px em */
/*
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: 1.875em; /* 30px at 16px em */
}
/*
Height of the search box, which appears in the header.
*/
--search-box-height: 2em; /* 32px at 16px em */
--search-box-width: 9.375em; /* 150px at 16px em */
@media (width < $md_min) {
--search-box-width: 2.5em; /* 40px at 16px em */
}
/*
On very short screens, the search box's height becomes
is reduced to fit the available space.
*/
@media (height < $short_navbar_cutoff_height) {
--search-box-height: 1.75em; /* 28px at 16px em */
}
--search-pill-label-min-width: 2.5em; /* 35px at 14px/em */
/*
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.
*/
/* The width of the empty space in the sidebar to separate
content from the edge of the window */
--left-sidebar-padding-left: 8px;
/* The empty space between left-sidebar row icons and
the row content.
7px at 16px/1em */
--left-sidebar-icon-content-gap: 0.4375em;
/* The space allotted in gridded rows for the toggle icon. */
--left-sidebar-header-icon-toggle-width: 20px;
/* 26px at 16px/1em */
--left-sidebar-vdots-width: 1.625em;
/* Other rows need an offset to preserve a column the
entire height of the left sidebar for where toggles sit. */
--left-sidebar-toggle-width-offset: var(
--left-sidebar-header-icon-toggle-width
);
--right-sidebar-header-icon-toggle-width: 20px;
--right-sidebar-toggle-width-offset: calc(
var(--right-sidebar-header-icon-toggle-width) - 4px
);
/* This represents the space in the sidebar reserved for symbols like
the #; labels like the stream name go to the right of this. */
--left-sidebar-icon-column-width: 16px;
/* Offset on unreads to make New topic button appear centered. */
--left-sidebar-unread-offset: 6.5px;
/* space direct message / stream / topic names from unread counters
and @ mention indicators by 3px on the right */
--left-sidebar-before-unread-count-padding: 3px;
/* 15px is the approximate width of a single-digit
unread marker. */
/* 15px at 8px/1em (masked unreads are sized to 0.5em) */
--left-sidebar-single-digit-unread-width: 1.875em;
--left-sidebar-right-margin: 12px;
/* 289px at 14px/1em */
--left-sidebar-max-width: calc(
20.6429em - var(--left-sidebar-right-margin)
);
--realm-logo-max-width: 12.5em; /* 200px at 16px em */
/* Value updated on realm_logo.render() */
--realm-logo-current-width: var(--realm-logo-max-width);
/* 10px is just extra margin for content separation */
--middle-column-left-margin-fluid-layout: calc(
var(--header-height) + var(--realm-logo-current-width) + 10px
);
/* Sidebar width is 1/3 of the screen at smaller
sizes, but gets held to the left sidebar's max width.
This is very useful for areas in the CSS codebase
that rely on this value, but not necessarily as
applied to `width:` or `max-width:`. */
--left-sidebar-width: min(33.3333vw, var(--left-sidebar-max-width));
--right-sidebar-left-spacing: 5px;
/* 50px per icon * 4 icons + 3px space (legacy) = 203px at 20px/1em */
--right-column-collapsed-sidebar-width: 10.15em;
/* 288px at 14px/1em */
--right-sidebar-max-width: 20.57em;
/* We open the right sidebar at xl_min at a size of 240px,
here expressed as precisely 20% of the viewport. */
--right-sidebar-width: min(20vw, var(--right-sidebar-max-width));
/* 25px at 16px/1em */
--right-sidebar-vdots-width: 1.5625em;
/* The width of the icon is reduced by 2px, to account for 2px
of top and bottom margin needed for hover backgrounds to
not touch the row outline. */
--left-sidebar-header-icon-width: calc(1.7142em - 2px); /* 24px / 14px em */
/* Space between section in the left sidebar. */
--left-sidebar-sections-vertical-gutter: 8px;
/* The legacy value here is 25px; that's the unitless legacy line-height
of 20px, plus 5px at 14px/1em */
--left-sidebar-bottom-scrolling-buffer: calc(
(var(--legacy-body-line-height-unitless) * 1em) + 0.3571em
);
/* Used in both left and right sidebar at the bottom, to allow
the user to scroll past the bottom-most elements a little bit.
Value is chosen to avoid elements overlapping with the browser's URL
display when hovering links, and should not scale with font size. */
--sidebar-bottom-spacing: 25px;
/* 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 */
--line-height-sidebar-row-with-avatars: 1.3571em; /* 19px / 14px em */
--line-height-sidebar-topic-inner: 1.2em;
/* This spacing value is to compensate for the
additional space of the prominent row-height
from within the inner topic value. */
--spacing-top-bottom-sidebar-topic-inner: calc(
(
var(--line-height-sidebar-row-prominent) -
var(--line-height-sidebar-topic-inner)
) /
2
);
/* Right sidebar */
/* Vlad's design adds 2px of extra padding beyond the
space created by the padding-left on .right-sidebar,
which separates the right sidebar from the message area. */
--right-sidebar-padding-left: 2px;
--right-sidebar-heading-left-spacing: 5px;
--right-sidebar-avatar-width: 2em;
--right-sidebar-avatar-height: var(--right-sidebar-avatar-width);
--right-sidebar-avatar-right-margin: 0.85ch;
--right-sidebar-presence-circle-width: 1.4285em; /* 20px at 14px em */
/* toggle + avatar + avatar margin + 2px border */
--right-sidebar-text-indent-with-avatar: calc(
var(--right-sidebar-header-icon-toggle-width) / 2 +
var(--right-sidebar-avatar-width) +
var(--right-sidebar-avatar-right-margin) + 2px
);
--right-sidebar-text-indent-without-avatar: calc(
var(--right-sidebar-toggle-width-offset) +
var(--right-sidebar-presence-circle-width)
);
/* Tippy popover related values */
--navbar-popover-menu-min-width: 230px;
--message-actions-popover-min-width: 230px;
--user-group-info-popover-min-width: 16.4285em; /* 230px / 14px em */
--topic-actions-popover-min-width: 200px;
--user-card-popover-min-width: 200px;
--stream-card-popover-min-width: 16.4285em;
/* Information density and typography values */
/* The legacy values here are updated via JavaScript */
--base-font-size-px: 14px;
--base-line-height-unitless: 1.214;
--base-maximum-block-height-em: 1.425em;
--line-fitted-vertical-align-offset-em: 0;
--markdown-interelement-space-px: 5px;
--markdown-interelement-doubled-space-px: calc(
var(--markdown-interelement-space-px) * 2
);
/* 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);
/* 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
);
/* Legacy values */
--legacy-body-line-height-unitless: calc(20 / 14);
/* Message area */
/* In the legacy layout at 16px/1em density, 918.6px is
the widest the message area gets, so we preserve this
value to better present a readable message area across
different info densities and the manual hiding of the
left and right sidebars.
918.6px at 16px/1em
*/
--message-area-max-width: 57.4125em;
/* Shared sidebar typography and effects values. */
--font-weight-sidebar-heading: 600;
--font-weight-sidebar-action-heading: 370;
--font-variant-sidebar-action-heading: all-small-caps;
--font-feature-settings-sidebar-action-heading: "c2sc", "smcp";
/* 17px at 16px/1em = 1.0625em */
--font-size-sidebar-action-heading: 1.0625em;
--text-transform-sidebar-action-heading: uppercase;
--letter-spacing-sidebar-heading: 0.0469em;
--opacity-sidebar-heading: 0.7;
--opacity-sidebar-heading-icon: 0.5;
--opacity-sidebar-heading-hover: 0.9;
--opacity-left-sidebar-muted: 0.55;
--opacity-left-sidebar-muted-hover: 0.75;
--opacity-right-sidebar-subheading: 0.65;
--opacity-right-sidebar-subheading-hover: 0.9;
/*
Message box elements and values.
*/
/* At very tight line-heights, the focus ring on
links can get cut off on paragraphs and list
items that open the senderless message area.
This padding fixes the cut-off problem, and
can be used to adjust padding elsewhere in the
message area as needed.
2px at 20px/1em */
--message-box-link-focus-ring-block-padding: 0.1em;
/* 35px at 14px/1em */
--message-box-avatar-width: 2.5em;
--message-box-avatar-height: var(--message-box-avatar-width);
/* 46px at 14px/1em */
--message-box-avatar-column-width: 3.2857em;
/* Increase the margin here to account for the
focus ring, which is offset by -1px, as well
as the vertical height between the hover icons
and focus ring. */
--message-box-vertical-margin: calc(
var(--markdown-interelement-space-px) * 1.4
);
--message-box-markdown-aligned-vertical-space: var(
--markdown-interelement-space-px
);
/* 22px matches to the width of the padded icon.
22px at 16px/1em
*/
--message-box-icon-width: 1.375em;
/* 25px at 16px/1em */
--message-box-icon-height: 1.6667em;
--message-box-height-senderless-single-line-message: calc(
var(--base-line-height-unitless) * var(--base-font-size-px) +
calc(var(--markdown-interelement-space-px) * 2)
);
/* The line-height on the sender line should coordinate with the
height of a single-line, senderless message, but never be smaller
than the height of the hover icons. The sender line never wraps,
so this just keeps everything in line with the grid definition. */
--message-box-sender-line-height: max(
var(--message-box-icon-height),
var(--message-box-height-senderless-single-line-message)
);
/* This width is updated with an exact pixel
width upon UI initialization. */
--message-box-timestamp-column-width: 0;
/* This length is the primary reference for height
and image width on URL preview embeds. 112px
comes from the height of a two-line title and a
two-line description at a +2 (maximum)
line-height setting.
112px at 16px/1em */
--length-message-preview-embeds: 7em;
/*
Reaction container UI scaling.
*/
--scale-message-reaction-active: 0.96;
/* Message group bookend and date row UI */
--color-border-message-group-spacer-line: light-dark(
color-mix(in oklch, hsl(0deg 0% 0%) 15%, transparent),
color-mix(in oklch, hsl(0deg 0% 100%) 15%, transparent)
);
/*
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
flex item. 2em is 32px at 16px/1em.
*/
--compose-recipient-box-min-height: 2em;
/* 28px at 14px/1em */
/* Note that this variable can only be used in contexts where
the font-size doesn't deviate from the base font-size;
that excludes contexts like .compose_control_button, which
uses font-sizing to adjust the size of the icon. Related
values have been noted in comments with this variable name,
to make their coordination a little less painful. */
--compose-formatting-buttons-row-height: 2em;
/*
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: 24px;
/*
Width of the send menu area with the Send button, Draft(s) button
and the vdots.
*/
--compose-send-controls-width: 112px;
@media ((width >= $sm_min) and (width < $mc_min)) {
--compose-send-controls-width: 62px;
}
@media (width < $sm_min) {
--compose-send-controls-width: 28px;
}
/* Compose-specific transitions and delays. */
--compose-recipient-row-transition-delay: 100ms;
--compose-recipient-row-transition: 150ms ease;
/*
User group info popover elements and values.
*/
--user-group-popover-horizontal-padding: 0.6666em; /* 10px at 15px/1em */
--user-group-popover-icon-text-gap: 0.3125em; /* 5px at 16px/1em */
/*
This isn't scaled with font-size because the flatpickr is a third
party component that doesn't scale with font size.
*/
--flatpickr-confirm-button-font-size: 18px;
/*
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;
/*
Sometimes it's necessary to keep elements, especially those with hover
controls or other interactivity, from appearing beneath Simplebar scroll
bars.
*/
--width-simplebar-scroll: 11px;
--width-simplebar-scroll-hover: 15px;
/* 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;
/* Pill dimensions. */
/* 1.5714em is 22px (border-inclusive) at 14px/1em */
--height-input-pill: 1.5714em;
/* Reduce user pill image lengths by 2px to
preserve an apparent border around
them, and a square aspect-ratio, even under
`box-sizing: border-box` in the area. */
--length-search-input-pill-image: calc(var(--height-input-pill) - 2px);
--length-input-pill-exit: 1.1429em; /* 16px at 14px/em */
--input-pill-side-padding: 0.3571em; /* 5px at 14px/em */
--vertical-spacing-input-pill: 2px;
--outer-spacing-input-pill-container: var(--vertical-spacing-input-pill);
--horizontal-spacing-input-pill: 6px;
/* User circles. */
/* 8px at 14px/1em */
--length-user-status-circle: 0.5714em;
/* Shrink the user activity circle for the Recent Conversations context. */
/* 7px at 14px/1em */
--length-user-status-circle-recent-conversations: 0.5em;
--length-user-status-circle-popover-menu: 8px;
--length-user-popover-menu-avatar: 64px;
/* Overlay heights for streams modal */
--overlay-container-height: 95vh;
--overlay-container-max-height: 1000px;
/* The width of the settings sidebar. */
--settings-sidebar-width: 18.2142em; /* 255px at 14px/em */
/* .two-pane-settings-header and .settings-header */
--settings-overlay-header-height: 3.2143em; /* 45px at 14px/em */
/* .display-type and .list-toggler-container
in subscriptions and user group settings overlays */
--settings-overlay-subheader-height: 3.1429em; /* 44px at 14px/em */
--settings-overlay-header-button-height: 2em;
/* Informational overlay */
--informational-overlay-max-width: 43.75em;
--modal-input-width: 23.2142em;
/*
Maximum height of the compose box when it is not in maximised 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-unmaximized-compose-height: 40vh;
/* Maximum height of the message-edit and preview areas. */
--max-message-edit-height: 24em;
/*
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.
1.429em is 20px at 14px em.
*/
--line-height-compose-buttons: 1.429em;
/*
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.
*/
--stream-subscriber-list-max-height: 100%;
/*
Reusable dimensions and offsets.
*/
--margin-bottom-field-description: 3px;
/* Gap between tabs in the tab picker */
--grid-gap-tab-picker: 2px;
/*
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;
/* Color picker popover values */
--size-color-swatch: 1em;
--grid-gap-color-swatch: 1em;
--padding-color-swatch-list: 0.6666em;
--gradient-custom-swatch: