commit cb902e7160fe3e1d721bd3cffb984a217fc0e5d3
parent d0652e8c630134f16c298249fae1f343f383b4c7
Author: Hunter
Date: Tue, 28 Oct 2025 10:50:57 -0400
wip UI shadows
Diffstat:
2 files changed, 41 insertions(+), 5 deletions(-)
diff --git a/index.html b/index.html
@@ -17,7 +17,10 @@
<span class="progress-text progress-text-center" id="progressTextCenter"></span>
</div>
</div>
- <div class="playlist" id="playlist"></div>
+ <div class="playlist-wrapper">
+ <div class="shadow-overlay"></div>
+ <div class="playlist" id="playlist"></div>
+ </div>
</div>
<div class="controls">
<button class="control-button" id="prev"></button>
diff --git a/styles.css b/styles.css
@@ -39,8 +39,9 @@ body {
.controls {
display: flex;
justify-content: center;
+ padding-top: 10px;
padding-bottom: 10px;
- height: 52px;
+ height: 62px;
background: transparent;
position: absolute;
bottom: 0;
@@ -50,10 +51,15 @@ body {
z-index: 3;
}
-.playlist {
+.playlist-wrapper {
flex-grow: 1;
+ position: relative;
overflow-y: auto;
- padding-bottom: 62px;
+ padding-bottom: 72px;
+}
+
+.playlist {
+ padding-top: 0;
cursor: initial;
}
@@ -113,11 +119,15 @@ body {
.current-song {
text-align: left;
padding-left: 10px;
+ padding-bottom: 6px;
font-weight: bold;
color: var(--blueberry);
min-height: 35px;
display: flex;
align-items: center;
+ background-color: var(--asphalt);
+ z-index: 2;
+ position: relative;
}
.current-song span {
@@ -134,13 +144,33 @@ body {
width: 100%;
font-size: 24px;
cursor: grab;
- margin-top: 3px;
+ margin-top: 0;
height: 35px;
display: flex;
align-items: center;
padding: 0 12px;
+ padding-bottom: 6px;
box-sizing: border-box;
position: relative;
+ background-color: var(--asphalt);
+ z-index: 2;
+}
+
+.shadow-overlay {
+ position: sticky;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 16px;
+ background: linear-gradient(
+ to bottom,
+ rgba(0, 0, 0, 0.8) 0%,
+ rgba(0, 0, 0, 0.5) 40%,
+ rgba(0, 0, 0, 0.2) 70%,
+ transparent 100%
+ );
+ pointer-events: none;
+ z-index: 2;
}
.progress-container:hover {
@@ -205,6 +235,9 @@ body {
cursor: pointer;
margin: 0 5px;
border-radius: 4px;
+ filter:
+ drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9))
+ drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6));
}
#playPause {