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 display: flex; // Avoids an issue with line-height that adds space below the element
26 grid-template-columns: 1fr auto;
27 background-color: pvar(--mainBackgroundColor);
29 border-bottom: 1px solid $separator-border-color;
36 background-color: rgba(0, 0, 0, 0.05);
43 @media not all and (hover: hover) and (pointer: fine) {
45 opacity: 1 !important;
50 background-color: rgba(0, 0, 0, 0.02);
54 @include disable-default-a-behaviour;
56 color: pvar(--mainForegroundColor);
63 font-weight: $font-semibold;
65 color: pvar(--greyForegroundColor);
69 @include apply-svg-color(pvar(--greyForegroundColor));
79 flex-direction: column;
80 align-self: flex-start;
87 .video-info-account, .video-info-timestamp {
88 color: pvar(--greyForegroundColor);
95 font-weight: $font-semibold;
96 display: inline-block;
101 .more, my-edit-button {
102 justify-self: flex-end;
116 @include apply-svg-color(pvar(--greyForegroundColor));
130 @include dropdown-with-icon-item;
146 my-peertube-checkbox {
151 @include peertube-button;
152 @include orange-button;
159 @mixin more-dropdown-control {
165 display: inline-flex;
171 @mixin edit-button-control {
179 display: inline-flex;
185 my-edit-button + .more {
191 @mixin edit-button-in-mobile-view {
194 ::ng-deep .action-button-edit {
205 @media screen and (min-width: $small-view) {
206 :host-context(.expanded) {
207 @include more-dropdown-control();
211 @media screen and (max-width: $small-view) {
212 :host-context(.expanded) {
213 @include edit-button-control();
217 @media screen and (max-width: $mobile-view) {
218 :host-context(.expanded) {
219 @include edit-button-in-mobile-view();
223 @media screen and (min-width: #{$small-view + $menu-width}) {
224 :host-context(.main-col:not(.expanded)) {
225 @include more-dropdown-control();
229 @media screen and (max-width: #{$small-view + $menu-width}) {
230 :host-context(.main-col:not(.expanded)) {
231 @include edit-button-control();
235 @media screen and (max-width: #{$mobile-view + $menu-width}) {
236 :host-context(.main-col:not(.expanded)) {
237 @include edit-button-in-mobile-view();