]>
Commit | Line | Data |
---|---|---|
8cbc40b2 C |
1 | @use '_variables' as *; |
2 | @use '_mixins' as *; | |
fa12eacc | 3 | @use '_bootstrap-variables'; |
8cbc40b2 | 4 | @use '_miniature' as *; |
72675ebe C |
5 | |
6 | .playlist { | |
19e7a900 | 7 | position: relative; |
72675ebe C |
8 | min-width: 200px; |
9 | max-width: 470px; | |
10 | height: 66vh; | |
e66883b3 | 11 | background-color: pvar(--mainBackgroundColor); |
72675ebe C |
12 | overflow-y: auto; |
13 | border-bottom: 1px solid $separator-border-color; | |
14 | ||
15 | .playlist-info { | |
16 | padding: 5px 30px; | |
b788e691 | 17 | background-color: pvar(--greyBackgroundColor); |
4c8749cb C |
18 | } |
19 | ||
20 | .playlist-display-name { | |
21 | font-size: 18px; | |
22 | font-weight: $font-semibold; | |
23 | margin-bottom: 5px; | |
72675ebe | 24 | |
4c8749cb C |
25 | .pt-badge { |
26 | @include margin-left(5px); | |
72675ebe | 27 | } |
4c8749cb | 28 | } |
72675ebe | 29 | |
4c8749cb C |
30 | .playlist-by-index { |
31 | color: pvar(--greyForegroundColor); | |
32 | display: flex; | |
72675ebe | 33 | |
4c8749cb C |
34 | .playlist-by { |
35 | @include margin-right(5px); | |
36 | } | |
72675ebe | 37 | |
4c8749cb C |
38 | .playlist-index span:first-child::after { |
39 | content: '/'; | |
40 | margin: 0 3px; | |
72675ebe | 41 | } |
4c8749cb | 42 | } |
bee29df8 | 43 | |
4c8749cb C |
44 | .playlist-controls { |
45 | display: flex; | |
46 | margin: 10px 0; | |
bee29df8 | 47 | |
4c8749cb C |
48 | my-global-icon:not(:last-child) { |
49 | @include margin-right(.5rem); | |
50 | } | |
88a7f93f | 51 | |
4c8749cb C |
52 | my-global-icon { |
53 | &:not(.active) { | |
54 | opacity: .5; | |
55 | } | |
bee29df8 | 56 | |
4c8749cb C |
57 | ::ng-deep { |
58 | cursor: pointer; | |
bee29df8 RK |
59 | } |
60 | } | |
72675ebe C |
61 | } |
62 | ||
63 | my-video-playlist-element-miniature { | |
03652b31 | 64 | ::ng-deep { |
72675ebe C |
65 | .video { |
66 | .position { | |
27bc9586 | 67 | @include margin-right(0); |
72675ebe C |
68 | } |
69 | ||
70 | .video-info { | |
71 | .video-info-name { | |
72 | font-size: 15px; | |
73 | } | |
74 | } | |
75 | } | |
76 | ||
77 | my-video-thumbnail { | |
78 | @include thumbnail-size-component(90px, 50px); | |
79 | } | |
bfbd9128 C |
80 | |
81 | .fake-thumbnail { | |
82 | width: 90px; | |
83 | height: 50px; | |
84 | } | |
72675ebe C |
85 | } |
86 | } | |
87 | } | |
88 |