]>
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); |
bce47964 C |
7 | margin-left: -15px; |
8 | margin-top: -$sub-menu-margin-bottom; | |
9 | ||
ad453580 | 10 | padding: $sub-menu-margin-bottom 0 -15px 0; |
bce47964 C |
11 | |
12 | display: flex; | |
13 | justify-content: center; | |
4682468d K |
14 | |
15 | /* fix ellipsis dots background color */ | |
16 | ::ng-deep .miniature-name::after { | |
e66883b3 | 17 | background-color: pvar(--submenuColor) !important; |
4682468d | 18 | } |
bce47964 C |
19 | } |
20 | ||
15e9d5ca C |
21 | // Thanks Angular CDK <3 https://material.angular.io/cdk/drag-drop/examples |
22 | .cdk-drag-preview { | |
23 | box-sizing: border-box; | |
24 | border-radius: 4px; | |
25 | box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), | |
26 | 0 8px 10px 1px rgba(0, 0, 0, 0.14), | |
27 | 0 3px 14px 2px rgba(0, 0, 0, 0.12); | |
28 | } | |
c5a1ae50 | 29 | |
15e9d5ca C |
30 | .cdk-drag-placeholder { |
31 | opacity: 0; | |
32 | } | |
c5a1ae50 | 33 | |
15e9d5ca C |
34 | .cdk-drag-animating { |
35 | transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); | |
36 | } | |
c5a1ae50 | 37 | |
15e9d5ca C |
38 | .video:last-child { |
39 | border: none; | |
40 | } | |
c5a1ae50 | 41 | |
15e9d5ca C |
42 | .videos.cdk-drop-list-dragging .video:not(.cdk-drag-placeholder) { |
43 | transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); | |
c5a1ae50 | 44 | } |
4682468d K |
45 | |
46 | @media screen and (max-width: $small-view) { | |
47 | .playlist-info { | |
48 | margin-top: -$sub-menu-margin-bottom-small-view; | |
49 | } | |
50 | } | |
70afd522 | 51 | |
52 | @media not all and (hover: hover) and (pointer: fine) { | |
53 | .video { | |
54 | .more { | |
55 | opacity: 1; | |
56 | } | |
57 | } | |
58 | } |