45 lines
2.3 KiB
HTML
45 lines
2.3 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"></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);
|
|
}
|
|
#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);
|
|
}
|
|
#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);
|
|
}
|
|
#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>
|