106 lines
3.4 KiB
CSS
106 lines
3.4 KiB
CSS
/*
|
|
* osg-theme.css — remaps Mantine's CSS custom properties to the
|
|
* openshopgraph.org design tokens (see openshopgraph-frontend-v2
|
|
* src/styles/site-tokens.css, "source of truth"). Scoped to the
|
|
* [data-mantine-color-scheme] attribute Mantine already sets, so this
|
|
* keeps following prefers-color-scheme via ColorSchemeScript
|
|
* defaultColorScheme="auto" — same behaviour as the main site.
|
|
*
|
|
* Semantic monitor-state colors (operational green / down red used by
|
|
* Mantine's own IconCircleCheck/IconAlertCircle + accordion chevrons) are
|
|
* left untouched on purpose — only chrome (surfaces, borders, text,
|
|
* type, radius) is re-themed.
|
|
*/
|
|
|
|
:root {
|
|
--font-display:
|
|
'Cabinet Grotesk', 'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
|
|
Arial, sans-serif;
|
|
--font-body:
|
|
'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
|
|
--font-facts: 'Martian Mono', 'SF Mono', SFMono-Regular, ui-monospace, Menlo, Consolas, monospace;
|
|
|
|
--mantine-font-family: var(--font-body);
|
|
--mantine-font-family-headings: var(--font-display);
|
|
--mantine-font-family-monospace: var(--font-facts);
|
|
|
|
--mantine-radius-xs: 4px;
|
|
--mantine-radius-sm: 8px;
|
|
--mantine-radius-md: 12px;
|
|
--mantine-radius-lg: 16px;
|
|
}
|
|
|
|
:root[data-mantine-color-scheme='light'] {
|
|
--mantine-color-body: #f7f6f3; /* --paper */
|
|
--mantine-color-text: #141412; /* --ink */
|
|
--mantine-color-white: #ffffff; /* --card, Card/Paper surfaces */
|
|
--mantine-color-anchor: #141412; /* --ink; chrome links read as brand, not generic blue */
|
|
--mantine-color-dimmed: #6a6862; /* --muted */
|
|
--mantine-color-default-border: #e7e5df; /* --hair */
|
|
--mantine-color-gray-3: #e7e5df; /* --hair; Card.Section border */
|
|
--mantine-primary-color-filled: #141412; /* --ink; matches .btn-dark on the main site */
|
|
--mantine-primary-color-filled-hover: #2a2a26;
|
|
}
|
|
|
|
:root[data-mantine-color-scheme='dark'] {
|
|
--mantine-color-body: #161512; /* --paper (dark) */
|
|
--mantine-color-text: #edeae3; /* --ink (dark) */
|
|
--mantine-color-dark-6: #1e1d1a; /* --card (dark); Card surface */
|
|
--mantine-color-dark-4: #2e2c27; /* --hair (dark); Card.Section border */
|
|
--mantine-color-anchor: #edeae3;
|
|
--mantine-color-dimmed: #9a978e; /* --muted (dark) */
|
|
--mantine-color-default-border: #2e2c27;
|
|
--mantine-primary-color-filled: #edeae3;
|
|
--mantine-primary-color-filled-hover: #d9d5cc;
|
|
}
|
|
|
|
body {
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* ---------- OSG brand header (replaces the generic UptimeFlare logo) ---------- */
|
|
.osg-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
font-family: var(--font-display);
|
|
font-weight: 700;
|
|
font-size: 16px;
|
|
color: var(--mantine-color-text);
|
|
text-decoration: none;
|
|
}
|
|
.osg-brand:hover {
|
|
opacity: 0.85;
|
|
}
|
|
.osg-brand .osg-mark {
|
|
width: 19px;
|
|
height: 19px;
|
|
border-radius: 6px;
|
|
background: var(--mantine-color-text);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 0 0 auto;
|
|
}
|
|
.osg-brand .osg-mark svg {
|
|
display: block;
|
|
}
|
|
.osg-status-label {
|
|
font-weight: 500;
|
|
color: var(--mantine-color-dimmed);
|
|
}
|
|
|
|
/* ---------- OSG footer line (Footer.tsx customFooter) ---------- */
|
|
.osg-footer {
|
|
text-align: center;
|
|
font-size: 12.5px;
|
|
color: var(--mantine-color-dimmed);
|
|
margin-top: 10px;
|
|
line-height: 1.6;
|
|
}
|
|
.osg-footer a {
|
|
color: var(--mantine-color-text);
|
|
text-decoration: underline;
|
|
text-underline-offset: 2px;
|
|
}
|