yonlu
4e52f6b494
Moved icons to sit outside the toggle track on either side. Both icons are always fully visible. The active side's icon gets the accent color, the inactive side dims to secondary. Track is a minimal 36×20px pill with a sliding thumb. - Off: globe bright, thumb left, hard-drive dimmed - On: globe dimmed, thumb right + yellow track, hard-drive accent
47 lines
1.4 KiB
HTML
47 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
|
<link href="./index.css" rel="stylesheet" />
|
|
<title>yellowjacket</title>
|
|
<script src="/index.ts" type="module"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<header class="top-bar">
|
|
<hgroup>
|
|
<h1 class="title">YellowJacket</h1>
|
|
<h3 class="subtitle">Music how it was meant to bee.</h3>
|
|
</hgroup>
|
|
<div id="library-only-toggle" class="mode-toggle" title="Toggle Library Only mode">
|
|
<wa-icon name="globe" class="mode-icon mode-icon-globe"></wa-icon>
|
|
<div class="mode-toggle-track">
|
|
<div class="mode-toggle-thumb"></div>
|
|
</div>
|
|
<wa-icon name="hard-drive" class="mode-icon mode-icon-local"></wa-icon>
|
|
</div>
|
|
<library-filter></library-filter>
|
|
<search-bar></search-bar>
|
|
</header>
|
|
<div class="sidebar">
|
|
<app-sidebar></app-sidebar>
|
|
</div>
|
|
<div class="content-area">
|
|
<main class="main-panel" id="main-content">
|
|
<track-list></track-list>
|
|
</main>
|
|
<queue-panel id="queue-panel"></queue-panel>
|
|
</div>
|
|
<footer class="bottom-bar">
|
|
<now-playing></now-playing>
|
|
<audio-player></audio-player>
|
|
<button id="queue-button">
|
|
<wa-icon name="list"></wa-icon>
|
|
</button>
|
|
</footer>
|
|
</body>
|
|
|
|
</html>
|