mirror of
https://github.com/masa-sumimoto/green-holiday.git
synced 2026-07-22 04:20:23 +00:00
7eacef9012
Add --text-on-accent: #031f04 to .theme-dark so bright lime green buttons (#6bfa6e) display dark readable text (contrast ratio ~13.5:1). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
432 lines
12 KiB
CSS
432 lines
12 KiB
CSS
/* ============================================================
|
||
Green Holiday — Obsidian Theme
|
||
A lime green tinted theme for focused writing.
|
||
Version: 0.3.5
|
||
============================================================ */
|
||
|
||
/* ── Dark Mode ─────────────────────────────────────────────── */
|
||
.theme-dark {
|
||
--color-base-00: #0d2210;
|
||
--color-base-05: #112814;
|
||
--color-base-10: #163018;
|
||
--color-base-20: #1d3c1e;
|
||
--color-base-25: #234824;
|
||
--color-base-30: #2b562c;
|
||
--color-base-35: #346636;
|
||
--color-base-40: #3e7840;
|
||
--color-base-50: #548e56;
|
||
--color-base-60: #74aa76;
|
||
--color-base-70: #9cc89e;
|
||
--color-base-100: #e2f5e2;
|
||
|
||
--color-accent-h: 122;
|
||
--color-accent-s: 90%;
|
||
--color-accent-l: 58%;
|
||
--color-accent: #6bfa6e;
|
||
--color-accent-1: #8ffb91;
|
||
--color-accent-2: #4de050;
|
||
|
||
--interactive-accent: #6bfa6e;
|
||
--interactive-accent-hover: #8ffb91;
|
||
--text-on-accent: #031f04;
|
||
--text-on-accent-inverted: #e2f5e2;
|
||
|
||
--background-modifier-border: #3e7840;
|
||
--background-modifier-border-hover: #548e56;
|
||
--divider-color: #3e7840;
|
||
|
||
--tag-background: rgba(107, 250, 110, 0.1);
|
||
--tag-background-hover: rgba(107, 250, 110, 0.2);
|
||
--tag-color: #9cc89e;
|
||
--tag-color-hover: #6bfa6e;
|
||
--tag-border-color: rgba(107, 250, 110, 0.28);
|
||
|
||
--hr-color: rgba(180, 255, 180, 0.2);
|
||
|
||
--code-background: #0d2210;
|
||
--code-normal: #d4f0d4;
|
||
--code-comment: #4a7a4c;
|
||
--code-keyword: #6bfa6e;
|
||
--code-function: #79d6f7;
|
||
--code-string: #ffd27a;
|
||
--code-number: #ff9e7a;
|
||
--code-tag: #6bfa6e;
|
||
--code-property: #b8e68c;
|
||
--code-operator: #d4f0d4;
|
||
--code-punctuation: #7aaa7c;
|
||
--code-important: #ff9e7a;
|
||
--code-value: #ffd27a;
|
||
|
||
--inline-code-background: rgba(255, 255, 255, 0.1);
|
||
--inline-code-color: #d4f0d4;
|
||
|
||
--graph-node: #548e56;
|
||
--graph-node-focused: #6bfa6e;
|
||
--graph-node-unresolved: #2b562c;
|
||
--graph-node-tag: #9cc89e;
|
||
--graph-node-attachment: #ffd27a;
|
||
--graph-line: #234824;
|
||
--graph-muted: #1d3c1e;
|
||
--graph-text: #9cc89e;
|
||
|
||
--h1-color: #e2f5e2;
|
||
--h2-color: #e2f5e2;
|
||
--h3-color: #e2f5e2;
|
||
--h4-color: #e2f5e2;
|
||
--h5-color: #e2f5e2;
|
||
--h6-color: #e2f5e2;
|
||
|
||
--text-highlight-bg: #aaee2a;
|
||
}
|
||
|
||
/* ── Light Mode ─────────────────────────────────────────────── */
|
||
.theme-light {
|
||
/* base スケール: 淡い緑から濃い緑へ滑らかに */
|
||
--color-base-00: #e2fce2;
|
||
--color-base-05: #cdf5cd;
|
||
--color-base-10: #b5ecb5;
|
||
--color-base-20: #9ae29a;
|
||
--color-base-25: #7dd47d;
|
||
--color-base-30: #5ec05e;
|
||
--color-base-35: #42a842;
|
||
--color-base-40: #2d8e2d;
|
||
--color-base-50: #1a721a;
|
||
--color-base-60: #0e5a0e;
|
||
--color-base-70: #084408;
|
||
--color-base-100: #011502;
|
||
|
||
--background-secondary: #cef4ce;
|
||
--background-secondary-alt: #bfefbf;
|
||
--background-modifier-hover: rgba(0, 0, 0, 0.05);
|
||
--background-modifier-active-hover: rgba(0, 0, 0, 0.08);
|
||
|
||
/* accent はユーザー設定に委ねる（Settings > Appearance > Accent color が反映される） */
|
||
|
||
--tag-background: rgba(255, 255, 255, 0.65);
|
||
--tag-background-hover: rgba(255, 255, 255, 0.9);
|
||
--tag-color: #084408;
|
||
--tag-color-hover: #031f04;
|
||
--tag-border-color: rgba(8, 68, 8, 0.28);
|
||
|
||
--hr-color: rgba(0, 80, 0, 0.2);
|
||
|
||
--inline-code-background: rgba(255, 255, 255, 0.75);
|
||
--inline-code-color: #1a3a1a;
|
||
|
||
--graph-node: #2d8e2d;
|
||
--graph-node-focused: #031f04;
|
||
--graph-node-unresolved: #9ae29a;
|
||
--graph-node-tag: #084408;
|
||
--graph-node-attachment: #cc7700;
|
||
--graph-line: #7dd47d;
|
||
--graph-muted: #bfefbf;
|
||
--graph-text: #031f04;
|
||
|
||
--text-highlight-bg: #e8f200;
|
||
|
||
--h1-color: #031f04;
|
||
--h2-color: #031f04;
|
||
--h3-color: #031f04;
|
||
--h4-color: #031f04;
|
||
--h5-color: #031f04;
|
||
--h6-color: #031f04;
|
||
|
||
--code-background: #1a351a;
|
||
--code-normal: #d4f0d4;
|
||
--code-comment: #4a7a4c;
|
||
--code-keyword: #6bfa6e;
|
||
--code-function: #79d6f7;
|
||
--code-string: #ffd27a;
|
||
--code-number: #ff9e7a;
|
||
--code-tag: #6bfa6e;
|
||
--code-property: #b8e68c;
|
||
--code-operator: #d4f0d4;
|
||
--code-punctuation: #7aaa7c;
|
||
--code-important: #ff9e7a;
|
||
--code-value: #ffd27a;
|
||
}
|
||
|
||
/* ── Background gradient + dot grid ────────────────────────── */
|
||
|
||
/* Light */
|
||
.theme-light .workspace-leaf-content[data-type="markdown"] .view-content {
|
||
background:
|
||
radial-gradient(circle, rgba(0, 80, 0, 0.25) 1px, transparent 1px),
|
||
linear-gradient(to bottom, #e2fce2 0%, #6bfa6e 100%) !important;
|
||
background-size:
|
||
20px 20px,
|
||
100% 100% !important;
|
||
}
|
||
.theme-light .markdown-source-view.mod-cm6,
|
||
.theme-light .cm-editor,
|
||
.theme-light .cm-scroller {
|
||
background: transparent !important;
|
||
}
|
||
.theme-light .markdown-reading-view,
|
||
.theme-light .markdown-preview-view {
|
||
background: transparent !important;
|
||
}
|
||
|
||
/* Dark */
|
||
.theme-dark .workspace-leaf-content[data-type="markdown"] .view-content {
|
||
background:
|
||
radial-gradient(circle, rgba(100, 255, 100, 0.18) 1px, transparent 1px),
|
||
linear-gradient(to bottom, #0d2210 0%, #234824 100%) !important;
|
||
background-size:
|
||
20px 20px,
|
||
100% 100% !important;
|
||
}
|
||
.theme-dark .markdown-source-view.mod-cm6,
|
||
.theme-dark .cm-editor,
|
||
.theme-dark .cm-scroller {
|
||
background: transparent !important;
|
||
}
|
||
.theme-dark .markdown-reading-view,
|
||
.theme-dark .markdown-preview-view {
|
||
background: transparent !important;
|
||
}
|
||
|
||
/* ── Typography ─────────────────────────────────────────────── */
|
||
body {
|
||
--font-text-size: 16px;
|
||
--line-height-normal: 1.7;
|
||
--p-spacing: 1em;
|
||
|
||
/* Bold = --font-weight (400) + --bold-modifier, so 300 yields 700.
|
||
Note: Obsidian computes bold via calc(--font-weight + --bold-modifier)
|
||
directly in many rules, so overriding --bold-weight alone has no effect */
|
||
--bold-modifier: 300;
|
||
|
||
--h2-weight: 700;
|
||
--h3-weight: 600;
|
||
--h4-weight: 600;
|
||
}
|
||
|
||
/* ── Inline title (file name) ───────────────────────────────── */
|
||
.inline-title {
|
||
font-size: 2.4em !important;
|
||
font-weight: 800 !important;
|
||
letter-spacing: -0.02em;
|
||
line-height: 1.2;
|
||
margin-bottom: 0.4em;
|
||
}
|
||
.theme-light .inline-title {
|
||
color: #031f04 !important;
|
||
}
|
||
.theme-dark .inline-title {
|
||
color: #6bfa6e !important;
|
||
}
|
||
|
||
/* ── Properties (frontmatter metadata) ─────────────────────── */
|
||
.metadata-container {
|
||
background-color: rgba(0, 80, 0, 0.06);
|
||
border: 1px solid rgba(0, 80, 0, 0.12);
|
||
border-radius: 8px;
|
||
padding: 0.6em 1em 0.8em;
|
||
}
|
||
|
||
.theme-dark .metadata-container {
|
||
background-color: rgba(100, 255, 100, 0.06);
|
||
border-color: rgba(100, 255, 100, 0.12);
|
||
}
|
||
|
||
/* ── Inline code (GitHub-style) ────────────────────────────── */
|
||
|
||
/* Reading mode */
|
||
.markdown-preview-view :not(pre) > code,
|
||
.markdown-rendered :not(pre) > code {
|
||
background: var(--inline-code-background) !important;
|
||
color: var(--inline-code-color) !important;
|
||
padding: 0.15em 0.45em;
|
||
border-radius: 4px;
|
||
font-size: 85%;
|
||
}
|
||
|
||
/* Live preview (CM6) */
|
||
.cm-s-obsidian .cm-inline-code {
|
||
background: var(--inline-code-background) !important;
|
||
color: var(--inline-code-color) !important;
|
||
padding: 0.1em 0.35em;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
/* ── Table ──────────────────────────────────────────────────── */
|
||
.markdown-preview-view table,
|
||
.markdown-rendered table,
|
||
.markdown-source-view table {
|
||
border-collapse: collapse;
|
||
width: 100%;
|
||
}
|
||
|
||
.markdown-preview-view th,
|
||
.markdown-rendered th,
|
||
.markdown-source-view th {
|
||
background: rgba(255, 255, 255, 0.55) !important;
|
||
}
|
||
|
||
.markdown-preview-view td,
|
||
.markdown-rendered td,
|
||
.markdown-source-view td {
|
||
background: rgba(255, 255, 255, 0.75) !important;
|
||
}
|
||
|
||
.theme-dark .markdown-preview-view th,
|
||
.theme-dark .markdown-rendered th,
|
||
.theme-dark .markdown-source-view th {
|
||
background: rgba(255, 255, 255, 0.06) !important;
|
||
}
|
||
|
||
.theme-dark .markdown-preview-view td,
|
||
.theme-dark .markdown-rendered td,
|
||
.theme-dark .markdown-source-view td {
|
||
background: rgba(255, 255, 255, 0.03) !important;
|
||
}
|
||
|
||
/* ── Highlight (==text==) ───────────────────────────────────── */
|
||
.theme-light mark,
|
||
.theme-light .markdown-preview-view mark,
|
||
.theme-light .markdown-rendered mark {
|
||
color: #1a1a00;
|
||
padding: 0.05em 0.1em;
|
||
border-radius: 2px;
|
||
}
|
||
.theme-light .cm-s-obsidian .cm-highlight {
|
||
color: #1a1a00;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
.theme-dark mark,
|
||
.theme-dark .markdown-preview-view mark,
|
||
.theme-dark .markdown-rendered mark {
|
||
color: #061400;
|
||
padding: 0.05em 0.1em;
|
||
border-radius: 2px;
|
||
}
|
||
.theme-dark .cm-s-obsidian .cm-highlight {
|
||
color: #061400;
|
||
border-radius: 2px;
|
||
}
|
||
|
||
/* ── Tags (#tag) ────────────────────────────────────────────── */
|
||
/* Reading mode + Properties (both use .tag class) */
|
||
.tag {
|
||
background: var(--tag-background);
|
||
color: var(--tag-color);
|
||
border: 1px solid var(--tag-border-color);
|
||
border-radius: 4px;
|
||
padding: 0.1em 0.5em;
|
||
font-size: 85%;
|
||
text-decoration: none;
|
||
}
|
||
.tag:hover {
|
||
background: var(--tag-background-hover);
|
||
color: var(--tag-color-hover);
|
||
}
|
||
|
||
/* Live preview (CM6) */
|
||
.cm-s-obsidian span.cm-hashtag {
|
||
background: var(--tag-background);
|
||
color: var(--tag-color);
|
||
border-radius: 4px;
|
||
padding: 0.05em 0.25em;
|
||
font-size: 90%;
|
||
}
|
||
.cm-s-obsidian span.cm-hashtag-begin {
|
||
border-radius: 4px 0 0 4px;
|
||
padding-right: 0;
|
||
}
|
||
.cm-s-obsidian span.cm-hashtag-end {
|
||
border-radius: 0 4px 4px 0;
|
||
padding-left: 0;
|
||
}
|
||
|
||
|
||
/* ── Horizontal Rule (---) ──────────────────────────────────── */
|
||
|
||
.hr.cm-line hr {
|
||
border-top: 2px dotted var(--hr-color);
|
||
}
|
||
|
||
/* ── Code block background (source / live preview mode) ─────── */
|
||
.markdown-source-view.mod-cm6 .cm-line.HyperMD-codeblock {
|
||
background-color: var(--code-background);
|
||
}
|
||
|
||
/* ── Math (inline / block) ──────────────────────────────────── */
|
||
/* light モード: cm-math スパン群をダークで読めるように上書き */
|
||
.theme-light .cm-math {
|
||
color: #1a4a1a;
|
||
}
|
||
.theme-light .cm-formatting-math {
|
||
color: #3a8a3e;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* ── Active line highlight: コードブロック内のみ ────────────── */
|
||
.theme-dark
|
||
.markdown-source-view.cm-s-obsidian.mod-cm6
|
||
.cm-active.cm-line.HyperMD-codeblock {
|
||
background-color: #1a3318;
|
||
}
|
||
.theme-light
|
||
.markdown-source-view.cm-s-obsidian.mod-cm6
|
||
.cm-active.cm-line.HyperMD-codeblock {
|
||
background-color: #224422;
|
||
}
|
||
|
||
/* ── Cursor ─────────────────────────────────────────────────── */
|
||
.theme-light .markdown-source-view.mod-cm6 .cm-content {
|
||
caret-color: #031f04;
|
||
}
|
||
.theme-light .markdown-source-view.mod-cm6 .cm-line.HyperMD-codeblock {
|
||
caret-color: #6bfa6e;
|
||
}
|
||
.theme-dark .markdown-source-view.mod-cm6 .cm-content {
|
||
caret-color: #6bfa6e;
|
||
}
|
||
|
||
/* ── Code block: 角丸は先頭・末尾行のみ ─────────────────────── */
|
||
.markdown-source-view.mod-cm6 .HyperMD-codeblock-begin {
|
||
border-radius: 6px 6px 0 0;
|
||
}
|
||
.markdown-source-view.mod-cm6 .HyperMD-codeblock-end {
|
||
border-radius: 0 0 6px 6px;
|
||
}
|
||
|
||
/* ── Code block border: ダークモードのみ ────────────────────── */
|
||
.theme-dark .markdown-source-view.mod-cm6 .cm-line.HyperMD-codeblock {
|
||
border-left: 1px solid #346636;
|
||
border-right: 1px solid #346636;
|
||
}
|
||
.theme-dark .markdown-source-view.mod-cm6 .HyperMD-codeblock-begin {
|
||
border-top: 1px solid #346636;
|
||
}
|
||
.theme-dark .markdown-source-view.mod-cm6 .HyperMD-codeblock-end {
|
||
border-bottom: 1px solid #346636;
|
||
}
|
||
|
||
/* preview mode */
|
||
:is(.markdown-preview-view, .markdown-rendered) pre {
|
||
border-radius: 6px;
|
||
padding: 1em 1.2em;
|
||
}
|
||
|
||
/* ── Callouts ────────────────────────────────────────────────── */
|
||
.callout {
|
||
border-radius: 6px;
|
||
border-left-width: 3px;
|
||
}
|
||
|
||
.theme-light .callout {
|
||
background-color: rgba(255, 255, 255, 0.55);
|
||
backdrop-filter: blur(2px);
|
||
}
|
||
|
||
.theme-dark .callout {
|
||
background-color: rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.callout-title {
|
||
font-weight: 700;
|
||
letter-spacing: 0.01em;
|
||
}
|