aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
Diffstat (limited to 'client')
-rw-r--r--client/src/app/shared/video/video-thumbnail.component.scss4
-rw-r--r--client/src/sass/include/_miniature.scss15
-rw-r--r--client/src/sass/include/_mixins.scss4
-rw-r--r--client/src/sass/include/_variables.scss1
4 files changed, 12 insertions, 12 deletions
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 @@
8 .progress-bar { 8 .progress-bar {
9 height: 3px; 9 height: 3px;
10 width: 100%; 10 width: 100%;
11 position: relative; 11 position: absolute;
12 top: -3px; 12 bottom: 0;
13 background-color: rgba(0, 0, 0, 0.20); 13 background-color: rgba(0, 0, 0, 0.20);
14 14
15 div { 15 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 @@
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