63 lines
3.4 KiB
HTML
63 lines
3.4 KiB
HTML
{{-- Fullscreen modal for info pages opened from the sidebar footer (see /s/js/page-modal.js) --}}
|
|
<div id="page-modal" style="display: none;" role="dialog" aria-modal="true">
|
|
<div class="pgm-header">
|
|
<h3 class="pgm-title"></h3>
|
|
<div class="pgm-actions">
|
|
<button type="button" class="pgm-close" title="Close" aria-label="Close">×</button>
|
|
</div>
|
|
</div>
|
|
<div class="pgm-body" tabindex="-1"></div>
|
|
</div>
|
|
<style>
|
|
#page-modal {
|
|
/* Covers only the content area: below the navbar, between the sidebars (page-modal.js sets the insets).
|
|
Just below the sidebar drag handles (899) and sidebars (900) so they keep working while it's open. */
|
|
position: fixed; z-index: 895;
|
|
top: var(--pgm-top, 0px); right: var(--pgm-right, 0px); bottom: 0; left: var(--pgm-left, 0px);
|
|
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;
|
|
}
|
|
#page-modal .pgm-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
|
|
#page-modal .pgm-close {
|
|
display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
|
|
margin: 0; padding: 0; background: none; border: 1px solid transparent; border-radius: 0;
|
|
color: var(--text-color, #fff); font-size: 1em; line-height: 1; cursor: pointer; text-decoration: none;
|
|
transition: color 0.15s, border-color 0.15s;
|
|
}
|
|
#page-modal .pgm-close { font-size: 1.6em; border-color: rgba(255, 255, 255, 0.25); }
|
|
#page-modal .pgm-close:hover { color: var(--accent); border-color: var(--accent); }
|
|
#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>
|
|
<script src="/s/js/page-modal.js?v={{ ts }}"></script>
|