better volume bar styling

UmungoBungo · Oct 7, 2024 · 6818c4e · 6818c4e
1 parent 3005f51
commit 6818c4e
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 8 deletions.
diff --git a/packages/docs/src/components/Demo/PlayerVolume.tsx b/packages/docs/src/components/Demo/PlayerVolume.tsx
@@ -127,11 +127,12 @@ export const PlayerVolume: React.FC<{
 				<div
 					style={{
 						height: '100%',
-						width: '5px',
+						width: '8px',
 						position: 'relative',
-						borderTopLeftRadius: '10px',
+						borderRadius: '10px',
 						borderTopRightRadius: '10px',
 						overflow: 'hidden',
+						border: '1px solid var(--ifm-font-color-base)',
 					}}
 				>
 					<div

diff --git a/packages/docs/src/components/Demo/player.module.css b/packages/docs/src/components/Demo/player.module.css
@@ -54,7 +54,6 @@
 		position: absolute;
 		display: flex;
 		justify-content: center;
-		bottom: 30px;
 		height: 0px;
 		width: 100%;
 		opacity: 0;
@@ -65,24 +64,36 @@
 		.volume-active {
 			position: absolute;
 			bottom: 0;
-			background: var(--ifm-font-color-base);
+			background: var(--ifm-color-primary);
+			border-radius: 10px;
 			width: 100%;
-			border-top-left-radius: 10px;
-			border-top-right-radius: 10px;
 			transition: height 0.1s;
+			z-index: 1;
 		}
 
 		.volume-background {
 			position: absolute;
 			bottom: 0;
-			background: var(--ifm-font-color-base);
-			opacity: 0.6;
+			background: var(--background);
 			height: 100%;
 			width: 100%;
+			z-index: 0;
 		}
 	}
 }
 
+@media screen and (max-width: 900px) {
+	.volume-bar {
+		bottom: 25px;
+	}
+}
+
+@media screen and (min-width: 901px) {
+	.volume-bar {
+		bottom: 35px;
+	}
+}
+
 .volume-button:hover {
 	.volume-bar {
 		height: 80px;