Creepso/p-stream
1
0
Fork 0
mirror of https://github.com/p-stream/p-stream.git synced 2026-04-21 10:52:17 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fixed the big casting btn

Browse source
This commit is contained in:
Chris 2025-10-12 20:48:33 +03:00 committed by GitHub
parent 47653c2906
commit f0736c60f1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 95 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

147
src/assets/css/index.css
View file

@ -1,4 +1,4 @@
@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'); @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");
@tailwind base; @tailwind base;
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
@ -33,7 +33,8 @@ body[data-no-select] {
user-select: none; user-select: none;
} }
html[data-no-scroll], html[data-no-scroll] body { html[data-no-scroll],
html[data-no-scroll] body {
overflow: hidden; overflow: hidden;
} }
@ -93,110 +94,122 @@ https://toughengineer.github.io/demo/slider-styler*/
--slider-progress-background: #8652bb; --slider-progress-background: #8652bb;
} }
input[type=range].styled-slider { input[type="range"].styled-slider {
height: var(--slider-height); height: var(--slider-height);
-webkit-appearance: none; -webkit-appearance: none;
appearance: none; appearance: none;
border-radius: var(--slider-border-radius); border-radius: var(--slider-border-radius);
background: #1C161B; background: #1c161b;
} }
/*progress support*/ /*progress support*/
input[type=range].styled-slider.slider-progress { input[type="range"].styled-slider.slider-progress {
--range: calc(var(--max) - var(--min)); --range: calc(var(--max) - var(--min));
--ratio: calc((var(--value) - var(--min)) / var(--range)); --ratio: calc((var(--value) - var(--min)) / var(--range));
--sx: calc(0.5 * 1rem + var(--ratio) * (100% - 1rem)); --sx: calc(0.5 * 1rem + var(--ratio) * (100% - 1rem));
} }
/*webkit*/ /*webkit*/
input[type=range].styled-slider::-webkit-slider-thumb { input[type="range"].styled-slider::-webkit-slider-thumb {
-webkit-appearance: none; -webkit-appearance: none;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
border-radius: var(--slider-border-radius); border-radius: var(--slider-border-radius);
background: #FFFFFF; background: #ffffff;
border: none; border: none;
box-shadow: 0 0 2px #000000; box-shadow: 0 0 2px #000000;
margin-top: calc(0.25em * 0.5 - 1rem * 0.5); margin-top: calc(0.25em * 0.5 - 1rem * 0.5);
} }
input[type=range].styled-slider::-webkit-slider-runnable-track { input[type="range"].styled-slider::-webkit-slider-runnable-track {
height: var(--slider-height); height: var(--slider-height);
border: none; border: none;
box-shadow: none; box-shadow: none;
border-radius: var(--slider-border-radius); border-radius: var(--slider-border-radius);
} }
input[type=range].styled-slider::-webkit-slider-thumb:hover { input[type="range"].styled-slider::-webkit-slider-thumb:hover {
background: #DCDCDC; background: #dcdcdc;
} }
input[type=range].styled-slider.slider-progress::-webkit-slider-runnable-track { input[type="range"].styled-slider.slider-progress::-webkit-slider-runnable-track {
background: linear-gradient(var(--slider-progress-background), var(--slider-progress-background)) 0/var(--sx) 100% no-repeat, #1C161B; background:
linear-gradient(
var(--slider-progress-background),
var(--slider-progress-background)
)
0 / var(--sx) 100% no-repeat,
#1c161b;
} }
/*mozilla*/ /*mozilla*/
input[type=range].styled-slider::-moz-range-thumb { input[type="range"].styled-slider::-moz-range-thumb {
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
border-radius: var(--slider-border-radius); border-radius: var(--slider-border-radius);
background: #FFFFFF; background: #ffffff;
border: none; border: none;
box-shadow: 0 0 2px #000000; box-shadow: 0 0 2px #000000;
} }
input[type=range].styled-slider::-moz-range-track { input[type="range"].styled-slider::-moz-range-track {
height: var(--slider-height); height: var(--slider-height);
border: none; border: none;
border-radius: var(--slider-border-radius); border-radius: var(--slider-border-radius);
background: #1C161B; background: #1c161b;
box-shadow: none; box-shadow: none;
} }
input[type=range].styled-slider::-moz-range-thumb:hover { input[type="range"].styled-slider::-moz-range-thumb:hover {
background: #DCDCDC; background: #dcdcdc;
} }
input[type=range].styled-slider.slider-progress::-moz-range-track { input[type="range"].styled-slider.slider-progress::-moz-range-track {
background: linear-gradient(var(--slider-progress-background), var(--slider-progress-background)) 0/var(--sx) 100% no-repeat, #1C161B; background:
linear-gradient(
var(--slider-progress-background),
var(--slider-progress-background)
)
0 / var(--sx) 100% no-repeat,
#1c161b;
} }
/*ms*/ /*ms*/
input[type=range].styled-slider::-ms-fill-upper { input[type="range"].styled-slider::-ms-fill-upper {
background: transparent; background: transparent;
border-color: transparent; border-color: transparent;
} }
input[type=range].styled-slider::-ms-fill-lower { input[type="range"].styled-slider::-ms-fill-lower {
background: transparent; background: transparent;
border-color: transparent; border-color: transparent;
} }
input[type=range].styled-slider::-ms-thumb { input[type="range"].styled-slider::-ms-thumb {
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
border-radius: var(--slider-border-radius); border-radius: var(--slider-border-radius);
background: #FFFFFF; background: #ffffff;
border: none; border: none;
box-shadow: 0 0 2px #000000; box-shadow: 0 0 2px #000000;
margin-top: 0; margin-top: 0;
box-sizing: border-box; box-sizing: border-box;
} }
input[type=range].styled-slider::-ms-track { input[type="range"].styled-slider::-ms-track {
height: var(--slider-height); height: var(--slider-height);
border-radius: var(--slider-border-radius); border-radius: var(--slider-border-radius);
background: #1C161B; background: #1c161b;
border: none; border: none;
box-shadow: none; box-shadow: none;
box-sizing: border-box; box-sizing: border-box;
} }
input[type=range].styled-slider::-ms-thumb:hover { input[type="range"].styled-slider::-ms-thumb:hover {
background: #DCDCDC; background: #dcdcdc;
} }
input[type=range].styled-slider.slider-progress::-ms-fill-lower { input[type="range"].styled-slider.slider-progress::-ms-fill-lower {
height: var(--slider-height); height: var(--slider-height);
border-radius: var(--slider-border-radius) 0 0 5px; border-radius: var(--slider-border-radius) 0 0 5px;
margin: -undefined 0 -undefined -undefined; margin: -undefined 0 -undefined -undefined;
@ -226,21 +239,26 @@ input[type=range].styled-slider.slider-progress::-ms-fill-lower {
} }
.tabbable:focus-visible { .tabbable:focus-visible {
outline: 2px solid theme('colors.themePreview.primary'); outline: 2px solid theme("colors.themePreview.primary");
box-shadow: 0 0 10px theme('colors.themePreview.secondary'); box-shadow: 0 0 10px theme("colors.themePreview.secondary");
} }
[dir="rtl"] .transform { [dir="rtl"] .transform {
/* Invert horizontal X offset on transform (Tailwind RTL plugin does the rest) */ /* Invert horizontal X offset on transform (Tailwind RTL plugin does the rest) */
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; 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;
} }
[dir="ltr"] .transform { [dir="ltr"] .transform {
/* default - otherwise it overwrites*/ /* default - otherwise it overwrites*/
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; 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;
} }
@keyframes jiggle { @keyframes jiggle {
0%, 100% { 0%,
100% {
transform: rotate(-1deg); transform: rotate(-1deg);
} }
50% { 50% {
@ -256,10 +274,10 @@ input[type=range].styled-slider.slider-progress::-ms-fill-lower {
position: relative; position: relative;
mask-image: linear-gradient( mask-image: linear-gradient(
to right, to right,
rgba(0, 0, 0, 0), /* Left edge */ rgba(0, 0, 0, 0),
rgba(0, 0, 0, 1) 80px, /* visible after 80px */ /* Left edge */ rgba(0, 0, 0, 1) 80px,
rgba(0, 0, 0, 1) calc(100% - 80px), /* invisible 80px from right */ /* visible after 80px */ rgba(0, 0, 0, 1) calc(100% - 80px),
rgba(0, 0, 0, 0) 100% /* Right edge */ /* invisible 80px from right */ rgba(0, 0, 0, 0) 100% /* Right edge */
); );
-webkit-mask-image: linear-gradient( -webkit-mask-image: linear-gradient(
to right, to right,
@ -274,19 +292,19 @@ input[type=range].styled-slider.slider-progress::-ms-fill-lower {
@media (max-width: 768px) { @media (max-width: 768px) {
.carousel-container { .carousel-container {
mask-image: linear-gradient( mask-image: linear-gradient(
to right, to right,
rgba(0, 0, 0, 0), /* Left edge */ rgba(0, 0, 0, 0),
rgba(0, 0, 0, 1) 20px, /* visible after 80px */ /* Left edge */ rgba(0, 0, 0, 1) 20px,
rgba(0, 0, 0, 1) calc(100% - 20px), /* invisible 80px from right */ /* visible after 80px */ rgba(0, 0, 0, 1) calc(100% - 20px),
rgba(0, 0, 0, 0) 100% /* Right edge */ /* invisible 80px from right */ rgba(0, 0, 0, 0) 100% /* Right edge */
); );
-webkit-mask-image: linear-gradient( -webkit-mask-image: linear-gradient(
to right, to right,
rgba(0, 0, 0, 0), rgba(0, 0, 0, 0),
rgba(0, 0, 0, 1) 20px, rgba(0, 0, 0, 1) 20px,
rgba(0, 0, 0, 1) calc(100% - 20px), rgba(0, 0, 0, 1) calc(100% - 20px),
rgba(0, 0, 0, 0) 100% rgba(0, 0, 0, 0) 100%
); );
} }
} }
@ -350,7 +368,6 @@ input[type=range].styled-slider.slider-progress::-ms-fill-lower {
} }
} }
.bookmark-button { .bookmark-button {
opacity: 0; opacity: 0;
transition: opacity 0.3s; transition: opacity 0.3s;
@ -365,3 +382,29 @@ input[type=range].styled-slider.slider-progress::-ms-fill-lower {
opacity: 0; opacity: 0;
} }
} }
.cast-button-container {
position: relative;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.cast-button-container google-cast-launcher {
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
min-height: 24px !important;
display: block;
}
.google-cast-button.hidden {
display: none;
}
.google-cast-button:not(.casting) google-cast-launcher {
@apply brightness-[500];
}