diff --git a/theme.js b/theme.js index 204f5ad..630eeb1 100644 --- a/theme.js +++ b/theme.js @@ -308,6 +308,124 @@ body.spotui-lyrics-panel #spotui-lyrics.spotui-lyrics-active { font-weight: 600; } +#spotui-playlist-panel { + display: none; + flex: 1 1 auto; + min-height: 0; + flex-direction: row; + position: relative; + z-index: 1; + margin: 33vh 5vw 8px; + height: 60vh; + 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); + gap: 10px; +} + +body.spotui-playlist-panel #spotui-playlist-panel { + display: flex; + opacity: 1; + transform: translateY(0); + transition-delay: 0.6s; +} + +body.spotui-playlist-panel #spotui-logo { + top: 12px; + transform: translate(-50%, 0) scale(0.6); + opacity: 0.8; + z-index: 2; + background-color: #000; +} + +body.spotui-playlist-panel #spotui-output, body.spotui-help-panel #spotui-output { + display: none !important; +} + +#spotui-help-panel { + display: none; + flex: 1 1 auto; + flex-direction: column; + padding: 20px; + overflow-y: auto; + scrollbar-width: none; + -ms-overflow-style: none; + margin: 33vh 5vw 8px; + height: 60vh; + border: 1px solid #ff8c42; + border-radius: 4px; + background: #000; +} + +#spotui-help-panel::-webkit-scrollbar { + width: 0; + height: 0; +} + +body.spotui-help-panel #spotui-help-panel { + display: flex; +} + +body.spotui-help-panel #spotui-logo { + top: 12px; + transform: translate(-50%, 0) scale(0.6); + opacity: 0.8; + z-index: 2; + background-color: #000; +} + +.help-item { + padding: 4px 0; + display: flex; + justify-content: space-between; +} + +.help-item .command { + color: #ff8c42; + flex-basis: 30%; +} + +.help-item .description { + flex-basis: 70%; + color: #b3b3b3; +} + + + +#spotui-playlist-list, #spotui-song-list { + width: 50%; + overflow-y: auto; + scrollbar-width: none; + -ms-overflow-style: none; + padding: 10px; + border: 1px solid #ff8c42; + border-radius: 4px; +} + +#spotui-playlist-list legend, #spotui-song-list legend { + color: #ff8c42; + padding: 0 5px; +} + +#spotui-playlist-list::-webkit-scrollbar, #spotui-song-list::-webkit-scrollbar { + width: 0; + height: 0; +} + +.playlist-item, .song-item { + padding: 4px 6px; + cursor: pointer; +} + +.playlist-item.selected, .song-item.selected { + background: #ff8c42; + color: #000; +} + + .spotui-lyrics-lines.unsynced .spotui-lyrics-line { color: #b3b3b3; opacity: 0.9; @@ -361,61 +479,6 @@ body.spotui-lyrics-panel #spotui-lyrics.spotui-lyrics-active { body.spotui-tui-hidden #spotui-tui { display: none !important; } - -body.spotui-tui-hidden #spotui-popup { - display: none !important; -} - -#spotui-popup { - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: min(480px, calc(100vw - 32px)); - max-height: 60vh; - background: #0a0a0a; - border: 2px solid #ff8c42; - border-radius: 6px; - color: #ddd; - font-family: "JetBrains Mono", "Fira Code", monospace; - font-size: 14px; - z-index: 10002; - padding: 16px; - overflow-y: auto; - outline: none; - box-shadow: 0 0 24px rgba(0,0,0,0.6); - scrollbar-width: none; - -ms-overflow-style: none; -} -#spotui-popup::-webkit-scrollbar { - width: 0; - height: 0; -} -.popup-title { - color: #ff8c42; - margin-bottom: 10px; - font-size: 12px; - border-bottom: 1px solid #333; - padding-bottom: 8px; -} -.popup-row { - padding: 4px 6px; -} -.popup-row.selected { - background: #ff8c42; - color: #000; -} -.popup-input { - width: 100%; - background: #111; - border: 1px solid #ff8c42; - color: #ff8c42; - font-family: inherit; - font-size: inherit; - padding: 6px; - outline: none; - box-sizing: border-box; -} `; const SPOTUI_ASCII_ART = [ @@ -1076,6 +1139,15 @@ Type /help
+