danvics/soulsync
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Add SoulSync logo to sidebar header next to app name

Browse source
This commit is contained in:
Broque Thomas 2026-03-23 21:24:39 -07:00
parent f5177f9879
commit 96fa3fe388
2 changed files with 27 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
webui/index.html
View file

@ -126,8 +126,13 @@
<div class="sidebar"> <div class="sidebar">
<!-- Header Section --> <!-- Header Section -->
<div class="sidebar-header"> <div class="sidebar-header">
<h1 class="app-name">SoulSync</h1> <div class="sidebar-brand">
<p class="app-subtitle">Music Sync & Manager</p> <img src="/static/trans2.png" alt="SoulSync" class="sidebar-logo">
<div class="sidebar-brand-text">
<h1 class="app-name">SoulSync</h1>
<p class="app-subtitle">Music Sync & Manager</p>
</div>
</div>
<div id="profile-indicator" class="profile-indicator" style="display: none;" title="Switch profile"> <div id="profile-indicator" class="profile-indicator" style="display: none;" title="Switch profile">
<div id="profile-indicator-avatar" class="profile-indicator-avatar"></div> <div id="profile-indicator-avatar" class="profile-indicator-avatar"></div>
<span id="profile-indicator-name" class="profile-indicator-name"></span> <span id="profile-indicator-name" class="profile-indicator-name"></span>

20
webui/static/style.css
View file

@ -233,6 +233,26 @@ body {
} }
/* Sidebar Header */ /* Sidebar Header */
.sidebar-brand {
display: flex;
align-items: center;
gap: 12px;
}
.sidebar-logo {
width: 38px;
height: 38px;
object-fit: contain;
filter: drop-shadow(0 2px 8px rgba(var(--accent-rgb), 0.3));
flex-shrink: 0;
}
.sidebar-brand-text {
display: flex;
flex-direction: column;
gap: 0;
}
.sidebar-header { .sidebar-header {
min-height: 115px; min-height: 115px;
background: linear-gradient(180deg, background: linear-gradient(180deg,