]>
Commit | Line | Data |
---|---|---|
1 | @use '_variables' as *; | |
2 | @use '_mixins' as *; | |
3 | @use '_miniature' as *; | |
4 | ||
5 | .root { | |
6 | display: grid; | |
7 | grid-template-columns: auto 1fr; | |
8 | } | |
9 | ||
10 | .playlist-info { | |
11 | @include margin-left(calc(#{pvar(--horizontalMarginContent)} * -1)); | |
12 | ||
13 | grid-column: 1; | |
14 | background-color: pvar(--submenuBackgroundColor); | |
15 | margin-top: -$sub-menu-margin-bottom; | |
16 | ||
17 | padding: 15px; | |
18 | ||
19 | display: flex; | |
20 | flex-direction: column; | |
21 | ||
22 | /* fix ellipsis dots background color */ | |
23 | ::ng-deep .miniature-name::after { | |
24 | background-color: pvar(--submenuBackgroundColor) !important; | |
25 | } | |
26 | } | |
27 | ||
28 | .playlist-buttons { | |
29 | display: flex; | |
30 | margin: 30px 0 10px; | |
31 | ||
32 | .share-button { | |
33 | @include peertube-button; | |
34 | @include button-with-icon(17px, 3px, -1px); | |
35 | @include grey-button; | |
36 | @include apply-svg-color(pvar(--actionButtonColor)); | |
37 | ||
38 | @include margin-right(10px); | |
39 | } | |
40 | } | |
41 | ||
42 | // Thanks Angular CDK <3 https://material.angular.io/cdk/drag-drop/examples | |
43 | .cdk-drag-preview { | |
44 | box-sizing: border-box; | |
45 | border-radius: 4px; | |
46 | box-shadow: | |
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); | |
50 | } | |
51 | ||
52 | .cdk-drag-placeholder { | |
53 | opacity: 0; | |
54 | } | |
55 | ||
56 | .cdk-drag-animating { | |
57 | transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); | |
58 | } | |
59 | ||
60 | .video:last-child { | |
61 | border: 0; | |
62 | } | |
63 | ||
64 | .videos.cdk-drop-list-dragging .video:not(.cdk-drag-placeholder) { | |
65 | transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); | |
66 | } | |
67 | ||
68 | .playlist-elements { | |
69 | grid-column: 2; | |
70 | } | |
71 | ||
72 | my-video-playlist-miniature { | |
73 | width: $video-thumbnail-width; | |
74 | } | |
75 | ||
76 | @include on-small-main-col { | |
77 | my-video-playlist-miniature { | |
78 | width: $video-thumbnail-medium-width; | |
79 | } | |
80 | } | |
81 | ||
82 | @include on-mobile-main-col { | |
83 | .root { | |
84 | display: block; | |
85 | } | |
86 | ||
87 | .playlist-info { | |
88 | width: calc(100% + (2 * var(--horizontalMarginContent))); | |
89 | padding-top: 20px; | |
90 | margin-bottom: 10px; | |
91 | } | |
92 | ||
93 | my-video-playlist-miniature, | |
94 | .playlist-buttons { | |
95 | @include margin-left(auto); | |
96 | @include margin-right(auto); | |
97 | } | |
98 | ||
99 | ::ng-deep my-video-playlist-element-miniature { | |
100 | ||
101 | .video { | |
102 | padding: 5px !important; | |
103 | } | |
104 | ||
105 | .position { | |
106 | @include margin-right(5px !important); | |
107 | } | |
108 | } | |
109 | } |