Add SoulSync logo to sidebar header next to app name
This commit is contained in:
parent
f5177f9879
commit
96fa3fe388
2 changed files with 27 additions and 2 deletions
|
|
@ -126,8 +126,13 @@
|
|||
<div class="sidebar">
|
||||
<!-- Header Section -->
|
||||
<div class="sidebar-header">
|
||||
<h1 class="app-name">SoulSync</h1>
|
||||
<p class="app-subtitle">Music Sync & Manager</p>
|
||||
<div class="sidebar-brand">
|
||||
<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-avatar" class="profile-indicator-avatar"></div>
|
||||
<span id="profile-indicator-name" class="profile-indicator-name"></span>
|
||||
|
|
|
|||
|
|
@ -233,6 +233,26 @@ body {
|
|||
}
|
||||
|
||||
/* 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 {
|
||||
min-height: 115px;
|
||||
background: linear-gradient(180deg,
|
||||
|
|
|
|||
Loading…
Reference in a new issue