From f68c85f0cd68ee371af15cda02823edbbc284b5e Mon Sep 17 00:00:00 2001 From: Brian O'Reilly Date: Sat, 6 Dec 2025 10:25:26 -0500 Subject: [PATCH] asteroid.css is generated on every start. delete it from repository. --- static/asteroid.css | 1440 ------------------------------------------- 1 file changed, 1440 deletions(-) delete mode 100644 static/asteroid.css diff --git a/static/asteroid.css b/static/asteroid.css deleted file mode 100644 index e6e3a4f..0000000 --- a/static/asteroid.css +++ /dev/null @@ -1,1440 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=VT323&display=swap"); - -body{ - font-family: VT323, monospace; - font-weight: 400; - font-style: normal; - background: #0a0a0a; - color: #00ffff; - margin: 0; - padding: 20px; - box-sizing: border-box; -} - -body select{ - font-family: VT323, monospace; -} - - - -body header .page-title{ - display: flex; - align-items: center; - justify-content: center; - gap: 15px; - margin: 0; -} - -body header .page-subtitle{ - color: #4488FF; - display: flex; - justify-content: center; - font-style: italic; - margin: 0; - margin-top: .8rem; - margin-bottom: 4rem; -} - -body .container{ - max-width: 1200px; - margin: 0 auto; -} - -body strong{ - letter-spacing: 0.08rem; -} - -body h1{ - color: #4488ff; - text-align: center; - font-size: 2.5em; - margin-bottom: 30px; -} - -body h2{ - color: #4488ff; -} - -body .status{ - background: #1a2332; - padding: 20px; - border: 1px solid #2a3441; - margin: 20px 0; -} - -body .panel{ - background: #1a2332; - padding: 20px; - border: 1px solid #2a3441; - margin: 20px 0; -} - -body .nav{ - margin: 20px 0; - display: flex; - gap: 5px; - flex-wrap: wrap; - justify-content: center; -} - -body .nav a{ - color: #00ffff; - text-decoration: none; - margin: 0; - padding: 10px 20px; - border: 1px solid #2a3441; - background: #1a2332; - min-width: 100px; - text-align: center; - border-sizing: border-box; - letter-spacing: 0.08rem; - cursor: pointer; - display: inline-block; -} - -body .nav a:first-child{ - margin-left: 0; -} - -body .nav a:hover{ - text-decoration: underline; - text-underline-offset: 5px; - background: #2a3441; - color: #00ff00; -} - -body .nav .btn-logout{ - background: #2a3441; - border-color: #3a4551; - color: #ff9999; -} - -body .nav .btn-logout:hover{ - background: #3a4551; - border-color: #4a5561; - color: #ffaaaa; -} - -body [data-show-if-logged-in]{ - display: none; -} - -body [data-show-if-logged-out]{ - display: none; -} - -body [data-show-if-admin]{ - display: none; -} - -body .controls{ - margin: 20px 0; -} - -body .controls button{ - background: #1a2332; - color: #00ffff; - border: 1px solid #2a3441; - padding: 10px 20px; - margin: 5px; - cursor: pointer; -} - -body .controls button:hover{ - background: #2a3441; -} - -body button{ - background: #2a3441; - color: #00ffff; - border: 1px solid #3a4551; - padding: 10px 20px; - margin: 5px; - cursor: pointer; -} - -body button:hover{ - background: #3a4551; -} - -body .now-playing{ - background: #1a2332; - padding: 20px; - border: 1px solid #2a3441; - margin: 20px 0; - font-size: 1.5em; - color: #4488ff; - overflow: auto; -} - -body .recently-played-panel{ - background: #1a2332; - border: 1px solid #2a3441; - border-radius: 8px; - padding: 20px; - margin: 20px 0; -} - -body .recently-played-panel h3{ - margin: 0 0 15px 0; - color: #00ff00; - font-size: 1.2em; - font-weight: 600; -} - -body .recently-played-panel .recently-played-list{ - min-height: 100px; -} - -body .recently-played-panel .recently-played-list .loading, -body .recently-played-panel .recently-played-list .no-tracks, -body .recently-played-panel .recently-played-list .error{ - text-align: center; - color: #888; - padding: 20px; - font-style: italic; -} - -body .recently-played-panel .recently-played-list .error{ - color: #ff4444; -} - -body .recently-played-panel .recently-played-list .track-link{ - display: inline-flex; - align-items: center; - gap: 4px; - color: #00ffff; - text-decoration: none; - font-weight: 500; - font-size: 1em; - -moz-transition: all 0.2s; - -o-transition: all 0.2s; - -webkit-transition: all 0.2s; - -ms-transition: all 0.2s; - transition: all 0.2s; -} - -body .recently-played-panel .recently-played-list .track-link .external-icon{ - width: 14px; - height: 14px; - margin-left: 2px; - vertical-align: middle; -} - -body .recently-played-panel .recently-played-list .track-link:hover{ - color: #00ff00; - text-decoration: underline; - text-underline-offset: 3px; -} - -body .recently-played-panel .recently-played-list .track-link:visited{ - color: #4488ff; -} - -body .recently-played-panel .recently-played-list .track-list{ - list-style: none; - padding: 0 12px; - margin: 0; - border: none; - max-height: none; - overflow-y: visible; -} - -body .recently-played-panel .recently-played-list .track-item{ - padding: 10px 0; - border-bottom: 1px solid #2a3441; - -moz-transition: background-color 0.2s; - -o-transition: background-color 0.2s; - -webkit-transition: background-color 0.2s; - -ms-transition: background-color 0.2s; - transition: background-color 0.2s; -} - -body .recently-played-panel .recently-played-list .track-item LAST-CHILD{ - border-bottom: none; -} - -body .recently-played-panel .recently-played-list .track-item HOVER{ - background-color: #2a3441; -} - -body .recently-played-panel .recently-played-list.track-info{ - display: grid; - grid-template-columns: 1fr auto; - grid-template-rows: auto auto; - gap: 2px 20px; - align-items: center; -} - -body .recently-played-panel .recently-played-list.track-title{ - grid-column: 1; - grid-row: 1; -} - -body .recently-played-panel .recently-played-list.track-artist{ - color: #4488ff; - font-size: 0.9em; - grid-column: 1; - grid-row: 2; -} - -body .recently-played-panel .recently-played-list.track-time{ - color: #888; - font-size: 0.85em; - grid-column: 2; - grid-row: 1; - text-align: right; -} - -body .back{ - color: #00ffff; - text-decoration: none; - margin-bottom: 20px; - display: inline-block; -} - -body .back:hover{ - text-decoration: underline; -} - -body .player{ - background: #1a2332; - padding: 40px; - border: 1px solid #2a3441; - margin: 40px auto; - max-width: 600px; -} - - - -body .player .controls button{ - padding: 15px 30px; - margin: 10px; - font-size: 1.2em; -} - -body .player-section{ - background: #1a2332; - padding: 25px; - border: 1px solid #2a3441; - margin: 20px 0; - border-radius: 5px; -} - -body .player-section .live-stream{ - overflow: auto; -} - -body .live-stream{ - margin-top: 2rem; - font-size: 1.1rem; - color: #4488FF; -} - -body .live-stream .live-stream-label{ - font-size: 1.2rem; - color: #00FFFF; -} - -body .live-stream code{ - font-size: 0.9rem; -} - -body .live-stream .frame-enable-message{ - color: #00FFFF; -} - -body .live-stream .live-stream-quality{ - display: flex; - align-items: center; - flex-wrap: wrap; -} - -body .live-stream .live-stream-quality label{ - margin-right: 10px; -} - -body .live-stream .live-stream-quality select{ - background: transparent; - color: #00ff00; - border: 1px solid #00ff00; - letter-spacing: 0.08rem; - font-size: 0.95rem; - min-width: 220px; - width: fit-content; - padding: 5px; -} - -body .live-stream .live-stream-quality select:hover{ - background: #2a3441; -} - -body .track-browser{ - margin: 15px 0; -} - -body .search-input{ - width: 100%; - padding: 12px; - background: #0a0a0a; - color: #00ffff; - border: 1px solid #2a3441; - font-family: Courier New, monospace; - font-size: 14px; - margin-bottom: 15px; - box-sizing: border-box; -} - -body .sort-select{ - padding: 0.25rem; - margin-right: 10px; -} - -body .track-list{ - max-height: 400px; - overflow-y: auto; - border: 1px solid #2a3441; - background: #0a0a0a; -} - -body .track-item{ - display: flex; - justify-content: space-between; - align-items: center; - padding: 12px 15px; - border-bottom: 1px solid #2a3441; - -moz-transition: background-color 0.2s; - -o-transition: background-color 0.2s; - -webkit-transition: background-color 0.2s; - -ms-transition: background-color 0.2s; - transition: background-color 0.2s; -} - -body .track-info{ - flex: 1; -} - -body .track-info .track-title{ - color: #00ffff; - font-weight: bold; - margin-bottom: 4px; -} - -body .track-info .track-meta{ - color: #888; - font-size: 0.9em; -} - -body .track-actions{ - display: flex; - gap: 8px; -} - -body .audio-player{ - text-align: center; -} - - - -body @-moz-documenturl-prefix() audio{ - background-color: red; -} - -body audio::-webkit-media-controls-panel{ - border: 1px solid; - border-color: #1a2332; - background-color: #1a2332; -} - -body audio::-webkit-media-controls-current-time-display, -body audio::-webkit-media-controls-time-remaining-display{ - color: #fff; -} - -body audio::-webkit-media-controls-enclosure{ - border-radius: 0; -} - -body audio::-webkit-media-controls-mute-button, -body audio::-webkit-media-controls-play-button, -body audio::-webkit-media-controls-volume-slider, -body audio::-webkit-media-controls-timeline, -body audio::-webkit-media-controls-toggle-closed-captions-button, -body audio::-webkit-media-controls-fullscreen-button, -body audio::-webkit-media-controls-timeline, -body audio::-webkit-media-controls-overlay-enclosure{ - -moz-filter: invert(1); - -o-filter: invert(1); - -webkit-filter: invert(1); - -ms-filter: invert(1); - filter: invert(1); -} - -body .track-art{ - font-size: 3em; - margin-right: 20px; - color: #4488ff; -} - - - -body .track-details .track-title{ - font-size: 1.4em; - color: #00ffff; - margin-bottom: 5px; -} - -body .track-details .track-artist{ - font-size: 1.1em; - color: #4488ff; - margin-bottom: 3px; -} - -body .track-details .track-album{ - color: #888; -} - -body .player-controls{ - margin: 20px 0; - display: flex; - justify-content: center; - gap: 10px; - flex-wrap: wrap; -} - -body .player-info{ - display: flex; - justify-content: space-between; - align-items: center; - margin-top: 15px; - padding: 10px; - background: #0a0a0a; - border: 1px solid #2a3441; - border-radius: 3px; -} - -body .time-display{ - color: #00ffff; - font-family: Courier New, monospace; -} - -body .volume-control{ - display: flex; - align-items: center; - gap: 10px; -} - -body .volume-control label{ - color: #4488ff; -} - -body .volume-slider{ - width: 100px; - height: 5px; - background: #2a3441; - outline: none; - border-radius: 3px; -} - -body .btn{ - background: #2a3441; - color: #00ffff; - border: 1px solid #3a4551; - padding: 8px 16px; - margin: 3px; - cursor: pointer; - font-family: Courier New, monospace; - font-size: 14px; - border-radius: 3px; - -moz-transition: all 0.2s; - -o-transition: all 0.2s; - -webkit-transition: all 0.2s; - -ms-transition: all 0.2s; - transition: all 0.2s; -} - -body .btn:hover{ - background: #3a4551; - border-color: #3a4551; -} - - - -body .btn .btn-primary{ - background: #0066cc; - border-color: #0088ff; -} - -body .btn .btn-primary:hover{ - background: #0088ff; -} - -body .btn .btn-secondary{ - background: #444; - border-color: #2a3441; -} - -body .btn .btn-secondary:hover{ - background: #666; -} - -body .btn .btn-sm{ - padding: 4px 8px; - font-size: 12px; -} - -body .btn .btn.active{ - background: #4488ff; - border-color: #5599ff; - color: #000; -} - -body .playlist-controls{ - margin-bottom: 15px; - display: flex; - gap: 10px; - align-items: center; -} - -body .playlist-input{ - flex: 1; - padding: 8px 12px; - background: #0a0a0a; - color: #00ffff; - border: 1px solid #2a3441; - font-family: Courier New, monospace; - box-sizing: border-box; -} - -body .playlist-list{ - border: 1px solid #2a3441; - background: #0a0a0a; - min-height: 100px; - padding: 10px; -} - -body .queue-controls{ - margin-bottom: 15px; - display: flex; - gap: 10px; -} - -body .play-queue{ - border: 1px solid #2a3441; - background: #0a0a0a; - min-height: 150px; - max-height: 300px; - overflow-y: auto; - padding: 10px; -} - -body .queue-item{ - display: flex; - justify-content: space-between; - align-items: center; - padding: 8px 10px; - border-bottom: 1px solid #2a3441; - margin-bottom: 5px; -} - -body .queue-item:last-child{ - border-bottom: none; - margin-bottom: 0; -} - -body .queue-position{ - background: #00ff00; - color: #000; - padding: 4px 8px; - border-radius: 3px; - font-weight: bold; - margin-right: 10px; - min-width: 30px; - text-align: center; - display: inline-block; -} - -body .queue-track-info{ - flex: 1; - margin-right: 10px; -} - -body .queue-track-info.track-title{ - font-weight: bold; - margin-bottom: 2px; -} - -body .queue-track-info.track-artist{ - font-size: 0.9em; - color: #888; -} - -body .queue-actions{ - margin-top: 20px; - padding: 15px; - background: #0a0a0a; - border: 1px solid #2a3441; - border-radius: 4px; -} - -body .queue-list{ - border: 1px solid #2a3441; - background: #0a0a0a; - min-height: 200px; - max-height: 400px; - overflow-y: auto; - padding: 10px; - margin-bottom: 20px; -} - -body .search-results{ - margin-top: 10px; - max-height: 300px; - overflow-y: auto; -} - -body .search-result-item{ - display: flex; - justify-content: space-between; - align-items: center; - padding: 10px; - border: 1px solid #2a3441; - margin-bottom: 5px; - background: #0a0a0a; - border-radius: 3px; -} - -body .search-result-item:hover{ - background: #1a1a1a; - border-color: #00ff00; -} - -body .search-result-item.track-info{ - flex: 1; -} - -body .search-result-item.track-actions{ - display: flex; - gap: 5px; -} - -body .empty-state{ - text-align: center; - color: #666; - padding: 30px; - font-style: italic; -} - -body .empty-queue{ - text-align: center; - color: #666; - padding: 20px; - font-style: italic; -} - -body .no-tracks{ - text-align: center; - color: #666; - padding: 20px; - font-style: italic; -} - -body .no-playlists{ - text-align: center; - color: #666; - padding: 20px; - font-style: italic; -} - -body .loading{ - text-align: center; - color: #4488ff; - padding: 20px; -} - -body .error{ - text-align: center; - color: #ff0000; - padding: 20px; - font-weight: bold; -} - -body .upload-section{ - margin: 20px 0; - padding: 20px; - background: #0a0a0a; - border: 1px solid #2a3441; - border-radius: 5px; -} - -body .upload-controls{ - display: flex; - gap: 15px; - align-items: center; - margin-bottom: 15px; -} - -body .upload-info{ - color: #888; - font-size: 0.9em; -} - -body .upload-progress{ - margin-top: 10px; - padding: 10px; - background: #1a2332; - border: 1px solid #2a3441; - border-radius: 3px; -} - -body .progress-bar{ - height: 20px; - background: #4488ff; - border-radius: 3px; - -moz-transition: width 0.3s ease; - -o-transition: width 0.3s ease; - -webkit-transition: width 0.3s ease; - -ms-transition: width 0.3s ease; - transition: width 0.3s ease; - width: 0%; -} - -body .progress-text{ - display: block; - margin-top: 5px; - color: #00ffff; - font-size: 0.9em; -} - -body input{ - padding: 8px 12px; - background: #1a2332; - color: #00ffff; - border: 1px solid #2a3441; - border-radius: 3px; - font-family: Courier New, monospace; -} - -body .upload-interface{ - margin-top: 2rem; - padding: 1.5rem; - background-color: #1a2332; - border-radius: 8px; - border: 1px solid #2a3441; -} - -body .upload-interface h3{ - color: #00ffff; - margin-bottom: 1rem; -} - -body .upload-interface .upload-area{ - border: 2px dashed #2a3441; - border-radius: 8px; - padding: 2rem; - text-align: center; - background-color: #0f0f0f; - -moz-transition: border-color 0.3s ease; - -o-transition: border-color 0.3s ease; - -webkit-transition: border-color 0.3s ease; - -ms-transition: border-color 0.3s ease; - transition: border-color 0.3s ease; -} - -body .upload-interface .upload-area .upload-icon{ - font-size: 3rem; - color: #666; - margin-bottom: 1rem; -} - -body .upload-interface .upload-area p{ - color: #999; - margin-bottom: 1rem; -} - -body .upload-interface .upload-area .btn{ - margin-top: 1rem; -} - -body .upload-interface .upload-area:hover{ - border-color: #00ffff; -} - -body .auth-container{ - display: flex; - justify-content: center; - align-items: center; - min-height: 60vh; - padding: 2rem; -} - -body .auth-form{ - background-color: #1a2332; - border: 1px solid #2a3441; - border-radius: 8px; - padding: 2rem; - width: 100%; - max-width: 600px; - -moz-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); - -o-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); - -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); - -ms-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); -} - -body .auth-form h2{ - color: #00ffff; - text-align: center; - margin-bottom: 1.5rem; - font-size: 1.5rem; -} - -body .auth-form h3{ - color: #00ffff; - margin-bottom: 1rem; - font-size: 1.2rem; -} - -body .form-group{ - margin-bottom: 1.5rem; -} - -body .form-group label{ - display: block; - color: #ccc; - margin-bottom: 0.5rem; - font-weight: bold; -} - -body .form-group input{ - width: 100%; - padding: 0.75rem; - background-color: #0f0f0f; - border: 1px solid #2a3441; - border-radius: 4px; - color: #fff; - font-size: 1rem; - box-sizing: border-box; -} - -body .form-group input:focus{ - border-color: #00ffff; - outline: none; - -moz-box-shadow: 0 0 0 2px rgba(0, 255, 0, 0.2); - -o-box-shadow: 0 0 0 2px rgba(0, 255, 0, 0.2); - -webkit-box-shadow: 0 0 0 2px rgba(0, 255, 0, 0.2); - -ms-box-shadow: 0 0 0 2px rgba(0, 255, 0, 0.2); - box-shadow: 0 0 0 2px rgba(0, 255, 0, 0.2); -} - -body .form-actions{ - display: flex; - gap: 1rem; - margin-top: 1.5rem; -} - -body .message{ - padding: 0.75rem; - border-radius: 4px; - margin-top: 1rem; - text-align: center; - font-weight: bold; -} - -body .message.success{ - background-color: rgba(0, 255, 0, 0.1); - border: 1px solid #00ffff; - color: #00ffff; -} - -body .message.error{ - background-color: rgba(255, 0, 0, 0.1); - border: 1px solid #ff0000; - color: #ff0000; -} - -body .auth-link{ - text-align: center; - margin-top: 1.5rem; - color: #999; -} - -body .auth-link a{ - color: #00ffff; - text-decoration: none; -} - -body .auth-link a:hover{ - text-decoration: underline; -} - -body .profile-info{ - margin-bottom: 2rem; -} - -body .info-group{ - display: flex; - justify-content: space-between; - align-items: center; - padding: 0.75rem 0; - border-bottom: 1px solid #2a3441; -} - -body .info-group label{ - color: #ccc; - font-weight: bold; -} - -body .info-group span{ - color: #fff; -} - -body .info-group:last-child{ - border-bottom: none; -} - -body .role-badge{ - background-color: #00ffff; - color: #000; - padding: 0.25rem 0.5rem; - border-radius: 4px; - font-size: 0.875rem; - font-weight: bold; -} - -body .profile-actions{ - display: flex; - gap: 1rem; - justify-content: center; -} - -body .artist-stats{ - display: flex; - flex-direction: column; - gap: 0.75rem; -} - -body .artist-item{ - display: flex; - justify-content: space-between; - align-items: center; - padding: 0.5rem 0; - border-bottom: 1px solid #2a3441; -} - -body .artist-item:last-child{ - border-bottom: none; -} - -body .artist-name{ - color: #e0e6ed; - font-weight: 500; -} - -body .artist-plays{ - color: #8892b0; - font-size: 0.875rem; -} - -body .track-item{ - display: flex; - justify-content: space-between; - align-items: center; - padding: 0.75rem 0; - border-bottom: 1px solid #2a3441; -} - -body .track-item:last-child{ - border-bottom: none; -} - -body .track-info{ - display: flex; - flex-direction: column; - gap: 0.25rem; -} - -body .track-title{ - color: #e0e6ed; - font-weight: 500; -} - -body .track-artist{ - color: #8892b0; - font-size: 0.875rem; -} - -body .track-meta{ - display: flex; - flex-direction: column; - align-items: flex-end; - gap: 0.25rem; - text-align: right; -} - -body .track-duration{ - color: #64ffda; - font-size: 0.875rem; - font-weight: bold; -} - -body .track-played-at{ - color: #8892b0; - font-size: 0.75rem; -} - -body .activity-chart{ - text-align: center; -} - -body .chart-placeholder{ - display: flex; - align-items: flex-end; - justify-content: space-between; - height: 120px; - margin: 1rem 0; - padding: 0 1rem; -} - -body .chart-bar{ - width: 8px; - background-color: #64ffda; - border-radius: 2px 2px 0 0; - margin: 0 1px; - min-height: 4px; - opacity: 0.8; -} - -body .chart-bar:hover{ - opacity: 1; -} - -body .chart-note{ - color: #8892b0; - font-size: 0.875rem; - margin-top: 0.5rem; -} - -body .stat-number{ - color: #64ffda; - font-size: 1.5rem; - font-weight: bold; - display: block; -} - -body .stat-text{ - color: #e0e6ed; - font-size: 1.2rem; - font-weight: 500; - display: block; -} - -body .toast{ - position: fixed; - top: 20px; - right: 20px; - padding: 12px 20px; - border-radius: 4px; - color: white; - font-weight: bold; - z-index: 1000; - -moz-transition: opacity 0.3s ease; - -o-transition: opacity 0.3s ease; - -webkit-transition: opacity 0.3s ease; - -ms-transition: opacity 0.3s ease; - transition: opacity 0.3s ease; -} - -body .user-management{ - margin-top: 2rem; -} - -body .users-table{ - width: 100%; - border-collapse: collapse; - background-color: #1a2332; - border: 1px solid #2a3441; - border-radius: 8px; - overflow: hidden; -} - -body .users-table thead{ - background-color: #0f0f0f; -} - -body .users-table thead th{ - padding: 1rem; - text-align: left; - color: #00ffff; - font-weight: bold; - border-bottom: 1px solid #2a3441; -} - - - -body .users-table tbody tr{ - border-bottom: 1px solid #2a3441; -} - -body .users-table tbody tr td{ - padding: 1rem; - color: #fff; - vertical-align: middle; -} - -body .users-table tbody tr:hover{ - background-color: #222; -} - -body .users-table tbody .user-actions{ - display: flex; - gap: 0.5rem; -} - -body .users-table tbody .user-actions .btn{ - padding: 0.25rem 0.5rem; - font-size: 0.875rem; -} - -body .user-stats{ - display: grid; - grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); - gap: 1rem; - margin-bottom: 2rem; -} - -body .stat-card{ - background-color: #1a2332; - border: 1px solid #2a3441; - border-radius: 8px; - padding: 1rem; - text-align: center; -} - -body .stat-card .stat-number{ - font-size: 2rem; - font-weight: bold; - color: #00ffff; - display: block; -} - -body .stat-card .stat-label{ - color: #ccc; - font-size: 0.875rem; - margin-top: 0.5rem; -} - -body.persistent-player-container{ - margin: 0; - padding: 10px;; - background: #1a2332; -} - -body.persistent-player-container .persistent-player{ - display: flex; - align-items: center; - gap: 15px; - max-width: 100%; -} - -body.persistent-player-container .player-label{ - color: #00ff00; - font-weight: bold; - white-space: nowrap; -} - -body.persistent-player-container .quality-selector{ - display: flex; - align-items: center; - gap: 5px; -} - - - -body.persistent-player-container .quality-selector label{ - color: #00ff00; - font-size: 0.9em; -} - - - -body.persistent-player-container .quality-selector select{ - background: transparent; - color: #00ff00; - letter-spacing: 0.08rem; - border: 1px solid #00ff00; - padding: 3px 8px; -} - -body.persistent-player-container .quality-selector select:hover{ - background: #2a3441; -} - -body.persistent-player-container audio{ - flex: 1; - min-width: 200px; - border: 0; -} - -body.persistent-player-container .now-playing-mini{ - color: #00ff00; - font-size: 0.9em; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - flex: 1; - min-width: 300px; -} - -body.persistent-player-container .persistent-disable-btn{ - background: transparent; - color: #00ff00; - border: 1px solid #00ff00; - padding: 5px 10px; - cursor: pointer; - font-family: VT323, monospace; - font-size: 0.85em; - white-space: nowrap; -} - -body.persistent-player-container .persistent-disable-btn:hover{ - background: #2a3441; -} - -body.popout-body{ - margin: 0; - padding: 10px; - background: #0a0a0a; - overflow: hidden; -} - -body.popout-body .popout-player{ - max-width: 400px; - margin: 0 auto; -} - -body.popout-body .popout-header{ - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 10px; - padding-bottom: 10px; - border-bottom: 1px solid #2a3441; -} - -body.popout-body .popout-title{ - font-size: 1.2em; - color: #4488FF; -} - -body.popout-body .popout-title .popout-subtitle{ - margin-top: 0; - margin-left: 2rem; - font-style: italic; - font-size: .8rem; -} - -body.popout-body .close-btn{ - background: transparent; - font-family: VT323, monospace; - color: #00ff00; - border: 1px solid #00ff00; - padding: 5px 10px; - cursor: pointer; - border-radius: 3px; - font-size: 0.9em; -} - -body.popout-body .close-btn:hover{ - background: #2a3441; -} - -body.popout-body .now-playing-mini{ - background: #1a2332; - padding: 10px; - border-radius: 5px; - margin-bottom: 10px; - border: 1px solid #2a3441; -} - -body.popout-body .track-info-mini{ - font-size: 0.9em; -} - -body.popout-body .track-title-mini{ - color: #00ff00; - font-weight: bold; - margin-bottom: 3px; -} - -body.popout-body .track-artist-mini{ - color: #4488ff; - font-size: 0.85em; -} - -body.popout-body .quality-selector{ - margin: 10px 0; - padding: 10px; - background: #1a2332; - border-radius: 5px; - border: 1px solid #2a3441; -} - -body.popout-body .quality-selector label{ - color: #00ff00; - margin-right: 10px; -} - -body.popout-body .quality-selector select{ - background: transparent; - color: #00ff00; - border: 1px solid #00ff00; - padding: 5px; - border-radius: 3px; -} - -body.popout-body .quality-selector select:hover{ - background: #2a3441; -} - -body.popout-body audio{ - width: 100%; - margin: 10px 0; -} - -body.popout-body .status-mini{ - text-align: center; - color: #888; - font-size: 0.85em; - margin-top: 10px; -} - -@media (max-width: 576px){ - body .playlist-controls{ - display: block; - } - body .playlist-controls >*{ - width: 100%; - } - body .playlist-controls button{ - margin-left: 0; - margin-right: 0; - } -} - -@supports (-moz-appearance: none){ - audio{ - opacity: 1; - background-color: #1a2332; - } -} - -.live-stream-indicator{ - animation: asteroid-blink 1s steps(5, start) infinite; -} - -@keyframes asteroid-blink{ - to{ - visibility: hidden; - } -} \ No newline at end of file