16b510764c
All checks were successful
Build and Publish Docker Image / build-and-push (push) Successful in 45s
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
116 lines
4.5 KiB
CSS
116 lines
4.5 KiB
CSS
/* ══════════════════════════════════════════════════════════════════════
|
|
Smooth theme — clean, modern, Saira typeface
|
|
Dark: Prussian Blue · Deep Teal · Jasmine · Brick Ember · Blood Red
|
|
Light: Cream · Deep Teal · Terracotta
|
|
Applied when data-style is absent or "smooth".
|
|
|
|
Every colour is `light-dark(<light>, <dark>)`, resolved against the
|
|
root `color-scheme` (see tokens.css), so auto / light / dark share this
|
|
one block.
|
|
══════════════════════════════════════════════════════════════════════ */
|
|
|
|
:root:not([data-style]),
|
|
:root[data-style="smooth"] {
|
|
--font-body: "Saira Variable", sans-serif;
|
|
|
|
/* Text */
|
|
--color-text: light-dark(#0e3a42, #e9eef2);
|
|
--color-text-secondary: light-dark(#35626b, #a3b9c7);
|
|
--color-text-muted: light-dark(#4d7178, #7b93a6);
|
|
--color-on-accent: light-dark(#fffaf0, #001427);
|
|
|
|
/* Surfaces — sunken (inputs, wells) < bg < surface (cards) < raised
|
|
(menus, modals, hovered chips). Dark tiers step up in Prussian Blue;
|
|
light tiers step from cream to white. */
|
|
--color-bg: light-dark(#faf5e9, #01152a);
|
|
--color-surface: light-dark(#fffdf8, #0a2139);
|
|
--color-surface-raised: light-dark(#ffffff, #112a46);
|
|
--color-surface-sunken: light-dark(#f3ecdd, #000f20);
|
|
|
|
/* Borders — hairlines tinted from the text colour */
|
|
--color-border: light-dark(rgb(14 58 66 / 0.13), rgb(163 185 199 / 0.14));
|
|
--color-border-subtle: light-dark(
|
|
rgb(14 58 66 / 0.08),
|
|
rgb(163 185 199 / 0.09)
|
|
);
|
|
|
|
/* Accent — Jasmine (dark) / Terracotta (light) */
|
|
--color-accent: light-dark(#b54a41, #f4d58d);
|
|
--color-accent-hover: light-dark(#a3423a, #f8e2ae);
|
|
--color-accent-soft: light-dark(
|
|
rgb(181 74 65 / 0.1),
|
|
rgb(244 213 141 / 0.12)
|
|
);
|
|
--color-focus-ring: light-dark(
|
|
rgb(181 74 65 / 0.35),
|
|
rgb(244 213 141 / 0.4)
|
|
);
|
|
|
|
/* Links */
|
|
--color-link: light-dark(#b54a41, #f4d58d);
|
|
--color-link-hover: light-dark(#a3423a, #f8e2ae);
|
|
|
|
/* Danger — Brick Ember, lifted for legibility on Prussian Blue */
|
|
--color-danger: light-dark(#b3392f, #f0706a);
|
|
--color-danger-bg: light-dark(#f9e3df, rgb(191 6 3 / 0.18));
|
|
--color-danger-hover: light-dark(#b3392f, #bf0603);
|
|
|
|
/* Success — Deep Teal */
|
|
--color-success: light-dark(#25746f, #8fb3a3);
|
|
--color-success-bg: light-dark(#dff1ef, rgb(112 141 129 / 0.18));
|
|
--color-success-hover: light-dark(#1f6b67, #a6c6b8);
|
|
|
|
--color-warning: light-dark(#a86a00, #e8b44f);
|
|
|
|
/* Overlays */
|
|
--color-overlay: light-dark(rgb(24 30 34 / 0.32), rgb(0 6 14 / 0.6));
|
|
--color-header-user-bg: transparent;
|
|
--color-header-user-bg-hover: light-dark(
|
|
rgb(14 58 66 / 0.07),
|
|
rgb(233 238 242 / 0.08)
|
|
);
|
|
|
|
/* Misc */
|
|
--color-option-bg: light-dark(#fffdf8, #112a46);
|
|
--color-option-border: light-dark(rgb(14 58 66 / 0.08), rgb(163 185 199 / 0.09));
|
|
|
|
/* Shape & depth */
|
|
--border-width: 1px;
|
|
--shadow-color: light-dark(rgb(14 58 66 / 0.16), rgb(0 0 0 / 0.5));
|
|
--shadow-color-soft: light-dark(rgb(14 58 66 / 0.07), rgb(0 0 0 / 0.3));
|
|
--shadow-color-strong: light-dark(rgb(14 58 66 / 0.26), rgb(0 0 0 / 0.7));
|
|
--shadow-1: 0 1px 2px var(--shadow-color-soft);
|
|
--shadow-2: 0 8px 24px -6px var(--shadow-color), 0 1px 2px var(--shadow-color-soft);
|
|
--shadow-3: 0 24px 56px -12px var(--shadow-color-strong), 0 2px 6px var(--shadow-color-soft);
|
|
|
|
/* Component skins */
|
|
--header-bg: var(--color-bg);
|
|
--input-focus-bg: var(--color-surface);
|
|
--overlay-filter: blur(3px);
|
|
--modal-border: var(--color-border);
|
|
--card-border: transparent;
|
|
--card-border-width: 2px;
|
|
--card-hover-border: color-mix(
|
|
in srgb,
|
|
var(--color-accent) 50%,
|
|
var(--color-surface)
|
|
);
|
|
--tab-border: transparent;
|
|
--btn-primary-shadow: var(--shadow-1);
|
|
--btn-primary-shadow-hover: var(--shadow-1);
|
|
}
|
|
|
|
/* A pointed-at journal headline sits on frosted page colour rather than on
|
|
black glass: terracotta on cream and jasmine on Prussian Blue are the
|
|
pairs this palette was picked for, where the accent on a black plate
|
|
would lose the light scheme's terracotta. */
|
|
:root:not([data-style]) .journal-card--image .journal-card-title,
|
|
[data-style="smooth"] .journal-card--image .journal-card-title {
|
|
--journal-title-hover-bg: light-dark(
|
|
rgb(255 253 248 / 0.9),
|
|
rgb(1 21 42 / 0.78)
|
|
);
|
|
--journal-title-hover-radius: var(--radius-md);
|
|
--journal-title-hover-filter: blur(6px);
|
|
}
|