Przeglądaj źródła

style: close the gap between settings panels 1 and 3

Explicit grid placement: 采集配置 spans both rows in the right column,
so 安全设置 stacks directly under API 设置 instead of waiting for the
taller right panel to end (16px gap, matching the grid gutter).
KenZ1117 2 tygodni temu
rodzic
commit
453ee77e7c
1 zmienionych plików z 7 dodań i 0 usunięć
  1. 7 0
      public/style.css

+ 7 - 0
public/style.css

@@ -165,6 +165,10 @@ main.content { padding: var(--page-padding-y) var(--page-padding-x) var(--page-p
 .field-label-row label { flex: 1 1 auto; margin: 0; }
 .settings-workspace { max-width: 1080px; }
 .settings-forms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; min-width: 0; }
+/* 显式定位:1 API设置 左上,2 采集配置 右列纵跨两行,3 安全设置 紧贴 1 下方(避免行对齐把 3 推远) */
+.settings-forms > .panel:nth-child(1) { grid-column: 1; grid-row: 1; }
+.settings-forms > .panel:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }
+.settings-forms > .panel:nth-child(3) { grid-column: 1; grid-row: 2; }
 .settings-forms .field textarea { min-height: 78px; resize: vertical; line-height: 1.5; }
 .settings-forms .panel,
 .panel-designed,
@@ -207,6 +211,9 @@ main.content { padding: var(--page-padding-y) var(--page-padding-x) var(--page-p
 
 @media (max-width: 960px) {
   .settings-forms { grid-template-columns: 1fr; }
+  .settings-forms > .panel:nth-child(1),
+  .settings-forms > .panel:nth-child(2),
+  .settings-forms > .panel:nth-child(3) { grid-column: auto; grid-row: auto; }
   #viewLogs.active { display: block; height: auto; }
   #viewLogs .content { min-height: 0; }
   #viewLogs .settings-log { flex: none; height: auto; min-height: 420px; }