/* ============================================================ ADMIN SECTION ============================================================ */ /* ── Layout ────────────────────────────────────────────────────────────── */ .admin-body { 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; } .admin-body header nav .nav-right-links { flex-shrink: 0; } .admin-body header nav ul [data-nav-logout] a { opacity: 0.6; display: flex; align-items: center; } .admin-body header nav ul [data-nav-logout] a:hover { opacity: 1; } .admin-body header nav ul [data-nav-logout] a svg { display: block; } /* 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; } .admin-body main { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-s) var(--space-m) var(--space-xl); width: 100%; background: linear-gradient( 180deg, rgba(149, 87, 181, 0.18) 0%, rgba(0, 0, 0, 0) 6% ); } .admin-main--list { padding: 0 !important; } .admin-main--list > form, .admin-main--list > table, .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); } #admin-table-wrap { padding: 0 0 var(--space-2xl); } .admin-body main > table tbody tr:nth-child(even) { background: var(--bg-secondary); } .admin-table-row:hover { background: var(--blue-muted-bg) !important; } .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); } .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); } .admin-back-btn:hover { background: var(--bg-secondary); color: var(--accent-primary); } .admin-back-btn svg { width: 28px; height: 28px; fill: currentColor; } /* ── Form styles → see form-base.css + form-admin.css ───────────────────── */ /* ── Buttons ────────────────────────────────────────────────────────────── */ .admin-form-footer { 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 */ } .admin-btn-secondary { /* deprecated alias for .btn--secondary; kept for backward-compat */ } .admin-btn--sm { /* deprecated alias for .btn--sm; kept for backward-compat */ } .admin-btn--warning { /* deprecated alias for .btn--warning; kept for backward-compat */ } .admin-btn--danger { /* 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; } .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); } .admin-stat--pub .admin-stat__number { color: var(--accent-green); } .admin-stat--pub .admin-stat__number:empty::after, .admin-stat--pub .admin-stat__number[data-empty] { color: var(--text-tertiary); } .admin-stat--pend .admin-stat__number { color: var(--accent-yellow); } .admin-stat--pend .admin-stat__number:empty::after, .admin-stat--pend .admin-stat__number[data-empty] { 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; } .admin-stat__number { 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); } .admin-maintenance-bar--active { background: var(--warning-muted-bg); border-color: var(--warning); color: var(--text-primary); } .admin-maintenance-bar form { 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); } /* Empty-state message below the thesis table */ .admin-empty { 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); } /* ── Filters bar ────────────────────────────────────────────────────────── */ .admin-filters { 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 */ } .admin-filters-reset { /* 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; } .admin-bulk-btns { display: flex; gap: var(--space-2xs); } .admin-stat--inline { 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); } .admin-body main > table th, .admin-body main > table td { padding: var(--space-3xs); } td.admin-ap-col, th.admin-ap-col { white-space: nowrap; } .admin-na { 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; } .admin-sort-link:hover { color: var(--accent-primary); } .admin-body table tr:hover td { 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; } .admin-body table .thesis-subtitle { font-size: var(--step--1); color: var(--text-secondary); font-style: italic; } /* ── Status badges ──────────────────────────────────────────────────────── */ /* ── Status badges — base styles in components/badges.css ─────────── */ /* ── Compact table badges (admin-only override) ──────────────────── */ .admin-body .status-badge { 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; } .admin-icon-btn svg { 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); } .admin-icon-btn--view:hover { 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); } .admin-icon-btn--publish:hover { 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); } .admin-icon-btn--delete:hover { 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); } .admin-icon-btn--key:hover { 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); } .admin-icon-btn--merge:hover { 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; } .admin-actions-col { white-space: nowrap; } /* Legacy table-action size — now just an alias */ .admin-btn-sm { /* deprecated alias for .btn--sm; kept for backward-compat */ } .admin-btn-view { /* deprecated alias for .btn--sm .btn--blue */ } .admin-btn-visit { /* deprecated alias for .btn--sm .btn--green */ } .admin-btn-edit { /* deprecated alias for .btn--sm .btn--yellow */ } .admin-btn-publish { /* deprecated alias for .btn--sm .btn--green */ } .admin-btn-unpublish { /* deprecated alias for .btn--sm .btn--muted */ } .admin-btn-delete { /* deprecated alias for .btn--sm .btn--red */ } .publish-form { 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); } .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); } .admin-body main > section:not([aria-labelledby^="settings-"]) dl { 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); } .admin-body main > section:not([aria-labelledby^="settings-"]) dd { 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); } /* 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; } .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); } .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); } .admin-action-bar { margin-top: var(--space-m); display: flex; gap: var(--space-xs); flex-wrap: wrap; } .admin-muted { 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); } .admin-section-title--danger { 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); } .admin-account-status__row { 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; } .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); } .admin-account-status__note { 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; } .admin-danger-zone__description { 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); } .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: 380px; } .admin-login-box h2 { margin: 0 0 var(--space-m); font-weight: 500; text-align: center; } .admin-login-box .admin-form > div:not(.admin-form-footer) { 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); } .admin-login-box .admin-form-footer { margin-top: var(--space-s); padding-top: var(--space-2xs); } .admin-login-box .btn { width: 100%; } /* ════ Import status card (dialog) ═══════════════════════════════════════ */ .admin-import-status-card { 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; } .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); } .admin-import-status-card__errors .admin-error-list { 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); } .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); } .admin-import-log-details summary:hover { color: var(--text-primary); } /* Hint text under the file input */ .admin-file-hint { 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); } /* Import results panel (legacy, kept for backward compat) */ .admin-import-results { 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; } /* ── 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; } .admin-input--inline, .admin-inline-form input[type="text"] { width: 160px; } .admin-select--inline, .admin-inline-form select { width: 160px; } /* Stack secondary forms (merge, delete) below the rename form */ .admin-inline-form + .admin-inline-form { margin-top: var(--space-3xs); } /* Tags table column sizing */ .admin-body table:has(.admin-tags-count) th:nth-child(1) { width: 40%; } .admin-body table:has(.admin-tags-count) th:nth-child(2) { width: 12%; } .admin-body table:has(.admin-tags-count) th:nth-child(3) { width: 48%; } .admin-tags-count { 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); } /* ── 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; } .admin-list-toolbar h1 { margin: 0; white-space: nowrap; } .admin-list-toolbar .admin-stats { justify-self: end; } .admin-list-toolbar .admin-filters { 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; } .admin-list-toolbar .admin-filters__search input[type="text"] { min-width: 10rem; flex: 1 1 10rem; } .admin-list-toolbar .admin-filters__dropdowns { display: flex; gap: var(--space-xs); flex-wrap: wrap; } .admin-list-toolbar .admin-filters__dropdowns select { min-width: 7rem; flex: 1 1 7rem; } .admin-list-toolbar .admin-filters .btn { flex-shrink: 0; } .admin-list-toolbar__right { display: flex; flex-direction: column; gap: var(--space-xs); } /* ── List page toolbar (theses index — single-line search) ─────────────── */ .admin-list-toolbar--list { display: flex; flex-direction: column; gap: var(--space-s); } .admin-list-toolbar--list .admin-toolbar-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-m); } .admin-list-toolbar--list .admin-toolbar-title-row { display: flex; align-items: center; gap: var(--space-m); } .admin-list-toolbar--list .admin-toolbar-title-row h1 { margin: 0; white-space: nowrap; } .admin-list-toolbar--list .admin-toolbar-top .admin-btn-group { display: flex; gap: var(--space-2xs); flex-wrap: wrap; align-items: center; } .admin-list-toolbar--list .admin-filters { display: flex; flex-direction: row; gap: var(--space-xs); align-items: center; margin-bottom: 0; } .admin-list-toolbar--list .admin-filters input[type="text"] { flex: 1 1 auto; min-width: 8rem; } .admin-list-toolbar--list .admin-filters select { min-width: 6rem; flex-shrink: 0; } .admin-list-toolbar--list .admin-filters .btn { flex-shrink: 0; } .admin-btn-group { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; } /* ── Dialog ───────────────────────────────────────────────────────────── */ /* Base dialog/::backdrop styles live in components/dialog.css */ .admin-dialog { 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); } .admin-dialog__header h3 { 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; } .admin-dialog__close:hover { 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); } .admin-dialog .admin-form { 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); } /* Small/confirmation dialog variant */ .admin-dialog--sm { max-width: 420px; } .admin-dialog__alert { 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; } .admin-dialog__alert p:last-child { 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; } .admin-dialog__body > *:first-child { margin-top: 0; } .admin-dialog__body > *:last-child { 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; } .admin-dialog__hint { 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); } /* 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; } .admin-dialog--sheet[open] { display: flex; flex-direction: column; } @keyframes adminSheetIn { from { transform: translateX(100%); } to { transform: translateX(0); } } .admin-dialog--sheet::backdrop { 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; margin: var(--space-xs) 0 var(--space-md) 0; } .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; } .n-table tbody td { 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; } .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; } .n-meta { font-weight: 400; font-size: 0.9em; color: var(--text-secondary); margin-left: var(--space-2xs); } .n-grid { display: block; } .n-section, .n-grid > section, .n-grid > details { margin: 2ch 0; } .n-section:first-child, .n-grid > section:first-child, .n-grid > details:first-child { margin-top: 0; } .n-section:last-child, .n-grid > section:last-child, .n-grid > details:last-child { margin-bottom: 0; } .n-grid .n-heading { margin-top: 0; } /*
/ inside cleanup sections */ .n-grid > details > summary { cursor: pointer; font-weight: 600; font-size: var(--step--1); color: var(--text-primary); padding: var(--space-xs) 0; list-style: none; } .n-grid > details > summary::-webkit-details-marker { display: none; } .n-grid > details > summary::before { content: '▸ '; display: inline-block; transition: transform 0.15s; } .n-grid > details[open] > summary::before { transform: rotate(90deg); } .n-grid > details > :not(summary) { padding-left: calc(1ch + var(--space-xs)); } /* ── Import results log ─────────────────────────────────────────────── */ .admin-import-log { list-style: none; margin: 0; padding: 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); } .admin-import-log__item--ok::before { content: '✓'; color: var(--accent-green); } .admin-import-log__item--skip::before { content: '⚠'; color: var(--warning); } .admin-import-log__item--error::before { 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; } .param-access-table caption { 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); } .param-access-table th:not(:last-child), .param-access-table td:not(:last-child) { border-right: 1px solid var(--border-primary); } .param-access-table thead th { background: var(--bg-secondary); font-weight: 600; } .param-access-table thead tr:first-child th:first-child { border-top-left-radius: var(--radius); } .param-access-table thead tr:first-child th:last-child { border-top-right-radius: var(--radius); } .param-access-table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radius); } .param-access-table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radius); } .param-access-table tbody tr:last-child td { border-bottom: none; } .param-access-yes { color: var(--accent-green); } .param-access-no { 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); } .param-maintenance-row:has( .btn--warning ) { background: var(--warning-muted-bg); border-color: var(--warning); } .param-maintenance-row p { margin: 0; } .param-maintenance-row form { flex-shrink: 0; } .param-form { 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); } .param-form fieldset > * { margin-bottom: 0; } .param-checkbox { display: flex; align-items: flex-start; gap: var(--space-xs); cursor: pointer; } .param-checkbox--disabled { opacity: 0.6; cursor: not-allowed; } .param-checkbox input[type="checkbox"] { margin-top: 2px; } .param-checkbox--disabled input[type="checkbox"] { cursor: not-allowed; } .param-note { color: var(--text-secondary); margin: 0; } .param-account-status { 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); } .param-account-status dt { color: var(--text-secondary); min-width: 200px; } .param-account-status dd { 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); } .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; } .param-form > div:first-of-type { border-top: none; padding-top: 0; } .param-form input[type="password"] { width: 100%; max-width: 380px; } .param-danger-zone { border-color: var(--danger-border-muted); margin-bottom: var(--space-m); } .param-danger-zone legend { color: var(--error); font-size: var(--step-0); } .param-danger-zone p { color: var(--text-secondary); margin-bottom: var(--space-xs); } .param-danger-zone form { margin-top: var(--space-xs); } /* ── Export zone (maintenance section) ───────────────────────────────── */ .param-export-zone { margin-bottom: var(--space-m); } .param-export-zone legend { font-size: var(--step-0); } .param-export-zone p { color: var(--text-secondary); margin-bottom: var(--space-xs); } /* ── SMTP section ─────────────────────────────────────────────────────── */ .param-smtp-test { margin-top: var(--space-m); } .param-smtp-test-row { display: flex; align-items: flex-end; gap: var(--space-s); flex-wrap: wrap; } .param-smtp-test-row > div { flex: 1 1 260px; } .param-smtp-test-row label { 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); } .param-smtp-test-row input[type="email"]:focus { outline: 2px solid var(--accent-primary); outline-offset: 1px; } .param-smtp-test-row > button { 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); } .param-badge-ok { color: var(--accent-green); font-weight: 600; } .param-badge-warn { color: var(--warning); font-weight: 600; } .param-grid { 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); } .param-grid input[type="text"], .param-grid input[type="number"], .param-grid input[type="email"], .param-grid select { 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); } .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; } /* ── 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); } .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); } .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); } .admin-maintenance-status--active { background: var(--warning-muted-bg); border-color: var(--warning); } .admin-maintenance-status__msg { margin: 0; } .admin-maintenance-status form { 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); } .admin-account-status__row { 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; } .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); } .admin-account-status__note { 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; } .admin-danger-zone__description { flex: 1; font-size: var(--step--1); } .admin-settings-toggles { 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; } .admin-toggle-row--disabled { opacity: 0.6; } .admin-toggle-label { display: flex; flex-direction: column; gap: 2px; } .admin-toggle-label strong { font-size: var(--step-0); } .admin-toggle-label small { 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; } .admin-toggle::after { 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); } .admin-toggle:checked::after { transform: translateX(18px); } /* ── Cancel link ────────────────────────────────────────────────────────── */ .admin-cancel-link { font-size: var(--step--1); color: var(--text-secondary); text-decoration: none; font-weight: 400; } .admin-cancel-link:hover { 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); } .admin-body .pagination-wrap ul { 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; } .admin-body .pagination-btn:hover:not(.disabled) { border-color: var(--accent-primary); color: var(--accent-primary); } .admin-body .pagination-btn.disabled { 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); } .admin-body #editor { 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); } .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; } .admin-toggle-row--disabled { opacity: 0.6; } .admin-toggle-label { display: flex; flex-direction: column; gap: 2px; } .admin-toggle-label strong { font-size: var(--step-0); } .admin-toggle-label small { 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; } .admin-toggle::after { 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); } .admin-toggle:checked::after { transform: translateX(18px); } /* ── Form group, student mode, thanks page → see form-base.css ──────────── */ /* ── Utility ─────────────────────────────────────────────────────────────── */ .muted { color: var(--text-secondary); font-style: italic; } /* ═══════════════════════════════════════════════════════════════════════════ Form Help Blocks — static structure view (contenus.php) ═══════════════════════════════════════════════════════════════════════════ */ .fhb-hint { 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); } /* ── 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); } .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); } .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); } .fhb-fieldset-card-inputs li { font-size: var(--step--2); color: var(--text-secondary); line-height: 1.6; } .fhb-fieldset-card-inputs li::before { content: '· '; color: var(--text-tertiary); } /* ── Help block wrapper ────────────────────────────────────────────────────── */ .fhb-block-wrapper { /* 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; } .fhb-inline:hover { opacity: 0.85; } /* Disabled state — one line only, content hidden */ .fhb-inline--disabled { border-left-color: var(--text-tertiary); opacity: 0.55; } .fhb-inline--disabled:hover { opacity: 0.75; } .fhb-inline--disabled .fhb-md-preview, .fhb-inline--disabled .fhb-inline-empty { 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; } .fhb-inline--editing .fhb-inline-form { 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; } .fhb-inline-name { 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; } .fhb-md-preview p { margin: 0; } .fhb-md-preview p + p { margin-top: var(--space-3xs); } .fhb-md-preview ul, .fhb-md-preview ol { margin: var(--space-3xs) 0; padding-left: var(--space-s); } .fhb-md-preview li { margin-bottom: 0; } .fhb-md-preview strong { font-weight: 600; } .fhb-md-preview em { font-style: italic; } .fhb-md-preview code { 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; } /* ── 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; } .fhb-toggle-form { 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; } .fhb-dot:hover { opacity: 0.7; } .fhb-dot--on { background: #2d6a4f; } .fhb-dot--off { background: #c0392b; } /* ── Editor form ──────────────────────────────────────────────────────────── */ .fhb-edit-name-row { 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); } .fhb-name-input { 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); } .fhb-overtype-editor .--type-container { 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); } .fhb-inline-form { margin-top: var(--space-xs); } /* ── Mobile: admin unavailable ─────────────────────────────────────────── */ .admin-mobile-block { display: none; } @media screen and (max-width: 640px) { .admin-body header { 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 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 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); } .admin-search-indicator.htmx-request { 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; } } /* ── Sidebar TOC ───────────────────────────────────────────────────────────── */ .admin-main--toc { display: flex; gap: var(--space-xs); align-items: flex-start; } .admin-main--toc > article { flex: 1; min-width: 0; padding-top: var(--space-m); } .admin-main--toc > article > section { margin-bottom: var(--space-xl); } .admin-main--toc > article > section > fieldset { margin-bottom: var(--space-m); } .admin-toc { position: sticky; top: var(--space-xs); width: 160px; flex-shrink: 0; padding-top: var(--space-m); } .admin-toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .admin-toc-list a { display: block; padding: var(--space-3xs) var(--space-2xs); font-size: var(--step--2); color: var(--text-secondary); text-decoration: none; border-left: 2px solid transparent; transition: color 0.15s, border-color 0.15s; } .admin-toc-list a:hover { color: var(--text-primary); } .admin-toc-list a.admin-toc-active { color: var(--text-primary); font-weight: 600; border-left-color: var(--accent, var(--color-primary)); } /* ── Lazy-load transition ─────────────────────────────────────────────────── */ .htmx-settling img { opacity: 0; } .htmx-indicator img { transition: opacity 300ms ease-in; } /* ── Récapitulatif sections ───────────────────────────────── */ .admin-main--recap > fieldset { margin-bottom: var(--space-l); } .admin-main--recap > fieldset:last-of-type { margin-bottom: 0; } .recap-synopsis, .recap-long-text { 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; } .recap-dl dt { 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); } .recap-dl dd:last-of-type { 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); } .apropos-entry > div { display: flex; flex-direction: column; } .apropos-entry label { font-size: var(--step--1); margin-bottom: var(--space-3xs); } .apropos-entry input { 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); } .sidebar-link-fields { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-s); flex: 1; } .sidebar-link-fields > div { display: flex; flex-direction: column; } .sidebar-link-fields label { font-size: var(--step--1); margin-bottom: var(--space-3xs); } .sidebar-link-fields input { 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; } /* ── 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; } .autosave-status--saving { color: var(--accent-yellow); font-style: italic; } .autosave-status--saved { color: var(--accent-green); } .autosave-status--error { 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; 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); } .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); } .md-cheatsheet-header h2 { margin: 0; font-size: var(--step-0); } .md-cheatsheet-table { 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); } .md-cheatsheet-table td { 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; } .md-cheatsheet-syntax code { background: var(--surface2); padding: 0.1em 0.35em; border-radius: 3px; font-size: inherit; } .md-cheatsheet-render { min-width: 140px; } .md-cheatsheet-render h1, .md-cheatsheet-render h2, .md-cheatsheet-render h3 { margin: 0; line-height: 1.3; } .md-cheatsheet-render h1 { font-size: var(--step-2); } .md-cheatsheet-render h2 { font-size: var(--step-1); } .md-cheatsheet-render h3 { 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); } .md-cheatsheet-render ul, .md-cheatsheet-render ol { margin: 0; padding-left: var(--space-m); } .md-cheatsheet-render hr { margin: var(--space-3xs) 0; border: 0; border-top: 1px solid var(--border); } .md-cheatsheet-link { color: var(--accent-blue, var(--link)); } .md-cheatsheet-img { opacity: 0.7; } .md-cheatsheet-note { color: var(--text-tertiary); font-size: var(--step--2); } .md-cheatsheet-separator td { padding: var(--space-3xs) 0; border: 0; }