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;
90 .video-info-timestamp {
91 color: pvar(--greyForegroundColor);
100 font-weight: $font-semibold;
101 display: inline-block;
106 @include margin-left(auto);
108 justify-self: flex-end;
121 @include apply-svg-color(pvar(--greyForegroundColor));
135 @include dropdown-with-icon-item;
141 @include padding-left(35px);
152 my-peertube-checkbox {
153 @include margin-right(5px);
157 @include peertube-button;
158 @include orange-button;
165 @mixin more-dropdown-control {
171 display: inline-flex;
177 @mixin edit-button-control {
185 display: inline-flex;
191 my-edit-button + .more {
197 @mixin edit-button-in-mobile-view {
200 ::ng-deep .action-button-edit {
211 @media screen and (min-width: $small-view) {
212 :host-context(.expanded) {
213 @include more-dropdown-control();
217 @media screen and (max-width: $small-view) {
218 :host-context(.expanded) {
219 @include edit-button-control();
223 @media screen and (max-width: $mobile-view) {
224 :host-context(.expanded) {
225 @include edit-button-in-mobile-view();
229 @media screen and (min-width: #{$small-view + $menu-width}) {
230 :host-context(.main-col:not(.expanded)) {
231 @include more-dropdown-control();
235 @media screen and (max-width: #{$small-view + $menu-width}) {
236 :host-context(.main-col:not(.expanded)) {
237 @include edit-button-control();
241 @media screen and (max-width: #{$mobile-view + $menu-width}) {
242 :host-context(.main-col:not(.expanded)) {
243 @include edit-button-in-mobile-view();