feat(import-window): replace modal CSS with window frame CSS

Replaces .modal-shell, .modal-overlay, .modal-card with
.window-shell, .window-frame supporting:
- 90vw x 75vh centered floating window
- minimize/maximize/close buttons
- draggable toolbar
- resizable window
- session-persisted position/size

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Saberlve 2026-04-15 15:52:33 +08:00
parent 803cccfbd1
commit 998551ab19

View File

@ -144,69 +144,108 @@
border-radius: 16px; border-radius: 16px;
color: var(--muted); color: var(--muted);
} }
.modal-shell[hidden] { .window-shell[hidden] {
display: none; display: none;
} }
.modal-shell { .window-shell {
position: fixed; position: fixed;
inset: 0; inset: 0;
z-index: 40; z-index: 40;
pointer-events: none;
} }
.modal-overlay { .window-shell:not([hidden]) {
position: absolute; pointer-events: auto;
inset: 0;
border-radius: 0;
background: rgba(24, 28, 22, 0.42);
} }
.modal-card { .window-frame {
position: relative; position: fixed;
z-index: 1; z-index: 40;
width: min(1100px, calc(100vw - 2rem)); width: var(--fw-width, 90vw);
max-height: calc(100vh - 2rem); height: var(--fw-height, 75vh);
margin: 1rem auto; left: var(--fw-left, calc((100vw - var(--fw-width, 90vw)) / 2));
top: var(--fw-top, calc((100vh - var(--fw-height, 75vh)) / 2));
min-width: 40rem;
min-height: 30rem;
border-radius: 16px;
box-shadow: 0 24px 64px rgba(35, 31, 21, 0.22);
display: grid; display: grid;
grid-template-rows: auto auto 1fr auto; grid-template-rows: auto 1fr auto;
overflow: hidden;
background: var(--surface); background: var(--surface);
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: 24px;
box-shadow: 0 24px 60px rgba(35, 31, 21, 0.2);
overflow: hidden;
} }
.modal-header, .window-frame.maximized {
.modal-action-bar { width: 100vw;
height: 100vh;
left: 0 !important;
top: 0 !important;
border-radius: 0;
--fw-width: 100vw;
--fw-height: 100vh;
}
.window-frame:not(.maximized):not(.minimized) {
resize: both;
overflow: auto;
}
.window-minimized-bar {
position: fixed;
bottom: 1rem;
right: 1rem;
z-index: 50;
height: 2.5rem;
width: 14rem;
border-radius: 8px;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: 0 8px 24px rgba(35, 31, 21, 0.14);
display: none;
align-items: center;
padding: 0 0.75rem;
gap: 0.5rem;
cursor: pointer;
font-size: 0.9rem;
font-weight: 600;
color: var(--ink);
}
.window-minimized-bar:not([hidden]) {
display: flex;
}
.window-minimized-bar:hover {
background: var(--panel);
}
.window-toolbar {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
gap: 0.75rem; gap: 1rem;
padding: 1rem 1.25rem; padding: 1rem 1.25rem;
border-bottom: 1px solid var(--line); border-bottom: 1px solid var(--line);
background: rgba(255, 253, 248, 0.98);
cursor: grab;
} }
.modal-action-bar { .window-toolbar:active {
border-top: 1px solid var(--line); cursor: grabbing;
border-bottom: 0;
position: sticky;
bottom: 0;
z-index: 2;
background: var(--surface);
} }
.modal-header-actions { .window-toolbar-actions {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.75rem; gap: 0.75rem;
flex-wrap: wrap; flex-wrap: wrap;
} }
.modal-body { .window-body {
display: grid; display: grid;
grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.2fr); grid-template-columns: 22rem minmax(0, 1fr);
min-height: 24rem;
}
.modal-pane {
display: grid;
gap: 0.6rem;
padding: 1rem 1.25rem;
min-height: 0; min-height: 0;
} }
.modal-scroll { .window-pane {
display: grid;
gap: 0.6rem;
min-height: 0;
padding: 1rem 1.25rem;
}
.window-pane.collections {
border-right: 1px solid var(--line);
}
.window-scroll {
min-height: 0; min-height: 0;
overflow: auto; overflow: auto;
} }