1 @use '_variables' as *;
3 @use '_miniature' as *;
5 $thumbnail-width: 130px;
6 $thumbnail-height: 72px;
9 @include thumbnail-size-component($thumbnail-width, $thumbnail-height);
13 width: $thumbnail-width;
14 height: $thumbnail-height;
15 background-color: #ececec;
20 @include margin-right(10px);
22 display: flex; // Avoids an issue with line-height that adds space below the element
27 grid-template-columns: 1fr auto;
28 background-color: pvar(--mainBackgroundColor);
30 border-bottom: 1px solid $separator-border-color;
37 background-color: rgba(0, 0, 0, 0.05);
44 @media not all and (hover: hover) and (pointer: fine) {
46 opacity: 1 !important;
51 background-color: rgba(0, 0, 0, 0.02);
55 @include disable-default-a-behaviour;
57 color: pvar(--mainForegroundColor);
64 @include margin-right(10px);
66 font-weight: $font-semibold;
67 color: pvar(--greyForegroundColor);
71 @include apply-svg-color(pvar(--greyForegroundColor));
82 @include margin-left(auto);
84 justify-self: flex-end;
97 @include apply-svg-color(pvar(--greyForegroundColor));
112 font-weight: $font-semibold;
113 display: inline-block;
118 flex-direction: column;
119 align-self: flex-start;
124 align-items: baseline;
132 @include margin-right(5px);
137 .video-info-timestamp {
138 color: pvar(--greyForegroundColor);
143 .video-miniature-created-at-views {
150 @include dropdown-with-icon-item;
156 @include padding-left(35px);
167 my-peertube-checkbox {
168 @include margin-right(5px);
172 @include peertube-button;
173 @include orange-button;
180 @mixin more-dropdown-control {
186 display: inline-flex;
192 @mixin edit-button-control {
200 display: inline-flex;
206 my-edit-button + .more {
212 @mixin edit-button-in-mobile-view {
215 ::ng-deep .action-button-edit {
226 @media screen and (min-width: $small-view) {
227 :host-context(.expanded) {
228 @include more-dropdown-control();
232 @media screen and (max-width: $small-view) {
233 :host-context(.expanded) {
234 @include edit-button-control();
238 @media screen and (max-width: $mobile-view) {
239 :host-context(.expanded) {
240 @include edit-button-in-mobile-view();
244 @media screen and (min-width: #{$small-view + $menu-width}) {
245 :host-context(.main-col:not(.expanded)) {
246 @include more-dropdown-control();
250 @media screen and (max-width: #{$small-view + $menu-width}) {
251 :host-context(.main-col:not(.expanded)) {
252 @include edit-button-control();
256 @media screen and (max-width: #{$mobile-view + $menu-width}) {
257 :host-context(.main-col:not(.expanded)) {
258 @include edit-button-in-mobile-view();