PostERG/xamxam
1
0
Fork 0
mirror of https://codeberg.org/PostERG/xamxam.git synced 2026-06-25 16:19:19 +02:00
Code Issues Packages Projects Releases Wiki Activity

style: unify form element styles in common.css, redesign focus rings, refactor public search bar, tweak admin section

Browse Source
This commit is contained in:
Pontoporeia
2026-05-08 17:57:39 +02:00
parent 77fd282e29
commit 862ed02136
13 changed files with 355 additions and 376 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
TODO.md
View File

@@ -109,3 +109,21 @@
- [x] All `$required = true` callers in `form.php`, `fieldset-tfe-info.php`, `fieldset-academic.php`, `fieldset-licence-explanation.php`, `fieldset-files.php` changed to `!$adminMode` - [x] All `$required = true` callers in `form.php`, `fieldset-tfe-info.php`, `fieldset-academic.php`, `fieldset-licence-explanation.php`, `fieldset-files.php` changed to `!$adminMode`
- [x] Hardcoded `required` HTML attributes in `fieldset-tfe-info.php` (synopsis, objet radios), `fieldset-licence-explanation.php` (access type radios), `jury-fieldset.php` (promoteur, lecteurs interne/externe) gated on `!$adminMode` - [x] Hardcoded `required` HTML attributes in `fieldset-tfe-info.php` (synopsis, objet radios), `fieldset-licence-explanation.php` (access type radios), `jury-fieldset.php` (promoteur, lecteurs interne/externe) gated on `!$adminMode`
- [x] Dynamic JS `ulbInput.required` in jury fieldset also gated - [x] Dynamic JS `ulbInput.required` in jury fieldset also gated
# TODO
- [x] Make all heading font sizes the same (slightly smaller than current h1) in common.css
- [x] Remove individual font-size overrides from other CSS files so they inherit
- [x] Standardise header nav structure: admin uses nav-left/nav-right like public
- [x] Unify font-size for all nav links (logo + nav links all use var(--step--1))
- [x] Clean up redundant CSS rules (.nav-logo, .nav-left-links)
- [x] Update admin.css selectors to match new header structure
- [x] Bump nav font-size to var(--step-0)
- [x] Add small inverted top gradient to admin body
- [x] Commit
- [x] Cap home page cards grid to max 3 columns (was auto-fill, now repeat(3, 1fr) with 2→1 column breakpoints)
- [x] Remove Modifier link from admin header when on edit page
- [x] Move admin nav links to right side, keep only logo on left
- [x] Remove Mots-clés from admin header, add as button in dashboard toolbar; use grid layout (title|stats, search|buttons)
- [x] Group admin toolbar buttons: + Ajouter + Mots-clés stacked above Import/Export
- [x] Stack admin filters vertically: search+button row above dropdowns row
- [x] Standardise form inputs/selects/textareas in common.css: padding, --radius var, 2px accent border on focus

177
app/public/assets/css/admin.css
View File

