[GUI] More rainbows 🏳️‍🌈

ow-mods · Aug 3, 2023 · 7381696 · 7381696
1 parent 03a4434
commit 7381696
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 9 deletions.
diff --git a/owmods_gui/frontend/src/components/main/top-bar/downloads/DownloadRow.tsx b/owmods_gui/frontend/src/components/main/top-bar/downloads/DownloadRow.tsx
@@ -9,6 +9,7 @@ const DownloadRow = memo(function DownloadRow(props: ProgressBar) {
     const done = props.success !== undefined && props.success !== null;
 
     const percent = (props.progress / props.len) * 100;
+    const variant = determineProgressVariant(props);
 
     return (
         <Card>
@@ -29,8 +30,8 @@ const DownloadRow = memo(function DownloadRow(props: ProgressBar) {
 
                     <Box width="100%">
                         <LinearProgress
-                            variant={determineProgressVariant(props)}
-                            value={percent}
+                            variant={variant}
+                            value={variant === "indeterminate" ? undefined : percent}
                             color={done ? (props.success ? "primary" : "error") : "secondary"}
                         />
                     </Box>

diff --git a/owmods_gui/frontend/src/components/main/top-bar/downloads/DownloadsIcon.tsx b/owmods_gui/frontend/src/components/main/top-bar/downloads/DownloadsIcon.tsx
@@ -12,7 +12,7 @@ export const determineProgressVariant = (bar: ProgressBar): CircularProgressProp
     if (bar.success && bar.progressAction === "Download") {
         // After downloading don't give the wrong idea
         return "indeterminate";
-    } else if (bar.progressType === "Indefinite" && bar.success !== undefined) {
+    } else if (bar.progressType === "Indefinite" && bar.success !== null) {
         // Show a complete bar if the indefinite action is done
         return "determinate";
     } else {

diff --git a/owmods_gui/frontend/src/rainbow.css b/owmods_gui/frontend/src/rainbow.css
@@ -10,13 +10,9 @@
 :root {
     --white-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff, 1px 1px #fff, -1px -1px #fff,
         1px -1px #fff, -1px 1px #fff;
-}
-
-.MuiChip-filledPrimary,
-.MuiButton-containedPrimary {
     --level: 45%;
     --saturation-offset: 20%;
-    background-image: linear-gradient(
+    --rainbow: linear-gradient(
         90deg,
         hsl(0, calc(100% - var(--saturation-offset)), var(--level)) 0%,
         hsl(36, calc(100% - var(--saturation-offset)), var(--level)) 10%,
@@ -29,13 +25,31 @@
         hsl(284, calc(94% - var(--saturation-offset)), var(--level)) 80%,
         hsl(308, calc(97% - var(--saturation-offset)), var(--level)) 90%,
         hsl(0, calc(100% - var(--saturation-offset)), var(--level)) 100%
-    ) !important;
+    );
+}
+
+.MuiChip-filledPrimary,
+.MuiButton-containedPrimary,
+.MuiLinearProgress-bar {
+    background-image: var(--rainbow) !important;
     color: black !important;
     text-shadow: var(--white-shadow);
     background-size: 200% 200% !important;
     animation: scroll 10s linear infinite forwards !important;
 }
 
+h1,
+h2,
+h5,
+h6 {
+    background-image: var(--rainbow) !important;
+    background-size: 200% 200% !important;
+    animation: scroll 10s linear infinite forwards !important;
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
 .MuiButton-containedPrimary > .MuiButton-startIcon > svg {
     stroke: white !important;
     stroke-width: 2px;