diff --git a/src/data/Day.vue b/src/data/Day.vue
index 09ff09a..c34b497 100644
--- a/src/data/Day.vue
+++ b/src/data/Day.vue
@@ -92,28 +92,23 @@ function tryUnlock() {
background-color: var(--raised-background);
aspect-ratio: 1;
margin: 5%;
- box-shadow: rgb(0 0 0 / 13%) 0px 3px 0px inset, rgb(0 0 0 / 13%) 3px 0px 0px inset,
- rgb(0 0 0 / 13%) 0px 0px 3px inset, rgb(0 0 0 / 13%) 0px 0px 0px 3px inset;
+}
+
+.mastered.day {
+ box-shadow: rgb(0 0 0 / 25%) 0px 0px 0px 3px inset;
}
.mastered.day.wallpaper {
background: linear-gradient(
225deg,
- rgb(255, 76, 76) 10.8%,
- rgb(255, 255, 255) 11.1%,
- rgb(255, 255, 255) 21.9%,
- rgb(65, 255, 95) 22.2%,
- rgb(65, 255, 95) 33%,
- rgb(255, 255, 255) 33.3%,
- rgb(255, 255, 255) 44.1%,
- rgb(255, 76, 76) 44.4%,
- rgb(255, 76, 76) 55.2%,
- rgb(255, 255, 255) 55.5%,
- rgb(255, 255, 255) 66.3%,
- rgb(65, 255, 95) 66.6%,
- rgb(65, 255, 95) 77.4%,
- rgb(255, 255, 255) 77.7%,
- rgb(255, 255, 255) 88.5%,
+ rgb(255, 76, 76) 11.1%,
+ rgb(255, 255, 255) 11.1% 22.2%,
+ rgb(65, 255, 95) 22.2% 33.3%,
+ rgb(255, 255, 255) 33.3% 44.4%,
+ rgb(255, 76, 76) 44.4% 55.5%,
+ rgb(255, 255, 255) 55.5% 66.6%,
+ rgb(65, 255, 95) 66.6% 77.7%,
+ rgb(255, 255, 255) 77.7% 88.8%,
rgb(255, 76, 76) 88.8%
);
}
@@ -207,21 +202,14 @@ function tryUnlock() {
.mastered.wallpaper .doors::after {
background: linear-gradient(
225deg,
- rgb(255, 76, 76) 10.8%,
- rgb(255, 255, 255) 11.1%,
- rgb(255, 255, 255) 21.9%,
- rgb(65, 255, 95) 22.2%,
- rgb(65, 255, 95) 33%,
- rgb(255, 255, 255) 33.3%,
- rgb(255, 255, 255) 44.1%,
- rgb(255, 76, 76) 44.4%,
- rgb(255, 76, 76) 55.2%,
- rgb(255, 255, 255) 55.5%,
- rgb(255, 255, 255) 66.3%,
- rgb(65, 255, 95) 66.6%,
- rgb(65, 255, 95) 77.4%,
- rgb(255, 255, 255) 77.7%,
- rgb(255, 255, 255) 88.5%,
+ rgb(255, 76, 76) 11.1%,
+ rgb(255, 255, 255) 11.1% 22.2%,
+ rgb(65, 255, 95) 22.2% 33.3%,
+ rgb(255, 255, 255) 33.3% 44.4%,
+ rgb(255, 76, 76) 44.4% 55.5%,
+ rgb(255, 255, 255) 55.5% 66.6%,
+ rgb(65, 255, 95) 66.6% 77.7%,
+ rgb(255, 255, 255) 77.7% 88.8%,
rgb(255, 76, 76) 88.8%
);
}
diff --git a/src/data/common.tsx b/src/data/common.tsx
index 6d0bfb1..7cdad01 100644
--- a/src/data/common.tsx
+++ b/src/data/common.tsx
@@ -37,6 +37,7 @@ import { getFirstFeature, render, renderColJSX, renderJSX, VueFeature } from "ut
import { Ref, watchEffect } from "vue";
import { computed, unref } from "vue";
import "./common.css";
+import "data/layers/styles/day-gradients.css";
import { main } from "./projEntry";
/** An object that configures a {@link ResetButton} */
@@ -417,7 +418,12 @@ export function setUpDailyProgressTracker(options: {
masteryGoal?: DecimalSource;
name: string;
day: number;
- color: string;
+ background:
+ | string
+ | {
+ gradient: string;
+ duration: string;
+ };
textColor?: string;
modal?: {
show: Ref<boolean>;
@@ -442,7 +448,13 @@ export function setUpDailyProgressTracker(options: {
direction: Direction.Right,
width: 600,
height: 25,
- fillStyle: { backgroundColor: options.color },
+ /* eslint-disable prettier/prettier */
+ fillStyle: typeof options.background == "string" ? {
+ backgroundColor: options.background,
+ } : {
+ animation: options.background.duration + " " + options.background.gradient + " linear infinite",
+ },
+ /* eslint-enable prettier/prettier */
textStyle: options.textColor ? { color: options.textColor } : undefined,
progress: progressFunc,
display: jsx(() =>
diff --git a/src/data/layers/boxes.tsx b/src/data/layers/boxes.tsx
index 4479f97..5ca6a95 100644
--- a/src/data/layers/boxes.tsx
+++ b/src/data/layers/boxes.tsx
@@ -630,7 +630,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
masteryGoal: 5e5,
name,
day,
- color,
+ background: color,
modal: {
display: modifiersModal,
show: showModifiersModal
diff --git a/src/data/layers/cloth.tsx b/src/data/layers/cloth.tsx
index 61a78d7..723a46b 100644
--- a/src/data/layers/cloth.tsx
+++ b/src/data/layers/cloth.tsx
@@ -584,7 +584,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
goal: 1e3,
name,
day,
- color,
+ background: color,
textColor: "var(--feature-foreground)",
modal: {
show: showModifiersModal,
diff --git a/src/data/layers/coal.tsx b/src/data/layers/coal.tsx
index 1a32089..60356d1 100644
--- a/src/data/layers/coal.tsx
+++ b/src/data/layers/coal.tsx
@@ -986,7 +986,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
goal: 1e7,
name,
day,
- color: colorCoal,
+ background: colorCoal,
modal: {
show: showModifiersModal,
display: modifiersModal
diff --git a/src/data/layers/dyes.tsx b/src/data/layers/dyes.tsx
index 329e97d..0e5e8f5 100644
--- a/src/data/layers/dyes.tsx
+++ b/src/data/layers/dyes.tsx
@@ -823,7 +823,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
goal: 6e4,
name,
day,
- color,
+ background: color,
textColor: "var(--feature-foreground)",
modal: {
show: showModifiersModal,
diff --git a/src/data/layers/letters.tsx b/src/data/layers/letters.tsx
index 6ed2210..a5f5ff2 100644
--- a/src/data/layers/letters.tsx
+++ b/src/data/layers/letters.tsx
@@ -264,7 +264,10 @@ const layer = createLayer(id, function (this: BaseLayer) {
goal: 1e6,
name,
day,
- color,
+ background: {
+ gradient: "letters-bar",
+ duration: "15s"
+ },
textColor: "var(--feature-foreground)",
modal: {
show: showModifiersModal,
diff --git a/src/data/layers/metal.tsx b/src/data/layers/metal.tsx
index 3230061..2f9a842 100644
--- a/src/data/layers/metal.tsx
+++ b/src/data/layers/metal.tsx
@@ -659,7 +659,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
goal: 25000,
name,
day,
- color,
+ background: color,
modal: {
show: showModifiersModal,
display: modifiersModal
diff --git a/src/data/layers/oil.tsx b/src/data/layers/oil.tsx
index eea2398..c3c44d5 100644
--- a/src/data/layers/oil.tsx
+++ b/src/data/layers/oil.tsx
@@ -1080,7 +1080,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
goal: 250000,
name,
day,
- color,
+ background: color,
modal: {
show: showModifiersModal,
display: modifiersModal
diff --git a/src/data/layers/paper.tsx b/src/data/layers/paper.tsx
index 170bff6..70946b8 100644
--- a/src/data/layers/paper.tsx
+++ b/src/data/layers/paper.tsx
@@ -474,7 +474,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
masteryGoal: 5e7,
name,
day,
- color,
+ background: color,
textColor: "var(--feature-foreground)",
modal: {
show: showModifiersModal,
diff --git a/src/data/layers/plastic.tsx b/src/data/layers/plastic.tsx
index 397deab..b7ae224 100644
--- a/src/data/layers/plastic.tsx
+++ b/src/data/layers/plastic.tsx
@@ -304,7 +304,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
goal: 2.5e5,
name,
day,
- color,
+ background: color,
textColor: "var(--feature-foreground)",
modal: {
show: showModifiersModal,
diff --git a/src/data/layers/styles/day-gradients.css b/src/data/layers/styles/day-gradients.css
new file mode 100644
index 0000000..d486e9e
--- /dev/null
+++ b/src/data/layers/styles/day-gradients.css
@@ -0,0 +1,42 @@
+@keyframes letters-bar {
+ from {
+ background: 0 0 / auto 70% no-repeat linear-gradient(white, white), 0 0 / 113px 113px repeat
+ repeating-linear-gradient(-45deg,
+ red 0 20px, white 20px 40px,
+ blue 40px 60px, white 60px 80px
+ );
+ }
+ to {
+ background: 0 0 / auto 70% no-repeat linear-gradient(white, white), 113px 0px / 113px 113px repeat
+ repeating-linear-gradient(-45deg,
+ red 0 20px, white 20px 40px,
+ blue 40px 60px, white 60px 80px
+ );
+ }
+}
+@keyframes wrapping-paper-bar {
+ from {
+ background: 0 0 / 113px 113px repeat repeating-linear-gradient(-45deg,
+ rgb(255, 76, 76) 0 10px,
+ rgb(255, 255, 255) 10px 20px,
+ rgb(65, 255, 95) 20px 30px,
+ rgb(255, 255, 255) 30px 40px,
+ rgb(255, 76, 76) 40px 50px,
+ rgb(255, 255, 255) 50px 60px,
+ rgb(65, 255, 95) 60px 70px,
+ rgb(255, 255, 255) 70px 80px
+ );
+ }
+ to {
+ background: 113px 0 / 113px 113px repeat repeating-linear-gradient(-45deg,
+ rgb(255, 76, 76) 0 10px,
+ rgb(255, 255, 255) 10px 20px,
+ rgb(65, 255, 95) 20px 30px,
+ rgb(255, 255, 255) 30px 40px,
+ rgb(255, 76, 76) 40px 50px,
+ rgb(255, 255, 255) 50px 60px,
+ rgb(65, 255, 95) 60px 70px,
+ rgb(255, 255, 255) 70px 80px
+ );
+ }
+}
\ No newline at end of file
diff --git a/src/data/layers/styles/management.css b/src/data/layers/styles/management.css
index 6ec7422..49f590d 100644
--- a/src/data/layers/styles/management.css
+++ b/src/data/layers/styles/management.css
@@ -1,21 +1,21 @@
@keyframes focused-focus-bar {
from {
background: 0 0 / 28px 28px repeat
- repeating-linear-gradient(-45deg, red, red 10px, green 10px, green 20px);
+ repeating-linear-gradient(-45deg, red 0 10px, green 10px 20px);
}
to {
background: 28px 0px / 28px 28px repeat
- repeating-linear-gradient(-45deg, red, red 10px, green 10px, green 20px);
+ repeating-linear-gradient(-45deg, red 0 10px, green 10px 20px);
}
}
@keyframes focused-xp-bar {
from {
background: 0 0 / 28px 28px repeat
- repeating-linear-gradient(-45deg, yellow, yellow 10px, lime 10px, lime 20px);
+ repeating-linear-gradient(-45deg, yellow 0 10px, lime 10px 20px);
}
to {
background: 28px 0px / 28px 28px repeat
- repeating-linear-gradient(-45deg, yellow, yellow 10px, lime 10px, lime 20px);
+ repeating-linear-gradient(-45deg, yellow 0 10px, lime 10px 20px);
}
}
diff --git a/src/data/layers/trees.tsx b/src/data/layers/trees.tsx
index 7766d08..d142055 100644
--- a/src/data/layers/trees.tsx
+++ b/src/data/layers/trees.tsx
@@ -819,7 +819,7 @@ const layer = createLayer(id, function (this: BaseLayer) {
goal: 1e4,
name,
day,
- color: colorDark,
+ background: colorDark,
modal: {
show: showModifiersModal,
display: modifiersModal
diff --git a/src/data/layers/wrapping-paper.tsx b/src/data/layers/wrapping-paper.tsx
index 0e3164c..812f804 100644
--- a/src/data/layers/wrapping-paper.tsx
+++ b/src/data/layers/wrapping-paper.tsx
@@ -366,7 +366,7 @@ const layer = createLayer(id, () => {
direction: Direction.Right,
width: 600,
height: 25,
- fillStyle: `backgroundColor: ${color}`,
+ fillStyle: `animation: 15s wrapping-paper-bar linear infinite`,
textStyle: `color: var(--feature-foreground)`,
progress: () => (main.day.value === day ? Decimal.div(masteredDays.value, 6) : 1),
display: jsx(() =>
diff --git a/src/features/bars/Bar.vue b/src/features/bars/Bar.vue
index fc0530d..beae69b 100644
--- a/src/features/bars/Bar.vue
+++ b/src/features/bars/Bar.vue
@@ -28,7 +28,7 @@
<div
class="overlayTextContainer border"
:style="[
- { width: unref(width) + 'px', height: (unref(height) - 1) + 'px' },
+ { width: unref(width) - 1 + 'px', height: unref(height) - 1 + 'px' },
unref(borderStyle) ?? {}
]"
>