Merge pull request #119 from vlitejs/fix/progress-bar-height

Increase progress bar height
vlitejs · Feb 13, 2024 · ee384b4 · ee384b4
2 parents 15f453b + 6fc9c35
commit ee384b4
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 7 deletions.
diff --git a/src/components/control-bar/control-bar.css b/src/components/control-bar/control-bar.css
@@ -96,7 +96,7 @@
 		position: relative;
 		width: 100%;
 		height: var(--vlite-controlBarHeight);
-		padding-top: var(--vlite-progressBarHeight);
+		padding-top: calc(var(--vlite-progressBarHeight) + 10px);
 		text-align: right;
 		padding-left: var(--vlite-controlBarHorizontalPadding);
 		padding-right: var(--vlite-controlBarHorizontalPadding);
@@ -117,6 +117,7 @@
 
 		.v-progressBar {
 			order: 2;
+			height: 25px;
 		}
 
 		.v-time {
@@ -132,15 +133,11 @@
 		.v-controlBar {
 			padding-top: 0;
 		}
-
-		.v-progressBarStyle {
-			height: 25px;
-		}
 	}
 
 	&-video {
 		.v-progressBar {
-			height: var(--vlite-progressBarHeight);
+			height: calc(var(--vlite-progressBarHeight) + 10px);
 		}
 
 		.v-controlBar {
@@ -154,6 +151,8 @@
 				top: 0;
 				left: 50%;
 				transform: translateX(-50%);
+				display: flex;
+				align-items: flex-end;
 			}
 		}
 	}

diff --git a/src/core/vlite.css b/src/core/vlite.css
@@ -3,7 +3,7 @@
 	--vlite-transition: 0.25s ease;
 
 	/* Control bar */
-	--vlite-controlBarHeight: 50px;
+	--vlite-controlBarHeight: 60px;
 	--vlite-controlBarHorizontalPadding: 10px;
 	--vlite-controlBarBackground: linear-gradient(to top, #000 -50%, transparent);