From f0736c60f11712e6aa39888162275c0f7fbc82f2 Mon Sep 17 00:00:00 2001
From: Chris <134489068+Chris-tian123@users.noreply.github.com>
Date: Sun, 12 Oct 2025 20:48:33 +0300
Subject: [PATCH] Fixed the big casting btn

---
 src/assets/css/index.css | 147 +++++++++++++++++++++++++--------------
 1 file changed, 95 insertions(+), 52 deletions(-)

diff --git a/src/assets/css/index.css b/src/assets/css/index.css
index 71142454..33b5ace7 100644
--- a/src/assets/css/index.css
+++ b/src/assets/css/index.css
@@ -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];
+}