ソースを参照

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 週間 前
親
コミット
453ee77e7c
1 ファイル変更、7 行追加、0 行削除
  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; }