hicccc77/WeFlow
1
0
Fork 0
mirror of https://github.com/hicccc77/WeFlow.git synced 2026-03-25 15:25:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

style(export): keep top controls horizontal on narrow widths

Browse Source
This commit is contained in:
tisonhuang
2026-03-02 15:07:59 +08:00
parent 1b8e1c2aab
commit 5840bf710c
1 changed files with 58 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
src/pages/ExportPage.scss
View File

@@ -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;