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));
81 flex-direction: column;
82 align-self: flex-start;
87 align-items: baseline;
95 @include peertube-badge;
101 .video-info-timestamp {
102 color: pvar(--greyForegroundColor);
111 font-weight: $font-semibold;
112 display: inline-block;
117 @include margin-left(auto);
119 justify-self: flex-end;
132 @include apply-svg-color(pvar(--greyForegroundColor));
146 @include dropdown-with-icon-item;
152 @include padding-left(35px);
163 my-peertube-checkbox {
164 @include margin-right(5px);
168 @include peertube-button;
169 @include orange-button;
176 @mixin more-dropdown-control {
182 display: inline-flex;
188 @mixin edit-button-control {
196 display: inline-flex;
202 my-edit-button + .more {
208 @mixin edit-button-in-mobile-view {
211 ::ng-deep .action-button-edit {
222 @media screen and (min-width: $small-view) {
223 :host-context(.expanded) {
224 @include more-dropdown-control();
228 @media screen and (max-width: $small-view) {
229 :host-context(.expanded) {
230 @include edit-button-control();
234 @media screen and (max-width: $mobile-view) {
235 :host-context(.expanded) {
236 @include edit-button-in-mobile-view();
240 @media screen and (min-width: #{$small-view + $menu-width}) {
241 :host-context(.main-col:not(.expanded)) {
242 @include more-dropdown-control();
246 @media screen and (max-width: #{$small-view + $menu-width}) {
247 :host-context(.main-col:not(.expanded)) {
248 @include edit-button-control();
252 @media screen and (max-width: #{$mobile-view + $menu-width}) {
253 :host-context(.main-col:not(.expanded)) {
254 @include edit-button-in-mobile-view();