aherman
/
SoulSync
mirror of https://github.com/Nezreka/SoulSync.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Sidebar SVG icons, larger page header icons, and accent-colored nav

Browse Source
pull/253/head
Broque Thomas 2 months ago
parent 6b1d069be0
commit a682f814f7
2 changed files with 29 additions and 28 deletions
Show Stats Download Patch File Download Diff File

22
webui/index.html
Unescape View File

@ -92,47 +92,47 @@
<!-- Navigation Section -->
<nav class="sidebar-nav">
<button class="nav-button active" data-page="dashboard">
<span class="nav-icon"><img src="/static/dashboard.png" class="nav-icon-img"></span>
<span class="nav-icon"><svg class="nav-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="4" rx="1"/><rect x="3" y="14" width="7" height="4" rx="1"/><rect x="14" y="11" width="7" height="7" rx="1"/><line x1="5" y1="20" x2="5" y2="22"/><line x1="8" y1="19" x2="8" y2="22"/></svg></span>
<span class="nav-text">Dashboard</span>
</button>
<button class="nav-button" data-page="sync">
<span class="nav-icon"><img src="/static/sync.png" class="nav-icon-img"></span>
<span class="nav-icon"><svg class="nav-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 3 21 3 21 8"/><line x1="4" y1="20" x2="21" y2="3"/><polyline points="21 16 21 21 16 21"/><line x1="15" y1="15" x2="21" y2="21"/><line x1="4" y1="4" x2="9" y2="9"/></svg></span>
<span class="nav-text">Sync</span>
</button>
<button class="nav-button" data-page="downloads">
<span class="nav-icon"><img src="/static/search.png" class="nav-icon-img"></span>
<span class="nav-icon"><svg class="nav-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="11" y1="8" x2="11" y2="14"/><polyline points="8 11 11 14 14 11"/></svg></span>
<span class="nav-text">Search</span>
</button>
<button class="nav-button" data-page="discover">
<span class="nav-icon"><img src="/static/discover.png" class="nav-icon-img"></span>
<span class="nav-icon"><svg class="nav-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76" fill="currentColor" opacity="0.2" stroke="currentColor"/></svg></span>
<span class="nav-text">Discover</span>
</button>
<button class="nav-button" data-page="artists">
<span class="nav-icon"><img src="/static/artists.png" class="nav-icon-img"></span>
<span class="nav-icon"><svg class="nav-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg></span>
<span class="nav-text">Artists</span>
</button>
<button class="nav-button" data-page="automations">
<span class="nav-icon"><img src="/static/automation.png" class="nav-icon-img"></span>
<span class="nav-icon"><svg class="nav-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><polyline points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg></span>
<span class="nav-text">Automations</span>
</button>
<button class="nav-button" data-page="library">
<span class="nav-icon"><img src="/static/library.png" class="nav-icon-img"></span>
<span class="nav-icon"><svg class="nav-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/><line x1="9" y1="7" x2="16" y2="7"/><line x1="9" y1="11" x2="14" y2="11"/></svg></span>
<span class="nav-text">Library</span>
</button>
<button class="nav-button" data-page="import">
<span class="nav-icon"><img src="/static/import.png" class="nav-icon-img"></span>
<span class="nav-icon"><svg class="nav-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg></span>
<span class="nav-text">Import</span>
</button>
<button class="nav-button" data-page="settings">
<span class="nav-icon"><img src="/static/settings.png" class="nav-icon-img"></span>
<span class="nav-icon"><svg class="nav-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg></span>
<span class="nav-text">Settings</span>
</button>
<button class="nav-button" data-page="help">
<span class="nav-icon"><img src="/static/help.png" class="nav-icon-img" onerror="this.style.display='none'; this.parentElement.textContent='?';"></span>
<span class="nav-icon"><svg class="nav-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></span>
<span class="nav-text">Help & Docs</span>
</button>
<button class="nav-button" data-page="hydrabase" id="hydrabase-nav" style="display: none;">
<span class="nav-icon"><img src="/static/hydrabase.png?v=1" class="nav-icon-img"></span>
<span class="nav-icon"><svg class="nav-svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg></span>
<span class="nav-text">Hydrabase</span>
</button>
</nav>

35
webui/static/style.css
Unescape View File

@ -325,12 +325,12 @@ body {
inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.nav-icon-img {
width: 38px;
height: 38px;
object-fit: contain;
.nav-svg {
width: 22px;
height: 22px;
pointer-events: none;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
color: rgba(var(--accent-rgb), 0.7);
}
.nav-button:hover .nav-icon {
@ -341,18 +341,19 @@ body {
border: 1px solid rgba(255, 255, 255, 0.1);
}
.nav-button:hover .nav-svg {
color: rgba(255, 255, 255, 0.95);
}
.nav-button.active .nav-icon {
width: 45px;
height: 45px;
background: transparent;
border: none;
box-shadow: none;
background: rgba(var(--accent-rgb), 0.12);
border: 1px solid rgba(var(--accent-rgb), 0.25);
box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.15);
}
.nav-button.active .nav-icon-img {
width: 43px;
height: 43px;
filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.5));
.nav-button.active .nav-svg {
color: rgba(var(--accent-light-rgb, var(--accent-rgb)), 1);
filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.5));
}
.nav-text {
@ -5229,8 +5230,8 @@ body {
/* Page header icon — shown beside all page titles */
.page-header-icon {
width: 88px;
height: 88px;
width: 176px;
height: 176px;
object-fit: contain;
flex-shrink: 0;
filter: drop-shadow(0 2px 8px rgba(var(--accent-rgb), 0.3));
@ -5269,8 +5270,8 @@ body {
@media (max-width: 768px) {
.page-header-icon {
width: 56px;
height: 56px;
width: 100px;
height: 100px;
}
}

Write Preview
Loading…
Cancel
Save