@@ -16,16 +16,10 @@
white-space: nowrap; white-space: nowrap;
scrollbar-width: thin; scrollbar-width: thin;
} }
.admin-body header nav > a, .admin-body header nav .nav-left,
.admin-body header nav ul { .admin-body header nav .nav-right-links {
flex-shrink: 0; flex-shrink: 0;
} }
.admin-body header nav,
.admin-body header nav ul,
.admin-body header nav li {
list-style: none;
flex-wrap: nowrap;
}
.admin-body header nav ul [data-nav-logout] a { .admin-body header nav ul [data-nav-logout] a {
opacity: 0.6; opacity: 0.6;
@@ -40,7 +34,7 @@
} }
/* Public-site link icon in admin nav */ /* Public-site link icon in admin nav */
.admin-body header nav > a svg { .admin-body header nav .nav-logo svg {
vertical-align: middle; vertical-align: middle;
margin-right: 0.4em; margin-right: 0.4em;
} }
@@ -57,14 +51,17 @@
overflow-y: auto; overflow-y: auto;
padding: var(--space-l) var(--space-l) var(--space-2xl); padding: var(--space-l) var(--space-l) var(--space-2xl);
width: 100%; width: 100%;
background: linear-gradient(
180deg,
rgba(149, 87, 181, 0.18) 0%,
rgba(0, 0, 0, 0) 6%
);
} }
.admin-body main > h1, .admin-body main > h1,
.admin-list-header > h1 { .admin-list-header > h1 {
font-size: var(--step-2);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.08em;
margin: 0 0 var(--space-l) 0; margin: 0 0 var(--space-l) 0;
} }
@@ -115,7 +112,7 @@
.toast { .toast {
padding: var(--space-s) var(--space-m); padding: var(--space-s) var(--space-m);
border-radius: 8px; border-radius: var(--radius);
font-size: var(--step-0); font-size: var(--step-0);
border-left: 4px solid; border-left: 4px solid;
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
@@ -170,7 +167,7 @@
.admin-stat { .admin-stat {
background: var(--bg-secondary); background: var(--bg-secondary);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 4px; border-radius: var(--radius);
padding: var(--space-2xs) var(--space-s); padding: var(--space-2xs) var(--space-s);
min-width: 0; min-width: 0;
display: flex; display: flex;
@@ -201,7 +198,7 @@
gap: var(--space-s); gap: var(--space-s);
background: var(--bg-secondary); background: var(--bg-secondary);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 4px; border-radius: var(--radius);
padding: var(--space-2xs) var(--space-s); padding: var(--space-2xs) var(--space-s);
margin-bottom: var(--space-m); margin-bottom: var(--space-m);
font-size: var(--step--1); font-size: var(--step--1);
@@ -245,23 +242,6 @@
align-items: center; align-items: center;
} }
.admin-filters input[type="text"],
.admin-filters select {
border: 1px solid var(--border-primary);
border-radius: 3px;
font-size: var(--step--1);
font-family: inherit;
padding: var(--space-3xs) var(--space-xs);
background: transparent;
cursor: pointer;
}
.admin-filters input[type="text"]:focus,
.admin-filters select:focus {
outline: none;
border-color: var(--accent-primary);
}
.admin-filters-btn { .admin-filters-btn {
/* deprecated alias for .btn--primary; kept for backward-compat */ /* deprecated alias for .btn--primary; kept for backward-compat */
} }
@@ -278,7 +258,7 @@
padding: var(--space-2xs) var(--space-s); padding: var(--space-2xs) var(--space-s);
background: var(--bg-secondary); background: var(--bg-secondary);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 4px; border-radius: var(--radius);
margin-bottom: var(--space-s); margin-bottom: var(--space-s);
font-size: var(--step--1); font-size: var(--step--1);
} }
@@ -326,7 +306,7 @@
.status-badge { .status-badge {
display: inline-block; display: inline-block;
padding: var(--space-3xs) var(--space-2xs); padding: var(--space-3xs) var(--space-2xs);
border-radius: 3px; border-radius: var(--radius);
font-size: var(--step--2); font-size: var(--step--2);
font-weight: 500; font-weight: 500;
letter-spacing: 0.04em; letter-spacing: 0.04em;
@@ -346,7 +326,7 @@
display: inline-block; display: inline-block;
font-size: var(--step--2); font-size: var(--step--2);
padding: var(--space-3xs) var(--space-3xs); padding: var(--space-3xs) var(--space-3xs);
border-radius: 3px; border-radius: var(--radius);
background: var(--bg-tertiary); background: var(--bg-tertiary);
color: var(--text-secondary); color: var(--text-secondary);
letter-spacing: 0.03em; letter-spacing: 0.03em;
@@ -411,14 +391,13 @@
/* ── Thesis info sections (thanks page) ─────────────────────────────────── */ /* ── Thesis info sections (thanks page) ─────────────────────────────────── */
.admin-body main > section:not([aria-labelledby^="settings-"]) { .admin-body main > section:not([aria-labelledby^="settings-"]) {
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 6px; border-radius: var(--radius);
padding: var(--space-m); padding: var(--space-m);
margin-bottom: var(--space-m); margin-bottom: var(--space-m);
} }
.admin-body main > section:not([aria-labelledby^="settings-"]) h2 { .admin-body main > section:not([aria-labelledby^="settings-"]) h2 {
margin: 0 0 var(--space-s); margin: 0 0 var(--space-s);
font-size: var(--step-1);
border-bottom: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary);
padding-bottom: var(--space-2xs); padding-bottom: var(--space-2xs);
} }
@@ -449,7 +428,6 @@
} }
.admin-body main > section[aria-labelledby^="settings-"] > h2 { .admin-body main > section[aria-labelledby^="settings-"] > h2 {
font-size: var(--step-1);
font-weight: 600; font-weight: 600;
letter-spacing: 0.06em; letter-spacing: 0.06em;
text-transform: uppercase; text-transform: uppercase;
@@ -490,7 +468,7 @@
/* ── Account status block ───────────────────────────────────────────────── */ /* ── Account status block ───────────────────────────────────────────────── */
.admin-account-status { .admin-account-status {
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 4px; border-radius: var(--radius);
padding: var(--space-s) var(--space-m); padding: var(--space-s) var(--space-m);
margin-bottom: var(--space-l); margin-bottom: var(--space-l);
display: flex; display: flex;
@@ -514,7 +492,7 @@
font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
font-size: var(--step--2); font-size: var(--step--2);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 3px; border-radius: var(--radius);
padding: var(--space-3xs) var(--space-3xs); padding: var(--space-3xs) var(--space-3xs);
color: var(--text-secondary); color: var(--text-secondary);
background: var(--bg-secondary); background: var(--bg-secondary);
@@ -529,7 +507,7 @@
/* ── Danger zone (account page) ─────────────────────────────────────────── */ /* ── Danger zone (account page) ─────────────────────────────────────────── */
.admin-danger-zone { .admin-danger-zone {
border: 1px solid var(--danger-border-muted); border: 1px solid var(--danger-border-muted);
border-radius: 4px; border-radius: var(--radius);
padding: var(--space-m) var(--space-m); padding: var(--space-m) var(--space-m);
display: flex; display: flex;
align-items: center; align-items: center;
@@ -553,7 +531,7 @@
.admin-login-box { .admin-login-box {
background: var(--bg-secondary); background: var(--bg-secondary);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 4px; border-radius: var(--radius);
padding: var(--space-l); padding: var(--space-l);
width: 100%; width: 100%;
max-width: 380px; max-width: 380px;
@@ -561,7 +539,6 @@
.admin-login-box h2 { .admin-login-box h2 {
margin: 0 0 var(--space-m); margin: 0 0 var(--space-m);
font-size: var(--step-0);
font-weight: 500; font-weight: 500;
text-align: center; text-align: center;
} }
@@ -597,7 +574,7 @@
background: var(--success-muted-bg); background: var(--success-muted-bg);
border: 1px solid var(--success); border: 1px solid var(--success);
border-left: 3px solid var(--success); border-left: 3px solid var(--success);
border-radius: 4px; border-radius: var(--radius);
padding: var(--space-xs) var(--space-s); padding: var(--space-xs) var(--space-s);
font-size: var(--step--1); font-size: var(--step--1);
margin: 0; margin: 0;
@@ -607,7 +584,7 @@
background: var(--accent-muted); background: var(--accent-muted);
border: 1px solid var(--error); border: 1px solid var(--error);
border-left: 3px solid var(--error); border-left: 3px solid var(--error);
border-radius: 4px; border-radius: var(--radius);
padding: var(--space-xs) var(--space-s); padding: var(--space-xs) var(--space-s);
font-size: var(--step--1); font-size: var(--step--1);
margin-bottom: var(--space-s); margin-bottom: var(--space-s);
@@ -712,39 +689,55 @@
max-height: 100px; max-height: 100px;
object-fit: cover; object-fit: cover;
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 3px; border-radius: var(--radius);
display: block; display: block;
margin-top: var(--space-2xs); margin-top: var(--space-2xs);
} }
/* ── List page toolbar (title + filters + stats + import, one row) ───────── */ /* ── List page toolbar (title + filters + stats + import, one row) ───────── */
.admin-list-toolbar { .admin-list-toolbar {
display: flex; display: grid;
align-items: center; grid-template-columns: 1fr auto;
gap: var(--space-m); gap: var(--space-m) var(--space-l);
margin-bottom: var(--space-m); margin-bottom: var(--space-m);
flex-wrap: wrap; align-items: center;
} }
.admin-list-toolbar h1 { .admin-list-toolbar h1 {
margin: 0; margin: 0;
white-space: nowrap; white-space: nowrap;
flex-shrink: 0; }
.admin-list-toolbar .admin-stats {
justify-self: end;
} }
.admin-list-toolbar .admin-filters { .admin-list-toolbar .admin-filters {
flex: 1; display: flex;
flex-direction: column;
gap: var(--space-xs);
margin-bottom: 0; margin-bottom: 0;
flex-wrap: wrap;
min-width: 0; min-width: 0;
} }
.admin-list-toolbar .admin-filters input[type="text"] { .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; min-width: 10rem;
flex: 1 1 10rem; flex: 1 1 10rem;
} }
.admin-list-toolbar .admin-filters select { .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; min-width: 7rem;
flex: 1 1 7rem; flex: 1 1 7rem;
} }
@@ -754,10 +747,16 @@
} }
.admin-list-toolbar__right { .admin-list-toolbar__right {
display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.admin-btn-group {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-s); gap: var(--space-xs);
flex-shrink: 0; flex-wrap: wrap;
} }
/* ── Dialog ───────────────────────────────────────────────────────────── */ /* ── Dialog ───────────────────────────────────────────────────────────── */
@@ -776,7 +775,6 @@
} }
.admin-dialog__header h2 { .admin-dialog__header h2 {
font-size: var(--step-0);
font-weight: 600; font-weight: 600;
letter-spacing: 0.06em; letter-spacing: 0.06em;
text-transform: uppercase; text-transform: uppercase;
@@ -792,7 +790,7 @@
color: var(--text-tertiary); color: var(--text-tertiary);
padding: var(--space-3xs); padding: var(--space-3xs);
line-height: 1; line-height: 1;
border-radius: 3px; border-radius: var(--radius);
transition: color 0.15s; transition: color 0.15s;
} }
@@ -853,7 +851,7 @@
font-size: var(--step--2); font-size: var(--step--2);
font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 3px; border-radius: var(--radius);
padding: var(--space-xs); padding: var(--space-xs);
background: var(--bg-secondary); background: var(--bg-secondary);
} }
@@ -876,7 +874,7 @@
margin-bottom: var(--space-m); margin-bottom: var(--space-m);
font-size: var(--step--1); font-size: var(--step--1);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 4px; border-radius: var(--radius);
background: var(--bg-secondary); background: var(--bg-secondary);
} }
@@ -980,7 +978,7 @@
font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
font-size: var(--step--2); font-size: var(--step--2);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 3px; border-radius: var(--radius);
padding: var(--space-3xs); padding: var(--space-3xs);
color: var(--text-secondary); color: var(--text-secondary);
background: var(--bg-secondary); background: var(--bg-secondary);
@@ -1002,19 +1000,14 @@
.param-form input[type="password"] { .param-form input[type="password"] {
width: 100%; width: 100%;
max-width: 380px; max-width: 380px;
background: transparent;
border: none; border: none;
border-bottom: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary);
font-size: var(--step--1);
font-family: inherit;
padding: var(--space-3xs) 0;
border-radius: 0; border-radius: 0;
transition: border-color 0.15s; padding: var(--space-3xs) 0;
} }
.param-form input[type="password"]:focus { .param-form input[type="password"]:focus {
outline: none; border-bottom: 2px solid var(--accent-primary);
border-bottom-color: var(--accent-primary);
} }
.param-form > button { .param-form > button {
@@ -1097,12 +1090,6 @@
.param-smtp-test-row input[type="email"] { .param-smtp-test-row input[type="email"] {
width: 100%; width: 100%;
padding: var(--space-xs) var(--space-s); padding: var(--space-xs) var(--space-s);
border: 1px solid var(--border-primary);
border-radius: 4px;
background: var(--bg-primary);
color: var(--text-primary);
font-size: var(--step--1);
box-sizing: border-box;
} }
.param-smtp-test-row input[type="email"]:focus { .param-smtp-test-row input[type="email"]:focus {
outline: 2px solid var(--accent-primary); outline: 2px solid var(--accent-primary);
@@ -1146,28 +1133,18 @@
.param-grid input[type="email"], .param-grid input[type="email"],
.param-grid select { .param-grid select {
width: 100%; width: 100%;
background: transparent;
border: none; border: none;
border-bottom: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary);
font-size: var(--step--1);
font-family: inherit;
padding: var(--space-3xs) 0;
border-radius: 0; border-radius: 0;
transition: border-color 0.15s; padding: var(--space-3xs) 0;
} }
.param-grid input:focus, .param-grid input:focus,
.param-grid select:focus { .param-grid select:focus {
outline: none; border-bottom: 2px solid var(--accent-primary);
border-bottom-color: var(--accent-primary);
} }
.param-grid select { .param-grid select {
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0 center; background-position: right 0 center;
padding-right: 1.2rem; padding-right: 1.2rem;
-webkit-appearance: none;
appearance: none;
} }
.param-fieldset-inline legend { .param-fieldset-inline legend {
padding: 0 var(--space-xs); padding: 0 var(--space-xs);
@@ -1190,7 +1167,7 @@
/* ── Settings page sections — legacy aliases (kept for any remaining use) ─ */ /* ── Settings page sections — legacy aliases (kept for any remaining use) ─ */
.admin-settings-section { .admin-settings-section {
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 6px; border-radius: var(--radius);
padding: var(--space-m) var(--space-l); padding: var(--space-m) var(--space-l);
margin-bottom: var(--space-l); margin-bottom: var(--space-l);
} }
@@ -1213,7 +1190,7 @@
gap: var(--space-s); gap: var(--space-s);
background: var(--bg-secondary); background: var(--bg-secondary);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 4px; border-radius: var(--radius);
padding: var(--space-xs) var(--space-m); padding: var(--space-xs) var(--space-m);
font-size: var(--step--1); font-size: var(--step--1);
} }
@@ -1234,7 +1211,7 @@
.admin-account-status { .admin-account-status {
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 4px; border-radius: var(--radius);
padding: var(--space-s) var(--space-m); padding: var(--space-s) var(--space-m);
margin-bottom: var(--space-l); margin-bottom: var(--space-l);
display: flex; display: flex;
@@ -1258,7 +1235,7 @@
font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
font-size: var(--step--2); font-size: var(--step--2);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 3px; border-radius: var(--radius);
padding: var(--space-3xs) var(--space-3xs); padding: var(--space-3xs) var(--space-3xs);
color: var(--text-secondary); color: var(--text-secondary);
background: var(--bg-secondary); background: var(--bg-secondary);
@@ -1272,7 +1249,7 @@
.admin-danger-zone { .admin-danger-zone {
border: 1px solid var(--danger-border-muted); border: 1px solid var(--danger-border-muted);
border-radius: 4px; border-radius: var(--radius);
padding: var(--space-m) var(--space-m); padding: var(--space-m) var(--space-m);
display: flex; display: flex;
align-items: center; align-items: center;
@@ -1299,7 +1276,7 @@
gap: var(--space-m); gap: var(--space-m);
background: var(--bg-secondary); background: var(--bg-secondary);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 4px; border-radius: var(--radius);
padding: var(--space-xs) var(--space-m); padding: var(--space-xs) var(--space-m);
cursor: pointer; cursor: pointer;
} }
@@ -1388,7 +1365,7 @@
min-height: 2.75rem; min-height: 2.75rem;
padding: 0 var(--space-2xs); padding: 0 var(--space-2xs);
border: 1px solid var(--border-secondary); border: 1px solid var(--border-secondary);
border-radius: 10px; border-radius: var(--radius);
color: var(--text-primary); color: var(--text-primary);
font-size: var(--step--1); font-size: var(--step--1);
text-decoration: none; text-decoration: none;
@@ -1434,7 +1411,7 @@
gap: var(--space-m); gap: var(--space-m);
background: var(--bg-secondary); background: var(--bg-secondary);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 4px; border-radius: var(--radius);
padding: var(--space-xs) var(--space-m); padding: var(--space-xs) var(--space-m);
cursor: pointer; cursor: pointer;
} }
@@ -1531,7 +1508,7 @@
.fhb-sortable-panel, .fhb-sortable-panel,
.fhb-form-preview-panel { .fhb-form-preview-panel {
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 6px; border-radius: var(--radius);
padding: var(--space-s); padding: var(--space-s);
background: var(--bg-secondary); background: var(--bg-secondary);
} }
@@ -1581,7 +1558,7 @@
background: var(--bg-primary); background: var(--bg-primary);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-left: 4px solid var(--accent-primary); border-left: 4px solid var(--accent-primary);
border-radius: 4px; border-radius: var(--radius);
padding: var(--space-2xs) var(--space-xs); padding: var(--space-2xs) var(--space-xs);
cursor: default; cursor: default;
transition: box-shadow 0.15s, border-color 0.15s; transition: box-shadow 0.15s, border-color 0.15s;
@@ -1670,7 +1647,7 @@
.fhb-fieldset-preview { .fhb-fieldset-preview {
border: 1px solid var(--border-secondary); border: 1px solid var(--border-secondary);
border-radius: 4px; border-radius: var(--radius);
padding: var(--space-xs); padding: var(--space-xs);
background: var(--bg-primary); background: var(--bg-primary);
} }
@@ -1700,7 +1677,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-2xs); gap: var(--space-2xs);
border-radius: 4px; border-radius: var(--radius);
padding: var(--space-3xs) var(--space-xs); padding: var(--space-3xs) var(--space-xs);
font-size: var(--step--2); font-size: var(--step--2);
border: 1px dashed var(--border-primary); border: 1px dashed var(--border-primary);
@@ -1731,6 +1708,6 @@
font-weight: 600; font-weight: 600;
color: var(--accent-primary); color: var(--accent-primary);
background: var(--accent-muted); background: var(--accent-muted);
border-radius: 2px; border-radius: var(--radius);
padding: 0 4px; padding: 0 4px;
} }

