]>
Commit | Line | Data |
---|---|---|
f0a39880 C |
1 | @import '_variables'; |
2 | @import '_mixins'; | |
c5a1ae50 C |
3 | @import '_miniature'; |
4 | ||
bce47964 | 5 | .playlist-info { |
e66883b3 | 6 | background-color: pvar(--submenuColor); |
10846ef6 | 7 | margin-left: -$not-expanded-horizontal-margins; |
bce47964 C |
8 | margin-top: -$sub-menu-margin-bottom; |
9 | ||
10846ef6 | 10 | padding: 10px; |
bce47964 C |
11 | |
12 | display: flex; | |
82f443de | 13 | flex-direction: column; |
c9ea405f | 14 | justify-content: flex-start; |
82f443de | 15 | align-items: center; |
4682468d K |
16 | |
17 | /* fix ellipsis dots background color */ | |
18 | ::ng-deep .miniature-name::after { | |
e66883b3 | 19 | background-color: pvar(--submenuColor) !important; |
4682468d | 20 | } |
bce47964 C |
21 | } |
22 | ||
82f443de C |
23 | .playlist-buttons { |
24 | display:flex; | |
25 | margin: 30px 0 10px 0; | |
26 | ||
27 | .share-button { | |
28 | @include peertube-button; | |
29 | @include button-with-icon(17px, 3px, -1px); | |
30 | @include grey-button; | |
31 | @include apply-svg-color(pvar(--actionButtonColor)); | |
32 | ||
33 | margin-right: 10px; | |
34 | } | |
35 | } | |
36 | ||
15e9d5ca C |
37 | // Thanks Angular CDK <3 https://material.angular.io/cdk/drag-drop/examples |
38 | .cdk-drag-preview { | |
39 | box-sizing: border-box; | |
40 | border-radius: 4px; | |
41 | box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), | |
42 | 0 8px 10px 1px rgba(0, 0, 0, 0.14), | |
43 | 0 3px 14px 2px rgba(0, 0, 0, 0.12); | |
44 | } | |
c5a1ae50 | 45 | |
15e9d5ca C |
46 | .cdk-drag-placeholder { |
47 | opacity: 0; | |
48 | } | |
c5a1ae50 | 49 | |
15e9d5ca C |
50 | .cdk-drag-animating { |
51 | transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); | |
52 | } | |
c5a1ae50 | 53 | |
15e9d5ca C |
54 | .video:last-child { |
55 | border: none; | |
56 | } | |
c5a1ae50 | 57 | |
15e9d5ca C |
58 | .videos.cdk-drop-list-dragging .video:not(.cdk-drag-placeholder) { |
59 | transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); | |
c5a1ae50 | 60 | } |
4682468d K |
61 | |
62 | @media screen and (max-width: $small-view) { | |
63 | .playlist-info { | |
10846ef6 C |
64 | width: 100vw; |
65 | padding-top: 20px; | |
66 | margin-left: calc(#{var(--expanded-horizontal-margin-content)} * -1); | |
4682468d | 67 | } |
2d0d756e C |
68 | |
69 | .playlist-elements { | |
70 | padding: 0 !important; | |
71 | } | |
72 | ||
73 | ::ng-deep my-video-playlist-element-miniature { | |
74 | ||
75 | .video { | |
76 | padding: 5px !important; | |
77 | } | |
78 | ||
79 | .position { | |
80 | margin-right: 5px !important; | |
81 | } | |
82 | } | |
4682468d | 83 | } |