1 @use '_variables' as *;
3 @use '_miniature' as *;
5 $more-button-width: 40px;
11 .video-miniature-name {
12 @include miniature-name;
15 .video-miniature-information {
16 width: calc(100% - #{$more-button-width});
20 @include margin(10px, 10px, 0, 0);
23 .video-miniature-created-at-views {
27 .video-miniature-account,
28 .video-miniature-channel {
29 @include disable-default-a-behaviour;
34 color: pvar(--greyForegroundColor);
37 color: $grey-foreground-hover-color;
42 .video-info-blocked .blocked-label,
44 font-weight: $font-semibold;
50 .blocked-reason::before {
60 width: $more-button-width;
63 ::ng-deep .dropdown-root:not(.show) {
67 ::ng-deep .playlist-dropdown.show + my-action-dropdown .dropdown-root {
71 ::ng-deep .more-icon {
80 .video-miniature:hover {
81 ::ng-deep .video-thumbnail-actions-overlay,
82 .video-actions ::ng-deep .dropdown-root {
83 opacity: 1 !important;
88 // Takes all the width on mobile
89 .video-miniature:not(.display-as-row) {
91 flex-direction: column;
92 padding-bottom: $video-miniature-margin-bottom;
96 @include block-ratio($selector: '::ng-deep .video-thumbnail');
105 .video-miniature-name {
110 .video-miniature-created-at-views {
118 @media screen and (max-width: $small-view) {
122 .video-miniature-information {
133 ::ng-deep .dropdown-root {
134 opacity: 1 !important;
138 ::ng-deep .video-thumbnail {
144 .video-miniature.display-as-row {
145 --rowThumbnailWidth: #{$video-thumbnail-width};
146 --rowThumbnailHeight: #{$video-thumbnail-height};
156 // We don't display avatar in row mode
162 @include margin-right(10px);
164 min-width: var(--rowThumbnailWidth);
165 max-width: var(--rowThumbnailWidth);
166 height: var(--rowThumbnailHeight);
169 .video-miniature-name {
170 @include ellipsis-multiline($video-miniature-row-name-font-size, 2);
173 .video-miniature-created-at-views,
174 .video-miniature-account,
175 .video-miniature-channel {
176 font-size: $video-miniature-row-info-font-size;
184 @include on-small-main-col {
185 .video-miniature.display-as-row {
186 --rowThumbnailWidth: #{$video-thumbnail-medium-width};
187 --rowThumbnailHeight: #{$video-thumbnail-medium-height};
191 @include on-mobile-main-col {
192 .video-miniature.display-as-row {
193 --rowThumbnailWidth: #{$video-thumbnail-small-width};
194 --rowThumbnailHeight: #{$video-thumbnail-small-height};
196 .video-miniature-name {
197 font-size: $video-miniature-row-info-font-size;
200 .video-miniature-created-at-views,
201 .video-miniature-account,
202 .video-miniature-channel {
203 font-size: $video-miniature-row-mobile-info-font-size;