From 6f8f3e4fd0448116ec5ffb0e0b029252c29b344e Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 14 Apr 2024 14:08:50 +0800
Subject: [PATCH] Change -35deg to 145deg prevents stripes animation

When dynamically changing dimension (height), repeating linear gradient seems to animate. This prevents it.
https://stackoverflow.com/a/76285775/20838
---
 src/components/compose.css | 10 +++++-----
 src/components/status.css  |  2 +-
 src/pages/catchup.css      |  2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/compose.css b/src/components/compose.css
index cfa4cdd9..9e2c3f0b 100644
--- a/src/components/compose.css
+++ b/src/components/compose.css
@@ -310,7 +310,7 @@
 
 #compose-container .form-visibility-direct {
   --yellow-stripes: repeating-linear-gradient(
-    -45deg,
+    135deg,
     var(--reply-to-faded-color),
     var(--reply-to-faded-color) 10px,
     var(--reply-to-faded-color) 10px,
@@ -348,9 +348,9 @@
       var(--img-bg-color) 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(135deg, transparent 75%, var(--img-bg-color) 75%);
   background-size: 10px 10px;
   background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
 }
@@ -562,9 +562,9 @@
       var(--img-bg-color) 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(135deg, transparent 75%, var(--img-bg-color) 75%);
   background-size: 20px 20px;
   background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
   flex: 0.8;
diff --git a/src/components/status.css b/src/components/status.css
index e4dde172..0122108c 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -47,7 +47,7 @@
 }
 .visibility-direct {
   --yellow-stripes: repeating-linear-gradient(
-    -45deg,
+    135deg,
     var(--reply-to-faded-color),
     var(--reply-to-faded-color) 10px,
     var(--reply-to-faded-color) 10px,
diff --git a/src/pages/catchup.css b/src/pages/catchup.css
index dcfbf944..4f53c6db 100644
--- a/src/pages/catchup.css
+++ b/src/pages/catchup.css
@@ -614,7 +614,7 @@
     }
     &.visibility-direct {
       --yellow-stripes: repeating-linear-gradient(
-        -45deg,
+        135deg,
         var(--reply-to-faded-color),
         var(--reply-to-faded-color) 10px,
         var(--reply-to-faded-color) 10px,