diff --git a/src/routes/MetaDetails/VideosList/Video/Video.js b/src/routes/MetaDetails/VideosList/Video/Video.js index 51d75a778..18aeb3d76 100644 --- a/src/routes/MetaDetails/VideosList/Video/Video.js +++ b/src/routes/MetaDetails/VideosList/Video/Video.js @@ -1,8 +1,8 @@ const React = require('react'); const PropTypes = require('prop-types'); const classnames = require('classnames'); -const { Button, Image } = require('stremio/common'); const Icon = require('stremio-icons/dom'); +const { Button, Image } = require('stremio/common'); const VideoPlaceholder = require('./VideoPlaceholder'); const styles = require('./styles'); diff --git a/src/routes/MetaDetails/VideosList/Video/styles.less b/src/routes/MetaDetails/VideosList/Video/styles.less index 6780f1da9..45c09c27c 100644 --- a/src/routes/MetaDetails/VideosList/Video/styles.less +++ b/src/routes/MetaDetails/VideosList/Video/styles.less @@ -11,8 +11,7 @@ .thumbnail-container { flex: none; - align-self: center; - padding: 0.5rem; + padding: 0.5rem 0 0.5rem 1rem; .thumbnail { display: block; @@ -20,13 +19,15 @@ height: 5rem; object-fit: contain; object-position: center; + opacity: 0.9; } .placeholder-icon { display: block; - width: 5rem; - height: 5rem; - fill: @color-secondaryvariant1-light3; + width: 4rem; + height: 4rem; + margin: 0.5rem; + fill: @color-secondaryvariant1-light3-90; } } @@ -36,7 +37,7 @@ display: flex; flex-direction: column; justify-content: space-between; - padding: 0.5rem; + padding: 0.5rem 1rem; &:first-child { height: 4rem; @@ -61,6 +62,7 @@ flex: 1; margin-right: 0.5rem; font-size: 0.8rem; + font-weight: 500; white-space: nowrap; text-overflow: ellipsis; text-transform: uppercase; @@ -107,9 +109,7 @@ } .progress-bar-container { - flex-grow: 0; - flex-shrink: 0; - flex-basis: 100%; + flex: 0 0 100%; background-color: @color-background-light2; .progress-bar {