diff --git a/src/components/LightboxGallery.astro b/src/components/LightboxGallery.astro index e4255f4..d64e562 100644 --- a/src/components/LightboxGallery.astro +++ b/src/components/LightboxGallery.astro @@ -40,7 +40,7 @@ const scrollRightId = `${rootId}-scroll-right`;
+ class="no-scrollbar flex gap-4 overflow-x-auto overflow-y-hidden scroll-smooth snap-x snap-mandatory pb-2"> {images.map((img, i) => ( - - +
@@ -181,4 +184,4 @@ const scrollRightId = `${rootId}-scroll-right`; - \ No newline at end of file + diff --git a/src/components/Surface.astro b/src/components/Surface.astro index d4dc26a..21ce255 100644 --- a/src/components/Surface.astro +++ b/src/components/Surface.astro @@ -45,7 +45,9 @@ const VARIANTS: Record = { overlayControl: "rounded-[var(--r-card)] border border-border/70 bg-bg/35 backdrop-blur hover:bg-bg/55 transition", }; -const classes = `${VARIANTS[variant]} ${className}`.trim(); +const isButtonLike = Tag === "button" || rest.role === "button"; +const interactiveClasses = isButtonLike ? "cursor-pointer disabled:cursor-not-allowed" : ""; +const classes = `${VARIANTS[variant]} ${interactiveClasses} ${className}`.trim(); --- diff --git a/src/scripts/minecraftStatus.ts b/src/scripts/minecraftStatus.ts index fb3d622..5cad4be 100644 --- a/src/scripts/minecraftStatus.ts +++ b/src/scripts/minecraftStatus.ts @@ -26,9 +26,15 @@ function setState( const textEl = root.querySelector("[data-mc-text]"); if (!dotEl || !valueEl || !textEl) return; - dotEl.classList.remove("bg-emerald-500/80", "bg-red-500/80", "bg-border"); - if (state === "online") dotEl.classList.add("bg-emerald-500/80"); - else if (state === "offline") dotEl.classList.add("bg-red-500/80"); + dotEl.classList.remove( + "bg-emerald-500/80", + "bg-red-500/80", + "bg-border", + "mc-dot-online", + ); + if (state === "online") { + dotEl.classList.add("bg-emerald-500/80", "mc-dot-online"); + } else if (state === "offline") dotEl.classList.add("bg-red-500/80"); else dotEl.classList.add("bg-border"); valueEl.textContent = valueText; diff --git a/src/styles/global.css b/src/styles/global.css index 130e1ef..26b6e7e 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -277,6 +277,9 @@ a { .blob-float-c { animation: blob-float 22s ease-in-out infinite; } + .mc-dot-online { + animation: mc-dot-pulse 2.6s ease-out infinite; + } } @keyframes blob-float { 0%, @@ -287,6 +290,17 @@ a { transform: translate3d(10px, -14px, 0) scale(1.03); } } +@keyframes mc-dot-pulse { + 0% { + box-shadow: 0 0 0 0 hsl(142 70% 45% / 0.42); + } + 78% { + box-shadow: 0 0 0 0.46rem hsl(142 70% 45% / 0); + } + 100% { + box-shadow: 0 0 0 0.46rem hsl(142 70% 45% / 0); + } +} /* --- Scroll-Reveal (JS-optimiert, aber ohne JS trotzdem ok) --- */ html[data-js="true"] .reveal {