From 4c09a8df446feb1c0935b244329dcb955b36e694 Mon Sep 17 00:00:00 2001 From: Denozordec Date: Fri, 30 Oct 2026 15:11:37 +0700 Subject: [PATCH] Permission ticks centred under their headers; tick, radio and switch edge back to --line-ctrl Co-Authored-By: Claude Sonnet 5.5 --- src/screens/admin/Admin.module.css | 3 ++- src/screens/zones/Zones.module.css | 3 ++- src/theme/globals.css | 11 +++++++++++ 3 files changed, 15 insertions(+), 2 deletions(-) diff --git a/src/screens/admin/Admin.module.css b/src/screens/admin/Admin.module.css index 383ad3f..1b29e87 100644 --- a/src/screens/admin/Admin.module.css +++ b/src/screens/admin/Admin.module.css @@ -60,7 +60,8 @@ it goes FIRST so the strip lands above what it indexes and not under it. /* The matrix's EDITABLE checkbox: 18 px tall, and until now not enlarged. The read-only one is `ui/Matrix`'s, is disabled and is no target for anything. */ -.chkPerm { composes: hitArea from '../../ui/interaction.module.css'; margin: 0 auto; display: block; } +/* The ReUI checkbox carries its own hit area; this only centres it under its header. */ +.chkPerm { display: flex; justify-content: center; } @media (max-width: 960px) { .withIndex { grid-template-columns: minmax(0, 1fr); } diff --git a/src/screens/zones/Zones.module.css b/src/screens/zones/Zones.module.css index ea9ed07..2abd123 100644 --- a/src/screens/zones/Zones.module.css +++ b/src/screens/zones/Zones.module.css @@ -70,7 +70,8 @@ /* The permissions matrix's checkbox is 18 px tall. `.hitArea` enlarges the target without moving the drawing, just as in Administration's matrix. */ -.chkPerm { composes: hitArea from '../../ui/interaction.module.css'; margin: 0 auto; display: block; } +/* The ReUI checkbox carries its own hit area; this only centres it under its header. */ +.chkPerm { display: flex; justify-content: center; } /* Stale data: the list is still there, and **you can see it is no longer current**. diff --git a/src/theme/globals.css b/src/theme/globals.css index ab0a527..5226877 100644 --- a/src/theme/globals.css +++ b/src/theme/globals.css @@ -81,6 +81,17 @@ own unlayered styles still win over it. } } /* +A tick, a radio and a switch draw their edge with `--input`, which here is a text +field's border (`--line-field`, a hair above the panel). The console's own box for +these three was `--line-ctrl` (tokens.css: "a checkbox's at rest"), a step stronger, +and that is the one they keep. Unlayered on purpose: it has to outweigh `border-input`. +*/ +[data-slot='checkbox'], +[data-slot='radio-group-item'], +[data-slot='switch'] { + --input: var(--line-ctrl); +} +/* ---break--- */ .dark {