lobo
54b93055ba
Fonts come from npm, not Google, so no third-party font requests. Pages are prerendered at build time; browser-only code is guarded. nginx serves per-route HTML, a real 404 and gzip.
104 lines
2.7 KiB
CSS
104 lines
2.7 KiB
CSS
/*
|
|
Tailwind v4 dropped `corePlugins`, so preflight can no longer be switched off
|
|
from the config. Importing the layers individually and leaving out
|
|
`preflight.css` keeps Angular Material's own reset in charge.
|
|
*/
|
|
@layer theme, base, components, utilities;
|
|
|
|
@import 'tailwindcss/theme.css' layer(theme);
|
|
@import 'tailwindcss/utilities.css' layer(utilities);
|
|
|
|
/*
|
|
The theme is driven by the CSS custom properties that styles.scss sets per theme.
|
|
`inline` is required: the theme service toggles `.dark` on <body>, while a plain
|
|
`@theme` would resolve these references once at `:root` (<html>) and freeze the
|
|
light values. Inlining makes the utilities emit `var(--app-fg)` directly, so they
|
|
resolve on the element and follow the `.dark` override again.
|
|
*/
|
|
@theme inline {
|
|
--color-app-bg: var(--app-bg);
|
|
--color-app-fg: var(--app-fg);
|
|
--color-card-bg: var(--card-bg);
|
|
--color-link: var(--link-color);
|
|
--color-link-hover: var(--link-color-hover);
|
|
--color-logo-bg: var(--app-logo-bg);
|
|
|
|
--container-app: var(--app-maxWidth);
|
|
--radius-card: var(--card-radius);
|
|
|
|
--font-sans: Roboto, Arial, sans-serif;
|
|
|
|
--spacing-fluid-sm: clamp(0.5rem, 2vw, 1rem);
|
|
--spacing-fluid-md: clamp(1rem, 3vw, 1.5rem);
|
|
--spacing-fluid-lg: clamp(1rem, 4vw, 2rem);
|
|
}
|
|
|
|
/* The theme service toggles a `dark` class instead of relying on the media query. */
|
|
@custom-variant dark (&:where(.dark, .dark *));
|
|
|
|
@custom-variant mobile (@media (width <= 760px));
|
|
@custom-variant sm-dialog (@media (width <= 600px));
|
|
@custom-variant tablet (@media (width <= 900px));
|
|
|
|
@utility legend-swatch {
|
|
@apply inline-block w-[15px] h-[15px] border border-gray-300 align-middle mr-[5px];
|
|
}
|
|
|
|
@utility card-gradient-bar {
|
|
@apply relative;
|
|
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 3px;
|
|
background: linear-gradient(
|
|
90deg,
|
|
var(--mat-sys-primary),
|
|
var(--mat-sys-tertiary)
|
|
);
|
|
border-radius: var(--card-radius) var(--card-radius) 0 0;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
*,
|
|
::before,
|
|
::after {
|
|
border-width: 0;
|
|
border-style: solid;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: Roboto, Arial, sans-serif;
|
|
background-color: var(--app-bg);
|
|
color: var(--app-fg);
|
|
transition: background-color 220ms ease, color 220ms ease;
|
|
}
|
|
|
|
a {
|
|
@apply text-link no-underline font-medium hover:text-link-hover hover:underline;
|
|
}
|
|
|
|
.dark body {
|
|
background: radial-gradient(ellipse at 50% 0%, #1e2530 0%, #1a1a1a 65%);
|
|
}
|
|
|
|
canvas {
|
|
@apply border-none block mx-auto max-w-full;
|
|
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.dark canvas {
|
|
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
|
|
}
|
|
}
|