Explorar o código

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 hai 2 semanas
pai
achega
453ee77e7c
Modificáronse 1 ficheiros con 7 adicións e 0 borrados
  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; }