diff --git a/theme.js b/theme.js index 2b92101..204f5ad 100644 --- a/theme.js +++ b/theme.js @@ -40,6 +40,31 @@ const style = ` display: flex; justify-content: center; align-items: center; + transition: top 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1); +} + +body.spotui-lyrics-panel #spotui-logo { + top: 12px; + transform: translate(-50%, 0) scale(0.6); + opacity: 0.8; + z-index: 2; + background-color: #000; +} + +#spotui-top-fade { + display: none; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 120px; + background: linear-gradient(to bottom, rgba(0,0,0,1) 30%, rgba(0,0,0,0)); + pointer-events: none; + z-index: 1; +} + +body.spotui-lyrics-panel #spotui-top-fade { + display: block; } .spotui-ascii-grid { @@ -153,6 +178,164 @@ body.spotui-cli-mode #spotui-output { .result { padding: 5px; } .selected { background: #ff8c42; color: #000; } +body.spotui-lyrics-panel #spotui-output { + display: none !important; +} + +body.spotui-lyrics-panel #spotui-logo { + display: flex !important; +} + +#spotui-lyrics { + display: none; + flex: 1 1 auto; + min-height: 0; + flex-direction: column; + position: relative; + z-index: 1; + margin: 0 0 8px; + border: none; + background: transparent; + overflow: hidden; + opacity: 0; + transform: translateY(20px); + transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); +} + +body.spotui-lyrics-panel #spotui-lyrics.spotui-lyrics-active { + display: flex; + opacity: 1; + transform: translateY(0); + transition-delay: 0.6s; +} + +.spotui-lyrics-header { + flex: 0 0 auto; + padding: 16px 22px 12px; + border-bottom: 1px solid rgba(255, 140, 66, 0.18); +} + +.spotui-lyrics-kicker { + color: #ff8c42; + font-size: 11px; + letter-spacing: 0.18em; + text-transform: uppercase; + margin-bottom: 6px; +} + +.spotui-lyrics-track { + color: #ddd; + font-size: 18px; + font-weight: 600; + line-height: 1.3; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.spotui-lyrics-meta { + margin-top: 4px; + color: #b3b3b3; + font-size: 12px; + letter-spacing: 0.02em; +} + +.spotui-lyrics-viewport { + position: relative; + flex: 1 1 auto; + min-height: 0; + overflow: hidden; +} + +.spotui-lyrics-lines { + height: 100%; + overflow-y: auto; + padding: 18vh 28px; + scroll-behavior: smooth; + scrollbar-width: none; + -ms-overflow-style: none; + text-align: center; +} + +.spotui-lyrics-lines::-webkit-scrollbar { + width: 0; + height: 0; +} + +.spotui-lyrics-fade { + pointer-events: none; + position: absolute; + left: 0; + right: 0; + height: 72px; + z-index: 2; +} + +.spotui-lyrics-fade-top { + top: 0; + background: linear-gradient(180deg, #000, transparent); +} + +.spotui-lyrics-fade-bottom { + bottom: 0; + background: linear-gradient(0deg, #000, transparent); +} + +.spotui-lyrics-line { + color: #777; + font-size: 17px; + line-height: 1.45; + padding: 10px 8px; + opacity: 0.45; + transform: scale(0.96); + transition: + color 220ms ease, + opacity 220ms ease, + transform 220ms ease, + text-shadow 220ms ease; +} + +.spotui-lyrics-line.near { + color: #b3b3b3; + opacity: 0.72; + transform: scale(0.98); +} + +.spotui-lyrics-line.active { + color: #ff8c42; + opacity: 1; + transform: scale(1.06); + font-weight: 600; +} + +.spotui-lyrics-lines.unsynced .spotui-lyrics-line { + color: #b3b3b3; + opacity: 0.9; + transform: none; + text-align: center; +} + +.spotui-lyrics-empty { + color: #b3b3b3; + font-size: 3em; + line-height: 1.6; + padding: 18vh 24px; + text-align: center; + display: flex; + justify-content: center; + align-items: center; + height: 100%; + opacity: 0.5; +} + +.spotui-lyrics-empty strong { + display: block; + color: #ff8c42; + font-size: 16px; + margin-bottom: 8px; + font-weight: 600; +} + #spotui-controls { display: flex; gap: 8px; @@ -880,10 +1063,18 @@ function createTerminal() { setTuiMode("command"); box.innerHTML = `
+