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