diff --git a/src/zotero_kb/templates/index.html b/src/zotero_kb/templates/index.html index 398ce3b..2be9326 100644 --- a/src/zotero_kb/templates/index.html +++ b/src/zotero_kb/templates/index.html @@ -144,74 +144,168 @@ 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; + .window-shell:not([hidden]) { + pointer-events: auto; + } + .window-overlay { + position: fixed; inset: 0; - border-radius: 0; + z-index: 39; background: rgba(24, 28, 22, 0.42); + border: 0; } - .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; } + .collection-item { + display: grid; + grid-template-columns: auto minmax(0, 1fr); + gap: 0.75rem; + align-items: center; + padding: 0.75rem 0.9rem; + border: 1px solid var(--line); + border-radius: 14px; + background: rgba(255, 255, 255, 0.72); + } + .collection-item input[type="checkbox"] { + width: auto; + margin: 0; + } + .item-row-body { + display: flex; + align-items: center; + gap: 0.55rem; + min-width: 0; + } + .title-button { + flex: 1; + min-width: 0; + padding: 0; + border: 0; + border-radius: 0; + background: transparent; + color: var(--ink); + text-align: left; + font-weight: 600; + } + .title-button:hover { + transform: none; + background: transparent; + } + .details-button { + width: 2.2rem; + min-width: 2.2rem; + padding: 0.45rem 0; + } + .collection-item .meta { + margin-left: auto; + } + .item-year { + flex: 0 0 auto; + min-width: 3rem; + text-align: right; + } .preview-popover { - position: absolute; + position: fixed; max-width: 28rem; padding: 0.85rem 1rem; border: 1px solid var(--line); @@ -219,6 +313,7 @@ background: rgba(255, 253, 248, 0.98); box-shadow: 0 18px 40px rgba(35, 31, 21, 0.16); color: var(--ink); + z-index: 60; } .tabs { display: flex; @@ -248,17 +343,18 @@ border-right: 0; border-bottom: 1px solid var(--line); } - .modal-card { - width: calc(100vw - 1rem); - margin: 0.5rem auto; - max-height: calc(100vh - 1rem); + .window-frame { + width: 100vw; + height: 100vh; + left: 0 !important; + top: 0 !important; + border-radius: 0; } - .modal-body { + .window-body { grid-template-columns: 1fr; grid-template-rows: minmax(12rem, 1fr) minmax(12rem, 1fr); } - .modal-header, - .modal-action-bar { + .window-toolbar { flex-wrap: wrap; } } @@ -298,35 +394,32 @@ - @@ -379,6 +472,7 @@