diff options
Diffstat (limited to 'client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss')
-rw-r--r-- | client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss | 32 |
1 files changed, 22 insertions, 10 deletions
diff --git a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss index cb7072d7f..9f4061b02 100644 --- a/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss +++ b/client/src/app/shared/video-playlist/video-playlist-element-miniature.component.scss | |||
@@ -2,9 +2,21 @@ | |||
2 | @import '_mixins'; | 2 | @import '_mixins'; |
3 | @import '_miniature'; | 3 | @import '_miniature'; |
4 | 4 | ||
5 | $thumbnail-width: 130px; | ||
6 | $thumbnail-height: 72px; | ||
7 | |||
5 | my-video-thumbnail { | 8 | my-video-thumbnail { |
6 | @include thumbnail-size-component(130px, 72px); | 9 | @include thumbnail-size-component($thumbnail-width, $thumbnail-height); |
10 | } | ||
7 | 11 | ||
12 | .fake-thumbnail { | ||
13 | width: $thumbnail-width; | ||
14 | height: $thumbnail-height; | ||
15 | background-color: #ececec; | ||
16 | } | ||
17 | |||
18 | my-video-thumbnail, | ||
19 | .fake-thumbnail { | ||
8 | display: flex; // Avoids an issue with line-height that adds space below the element | 20 | display: flex; // Avoids an issue with line-height that adds space below the element |
9 | margin-right: 10px; | 21 | margin-right: 10px; |
10 | } | 22 | } |
@@ -31,6 +43,7 @@ my-video-thumbnail { | |||
31 | a { | 43 | a { |
32 | @include disable-default-a-behaviour; | 44 | @include disable-default-a-behaviour; |
33 | 45 | ||
46 | color: var(--mainForegroundColor); | ||
34 | display: flex; | 47 | display: flex; |
35 | min-width: 0; | 48 | min-width: 0; |
36 | align-items: center; | 49 | align-items: center; |
@@ -58,7 +71,6 @@ my-video-thumbnail { | |||
58 | min-width: 0; | 71 | min-width: 0; |
59 | 72 | ||
60 | a { | 73 | a { |
61 | color: var(--mainForegroundColor); | ||
62 | width: auto; | 74 | width: auto; |
63 | 75 | ||
64 | &:hover { | 76 | &:hover { |
@@ -66,20 +78,20 @@ my-video-thumbnail { | |||
66 | } | 78 | } |
67 | } | 79 | } |
68 | 80 | ||
69 | .video-info-name { | ||
70 | font-size: 18px; | ||
71 | font-weight: $font-semibold; | ||
72 | display: inline-block; | ||
73 | |||
74 | @include ellipsis; | ||
75 | } | ||
76 | |||
77 | .video-info-account, .video-info-timestamp { | 81 | .video-info-account, .video-info-timestamp { |
78 | color: $grey-foreground-color; | 82 | color: $grey-foreground-color; |
79 | } | 83 | } |
80 | } | 84 | } |
81 | } | 85 | } |
82 | 86 | ||
87 | .video-info-name { | ||
88 | font-size: 18px; | ||
89 | font-weight: $font-semibold; | ||
90 | display: inline-block; | ||
91 | |||
92 | @include ellipsis; | ||
93 | } | ||
94 | |||
83 | .more { | 95 | .more { |
84 | justify-self: flex-end; | 96 | justify-self: flex-end; |
85 | margin-left: auto; | 97 | margin-left: auto; |