From ce936e3b71dd78e30a383450d6741f9367665e1b Mon Sep 17 00:00:00 2001 From: Pontoporeia Date: Thu, 9 Jul 2026 15:52:40 +0200 Subject: [PATCH] fix: various styling fixes; simplify tfe.php structure and CSS with grid --- TODO.md | 41 +- app/public/assets/css/admin.css | 2478 ++++++++++++++------------- app/public/assets/css/base.css | 70 +- app/public/assets/css/tfe.css | 652 ++++--- app/templates/admin/index-table.php | 2 +- app/templates/public/tfe.php | 28 +- 6 files changed, 1597 insertions(+), 1674 deletions(-) diff --git a/TODO.md b/TODO.md index eda53f9..ad4f4a7 100644 --- a/TODO.md +++ b/TODO.md @@ -1,36 +1,5 @@ -- [x] Remove "Mo" option from duration — keep only minutes and pages -- [x] Combine pages and minutes as separate fields (both can be set simultaneously) -- [x] Fix minutes input visibility (can't see what's typed) -- [x] Add `has_annexes` checkbox to form + DB column -- [x] Display duration on admin backoffice recap page -- [x] Update public TFE page duration display for new combined format -- [x] Fix `handleAutosaveResponse is not defined` — load `autosave-handler.js` on about_page edit view -- [x] Fix `handleAutosaveResponse is not defined` in admin add/edit — function was scoped inside IIFE bundle, not on window -- [x] Fix search result cards: title and author always below image/gradient, remove text overlay on placeholder gradient -- [x] Change search results to 10 per page with HTMX pagination (no-JS fallback preserved) -- [x] Bump to 15 results/page, make results area vertically scrollable, sticky pagination at viewport bottom -- [x] Fix HTMX targetError: move #search-results wrapper inside fragment so it survives outerHTML swaps -- [x] Add range counter to results header (e.g. "1–15 sur 112 résultats") -- [x] Collapsible filter controls with
/ + active filter badge on mobile -- [x] Responsive paginator: hide first/last buttons on mobile, smaller touch targets -- [x] Compact range counter on mobile: "1–15 / 112" instead of full "1–15 sur 112 résultats" -- [x] Remove orientation display from search result card meta -- [x] Add bulk select/delete to tmp cleanup dialog (like admin/index.php pattern) -- [x] Move cleanup UI from modal to dedicated page (like add.php/edit.php) -- [x] Replace
with
/ in cleanup fragments (like contenus.php) -- [x] Standardise test group recipes: lint-php, lint-css, lint-js, test + add fix recipe + make lint pass clean -- [x] Remove Mot de passe column from acces.php, add key.svg icon button in Actions to copy password to clipboard, reorder actions (URL/password/edit/toggle/archive), switch URL icon to link-simple.svg -- [x] Fix CC2r: removed hidden seeds (were stale/overriding user input), render initial licence-choice from \$formData; Interne want_license unchecked clears CC2r+licence, switching from other modes preserves values; CC2r independent toggle; licence dropdown has no-licence placeholder -- [x] Dans le formulaire admin, le contact privé ne se sauvegarde pas. -- [x] Remove "Rendre le contact visible publiquement sur la fiche du TFE" from admin add/edit forms -- [x] Auto-show contact on public TFE page when contact_visible is filled (no checkbox needed) -- [x] Fix file size limits: align all layers (JS/FilepondHandler/ThesisFileHandler/validate-fragment) — video/audio 5 GB, default 500 MB, PDF 100 MB; fix JS fileValidateSizeFilter gate bug that rejected AV files >1 GB despite 8 GB per-ext cap -- [x] Fix: deleting contact groups in apropos form not persisted (no change event after DOM removal, autosave never triggered) -- [x] Improve h1, h2, h3 size difference in base.css heading scale -- [x] Rework TFE page desktop layout: two columns 35vw/1fr, left = author/title/meta/synopsis, right = files, media 100% width; columns scroll independently, content fits 100vw; no bottom padding on main; add &scrollbar=0 to PDF iframe URLs -- [x] 'Promoteur·ice ULB' remplacé par 'Promoteur·ice université' (changement juste l'étiquette) -- [x] PDF viewer: fix page navigation buttons (prev/next) — build toolbar after canvases exist & query canvases fresh in scroll handler -- [x] PDF viewer: render pages smaller by default (0.85× scale) -- [x] PDF viewer: add dark transparent violet background behind pages when expanded -- [x] pdf-viewer: expand to fill right column (not whole page), center pages, freeze column on expand -- [x] pdf-viewer: fix toolbar width (align-self:stretch), hide sibling file items when expanded +# TODO + +- [x] Simplify `tfe.php` HTML structure (remove `.tfe-layout` wrapper, remove `.tfe-synopsis-column` wrapper) +- [x] Simplify `tfe.css` — replace flex-column with grid where possible, merge `.tfe-layout` into `.tfe-content-row`, remove dead wrappers +- [x] Commit changes diff --git a/app/public/assets/css/admin.css b/app/public/assets/css/admin.css index bac6a3d..c5b5c78 100644 --- a/app/public/assets/css/admin.css +++ b/app/public/assets/css/admin.css @@ -4,63 +4,67 @@ /* ── Layout ────────────────────────────────────────────────────────────── */ .admin-body { - display: flex; - flex-direction: column; - height: 100%; - overflow: hidden; + display: flex; + flex-direction: column; + height: 100%; + overflow: hidden; } /* Keep admin header single-row like public header */ .admin-body header nav { - overflow-x: auto; - white-space: nowrap; - scrollbar-width: thin; + overflow-x: auto; + white-space: nowrap; + scrollbar-width: thin; } .admin-body header nav .nav-right-links { - flex-shrink: 0; + flex-shrink: 0; } .admin-body header nav ul [data-nav-logout] a { - opacity: 0.6; - display: flex; - align-items: center; + opacity: 0.6; + display: flex; + align-items: center; } .admin-body header nav ul [data-nav-logout] a:hover { - opacity: 1; + opacity: 1; } .admin-body header nav ul [data-nav-logout] a svg { - display: block; - width: 20px; - height: 20px; + display: block; + width: 20px; + height: 20px; } /* Public-site link icon in admin nav */ .admin-body header nav .nav-logo { - display: grid; - grid-auto-flow: column; - align-items: center; - column-gap: 0.4em; + display: grid; + grid-auto-flow: column; + align-items: center; + column-gap: 0.4em; } .admin-body header nav .nav-logo svg { - width: 16px; - height: 16px; + width: 16px; + height: 16px; } .admin-body main { - flex: 1; - min-height: 0; - overflow-y: auto; - width: 100%; - background: linear-gradient( - 180deg, - rgba(149, 87, 181, 0.18) 0%, - rgba(0, 0, 0, 0) 6% - ); + flex: 1; + min-height: 0; + overflow-y: auto; + width: 100%; + background: linear-gradient( + 180deg, + rgba(149, 87, 181, 0.18) 0%, + rgba(0, 0, 0, 0) 6% + ); +} + +.admin-body main:not(:has(.admin-table--sticky)) { + padding: 2ch; } .admin-main--list { - padding: 0; + padding: 0; } .admin-main--list > form, @@ -68,294 +72,294 @@ .admin-main--list > .flash-success, .admin-main--list > .flash-error, .admin-main--list > .admin-empty { - margin-left: var(--space-m); - margin-right: var(--space-m); + margin-left: var(--space-m); + margin-right: var(--space-m); } #admin-table-wrap { - padding: 0 0 var(--space-2xl); + padding: 0 0 var(--space-2xl); } .admin-body main > table tbody tr:nth-child(even) { - background: var(--bg-secondary); + background: var(--bg-secondary); } .admin-table-row:hover { - background: var(--blue-muted-bg); + background: var(--blue-muted-bg); } .admin-body main > h1, .admin-list-header > h1 { - text-transform: uppercase; - letter-spacing: 0.08em; - margin: 0 0 var(--space-l) 0; - display: flex; - align-items: center; - gap: var(--space-2xs); + text-transform: uppercase; + letter-spacing: 0.08em; + margin: 0 0 var(--space-l) 0; + display: flex; + align-items: center; + gap: var(--space-2xs); } .admin-back-btn { - display: inline-flex; - align-items: center; - justify-content: center; - width: 40px; - height: 40px; - border-radius: var(--radius); - color: var(--text-secondary); - text-decoration: none; - transition: - background 0.15s, - color 0.15s; - flex-shrink: 0; - vertical-align: middle; - margin-right: var(--space-2xs); + display: inline-flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + border-radius: var(--radius); + color: var(--text-secondary); + text-decoration: none; + transition: + background 0.15s, + color 0.15s; + flex-shrink: 0; + vertical-align: middle; + margin-right: var(--space-2xs); } .admin-back-btn:hover { - background: var(--bg-secondary); - color: var(--accent-primary); + background: var(--bg-secondary); + color: var(--accent-primary); } .admin-back-btn svg { - width: 28px; - height: 28px; - fill: currentColor; + width: 28px; + height: 28px; + fill: currentColor; } /* ── Form styles → see form-base.css + form-admin.css ───────────────────── */ /* ── Buttons ────────────────────────────────────────────────────────────── */ .admin-form-footer { - margin-top: var(--space-l); + margin-top: var(--space-l); } /* ── Admin button aliases — see components/buttons.css .btn base class ─── */ .admin-btn { - /* deprecated alias for .btn--primary; kept for backward-compat */ + /* deprecated alias for .btn--primary; kept for backward-compat */ } .admin-btn-secondary { - /* deprecated alias for .btn--secondary; kept for backward-compat */ + /* deprecated alias for .btn--secondary; kept for backward-compat */ } .admin-btn--sm { - /* deprecated alias for .btn--sm; kept for backward-compat */ + /* deprecated alias for .btn--sm; kept for backward-compat */ } .admin-btn--warning { - /* deprecated alias for .btn--warning; kept for backward-compat */ + /* deprecated alias for .btn--warning; kept for backward-compat */ } .admin-btn--danger { - /* deprecated alias for .btn--danger; kept for backward-compat */ + /* deprecated alias for .btn--danger; kept for backward-compat */ } /* ── Toast messages — styles in components/toast.css ───────────────── */ /* ── Stats cards ────────────────────────────────────────────────────────── */ .admin-stats { - display: flex; - gap: var(--space-2xs); - flex-wrap: wrap; - margin: 0; + display: flex; + gap: var(--space-2xs); + flex-wrap: wrap; + margin: 0; } .admin-stat { - background: var(--bg-secondary); - border: 1px solid var(--border-primary); - border-radius: var(--radius); - padding: var(--space-2xs) var(--space-xs); - min-width: 0; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - margin: 0; - gap: var(--space-3xs); + background: var(--bg-secondary); + border: 1px solid var(--border-primary); + border-radius: var(--radius); + padding: var(--space-2xs) var(--space-xs); + min-width: 0; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 0; + gap: var(--space-3xs); } .admin-stat--pub .admin-stat__number { - color: var(--accent-green); + color: var(--accent-green); } .admin-stat--pub .admin-stat__number:empty::after, .admin-stat--pub .admin-stat__number[data-empty] { - color: var(--text-tertiary); + color: var(--text-tertiary); } .admin-stat--pend .admin-stat__number { - color: var(--accent-yellow); + color: var(--accent-yellow); } .admin-stat--pend .admin-stat__number:empty::after, .admin-stat--pend .admin-stat__number[data-empty] { - color: var(--text-tertiary); + color: var(--text-tertiary); } .admin-stat legend { - font-size: var(--step--2); - font-weight: 400; - text-transform: none; - letter-spacing: normal; - color: var(--text-secondary); - padding: 0; - float: none; - margin: 0; - width: auto; + font-size: var(--step--2); + font-weight: 400; + text-transform: none; + letter-spacing: normal; + color: var(--text-secondary); + padding: 0; + float: none; + margin: 0; + width: auto; } .admin-stat__number { - font-size: var(--step-1); - font-weight: 700; - color: var(--accent-primary); - line-height: 1; + font-size: var(--step-1); + font-weight: 700; + color: var(--accent-primary); + line-height: 1; } /* ── Stats (inline badge-like counters) ────────────────────────────── */ /* ── Maintenance bar ────────────────────────────────────────────────────── */ .admin-maintenance-bar { - display: flex; - align-items: center; - justify-content: space-between; - gap: var(--space-s); - background: var(--bg-secondary); - border: 1px solid var(--border-primary); - border-radius: var(--radius); - padding: var(--space-2xs) var(--space-s); - margin-bottom: var(--space-m); - font-size: var(--step--1); + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-s); + background: var(--bg-secondary); + border: 1px solid var(--border-primary); + border-radius: var(--radius); + padding: var(--space-2xs) var(--space-s); + margin-bottom: var(--space-m); + font-size: var(--step--1); } .admin-maintenance-bar--active { - background: var(--warning-muted-bg); - border-color: var(--warning); - color: var(--text-primary); + background: var(--warning-muted-bg); + border-color: var(--warning); + color: var(--text-primary); } .admin-maintenance-bar form { - display: inline; + display: inline; } /* Result-count line above the thesis table */ .admin-list-meta { - color: var(--text-secondary); - font-size: var(--step--1); - margin-bottom: var(--space-2xs); + color: var(--text-secondary); + font-size: var(--step--1); + margin-bottom: var(--space-2xs); } /* Empty-state message below the thesis table */ .admin-empty { - color: var(--text-secondary); - padding: var(--space-s) var(--space-2xs); - text-align: center; + color: var(--text-secondary); + padding: var(--space-s) var(--space-2xs); + text-align: center; } /* Identifier column in the thesis table */ .admin-table-id { - color: var(--text-secondary); - font-size: var(--step--2); - white-space: nowrap; + color: var(--text-secondary); + font-size: var(--step--2); + white-space: nowrap; } /* ── Filters bar ────────────────────────────────────────────────────────── */ .admin-filters { - display: flex; - gap: var(--space-xs); - margin-bottom: var(--space-m); - flex-wrap: wrap; - align-items: center; + display: flex; + gap: var(--space-xs); + margin-bottom: var(--space-m); + flex-wrap: wrap; + align-items: center; } .admin-filters-btn { - /* deprecated alias for .btn--primary; kept for backward-compat */ + /* deprecated alias for .btn--primary; kept for backward-compat */ } .admin-filters-reset { - /* deprecated alias for .btn--secondary; kept for backward-compat */ + /* deprecated alias for .btn--secondary; kept for backward-compat */ } /* ── Bulk actions bar ───────────────────────────────────────────────────── */ .admin-bulk-actions { - display: none; - align-items: center; - gap: var(--space-s); - padding: var(--space-2xs) var(--space-s); - background: var(--bg-secondary); - border: 1px solid var(--border-primary); - border-radius: var(--radius); - margin-bottom: var(--space-s); - font-size: var(--step--1); - position: sticky; - top: 0; - z-index: 10; + display: none; + align-items: center; + gap: var(--space-s); + padding: var(--space-2xs) var(--space-s); + background: var(--bg-secondary); + border: 1px solid var(--border-primary); + border-radius: var(--radius); + margin-bottom: var(--space-s); + font-size: var(--step--1); + position: sticky; + top: 0; + z-index: 10; } .admin-bulk-btns { - display: flex; - gap: var(--space-2xs); + display: flex; + gap: var(--space-2xs); } .admin-stat--inline { - font-size: var(--step--1); - color: var(--text-secondary); - font-weight: 500; - white-space: nowrap; + font-size: var(--step--1); + color: var(--text-secondary); + font-weight: 500; + white-space: nowrap; } /* ── Table ──────────────────────────────────────────────────────────────── */ /* Base table/th/td styles live in components/tables.css */ .admin-body main > table { - margin-top: var(--space-m); + margin-top: var(--space-m); } .admin-body main > table th, .admin-body main > table td { - padding: var(--space-3xs); + padding: var(--space-3xs); } td.admin-ap-col, th.admin-ap-col { - white-space: nowrap; + white-space: nowrap; } .admin-na { - color: var(--text-tertiary); - font-style: italic; + color: var(--text-tertiary); + font-style: italic; } /* Sortable column headers */ .admin-sort-link { - color: inherit; - text-decoration: none; - display: inline-flex; - align-items: center; - gap: 2px; - transition: color 0.15s; + color: inherit; + text-decoration: none; + display: inline-flex; + align-items: center; + gap: 2px; + transition: color 0.15s; } .admin-sort-link:hover { - color: var(--accent-primary); + color: var(--accent-primary); } .admin-body table tr:hover td { - background: var(--bg-secondary); + background: var(--bg-secondary); } .admin-body table .thesis-title { - font-weight: 500; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; - word-break: break-word; + font-weight: 500; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + word-break: break-word; } .admin-body table .thesis-subtitle { - font-size: var(--step--1); - color: var(--text-secondary); - font-style: italic; + font-size: var(--step--1); + color: var(--text-secondary); + font-style: italic; } /* ── Status badges ──────────────────────────────────────────────────────── */ @@ -363,1493 +367,1493 @@ th.admin-ap-col { /* ── Compact table badges (admin-only override) ──────────────────── */ .admin-body .status-badge { - font-size: 0.7rem; - padding: 2px var(--space-3xs); + font-size: 0.7rem; + padding: 2px var(--space-3xs); } /* ── Compact icon buttons for table rows ──────────────────────────── */ .admin-icon-btn { - display: inline-flex; - align-items: center; - justify-content: center; - width: 28px; - height: 28px; - padding: 3px; - border-radius: var(--radius); - border: 1px solid transparent; - background: transparent; - color: var(--text-secondary); - cursor: pointer; - text-decoration: none; - transition: - background 0.15s, - color 0.15s, - border-color 0.15s; - line-height: 1; + display: inline-flex; + align-items: center; + justify-content: center; + width: 28px; + height: 28px; + padding: 3px; + border-radius: var(--radius); + border: 1px solid transparent; + background: transparent; + color: var(--text-secondary); + cursor: pointer; + text-decoration: none; + transition: + background 0.15s, + color 0.15s, + border-color 0.15s; + line-height: 1; } .admin-icon-btn svg { - width: 16px; - height: 16px; - fill: currentColor; - flex-shrink: 0; + width: 16px; + height: 16px; + fill: currentColor; + flex-shrink: 0; } .admin-icon-btn:hover { - background: var(--bg-secondary); - color: var(--text-primary); - border-color: var(--border-primary); + background: var(--bg-secondary); + color: var(--text-primary); + border-color: var(--border-primary); } .admin-icon-btn--view:hover { - background: var(--blue-muted-bg); - color: var(--accent-blue); - border-color: var(--blue-muted-border); + background: var(--blue-muted-bg); + color: var(--accent-blue); + border-color: var(--blue-muted-border); } .admin-icon-btn--edit:hover { - background: var(--yellow-muted-bg); - color: var(--accent-yellow); - border-color: var(--yellow-muted-border); + background: var(--yellow-muted-bg); + color: var(--accent-yellow); + border-color: var(--yellow-muted-border); } .admin-icon-btn--publish:hover { - background: var(--green-muted-bg); - color: var(--accent-green); - border-color: var(--green-muted-border); + background: var(--green-muted-bg); + color: var(--accent-green); + border-color: var(--green-muted-border); } .admin-icon-btn--unpublish:hover { - background: var(--bg-secondary); - color: var(--text-secondary); - border-color: var(--border-primary); + background: var(--bg-secondary); + color: var(--text-secondary); + border-color: var(--border-primary); } .admin-icon-btn--delete:hover { - background: var(--error-muted-bg); - color: var(--error); - border-color: var(--danger-border-muted); + background: var(--error-muted-bg); + color: var(--error); + border-color: var(--danger-border-muted); } .admin-icon-btn--copy:hover { - background: var(--blue-muted-bg); - color: var(--accent-blue); - border-color: var(--blue-muted-border); + background: var(--blue-muted-bg); + color: var(--accent-blue); + border-color: var(--blue-muted-border); } .admin-icon-btn--key:hover { - background: var(--yellow-muted-bg); - color: var(--accent-yellow); - border-color: var(--yellow-muted-border); + background: var(--yellow-muted-bg); + color: var(--accent-yellow); + border-color: var(--yellow-muted-border); } .admin-icon-btn--archive:hover { - background: var(--bg-secondary); - color: var(--text-secondary); - border-color: var(--border-primary); + background: var(--bg-secondary); + color: var(--text-secondary); + border-color: var(--border-primary); } .admin-icon-btn--merge:hover { - background: var(--yellow-muted-bg); - color: var(--accent-yellow); - border-color: var(--yellow-muted-border); + background: var(--yellow-muted-bg); + color: var(--accent-yellow); + border-color: var(--yellow-muted-border); } /* ── Action buttons in table — see components/buttons.css .btn base class ─ */ .admin-actions { - display: flex; - gap: var(--space-3xs); - flex-wrap: nowrap; - white-space: nowrap; + display: flex; + gap: var(--space-3xs); + flex-wrap: nowrap; + white-space: nowrap; } .admin-actions-col { - white-space: nowrap; + white-space: nowrap; } /* Legacy table-action size — now just an alias */ .admin-btn-sm { - /* deprecated alias for .btn--sm; kept for backward-compat */ + /* deprecated alias for .btn--sm; kept for backward-compat */ } .admin-btn-view { - /* deprecated alias for .btn--sm .btn--blue */ + /* deprecated alias for .btn--sm .btn--blue */ } .admin-btn-visit { - /* deprecated alias for .btn--sm .btn--green */ + /* deprecated alias for .btn--sm .btn--green */ } .admin-btn-edit { - /* deprecated alias for .btn--sm .btn--yellow */ + /* deprecated alias for .btn--sm .btn--yellow */ } .admin-btn-publish { - /* deprecated alias for .btn--sm .btn--green */ + /* deprecated alias for .btn--sm .btn--green */ } .admin-btn-unpublish { - /* deprecated alias for .btn--sm .btn--muted */ + /* deprecated alias for .btn--sm .btn--muted */ } .admin-btn-delete { - /* deprecated alias for .btn--sm .btn--red */ + /* deprecated alias for .btn--sm .btn--red */ } .publish-form { - display: inline; - margin: 0; + display: inline; + margin: 0; } /* ── Thesis info sections (thanks page) ─────────────────────────────────── */ .admin-body main > section:not([aria-labelledby^="settings-"]) { - border: 1px solid var(--border-primary); - border-radius: var(--radius); - padding: var(--space-m); - margin-bottom: var(--space-m); + border: 1px solid var(--border-primary); + border-radius: var(--radius); + padding: var(--space-m); + margin-bottom: var(--space-m); } .admin-body main > section:not([aria-labelledby^="settings-"]) h2 { - margin: 0 0 var(--space-s); - border-bottom: 1px solid var(--border-primary); - padding-bottom: var(--space-2xs); + margin: 0 0 var(--space-s); + border-bottom: 1px solid var(--border-primary); + padding-bottom: var(--space-2xs); } .admin-body main > section:not([aria-labelledby^="settings-"]) dl { - display: grid; - grid-template-columns: 180px 1fr; - gap: var(--space-3xs) var(--space-s); + display: grid; + grid-template-columns: 180px 1fr; + gap: var(--space-3xs) var(--space-s); } .admin-body main > section:not([aria-labelledby^="settings-"]) dt { - font-weight: 600; - font-size: var(--step--1); - color: var(--text-secondary); + font-weight: 600; + font-size: var(--step--1); + color: var(--text-secondary); } .admin-body main > section:not([aria-labelledby^="settings-"]) dd { - margin: 0; - font-size: var(--step--1); + margin: 0; + font-size: var(--step--1); } /* ── Flat sections (no border card) — parametres + contenus ─────────────── */ .admin-body main > section[aria-labelledby^="settings-"], .admin-body main > section[aria-labelledby^="static-pages-"], .admin-body main > section[aria-labelledby^="form-settings-"] { - border: none; - border-radius: 0; - padding: 0; - margin-bottom: var(--space-xl); + border: none; + border-radius: 0; + padding: 0; + margin-bottom: var(--space-xl); } /* Fieldsets inside flat settings sections: no card border */ .admin-body main > section[aria-labelledby^="settings-"] fieldset { - border: none; - border-radius: 0; - padding: var(--space-m) 0; + border: none; + border-radius: 0; + padding: var(--space-m) 0; } .admin-body main > section[aria-labelledby^="settings-"] fieldset legend { - padding: 0; - font-weight: 400; - letter-spacing: 0.04em; - text-transform: uppercase; - color: var(--text-secondary); + padding: 0; + font-weight: 400; + letter-spacing: 0.04em; + text-transform: uppercase; + color: var(--text-secondary); } .admin-body main > section[aria-labelledby^="settings-"] > h2, .admin-body main > section[aria-labelledby^="static-pages-"] > h2 { - font-weight: 600; - letter-spacing: 0.06em; - text-transform: uppercase; - color: var(--text-secondary); - margin: 0 0 var(--space-m); - padding-bottom: var(--space-2xs); - border-bottom: 1px solid var(--border-primary); + font-weight: 600; + letter-spacing: 0.06em; + text-transform: uppercase; + color: var(--text-secondary); + margin: 0 0 var(--space-m); + padding-bottom: var(--space-2xs); + border-bottom: 1px solid var(--border-primary); } .admin-action-bar { - margin-top: var(--space-m); - display: flex; - gap: var(--space-xs); - flex-wrap: wrap; + margin-top: var(--space-m); + display: flex; + gap: var(--space-xs); + flex-wrap: wrap; } .admin-muted { - color: var(--text-secondary); + color: var(--text-secondary); } /* ── Section titles (account, etc.) ─────────────────────────────────────── */ .admin-section-title { - font-size: var(--step-0); - font-weight: 600; - letter-spacing: 0.07em; - text-transform: uppercase; - color: var(--text-secondary); - margin: var(--space-l) 0 var(--space-s); - padding-bottom: var(--space-2xs); - border-bottom: 1px solid var(--border-primary); + font-size: var(--step-0); + font-weight: 600; + letter-spacing: 0.07em; + text-transform: uppercase; + color: var(--text-secondary); + margin: var(--space-l) 0 var(--space-s); + padding-bottom: var(--space-2xs); + border-bottom: 1px solid var(--border-primary); } .admin-section-title--danger { - color: var(--error); - border-color: var(--error); + color: var(--error); + border-color: var(--error); } /* ── Account status block ───────────────────────────────────────────────── */ .admin-account-status { - border: 1px solid var(--border-primary); - border-radius: var(--radius); - padding: var(--space-s) var(--space-m); - margin-bottom: var(--space-l); - display: flex; - flex-direction: column; - gap: var(--space-xs); + border: 1px solid var(--border-primary); + border-radius: var(--radius); + padding: var(--space-s) var(--space-m); + margin-bottom: var(--space-l); + display: flex; + flex-direction: column; + gap: var(--space-xs); } .admin-account-status__row { - display: flex; - align-items: center; - gap: var(--space-xs); - font-size: var(--step--1); + display: flex; + align-items: center; + gap: var(--space-xs); + font-size: var(--step--1); } .admin-account-status__label { - color: var(--text-secondary); - min-width: 220px; + color: var(--text-secondary); + min-width: 220px; } .admin-account-status__code { - font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; - font-size: var(--step--2); - border: 1px solid var(--border-primary); - border-radius: var(--radius); - padding: var(--space-3xs) var(--space-3xs); - color: var(--text-secondary); - background: var(--bg-secondary); + font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; + font-size: var(--step--2); + border: 1px solid var(--border-primary); + border-radius: var(--radius); + padding: var(--space-3xs) var(--space-3xs); + color: var(--text-secondary); + background: var(--bg-secondary); } .admin-account-status__note { - font-size: var(--step--1); - color: var(--text-secondary); - margin: 0; + font-size: var(--step--1); + color: var(--text-secondary); + margin: 0; } /* ── Danger zone (account page) ─────────────────────────────────────────── */ .admin-danger-zone { - border: 1px solid var(--danger-border-muted); - border-radius: var(--radius); - padding: var(--space-m) var(--space-m); - display: flex; - align-items: center; - gap: var(--space-m); - flex-wrap: wrap; + border: 1px solid var(--danger-border-muted); + border-radius: var(--radius); + padding: var(--space-m) var(--space-m); + display: flex; + align-items: center; + gap: var(--space-m); + flex-wrap: wrap; } .admin-danger-zone__description { - flex: 1; - font-size: var(--step--1); + flex: 1; + font-size: var(--step--1); } /* ── Login page ─────────────────────────────────────────────────────────── */ .admin-login-wrap { - display: flex; - align-items: center; - justify-content: center; - min-height: calc(100vh - 60px); + display: flex; + align-items: center; + justify-content: center; + min-height: calc(100vh - 60px); } .admin-login-box { - background: var(--bg-secondary); - border: 1px solid var(--border-primary); - border-radius: var(--radius); - padding: var(--space-l); - width: 100%; - max-width: 420px; + background: var(--bg-secondary); + border: 1px solid var(--border-primary); + border-radius: var(--radius); + padding: var(--space-l); + width: 100%; + max-width: 420px; } .admin-login-box h2 { - margin: 0 0 var(--space-m); - font-weight: 500; - text-align: center; - hyphens: none; - overflow-wrap: normal; - word-break: normal; + margin: 0 0 var(--space-m); + font-weight: 500; + text-align: center; + hyphens: none; + overflow-wrap: normal; + word-break: normal; } .admin-login-box .admin-form > div:not(.admin-form-footer) { - grid-template-columns: 1fr; - border: none; - padding: var(--space-3xs) 0; + grid-template-columns: 1fr; + border: none; + padding: var(--space-3xs) 0; } .admin-login-box .admin-form > div:not(.admin-form-footer) > label { - font-size: var(--step--1); - color: var(--text-secondary); - margin-bottom: var(--space-3xs); + font-size: var(--step--1); + color: var(--text-secondary); + margin-bottom: var(--space-3xs); } .admin-login-box .admin-form-footer { - margin-top: var(--space-s); - padding-top: var(--space-2xs); + margin-top: var(--space-s); + padding-top: var(--space-2xs); } .admin-login-box .btn { - width: 100%; + width: 100%; } /* ════ Import status card (dialog) ═══════════════════════════════════════ */ .admin-import-status-card { - margin: 0; - padding: var(--space-m) var(--space-l); + margin: 0; + padding: var(--space-m) var(--space-l); } .admin-import-status-card__success { - background: var(--success-muted-bg); - border: 1px solid var(--success); - border-left: 3px solid var(--success); - border-radius: var(--radius); - padding: var(--space-xs) var(--space-s); - font-size: var(--step--1); - margin: 0; + background: var(--success-muted-bg); + border: 1px solid var(--success); + border-left: 3px solid var(--success); + border-radius: var(--radius); + padding: var(--space-xs) var(--space-s); + font-size: var(--step--1); + margin: 0; } .admin-import-status-card__errors { - background: var(--accent-muted); - border: 1px solid var(--error); - border-left: 3px solid var(--error); - border-radius: var(--radius); - padding: var(--space-xs) var(--space-s); - font-size: var(--step--1); - margin-bottom: var(--space-s); + background: var(--accent-muted); + border: 1px solid var(--error); + border-left: 3px solid var(--error); + border-radius: var(--radius); + padding: var(--space-xs) var(--space-s); + font-size: var(--step--1); + margin-bottom: var(--space-s); } .admin-import-status-card__errors .admin-error-list { - margin: var(--space-2xs) 0 0; - padding-left: var(--space-s); + margin: var(--space-2xs) 0 0; + padding-left: var(--space-s); } /* Import log details/summary */ .admin-import-log-details { - margin: 0; - padding: 0 var(--space-l) var(--space-m); + margin: 0; + padding: 0 var(--space-l) var(--space-m); } .admin-import-log-details summary { - cursor: pointer; - font-size: var(--step--1); - font-weight: 600; - color: var(--text-secondary); - padding: var(--space-2xs) 0; - border-top: 1px solid var(--border-primary); + cursor: pointer; + font-size: var(--step--1); + font-weight: 600; + color: var(--text-secondary); + padding: var(--space-2xs) 0; + border-top: 1px solid var(--border-primary); } .admin-import-log-details summary:hover { - color: var(--text-primary); + color: var(--text-primary); } /* Hint text under the file input */ .admin-file-hint { - display: block; - margin-top: var(--space-2xs); + display: block; + margin-top: var(--space-2xs); } /* Error list inside role="alert" */ .admin-error-list { - margin: var(--space-2xs) 0 0; - padding-left: var(--space-s); + margin: var(--space-2xs) 0 0; + padding-left: var(--space-s); } /* Import results panel (legacy, kept for backward compat) */ .admin-import-results { - margin-top: var(--space-l); + margin-top: var(--space-l); } .admin-import-results__title { - font-size: var(--step-0); - font-weight: 600; - margin-bottom: var(--space-xs); - color: var(--text-secondary); - text-transform: uppercase; - letter-spacing: 0.06em; - border: none; - padding: 0; + font-size: var(--step-0); + font-weight: 600; + margin-bottom: var(--space-xs); + color: var(--text-secondary); + text-transform: uppercase; + letter-spacing: 0.06em; + border: none; + padding: 0; } /* ── Jury fieldset → see form-base.css ──────────────────────────────────── */ /* ── Inline form (tags page) ────────────────────────────────────────────── */ .admin-inline-form { - display: flex; - align-items: center; - gap: var(--space-3xs); - flex-wrap: wrap; + display: flex; + align-items: center; + gap: var(--space-3xs); + flex-wrap: wrap; } .admin-input--inline, .admin-inline-form input[type="text"] { - width: 160px; + width: 160px; } .admin-select--inline, .admin-inline-form select { - width: 160px; + width: 160px; } /* Stack secondary forms (merge, delete) below the rename form */ .admin-inline-form + .admin-inline-form { - margin-top: var(--space-3xs); + margin-top: var(--space-3xs); } /* Tags table column sizing */ .admin-body table:has(.admin-tags-count) th:nth-child(1) { - width: 40%; + width: 40%; } .admin-body table:has(.admin-tags-count) th:nth-child(2) { - width: 12%; + width: 12%; } .admin-body table:has(.admin-tags-count) th:nth-child(3) { - width: 48%; + width: 48%; } .admin-tags-count { - text-align: center; + text-align: center; } /* ── Banner preview ─────────────────────────────────────────────────────── */ .admin-banner-preview img { - max-width: 320px; - max-height: 100px; - object-fit: cover; - border: 1px solid var(--border-primary); - border-radius: var(--radius); - display: block; - margin-top: var(--space-2xs); + max-width: 320px; + max-height: 100px; + object-fit: cover; + border: 1px solid var(--border-primary); + border-radius: var(--radius); + display: block; + margin-top: var(--space-2xs); } /* ── List page toolbar (generic grid header + right slot) ──────────────── */ .admin-list-toolbar { - display: grid; - grid-template-columns: 1fr auto; - gap: var(--space-m) var(--space-l); - margin-bottom: var(--space-m); - align-items: center; - padding: var(--space-m) 0 0; + display: grid; + grid-template-columns: 1fr auto; + gap: var(--space-m) var(--space-l); + margin-bottom: var(--space-m); + align-items: center; + padding: var(--space-m) 0 0; } .admin-list-toolbar h1 { - margin: 0; - white-space: nowrap; + margin: 0; + white-space: nowrap; } .admin-list-toolbar .admin-stats { - justify-self: end; + justify-self: end; } .admin-list-toolbar .admin-filters { - display: flex; - flex-direction: column; - gap: var(--space-xs); - margin-bottom: 0; - min-width: 0; + display: flex; + flex-direction: column; + gap: var(--space-xs); + margin-bottom: 0; + min-width: 0; } .admin-list-toolbar .admin-filters__search { - display: flex; - gap: var(--space-xs); - align-items: center; + display: flex; + gap: var(--space-xs); + align-items: center; } .admin-list-toolbar .admin-filters__search input[type="text"] { - min-width: 10rem; - flex: 1 1 10rem; + min-width: 10rem; + flex: 1 1 10rem; } .admin-list-toolbar .admin-filters__dropdowns { - display: flex; - gap: var(--space-xs); - flex-wrap: wrap; + display: flex; + gap: var(--space-xs); + flex-wrap: wrap; } .admin-list-toolbar .admin-filters__dropdowns select { - min-width: 7rem; - flex: 1 1 7rem; + min-width: 7rem; + flex: 1 1 7rem; } .admin-list-toolbar .admin-filters .btn { - flex-shrink: 0; + flex-shrink: 0; } .admin-list-toolbar__right { - display: flex; - flex-direction: column; - gap: var(--space-xs); + display: flex; + flex-direction: column; + gap: var(--space-xs); } /* ── List page toolbar (theses index — single-line search) ─────────────── */ .admin-list-toolbar--list { - gap: var(--space-s); - padding: 2ch; - display: grid; - grid-template-columns: 1fr; - grid-template-rows: 1fr 1fr; - grid-template-areas: - "header" - "filters"; + gap: var(--space-s); + padding: 2ch; + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 1fr 1fr; + grid-template-areas: + "header" + "filters"; } .admin-list-toolbar--list .admin-toolbar-top { - grid-area: header; - display: grid; - grid-template-columns: 1fr 1fr; - grid-template-rows: 1fr; - gap: 0px 0px; - grid-template-areas: "header edit"; + grid-area: header; + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr; + gap: 0px 0px; + grid-template-areas: "header edit"; } .admin-toolbar-top h1 { - grid-area: header; - margin: 0; - white-space: nowrap; + grid-area: header; + margin: 0; + white-space: nowrap; } .admin-btn-group { - grid-area: edit; - display: flex; - gap: var(--space-2xs); - flex-wrap: wrap; + grid-area: edit; + display: flex; + gap: var(--space-2xs); + flex-wrap: wrap; } .admin-list-toolbar--list .admin-filters { - grid-area: filters; - display: flex; - flex-direction: row; - gap: var(--space-xs); - margin-bottom: 0; + grid-area: filters; + display: flex; + flex-direction: row; + gap: var(--space-xs); + margin-bottom: 0; } .admin-list-toolbar--list .admin-filters input[type="text"] { - flex: 1 1 auto; - min-width: 8rem; + flex: 1 1 auto; + min-width: 8rem; } .admin-list-toolbar--list .admin-filters select { - min-width: 6rem; - flex-shrink: 0; + min-width: 6rem; + flex-shrink: 0; } .admin-list-toolbar--list .admin-filters .btn { - flex-shrink: 0; + flex-shrink: 0; } .admin-btn-group { - display: flex; - gap: var(--space-xs); - flex-wrap: wrap; + display: flex; + gap: var(--space-xs); + flex-wrap: wrap; } /* ── Dialog ───────────────────────────────────────────────────────────── */ /* Base dialog/::backdrop styles live in components/dialog.css */ .admin-dialog { - max-width: 680px; - width: 100%; + max-width: 680px; + width: 100%; } .admin-dialog__header { - display: flex; - align-items: center; - justify-content: space-between; - padding: var(--space-m) var(--space-l); - border-bottom: 1px solid var(--border-primary); + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--space-m) var(--space-l); + border-bottom: 1px solid var(--border-primary); } .admin-dialog__header h3 { - font-weight: 600; - letter-spacing: 0.06em; - text-transform: uppercase; - margin: 0; - color: var(--text-secondary); + font-weight: 600; + letter-spacing: 0.06em; + text-transform: uppercase; + margin: 0; + color: var(--text-secondary); } .admin-dialog__close { - background: none; - border: none; - cursor: pointer; - font-size: var(--step-0); - color: var(--text-tertiary); - padding: var(--space-3xs); - line-height: 1; - border-radius: var(--radius); - transition: color 0.15s; + background: none; + border: none; + cursor: pointer; + font-size: var(--step-0); + color: var(--text-tertiary); + padding: var(--space-3xs); + line-height: 1; + border-radius: var(--radius); + transition: color 0.15s; } .admin-dialog__close:hover { - color: var(--text-primary); + color: var(--text-primary); } .admin-dialog .admin-form, .admin-dialog .admin-import-results, .admin-dialog .toast, .admin-dialog__alert { - margin: 0; - padding: var(--space-m) var(--space-l); + margin: 0; + padding: var(--space-m) var(--space-l); } .admin-dialog .admin-form { - padding-top: var(--space-m); - padding-bottom: 0; + padding-top: var(--space-m); + padding-bottom: 0; } .admin-dialog .admin-form-footer { - display: flex; - gap: var(--space-xs); - padding: 0 var(--space-l) var(--space-m); + display: flex; + gap: var(--space-xs); + padding: 0 var(--space-l) var(--space-m); } /* Small/confirmation dialog variant */ .admin-dialog--sm { - max-width: 420px; + max-width: 420px; } .admin-dialog__alert { - padding: var(--space-m) var(--space-l); - font-size: var(--step--1); - line-height: 1.6; + padding: var(--space-m) var(--space-l); + font-size: var(--step--1); + line-height: 1.6; } .admin-dialog__alert p:not(:last-child) { - margin: 0 0 var(--space-xs) 0; + margin: 0 0 var(--space-xs) 0; } .admin-dialog__alert p:last-child { - margin: 0; + margin: 0; } .admin-dialog__body { - padding: var(--space-m) var(--space-l); - font-size: var(--step--1); - line-height: 1.6; - overflow-y: auto; - flex: 1; - min-height: 0; + padding: var(--space-m) var(--space-l); + font-size: var(--step--1); + line-height: 1.6; + overflow-y: auto; + flex: 1; + min-height: 0; } .admin-dialog__body > *:first-child { - margin-top: 0; + margin-top: 0; } .admin-dialog__body > *:last-child { - margin-bottom: 0; + margin-bottom: 0; } .admin-dialog__stats { - margin: var(--space-sm) 0; - padding: var(--space-sm); - background: var(--bg-secondary); - border-radius: 8px; - font-size: var(--step--1); - line-height: 1.6; + margin: var(--space-sm) 0; + padding: var(--space-sm); + background: var(--bg-secondary); + border-radius: 8px; + font-size: var(--step--1); + line-height: 1.6; } .admin-dialog__hint { - font-size: var(--step--2); - color: var(--text-secondary); - margin: var(--space-xs) 0 0 0; + font-size: var(--step--2); + color: var(--text-secondary); + margin: var(--space-xs) 0 0 0; } .admin-dialog__footer { - display: flex; - gap: var(--space-xs); - padding: 0 var(--space-l) var(--space-m); + display: flex; + gap: var(--space-xs); + padding: 0 var(--space-l) var(--space-m); } /* Side-panel variant: pinned to right, full height */ .admin-dialog--sheet { - max-width: 720px; - max-height: 100vh; - height: 100vh; - margin: 0 0 0 auto; - border-radius: 16px 0 0 16px; - animation: adminSheetIn 0.3s ease-out; - overflow: hidden; + max-width: 720px; + max-height: 100vh; + height: 100vh; + margin: 0 0 0 auto; + border-radius: 16px 0 0 16px; + animation: adminSheetIn 0.3s ease-out; + overflow: hidden; } .admin-dialog--sheet[open] { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } @keyframes adminSheetIn { - from { - transform: translateX(100%); - } - to { - transform: translateX(0); - } + from { + transform: translateX(100%); + } + to { + transform: translateX(0); + } } .admin-dialog--sheet::backdrop { - background: rgba(0, 0, 0, 0.5); + background: rgba(0, 0, 0, 0.5); } /* Dialog table: replaces grey background box with flat table + heading */ .n-table { - width: 100%; - border-collapse: collapse; - font-size: 0.85em; + width: 100%; + border-collapse: collapse; + font-size: 0.85em; } .n-table thead th { - text-align: left; - padding: var(--space-3xs) var(--space-xs); - border-bottom: 1px solid var(--border-primary); - font-weight: 600; - color: var(--text-secondary); - font-size: 0.9em; + text-align: left; + padding: var(--space-3xs) var(--space-xs); + border-bottom: 1px solid var(--border-primary); + font-weight: 600; + color: var(--text-secondary); + font-size: 0.9em; } .n-table tbody td { - padding: var(--space-3xs) var(--space-xs); - border-bottom: 1px solid var(--border-secondary); - vertical-align: top; + padding: var(--space-3xs) var(--space-xs); + border-bottom: 1px solid var(--border-secondary); + vertical-align: top; } .n-table .n-table__info { - color: var(--text-tertiary); - font-size: 0.9em; + color: var(--text-tertiary); + font-size: 0.9em; } .n-heading { - display: inline-flex; - align-items: center; - gap: var(--space-2xs); - margin: 0 0 var(--space-xs) 0; - font-size: var(--step--1); - font-weight: 600; - color: var(--text-primary); - line-height: 1.4; + display: inline-flex; + align-items: center; + gap: var(--space-2xs); + margin: 0 0 var(--space-xs) 0; + font-size: var(--step--1); + font-weight: 600; + color: var(--text-primary); + line-height: 1.4; } .n-meta { - font-weight: 400; - font-size: 0.9em; - color: var(--text-secondary); - margin-left: var(--space-2xs); + font-weight: 400; + font-size: 0.9em; + color: var(--text-secondary); + margin-left: var(--space-2xs); } .n-grid { - display: block; + display: block; } .n-section, .n-grid > section, .n-grid > details { - margin: 2ch 0; - border: none; - border-radius: 0; - background: transparent; - overflow: visible; + margin: 2ch 0; + border: none; + border-radius: 0; + background: transparent; + overflow: visible; } .n-section:first-child, .n-grid > section:first-child, .n-grid > details:first-child { - margin-top: 0; + margin-top: 0; } .n-section:last-child, .n-grid > section:last-child, .n-grid > details:last-child { - margin-bottom: 0; + margin-bottom: 0; } .n-grid .n-heading { - margin-top: 0; + margin-top: 0; } /*
/ inside cleanup sections */ .n-grid > details > summary, .n-section > summary, .admin-archived-links > summary { - cursor: pointer; - font-weight: 600; - font-size: var(--step--1); - color: var(--text-primary); - padding: var(--space-xs); - list-style: none; - font-family: var(--font-body); - display: flex; - align-items: center; - gap: var(--space-2xs); + cursor: pointer; + font-weight: 600; + font-size: var(--step--1); + color: var(--text-primary); + padding: var(--space-xs); + list-style: none; + font-family: var(--font-body); + display: flex; + align-items: center; + gap: var(--space-2xs); } .n-grid > details > summary::-webkit-details-marker, .n-section > summary::-webkit-details-marker, .admin-archived-links > summary::-webkit-details-marker { - display: none; + display: none; } .n-section[open], .n-grid > details[open] { - padding-bottom: 0; + padding-bottom: 0; } .n-grid > details > summary:hover, .n-section > summary:hover { - background: transparent; + background: transparent; } .n-grid > details > summary::before, .n-section > summary::before, .admin-archived-links > summary::before { - content: ""; - display: inline-block; - width: 16px; - height: 16px; - flex-shrink: 0; - background: currentColor; - mask-image: url("/assets/icons/caret-right.svg"); - mask-size: contain; - mask-repeat: no-repeat; - mask-position: center; - transition: transform 0.15s; + content: ""; + display: inline-block; + width: 16px; + height: 16px; + flex-shrink: 0; + background: currentColor; + mask-image: url("/assets/icons/caret-right.svg"); + mask-size: contain; + mask-repeat: no-repeat; + mask-position: center; + transition: transform 0.15s; } .n-grid > details[open] > summary::before, .n-section[open] > summary::before, .admin-archived-links[open] > summary::before { - transform: rotate(90deg); + transform: rotate(90deg); } .n-grid > details > :not(summary), .n-section > :not(summary) { - padding: 0 var(--space-s) var(--space-xs) var(--space-s); + padding: 0 var(--space-s) var(--space-xs) var(--space-s); } /* ── Import results log ─────────────────────────────────────────────── */ .admin-import-log { - list-style: none; - margin: 0; - display: flex; - flex-direction: column; - gap: var(--space-3xs); - max-height: 260px; - overflow-y: auto; - font-size: var(--step--2); - font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; - border: 1px solid var(--border-primary); - border-radius: var(--radius); - padding: var(--space-xs); - background: var(--bg-secondary); + list-style: none; + margin: 0; + display: flex; + flex-direction: column; + gap: var(--space-3xs); + max-height: 260px; + overflow-y: auto; + font-size: var(--step--2); + font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; + border: 1px solid var(--border-primary); + border-radius: var(--radius); + padding: var(--space-xs); + background: var(--bg-secondary); } .admin-import-log__item::before { - margin-right: var(--space-3xs); + margin-right: var(--space-3xs); } .admin-import-log__item--ok::before { - content: "✓"; - color: var(--accent-green); + content: "✓"; + color: var(--accent-green); } .admin-import-log__item--skip::before { - content: "⚠"; - color: var(--warning); + content: "⚠"; + color: var(--warning); } .admin-import-log__item--error::before { - content: "✗"; - color: var(--error); + content: "✗"; + color: var(--error); } /* ── Paramètres page (flat, semantic) ──────────────────────────────────── */ .param-access-table { - width: 100%; - border-collapse: separate; - border-spacing: 0; - margin-bottom: var(--space-m); - font-size: var(--step--1); - border: 1px solid var(--border-primary); - border-radius: var(--radius); - overflow: hidden; + width: 100%; + border-collapse: separate; + border-spacing: 0; + margin-bottom: var(--space-m); + font-size: var(--step--1); + border: 1px solid var(--border-primary); + border-radius: var(--radius); + overflow: hidden; } .param-access-table caption { - caption-side: top; - font-weight: 600; - margin-bottom: var(--space-2xs); - text-align: left; + caption-side: top; + font-weight: 600; + margin-bottom: var(--space-2xs); + text-align: left; } .param-access-table th, .param-access-table td { - padding: var(--space-2xs) var(--space-s); - text-align: left; - border-bottom: 1px solid var(--border-primary); + padding: var(--space-2xs) var(--space-s); + text-align: left; + border-bottom: 1px solid var(--border-primary); } .param-access-table th:not(:last-child), .param-access-table td:not(:last-child) { - border-right: 1px solid var(--border-primary); + border-right: 1px solid var(--border-primary); } .param-access-table thead th { - background: var(--bg-secondary); - font-weight: 600; + background: var(--bg-secondary); + font-weight: 600; } .param-access-table thead tr:first-child th:first-child { - border-top-left-radius: var(--radius); + border-top-left-radius: var(--radius); } .param-access-table thead tr:first-child th:last-child { - border-top-right-radius: var(--radius); + border-top-right-radius: var(--radius); } .param-access-table tbody tr:last-child td:first-child { - border-bottom-left-radius: var(--radius); + border-bottom-left-radius: var(--radius); } .param-access-table tbody tr:last-child td:last-child { - border-bottom-right-radius: var(--radius); + border-bottom-right-radius: var(--radius); } .param-access-table tbody tr:last-child td { - border-bottom: none; + border-bottom: none; } .param-access-yes { - color: var(--accent-green); + color: var(--accent-green); } .param-access-no { - color: var(--text-secondary); + color: var(--text-secondary); } .param-maintenance-row { - display: flex; - align-items: center; - justify-content: space-between; - gap: var(--space-s); - padding: var(--space-xs) var(--space-m); - margin-bottom: var(--space-m); - font-size: var(--step--1); - border: 1px solid var(--border-primary); - border-radius: var(--radius); - background: var(--bg-secondary); + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-s); + padding: var(--space-xs) var(--space-m); + margin-bottom: var(--space-m); + font-size: var(--step--1); + border: 1px solid var(--border-primary); + border-radius: var(--radius); + background: var(--bg-secondary); } .param-maintenance-row:has(.btn--warning) { - background: var(--warning-muted-bg); - border-color: var(--warning); + background: var(--warning-muted-bg); + border-color: var(--warning); } .param-maintenance-row p { - margin: 0; + margin: 0; } .param-maintenance-row form { - flex-shrink: 0; + flex-shrink: 0; } .param-form { - display: flex; - flex-direction: column; - gap: var(--space-m); + display: flex; + flex-direction: column; + gap: var(--space-m); } .param-form fieldset { - display: flex; - flex-direction: column; - gap: var(--space-xs); - padding-top: var(--space-s); + display: flex; + flex-direction: column; + gap: var(--space-xs); + padding-top: var(--space-s); } .param-form fieldset > * { - margin-bottom: 0; + margin-bottom: 0; } .param-checkbox { - display: flex; - align-items: flex-start; - gap: var(--space-xs); - cursor: pointer; + display: flex; + align-items: flex-start; + gap: var(--space-xs); + cursor: pointer; } .param-checkbox--disabled { - opacity: 0.6; - cursor: not-allowed; + opacity: 0.6; + cursor: not-allowed; } .param-checkbox input[type="checkbox"] { - margin-top: 2px; + margin-top: 2px; } .param-checkbox--disabled input[type="checkbox"] { - cursor: not-allowed; + cursor: not-allowed; } .param-note { - color: var(--text-secondary); - margin: 0; + color: var(--text-secondary); + margin: 0; } .param-account-status { - display: flex; - flex-direction: column; - gap: var(--space-xs); - margin-bottom: var(--space-m); + display: flex; + flex-direction: column; + gap: var(--space-xs); + margin-bottom: var(--space-m); } .param-account-status > div { - display: flex; - align-items: center; - gap: var(--space-xs); + display: flex; + align-items: center; + gap: var(--space-xs); } .param-account-status dt { - color: var(--text-secondary); - min-width: 200px; + color: var(--text-secondary); + min-width: 200px; } .param-account-status dd { - margin: 0; - display: flex; - align-items: center; - gap: var(--space-xs); + margin: 0; + display: flex; + align-items: center; + gap: var(--space-xs); } .param-account-status code { - font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; - font-size: var(--step--2); - border: 1px solid var(--border-primary); - border-radius: var(--radius); - padding: var(--space-3xs); - color: var(--text-secondary); - background: var(--bg-secondary); + font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; + font-size: var(--step--2); + border: 1px solid var(--border-primary); + border-radius: var(--radius); + padding: var(--space-3xs); + color: var(--text-secondary); + background: var(--bg-secondary); } .param-form > div { - display: grid; - grid-template-columns: 1fr; - gap: var(--space-3xs); - border-top: 1px solid var(--border-primary); - padding: var(--space-xs) 0; + display: grid; + grid-template-columns: 1fr; + gap: var(--space-3xs); + border-top: 1px solid var(--border-primary); + padding: var(--space-xs) 0; } .param-form > div:first-of-type { - border-top: none; - padding-top: 0; + border-top: none; + padding-top: 0; } .param-form input[type="password"] { - width: 100%; - max-width: 380px; + width: 100%; + max-width: 380px; } .param-danger-zone { - border-color: var(--danger-border-muted); - margin-bottom: var(--space-m); + border-color: var(--danger-border-muted); + margin-bottom: var(--space-m); } .param-danger-zone legend { - color: var(--error); - font-size: var(--step-0); + color: var(--error); + font-size: var(--step-0); } .param-danger-zone p { - color: var(--text-secondary); - margin-bottom: var(--space-xs); + color: var(--text-secondary); + margin-bottom: var(--space-xs); } .param-danger-zone form { - margin-top: var(--space-xs); + margin-top: var(--space-xs); } /* ── Export zone (maintenance section) ───────────────────────────────── */ .param-export-zone { - margin-bottom: var(--space-m); + margin-bottom: var(--space-m); } .param-export-zone legend { - font-size: var(--step-0); + font-size: var(--step-0); } .param-export-zone p { - color: var(--text-secondary); - margin-bottom: var(--space-xs); + color: var(--text-secondary); + margin-bottom: var(--space-xs); } /* ── SMTP section ─────────────────────────────────────────────────────── */ .param-smtp-test { - margin-top: var(--space-m); + margin-top: var(--space-m); } .param-smtp-test-row { - display: flex; - align-items: flex-end; - gap: var(--space-s); - flex-wrap: wrap; + display: flex; + align-items: flex-end; + gap: var(--space-s); + flex-wrap: wrap; } .param-smtp-test-row > div { - flex: 1 1 260px; + flex: 1 1 260px; } .param-smtp-test-row label { - font-weight: 400; - margin-bottom: var(--space-2xs); - color: var(--text-secondary); + font-weight: 400; + margin-bottom: var(--space-2xs); + color: var(--text-secondary); } .param-smtp-test-row input[type="email"] { - width: 100%; - padding: var(--space-xs) var(--space-s); + width: 100%; + padding: var(--space-xs) var(--space-s); } .param-smtp-test-row input[type="email"]:focus { - outline: 2px solid var(--accent-primary); - outline-offset: 1px; + outline: 2px solid var(--accent-primary); + outline-offset: 1px; } .param-smtp-test-row > button { - white-space: nowrap; - flex-shrink: 0; + white-space: nowrap; + flex-shrink: 0; } .param-smtp-status { - display: flex; - align-items: center; - gap: var(--space-s); - margin: var(--space-xs) 0 var(--space-s); - color: var(--text-secondary); + display: flex; + align-items: center; + gap: var(--space-s); + margin: var(--space-xs) 0 var(--space-s); + color: var(--text-secondary); } .param-badge-ok { - color: var(--accent-green); - font-weight: 600; + color: var(--accent-green); + font-weight: 600; } .param-badge-warn { - color: var(--warning); - font-weight: 600; + color: var(--warning); + font-weight: 600; } .param-grid { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); - gap: var(--space-s); + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: var(--space-s); } .param-grid label { - display: flex; - flex-direction: column; - gap: var(--space-3xs); - color: var(--text-secondary); + display: flex; + flex-direction: column; + gap: var(--space-3xs); + color: var(--text-secondary); } .param-grid input[type="text"], .param-grid input[type="number"], .param-grid input[type="email"], .param-grid select { - width: 100%; + width: 100%; } /* SMTP field validation error state */ .param-grid input[aria-invalid="true"], .param-grid select[aria-invalid="true"] { - border-color: var(--search-error-border, #c0392b); + border-color: var(--search-error-border, #c0392b); } .param-field-error { - display: block; - font-size: var(--step--2); - color: var(--search-error-border, #c0392b); - margin-top: var(--space-3xs); - line-height: 1.3; + display: block; + font-size: var(--step--2); + color: var(--search-error-border, #c0392b); + margin-top: var(--space-3xs); + line-height: 1.3; } /* ── Settings page sections — legacy aliases (kept for any remaining use) ─ */ .admin-settings-section { - border: 1px solid var(--border-primary); - border-radius: var(--radius); - padding: var(--space-m) var(--space-l); - margin-bottom: var(--space-l); + border: 1px solid var(--border-primary); + border-radius: var(--radius); + padding: var(--space-m) var(--space-l); + margin-bottom: var(--space-l); } .admin-settings-section__title { - font-size: var(--step-0); - font-weight: 600; - letter-spacing: 0.07em; - text-transform: uppercase; - color: var(--text-secondary); - margin: 0 0 var(--space-m); - padding-bottom: var(--space-2xs); - border-bottom: 1px solid var(--border-primary); + font-size: var(--step-0); + font-weight: 600; + letter-spacing: 0.07em; + text-transform: uppercase; + color: var(--text-secondary); + margin: 0 0 var(--space-m); + padding-bottom: var(--space-2xs); + border-bottom: 1px solid var(--border-primary); } .admin-maintenance-status { - display: flex; - align-items: center; - justify-content: space-between; - gap: var(--space-s); - background: var(--bg-secondary); - border: 1px solid var(--border-primary); - border-radius: var(--radius); - padding: var(--space-xs) var(--space-m); - font-size: var(--step--1); + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-s); + background: var(--bg-secondary); + border: 1px solid var(--border-primary); + border-radius: var(--radius); + padding: var(--space-xs) var(--space-m); + font-size: var(--step--1); } .admin-maintenance-status--active { - background: var(--warning-muted-bg); - border-color: var(--warning); + background: var(--warning-muted-bg); + border-color: var(--warning); } .admin-maintenance-status__msg { - margin: 0; + margin: 0; } .admin-maintenance-status form { - display: inline; - flex-shrink: 0; + display: inline; + flex-shrink: 0; } .admin-account-status { - border: 1px solid var(--border-primary); - border-radius: var(--radius); - padding: var(--space-s) var(--space-m); - margin-bottom: var(--space-l); - display: flex; - flex-direction: column; - gap: var(--space-xs); + border: 1px solid var(--border-primary); + border-radius: var(--radius); + padding: var(--space-s) var(--space-m); + margin-bottom: var(--space-l); + display: flex; + flex-direction: column; + gap: var(--space-xs); } .admin-account-status__row { - display: flex; - align-items: center; - gap: var(--space-xs); - font-size: var(--step--1); + display: flex; + align-items: center; + gap: var(--space-xs); + font-size: var(--step--1); } .admin-account-status__label { - color: var(--text-secondary); - min-width: 220px; + color: var(--text-secondary); + min-width: 220px; } .admin-account-status__code { - font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; - font-size: var(--step--2); - border: 1px solid var(--border-primary); - border-radius: var(--radius); - padding: var(--space-3xs) var(--space-3xs); - color: var(--text-secondary); - background: var(--bg-secondary); + font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; + font-size: var(--step--2); + border: 1px solid var(--border-primary); + border-radius: var(--radius); + padding: var(--space-3xs) var(--space-3xs); + color: var(--text-secondary); + background: var(--bg-secondary); } .admin-account-status__note { - font-size: var(--step--1); - color: var(--text-secondary); - margin: 0; + font-size: var(--step--1); + color: var(--text-secondary); + margin: 0; } .admin-danger-zone { - border: 1px solid var(--danger-border-muted); - border-radius: var(--radius); - padding: var(--space-m) var(--space-m); - display: flex; - align-items: center; - gap: var(--space-m); - flex-wrap: wrap; + border: 1px solid var(--danger-border-muted); + border-radius: var(--radius); + padding: var(--space-m) var(--space-m); + display: flex; + align-items: center; + gap: var(--space-m); + flex-wrap: wrap; } .admin-danger-zone__description { - flex: 1; - font-size: var(--step--1); + flex: 1; + font-size: var(--step--1); } .admin-settings-toggles { - display: flex; - flex-direction: column; - gap: var(--space-xs); - margin-bottom: var(--space-m); + display: flex; + flex-direction: column; + gap: var(--space-xs); + margin-bottom: var(--space-m); } .admin-toggle-row { - display: flex; - align-items: center; - justify-content: space-between; - gap: var(--space-m); - background: var(--bg-secondary); - border: 1px solid var(--border-primary); - border-radius: var(--radius); - padding: var(--space-xs) var(--space-m); - cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-m); + background: var(--bg-secondary); + border: 1px solid var(--border-primary); + border-radius: var(--radius); + padding: var(--space-xs) var(--space-m); + cursor: pointer; } .admin-toggle-row--disabled { - opacity: 0.6; + opacity: 0.6; } .admin-toggle-label { - display: flex; - flex-direction: column; - gap: 2px; + display: flex; + flex-direction: column; + gap: 2px; } .admin-toggle-label strong { - font-size: var(--step-0); + font-size: var(--step-0); } .admin-toggle-label small { - color: var(--text-secondary); - font-size: var(--step--2); + color: var(--text-secondary); + font-size: var(--step--2); } .admin-toggle { - appearance: none; - -webkit-appearance: none; - width: 40px; - height: 22px; - background: var(--border-primary); - border-radius: 11px; - position: relative; - cursor: pointer; - flex-shrink: 0; - transition: background 0.2s; + appearance: none; + -webkit-appearance: none; + width: 40px; + height: 22px; + background: var(--border-primary); + border-radius: 11px; + position: relative; + cursor: pointer; + flex-shrink: 0; + transition: background 0.2s; } .admin-toggle::after { - content: ""; - position: absolute; - top: 3px; - left: 3px; - width: 16px; - height: 16px; - border-radius: 50%; - background: #fff; - transition: transform 0.2s; + content: ""; + position: absolute; + top: 3px; + left: 3px; + width: 16px; + height: 16px; + border-radius: 50%; + background: #fff; + transition: transform 0.2s; } .admin-toggle:checked { - background: var(--accent-primary); + background: var(--accent-primary); } .admin-toggle:checked::after { - transform: translateX(18px); + transform: translateX(18px); } /* ── Cancel link ────────────────────────────────────────────────────────── */ .admin-cancel-link { - font-size: var(--step--1); - color: var(--text-secondary); - text-decoration: none; - font-weight: 400; + font-size: var(--step--1); + color: var(--text-secondary); + text-decoration: none; + font-weight: 400; } .admin-cancel-link:hover { - color: var(--accent-primary); + color: var(--accent-primary); } /* ── Pagination (admin list) ─────────────────────────────────────────────── */ .admin-body .pagination-wrap { - display: flex; - justify-content: center; - align-items: center; - gap: var(--space-2xs); - padding: var(--space-m) 0 var(--space-2xs); + display: flex; + justify-content: center; + align-items: center; + gap: var(--space-2xs); + padding: var(--space-m) 0 var(--space-2xs); } .admin-body .pagination-wrap ul { - display: flex; - gap: var(--space-3xs); - list-style: none; - margin: 0; - padding: 0; + display: flex; + gap: var(--space-3xs); + list-style: none; + margin: 0; + padding: 0; } .admin-body .pagination-btn { - display: inline-flex; - align-items: center; - justify-content: center; - min-width: 2.75rem; - min-height: 2.75rem; - padding: 0 var(--space-2xs); - border: 1px solid var(--border-secondary); - border-radius: var(--radius); - color: var(--text-primary); - font-size: var(--step--1); - font-weight: 400; - text-decoration: none; - transition: - border-color 0.15s, - color 0.15s; + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 2.75rem; + min-height: 2.75rem; + padding: 0 var(--space-2xs); + border: 1px solid var(--border-secondary); + border-radius: var(--radius); + color: var(--text-primary); + font-size: var(--step--1); + font-weight: 400; + text-decoration: none; + transition: + border-color 0.15s, + color 0.15s; } .admin-body .pagination-btn:hover:not(.disabled) { - border-color: var(--accent-primary); - color: var(--accent-primary); + border-color: var(--accent-primary); + color: var(--accent-primary); } .admin-body .pagination-btn.disabled { - opacity: 0.3; - cursor: not-allowed; - pointer-events: none; + opacity: 0.3; + cursor: not-allowed; + pointer-events: none; } .admin-body .pagination-info { - font-size: var(--step--1); - color: var(--text-secondary); - padding: 0 var(--space-2xs); + font-size: var(--step--1); + color: var(--text-secondary); + padding: 0 var(--space-2xs); } .admin-body #editor { - height: 50vh; - border: 1px solid var(--border-primary); + height: 50vh; + border: 1px solid var(--border-primary); } /* ── Settings: formulaire toggles ──────────────────────────────────────────── */ .admin-settings-toggles { - display: flex; - flex-direction: column; - gap: var(--space-xs); - margin-bottom: var(--space-m); + display: flex; + flex-direction: column; + gap: var(--space-xs); + margin-bottom: var(--space-m); } .admin-toggle-row { - display: flex; - align-items: center; - justify-content: space-between; - gap: var(--space-m); - background: var(--bg-secondary); - border: 1px solid var(--border-primary); - border-radius: var(--radius); - padding: var(--space-xs) var(--space-m); - cursor: pointer; + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--space-m); + background: var(--bg-secondary); + border: 1px solid var(--border-primary); + border-radius: var(--radius); + padding: var(--space-xs) var(--space-m); + cursor: pointer; } .admin-toggle-row--disabled { - opacity: 0.6; + opacity: 0.6; } .admin-toggle-label { - display: flex; - flex-direction: column; - gap: 2px; + display: flex; + flex-direction: column; + gap: 2px; } .admin-toggle-label strong { - font-size: var(--step-0); + font-size: var(--step-0); } .admin-toggle-label small { - color: var(--text-secondary); - font-size: var(--step--2); + color: var(--text-secondary); + font-size: var(--step--2); } /* Native checkbox styled as toggle pill */ .admin-toggle { - appearance: none; - -webkit-appearance: none; - width: 40px; - height: 22px; - background: var(--border-primary); - border-radius: 11px; - position: relative; - cursor: pointer; - flex-shrink: 0; - transition: background 0.2s; + appearance: none; + -webkit-appearance: none; + width: 40px; + height: 22px; + background: var(--border-primary); + border-radius: 11px; + position: relative; + cursor: pointer; + flex-shrink: 0; + transition: background 0.2s; } .admin-toggle::after { - content: ""; - position: absolute; - top: 3px; - left: 3px; - width: 16px; - height: 16px; - border-radius: 50%; - background: #fff; - transition: transform 0.2s; + content: ""; + position: absolute; + top: 3px; + left: 3px; + width: 16px; + height: 16px; + border-radius: 50%; + background: #fff; + transition: transform 0.2s; } .admin-toggle:checked { - background: var(--accent-primary); + background: var(--accent-primary); } .admin-toggle:checked::after { - transform: translateX(18px); + transform: translateX(18px); } /* ── Form group, student mode, thanks page → see form-base.css ──────────── */ @@ -1857,8 +1861,8 @@ th.admin-ap-col { /* ── Utility ─────────────────────────────────────────────────────────────── */ .muted { - color: var(--text-secondary); - font-style: italic; + color: var(--text-secondary); + font-style: italic; } /* ═══════════════════════════════════════════════════════════════════════════ @@ -1866,641 +1870,641 @@ th.admin-ap-col { ═══════════════════════════════════════════════════════════════════════════ */ .fhb-hint { - color: var(--text-secondary); - font-size: var(--step--1); - margin-bottom: var(--space-m); + color: var(--text-secondary); + font-size: var(--step--1); + margin-bottom: var(--space-m); } /* ── Structure container ───────────────────────────────────────────────────── */ .fhb-structure { - display: grid; - grid-template-columns: 1fr; - gap: var(--space-xs); - max-width: 100%; - margin-top: var(--space-m); + display: grid; + grid-template-columns: 1fr; + gap: var(--space-xs); + max-width: 100%; + margin-top: var(--space-m); } /* ── Fieldset cards (static reference) ─────────────────────────────────────── */ .fhb-fieldset-card { - border: 1px solid var(--border-primary); - border-radius: var(--radius); - padding: var(--space-xs) var(--space-s); - background: var(--bg-secondary); + border: 1px solid var(--border-primary); + border-radius: var(--radius); + padding: var(--space-xs) var(--space-s); + background: var(--bg-secondary); } .fhb-fieldset-card-legend { - font-size: var(--step-0); - font-weight: 600; - color: var(--text-primary); - margin-bottom: var(--space-3xs); - padding-bottom: var(--space-3xs); - border-bottom: 1px solid var(--border-primary); + font-size: var(--step-0); + font-weight: 600; + color: var(--text-primary); + margin-bottom: var(--space-3xs); + padding-bottom: var(--space-3xs); + border-bottom: 1px solid var(--border-primary); } .fhb-fieldset-card-inputs { - margin: 0; - padding: 0 0 0 var(--space-s); - list-style: none; - display: flex; - flex-wrap: wrap; - gap: var(--space-3xs) var(--space-m); + margin: 0; + padding: 0 0 0 var(--space-s); + list-style: none; + display: flex; + flex-wrap: wrap; + gap: var(--space-3xs) var(--space-m); } .fhb-fieldset-card-inputs li { - font-size: var(--step--2); - color: var(--text-secondary); - line-height: 1.6; + font-size: var(--step--2); + color: var(--text-secondary); + line-height: 1.6; } .fhb-fieldset-card-inputs li::before { - content: "· "; - color: var(--text-tertiary); + content: "· "; + color: var(--text-tertiary); } /* ── Help block wrapper ────────────────────────────────────────────────────── */ .fhb-block-wrapper { - /* container for the fhb-inline, one per help block */ + /* container for the fhb-inline, one per help block */ } /* ── Inline help block (collapsed state) ───────────────────────────────────── */ .fhb-inline { - display: grid; - grid-template-columns: 1fr auto; - gap: var(--space-s); - align-items: center; - border: 1px solid var(--border-primary); - border-left: 4px solid var(--accent-primary); - border-radius: var(--radius); - padding: var(--space-xs) var(--space-s); - background: var(--bg-primary); - transition: opacity 0.15s; + display: grid; + grid-template-columns: 1fr auto; + gap: var(--space-s); + align-items: center; + border: 1px solid var(--border-primary); + border-left: 4px solid var(--accent-primary); + border-radius: var(--radius); + padding: var(--space-xs) var(--space-s); + background: var(--bg-primary); + transition: opacity 0.15s; } .fhb-inline:hover { - opacity: 0.85; + opacity: 0.85; } /* Disabled state — one line only, content hidden */ .fhb-inline--disabled { - border-left-color: var(--text-tertiary); - opacity: 0.55; + border-left-color: var(--text-tertiary); + opacity: 0.55; } .fhb-inline--disabled:hover { - opacity: 0.75; + opacity: 0.75; } .fhb-inline--disabled .fhb-md-preview, .fhb-inline--disabled .fhb-inline-empty { - display: none; + display: none; } /* Editing state */ .fhb-inline--editing { - display: grid; - grid-template-columns: 1fr; - grid-template-rows: auto 1fr auto; - border-color: var(--accent-primary); - box-shadow: 0 4px 16px rgba(149, 87, 181, 0.15); - padding: var(--space-s); - min-height: 50vh; + display: grid; + grid-template-columns: 1fr; + grid-template-rows: auto 1fr auto; + border-color: var(--accent-primary); + box-shadow: 0 4px 16px rgba(149, 87, 181, 0.15); + padding: var(--space-s); + min-height: 50vh; } .fhb-inline--editing .fhb-inline-form { - display: grid; - grid-template-columns: 1fr; - grid-template-rows: auto auto 1fr auto; - height: 100%; + display: grid; + grid-template-columns: 1fr; + grid-template-rows: auto auto 1fr auto; + height: 100%; } /* ── Left side: name + content ─────────────────────────────────────────────── */ .fhb-inline-body { - min-width: 0; + min-width: 0; } .fhb-inline-name { - font-size: var(--step--1); - font-weight: 600; - color: var(--accent-secondary); - margin-bottom: var(--space-3xs); + font-size: var(--step--1); + font-weight: 600; + color: var(--accent-secondary); + margin-bottom: var(--space-3xs); } /* ── Small rendered Markdown preview ──────────────────────────────────────── */ .fhb-md-preview { - font-size: var(--step--2); - color: var(--text-secondary); - line-height: 1.45; - max-height: 6em; - overflow: hidden; + font-size: var(--step--2); + color: var(--text-secondary); + line-height: 1.45; + max-height: 6em; + overflow: hidden; } .fhb-md-preview p { - margin: 0; + margin: 0; } .fhb-md-preview p + p { - margin-top: var(--space-3xs); + margin-top: var(--space-3xs); } .fhb-md-preview ul, .fhb-md-preview ol { - margin: var(--space-3xs) 0; - padding-left: var(--space-s); + margin: var(--space-3xs) 0; + padding-left: var(--space-s); } .fhb-md-preview li { - margin-bottom: 0; + margin-bottom: 0; } .fhb-md-preview strong { - font-weight: 600; + font-weight: 600; } .fhb-md-preview em { - font-style: italic; + font-style: italic; } .fhb-md-preview code { - font-size: 0.9em; - background: var(--bg-secondary); - padding: 0 var(--space-4xs); - border-radius: 3px; + font-size: 0.9em; + background: var(--bg-secondary); + padding: 0 var(--space-4xs); + border-radius: 3px; } .fhb-inline-empty { - font-size: var(--step--2); - color: var(--text-tertiary); - font-style: italic; + font-size: var(--step--2); + color: var(--text-tertiary); + font-style: italic; } /* ── Right side: edit button + live dot ───────────────────────────────────── */ .fhb-inline-actions { - display: flex; - flex-direction: column; - align-items: flex-end; - gap: var(--space-2xs); - flex-shrink: 0; + display: flex; + flex-direction: column; + align-items: flex-end; + gap: var(--space-2xs); + flex-shrink: 0; } .fhb-toggle-form { - margin: 0; - line-height: 0; + margin: 0; + line-height: 0; } /* Live dot — green when on, red when off */ .fhb-dot { - display: block; - width: 18px; - height: 18px; - border-radius: 50%; - border: none; - cursor: pointer; - padding: 0; - transition: opacity 0.15s; + display: block; + width: 18px; + height: 18px; + border-radius: 50%; + border: none; + cursor: pointer; + padding: 0; + transition: opacity 0.15s; } .fhb-dot:hover { - opacity: 0.7; + opacity: 0.7; } .fhb-dot--on { - background: #2d6a4f; + background: #2d6a4f; } .fhb-dot--off { - background: #c0392b; + background: #c0392b; } /* ── Editor form ──────────────────────────────────────────────────────────── */ .fhb-edit-name-row { - margin-bottom: var(--space-xs); + margin-bottom: var(--space-xs); } .fhb-edit-label { - display: block; - font-size: var(--step--2); - font-weight: 400; - color: var(--text-primary); - margin-bottom: var(--space-3xs); + display: block; + font-size: var(--step--2); + font-weight: 400; + color: var(--text-primary); + margin-bottom: var(--space-3xs); } .fhb-name-input { - width: 100%; - max-width: 400px; + width: 100%; + max-width: 400px; } .fhb-name-input:focus { - outline: none; - border-color: var(--accent-primary); - box-shadow: 0 0 0 2px var(--accent-muted); + outline: none; + border-color: var(--accent-primary); + box-shadow: 0 0 0 2px var(--accent-muted); } .fhb-overtype-editor .--type-container { - border-radius: var(--radius); + border-radius: var(--radius); } .fhb-edit-buttons { - display: grid; - grid-auto-flow: column; - grid-auto-columns: max-content; - gap: var(--space-xs); - margin-top: var(--space-xs); + display: grid; + grid-auto-flow: column; + grid-auto-columns: max-content; + gap: var(--space-xs); + margin-top: var(--space-xs); } .fhb-inline-form { - margin-top: var(--space-xs); + margin-top: var(--space-xs); } /* ── Mobile: admin unavailable ─────────────────────────────────────────── */ .admin-mobile-block { - display: none; + display: none; } @media screen and (max-width: 640px) { - .admin-body header { - display: none; - } + .admin-body header { + display: none; + } - .admin-body main { - display: none; - } + .admin-body main { + display: none; + } - .admin-mobile-block { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100vh; - padding: var(--space-l); - text-align: center; - color: var(--text-secondary); - } + .admin-mobile-block { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100vh; + padding: var(--space-l); + text-align: center; + color: var(--text-secondary); + } - .admin-mobile-block svg { - width: 48px; - height: 48px; - fill: var(--text-tertiary); - margin-bottom: var(--space-m); - } + .admin-mobile-block svg { + width: 48px; + height: 48px; + fill: var(--text-tertiary); + margin-bottom: var(--space-m); + } - .admin-mobile-block h2 { - font-size: var(--step-0); - font-weight: 600; - color: var(--text-primary); - margin: 0 0 var(--space-xs); - } + .admin-mobile-block h2 { + font-size: var(--step-0); + font-weight: 600; + color: var(--text-primary); + margin: 0 0 var(--space-xs); + } - .admin-mobile-block p { - font-size: var(--step--1); - margin: 0; - } + .admin-mobile-block p { + font-size: var(--step--1); + margin: 0; + } } /* ── Active search loading indicator ───────────────────────────────────── */ .admin-search-indicator { - display: block; - height: 2px; - background: var(--accent-primary); - opacity: 0; - transition: opacity 0.15s; - pointer-events: none; - margin-top: var(--space-2xs); + display: block; + height: 2px; + background: var(--accent-primary); + opacity: 0; + transition: opacity 0.15s; + pointer-events: none; + margin-top: var(--space-2xs); } .admin-search-indicator.htmx-request { - opacity: 1; - animation: admin-search-progress 1.2s ease-in-out infinite; + opacity: 1; + animation: admin-search-progress 1.2s ease-in-out infinite; } @keyframes admin-search-progress { - 0% { - transform: scaleX(0); - transform-origin: left; - } - 50% { - transform: scaleX(1); - transform-origin: left; - } - 50.01% { - transform: scaleX(1); - transform-origin: right; - } - 100% { - transform: scaleX(0); - transform-origin: right; - } + 0% { + transform: scaleX(0); + transform-origin: left; + } + 50% { + transform: scaleX(1); + transform-origin: left; + } + 50.01% { + transform: scaleX(1); + transform-origin: right; + } + 100% { + transform: scaleX(0); + transform-origin: right; + } } /* ── Sidebar TOC (matches public .page-content grid layout) ────────────── */ .admin-main--toc { - display: grid; - grid-template-columns: 180px 1fr; - gap: var(--space-2xl); - align-items: start; - padding: var(--space-xl) var(--space-m) var(--space-2xl); + display: grid; + grid-template-columns: 180px 1fr; + gap: var(--space-2xl); + align-items: start; + padding: var(--space-xl) var(--space-m) var(--space-2xl); } /* Desktop: article in second column */ @media (min-width: 768px) { - .admin-main--toc > article { - grid-column: 2; - min-width: 0; - max-width: 100%; - } + .admin-main--toc > article { + grid-column: 2; + min-width: 0; + max-width: 100%; + } } /* Mobile: single column */ @media (max-width: 767px) { - .admin-main--toc { - grid-template-columns: 1fr; - gap: var(--space-l); - padding: var(--space-m) var(--space-s) var(--space-xl); - } + .admin-main--toc { + grid-template-columns: 1fr; + gap: var(--space-l); + padding: var(--space-m) var(--space-s) var(--space-xl); + } - .admin-main--toc > article { - grid-column: 1; - } + .admin-main--toc > article { + grid-column: 1; + } } /* Align first child of article with TOC heading (same as public) */ .admin-main--toc > article > :first-child { - margin-top: 2.2rem; + margin-top: 2.2rem; } .admin-main--toc > article > section { - margin-bottom: var(--space-xl); - border: none; - border-radius: 0; - padding: 0; + margin-bottom: var(--space-xl); + border: none; + border-radius: 0; + padding: 0; } .admin-main--toc > article > section > fieldset { - margin-bottom: var(--space-m); + margin-bottom: var(--space-m); } /* Admin TOC: same
as public pages, positioned sticky */ #admin-toc .toc-list { - padding-top: var(--space-2xs); + padding-top: var(--space-2xs); } #admin-toc .toc-list a { - font-size: var(--step--1); + font-size: var(--step--1); } /* ── Lazy-load transition ─────────────────────────────────────────────────── */ .htmx-settling img { - opacity: 0; + opacity: 0; } .htmx-indicator img { - transition: opacity 300ms ease-in; + transition: opacity 300ms ease-in; } /* ── Récapitulatif sections ───────────────────────────────── */ .admin-main--recap > fieldset { - margin-bottom: var(--space-l); + margin-bottom: var(--space-l); } .admin-main--recap > fieldset:last-of-type { - margin-bottom: 0; + margin-bottom: 0; } .recap-synopsis, .recap-long-text { - max-width: 70ch; - line-height: 1.6; + max-width: 70ch; + line-height: 1.6; } /* Two-column definition lists */ .recap-dl { - display: grid; - grid-template-columns: auto 1fr; - gap: var(--space-2xs) var(--space-m); - margin: 0; + display: grid; + grid-template-columns: auto 1fr; + gap: var(--space-2xs) var(--space-m); + margin: 0; } .recap-dl dt { - font-weight: 600; - color: var(--text-secondary); - font-size: var(--step--1); - white-space: nowrap; + font-weight: 600; + color: var(--text-secondary); + font-size: var(--step--1); + white-space: nowrap; } .recap-dl dd { - margin: 0 0 var(--space-xs) 0; - color: var(--text-primary); - font-size: var(--step--1); + margin: 0 0 var(--space-xs) 0; + color: var(--text-primary); + font-size: var(--step--1); } .recap-dl dd:last-of-type { - margin-bottom: 0; + margin-bottom: 0; } /* ── Apropos contacts grid ──────────────────────────────────────────────── */ .apropos-entry { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: var(--space-s); - margin-bottom: var(--space-xs); + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: var(--space-s); + margin-bottom: var(--space-xs); } .apropos-entry > div { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } .apropos-entry label { - font-size: var(--step--1); - margin-bottom: var(--space-3xs); + font-size: var(--step--1); + margin-bottom: var(--space-3xs); } .apropos-entry input { - width: 100%; - box-sizing: border-box; + width: 100%; + box-sizing: border-box; } /* ── Sidebar links editor ──────────────────────────────────────────────── */ .sidebar-link-row { - display: flex; - align-items: flex-start; - gap: var(--space-xs); - margin-bottom: var(--space-s); + display: flex; + align-items: flex-start; + gap: var(--space-xs); + margin-bottom: var(--space-s); } .sidebar-link-fields { - display: grid; - grid-template-columns: 1fr 2fr; - gap: var(--space-s); - flex: 1; + display: grid; + grid-template-columns: 1fr 2fr; + gap: var(--space-s); + flex: 1; } .sidebar-link-fields > div { - display: flex; - flex-direction: column; + display: flex; + flex-direction: column; } .sidebar-link-fields label { - font-size: var(--step--1); - margin-bottom: var(--space-3xs); + font-size: var(--step--1); + margin-bottom: var(--space-3xs); } .sidebar-link-fields input { - width: 100%; - box-sizing: border-box; + width: 100%; + box-sizing: border-box; } .sidebar-link-row .admin-icon-btn--delete { - margin-top: calc(var(--step--1) + var(--space-3xs) + 0.3em); - flex-shrink: 0; + margin-top: calc(var(--step--1) + var(--space-3xs) + 0.3em); + flex-shrink: 0; } /* ── Auto-save status indicator ────────────────────────────────────────── */ .autosave-status { - font-size: var(--step--2); - min-height: 1.5em; - margin-top: var(--space-2xs); - color: var(--text-tertiary); - transition: color 0.2s; + font-size: var(--step--2); + min-height: 1.5em; + margin-top: var(--space-2xs); + color: var(--text-tertiary); + transition: color 0.2s; } .autosave-status--saving { - color: var(--accent-yellow); - font-style: italic; + color: var(--accent-yellow); + font-style: italic; } .autosave-status--saved { - color: var(--accent-green); + color: var(--accent-green); } .autosave-status--error { - color: var(--error); - font-weight: 500; + color: var(--error); + font-weight: 500; } /* ── Markdown Cheatsheet Dialog ──────────────────────────────────────── */ .md-cheatsheet-dialog { - border: 1px solid var(--border); - border-radius: var(--radius-m, 8px); - padding: 0 0 var(--space-m); - max-width: 640px; - width: 90vw; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18); + border: 1px solid var(--border); + border-radius: var(--radius-m, 8px); + padding: 0 0 var(--space-m); + max-width: 640px; + width: 90vw; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18); } .md-cheatsheet-dialog::backdrop { - background: rgba(0, 0, 0, 0.35); + background: rgba(0, 0, 0, 0.35); } .md-cheatsheet-header { - display: flex; - justify-content: space-between; - align-items: center; - padding: var(--space-s) var(--space-m); - border-bottom: 1px solid var(--border); + display: flex; + justify-content: space-between; + align-items: center; + padding: var(--space-s) var(--space-m); + border-bottom: 1px solid var(--border); } .md-cheatsheet-header h2 { - margin: 0; - font-size: var(--step-0); + margin: 0; + font-size: var(--step-0); } .md-cheatsheet-table { - width: 100%; - border-collapse: collapse; - font-size: var(--step--1); + width: 100%; + border-collapse: collapse; + font-size: var(--step--1); } .md-cheatsheet-table th { - text-align: left; - padding: var(--space-2xs) var(--space-s); - background: var(--surface2); - font-weight: 600; - border-bottom: 2px solid var(--border); + text-align: left; + padding: var(--space-2xs) var(--space-s); + background: var(--surface2); + font-weight: 600; + border-bottom: 2px solid var(--border); } .md-cheatsheet-table td { - padding: var(--space-2xs) var(--space-s); - border-bottom: 1px solid var(--border); - vertical-align: top; + padding: var(--space-2xs) var(--space-s); + border-bottom: 1px solid var(--border); + vertical-align: top; } .md-cheatsheet-syntax { - font-family: var(--font-mono, monospace); - white-space: nowrap; + font-family: var(--font-mono, monospace); + white-space: nowrap; } .md-cheatsheet-syntax code { - background: var(--surface2); - padding: 0.1em 0.35em; - border-radius: 3px; - font-size: inherit; + background: var(--surface2); + padding: 0.1em 0.35em; + border-radius: 3px; + font-size: inherit; } .md-cheatsheet-render { - min-width: 140px; + min-width: 140px; } .md-cheatsheet-render h1, .md-cheatsheet-render h2, .md-cheatsheet-render h3 { - margin: 0; - line-height: 1.3; + margin: 0; + line-height: 1.3; } .md-cheatsheet-render h1 { - font-size: var(--step-2); + font-size: var(--step-2); } .md-cheatsheet-render h2 { - font-size: var(--step-1); + font-size: var(--step-1); } .md-cheatsheet-render h3 { - font-size: var(--step-0); + font-size: var(--step-0); } .md-cheatsheet-render blockquote { - margin: 0; - padding-left: var(--space-2xs); - border-left: 3px solid var(--border); - color: var(--text-secondary); + margin: 0; + padding-left: var(--space-2xs); + border-left: 3px solid var(--border); + color: var(--text-secondary); } .md-cheatsheet-render ul, .md-cheatsheet-render ol { - margin: 0; - padding-left: var(--space-m); + margin: 0; + padding-left: var(--space-m); } .md-cheatsheet-render hr { - margin: var(--space-3xs) 0; - border: 0; - border-top: 1px solid var(--border); + margin: var(--space-3xs) 0; + border: 0; + border-top: 1px solid var(--border); } .md-cheatsheet-link { - color: var(--accent-blue, var(--link)); + color: var(--accent-blue, var(--link)); } .md-cheatsheet-img { - opacity: 0.7; + opacity: 0.7; } .md-cheatsheet-note { - color: var(--text-tertiary); - font-size: var(--step--2); + color: var(--text-tertiary); + font-size: var(--step--2); } .md-cheatsheet-separator td { - padding: var(--space-3xs) 0; - border: 0; + padding: var(--space-3xs) 0; + border: 0; } diff --git a/app/public/assets/css/base.css b/app/public/assets/css/base.css index b0bb7ca..f4867d1 100644 --- a/app/public/assets/css/base.css +++ b/app/public/assets/css/base.css @@ -7,83 +7,83 @@ /* Full-height flex layout: header → main → (optional footer) */ html, body { - height: 100%; - overflow: hidden; + height: 100%; + overflow: hidden; } /* ── Discreet scrollbars ─────────────────────────────────────────── */ /* WebKit browsers */ ::-webkit-scrollbar { - width: 5px; - height: 5px; + width: 5px; + height: 5px; } ::-webkit-scrollbar-track { - background: transparent; + background: transparent; } ::-webkit-scrollbar-thumb { - background: var(--text-tertiary); - border-radius: 3px; + background: var(--text-tertiary); + border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { - background: var(--text-secondary); + background: var(--text-secondary); } /* Firefox */ * { - scrollbar-width: thin; - scrollbar-color: var(--text-tertiary) transparent; + scrollbar-width: thin; + scrollbar-color: var(--text-tertiary) transparent; } body { - font-family: var(--font-body); - font-weight: 300; - color: var(--text-primary); - background: linear-gradient( - 180deg, - rgba(0, 0, 0, 0) 92%, - rgba(149, 87, 181, 1) 100% - ); - display: flex; - flex-direction: column; + font-family: var(--font-body); + font-weight: 300; + color: var(--text-primary); + background: linear-gradient( + 180deg, + rgba(0, 0, 0, 0) 85%, + rgba(149, 87, 181, 0.8) 100% + ); + display: flex; + flex-direction: column; } main { - flex: 1; - min-height: 0; - overflow-wrap: anywhere; + flex: 1; + min-height: 0; + overflow-wrap: anywhere; } main * { - overflow-wrap: anywhere; - word-break: break-word; + overflow-wrap: anywhere; + word-break: break-word; } /* Global heading scale — used by admin + public pages */ h1 { - font-size: var(--step-4); + font-size: var(--step-4); } h2 { - font-size: var(--step-3); + font-size: var(--step-3); } h3 { - font-size: var(--step-2); + font-size: var(--step-2); } h4 { - font-size: var(--step-1); + font-size: var(--step-1); } h5 { - font-size: var(--step--1); + font-size: var(--step--1); } h6 { - font-size: var(--step--2); + font-size: var(--step--2); } :where(h1, h2, h3, h4, h5, h6) { - font-family: var(--font-display); - font-weight: 400; - margin: 0 0 var(--space-m) 0; - line-height: 1.15; + font-family: var(--font-display); + font-weight: 400; + margin: 0 0 var(--space-m) 0; + line-height: 1.15; } diff --git a/app/public/assets/css/tfe.css b/app/public/assets/css/tfe.css index bf81294..8cebbaf 100644 --- a/app/public/assets/css/tfe.css +++ b/app/public/assets/css/tfe.css @@ -4,341 +4,313 @@ ============================================================ */ .tfe-main { - flex: 1; - min-height: 0; - overflow: hidden; - padding: 0 var(--space-m) 0 var(--space-m); -} - -/* Stacked article layout — fills main height */ -.tfe-layout { - display: flex; - flex-direction: column; - gap: var(--space-xl); - width: 100%; - height: 100%; - min-height: 0; -} - -/* Row 1: Author above Title (kept for backward compat, no longer used) */ -.tfe-header-row { - display: flex; - flex-direction: column; - gap: var(--space-3xs); + flex: 1; + min-height: 0; + overflow: hidden; } /* Two-column layout: left 40vw (info), right fills remaining (files) */ .tfe-content-row { - display: grid; - grid-template-columns: 40vw 1fr; - gap: var(--space-xl); - flex: 1; - min-height: 0; + display: grid; + grid-template-columns: 49vw 1fr; + /* gap: var(--space-xl); */ + width: 100%; + height: 100%; + min-height: 0; } -.tfe-left-column, + +.tfe-left-column { + display: grid; + overflow-y: auto; + min-width: 0; + padding: var(--space-xl) var(--space-m) var(--space-xl) var(--space-m); +} + .tfe-right-column { - display: flex; - flex-direction: column; - overflow-y: auto; - min-width: 0; - padding-top: var(--space-l); - padding-bottom: var(--space-xl); + display: flex; + flex-direction: column; + overflow-y: auto; + min-width: 0; + padding: var(--space-xl) var(--space-m) var(--space-xl) var(--space-m); } /* Left column: stacks author, title, meta, synopsis — scrolls independently */ .tfe-left-column { - gap: var(--space-m); - /* to space the edge of the text and the scrollbar */ - padding-right: 0.5ch; + gap: var(--space-m); + /* to space the edge of the text and the scrollbar */ + padding-right: 0.5ch; } -/* Files container inside right column */ +/* Files container inside right column — flex kept for PDF expand-to-fill behavior */ .tfe-files { - display: flex; - flex-direction: column; - gap: var(--space-m); - flex: 1; - min-height: 0; + display: grid; + gap: var(--space-m); +} + +.tfe-files:has(.pdf-expanded) { + height: 100%; } .tfe-file-item { - width: 100%; - min-width: 0; - overflow: hidden; - border-radius: var(--radius); + width: 100%; + min-width: 0; + border-radius: var(--radius); +} + +.tfe-file-item:last-of-type { + padding-bottom: 4ch; } .tfe-file-item:has(.pdf-embed-wrapper) { - overflow: visible; + overflow: visible; } .tfe-file-item:has(.pdf-expanded) { - flex: 1; - min-height: 0; - overflow: visible; + min-height: 0; + overflow: visible; } .tfe-file-item:has(.tfe-file-iframe) { - flex: 1; - min-height: 0; - overflow: visible; + min-height: 0; + overflow: visible; } /* When a PDF is expanded, freeze the right column and hide sibling file items so they can't render above the expanded view. Also trim column padding so the PDF fills more vertical space. */ .tfe-right-column:has(.pdf-expanded) { - overflow: hidden; - padding-top: var(--space-xs); - padding-bottom: var(--space-xs); + overflow: hidden; + padding-top: var(--space-xs); + padding-bottom: var(--space-xs); } .tfe-right-column:has(.pdf-expanded) .tfe-file-item:not(:has(.pdf-expanded)) { - display: none; + display: none; } .tfe-file-item img { - width: 100%; - height: auto; - display: block; - border-radius: var(--radius); - user-select: none; - -webkit-user-drag: none; + width: 100%; + height: auto; + display: block; + border-radius: var(--radius); + user-select: none; + -webkit-user-drag: none; } .tfe-file-item embed, .tfe-file-item video { - width: 100%; - max-width: 100%; - display: block; - border: none; + width: 100%; + max-width: 100%; + display: block; + border: none; } .tfe-file-item video { - max-height: 500px; + max-height: 500px; } .tfe-file-item embed, .tfe-file-iframe { - width: 100%; - max-width: 100%; - height: 100%; - min-height: 400px; - display: block; - border: none; + width: 100%; + max-width: 100%; + height: 100%; + min-height: 400px; + display: block; + border: none; } .tfe-website-link { - display: inline-flex; - align-items: center; - gap: var(--space-3xs); - padding: var(--space-2xs) var(--space-xs); - font-size: var(--step--1); - color: var(--accent-primary); - text-decoration: none; - border: 1px solid var(--border); - border-radius: var(--radius); - margin-bottom: var(--space-2xs); + display: inline-grid; + grid-auto-flow: column; + align-items: center; + gap: var(--space-3xs); + padding: var(--space-2xs) var(--space-xs); + font-size: var(--step--1); + color: var(--accent-primary); + text-decoration: none; + border: 1px solid var(--border); + border-radius: var(--radius); + margin-bottom: var(--space-2xs); } .tfe-website-link:hover { - background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-primary)); + background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-primary)); } .tfe-file-item figcaption { - font-size: var(--step--2); - color: var(--text-secondary); - margin: var(--space-3xs) 0 0; - font-style: italic; -} - -/* Synopsis column wrapper (context note + synopsis) */ -.tfe-synopsis-column { - display: flex; - flex-direction: column; - gap: var(--space-xs); + font-size: var(--step--2); + color: var(--text-secondary); + margin: var(--space-3xs) 0 0; + font-style: italic; } /* Contextual note above synopsis */ .tfe-context-note { - font-style: italic; - font-size: var(--step--1); - line-height: 1.6; - color: var(--text-secondary); - margin: 0; - padding: var(--space-xs) var(--space-s); - background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-primary)); - border-radius: var(--radius); -} - -.tfe-synopsis-empty { - /* placeholder to maintain grid column */ + font-style: italic; + font-size: var(--step--1); + line-height: 1.6; + color: var(--text-secondary); + margin: 0; + padding: var(--space-xs) var(--space-s); + background: color-mix(in srgb, var(--accent-primary) 10%, var(--bg-primary)); + border-radius: var(--radius); } /* Author (p) — inline with title */ .tfe-author { - font-family: var(--font-display); - font-size: var(--step-1); - font-weight: 400; - color: var(--text-primary); - margin: 0; - line-height: 1.3; + font-size: var(--step-1); + font-weight: 400; + color: var(--text-primary); + margin: 0; + line-height: 1.3; } /* Title (h1) — inherits global scale from base.css */ .tfe-title { - margin: 0; + margin: 0; + font-size: var(--step-2); } /* Metadata block */ .tfe-meta { - display: flex; - flex-direction: column; - gap: var(--space-3xs); - font-size: var(--step--1); - line-height: 1.4; - margin: 0; + display: grid; + gap: var(--space-3xs); + font-size: var(--step--1); + line-height: 1.4; + margin: 0; } /* Each metadata line */ .tfe-meta-item { - margin: 0; - font-weight: 700; + margin: 0; + font-weight: 700; } .tfe-meta-label { - font-weight: 300; + font-weight: 300; } .tfe-meta-item a { - color: inherit; - font-weight: 700; - text-decoration: none; + color: inherit; + font-weight: 700; + text-decoration: none; } .tfe-meta-item a:hover { - color: var(--accent-primary); + color: var(--accent-primary); } /* Note field: align label to top, value in italics */ .tfe-meta-item.tfe-meta-note { - align-items: start; + align-items: start; } .tfe-note-value { - font-style: italic; + font-style: italic; } /* Synopsis paragraph */ .tfe-synopsis-text { - font-size: var(--step--1); - line-height: 1.7; - color: var(--text-primary); - margin: 0; + font-size: var(--step--1); + line-height: 1.7; + color: var(--text-primary); + margin: 0; } /* Audio player */ .tfe-audio { - width: 100%; - margin: 0; - display: block; + width: 100%; + margin: 0; + display: block; } /* "Not available" and "no files" notices */ .tfe-restricted, .tfe-no-files { - font-size: var(--step--1); - color: var(--text-secondary); - font-style: italic; - padding: var(--space-s) 0; - margin: 0; + font-size: var(--step--1); + color: var(--text-secondary); + font-style: italic; + padding: var(--space-s) 0; + margin: 0; } /* ============================================================ RESTRICTED ACCESS UI ============================================================ */ .tfe-restricted-access { - background: var(--surface); - border: 1px solid var(--border); - border-radius: var(--radius); - padding: var(--space-m); - display: flex; - flex-direction: column; - gap: var(--space-m); + background: var(--surface); + border: 1px solid var(--border); + border-radius: var(--radius); + padding: var(--space-m); + display: grid; + gap: var(--space-m); } .tfe-restricted-message { - font-size: var(--step--1); - color: var(--text-secondary); - line-height: 1.6; - margin: 0; + font-size: var(--step--1); + color: var(--text-secondary); + line-height: 1.6; + margin: 0; } .tfe-restricted-message strong { - color: var(--text-primary); - display: block; - margin-bottom: var(--space-3xs); - font-size: var(--step-0); + color: var(--text-primary); + display: block; + margin-bottom: var(--space-3xs); + font-size: var(--step-0); } .tfe-access-request-form { - display: flex; - flex-direction: column; - gap: var(--space-s); + display: grid; + gap: var(--space-s); } .tfe-access-request-form .form-group { - display: flex; - flex-direction: column; - gap: var(--space-3xs); + display: grid; + gap: var(--space-3xs); } .tfe-access-request-form label { - font-size: var(--step--1); - font-weight: 400; - color: var(--text-primary); + font-size: var(--step--1); + font-weight: 400; + color: var(--text-primary); } .tfe-access-request-form input[type="email"], .tfe-access-request-form textarea { - padding: var(--space-2xs) var(--space-3xs); + padding: var(--space-2xs) var(--space-3xs); } .tfe-btn-request-access { - /* deprecated alias for .btn--primary; kept for backward-compat */ - margin-top: var(--space-3xs); -} - -.tfe-btn-request-access:hover:not(:disabled) { - /* handled by .btn--primary */ + margin-top: var(--space-3xs); } .tfe-btn-request-access:disabled { - opacity: 0.6; - cursor: not-allowed; + opacity: 0.6; + cursor: not-allowed; } .tfe-access-message { - font-size: var(--step--1); - padding: var(--space-2xs); - border-radius: var(--radius); - margin-top: var(--space-3xs); + font-size: var(--step--1); + padding: var(--space-2xs); + border-radius: var(--radius); + margin-top: var(--space-3xs); } .tfe-access-success { - background: #f0fff4; - border: 1px solid #48bb78; - color: #22543d; + background: #f0fff4; + border: 1px solid #48bb78; + color: #22543d; } .tfe-access-error { - background: #fff5f5; - border: 1px solid #fc8181; - color: #742a2a; + background: #fff5f5; + border: 1px solid #fc8181; + color: #742a2a; } .tfe-access-request-form input.input-error { - border-color: #fc8181; - outline-color: #fc8181; + border-color: #fc8181; + outline-color: #fc8181; } /* ============================================================ @@ -346,242 +318,226 @@ ============================================================ */ /*── Base wrapper ───────────────────────────── */ - .pdf-embed-wrapper { - position: relative; - width: 100%; - height: auto; - display: flex; - flex-direction: column; - background: var(--surface); - border: 1px solid var(--border); - border-radius: var(--radius); - transition: height 0.35s ease, border-color 0.35s ease; - outline: none; + position: relative; + width: 100%; + height: auto; + display: grid; + background: var(--surface); + border: 1px solid var(--border); + border-radius: var(--radius); + transition: height 0.35s ease, border-color 0.35s ease; + outline: none; } /* ── Collapsed state: thumbnail tile ────────── */ - .pdf-collapsed { - cursor: pointer; - overflow: hidden; - display: flex; - align-items: center; - justify-content: center; - position: relative; - min-height: 200px; - max-height: 350px; + cursor: pointer; + overflow: hidden; + display: grid; + place-items: center; + min-height: 200px; + max-height: 350px; } .pdf-thumbnail { - display: block; - max-width: 100%; - max-height: 100%; - object-fit: contain; + display: block; + max-width: 100%; + max-height: 100%; + object-fit: contain; } /* ── Overlay veil + enter button ────────────── */ - .pdf-overlay { - position: absolute; - inset: 0; - z-index: 1; - display: flex; - align-items: center; - justify-content: center; - background: rgb(0 0 0 / 0.15); - backdrop-filter: blur(4px) saturate(0.6); - transition: background 0.2s; + position: absolute; + inset: 0; + z-index: 1; + display: grid; + place-items: center; + background: rgb(0 0 0 / 0.15); + backdrop-filter: blur(4px) saturate(0.6); + transition: background 0.2s; } .pdf-overlay:hover { - background: rgb(0 0 0 / 0.08); + background: rgb(0 0 0 / 0.08); } /* Document type pill — top-left of the overlay */ - .pdf-overlay-badge { - position: absolute; - top: var(--space-xs); - left: var(--space-xs); - z-index: 2; - display: inline-block; - padding: 0.15em 0.6em; - font-size: var(--step--2); - font-weight: 500; - line-height: 1.4; - color: color-mix(in srgb, var(--accent-primary) 90%, #000); - background: color-mix(in srgb, var(--accent-primary) 12%, transparent); - border: 1px solid color-mix(in srgb, var(--accent-primary) 25%, transparent); - border-radius: var(--radius); + position: absolute; + top: var(--space-xs); + left: var(--space-xs); + z-index: 2; + display: inline-block; + padding: 0.15em 0.6em; + font-size: var(--step--2); + font-weight: 500; + line-height: 1.4; + color: color-mix(in srgb, var(--accent-primary) 90%, #000); + background: color-mix(in srgb, var(--accent-primary) 12%, transparent); + border: 1px solid color-mix(in srgb, var(--accent-primary) 25%, transparent); + border-radius: var(--radius); } .pdf-enter-btn { - display: inline-flex; - align-items: center; - gap: var(--space-2xs); - padding: var(--space-xs) var(--space-m); - background: var(--accent-primary); - color: #fff; - border: none; - border-radius: var(--radius); - font-size: var(--step-0); - font-weight: 500; - cursor: pointer; - box-shadow: 0 2px 8px rgb(0 0 0 / 0.2); - transition: transform 0.15s, box-shadow 0.15s; + display: inline-grid; + grid-auto-flow: column; + align-items: center; + gap: var(--space-2xs); + padding: var(--space-xs) var(--space-m); + background: var(--accent-primary); + color: #fff; + border: none; + border-radius: var(--radius); + font-size: var(--step-0); + font-weight: 500; + cursor: pointer; + box-shadow: 0 2px 8px rgb(0 0 0 / 0.2); + transition: transform 0.15s, box-shadow 0.15s; } .pdf-enter-btn:hover { - transform: translateY(-1px); - box-shadow: 0 4px 12px rgb(0 0 0 / 0.25); + transform: translateY(-1px); + box-shadow: 0 4px 12px rgb(0 0 0 / 0.25); } /* ── Expanded state: wrapper becomes scroll panel ── */ /* Disable root-level overscroll (rubberbanding) while a PDF is open. */ body.pdf-viewer-open { - overscroll-behavior: none; + overscroll-behavior: none; } .pdf-expanded { - /* Fill the right column from top to bottom (under the header). */ - height: 100%; - min-height: 400px; - overflow-y: auto; - overflow-x: hidden; - overscroll-behavior-y: contain; - border: 2px solid var(--accent-primary); - display: flex; - flex-direction: column; - align-items: center; - background: color-mix(in srgb, var(--accent-secondary) 22%, transparent); + height: 100%; + min-height: 400px; + overflow-y: auto; + overflow-x: hidden; + overscroll-behavior-y: contain; + border: 2px solid var(--accent-primary); + display: grid; + justify-items: center; + background: color-mix(in srgb, var(--accent-secondary) 22%, transparent); } /* ── Toolbar ────────────────────────────────── */ - .pdf-toolbar { - position: sticky; - align-self: stretch; - top: 0; - z-index: 2; - display: flex; - align-items: center; - gap: var(--space-3xs); - padding: var(--space-2xs) var(--space-xs); - background: var(--bg-primary); - border-bottom: 1px solid var(--border); - border-radius: var(--radius); - flex-shrink: 0; - font-size: var(--step--1); - user-select: none; - overscroll-behavior: none; + position: sticky; + justify-self: stretch; + top: 0; + z-index: 2; + display: flex; + align-items: center; + gap: var(--space-3xs); + padding: var(--space-2xs) var(--space-xs); + background: var(--bg-primary); + border-bottom: 1px solid var(--border); + border-radius: var(--radius); + flex-shrink: 0; + font-size: var(--step--1); + user-select: none; + overscroll-behavior: none; } .pdf-toolbar-btn { - display: inline-flex; - align-items: center; - justify-content: center; - width: 2em; - height: 2em; - padding: 0; - border: 1px solid var(--border); - border-radius: var(--radius); - background: var(--surface); - color: var(--text-primary); - cursor: pointer; - font-size: inherit; - line-height: 1; - transition: background 0.15s; + display: inline-grid; + place-items: center; + width: 2em; + height: 2em; + padding: 0; + border: 1px solid var(--border); + border-radius: var(--radius); + background: var(--surface); + color: var(--text-primary); + cursor: pointer; + font-size: inherit; + line-height: 1; + transition: background 0.15s; } .pdf-toolbar-btn:hover { - background: color-mix(in srgb, var(--accent-primary) 15%, var(--surface)); + background: color-mix(in srgb, var(--accent-primary) 15%, var(--surface)); } .pdf-toolbar-close { - margin-right: var(--space-xs); + margin-right: var(--space-xs); } .pdf-toolbar-label { - min-width: 4.5em; - text-align: center; - color: var(--text-secondary); - font-variant-numeric: tabular-nums; + min-width: 4.5em; + text-align: center; + color: var(--text-secondary); + font-variant-numeric: tabular-nums; } .pdf-toolbar-scale { - min-width: 3em; + min-width: 3em; } -/* ── Scroll container ────────────────────────── */ - +/* ── Canvas ─────────────────────────────────── */ .pdf-canvas { - display: block; - width: 100%; - height: auto; - box-shadow: 0 1px 4px rgb(0 0 0 / 0.12); - background: #fff; - flex-shrink: 0; + display: block; + width: 100%; + height: auto; + box-shadow: 0 1px 4px rgb(0 0 0 / 0.12); + background: #fff; + flex-shrink: 0; } .pdf-canvas:first-of-type { - margin-top: var(--space-xs); + margin-top: var(--space-xs); } .pdf-canvas:last-of-type { - margin-bottom: var(--space-xs); + margin-bottom: var(--space-xs); } .pdf-canvas + .pdf-canvas { - margin-top: var(--space-2xs); + margin-top: var(--space-2xs); } -/* Responsive */ +/* ── Responsive ─────────────────────────────── */ @media (max-width: 900px) { - .tfe-main { - overflow-y: auto; - } + .tfe-main { + overflow-y: auto; + } - .tfe-layout { - height: auto; - min-height: auto; - } + .tfe-content-row { + grid-template-columns: 1fr; + height: auto; + } - .tfe-content-row { - grid-template-columns: 1fr; - flex: none; - } + .tfe-left-column, + .tfe-right-column { + overflow-y: visible; + } - .tfe-left-column, - .tfe-right-column { - overflow-y: visible; - } + .tfe-title { + font-size: var(--step-2); + } - .tfe-title { - font-size: var(--step-2); - } + /* PDF expands to full viewport on mobile */ + .pdf-expanded { + position: fixed; + inset: 0; + z-index: 100; + height: auto; + min-height: unset; + background: color-mix(in srgb, var(--accent-secondary) 92%, #000 8%); + } - /* PDF expands to full viewport height on mobile, above everything */ - .pdf-expanded { - position: fixed; - inset: 0; - z-index: 100; - height: auto; - min-height: unset; - background: color-mix(in srgb, var(--accent-secondary) 92%, #000 8%); - } - .tfe-file-iframe { - height: 100dvh; - } + .tfe-file-iframe { + height: 100dvh; + } } @media (max-width: 600px) { - .tfe-main { - padding: var(--space-m) var(--space-s) var(--space-l); - } + .tfe-main { + padding: var(--space-m) var(--space-s) var(--space-l); + } - .tfe-title { - font-size: var(--step-1); - } + .tfe-title { + font-size: var(--step-1); + } } diff --git a/app/templates/admin/index-table.php b/app/templates/admin/index-table.php index 48362d0..3912ffb 100644 --- a/app/templates/admin/index-table.php +++ b/app/templates/admin/index-table.php @@ -50,7 +50,7 @@ $sortArrow = function(string $col) use ($sortCol, $sortDir): string { ID Titre - Auteur(s) + Auteur·ice(s) Année Orientation AP diff --git a/app/templates/public/tfe.php b/app/templates/public/tfe.php index 4f7c226..5fb5478 100644 --- a/app/templates/public/tfe.php +++ b/app/templates/public/tfe.php @@ -1,9 +1,7 @@
-
+
- -
-
+

-
- -

Note Contextuelle :

- + +

Note Contextuelle :

+ - -
- -
- -
- + +
+
+ +
+
@@ -469,8 +465,6 @@
-
-