This commit is contained in:
2026-09-29 04:35:35 +02:00
parent 73c0659d4a
commit 6c813143eb
51 changed files with 3708 additions and 743 deletions
+19 -1
View File
@@ -6,7 +6,7 @@
<button type="button" class="pgm-close" title="Close" aria-label="Close">&times;</button>
</div>
</div>
<div class="pgm-body"></div>
<div class="pgm-body" tabindex="-1"></div>
</div>
<style>
#page-modal {
@@ -17,10 +17,21 @@
flex-direction: column;
background: var(--bg); color: var(--text-color, #fff);
}
/* The Onara viewer (10050) lifts the sidebar (10060) and its drag zone (10059) above itself; keep the same
order: page over Onara, still under the sidebar controls and the navbar (10070) */
body.onara-modal-open #page-modal { z-index: 10055; }
#page-modal .pgm-header {
flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 12px 20px; border-bottom: 1px solid var(--accent);
}
/* Height matched to the sidebar tab row (page-modal.js measures it); the close button scales with it */
#page-modal.pgm-header-synced .pgm-header {
box-sizing: border-box; height: var(--pgm-header-h); padding-top: 0; padding-bottom: 0;
}
#page-modal.pgm-header-synced .pgm-close {
width: calc(var(--pgm-header-h) - 12px); height: calc(var(--pgm-header-h) - 12px);
font-size: 1.3em;
}
#page-modal .pgm-title {
margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-size: 1em; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
@@ -37,7 +48,14 @@
#page-modal .pgm-body {
flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
padding-bottom: env(safe-area-inset-bottom, 0px);
/* Scrollbar hidden, scrolling kept (wheel, touch, keyboard). Firefox only honours scrollbar-width;
!important so a site-wide scrollbar style can't bring it back */
scrollbar-width: none !important;
-ms-overflow-style: none;
}
#page-modal .pgm-body::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* Focusable so arrow keys / PageUp / PageDown / Space scroll it once clicked into, without an outline */
#page-modal .pgm-body:focus { outline: none; }
#page-modal .pgm-loading { padding: 60px 20px; text-align: center; color: var(--text-muted, #aaa); }
#page-modal .pgm-loading a { color: var(--accent); }
</style>