]>
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; | |
17 | background-color: #e4e4e4; | |
18 | ||
19 | .playlist-display-name { | |
20 | font-size: 18px; | |
21 | font-weight: $font-semibold; | |
22 | margin-bottom: 5px; | |
23 | } | |
24 | ||
25 | .playlist-by-index { | |
e66883b3 | 26 | color: pvar(--greyForegroundColor); |
72675ebe C |
27 | display: flex; |
28 | ||
29 | .playlist-by { | |
27bc9586 | 30 | @include margin-right(5px); |
72675ebe C |
31 | } |
32 | ||
33 | .playlist-index span:first-child::after { | |
34 | content: '/'; | |
35 | margin: 0 3px; | |
36 | } | |
37 | } | |
bee29df8 RK |
38 | |
39 | .playlist-controls { | |
40 | display: flex; | |
41 | margin: 10px 0; | |
42 | ||
88a7f93f | 43 | my-global-icon:not(:last-child) { |
27bc9586 | 44 | @include margin-right(.5rem); |
88a7f93f RK |
45 | } |
46 | ||
bee29df8 RK |
47 | my-global-icon { |
48 | &:not(.active) { | |
931d3430 | 49 | opacity: .5; |
bee29df8 RK |
50 | } |
51 | ||
52 | ::ng-deep { | |
53 | cursor: pointer; | |
54 | } | |
55 | } | |
56 | } | |
72675ebe C |
57 | } |
58 | ||
59 | my-video-playlist-element-miniature { | |
03652b31 | 60 | ::ng-deep { |
72675ebe C |
61 | .video { |
62 | .position { | |
27bc9586 | 63 | @include margin-right(0); |
72675ebe C |
64 | } |
65 | ||
66 | .video-info { | |
67 | .video-info-name { | |
68 | font-size: 15px; | |
69 | } | |
70 | } | |
71 | } | |
72 | ||
73 | my-video-thumbnail { | |
74 | @include thumbnail-size-component(90px, 50px); | |
75 | } | |
bfbd9128 C |
76 | |
77 | .fake-thumbnail { | |
78 | width: 90px; | |
79 | height: 50px; | |
80 | } | |
72675ebe C |
81 | } |
82 | } | |
83 | } | |
84 |