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 margin-right(5px);
100 .video-info-timestamp {
101 color: pvar(--greyForegroundColor);
110 font-weight: $font-semibold;
111 display: inline-block;
116 @include margin-left(auto);
118 justify-self: flex-end;
131 @include apply-svg-color(pvar(--greyForegroundColor));
145 @include dropdown-with-icon-item;
151 @include padding-left(35px);
162 my-peertube-checkbox {
163 @include margin-right(5px);
167 @include peertube-button;
168 @include orange-button;
175 @mixin more-dropdown-control {
181 display: inline-flex;
187 @mixin edit-button-control {
195 display: inline-flex;
201 my-edit-button + .more {
207 @mixin edit-button-in-mobile-view {
210 ::ng-deep .action-button-edit {
221 @media screen and (min-width: $small-view) {
222 :host-context(.expanded) {
223 @include more-dropdown-control();
227 @media screen and (max-width: $small-view) {
228 :host-context(.expanded) {
229 @include edit-button-control();
233 @media screen and (max-width: $mobile-view) {
234 :host-context(.expanded) {
235 @include edit-button-in-mobile-view();
239 @media screen and (min-width: #{$small-view + $menu-width}) {
240 :host-context(.main-col:not(.expanded)) {
241 @include more-dropdown-control();
245 @media screen and (max-width: #{$small-view + $menu-width}) {
246 :host-context(.main-col:not(.expanded)) {
247 @include edit-button-control();
251 @media screen and (max-width: #{$mobile-view + $menu-width}) {
252 :host-context(.main-col:not(.expanded)) {
253 @include edit-button-in-mobile-view();