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; + } } }