diff options
Diffstat (limited to 'client/src/sass/include/_miniature.scss')
-rw-r--r-- | client/src/sass/include/_miniature.scss | 13 |
1 files changed, 7 insertions, 6 deletions
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss index 426263444..7643a6816 100644 --- a/client/src/sass/include/_miniature.scss +++ b/client/src/sass/include/_miniature.scss | |||
@@ -4,6 +4,7 @@ | |||
4 | @mixin miniature-name { | 4 | @mixin miniature-name { |
5 | @include ellipsis-multiline(1.1em, 2); | 5 | @include ellipsis-multiline(1.1em, 2); |
6 | 6 | ||
7 | word-break: break-all; | ||
7 | transition: color 0.2s; | 8 | transition: color 0.2s; |
8 | font-weight: $font-semibold; | 9 | font-weight: $font-semibold; |
9 | color: pvar(--mainForegroundColor); | 10 | color: pvar(--mainForegroundColor); |
@@ -226,22 +227,22 @@ $play-overlay-width: 18px; | |||
226 | 227 | ||
227 | @media screen and (min-width: $mobile-view) { | 228 | @media screen and (min-width: $mobile-view) { |
228 | .videos { | 229 | .videos { |
229 | --miniature-min-width: #{$video-thumbnail-width - 15px}; | 230 | --miniatureMinWidth: #{$video-thumbnail-width - 15px}; |
230 | --miniature-max-width: #{$video-thumbnail-width}; | 231 | --miniatureMaxWidth: #{$video-thumbnail-width}; |
231 | 232 | ||
232 | display: grid; | 233 | display: grid; |
233 | column-gap: 5px; | 234 | column-gap: 5px; |
234 | grid-template-columns: repeat( | 235 | grid-template-columns: repeat( |
235 | auto-fill, | 236 | auto-fill, |
236 | minmax( | 237 | minmax( |
237 | var(--miniature-min-width), | 238 | var(--miniatureMinWidth), |
238 | 1fr | 239 | 1fr |
239 | ) | 240 | ) |
240 | ); | 241 | ); |
241 | 242 | ||
242 | @media screen and (min-width: #{breakpoint(fhd)}) { | 243 | @media screen and (min-width: #{breakpoint(fhd)}) { |
243 | column-gap: 1%; | 244 | column-gap: 1%; |
244 | --miniature-min-width: #{$video-thumbnail-width}; | 245 | --miniatureMinWidth: #{$video-thumbnail-width}; |
245 | } | 246 | } |
246 | 247 | ||
247 | .video-wrapper { | 248 | .video-wrapper { |
@@ -250,8 +251,8 @@ $play-overlay-width: 18px; | |||
250 | 251 | ||
251 | my-video-miniature { | 252 | my-video-miniature { |
252 | display: block; | 253 | display: block; |
253 | min-width: var(--miniature-min-width); | 254 | min-width: var(--miniatureMinWidth); |
254 | max-width: var(--miniature-max-width); | 255 | max-width: var(--miniatureMaxWidth); |
255 | } | 256 | } |
256 | } | 257 | } |
257 | } | 258 | } |