diff --git a/index.html b/index.html index e928d75..663182c 100644 --- a/index.html +++ b/index.html @@ -69,7 +69,8 @@ canvas { width: 100%; height: 100px; border-radius: 6px; display: block; } .playlist { display: flex; flex-direction: column; flex: 1; min-height: 0; } .playlist-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 24px; border-bottom: 1px solid #272c42; flex-shrink: 0; flex-wrap: wrap; } .playlist-toolbar .spacer { flex: 1; } -.playlist-toolbar select { background: linear-gradient(to bottom, #272c42, #1e2132); border: 1px solid #6b7089; color: #c6c8d1; padding: 4px 8px; border-radius: 4px; font-size: 11px; cursor: pointer; outline: none; box-shadow: 0 2px 0 #161821, 0 3px 4px rgba(0,0,0,0.3); transition: transform .1s, box-shadow .1s; } +.playlist-toolbar select { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3l3 3 3-3' stroke='%23c6c8d1' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 6px center / 8px no-repeat, linear-gradient(to bottom, #272c42, #1e2132); border: 1px solid #6b7089; color: #c6c8d1; padding: 4px 20px 4px 8px; border-radius: 4px; font-size: 11px; cursor: pointer; outline: none; box-shadow: 0 2px 0 #161821, 0 3px 4px rgba(0,0,0,0.3); transition: transform .1s, box-shadow .1s; -webkit-appearance: none; appearance: none; } +.playlist-toolbar select:hover { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3l3 3 3-3' stroke='%23c6c8d1' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 6px center / 8px no-repeat, linear-gradient(to bottom, #2e3348, #272c42); } .playlist-header { display: grid; grid-template-columns: 36px minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 60px 60px; gap: 8px; padding: 8px 24px; font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: #6b7089; border-bottom: 1px solid #272c42; flex-shrink: 0; background: linear-gradient(to bottom, #1e2132, #161821); } .playlist-body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 2px 0; position: relative; background: #101219; } @@ -1409,11 +1410,24 @@ async function collectFiles(entry, files, paths, path, onFile) { } } +let zoomLevel = 1; document.addEventListener('keydown', (e) => { if (e.target.tagName === 'INPUT' || e.target.tagName === 'SELECT') return; if (e.code === 'Space') { e.preventDefault(); playBtn.click(); } if (e.code === 'ArrowRight') nextBtn.click(); if (e.code === 'ArrowLeft') prevBtn.click(); + if (e.ctrlKey || e.metaKey) { + if (e.key === '+' || e.code === 'NumpadAdd') { + e.preventDefault(); zoomLevel = Math.min(3, +(zoomLevel + 0.1).toFixed(1)); + document.body.style.zoom = zoomLevel; + } else if (e.key === '-' || e.code === 'NumpadSubtract') { + e.preventDefault(); zoomLevel = Math.max(0.3, +(zoomLevel - 0.1).toFixed(1)); + document.body.style.zoom = zoomLevel; + } else if ((e.key === '0' && !e.shiftKey) || e.code === 'Numpad0') { + e.preventDefault(); zoomLevel = 1; + document.body.style.zoom = ''; + } + } }); window.addEventListener('focus', () => { diff --git a/noiz b/noiz new file mode 100755 index 0000000..1e592a7 --- /dev/null +++ b/noiz @@ -0,0 +1,5 @@ +#!/usr/bin/env python3 +import webview +webview.create_window( "noiz://", "./index.html", zoomable=True) +webview.start() + diff --git a/noiz.py b/noiz.py deleted file mode 100755 index 03afb92..0000000 --- a/noiz.py +++ /dev/null @@ -1,8 +0,0 @@ -#!/usr/bin/env python3 -import webview -webview.create_window( -"noiz://", -"https://bsd.pm/noiz/" -) -webview.start() -