5 $more-button-width: 40px;
7 .video-miniature-name {
8 @include miniature-name;
11 .video-miniature-information {
12 width: calc(100% - #{$more-button-width});
17 margin: 10px 10px 0 0;
21 @include channel-avatar(40px);
24 .video-miniature-created-at-views {
28 .video-miniature-account,
29 .video-miniature-channel {
30 @include disable-default-a-behaviour;
35 color: pvar(--greyForegroundColor);
38 color: $grey-foreground-hover-color;
43 .video-info-blocked .blocked-label,
45 font-weight: $font-semibold;
51 .blocked-reason::before {
61 width: $more-button-width;
64 ::ng-deep .dropdown-root:not(.show) {
68 ::ng-deep .playlist-dropdown.show + my-action-dropdown .dropdown-root {
72 ::ng-deep .more-icon {
81 .video-miniature:hover {
82 ::ng-deep .video-thumbnail-actions-overlay,
83 .video-actions ::ng-deep .dropdown-root {
84 opacity: 1 !important;
89 // Takes all the width on mobile
90 .video-miniature:not(.display-as-row) {
92 flex-direction: column;
93 padding-bottom: $video-miniature-margin-bottom;
97 @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};
155 // We don't display avatar in row mode
161 min-width: var(--rowThumbnailWidth);
162 max-width: var(--rowThumbnailWidth);
163 height: var(--rowThumbnailHeight);
167 .video-miniature-name {
168 @include ellipsis-multiline($video-miniature-row-name-font-size, 2);
171 .video-miniature-created-at-views,
172 .video-miniature-account,
173 .video-miniature-channel {
174 font-size: $video-miniature-row-info-font-size;
182 @include on-small-main-col {
183 .video-miniature.display-as-row {
184 --rowThumbnailWidth: #{$video-thumbnail-medium-width};
185 --rowThumbnailHeight: #{$video-thumbnail-medium-height};
189 @include on-mobile-main-col {
190 .video-miniature.display-as-row {
191 --rowThumbnailWidth: #{$video-thumbnail-small-width};
192 --rowThumbnailHeight: #{$video-thumbnail-small-height};
194 .video-miniature-name {
195 font-size: $video-miniature-row-info-font-size;
198 .video-miniature-created-at-views,
199 .video-miniature-account,
200 .video-miniature-channel {
201 font-size: $video-miniature-row-mobile-info-font-size;