integrated looking scrollbars when not in overlay mode (#16)

argyleink · web-flow · commit c38360944769 · 2025-09-04T09:48:21.000-04:00
* integrated looking scrollbars when not in overlay mode

* gutted plugin for single custom-scrollbar class

* snuck in a scroll animation for the episodes list

while i'm makin scroll better

* update to latest, update pnpm lock file
diff --git a/package.json b/package.json
@@ -45,7 +45,6 @@
     "prettier-plugin-astro": "^0.14.1",
     "prettier-plugin-tailwindcss": "^0.6.13",
     "sharp": "^0.33.5",
-    "tailwind-scrollbar": "^4.0.2",
     "tailwindcss": "^4.1.11",
     "typescript": "^5.8.3",
     "vite": "^6.3.5"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -38,7 +38,7 @@ const description = Astro.props.description ?? starpodConfig.description;
 ---
 
 <!doctype html>
-<html class="scrollbar-thin" lang="en">
+<html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width" />
@@ -110,7 +110,7 @@ const description = Astro.props.description ?? starpodConfig.description;
     class="font-inter text-light-text-body dark:bg-dark-background dark:text-dark-text-body antialiased"
   >
     <header
-      class="scrollbar-thin lg:fixed lg:inset-y-0 lg:left-0 lg:flex lg:w-112 lg:items-start lg:overflow-y-auto xl:w-120"
+      class="custom-scrollbar lg:fixed lg:inset-y-0 lg:left-0 lg:flex lg:w-112 lg:items-start lg:overflow-y-auto xl:w-120"
     >
       <div class="relative z-10 mx-auto lg:min-h-full lg:flex-auto">
         <div
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -10,12 +10,37 @@ main:has(+ * + #audio-player .player) {
   }
 }
 
+html {
+  color-scheme: light dark;
+}
+
+html, .custom-scrollbar {
+  scrollbar-color: var(--color-light-input-border) transparent;
+
+  @media (prefers-color-scheme: dark) {
+    scrollbar-color: var(--color-dark-input-border) transparent;
+  }
+}
+
 footer:has(+ #audio-player .player) {
   @media (max-width: 1024px) {
     @apply mb-40;
   }
 }
 
+[aria-label="EpisodeList"] li {
+  animation: episode-in linear both;
+  animation-timeline: view();
+  animation-range: entry 10% cover 25%;
+}
+
+@keyframes episode-in {
+  from {
+    opacity: 0;
+    translate: 0 25px;
+  }
+}
+
 .animated-bottom-border {
   @apply border-b after:block after:h-[1px] after:w-0 after:bg-gradient-to-r after:from-[#C6B2FF] after:to-[#8D67FF] after:transition-all after:duration-500 after:ease-in-out hover:after:w-full dark:border-dark-border dark:after:from-[#43C9F5] dark:after:to-[#B4EDFF];
 }
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
@@ -1,7 +1,6 @@
 @import 'tailwindcss';
 
 @plugin '@tailwindcss/forms';
-@plugin 'tailwind-scrollbar';
 @plugin '@tailwindcss/typography';
 
 @theme {
