dunkirk.sh
pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
1@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap");
2@tailwind base;
3@tailwind components;
4@tailwind utilities;
5
6html,
7body {
8 font-family: "Lato", sans-serif !important;
9 @apply bg-background-main !important;
10 @apply font-main text-type-text;
11 min-height: 100vh;
12 min-height: 100dvh;
13 font-size: 1.0248em;
14 /* Use clip instead of hidden so position:sticky still works (e.g. Settings sidebar) */
15 overflow-x: clip;
16}
17
18html[data-full],
19html[data-full] body {
20 overscroll-behavior-y: none;
21}
22
23body[data-no-scroll] {
24 overflow-y: hidden;
25 height: 100vh;
26}
27
28#root {
29 padding: 0.05px;
30 min-height: 100vh;
31 min-height: 100dvh;
32 width: 100%;
33}
34
35body[data-no-select] {
36 user-select: none;
37}
38
39html[data-no-scroll],
40html[data-no-scroll] body {
41 overflow: hidden;
42}
43
44.top-content {
45 padding-top: calc(env(safe-area-inset-top) - 20px);
46}
47
48.roll {
49 animation: roll 1s;
50}
51
52.roll-infinite {
53 animation: roll 2s infinite;
54}
55
56@keyframes roll {
57 from {
58 transform: rotate(0deg);
59 }
60
61 to {
62 transform: rotate(360deg);
63 }
64}
65
66.line-clamp {
67 overflow: hidden;
68 display: -webkit-box;
69 -webkit-line-clamp: 1;
70 -webkit-box-orient: vertical;
71 overflow: hidden;
72}
73
74.google-cast-button:not(.casting) google-cast-launcher {
75 @apply brightness-[500];
76}
77
78.is-mobile-view .overflow-y-auto {
79 height: 60vh;
80}
81
82.h-screen {
83 height: 100vh;
84 height: 100dvh;
85}
86
87.min-h-screen {
88 min-height: 100vh;
89 min-height: 100dvh;
90}
91
92/*generated with Input range slider CSS style generator (version 20211225)
93https://toughengineer.github.io/demo/slider-styler*/
94:root {
95 --slider-height: 0.25rem;
96 --slider-border-radius: 1em;
97 --slider-progress-background: #8652bb;
98}
99
100input[type="range"].styled-slider {
101 height: var(--slider-height);
102 -webkit-appearance: none;
103 appearance: none;
104 border-radius: var(--slider-border-radius);
105 background: #1c161b;
106}
107
108/*progress support*/
109input[type="range"].styled-slider.slider-progress {
110 --range: calc(var(--max) - var(--min));
111 --ratio: calc((var(--value) - var(--min)) / var(--range));
112 --sx: calc(0.5 * 1rem + var(--ratio) * (100% - 1rem));
113}
114
115/*webkit*/
116input[type="range"].styled-slider::-webkit-slider-thumb {
117 -webkit-appearance: none;
118 width: 1rem;
119 height: 1rem;
120 border-radius: var(--slider-border-radius);
121 background: #ffffff;
122 border: none;
123 box-shadow: 0 0 2px #000000;
124 margin-top: calc(0.25em * 0.5 - 1rem * 0.5);
125}
126
127input[type="range"].styled-slider::-webkit-slider-runnable-track {
128 height: var(--slider-height);
129 border: none;
130 box-shadow: none;
131 border-radius: var(--slider-border-radius);
132}
133
134input[type="range"].styled-slider::-webkit-slider-thumb:hover {
135 background: #dcdcdc;
136}
137
138input[type="range"].styled-slider.slider-progress::-webkit-slider-runnable-track {
139 background:
140 linear-gradient(
141 var(--slider-progress-background),
142 var(--slider-progress-background)
143 )
144 0 / var(--sx) 100% no-repeat,
145 #1c161b;
146}
147
148/*mozilla*/
149input[type="range"].styled-slider::-moz-range-thumb {
150 width: 1rem;
151 height: 1rem;
152 border-radius: var(--slider-border-radius);
153 background: #ffffff;
154 border: none;
155 box-shadow: 0 0 2px #000000;
156}
157
158input[type="range"].styled-slider::-moz-range-track {
159 height: var(--slider-height);
160 border: none;
161 border-radius: var(--slider-border-radius);
162 background: #1c161b;
163 box-shadow: none;
164}
165
166input[type="range"].styled-slider::-moz-range-thumb:hover {
167 background: #dcdcdc;
168}
169
170input[type="range"].styled-slider.slider-progress::-moz-range-track {
171 background:
172 linear-gradient(
173 var(--slider-progress-background),
174 var(--slider-progress-background)
175 )
176 0 / var(--sx) 100% no-repeat,
177 #1c161b;
178}
179
180/*ms*/
181input[type="range"].styled-slider::-ms-fill-upper {
182 background: transparent;
183 border-color: transparent;
184}
185
186input[type="range"].styled-slider::-ms-fill-lower {
187 background: transparent;
188 border-color: transparent;
189}
190
191input[type="range"].styled-slider::-ms-thumb {
192 width: 1rem;
193 height: 1rem;
194 border-radius: var(--slider-border-radius);
195 background: #ffffff;
196 border: none;
197 box-shadow: 0 0 2px #000000;
198 margin-top: 0;
199 box-sizing: border-box;
200}
201
202input[type="range"].styled-slider::-ms-track {
203 height: var(--slider-height);
204 border-radius: var(--slider-border-radius);
205 background: #1c161b;
206 border: none;
207 box-shadow: none;
208 box-sizing: border-box;
209}
210
211input[type="range"].styled-slider::-ms-thumb:hover {
212 background: #dcdcdc;
213}
214
215input[type="range"].styled-slider.slider-progress::-ms-fill-lower {
216 height: var(--slider-height);
217 border-radius: var(--slider-border-radius) 0 0 5px;
218 margin: -undefined 0 -undefined -undefined;
219 background: var(--slider-progress-background);
220 border: none;
221 border-right-width: 0;
222}
223
224/* Modern thin rounded scrollbar */
225* {
226 scrollbar-width: thin;
227 scrollbar-color: theme("colors.video.context.border") transparent;
228}
229
230::-webkit-scrollbar {
231 width: 6px;
232 height: 6px;
233}
234
235::-webkit-scrollbar-track {
236 background: transparent;
237 border-radius: 10px;
238}
239
240::-webkit-scrollbar-thumb {
241 background-color: theme("colors.video.context.border");
242 border-radius: 10px;
243 transition: background-color 0.2s ease;
244}
245
246::-webkit-scrollbar-thumb:hover {
247 background-color: rgba(134, 82, 187, 0.8);
248}
249
250::-webkit-scrollbar-thumb:active {
251 background-color: rgba(134, 82, 187, 1);
252}
253
254::-webkit-scrollbar-corner {
255 background: transparent;
256}
257
258.grecaptcha-badge {
259 display: none !important;
260}
261
262.tabbable:focus-visible {
263 outline: 2px solid theme("colors.themePreview.primary");
264 box-shadow: 0 0 10px theme("colors.themePreview.secondary");
265}
266
267[dir="rtl"] .transform {
268 /* Invert horizontal X offset on transform (Tailwind RTL plugin does the rest) */
269 transform: translate(calc(var(--tw-translate-x) * -1), var(--tw-translate-y))
270 rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
271 scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
272}
273[dir="ltr"] .transform {
274 /* default - otherwise it overwrites*/
275 transform: translate(var(--tw-translate-x), var(--tw-translate-y))
276 rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
277 scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
278}
279
280@keyframes jiggle {
281 0%,
282 100% {
283 transform: rotate(-1deg);
284 }
285 50% {
286 transform: rotate(1deg);
287 }
288}
289
290.jiggle {
291 animation: jiggle 0.25s infinite;
292}
293
294.carousel-container {
295 position: relative;
296 mask-image: linear-gradient(
297 to right,
298 rgba(0, 0, 0, 0),
299 /* Left edge */ rgba(0, 0, 0, 1) 80px,
300 /* visible after 80px */ rgba(0, 0, 0, 1) calc(100% - 80px),
301 /* invisible 80px from right */ rgba(0, 0, 0, 0) 100% /* Right edge */
302 );
303 -webkit-mask-image: linear-gradient(
304 to right,
305 rgba(0, 0, 0, 0),
306 rgba(0, 0, 0, 1) 80px,
307 rgba(0, 0, 0, 1) calc(100% - 80px),
308 rgba(0, 0, 0, 0) 100%
309 );
310 z-index: 1;
311}
312
313@media (max-width: 768px) {
314 .carousel-container {
315 mask-image: linear-gradient(
316 to right,
317 rgba(0, 0, 0, 0),
318 /* Left edge */ rgba(0, 0, 0, 1) 20px,
319 /* visible after 80px */ rgba(0, 0, 0, 1) calc(100% - 20px),
320 /* invisible 80px from right */ rgba(0, 0, 0, 0) 100% /* Right edge */
321 );
322 -webkit-mask-image: linear-gradient(
323 to right,
324 rgba(0, 0, 0, 0),
325 rgba(0, 0, 0, 1) 20px,
326 rgba(0, 0, 0, 1) calc(100% - 20px),
327 rgba(0, 0, 0, 0) 100%
328 );
329 }
330}
331
332.vertical-carousel-container {
333 --mask-fade-distance: 80px;
334 position: relative;
335 -webkit-mask-image: linear-gradient(
336 to bottom,
337 transparent,
338 black var(--mask-fade-distance),
339 black calc(100% - var(--mask-fade-distance)),
340 transparent
341 );
342 mask-image: var(-webkit-mask-image);
343 z-index: 1;
344}
345
346.vertical-carousel-container.hide-top-gradient {
347 -webkit-mask-image: linear-gradient(
348 to bottom,
349 black,
350 black calc(100% - var(--mask-fade-distance)),
351 transparent
352 );
353 mask-image: var(-webkit-mask-image);
354}
355
356.vertical-carousel-container.hide-bottom-gradient {
357 -webkit-mask-image: linear-gradient(
358 to bottom,
359 transparent,
360 black var(--mask-fade-distance),
361 black
362 );
363 mask-image: var(-webkit-mask-image);
364}
365
366.vertical-carousel-container.hide-top-gradient.hide-bottom-gradient {
367 -webkit-mask-image: none;
368 mask-image: none;
369}
370
371@media (max-width: 768px) {
372 .vertical-carousel-container {
373 --mask-fade-distance: 20px;
374 }
375}
376
377/* DetailsModal staggered scaling anime */
378@keyframes scaleIn {
379 0% {
380 transform: scale(0);
381 opacity: 0;
382 }
383 50% {
384 transform: scale(1.1);
385 }
386 100% {
387 transform: scale(1);
388 opacity: 1;
389 }
390}
391
392.bookmark-button {
393 opacity: 0;
394 transition: opacity 0.3s;
395}
396
397.group:hover .bookmark-button {
398 opacity: 1;
399}
400
401@media (max-width: 1024px) {
402 .group:hover .bookmark-button {
403 opacity: 0;
404 }
405}
406
407.cast-button-container {
408 position: relative;
409 width: 40px;
410 height: 40px;
411 display: flex;
412 align-items: center;
413 justify-content: center;
414 flex-shrink: 0;
415}
416
417.cast-button-container google-cast-launcher {
418 width: 24px !important;
419 height: 24px !important;
420 min-width: 24px !important;
421 min-height: 24px !important;
422 display: block;
423}
424
425.google-cast-button.hidden {
426 display: none;
427}
428
429.google-cast-button:not(.casting) google-cast-launcher {
430 @apply brightness-[500];
431}
432
433/* Image fade-in on load */
434img:not(.no-fade):not([src=""]) {
435 opacity: 0;
436 transition: opacity 0.8s ease-in-out;
437}
438
439/* Fade in when image has loaded class */
440img.loaded:not(.no-fade) {
441 opacity: 1;
442}
443
444/* For images that are already cached/loaded, show them immediately */
445img[complete]:not(.no-fade):not([src=""]) {
446 opacity: 1;
447}