rename css variables; disable user-select
Hunter
Tuesday, October 28th, 2025 at 12:12 PM
1 :root {
- --icee: #dddddd;
- --blueberry: #4c7ae6;
- --bubblegum: #f421ff;
- --asphalt: #080a0c;
- --fog: #ddddddcc;
2 + --text: #dddddd;
3 + --dimmed-text: #ddddddcc;
4 + --primary: #4c7ae6;
5 + --accent: #f421ff;
6 + --background: #080a0c;
7 }
8
9 * {
- scrollbar-color: var(--fog) var(--asphalt);
10 + scrollbar-color: var(--dimmed-text) var(--background);
11 + user-select: none;
12 }
13
14 body {
19 display: flex;
20 flex-direction: column;
21 font-size: 24px;
- background-color: var(--asphalt);
22 + background-color: var(--background);
23 }
24
25 .window-container {
53 z-index: 3;
54 }
55
56 +.control-button {
57 + width: 120px;
58 + height: 45px;
59 + background-size: contain;
60 + background-repeat: no-repeat;
61 + background-position: center;
62 + border: none;
63 + cursor: pointer;
64 + margin: 0 7px;
65 + border-radius: 50%;
66 + background-color: var(--text);
67 + box-shadow:
68 + inset -2px -2px 4px rgba(0, 0, 0, 0.3),
69 + inset 2px 2px 4px rgba(255, 255, 255, 0.4),
70 + 0 2px 4px rgba(0, 0, 0, 0.5),
71 + 0 4px 8px rgba(0, 0, 0, 0.3);
72 + filter:
73 + drop-shadow(0 0 1px rgba(0, 0, 0, 0.8))
74 + drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.6))
75 + drop-shadow(-0.5px -0.5px 0 rgba(255, 255, 255, 0.2));
76 +}
77 +
78 .playlist-wrapper {
79 flex-grow: 1;
80 position: relative;
91 display: flex;
92 justify-content: space-between;
93 align-items: center;
- color: var(--icee);
94 + color: var(--text);
95 min-height: 45px;
96 padding-left: 15px;
97 padding-right: 10px;
- padding-top: 9px;
- padding-bottom: 9px;
98 + padding-bottom: 18px;
99 }
100
101 .playlist-item-content {
112
113 .playlist-item-title.current {
114 font-weight: bold;
- color: var(--blueberry);
115 + color: var(--primary);
116 }
117
118 .playlist-item-artist {
119 font-size: 16px;
- color: var(--fog);
120 + color: var(--dimmed-text);
121 line-height: 1.2;
122 }
123
124 .playlist-item-artist.current {
125 font-weight: bold;
- color: var(--blueberry);
126 + color: var(--primary);
127 opacity: 1;
128 }
129
130 .playlist-item:hover {
131 cursor: pointer;
- color: var(--bubblegum);
132 + color: var(--accent);
133 }
134
135 .playlist-item:hover .playlist-item-artist {
- color: var(--bubblegum);
136 + color: var(--accent);
137 }
138
139 .playlist-item:hover .playlist-item-title.current,
140 .playlist-item:hover .playlist-item-artist.current {
- color: var(--bubblegum);
141 + color: var(--accent);
142 }
143
144 .current-song {
146 padding-left: 15px;
147 padding-bottom: 10px;
148 font-weight: bold;
- color: var(--blueberry);
149 + color: var(--primary);
150 min-height: 35px;
151 display: flex;
152 align-items: center;
- background-color: var(--asphalt);
153 + background-color: var(--background);
154 z-index: 2;
155 position: relative;
156 }
174 display: flex;
175 align-items: center;
176 padding: 0 15px;
- padding-bottom: 6px;
177 + padding-bottom: 7px;
178 box-sizing: border-box;
179 position: relative;
- background-color: var(--asphalt);
180 + background-color: var(--background);
181 z-index: 2;
182 }
183
205 .progress-bar {
206 width: 100%;
207 height: 4px;
- background-color: var(--icee);
208 + background-color: var(--text);
209 position: relative;
210 border-radius: 1px;
211 --progress: 0%;
219 top: 0;
220 height: 100%;
221 width: var(--progress);
- background-color: var(--bubblegum);
222 + background-color: var(--accent);
223 border-radius: 1px;
224 transition: none;
225 }
232 transform: translateY(-50%);
233 width: var(--circle-size);
234 height: var(--circle-size);
- background-color: var(--bubblegum);
235 + background-color: var(--accent);
236 border-radius: 50%;
237 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
238 transition: none;
250 display: none;
251 }
252
-.control-button {
- width: 120px;
- height: 45px;
- background-size: contain;
- background-repeat: no-repeat;
- background-position: center;
- border: none;
- cursor: pointer;
- margin: 0 5px;
- border-radius: 50%;
- background-color: var(--icee);
- box-shadow:
- inset -2px -2px 4px rgba(0, 0, 0, 0.3),
- inset 2px 2px 4px rgba(255, 255, 255, 0.4),
- 0 2px 4px rgba(0, 0, 0, 0.5),
- 0 4px 8px rgba(0, 0, 0, 0.3);
- filter:
- drop-shadow(0 0 1px rgba(0, 0, 0, 0.8))
- drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.6))
- drop-shadow(-0.5px -0.5px 0 rgba(255, 255, 255, 0.2));
-}
-
253 #playPause {
254 background-image: url('resources/play.png');
255 background-position: 52.5% center;