Refactor modal styles for improved consistency and responsiveness; adjust padding and background for dark theme support

static/css/components/lora-modal.css

@@ -1,4 +1,3 @@
-
 /* Lora Modal Header */
 .modal-header {
     display: flex;
@@ -19,11 +18,17 @@
 
 .info-item {
     padding: var(--space-2);
-    background: var(--lora-surface);
+    background: rgba(0, 0, 0, 0.03);
-    border: 1px solid var(--lora-border);
+    border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: var(--border-radius-sm);
 }
 
+/* 调整深色主题下的样式 */
+[data-theme="dark"] .info-item {
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid var(--lora-border);
+}
+
 .info-item.full-width {
     grid-column: 1 / -1;
 }
@@ -146,11 +151,17 @@
 /* Update Trigger Words styles */
 .info-item.trigger-words {
     padding: var(--space-2);
-    background: var(--lora-surface);
+    background: rgba(0, 0, 0, 0.03);
-    border: 1px solid var(--lora-border);
+    border: 1px solid rgba(0, 0, 0, 0.1);
     border-radius: var(--border-radius-sm);
 }
 
+/* 调整 trigger words 样式 */
+[data-theme="dark"] .info-item.trigger-words {
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid var(--lora-border);
+}
+
 .trigger-words-tags {
     display: flex;
     flex-wrap: wrap;

static/css/components/modal.css

@@ -25,14 +25,14 @@ body.modal-open {
     height: auto;
     max-height: 90vh;
     margin: 2rem auto;
-    background: #ffffff; /* 使用纯白色背景 */
+    background: var(--lora-surface);
     border-radius: var(--border-radius-base);
     padding: var(--space-3);
-    border: 1px solid rgba(0, 0, 0, 0.1); /* 更细腻的边框 */
+    border: 1px solid var(--lora-border);
     box-shadow: 
         0 4px 6px -1px rgba(0, 0, 0, 0.1),
         0 2px 4px -1px rgba(0, 0, 0, 0.06),
-        0 10px 15px -3px rgba(0, 0, 0, 0.05); /* 多层阴影创造深度 */
+        0 10px 15px -3px rgba(0, 0, 0, 0.05);
     overflow-y: auto;
     overflow-x: hidden; /* 防止水平滚动条 */
 }
@@ -298,14 +298,22 @@ body.modal-open {
     margin-top: 4px;
 }
 
-/* 调整深色主题 */
+/* 统一各个 section 的样式 */
+.support-section,
+.changelog-section,
+.update-info,
+.info-item,
+.path-preview {
+    background: rgba(0, 0, 0, 0.03);
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: var(--border-radius-sm);
+    padding: var(--space-2);
+}
+
+/* 深色主题统一样式 */
 [data-theme="dark"] .modal-content {
     background: var(--lora-surface);
     border: 1px solid var(--lora-border);
-    box-shadow: 
-        0 4px 6px -1px rgba(0, 0, 0, 0.2),
-        0 2px 4px -1px rgba(0, 0, 0, 0.15),
-        0 10px 15px -3px rgba(0, 0, 0, 0.1);
 }
 
 [data-theme="dark"] .support-section,
@@ -315,14 +323,4 @@ body.modal-open {
 [data-theme="dark"] .path-preview {
     background: rgba(255, 255, 255, 0.03);
     border: 1px solid var(--lora-border);
-}
-
-/* 调整内容区域的间距，增加呼吸感 */
-.support-section,
-.changelog-section,
-.update-info,
-.info-item {
-    padding: var(--space-3);
-    margin-bottom: var(--space-2);
-    border-radius: var(--border-radius-sm);
 }

static/css/components/support-modal.css

@@ -33,27 +33,27 @@
 .support-content {
     display: flex;
     flex-direction: column;
-    gap: var(--space-3);
+    gap: var(--space-2);
 }
 
 .support-content > p {
     font-size: 1.1em;
     text-align: center;
-    margin-bottom: var(--space-2);
+    margin-bottom: var(--space-1);
 }
 
 .support-section {
-    background: rgba(0, 0, 0, 0.02); /* 轻微的灰色背景 */
+    background: rgba(0, 0, 0, 0.02);
-    border: 1px solid rgba(0, 0, 0, 0.08); /* 更明显的边框 */
+    border: 1px solid rgba(0, 0, 0, 0.08);
     border-radius: var(--border-radius-sm);
-    padding: var(--space-3);
+    padding: var(--space-2);
     margin-bottom: var(--space-2);
 }
 
 .support-section h3 {
     display: flex;
     align-items: center;
-    gap: 10px;
+    gap: 8px;
     margin-top: 0;
     margin-bottom: var(--space-1);
     font-size: 1.1em;
@@ -65,8 +65,8 @@
 }
 
 .support-section p {
-    margin-top: 6px;
+    margin-top: 4px;
-    margin-bottom: var(--space-2);
+    margin-bottom: var(--space-1);
     color: var(--text-color);
     opacity: 0.9;
 }
@@ -74,7 +74,7 @@
 .support-links {
     display: flex;
     gap: var(--space-2);
-    margin-top: var(--space-2);
+    margin-top: var(--space-1);
 }
 
 .social-link {
@@ -119,7 +119,7 @@
 
 .support-footer {
     text-align: center;
-    margin-top: var(--space-2);
+    margin-top: var(--space-1);
     font-style: italic;
     color: var(--text-color);
 }