music-assistant-server
5.6 KB•CSS
styles.css
5.6 KB • 315 lines • css
1body {
2 background-color: rgb(246, 246, 246);
3 color: rgb(255, 255, 255);
4 font-family: 'Arial', sans-serif;
5 width: 100%;
6 margin: 0;
7 font-size: 20px;
8 overscroll-behavior: contain;
9}
10
11/* width */
12::-webkit-scrollbar {
13 width: 10px;
14}
15
16/* Track */
17::-webkit-scrollbar-track {
18 background: #1f1f1f;
19}
20
21/* Handle */
22::-webkit-scrollbar-thumb {
23 background: #333;
24}
25
26/* Handle on hover */
27::-webkit-scrollbar-thumb:hover {
28 background: #555;
29}
30
31input, textarea, button, select, a {
32 -webkit-tap-highlight-color: rgba(0,0,0,0);
33}
34
35.navbar {
36 overflow: hidden;
37 background-color: #607d8b;
38 z-index: 1; /* Sit on top */
39 padding: 13px;
40 color: white;
41 position: fixed; /* Set the navbar to fixed position */
42 top: 0; /* Position the navbar at the top of the page */
43 width: 100%; /* Full width */
44 font-size: 21px;
45 font-weight: 500;
46 user-select: none;
47}
48
49.play-button {
50 display: block;
51 position: absolute;
52 right: 34px;
53 top: 5px;
54 height: 40px;
55 width: 40px;
56}
57
58.content {
59 margin-top: 62px
60}
61
62.group {
63 float: none;
64 background-color: white;
65 box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
66 clear: both;
67 padding: 8px;
68 margin: 10px 15px 10px 15px;
69 overflow: auto;
70 width: auto;
71 border-radius: 3px;
72 user-select: none;
73}
74
75.group.muted {
76 opacity: 0.27;
77}
78
79.groupheader {
80 /* margin: 10px; */
81 width: auto;
82 height: fit-content;
83 /* padding: 10px; */
84 padding-bottom: 0px;
85 display: grid;
86 grid-template-columns: min-content auto min-content;
87 grid-template-rows: min-content min-content;
88 grid-gap: 0px;
89}
90
91.groupheader-separator {
92 height: 1px;
93 margin: 8px 0px;
94 border-width: 0px;
95 color: lightgray;
96 background-color: lightgray;
97}
98
99.stream {
100 color: #686868;
101 grid-row: 1;
102 grid-column: 1/3;
103 width: fit-content;
104}
105
106select {
107 background-color: transparent;
108 border: 0px;
109 width: 150px;
110 font-size: 20px;
111 color: #e3e3e3;
112 -moz-appearance: none;
113 -webkit-appearance: none;
114 appearance: none;
115}
116
117.slidergroupdiv {
118 /* background: greenyellow; */
119 display: flex;
120 justify-content: center;
121 align-items: center;
122 grid-row: 2;
123 grid-column: 2;
124}
125
126.client {
127 /* text-align: left; */
128 /* margin: 10px; */
129 width: auto;
130 height: fit-content;
131 /* padding: 10px; */
132 display: grid;
133 grid-template-columns: min-content auto min-content;
134 grid-template-rows: min-content min-content;
135 grid-gap: 0px;
136/* align-items: center;*/
137}
138
139/* .client:hover {
140 box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
141} */
142
143.client.disconnected {
144 opacity: 0.27;
145}
146
147.name {
148 color: #686868;
149 user-select: none;
150 /* background: red; */
151 padding-top: 5px;
152 grid-row: 1;
153 grid-column: 1/3;
154 text-decoration: none;
155}
156
157.editdiv {
158 background: violet;
159 grid-row: 0/4;
160 grid-column: 3;
161}
162
163.edit-icon {
164 color: #686868;
165 text-decoration: none;
166}
167
168.delete-icon {
169 color: #ff4081;
170 text-decoration: none;
171}
172
173.edit-icons {
174 align-items: center;
175 display: flex;
176 grid-row: 1/3;
177 grid-column: 3;
178}
179
180.edit-group-icon {
181 display: flex;
182 color: transparent;
183 align-items: center;
184 grid-row: 1/3;
185 grid-column: 3;
186 text-decoration: none;
187}
188
189.mute-button {
190 color: #686868;
191 grid-row: 2;
192 grid-column: 1;
193/* top: 50%;*/
194 height: 25px;
195 width: 25px;
196 padding-left: 10px;
197 padding-right: 10px;
198 text-decoration: none;
199}
200/*
201.cover-img {
202 color: #686868;
203 grid-row: 2;
204 grid-column: 1;
205 height: 50px;
206 width: 50px;
207 padding: 5px;
208 text-decoration: none;
209}
210*/
211.sliderdiv {
212 display: flex;
213 justify-content: center;
214 align-items: center;
215 grid-row: 2;
216 grid-column: 2;
217 /* padding-left: 40px; */
218 /* display: inline-block;
219 text-align: left;
220 width: 250px; */
221}
222
223.slider {
224 writing-mode: bt-lr;
225 -webkit-appearance: none;
226 background: #dbdbdb;
227 outline: none;
228 -webkit-transition: .2s;
229 transition: opacity .2s;
230 height: 2px;
231 width: 90%;
232}
233
234.slider::-moz-range-track {
235 padding: 6px;
236 background-color: transparent;
237 border: none;
238}
239
240.slider::-webkit-slider-thumb {
241 -webkit-appearance: none;
242 appearance: none;
243 height: 12px;
244 width: 12px;
245 border-radius: 50%;
246 background: #ff4081;
247 cursor: pointer;
248}
249
250.slider::-moz-range-thumb {
251 height: 12px;
252 width: 12px;
253 border-radius: 50%;
254 background: #ff4081;
255 cursor: pointer;
256}
257
258.slider.muted {
259 opacity: 0.27;
260}
261
262 .client-settings {
263 display: none; /* Hidden by default */
264 position: fixed; /* Stay in place */
265 z-index: 1; /* Sit on top */
266 left: 0;
267 top: 0;
268 width: 100%; /* Full width */
269 height: 100%; /* Full height */
270 overflow: auto; /* Enable scroll if needed */
271 background-color: rgb(0,0,0); /* Fallback color */
272 background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
273}
274
275.client-setting-content {
276 background-color: #fefefe;
277 color: #686868;
278 margin: 15% auto; /* 15% from the top and centered */
279 padding: 20px;
280 border: 1px solid #888;
281 width: 80%; /* Could be more or less, depending on screen size */
282}
283
284.client-input {
285 color: #686868;
286 width: 100%;
287 padding: 12px 20px;
288 margin: 8px 0;
289 display: block;
290 border: 1px solid #ccc;
291 border-radius: 4px;
292 box-sizing: border-box;
293}
294
295input[type=submit] {
296 width: 100%;
297 background-color: #4CAF50;
298 color: white;
299 padding: 14px 20px;
300 margin: 8px 0;
301 border: none;
302 border-radius: 4px;
303 cursor: pointer;
304}
305
306input[type=submit]:hover {
307 background-color: #45a049;
308}
309
310div.container {
311 border-radius: 5px;
312 background-color: #f2f2f2;
313 padding: 20px;
314}
315