7 grid-template-columns: auto 1fr;
11 @include margin-left(calc(#{pvar(--horizontalMarginContent)} * -1));
14 background-color: pvar(--submenuBackgroundColor);
15 margin-top: -$sub-menu-margin-bottom;
20 flex-direction: column;
22 /* fix ellipsis dots background color */
23 ::ng-deep .miniature-name::after {
24 background-color: pvar(--submenuBackgroundColor) !important;
33 @include peertube-button;
34 @include button-with-icon(17px, 3px, -1px);
36 @include apply-svg-color(pvar(--actionButtonColor));
38 @include margin-right(10px);
42 // Thanks Angular CDK <3 https://material.angular.io/cdk/drag-drop/examples
44 box-sizing: border-box;
47 0 5px 5px -3px rgba(0, 0, 0, 0.2),
48 0 8px 10px 1px rgba(0, 0, 0, 0.14),
49 0 3px 14px 2px rgba(0, 0, 0, 0.12);
52 .cdk-drag-placeholder {
57 transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
64 .videos.cdk-drop-list-dragging .video:not(.cdk-drag-placeholder) {
65 transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
72 my-video-playlist-miniature {
73 width: $video-thumbnail-width;
76 @include on-small-main-col {
77 my-video-playlist-miniature {
78 width: $video-thumbnail-medium-width;
82 @include on-mobile-main-col {
88 width: calc(100% + (2 * var(--horizontalMarginContent)));
93 my-video-playlist-miniature,
95 @include margin-left(auto);
96 @include margin-right(auto);
99 ::ng-deep my-video-playlist-element-miniature {
102 padding: 5px !important;
106 @include margin-right(5px !important);