-
-
Notifications
You must be signed in to change notification settings - Fork 33
/
Copy pathmusic.theme.css
170 lines (150 loc) · 5.06 KB
/
music.theme.css
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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
/* Loosely based on mov.im, orange focus */
:root.blue {
--bg: #0e1317;
--bg-body: #141a21;
--bg-button-hv: #192028;
--bg-menu: #141a21;
--bg-popup: #11171c;
--bg-splash: #30353c;
--bg-trash: #0e1317aa;
--border: #171f26;
--border-cover: #212b36;
--focus: #eb6600;
--focus-dim: #b35000;
--scroll: #30353c;
--scroll-hv: #3f434a;
}
/* Blue + hue rotation -60, orange focus */
:root.green {
--bg: #0e1713;
--bg-body: #14221a;
--bg-button-hv: #1a2922;
--bg-menu: #131f19;
--bg-popup: #111c17;
--bg-splash: #313d38;
--bg-trash: #0e1713aa;
--border: #17261e;
--border-cover: #21362b;
--focus: #eb6600;
--focus-dim: #b35000;
--scroll: #313d38;
--scroll-hv: #59665d;
}
/* Loosely based on XDA emails */
:root.gray {
--bg: #2d3036;
--bg-body: #23272c;
--bg-button-hv: #474c54;
--bg-dim: var(--bg-body);
--bg-image: none;
--bg-menu: #393d43;
--bg-popup: #393d43;
--bg-trash: #2d3036aa;
--border: #474c54;
--box-shadow: #23272c;
--scroll: #474c54;
--scroll-hv: #5a5f68;
}
html.gray #cover:not(.nofade):not(:hover) { opacity: .8 }
/* Light theme */
:root.light {
--bg: #f6f8fa;
--bg-body: #eaeef2;
--bg-button-hv: #e9f1f7;
--bg-dim: var(--bg-body);
--bg-image: url(music.theme.light.svg);
--bg-menu: #f2f6fa;
--bg-popup: #f2f6fa;
--bg-splash: #d0d7de;
--bg-toast-error: #911d1d;
--bg-trash: #f6f8faaa;
--border: #d0d7de;
--border-cover: #fafafa;
--box-shadow: #eaeef2;
--focus: #ef6c00;
--focus-dim: #f3934d;
--scroll: #d0d7de;
--scroll-hv: #ccc;
--text: #444;
--text-dim: #999;
--text-li-parent: #ccc;
--text-locked: #aaa;
}
html.light #toast.error { color: #fff }
html.light #cover { opacity: 1 }
/* Focus colors, use in music.ini as themes = ['blue focusgreen', ...] */
:root.focusblue {
--focus: #1d91f0;
--focus-dim: #1a6eac;
}
:root.focusgreen {
--focus: #00bd35;
--focus-dim: #00800f;
}
:root.focusorange {
--focus: #eb6600;
--focus-dim: #b35000;
}
:root.focuspink {
--focus: #e0006f;
--focus-dim: #b30050;
}
/* Optional styling via classnames */
/* round: Rounded buttons and panels */
:root.round { --radius: 8px }
html.round button { border-radius: 2em }
/* colorborder: Add decorative top border to main elements */
html.colorborder body > div, html.colorborder #popup { border-top: 2px solid var(--focus-dim) }
html.colorborder.material body > div, html.colorborder.material #popup, html.colorborder.touch #popup { border-top: 3px solid var(--focus-dim) }
html.colorborder body > div { border-radius: 12px }
/* colorborder: Add decorative bottom border to hovered buttons */
html.colorborder:not(.colorbutton) :not(.menu) > button:hover, html.colorborder:not(.colorbutton) .menu > button:focus { border-bottom-color: var(--focus-dim) !important }
html.colorborder.colortoggle button.on:hover { border-bottom-color: var(--focus) !important }
/* colorbutton: Colorize hovered buttons */
:root.colorbutton { --bg-button-hv: var(--focus-dim) }
html.colorbutton button, html.colorbutton button b { transition: background .2s, color .2s ease-out, text-decoration .1s, border .2s }
html.colorbutton button:focus b, html.colorbutton button:hover b {
color: #ddd;
border-color: var(--focus);
}
html.colorbutton div:not(.menu) > button:hover u, html.colorbutton .menu > button:focus u { text-decoration-color: transparent }
html.colorbutton button:hover, html.colorbutton .menu button:focus { color: #fff }
html.colorbutton.light .menu > button:hover:not(:focus) { color: #000 }
/* colortoggle: Indicate enabled options by colored borders instead of checkmarks */
html.colortoggle button[onclick^=toggle]:not(#volume), html.colortoggle div[onclick^=toggle] button, html.colortoggle #toast {
height: calc(var(--button-size) - 2px);
padding: 0 calc(1.25 * var(--space) - 2px);
margin: 1px;
}
html.colortoggle button[onclick^=toggle]:empty { width: calc(var(--button-size) - 2px) }
html.colortoggle button[onclick^=toggle].on, html.colortoggle div[onclick^=toggle] button.on, html.colortoggle #toast.on { border-color: var(--focus-dim) }
html.colortoggle button[onclick^=toggle].on:hover, html.colortoggle div[onclick^=toggle] button.on:hover { border-color: var(--focus) }
html.colortoggle div[onclick^=toggle].menu button { margin: 0 }
html.colortoggle:not(.colorbutton) div[onclick^=toggle].menu button { margin: 1px 0 }
/* material: Material Design 3(ish) rounded corners, use in music.ini as themes = ['material blue', ...] */
:root.material {
--radius: calc(2em + 2px);
--button-size: 2.75em;
--space: .75em;
}
html.material ::-webkit-scrollbar-thumb { border-radius: 4px }
html.material body { font-size: 1.1em }
html.material input[type=range] { height: 13px }
html.material li { padding: .1em 0 }
html.material #cover {
min-width: 7.5em;
min-height: 7.5em;
border-radius: calc(.5 * var(--radius));
}
html.material .menu { padding: .5em }
html.material body > div, html.material .menu button { border-radius: var(--radius) }
html.material #playlist:not(.resize) { max-height: 11em }
/* Display songs in tree horizontally
#tree li.song {
display: inline-block;
margin-right: 2.5em;
}
*/
/* Set a fixed height for the playlist
#playlist { height: 11em !important }
*/