Fix extraneous shadow at bottom of link preview
in stream messages in dark theme, in private
messages for both themes and in mentions, group
mentions and direct mentions.
This is done by applying the same color, used
in the background, to the shadow. There are CSS
variables that hold the values of the background
color.
Fixes#28853.
To increase the discoverability of the possibility of specifying the
language for a code block, we trigger the language typeahead when code
syntax is added using the code formatting button. A blank option is
shown preselected in the typeahead, so that pressing enter will not
mistakenly add a language to the code block.
We only trigger the typeahead on empty opening fences when added by the
button, by setting a state variable to true when adding the syntax using
the button, checking for this state when sourcing languages for the code
typeahead, and then resetting the state variable to false.
Fixes: #29150.
This commit re-adds the bootstrap CSS rules for the specific
btn-link elements in invite modal to zulip.css. This is part
of the bootstrap removal project.
When any stream name includes some other language's letters is scrolled down in
the recent views, the height of compose-controls bar would change.
Fix this by setting a precise line-height for these elements.
Fixes: #27837.
The paragraph tag was being used along with the bold tag to style the
topic and stream in the popovers. The semantic meaning of these tags
are more specialized and should not be used in this context. Replaced
the <p> tags with the more general <div> tags and accounted for the
bold text via the `font-weight` CSS property.
The `.topic-name` class, used to style the topic/stream name in the
topic list in the left sidebar, was also being used to the style the
topic/stream name in the topic/stream popover. This lead to irrelevant
properties being applied to the popover > topic/stream name. Through
this commit, the styling for both of these different cases are now
separated using the appropriate selectors.
Fixes#27562.
Through this commit, we set the width of the navbar dropdowns to be
equal to the longest menu item, via the min-content intrinsic sizing.
Note, that the min-content width takes into account all soft-wrapping
opportunities, which could result in the wrapping of the menu items in
many cases. To prevent this, we use the white-space property to prevent
menu items from wrapping in any case.
This commit updates the CSS to fix the alignment of loading
spinner in "Save" button and also to make sure that button's
width does not change after clicking on the button.
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
This fixes a state where the expanded left sidebar appears under
the navbar at the smallest mobile views.
It also provides a stop-gap fix for the right sidebar's USERS
heading, making it align better (but certainly not perfectly)
with the left sidebar's.
Pratik
CIC4DA
Adnan Shabbir Husain
Karl Stolley
Afonso Azaruja
Aman Agrawal
N-Shar-ma
evykassirer
Sahil Batra
vighneshbhat9945
shashank-23002
sanchi-t
Joydeep Bhattacharjee
Sayam Samal
aryan
Vector73
Anders Kaseorg
ecxtacy