closable && onClose?.()}
icon={Icons.X}
/>
@@ -121,8 +130,8 @@ function MediaCardContent({
{media.title}
-
-
+
+
);
}
diff --git a/src/components/utils/Flare.tsx b/src/components/utils/Flare.tsx
index 86ea0bfe..267f4c85 100644
--- a/src/components/utils/Flare.tsx
+++ b/src/components/utils/Flare.tsx
@@ -30,13 +30,14 @@ function Light(props: FlareProps) {
function mouseMove(e: MouseEvent) {
if (!outerRef.current) return;
const rect = outerRef.current.getBoundingClientRect();
+ const halfSize = size / 2;
outerRef.current.style.setProperty(
"--bg-x",
- `${(e.clientX - rect.left - size / 2).toFixed(0)}px`
+ `${(e.clientX - rect.left - halfSize).toFixed(0)}px`
);
outerRef.current.style.setProperty(
"--bg-y",
- `${(e.clientY - rect.top - size / 2).toFixed(0)}px`
+ `${(e.clientY - rect.top - halfSize).toFixed(0)}px`
);
}
document.addEventListener("mousemove", mouseMove);
@@ -58,13 +59,12 @@ function Light(props: FlareProps) {
backgroundImage: `radial-gradient(circle at center, rgba(var(${cssVar}), 1), rgba(var(${cssVar}), 0) 70%)`,
backgroundPosition: `var(--bg-x) var(--bg-y)`,
backgroundRepeat: "no-repeat",
- backgroundAttachment: "fixed",
backgroundSize: `${size.toFixed(0)}px ${size.toFixed(0)}px`,
}}
>
diff --git a/src/components/utils/Lightbar.css b/src/components/utils/Lightbar.css
index c49e144f..d2eb265c 100644
--- a/src/components/utils/Lightbar.css
+++ b/src/components/utils/Lightbar.css
@@ -1,11 +1,24 @@
-.lightbar {
- position: absolute;
- left: -25vw;
- top: 0;
- width: 150vw;
+.lightbar, .lightbar-visual {
+ position: absolute;
+ top: 0;
+ width: 150vw;
height: 800px;
pointer-events: none;
user-select: none;
+}
+
+.lightbar {
+ left: -25vw;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ --d: 3s;
+ --animation: cubic-bezier(.75,-0.00,.25,1);
+ animation: boot var(--d) var(--animation) forwards;
+}
+
+.lightbar-visual {
+ left: 0;
--top: theme('colors.background.main');
--bottom: theme('colors.lightBar.light');
--first: conic-gradient(from 90deg at 80% 50%,var(--top),var(--bottom));
@@ -19,13 +32,30 @@
transform: rotate(180deg) translateZ(0px) translateY(400px);
transform-origin: center center;
background-repeat: no-repeat;
- display: flex;
- justify-content: center;
- align-items: center;
+ animation: lightbarBoot var(--d) var(--animation) forwards;
}
.lightbar canvas {
width: 40%;
height: 300px;
- transform: translateY(-50%) rotate(180deg);
+ transform: translateY(-250px);
+}
+
+@keyframes boot {
+ from {
+
+ opacity: 0.25;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+@keyframes lightbarBoot {
+ 0% {
+ transform: rotate(180deg) translateZ(0px) translateY(400px) scaleX(0.8);
+ }
+ 100% {
+ transform: rotate(180deg) translateZ(0px) translateY(400px) scaleX(1);
+ }
}
diff --git a/src/components/utils/Lightbar.tsx b/src/components/utils/Lightbar.tsx
index bfcfd592..a1ca0fe6 100644
--- a/src/components/utils/Lightbar.tsx
+++ b/src/components/utils/Lightbar.tsx
@@ -139,6 +139,7 @@ export function Lightbar(props: { className?: string }) {
);
diff --git a/tailwind.config.js b/tailwind.config.js
index 7fd185a2..17534fe1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -83,6 +83,18 @@ module.exports = {
placeholder: "#4A4A71",
icon: "#545476",
text: "#FFFFFF"
+ },
+
+ // media cards
+ mediaCard: {
+ hoverBackground: "#161622",
+ hoverAccent: "#4D79A8",
+ hoverShadow: "#0A0A10",
+ shadow: "#161622",
+ barColor: "#4B4B63",
+ barFillColor: "#BA7FD6",
+ badge: "#151522",
+ badgeText: "#5F5F7A"
}
}
}