1 @use '_variables' as *;
3 @use '_miniature' as *;
5 $more-button-width: 40px;
15 .video-miniature-name {
16 @include miniature-name;
19 .video-miniature-information {
20 width: calc(100% - #{$more-button-width});
24 @include margin(10px, 10px, 0, 0);
27 .video-miniature-created-at-views {
31 .video-miniature-account,
32 .video-miniature-channel {
33 @include disable-default-a-behaviour;
38 color: pvar(--greyForegroundColor);
41 color: $grey-foreground-hover-color;
46 .video-info-blocked .blocked-label,
48 font-weight: $font-semibold;
54 .blocked-reason::before {
64 width: $more-button-width;
67 ::ng-deep .dropdown-root:not(.show) {
71 ::ng-deep .playlist-dropdown.show + my-action-dropdown .dropdown-root {
75 ::ng-deep .more-icon {
84 .video-miniature:hover {
85 ::ng-deep .video-thumbnail-actions-overlay,
86 .video-actions ::ng-deep .dropdown-root {
87 opacity: 1 !important;
92 // Takes all the width on mobile
93 .video-miniature:not(.display-as-row) {
95 flex-direction: column;
96 padding-bottom: $video-miniature-margin-bottom;
100 @include block-ratio($selector: '::ng-deep .video-thumbnail');
109 .video-miniature-name {
114 .video-miniature-created-at-views {
122 @media screen and (max-width: $small-view) {
126 .video-miniature-information {
137 ::ng-deep .dropdown-root {
138 opacity: 1 !important;
142 ::ng-deep .video-thumbnail {
148 .video-miniature.display-as-row {
149 --rowThumbnailWidth: #{$video-thumbnail-width};
150 --rowThumbnailHeight: #{$video-thumbnail-height};
160 // We don't display avatar in row mode
166 @include margin-right(10px);
168 min-width: var(--rowThumbnailWidth);
169 max-width: var(--rowThumbnailWidth);
170 height: var(--rowThumbnailHeight);
173 .video-miniature-name {
174 @include ellipsis-multiline($video-miniature-row-name-font-size, 2);
177 .video-miniature-created-at-views,
178 .video-miniature-account,
179 .video-miniature-channel {
180 font-size: $video-miniature-row-info-font-size;
188 @include on-small-main-col {
189 .video-miniature.display-as-row {
190 --rowThumbnailWidth: #{$video-thumbnail-medium-width};
191 --rowThumbnailHeight: #{$video-thumbnail-medium-height};
195 @include on-mobile-main-col {
196 .video-miniature.display-as-row {
197 --rowThumbnailWidth: #{$video-thumbnail-small-width};
198 --rowThumbnailHeight: #{$video-thumbnail-small-height};
200 .video-miniature-name {
201 font-size: $video-miniature-row-info-font-size;
204 .video-miniature-created-at-views,
205 .video-miniature-account,
206 .video-miniature-channel {
207 font-size: $video-miniature-row-mobile-info-font-size;