diff --git a/client/src/app/shared/video/video-thumbnail.component.scss b/client/src/app/shared/video/video-thumbnail.component.scss index 0113427a3..469b659e9 100644 --- a/client/src/app/shared/video/video-thumbnail.component.scss +++ b/client/src/app/shared/video/video-thumbnail.component.scss @@ -8,8 +8,8 @@ .progress-bar { height: 3px; width: 100%; - position: relative; - top: -3px; + position: absolute; + bottom: 0; background-color: rgba(0, 0, 0, 0.20); div { diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss index 1e9e8d749..4926adb08 100644 --- a/client/src/sass/include/_miniature.scss +++ b/client/src/sass/include/_miniature.scss @@ -2,13 +2,13 @@ @import '_mixins'; @mixin miniature-name { - @include ellipsis-multiline(16px, 2); + @include ellipsis-multiline(1.1em, 2); transition: color 0.2s; font-size: 16px; font-weight: $font-semibold; color: var(--mainForegroundColor); - margin-top: 5px; + margin-top: 10px; margin-bottom: 5px; &:hover { @@ -28,7 +28,8 @@ $play-overlay-width: 18px; @mixin miniature-thumbnail { @include disable-outline; - display: inline-block; + display: flex; + flex-direction: column; position: relative; border-radius: 3px; overflow: hidden; @@ -126,13 +127,13 @@ $play-overlay-width: 18px; } .video-thumbnail { - width: calc(100% + 30px); - height: auto; - margin: 0 -15px; + margin: 0 -15px 10px -15px; + width: 100vw; + height: calc(100vw / #{$video-thumbnail-ratio}); img { width: 100%; - height: auto; + height: 100%; } } } diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss index 900638a0e..0dacc7272 100644 --- a/client/src/sass/include/_mixins.scss +++ b/client/src/sass/include/_mixins.scss @@ -32,9 +32,7 @@ max-height: $font-size * $number-of-lines; /* Fallback for non-webkit */ font-size: $font-size; - line-height: $font-size - 0.1; - -webkit-line-clamp: $number-of-lines; - -webkit-box-orient: vertical; + line-height: $font-size; overflow: hidden; text-overflow: ellipsis; } diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss index 0e71a1867..c7b205b11 100644 --- a/client/src/sass/include/_variables.scss +++ b/client/src/sass/include/_variables.scss @@ -49,6 +49,7 @@ $separator-border-color: rgba(0, 0, 0, 0.10); $video-miniature-width: 238px; $video-thumbnail-height: 122px; $video-thumbnail-width: 223px; +$video-thumbnail-ratio: $video-thumbnail-width / $video-thumbnail-height; $theater-bottom-space: 115px;