247 lines
10 KiB
CSS
247 lines
10 KiB
CSS
/* ══════════════════════════════════════════════════════════════════════
|
|
Kanagawa theme — after rebelot/kanagawa.nvim, itself after Hokusai's
|
|
"The Great Wave off Kanagawa". Ink-wash surfaces, muted woodblock hues,
|
|
and monospace type throughout, as befits an editor colorscheme.
|
|
|
|
Dark scheme → Wave (sumiInk page, fujiWhite ink, crystalBlue accent).
|
|
Light scheme → Lotus (lotusWhite parchment, lotusInk ink, lotusBlue
|
|
accent) — the yellow paper is the point, keep it warm.
|
|
Syntax hues carry the character: fujiGray italic "comments" for dates,
|
|
springGreen "strings" for quotes, oniViolet "keywords" for the brand.
|
|
A section opens on a status line, as a buffer ends on one. The page is
|
|
flat, the editor's own ground: the cards and the type carry the scheme.
|
|
══════════════════════════════════════════════════════════════════════ */
|
|
|
|
/* ── Palette (light-dark: see tokens.css) ─────────────────────────── */
|
|
:root[data-style="kanagawa"] {
|
|
--font-mono:
|
|
"JetBrains Mono Variable", ui-monospace, "SFMono-Regular", Menlo, monospace;
|
|
--font-body: var(--font-mono);
|
|
--font-display: var(--font-mono);
|
|
|
|
/* Softer, smaller corners than smooth — woodblock, not bubble. */
|
|
--radius-xs: 2px;
|
|
--radius-sm: 3px;
|
|
--radius-md: 4px;
|
|
--radius-lg: 6px;
|
|
--radius-xl: 8px;
|
|
|
|
/* Text — fujiWhite / oldWhite / springViolet1 · lotusInk1 / lotusGray2 / lotusViolet2 */
|
|
--color-text: light-dark(#545464, #dcd7ba);
|
|
--color-text-secondary: light-dark(#716e61, #c8c093);
|
|
--color-text-muted: light-dark(#766b90, #938aa9);
|
|
--color-on-accent: light-dark(#f2ecbc, #16161d);
|
|
|
|
/* Surfaces — sunken < bg < surface < raised.
|
|
Wave: sumiInk0 · sumiInk3 · sumiInk4 · sumiInk5.
|
|
Lotus: lotusWhite1 · lotusWhite4 · lotusWhite3 · lotusWhite3. What is
|
|
read sits on lotusWhite3, the editor's own paper and the
|
|
brightest the scheme has, and the page around the cards is the
|
|
shade darker the editor gives its window chrome: the ink loses a
|
|
fifth of its contrast on the darker sheet. */
|
|
--color-bg: light-dark(#e7dfb2, #1f1f28);
|
|
--color-surface: light-dark(#f2ecbc, #2a2a37);
|
|
--color-surface-raised: light-dark(#f2ecbc, #363646);
|
|
--color-surface-sunken: light-dark(#dcd5ac, #16161d);
|
|
|
|
/* Borders — lotusWhite0 / sumiInk6, the editor's split lines */
|
|
--color-border: light-dark(rgb(113 110 97 / 0.28), rgb(84 84 109 / 0.7));
|
|
--color-border-subtle: light-dark(
|
|
rgb(113 110 97 / 0.16),
|
|
rgb(84 84 109 / 0.4)
|
|
);
|
|
|
|
/* Accent — crystalBlue / lotusBlue4, hover springBlue / lotusBlue5 */
|
|
--color-accent: light-dark(#4d699b, #7e9cd8);
|
|
--color-accent-hover: light-dark(#5d57a3, #7fb4ca);
|
|
--color-accent-soft: light-dark(
|
|
rgb(77 105 155 / 0.12),
|
|
rgb(126 156 216 / 0.14)
|
|
);
|
|
--color-focus-ring: light-dark(
|
|
rgb(77 105 155 / 0.35),
|
|
rgb(126 156 216 / 0.45)
|
|
);
|
|
|
|
/* Links */
|
|
--color-link: light-dark(#4d699b, #7e9cd8);
|
|
--color-link-hover: light-dark(#5d57a3, #7fb4ca);
|
|
|
|
/* Danger — waveRed on winterRed / lotusRed on paper */
|
|
--color-danger: light-dark(#c84053, #e46876);
|
|
--color-danger-bg: light-dark(#ecd2ac, #43242b);
|
|
--color-danger-hover: light-dark(#d7474b, #ff5d62);
|
|
|
|
/* Success — springGreen on winterGreen / lotusGreen on paper */
|
|
--color-success: light-dark(#6f894e, #98bb6c);
|
|
--color-success-bg: light-dark(#dadaa8, #2b3328);
|
|
--color-success-hover: light-dark(#6e915f, #b0cf85);
|
|
|
|
/* Warning — roninYellow / lotusOrange */
|
|
--color-warning: light-dark(#cc6d00, #ff9e3b);
|
|
|
|
/* Overlays */
|
|
--color-overlay: light-dark(rgb(84 84 100 / 0.3), rgb(22 22 29 / 0.7));
|
|
--color-header-user-bg: transparent;
|
|
--color-header-user-bg-hover: light-dark(
|
|
rgb(84 84 100 / 0.08),
|
|
rgb(220 215 186 / 0.08)
|
|
);
|
|
|
|
/* Misc */
|
|
--color-option-bg: light-dark(#e7dfb2, #2a2a37);
|
|
--color-option-border: light-dark(
|
|
rgb(113 110 97 / 0.16),
|
|
rgb(84 84 109 / 0.4)
|
|
);
|
|
|
|
/* Theme-only hues, straight from the syntax groups:
|
|
comment fujiGray / lotusGray2 · keyword oniViolet / lotusViolet4
|
|
string springGreen / lotusGreen · number sakuraPink / lotusPink
|
|
chrome sumiInk1 / lotusWhite0 (sidebars, tabline, status line)
|
|
visual waveBlue1 / lotusViolet3 (selection)
|
|
Lotus's own comment grey, lotusGray3, is too faint for a date set this
|
|
small, so the light scheme takes the next grey down. */
|
|
--kngw-comment: light-dark(#716e61, #727169);
|
|
--kngw-keyword: light-dark(#624c83, #957fb8);
|
|
--kngw-string: light-dark(#6f894e, #98bb6c);
|
|
--kngw-number: light-dark(#b35b79, #d27e99);
|
|
--kngw-chrome: light-dark(#d5cea3, #181820);
|
|
--kngw-selection: light-dark(#c9cbd1, #223249);
|
|
/* Over a photo the ground is the black scrim in either scheme, so the
|
|
accent there stays Wave's crystalBlue — Lotus's lotusBlue4 is picked to
|
|
sit on warm paper and goes muddy on black. */
|
|
--kngw-accent-on-photo: #7e9cd8;
|
|
|
|
/* Shape & depth — flat like an editor, deep only where things float */
|
|
--border-width: 1px;
|
|
--shadow-1: 0 1px 2px light-dark(rgb(84 84 100 / 0.1), rgb(0 0 0 / 0.3));
|
|
--shadow-2: 0 8px 24px -6px light-dark(rgb(84 84 100 / 0.2), rgb(0 0 0 / 0.5));
|
|
--shadow-3: 0 24px 56px -12px
|
|
light-dark(rgb(84 84 100 / 0.3), rgb(0 0 0 / 0.7));
|
|
|
|
/* Component skins */
|
|
--header-bg: var(--kngw-chrome);
|
|
--input-focus-bg: var(--color-surface-sunken);
|
|
--overlay-filter: blur(2px);
|
|
--modal-border: var(--color-border);
|
|
--card-border: var(--color-border-subtle);
|
|
--card-hover-border: var(--color-accent);
|
|
--tab-border: transparent;
|
|
--btn-primary-shadow: none;
|
|
--btn-primary-shadow-hover: none;
|
|
}
|
|
|
|
/* ══════════════════════════════════════════════════════════════════════
|
|
Structural overrides
|
|
══════════════════════════════════════════════════════════════════════ */
|
|
|
|
[data-style="kanagawa"] ::selection {
|
|
background: var(--kngw-selection);
|
|
}
|
|
|
|
/* Brand as a keyword — oniViolet, italic like kanagawa's keywordStyle.
|
|
Pointed at, it takes the accent, as a card's title does. */
|
|
[data-style="kanagawa"] .app-header-brand {
|
|
color: var(--kngw-keyword);
|
|
font-style: italic;
|
|
}
|
|
|
|
[data-style="kanagawa"] .app-header-brand:hover {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
/* ── Header — the tabline: a shade off the page, split by a plain rule ── */
|
|
[data-style="kanagawa"] .app-header {
|
|
border-bottom: 1px solid var(--color-border);
|
|
}
|
|
|
|
[data-style="kanagawa"] .feed-sort-btn:hover:not(.active) {
|
|
background: var(--color-accent-soft);
|
|
}
|
|
|
|
/* ── Dates read as comments — fujiGray, italic ───────────────────── */
|
|
[data-style="kanagawa"] time {
|
|
font-style: italic;
|
|
}
|
|
|
|
[data-style="kanagawa"] .journal-card:not(.journal-card--image) .journal-card-meta,
|
|
[data-style="kanagawa"] .dump-card-date,
|
|
[data-style="kanagawa"] .comment-time,
|
|
[data-style="kanagawa"] .notification-time {
|
|
color: var(--kngw-comment);
|
|
}
|
|
|
|
/* ── On the scrim, links hover in the dark scheme's blue ─────────── */
|
|
/* …on a plate of sumiInk, the Wave page itself, in either scheme: the blue
|
|
is the dark scheme's, so its ground has to be too. Square-ish, like the
|
|
selection block an editor draws behind a match. */
|
|
[data-style="kanagawa"] .journal-card--image .journal-card-title {
|
|
--journal-title-hover-color: var(--kngw-accent-on-photo);
|
|
--journal-title-hover-bg: rgb(31 31 40 / 0.86);
|
|
--journal-title-hover-radius: var(--radius-xs);
|
|
--journal-title-hover-shadow: inset 2px 0 0 var(--kngw-accent-on-photo);
|
|
}
|
|
|
|
[data-style="kanagawa"] .journal-card--image .journal-card-overlay .vote-btn:not(.vote-btn--active):hover:not([aria-disabled="true"]) {
|
|
color: var(--kngw-accent-on-photo);
|
|
border-color: var(--kngw-accent-on-photo);
|
|
}
|
|
|
|
/* ── Quotes read as string literals ──────────────────────────────── */
|
|
[data-style="kanagawa"] .journal-card--quote {
|
|
background: var(--color-surface);
|
|
}
|
|
|
|
[data-style="kanagawa"] .journal-card-quotemark {
|
|
color: var(--kngw-string);
|
|
opacity: 0.35;
|
|
}
|
|
|
|
[data-style="kanagawa"] .journal-card-quote-body {
|
|
color: var(--kngw-string);
|
|
}
|
|
|
|
/* Sub-blocks part on a comment divider: the dashed rule a source file marks
|
|
a section with, and its three dots. */
|
|
[data-style="kanagawa"] .journal-break {
|
|
--journal-break-space: 1.9rem;
|
|
--journal-break-rule: 1px dashed var(--color-border);
|
|
--journal-break-ornament: "· · ·";
|
|
}
|
|
|
|
/* Vote tallies read as number literals */
|
|
[data-style="kanagawa"] .vote-btn:not(.vote-btn--active) {
|
|
color: var(--kngw-number);
|
|
}
|
|
|
|
/* ── Status lines — the comments and the related dumps open on one ── */
|
|
/* The bar is the section's own background, a strip of the chrome as tall as
|
|
the label, and the label is the mode block at its left end: the accent,
|
|
bold, as an editor shows NORMAL. */
|
|
[data-style="kanagawa"] .comment-section,
|
|
[data-style="kanagawa"] .related-section {
|
|
--kngw-status-height: 1.7rem;
|
|
padding-top: 0;
|
|
border-top: none;
|
|
background: linear-gradient(var(--kngw-chrome), var(--kngw-chrome)) top /
|
|
100% var(--kngw-status-height) no-repeat;
|
|
}
|
|
|
|
[data-style="kanagawa"] .comment-section-title,
|
|
[data-style="kanagawa"] .related-section .related-section-title {
|
|
display: inline-block;
|
|
height: var(--kngw-status-height);
|
|
margin-bottom: 1.1rem;
|
|
padding: 0 0.8rem;
|
|
background: var(--color-accent);
|
|
color: var(--color-on-accent);
|
|
line-height: var(--kngw-status-height);
|
|
letter-spacing: 0.06em;
|
|
}
|
|
|
|
/* A dump's note is read at length: full ink, where the base dims it. */
|
|
[data-style="kanagawa"] .dump-comment {
|
|
opacity: 1;
|
|
}
|