A music player that connects to your cloud/distributed storage.
1@charset "UTF-8";
2
3
4/* Imports
5 ------- */
6
7@import "tailwindcss/base";
8@import "tailwindcss/components";
9@import "tailwindcss/utilities";
10
11@import "Fonts.css";
12@import "Logo.css";
13@import "Notifications.css";
14
15
16
17/* 🛠
18 ----- */
19
20@layer utilities {
21 .scrolling-touch {
22 -webkit-overflow-scrolling: touch;
23 }
24
25 .scrolling-auto {
26 -webkit-overflow-scrolling: auto;
27 }
28}
29
30
31
32/* Base
33 ---- */
34
35:root {
36 color-scheme: light dark;
37}
38
39html,
40body {
41 overflow: hidden;
42 overscroll-behavior: none;
43}
44
45html,
46body,
47.screen-height {
48 /* TODO: Remove support for older browsers */
49 height: calc(var(--vh, 1vh) * 100);
50 height: 100dvh;
51}
52
53body {
54 @apply text-base01;
55
56 background-color: rgb(29, 29, 29);
57 background-image: url(images/ocean.jpg);
58 font-feature-settings: kern, liga;
59 font-weight: 400;
60 min-width: 300px;
61 text-rendering: optimizeLegibility;
62}
63
64*:active {
65 outline: none;
66}
67
68.align-sub {
69 vertical-align: sub
70}
71
72.all-small-caps {
73 font-variant-caps: all-small-caps
74}
75
76.flex-basis-0 {
77 flex-basis: 0
78}
79
80.smooth-scrolling {
81 scroll-behavior: smooth
82}
83
84@screen dark {
85 body {
86 @apply text-gray-600;
87 }
88}
89
90
91
92/* Buttons
93 ------- */
94
95button {
96 color: inherit;
97 font-family: inherit;
98}
99
100
101
102/* Dragging
103 -------- */
104
105.dragging-something {
106 @apply select-none;
107 cursor: grabbing;
108}
109
110.dragging-something * {
111 cursor: grabbing !important
112}
113
114
115
116/* Forms
117 ----- */
118
119input::placeholder,
120textarea::placeholder {
121 color: rgba(0, 0, 0, 0.275);
122 opacity: 1;
123}
124
125input:invalid,
126textarea:invalid {
127 box-shadow: none;
128 outline: none;
129}
130
131input[changed]:invalid,
132textarea[changed]:invalid {
133 @apply border-base08;
134}
135
136select:-moz-focusring {
137 color: transparent;
138 text-shadow: 0 0 0 rgb(63, 63, 63);
139}
140
141@screen dark {
142
143 input::placeholder,
144 textarea::placeholder {
145 @apply text-base03;
146 opacity: 1;
147 }
148
149 select:-moz-focusring {
150 color: transparent;
151 text-shadow: 0 0 0 rgb(232, 232, 232);
152 }
153}
154
155
156
157/* Loading
158 ------- */
159
160.loading-animation {
161 animation: loading-rotator 2s linear infinite;
162}
163
164.loading-animation__circle {
165 animation: loading-dash 1.5s ease-in-out infinite,
166 loading-colors 6s ease-in-out infinite;
167 stroke-dasharray: 1, 86.25;
168 stroke-dashoffset: 0;
169 transform-origin: center;
170}
171
172@keyframes loading-rotator {
173 0% {
174 transform: rotate(0deg);
175 }
176
177 100% {
178 transform: rotate(360deg);
179 }
180}
181
182@keyframes loading-colors {
183 0% {
184 stroke: rgb(248, 164, 167);
185 }
186
187 25% {
188 stroke: rgb(254, 196, 24);
189 }
190
191 50% {
192 stroke: rgb(72, 182, 133);
193 }
194
195 75% {
196 stroke: rgb(6, 182, 239);
197 }
198
199 100% {
200 stroke: rgb(248, 164, 167);
201 }
202}
203
204@keyframes loading-dash {
205 0% {
206 stroke-dasharray: 1, 86.25;
207 stroke-dashoffset: 0;
208 }
209
210 50% {
211 stroke-dasharray: 64.6875, 86.25;
212 stroke-dashoffset: -21.5625;
213 }
214
215 100% {
216 stroke-dasharray: 64.6875, 86.25;
217 stroke-dashoffset: -86.25;
218 }
219}
220
221
222
223/* Overrides
224 --------- */
225
226.no-tracks-view>div {
227 /* CSS fix for a scrolling issue:
228 Element would appear scrolled even though it's not (virtual-dom issue probably)
229 */
230 overflow: visible !important;
231}
232
233
234
235/* Range slider
236 ------------ */
237
238.range-slider {
239 @apply appearance-none bg-gray-400 rounded w-24;
240 height: 4px;
241}
242
243.range-slider::-webkit-slider-thumb {
244 @apply appearance-none bg-base02;
245 border-radius: 100%;
246 height: 10px;
247 width: 10px
248}
249
250.range-slider::-moz-range-thumb {
251 @apply appearance-none bg-darkest-hour;
252 border-radius: 100%;
253 height: 10px;
254 width: 10px
255}
256
257.range-slider::-ms-thumb {
258 @apply appearance-none bg-darkest-hour;
259 border-radius: 100%;
260 height: 10px;
261 width: 10px
262}
263
264@screen dark {
265 .range-slider {
266 @apply bg-base01;
267 }
268
269 .range-slider::-webkit-slider-thumb {
270 @apply bg-base07;
271 }
272
273 .range-slider::-moz-range-thumb {
274 @apply bg-base07;
275 }
276
277 .range-slider::-ms-thumb {
278 @apply bg-base07;
279 }
280}