7 grid-template-columns: auto 1fr;
12 background-color: pvar(--submenuBackgroundColor);
13 margin-left: calc(#{pvar(--horizontalMarginContent)} * -1);
14 margin-top: -$sub-menu-margin-bottom;
19 flex-direction: column;
21 /* fix ellipsis dots background color */
22 ::ng-deep .miniature-name::after {
23 background-color: pvar(--submenuBackgroundColor) !important;
32 @include peertube-button;
33 @include button-with-icon(17px, 3px, -1px);
35 @include apply-svg-color(pvar(--actionButtonColor));
41 // Thanks Angular CDK <3 https://material.angular.io/cdk/drag-drop/examples
43 box-sizing: border-box;
46 0 5px 5px -3px rgba(0, 0, 0, 0.2),
47 0 8px 10px 1px rgba(0, 0, 0, 0.14),
48 0 3px 14px 2px rgba(0, 0, 0, 0.12);
51 .cdk-drag-placeholder {
56 transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
63 .videos.cdk-drop-list-dragging .video:not(.cdk-drag-placeholder) {
64 transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
71 my-video-playlist-miniature {
72 width: $video-thumbnail-width;
75 @include on-small-main-col {
76 my-video-playlist-miniature {
77 width: $video-thumbnail-medium-width;
81 @include on-mobile-main-col {
87 width: calc(100% + (2 * var(--horizontalMarginContent)));
92 my-video-playlist-miniature,
98 ::ng-deep my-video-playlist-element-miniature {
101 padding: 5px !important;
105 margin-right: 5px !important;