Creepso/p-stream
1
0
Fork 0
mirror of https://github.com/p-stream/p-stream.git synced 2026-03-11 17:55:33 +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 components;
@tailwind utilities;
@ -33,7 +33,8 @@ body[data-no-select] {
user-select: none;
}
html[data-no-scroll], html[data-no-scroll] body {
html[data-no-scroll],
html[data-no-scroll] body {
overflow: hidden;
}
@ -93,110 +94,122 @@ https://toughengineer.github.io/demo/slider-styler*/
--slider-progress-background: #8652bb;
}
input[type=range].styled-slider {
input[type="range"].styled-slider {
height: var(--slider-height);
-webkit-appearance: none;
appearance: none;
border-radius: var(--slider-border-radius);
background: #1C161B;
background: #1c161b;
}
/*progress support*/
input[type=range].styled-slider.slider-progress {
input[type="range"].styled-slider.slider-progress {
--range: calc(var(--max) - var(--min));
--ratio: calc((var(--value) - var(--min)) / var(--range));
--sx: calc(0.5 * 1rem + var(--ratio) * (100% - 1rem));
}
/*webkit*/
input[type=range].styled-slider::-webkit-slider-thumb {
input[type="range"].styled-slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 1rem;
height: 1rem;
border-radius: var(--slider-border-radius);
background: #FFFFFF;
background: #ffffff;
border: none;
box-shadow: 0 0 2px #000000;
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);
border: none;
box-shadow: none;
border-radius: var(--slider-border-radius);
}
input[type=range].styled-slider::-webkit-slider-thumb:hover {
background: #DCDCDC;
input[type="range"].styled-slider::-webkit-slider-thumb:hover {
background: #dcdcdc;
}
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;
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;
}
/*mozilla*/
input[type=range].styled-slider::-moz-range-thumb {
input[type="range"].styled-slider::-moz-range-thumb {
width: 1rem;
height: 1rem;
border-radius: var(--slider-border-radius);
background: #FFFFFF;
background: #ffffff;
border: none;
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);
border: none;
border-radius: var(--slider-border-radius);
background: #1C161B;
background: #1c161b;
box-shadow: none;
}
input[type=range].styled-slider::-moz-range-thumb:hover {
background: #DCDCDC;
input[type="range"].styled-slider::-moz-range-thumb:hover {
background: #dcdcdc;
}
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;
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;
}
/*ms*/
input[type=range].styled-slider::-ms-fill-upper {
input[type="range"].styled-slider::-ms-fill-upper {
background: transparent;
border-color: transparent;
}
input[type=range].styled-slider::-ms-fill-lower {
input[type="range"].styled-slider::-ms-fill-lower {
background: transparent;
border-color: transparent;
}
input[type=range].styled-slider::-ms-thumb {
input[type="range"].styled-slider::-ms-thumb {
width: 1rem;
height: 1rem;
border-radius: var(--slider-border-radius);
background: #FFFFFF;
background: #ffffff;
border: none;
box-shadow: 0 0 2px #000000;
margin-top: 0;
box-sizing: border-box;
}
input[type=range].styled-slider::-ms-track {
input[type="range"].styled-slider::-ms-track {
height: var(--slider-height);
border-radius: var(--slider-border-radius);
background: #1C161B;
background: #1c161b;
border: none;
box-shadow: none;
box-sizing: border-box;
}
input[type=range].styled-slider::-ms-thumb:hover {
background: #DCDCDC;
input[type="range"].styled-slider::-ms-thumb:hover {
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);
border-radius: var(--slider-border-radius) 0 0 5px;
margin: -undefined 0 -undefined -undefined;
@ -226,21 +239,26 @@ input[type=range].styled-slider.slider-progress::-ms-fill-lower {
}
.tabbable:focus-visible {
outline: 2px solid theme('colors.themePreview.primary');
box-shadow: 0 0 10px theme('colors.themePreview.secondary');
outline: 2px solid theme("colors.themePreview.primary");
box-shadow: 0 0 10px theme("colors.themePreview.secondary");
}
[dir="rtl"] .transform {
/* 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 {
/* 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 {
0%, 100% {
0%,
100% {
transform: rotate(-1deg);
}
50% {
@ -256,10 +274,10 @@ input[type=range].styled-slider.slider-progress::-ms-fill-lower {
position: relative;
mask-image: linear-gradient(
to right,
rgba(0, 0, 0, 0), /* Left edge */
rgba(0, 0, 0, 1) 80px, /* visible after 80px */
rgba(0, 0, 0, 1) calc(100% - 80px), /* invisible 80px from right */
rgba(0, 0, 0, 0) 100% /* Right edge */
rgba(0, 0, 0, 0),
/* Left edge */ rgba(0, 0, 0, 1) 80px,
/* visible after 80px */ rgba(0, 0, 0, 1) calc(100% - 80px),
/* invisible 80px from right */ rgba(0, 0, 0, 0) 100% /* Right edge */
);
-webkit-mask-image: linear-gradient(
to right,
@ -274,19 +292,19 @@ input[type=range].styled-slider.slider-progress::-ms-fill-lower {
@media (max-width: 768px) {
.carousel-container {
mask-image: linear-gradient(
to right,
rgba(0, 0, 0, 0), /* Left edge */
rgba(0, 0, 0, 1) 20px, /* visible after 80px */
rgba(0, 0, 0, 1) calc(100% - 20px), /* invisible 80px from right */
rgba(0, 0, 0, 0) 100% /* Right edge */
);
-webkit-mask-image: linear-gradient(
to right,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 1) 20px,
rgba(0, 0, 0, 1) calc(100% - 20px),
rgba(0, 0, 0, 0) 100%
);
to right,
rgba(0, 0, 0, 0),
/* Left edge */ rgba(0, 0, 0, 1) 20px,
/* visible after 80px */ rgba(0, 0, 0, 1) calc(100% - 20px),
/* invisible 80px from right */ rgba(0, 0, 0, 0) 100% /* Right edge */
);
-webkit-mask-image: linear-gradient(
to right,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 1) 20px,
rgba(0, 0, 0, 1) calc(100% - 20px),
rgba(0, 0, 0, 0) 100%
);
}
}
@ -350,7 +368,6 @@ input[type=range].styled-slider.slider-progress::-ms-fill-lower {
}
}
.bookmark-button {
opacity: 0;
transition: opacity 0.3s;
@ -365,3 +382,29 @@ input[type=range].styled-slider.slider-progress::-ms-fill-lower {
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];
}