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

css: Apply negative spread radius to message box-shadows. 

This fixes a visual regression in newer Electron builds (without
regressing Firefox) for which I still don't entirely know the root
cause, where extra "borders" were being applied to messages in both
streams and PMs. Applying a negative "spread radius" to the box-shadow
properties of these elements, and moving that pixel to the "horizontal
shadow" aspect of the property (which is used to create the left-side
"ruler" effect), restores the expected look and feel.

Tested in qutebrowser (Chromium 87-based), Electron v18+v19, and Firefox
107.

Refs (and should unblock) zulip/zulip-desktop#1251
This commit is contained in:
Josh Klar 2022-12-14 13:42:27 -08:00 committed by Tim Abbott
parent b0c1b2c37f
commit 2e825f637d
2 changed files with 17 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
static/styles/zulip.css
View File

@ -1386,7 +1386,21 @@ td.pointer {
.messagebox,
.date_row {
background-color: hsla(192, 19%, 75%, 0.2);
box-shadow: inset 2px 0 0 0 hsl(0, 0%, 27%), -1px 0 0 0 hsl(0, 0%, 27%);
/* The 5th parameter here is a spread-radius, which, when negative,
* causes the shadow to shrink (be smaller than the target
* element), resulting in a visual width of 3px-1px=2px. This
* is a workaround for a regression found in Electron
* v18.3.15+ where the box-shadow with spread-radius >= 0
* would cause horizontal separator lines to appear between
* messages in the color of the left ruler. The root cause of
* that regression is yet unknown.
*
* Similar CSS for stream messages is present directly in the
* Handlebars templates, since the color used there is the
* stream's configured color.
*/
box-shadow: inset 3px 0 0 -1px hsl(0, 0%, 27%),
-1px 0 0 0 hsl(0, 0%, 27%);
}
}

4
static/templates/single_message.hbs
View File

@ -3,10 +3,10 @@
role="listitem">
<div class="unread_marker"><div class="unread-marker-fill"></div></div>
{{#if want_date_divider}}
<div class="date_row no-select" {{#if msg/is_stream}}style="box-shadow: inset 2px 0px 0px 0px {{background_color}}, -1px 0px 0px 0px {{background_color}};"{{/if}}>{{{date_divider_html}}}</div>
<div class="date_row no-select" {{#if msg/is_stream}}style="box-shadow: inset 3px 0px 0px -1px {{background_color}}, -1px 0px 0px 0px {{background_color}};"{{/if}}>{{{date_divider_html}}}</div>
{{/if}}
<div class="messagebox {{#if next_is_same_sender}}next_is_same_sender{{/if}}"
{{#if msg/is_stream}}style="box-shadow: inset 2px 0px 0px 0px {{background_color}}, -1px 0px 0px 0px {{background_color}};"{{/if}}>
{{#if msg/is_stream}}style="box-shadow: inset 3px 0px 0px -1px {{background_color}}, -1px 0px 0px 0px {{background_color}};"{{/if}}>
<div class="messagebox-content">
{{> message_body}}
</div>