.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:
+15
-4
@@ -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 gefulltes blaues Pulsing-Button — wir tinten es via accent-color. */
|
||||
button.native-control.is-active {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Utility */
|
||||
.label-xs {
|
||||
|
||||
Reference in New Issue
Block a user