feat(ui): scale interface for high resolution displays
This commit is contained in:
@@ -26,6 +26,24 @@ The canonical tokens live in `src/app.css` under `:root`.
|
||||
| Main text | `--shd-text` | `#ecebe5` |
|
||||
| Muted text | `--shd-text-muted` | `#858b8d` |
|
||||
| SHD action orange | `--shd-orange` | `#f6a821` |
|
||||
| Adaptive display scale | `--shd-display-scale` | `1` by default; stepped on high-resolution desktops |
|
||||
|
||||
### High-resolution display scaling
|
||||
|
||||
The application uses restrained, stepped interface scaling when the effective
|
||||
CSS viewport is substantially wider than a conventional desktop. At 2200px the
|
||||
complete interface scales to 115%, at 2800px to 130%, and at 3400px to 150%.
|
||||
This preserves the established relationship between typography, controls,
|
||||
tables, spacing, hit targets, and fixed-position surfaces instead of enlarging
|
||||
text alone.
|
||||
|
||||
Use the shared `--shd-display-scale` token and the root-level `zoom` treatment;
|
||||
do not add module-specific 4K font-size overrides. Responsive layouts below
|
||||
2200px remain unchanged. Browser zoom and operating-system display scaling still
|
||||
remain available to users and naturally change the effective CSS viewport.
|
||||
High-resolution scaling must not introduce horizontal overflow, clipped fixed
|
||||
surfaces, or a different semantic hierarchy. Test the standard desktop layout
|
||||
and each affected wide breakpoint after changing this policy.
|
||||
| Success | `--shd-success` | `#75c08c` |
|
||||
| Destructive/error | `--shd-danger` | `#df8069` |
|
||||
| Informational/defensive | `--shd-info` | `#70b9d6` |
|
||||
|
||||
Reference in New Issue
Block a user