checkpoint

static/css/base.css

@@ -1,6 +1,8 @@
-/* 强制显示滚动条，防止页面跳动 */
+html, body {
-html {
+    margin: 0;
-    overflow-y: scroll;
+    padding: 0;
+    height: 100%;
+    overflow: hidden; /* Disable default scrolling */
 }
 
 /* 针对Firefox */
@@ -16,6 +18,7 @@ html {
 
 ::-webkit-scrollbar-track {
     background: transparent;
+    margin-top: 0;
 }
 
 ::-webkit-scrollbar-thumb {
@@ -43,6 +46,7 @@ html {
     
     /* Z-index Scale */
     --z-base: 10;
+    --z-header: 100;
     --z-modal: 1000;
     --z-overlay: 2000;
 
@@ -67,8 +71,10 @@ html {
 }
 
 body {
-    margin: 0;
     font-family: 'Segoe UI', sans-serif;
     background: var(--bg-color);
     color: var(--text-color);
+    display: flex;
+    flex-direction: column;
+    padding-top: 0; /* Remove the padding-top */
 }

static/css/components/header.css

@@ -1,11 +1,12 @@
 .app-header {
   background: var(--card-bg);
   border-bottom: 1px solid var(--border-color);
-  position: sticky;
+  position: fixed;
   top: 0;
   z-index: var(--z-header);
-  height: 60px;
+  height: 48px; /* Reduced height */
   width: 100%;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
 }
 
 .header-container {
@@ -18,46 +19,105 @@
   height: 100%;
 }
 
+/* Logo and title styling */
+.header-branding {
+  display: flex;
+  align-items: center;
+}
+
+.logo-link {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+  color: var(--text-color);
+  gap: 8px;
+}
+
+.app-logo {
+  width: 24px;
+  height: 24px;
+}
+
+.app-title {
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 0;
+}
+
+/* Navigation styling */
 .main-nav {
   display: flex;
-  gap: 1rem;
+  gap: 0.5rem;
 }
 
 .nav-item {
-  padding: 0.5rem 1rem;
+  padding: 0.25rem 0.75rem;
-  border-radius: var(--border-radius-base);
+  border-radius: var(--border-radius-xs);
   color: var(--text-color);
   text-decoration: none;
   display: flex;
   align-items: center;
   gap: 0.5rem;
   transition: all 0.2s ease;
+  font-size: 0.9rem;
 }
 
-.nav-item:hover {
+/* Header controls (formerly corner controls) */
-  background: var(--lora-surface-hover);
+.header-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
 }
 
-.nav-item.active {
+.header-controls > div {
-  background: var(--lora-primary);
+  width: 32px;
-  color: var(--lora-text-on-primary);
+  height: 32px;
+  border-radius: 50%;
+  background: var(--card-bg);
+  border: 1px solid var(--border-color);
+  color: var(--text-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  position: relative;
+}
+
+.header-controls > div:hover {
+  background: var(--lora-accent);
+  color: white;
+  transform: translateY(-2px);
+}
+
+.theme-toggle .light-icon {
+  opacity: 0;
+}
+
+.theme-toggle .dark-icon {
+  opacity: 1;
+}
+
+[data-theme="light"] .theme-toggle .light-icon {
+  opacity: 1;
+}
+
+[data-theme="light"] .theme-toggle .dark-icon {
+  opacity: 0;
 }
 
 /* Mobile adjustments */
 @media (max-width: 768px) {
-  .header-container {
+  .app-title {
-    flex-direction: column;
+    display: none; /* Hide text title on mobile */
-    padding-top: 0.5rem;
-    height: auto;
   }
   
-  .app-header {
+  .header-controls {
-    height: auto;
+    gap: 4px;
   }
   
-  .main-nav {
+  .header-controls > div {
-    width: 100%;
+    width: 28px;
-    justify-content: center;
+    height: 28px;
-    margin-top: 0.5rem;
   }
 }

static/css/layout.css

@@ -1,7 +1,17 @@
+.page-content {
+    height: calc(100vh - 48px); /* Full height minus header */
+    margin-top: 48px; /* Push down below header */
+    overflow-y: auto; /* Enable scrolling here */
+    width: 100%;
+    position: relative;
+}
+
 .container {
     max-width: 1400px;
     margin: 20px auto;
     padding: 0 15px;
+    position: relative;
+    z-index: var(--z-base);
 }
 
 .controls {
@@ -19,111 +29,11 @@
     width: 100%;
 }
 
-/* Search and filter styles moved to components/search-filter.css */
-
-/* Update corner-controls for collapsible behavior */
-.corner-controls {
-    position: fixed;
-    top: 20px;
-    right: 20px;
-    z-index: var(--z-overlay);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    transition: all 0.3s ease;
-}
-
-.corner-controls-toggle {
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    background: var(--card-bg);
-    border: 1px solid var(--border-color);
-    color: var(--text-color);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    z-index: 2;
-    margin-bottom: 10px;
-}
-
-.corner-controls-toggle:hover {
-    background: var(--lora-accent);
-    color: white;
-    transform: translateY(-2px);
-}
-
-.corner-controls-items {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    opacity: 0;
-    transform: translateY(-10px) scale(0.9);
-    transition: all 0.3s ease;
-    pointer-events: none;
-}
-
-/* Expanded state */
-.corner-controls.expanded .corner-controls-items {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-    pointer-events: all;
-}
-
-/* Expanded state - only expand on hover if not already expanded by click */
-.corner-controls:hover:not(.expanded) .corner-controls-items {
-    opacity: 1;
-    transform: translateY(0) scale(1);
-    pointer-events: all;
-}
-
 /* Ensure hidden class works properly */
 .hidden {
     display: none !important;
 }
 
-/* Update toggle button styles */
-.update-toggle {
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    background: var(--card-bg);
-    border: 1px solid var(--border-color);
-    color: var(--text-color); /* Changed from var(--lora-accent) to match other toggles */
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    position: relative;
-}
-
-.update-toggle:hover {
-    background: var(--lora-accent);
-    color: white;
-    transform: translateY(-2px);
-}
-
-/* Update badge styles */
-.update-badge {
-    position: absolute;
-    top: -3px;
-    right: -3px;
-    background-color: var(--lora-error);
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    box-shadow: 0 0 0 2px var(--card-bg);
-}
-
-/* Badge on corner toggle */
-.corner-badge {
-    top: 0;
-    right: 0;
-}
-
 .folder-tags-container {
     position: relative;
     width: 100%;
@@ -263,81 +173,6 @@
     transform: translateY(-2px);
 }
 
-.theme-toggle {
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    background: var(--card-bg);
-    border: 1px solid var(--border-color);
-    color: var(--text-color);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-.theme-toggle:hover {
-    background: var(--lora-accent);
-    color: white;
-    transform: translateY(-2px);
-}
-
-.support-toggle {
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    background: var(--card-bg);
-    border: 1px solid var(--border-color);
-    color: var(--lora-error);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    transition: all 0.2s ease;
-}
-
-.support-toggle:hover {
-    background: var(--lora-error);
-    color: white;
-    transform: translateY(-2px);
-}
-
-.support-toggle i {
-    font-size: 1.1em;
-    position: relative;
-    top: 1px;
-    left: -0.5px;
-}
-
-.theme-toggle img {
-    width: 20px;
-    height: 20px;
-}
-
-.theme-toggle .theme-icon {
-    width: 20px;
-    height: 20px;
-    position: absolute;
-    transition: opacity 0.2s ease;
-}
-
-.theme-toggle .light-icon {
-    opacity: 0;
-}
-
-.theme-toggle .dark-icon {
-    opacity: 1;
-}
-
-[data-theme="light"] .theme-toggle .light-icon {
-    opacity: 1;
-}
-
-[data-theme="light"] .theme-toggle .dark-icon {
-    opacity: 0;
-}
-
 @media (max-width: 768px) {
     .actions {
         flex-wrap: wrap;
@@ -369,19 +204,6 @@
         transform: none;
     }
 
-    .corner-controls {
-        top: 10px;
-        right: 10px;
-    }
-    
-    .corner-controls-items {
-        display: none;
-    }
-    
-    .corner-controls.expanded .corner-controls-items {
-        display: flex;
-    }
-
     .back-to-top {
         bottom: 60px; /* Give some extra space from bottom on mobile */
     }

templates/components/corner_controls.html

@@ -1,22 +0,0 @@
-<div class="corner-controls">
-    <div class="corner-controls-toggle">
-        <i class="fas fa-ellipsis-v"></i>
-        <span class="update-badge corner-badge hidden"></span>
-    </div>
-    <div class="corner-controls-items">
-        <div class="theme-toggle" onclick="toggleTheme()" title="Toggle theme">
-            <img src="/loras_static/images/theme-toggle-light.svg" alt="Theme" class="theme-icon light-icon">
-            <img src="/loras_static/images/theme-toggle-dark.svg" alt="Theme" class="theme-icon dark-icon">
-        </div>
-        <div class="update-toggle" id="updateToggleBtn" title="Check Updates">
-            <i class="fas fa-bell"></i>
-            <span class="update-badge hidden"></span>
-        </div>
-        <div class="support-toggle" id="supportToggleBtn" title="Support">
-            <i class="fas fa-heart"></i>
-        </div>
-        <div class="settings-toggle" onclick="settingsManager.toggleSettings()" title="Settings">
-            <i class="fas fa-cog"></i>
-        </div>
-    </div>
-</div>

templates/components/header.html

@@ -1,7 +1,10 @@
 <header class="app-header">
   <div class="header-container">
     <div class="header-branding">
-      <h1 class="app-title">ComfyUI Manager</h1>
+      <a href="/loras" class="logo-link">
+        <img src="/loras_static/images/favicon-32x32.png" alt="LoRA Manager" class="app-logo">
+        <span class="app-title">LoRA Manager</span>
+      </a>
     </div>
     <nav class="main-nav">
       <a href="/loras" class="nav-item {% if current_page == 'loras' %}active{% endif %}">
@@ -15,7 +18,23 @@
       </a>
     </nav>
     <div class="header-actions">
-      <!-- Page-specific action buttons can go here -->
+      <!-- Integrated corner controls -->
+      <div class="header-controls">
+        <div class="theme-toggle" onclick="toggleTheme()" title="Toggle theme">
+          <i class="fas fa-moon dark-icon"></i>
+          <i class="fas fa-sun light-icon"></i>
+        </div>
+        <div class="settings-toggle" onclick="settingsManager.toggleSettings()" title="Settings">
+          <i class="fas fa-cog"></i>
+        </div>
+        <div class="update-toggle" id="updateToggleBtn" title="Check Updates">
+          <i class="fas fa-bell"></i>
+          <span class="update-badge hidden"></span>
+        </div>
+        <div class="support-toggle" id="supportToggleBtn" title="Support">
+          <i class="fas fa-heart"></i>
+        </div>
+      </div>
     </div>
   </div>
 </header>

templates/loras.html

@@ -47,55 +47,35 @@
 </head>
 <body>
     {% include 'components/header.html' %}
-    <div class="corner-controls">
+
-        <div class="corner-controls-toggle">
+    <div class="page-content">
-            <i class="fas fa-ellipsis-v"></i>
+        {% include 'components/modals.html' %}
-            <span class="update-badge corner-badge hidden"></span>
+        {% include 'components/loading.html' %}
-        </div>
+        {% include 'components/context_menu.html' %}
-        <div class="corner-controls-items">
+
-            <div class="theme-toggle" onclick="toggleTheme()" title="Toggle theme">
+        <div class="container">
-                <img src="/loras_static/images/theme-toggle-light.svg" alt="Theme" class="theme-icon light-icon">
+            {% if is_initializing %}
-                <img src="/loras_static/images/theme-toggle-dark.svg" alt="Theme" class="theme-icon dark-icon">
+            <div class="initialization-notice">
-            </div>
+                <div class="notice-content">
-            <div class="update-toggle" id="updateToggleBtn" title="Check Updates">
+                    <div class="loading-spinner"></div>
-                <i class="fas fa-bell"></i>
+                    <h2>Initializing LoRA Manager</h2>
-                <span class="update-badge hidden"></span>
+                    <p>Scanning and building LoRA cache. This may take a few minutes...</p>
-            </div>
+                </div>
-            <div class="support-toggle" id="supportToggleBtn" title="Support">
+            </div>
-                <i class="fas fa-heart"></i>
+            {% else %}
-            </div>
+                {% include 'components/controls.html' %}
-            <div class="settings-toggle" onclick="settingsManager.toggleSettings()" title="Settings">
+                <!-- Lora卡片容器 -->
-                <i class="fas fa-cog"></i>
+                <div class="card-grid" id="loraGrid">
-            </div>
+                    <!-- Cards will be dynamically inserted here -->
+                </div>
+                <!-- Bulk operations panel will be inserted here by JavaScript -->
+            {% endif %}
         </div>
+
+        <!-- Add after the container div -->
+        <div class="bulk-mode-overlay"></div>
     </div>
 
-    {% include 'components/modals.html' %}
-    {% include 'components/loading.html' %}
-    {% include 'components/context_menu.html' %}
-
-    <div class="container">
-        {% if is_initializing %}
-        <div class="initialization-notice">
-            <div class="notice-content">
-                <div class="loading-spinner"></div>
-                <h2>Initializing LoRA Manager</h2>
-                <p>Scanning and building LoRA cache. This may take a few minutes...</p>
-            </div>
-        </div>
-        {% else %}
-            {% include 'components/controls.html' %}
-            <!-- Lora卡片容器 -->
-            <div class="card-grid" id="loraGrid">
-                <!-- Cards will be dynamically inserted here -->
-            </div>
-            <!-- Bulk operations panel will be inserted here by JavaScript -->
-        {% endif %}
-    </div>
-
-    <!-- Add after the container div -->
-    <div class="bulk-mode-overlay"></div>
-
     <script type="module" src="/loras_static/js/main.js"></script>
     {% if is_initializing %}
     <script>

templates/recipes.html

@@ -104,47 +104,26 @@
             background: var(--lora-surface-alt);
             border-radius: var(--border-radius-base);
         }
-        
-        .recipes-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 1rem;
-        }
-        
-        .recipes-controls {
-            display: flex;
-            gap: 0.5rem;
-        }
     </style>
 </head>
 <body>
     {% include 'components/header.html' %}
-    <!-- Reuse corner controls component -->
-    {% include 'components/corner_controls.html' %}
 
-    <!-- Reuse modals, loading, context menu -->
+    <div class="page-content">
-    {% include 'components/modals.html' %}
+        {% include 'components/modals.html' %}
-    {% include 'components/loading.html' %}
+        {% include 'components/loading.html' %}
-    {% include 'components/context_menu.html' %}
+        {% include 'components/context_menu.html' %}
 
-    <div class="container">
+        <div class="container">
-        {% if is_initializing %}
+            {% if is_initializing %}
-        <div class="initialization-notice">
+            <div class="initialization-notice">
-            <div class="notice-content">
+                <div class="notice-content">
-                <div class="loading-spinner"></div>
+                    <div class="loading-spinner"></div>
-                <h2>Initializing Recipe Manager</h2>
+                    <h2>Initializing Recipe Manager</h2>
-                <p>Scanning and building recipe cache. This may take a few moments...</p>
+                    <p>Scanning and building recipe cache. This may take a few moments...</p>
-            </div>
-        </div>
-        {% else %}
-            <div class="recipes-header">
-                <h1>LoRA Recipes</h1>
-                <div class="recipes-controls">
-                    <a href="/loras" class="button"><i class="fas fa-arrow-left"></i> Back to LoRAs</a>
                 </div>
             </div>
-            
+            {% else %}           
             <!-- Recipe controls - can reuse structure from loras controls -->
             <div class="controls">
                 <!-- Recipe tags container - similar to folder tags -->
@@ -207,7 +186,8 @@
                     </div>
                 {% endif %}
             </div>
-        {% endif %}
+            {% endif %}
+        </div>
     </div>
 
     <script type="module" src="/loras_static/js/recipes.js"></script>