Use theme-aware SVGs for download and offline actions

This commit is contained in:
Jonathan Sykes
2026-10-09 14:28:23 +08:00
parent 66bbda51c7
commit 2001e77cee
13 changed files with 122 additions and 62 deletions

View File

@@ -312,7 +312,9 @@
main { padding-top: 16px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
</style>
.media-shape { display:none; } .media-shape-classic { display:inline; }
.media-icon { width:18px; height:18px; vertical-align:middle; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
</style>
</head>
<body>
@@ -407,7 +409,7 @@
<label>Shift every timed line by <input class="field" id="shiftBy" type="text" value="0.0" style="flex:0 0 84px;height:36px;text-align:center" /> s</label>
<button class="btn sm" id="shiftBtn" type="button">Apply</button>
<span class="grow"></span>
<button class="btn sm" id="webBtn" type="button" title="Fetch lyrics from LRCLIB">⤓ Pull from LRCLIB</button>
<button class="btn sm" id="webBtn" type="button" title="Fetch lyrics from LRCLIB"><svg class="media-icon" data-media-icon="download" viewBox="0 0 24 24" aria-hidden="true"><use href="#media-download"/></svg> Pull from LRCLIB</button>
<button class="btn sm" id="rawBtn" type="button">✎ Edit as text</button>
<label><input type="checkbox" id="follow" checked /> Follow playback</label>
</div>
@@ -508,7 +510,7 @@
<div class="card">
<div class="row" style="margin-bottom:8px"><h2 style="margin:0">Recent edits</h2><span class="grow"></span>
<button class="btn sm" id="refreshBtn" type="button">↻ Refresh</button>
<a class="btn sm" href="/api/admin/notes/export">⤓ Export all (JSON)</a></div>
<a class="btn sm" href="/api/admin/notes/export"><svg class="media-icon" data-media-icon="download" viewBox="0 0 24 24" aria-hidden="true"><use href="#media-download"/></svg> Export all (JSON)</a></div>
<div class="scroll"><table class="tbl" id="revTable"></table></div>
<pre id="revView" class="hidden" style="margin-top:12px"></pre>
</div>
@@ -569,6 +571,7 @@
<nav class="nav" id="tabsBottom" role="tablist"></nav>
</div>
<script src="download-actions.js"></script>
<script src="lyrics-core.js"></script>
<script>
(function () {