:root[data-theme="dark"] {
/* deeper drop shadow than the shared default */
--shadow: 0 10px 30px rgba(0,0,0,.35);
}
:root {
--shadow: 0 10px 30px rgba(0,0,0,.10);
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
width: 100%;
min-height: 100%;
background: var(--bg);
color: var(--text);
font-family: "GSans", "Segoe UI", Arial, sans-serif;
}
body {
overflow-x: hidden;
}
.container {
width: min(1180px, calc(100% - 32px));
margin: 0 auto;
padding: 24px 0 40px;
}
.container h1 {
margin: 24px 0 8px;
}
.hint {
color: var(--text-dim);
line-height: 1.45;
}
.section {
margin-top: 18px;
padding: 18px;
border:
1px solid var(--border);
border-radius: 8px;
background: var(--panel);
}
/* Generic helper used by every page's file so we avoid the
`hidden` HTML attribute being toggled by JS and instead control
visibility via CSS only. CSP-safe (no inline styles). */
.file-input-hidden {
display: none;
}
/* ──────────────────────────────────────────────────────────────
* Server-paywall visibility helpers.
*
* premium-check.js adds `pdf-pay-paid` or `pdf-pay-guest` to
* after the entitlement check resolves. Pages can use these
* helper classes to gate UI on payPDF without inline styles:
*
* .pdf-paywall-notice — visible only to guests / non-paid users.
* .pdf-paywall-only — visible only to paid users.
*
* The matching server-side check is in pdf-suite/_paywall.php; the
* UI hiding is purely cosmetic — server is the source of truth.
* ──────────────────────────────────────────────────────────── */
.pdf-paywall-notice {
display: none;
margin-top: 4px;
padding: 8px 12px;
border: 1px solid var(--accent);
border-radius: 8px;
background: rgba(59, 130, 246, .08);
color: var(--text);
}
body.pdf-pay-guest .pdf-paywall-notice {
display: block;
}
.pdf-paywall-only {
display: none;
}
body.pdf-pay-paid .pdf-paywall-only {
display: initial;
}
/* The convert button is enabled for everyone now: short documents convert
for free, longer ones surface the subscription modal at submit time. */
.mt8 {
margin-top: 8px;
}
.mt12 {
margin-top: 12px;
}
.mt30 {
margin-top: 30px;
}
/* ──────────────────────────────────────────────────────────────
* Modal dialog used by the converter for: subscription upsell
* (longer-than-10-pages free-user case) and the language-pack
* picker for browser-side Tesseract OCR.
* CSP-safe: visibility toggled via classes only, no inline styles.
* ──────────────────────────────────────────────────────────── */
.pdf-modal {
display: none;
position: fixed;
inset: 0;
z-index: 1000;
align-items: center;
justify-content: center;
}
.pdf-modal.pdf-modal-open {
display: flex;
}
.pdf-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .55);
}
.pdf-modal-dialog {
position: relative;
max-width: 480px;
width: calc(100% - 32px);
padding: 24px;
border: 1px solid var(--border);
border-radius: 10px;
background: var(--panel);
box-shadow: var(--shadow);
}
.pdf-modal-dialog h2 {
margin: 0 0 12px;
font-size: 1.15rem;
}
.pdf-modal-actions {
margin-top: 18px;
display: flex;
gap: 8px;
justify-content: flex-end;
flex-wrap: wrap;
}
.pdf-modal-primary,
.pdf-modal-secondary {
padding: 8px 16px;
border-radius: 6px;
border: 1px solid var(--border);
background: var(--panel-light);
color: var(--text);
text-decoration: none;
cursor: pointer;
font: inherit;
}
/* The primary action sits on an accent fill, so its ink has to track the
* accent rather than the page: it was inheriting --text from the rule
* above, i.e. near-black ink in the light skin and near-white ink in the
* dark one, measured at 3.0:1 and 3.1:1 — both under the 4.5:1 AA floor.
*
* --accent-strong rather than --accent for the fill: they are the same
* colour in the light skin (#0066cc, so nothing changes there), while in
* the dark skin --accent is a pale blue on which even white only reaches
* 3.7:1. The pair below measures 5.6:1 light / 5.1:1 dark. */
.pdf-modal-primary {
background: var(--accent-strong);
border-color: var(--accent-strong);
color: var(--on-accent);
}
/* ──────────────────────────────────────────────────────────────
* Boot waiter (_libwaiter.php). Reuses the .render-waiter pill, so all
* this adds is a self-destruct: the entry module removes the element as
* soon as the vendored libraries have parsed, and this animation covers
* the case where the module never runs at all (blocked or failed
* script), so the pill cannot sit there claiming to load forever.
* ──────────────────────────────────────────────────────────── */
#libBootWaiter {
animation: lib-boot-waiter-give-up 25s forwards;
}
@keyframes lib-boot-waiter-give-up {
0%, 92% { opacity: 1; }
100% { opacity: 0; visibility: hidden; }
}
/* ──────────────────────────────────────────────────────────────
* Password prompt for protected PDFs (ui/passwordModal.js).
* The dialog itself reuses .pdf-modal* above; only the field, the
* error line and the consequence note need their own rules.
* ──────────────────────────────────────────────────────────── */
.pdf-password-intro {
margin: 0 0 14px;
color: var(--text-dim);
line-height: 1.45;
/* a long file name must wrap rather than widen the dialog */
overflow-wrap: anywhere;
}
.pdf-password-label {
display: flex;
flex-direction: column;
gap: 6px;
color: var(--text-dim);
}
.pdf-password-input {
width: 100%;
padding: 10px 12px;
border: 1px solid var(--border);
border-radius: 8px;
background: var(--panel-light);
color: var(--text);
/* 16px keeps iOS Safari from zooming the page on focus */
font: inherit;
font-size: 16px;
}
.pdf-password-input:focus {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
.pdf-password-error {
margin: 10px 0 0;
color: var(--danger);
font-size: .9rem;
min-height: 1.2em;
}
.pdf-password-error:empty {
margin: 0;
min-height: 0;
}
.pdf-password-note {
margin: 10px 0 0;
color: var(--text-dim);
font-size: .85rem;
line-height: 1.45;
}
.pdf-password-note:empty {
margin: 0;
}
.pdf-langpack-list {
list-style: none;
margin: 12px 0 0;
padding: 0;
max-height: 280px;
overflow-y: auto;
}
.pdf-langpack-list li {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 0;
border-bottom: 1px solid var(--border);
}
.pdf-langpack-list li:last-child {
border-bottom: 0;
}
.pdf-langpack-status {
margin-left: auto;
font-size: .85rem;
color: var(--text-dim);
}
#convertProgressWrap {
margin-top: 12px;
}
#convertProgress {
width: 100%;
}
/* ──────────────────────────────────────────────────────────────
* Shared page-level layout primitives (hero, badge, structured
* SEO/FAQ/credits sections). Mirrors the layout used by the
* sibling tool pages (see example.php) so the suite presents a
* consistent look across all user-reachable entry points.
* CSP-safe: no inline styles, class-based only.
* ──────────────────────────────────────────────────────────── */
.hero {
text-align: left;
}
.hero h1 {
margin: 0 0 8px;
line-height: 1.2;
}
.hero .hint {
margin: 0 0 14px;
max-width: 70ch;
}
.privacy-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border: 1px solid var(--accent);
border-radius: 999px;
background: rgba(59, 130, 246, .10);
color: var(--text);
font-size: .92rem;
line-height: 1.2;
}
.section.seo,
.section.faq,
.section.credits {
line-height: 1.55;
}
.section.seo h2,
.section.faq h2,
.section.credits h2 {
margin: 0 0 10px;
font-size: 1.15rem;
}
.section.seo h3,
.section.faq h3,
.section.credits h3 {
margin: 14px 0 6px;
font-size: 1rem;
color: var(--text);
}
.section.seo p,
.section.faq p,
.section.credits p {
margin: 0 0 10px;
color: var(--text-dim);
}
.section.seo ul,
.section.credits ul {
margin: 6px 0 12px;
padding-left: 20px;
color: var(--text-dim);
}
.section.credits a {
color: var(--accent);
text-decoration: none;
word-break: break-word;
}
.section.credits a:hover,
.section.credits a:focus {
text-decoration: underline;
}
/* FOOTER */
.footer {
margin-top: 40px;
padding: 20px;
background: var(--panel);
border-top: 1px solid var(--border);
color: var(--text-dim);
font-size: 13px;
text-align: center;
}
.footer-lang {
margin-top: 18px;
display: flex;
flex-direction: column;
gap: 8px;
}
.footer-lang label {
font-size: 0.9rem;
color: var(--text-dim);
}
.footer-lang select {
background: var(--panel-light);
color: var(--text);
border: 1px solid var(--border);
border-radius: 10px;
padding: 10px 12px;
font-size: 0.95rem;
outline: none;
cursor: pointer;
transition: border-color .2s ease, background .2s ease;
}
.footer-lang select:hover,
.footer-lang select:focus {
border-color: var(--accent);
background: var(--field-hover);
}
/* The pdf-suite tab strip is owned by toolbar.css, which is loaded after this
file. The rules that used to live here also matched `.nav a`, and their
`color: #fff` survived toolbar.css's background override — which produced
white-on-light-grey text on the selected tab once the light skin landed.
`.page-nav` is not used anywhere in pdf-suite and comes from /themeV0.01.css. */
.nav a {
border: 1px solid var(--border);
font-size: 14px;
}
/* Sections */
.section,
.page-section {
margin-bottom: 20px;
padding: 18px;
background: var(--panel);
border-radius: 12px;
border: 1px solid var(--border);
}
/* Typography */
h1,
h3 {
margin-top: 0;
}/* ──────────────────────────────────────────────────────────────
* Mobile compatibility & visual-bug fixes.
*
* Issues addressed:
* • convert.php toolbar overflows horizontally on small screens
* because of many selects/labels in a single flex row.
* • `.zoom-controls { margin-left: auto }` strands the zoom group
* against the right edge on narrow screens, leaving an awkward
* gap when the previous group wraps.
* • `.nav` could scroll off-screen when icons are dense.
* • `h1` is too large for phones and pushes the hint off the fold.
* • The main `.container` side-padding (16px via the calc) is
* a little tight on phones — keep, but stop sections clipping.
* • The page-list thumb (edit.php) plus actions wrap awkwardly
* at very small widths.
* ──────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
.container {
width: min(1180px, calc(100% - 20px));
padding: 16px 0 32px;
}
.container h1 {
font-size: 1.5rem;
margin: 16px 0 6px;
}
.hero .hint {
font-size: .95rem;
}
.nav {
gap: 6px;
margin-bottom: 14px;
}
.nav a {
padding: 8px 10px;
font-size: .92rem;
}
#toolbar {
gap: 8px;
}
.toolbar-group {
flex-wrap: wrap;
gap: 8px;
}
.zoom-controls {
margin-left: 0;
width: 100%;
justify-content: flex-start;
}
.file-button,
button {
padding: 9px 14px;
}
.section {
padding: 14px;
}
.task-grid a {
min-height: 88px;
padding: 16px;
}
.pdf-modal-dialog {
padding: 18px;
}
}
/* ──────────────────────────────────────────────────────────────
* Narrow phones: shrink the toolbar controls by ~30% so they stack
* into fewer rows. Only #toolbar is touched — .nav and the buttons
* inside page content keep their comfortable size.
*
* "Open PDF" is a