SimplePlaylist/playlist.css at main · 5ko/SimplePlaylist · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
/**
  SimplePlaylist: Audio player from a list
  Copyright (c) 2024 Petko Yotov
  MIT License
  https://www.pmwiki.org/Cookbook/SimplePlaylist
*/

ol.simpleplaylist {
  border: 4px solid var(--sp-bordercolor);
  max-height: calc(100vh - 3em);
  overflow-y: auto;
  counter-reset: li;
  list-style: none;
  padding: 0;

  --sp-bordercolor: #999;
  --sp-current-color: #37a;
  --sp-current-bgcolor: #ddd;
  --sp-hover-bgcolor: #dfd;
  --sp-error-color: #800;
}

html.pmDarkTheme ol.simpleplaylist {
  --sp-bordercolor: #333;
  --sp-current-color: #74b0e7;
  --sp-current-bgcolor: #222;
  --sp-hover-bgcolor: #0f2b13;
  --sp-error-color: #ff906b;
}

ol.simpleplaylist.numbered > li.track::before {
  content: attr(data-counter) ". " ;
  display: inline-block;
  width: 3em;
  margin-right: .4em;
  text-align: right;
}

ol.simpleplaylist li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: .2em .4em;
}

ol.simpleplaylist li.error {
  color: var(--sp-error-color);
}

ol.simpleplaylist li:not(:last-child) {
  border-bottom: 1px solid var(--sp-bordercolor)
}

ol.simpleplaylist li.track {
  cursor: pointer;
}

ol.simpleplaylist li:not(.track) {
  opacity: .67;
}

ol.simpleplaylist.numbered > li.track.current::before {
  content: '\25B6';
  font-weight: normal;

}

ol.simpleplaylist > li.track.error::before {
  content: '\26A0';
}


ol.simpleplaylist li.track:hover {
  background-color: var(--sp-hover-bgcolor);
}
ol.simpleplaylist li.track.current {
  color: var(--sp-current-color);
  background-color: var(--sp-current-bgcolor);
  font-weight: bold;
}


ol.simpleplaylist li.track a {
  color: inherit;
  text-decoration: none;
}

audio.simpleplaylist {
  width: 100%;
  height: 2em;
}