diff --git a/TODO.md b/TODO.md index 2b0753e..5f5cbd9 100644 --- a/TODO.md +++ b/TODO.md @@ -1,12 +1,6 @@ # TODO -- [x] Add fixed top gradient on partage main element, mirror of bottom gradient -- [x] Remove bottom border on `.thesis-add-header` -- [x] Add subtitle "Formulaire pour XAMXAM" below partage header, with Ductus link to / -- [x] Switch `.thesis-add-header` to grid layout -- [ ] Create `admin/operation.php` — unified add/edit page -- [ ] Wire up route: `?id=` → edit mode, no id → add mode -- [ ] Update all references: `add.php` → `operation.php`, `edit.php` → `operation.php?id=` -- [ ] Keep old `add.php` and `edit.php` as redirect stubs -- [ ] Keep action endpoints (`actions/formulaire.php`, `actions/edit.php`) unchanged -- [ ] Test both flows +- [x] Move default semantic form element styles (checkbox, radio, select) from admin.css/form.css into common.css +- [x] Keep specific layouts/classes in form.css (admin-form grid, checkbox-group layout, etc.) +- [x] Ensure selects, checkboxes, and radios are properly styled globally +- [x] Converge towards the styled form appearance rather than unstyled diff --git a/app/public/assets/css/admin.css b/app/public/assets/css/admin.css index d7f4edc..6f6646a 100644 --- a/app/public/assets/css/admin.css +++ b/app/public/assets/css/admin.css @@ -653,13 +653,11 @@ .admin-input--inline, .admin-inline-form input[type="text"] { - font-size: var(--step--1); width: 160px; } .admin-select--inline, .admin-inline-form select { - font-size: var(--step--1); width: 160px; } @@ -877,7 +875,7 @@ background: var(--bg-secondary); } -.param-maintenance-row:has( .param-btn-warning ) { +.param-maintenance-row:has( .btn--warning ) { background: var(--warning-muted-bg); border-color: var(--warning); } @@ -900,21 +898,17 @@ display: flex; flex-direction: column; gap: var(--space-xs); + padding-top: var(--space-s); } .param-form fieldset > * { margin-bottom: 0; } -.param-form legend { - padding: 0 var(--space-xs); -} - .param-checkbox { display: flex; align-items: flex-start; gap: var(--space-xs); - font-size: var(--step--1); cursor: pointer; } @@ -924,11 +918,6 @@ } .param-checkbox input[type="checkbox"] { - accent-color: var(--accent-primary); - width: 16px; - height: 16px; - cursor: pointer; - flex-shrink: 0; margin-top: 2px; } @@ -936,13 +925,7 @@ cursor: not-allowed; } -.param-checkbox small { - color: var(--text-secondary); - font-size: var(--step--2); -} - .param-note { - font-size: var(--step--1); color: var(--text-secondary); margin: 0; } @@ -951,7 +934,6 @@ display: flex; flex-direction: column; gap: var(--space-xs); - font-size: var(--step--1); margin-bottom: var(--space-m); } @@ -999,26 +981,6 @@ .param-form input[type="password"] { width: 100%; max-width: 380px; - border: none; - border-bottom: 1px solid var(--border-primary); - border-radius: 0; - padding: var(--space-3xs) 0; -} - -.param-form input[type="password"]:focus { - border-bottom: 2px solid var(--accent-primary); -} - -.param-form > button { - /* deprecated alias for .btn--primary; kept for backward-compat */ -} - -.param-btn-warning { - /* deprecated alias for .btn--warning; kept for backward-compat */ -} - -.param-btn-danger { - /* deprecated alias for .btn--danger; kept for backward-compat */ } .param-danger-zone { @@ -1029,11 +991,9 @@ .param-danger-zone legend { color: var(--error); font-size: var(--step-0); - padding: 0 var(--space-xs); } .param-danger-zone p { - font-size: var(--step--1); color: var(--text-secondary); margin-bottom: var(--space-xs); } @@ -1049,27 +1009,17 @@ .param-export-zone legend { font-size: var(--step-0); - padding: 0 var(--space-xs); } .param-export-zone p { - font-size: var(--step--1); color: var(--text-secondary); margin-bottom: var(--space-xs); } -.param-btn-export { - /* deprecated alias for .btn--primary; kept for backward-compat */ -} - - /* ── SMTP section ─────────────────────────────────────────────────────── */ .param-smtp-test { margin-top: var(--space-m); } -.param-smtp-test-form { - margin-top: var(--space-s); -} .param-smtp-test-row { display: flex; align-items: flex-end; @@ -1080,8 +1030,6 @@ flex: 1 1 260px; } .param-smtp-test-row label { - display: block; - font-size: var(--step--1); font-weight: 600; margin-bottom: var(--space-2xs); color: var(--text-secondary); @@ -1103,7 +1051,6 @@ display: flex; align-items: center; gap: var(--space-s); - font-size: var(--step--1); margin: var(--space-xs) 0 var(--space-s); color: var(--text-secondary); } @@ -1124,7 +1071,6 @@ display: flex; flex-direction: column; gap: var(--space-3xs); - font-size: var(--step--1); color: var(--text-secondary); } .param-grid input[type="text"], @@ -1132,27 +1078,12 @@ .param-grid input[type="email"], .param-grid select { width: 100%; - border: none; - border-bottom: 1px solid var(--border-primary); - border-radius: 0; - padding: var(--space-3xs) 0; -} -.param-grid input:focus, -.param-grid select:focus { - border-bottom: 2px solid var(--accent-primary); -} -.param-grid select { - background-position: right 0 center; - padding-right: 1.2rem; -} -.param-fieldset-inline legend { - padding: 0 var(--space-xs); } /* SMTP field validation error state */ .param-grid input[aria-invalid="true"], .param-grid select[aria-invalid="true"] { - border-bottom-color: var(--search-error-border, #c0392b); + border-color: var(--search-error-border, #c0392b); } .param-field-error { @@ -1707,11 +1638,6 @@ .fhb-name-input { width: 100%; max-width: 400px; - padding: var(--space-2xs) var(--space-xs); - border: 1px solid var(--border-primary); - border-radius: var(--radius); - font-size: var(--step--1); - font-family: var(--font-body); } .fhb-name-input:focus { diff --git a/app/public/assets/css/common.css b/app/public/assets/css/common.css index 512eeff..fe4f101 100644 --- a/app/public/assets/css/common.css +++ b/app/public/assets/css/common.css @@ -411,12 +411,13 @@ label { margin-bottom: var(--space-3xs); } +/* ── Text inputs, selects, textareas ─────────────────────────────── */ + 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); @@ -433,7 +434,6 @@ input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not( ):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); @@ -451,14 +451,45 @@ textarea { line-height: 1.5; } +/* ── Select ──────────────────────────────────────────────────────── */ + select { + font-family: inherit; + font-size: var(--step--1); + padding: var(--space-2xs) var(--space-xs); + padding-right: 1.75rem; + border: 1px solid var(--border-primary); + border-radius: var(--radius); + background: transparent; + color: var(--text-primary); 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; + background-position: right 0.55rem center; -webkit-appearance: none; appearance: none; + transition: border-color 0.15s; +} + +select:focus { + outline: none; + border: 2px solid var(--accent-primary); +} + +/* ── Checkboxes & radios ─────────────────────────────────────────── */ + +input[type="checkbox"], +input[type="radio"] { + accent-color: var(--accent-primary); + width: 16px; + height: 16px; + cursor: pointer; + flex-shrink: 0; + margin: 0; +} + +input[type="radio"] { + border-radius: 50%; } /* ============================================================ diff --git a/app/public/assets/css/form.css b/app/public/assets/css/form.css index fbdab93..4a19e3c 100644 --- a/app/public/assets/css/form.css +++ b/app/public/assets/css/form.css @@ -31,7 +31,7 @@ font-weight: 400; } -/* ── Inputs, selects, textareas (admin forms use bottom-border style) ──── */ +/* ── Inputs, selects, textareas ──────────────────────────────────────────── */ .admin-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not( [type="hidden"] @@ -42,34 +42,12 @@ .admin-inline-form input[type="number"], .admin-inline-form select { width: 100%; - border: none; - border-bottom: 1px solid var(--border-primary); - border-radius: 0; - padding: var(--space-3xs) 0; -} - -.admin-form - input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not( - [type="hidden"] - ):not([type="submit"]):focus, -.admin-form select:focus, -.admin-form textarea:focus, -.admin-inline-form input:focus, -.admin-inline-form select:focus { - border-bottom: 2px solid var(--accent-primary); } .admin-form textarea { min-height: 100px; } -/* Select custom arrow overrides for bottom-border style */ -.admin-form select, -.admin-inline-form select { - background-position: right 0 center; - padding-right: 1.2rem; -} - /* ── Required-field indicators ──────────────────────────────────────────── */ .admin-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not( @@ -77,7 +55,7 @@ ):not([type="submit"]):required, .admin-form select:required, .admin-form textarea:required { - border-bottom-style: dashed; + border-style: dashed; } .admin-form @@ -168,13 +146,6 @@ cursor: pointer; } -.admin-checkbox-label input[type="checkbox"] { - accent-color: var(--accent-primary); - width: 14px; - height: 14px; - cursor: pointer; -} - /* ── Fieldsets & legends ────────────────────────────────────────────────── */ /* Base fieldset/legend styles live in common.css */ .admin-body fieldset, @@ -355,15 +326,6 @@ margin: 0; } -.licence-explanation legend { - font-size: var(--step--1); - font-weight: 600; - letter-spacing: 0.04em; - text-transform: uppercase; - color: var(--text-secondary); - padding: 0 var(--space-2xs); -} - .licence-info h3 { margin-top: var(--space-m); } @@ -479,7 +441,6 @@ .password-gate input[type="password"] { width: 100%; - padding: var(--space-xs); margin: var(--space-2xs) 0 var(--space-s); } @@ -1021,12 +982,8 @@ a.recap-file-name:hover { } .retry-email-form input[type="email"] { - padding: var(--space-xs) var(--space-s); - border: 1px solid var(--border-primary); - border-radius: var(--radius); font-size: var(--step-0); width: 100%; - box-sizing: border-box; } .retry-email-form input.input-error { diff --git a/app/public/assets/css/repertoire.css b/app/public/assets/css/repertoire.css index 9274d87..6dc0274 100644 --- a/app/public/assets/css/repertoire.css +++ b/app/public/assets/css/repertoire.css @@ -261,13 +261,8 @@ .search-filter-select { font-size: var(--step--1); - border: 1px solid var(--border-primary); - border-radius: var(--radius); padding: var(--space-3xs) var(--space-2xs); - background: var(--bg-primary); - color: var(--text-primary); - font-family: inherit; - cursor: pointer; + padding-right: 1.75rem; } .search-filter-select:focus { diff --git a/app/public/assets/css/tfe.css b/app/public/assets/css/tfe.css index e8fedc1..7a26357 100644 --- a/app/public/assets/css/tfe.css +++ b/app/public/assets/css/tfe.css @@ -255,13 +255,6 @@ aside figcaption { .tfe-access-request-form input[type="email"], .tfe-access-request-form textarea { padding: var(--space-2xs) var(--space-3xs); - border-color: var(--border); - background: var(--background); -} - -.tfe-access-request-form input[type="email"]:focus, -.tfe-access-request-form textarea:focus { - border: 2px solid var(--accent); } .tfe-btn-request-access { diff --git a/app/templates/admin/parametres.php b/app/templates/admin/parametres.php index 376958e..53caa47 100644 --- a/app/templates/admin/parametres.php +++ b/app/templates/admin/parametres.php @@ -263,7 +263,7 @@ -