]>
Commit | Line | Data |
---|---|---|
63c4db6d C |
1 | @import '_variables'; |
2 | @import '_mixins'; | |
830b4faf | 3 | @import '_miniature'; |
63c4db6d | 4 | |
adcf9212 | 5 | $more-button-width: 40px; |
743f023c | 6 | |
0f7407d9 C |
7 | .video-miniature-name { |
8 | @include miniature-name; | |
9 | } | |
501bc6c2 | 10 | |
0f7407d9 C |
11 | .video-miniature-information { |
12 | width: calc(100% - #{$more-button-width}); | |
13 | } | |
501bc6c2 | 14 | |
fbdcd4ec | 15 | my-account-avatar, |
f1ac6348 | 16 | .channel-avatar { |
0f7407d9 | 17 | margin: 10px 10px 0 0; |
f1ac6348 | 18 | } |
cf78883c | 19 | |
f1ac6348 C |
20 | .channel-avatar img{ |
21 | @include channel-avatar(40px); | |
0f7407d9 | 22 | } |
deb8b9cd | 23 | |
0f7407d9 C |
24 | .video-miniature-created-at-views { |
25 | font-size: 13px; | |
26 | } | |
501bc6c2 | 27 | |
0f7407d9 C |
28 | .video-miniature-account, |
29 | .video-miniature-channel { | |
30 | @include disable-default-a-behaviour; | |
31 | @include ellipsis; | |
33253c1a | 32 | |
0f7407d9 C |
33 | display: block; |
34 | font-size: 13px; | |
35 | color: pvar(--greyForegroundColor); | |
00a44645 | 36 | |
0f7407d9 C |
37 | &:hover { |
38 | color: $grey-foreground-hover-color; | |
39 | } | |
40 | } | |
adcf9212 | 41 | |
0f7407d9 C |
42 | .video-info-privacy, |
43 | .video-info-blocked .blocked-label, | |
44 | .video-info-nsfw { | |
45 | font-weight: $font-semibold; | |
46 | } | |
03e12d7c | 47 | |
0f7407d9 C |
48 | .video-info-blocked { |
49 | color: red; | |
03e12d7c | 50 | |
0f7407d9 C |
51 | .blocked-reason::before { |
52 | content: ' - '; | |
53 | } | |
54 | } | |
0f4905e1 | 55 | |
0f7407d9 C |
56 | .video-info-nsfw { |
57 | color: red; | |
58 | } | |
e2409062 | 59 | |
0f7407d9 C |
60 | .video-actions { |
61 | width: $more-button-width; | |
62 | height: 30px; | |
e2409062 | 63 | |
0f7407d9 C |
64 | ::ng-deep .dropdown-root:not(.show) { |
65 | opacity: 0; | |
66 | } | |
e2409062 | 67 | |
0f7407d9 C |
68 | ::ng-deep .playlist-dropdown.show + my-action-dropdown .dropdown-root { |
69 | opacity: 1; | |
70 | } | |
e2409062 | 71 | |
0f7407d9 C |
72 | ::ng-deep .more-icon { |
73 | opacity: .6; | |
3a0fb65c | 74 | |
0f7407d9 C |
75 | &:hover { |
76 | opacity: 1; | |
77 | } | |
78 | } | |
79 | } | |
3a0fb65c | 80 | |
f1ac6348 C |
81 | .video-miniature:hover { |
82 | ::ng-deep .video-thumbnail-actions-overlay, | |
83 | .video-actions ::ng-deep .dropdown-root { | |
0f7407d9 C |
84 | opacity: 1 !important; |
85 | } | |
86 | } | |
3a0fb65c | 87 | |
0f7407d9 C |
88 | // Grid mode |
89 | // Takes all the width on mobile | |
90 | .video-miniature:not(.display-as-row) { | |
91 | display: flex; | |
92 | flex-direction: column; | |
93 | padding-bottom: $video-miniature-margin-bottom; | |
94 | width: 100%; | |
3a0fb65c | 95 | |
0f7407d9 | 96 | my-video-thumbnail { |
cdeddff1 | 97 | @include block-ratio($selector: '::ng-deep .video-thumbnail'); |
0f7407d9 | 98 | } |
3fbba1d2 | 99 | |
0f7407d9 C |
100 | .video-bottom { |
101 | display: flex; | |
102 | width: 100%; | |
103 | } | |
3a0fb65c | 104 | |
0f7407d9 C |
105 | .video-miniature-name { |
106 | margin-top: 10px; | |
107 | margin-bottom: 5px; | |
108 | } | |
0f4905e1 | 109 | |
0f7407d9 C |
110 | .video-miniature-created-at-views { |
111 | display: block; | |
3a0fb65c C |
112 | } |
113 | ||
0f7407d9 C |
114 | .video-actions { |
115 | margin-top: 3px; | |
3fbba1d2 RK |
116 | } |
117 | ||
0f7407d9 | 118 | @media screen and (max-width: $small-view) { |
e66883b3 | 119 | width: 100%; |
0f7407d9 C |
120 | margin-bottom: 25px; |
121 | ||
122 | .video-miniature-information { | |
123 | margin: 0 10px; | |
124 | ||
125 | width: 100%; | |
126 | text-align: left; | |
127 | } | |
e66883b3 | 128 | |
0f7407d9 C |
129 | .video-actions { |
130 | margin: 0; | |
131 | top: -3px; | |
e66883b3 | 132 | |
0f7407d9 C |
133 | ::ng-deep .dropdown-root { |
134 | opacity: 1 !important; | |
e66883b3 RK |
135 | } |
136 | } | |
137 | ||
0f7407d9 C |
138 | ::ng-deep .video-thumbnail { |
139 | border-radius: 0; | |
e66883b3 RK |
140 | } |
141 | } | |
0f7407d9 C |
142 | } |
143 | ||
144 | .video-miniature.display-as-row { | |
145 | --rowThumbnailWidth: #{$video-thumbnail-width}; | |
146 | --rowThumbnailHeight: #{$video-thumbnail-height}; | |
147 | ||
148 | display: flex; | |
149 | flex-direction: row; | |
e66883b3 | 150 | |
0f7407d9 | 151 | .video-bottom { |
bf64ed41 | 152 | display: flex; |
0f7407d9 | 153 | } |
e2409062 | 154 | |
0f7407d9 | 155 | // We don't display avatar in row mode |
f1ac6348 | 156 | .channel-avatar { |
0f7407d9 C |
157 | display: none; |
158 | } | |
e2409062 | 159 | |
0f7407d9 C |
160 | my-video-thumbnail { |
161 | min-width: var(--rowThumbnailWidth); | |
162 | max-width: var(--rowThumbnailWidth); | |
163 | height: var(--rowThumbnailHeight); | |
164 | margin-right: 10px; | |
165 | } | |
e2409062 | 166 | |
0f7407d9 | 167 | .video-miniature-name { |
4429a4a6 | 168 | @include ellipsis-multiline($video-miniature-row-name-font-size, 2); |
0f7407d9 C |
169 | } |
170 | ||
171 | .video-miniature-created-at-views, | |
172 | .video-miniature-account, | |
173 | .video-miniature-channel { | |
4429a4a6 | 174 | font-size: $video-miniature-row-info-font-size; |
0f7407d9 | 175 | } |
e2409062 | 176 | |
0f7407d9 C |
177 | .video-actions { |
178 | margin-top: -3px; | |
179 | } | |
180 | } | |
e2409062 | 181 | |
0f7407d9 C |
182 | @include on-small-main-col { |
183 | .video-miniature.display-as-row { | |
184 | --rowThumbnailWidth: #{$video-thumbnail-medium-width}; | |
185 | --rowThumbnailHeight: #{$video-thumbnail-medium-height}; | |
186 | } | |
187 | } | |
8dfceec4 | 188 | |
0f7407d9 C |
189 | @include on-mobile-main-col { |
190 | .video-miniature.display-as-row { | |
191 | --rowThumbnailWidth: #{$video-thumbnail-small-width}; | |
192 | --rowThumbnailHeight: #{$video-thumbnail-small-height}; | |
193 | ||
194 | .video-miniature-name { | |
4429a4a6 | 195 | font-size: $video-miniature-row-info-font-size; |
0f7407d9 C |
196 | } |
197 | ||
198 | .video-miniature-created-at-views, | |
199 | .video-miniature-account, | |
200 | .video-miniature-channel { | |
4429a4a6 | 201 | font-size: $video-miniature-row-mobile-info-font-size; |
e2409062 | 202 | } |
501bc6c2 C |
203 | } |
204 | } |