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:
parent
803cccfbd1
commit
998551ab19
@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user