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 index 83fc93cb..fbb2dbfd 100644 --- 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 ( @@ -29,8 +30,8 @@ const DownloadRow = memo(function DownloadRow(props: ProgressBar) { 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 index 3c99de70..2a643b40 100644 --- 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 index e7b91c2b..200975ee 100644 --- 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;