diff --git a/src/pages/ExportPage.scss b/src/pages/ExportPage.scss index 9d8df53..5db205e 100644 --- a/src/pages/ExportPage.scss +++ b/src/pages/ExportPage.scss @@ -23,37 +23,38 @@ .global-export-controls { background: var(--card-bg); border: 1px solid var(--border-color); - border-radius: 14px; - padding: 14px; + border-radius: 12px; + padding: 12px; display: grid; - grid-template-columns: minmax(320px, 1.45fr) minmax(220px, 0.8fr) minmax(260px, 1fr); - gap: 16px; - align-items: end; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 10px; + align-items: stretch; .control-label { - font-size: 12px; + font-size: 11px; color: var(--text-secondary); font-weight: 600; - letter-spacing: 0.3px; + letter-spacing: 0.2px; } .path-control { min-width: 0; display: flex; flex-direction: column; - gap: 6px; + gap: 4px; } .path-inline-row { min-width: 0; display: flex; align-items: center; - gap: 8px; + gap: 6px; + flex-wrap: nowrap; } .path-value { border: 1px dashed var(--border-color); - border-radius: 10px; + border-radius: 8px; background: var(--bg-secondary); display: flex; align-items: stretch; @@ -65,10 +66,10 @@ .path-link { border: none; background: transparent; - font-size: 13px; + font-size: 12px; color: var(--text-primary); text-align: left; - padding: 10px 12px; + padding: 8px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -90,9 +91,9 @@ border-left: 1px dashed var(--border-color); background: transparent; color: var(--text-secondary); - font-size: 12px; + font-size: 11px; font-weight: 600; - padding: 0 12px; + padding: 0 9px; cursor: pointer; flex-shrink: 0; @@ -106,17 +107,22 @@ position: relative; display: flex; flex-direction: column; - gap: 6px; + gap: 4px; + min-width: 0; z-index: 40; } .layout-trigger { - padding: 10px 12px; - border-radius: 10px; + width: 100%; + padding: 8px 10px; + border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-primary); - font-size: 13px; + font-size: 12px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; text-align: left; cursor: pointer; transition: border-color 0.12s ease; @@ -196,42 +202,45 @@ .task-center-control { display: flex; flex-direction: column; - gap: 6px; + gap: 4px; min-width: 0; } .task-center-inline { - min-height: 40px; + min-height: 34px; border: 1px solid var(--border-color); - border-radius: 10px; + border-radius: 8px; background: var(--bg-secondary); - padding: 0 10px; + padding: 0 8px; display: flex; align-items: center; justify-content: space-between; - gap: 8px; + gap: 6px; + flex-wrap: nowrap; } .task-summary { display: inline-flex; align-items: center; - gap: 10px; - font-size: 12px; + gap: 6px; + font-size: 11px; color: var(--text-secondary); white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; min-width: 0; } .task-collapse-btn { border: 1px solid var(--border-color); background: var(--bg-primary); - border-radius: 8px; - padding: 4px 8px; - font-size: 12px; + border-radius: 7px; + padding: 3px 7px; + font-size: 11px; color: var(--text-secondary); display: inline-flex; align-items: center; - gap: 4px; + gap: 3px; cursor: pointer; flex-shrink: 0; @@ -240,6 +249,14 @@ color: var(--primary); } } + + .secondary-btn { + border-radius: 7px; + padding: 6px 9px; + font-size: 11px; + gap: 4px; + flex-shrink: 0; + } } .content-card-grid { @@ -1640,26 +1657,9 @@ } @media (max-width: 1360px) { - .export-top-panel { - grid-template-columns: 1fr; - } - .global-export-controls { - grid-template-columns: 1fr; - - .path-inline-row { - flex-wrap: wrap; - } - - .path-inline-row > .secondary-btn { - margin-left: auto; - } - - .task-center-inline { - flex-wrap: wrap; - min-height: auto; - padding: 8px 10px; - } + padding: 10px; + gap: 8px; } .format-grid { @@ -1675,6 +1675,16 @@ } } +@media (max-width: 760px) { + .global-export-controls { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .task-center-control { + grid-column: 1 / -1; + } +} + @media (max-width: 720px) { .export-dialog-overlay { padding: 10px;