Mercurial

diff mrjunejune/test/snapshots/tools_hls_player.snapshot @ 256:30c2196d03d4

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[site] Integrate Zenbu themes and components Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Tue, 04 Aug 2026 16:49:01 -0700
parents 543df0fe7168
children 60a876c4587a
line wrap: on
line diff
--- a/mrjunejune/test/snapshots/tools_hls_player.snapshot	Tue Aug 04 15:12:18 2026 -0700
+++ b/mrjunejune/test/snapshots/tools_hls_player.snapshot	Tue Aug 04 16:49:01 2026 -0700
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<meta name="theme-color" content="#544e43">
+<meta name="theme-color" content="#f7f3e8">
 <link rel="icon" type="image/svg+xml" href="/public/epi_all_colors.svg">
 <link rel="manifest" href="/public/manifest.json">
 <link rel="apple-touch-icon" href="/public/epi_all_colors.svg">
@@ -19,12 +19,18 @@
 <link rel="preload" href="/public/fonts/more-sugar.thin.otf" as="font" type="font/otf" crossorigin>
 <link rel="preload" href="/public/epi_all_colors.svg" as="image">
 
+<link rel="stylesheet" href="/public/design-system/styles/tokens.css" />
+<link rel="stylesheet" href="/public/design-system/styles/themes.css" />
 <link rel="preload" href="/base.css" as="style" />
 <link rel="stylesheet" href="/base.css" />
+<link rel="stylesheet" href="/public/design-system/styles/components.css" />
+<script
+  type="module"
+  src="/public/design-system/components/index.js"
+></script>
 
 <script src="/public/pwa-register.js" defer></script>
 
-
     <title>HLS Player - MrJuneJune</title>
     <link rel="stylesheet" href="/tools/hls_player/index.css" />
     <script src="/public/hls.min.js" defer></script>
@@ -34,35 +40,41 @@
     <style>
   :root {
     --header-background: var(--white);
-    --header-color: rgb(var(--black));
+    --header-color: var(--black);
     --link-hover-accent: var(--awesome);
   }
 
-  /* Fixed icon in top left corner */
-  #themeToggle {
+  #themeControl {
     position: fixed;
     top: 20px;
     left: 20px;
-    background: var(--header-background);
-    display: flex;
-    align-items: center;
-    border-radius: 50%;
-    cursor: pointer;
     z-index: 1000;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     transition: transform 0.2s ease;
   }
 
-  #themeToggle:hover {
+  #themeControl:hover {
     transform: scale(1.05);
   }
 
+  #themeToggle {
+    flex-direction: column;
+    min-width: 4.5rem;
+    padding: 0.35rem;
+    border-radius: 1.5rem;
+  }
+
+  #themeName {
+    font-family: "More", sans-serif;
+    font-size: 0.65rem;
+    line-height: 1;
+  }
+
   /* Professional header */
   header {
     margin: auto;
     padding: 1.5em 1em;
     font-family: "More", sans-serif;
-    box-shadow: 0 2px 8px rgba(var(--black), 5%);
+    box-shadow: var(--zen-shadow-sm);
     width: 720px;
     max-width: calc(100% - 2em);
     text-align: center;
@@ -86,7 +98,7 @@
 
   /* Mobile responsiveness */
   @media (max-width: 720px) {
-    #themeToggle {
+    #themeControl {
       top: 15px;
       left: 15px;
     }
@@ -101,7 +113,7 @@
   }
 
   @media (max-width: 480px) {
-    #themeToggle {
+    #themeControl {
       top: 10px;
       left: 10px;
     }
@@ -127,20 +139,25 @@
   }
   
   /* 2. MANUAL DARK OVERRIDE */
-  html.dark {
+  html[data-zen-theme="ink"] {
     --logo-invert: invert(1);
     --epi-grayscale: grayscale(1);
   }
   
   /* 3. MANUAL LIGHT OVERRIDE */
-  html.light-mode {
+  html[data-zen-theme="paper"] {
     --logo-invert: invert(0);
     --epi-grayscale: brightness(2.9) grayscale(1);
   }
+
+  html[data-zen-theme="playful"] {
+    --logo-invert: invert(0);
+    --epi-grayscale: saturate(1.25);
+  }
   
   /* 4. SYSTEM PREFERENCE */
   @media (prefers-color-scheme: dark) {
-    :root:not(.light-mode) {
+    :root:not([data-zen-theme]) {
       --logo-invert: invert(1);
     }
   }
@@ -159,16 +176,29 @@
   }
 </style>
 
-<div id="themeToggle">
-  <img id="epiChan" class="epi-logo" aria-label="Toggle dark mode" src="/public/epi_all_colors.svg" height="50" width="50">
-</div>
+<zen-button id="themeControl" variant="quiet">
+  <button
+    id="themeToggle"
+    type="button"
+    aria-label="Change site theme"
+  >
+    <img
+      id="epiChan"
+      class="epi-logo"
+      alt=""
+      src="/public/epi_all_colors.svg"
+      height="50"
+      width="50"
+    >
+    <span id="themeName" aria-live="polite">Auto</span>
+  </button>
+</zen-button>
 
 <header>
   <h1><a href="/">MrJuneJune</a></h1>
 </header>
 <script src="/index.js"></script>
 
-
     <main>
       <h1>Online HLS Player</h1>
       <p>Load an HLS playlist from a URL, or try the sample stream bundled with this site.</p>