Mercurial

comparison 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
comparison
equal deleted inserted replaced
257:609d3c6aff4e 258:60a876c4587a
12 display: grid; 12 display: grid;
13 grid-template-columns: minmax(0, 1fr) auto auto; 13 grid-template-columns: minmax(0, 1fr) auto auto;
14 gap: 0.6rem; 14 gap: 0.6rem;
15 } 15 }
16 16
17 .hls-url-row input, 17 .hls-url-row input {
18 .hls-url-row button { 18 min-height: var(--zenbu-sys-control-height-md);
19 min-height: 44px; 19 font-size: var(--zenbu-sys-font-size-md);
20 font: inherit; 20 line-height: var(--zenbu-sys-line-height-md);
21 } 21 }
22 22
23 .hls-url-row input { 23 .hls-url-row input {
24 width: 100%; 24 width: 100%;
25 padding: 0.65rem 0.8rem; 25 padding:
26 var(--zenbu-sys-control-padding-block-md)
27 var(--zenbu-sys-control-padding-inline-md);
26 color: var(--gray-dark); 28 color: var(--gray-dark);
27 background: var(--white); 29 background: var(--white);
28 border: 1px solid var(--darkgray); 30 border: 1px solid var(--darkgray);
29 border-radius: 6px; 31 border-radius: var(--zenbu-sys-radius-control-small);
30 } 32 }
31 33
32 .hls-url-row button { 34 .hls-url-row button {
33 padding: 0.65rem 1rem;
34 color: var(--white); 35 color: var(--white);
35 background: var(--darkgray); 36 background: var(--darkgray);
36 border: 1px solid var(--darkgray); 37 border: 1px solid var(--darkgray);
37 border-radius: 6px; 38 border-radius: var(--zenbu-sys-radius-control-small);
38 cursor: pointer; 39 cursor: pointer;
39 } 40 }
40 41
41 .hls-url-row button:hover, 42 .hls-url-row button:hover,
42 .hls-url-row button:focus-visible { 43 .hls-url-row button:focus-visible {
46 } 47 }
47 48
48 .hls-player-shell { 49 .hls-player-shell {
49 overflow: hidden; 50 overflow: hidden;
50 border: 1px solid var(--darkgray); 51 border: 1px solid var(--darkgray);
51 border-radius: 8px; 52 border-radius: var(--zenbu-sys-radius-control);
52 background: #10131a; 53 background: #10131a;
53 } 54 }
54 55
55 .hls-local-picker { 56 .hls-local-picker {
56 margin: 1rem 0 1.5rem; 57 margin: 1rem 0 1.5rem;
57 padding: 0.9rem; 58 padding: 0.9rem;
58 border: 1px solid var(--gray-light); 59 border: 1px solid var(--gray-light);
59 border-radius: 8px; 60 border-radius: var(--zenbu-sys-radius-control);
60 } 61 }
61 62
62 .hls-local-picker legend { 63 .hls-local-picker legend {
63 padding: 0 0.4rem; 64 padding: 0 0.4rem;
64 font-weight: 700; 65 font-weight: 700;
75 } 76 }
76 77
77 .hls-file-button { 78 .hls-file-button {
78 display: inline-flex; 79 display: inline-flex;
79 align-items: center; 80 align-items: center;
80 min-height: 44px; 81 min-height: var(--zenbu-sys-control-height-md);
81 padding: 0.65rem 1rem; 82 padding:
83 var(--zenbu-sys-control-padding-block-md)
84 var(--zenbu-sys-control-padding-inline-md);
85 font-size: var(--zenbu-sys-font-size-md);
86 line-height: var(--zenbu-sys-line-height-md);
82 color: var(--white); 87 color: var(--white);
83 background: var(--darkgray); 88 background: var(--darkgray);
84 border-radius: 6px; 89 border-radius: var(--zenbu-sys-radius-control-small);
85 cursor: pointer; 90 cursor: pointer;
86 } 91 }
87 92
88 .hls-file-button:hover, 93 .hls-file-button:hover,
89 .hls-file-button:focus-within { 94 .hls-file-button:focus-within {
105 aspect-ratio: 16 / 9; 110 aspect-ratio: 16 / 9;
106 background: #05070b; 111 background: #05070b;
107 } 112 }
108 113
109 .hls-status { 114 .hls-status {
110 min-height: 2.75rem; 115 min-height: var(--zenbu-sys-control-height-md);
111 margin: 0; 116 margin: 0;
112 padding: 0.65rem 0.9rem; 117 padding: var(--zenbu-sys-padding-sm);
113 color: #f3f5f8; 118 color: #f3f5f8;
114 background: #171b24; 119 background: #171b24;
115 } 120 }
116 121
117 .hls-status[data-state="error"] { 122 .hls-status[data-state="error"] {
136 } 141 }
137 142
138 .hls-details div { 143 .hls-details div {
139 padding: 0.7rem; 144 padding: 0.7rem;
140 border: 1px solid var(--gray-light); 145 border: 1px solid var(--gray-light);
141 border-radius: 6px; 146 border-radius: var(--zenbu-sys-radius-control-small);
142 } 147 }
143 148
144 .hls-details dt { 149 .hls-details dt {
145 font-size: 0.8rem; 150 font-size: 0.8rem;
146 font-weight: 700; 151 font-weight: 700;