mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-06-25 16:19:19 +02:00
048a14bc2e
Mirrors the mots-clé tag-search system: dropdown suggestions from existing languages via HTMX, pill display with bin-icon remove buttons, 'Créer' option for new languages. Replaces the plain text input. - New partial: templates/partials/form/language-search.php - New fragment: public/partage/language-search-fragment.php - Admin wrapper: public/admin/language-search-fragment.php - Updated language-autre-fragment to return just the required asterisk indicator - Updated both controllers to handle language_autre as array (pill-based) with backward-compatible string path - Updated edit form to compute selectedOtherLanguages from DB - Registered new route in partage/index.php - Fix CSV importer: split comma-separated language column into individual entries - Add htmx active search to admin index, title line-clamp, predefined languages only in checkboxes - Admin index: filter form now uses htmx triggers (input delay:300ms on search, change on selects) to actively search without page reload - Sort links include hx-push-url for back-button support - Added loading indicator bar (.admin-search-indicator) - Title column: line-clamp at 2 lines with overflow hidden, native title attr tooltip for full text - Language checkboxes now show only 3 predefined languages (Français, Anglais, Néerlandais); all others go via the Autre langue search component - Added Database::getPredefinedLanguages() and excluded predefined from language-search-fragment suggestions - Included hidden sort/dir inputs in table-wrap so sort state preserved across filter changes - Fix language-search: block 'Créer' for predefined languages in dropdown The 'Créer' option in the language-search dropdown now also checks against the predefined set (français, anglais, néerlandais) to avoid offering creation of languages that already exist as checkboxes.
1974 lines
48 KiB
CSS
1974 lines
48 KiB
CSS
/* ============================================================
|
|
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 svg {
|
|
vertical-align: middle;
|
|
margin-right: 0.4em;
|
|
}
|
|
|
|
/* Active nav link — non-colour indicator required by WCAG 1.4.1 */
|
|
.admin-body header nav ul a[aria-current="page"] {
|
|
border-bottom: 2px solid currentColor;
|
|
padding-bottom: 1px;
|
|
}
|
|
|
|
.admin-body main {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
padding: var(--space-l) var(--space-l) var(--space-2xl);
|
|
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-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: 32px;
|
|
height: 32px;
|
|
border-radius: var(--radius);
|
|
color: var(--text-secondary);
|
|
text-decoration: none;
|
|
transition: background 0.15s, color 0.15s;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.admin-back-btn:hover {
|
|
background: var(--bg-secondary);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.admin-back-btn svg {
|
|
width: 22px;
|
|
height: 22px;
|
|
fill: currentColor;
|
|
}
|
|
|
|
/* ── Form styles → see form.css ─────────────────────────────────────────── */
|
|
|
|
/* ── Buttons ────────────────────────────────────────────────────────────── */
|
|
.admin-form-footer {
|
|
margin-top: var(--space-l);
|
|
}
|
|
|
|
/* ── Admin button aliases — see common.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 (bottom-center, CSS-only auto-fade) ─────────────── */
|
|
#toast-region {
|
|
position: fixed;
|
|
bottom: var(--space-l);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 10000;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: var(--space-xs);
|
|
pointer-events: none;
|
|
width: max-content;
|
|
max-width: min(560px, calc(100vw - 2 * var(--space-l)));
|
|
}
|
|
|
|
.toast {
|
|
padding: var(--space-s) var(--space-m);
|
|
border-radius: var(--radius);
|
|
font-size: var(--step-0);
|
|
border-left: 4px solid;
|
|
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
|
|
pointer-events: auto;
|
|
/* enter then fade out — total visible ~6.35 s */
|
|
animation: toast-enter 0.35s ease-out,
|
|
toast-exit 0.5s ease-in 6s forwards;
|
|
}
|
|
|
|
.toast--error {
|
|
background: var(--bg-secondary);
|
|
border-color: var(--error);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.toast--success {
|
|
background: var(--bg-secondary);
|
|
border-color: var(--success);
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.toast--warning {
|
|
background: var(--bg-secondary);
|
|
border-color: var(--warning);
|
|
color: var(--text-primary);
|
|
animation: toast-enter 0.35s ease-out; /* no fade-out — stays until dismissed */
|
|
}
|
|
|
|
.toast--warning a {
|
|
color: inherit;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
@keyframes toast-enter {
|
|
from { opacity: 0; transform: translateY(12px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes toast-exit {
|
|
from { opacity: 1; }
|
|
to { opacity: 0; pointer-events: none; }
|
|
}
|
|
|
|
/* ── 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);
|
|
}
|
|
|
|
.admin-bulk-btns {
|
|
display: flex;
|
|
gap: var(--space-2xs);
|
|
}
|
|
|
|
/* ── Table ──────────────────────────────────────────────────────────────── */
|
|
/* Base table/th/td styles live in common.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-badge {
|
|
display: inline-block;
|
|
padding: var(--space-3xs) var(--space-2xs);
|
|
border-radius: var(--radius);
|
|
font-size: var(--step--2);
|
|
font-weight: 500;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.status-published {
|
|
background: var(--green-muted-bg);
|
|
color: var(--accent-green);
|
|
}
|
|
|
|
.status-pending {
|
|
background: var(--warning-muted-bg);
|
|
color: var(--warning);
|
|
}
|
|
|
|
.status-access {
|
|
display: inline-block;
|
|
font-size: var(--step--2);
|
|
padding: var(--space-3xs) var(--space-3xs);
|
|
border-radius: var(--radius);
|
|
background: var(--bg-tertiary);
|
|
color: var(--text-secondary);
|
|
letter-spacing: 0.03em;
|
|
}
|
|
|
|
.status-access--libre {
|
|
background: var(--green-muted-bg);
|
|
color: var(--accent-green);
|
|
}
|
|
|
|
.status-access--interne {
|
|
background: var(--blue-muted-bg);
|
|
color: var(--accent-blue);
|
|
}
|
|
|
|
.status-access--interdit {
|
|
background: var(--error-muted-bg);
|
|
color: var(--error);
|
|
}
|
|
|
|
/* ── Compact table badges ─────────────────────────────────────────── */
|
|
.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 common.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);
|
|
}
|
|
|
|
/* ── Paramètres page top-level sections (flat, no border card) ──────────── */
|
|
.admin-body main > section[aria-labelledby^="settings-"] {
|
|
border: none;
|
|
border-radius: 0;
|
|
padding: 0;
|
|
margin-bottom: var(--space-xl);
|
|
}
|
|
|
|
.admin-body main > section[aria-labelledby^="settings-"] > 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.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 common.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 h2 {
|
|
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-bottom: 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 {
|
|
margin: 0;
|
|
}
|
|
|
|
.admin-dialog__footer {
|
|
display: flex;
|
|
gap: var(--space-xs);
|
|
padding: 0 var(--space-l) var(--space-m);
|
|
}
|
|
|
|
/* ── 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-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: 600;
|
|
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: underline;
|
|
}
|
|
|
|
/* ── 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);
|
|
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.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: 500;
|
|
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; }
|
|
}
|