last touches to design

src/components/Icon.tsx

@@ -39,6 +39,7 @@ export enum Icons {
   GEAR = "gear",
   WATCH_PARTY = "watch_party",
   PICTURE_IN_PICTURE = "pictureInPicture",
+  CHECKMARK = "checkmark",
 }
 
 export interface IconProps {
@@ -85,6 +86,7 @@ const iconList: Record<Icons, string> = {
   gear: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M481.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-30.9 28.1c-7.7 7.1-11.4 17.5-10.9 27.9c.1 2.9 .2 5.8 .2 8.8s-.1 5.9-.2 8.8c-.5 10.5 3.1 20.9 10.9 27.9l30.9 28.1c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-39.7-12.6c-10-3.2-20.8-1.1-29.7 4.6c-4.9 3.1-9.9 6.1-15.1 8.7c-9.3 4.8-16.5 13.2-18.8 23.4l-8.9 40.7c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-8.9-40.7c-2.2-10.2-9.5-18.6-18.8-23.4c-5.2-2.7-10.2-5.6-15.1-8.7c-8.8-5.7-19.7-7.8-29.7-4.6L69.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l30.9-28.1c7.7-7.1 11.4-17.5 10.9-27.9c-.1-2.9-.2-5.8-.2-8.8s.1-5.9 .2-8.8c.5-10.5-3.1-20.9-10.9-27.9L8.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l39.7 12.6c10 3.2 20.8 1.1 29.7-4.6c4.9-3.1 9.9-6.1 15.1-8.7c9.3-4.8 16.5-13.2 18.8-23.4l8.9-40.7c2-9.1 9-16.3 18.2-17.8C213.3 1.2 227.5 0 242 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l8.9 40.7c2.2 10.2 9.4 18.6 18.8 23.4c5.2 2.7 10.2 5.6 15.1 8.7c8.8 5.7 19.7 7.7 29.7 4.6l39.7-12.6c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM242 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"/></svg>`,
   watch_party: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M319.4 372c48.5-31.3 80.6-85.9 80.6-148c0-97.2-78.8-176-176-176S48 126.8 48 224c0 62.1 32.1 116.6 80.6 148c1.2 17.3 4 38 7.2 57.1l.2 1C56 395.8 0 316.5 0 224C0 100.3 100.3 0 224 0S448 100.3 448 224c0 92.5-56 171.9-136 206.1l.2-1.1c3.1-19.2 6-39.8 7.2-57zm-2.3-38.1c-1.6-5.7-3.9-11.1-7-16.2c-5.8-9.7-13.5-17-21.9-22.4c19.5-17.6 31.8-43 31.8-71.3c0-53-43-96-96-96s-96 43-96 96c0 28.3 12.3 53.8 31.8 71.3c-8.4 5.4-16.1 12.7-21.9 22.4c-3.1 5.1-5.4 10.5-7 16.2C99.8 307.5 80 268 80 224c0-79.5 64.5-144 144-144s144 64.5 144 144c0 44-19.8 83.5-50.9 109.9zM224 312c32.9 0 64 8.6 64 43.8c0 33-12.9 104.1-20.6 132.9c-5.1 19-24.5 23.4-43.4 23.4s-38.2-4.4-43.4-23.4c-7.8-28.5-20.6-99.7-20.6-132.8c0-35.1 31.1-43.8 64-43.8zm0-144a56 56 0 1 1 0 112 56 56 0 1 1 0-112z"/></svg>`,
   pictureInPicture: `<svg xmlns="http://www.w3.org/2000/svg" height="1em" width="1em" fill="currentColor" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 1.98 2 1.98h18c1.1 0 2-.88 2-1.98V5c0-1.1-.9-2-2-2zm0 16.01H3V4.98h18v14.03z"/></svg>`,
+  checkmark: `<svg xmlns="http://www.w3.org/2000/svg" height="0.625em" width="0.625em" viewBox="0 0 24 24"><path d="M9 22l-10-10.598 2.798-2.859 7.149 7.473 13.144-14.016 2.909 2.806z" /></svg>`,
 };
 
 function ChromeCastButton() {

src/setup/index.css

@@ -55,34 +55,122 @@ body[data-no-select] {
   @apply brightness-[500];
 }
 
-input[type=range] {
-  @apply bg-[#1C161B];
-  height: 0.25rem;
+/*generated with Input range slider CSS style generator (version 20211225)
+https://toughengineer.github.io/demo/slider-styler*/
+:root {
+  --slider-height: 0.25rem;
+  --slider-border-radius: 1em;
+  --slider-progress-background: #8652bb;
+}
+input[type=range].styled-slider {
+  height: var(--slider-height);
   -webkit-appearance: none;
   appearance: none;
-  width: 100%;
-  outline: none;
-  line-height: normal;
-  border-radius: 5px;
+  border-radius: var(--slider-border-radius);
+  background: #1C161B;
+}
+
+/*progress support*/
+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));
 }
 
-input[type=range]::-webkit-slider-thumb {
+/*webkit*/
+input[type=range].styled-slider::-webkit-slider-thumb {
   -webkit-appearance: none;
-  appearance: none;
+  width: 1rem;
   height: 1rem;
-  background: white;
-  aspect-ratio: 1;
-  cursor: pointer;
-  border-radius: 50%;
-  margin-bottom: 1rem;
+  border-radius: var(--slider-border-radius);
+  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 {
+  height: var(--slider-height);
+  border: none;
+  box-shadow: none;
+  border-radius: var(--slider-border-radius);
+  margin-bottom: 1.1em;
+}
+
+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;
+}
+
+/*mozilla*/
+input[type=range].styled-slider::-moz-range-thumb {
+  width: 1rem;
+  height: 1rem;
+  border-radius: var(--slider-border-radius);
+  background: #FFFFFF;
+  border: none;
+  box-shadow: 0 0 2px #000000;
+}
+
+input[type=range].styled-slider::-moz-range-track {
+  height: var(--slider-height);
+  border: none;
+  border-radius: var(--slider-border-radius);
+  background: #1C161B;
+  box-shadow: none;
+}
+
+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;
+}
+
+/*ms*/
+input[type=range].styled-slider::-ms-fill-upper {
+  background: transparent;
+  border-color: transparent;
 }
 
-input[type=range]::-moz-range-thumb {
-  aspect-ratio: 1;
+input[type=range].styled-slider::-ms-fill-lower {
+  background: transparent;
+  border-color: transparent;
+}
+
+input[type=range].styled-slider::-ms-thumb {
+  width: 1rem;
   height: 1rem;
-  background: white;
-  aspect-ratio: 1;
-  cursor: pointer;
-  border-radius: 50%;
-  margin-bottom: 1rem;
+  border-radius: var(--slider-border-radius);
+  background: #FFFFFF;
+  border: none;
+  box-shadow: 0 0 2px #000000;
+  margin-top: 0;
+  box-sizing: border-box;
+}
+
+input[type=range].styled-slider::-ms-track {
+  height: var(--slider-height);
+  border-radius: var(--slider-border-radius);
+  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.slider-progress::-ms-fill-lower {
+  height: var(--slider-height);
+  border-radius: var(--slider-border-radius) 0 0 5px;
+  margin: -undefined 0 -undefined -undefined;
+  background: var(--slider-progress-background);
+  border: none;
+  border-right-width: 0;
 }

src/video/components/popouts/CaptionSettingsPopout.tsx

@@ -3,10 +3,10 @@ import { FloatingView } from "@/components/popout/FloatingView";
 import { useFloatingRouter } from "@/hooks/useFloatingRouter";
 import { useSettings } from "@/state/settings";
 import { useTranslation } from "react-i18next";
-import { ChangeEventHandler } from "react";
-import { PopoutSection } from "./PopoutUtils";
+import { ChangeEventHandler, useEffect, useRef } from "react";
+import { Icon, Icons } from "@/components/Icon";
 
-type SliderProps = {
+export type SliderProps = {
   label: string;
   min: number;
   max: number;
@@ -17,19 +17,30 @@ type SliderProps = {
   stops?: number[];
 };
 
-function Slider(params: SliderProps) {
-  const stops = params.stops ?? [Math.floor((params.max + params.min) / 2)];
+export function Slider(props: SliderProps) {
+  const ref = useRef<HTMLInputElement>(null);
+  const stops = props.stops ?? [Math.floor((props.max + props.min) / 2)];
+  useEffect(() => {
+    const e = ref.current as HTMLInputElement;
+    e.style.setProperty("--value", e.value);
+    e.style.setProperty("--min", e.min === "" ? "0" : e.min);
+    e.style.setProperty("--max", e.max === "" ? "100" : e.max);
+    e.addEventListener("input", () => e.style.setProperty("--value", e.value));
+  }, [ref]);
+
   return (
     <div className="mb-6 flex flex-row gap-4">
       <div className="flex w-full flex-col gap-2">
-        <label className="font-bold">{params.label}</label>
+        <label className="font-bold">{props.label}</label>
         <input
           type="range"
-          onChange={params.onChange}
-          value={params.value}
-          max={params.max}
-          min={params.min}
-          step={params.step}
+          ref={ref}
+          className="styled-slider slider-progress"
+          onChange={props.onChange}
+          value={props.value}
+          max={props.max}
+          min={props.min}
+          step={props.step}
           list="stops"
         />
         <datalist id="stops">
@@ -40,7 +51,7 @@ function Slider(params: SliderProps) {
       </div>
       <div className="mt-1 aspect-[2/1] h-8 rounded-sm bg-[#1C161B] pt-1">
         <div className="text-center font-bold text-white">
-          {params.valueDisplay ?? params.value}
+          {props.valueDisplay ?? props.value}
         </div>
       </div>
     </div>
@@ -135,6 +146,13 @@ export function CaptionSettingsPopout(props: {
                   }}
                   onChange={(e) => setCaptionColor(e.target.value)}
                 />
+                <Icon
+                  className={[
+                    "absolute text-[#1C161B]",
+                    color === captionSettings.style.color ? "" : "hidden",
+                  ].join(" ")}
+                  icon={Icons.CHECKMARK}
+                />
               </div>
             ))}
           </div>