Prior to merging, this commit and others in the PR should be adjusted
and squashed for a cleaner history.
Co-Authored-By: Vlad Korobov <terpimost@gmail.com>
It appears as though we're still setting a background color,
but that is only to push back against the background set by
Pygments.
However, code blocks in mention messages get the same color
background as ordinary messages, preserving contrast on syntax
highlighting.
This ensures that all colors (text, background, and border) are
explicitly declared for Markdown-rendered pre elements, even when
the colors replicate values already declared, e.g., with Pygments.
To extend the drag and drop upload area to blank areas after sidebars,
we now detect the drag/drop event on the entire ".app" division.
We also change replace `width` and `height` css properties with
`min-width` and `min-height` properties respectively, to make sure
that the ".app" div spans the entire width and height of the viewport.
Fixes: #27550.
Align the `dropdown-widget` and `<select>` UIs.
Removed default `<select>` tag styles with `appearance: none` css.
Added custom chevron-down icon with `background-image` attribute
to the `<select>` tag.
The svg icon is used in a CSS variable with a data URI.
The CSS variable is used to set different colors for dark and light
theme.
Tweaked by tabbott to scope selectors appropriately and also delete a
10px font-size in one settings dropdown widget.
Fixes#26859.
This is a case where the use of alpha channels in HSL color values
shows its limits.
The use of an alpha channel is necessary for the background
elements for the top navbar elements, because they sit over the
top of the navbar's bottom border (actually an inset shaddow).
However, it's impossible to use the alpha-channel based color on
elements like the unread dot, where the border actually sits on
top of the element itself--meaning that the effect would be a
larger dot with an imperceptibly darker ring around it.
What this commit does is use a technique suggested by Anders
Kaseorg for using CSS's `color-mix()` functional notation to
calculate an opaque version of the alpha color for use on
elements that do not or cannot directly take the color with
the alpha channel.
See CZO discussion:
https://chat.zulip.org/#narrow/stream/6-frontend/topic/alphas.20in.20color.20definitions/near/1670102