mirrors/smov
mirrors/smov
1
0
Fork 0
mirror of https://github.com/sussy-code/smov.git synced 2024-12-20 14:37:43 +01:00
Code Issues Wiki Activity

prettier color picker

Browse source
This commit is contained in:
Ivan Evans 2024-09-09 23:41:23 -06:00
parent 07daebdf86
commit 61238a7081
2 changed files with 34 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/components/player/atoms/settings/CaptionSettingsView.tsx
View file

@ -328,6 +328,7 @@ export function CaptionSettingsView({
/> />
))} ))}
{/* Add Color Picker */} {/* Add Color Picker */}
<div className="relative inline-block">
<input <input
type="color" type="color"
value={styling.color} value={styling.color}
@ -335,8 +336,13 @@ export function CaptionSettingsView({
const color = e.target.value; const color = e.target.value;
handleStylingChange({ ...styling, color }); handleStylingChange({ ...styling, color });
}} }}
className="w-10 h-10 border rounded-md cursor-pointer" className="absolute opacity-0 cursor-pointer w-10 h-10"
/> />
<div
className="w-10 h-10 border-2 border-gray-300 rounded-full"
style={{ backgroundColor: styling.color }}
/>
</div>
</div> </div>
</div> </div>
</Menu.Section> </Menu.Section>

8
src/pages/parts/settings/CaptionsPart.tsx
View file

@ -168,6 +168,7 @@ export function CaptionsPart(props: {
/> />
))} ))}
{/* Add Color Picker */} {/* Add Color Picker */}
<div className="relative">
<input <input
type="color" type="color"
value={props.styling.color} value={props.styling.color}
@ -179,8 +180,13 @@ export function CaptionsPart(props: {
color, color,
}); });
}} }}
className="w-10 h-10 border rounded-md cursor-pointer" className="absolute opacity-0 cursor-pointer w-8 h-8"
/> />
<div
className="w-8 h-8 border-2 border-gray-300 rounded-full"
style={{ backgroundColor: props.styling.color }}
/>
</div>
</div> </div>
</div> </div>
</div> </div>