wrap control-buttons to avoid accidentally clicking tracks
Hunter
Tuesday, October 28th, 2025 at 4:51 PM
23 </div>
24 </div>
25 <div class="controls">
- <button class="control-button" id="prev"></button>
- <button class="control-button" id="playPause"></button>
- <button class="control-button" id="next"></button>
26 + <div class="controls-inner">
27 + <button class="control-button" id="prev"></button>
28 + <button class="control-button" id="playPause"></button>
29 + <button class="control-button" id="next"></button>
30 + </div>
31 </div>
32 </div>
33
59 .controls {
60 display: flex;
61 justify-content: center;
- padding-top: 10px;
- padding-bottom: 10px;
- height: 62px;
62 + padding-left: 15px;
63 + padding-right: 15px;
64 background: transparent;
65 position: absolute;
66 bottom: 0;
68 right: 0;
69 box-sizing: border-box;
70 z-index: 3;
71 + pointer-events: none;
72 }
73
74 .control-button {
79 background-position: center;
80 border: none;
81 cursor: pointer;
- margin: 0 7px;
82 + margin: 0;
83 border-radius: 50%;
84 background-color: var(--text);
85 box-shadow:
91 drop-shadow(0 0 1px rgba(0, 0, 0, 0.8))
92 drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.6))
93 drop-shadow(-0.5px -0.5px 0 rgba(255, 255, 255, 0.2));
94 + pointer-events: auto;
95 +}
96 +
97 +.control-button:not(:last-child) {
98 + margin-right: 14px;
99 +}
100 +
101 +.controls-inner {
102 + display: flex;
103 + padding: 10px 15px;
104 + pointer-events: auto;
105 }
106
107 .playlist-wrapper {