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