Mercurial

diff mrjunejune/src/tools/hls_player/index.css @ 258:60a876c4587a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[ui] Add semantic primitive ownership Build a layered Zenbu token and sizing system, make authored controls use native-underneath primitives, migrate mrjunejune without imposing visual surfaces, and document/enforce HTML ownership in the catalog and wiki. Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Wed, 05 Aug 2026 05:25:40 -0700
parents 30c2196d03d4
children
line wrap: on
line diff
--- a/mrjunejune/src/tools/hls_player/index.css	Tue Aug 04 16:49:11 2026 -0700
+++ b/mrjunejune/src/tools/hls_player/index.css	Wed Aug 05 05:25:40 2026 -0700
@@ -14,27 +14,28 @@
   gap: 0.6rem;
 }
 
-.hls-url-row input,
-.hls-url-row button {
-  min-height: 44px;
-  font: inherit;
+.hls-url-row input {
+  min-height: var(--zenbu-sys-control-height-md);
+  font-size: var(--zenbu-sys-font-size-md);
+  line-height: var(--zenbu-sys-line-height-md);
 }
 
 .hls-url-row input {
   width: 100%;
-  padding: 0.65rem 0.8rem;
+  padding:
+    var(--zenbu-sys-control-padding-block-md)
+    var(--zenbu-sys-control-padding-inline-md);
   color: var(--gray-dark);
   background: var(--white);
   border: 1px solid var(--darkgray);
-  border-radius: 6px;
+  border-radius: var(--zenbu-sys-radius-control-small);
 }
 
 .hls-url-row button {
-  padding: 0.65rem 1rem;
   color: var(--white);
   background: var(--darkgray);
   border: 1px solid var(--darkgray);
-  border-radius: 6px;
+  border-radius: var(--zenbu-sys-radius-control-small);
   cursor: pointer;
 }
 
@@ -48,7 +49,7 @@
 .hls-player-shell {
   overflow: hidden;
   border: 1px solid var(--darkgray);
-  border-radius: 8px;
+  border-radius: var(--zenbu-sys-radius-control);
   background: #10131a;
 }
 
@@ -56,7 +57,7 @@
   margin: 1rem 0 1.5rem;
   padding: 0.9rem;
   border: 1px solid var(--gray-light);
-  border-radius: 8px;
+  border-radius: var(--zenbu-sys-radius-control);
 }
 
 .hls-local-picker legend {
@@ -77,11 +78,15 @@
 .hls-file-button {
   display: inline-flex;
   align-items: center;
-  min-height: 44px;
-  padding: 0.65rem 1rem;
+  min-height: var(--zenbu-sys-control-height-md);
+  padding:
+    var(--zenbu-sys-control-padding-block-md)
+    var(--zenbu-sys-control-padding-inline-md);
+  font-size: var(--zenbu-sys-font-size-md);
+  line-height: var(--zenbu-sys-line-height-md);
   color: var(--white);
   background: var(--darkgray);
-  border-radius: 6px;
+  border-radius: var(--zenbu-sys-radius-control-small);
   cursor: pointer;
 }
 
@@ -107,9 +112,9 @@
 }
 
 .hls-status {
-  min-height: 2.75rem;
+  min-height: var(--zenbu-sys-control-height-md);
   margin: 0;
-  padding: 0.65rem 0.9rem;
+  padding: var(--zenbu-sys-padding-sm);
   color: #f3f5f8;
   background: #171b24;
 }
@@ -138,7 +143,7 @@
 .hls-details div {
   padding: 0.7rem;
   border: 1px solid var(--gray-light);
-  border-radius: 6px;
+  border-radius: var(--zenbu-sys-radius-control-small);
 }
 
 .hls-details dt {