Theme: switch blog to Harbor light/dark (HANCORE-linux/omarchy-harbor-theme, MIT); sync missing Mermaid section; regenerate palette; update README + third-party licenses
This commit is contained in:
trilium-share-gruvbox
@@ -1,16 +1,16 @@
|
||||
# Trilium Share – Gruvbox Blog System
|
||||
# Trilium Share – Harbor Blog System
|
||||
|
||||
[](LICENSE)
|
||||
[](https://richard.familie-zink.org)
|
||||
[](https://github.com/TriliumNext/Trilium)
|
||||
[](https://github.com/morhetz/gruvbox)
|
||||
[](https://github.com/HANCORE-linux/omarchy-harbor-theme)
|
||||
[](https://opencode.ai)
|
||||
[](https://www.deepseek.com/)
|
||||
|
||||
> **Note:** This theme and blog system was created with the help of
|
||||
> [**Opencode**](https://opencode.ai) and **Deepseek V4 Flash**.
|
||||
|
||||
A complete **public-share blog system + Gruvbox theme** for [TriliumNext](https://github.com/TriliumNext/Trilium).
|
||||
A complete **public-share blog system + Harbor theme** for [TriliumNext](https://github.com/TriliumNext/Trilium).
|
||||
It turns a normal Trilium note tree into a themed, searchable blog with categories, an RSS feed,
|
||||
a sitemap, a digital garden (growth states) and client-side rendering of Mermaid, Excalidraw and
|
||||
mind-map notes.
|
||||
@@ -18,13 +18,13 @@ mind-map notes.
|
||||
Everything is driven by Trilium's built-in **Public Share** feature plus a few frontend/backend scripts –
|
||||
no external dependencies (except `highlight.js`, vendored in `lib/`).
|
||||
|
||||
|
||||
|
||||
|
||||
*Palette from the [morhetz/gruvbox](https://github.com/morhetz/gruvbox) repository.*
|
||||
*Palette from the [HANCORE-linux/omarchy-harbor-theme](https://github.com/HANCORE-linux/omarchy-harbor-theme) (Harbor light / Harbordark) repository, MIT licensed.*
|
||||
|
||||
## Features
|
||||
|
||||
- Gruvbox light/dark theme for the share, with a theme toggle in the header.
|
||||
- Harbor light/dark theme for the share, with a theme toggle in the header.
|
||||
- Blog index, category pages, sub-categories, tags and tag overview.
|
||||
- **Menu sorting**: articles in the left menu are sorted by publication date (newest first)
|
||||
and labelled `Fri 2026-08-28 <shortened title>` automatically. All date displays
|
||||
@@ -66,7 +66,7 @@ no external dependencies (except `highlight.js`, vendored in `lib/`).
|
||||
|---|---|---|
|
||||
| `blog_generator.js` | backend script that generates index, feed, sitemap, search data, category & tag pages | code, `application/javascript;env=backend` |
|
||||
| `blog_publish_manager.js` | backend script that mirrors notes between `Unpublished` and the blog | code, `application/javascript;env=backend` |
|
||||
| `theme/blog_share_theme.css` | the Gruvbox share theme | code, `text/css` |
|
||||
| `theme/blog_share_theme.css` | the Harbor share theme (Harbor light / Harbordark) | code, `text/css` |
|
||||
| `theme/favicon.svg` | default site favicon | code (SVG) |
|
||||
| `theme/cookie.woff2` | "Cookie" font for the Buy me a coffee button | file, `font/woff2` |
|
||||
| `lib/highlight.js` | vendored highlight.js | code, `application/javascript` |
|
||||
@@ -297,7 +297,7 @@ server {
|
||||
|
||||
## Customisation
|
||||
|
||||
- **Theme**: edit `theme/blog_share_theme.css` (Gruvbox light/dark via `html.theme-light/dark`).
|
||||
- **Theme**: edit `theme/blog_share_theme.css` (Harbor light/dark via `html.theme-light/dark`).
|
||||
- **Buy me a coffee**: edit `scripts/bmc_button.js` (link, text, copyright) – the font is
|
||||
referenced via `__COOKIE_FONT_ID__`.
|
||||
- **Category logos**: copy the `examples/` icon + `ignis8_menu_icon.js` pattern to give a
|
||||
|
||||
@@ -8,7 +8,8 @@ The following files in this repository are **not** covered by the GPL-3.0 and ke
|
||||
| `lib/highlight.js` | [Highlight.js](https://github.com/highlightjs/highlight.js) v11.9.0 | [BSD-3-Clause](#bsd-3-clause) |
|
||||
| `lib/hljs_line_numbers.js` | [highlightjs-line-numbers](https://github.com/yury-dymov/highlightjs-line-numbers) | [MIT](#mit-license) |
|
||||
| `theme/cookie.woff2` | "Cookie" font, © 2011 [Ania Kruk](https://fonts.google.com/specimen/Cookie) | [SIL Open Font License 1.1](https://openfontlicense.org/) |
|
||||
| `assets/palette.png` | Gruvbox palette image from [morhetz/gruvbox](https://github.com/morhetz/gruvbox) (repo: MIT) | [MIT](#mit-license) |
|
||||
| `assets/palette.png` | Harbor / Harbordark palette image generated from [HANCORE-linux/omarchy-harbor-theme](https://github.com/HANCORE-linux/omarchy-harbor-theme) (repo: MIT) | [MIT](#mit-license) |
|
||||
| `theme/blog_share_theme.css` | Harbor light / Harbordark color scheme from [HANCORE-linux/omarchy-harbor-theme](https://github.com/HANCORE-linux/omarchy-harbor-theme) (repo: MIT) | [MIT](#mit-license) |
|
||||
| `lib/3d/three.min.js`, `lib/3d/OrbitControls.js`, `lib/3d/STLLoader.js` | [three.js](https://github.com/mrdoob/three.js) r128 | [MIT](#mit-license) |
|
||||
| `lib/3d/occt-import-js.js`, `lib/3d/occt-import-js.wasm` | [occt-import-js](https://github.com/kovacsv/occt-import-js) (OpenCASCADE, WASM) | [LGPL-2.1](#lgpl-21) |
|
||||
| `lib/3d/occt-wasm-bundle.js`, `lib/3d/occt-wasm.wasm` | [occt-wasm](https://github.com/andymai/occt-wasm) (OpenCASCADE **OCCT V8**, WebAssembly, esbuild-bundled `OcctKernel`) | [MIT OR Apache-2.0](#mit-license) |
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 370 KiB After Width: | Height: | Size: 20 KiB |
+365
-188
@@ -1,41 +1,41 @@
|
||||
/*
|
||||
* Gruvbox Share Theme for Richard's Blog (Trilium Public Share)
|
||||
* Palette: bg #282828 / #3c3836 / #504945 / #1d2021 fg #ebdbb2 / #fbf1c7
|
||||
* red #fb4934 green #b8bb26 yellow #fabd2f
|
||||
* blue #83a598 purple #d3869b aqua #8ec07c orange #fe8019
|
||||
* Harbor Share Theme for Richard's Blog (Trilium Public Share)
|
||||
* Light: Harbor (paper #dfe4c4 / ink #1c2d28, accent #5e81ac)
|
||||
* Dark: Harbordark (#1b1b1b / #efebdc, accent #e75a50)
|
||||
* Based on https://github.com/HANCORE-linux/omarchy-harbor-theme (MIT)
|
||||
*/
|
||||
|
||||
html.theme-light {
|
||||
--background-primary: #fbf1c7;
|
||||
--background-secondary: #ebdbb2;
|
||||
--background-highlight: #d5c4a1;
|
||||
--background-active: #83a598;
|
||||
--blog-card-bg: #ebdbb2;
|
||||
--scrollbar-thumb: #d5c4a1;
|
||||
--scrollbar-hover: #bdae93;
|
||||
--scrollbar-track: #ebdbb2;
|
||||
--text-primary: #3c3836;
|
||||
--text-heading: #282828;
|
||||
--text-menu: #504945;
|
||||
--text-link: #076678;
|
||||
--text-menu-active: #fbf1c7;
|
||||
--background-primary: #dfe4c4;
|
||||
--background-secondary: #d0d6b4;
|
||||
--background-highlight: #c3c9a6;
|
||||
--background-active: #5e81ac;
|
||||
--blog-card-bg: #d0d6b4;
|
||||
--scrollbar-thumb: #c3c9a6;
|
||||
--scrollbar-hover: #b3ba96;
|
||||
--scrollbar-track: #d0d6b4;
|
||||
--text-primary: #1c2d28;
|
||||
--text-heading: #1c2d28;
|
||||
--text-menu: #556753;
|
||||
--text-link: #4c6c94;
|
||||
--text-menu-active: #dfe4c4;
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
html.theme-dark {
|
||||
--background-primary: #282828;
|
||||
--background-secondary: #1d2021;
|
||||
--background-highlight: #504945;
|
||||
--background-active: #83a598;
|
||||
--blog-card-bg: #3c3836;
|
||||
--scrollbar-thumb: #504945;
|
||||
--scrollbar-hover: #665c54;
|
||||
--scrollbar-track: #1d2021;
|
||||
--text-primary: #ebdbb2;
|
||||
--text-heading: #fbf1c7;
|
||||
--text-menu: #a89984;
|
||||
--text-link: #83a598;
|
||||
--text-menu-active: #1d2021;
|
||||
--background-primary: #1b1b1b;
|
||||
--background-secondary: #232323;
|
||||
--background-highlight: #2e2e2e;
|
||||
--background-active: #e75a50;
|
||||
--blog-card-bg: #262626;
|
||||
--scrollbar-thumb: #2e2e2e;
|
||||
--scrollbar-hover: #3f3f3f;
|
||||
--scrollbar-track: #1b1b1b;
|
||||
--text-primary: #efebdc;
|
||||
--text-heading: #efebdc;
|
||||
--text-menu: #a99b7a;
|
||||
--text-link: #e58980;
|
||||
--text-menu-active: #1b1b1b;
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
@@ -139,8 +139,8 @@ body {
|
||||
padding: 6px 12px 8px;
|
||||
border-radius: 8px;
|
||||
background: #fabd2f;
|
||||
color: #1d2021;
|
||||
border: 2px solid #1d2021;
|
||||
color: #1c2d28;
|
||||
border: 2px solid #1c2d28;
|
||||
font-family: "Cookie", "Brush Script MT", cursive;
|
||||
font-size: 1.4em;
|
||||
line-height: 1.1;
|
||||
@@ -149,8 +149,8 @@ body {
|
||||
}
|
||||
|
||||
.bmc-btn:hover {
|
||||
background: #fe8019;
|
||||
color: #1d2021;
|
||||
background: #dc8164;
|
||||
color: #1c2d28;
|
||||
text-decoration: none;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
@@ -325,35 +325,35 @@ body {
|
||||
min-width: 0;
|
||||
padding: 6px 10px 6px 32px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid rgba(131, 165, 152, 0.55);
|
||||
background: rgba(131, 165, 152, 0.08);
|
||||
border: 1px solid rgba(119, 131, 138, 0.55);
|
||||
background: rgba(119, 131, 138, 0.10);
|
||||
color: var(--text-heading);
|
||||
font-size: 0.9em;
|
||||
transition: border-color 150ms ease, box-shadow 150ms ease;
|
||||
}
|
||||
|
||||
html.theme-light .blog-search-header-input {
|
||||
border-color: #076678;
|
||||
background: rgba(7, 102, 120, 0.10);
|
||||
border-color: #4c6c94;
|
||||
background: rgba(76, 108, 148, 0.10);
|
||||
}
|
||||
|
||||
.blog-search-header-input:focus {
|
||||
outline: none;
|
||||
border-color: #83a598;
|
||||
box-shadow: 0 0 0 2px rgba(131, 165, 152, 0.20);
|
||||
border-color: #77838a;
|
||||
box-shadow: 0 0 0 2px rgba(119, 131, 138, 0.20);
|
||||
}
|
||||
|
||||
html.theme-light .blog-search-header-input:focus {
|
||||
border-color: #076678;
|
||||
box-shadow: 0 0 0 2px rgba(7, 102, 120, 0.15);
|
||||
border-color: #4c6c94;
|
||||
box-shadow: 0 0 0 2px rgba(76, 108, 148, 0.15);
|
||||
}
|
||||
|
||||
.search-item .search-icon {
|
||||
color: rgba(131, 165, 152, 0.85);
|
||||
color: rgba(119, 131, 138, 0.85);
|
||||
}
|
||||
|
||||
html.theme-light .search-item .search-icon {
|
||||
color: #076678;
|
||||
color: #4c6c94;
|
||||
}
|
||||
|
||||
.tn-image {
|
||||
@@ -541,13 +541,13 @@ body.is-garden #title .note-state {
|
||||
}
|
||||
|
||||
body.is-garden #content h1#title {
|
||||
background-color: rgba(184, 187, 38, 0.35) !important;
|
||||
border-bottom-color: rgba(184, 187, 38, 0.60) !important;
|
||||
background-color: rgba(169, 155, 122, 0.30) !important;
|
||||
border-bottom-color: rgba(169, 155, 122, 0.60) !important;
|
||||
}
|
||||
|
||||
html.theme-light body.is-garden #content h1#title {
|
||||
background-color: rgba(184, 187, 38, 0.20) !important;
|
||||
border-bottom-color: rgba(184, 187, 38, 0.45) !important;
|
||||
background-color: rgba(85, 103, 83, 0.15) !important;
|
||||
border-bottom-color: rgba(85, 103, 83, 0.40) !important;
|
||||
}
|
||||
|
||||
/* ---------- Blog index (generated article list) ---------- */
|
||||
@@ -681,35 +681,35 @@ a.tag:hover {
|
||||
border-bottom: 1px solid var(--background-highlight);
|
||||
}
|
||||
|
||||
/* ---------- Headings (h2-h6) - Gruvbox header boxes ---------- */
|
||||
/* ---------- Headings (h2-h6) - Harbor header boxes ---------- */
|
||||
html.theme-dark {
|
||||
--header-h2-bg: rgba(131, 165, 152, 0.35);
|
||||
--header-h2-border: rgba(131, 165, 152, 0.7);
|
||||
--header-h3-bg: rgba(142, 192, 124, 0.25);
|
||||
--header-h3-border: rgba(142, 192, 124, 0.6);
|
||||
--header-h4-bg: rgba(250, 189, 47, 0.25);
|
||||
--header-h4-border: rgba(250, 189, 47, 0.6);
|
||||
--header-h5-bg: rgba(211, 134, 155, 0.25);
|
||||
--header-h5-border: rgba(211, 134, 155, 0.6);
|
||||
--header-h6-bg: rgba(254, 128, 25, 0.25);
|
||||
--header-h6-border: rgba(254, 128, 25, 0.6);
|
||||
--header-h1-bg: rgba(251, 73, 52, 0.30);
|
||||
--header-h1-border: rgba(251, 73, 52, 0.6);
|
||||
--header-h2-bg: rgba(231, 90, 80, 0.30);
|
||||
--header-h2-border: rgba(231, 90, 80, 0.6);
|
||||
--header-h3-bg: rgba(169, 155, 122, 0.25);
|
||||
--header-h3-border: rgba(169, 155, 122, 0.6);
|
||||
--header-h4-bg: rgba(225, 206, 152, 0.22);
|
||||
--header-h4-border: rgba(225, 206, 152, 0.55);
|
||||
--header-h5-bg: rgba(119, 131, 138, 0.25);
|
||||
--header-h5-border: rgba(119, 131, 138, 0.6);
|
||||
--header-h6-bg: rgba(229, 137, 128, 0.25);
|
||||
--header-h6-border: rgba(229, 137, 128, 0.6);
|
||||
--header-h1-bg: rgba(244, 67, 54, 0.30);
|
||||
--header-h1-border: rgba(244, 67, 54, 0.6);
|
||||
}
|
||||
|
||||
html.theme-light {
|
||||
--header-h2-bg: rgba(7, 102, 120, 0.18);
|
||||
--header-h2-border: rgba(7, 102, 120, 0.45);
|
||||
--header-h3-bg: rgba(121, 116, 14, 0.10);
|
||||
--header-h3-border: rgba(121, 116, 14, 0.35);
|
||||
--header-h4-bg: rgba(181, 118, 20, 0.10);
|
||||
--header-h4-border: rgba(181, 118, 20, 0.35);
|
||||
--header-h5-bg: rgba(143, 63, 113, 0.10);
|
||||
--header-h5-border: rgba(143, 63, 113, 0.35);
|
||||
--header-h6-bg: rgba(175, 58, 3, 0.10);
|
||||
--header-h6-border: rgba(175, 58, 3, 0.35);
|
||||
--header-h1-bg: rgba(157, 0, 6, 0.12);
|
||||
--header-h1-border: rgba(157, 0, 6, 0.40);
|
||||
--header-h2-bg: rgba(94, 129, 172, 0.18);
|
||||
--header-h2-border: rgba(94, 129, 172, 0.45);
|
||||
--header-h3-bg: rgba(85, 103, 83, 0.14);
|
||||
--header-h3-border: rgba(85, 103, 83, 0.38);
|
||||
--header-h4-bg: rgba(220, 129, 100, 0.14);
|
||||
--header-h4-border: rgba(220, 129, 100, 0.38);
|
||||
--header-h5-bg: rgba(138, 91, 129, 0.12);
|
||||
--header-h5-border: rgba(138, 91, 129, 0.35);
|
||||
--header-h6-bg: rgba(61, 114, 125, 0.12);
|
||||
--header-h6-border: rgba(61, 114, 125, 0.35);
|
||||
--header-h1-bg: rgba(177, 71, 82, 0.14);
|
||||
--header-h1-border: rgba(177, 71, 82, 0.40);
|
||||
}
|
||||
|
||||
#content h1 {
|
||||
@@ -766,36 +766,36 @@ html.theme-light {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ---------- Code blocks - Gruvbox Dark (always, also in light mode) ---------- */
|
||||
/* ---------- Code blocks - Harbordark (always, also in light mode) ---------- */
|
||||
.ck-content pre,
|
||||
#content pre {
|
||||
background-color: #282828;
|
||||
color: #ebdbb2;
|
||||
border: 1px solid #504945;
|
||||
background-color: #222222;
|
||||
color: #efebdc;
|
||||
border: 1px solid #2e2e2e;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.ck-content code,
|
||||
#content code {
|
||||
background-color: #3c3836;
|
||||
color: #ebdbb2;
|
||||
border-color: #504945;
|
||||
background-color: #2a2a2a;
|
||||
color: #efebdc;
|
||||
border-color: #3f3f3f;
|
||||
border-radius: 8px;
|
||||
padding: 0.1em 0.35em;
|
||||
}
|
||||
|
||||
html.theme-light .ck-content pre,
|
||||
html.theme-light #content pre {
|
||||
background-color: #fbf1c7;
|
||||
color: #3c3836;
|
||||
border-color: #d5c4a1;
|
||||
background-color: #e8ecd0;
|
||||
color: #1c2d28;
|
||||
border-color: #c3c9a6;
|
||||
}
|
||||
|
||||
html.theme-light .ck-content code,
|
||||
html.theme-light #content code {
|
||||
background-color: #d5c4a1;
|
||||
color: #3c3836;
|
||||
border-color: #bdae93;
|
||||
background-color: #cdd3b0;
|
||||
color: #1c2d28;
|
||||
border-color: #b3ba96;
|
||||
}
|
||||
|
||||
/* ---------- Eingebettete Bilder: Radius wie Code-Blöcke (8px) ---------- */
|
||||
@@ -815,7 +815,7 @@ html.theme-light #content code {
|
||||
width: calc(100vw - 24px);
|
||||
margin: 1em 0;
|
||||
margin-left: calc(50% - (100vw - 24px) / 2);
|
||||
background: #1d2021;
|
||||
background: #1b1b1b;
|
||||
border: 1px solid var(--background-highlight);
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
@@ -833,9 +833,9 @@ html.theme-light #content code {
|
||||
z-index: 3;
|
||||
display: none;
|
||||
font-size: 0.75em;
|
||||
color: #a89984;
|
||||
background: rgba(40, 40, 40, 0.8);
|
||||
border: 1px solid #504945;
|
||||
color: #a99b7a;
|
||||
background: rgba(27, 27, 27, 0.85);
|
||||
border: 1px solid #2e2e2e;
|
||||
border-radius: 6px;
|
||||
padding: 2px 10px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
@@ -858,12 +858,12 @@ html.theme-light #content code {
|
||||
text-align: center;
|
||||
padding: 48px;
|
||||
box-sizing: border-box;
|
||||
color: #a89984;
|
||||
color: #a99b7a;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.model-viewer-status.error {
|
||||
color: #fb4934;
|
||||
color: #F44336;
|
||||
}
|
||||
|
||||
.model-viewer-progress {
|
||||
@@ -874,7 +874,7 @@ html.theme-light #content code {
|
||||
height: 6px;
|
||||
width: min(60%, 480px);
|
||||
margin: 0 auto;
|
||||
background: #3c3836;
|
||||
background: #2a2a2a;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -882,7 +882,7 @@ html.theme-light #content code {
|
||||
.model-viewer-progress-fill {
|
||||
height: 100%;
|
||||
width: 0;
|
||||
background: #b8bb26;
|
||||
background: #E1CE98;
|
||||
border-radius: 3px;
|
||||
transition: width 150ms ease;
|
||||
}
|
||||
@@ -902,7 +902,7 @@ html.theme-light #content code {
|
||||
top: 8px;
|
||||
left: 10px;
|
||||
font-size: 0.75em;
|
||||
color: #a89984;
|
||||
color: #a99b7a;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -923,7 +923,7 @@ html.theme-light #content code {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* ---------- Bildunterschriften (Gruvbox) ---------- */
|
||||
/* ---------- Bildunterschriften (Harbor) ---------- */
|
||||
#content figcaption {
|
||||
font-size: 0.85em;
|
||||
font-style: italic;
|
||||
@@ -938,19 +938,19 @@ html.theme-light #content code {
|
||||
}
|
||||
|
||||
.hljs {
|
||||
background: #282828;
|
||||
color: #ebdbb2;
|
||||
background: #222222;
|
||||
color: #efebdc;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-quote {
|
||||
color: #928374;
|
||||
color: #817f68;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag,
|
||||
.hljs-subst {
|
||||
color: #fb4934;
|
||||
color: #F44336;
|
||||
}
|
||||
|
||||
.hljs-number,
|
||||
@@ -958,24 +958,24 @@ html.theme-light #content code {
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-tag .hljs-attr {
|
||||
color: #d3869b;
|
||||
color: #e58980;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-doctag {
|
||||
color: #b8bb26;
|
||||
color: #a99b7a;
|
||||
}
|
||||
|
||||
.hljs-title,
|
||||
.hljs-section,
|
||||
.hljs-selector-id {
|
||||
color: #fe8019;
|
||||
color: #E1CE98;
|
||||
}
|
||||
|
||||
.hljs-type,
|
||||
.hljs-class .hljs-title,
|
||||
.hljs-attribute {
|
||||
color: #fabd2f;
|
||||
color: #77838a;
|
||||
}
|
||||
|
||||
.hljs-symbol,
|
||||
@@ -984,13 +984,13 @@ html.theme-light #content code {
|
||||
.hljs-meta,
|
||||
.hljs-deletion,
|
||||
.hljs-addition {
|
||||
color: #d3869b;
|
||||
color: #e58980;
|
||||
}
|
||||
|
||||
.hljs-built_in,
|
||||
.hljs-builtin-name,
|
||||
.hljs-params {
|
||||
color: #8ec07c;
|
||||
color: #77838a;
|
||||
}
|
||||
|
||||
.hljs-emphasis {
|
||||
@@ -1000,22 +1000,22 @@ html.theme-light #content code {
|
||||
.hljs-strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
/* ---------- Light mode: Gruvbox Light highlighter ---------- */
|
||||
/* ---------- Light mode: Harbor light highlighter ---------- */
|
||||
html.theme-light .hljs,
|
||||
html.theme-light pre code.hljs {
|
||||
background: #fbf1c7 !important;
|
||||
color: #3c3836;
|
||||
background: #e8ecd0 !important;
|
||||
color: #1c2d28;
|
||||
}
|
||||
|
||||
html.theme-light .hljs-comment,
|
||||
html.theme-light .hljs-quote {
|
||||
color: #928374;
|
||||
color: #7d8794;
|
||||
}
|
||||
|
||||
html.theme-light .hljs-keyword,
|
||||
html.theme-light .hljs-selector-tag,
|
||||
html.theme-light .hljs-subst {
|
||||
color: #9d0006;
|
||||
color: #b14752;
|
||||
}
|
||||
|
||||
html.theme-light .hljs-number,
|
||||
@@ -1023,24 +1023,24 @@ html.theme-light .hljs-literal,
|
||||
html.theme-light .hljs-variable,
|
||||
html.theme-light .hljs-template-variable,
|
||||
html.theme-light .hljs-tag .hljs-attr {
|
||||
color: #8f3f71;
|
||||
color: #8a5b81;
|
||||
}
|
||||
|
||||
html.theme-light .hljs-string,
|
||||
html.theme-light .hljs-doctag {
|
||||
color: #79740e;
|
||||
color: #556753;
|
||||
}
|
||||
|
||||
html.theme-light .hljs-title,
|
||||
html.theme-light .hljs-section,
|
||||
html.theme-light .hljs-selector-id {
|
||||
color: #af3a03;
|
||||
color: #dc8164;
|
||||
}
|
||||
|
||||
html.theme-light .hljs-type,
|
||||
html.theme-light .hljs-class .hljs-title,
|
||||
html.theme-light .hljs-attribute {
|
||||
color: #b57614;
|
||||
color: #4c6c94;
|
||||
}
|
||||
|
||||
html.theme-light .hljs-symbol,
|
||||
@@ -1049,13 +1049,13 @@ html.theme-light .hljs-link,
|
||||
html.theme-light .hljs-meta,
|
||||
html.theme-light .hljs-deletion,
|
||||
html.theme-light .hljs-addition {
|
||||
color: #8f3f71;
|
||||
color: #8a5b81;
|
||||
}
|
||||
|
||||
html.theme-light .hljs-built_in,
|
||||
html.theme-light .hljs-builtin-name,
|
||||
html.theme-light .hljs-params {
|
||||
color: #427b58;
|
||||
color: #3d727d;
|
||||
}
|
||||
|
||||
html.theme-light .hljs-regexp,
|
||||
@@ -1064,16 +1064,16 @@ html.theme-light .hljs-selector-attr,
|
||||
html.theme-light .hljs-selector-pseudo,
|
||||
html.theme-light .hljs-selector-class,
|
||||
html.theme-light .hljs-template-tag {
|
||||
color: #8f3f71;
|
||||
color: #8a5b81;
|
||||
}
|
||||
|
||||
html.theme-light .hljs-name,
|
||||
html.theme-light .hljs-tag {
|
||||
color: #076678;
|
||||
color: #4c6c94;
|
||||
}
|
||||
|
||||
html.theme-light .hljs-meta .hljs-string {
|
||||
color: #79740e;
|
||||
color: #556753;
|
||||
}
|
||||
/* ---------- Admonitions (Trilium-style, gefüllt) ---------- */
|
||||
.admonition {
|
||||
@@ -1090,18 +1090,18 @@ html.theme-light .hljs-meta .hljs-string {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
html.theme-dark .admonition.note { --admonition-bg: rgba(105, 199, 255, 0.16); }
|
||||
html.theme-dark .admonition.tip { --admonition-bg: rgba(64, 192, 37, 0.14); }
|
||||
html.theme-dark .admonition.important { --admonition-bg: rgba(152, 57, 247, 0.18); }
|
||||
html.theme-dark .admonition.caution { --admonition-bg: rgba(255, 46, 46, 0.16); }
|
||||
html.theme-dark .admonition.warning { --admonition-bg: rgba(226, 170, 3, 0.14); }
|
||||
html.theme-dark .admonition.note { --admonition-bg: rgba(76, 108, 148, 0.16); }
|
||||
html.theme-dark .admonition.tip { --admonition-bg: rgba(85, 103, 83, 0.16); }
|
||||
html.theme-dark .admonition.important { --admonition-bg: rgba(138, 91, 129, 0.18); }
|
||||
html.theme-dark .admonition.caution { --admonition-bg: rgba(177, 71, 82, 0.16); }
|
||||
html.theme-dark .admonition.warning { --admonition-bg: rgba(220, 129, 100, 0.16); }
|
||||
html.theme-dark .admonition { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
|
||||
|
||||
html.theme-light .admonition.note { --admonition-bg: rgba(105, 199, 255, 0.22); }
|
||||
html.theme-light .admonition.tip { --admonition-bg: rgba(64, 192, 37, 0.16); }
|
||||
html.theme-light .admonition.important { --admonition-bg: rgba(152, 57, 247, 0.15); }
|
||||
html.theme-light .admonition.caution { --admonition-bg: rgba(255, 46, 46, 0.15); }
|
||||
html.theme-light .admonition.warning { --admonition-bg: rgba(226, 170, 3, 0.20); }
|
||||
html.theme-light .admonition.note { --admonition-bg: rgba(76, 108, 148, 0.18); }
|
||||
html.theme-light .admonition.tip { --admonition-bg: rgba(85, 103, 83, 0.16); }
|
||||
html.theme-light .admonition.important { --admonition-bg: rgba(138, 91, 129, 0.16); }
|
||||
html.theme-light .admonition.caution { --admonition-bg: rgba(177, 71, 82, 0.16); }
|
||||
html.theme-light .admonition.warning { --admonition-bg: rgba(220, 129, 100, 0.20); }
|
||||
|
||||
.admonition p:last-child {
|
||||
margin-bottom: 0;
|
||||
@@ -1112,11 +1112,11 @@ html.theme-light .admonition.warning { --admonition-bg: rgba(226, 170, 3, 0.20);
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.admonition.note { --accent-color: #69c7ff; }
|
||||
.admonition.tip { --accent-color: #40c025; }
|
||||
.admonition.important { --accent-color: #9839f7; }
|
||||
.admonition.caution { --accent-color: #ff2e2e; }
|
||||
.admonition.warning { --accent-color: #e2aa03; }
|
||||
.admonition.note { --accent-color: #4c6c94; }
|
||||
.admonition.tip { --accent-color: #556753; }
|
||||
.admonition.important { --accent-color: #8a5b81; }
|
||||
.admonition.caution { --accent-color: #b14752; }
|
||||
.admonition.warning { --accent-color: #dc8164; }
|
||||
|
||||
.admonition::before {
|
||||
color: var(--accent-color);
|
||||
@@ -1131,25 +1131,25 @@ html.theme-light .admonition.warning { --admonition-bg: rgba(226, 170, 3, 0.20);
|
||||
.admonition.important::before { content: "\ea7c"; }
|
||||
.admonition.caution::before { content: "\eac7"; }
|
||||
.admonition.warning::before { content: "\eac5"; }
|
||||
/* ---------- Tables (Gruvbox, theme-aware) ---------- */
|
||||
/* ---------- Tables (Harbor, theme-aware) ---------- */
|
||||
html.theme-dark {
|
||||
--table-header-bg: rgba(131, 165, 152, 0.30);
|
||||
--table-header-text: #fbf1c7;
|
||||
--table-header-border: rgba(131, 165, 152, 0.6);
|
||||
--table-header-bg: rgba(231, 90, 80, 0.20);
|
||||
--table-header-text: #efebdc;
|
||||
--table-header-border: rgba(231, 90, 80, 0.45);
|
||||
--table-stripe: rgba(255, 255, 255, 0.04);
|
||||
--table-hover: rgba(131, 165, 152, 0.16);
|
||||
--table-hover: rgba(231, 90, 80, 0.12);
|
||||
--table-rowlabel-bg: rgba(255, 255, 255, 0.05);
|
||||
--table-rowlabel-text: #ebdbb2;
|
||||
--table-rowlabel-text: #efebdc;
|
||||
}
|
||||
|
||||
html.theme-light {
|
||||
--table-header-bg: rgba(7, 102, 120, 0.20);
|
||||
--table-header-text: #282828;
|
||||
--table-header-border: rgba(7, 102, 120, 0.45);
|
||||
--table-header-bg: rgba(94, 129, 172, 0.16);
|
||||
--table-header-text: #1c2d28;
|
||||
--table-header-border: rgba(94, 129, 172, 0.40);
|
||||
--table-stripe: rgba(0, 0, 0, 0.04);
|
||||
--table-hover: rgba(7, 102, 120, 0.12);
|
||||
--table-hover: rgba(94, 129, 172, 0.12);
|
||||
--table-rowlabel-bg: rgba(0, 0, 0, 0.05);
|
||||
--table-rowlabel-text: #3c3836;
|
||||
--table-rowlabel-text: #1c2d28;
|
||||
}
|
||||
|
||||
.ck-content table,
|
||||
@@ -1209,19 +1209,19 @@ html.theme-light {
|
||||
|
||||
.ck-content table tbody tr:hover td,
|
||||
#content table tbody tr:hover td {
|
||||
background-color: rgba(254, 128, 25, 0.07) !important;
|
||||
background-color: rgba(94, 129, 172, 0.10) !important;
|
||||
}
|
||||
|
||||
.ck-content table .col-hover,
|
||||
#content table .col-hover {
|
||||
background-color: rgba(254, 128, 25, 0.07) !important;
|
||||
background-color: rgba(94, 129, 172, 0.10) !important;
|
||||
}
|
||||
|
||||
.ck-content table tbody tr:hover td.col-hover,
|
||||
.ck-content table thead th.col-hover,
|
||||
#content table tbody tr:hover td.col-hover,
|
||||
#content table thead th.col-hover {
|
||||
background-color: rgba(254, 128, 25, 0.14) !important;
|
||||
background-color: rgba(94, 129, 172, 0.18) !important;
|
||||
}
|
||||
/* ---------- Category subcategories ---------- */
|
||||
.blog-subcategories {
|
||||
@@ -1276,18 +1276,18 @@ html.theme-light {
|
||||
text-transform: capitalize;
|
||||
white-space: nowrap;
|
||||
}
|
||||
/* ---------- Digital Garden rows: clickable + green hover ---------- */
|
||||
/* ---------- Digital Garden rows: clickable + sage hover ---------- */
|
||||
.blog-garden-table tbody tr {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#content .blog-garden-table tbody tr:hover td,
|
||||
#content .blog-garden-table .col-hover {
|
||||
background-color: rgba(184, 187, 38, 0.12) !important;
|
||||
background-color: rgba(169, 155, 122, 0.15) !important;
|
||||
}
|
||||
|
||||
#content .blog-garden-table tbody tr:hover td.col-hover {
|
||||
background-color: rgba(184, 187, 38, 0.20) !important;
|
||||
background-color: rgba(169, 155, 122, 0.25) !important;
|
||||
}
|
||||
.note-state {
|
||||
display: inline-flex;
|
||||
@@ -1296,44 +1296,44 @@ html.theme-light {
|
||||
font-size: 0.8em;
|
||||
padding: 2px 10px;
|
||||
border-radius: 8px;
|
||||
background: rgba(184, 187, 38, 0.18);
|
||||
background: rgba(169, 155, 122, 0.20);
|
||||
color: var(--text-heading);
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.note-state i {
|
||||
color: #b8bb26;
|
||||
color: #a99b7a;
|
||||
}
|
||||
|
||||
.note-state.state-draft {
|
||||
background: rgba(146, 131, 116, 0.22);
|
||||
background: rgba(109, 109, 109, 0.22);
|
||||
}
|
||||
|
||||
.note-state.state-draft i {
|
||||
color: #928374;
|
||||
color: #6d6d6d;
|
||||
}
|
||||
|
||||
.note-state.state-review {
|
||||
background: rgba(131, 165, 152, 0.25);
|
||||
background: rgba(119, 131, 138, 0.25);
|
||||
}
|
||||
|
||||
.note-state.state-review i {
|
||||
color: #83a598;
|
||||
color: #77838a;
|
||||
}
|
||||
|
||||
.note-state.state-unknown {
|
||||
background: rgba(251, 73, 52, 0.20);
|
||||
background: rgba(244, 67, 54, 0.18);
|
||||
}
|
||||
|
||||
.note-state.state-unknown i {
|
||||
color: #fb4934;
|
||||
color: #F44336;
|
||||
}
|
||||
/* ---------- Code notes: always Gruvbox dark like code boxes ---------- */
|
||||
/* ---------- Code notes: always Harbordark like code boxes ---------- */
|
||||
#content.type-code pre {
|
||||
background-color: #282828 !important;
|
||||
color: #ebdbb2;
|
||||
border: 1px solid #504945;
|
||||
background-color: #222222 !important;
|
||||
color: #efebdc;
|
||||
border: 1px solid #2e2e2e;
|
||||
border-radius: 8px;
|
||||
padding: 1em;
|
||||
margin: 1em 0;
|
||||
@@ -1341,18 +1341,18 @@ html.theme-light {
|
||||
|
||||
#content.type-code code {
|
||||
background-color: transparent !important;
|
||||
color: #ebdbb2;
|
||||
color: #efebdc;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
html.theme-light #content.type-code pre {
|
||||
background-color: #fbf1c7 !important;
|
||||
color: #3c3836;
|
||||
border-color: #d5c4a1;
|
||||
background-color: #e8ecd0 !important;
|
||||
color: #1c2d28;
|
||||
border-color: #c3c9a6;
|
||||
}
|
||||
|
||||
html.theme-light #content.type-code code {
|
||||
color: #3c3836;
|
||||
color: #1c2d28;
|
||||
}
|
||||
/* ---------- Code: line numbers + copy button ---------- */
|
||||
pre.code-processed {
|
||||
@@ -1450,12 +1450,12 @@ pre.code-processed .code-copy-btn:hover,
|
||||
|
||||
#content .hljs-ln tbody tr:hover td,
|
||||
#content .hljs-ln tbody tr:hover td.col-hover {
|
||||
background-color: rgba(254, 128, 25, 0.07) !important;
|
||||
background-color: rgba(94, 129, 172, 0.08) !important;
|
||||
}
|
||||
|
||||
html.theme-light #content .hljs-ln tbody tr:hover td,
|
||||
html.theme-light #content .hljs-ln tbody tr:hover td.col-hover {
|
||||
background-color: rgba(254, 128, 25, 0.08) !important;
|
||||
background-color: rgba(94, 129, 172, 0.08) !important;
|
||||
}
|
||||
|
||||
.hljs-ln-numbers {
|
||||
@@ -1475,7 +1475,7 @@ html.theme-light #content .hljs-ln tbody tr:hover td.col-hover {
|
||||
white-space: pre;
|
||||
vertical-align: top;
|
||||
}
|
||||
/* ---------- Scrollbars (Gruvbox) ---------- */
|
||||
/* ---------- Scrollbars (Harbor) ---------- */
|
||||
::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
@@ -1503,49 +1503,49 @@ html.theme-light #content .hljs-ln tbody tr:hover td.col-hover {
|
||||
pre,
|
||||
pre.code-processed .code-wrap,
|
||||
.hljs-ln-code {
|
||||
scrollbar-color: #504945 #1d2021;
|
||||
scrollbar-color: #2e2e2e #1b1b1b;
|
||||
}
|
||||
|
||||
pre::-webkit-scrollbar-thumb,
|
||||
pre.code-processed .code-wrap::-webkit-scrollbar-thumb,
|
||||
.hljs-ln-code::-webkit-scrollbar-thumb {
|
||||
background: #504945;
|
||||
background: #2e2e2e;
|
||||
}
|
||||
|
||||
pre::-webkit-scrollbar-thumb:hover,
|
||||
pre.code-processed .code-wrap::-webkit-scrollbar-thumb:hover,
|
||||
.hljs-ln-code::-webkit-scrollbar-thumb:hover {
|
||||
background: #665c54;
|
||||
background: #3f3f3f;
|
||||
}
|
||||
|
||||
pre::-webkit-scrollbar-track,
|
||||
pre.code-processed .code-wrap::-webkit-scrollbar-track,
|
||||
.hljs-ln-code::-webkit-scrollbar-track {
|
||||
background: #1d2021;
|
||||
background: #1b1b1b;
|
||||
}
|
||||
|
||||
html.theme-light pre,
|
||||
html.theme-light pre.code-processed .code-wrap,
|
||||
html.theme-light .hljs-ln-code {
|
||||
scrollbar-color: #bdae93 #ebdbb2;
|
||||
scrollbar-color: #b3ba96 #d0d6b4;
|
||||
}
|
||||
|
||||
html.theme-light pre::-webkit-scrollbar-thumb,
|
||||
html.theme-light pre.code-processed .code-wrap::-webkit-scrollbar-thumb,
|
||||
html.theme-light .hljs-ln-code::-webkit-scrollbar-thumb {
|
||||
background: #bdae93;
|
||||
background: #b3ba96;
|
||||
}
|
||||
|
||||
html.theme-light pre::-webkit-scrollbar-thumb:hover,
|
||||
html.theme-light pre.code-processed .code-wrap::-webkit-scrollbar-thumb:hover,
|
||||
html.theme-light .hljs-ln-code::-webkit-scrollbar-thumb:hover {
|
||||
background: #d5c4a1;
|
||||
background: #c3c9a6;
|
||||
}
|
||||
|
||||
html.theme-light pre::-webkit-scrollbar-track,
|
||||
html.theme-light pre.code-processed .code-wrap::-webkit-scrollbar-track,
|
||||
html.theme-light .hljs-ln-code::-webkit-scrollbar-track {
|
||||
background: #ebdbb2;
|
||||
background: #d0d6b4;
|
||||
}
|
||||
|
||||
/* ---------- Link icons / markers: internal links without arrow, external links keep a marker ---------- */
|
||||
@@ -1591,23 +1591,200 @@ a.previous::before,
|
||||
/* action links as buttons (subtle tint, noticeable on hover) */
|
||||
.blog-pn {
|
||||
padding: 6px 14px;
|
||||
border: 1px solid rgba(131, 165, 152, 0.35);
|
||||
border: 1px solid rgba(231, 90, 80, 0.30);
|
||||
border-radius: 8px;
|
||||
background: rgba(131, 165, 152, 0.08);
|
||||
background: rgba(231, 90, 80, 0.08);
|
||||
transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
|
||||
}
|
||||
|
||||
html.theme-light .blog-pn {
|
||||
border-color: rgba(7, 102, 120, 0.35);
|
||||
background: rgba(7, 102, 120, 0.08);
|
||||
border-color: rgba(76, 108, 148, 0.30);
|
||||
background: rgba(76, 108, 148, 0.08);
|
||||
}
|
||||
|
||||
.blog-pn:hover {
|
||||
background: rgba(131, 165, 152, 0.18);
|
||||
border-color: #83a598;
|
||||
background: rgba(231, 90, 80, 0.18);
|
||||
border-color: #e75a50;
|
||||
}
|
||||
|
||||
html.theme-light .blog-pn:hover {
|
||||
background: rgba(7, 102, 120, 0.15);
|
||||
border-color: #076678;
|
||||
background: rgba(76, 108, 148, 0.15);
|
||||
border-color: #4c6c94;
|
||||
}
|
||||
|
||||
/* ---------- Mermaid diagrams - Harbor, theme-following ---------- */
|
||||
/*
|
||||
* The blog renders inline Mermaid diagrams with the default theme, so the
|
||||
* generated SVG carries light-blue node fills that clash with Harbor.
|
||||
* Override the SVG element colours here; the selectors hang off
|
||||
* html.theme-dark / html.theme-light, so the diagrams follow the theme
|
||||
* toggle automatically without re-rendering.
|
||||
*/
|
||||
|
||||
.mermaid {
|
||||
margin: 1.25em auto;
|
||||
overflow-x: auto;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.mermaid svg {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Text in node labels and titles */
|
||||
html.theme-dark .mermaid svg text,
|
||||
html.theme-dark .mermaid svg tspan,
|
||||
html.theme-dark .mermaid svg .nodeLabel,
|
||||
html.theme-dark .mermaid svg .edgeLabel p {
|
||||
fill: #efebdc !important;
|
||||
color: #efebdc !important;
|
||||
}
|
||||
|
||||
html.theme-light .mermaid svg text,
|
||||
html.theme-light .mermaid svg tspan,
|
||||
html.theme-light .mermaid svg .nodeLabel,
|
||||
html.theme-light .mermaid svg .edgeLabel p {
|
||||
fill: #1c2d28 !important;
|
||||
color: #1c2d28 !important;
|
||||
}
|
||||
|
||||
/* Graph/node title */
|
||||
html.theme-dark .mermaid svg .titleText text,
|
||||
html.theme-dark .mermaid svg .node .label .nodeLabel {
|
||||
fill: #efebdc !important;
|
||||
color: #efebdc !important;
|
||||
}
|
||||
|
||||
html.theme-light .mermaid svg .titleText text,
|
||||
html.theme-light .mermaid svg .node .label .nodeLabel {
|
||||
fill: #1c2d28 !important;
|
||||
color: #1c2d28 !important;
|
||||
}
|
||||
|
||||
/* Node shapes (rectangles, rounded boxes, ellipses, diamonds) */
|
||||
html.theme-dark .mermaid svg .node rect,
|
||||
html.theme-dark .mermaid svg .node polygon,
|
||||
html.theme-dark .mermaid svg .node circle,
|
||||
html.theme-dark .mermaid svg .node ellipse,
|
||||
html.theme-dark .mermaid svg .node path,
|
||||
html.theme-dark .mermaid svg .cluster rect {
|
||||
fill: #232323 !important;
|
||||
stroke: #77838a !important;
|
||||
}
|
||||
|
||||
html.theme-light .mermaid svg .node rect,
|
||||
html.theme-light .mermaid svg .node polygon,
|
||||
html.theme-light .mermaid svg .node circle,
|
||||
html.theme-light .mermaid svg .node ellipse,
|
||||
html.theme-light .mermaid svg .node path,
|
||||
html.theme-light .mermaid svg .cluster rect {
|
||||
fill: #d0d6b4 !important;
|
||||
stroke: #4c6c94 !important;
|
||||
}
|
||||
|
||||
/* Rounded corners on rectangular node boxes and subgraph clusters (8 px, like the blog cards) */
|
||||
html.theme-dark .mermaid svg .node rect,
|
||||
html.theme-light .mermaid svg .node rect,
|
||||
html.theme-dark .mermaid svg .cluster rect,
|
||||
html.theme-light .mermaid svg .cluster rect {
|
||||
rx: 8px !important;
|
||||
ry: 8px !important;
|
||||
}
|
||||
|
||||
/* Edge lines: stroke only (a filled edge path would look like a polygon) */
|
||||
html.theme-dark .mermaid svg .edgePaths path {
|
||||
fill: none !important;
|
||||
stroke: #a99b7a !important;
|
||||
}
|
||||
|
||||
html.theme-light .mermaid svg .edgePaths path {
|
||||
fill: none !important;
|
||||
stroke: #7d8794 !important;
|
||||
}
|
||||
|
||||
/* Arrowheads (markers): filled triangles */
|
||||
html.theme-dark .mermaid svg marker.flowchart-v2,
|
||||
html.theme-dark .mermaid svg .arrowMarkerPath {
|
||||
fill: #a99b7a !important;
|
||||
stroke: #a99b7a !important;
|
||||
}
|
||||
|
||||
html.theme-light .mermaid svg marker.flowchart-v2,
|
||||
html.theme-light .mermaid svg .arrowMarkerPath {
|
||||
fill: #7d8794 !important;
|
||||
stroke: #7d8794 !important;
|
||||
}
|
||||
|
||||
/* Edge labels: HTML text inside a foreignObject (div.labelBkg > span.edgeLabel);
|
||||
the label panel background lives on the g.edgeLabel element itself */
|
||||
html.theme-dark .mermaid svg g.edgeLabel {
|
||||
background: #1b1b1b !important;
|
||||
fill: #efebdc !important;
|
||||
color: #efebdc !important;
|
||||
}
|
||||
|
||||
html.theme-dark .mermaid svg .edgeLabel .labelBkg {
|
||||
fill: #1b1b1b !important;
|
||||
background: #1b1b1b !important;
|
||||
color: #efebdc !important;
|
||||
}
|
||||
|
||||
html.theme-dark .mermaid svg .edgeLabel .labelBkg .edgeLabel {
|
||||
fill: #efebdc !important;
|
||||
color: #efebdc !important;
|
||||
background: #1b1b1b !important;
|
||||
}
|
||||
|
||||
html.theme-dark .mermaid svg .edgeLabel .labelBkg .edgeLabel p {
|
||||
fill: #efebdc !important;
|
||||
color: #efebdc !important;
|
||||
background: #1b1b1b !important;
|
||||
}
|
||||
|
||||
html.theme-light .mermaid svg g.edgeLabel {
|
||||
background: #d0d6b4 !important;
|
||||
fill: #1c2d28 !important;
|
||||
color: #1c2d28 !important;
|
||||
}
|
||||
|
||||
html.theme-light .mermaid svg .edgeLabel .labelBkg {
|
||||
fill: #d0d6b4 !important;
|
||||
background: #d0d6b4 !important;
|
||||
color: #1c2d28 !important;
|
||||
}
|
||||
|
||||
html.theme-light .mermaid svg .edgeLabel .labelBkg .edgeLabel {
|
||||
fill: #1c2d28 !important;
|
||||
color: #1c2d28 !important;
|
||||
background: #d0d6b4 !important;
|
||||
}
|
||||
|
||||
html.theme-light .mermaid svg .edgeLabel .labelBkg .edgeLabel p {
|
||||
fill: #1c2d28 !important;
|
||||
color: #1c2d28 !important;
|
||||
background: #d0d6b4 !important;
|
||||
}
|
||||
|
||||
/* Subgraph cluster border + label */
|
||||
html.theme-dark .mermaid svg .cluster rect {
|
||||
stroke: #2e2e2e !important;
|
||||
fill: rgba(27, 27, 27, 0.35) !important;
|
||||
}
|
||||
|
||||
html.theme-light .mermaid svg .cluster rect {
|
||||
stroke: #c3c9a6 !important;
|
||||
fill: rgba(208, 214, 180, 0.40) !important;
|
||||
}
|
||||
|
||||
html.theme-dark .mermaid svg .cluster .nodeLabel,
|
||||
html.theme-dark .mermaid svg .cluster-label text {
|
||||
fill: #a99b7a !important;
|
||||
color: #a99b7a !important;
|
||||
}
|
||||
|
||||
html.theme-light .mermaid svg .cluster .nodeLabel,
|
||||
html.theme-light .mermaid svg .cluster-label text {
|
||||
fill: #556753 !important;
|
||||
color: #556753 !important;
|
||||
}
|
||||
Reference in New Issue
Block a user