aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/shared/video
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/shared/video')
-rw-r--r--client/src/app/shared/video/abstract-video-list.scss11
1 files changed, 7 insertions, 4 deletions
diff --git a/client/src/app/shared/video/abstract-video-list.scss b/client/src/app/shared/video/abstract-video-list.scss
index 2aab40ea8..982204e21 100644
--- a/client/src/app/shared/video/abstract-video-list.scss
+++ b/client/src/app/shared/video/abstract-video-list.scss
@@ -4,18 +4,20 @@
4@import '_miniature'; 4@import '_miniature';
5 5
6.videos { 6.videos {
7 $column-width: #{$video-thumbnail-width - 25px};
8
7 display: grid; 9 display: grid;
8 column-gap: calc(10px + .2%); 10 column-gap: calc(10px + .2%);
9 grid-template-columns: repeat( 11 grid-template-columns: repeat(
10 auto-fill, 12 auto-fill,
11 minmax( 13 minmax(
12 var(--miniature-min-width, #{$video-thumbnail-width}), 14 var(--miniature-min-width, #{$column-width}),
13 1fr 15 1fr
14 ) 16 )
15 ); 17 );
16 18
17 @media screen and (min-width: #{breakpoint(xxl)}) { 19 @media screen and (min-width: #{breakpoint(fhd)}) {
18 --miniature-min-width: 300px; 20 --miniature-min-width: #{$column-width + 100px};
19 } 21 }
20} 22}
21 23
@@ -61,12 +63,13 @@
61 font-weight: $font-semibold; 63 font-weight: $font-semibold;
62 margin-bottom: 20px; 64 margin-bottom: 20px;
63 margin-top: -10px; 65 margin-top: -10px;
64 padding-top: 20px;
65 66
66 // make the element span a full grid row within .videos grid 67 // make the element span a full grid row within .videos grid
67 grid-column: 1 / -1; 68 grid-column: 1 / -1;
68 69
69 &:not(:first-child) { 70 &:not(:first-child) {
71 margin-top: .5rem;
72 padding-top: 20px;
70 border-top: 1px solid $separator-border-color; 73 border-top: 1px solid $separator-border-color;
71 } 74 }
72} 75}