alphard/ComfyUI-Lora-Manager
1
0
Fork 0
mirror of https://github.com/willmiao/ComfyUI-Lora-Manager.git synced 2026-03-21 21:22:11 -03:00
Code Issues Packages Projects Releases Wiki Activity

feat(header): improve CSS formatting and spacing

Browse Source
This commit is contained in:
Will Miao
2026-01-07 16:20:46 +08:00
parent fd7cb3300d
commit eb30595d23
1 changed files with 24 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
static/css/components/header.css
View File

@@ -4,9 +4,11 @@
position: fixed; position: fixed;
top: 0; top: 0;
z-index: var(--z-header); z-index: var(--z-header);
height: 48px; /* Reduced height */ height: 48px;
/* Reduced height */
width: 100%; width: 100%;
box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Slightly stronger shadow */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
/* Slightly stronger shadow */
} }
.header-container { .header-container {
@@ -25,6 +27,7 @@
max-width: 1800px; max-width: 1800px;
} }
} }
@media (min-width: 3000px) { @media (min-width: 3000px) {
.header-container { .header-container {
max-width: 2400px; max-width: 2400px;
@@ -43,7 +46,7 @@
align-items: center; align-items: center;
text-decoration: none; text-decoration: none;
color: var(--text-color); color: var(--text-color);
gap: 2px; gap: 8px;
} }
.app-logo { .app-logo {
@@ -153,7 +156,7 @@
flex-shrink: 0; flex-shrink: 0;
} }
.header-controls > div { .header-controls>div {
width: 32px; width: 32px;
height: 32px; height: 32px;
border-radius: 50%; border-radius: 50%;
@@ -168,14 +171,15 @@
position: relative; position: relative;
} }
.header-controls > div:hover { .header-controls>div:hover {
background: var(--lora-accent); background: var(--lora-accent);
color: white; color: white;
transform: translateY(-2px); transform: translateY(-2px);
} }
.theme-toggle { .theme-toggle {
position: relative; /* Ensure relative positioning for the container */ position: relative;
/* Ensure relative positioning for the container */
} }
.theme-toggle .light-icon, .theme-toggle .light-icon,
@@ -184,7 +188,8 @@
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); /* Center perfectly */ transform: translate(-50%, -50%);
/* Center perfectly */
opacity: 0; opacity: 0;
transition: opacity 0.3s ease; transition: opacity 0.3s ease;
} }
@@ -246,23 +251,24 @@
/* Mobile adjustments */ /* Mobile adjustments */
@media (max-width: 768px) { @media (max-width: 768px) {
.app-title { .app-title {
display: none; /* Hide text title on mobile */ display: none;
/* Hide text title on mobile */
} }
.header-controls { .header-controls {
gap: 4px; gap: 4px;
} }
.header-controls > div { .header-controls>div {
width: 28px; width: 28px;
height: 28px; height: 28px;
} }
.header-search { .header-search {
max-width: none; max-width: none;
margin: 0 0.5rem; margin: 0 0.5rem;
} }
.main-nav { .main-nav {
margin-right: 0.5rem; margin-right: 0.5rem;
} }
@@ -273,12 +279,13 @@
.header-container { .header-container {
padding: 0 8px; padding: 0 8px;
} }
.main-nav { .main-nav {
display: none; /* Hide navigation on very small screens */ display: none;
/* Hide navigation on very small screens */
} }
.header-search { .header-search {
flex: 1; flex: 1;
} }
} }