.native-control auch fuer Buttons — View-Toggle + BarButton system-nativ

User-Screenshot: dropdowns waren native, aber View-Toggle (Top/Front/...)
und die Icon-Buttons (Camera/Gear/Zoom/etc.) sahen weiterhin custom aus.

Grund: globales `button { border: none; background: none; }` strippt das
System-Push-Button-Styling fuer alle <button>s. `.native-control` deckte
nur select + input ab.

Fix:
- `.native-control` erweitert auf `button.native-control`: revert auf
  alle Button-Reset-Properties → WebKit rendert macOS-Push-Button-Chrome
- `.is-active`-Modifier: bold + accent-Tint fuer Toggle-Active-State
  (macOS-Native hat keinen "pressed-Toggle"-Look fuer normale Buttons)
- BarButton: className="native-control" + active=true → is-active
- View-Toggle (Top/Front/Right/Iso/Persp): pill-Container weg,
  individuelle native buttons mit is-active wenn matchView() true

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
2026-05-20 22:18:37 +02:00
parent 8ad9e23838
commit e19bbafe38
2 changed files with 41 additions and 38 deletions
+15 -4
View File
@@ -198,9 +198,11 @@ select:hover {
/* Opt-out: System-native Chrome (Oberleiste). Setzt die globalen
pill/appearance:none Overrides zurueck und ueberlaesst WebKit das
Rendering — Standard-macOS-Combobox + Native-Popup-Menue. */
Rendering — Standard-macOS-Combobox + Native-Popup-Menue. Gilt auch
fuer <button> die im globalen button{} alles abgestreift kriegen. */
select.native-control,
input.native-control {
input.native-control,
button.native-control {
appearance: auto;
-webkit-appearance: auto;
background: revert;
@@ -211,17 +213,26 @@ input.native-control {
font: revert;
letter-spacing: revert;
box-shadow: none;
transition: none;
color: revert;
}
select.native-control:hover,
input.native-control:hover {
input.native-control:hover,
button.native-control:hover {
background: revert;
border-color: revert;
}
select.native-control:focus,
input.native-control:focus {
input.native-control:focus,
button.native-control:focus {
box-shadow: revert;
border-color: revert;
}
/* Default-Push-Button-Variante fuer aktive Toggles. macOS rendert das
als geful­ltes blaues Pulsing-Button — wir tinten es via accent-color. */
button.native-control.is-active {
font-weight: 600;
}
/* Utility */
.label-xs {