Style announcement scrollbar

docs/codex-miaojing/feature-code-index.md

@@ -12,7 +12,7 @@ Use this document to jump directly to code before broad searching.
 | Home page | `src/app/page.tsx` | Landing/dashboard-like public entry. Check site config dependencies when changing brand text. |
 | Navbar | `src/components/navbar.tsx`, `src/components/site-brand.tsx` | Navigation, brand display, auth-aware links. User-facing nav intentionally excludes the disabled legacy canvas route. |
 | Footer | `src/components/site-footer.tsx` | Uses site config for policy/help/about links and filing text; footer background spans browser width while inner content keeps the original `max-w-7xl` scale. |
-| Announcement popup | `src/components/announcement-popup.tsx`, `src/app/api/announcements/route.ts` | Frontend popup behavior plus backend announcement CRUD. Desktop dialog is intentionally wide (`max-w-5xl`) for long Markdown notices. |
+| Announcement popup | `src/components/announcement-popup.tsx`, `src/app/api/announcements/route.ts`, `src/app/globals.css` | Frontend popup behavior plus backend announcement CRUD. Desktop dialog is intentionally wide (`max-w-5xl`) for long Markdown notices; its content uses the scoped `.announcement-scrollbar` glass scrollbar for light/dark themes. |
 | Site config sync | `src/components/site-config-sync.tsx`, `src/lib/site-config.ts`, `src/app/api/site-config/route.ts` | Site name, tab title, logo, favicon, policy Markdown, filing, membership switch. |
 | Visit tracking | `src/components/visit-tracker.tsx`, `src/app/api/site-stats/route.ts` | Public visit counter. |
 

src/app/globals.css

@@ -429,6 +429,89 @@
   line-height: 1.7;
   color: var(--foreground);
 }
+
+.announcement-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: rgb(151 114 58 / 0.58) rgb(255 255 255 / 0.22);
+  scrollbar-gutter: stable;
+}
+
+.announcement-scrollbar::-webkit-scrollbar {
+  width: 14px;
+}
+
+.announcement-scrollbar::-webkit-scrollbar-track {
+  border: 1px solid rgb(116 88 43 / 0.16);
+  border-radius: 999px;
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 0.38), rgb(255 255 255 / 0.16)),
+    rgb(246 240 229 / 0.38);
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 0.72),
+    inset 0 0 0 1px rgb(255 255 255 / 0.28),
+    0 8px 22px rgb(92 69 32 / 0.08);
+  backdrop-filter: blur(14px) saturate(128%);
+  -webkit-backdrop-filter: blur(14px) saturate(128%);
+}
+
+.announcement-scrollbar::-webkit-scrollbar-thumb {
+  min-height: 48px;
+  border: 4px solid transparent;
+  border-radius: 999px;
+  background:
+    linear-gradient(180deg, rgb(178 135 69 / 0.72), rgb(120 91 48 / 0.62))
+    padding-box;
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 0.42),
+    0 3px 9px rgb(92 69 32 / 0.18);
+}
+
+.announcement-scrollbar::-webkit-scrollbar-thumb:hover {
+  background:
+    linear-gradient(180deg, rgb(191 145 72 / 0.86), rgb(135 101 51 / 0.76))
+    padding-box;
+}
+
+.announcement-scrollbar::-webkit-scrollbar-button {
+  display: none;
+  width: 0;
+  height: 0;
+}
+
+.announcement-scrollbar::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+.dark .announcement-scrollbar {
+  scrollbar-color: rgb(237 190 104 / 0.58) rgb(255 255 255 / 0.08);
+}
+
+.dark .announcement-scrollbar::-webkit-scrollbar-track {
+  border-color: rgb(255 255 255 / 0.10);
+  background:
+    linear-gradient(180deg, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0.045)),
+    rgb(7 11 19 / 0.42);
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 0.16),
+    inset 0 0 0 1px rgb(255 255 255 / 0.035),
+    0 8px 22px rgb(0 0 0 / 0.20);
+}
+
+.dark .announcement-scrollbar::-webkit-scrollbar-thumb {
+  background:
+    linear-gradient(180deg, rgb(237 190 104 / 0.70), rgb(145 103 46 / 0.68))
+    padding-box;
+  box-shadow:
+    inset 0 1px 0 rgb(255 255 255 / 0.26),
+    0 3px 10px rgb(0 0 0 / 0.30);
+}
+
+.dark .announcement-scrollbar::-webkit-scrollbar-thumb:hover {
+  background:
+    linear-gradient(180deg, rgb(250 205 119 / 0.84), rgb(165 118 52 / 0.78))
+    padding-box;
+}
+
 .announcement-markdown h1 {
   font-size: 1.5rem;
   font-weight: 700;

src/components/announcement-popup.tsx

@@ -72,7 +72,7 @@ export function AnnouncementPopup() {
             平台公告：{currentAnn.title}
           </DialogDescription>
         </DialogHeader>
-        <div className="announcement-markdown py-2 max-h-[60vh] overflow-y-auto">
+        <div className="announcement-markdown announcement-scrollbar max-h-[60vh] overflow-y-auto py-2 pr-3">
           <ReactMarkdown remarkPlugins={[remarkGfm]}>
             {currentAnn.content}
           </ReactMarkdown>