mirror of
https://codeberg.org/PostERG/xamxam.git
synced 2026-05-06 19:19:19 +02:00
f18e3381ea
The file had accumulated severe corruption in its lower half (garbled selector text, variable names spliced into property values, orphaned declarations, broken nesting) alongside hardcoded hex colours throughout. Rewrote the entire file cleanly: - Every colour is now a var() referencing a token defined in variables.css: --accent-primary/secondary/foreground, --accent-blue/green/yellow/red, --bg-secondary/tertiary, --border-primary, --text-primary/secondary/tertiary, --error, --warning, --success, --accent-muted. - Zero raw hex values remain in admin.css. - Removed the corrupted/dead CSS from the bottom half and reconstructed all selectors from what the templates actually use (audited via grep). - Fixed structural issues: broken border shorthand, nested rules that were not valid CSS, orphaned declaration blocks. - New/restored rules: .admin-maintenance-bar (was corrupted), .status-access variants (was corrupted), .admin-section-title--danger, .admin-danger-zone, .admin-account-status (all reconstructed cleanly). - .admin-btn--warning and .admin-btn--danger now use var(--accent-yellow) and var(--accent-red) instead of hardcoded dark hex values. - .admin-btn-remove hover now uses var(--error) instead of #e55. - .admin-btn-unpublish now uses var(--bg-secondary)/var(--text-tertiary) instead of hardcoded grey hex values. - select option background colours removed (browser chrome, not styleable cross-platform). Templates: replace 4 inline var(--admin-text-muted) with var(--text-secondary) in index.php, thanks.php, import.php.
60 lines
4.8 KiB
Markdown
60 lines
4.8 KiB
Markdown
# CSS & Semantic HTML Refactor
|
||
|
||
## CSS class audit: replace with semantic selectors (`admin.css` / `main.css` / `tfe.css` / `search.css`)
|
||
|
||
- [ ] **`admin.css`**: Replace `.admin-main` with `.admin-body main`
|
||
- [ ] **`admin.css`**: Replace `.admin-page-title` with `.admin-body main > h1`
|
||
- [ ] **`admin.css`**: Replace `.admin-alert` / `.admin-alert--error` / `.admin-alert--success` with `[role="alert"]` / `data-type="error|success"` attribute
|
||
- [ ] **`admin.css`**: Replace `.admin-form-row` with `.admin-body form > div` or CSS grid on `<form>` children
|
||
- [ ] **`admin.css`**: Replace `.admin-label` with `.admin-body form label`
|
||
- [ ] **`admin.css`**: Replace `.admin-input` / `.admin-select` / `.admin-textarea` with native element selectors
|
||
- [ ] **`admin.css`**: Replace `.admin-hint` with `.admin-body form small`
|
||
- [ ] **`admin.css`**: Replace `.admin-table` with `.admin-body table`
|
||
- [ ] **`admin.css`**: Replace `.admin-fieldset` / `.admin-fieldset-legend` with `.admin-body fieldset` / `.admin-body legend`
|
||
- [ ] **`main.css`**: Replace `.card__caption` with `.home-body .cards-container li p` or `li > a > p`
|
||
- [ ] **`main.css`**: Replace `.card__media` with `.home-body figure`
|
||
- [ ] **`tfe.css`**: Replace `.tfe-meta-list` selectors with `article dl`, `article dt`, `article dd`
|
||
- [ ] **`tfe.css`**: Replace `.tfe-media-block` with `aside figure`
|
||
- [ ] **`tfe.css`**: Replace `.tfe-file-caption` with `aside figcaption`
|
||
- [ ] **`search.css`**: Replace `.repertoire-col > h2` — use `.repertoire-index section > h2`
|
||
- [x] **`system.php`**: Move inline `<style>` block to `system.css`
|
||
|
||
## Template HTML changes to match
|
||
|
||
- [ ] In all admin templates, replace `<p class="admin-hint">` with `<small>` elements
|
||
- [ ] In `tfe.php`, remove `class="tfe-meta-list"` — target via `article dl`
|
||
- [ ] In `tfe.php`, remove `class="tfe-media-block"` — target via `aside figure`
|
||
- [ ] In `tfe.php`, remove `class="tfe-file-caption"` — target via `aside figcaption`
|
||
- [ ] In `index.php`, remove `class="card__caption"` — target via `li > a > p`
|
||
|
||
## Scattered inline styles in templates
|
||
|
||
- [ ] `tfe.php` line 146: `style="align-items:start;"` → `.tfe-meta-item--top` in `tfe.css`
|
||
- [ ] `tfe.php` lines 148, 170-172, 193: `font-style:italic`, `margin-top:1.5rem`, `font-size:.88rem;color:#666`, `color:#999;font-style:italic` → `.tfe-note-value`, `.tfe-back-link`, `.tfe-restricted` in `tfe.css`
|
||
- [ ] `admin/edit.php`: multiple `style=` on `.admin-form-row` and banner preview → modifier classes in `admin.css`
|
||
|
||
## Admin semantic HTML (sections IX–XVI)
|
||
|
||
- [ ] **`add.php`/`edit.php`**: Replace `<div class="admin-form-row">` with CSS grid on `<form>` children (~20 divs in add.php, ~22 in edit.php)
|
||
- [ ] **`add.php`/`edit.php`**: Replace inner wrapper `<div>` in multi-control rows — use `<small>` for hints, remove the wrapper div
|
||
- [ ] **`add.php`/`edit.php`**: Replace `<div class="admin-checkbox-list">` with `<ul>`; each `<label class="admin-checkbox-label">` becomes `<li>` containing `<label>`
|
||
- [ ] **`add.php`/`edit.php`**: Replace `<div class="admin-submit-wrap">` — remove; apply styles directly to `form > button:last-child`
|
||
- [ ] **`add.php`/`edit.php`**: Replace `<div class="admin-alert admin-alert--error/--success">` with `<p role="alert">` / `<p role="status">`
|
||
- [ ] **`index.php`**: Replace `<div class="admin-stats">` / `<div class="admin-stat">` children with `<dl>/<dt>/<dd>`
|
||
- [ ] **`index.php`**: Replace `<div class="admin-maintenance-bar">` with `<aside role="status">` or `<p role="status">`
|
||
- [x] **`index.php`**: Add `role="toolbar" aria-label="Actions groupées"` to `<div class="admin-bulk-actions">`
|
||
- [ ] **`index.php`**: Add `scope="col"` to all `<th>` cells in the admin table
|
||
- [ ] **`index.php`**: Add non-colour indicator + `aria-label="Statut : …"` to status badge `<span>` elements
|
||
- [ ] **`tags.php`**: Add `scope="col"` to `<th>` cells
|
||
- [ ] **`tags.php`**: Move inline `style="margin-top:.35rem;"` on forms → `.admin-inline-form + .admin-inline-form` selector
|
||
- [ ] **`thanks.php`**: Replace `<div class="admin-thesis-info">` with `<section>` + `<h2>` heading; CSS targets `main > section`
|
||
- [ ] **`account.php`**: Replace `<div class="admin-account-status">` with `<dl>`; `__row` → `<div>`, `__label` → `<dt>`
|
||
- [ ] **`account.php`**: Replace `<div class="admin-danger-zone__description">` with `<p>`
|
||
- [ ] **`account.php`**: Move `style="margin-top:3rem;"` on danger zone heading → CSS modifier class
|
||
- [ ] **`login.php`**: Wrap login content in `<main>` (currently no main landmark)
|
||
- [ ] **`login.php`**: Extract inline styles on `.admin-form-row` and `.admin-submit-wrap` → `.admin-form-row--compact` modifier in `admin.css`
|
||
|
||
## Favicon
|
||
|
||
- [ ] **`admin_favicon.svg` used as public-facing favicon** — rename or create a distinct `favicon.svg` so admin and public can diverge without naming confusion
|