aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/sass
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/sass')
-rw-r--r--client/src/sass/include/_miniature.scss13
-rw-r--r--client/src/sass/include/_mixins.scss15
-rw-r--r--client/src/sass/player/index.scss3
-rw-r--r--client/src/sass/player/playlist.scss165
4 files changed, 183 insertions, 13 deletions
diff --git a/client/src/sass/include/_miniature.scss b/client/src/sass/include/_miniature.scss
index 976bbf4d6..97b4c690b 100644
--- a/client/src/sass/include/_miniature.scss
+++ b/client/src/sass/include/_miniature.scss
@@ -52,18 +52,7 @@ $play-overlay-width: 18px;
52 } 52 }
53 53
54 .icon { 54 .icon {
55 width: 0; 55 @include play-icon($play-overlay-height, $play-overlay-width);
56 height: 0;
57
58 position: absolute;
59 left: 50%;
60 top: 50%;
61 transform: translate(-50%, -50%) scale(0.5);
62
63 border-top: ($play-overlay-height / 2) solid transparent;
64 border-bottom: ($play-overlay-height / 2) solid transparent;
65
66 border-left: $play-overlay-width solid rgba(255, 255, 255, 0.95);
67 } 56 }
68 } 57 }
69 58
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index ee2fe0497..e4c2dffa0 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -1019,3 +1019,18 @@
1019 } 1019 }
1020 } 1020 }
1021} 1021}
1022
1023@mixin play-icon ($width, $height) {
1024 width: 0;
1025 height: 0;
1026
1027 position: absolute;
1028 left: 50%;
1029 top: 50%;
1030 transform: translate(-50%, -50%) scale(0.5);
1031
1032 border-top: ($height / 2) solid transparent;
1033 border-bottom: ($height / 2) solid transparent;
1034
1035 border-left: $width solid rgba(255, 255, 255, 0.95);
1036}
diff --git a/client/src/sass/player/index.scss b/client/src/sass/player/index.scss
index 58ce3ac96..fe92ce5e0 100644
--- a/client/src/sass/player/index.scss
+++ b/client/src/sass/player/index.scss
@@ -4,4 +4,5 @@
4@import './settings-menu'; 4@import './settings-menu';
5@import './spinner'; 5@import './spinner';
6@import './upnext'; 6@import './upnext';
7@import './bezels.scss'; \ No newline at end of file 7@import './bezels.scss';
8@import './playlist.scss';
diff --git a/client/src/sass/player/playlist.scss b/client/src/sass/player/playlist.scss
new file mode 100644
index 000000000..c242acba8
--- /dev/null
+++ b/client/src/sass/player/playlist.scss
@@ -0,0 +1,165 @@
1$playlist-menu-width: 350px;
2
3.vjs-playlist-menu {
4 position: absolute;
5 right: 0;
6 height: 100%;
7 width: $playlist-menu-width;
8 background: rgba(0, 0, 0, 0.8);
9 z-index: 101;
10 transition: right 0.2s;
11
12 // Hidden
13 right: -$playlist-menu-width;
14
15 ol {
16 padding: 0;
17 margin: 0;
18 }
19
20 .header {
21 border-bottom: 1px solid $header-border-color;
22 padding: 20px 10px;
23 display: flex;
24 justify-content: space-between;
25
26 .title {
27 font-size: 14px;
28 margin-bottom: 5px;
29 white-space: nowrap;
30 text-overflow: ellipsis;
31 }
32
33 .channel {
34 font-size: 11px;
35 color: #bfbfbf;
36 white-space: nowrap;
37 text-overflow: ellipsis;
38 }
39
40 .cross {
41 cursor: pointer;
42 width: 20px;
43 height: 20px;
44 mask-image: url('#{$assets-path}/images/feather/x.svg');
45 -webkit-mask-image: url('#{$assets-path}/images/feather/x.svg');
46 background-color: white;
47 mask-size: cover;
48 -webkit-mask-size: cover;
49 }
50 }
51}
52
53.playlist-menu-displayed {
54
55 .vjs-playlist-menu {
56 right: 0;
57 display: block;
58 }
59
60 .vjs-playlist-button {
61 display: none;
62 }
63}
64
65@media screen and (max-width: $playlist-menu-width) {
66 .vjs-playlist-menu {
67 width: 100%;
68 min-width: unset;
69 display: none;
70 }
71
72 .playlist-menu-displayed .vjs-playlist-menu {
73 display: block;
74 }
75}
76
77.vjs-playlist-button {
78 font-size: 15px;
79 position: absolute;
80 right: 0;
81 top: 0;
82 z-index: 100;
83 padding: 1em;
84 cursor: pointer;
85}
86
87.vjs-playlist-icon {
88 width: 22px;
89 height: 22px;
90 mask-image: url('#{$assets-path}/images/feather/list.svg');
91 -webkit-mask-image: url('#{$assets-path}/images/feather/list.svg');
92 background-color: white;
93 mask-size: cover;
94 -webkit-mask-size: cover;
95 margin-bottom: 3px;
96}
97
98.vjs-playing.vjs-user-inactive .vjs-playlist-button {
99 opacity: 0;
100
101 transition: opacity 1s;
102}
103
104.vjs-playing.vjs-no-flex.vjs-user-inactive .vjs-playlist-button {
105 display: none;
106}
107
108.vjs-playlist-menu-item {
109 cursor: pointer;
110 display: flex;
111 padding: 10px 0;
112
113 .item-position-block {
114 position: relative;
115 display: flex;
116 align-items: center;
117 justify-content: center;
118 width: 30px;
119 }
120
121 .item-player {
122 display: none;
123
124 @include play-icon(20px, 16px);
125 }
126
127 &.vjs-selected {
128 background-color: rgba(150, 150, 150, 0.3);
129
130 .item-position {
131 display: none;
132 }
133
134 .item-player {
135 display: block;
136 }
137 }
138
139 &:hover {
140 background-color: rgba(150, 150, 150, 0.2);
141 }
142
143 img {
144 width: 80px;
145 height: 40px;
146 }
147
148 .info-block {
149 margin-left: 10px;
150
151 .title {
152 font-size: 13px;
153 margin-bottom: 5px;
154 white-space: nowrap;
155 text-overflow: ellipsis;
156 }
157
158 .channel {
159 font-size: 11px;
160 color: #bfbfbf;
161 white-space: nowrap;
162 text-overflow: ellipsis;
163 }
164 }
165}