Drafts, scheduled messages and message edit history had different
box-shadow done in #25771. The main reason for the different color was
for these overlays with the new background colors to play nice with the
then message/sidebar sections using the old background colors. Since
there is no such difference anymore, we can have one box-shadow for all
overlays.
The dark component out of the light-dark() of
--color-message-list-border is hsl(0deg 0% 0% / 40%), which is the same
as the color we specify in dark_theme.css.
- .recipient_row already uses the above variable, so it's entry is not
needed in dark_theme.css
- .message_row uses the same variable as well.
- .overlay-message-row does not have a direct border. Although
.message_row nested inside it does. It already uses the above
variable, so we can remove this entry as well.
Fixes part of #35881.
We extract out relevant colors from dark_theme.css for .stream-row and
.group-row and place them in light-dark(). We also transform all these
colors for .group-row and .stream-row into variables.
We use the alpha value for hsl() colors as a stand-in for the opacity we
were defining in dark_theme.css.
Fixes part of #35881.
Instead of having all the rules in the dark_theme.css, we use the
existing variable which uses `light-dark()`.
We also create a new variable color-border-settings-radio-input-parent,
since the existing variable was not created for that radio input and
they should be allowed to change independently.
The "light-border" theme was set as the default theme for all the
popovers, but was no longer in use, since all of our current popovers
either use the "popover-menu" theme or the "dropdown-widget" theme.
In response to the above reasoning, this commit removes the redundant
"light-border" Tippyjs theme usage from the codebase.
In the light theme, the user profile modal tables were using two
different border colors, both very similar to one another. This commit
consolidates them into a single border color for consistency.
The feedback container doesn't have a border so it doesn't make sense
to have a border color defined for the dark theme, and the hover color
change on the `a` tag was an unintended side effect of
commit d73a5d06c0, which while correcting
the hover effect on the typeaheads, also affected the link hover styles
in the feedback container.
This commit, due the reasons mentioned above, removes the entire CSS
block related to the feedback container from web/styles/dark_theme.css.
Fixes part of #35880.
This prep commit consolidates the input pill styles into
`app_variables.css` and uses the light-dark notation for the color
variables to avoid specificity issues that arose from `dark_theme.css`.
This commit serves as the base for the ongoing effort to standardize
redesigned input elements throughout the Zulip Web UI. It introduces a
new Handlebars partial block for inputs, located at
web/templates/components/input.hbs.
The partial can be used with the partial block syntax: {{#> input}},
allowing contributors to pass in the input element as a template. This
approach wraps the input with a consistent structure that includes
support for an icon and an action button. It also applies the necessary
styling to ensure visual and functional consistency across the web UI.
This commit also implements the filter input component at
/devtools/inputs/ showroom page for design discussions and prototyping.
This commit fixes the kbd element text being centered in dark theme
but not in light theme. Aligns text for all kbd elements not just
in dark theme.
Fixes:zulip#35059.
This removes the previous slightly-lighter text shade
in light mode, and gets away from the trickiness of
`color: inherit` in dark mode.
While we could probably go with inheritance
everywhere, simply by removing the color: value on
these element, setting an explicit color variable on
the inputs here builds better confidence as to what
the color value will ultimately be.
"stream-advanced-configurations" was being used as ID for
advanced configurations section in both stream edit and
creation UI, which is not correct as ID should be unique.
This commit fixes it by removing the ID and instead using
class in selectors. Also, there was some unused CSS, as
we do not have dropdown widget buttons in advanced
configurations section, written using the duplicate ID so
removed that as well.
Removing `.alert` from the dark theme seems acceptable,
as there is nowhere in the codebase we're setting a
`text-shadow` value that would require `none` here.
This commit improves the CSS matching performance by avoiding tag-level
filtering in the date row CSS. Instead of using the `span` tag we use
the ".timerender-content" class to filter the same time/date elements.
Since this class is added by `timerender.render_date()` to the span
element inside date_row on every instance, we can use it with assurance.
This commit reduces the selector scope and improves the CSS matching
performance by avoiding tag-level filtering in the bookends CSS.
This also removes the `.sub-unsub-message` class from the bookend as it
served no additional support and the `.bookend`` class can be used
directly instead to maintain the styling of this element.
There is no background color set in light theme or elsewhere that
necessitates this style. Good riddance to the expensive `ul` at the
end of the selector, too.
