5 $more-button-width: 40px;
6 $more-margin-right: 15px;
10 flex-direction: column;
11 padding-bottom: $video-miniature-margin-bottom;
17 .video-miniature-information {
18 width: $video-miniature-width - $more-button-width - $more-margin-right;
22 margin: 10px 10px 0 0;
25 @include avatar(40px);
29 .video-miniature-name {
30 @include miniature-name;
31 width: calc(100% - #{$more-button-width});
34 .video-miniature-meta {
35 width: calc(100% + #{$more-button-width});
39 .video-miniature-created-at-views {
44 .video-miniature-account,
45 .video-miniature-channel {
46 @include disable-default-a-behaviour;
51 color: pvar(--greyForegroundColor);
54 color: $grey-foreground-hover-color;
59 .video-info-blocked .blocked-label,
61 font-weight: $font-semibold;
67 .blocked-reason::before {
79 width: $more-button-width;
82 ::ng-deep .dropdown-root:not(.show) {
86 ::ng-deep .playlist-dropdown.show + my-action-dropdown .dropdown-root {
90 ::ng-deep .more-icon {
99 @media screen and (max-width: $small-view) {
100 .video-miniature-information {
108 ::ng-deep .dropdown-root {
109 opacity: 1 !important;
115 &:hover ::ng-deep .video-thumbnail .video-thumbnail-actions-overlay,
116 &:hover .video-bottom .video-actions ::ng-deep .dropdown-root {
124 width: 100% !important;
126 .video-miniature-information {
127 width: calc(100% - #{$more-button-width}) !important;
132 @include large-screen-ratio($selector: '::ng-deep .video-thumbnail');
148 .video-miniature-information {
149 @media screen and (min-width: $small-view) {
154 .video-miniature-name {
155 @include ellipsis-multiline(1.3em, 2);
161 .video-miniature-created-at-views,
162 .video-miniature-account,
163 .video-miniature-channel {
168 .video-miniature-created-at-views + .video-miniature-channel {
172 .video-info-privacy {
176 .video-info-blocked {
187 @media screen and (max-width: $small-view) {
188 flex-direction: column;
195 .video-miniature-information {