zink/trilium-themes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ash): add Ash Dark + Ash Light themes on the 16-colour palette

Browse Source
This commit is contained in:
Richard Zink
2026-09-20 23:09:49 +02:00
parent bd384734a9
commit 0650237806
3 changed files with 666 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+3 -1
View File
@@ -1,11 +1,12 @@
# Trilium Themes
Gruvbox, Harbor, Coffee, Solarized and Tokyo Night themes for [TriliumNext](https://github.com/TriliumNext/Trilium) –
Ash, Gruvbox, Harbor, Coffee, Solarized and Tokyo Night themes for [TriliumNext](https://github.com/TriliumNext/Trilium) –
each available in a dark and a light variant. The themes are plain `text/css` files that override
Trilium's `--*` variables on `#trilium-app` and the global menus.
| Theme | Dark | Light | Source |
|---|---|---|---|
| **Ash** | `ash-dark.css` | `ash-light.css` | Original, Gruvbox-derived (see palette below) |
| **Gruvbox** | `gruvbox-dark.css` | `gruvbox-light.css` | [morhetz/gruvbox](https://github.com/morhetz/gruvbox) (MIT) |
| **Harbor** | `harbor-dark.css` | `harbor-light.css` | [HANCORE-linux/omarchy-harbor-theme](https://github.com/HANCORE-linux/omarchy-harbordark-theme) (MIT) |
| **Coffee** | `coffee-dark.css` | `coffee-latte.css` | [megabyte0x/omarchy-coffee-theme](https://github.com/megabyte0x/omarchy-coffee-theme) (MIT) |
@@ -20,6 +21,7 @@ auto-switch with the system preference. Each theme is derived from Trilium's def
| Family | Dark | Light |
|---|---|---|
| Ash | bg `#1c1b1f` / fg `#e6dfd1` · ember `#e0914f` steel `#7c9aa1` rot `#b47e99` | paper `#e9e3d5` / fg `#2a2822` · ember `#a85f1d` steel `#3d6b72` |
| Gruvbox | bg `#282828` / fg `#ebdbb2` · red `#fb4934` green `#b8bb26` yellow `#fabd2f` | bg `#fbf1c7` / fg `#3c3836` · blue `#076678` aqua `#83a598` |
| Harbor | bg `#1b1b1b` / fg `#efebdc` · coral `#e75a50` gold `#E1CE98` slate `#77838a` | bg `#dfe4c4` / fg `#1c2d28` · nord-blue `#5e81ac` |
| Coffee | bg `#1d150f` / fg `#f0e2d0` · caramel `#e0a15c` cream-yellow `#ffda92` | bg `#E8E3C3` / fg `#2D1A1D` · berry `#8e2d53` |
ash-dark.css
+332
View File
@@ -0,0 +1,332 @@
/*
* Ash Dark Theme for TriliumNext
*
* Derived from the current default (next) theme via #appThemeBase=next-dark.
* Fixed dark variant.
*
* The "Ash" palette: Gruvbox hues cooled and desaturated toward a grey / ash
* look (bone text on soot panels, ember accents). Same 16 colours as the
* game's AshPalette (see yurakuden: docs/ash_palette.md).
*
* tones: void #100f12 panel #1c1b1f raised #29282c border #3a383d
* ash #6d6a63 stone #999187 bone #e6dfd1 chalk #f3ede1
* accents: ember #e0914f gold #d6b46a blood #c15c46 rot #b47e99
* moss #8f9a5c steel #7c9aa1 violet #a585ac rust #a86a48
*/
#trilium-app {
--theme-style: dark;
/* Main surfaces */
--main-background-color: #1c1b1f;
--main-text-color: #e6dfd1;
--main-border-color: #3a383d;
--subtle-border-color: #29282c;
--dropdown-border-color: #3a383d;
--dropdown-shadow-opacity: 0.6;
/* Accented / highlight */
--accented-background-color: #29282c;
--more-accented-background-color: #3a383d;
/* Cards & dialogs */
--card-background-color: #29282c;
--card-background-hover-color: #3a383d;
--card-border-color: #3a383d;
--tool-dialog-background-color: #1c1b1f;
--modal-background-color: #1c1b1f;
--modal-border-color: #3a383d;
/* Text & muted */
--muted-text-color: #999187;
--menu-text-color: #e6dfd1;
--menu-background-color: #1c1b1fe6;
--menu-background-color-no-backdrop: #1c1b1f;
/* Links (steel by day, ember on hover) */
--link-color: #7c9aa1;
--link-hover-color: #e0914f;
--link-hover-background: #e0914f24;
/* Inputs */
--input-background-color: #29282c;
--input-text-color: #e6dfd1;
--input-placeholder-color: #99918780;
--input-hover-background: #3a383d;
--input-focus-outline-color: #e0914f;
--input-focus-background: #3a383d;
--input-focus-color: #f3ede1;
--input-action-button-color: #999187;
--input-action-button-hover: #f3ede1;
/* Selection */
--selection-background-color: #e0914f;
--hover-item-text-color: #f3ede1;
--hover-item-background-color: #29282c;
--active-item-text-color: #f3ede1;
--active-item-background-color: #3a383d;
/* Left pane / launcher */
--left-pane-background-color: #100f12;
--left-pane-text-color: #999187;
--left-pane-icon-color: #b0a89a;
--left-pane-item-hover-background: #29282c;
--left-pane-item-selected-background: #3a383d;
--left-pane-item-selected-color: #f3ede1;
--launcher-pane-background-color: #100f12;
--launcher-pane-text-color: #999187;
--launcher-pane-vert-background-color: #100f12;
--launcher-pane-vert-text-color: #999187;
--launcher-pane-horiz-background-color: #100f12;
--launcher-pane-horiz-text-color: #999187;
/* Tabs & breadcrumb / window backgrounds */
--window-background-color-bgfx: #100f12;
--root-background: #100f12;
--tab-background-color: #100f12;
--note-split-background-color: #1c1b1f;
--center-pane-background-color-bgfx: #1c1b1f;
--launcher-pane-horiz-background-color-bgfx: #100f12;
--center-pane-horiz-layout-background-color-bgfx: #1c1b1f;
--center-pane-vert-layout-background-color-bgfx: #1c1b1f;
/* Tabs */
--active-tab-background-color: #1c1b1f;
--active-tab-text-color: #f3ede1;
--inactive-tab-background-color: #100f12;
--inactive-tab-text-color: #999187;
--tab-close-button-hover-background: #29282c;
--tab-close-button-hover-color: #c15c46;
/* Right pane */
--right-pane-background-color: #100f12;
--right-pane-heading-color: #e6dfd1;
--right-pane-item-hover-background: #29282c;
--right-pane-item-hover-color: #f3ede1;
/* Bottom panel */
--bottom-panel-background-color: #100f12;
--bottom-panel-title-bar-background-color: #1c1b1f;
/* Status bar */
--status-bar-border-color: #3a383d;
/* Code / inline code */
--inline-code-background-color: #29282c;
--inline-code-border-color: #3a383d;
--code-block-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
/* Note icons */
--note-icon-background-color: #29282c;
--note-icon-color: #e6dfd1;
/* Floating buttons */
--floating-button-background-color: #29282c;
--floating-button-color: #e6dfd1;
--floating-button-hover-background: #3a383d;
--floating-button-hover-color: #f3ede1;
/* Tooltips */
--tooltip-background-color: #29282c;
--tooltip-foreground-color: #e6dfd1;
/* Scrollbar */
--scrollbar-thumb-color: #3a383d;
--scrollbar-thumb-hover-color: #54514f;
--scrollbar-background-color: #100f12;
/* Checkboxes / tasks */
--task-checkbox-done-color: #8f9a5c;
--task-checkbox-glyph-color: #f3ede1;
--task-checkbox-without-state-background: #3a383d;
--task-checkbox-with-state-background: #e0914f;
/* Mermaid */
--mermaid-theme: dark;
/* Buttons */
--cmd-button-background-color: #3a383da0;
--cmd-button-text-color: #e6dfd1;
--cmd-button-hover-background-color: #54514fa0;
--cmd-button-hover-text-color: #f3ede1;
--icon-button-hover-background: #29282c;
--icon-button-hover-color: #f3ede1;
/* Logs */
--log-error-color: #c15c46;
--log-info-color: #7c9aa1;
--log-slow-color: #d6b46a;
--log-success-color: #8f9a5c;
/* Badges */
--badge-background-color: #3a383d;
--badge-text-color: #e6dfd1;
/* CKEditor editor dropdowns / panels */
--ck-color-base-foreground: #29282c;
--ck-color-base-background: #1c1b1f;
--ck-color-dialog-background: #1c1b1f;
--ck-color-dropdown-panel-background: #29282c;
--ck-color-dropdown-panel-border: #3a383d;
--ck-color-list-background: #29282c;
--ck-color-list-button-hover-background: #3a383d;
--ck-color-list-button-on-background: #3a383d;
--ck-color-button-default-background: #29282c;
--ck-color-button-default-hover-background: #3a383d;
--ck-color-button-on-background: #3a383d;
--ck-color-button-on-hover-background: #54514f;
--ck-color-button-action-background: #3a383d;
--ck-color-button-action-hover-background: #54514f;
--ck-color-input-background: #1c1b1f;
--ck-editor-toolbar-button-on-background: #3a383d;
--ck-editor-toolbar-button-on-color: #f3ede1;
--ck-editor-toolbar-dropdown-button-open-background: #29282c;
}
/* Menus & dropdowns render outside #trilium-app, so also set them globally. */
:root {
--menu-text-color: #e6dfd1;
--menu-background-color: #1c1b1f;
--menu-background-color-no-backdrop: #1c1b1f;
--menu-item-icon-color: #999187;
--menu-item-disabled-opacity: 0.5;
--menu-item-keyboard-shortcut-color: #99918790;
--menu-item-arrow-color: #999187a3;
--menu-item-delimiter-color: #29282c;
--menu-item-group-header-color: #999187;
--menu-section-background-color: #1c1b1f;
--menu-hover-item-background-color: #29282c;
--menu-hover-item-text-color: #f3ede1;
--hover-item-background-color: #29282c;
--active-item-background-color: #3a383d;
--dropdown-border-color: #29282c;
--dropdown-item-icon-destructive-color: #c15c46;
--ck-color-base-text: #e6dfd1;
--ck-color-text: #e6dfd1;
--ck-color-base-foreground: #29282c;
--ck-color-base-background: #1c1b1f;
--ck-color-dialog-background: #1c1b1f;
--ck-color-dropdown-panel-background: #29282c;
--ck-color-dropdown-panel-border: #3a383d;
--ck-color-list-background: #29282c;
--ck-color-list-button-hover-background: #3a383d;
--ck-color-list-button-on-background: #3a383d;
--ck-color-list-button-on-text: #f3ede1;
--ck-color-button-default-background: #29282c;
--ck-color-button-default-hover-background: #3a383d;
--ck-color-button-on-background: #3a383d;
--ck-color-button-on-hover-background: #54514f;
--ck-color-button-action-background: #3a383d;
--ck-color-button-action-hover-background: #54514f;
--ck-color-input-background: #1c1b1f;
--ck-color-input-text: #e6dfd1;
--ck-color-panel-background: #29282c;
--ck-color-toolbar-background: #29282c;
}
body.desktop .dropdown-menu,
body.desktop .dropdown-menu.tn-dropdown-menu,
body.desktop .dropdown-menu.tn-dropdown-list,
body.mobile .dropdown-menu {
--menu-background-color: #1c1b1f !important;
--menu-background-color-no-backdrop: #1c1b1f !important;
--menu-section-background-color: #1c1b1f !important;
background-color: #1c1b1f !important;
}
body.desktop .dropdown-menu::before,
body.mobile .dropdown-menu::before {
background-color: #1c1b1f !important;
backdrop-filter: none !important;
}
body.desktop .dropdown-menu .dropdown-item,
body.mobile .dropdown-menu .dropdown-item {
--custom-color: #e6dfd1 !important;
color: #e6dfd1;
}
body.desktop .dropdown-menu .dropdown-item:hover,
body.desktop .dropdown-menu .dropdown-item:focus,
body.desktop .dropdown-menu .dropdown-item.active {
background-color: #29282c !important;
color: #f3ede1;
}
/* ============ NOTE HEADER BOXES (h2-h6) ============ */
.ck-content h2 {
background-color: rgba(224, 145, 79, 0.32);
border-bottom: 2px solid rgba(224, 145, 79, 0.65);
border-radius: 4px;
padding: 0.25em 0.4em;
}
.ck-content h3 {
background-color: rgba(124, 154, 161, 0.28);
border-bottom: 2px solid rgba(124, 154, 161, 0.6);
border-radius: 4px;
padding: 0.2em 0.35em;
}
.ck-content h4 {
background-color: rgba(143, 154, 92, 0.28);
border-bottom: 2px solid rgba(143, 154, 92, 0.6);
border-radius: 4px;
padding: 0.2em 0.35em;
}
.ck-content h5 {
background-color: rgba(165, 133, 172, 0.28);
border-bottom: 2px solid rgba(165, 133, 172, 0.6);
border-radius: 4px;
padding: 0.2em 0.35em;
}
.ck-content h6 {
background-color: rgba(180, 126, 153, 0.28);
border-bottom: 2px solid rgba(180, 126, 153, 0.6);
border-radius: 4px;
padding: 0.2em 0.35em;
}
/* ============ TABLES ============ */
.ck-content table {
border-collapse: separate;
border-spacing: 0;
border: 1px solid var(--main-border-color);
border-radius: 8px;
overflow: hidden;
margin: 1em 0;
}
.ck-content table th,
.ck-content table td {
border: none;
border-bottom: 1px solid var(--main-border-color);
border-right: 1px solid var(--main-border-color);
padding: 8px 12px;
text-align: left;
background-color: transparent !important;
}
.ck-content table th:last-child,
.ck-content table td:last-child { border-right: none; }
.ck-content table tr:last-child td { border-bottom: none; }
.ck-content table thead th {
background-color: rgba(224, 145, 79, 0.28) !important;
color: #f3ede1;
font-weight: 700;
border-bottom: 2px solid rgba(224, 145, 79, 0.55);
}
.ck-content table tbody td:first-child {
background-color: rgba(255, 255, 255, 0.05) !important;
color: #e6dfd1;
font-weight: 600;
white-space: nowrap;
}
.ck-content table tbody tr:nth-child(even) td:not(:first-child) {
background-color: rgba(255, 255, 255, 0.04) !important;
}
.ck-content table tbody tr:hover td,
.ck-content table .col-hover {
background-color: rgba(124, 154, 161, 0.08) !important;
}
.ck-content table tbody tr:hover td.col-hover,
.ck-content table thead th.col-hover {
background-color: rgba(124, 154, 161, 0.15) !important;
}
/* ============ MERMAID ============ */
.mermaid-render svg { width: 95%; height: auto; max-width: 100%; }
ash-light.css
+331
View File
@@ -0,0 +1,331 @@
/*
* Ash Light Theme for TriliumNext
*
* Derived from the current default (next) theme via #appThemeBase=next-light.
* Fixed light variant.
*
* The "Ash" palette light twin: bone / ash-paper surfaces with soot text and
* the same hue family as Ash Dark, darkened for legibility on paper.
*
* tones: paper #e9e3d5 raised #f2ecdf deep #dcd5c3 border #c9c1ad
* muted #6f685c ink #2a2822
* accents: ember #a85f1d gold #8a6a24 blood #96392a rot #7c4a66
* moss #5c6631 steel #3d6b72 violet #6a4c72 rust #7d4a2c
*/
#trilium-app {
--theme-style: light;
/* Main surfaces */
--main-background-color: #e9e3d5;
--main-text-color: #2a2822;
--main-border-color: #c9c1ad;
--subtle-border-color: #d8d1c1;
--dropdown-border-color: #c9c1ad;
--dropdown-shadow-opacity: 0.25;
/* Accented / highlight */
--accented-background-color: #dcd5c3;
--more-accented-background-color: #c9c1ad;
/* Cards & dialogs */
--card-background-color: #f2ecdf;
--card-background-hover-color: #dcd5c3;
--card-border-color: #c9c1ad;
--tool-dialog-background-color: #f2ecdf;
--modal-background-color: #f2ecdf;
--modal-border-color: #c9c1ad;
/* Text & muted */
--muted-text-color: #6f685c;
--menu-text-color: #2a2822;
--menu-background-color: #f2ecdf;
--menu-background-color-no-backdrop: #f2ecdf;
/* Links */
--link-color: #3d6b72;
--link-hover-color: #a85f1d;
--link-hover-background: #a85f1d1f;
/* Inputs */
--input-background-color: #f2ecdf;
--input-text-color: #2a2822;
--input-placeholder-color: #6f685c90;
--input-hover-background: #dcd5c3;
--input-focus-outline-color: #a85f1d;
--input-focus-background: #dcd5c3;
--input-focus-color: #141310;
--input-action-button-color: #6f685c;
--input-action-button-hover: #141310;
/* Selection */
--selection-background-color: #c56a2b;
--hover-item-text-color: #141310;
--hover-item-background-color: #dcd5c3;
--active-item-text-color: #141310;
--active-item-background-color: #c9c1ad;
/* Left pane / launcher */
--left-pane-background-color: #dcd5c3;
--left-pane-text-color: #6f685c;
--left-pane-icon-color: #5b5449;
--left-pane-item-hover-background: #c9c1ad;
--left-pane-item-selected-background: #b7ae98;
--left-pane-item-selected-color: #141310;
--launcher-pane-background-color: #dcd5c3;
--launcher-pane-text-color: #6f685c;
--launcher-pane-vert-background-color: #dcd5c3;
--launcher-pane-vert-text-color: #6f685c;
--launcher-pane-horiz-background-color: #dcd5c3;
--launcher-pane-horiz-text-color: #6f685c;
/* Tabs & breadcrumb / window backgrounds */
--window-background-color-bgfx: #dcd5c3;
--root-background: #dcd5c3;
--tab-background-color: #dcd5c3;
--note-split-background-color: #e9e3d5;
--center-pane-background-color-bgfx: #e9e3d5;
--launcher-pane-horiz-background-color-bgfx: #dcd5c3;
--center-pane-horiz-layout-background-color-bgfx: #e9e3d5;
--center-pane-vert-layout-background-color-bgfx: #e9e3d5;
/* Tabs */
--active-tab-background-color: #e9e3d5;
--active-tab-text-color: #141310;
--inactive-tab-background-color: #dcd5c3;
--inactive-tab-text-color: #6f685c;
--tab-close-button-hover-background: #c9c1ad;
--tab-close-button-hover-color: #96392a;
/* Right pane */
--right-pane-background-color: #dcd5c3;
--right-pane-heading-color: #2a2822;
--right-pane-item-hover-background: #c9c1ad;
--right-pane-item-hover-color: #141310;
/* Bottom panel */
--bottom-panel-background-color: #dcd5c3;
--bottom-panel-title-bar-background-color: #e9e3d5;
/* Status bar */
--status-bar-border-color: #c9c1ad;
/* Code / inline code */
--inline-code-background-color: #dcd5c3;
--inline-code-border-color: #c9c1ad;
--code-block-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
/* Note icons */
--note-icon-background-color: #dcd5c3;
--note-icon-color: #2a2822;
/* Floating buttons */
--floating-button-background-color: #dcd5c3;
--floating-button-color: #2a2822;
--floating-button-hover-background: #c9c1ad;
--floating-button-hover-color: #141310;
/* Tooltips */
--tooltip-background-color: #2a2822;
--tooltip-foreground-color: #f2ecdf;
/* Scrollbar */
--scrollbar-thumb-color: #b7ae98;
--scrollbar-thumb-hover-color: #a89e85;
--scrollbar-background-color: #dcd5c3;
/* Checkboxes / tasks */
--task-checkbox-done-color: #5c6631;
--task-checkbox-glyph-color: #f2ecdf;
--task-checkbox-without-state-background: #b7ae98;
--task-checkbox-with-state-background: #a85f1d;
/* Mermaid */
--mermaid-theme: default;
/* Buttons */
--cmd-button-background-color: #c9c1adc0;
--cmd-button-text-color: #2a2822;
--cmd-button-hover-background-color: #b7ae98c0;
--cmd-button-hover-text-color: #141310;
--icon-button-hover-background: #dcd5c3;
--icon-button-hover-color: #141310;
/* Logs */
--log-error-color: #96392a;
--log-info-color: #3d6b72;
--log-slow-color: #8a6a24;
--log-success-color: #5c6631;
/* Badges */
--badge-background-color: #c9c1ad;
--badge-text-color: #2a2822;
/* CKEditor editor dropdowns / panels */
--ck-color-base-foreground: #dcd5c3;
--ck-color-base-background: #e9e3d5;
--ck-color-dialog-background: #e9e3d5;
--ck-color-dropdown-panel-background: #f2ecdf;
--ck-color-dropdown-panel-border: #c9c1ad;
--ck-color-list-background: #f2ecdf;
--ck-color-list-button-hover-background: #dcd5c3;
--ck-color-list-button-on-background: #c9c1ad;
--ck-color-button-default-background: #dcd5c3;
--ck-color-button-default-hover-background: #c9c1ad;
--ck-color-button-on-background: #c9c1ad;
--ck-color-button-on-hover-background: #b7ae98;
--ck-color-button-action-background: #c9c1ad;
--ck-color-button-action-hover-background: #b7ae98;
--ck-color-input-background: #f2ecdf;
--ck-editor-toolbar-button-on-background: #c9c1ad;
--ck-editor-toolbar-button-on-color: #141310;
--ck-editor-toolbar-dropdown-button-open-background: #dcd5c3;
}
/* Menus & dropdowns render outside #trilium-app, so also set them globally. */
:root {
--menu-text-color: #2a2822;
--menu-background-color: #f2ecdf;
--menu-background-color-no-backdrop: #f2ecdf;
--menu-item-icon-color: #6f685c;
--menu-item-disabled-opacity: 0.5;
--menu-item-keyboard-shortcut-color: #6f685c90;
--menu-item-arrow-color: #6f685ca3;
--menu-item-delimiter-color: #dcd5c3;
--menu-item-group-header-color: #6f685c;
--menu-section-background-color: #f2ecdf;
--menu-hover-item-background-color: #dcd5c3;
--menu-hover-item-text-color: #141310;
--hover-item-background-color: #dcd5c3;
--active-item-background-color: #c9c1ad;
--dropdown-border-color: #dcd5c3;
--dropdown-item-icon-destructive-color: #96392a;
--ck-color-base-text: #2a2822;
--ck-color-text: #2a2822;
--ck-color-base-foreground: #dcd5c3;
--ck-color-base-background: #e9e3d5;
--ck-color-dialog-background: #e9e3d5;
--ck-color-dropdown-panel-background: #f2ecdf;
--ck-color-dropdown-panel-border: #c9c1ad;
--ck-color-list-background: #f2ecdf;
--ck-color-list-button-hover-background: #dcd5c3;
--ck-color-list-button-on-background: #c9c1ad;
--ck-color-list-button-on-text: #141310;
--ck-color-button-default-background: #dcd5c3;
--ck-color-button-default-hover-background: #c9c1ad;
--ck-color-button-on-background: #c9c1ad;
--ck-color-button-on-hover-background: #b7ae98;
--ck-color-button-action-background: #c9c1ad;
--ck-color-button-action-hover-background: #b7ae98;
--ck-color-input-background: #f2ecdf;
--ck-color-input-text: #2a2822;
--ck-color-panel-background: #dcd5c3;
--ck-color-toolbar-background: #dcd5c3;
}
body.desktop .dropdown-menu,
body.desktop .dropdown-menu.tn-dropdown-menu,
body.desktop .dropdown-menu.tn-dropdown-list,
body.mobile .dropdown-menu {
--menu-background-color: #f2ecdf !important;
--menu-background-color-no-backdrop: #f2ecdf !important;
--menu-section-background-color: #f2ecdf !important;
background-color: #f2ecdf !important;
}
body.desktop .dropdown-menu::before,
body.mobile .dropdown-menu::before {
background-color: #f2ecdf !important;
backdrop-filter: none !important;
}
body.desktop .dropdown-menu .dropdown-item,
body.mobile .dropdown-menu .dropdown-item {
--custom-color: #2a2822 !important;
color: #2a2822;
}
body.desktop .dropdown-menu .dropdown-item:hover,
body.desktop .dropdown-menu .dropdown-item:focus,
body.desktop .dropdown-menu .dropdown-item.active {
background-color: #dcd5c3 !important;
color: #141310;
}
/* ============ NOTE HEADER BOXES (h2-h6) ============ */
.ck-content h2 {
background-color: rgba(168, 95, 29, 0.18);
border-bottom: 2px solid rgba(168, 95, 29, 0.55);
border-radius: 4px;
padding: 0.25em 0.4em;
}
.ck-content h3 {
background-color: rgba(61, 107, 114, 0.16);
border-bottom: 2px solid rgba(61, 107, 114, 0.5);
border-radius: 4px;
padding: 0.2em 0.35em;
}
.ck-content h4 {
background-color: rgba(92, 102, 49, 0.16);
border-bottom: 2px solid rgba(92, 102, 49, 0.5);
border-radius: 4px;
padding: 0.2em 0.35em;
}
.ck-content h5 {
background-color: rgba(106, 76, 114, 0.16);
border-bottom: 2px solid rgba(106, 76, 114, 0.5);
border-radius: 4px;
padding: 0.2em 0.35em;
}
.ck-content h6 {
background-color: rgba(124, 74, 102, 0.16);
border-bottom: 2px solid rgba(124, 74, 102, 0.5);
border-radius: 4px;
padding: 0.2em 0.35em;
}
/* ============ TABLES ============ */
.ck-content table {
border-collapse: separate;
border-spacing: 0;
border: 1px solid var(--main-border-color);
border-radius: 8px;
overflow: hidden;
margin: 1em 0;
}
.ck-content table th,
.ck-content table td {
border: none;
border-bottom: 1px solid var(--main-border-color);
border-right: 1px solid var(--main-border-color);
padding: 8px 12px;
text-align: left;
background-color: transparent !important;
}
.ck-content table th:last-child,
.ck-content table td:last-child { border-right: none; }
.ck-content table tr:last-child td { border-bottom: none; }
.ck-content table thead th {
background-color: rgba(168, 95, 29, 0.16) !important;
color: #141310;
font-weight: 700;
border-bottom: 2px solid rgba(168, 95, 29, 0.45);
}
.ck-content table tbody td:first-child {
background-color: rgba(0, 0, 0, 0.04) !important;
color: #2a2822;
font-weight: 600;
white-space: nowrap;
}
.ck-content table tbody tr:nth-child(even) td:not(:first-child) {
background-color: rgba(0, 0, 0, 0.03) !important;
}
.ck-content table tbody tr:hover td,
.ck-content table .col-hover {
background-color: rgba(61, 107, 114, 0.08) !important;
}
.ck-content table tbody tr:hover td.col-hover,
.ck-content table thead th.col-hover {
background-color: rgba(61, 107, 114, 0.16) !important;
}
/* ============ MERMAID ============ */
.mermaid-render svg { width: 95%; height: auto; max-width: 100%; }