1 | $wp-mute-solo-color: #343a40 !default;
|
2 | $wp-mute-solo-hover-color: #fff !default;
|
3 | $wp-mute-solo-focus-color: rgba(52, 58, 64, 0.5) !default;
|
4 | $wp-btn-danger-background-hover-color: #c82333 !default;
|
5 | $wp-btn-danger-border-hover-color: #bd2130 !default;
|
6 | $wp-btn-danger-background-color: #dc3545 !default;
|
7 | $wp-btn-danger-border-color: #dc3545 !default;
|
8 | $wp-btn-danger-focus-color: rgba(225, 83, 97, 0.5) !default;
|
9 | $wp-btn-danger-color: #fff !default;
|
10 | $wp-btn-info-background-hover-color: #138496 !default;
|
11 | $wp-btn-info-border-hover-color: #117a8b !default;
|
12 | $wp-btn-info-background-color: #17a2b8 !default;
|
13 | $wp-btn-info-border-color: #17a2b8 !default;
|
14 | $wp-btn-info-focus-color: rgba(58, 176, 195, 0.5) !default;
|
15 | $wp-btn-info-color: #fff !default;
|
16 | $wp-selection-background-color: rgba(0, 0, 0, 0.1) !default;
|
17 | $wp-selection-point-color: red !default;
|
18 | $wp-fade-background-color: rgba(0, 0, 0, 0.1) !default;
|
19 | $wp-channel-color: grey !default;
|
20 | $wp-channel-progress-color: #fbbc04 !default;
|
21 | $wp-cursor-color: black !default;
|
22 | $wp-tracks-container-background-color: #e0eff1 !default;
|
23 | $wp-controls-background-color: #fff !default;
|
24 | $wp-controls-border-color: #000 !default;
|
25 | $wp-range-slider-label-color: black !default;
|
26 | $wp-range-slider-color: goldenrod !default;
|
27 | $wp-range-slider-focus-color: black !default;
|
28 | $wp-range-slider-background-color: #ddd !default;
|
29 | $wp-range-slider-background-focus-color: #bbb !default;
|
30 | $wp-annotation-box-border-color: grey !default;
|
31 | $wp-annotation-current-background-color: #ebf4f6 !default;
|
32 | $wp-annotation-icon-hover-color: orange !default;
|
33 |
|
34 | :root {
|
35 | --wp-controls-border-color: #{$wp-controls-border-color};
|
36 | --wp-controls-background-color: #{$wp-controls-background-color};
|
37 | --wp-mute-solo-color: #{$wp-mute-solo-color};
|
38 | --wp-mute-solo-hover-color: #{$wp-mute-solo-hover-color};
|
39 | --wp-mute-solo-focus-color: #{$wp-mute-solo-focus-color};
|
40 | --wp-btn-danger-background-hover-color: #{$wp-btn-danger-background-hover-color};
|
41 | --wp-btn-danger-border-hover-color: #{$wp-btn-danger-border-hover-color};
|
42 | --wp-btn-danger-background-color: #{$wp-btn-danger-background-color};
|
43 | --wp-btn-danger-border-color: #{$wp-btn-danger-border-color};
|
44 | --wp-btn-danger-focus-color: #{$wp-btn-danger-focus-color};
|
45 | --wp-btn-danger-color: #{$wp-btn-danger-color};
|
46 | --wp-btn-info-background-hover-color: #{$wp-btn-info-background-hover-color};
|
47 | --wp-btn-info-border-hover-color: #{$wp-btn-info-border-hover-color};
|
48 | --wp-btn-info-background-color: #{$wp-btn-info-background-color};
|
49 | --wp-btn-info-border-color: #{$wp-btn-info-border-color};
|
50 | --wp-btn-info-focus-color: #{$wp-btn-info-focus-color};
|
51 | --wp-btn-info-color: #{$wp-btn-info-color};
|
52 | --wp-fade-background-color: #{$wp-fade-background-color};
|
53 | --wp-channel-color: #{$wp-channel-color};
|
54 | --wp-channel-progress-color: #{$wp-channel-progress-color};
|
55 | --wp-cursor-color: #{$wp-cursor-color};
|
56 | --wp-selection-background-color: #{$wp-selection-background-color};
|
57 | --wp-selection-point-color: #{$wp-selection-point-color};
|
58 | --wp-tracks-container-background-color: #{$wp-tracks-container-background-color};
|
59 | --wp-range-slider-label-color: #{$wp-range-slider-label-color};
|
60 | --wp-range-slider-color: #{$wp-range-slider-color};
|
61 | --wp-range-slider-focus-color: #{$wp-range-slider-focus-color};
|
62 | --wp-range-slider-background-color: #{$wp-range-slider-background-color};
|
63 | --wp-range-slider-background-focus-color: #{$wp-range-slider-background-focus-color};
|
64 | --wp-annotation-box-border-color: #{$wp-annotation-box-border-color};
|
65 | --wp-annotation-current-background-color: #{$wp-annotation-current-background-color};
|
66 | --wp-annotation-icon-hover-color: #{$wp-annotation-icon-hover-color};
|
67 | }
|
68 |
|
69 | .playlist {
|
70 | *, ::after, ::before {
|
71 | box-sizing: border-box;
|
72 | }
|
73 |
|
74 | margin: 2em 0;
|
75 |
|
76 | .btn:not(:disabled) {
|
77 | cursor: pointer;
|
78 | }
|
79 |
|
80 | .btn {
|
81 | display: inline-block;
|
82 | font-weight: 400;
|
83 | text-align: center;
|
84 | vertical-align: middle;
|
85 | -webkit-user-select: none;
|
86 | -moz-user-select: none;
|
87 | -ms-user-select: none;
|
88 | user-select: none;
|
89 | background-color: transparent;
|
90 | border: 1px solid transparent;
|
91 | transition: color .15s ease-in-out,
|
92 | background-color .15s ease-in-out,
|
93 | border-color .15s ease-in-out,
|
94 | box-shadow .15s ease-in-out;
|
95 | }
|
96 |
|
97 | .btn-outline-dark {
|
98 | color: var(--wp-mute-solo-color);
|
99 | border-color: var(--wp-mute-solo-color);
|
100 | }
|
101 |
|
102 | .btn-outline-dark:hover {
|
103 | color: var(--wp-mute-solo-hover-color);
|
104 | background-color: var(--wp-mute-solo-color);
|
105 | border-color: var(--wp-mute-solo-color);
|
106 | }
|
107 |
|
108 | .btn-outline-dark:active:focus, .btn-outline-dark:focus {
|
109 | box-shadow: 0 0 0 0.2rem var(--wp-mute-solo-focus-color);
|
110 | }
|
111 |
|
112 | .btn-danger {
|
113 | color: var(--wp-btn-danger-color);
|
114 | background-color: var(--wp-btn-danger-background-color);
|
115 | border-color: var(--wp-btn-danger-border-color);
|
116 | }
|
117 |
|
118 | .btn-danger:hover {
|
119 | color: var(--wp-btn-danger-color);
|
120 | background-color: var(--wp-btn-danger-background-hover-color);
|
121 | border-color: var(--wp-btn-danger-border-hover-color);
|
122 | }
|
123 |
|
124 | .btn-danger:active:focus, .btn-danger:focus {
|
125 | box-shadow: 0 0 0 0.2rem var(--wp-btn-danger-focus-color);
|
126 | }
|
127 |
|
128 | .btn-info {
|
129 | color: var(--wp-btn-info-color);
|
130 | background-color: var(--wp-btn-info-background-color);
|
131 | border-color: var(--wp-btn-info-border-color);
|
132 | }
|
133 |
|
134 | .btn-info:hover {
|
135 | color: var(--wp-btn-info-color);
|
136 | background-color: var(--wp-btn-info-background-hover-color);
|
137 | border-color: var(--wp-btn-info-border-hover-color);
|
138 | }
|
139 |
|
140 | .btn-info:active:focus, .btn-info:focus {
|
141 | box-shadow: 0 0 0 0.2rem var(--wp-btn-info-focus-color);
|
142 | }
|
143 |
|
144 | .btn-xs {
|
145 | padding: .25rem .4rem;
|
146 | font-size: .875rem;
|
147 | line-height: .5;
|
148 | border-radius: .2rem;
|
149 | }
|
150 |
|
151 | .btn-group {
|
152 | margin-bottom: 0.3rem;
|
153 | }
|
154 |
|
155 | .btn-group > .btn:not(:first-child) {
|
156 | border-top-left-radius: 0;
|
157 | border-bottom-left-radius: 0;
|
158 | }
|
159 |
|
160 | .btn-group > .btn:not(:last-child) {
|
161 | border-top-right-radius: 0;
|
162 | border-bottom-right-radius: 0;
|
163 | }
|
164 |
|
165 | .playlist-time-scale {
|
166 | height: 30px;
|
167 | }
|
168 |
|
169 | .playlist-tracks {
|
170 | background: var(--wp-tracks-container-background-color);
|
171 | }
|
172 |
|
173 | .channel {
|
174 | background: var(--wp-channel-color);
|
175 | }
|
176 |
|
177 | .channel-progress {
|
178 | background: var(--wp-channel-progress-color);
|
179 | }
|
180 |
|
181 | .cursor {
|
182 | background: var(--wp-cursor-color);
|
183 | }
|
184 |
|
185 | .wp-fade {
|
186 | background-color: var(--wp-fade-background-color);
|
187 | }
|
188 |
|
189 | .state-cursor,
|
190 | .state-select {
|
191 | cursor: text;
|
192 | }
|
193 |
|
194 | .state-fadein {
|
195 | cursor: w-resize;
|
196 | }
|
197 |
|
198 | .state-fadeout {
|
199 | cursor: e-resize;
|
200 | }
|
201 |
|
202 | .state-shift {
|
203 | cursor: ew-resize;
|
204 | }
|
205 |
|
206 | .selection.point {
|
207 | background: var(--wp-selection-point-color);
|
208 | }
|
209 |
|
210 | .selection.segment {
|
211 | background: var(--wp-selection-background-color);
|
212 | }
|
213 |
|
214 | .channel-wrapper.silent .channel {
|
215 | opacity: 0.3;
|
216 | }
|
217 |
|
218 | .controls {
|
219 | background: var(--wp-controls-background-color);
|
220 | text-align: center;
|
221 | border: 1px solid var(--wp-controls-border-color);
|
222 | border-radius: 0.2rem;
|
223 |
|
224 | .track-header {
|
225 | overflow: hidden;
|
226 | height: 26px;
|
227 | display: flex;
|
228 | align-items: center;
|
229 | justify-content: space-between;
|
230 | padding: 0 0.2rem;
|
231 | font-size: 0.75rem;
|
232 |
|
233 | button {
|
234 | width: 20px;
|
235 | height: 20px;
|
236 | display: flex;
|
237 | align-items: center;
|
238 | justify-content: center;
|
239 | }
|
240 | }
|
241 |
|
242 | label {
|
243 | width: 100%;
|
244 | display: flex;
|
245 | justify-content: space-between;
|
246 | font: normal normal normal 14px/1 FontAwesome;
|
247 | font-size: inherit;
|
248 | text-rendering: auto;
|
249 | -webkit-font-smoothing: antialiased;
|
250 | -moz-osx-font-smoothing: grayscale;
|
251 | transform: translate(0, 0);
|
252 | padding: 0 1rem;
|
253 | margin-bottom: 0.2rem;
|
254 | }
|
255 |
|
256 | label:before {
|
257 | color: var(--wp-range-slider-label-color);
|
258 | font-size: 18px;
|
259 | padding-right: 5px;
|
260 | -moz-osx-font-smoothing: grayscale;
|
261 | }
|
262 |
|
263 | label:after {
|
264 | color: var(--wp-range-slider-label-color);
|
265 | font-size: 18px;
|
266 | padding-left: 5px;
|
267 | }
|
268 |
|
269 | label.volume:before {
|
270 | content: "\f027";
|
271 | }
|
272 |
|
273 | label.volume:after {
|
274 | content: "\f028";
|
275 | }
|
276 |
|
277 | label.stereopan:before {
|
278 | content: "L";
|
279 | }
|
280 |
|
281 | label.stereopan:after {
|
282 | content: "R";
|
283 | }
|
284 |
|
285 | input[type="range"] {
|
286 | -webkit-appearance: none;
|
287 | -moz-appearance: none;
|
288 | appearance: none;
|
289 |
|
290 | display: inline-block;
|
291 | width: 75%;
|
292 | }
|
293 |
|
294 | input[type="range"]::-webkit-slider-runnable-track {
|
295 | height: 5px;
|
296 | background: var(--wp-range-slider-background-color);
|
297 | border: none;
|
298 | border-radius: 3px;
|
299 | }
|
300 |
|
301 | input[type="range"]::-moz-range-track {
|
302 | height: 5px;
|
303 | background: var(--wp-range-slider-background-color);
|
304 | border: none;
|
305 | border-radius: 3px;
|
306 | }
|
307 |
|
308 | input[type="range"]::-webkit-slider-thumb {
|
309 | -webkit-appearance: none;
|
310 | -moz-appearance: none;
|
311 | appearance: none;
|
312 |
|
313 | border: none;
|
314 | height: 12px;
|
315 | width: 12px;
|
316 | border-radius: 50%;
|
317 | background: var(--wp-range-slider-color);
|
318 | margin-top: -5px;
|
319 | cursor: ew-resize;
|
320 | }
|
321 |
|
322 | input[type="range"]::-moz-range-thumb {
|
323 | -webkit-appearance: none;
|
324 | -moz-appearance: none;
|
325 | appearance: none;
|
326 |
|
327 | border: none;
|
328 | height: 12px;
|
329 | width: 12px;
|
330 | border-radius: 50%;
|
331 | background: var(--wp-range-slider-color);
|
332 | margin-top: -5px;
|
333 | cursor: ew-resize;
|
334 | }
|
335 |
|
336 | input[type="range"]:focus {
|
337 | outline: none;
|
338 | }
|
339 |
|
340 | input[type="range"]:focus::-webkit-slider-runnable-track {
|
341 | background: var(--wp-range-slider-background-focus-color);
|
342 | }
|
343 |
|
344 | input[type="range"]:focus::-moz-range-track {
|
345 | background: var(--wp-range-slider-background-focus-color);
|
346 | }
|
347 |
|
348 | input[type="range"]:focus::-webkit-slider-thumb {
|
349 | border: 2px solid var(--wp-range-slider-focus-color);
|
350 | }
|
351 |
|
352 | input[type="range"]:focus::-moz-range-thumb {
|
353 | border: 2px solid var(--wp-range-slider-focus-color);
|
354 | }
|
355 | }
|
356 |
|
357 | .annotations {
|
358 | .annotations-boxes {
|
359 | text-align: center;
|
360 | }
|
361 |
|
362 | .annotation-box {
|
363 | border: 2px dashed var(--wp-annotation-box-border-color);
|
364 | padding: 0 10px;
|
365 | line-height: 1.5;
|
366 |
|
367 | .resize-handle {
|
368 | background: var(--wp-annotation-box-border-color);
|
369 | opacity: 0.3;
|
370 | cursor: ew-resize;
|
371 | }
|
372 |
|
373 | .id {
|
374 | cursor: pointer;
|
375 | display: inline-block;
|
376 | width: 100%;
|
377 | height: 100%;
|
378 | }
|
379 | }
|
380 |
|
381 | .annotations-text {
|
382 | font-size: 19px;
|
383 | font-weight: 300;
|
384 | margin-top: 1em;
|
385 | height: 160px;
|
386 | overflow-x: hidden;
|
387 | overflow-y: auto;
|
388 |
|
389 | .annotation {
|
390 | display: flex;
|
391 | flex-direction: row;
|
392 | flex-wrap: nowrap;
|
393 | justify-content: flex-start;
|
394 | align-items: stretch;
|
395 |
|
396 | span {
|
397 | margin: 0.3rem 0.6rem;
|
398 |
|
399 | &:last-of-type {
|
400 | margin-right: 1.2rem;
|
401 | }
|
402 | }
|
403 |
|
404 | .annotation-id {
|
405 | font-size: 16px;
|
406 | line-height: 27px;
|
407 | }
|
408 |
|
409 | .annotation-start {
|
410 | font-size: 16px;
|
411 | line-height: 27px;
|
412 | }
|
413 |
|
414 | .annotation-end {
|
415 | font-size: 16px;
|
416 | line-height: 27px;
|
417 | }
|
418 |
|
419 | .annotation-lines {
|
420 | flex-grow: 10;
|
421 | }
|
422 |
|
423 | .annotation-actions {
|
424 | flex-basis: auto;
|
425 | width: 85px;
|
426 | text-align: right;
|
427 | font-size: 16px;
|
428 |
|
429 | i {
|
430 | margin-right: 0.6rem;
|
431 |
|
432 | &:last-of-type {
|
433 | margin-right: 0;
|
434 | }
|
435 |
|
436 | &:hover {
|
437 | color: var(--wp-annotation-icon-hover-color);
|
438 | cursor: pointer;
|
439 | }
|
440 | }
|
441 | }
|
442 | }
|
443 | }
|
444 |
|
445 | .current {
|
446 | background-color: var(--wp-annotation-current-background-color);
|
447 | }
|
448 | }
|
449 | }
|