diff options
Diffstat (limited to 'client/src/sass/include')
-rw-r--r-- | client/src/sass/include/_miniature.scss | 15 | ||||
-rw-r--r-- | client/src/sass/include/_mixins.scss | 4 | ||||
-rw-r--r-- | client/src/sass/include/_variables.scss | 1 |
3 files changed, 10 insertions, 10 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 | } |
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 @@ | |||
32 | max-height: $font-size * $number-of-lines; | 32 | max-height: $font-size * $number-of-lines; |
33 | /* Fallback for non-webkit */ | 33 | /* Fallback for non-webkit */ |
34 | font-size: $font-size; | 34 | font-size: $font-size; |
35 | line-height: $font-size - 0.1; | 35 | line-height: $font-size; |
36 | -webkit-line-clamp: $number-of-lines; | ||
37 | -webkit-box-orient: vertical; | ||
38 | overflow: hidden; | 36 | overflow: hidden; |
39 | text-overflow: ellipsis; | 37 | text-overflow: ellipsis; |
40 | } | 38 | } |
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); | |||
49 | $video-miniature-width: 238px; | 49 | $video-miniature-width: 238px; |
50 | $video-thumbnail-height: 122px; | 50 | $video-thumbnail-height: 122px; |
51 | $video-thumbnail-width: 223px; | 51 | $video-thumbnail-width: 223px; |
52 | $video-thumbnail-ratio: $video-thumbnail-width / $video-thumbnail-height; | ||
52 | 53 | ||
53 | $theater-bottom-space: 115px; | 54 | $theater-bottom-space: 115px; |
54 | 55 | ||