/
/
/
1/* Music Assistant - Common Styles
2 * Shared CSS variables and base styles used across all HTML pages
3 */
4
5/* CSS Variables for theming */
6:root {
7 --fg: #000000;
8 --background: #f5f5f5;
9 --overlay: #e7e7e7;
10 --panel: #ffffff;
11 --default: #ffffff;
12 --primary: #03a9f4;
13 --text-secondary: rgba(0, 0, 0, 0.6);
14 --text-tertiary: rgba(0, 0, 0, 0.4);
15 --border: rgba(0, 0, 0, 0.1);
16 --input-bg: rgba(0, 0, 0, 0.03);
17 --input-focus-bg: rgba(3, 169, 244, 0.05);
18 --primary-glow: rgba(3, 169, 244, 0.15);
19 --error-bg: rgba(244, 67, 54, 0.08);
20 --error-border: rgba(244, 67, 54, 0.2);
21 --error-text: #d32f2f;
22 --success: #4caf50;
23 --success-bg: rgba(76, 175, 80, 0.1);
24 --success-border: rgba(76, 175, 80, 0.3);
25 --code-bg: #2d2d2d;
26 --code-fg: #f8f8f2;
27 --code-comment: #75715e;
28 --code-string: #e6db74;
29 --code-keyword: #66d9ef;
30 --info-bg: rgba(3, 169, 244, 0.08);
31 --info-border: rgba(3, 169, 244, 0.3);
32}
33
34/* Dark mode color scheme */
35@media (prefers-color-scheme: dark) {
36 :root {
37 --fg: #ffffff;
38 --background: #181818;
39 --overlay: #181818;
40 --panel: #232323;
41 --default: #000000;
42 --text-secondary: rgba(255, 255, 255, 0.7);
43 --text-tertiary: rgba(255, 255, 255, 0.4);
44 --border: rgba(255, 255, 255, 0.08);
45 --input-bg: rgba(255, 255, 255, 0.05);
46 --input-focus-bg: rgba(3, 169, 244, 0.08);
47 --primary-glow: rgba(3, 169, 244, 0.25);
48 --error-bg: rgba(244, 67, 54, 0.1);
49 --error-border: rgba(244, 67, 54, 0.25);
50 --error-text: #ff6b6b;
51 --success: #66bb6a;
52 --success-bg: rgba(102, 187, 106, 0.15);
53 --success-border: rgba(102, 187, 106, 0.4);
54 --code-bg: #1a1a1a;
55 --info-bg: rgba(3, 169, 244, 0.12);
56 --info-border: rgba(3, 169, 244, 0.4);
57 }
58}
59
60/* Base reset and body styles */
61* {
62 margin: 0;
63 padding: 0;
64 box-sizing: border-box;
65}
66
67body {
68 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
69 background: var(--background);
70 color: var(--fg);
71 line-height: 1.6;
72}
73
74/* Common header styles */
75.header {
76 background: var(--panel);
77 color: var(--fg);
78 padding: 1.5rem 2rem;
79 text-align: center;
80 box-shadow: 0 2px 10px rgba(0,0,0,0.1);
81 border-bottom: 1px solid var(--border);
82}
83
84.header h1 {
85 font-size: 1.8em;
86 margin-bottom: 0.3rem;
87 font-weight: 600;
88}
89
90.header p {
91 font-size: 0.95em;
92 opacity: 0.9;
93}
94
95.header .logo {
96 margin-bottom: 1rem;
97}
98
99.header .logo img {
100 width: 60px;
101 height: 60px;
102 object-fit: contain;
103}
104
105/* Logo styles */
106.logo {
107 text-align: center;
108 margin-bottom: 24px;
109}
110
111.logo img {
112 width: 72px;
113 height: 72px;
114 object-fit: contain;
115}
116
117/* Form elements */
118.form-group {
119 margin-bottom: 22px;
120}
121
122label {
123 display: block;
124 color: var(--fg);
125 font-size: 13px;
126 font-weight: 500;
127 margin-bottom: 8px;
128 letter-spacing: 0.2px;
129}
130
131input[type="text"],
132input[type="password"] {
133 width: 100%;
134 padding: 14px 16px;
135 background: var(--input-bg);
136 border: 1px solid var(--border);
137 border-radius: 10px;
138 font-size: 15px;
139 color: var(--fg);
140 transition: all 0.2s ease;
141}
142
143input[type="text"]::placeholder,
144input[type="password"]::placeholder {
145 color: var(--text-tertiary);
146}
147
148input[type="text"]:focus,
149input[type="password"]:focus {
150 outline: none;
151 border-color: var(--primary);
152 background: var(--input-focus-bg);
153 box-shadow: 0 0 0 3px var(--primary-glow);
154}
155
156input[type="text"]:disabled {
157 background: var(--overlay);
158 color: var(--text-tertiary);
159 cursor: not-allowed;
160}
161
162/* Button styles */
163.btn {
164 width: 100%;
165 padding: 15px;
166 border: none;
167 border-radius: 10px;
168 font-size: 15px;
169 font-weight: 600;
170 cursor: pointer;
171 transition: all 0.2s ease;
172 letter-spacing: 0.3px;
173}
174
175.btn-primary {
176 background: var(--primary);
177 color: white;
178}
179
180.btn-primary:hover {
181 filter: brightness(1.1);
182 box-shadow: 0 8px 24px var(--primary-glow);
183 transform: translateY(-1px);
184}
185
186.btn-primary:active {
187 transform: translateY(0);
188 filter: brightness(0.95);
189}
190
191.btn-primary:disabled {
192 opacity: 0.5;
193 cursor: not-allowed;
194 transform: none;
195 box-shadow: none;
196 filter: none;
197}
198
199.btn-secondary {
200 background: var(--input-bg);
201 color: var(--fg);
202 border: 1px solid var(--border);
203 display: flex;
204 align-items: center;
205 justify-content: center;
206 gap: 10px;
207}
208
209.btn-secondary:hover {
210 background: var(--input-focus-bg);
211 border-color: var(--primary);
212}
213
214/* Error and success messages */
215.error {
216 background: var(--error-bg);
217 border: 1px solid var(--error-border);
218 color: var(--error-text);
219 padding: 14px 16px;
220 border-radius: 10px;
221 margin-bottom: 22px;
222 font-size: 13px;
223 display: none;
224}
225
226.error.show {
227 display: block;
228}
229
230.error-message {
231 background: var(--error-bg);
232 color: var(--error-text);
233 padding: 14px 16px;
234 border-radius: 10px;
235 margin-bottom: 22px;
236 font-size: 13px;
237 display: none;
238 border: 1px solid var(--error-border);
239}
240
241.error-message.show {
242 display: block;
243}
244
245/* Container and panel styles */
246.container {
247 max-width: 1200px;
248 margin: 0 auto;
249 background: var(--panel);
250 border-radius: 16px;
251 box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px var(--border);
252}
253
254.panel {
255 background: var(--panel);
256 border-radius: 16px;
257 box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px var(--border);
258 padding: 48px 40px;
259}
260
261/* Loading indicator */
262.loading {
263 display: inline-block;
264 width: 16px;
265 height: 16px;
266 border: 2px solid rgba(255, 255, 255, 0.3);
267 border-radius: 50%;
268 border-top-color: #fff;
269 animation: spin 0.6s linear infinite;
270}
271
272@keyframes spin {
273 to { transform: rotate(360deg); }
274}
275
276/* Code blocks */
277.code-block,
278.example {
279 background: var(--code-bg);
280 color: var(--code-fg);
281 padding: 1rem;
282 border-radius: 8px;
283 overflow-x: auto;
284 margin: 1rem 0;
285 font-family: 'Monaco', 'Courier New', monospace;
286 font-size: 0.9em;
287 line-height: 1.6;
288}
289
290.example pre {
291 margin: 0;
292}
293
294/* Divider */
295.divider {
296 text-align: center;
297 margin: 28px 0;
298 position: relative;
299}
300
301.divider::before {
302 content: '';
303 position: absolute;
304 top: 50%;
305 left: 0;
306 right: 0;
307 height: 1px;
308 background: var(--border);
309}
310
311.divider span {
312 background: var(--panel);
313 padding: 0 16px;
314 color: var(--text-tertiary);
315 font-size: 13px;
316 position: relative;
317}
318
319/* Link styles */
320.type-link {
321 color: var(--primary);
322 text-decoration: none;
323 border-bottom: 1px dashed var(--primary);
324 transition: all 0.2s;
325}
326
327.type-link:hover {
328 opacity: 0.8;
329 border-bottom-color: transparent;
330}
331
332.back-link {
333 display: inline-block;
334 margin-bottom: 1rem;
335 padding: 0.5rem 1rem;
336 background: var(--primary);
337 color: #ffffff;
338 text-decoration: none;
339 border-radius: 6px;
340 transition: background 0.2s;
341}
342
343.back-link:hover {
344 opacity: 0.9;
345}
346
347/* Utility classes */
348.hidden {
349 display: none;
350}
351