diff options
Diffstat (limited to 'client/src/sass/include/_miniature.scss')
-rw-r--r-- | client/src/sass/include/_miniature.scss | 15 |
1 files changed, 8 insertions, 7 deletions
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 @@ | |||
2 | @import '_mixins'; | 2 | @import '_mixins'; |
3 | 3 | ||
4 | @mixin miniature-name { | 4 | @mixin miniature-name { |
5 | @include ellipsis-multiline(16px, 2); | 5 | @include ellipsis-multiline(1.1em, 2); |
6 | 6 | ||
7 | transition: color 0.2s; | 7 | transition: color 0.2s; |
8 | font-size: 16px; | 8 | font-size: 16px; |
9 | font-weight: $font-semibold; | 9 | font-weight: $font-semibold; |
10 | color: var(--mainForegroundColor); | 10 | color: var(--mainForegroundColor); |
11 | margin-top: 5px; | 11 | margin-top: 10px; |
12 | margin-bottom: 5px; | 12 | margin-bottom: 5px; |
13 | 13 | ||
14 | &:hover { | 14 | &:hover { |
@@ -28,7 +28,8 @@ $play-overlay-width: 18px; | |||
28 | @mixin miniature-thumbnail { | 28 | @mixin miniature-thumbnail { |
29 | @include disable-outline; | 29 | @include disable-outline; |
30 | 30 | ||
31 | display: inline-block; | 31 | display: flex; |
32 | flex-direction: column; | ||
32 | position: relative; | 33 | position: relative; |
33 | border-radius: 3px; | 34 | border-radius: 3px; |
34 | overflow: hidden; | 35 | overflow: hidden; |
@@ -126,13 +127,13 @@ $play-overlay-width: 18px; | |||
126 | } | 127 | } |
127 | 128 | ||
128 | .video-thumbnail { | 129 | .video-thumbnail { |
129 | width: calc(100% + 30px); | 130 | margin: 0 -15px 10px -15px; |
130 | height: auto; | 131 | width: 100vw; |
131 | margin: 0 -15px; | 132 | height: calc(100vw / #{$video-thumbnail-ratio}); |
132 | 133 | ||
133 | img { | 134 | img { |
134 | width: 100%; | 135 | width: 100%; |
135 | height: auto; | 136 | height: 100%; |
136 | } | 137 | } |
137 | } | 138 | } |
138 | } | 139 | } |