Mercurial

comparison mrjunejune/src/tools/hls_player/index.css @ 242:543df0fe7168

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[tools] Add full HLS player support
author MrJuneJune <me@mrjunejune.com>
date Mon, 03 Aug 2026 13:14:41 -0700
parents
children 30c2196d03d4
comparison
equal deleted inserted replaced
241:9c2eec61a152 242:543df0fe7168
1 .hls-form {
2 margin: 1.5rem 0;
3 }
4
5 .hls-form label {
6 display: block;
7 margin-bottom: 0.4rem;
8 font-weight: 700;
9 }
10
11 .hls-url-row {
12 display: grid;
13 grid-template-columns: minmax(0, 1fr) auto auto;
14 gap: 0.6rem;
15 }
16
17 .hls-url-row input,
18 .hls-url-row button {
19 min-height: 44px;
20 font: inherit;
21 }
22
23 .hls-url-row input {
24 width: 100%;
25 padding: 0.65rem 0.8rem;
26 color: rgb(var(--gray-dark));
27 background: var(--white);
28 border: 1px solid var(--darkgray);
29 border-radius: 6px;
30 }
31
32 .hls-url-row button {
33 padding: 0.65rem 1rem;
34 color: var(--white);
35 background: var(--darkgray);
36 border: 1px solid var(--darkgray);
37 border-radius: 6px;
38 cursor: pointer;
39 }
40
41 .hls-url-row button:hover,
42 .hls-url-row button:focus-visible {
43 color: var(--white);
44 background: var(--awesome);
45 border-color: var(--awesome);
46 }
47
48 .hls-player-shell {
49 overflow: hidden;
50 border: 1px solid var(--darkgray);
51 border-radius: 8px;
52 background: #10131a;
53 }
54
55 .hls-local-picker {
56 margin: 1rem 0 1.5rem;
57 padding: 0.9rem;
58 border: 1px solid var(--gray-light);
59 border-radius: 8px;
60 }
61
62 .hls-local-picker legend {
63 padding: 0 0.4rem;
64 font-weight: 700;
65 }
66
67 .hls-local-picker p {
68 margin: 0 0 0.75rem;
69 }
70
71 .hls-local-actions {
72 display: flex;
73 flex-wrap: wrap;
74 gap: 0.65rem;
75 }
76
77 .hls-file-button {
78 display: inline-flex;
79 align-items: center;
80 min-height: 44px;
81 padding: 0.65rem 1rem;
82 color: var(--white);
83 background: var(--darkgray);
84 border-radius: 6px;
85 cursor: pointer;
86 }
87
88 .hls-file-button:hover,
89 .hls-file-button:focus-within {
90 background: var(--awesome);
91 }
92
93 .hls-file-button input {
94 position: absolute;
95 width: 1px;
96 height: 1px;
97 overflow: hidden;
98 clip: rect(0 0 0 0);
99 white-space: nowrap;
100 }
101
102 #hlsVideo {
103 display: block;
104 width: 100%;
105 aspect-ratio: 16 / 9;
106 background: #05070b;
107 }
108
109 .hls-status {
110 min-height: 2.75rem;
111 margin: 0;
112 padding: 0.65rem 0.9rem;
113 color: #f3f5f8;
114 background: #171b24;
115 }
116
117 .hls-status[data-state="error"] {
118 color: #ffd7df;
119 background: #6d1732;
120 }
121
122 .hls-status[data-state="ready"] {
123 color: #d8ffe9;
124 background: #185b3a;
125 }
126
127 .hls-details {
128 display: grid;
129 grid-template-columns: repeat(4, minmax(0, 1fr));
130 gap: 0.75rem;
131 margin: 1rem 0;
132 }
133
134 .hls-details[hidden] {
135 display: none;
136 }
137
138 .hls-details div {
139 padding: 0.7rem;
140 border: 1px solid var(--gray-light);
141 border-radius: 6px;
142 }
143
144 .hls-details dt {
145 font-size: 0.8rem;
146 font-weight: 700;
147 text-transform: uppercase;
148 }
149
150 .hls-details dd {
151 margin: 0.25rem 0 0;
152 overflow-wrap: anywhere;
153 }
154
155 .hls-notes {
156 margin-top: 1.5rem;
157 }
158
159 @media (max-width: 720px) {
160 .hls-url-row {
161 grid-template-columns: 1fr 1fr;
162 }
163
164 .hls-url-row input {
165 grid-column: 1 / -1;
166 }
167
168 .hls-details {
169 grid-template-columns: 1fr 1fr;
170 }
171 }