nki/phanpy
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Change -35deg to 145deg prevents stripes animation

Browse source 
When dynamically changing dimension (height), repeating linear gradient seems to animate. This prevents it.
https://stackoverflow.com/a/76285775/20838
This commit is contained in:
Lim Chee Aun 2024-04-14 14:08:50 +08:00
parent 342ff20986
commit 6f8f3e4fd0
3 changed files with 7 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/components/compose.css
View file

@ -310,7 +310,7 @@
#compose-container .form-visibility-direct { #compose-container .form-visibility-direct {
--yellow-stripes: repeating-linear-gradient( --yellow-stripes: repeating-linear-gradient(
-45deg, 135deg,
var(--reply-to-faded-color), var(--reply-to-faded-color),
var(--reply-to-faded-color) 10px, var(--reply-to-faded-color) 10px,
var(--reply-to-faded-color) 10px, var(--reply-to-faded-color) 10px,
@ -348,9 +348,9 @@
var(--img-bg-color) 25%, var(--img-bg-color) 25%,
transparent 25% transparent 25%
), ),
linear-gradient(-45deg, var(--img-bg-color) 25%, transparent 25%), linear-gradient(135deg, var(--img-bg-color) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, var(--img-bg-color) 75%), linear-gradient(45deg, transparent 75%, var(--img-bg-color) 75%),
linear-gradient(-45deg, transparent 75%, var(--img-bg-color) 75%); linear-gradient(135deg, transparent 75%, var(--img-bg-color) 75%);
background-size: 10px 10px; background-size: 10px 10px;
background-position: 0 0, 0 5px, 5px -5px, -5px 0px; background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
} }
@ -562,9 +562,9 @@
var(--img-bg-color) 25%, var(--img-bg-color) 25%,
transparent 25% transparent 25%
), ),
linear-gradient(-45deg, var(--img-bg-color) 25%, transparent 25%), linear-gradient(135deg, var(--img-bg-color) 25%, transparent 25%),
linear-gradient(45deg, transparent 75%, var(--img-bg-color) 75%), linear-gradient(45deg, transparent 75%, var(--img-bg-color) 75%),
linear-gradient(-45deg, transparent 75%, var(--img-bg-color) 75%); linear-gradient(135deg, transparent 75%, var(--img-bg-color) 75%);
background-size: 20px 20px; background-size: 20px 20px;
background-position: 0 0, 0 10px, 10px -10px, -10px 0px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
flex: 0.8; flex: 0.8;

2
src/components/status.css
View file

@ -47,7 +47,7 @@
} }
.visibility-direct { .visibility-direct {
--yellow-stripes: repeating-linear-gradient( --yellow-stripes: repeating-linear-gradient(
-45deg, 135deg,
var(--reply-to-faded-color), var(--reply-to-faded-color),
var(--reply-to-faded-color) 10px, var(--reply-to-faded-color) 10px,
var(--reply-to-faded-color) 10px, var(--reply-to-faded-color) 10px,

2
src/pages/catchup.css
View file

@ -614,7 +614,7 @@
} }
&.visibility-direct { &.visibility-direct {
--yellow-stripes: repeating-linear-gradient( --yellow-stripes: repeating-linear-gradient(
-45deg, 135deg,
var(--reply-to-faded-color), var(--reply-to-faded-color),
var(--reply-to-faded-color) 10px, var(--reply-to-faded-color) 10px,
var(--reply-to-faded-color) 10px, var(--reply-to-faded-color) 10px,