Style selectors

undyingwraith · Jan 30, 2025 · d96c62d · d96c62d
1 parent 1866590
commit d96c62d
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/packages/ui/src/components/organisms/VideoPlayer/VideoPlayer.module.css b/packages/ui/src/components/organisms/VideoPlayer/VideoPlayer.module.css
@@ -43,13 +43,14 @@
 .toolbar {
 	display: flex;
 	justify-content: space-between;
-	background-color: darkgrey;
+	background-color: #969696;
 }
 
 .progress,
 .progressFilled {
 	height: 25px;
 	background-color: #4a4a4b;
+	border-radius: 0.25rem;
 }
 
 .progress {
@@ -58,6 +59,7 @@
 
 .progressFilled {
 	background-color: white;
+	border-radius: 0.25rem;
 	width: 0;
 }
 
@@ -67,3 +69,11 @@
 	flex-direction: row;
 	gap: 15px;
 }
+
+.videoText {
+	color: black;
+}
+
+select {
+	background-color: darkgray;
+}
diff --git a/packages/ui/src/components/organisms/VideoPlayer/VideoPlayer.module.css.d.ts b/packages/ui/src/components/organisms/VideoPlayer/VideoPlayer.module.css.d.ts
@@ -9,5 +9,6 @@ declare const styles: {
 	readonly progressFilled: string;
 	readonly visible: string;
 	readonly progressContainer: string;
+	readonly videoText: string;
 };
 export default styles;
diff --git a/packages/ui/src/components/organisms/VideoPlayer/VideoPlayer.tsx b/packages/ui/src/components/organisms/VideoPlayer/VideoPlayer.tsx
@@ -200,15 +200,15 @@ export function VideoPlayer(props: { file: IVideoFile; autoPlay?: boolean; }) {
 								{computed(() => playing.value ? <Pause /> : <PlayArrow />)}
 							</IconButton>
 							<div>
-								Language
+								<span className={styles.videoText}>Language</span>
 								<select>
 									{computed(() => languages.value.map(l => (
 										<option>{l}</option>
 									)))}
 								</select>
 							</div>
 							<div>
-								Subtitle
+								<span className={styles.videoText}>Subtitle</span>
 								<select onChange={(ev) => {
 									if (ev.currentTarget.value !== 'null') {
 										playerRef.value.selectTextTrack(ev.currentTarget.value);