pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
Fixed the big casting btn
+95
-52
+95
-52
src/assets/css/index.css
+95
-52
src/assets/css/index.css
···
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');
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
2
@tailwind base;
3
3
@tailwind components;
4
4
@tailwind utilities;
···
33
33
user-select: none;
34
34
}
35
35
36
-
html[data-no-scroll], html[data-no-scroll] body {
36
+
html[data-no-scroll],
37
+
html[data-no-scroll] body {
37
38
overflow: hidden;
38
39
}
39
40
···
93
94
--slider-progress-background: #8652bb;
94
95
}
95
96
96
-
input[type=range].styled-slider {
97
+
input[type="range"].styled-slider {
97
98
height: var(--slider-height);
98
99
-webkit-appearance: none;
99
100
appearance: none;
100
101
border-radius: var(--slider-border-radius);
101
-
background: #1C161B;
102
+
background: #1c161b;
102
103
}
103
104
104
105
/*progress support*/
105
-
input[type=range].styled-slider.slider-progress {
106
+
input[type="range"].styled-slider.slider-progress {
106
107
--range: calc(var(--max) - var(--min));
107
108
--ratio: calc((var(--value) - var(--min)) / var(--range));
108
109
--sx: calc(0.5 * 1rem + var(--ratio) * (100% - 1rem));
109
110
}
110
111
111
112
/*webkit*/
112
-
input[type=range].styled-slider::-webkit-slider-thumb {
113
+
input[type="range"].styled-slider::-webkit-slider-thumb {
113
114
-webkit-appearance: none;
114
115
width: 1rem;
115
116
height: 1rem;
116
117
border-radius: var(--slider-border-radius);
117
-
background: #FFFFFF;
118
+
background: #ffffff;
118
119
border: none;
119
120
box-shadow: 0 0 2px #000000;
120
121
margin-top: calc(0.25em * 0.5 - 1rem * 0.5);
121
122
}
122
123
123
-
input[type=range].styled-slider::-webkit-slider-runnable-track {
124
+
input[type="range"].styled-slider::-webkit-slider-runnable-track {
124
125
height: var(--slider-height);
125
126
border: none;
126
127
box-shadow: none;
127
128
border-radius: var(--slider-border-radius);
128
129
}
129
130
130
-
input[type=range].styled-slider::-webkit-slider-thumb:hover {
131
-
background: #DCDCDC;
131
+
input[type="range"].styled-slider::-webkit-slider-thumb:hover {
132
+
background: #dcdcdc;
132
133
}
133
134
134
-
input[type=range].styled-slider.slider-progress::-webkit-slider-runnable-track {
135
-
background: linear-gradient(var(--slider-progress-background), var(--slider-progress-background)) 0/var(--sx) 100% no-repeat, #1C161B;
135
+
input[type="range"].styled-slider.slider-progress::-webkit-slider-runnable-track {
136
+
background:
137
+
linear-gradient(
138
+
var(--slider-progress-background),
139
+
var(--slider-progress-background)
140
+
)
141
+
0 / var(--sx) 100% no-repeat,
142
+
#1c161b;
136
143
}
137
144
138
145
/*mozilla*/
139
-
input[type=range].styled-slider::-moz-range-thumb {
146
+
input[type="range"].styled-slider::-moz-range-thumb {
140
147
width: 1rem;
141
148
height: 1rem;
142
149
border-radius: var(--slider-border-radius);
143
-
background: #FFFFFF;
150
+
background: #ffffff;
144
151
border: none;
145
152
box-shadow: 0 0 2px #000000;
146
153
}
147
154
148
-
input[type=range].styled-slider::-moz-range-track {
155
+
input[type="range"].styled-slider::-moz-range-track {
149
156
height: var(--slider-height);
150
157
border: none;
151
158
border-radius: var(--slider-border-radius);
152
-
background: #1C161B;
159
+
background: #1c161b;
153
160
box-shadow: none;
154
161
}
155
162
156
-
input[type=range].styled-slider::-moz-range-thumb:hover {
157
-
background: #DCDCDC;
163
+
input[type="range"].styled-slider::-moz-range-thumb:hover {
164
+
background: #dcdcdc;
158
165
}
159
166
160
-
input[type=range].styled-slider.slider-progress::-moz-range-track {
161
-
background: linear-gradient(var(--slider-progress-background), var(--slider-progress-background)) 0/var(--sx) 100% no-repeat, #1C161B;
167
+
input[type="range"].styled-slider.slider-progress::-moz-range-track {
168
+
background:
169
+
linear-gradient(
170
+
var(--slider-progress-background),
171
+
var(--slider-progress-background)
172
+
)
173
+
0 / var(--sx) 100% no-repeat,
174
+
#1c161b;
162
175
}
163
176
164
177
/*ms*/
165
-
input[type=range].styled-slider::-ms-fill-upper {
178
+
input[type="range"].styled-slider::-ms-fill-upper {
166
179
background: transparent;
167
180
border-color: transparent;
168
181
}
169
182
170
-
input[type=range].styled-slider::-ms-fill-lower {
183
+
input[type="range"].styled-slider::-ms-fill-lower {
171
184
background: transparent;
172
185
border-color: transparent;
173
186
}
174
187
175
-
input[type=range].styled-slider::-ms-thumb {
188
+
input[type="range"].styled-slider::-ms-thumb {
176
189
width: 1rem;
177
190
height: 1rem;
178
191
border-radius: var(--slider-border-radius);
179
-
background: #FFFFFF;
192
+
background: #ffffff;
180
193
border: none;
181
194
box-shadow: 0 0 2px #000000;
182
195
margin-top: 0;
183
196
box-sizing: border-box;
184
197
}
185
198
186
-
input[type=range].styled-slider::-ms-track {
199
+
input[type="range"].styled-slider::-ms-track {
187
200
height: var(--slider-height);
188
201
border-radius: var(--slider-border-radius);
189
-
background: #1C161B;
202
+
background: #1c161b;
190
203
border: none;
191
204
box-shadow: none;
192
205
box-sizing: border-box;
193
206
}
194
207
195
-
input[type=range].styled-slider::-ms-thumb:hover {
196
-
background: #DCDCDC;
208
+
input[type="range"].styled-slider::-ms-thumb:hover {
209
+
background: #dcdcdc;
197
210
}
198
211
199
-
input[type=range].styled-slider.slider-progress::-ms-fill-lower {
212
+
input[type="range"].styled-slider.slider-progress::-ms-fill-lower {
200
213
height: var(--slider-height);
201
214
border-radius: var(--slider-border-radius) 0 0 5px;
202
215
margin: -undefined 0 -undefined -undefined;
···
226
239
}
227
240
228
241
.tabbable:focus-visible {
229
-
outline: 2px solid theme('colors.themePreview.primary');
230
-
box-shadow: 0 0 10px theme('colors.themePreview.secondary');
242
+
outline: 2px solid theme("colors.themePreview.primary");
243
+
box-shadow: 0 0 10px theme("colors.themePreview.secondary");
231
244
}
232
245
233
246
[dir="rtl"] .transform {
234
247
/* Invert horizontal X offset on transform (Tailwind RTL plugin does the rest) */
235
-
transform: translate(calc(var(--tw-translate-x) * -1), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
248
+
transform: translate(calc(var(--tw-translate-x) * -1), var(--tw-translate-y))
249
+
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
250
+
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
236
251
}
237
252
[dir="ltr"] .transform {
238
253
/* default - otherwise it overwrites*/
239
-
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
254
+
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
255
+
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
256
+
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
240
257
}
241
258
242
259
@keyframes jiggle {
243
-
0%, 100% {
260
+
0%,
261
+
100% {
244
262
transform: rotate(-1deg);
245
263
}
246
264
50% {
···
256
274
position: relative;
257
275
mask-image: linear-gradient(
258
276
to right,
259
-
rgba(0, 0, 0, 0), /* Left edge */
260
-
rgba(0, 0, 0, 1) 80px, /* visible after 80px */
261
-
rgba(0, 0, 0, 1) calc(100% - 80px), /* invisible 80px from right */
262
-
rgba(0, 0, 0, 0) 100% /* Right edge */
277
+
rgba(0, 0, 0, 0),
278
+
/* Left edge */ rgba(0, 0, 0, 1) 80px,
279
+
/* visible after 80px */ rgba(0, 0, 0, 1) calc(100% - 80px),
280
+
/* invisible 80px from right */ rgba(0, 0, 0, 0) 100% /* Right edge */
263
281
);
264
282
-webkit-mask-image: linear-gradient(
265
283
to right,
···
274
292
@media (max-width: 768px) {
275
293
.carousel-container {
276
294
mask-image: linear-gradient(
277
-
to right,
278
-
rgba(0, 0, 0, 0), /* Left edge */
279
-
rgba(0, 0, 0, 1) 20px, /* visible after 80px */
280
-
rgba(0, 0, 0, 1) calc(100% - 20px), /* invisible 80px from right */
281
-
rgba(0, 0, 0, 0) 100% /* Right edge */
282
-
);
283
-
-webkit-mask-image: linear-gradient(
284
-
to right,
285
-
rgba(0, 0, 0, 0),
286
-
rgba(0, 0, 0, 1) 20px,
287
-
rgba(0, 0, 0, 1) calc(100% - 20px),
288
-
rgba(0, 0, 0, 0) 100%
289
-
);
295
+
to right,
296
+
rgba(0, 0, 0, 0),
297
+
/* Left edge */ rgba(0, 0, 0, 1) 20px,
298
+
/* visible after 80px */ rgba(0, 0, 0, 1) calc(100% - 20px),
299
+
/* invisible 80px from right */ rgba(0, 0, 0, 0) 100% /* Right edge */
300
+
);
301
+
-webkit-mask-image: linear-gradient(
302
+
to right,
303
+
rgba(0, 0, 0, 0),
304
+
rgba(0, 0, 0, 1) 20px,
305
+
rgba(0, 0, 0, 1) calc(100% - 20px),
306
+
rgba(0, 0, 0, 0) 100%
307
+
);
290
308
}
291
309
}
292
310
···
350
368
}
351
369
}
352
370
353
-
354
371
.bookmark-button {
355
372
opacity: 0;
356
373
transition: opacity 0.3s;
···
365
382
opacity: 0;
366
383
}
367
384
}
385
+
386
+
.cast-button-container {
387
+
position: relative;
388
+
width: 40px;
389
+
height: 40px;
390
+
display: flex;
391
+
align-items: center;
392
+
justify-content: center;
393
+
flex-shrink: 0;
394
+
}
395
+
396
+
.cast-button-container google-cast-launcher {
397
+
width: 24px !important;
398
+
height: 24px !important;
399
+
min-width: 24px !important;
400
+
min-height: 24px !important;
401
+
display: block;
402
+
}
403
+
404
+
.google-cast-button.hidden {
405
+
display: none;
406
+
}
407
+
408
+
.google-cast-button:not(.casting) google-cast-launcher {
409
+
@apply brightness-[500];
410
+
}