mirror of
https://github.com/Tria-plc/emaui.git
synced 2026-09-03 15:33:41 +00:00
e74ef1c672
Both themes set `fontFamily: Inter`, and Inter carries no Ge'ez glyphs. So every Amharic string in a bilingual system — 45-73 KB of locale data per app — has been rendering in whatever font the OS happened to substitute: different on Windows, macOS and Android, and matching neither the design nor each other. Noto Sans Ethiopic goes directly after Inter in one stack rather than being swapped in under `[lang='am']`. Browsers fall back per glyph, not per element, so a single stack renders Latin in Inter and Ge'ez in Noto automatically — including within one string. That is the case that matters here: a registry is full of mixed-script lines like an Amharic name beside a Latin IMO number, and a language-scoped swap renders half of those in the wrong face. Heading line-heights go up a step at the same time. Ge'ez has taller ascenders and deeper descenders than Latin, so headings set to Inter's natural leading clip once Ethiopic is actually being rendered. This was deliberately held back from the theme refactor so that change could prove it altered nothing. The gallery gains Ge'ez headings and a mixed-script line, so the baselines cover the case rather than only Latin. Follow-up: both fonts still load from Google Fonts via a render-blocking CSS @import. Self-hosting with a subset and preload links is worth doing — government networks frequently make fonts.googleapis.com slow or unreachable, and silent Amharic fallback is precisely the failure this commit fixes. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
93 lines
3.0 KiB
CSS
93 lines
3.0 KiB
CSS
/* Inter carries no Ge'ez glyphs, so Noto Sans Ethiopic is loaded alongside it.
|
|
Without it every Amharic string in the app renders in whatever the OS
|
|
happens to substitute — different on Windows, macOS and Android. */
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+Ethiopic:wght@400;500;600;700&display=swap');
|
|
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
Scrollbars — themed instead of the raw OS default, so a dark page doesn't
|
|
carry a stark white scrollbar (or vice versa). Firefox via scrollbar-color,
|
|
Chrome/Safari/Edge via the ::-webkit-scrollbar-* pseudo-elements. Colors
|
|
come from Mantine's dark palette so they track the active color scheme
|
|
instead of a fixed gray.
|
|
--------------------------------------------------------------------------- */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--mantine-color-gray-5) transparent;
|
|
}
|
|
[data-mantine-color-scheme='dark'] * {
|
|
scrollbar-color: var(--mantine-color-dark-3) transparent;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: var(--mantine-color-gray-5);
|
|
border-radius: 8px;
|
|
border: 2px solid transparent;
|
|
background-clip: content-box;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background-color: var(--mantine-color-gray-6);
|
|
}
|
|
[data-mantine-color-scheme='dark'] ::-webkit-scrollbar-thumb {
|
|
background-color: var(--mantine-color-dark-3);
|
|
}
|
|
[data-mantine-color-scheme='dark'] ::-webkit-scrollbar-thumb:hover {
|
|
background-color: var(--mantine-color-dark-2);
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
Print — the review dossier.
|
|
|
|
An officer printing a review wants the application, not the application
|
|
plus the chrome around it. Navigation, the Decision Bar and the collapsible
|
|
rails are all interactive surfaces with no meaning on paper, so they are
|
|
dropped and the centre column is given the full width.
|
|
--------------------------------------------------------------------------- */
|
|
@media print {
|
|
.mantine-AppShell-navbar,
|
|
.mantine-AppShell-header,
|
|
[role='region'][aria-label='Decision bar'],
|
|
.mantine-Drawer-root,
|
|
.mantine-Modal-root {
|
|
display: none !important;
|
|
}
|
|
|
|
.mantine-AppShell-main {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
/* Tabs print flattened: a printed dossier that shows one tab's worth of a
|
|
six-tab application is missing five sixths of the record. */
|
|
.mantine-Tabs-panel {
|
|
display: block !important;
|
|
}
|
|
.mantine-Tabs-list {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Sticky positioning collapses badly across page breaks. */
|
|
[style*='position: sticky'],
|
|
[style*='position:sticky'] {
|
|
position: static !important;
|
|
}
|
|
|
|
/* Keep a record entry from being split across two sheets. */
|
|
.mantine-Paper-root,
|
|
.mantine-Card-root,
|
|
.mantine-Table-tr {
|
|
break-inside: avoid;
|
|
}
|
|
|
|
body {
|
|
background: #fff !important;
|
|
}
|
|
}
|