wip UI shadows
Hunter
Tuesday, October 28th, 2025 at 10:50 AM
17 <span class="progress-text progress-text-center" id="progressTextCenter"></span>
18 </div>
19 </div>
- <div class="playlist" id="playlist"></div>
20 + <div class="playlist-wrapper">
21 + <div class="shadow-overlay"></div>
22 + <div class="playlist" id="playlist"></div>
23 + </div>
24 </div>
25 <div class="controls">
26 <button class="control-button" id="prev"></button>
39 .controls {
40 display: flex;
41 justify-content: center;
42 + padding-top: 10px;
43 padding-bottom: 10px;
- height: 52px;
44 + height: 62px;
45 background: transparent;
46 position: absolute;
47 bottom: 0;
51 z-index: 3;
52 }
53
-.playlist {
54 +.playlist-wrapper {
55 flex-grow: 1;
56 + position: relative;
57 overflow-y: auto;
- padding-bottom: 62px;
58 + padding-bottom: 72px;
59 +}
60 +
61 +.playlist {
62 + padding-top: 0;
63 cursor: initial;
64 }
65
119 .current-song {
120 text-align: left;
121 padding-left: 10px;
122 + padding-bottom: 6px;
123 font-weight: bold;
124 color: var(--blueberry);
125 min-height: 35px;
126 display: flex;
127 align-items: center;
128 + background-color: var(--asphalt);
129 + z-index: 2;
130 + position: relative;
131 }
132
133 .current-song span {
144 width: 100%;
145 font-size: 24px;
146 cursor: grab;
- margin-top: 3px;
147 + margin-top: 0;
148 height: 35px;
149 display: flex;
150 align-items: center;
151 padding: 0 12px;
152 + padding-bottom: 6px;
153 box-sizing: border-box;
154 position: relative;
155 + background-color: var(--asphalt);
156 + z-index: 2;
157 +}
158 +
159 +.shadow-overlay {
160 + position: sticky;
161 + top: 0;
162 + left: 0;
163 + right: 0;
164 + height: 16px;
165 + background: linear-gradient(
166 + to bottom,
167 + rgba(0, 0, 0, 0.8) 0%,
168 + rgba(0, 0, 0, 0.5) 40%,
169 + rgba(0, 0, 0, 0.2) 70%,
170 + transparent 100%
171 + );
172 + pointer-events: none;
173 + z-index: 2;
174 }
175
176 .progress-container:hover {
235 cursor: pointer;
236 margin: 0 5px;
237 border-radius: 4px;
238 + filter:
239 + drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9))
240 + drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6));
241 }
242
243 #playPause {