diff --git a/src/routes/MetaDetails/StreamsList/Stream/Stream.js b/src/routes/MetaDetails/StreamsList/Stream/Stream.js
index 0386d846a..be46486a4 100644
--- a/src/routes/MetaDetails/StreamsList/Stream/Stream.js
+++ b/src/routes/MetaDetails/StreamsList/Stream/Stream.js
@@ -97,6 +97,7 @@ const Stream = ({ className, videoId, videoReleased, addonName, name, descriptio
progress !== null && !isNaN(progress) && progress > 0 ?
:
null
diff --git a/src/routes/MetaDetails/StreamsList/Stream/styles.less b/src/routes/MetaDetails/StreamsList/Stream/styles.less
index 94ada8970..5ee4e584c 100644
--- a/src/routes/MetaDetails/StreamsList/Stream/styles.less
+++ b/src/routes/MetaDetails/StreamsList/Stream/styles.less
@@ -58,13 +58,26 @@
.progress-bar-container {
flex: 0 0 100%;
+ position: relative;
border-radius: var(--border-radius);
- background-color: var(--overlay-color);
.progress-bar {
+ z-index: 1;
+ position: relative;
height: 0.4rem;
background-color: var(--primary-accent-color);
}
+
+ .progress-bar-background {
+ z-index: 0;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background-color: var(--primary-foreground-color);
+ opacity: 0.2;
+ }
}
}
diff --git a/src/routes/MetaDetails/VideosList/Video/Video.js b/src/routes/MetaDetails/VideosList/Video/Video.js
index 26d0009be..03255700a 100644
--- a/src/routes/MetaDetails/VideosList/Video/Video.js
+++ b/src/routes/MetaDetails/VideosList/Video/Video.js
@@ -89,6 +89,7 @@ const Video = ({ className, id, title, thumbnail, episode, released, upcoming, w
progress !== null && !isNaN(progress) && progress > 0 ?
:
null
diff --git a/src/routes/MetaDetails/VideosList/Video/styles.less b/src/routes/MetaDetails/VideosList/Video/styles.less
index 50bd6a820..8e01218b4 100644
--- a/src/routes/MetaDetails/VideosList/Video/styles.less
+++ b/src/routes/MetaDetails/VideosList/Video/styles.less
@@ -29,7 +29,7 @@
.thumbnail-container {
flex: none;
position: relative;
- border-radius: var(--border-radius);
+ border-radius: 0.3rem;
overflow: hidden;
.thumbnail {
@@ -55,14 +55,28 @@
.progress-bar-container {
position: absolute;
- bottom: 0;
- width: 100%;
- background-color: var(--overlay-color);
+ bottom: 0.5rem;
+ left: 0.5rem;
+ right: 0.5rem;
+ border-radius: var(--border-radius);
.progress-bar {
+ z-index: 1;
+ position: relative;
height: 0.4rem;
background-color: var(--primary-accent-color);
}
+
+ .progress-bar-background {
+ z-index: 0;
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ background-color: var(--primary-foreground-color);
+ opacity: 0.2;
+ }
}
}