paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-03 13:33:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

checkboxes: Render border-color-matched SVGs in light and dark modes.

Browse Source 
This obviates the need for the buggy use of a brightness filter,
which causes rendering problems on iOS devices and possibly others.
This commit is contained in:
Karl Stolley
2024-09-16 11:14:59 -05:00
committed by Tim Abbott
parent 8741c9e43f
commit da91ebc592
4 changed files with 18 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
web/images/checkbox-dark-mode.svg Normal file
View File

@@ -0,0 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="96px" height="96px" viewBox="21 0 75 75" enable-background="new 0 0 96 96" xml:space="preserve">
<g>
<path fill="#ffffff" fill-opacity="0.40" d="M49.844,68.325c-1.416,0-2.748-0.554-3.75-1.557L27.523,48.191c-1.003-1.002-1.555-2.334-1.555-3.75 s0.552-2.749,1.555-3.75c1.001-1.001,2.333-1.552,3.75-1.552s2.75,0.551,3.753,1.553l14.019,14.017L82.14,5.504 c0.989-1.468,2.639-2.345,4.412-2.345c1.054,0,2.075,0.312,2.956,0.902c2.424,1.631,3.07,4.934,1.439,7.361L54.25,65.98 c-0.892,1.316-2.312,2.162-3.895,2.314C50.17,68.315,50.01,68.325,49.844,68.325z"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 701 B

2
web/images/checkbox.svg
View File

@@ -1,5 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="96px" height="96px" viewBox="21 0 75 75" enable-background="new 0 0 96 96" xml:space="preserve">
<g>
<path fill="#999" d="M49.844,68.325c-1.416,0-2.748-0.554-3.75-1.557L27.523,48.191c-1.003-1.002-1.555-2.334-1.555-3.75 s0.552-2.749,1.555-3.75c1.001-1.001,2.333-1.552,3.75-1.552s2.75,0.551,3.753,1.553l14.019,14.017L82.14,5.504 c0.989-1.468,2.639-2.345,4.412-2.345c1.054,0,2.075,0.312,2.956,0.902c2.424,1.631,3.07,4.934,1.439,7.361L54.25,65.98 c-0.892,1.316-2.312,2.162-3.895,2.314C50.17,68.315,50.01,68.325,49.844,68.325z"/>
<path fill="#000000" fill-opacity="0.60" d="M49.844,68.325c-1.416,0-2.748-0.554-3.75-1.557L27.523,48.191c-1.003-1.002-1.555-2.334-1.555-3.75 s0.552-2.749,1.555-3.75c1.001-1.001,2.333-1.552,3.75-1.552s2.75,0.551,3.753,1.553l14.019,14.017L82.14,5.504 c0.989-1.468,2.639-2.345,4.412-2.345c1.054,0,2.075,0.312,2.956,0.902c2.424,1.631,3.07,4.934,1.439,7.361L54.25,65.98 c-0.892,1.316-2.312,2.162-3.895,2.314C50.17,68.315,50.01,68.325,49.844,68.325z"/>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 677 B

After

Width:  |  Height:  |  Size: 700 B

8
web/styles/app_variables.css
View File

@@ -929,8 +929,10 @@
--color-border-zulip-button: hsl(0deg 0% 80%);
--color-border-zulip-button-interactive: hsl(0deg 0% 60%);
/* Zulip-style checkbox colors. */
/* Zulip-style checkbox values. */
--color-border-rendered-checkbox: hsl(0deg 0% 0% / 60%);
/* The SVG must be adjusted when changing the border color above. */
--svg-url-rendered-checkbox: url("../images/checkbox.svg");
/* Emoji-picker colors */
--color-background-emoji-picker-popover: hsl(0deg 0% 93%);
@@ -1357,8 +1359,10 @@
--color-border-zulip-button: hsl(0deg 0% 0% / 60%);
--color-border-zulip-button-interactive: var(--color-border-zulip-button);
/* Zulip-style checkbox colors. */
/* Zulip-style checkbox values. */
--color-border-rendered-checkbox: hsl(0deg 0% 100% / 40%);
/* The SVG must be adjusted when changing the border color above. */
--svg-url-rendered-checkbox: url("../images/checkbox-dark-mode.svg");
/* Emoji-picker colors */
--color-background-emoji-picker-popover: hsl(0deg 0% 0% / 20%);

9
web/styles/components.css
View File

@@ -31,15 +31,18 @@
the light-mode color value here as a fallback. */
border: 1px solid
var(--color-border-rendered-checkbox, hsl(0deg 0% 0% / 60%));
border-radius: 4px;
filter: brightness(0.8);
cursor: pointer;
}
&:checked ~ .rendered-checkbox {
background-image: url("../images/checkbox.svg");
/* As with the border color above, we duplicate
the light-mode SVG URL value here as a fallback. */
background-image: var(
--svg-url-rendered-checkbox,
url("../images/checkbox.svg")
);
background-size: 85%;
background-position: 50% 50%;
background-repeat: no-repeat;