wangshuxun/zotero-kb
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
1 changed files with 76 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
src/zotero_kb/templates/index.html
View File

@ -144,69 +144,108 @@
border-radius: 16px;
color: var(--muted);
}
.modal-shell[hidden] {
.window-shell[hidden] {
display: none;
}
.modal-shell {
.window-shell {
position: fixed;
inset: 0;
z-index: 40;
pointer-events: none;
}
.modal-overlay {
position: absolute;
inset: 0;
border-radius: 0;
background: rgba(24, 28, 22, 0.42);
.window-shell:not([hidden]) {
pointer-events: auto;
}
.modal-card {
position: relative;
z-index: 1;
width: min(1100px, calc(100vw - 2rem));
max-height: calc(100vh - 2rem);
margin: 1rem auto;
.window-frame {
position: fixed;
z-index: 40;
width: var(--fw-width, 90vw);
height: var(--fw-height, 75vh);
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;
grid-template-rows: auto auto 1fr auto;
grid-template-rows: auto 1fr auto;
overflow: hidden;
background: var(--surface);
border: 1px solid var(--line);
border-radius: 24px;
box-shadow: 0 24px 60px rgba(35, 31, 21, 0.2);
overflow: hidden;
}
.modal-header,
.modal-action-bar {
.window-frame.maximized {
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;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
gap: 1rem;
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--line);
background: rgba(255, 253, 248, 0.98);
cursor: grab;
}
.modal-action-bar {
border-top: 1px solid var(--line);
border-bottom: 0;
position: sticky;
bottom: 0;
z-index: 2;
background: var(--surface);
.window-toolbar:active {
cursor: grabbing;
}
.modal-header-actions {
.window-toolbar-actions {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.modal-body {
.window-body {
display: grid;
grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.2fr);
min-height: 24rem;
}
.modal-pane {
display: grid;
gap: 0.6rem;
padding: 1rem 1.25rem;
grid-template-columns: 22rem minmax(0, 1fr);
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;
overflow: auto;
}