1 @use '_variables' as *;
3 @use '_miniature' as *;
5 $more-button-width: 40px;
7 .video-miniature-name {
8 @include miniature-name;
11 .video-miniature-information {
12 width: calc(100% - #{$more-button-width});
16 @include margin(10px, 10px, 0, 0);
19 .video-miniature-created-at-views {
23 .video-miniature-account,
24 .video-miniature-channel {
25 @include disable-default-a-behaviour;
30 color: pvar(--greyForegroundColor);
33 color: $grey-foreground-hover-color;
38 .video-info-blocked .blocked-label,
40 font-weight: $font-semibold;
46 .blocked-reason::before {
56 width: $more-button-width;
59 ::ng-deep .dropdown-root:not(.show) {
63 ::ng-deep .playlist-dropdown.show + my-action-dropdown .dropdown-root {
67 ::ng-deep .more-icon {
76 .video-miniature:hover {
77 ::ng-deep .video-thumbnail-actions-overlay,
78 .video-actions ::ng-deep .dropdown-root {
79 opacity: 1 !important;
84 // Takes all the width on mobile
85 .video-miniature:not(.display-as-row) {
87 flex-direction: column;
88 padding-bottom: $video-miniature-margin-bottom;
92 @include block-ratio($selector: '::ng-deep .video-thumbnail');
101 .video-miniature-name {
106 .video-miniature-created-at-views {
114 @media screen and (max-width: $small-view) {
118 .video-miniature-information {
129 ::ng-deep .dropdown-root {
130 opacity: 1 !important;
134 ::ng-deep .video-thumbnail {
140 .video-miniature.display-as-row {
141 --rowThumbnailWidth: #{$video-thumbnail-width};
142 --rowThumbnailHeight: #{$video-thumbnail-height};
152 // We don't display avatar in row mode
158 @include margin-right(10px);
160 min-width: var(--rowThumbnailWidth);
161 max-width: var(--rowThumbnailWidth);
162 height: var(--rowThumbnailHeight);
165 .video-miniature-name {
166 @include ellipsis-multiline($video-miniature-row-name-font-size, 2);
169 .video-miniature-created-at-views,
170 .video-miniature-account,
171 .video-miniature-channel {
172 font-size: $video-miniature-row-info-font-size;
180 @include on-small-main-col {
181 .video-miniature.display-as-row {
182 --rowThumbnailWidth: #{$video-thumbnail-medium-width};
183 --rowThumbnailHeight: #{$video-thumbnail-medium-height};
187 @include on-mobile-main-col {
188 .video-miniature.display-as-row {
189 --rowThumbnailWidth: #{$video-thumbnail-small-width};
190 --rowThumbnailHeight: #{$video-thumbnail-small-height};
192 .video-miniature-name {
193 font-size: $video-miniature-row-info-font-size;
196 .video-miniature-created-at-views,
197 .video-miniature-account,
198 .video-miniature-channel {
199 font-size: $video-miniature-row-mobile-info-font-size;