:root { --bg-color: #1c1c1e; --player-bg-color: #2c2c2e; --text-color: #f2f2f7; --text-color-secondary: #8e8e93; --control-bg: rgba(255, 255, 255, 0.1); --control-bg-hover: rgba(255, 255, 255, 0.2); --input-bg-color: #3a3a3c; --border-color: #3a3a3c; --scrollbar-track-color: #2c2c2e; --scrollbar-thumb-color: #555; --scrollbar-thumb-hover-color: #666; --link-color: #0a84ff; --default-icon-color: #8e8e93; } /* Applied to tag when in light mode */ html.light-mode { --bg-color: #f2f2f7; --player-bg-color: #ffffff; --text-color: #000000; --text-color-secondary: #3c3c43; --control-bg: rgba(0, 0, 0, 0.05); --control-bg-hover: rgba(0, 0, 0, 0.1); --input-bg-color: #e5e5ea; --border-color: #c7c7cc; --scrollbar-track-color: #e5e5ea; --scrollbar-thumb-color: #aeaeb2; --scrollbar-thumb-hover-color: #8e8e93; --link-color: #007aff; --default-icon-color: #5f5f5f; } body,html{ margin:0; padding:0; box-sizing:border-box; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background-color:var(--bg-color); color:var(--text-color); display:flex; flex-direction:column; justify-content:center; align-items:center; min-height:100vh; text-align:center; } body { padding: 1rem 0; } .radio-player{background-color:var(--player-bg-color);border-radius:24px;padding:2rem;width:90%;max-width:350px;box-shadow:0 10px 30px rgba(0,0,0,.2);display:flex;flex-direction:column;align-items:center;gap:1rem;} .station-icon-container { width:120px;height:120px; border-radius:18px; background-color:var(--input-bg-color); border:1px solid var(--border-color); box-shadow:0 4px 15px rgba(0,0,0,.2); display: flex; justify-content: center; align-items: center; overflow: hidden; } .station-icon-container img { width:100%;height:100%;object-fit:cover; } .station-icon-container svg { width: 60%; height: 60%; fill: var(--default-icon-color); } .station-info{line-height:1.3;} .station-info h2{ margin:0; font-size:1.3rem; font-weight:600; display: flex; align-items: center; justify-content: center; color: var(--text-color); } .station-info h2 a { color: var(--link-color); margin-left: 0.5rem; font-size: 0.8em; text-decoration: none; } .station-info h2 a:hover { text-decoration: underline; } .station-info p{margin:.2rem 0 0 0;color:var(--text-color-secondary);font-size:0.9rem;} #status{color:var(--text-color-secondary);font-style:italic;height:18px; font-size: 0.85rem;} .controls{display:flex;justify-content:center;align-items:center;gap:1.5rem;width:100%;} .controls button{background-color:var(--control-bg);border:none;color:var(--text-color);border-radius:50%;cursor:pointer;transition:background-color .2s ease;display:flex;justify-content:center;align-items:center;} .controls button:hover{background-color:var(--control-bg-hover);}.controls .btn-secondary{width:45px;height:45px;font-size:1.3rem;}.controls .btn-primary{width:60px;height:60px;font-size:1.8rem;} .settings-panel{ margin-top:0.8rem; display:flex; flex-direction:column; align-items:center; gap:0.8rem; width:100%; } .search-controls-container { display: flex; gap: 0.5rem; width: 100%; max-width: 320px; justify-content: center; align-items: center; } .search-controls-container select { padding: 0.5rem; border-radius: 8px; border: 1px solid var(--border-color); background-color: var(--input-bg-color); color: var(--text-color); font-size: 0.8rem; height: calc(1rem + 1rem + 2px); -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%238e8e93%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.4-5.4-12.8z%22/%3E%3C/svg%3E'); background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 0.65em auto; padding-right: 1.8rem; flex-shrink: 0; } html.light-mode .search-controls-container select { background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%235f5f5f%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.4-5.4-12.8z%22/%3E%3C/svg%3E'); } .input-with-suggestions { position: relative; flex-grow: 1; display: flex; } .input-with-suggestions input[type="text"]{ width:100%; padding:0.5rem; border-radius:8px; border:1px solid var(--border-color); background-color:var(--input-bg-color); color:var(--text-color); font-size:0.9rem; box-sizing: border-box; } .search-controls-container button{ padding:0.5rem 0.8rem; border-radius:8px; border:none; background-color:var(--control-bg); color:var(--text-color); cursor:pointer; font-size:0.9rem; transition:background-color .2s ease; height: calc(1rem + 1rem + 2px); flex-shrink: 0; } .search-controls-container button:hover{background-color:var(--control-bg-hover);} #currentSearchMode{font-size:0.8rem;color:var(--text-color-secondary);margin-top:0.3rem;height:16px;} .suggestions-container { display: none; position: absolute; background-color: var(--player-bg-color); border: 1px solid var(--border-color); border-radius: 0 0 8px 8px; border-top: none; width: 100%; max-height: 150px; overflow-y: auto; z-index: 1000; box-shadow: 0 4px 15px rgba(0,0,0,.3); top: calc(100% - 1px); left: 0; box-sizing: border-box; } .suggestion-item { padding: 0.6rem 0.8rem; cursor: pointer; color: var(--text-color); font-size: 0.9rem; text-align: left; } .suggestion-item:hover { background-color: var(--control-bg); } .suggestion-item.selected { background-color: var(--control-bg-hover); font-weight: 600; } .suggestions-container::-webkit-scrollbar { width: 6px; } .suggestions-container::-webkit-scrollbar-track { background: var(--scrollbar-track-color); border-radius: 3px; } .suggestions-container::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb-color); border-radius: 3px; } .suggestions-container::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover-color); } /* --- Sleep Timer Styles --- */ #sleep-timer-panel { width: 100%; max-width: 320px; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin-top: 0.2rem; } #sleepTimerStatus { font-size: 0.8rem; color: var(--text-color-secondary); height: 16px; } #sleepTimerControls { display: flex; gap: 0.5rem; justify-content: center; } #sleepTimerControls .timer-btn { padding: 0.4rem 0.7rem; border-radius: 8px; border: 1px solid var(--border-color); background-color: var(--input-bg-color); color: var(--text-color); cursor: pointer; font-size: 0.8rem; transition: background-color .2s ease; } #sleepTimerControls .timer-btn:hover { background-color: var(--control-bg-hover); } #cancelTimerBtn { background-color: rgba(255, 59, 48, 0.2); border-color: rgba(255, 59, 48, 0.4); display: none; /* Hidden by default */ } #cancelTimerBtn:hover { background-color: rgba(255, 59, 48, 0.4); } /* --- End Sleep Timer Styles --- */ .mode-toggle{display:flex;align-items:center;gap:0.5rem;font-size:0.9rem;} .mode-toggle label { color: var(--text-color-secondary); } .mode-toggle input[type="checkbox"]{appearance:none;width:40px;height:20px;background-color:var(--input-bg-color);border-radius:10px;position:relative;cursor:pointer;outline:none;transition:background-color .2s;} .mode-toggle input[type="checkbox"]::before{content:'';position:absolute;width:16px;height:16px;border-radius:50%;background-color:var(--player-bg-color);top:2px;left:2px;transition:transform .2s ease-in-out;} .mode-toggle input[type="checkbox"]:checked{background-color:#34c759;} .mode-toggle input[type="checkbox"]:checked::before{transform:translateX(20px);} html.light-mode .mode-toggle input[type="checkbox"]::before { background-color: #8e8e93; } html.light-mode .mode-toggle input[type="checkbox"]:checked::before { background-color: var(--player-bg-color); } html:not(.light-mode) .mode-toggle input[type="checkbox"]::before { background-color: #f2f2f7; } html:not(.light-mode) .mode-toggle input[type="checkbox"]:checked::before { background-color: #f2f2f7; }