18
app/public/assets/css/apropos.css
View File

@@ -158,24 +158,10 @@
margin-bottom: 0; margin-bottom: 0;
} }
.prose h1, .prose :where(h1, h2, h3) {
.prose h2,
.prose h3 {
font-family: var(--font-display);
font-weight: 400;
margin: 1.5em 0 0.5em 0; margin: 1.5em 0 0.5em 0;
} }
.prose h1 {
font-size: var(--step-3);
}
.prose h2 {
font-size: var(--step-2);
}
.prose h3 {
font-size: var(--step-1);
}
.prose a { .prose a {
color: var(--accent-primary); color: var(--accent-primary);
text-decoration: underline; text-decoration: underline;
@@ -204,7 +190,7 @@
font-size: 0.88em; font-size: 0.88em;
background: var(--bg-tertiary); background: var(--bg-tertiary);
padding: 0.1em 0.3em; padding: 0.1em 0.3em;
border-radius: 2px; border-radius: var(--radius);
} }
/* ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ */

150
app/public/assets/css/common.css
View File

@@ -48,14 +48,7 @@ header {
); );
.nav-logo { .nav-logo {
font-family: var(--font-display);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent-foreground);
text-decoration: none; text-decoration: none;
text-shadow:
0 0 16px var(--header-shadow-strong),
0 0 32px var(--header-shadow-soft);
} }
.nav-left { .nav-left {
@@ -66,7 +59,6 @@ header {
.nav-left-links, .nav-left-links,
.nav-right-links { .nav-right-links {
font-family: var(--font-display);
display: flex; display: flex;
gap: var(--space-l); gap: var(--space-l);
align-items: center; align-items: center;
@@ -80,7 +72,7 @@ header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
font-size: var(--step-2); font-size: var(--step-0);
a { a {
font-family: var(--font-display); font-family: var(--font-display);
@@ -88,6 +80,9 @@ header {
text-transform: uppercase; text-transform: uppercase;
color: var(--accent-foreground); color: var(--accent-foreground);
text-decoration: none; text-decoration: none;
text-shadow:
0 0 16px var(--header-shadow-strong),
0 0 32px var(--header-shadow-soft);
} }
ul { ul {
@@ -100,21 +95,9 @@ header {
} }
ul a { ul a {
font-size: var(--step--1);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent-foreground);
text-decoration: none;
transition: opacity 0.15s; transition: opacity 0.15s;
} }
a,
ul a {
text-shadow:
0 0 16px var(--header-shadow-strong),
0 0 32px var(--header-shadow-soft);
}
ul a:hover { ul a:hover {
opacity: 1; opacity: 1;
} }
@@ -260,7 +243,6 @@ header {
display: block; display: block;
width: 100%; width: 100%;
padding: var(--space-s) var(--space-s); padding: var(--space-s) var(--space-s);
font-size: var(--step-1);
text-align: left; text-align: left;
} }
@@ -300,6 +282,21 @@ main * {
word-break: break-word; word-break: break-word;
} }
/* ============================================================
HEADINGS — global scale, shared by admin + public pages
All headings use the same font size (slightly smaller than
the previous h1). Individual page overrides for size have
been removed so everything inherits from here.
============================================================ */
:where(h1, h2, h3, h4, h5, h6) {
font-family: var(--font-display);
font-size: var(--step-2);
font-weight: 400;
margin: 0 0 var(--space-l) 0;
line-height: 1.15;
}
/* ============================================================ /* ============================================================
SEARCH BAR (shared) SEARCH BAR (shared)
============================================================ */ ============================================================ */
@@ -310,37 +307,37 @@ main * {
background: linear-gradient(180deg, var(--gradient-4) 0%, #ffffffee 100%); background: linear-gradient(180deg, var(--gradient-4) 0%, #ffffffee 100%);
} }
.header-search-wrap form[role="search"] { .header-search-form {
width: 100%;
}
.header-search-input-wrap {
position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--space-2xs);
padding: var(--space-3xs) var(--space-s);
border: 1px solid var(--accent-primary);
border-radius: 10px;
background: var(--bg-primary);
width: 100%;
color: var(--accent-primary);
} }
.header-search-wrap form[role="search"] svg { .header-search-icon {
color: var(--text-tertiary); position: absolute;
flex-shrink: 0; left: var(--space-s);
width: 16px; width: 18px;
height: 16px; height: 18px;
stroke: var(--accent-primary); stroke: var(--accent-primary);
pointer-events: none;
} }
.header-search-wrap form[role="search"] input { .header-search-input-wrap input {
flex: 1; width: 100%;
border: none; padding: var(--space-xs) var(--space-s) var(--space-xs) var(--space-xl);
font-size: var(--step--1); border: 1px solid var(--accent-primary);
border-radius: var(--radius);
background: var(--bg-primary);
font-size: var(--step-0);
color: var(--text-primary); color: var(--text-primary);
background: transparent;
padding: var(--space-3xs) 0;
font-family: inherit; font-family: inherit;
} }
.header-search-wrap form[role="search"] input::placeholder { .header-search-input-wrap input::placeholder {
color: var(--accent-primary); color: var(--accent-primary);
} }
@@ -380,10 +377,12 @@ main * {
top: 0; top: 0;
} }
/* Consistent keyboard-focus outline for all interactive elements */ /* Consistent keyboard-focus ring for all interactive elements */
:focus-visible { :focus-visible {
outline: 2px solid var(--accent-primary); outline: none;
outline-offset: 2px; box-shadow: 0 0 0 2px var(--accent-primary);
border-radius: var(--radius);
padding: var(--space-3xs) var(--space-xs);
} }
/* Respect user motion preferences */ /* Respect user motion preferences */
@@ -396,10 +395,61 @@ main * {
} }
} }
/* ============================================================
FORM ELEMENTS — base input / select / textarea / button
============================================================ */
label {
display: block;
margin-bottom: var(--space-3xs);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="color"]),
select,
textarea {
font-family: inherit;
font-size: var(--step--1);
padding: var(--space-2xs) var(--space-xs);
border: 1px solid var(--border-primary);
border-radius: var(--radius);
background: transparent;
color: var(--text-primary);
transition: border-color 0.15s;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="color"]):focus,
select:focus,
textarea:focus {
outline: none;
border: 2px solid var(--accent-primary);
}
input::placeholder,
textarea::placeholder {
color: var(--text-tertiary);
font-size: var(--step--1);
}
textarea {
resize: vertical;
min-height: 80px;
line-height: 1.5;
}
select {
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.5rem center;
padding-right: 1.5rem;
-webkit-appearance: none;
appearance: none;
}
/* ============================================================ /* ============================================================
BUTTONS — shared .btn base class BUTTONS — shared .btn base class
Targets both <a> and <button>, always has a background. Targets both <a> and <button>, always has a background.
border-radius: 10px; padding: var(--space-xs) border-radius: var(--radius); padding: var(--space-xs)
============================================================ */ ============================================================ */
.btn { .btn {
@@ -408,7 +458,7 @@ main * {
justify-content: center; justify-content: center;
gap: var(--space-3xs); gap: var(--space-3xs);
padding: var(--space-xs); padding: var(--space-xs);
border-radius: 10px; border-radius: var(--radius);
font-size: var(--step--1); font-size: var(--step--1);
font-family: inherit; font-family: inherit;
font-weight: 500; font-weight: 500;
@@ -573,7 +623,7 @@ main * {
fieldset { fieldset {
/*background: var(--bg-secondary);*/ /*background: var(--bg-secondary);*/
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 4px; border-radius: var(--radius);
padding: var(--space-m); padding: var(--space-m);
margin: 0; margin: 0;
} }
@@ -624,7 +674,7 @@ td {
dialog { dialog {
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 6px; border-radius: var(--radius);
background: var(--bg-primary); background: var(--bg-primary);
color: var(--text-primary); color: var(--text-primary);
padding: 0; padding: 0;
@@ -649,5 +699,5 @@ details > summary::-webkit-details-marker {
border-radius: 15px; border-radius: 15px;
} }
audio::-webkit-media-controls-enclosure { audio::-webkit-media-controls-enclosure {
border-radius: 10px; border-radius: var(--radius);
} }

16
app/public/assets/css/file-access.css
View File

@@ -16,7 +16,7 @@
padding: var(--space-m); padding: var(--space-m);
background: var(--bg-secondary); background: var(--bg-secondary);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 8px; border-radius: var(--radius);
} }
.access-req-stat-number { .access-req-stat-number {
@@ -63,7 +63,7 @@
.access-req-empty { .access-req-empty {
background: var(--bg-secondary); background: var(--bg-secondary);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 8px; border-radius: var(--radius);
padding: var(--space-xl); padding: var(--space-xl);
text-align: center; text-align: center;
color: var(--text-secondary); color: var(--text-secondary);
@@ -79,7 +79,7 @@
.access-req-card { .access-req-card {
background: var(--bg-secondary); background: var(--bg-secondary);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 8px; border-radius: var(--radius);
padding: var(--space-m); padding: var(--space-m);
transition: box-shadow 0.2s; transition: box-shadow 0.2s;
} }
@@ -97,7 +97,6 @@
} }
.access-req-card__thesis h3 { .access-req-card__thesis h3 {
font-size: var(--step-1);
font-weight: 600; font-weight: 600;
color: var(--text-primary); color: var(--text-primary);
margin: 0 0 var(--space-3xs) 0; margin: 0 0 var(--space-3xs) 0;
@@ -171,7 +170,7 @@
.access-req-card__admin-notes { .access-req-card__admin-notes {
background: var(--bg-primary); background: var(--bg-primary);
padding: var(--space-s); padding: var(--space-s);
border-radius: 4px; border-radius: var(--radius);
font-size: var(--step--1); font-size: var(--step--1);
line-height: 1.6; line-height: 1.6;
} }
@@ -237,14 +236,7 @@
/* Dialog textarea/label enhancements */ /* Dialog textarea/label enhancements */
.admin-dialog textarea { .admin-dialog textarea {
width: 100%; width: 100%;
font-family: inherit;
font-size: var(--step--1);
padding: var(--space-2xs); padding: var(--space-2xs);
border: 1px solid var(--border-primary);
border-radius: 4px;
background: var(--bg-primary);
color: var(--text-primary);
resize: vertical;
margin: var(--space-s) 0; margin: var(--space-s) 0;
} }

82
app/public/assets/css/form.css
View File

@@ -31,7 +31,7 @@
font-weight: 400; font-weight: 400;
} }
/* ── Inputs, selects, textareas ─────────────────────────────────────────── */ /* ── Inputs, selects, textareas (admin forms use bottom-border style) ──── */
.admin-form .admin-form
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not( input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not(
[type="hidden"] [type="hidden"]
@@ -42,16 +42,10 @@
.admin-inline-form input[type="number"], .admin-inline-form input[type="number"],
.admin-inline-form select { .admin-inline-form select {
width: 100%; width: 100%;
background: transparent;
border: none; border: none;
border-bottom: 1px solid var(--border-primary); border-bottom: 1px solid var(--border-primary);
font-size: var(--step--1);
font-family: inherit;
padding: var(--space-3xs) 0;
border-radius: 0; border-radius: 0;
transition: border-color 0.15s; padding: var(--space-3xs) 0;
-webkit-appearance: none;
appearance: none;
} }
.admin-form .admin-form
@@ -62,28 +56,16 @@
.admin-form textarea:focus, .admin-form textarea:focus,
.admin-inline-form input:focus, .admin-inline-form input:focus,
.admin-inline-form select:focus { .admin-inline-form select:focus {
outline: none; border-bottom: 2px solid var(--accent-primary);
border-bottom-color: var(--accent-primary);
}
.admin-form input::placeholder,
.admin-form textarea::placeholder {
font-size: var(--step--1);
color: var(--text-tertiary);
} }
.admin-form textarea { .admin-form textarea {
resize: vertical;
min-height: 100px; min-height: 100px;
line-height: 1.5;
} }
/* Select custom arrow */ /* Select custom arrow overrides for bottom-border style */
.admin-form select, .admin-form select,
.admin-inline-form select { .admin-inline-form select {
cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0 center; background-position: right 0 center;
padding-right: 1.2rem; padding-right: 1.2rem;
} }
@@ -133,7 +115,7 @@
background: transparent; background: transparent;
border: 1px dashed var(--border-primary); border: 1px dashed var(--border-primary);
padding: var(--space-3xs) var(--space-2xs); padding: var(--space-3xs) var(--space-2xs);
border-radius: 3px; border-radius: var(--radius);
cursor: pointer; cursor: pointer;
font-family: inherit; font-family: inherit;
} }
@@ -272,10 +254,6 @@
.thesis-add-header h1 { .thesis-add-header h1 {
margin: 0; margin: 0;
font-size: var(--step-1);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
} }
.mode-toggle { .mode-toggle {
@@ -284,7 +262,7 @@
text-decoration: none; text-decoration: none;
white-space: nowrap; white-space: nowrap;
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 3px; border-radius: var(--radius);
padding: var(--space-3xs) var(--space-xs); padding: var(--space-3xs) var(--space-xs);
transition: color 0.15s, border-color 0.15s; transition: color 0.15s, border-color 0.15s;
} }
@@ -317,7 +295,7 @@
.flash-warning, .flash-warning,
.flash-success { .flash-success {
padding: var(--space-xs) var(--space-s); padding: var(--space-xs) var(--space-s);
border-radius: 4px; border-radius: var(--radius);
font-size: var(--step--1); font-size: var(--step--1);
margin-bottom: var(--space-s); margin-bottom: var(--space-s);
border-left: 3px solid; border-left: 3px solid;
@@ -348,7 +326,7 @@
padding: var(--space-3xs) var(--space-xs); padding: var(--space-3xs) var(--space-xs);
background: var(--blue-muted-bg); background: var(--blue-muted-bg);
border: 1px solid var(--blue-muted-border, var(--border-primary)); border: 1px solid var(--blue-muted-border, var(--border-primary));
border-radius: 3px; border-radius: var(--radius);
font-size: var(--step--2); font-size: var(--step--2);
margin-bottom: var(--space-xs); margin-bottom: var(--space-xs);
} }
@@ -372,7 +350,6 @@
.licence-info h3 { .licence-info h3 {
margin-top: var(--space-m); margin-top: var(--space-m);
font-size: var(--step-0);
} }
.licence-degree { .licence-degree {
@@ -380,12 +357,11 @@
padding: var(--space-s); padding: var(--space-s);
background: var(--bg-primary); background: var(--bg-primary);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 4px; border-radius: var(--radius);
} }
.licence-degree h4 { .licence-degree h4 {
margin: 0 0 var(--space-2xs); margin: 0 0 var(--space-2xs);
font-size: var(--step--1);
font-weight: 600; font-weight: 600;
} }
@@ -400,7 +376,6 @@
} }
.licence-generalites h3 { .licence-generalites h3 {
font-size: var(--step-0);
margin-bottom: var(--space-xs); margin-bottom: var(--space-xs);
} }
@@ -428,12 +403,11 @@
text-align: center; text-align: center;
background: var(--bg-primary); background: var(--bg-primary);
border: 2px solid var(--error); border: 2px solid var(--error);
border-radius: 8px; border-radius: var(--radius);
} }
.share-error h1 { .share-error h1 {
color: var(--error); color: var(--error);
font-size: var(--step-1);
margin-bottom: var(--space-s); margin-bottom: var(--space-s);
} }
@@ -449,7 +423,7 @@
background: var(--text-primary); background: var(--text-primary);
color: var(--bg-primary); color: var(--bg-primary);
text-decoration: none; text-decoration: none;
border-radius: 4px; border-radius: var(--radius);
transition: opacity 0.15s; transition: opacity 0.15s;
} }
@@ -473,17 +447,6 @@
width: 100%; width: 100%;
padding: var(--space-xs); padding: var(--space-xs);
margin: var(--space-2xs) 0 var(--space-s); margin: var(--space-2xs) 0 var(--space-s);
font-size: var(--step--1);
font-family: inherit;
border: 1px solid var(--border-primary);
border-radius: 3px;
background: var(--bg-primary);
color: var(--text-primary);
}
.password-gate input[type="password"]:focus {
outline: none;
border-color: var(--accent-primary);
} }
.password-gate button { .password-gate button {
@@ -515,7 +478,7 @@
padding: var(--space-3xs) var(--space-xs); padding: var(--space-3xs) var(--space-xs);
background: var(--bg-secondary); background: var(--bg-secondary);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 4px; border-radius: var(--radius);
min-width: 0; min-width: 0;
max-width: 260px; max-width: 260px;
} }
@@ -524,7 +487,7 @@
width: 48px; width: 48px;
height: 48px; height: 48px;
object-fit: cover; object-fit: cover;
border-radius: 3px; border-radius: var(--radius);
flex-shrink: 0; flex-shrink: 0;
} }
@@ -571,7 +534,7 @@
background: transparent; background: transparent;
border: 1px dashed var(--border-primary); border: 1px dashed var(--border-primary);
padding: var(--space-3xs) var(--space-2xs); padding: var(--space-3xs) var(--space-2xs);
border-radius: 3px; border-radius: var(--radius);
cursor: pointer; cursor: pointer;
font-family: inherit; font-family: inherit;
width: 100%; width: 100%;
@@ -612,7 +575,7 @@
padding: var(--space-3xs) var(--space-xs); padding: var(--space-3xs) var(--space-xs);
background: var(--bg-secondary); background: var(--bg-secondary);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 4px; border-radius: var(--radius);
min-width: 0; min-width: 0;
} }
@@ -708,7 +671,7 @@
padding: var(--space-3xs) var(--space-xs); padding: var(--space-3xs) var(--space-xs);
background: var(--bg-secondary); background: var(--bg-secondary);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 4px; border-radius: var(--radius);
min-width: 0; min-width: 0;
} }
@@ -758,7 +721,7 @@ a.admin-file-name:hover {
padding: 1px 5px; padding: 1px 5px;
background: var(--bg-primary); background: var(--bg-primary);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 3px; border-radius: var(--radius);
color: var(--text-secondary); color: var(--text-secondary);
white-space: nowrap; white-space: nowrap;
} }
@@ -791,7 +754,7 @@ a.admin-file-name:hover {
padding: var(--space-xs) var(--space-s); padding: var(--space-xs) var(--space-s);
background: var(--bg-secondary); background: var(--bg-secondary);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 4px; border-radius: var(--radius);
} }
.recap-file-thumb-link { .recap-file-thumb-link {
@@ -802,7 +765,7 @@ a.admin-file-name:hover {
width: 64px; width: 64px;
height: 64px; height: 64px;
object-fit: cover; object-fit: cover;
border-radius: 3px; border-radius: var(--radius);
display: block; display: block;
} }
@@ -843,7 +806,7 @@ a.recap-file-name:hover {
padding: 1px 6px; padding: 1px 6px;
background: var(--bg-primary); background: var(--bg-primary);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 3px; border-radius: var(--radius);
color: var(--text-secondary); color: var(--text-secondary);
white-space: nowrap; white-space: nowrap;
} }
@@ -868,7 +831,6 @@ a.recap-file-name:hover {
} }
.recap-section h2 { .recap-section h2 {
font-size: var(--step-0);
font-weight: 600; font-weight: 600;
margin: 0 0 var(--space-s); margin: 0 0 var(--space-s);
letter-spacing: 0.04em; letter-spacing: 0.04em;
@@ -917,7 +879,6 @@ a.recap-file-name:hover {
.thanks-success h1, .thanks-success h1,
.thanks-error h1 { .thanks-error h1 {
font-size: var(--step-3);
margin: 0; margin: 0;
letter-spacing: 0.06em; letter-spacing: 0.06em;
} }
@@ -981,7 +942,6 @@ a.recap-file-name:hover {
} }
.retry-email-section h2 { .retry-email-section h2 {
font-size: var(--step-0);
font-weight: 600; font-weight: 600;
margin: 0; margin: 0;
letter-spacing: 0.04em; letter-spacing: 0.04em;
@@ -1017,7 +977,7 @@ a.recap-file-name:hover {
.retry-email-form input[type="email"] { .retry-email-form input[type="email"] {
padding: var(--space-xs) var(--space-s); padding: var(--space-xs) var(--space-s);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 4px; border-radius: var(--radius);
font-size: var(--step-0); font-size: var(--step-0);
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;

20
app/public/assets/css/public.css
View File

@@ -15,32 +15,32 @@
.cards-container { .cards-container {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-template-columns: repeat(3, 1fr);
gap: var(--space-s); gap: var(--space-s);
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: var(--space-xs) var(--space-s) var(--space-m); padding: var(--space-xs) var(--space-s) var(--space-m);
} }
@media (min-width: 1400px) {
.cards-container {
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
}
@media (max-width: 768px) { @media (max-width: 768px) {
.cards-container { .cards-container {
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
} }
} }
@media (max-width: 480px) {
.cards-container {
grid-template-columns: 1fr;
}
}
/* Each card = list item containing a block <a> link */ /* Each card = list item containing a block <a> link */
.card { .card {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
cursor: pointer; cursor: pointer;
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 8px; border-radius: var(--radius);
background: var(--bg-primary); background: var(--bg-primary);
overflow: hidden; overflow: hidden;
transition: transition:
@@ -186,7 +186,7 @@
text-decoration: none; text-decoration: none;
padding: var(--space-3xs) var(--space-2xs); padding: var(--space-3xs) var(--space-2xs);
background: var(--accent-muted); background: var(--accent-muted);
border-radius: 3px; border-radius: var(--radius);
font-size: var(--step--1); font-size: var(--step--1);
} }
@@ -219,7 +219,7 @@
min-height: 2.75rem; min-height: 2.75rem;
padding: 0 var(--space-2xs); padding: 0 var(--space-2xs);
border: 1px solid var(--border-secondary); border: 1px solid var(--border-secondary);
border-radius: 10px; border-radius: var(--radius);
color: var(--text-primary); color: var(--text-primary);
font-size: var(--step--1); font-size: var(--step--1);
text-decoration: none; text-decoration: none;

19
app/public/assets/css/repertoire.css
View File

@@ -14,10 +14,12 @@
/* ---- 6-column index layout ---- */ /* ---- 6-column index layout ---- */
.repertoire-index { .repertoire-index {
display: grid; display: grid;
grid-template-columns: 0.7fr 1.2fr 1.4fr 0.9fr 1.4fr 1fr; grid-template-columns: repeat(6, minmax(15vw, min-content));
grid-template-rows: auto 1fr; grid-template-rows: auto 1fr;
gap: 0; gap: var(--space-s);
justify-content: space-between;
padding: 0; padding: 0;
margin: 0 var(--space-s);
height: 100%; height: 100%;
} }
@@ -73,7 +75,7 @@
font-size: var(--step--2); font-size: var(--step--2);
letter-spacing: 0.1em; letter-spacing: 0.1em;
text-transform: uppercase; text-transform: uppercase;
color: var(--text-secondary); color: var(--text-primary);
font-weight: 400; font-weight: 400;
margin: 0; margin: 0;
padding: var(--space-xs) var(--space-2xs) var(--space-3xs); padding: var(--space-xs) var(--space-2xs) var(--space-3xs);
@@ -105,6 +107,7 @@
margin: 0; margin: 0;
font-family: inherit; font-family: inherit;
font-size: var(--step-0); font-size: var(--step-0);
font-weight: normal;
color: var(--text-primary); color: var(--text-primary);
line-height: 1.4; line-height: 1.4;
cursor: pointer; cursor: pointer;
@@ -138,7 +141,7 @@
/* Years column — big bold numbers */ /* Years column — big bold numbers */
.repertoire-col[data-col="years"] .rep-entry { .repertoire-col[data-col="years"] .rep-entry {
font-size: var(--step-3); font-size: var(--step-3);
font-weight: 700; font-weight: normal;
line-height: 1.1; line-height: 1.1;
letter-spacing: -0.02em; letter-spacing: -0.02em;
padding: var(--space-3xs) 0; padding: var(--space-3xs) 0;
@@ -259,7 +262,7 @@
.search-filter-select { .search-filter-select {
font-size: var(--step--1); font-size: var(--step--1);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 3px; border-radius: var(--radius);
padding: var(--space-3xs) var(--space-2xs); padding: var(--space-3xs) var(--space-2xs);
background: var(--bg-primary); background: var(--bg-primary);
color: var(--text-primary); color: var(--text-primary);
@@ -268,7 +271,7 @@
} }
.search-filter-select:focus { .search-filter-select:focus {
border-color: var(--accent-primary); border: 2px solid var(--accent-primary);
} }
.search-apply-btn { .search-apply-btn {
@@ -299,7 +302,7 @@
min-height: 2.75rem; min-height: 2.75rem;
padding: 0 var(--space-2xs); padding: 0 var(--space-2xs);
border: 1px solid var(--border-secondary); border: 1px solid var(--border-secondary);
border-radius: 10px; border-radius: var(--radius);
color: var(--text-primary); color: var(--text-primary);
font-size: var(--step--1); font-size: var(--step--1);
text-decoration: none; text-decoration: none;
@@ -349,7 +352,7 @@
background: var(--bg-primary, #fff); background: var(--bg-primary, #fff);
border: 1px solid var(--border-primary, #ddd); border: 1px solid var(--border-primary, #ddd);
box-shadow: 0 4px 20px rgba(0,0,0,.13); box-shadow: 0 4px 20px rgba(0,0,0,.13);
border-radius: 4px; border-radius: var(--radius);
overflow: hidden; overflow: hidden;
pointer-events: auto; pointer-events: auto;
max-height: 80vh; max-height: 80vh;

32
app/public/assets/css/system.css
View File

@@ -32,7 +32,7 @@
.sys-status-section { .sys-status-section {
background: var(--bg-secondary); background: var(--bg-secondary);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 6px; border-radius: var(--radius);
padding: var(--space-s) var(--space-m); padding: var(--space-s) var(--space-m);
margin-bottom: var(--space-m); margin-bottom: var(--space-m);
} }
@@ -46,7 +46,7 @@
background: none; background: none;
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
color: var(--text-secondary); color: var(--text-secondary);
border-radius: 3px; border-radius: var(--radius);
font-size: var(--step--2); font-size: var(--step--2);
font-family: inherit; font-family: inherit;
padding: var(--space-3xs) var(--space-2xs); padding: var(--space-3xs) var(--space-2xs);
@@ -80,7 +80,7 @@
.srv-card { .srv-card {
background: var(--bg-primary); background: var(--bg-primary);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 5px; border-radius: var(--radius);
padding: var(--space-s) var(--space-m); padding: var(--space-s) var(--space-m);
} }
.srv-card__header { .srv-card__header {
@@ -138,7 +138,7 @@
.php-item { .php-item {
background: var(--bg-primary); background: var(--bg-primary);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 4px; border-radius: var(--radius);
padding: var(--space-3xs) var(--space-xs); padding: var(--space-3xs) var(--space-xs);
} }
.php-item__key { .php-item__key {
@@ -157,14 +157,14 @@
/* ── Disk bar ──────────────────────────────────────────────────────────── */ /* ── Disk bar ──────────────────────────────────────────────────────────── */
.disk-bar-wrap { .disk-bar-wrap {
background: var(--border-primary); background: var(--border-primary);
border-radius: 3px; border-radius: var(--radius);
height: 6px; height: 6px;
margin-top: var(--space-2xs); margin-top: var(--space-2xs);
overflow: hidden; overflow: hidden;
} }
.disk-bar { .disk-bar {
height: 100%; height: 100%;
border-radius: 3px; border-radius: var(--radius);
width: var(--disk-pct, 0%); width: var(--disk-pct, 0%);
background: var(--disk-color, var(--accent-green)); background: var(--disk-color, var(--accent-green));
transition: width .3s; transition: width .3s;
@@ -198,7 +198,7 @@
rgba(0,0,0,0.03) 6px, rgba(0,0,0,0.03) 6px,
rgba(0,0,0,0.03) 12px rgba(0,0,0,0.03) 12px
); );
border-radius: 4px; border-radius: var(--radius);
animation: sys-panel-shimmer 1s linear infinite; animation: sys-panel-shimmer 1s linear infinite;
background-size: 200% 200%; background-size: 200% 200%;
} }
@@ -220,13 +220,7 @@
color: var(--text-secondary); color: var(--text-secondary);
} }
.log-toolbar select { .log-toolbar select {
background: var(--bg-primary);
border: 1px solid var(--border-primary);
color: var(--text-primary);
border-radius: 4px;
padding: var(--space-3xs) var(--space-xs); padding: var(--space-3xs) var(--space-xs);
font-size: var(--step--1);
font-family: inherit;
} }
.log-toolbar select:focus { outline: 2px solid var(--accent-primary); } .log-toolbar select:focus { outline: 2px solid var(--accent-primary); }
@@ -244,7 +238,7 @@
.log-unavailable { .log-unavailable {
background: var(--bg-secondary); background: var(--bg-secondary);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 4px; border-radius: var(--radius);
padding: var(--space-m); padding: var(--space-m);
color: var(--text-secondary); color: var(--text-secondary);
font-size: var(--step--1); font-size: var(--step--1);
@@ -268,7 +262,7 @@
.log-output { .log-output {
background: var(--bg-secondary); background: var(--bg-secondary);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 4px; border-radius: var(--radius);
padding: var(--space-s); padding: var(--space-s);
overflow-x: auto; overflow-x: auto;
font-family: ui-monospace, "SFMono-Regular", Consolas, "Courier New", monospace; font-family: ui-monospace, "SFMono-Regular", Consolas, "Courier New", monospace;
@@ -282,7 +276,7 @@
display: block; display: block;
white-space: pre; white-space: pre;
padding: var(--space-3xs) var(--space-3xs); padding: var(--space-3xs) var(--space-3xs);
border-radius: 2px; border-radius: var(--radius);
color: var(--text-primary); color: var(--text-primary);
} }
.log-line + .log-line { border-top: 1px solid var(--border-primary); } .log-line + .log-line { border-top: 1px solid var(--border-primary); }
@@ -302,7 +296,7 @@
.log-count-badge { .log-count-badge {
background: var(--bg-secondary); background: var(--bg-secondary);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 3px; border-radius: var(--radius);
font-size: var(--step--2); font-size: var(--step--2);
padding: var(--space-3xs) var(--space-2xs); padding: var(--space-3xs) var(--space-2xs);
color: var(--text-secondary); color: var(--text-secondary);
@@ -342,7 +336,7 @@
font-weight: 400; font-weight: 400;
font-family: ui-monospace, monospace; font-family: ui-monospace, monospace;
padding: var(--space-3xs) var(--space-3xs); padding: var(--space-3xs) var(--space-3xs);
border-radius: 3px; border-radius: var(--radius);
margin-left: var(--space-xs); margin-left: var(--space-xs);
vertical-align: middle; vertical-align: middle;
line-height: 1.6; line-height: 1.6;
@@ -364,7 +358,7 @@
font-size: var(--step--2); font-size: var(--step--2);
font-family: ui-monospace, monospace; font-family: ui-monospace, monospace;
padding: var(--space-3xs) var(--space-2xs); padding: var(--space-3xs) var(--space-2xs);
border-radius: 3px; border-radius: var(--radius);
margin-left: var(--space-2xs); margin-left: var(--space-2xs);
vertical-align: middle; vertical-align: middle;
} }

33
app/public/assets/css/tfe.css
View File

@@ -37,15 +37,9 @@
line-height: 1.3; line-height: 1.3;
} }
/* Title (h1) — primary heading, very large */ /* Title (h1) — inherits global scale from common.css */
.tfe-title { .tfe-title {
font-family: var(--font-display);
font-size: var(--step-3);
font-weight: 400;
color: var(--text-primary);
margin: 0; margin: 0;
line-height: 1.15;
letter-spacing: -0.01em;
} }
/* Metadata description list — target <dl> directly inside article > header */ /* Metadata description list — target <dl> directly inside article > header */
@@ -111,14 +105,14 @@ article dl dd a {
aside figure { aside figure {
overflow: hidden; overflow: hidden;
margin: 0; margin: 0;
border-radius: 8px; border-radius: var(--radius);
} }
aside figure img { aside figure img {
width: 100%; width: 100%;
height: auto; height: auto;
display: block; display: block;
border-radius: 8px; border-radius: var(--radius);
} }
aside figure embed, aside figure embed,
@@ -165,7 +159,7 @@ aside figcaption {
padding: var(--space-s) var(--space-m); padding: var(--space-s) var(--space-m);
background: var(--bg-secondary); background: var(--bg-secondary);
border: 1px solid var(--border-primary); border: 1px solid var(--border-primary);
border-radius: 6px; border-radius: var(--radius);
flex-wrap: wrap; flex-wrap: wrap;
} }
@@ -219,7 +213,7 @@ aside figcaption {
.tfe-restricted-access { .tfe-restricted-access {
background: var(--surface); background: var(--surface);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 8px; border-radius: var(--radius);
padding: var(--space-m); padding: var(--space-m);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -260,25 +254,14 @@ aside figcaption {
.tfe-access-request-form input[type="email"], .tfe-access-request-form input[type="email"],
.tfe-access-request-form textarea { .tfe-access-request-form textarea {
font-family: inherit;
font-size: var(--step--1);
padding: var(--space-2xs) var(--space-3xs); padding: var(--space-2xs) var(--space-3xs);
border: 1px solid var(--border); border-color: var(--border);
border-radius: 4px;
background: var(--background); background: var(--background);
color: var(--text-primary);
transition: border-color 0.2s;
} }
.tfe-access-request-form input[type="email"]:focus, .tfe-access-request-form input[type="email"]:focus,
.tfe-access-request-form textarea:focus { .tfe-access-request-form textarea:focus {
outline: none; border: 2px solid var(--accent);
border-color: var(--accent);
}
.tfe-access-request-form textarea {
resize: vertical;
min-height: 80px;
} }
.tfe-btn-request-access { .tfe-btn-request-access {
@@ -298,7 +281,7 @@ aside figcaption {
.tfe-access-message { .tfe-access-message {
font-size: var(--step--1); font-size: var(--step--1);
padding: var(--space-2xs); padding: var(--space-2xs);
border-radius: 4px; border-radius: var(--radius);
margin-top: var(--space-3xs); margin-top: var(--space-3xs);
} }

3
app/public/assets/css/variables.css
View File

@@ -101,6 +101,9 @@
--border-primary: #dddddd; --border-primary: #dddddd;
--border-secondary: #cccccc; --border-secondary: #cccccc;
/* Border radius */
--radius: 10px;
/* Status */ /* Status */
--success: #5cd69d; --success: #5cd69d;
--error: #f25a5a; --error: #f25a5a;

118
app/templates/admin/index.php
View File

@@ -79,64 +79,74 @@ document.addEventListener('DOMContentLoaded', () => {
<div class="admin-list-toolbar"> <div class="admin-list-toolbar">
<h1>Liste des TFE</h1> <h1>Liste des TFE</h1>
<dl class="admin-stats">
<div class="admin-stat">
<dt class="admin-stat__label">Total</dt>
<dd class="admin-stat__number"><?= $stats['total'] ?></dd>
</div>
<div class="admin-stat">
<dt class="admin-stat__label">Publiés</dt>
<dd class="admin-stat__number"><?= $stats['published'] ?></dd>
</div>
<div class="admin-stat">
<dt class="admin-stat__label">Attente</dt>
<dd class="admin-stat__number"><?= $stats['pending'] ?></dd>
</div>
</dl>
<form class="admin-filters" method="get" action="/admin/"> <form class="admin-filters" method="get" action="/admin/">
<input type="text" name="search" placeholder="Titre, auteur..." <div class="admin-filters__search">
value="<?= htmlspecialchars($searchQuery) ?>"> <input type="text" name="search" placeholder="Titre, auteur..."
<select name="year"> value="<?= htmlspecialchars($searchQuery) ?>">
<option value="">Année</option> <button type="submit" class="btn btn--primary admin-filters-btn">Filtrer</button>
<?php foreach ($years as $y): ?> <?php if ($searchQuery || $yearFilter || $orientationFilter || $apFilter): ?>
<option value="<?= $y ?>" <?= $yearFilter == $y ? 'selected' : '' ?>><?= $y ?></option> <button type="button" class="btn btn--secondary admin-filters-reset"
<?php endforeach; ?> onclick="window.location='/admin/'">&#x2715; Réinitialiser</button>
</select> <?php endif; ?>
<select name="orientation"> </div>
<option value="">Orientation</option> <div class="admin-filters__dropdowns">
<?php foreach ($orientations as $o): ?> <select name="year">
<option value="<?= $o['id'] ?>" <?= $orientationFilter == $o['id'] ? 'selected' : '' ?>> <option value="">Année</option>
<?= htmlspecialchars($o['name']) ?> <?php foreach ($years as $y): ?>
</option> <option value="<?= $y ?>" <?= $yearFilter == $y ? 'selected' : '' ?>><?= $y ?></option>
<?php endforeach; ?> <?php endforeach; ?>
</select> </select>
<select name="ap"> <select name="orientation">
<option value="">AP</option> <option value="">Orientation</option>
<?php foreach ($apPrograms as $ap): ?> <?php foreach ($orientations as $o): ?>
<option value="<?= $ap['id'] ?>" <?= $apFilter == $ap['id'] ? 'selected' : '' ?>> <option value="<?= $o['id'] ?>" <?= $orientationFilter == $o['id'] ? 'selected' : '' ?>>
<?= htmlspecialchars($ap['name']) ?> <?= htmlspecialchars($o['name']) ?>
</option> </option>
<?php endforeach; ?> <?php endforeach; ?>
</select> </select>
<button type="submit" class="btn btn--primary admin-filters-btn">Filtrer</button> <select name="ap">
<?php if ($searchQuery || $yearFilter || $orientationFilter || $apFilter): ?> <option value="">AP</option>
<button type="button" class="btn btn--secondary admin-filters-reset" <?php foreach ($apPrograms as $ap): ?>
onclick="window.location='/admin/'">&#x2715; Réinitialiser</button> <option value="<?= $ap['id'] ?>" <?= $apFilter == $ap['id'] ? 'selected' : '' ?>>
<?php endif; ?> <?= htmlspecialchars($ap['name']) ?>
</option>
<?php endforeach; ?>
</select>
</div>
</form> </form>
<div class="admin-list-toolbar__right"> <div class="admin-list-toolbar__right">
<dl class="admin-stats"> <div class="admin-btn-group">
<div class="admin-stat"> <a href="/admin/add.php" class="btn btn--primary btn--sm">+ Ajouter un TFE</a>
<dt class="admin-stat__label">Total</dt> <a href="/admin/tags.php" class="btn btn--primary btn--sm">Mots-clés</a>
<dd class="admin-stat__number"><?= $stats['total'] ?></dd> </div>
</div> <div class="admin-btn-group">
<div class="admin-stat"> <button type="button" class="btn btn--primary btn--sm" id="import-dialog-btn"
<dt class="admin-stat__label">Publiés</dt> onclick="document.getElementById('import-dialog').showModal()">
<dd class="admin-stat__number"><?= $stats['published'] ?></dd> Importer un CSV
</div> </button>
<div class="admin-stat"> <a href="/admin/actions/export-csv.php" class="btn btn--primary btn--sm">
<dt class="admin-stat__label">Attente</dt> Exporter CSV
<dd class="admin-stat__number"><?= $stats['pending'] ?></dd> </a>
</div> <a href="/admin/actions/export-files.php" class="btn btn--primary btn--sm">
</dl> Exporter fichiers
<a href="/admin/add.php" class="btn btn--primary btn--sm">Ajouter un TFE</a> </a>
<button type="button" class="btn btn--primary btn--sm" id="import-dialog-btn" </div>
onclick="document.getElementById('import-dialog').showModal()">
Importer un CSV
</button>
<a href="/admin/actions/export-csv.php" class="btn btn--primary btn--sm">
Exporter CSV
</a>
<a href="/admin/actions/export-files.php" class="btn btn--primary btn--sm">
Exporter fichiers
</a>
</div> </div>
</div> </div>

45
app/templates/header.php
View File

@@ -12,13 +12,14 @@ $_thesisId = $_GET['id'] ?? null;
<?php if ($_isAdmin): ?> <?php if ($_isAdmin): ?>
<nav aria-label="Navigation admin"> <nav aria-label="Navigation admin">
<a href="/" target="_blank" rel="noopener noreferrer"> <div class="nav-left">
<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><path d="M208,72H128V32a8,8,0,0,0-13.66-5.66l-96,96a8,8,0,0,0,0,11.32l96,96A8,8,0,0,0,128,224V184h80a16,16,0,0,0,16-16V88A16,16,0,0,0,208,72Zm0,96H120a8,8,0,0,0-8,8v28.69L35.31,128,112,51.31V80a8,8,0,0,0,8,8h88Z"></path></svg>XAMXAM<span class="sr-only"> (site public, nouvel onglet)</span> <a href="/" target="_blank" rel="noopener noreferrer" class="nav-logo">
</a> <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 256 256"><path d="M208,72H128V32a8,8,0,0,0-13.66-5.66l-96,96a8,8,0,0,0,0,11.32l96,96A8,8,0,0,0,128,224V184h80a16,16,0,0,0,16-16V88A16,16,0,0,0,208,72Zm0,96H120a8,8,0,0,0-8,8v28.69L35.31,128,112,51.31V80a8,8,0,0,0,8,8h88Z"></path></svg>XAMXAM<span class="sr-only"> (site public, nouvel onglet)</span>
<ul> </a>
</div>
<ul class="nav-right-links">
<li><a href="/admin/" <?= $_currentPage === 'index.php' ? 'aria-current="page"' : '' ?>>Liste des TFE</a></li> <li><a href="/admin/" <?= $_currentPage === 'index.php' ? 'aria-current="page"' : '' ?>>Liste des TFE</a></li>
<li><a href="/admin/contenus.php" <?= in_array($_currentPage, ['contenus.php', 'contenus-edit.php']) ? 'aria-current="page"' : '' ?>>Contenus</a></li> <li><a href="/admin/contenus.php" <?= in_array($_currentPage, ['contenus.php', 'contenus-edit.php']) ? 'aria-current="page"' : '' ?>>Contenus</a></li>
<li><a href="/admin/tags.php" <?= $_currentPage === 'tags.php' ? 'aria-current="page"' : '' ?>>Mots-clés</a></li>
<li><a href="/admin/acces.php" <?= in_array($_currentPage, ['acces.php', 'file-access.php', 'acces-etudiante.php']) ? 'aria-current="page"' : '' ?>> <li><a href="/admin/acces.php" <?= in_array($_currentPage, ['acces.php', 'file-access.php', 'acces-etudiante.php']) ? 'aria-current="page"' : '' ?>>
Accès Accès
<?php if (isset($pendingCount) && $pendingCount > 0): ?> <?php if (isset($pendingCount) && $pendingCount > 0): ?>
@@ -26,8 +27,8 @@ $_thesisId = $_GET['id'] ?? null;
<?php endif; ?> <?php endif; ?>
</a></li> </a></li>
<li><a href="/admin/parametres.php" <?= in_array($_currentPage, ['parametres.php', 'system.php', 'status.php', 'logs.php']) ? 'aria-current="page"' : '' ?>>Paramètres</a></li> <li><a href="/admin/parametres.php" <?= in_array($_currentPage, ['parametres.php', 'system.php', 'status.php', 'logs.php']) ? 'aria-current="page"' : '' ?>>Paramètres</a></li>
<?php if ($_thesisId && in_array($_currentPage, ['edit.php', 'recapitulatif.php'])): ?> <?php if ($_thesisId && $_currentPage === 'recapitulatif.php'): ?>
<li><a href="/admin/edit.php?id=<?= intval($_thesisId) ?>" <?= $_currentPage === 'edit.php' ? 'aria-current="page"' : '' ?>>Modifier</a></li> <li><a href="/admin/edit.php?id=<?= intval($_thesisId) ?>">Modifier</a></li>
<?php endif; ?> <?php endif; ?>
<?php if ($_isAdmin && AdminAuth::hasPassword()): ?> <?php if ($_isAdmin && AdminAuth::hasPassword()): ?>
<li data-nav-logout><a href="/admin/logout.php" aria-label="Déconnexion"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M120,216a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H56V208h56A8,8,0,0,1,120,216Zm109.66-93.66-40-40a8,8,0,0,0-11.32,11.32L204.69,120H112a8,8,0,0,0,0,16h92.69l-26.35,26.34a8,8,0,0,0,11.32,11.32l40-40A8,8,0,0,0,229.66,122.34Z"></path></svg><span class="sr-only">Déconnexion</span></a></li> <li data-nav-logout><a href="/admin/logout.php" aria-label="Déconnexion"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" viewBox="0 0 256 256"><path d="M120,216a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H56V208h56A8,8,0,0,1,120,216Zm109.66-93.66-40-40a8,8,0,0,0-11.32,11.32L204.69,120H112a8,8,0,0,0,0,16h92.69l-26.35,26.34a8,8,0,0,0,11.32,11.32l40-40A8,8,0,0,0,229.66,122.34Z"></path></svg><span class="sr-only">Déconnexion</span></a></li>
@@ -90,21 +91,23 @@ $searchBarValue = $searchBarValue ?? $_GET['query'] ?? '';
?> ?>
<div class="header-search-wrap"> <div class="header-search-wrap">
<form method="GET" action="/search" <form method="GET" action="/search"
role="search" aria-label="Recherche"> role="search" aria-label="Recherche" class="header-search-form">
<label for="site-search-input" class="sr-only">Recherche</label> <label for="site-search-input" class="sr-only">Recherche</label>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" <div class="header-search-input-wrap">
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
aria-hidden="true" focusable="false"> fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/> aria-hidden="true" focusable="false" class="header-search-icon">
</svg> <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
<input </svg>
id="site-search-input" <input
type="text" id="site-search-input"
name="query" type="text"
placeholder="Recherche..." name="query"
value="<?= htmlspecialchars($searchBarValue) ?>" placeholder="Recherche..."
autocomplete="off" value="<?= htmlspecialchars($searchBarValue) ?>"
> autocomplete="off"
>
</div>
</form> </form>
</div> </div>
<?php endif; ?> <?php endif; ?>