commit 098fa1a9cb76ac96758d3b3c7cacff0aa206252c Author: Richard Zink Date: Mon Sep 7 19:50:50 2026 +0200 Add Gruvbox, Harbor and Coffee themes for TriliumNext (dark + light) diff --git a/README.md b/README.md new file mode 100644 index 0000000..f2af53c --- /dev/null +++ b/README.md @@ -0,0 +1,52 @@ +# Trilium Themes + +Gruvbox, Harbor and Coffee 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 | +|---|---|---|---| +| **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) | + +All variants are **fixed** (dark stays dark, light stays light) – Trilium user themes do not +auto-switch with the system preference. Each theme is derived from Trilium's default `next` theme +(`next-dark` / `next-light` as the base). + +## Palette overview + +| Family | Dark | Light | +|---|---|---| +| 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` | + +## Install in Trilium + +1. In Trilium create a **code note** (type `code`) with mime **`text/css`** under a folder of your + choice, e.g. `Resource & Templates`. +2. Copy the contents of the theme file you want into the note. +3. Add two labels to the note: + - `appTheme` → the display name, e.g. `Coffee` (shown in the theme dropdown) + - `appThemeBase` → `next-dark` for dark variants, `next-light` for light variants +4. Reload the app, then go to **Options → Appearance → Theme** and pick your theme. + +Example attributes for the dark Coffee theme: + +``` +appTheme = Coffee +appThemeBase = next-dark +iconClass = bx bxs-coffee +``` + +## Customising + +The themes are variable-driven. Edit the `--*` values inside the `#trilium-app { ... }` block and the +global `:root { ... }` block (menus/dropdowns render outside `#trilium-app`). The `.ck-content` rules +at the bottom style note headers, tables and tree-lines per palette. + +## License + +The theme files are released under the **MIT License**. The color schemes are derived from the +repositories listed above, which are all MIT licensed – see the header comment in each file. \ No newline at end of file diff --git a/coffee-dark.css b/coffee-dark.css new file mode 100644 index 0000000..724ab15 --- /dev/null +++ b/coffee-dark.css @@ -0,0 +1,413 @@ +/* + * Coffee Theme for TriliumNext + * + * Derived from the current default (next) theme via #appThemeBase=next-dark. + * Fixed dark variant (no automatic light/dark switching for user themes). + * + * Coffee palette (dark roast, omarchy-coffee-theme) (from megabyte0x/omarchy-coffee-theme, MIT): + * bg #1d150f / #2d2118 / #3a2a20 / #160f0a fg #f0e2d0 + * accents: red #d78a6f coral #e0a15c sage #8f7a67 + * gold #ffda92 rose #ec8f89 slate #cf90a2 accent #e0a15c + */ + +#trilium-app { + --theme-style: dark; + + /* Main surfaces */ + --main-background-color: #1d150f; + --main-text-color: #f0e2d0; + --main-border-color: #3a2a20; + --subtle-border-color: #2d2118; + --dropdown-border-color: #3a2a20; + --dropdown-shadow-opacity: 0.6; + + /* Accented / highlight */ + --accented-background-color: #2d2118; + --more-accented-background-color: #3a2a20; + + /* Cards & dialogs */ + --card-background-color: #2d2118; + --card-background-hover-color: #3a2a20; + --card-border-color: #3a2a20; + --tool-dialog-background-color: #160f0a; + --modal-background-color: #160f0a; + --modal-border-color: #3a2a20; + + /* Text & muted */ + --muted-text-color: #8f7a67; + --menu-text-color: #f0e2d0; + --menu-background-color: #2d2118e6; + --menu-background-color-no-backdrop: #160f0a; + + /* Links */ + --link-color: #ec8f89; + --link-hover-color: #ffda92; + --link-hover-background: #ffda9224; + + /* Inputs */ + --input-background-color: #3a2a2060; + --input-text-color: #f0e2d0; + --input-placeholder-color: #8f7a6780; + --input-hover-background: #4a3a3060; + --input-focus-outline-color: #ec8f89; + --input-focus-background: #4a3a3050; + --input-focus-color: #f0e2d0; + --input-action-button-color: #8f7a67; + --input-action-button-hover: #f0e2d0; + + /* Selection */ + --selection-background-color: #e0a15c; + --hover-item-text-color: #f0e2d0; + --hover-item-background-color: #2d2118; + --active-item-text-color: #f0e2d0; + --active-item-background-color: #3a2a20; + + /* Left pane / launcher */ + --left-pane-background-color: #160f0a; + --left-pane-text-color: #8f7a67; + --left-pane-icon-color: #8f7a67; + --left-pane-item-hover-background: #2d2118; + --left-pane-item-selected-background: #3a2a20; + --left-pane-item-selected-color: #f0e2d0; + --launcher-pane-background-color: #160f0a; + --launcher-pane-text-color: #8f7a67; + --launcher-pane-vert-background-color: #160f0a; + --launcher-pane-vert-text-color: #8f7a67; + --launcher-pane-horiz-background-color: #160f0a; + --launcher-pane-horiz-text-color: #8f7a67; + + /* Tabs & breadcrumb / window backgrounds */ + --window-background-color-bgfx: #160f0a; + --root-background: #160f0a; + --tab-background-color: #160f0a; + --note-split-background-color: #1d150f; + --center-pane-background-color-bgfx: #1d150f; + --launcher-pane-horiz-background-color-bgfx: #160f0a; + --center-pane-horiz-layout-background-color-bgfx: #1d150f; + --center-pane-vert-layout-background-color-bgfx: #1d150f; + + /* Tabs */ + --active-tab-background-color: #160f0a; + --active-tab-text-color: #f0e2d0; + --inactive-tab-background-color: #1d150f; + --inactive-tab-text-color: #8f7a67; + --tab-close-button-hover-background: #2d2118; + --tab-close-button-hover-color: #d78a6f; + + /* Right pane */ + --right-pane-background-color: #160f0a; + --right-pane-heading-color: #f0e2d0; + --right-pane-item-hover-background: #2d2118; + --right-pane-item-hover-color: #f0e2d0; + + /* Bottom panel */ + --bottom-panel-background-color: #160f0a; + --bottom-panel-title-bar-background-color: #1d150f; + + /* Status bar */ + --status-bar-border-color: #3a2a20; + + /* Code / inline code */ + --inline-code-background-color: #2d2118; + --inline-code-border-color: #3a2a20; + --code-block-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); + + /* Note icons */ + --note-icon-background-color: #2d2118; + --note-icon-color: #f0e2d0; + + /* Floating buttons */ + --floating-button-background-color: #2d2118; + --floating-button-color: #f0e2d0; + --floating-button-hover-background: #3a2a20; + --floating-button-hover-color: #f0e2d0; + + /* Tooltips */ + --tooltip-background-color: #2d2118; + --tooltip-foreground-color: #f0e2d0; + + /* Scrollbar */ + --scrollbar-thumb-color: #3a2a20; + --scrollbar-thumb-hover-color: #4a3a30; + --scrollbar-background-color: #160f0a; + + /* Checkboxes / tasks */ + --task-checkbox-done-color: #8f7a67; + --task-checkbox-glyph-color: #f0e2d0; + --task-checkbox-without-state-background: #3a2a20; + --task-checkbox-with-state-background: #e0a15c; + + /* Mermaid */ + --mermaid-theme: dark; + + /* Buttons */ + --cmd-button-background-color: #3a2a20a0; + --cmd-button-text-color: #f0e2d0; + --cmd-button-hover-background-color: #4a3a30a0; + --cmd-button-hover-text-color: #f0e2d0; + --icon-button-hover-background: #2d2118; + --icon-button-hover-color: #f0e2d0; + + /* Logs */ + --log-error-color: #d78a6f; + --log-info-color: #ec8f89; + --log-slow-color: #ffda92; + --log-success-color: #8f7a67; + + /* Badges */ + --badge-background-color: #3a2a20; + --badge-text-color: #f0e2d0; + + /* CKEditor editor dropdowns / panels (no yellow) */ + --ck-color-base-foreground: #2d2118; + --ck-color-base-background: #1d150f; + --ck-color-dialog-background: #1d150f; + --ck-color-dropdown-panel-background: #2d2118; + --ck-color-dropdown-panel-border: #3a2a20; + --ck-color-list-background: #2d2118; + --ck-color-list-button-hover-background: #3a2a20; + --ck-color-list-button-on-background: #3a2a20; + --ck-color-button-default-background: #2d2118; + --ck-color-button-default-hover-background: #3a2a20; + --ck-color-button-on-background: #3a2a20; + --ck-color-button-on-hover-background: #4a3a30; + --ck-color-button-action-background: #3a2a20; + --ck-color-button-action-hover-background: #4a3a30; + --ck-color-input-background: #1d150f; + --ck-editor-toolbar-button-on-background: #3a2a20; + --ck-editor-toolbar-button-on-color: #f0e2d0; + --ck-editor-toolbar-dropdown-button-open-background: #2d2118; +} + +/* Menus & dropdowns are often rendered outside #trilium-app, so also set them globally. */ +:root { + --menu-text-color: #f0e2d0; + --menu-background-color: #1d150f; + --menu-background-color-no-backdrop: #1d150f; + --menu-item-icon-color: #8f7a67; + --menu-item-disabled-opacity: 0.5; + --menu-item-keyboard-shortcut-color: #8f7a6790; + --menu-item-arrow-color: #8f7a67a3; + --menu-item-delimiter-color: #2d2118; + --menu-item-group-header-color: #8f7a67; + --menu-section-background-color: #1d150f; + --menu-hover-item-background-color: #2d2118; + --menu-hover-item-text-color: #f0e2d0; + --hover-item-background-color: #2d2118; + --active-item-background-color: #3a2a20; + --dropdown-border-color: #2d2118; + --dropdown-item-icon-destructive-color: #d78a6f; + + /* CKEditor editor dropdowns are rendered outside #trilium-app, so set them globally (no yellow). */ + --ck-color-base-text: #f0e2d0; + --ck-color-text: #f0e2d0; + --ck-color-base-foreground: #2d2118; + --ck-color-base-background: #1d150f; + --ck-color-dialog-background: #1d150f; + --ck-color-dropdown-panel-background: #2d2118; + --ck-color-dropdown-panel-border: #3a2a20; + --ck-color-list-background: #2d2118; + --ck-color-list-button-hover-background: #3a2a20; + --ck-color-list-button-on-background: #3a2a20; + --ck-color-list-button-on-text: #f0e2d0; + --ck-color-button-default-background: #2d2118; + --ck-color-button-default-hover-background: #3a2a20; + --ck-color-button-on-background: #3a2a20; + --ck-color-button-on-hover-background: #4a3a30; + --ck-color-button-action-background: #3a2a20; + --ck-color-button-action-hover-background: #4a3a30; + --ck-color-input-background: #1d150f; + --ck-color-input-text: #f0e2d0; + --ck-color-panel-background: #2d2118; + --ck-color-toolbar-background: #2d2118; +} + +/* Force the note-tree context menu / dropdowns to the Harbordark background. */ +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: #1d150f !important; + --menu-background-color-no-backdrop: #1d150f !important; + --menu-section-background-color: #1d150f !important; + background-color: #1d150f !important; +} +body.desktop .dropdown-menu::before, +body.mobile .dropdown-menu::before { + background-color: #1d150f !important; + backdrop-filter: none !important; +} +body.desktop .dropdown-menu .dropdown-item, +body.mobile .dropdown-menu .dropdown-item { + --custom-color: #f0e2d0 !important; + color: #f0e2d0; +} +body.desktop .dropdown-menu .dropdown-item:hover, +body.desktop .dropdown-menu .dropdown-item:focus, +body.desktop .dropdown-menu .dropdown-item.active { + background-color: #2d2118 !important; + color: #f0e2d0; +} + +/* ============ TREELINES (Vertical tree lines) ============ */ +/* Base connector lines — Harbordark neutral */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:nth-of-type(2n) { + border-left: 2.5px solid rgba(169, 155, 122, 0.8); + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:nth-of-type(2n+1) { + border-left: 2.5px solid rgba(169, 155, 122, 0.5); + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR red */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-E64D4D) { + border-left: 2.5px solid #d78a6f80; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR orange */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-E6994D) { + border-left: 2.5px solid #dc816480; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR yellow */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-E5E64D) { + border-left: 2.5px solid #ffda9280; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR green (light) */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-99E64D) { + border-left: 2.5px solid #8f7a6780; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR green */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-4DE64D) { + border-left: 2.5px solid #8f7a6780; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR aqua/green */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-4DE699) { + border-left: 2.5px solid #cf90a280; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR aqua/cyan */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-4DE5E6) { + border-left: 2.5px solid #cf90a280; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR blue */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-4D99E6) { + border-left: 2.5px solid #cf90a280; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR blue/purple */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-4D4DE6) { + border-left: 2.5px solid #ec8f8980; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR purple */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-994DE6) { + border-left: 2.5px solid #ec8f8980; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR pink/magenta */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-E64DB3) { + border-left: 2.5px solid #ec8f8980; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} + +/* ============ NOTE HEADER BOXES (h2-h6) ============ */ +/* Box background behind header text. h2 spans full editor width, h3-h6 hug the text block. Transparent, distinct colours. */ +.ck-content h2 { + background-color: rgba(231, 90, 80, 0.30); + border-bottom: 2px solid rgba(231, 90, 80, 0.6); + border-radius: 4px; + padding: 0.25em 0.4em; +} +.ck-content h3 { + background-color: rgba(169, 155, 122, 0.25); + border-bottom: 2px solid rgba(169, 155, 122, 0.6); + border-radius: 4px; + padding: 0.2em 0.35em; +} +.ck-content h4 { + background-color: rgba(225, 206, 152, 0.22); + border-bottom: 2px solid rgba(225, 206, 152, 0.55); + border-radius: 4px; + padding: 0.2em 0.35em; +} +.ck-content h5 { + background-color: rgba(119, 131, 138, 0.25); + border-bottom: 2px solid rgba(119, 131, 138, 0.6); + border-radius: 4px; + padding: 0.2em 0.35em; +} +.ck-content h6 { + background-color: rgba(229, 137, 128, 0.25); + border-bottom: 2px solid rgba(229, 137, 128, 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(231, 90, 80, 0.20) !important; + color: #f0e2d0; + font-weight: 700; + border-bottom: 2px solid rgba(231, 90, 80, 0.45); +} +.ck-content table tbody td:first-child { + background-color: rgba(255, 255, 255, 0.05) !important; + color: #f0e2d0; + 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 { + background-color: rgba(94, 129, 172, 0.10) !important; +} +.ck-content table .col-hover { + 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 { + background-color: rgba(94, 129, 172, 0.18) !important; +} \ No newline at end of file diff --git a/coffee-latte.css b/coffee-latte.css new file mode 100644 index 0000000..26e31e4 --- /dev/null +++ b/coffee-latte.css @@ -0,0 +1,413 @@ +/* + * Coffee Latte Theme for TriliumNext + * + * Derived from the current default (next) theme via #appThemeBase=next-light. + * Fixed light variant (no automatic light/dark switching for user themes). + * + * Coffee Latte palette (omarchy-coffee-latte-theme) (from megabyte0x/omarchy-coffee-latte-theme, MIT): + * bg #E8E3C3 / #eae6c9 / #c5c1a6 / #eae6c9 fg #2D1A1D + * accents: red #a4405e green #4f6b00 clay #b25d76 + * blue #8e2d53 purple #7a003b cyan #4f6b00 accent #8e2d53 + */ + +#trilium-app { + --theme-style: light; + + /* Main surfaces */ + --main-background-color: #E8E3C3; + --main-text-color: #2D1A1D; + --main-border-color: #c5c1a6; + --subtle-border-color: #eae6c9; + --dropdown-border-color: #c5c1a6; + --dropdown-shadow-opacity: 0.5; + + /* Accented / highlight */ + --accented-background-color: #eae6c9; + --more-accented-background-color: #c5c1a6; + + /* Cards & dialogs */ + --card-background-color: #eae6c9; + --card-background-hover-color: #c5c1a6; + --card-border-color: #c5c1a6; + --tool-dialog-background-color: #eae6c9; + --modal-background-color: #eae6c9; + --modal-border-color: #c5c1a6; + + /* Text & muted */ + --muted-text-color: #4f6b00; + --menu-text-color: #2D1A1D; + --menu-background-color: #eae6c9; + --menu-background-color-no-backdrop: #eae6c9; + + /* Links */ + --link-color: #8e2d53; + --link-hover-color: #4f6b00; + --link-hover-background: #4f6b0024; + + /* Inputs */ + --input-background-color: #c5c1a660; + --input-text-color: #2D1A1D; + --input-placeholder-color: #4f6b0080; + --input-hover-background: #aeaa9260; + --input-focus-outline-color: #8e2d53; + --input-focus-background: #c5c1a650; + --input-focus-color: #2D1A1D; + --input-action-button-color: #76756f; + --input-action-button-hover: #2D1A1D; + + /* Selection */ + --selection-background-color: #8e2d53; + --hover-item-text-color: #2D1A1D; + --hover-item-background-color: #eae6c9; + --active-item-text-color: #2D1A1D; + --active-item-background-color: #c5c1a6; + + /* Left pane / launcher */ + --left-pane-background-color: #eae6c9; + --left-pane-text-color: #4f6b00; + --left-pane-icon-color: #4d3c3f; + --left-pane-item-hover-background: #c5c1a6; + --left-pane-item-selected-background: #c5c1a6; + --left-pane-item-selected-color: #2D1A1D; + --launcher-pane-background-color: #eae6c9; + --launcher-pane-text-color: #4f6b00; + --launcher-pane-vert-background-color: #eae6c9; + --launcher-pane-vert-text-color: #4f6b00; + --launcher-pane-horiz-background-color: #eae6c9; + --launcher-pane-horiz-text-color: #4f6b00; + + /* Tabs & breadcrumb / window backgrounds */ + --window-background-color-bgfx: #eae6c9; + --root-background: #eae6c9; + --tab-background-color: #eae6c9; + --note-split-background-color: #E8E3C3; + --center-pane-background-color-bgfx: #E8E3C3; + --launcher-pane-horiz-background-color-bgfx: #eae6c9; + --center-pane-horiz-layout-background-color-bgfx: #E8E3C3; + --center-pane-vert-layout-background-color-bgfx: #E8E3C3; + + /* Tabs */ + --active-tab-background-color: #eae6c9; + --active-tab-text-color: #2D1A1D; + --inactive-tab-background-color: #E8E3C3; + --inactive-tab-text-color: #4f6b00; + --tab-close-button-hover-background: #c5c1a6; + --tab-close-button-hover-color: #a4405e; + + /* Right pane */ + --right-pane-background-color: #eae6c9; + --right-pane-heading-color: #2D1A1D; + --right-pane-item-hover-background: #c5c1a6; + --right-pane-item-hover-color: #2D1A1D; + + /* Bottom panel */ + --bottom-panel-background-color: #eae6c9; + --bottom-panel-title-bar-background-color: #E8E3C3; + + /* Status bar */ + --status-bar-border-color: #c5c1a6; + + /* Code / inline code */ + --inline-code-background-color: #eae6c9; + --inline-code-border-color: #c5c1a6; + --code-block-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); + + /* Note icons */ + --note-icon-background-color: #eae6c9; + --note-icon-color: #2D1A1D; + + /* Floating buttons */ + --floating-button-background-color: #eae6c9; + --floating-button-color: #2D1A1D; + --floating-button-hover-background: #c5c1a6; + --floating-button-hover-color: #2D1A1D; + + /* Tooltips */ + --tooltip-background-color: #eae6c9; + --tooltip-foreground-color: #2D1A1D; + + /* Scrollbar */ + --scrollbar-thumb-color: #c5c1a6; + --scrollbar-thumb-hover-color: #aeaa92; + --scrollbar-background-color: #eae6c9; + + /* Checkboxes / tasks */ + --task-checkbox-done-color: #4f6b00; + --task-checkbox-glyph-color: #2D1A1D; + --task-checkbox-without-state-background: #c5c1a6; + --task-checkbox-with-state-background: #8e2d53; + + /* Mermaid */ + --mermaid-theme: light; + + /* Buttons */ + --cmd-button-background-color: #c5c1a6a0; + --cmd-button-text-color: #2D1A1D; + --cmd-button-hover-background-color: #aeaa92a0; + --cmd-button-hover-text-color: #2D1A1D; + --icon-button-hover-background: #c5c1a6; + --icon-button-hover-color: #2D1A1D; + + /* Logs */ + --log-error-color: #a4405e; + --log-info-color: #8e2d53; + --log-slow-color: #b25d76; + --log-success-color: #4f6b00; + + /* Badges */ + --badge-background-color: #c5c1a6; + --badge-text-color: #2D1A1D; + + /* CKEditor editor dropdowns / panels (no yellow) */ + --ck-color-base-foreground: #c5c1a6; + --ck-color-base-background: #E8E3C3; + --ck-color-dialog-background: #E8E3C3; + --ck-color-dropdown-panel-background: #E8E3C3; + --ck-color-dropdown-panel-border: #c5c1a6; + --ck-color-list-background: #E8E3C3; + --ck-color-list-button-hover-background: #c5c1a6; + --ck-color-list-button-on-background: #c5c1a6; + --ck-color-button-default-background: #eae6c9; + --ck-color-button-default-hover-background: #c5c1a6; + --ck-color-button-on-background: #c5c1a6; + --ck-color-button-on-hover-background: #aeaa92; + --ck-color-button-action-background: #c5c1a6; + --ck-color-button-action-hover-background: #aeaa92; + --ck-color-input-background: #E8E3C3; + --ck-editor-toolbar-button-on-background: #c5c1a6; + --ck-editor-toolbar-button-on-color: #2D1A1D; + --ck-editor-toolbar-dropdown-button-open-background: #eae6c9; +} + +/* Menus & dropdowns are often rendered outside #trilium-app, so also set them globally. */ +:root { + --menu-text-color: #2D1A1D; + --menu-background-color: #E8E3C3; + --menu-background-color-no-backdrop: #E8E3C3; + --menu-item-icon-color: #76756f; + --menu-item-disabled-opacity: 0.5; + --menu-item-keyboard-shortcut-color: #76756f90; + --menu-item-arrow-color: #76756fa3; + --menu-item-delimiter-color: #c5c1a6; + --menu-item-group-header-color: #4d3c3f; + --menu-section-background-color: #E8E3C3; + --menu-hover-item-background-color: #c5c1a6; + --menu-hover-item-text-color: #2D1A1D; + --hover-item-background-color: #c5c1a6; + --active-item-background-color: #c5c1a6; + --dropdown-border-color: #c5c1a6; + --dropdown-item-icon-destructive-color: #a4405e; + + /* CKEditor editor dropdowns are rendered outside #trilium-app, so set them globally (no yellow). */ + --ck-color-base-text: #2D1A1D; + --ck-color-text: #2D1A1D; + --ck-color-base-foreground: #c5c1a6; + --ck-color-base-background: #E8E3C3; + --ck-color-dialog-background: #E8E3C3; + --ck-color-dropdown-panel-background: #E8E3C3; + --ck-color-dropdown-panel-border: #c5c1a6; + --ck-color-list-background: #E8E3C3; + --ck-color-list-button-hover-background: #c5c1a6; + --ck-color-list-button-on-background: #c5c1a6; + --ck-color-list-button-on-text: #2D1A1D; + --ck-color-button-default-background: #eae6c9; + --ck-color-button-default-hover-background: #c5c1a6; + --ck-color-button-on-background: #c5c1a6; + --ck-color-button-on-hover-background: #aeaa92; + --ck-color-button-action-background: #c5c1a6; + --ck-color-button-action-hover-background: #aeaa92; + --ck-color-input-background: #E8E3C3; + --ck-color-input-text: #2D1A1D; + --ck-color-panel-background: #E8E3C3; + --ck-color-toolbar-background: #eae6c9; +} + +/* Force the note-tree context menu / dropdowns to a neutral, non-yellow background. */ +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: #E8E3C3 !important; + --menu-background-color-no-backdrop: #E8E3C3 !important; + --menu-section-background-color: #E8E3C3 !important; + background-color: #E8E3C3 !important; +} +body.desktop .dropdown-menu::before, +body.mobile .dropdown-menu::before { + background-color: #E8E3C3 !important; + backdrop-filter: none !important; +} +body.desktop .dropdown-menu .dropdown-item, +body.mobile .dropdown-menu .dropdown-item { + --custom-color: #2D1A1D !important; + color: #2D1A1D; +} +body.desktop .dropdown-menu .dropdown-item:hover, +body.desktop .dropdown-menu .dropdown-item:focus, +body.desktop .dropdown-menu .dropdown-item.active { + background-color: #c5c1a6 !important; + color: #2D1A1D; +} + +/* ============ TREELINES (Vertical tree lines) ============ */ +/* Base connector lines — Harbor neutral */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:nth-of-type(2n) { + border-left: 2.5px solid rgba(85, 103, 83, 0.8); + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:nth-of-type(2n+1) { + border-left: 2.5px solid rgba(85, 103, 83, 0.5); + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR red */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-E64D4D) { + border-left: 2.5px solid #a4405e80; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR orange */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-E6994D) { + border-left: 2.5px solid #b25d7680; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR yellow */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-E5E64D) { + border-left: 2.5px solid #d8c36e80; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR green (light) */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-99E64D) { + border-left: 2.5px solid #4f6b0080; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR green */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-4DE64D) { + border-left: 2.5px solid #4f6b0080; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR aqua/green */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-4DE699) { + border-left: 2.5px solid #4f6b0080; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR aqua/cyan */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-4DE5E6) { + border-left: 2.5px solid #4f6b0080; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR blue */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-4D99E6) { + border-left: 2.5px solid #8e2d5380; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR blue/purple */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-4D4DE6) { + border-left: 2.5px solid #8e2d5380; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR purple */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-994DE6) { + border-left: 2.5px solid #7a003b80; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR pink/magenta */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-E64DB3) { + border-left: 2.5px solid #a8275f80; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} + +/* ============ NOTE HEADER BOXES (h2-h6) ============ */ +/* Box background behind header text. h2 spans full editor width, h3-h6 hug the text block. Transparent, distinct colours. */ +.ck-content h2 { + background-color: rgba(94, 129, 172, 0.18); + border-bottom: 2px solid rgba(94, 129, 172, 0.45); + border-radius: 4px; + padding: 0.25em 0.4em; +} +.ck-content h3 { + background-color: rgba(85, 103, 83, 0.14); + border-bottom: 2px solid rgba(85, 103, 83, 0.38); + border-radius: 4px; + padding: 0.2em 0.35em; +} +.ck-content h4 { + background-color: rgba(220, 129, 100, 0.14); + border-bottom: 2px solid rgba(220, 129, 100, 0.38); + border-radius: 4px; + padding: 0.2em 0.35em; +} +.ck-content h5 { + background-color: rgba(138, 91, 129, 0.12); + border-bottom: 2px solid rgba(138, 91, 129, 0.35); + border-radius: 4px; + padding: 0.2em 0.35em; +} +.ck-content h6 { + background-color: rgba(61, 114, 125, 0.12); + border-bottom: 2px solid rgba(61, 114, 125, 0.35); + 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(94, 129, 172, 0.16) !important; + color: #2D1A1D; + font-weight: 700; + border-bottom: 2px solid rgba(94, 129, 172, 0.40); +} +.ck-content table tbody td:first-child { + background-color: rgba(0, 0, 0, 0.05) !important; + color: #2D1A1D; + 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.04) !important; +} +.ck-content table tbody tr:hover td { + background-color: rgba(94, 129, 172, 0.08) !important; +} +.ck-content table .col-hover { + background-color: rgba(94, 129, 172, 0.08) !important; +} +.ck-content table tbody tr:hover td.col-hover, +.ck-content table thead th.col-hover { + background-color: rgba(94, 129, 172, 0.15) !important; +} \ No newline at end of file diff --git a/gruvbox-dark.css b/gruvbox-dark.css new file mode 100644 index 0000000..ba18a6e --- /dev/null +++ b/gruvbox-dark.css @@ -0,0 +1,413 @@ +/* + * Gruvbox Dark Theme for TriliumNext + * + * Derived from the current default (next) theme via #appThemeBase=next-dark. + * Fixed dark variant (no automatic light/dark switching for user themes). + * + * Gruvbox dark palette: + * bg #282828 / #3c3836 / #504945 / #32302f fg #ebdbb2 / #fbf1c7 + * accents: red #fb4934 green #b8bb26 yellow #fabd2f + * blue #83a598 purple #d3869b aqua #8ec07c orange #fe8019 + */ + +#trilium-app { + --theme-style: dark; + + /* Main surfaces */ + --main-background-color: #282828; + --main-text-color: #ebdbb2; + --main-border-color: #504945; + --subtle-border-color: #3c3836; + --dropdown-border-color: #504945; + --dropdown-shadow-opacity: 0.6; + + /* Accented / highlight */ + --accented-background-color: #3c3836; + --more-accented-background-color: #504945; + + /* Cards & dialogs */ + --card-background-color: #3c3836; + --card-background-hover-color: #504945; + --card-border-color: #504945; + --tool-dialog-background-color: #32302f; + --modal-background-color: #32302f; + --modal-border-color: #504945; + + /* Text & muted */ + --muted-text-color: #a89984; + --menu-text-color: #ebdbb2; + --menu-background-color: #3c3836e6; + --menu-background-color-no-backdrop: #32302f; + + /* Links */ + --link-color: #83a598; + --link-hover-color: #8ec07c; + --link-hover-background: #8ec07c24; + + /* Inputs */ + --input-background-color: #50494560; + --input-text-color: #ebdbb2; + --input-placeholder-color: #a8998480; + --input-hover-background: #665c5460; + --input-focus-outline-color: #83a598; + --input-focus-background: #665c5450; + --input-focus-color: #fbf1c7; + --input-action-button-color: #a89984; + --input-action-button-hover: #fbf1c7; + + /* Selection */ + --selection-background-color: #83a598; + --hover-item-text-color: #fbf1c7; + --hover-item-background-color: #3c3836; + --active-item-text-color: #fbf1c7; + --active-item-background-color: #504945; + + /* Left pane / launcher */ + --left-pane-background-color: #1d2021; + --left-pane-text-color: #a89984; + --left-pane-icon-color: #bdae93; + --left-pane-item-hover-background: #3c3836; + --left-pane-item-selected-background: #504945; + --left-pane-item-selected-color: #fbf1c7; + --launcher-pane-background-color: #1d2021; + --launcher-pane-text-color: #a89984; + --launcher-pane-vert-background-color: #1d2021; + --launcher-pane-vert-text-color: #a89984; + --launcher-pane-horiz-background-color: #1d2021; + --launcher-pane-horiz-text-color: #a89984; + + /* Tabs & breadcrumb / window backgrounds */ + --window-background-color-bgfx: #1d2021; + --root-background: #1d2021; + --tab-background-color: #1d2021; + --note-split-background-color: #282828; + --center-pane-background-color-bgfx: #282828; + --launcher-pane-horiz-background-color-bgfx: #1d2021; + --center-pane-horiz-layout-background-color-bgfx: #282828; + --center-pane-vert-layout-background-color-bgfx: #282828; + + /* Tabs */ + --active-tab-background-color: #32302f; + --active-tab-text-color: #fbf1c7; + --inactive-tab-background-color: #282828; + --inactive-tab-text-color: #a89984; + --tab-close-button-hover-background: #3c3836; + --tab-close-button-hover-color: #fb4934; + + /* Right pane */ + --right-pane-background-color: #1d2021; + --right-pane-heading-color: #ebdbb2; + --right-pane-item-hover-background: #3c3836; + --right-pane-item-hover-color: #fbf1c7; + + /* Bottom panel */ + --bottom-panel-background-color: #1d2021; + --bottom-panel-title-bar-background-color: #282828; + + /* Status bar */ + --status-bar-border-color: #504945; + + /* Code / inline code */ + --inline-code-background-color: #3c3836; + --inline-code-border-color: #504945; + --code-block-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); + + /* Note icons */ + --note-icon-background-color: #3c3836; + --note-icon-color: #ebdbb2; + + /* Floating buttons */ + --floating-button-background-color: #3c3836; + --floating-button-color: #ebdbb2; + --floating-button-hover-background: #504945; + --floating-button-hover-color: #fbf1c7; + + /* Tooltips */ + --tooltip-background-color: #3c3836; + --tooltip-foreground-color: #ebdbb2; + + /* Scrollbar */ + --scrollbar-thumb-color: #504945; + --scrollbar-thumb-hover-color: #665c54; + --scrollbar-background-color: #1d2021; + + /* Checkboxes / tasks */ + --task-checkbox-done-color: #b8bb26; + --task-checkbox-glyph-color: #fbf1c7; + --task-checkbox-without-state-background: #504945; + --task-checkbox-with-state-background: #83a598; + + /* Mermaid */ + --mermaid-theme: dark; + + /* Buttons */ + --cmd-button-background-color: #504945a0; + --cmd-button-text-color: #ebdbb2; + --cmd-button-hover-background-color: #665c54a0; + --cmd-button-hover-text-color: #fbf1c7; + --icon-button-hover-background: #3c3836; + --icon-button-hover-color: #fbf1c7; + + /* Logs */ + --log-error-color: #fb4934; + --log-info-color: #83a598; + --log-slow-color: #fabd2f; + --log-success-color: #b8bb26; + + /* Badges */ + --badge-background-color: #504945; + --badge-text-color: #ebdbb2; + + /* CKEditor editor dropdowns / panels (no yellow) */ + --ck-color-base-foreground: #3c3836; + --ck-color-base-background: #282828; + --ck-color-dialog-background: #282828; + --ck-color-dropdown-panel-background: #3c3836; + --ck-color-dropdown-panel-border: #504945; + --ck-color-list-background: #3c3836; + --ck-color-list-button-hover-background: #504945; + --ck-color-list-button-on-background: #504945; + --ck-color-button-default-background: #3c3836; + --ck-color-button-default-hover-background: #504945; + --ck-color-button-on-background: #504945; + --ck-color-button-on-hover-background: #665c54; + --ck-color-button-action-background: #504945; + --ck-color-button-action-hover-background: #665c54; + --ck-color-input-background: #282828; + --ck-editor-toolbar-button-on-background: #504945; + --ck-editor-toolbar-button-on-color: #fbf1c7; + --ck-editor-toolbar-dropdown-button-open-background: #3c3836; +} + +/* Menus & dropdowns are often rendered outside #trilium-app, so also set them globally. */ +:root { + --menu-text-color: #ebdbb2; + --menu-background-color: #282828; + --menu-background-color-no-backdrop: #282828; + --menu-item-icon-color: #a89984; + --menu-item-disabled-opacity: 0.5; + --menu-item-keyboard-shortcut-color: #a8998490; + --menu-item-arrow-color: #a89984a3; + --menu-item-delimiter-color: #3c3836; + --menu-item-group-header-color: #a89984; + --menu-section-background-color: #282828; + --menu-hover-item-background-color: #3c3836; + --menu-hover-item-text-color: #fbf1c7; + --hover-item-background-color: #3c3836; + --active-item-background-color: #504945; + --dropdown-border-color: #3c3836; + --dropdown-item-icon-destructive-color: #fb4934; + + /* CKEditor editor dropdowns are rendered outside #trilium-app, so set them globally (no yellow). */ + --ck-color-base-text: #ebdbb2; + --ck-color-text: #ebdbb2; + --ck-color-base-foreground: #3c3836; + --ck-color-base-background: #282828; + --ck-color-dialog-background: #282828; + --ck-color-dropdown-panel-background: #3c3836; + --ck-color-dropdown-panel-border: #504945; + --ck-color-list-background: #3c3836; + --ck-color-list-button-hover-background: #504945; + --ck-color-list-button-on-background: #504945; + --ck-color-list-button-on-text: #fbf1c7; + --ck-color-button-default-background: #3c3836; + --ck-color-button-default-hover-background: #504945; + --ck-color-button-on-background: #504945; + --ck-color-button-on-hover-background: #665c54; + --ck-color-button-action-background: #504945; + --ck-color-button-action-hover-background: #665c54; + --ck-color-input-background: #282828; + --ck-color-input-text: #ebdbb2; + --ck-color-panel-background: #3c3836; + --ck-color-toolbar-background: #3c3836; +} + +/* Force the note-tree context menu / dropdowns to the Gruvbox dark background. */ +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: #282828 !important; + --menu-background-color-no-backdrop: #282828 !important; + --menu-section-background-color: #282828 !important; + background-color: #282828 !important; +} +body.desktop .dropdown-menu::before, +body.mobile .dropdown-menu::before { + background-color: #282828 !important; + backdrop-filter: none !important; +} +body.desktop .dropdown-menu .dropdown-item, +body.mobile .dropdown-menu .dropdown-item { + --custom-color: #ebdbb2 !important; + color: #ebdbb2; +} +body.desktop .dropdown-menu .dropdown-item:hover, +body.desktop .dropdown-menu .dropdown-item:focus, +body.desktop .dropdown-menu .dropdown-item.active { + background-color: #3c3836 !important; + color: #fbf1c7; +} + +/* ============ TREELINES (Vertical tree lines) ============ */ +/* Base connector lines — Gruvbox neutral */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:nth-of-type(2n) { + border-left: 2.5px solid rgba(168, 153, 132, 0.8); + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:nth-of-type(2n+1) { + border-left: 2.5px solid rgba(168, 153, 132, 0.5); + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR red */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-E64D4D) { + border-left: 2.5px solid #fb493480; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR orange */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-E6994D) { + border-left: 2.5px solid #fe801980; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR yellow */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-E5E64D) { + border-left: 2.5px solid #fabd2f80; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR green (light) */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-99E64D) { + border-left: 2.5px solid #b8bb2680; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR green */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-4DE64D) { + border-left: 2.5px solid #8ec07c80; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR aqua/green */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-4DE699) { + border-left: 2.5px solid #8ec07c80; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR aqua/cyan */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-4DE5E6) { + border-left: 2.5px solid #83a59880; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR blue */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-4D99E6) { + border-left: 2.5px solid #83a59880; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR blue/purple */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-4D4DE6) { + border-left: 2.5px solid #d3869b80; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR purple */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-994DE6) { + border-left: 2.5px solid #d3869b80; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR pink/magenta */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-E64DB3) { + border-left: 2.5px solid #d3869b80; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} + +/* ============ NOTE HEADER BOXES (h2-h6) ============ */ +/* Box background behind header text. h2 spans full editor width, h3-h6 hug the text block. Transparent, distinct colours. */ +.ck-content h2 { + background-color: rgba(131, 165, 152, 0.35); + border-bottom: 2px solid rgba(131, 165, 152, 0.7); + border-radius: 4px; + padding: 0.25em 0.4em; +} +.ck-content h3 { + background-color: rgba(142, 192, 124, 0.25); + border-bottom: 2px solid rgba(142, 192, 124, 0.6); + border-radius: 4px; + padding: 0.2em 0.35em; +} +.ck-content h4 { + background-color: rgba(250, 189, 47, 0.25); + border-bottom: 2px solid rgba(250, 189, 47, 0.6); + border-radius: 4px; + padding: 0.2em 0.35em; +} +.ck-content h5 { + background-color: rgba(211, 134, 155, 0.25); + border-bottom: 2px solid rgba(211, 134, 155, 0.6); + border-radius: 4px; + padding: 0.2em 0.35em; +} +.ck-content h6 { + background-color: rgba(254, 128, 25, 0.25); + border-bottom: 2px solid rgba(254, 128, 25, 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(131, 165, 152, 0.30) !important; + color: #fbf1c7; + font-weight: 700; + border-bottom: 2px solid rgba(131, 165, 152, 0.6); +} +.ck-content table tbody td:first-child { + background-color: rgba(255, 255, 255, 0.05) !important; + color: #ebdbb2; + 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 { + background-color: rgba(254, 128, 25, 0.07) !important; +} +.ck-content table .col-hover { + background-color: rgba(254, 128, 25, 0.07) !important; +} +.ck-content table tbody tr:hover td.col-hover, +.ck-content table thead th.col-hover { + background-color: rgba(254, 128, 25, 0.14) !important; +} diff --git a/gruvbox-light.css b/gruvbox-light.css new file mode 100644 index 0000000..a2b92ce --- /dev/null +++ b/gruvbox-light.css @@ -0,0 +1,413 @@ +/* + * Gruvbox Light Theme for TriliumNext + * + * Derived from the current default (next) theme via #appThemeBase=next-light. + * Fixed light variant (no automatic light/dark switching for user themes). + * + * Gruvbox light palette: + * bg #fbf1c7 / #ebdbb2 / #d5c4a1 / #f9f5d7 fg #3c3836 / #282828 + * accents: red #9d0006 green #79740e yellow #b57614 + * blue #076678 purple #8f3f71 aqua #427b58 orange #af3a03 + */ + +#trilium-app { + --theme-style: light; + + /* Main surfaces */ + --main-background-color: #fbf1c7; + --main-text-color: #3c3836; + --main-border-color: #d5c4a1; + --subtle-border-color: #ebdbb2; + --dropdown-border-color: #d5c4a1; + --dropdown-shadow-opacity: 0.5; + + /* Accented / highlight */ + --accented-background-color: #ebdbb2; + --more-accented-background-color: #d5c4a1; + + /* Cards & dialogs */ + --card-background-color: #ebdbb2; + --card-background-hover-color: #d5c4a1; + --card-border-color: #d5c4a1; + --tool-dialog-background-color: #f9f5d7; + --modal-background-color: #f9f5d7; + --modal-border-color: #d5c4a1; + + /* Text & muted */ + --muted-text-color: #7c6f64; + --menu-text-color: #3c3836; + --menu-background-color: #ebdbb2; + --menu-background-color-no-backdrop: #ebdbb2; + + /* Links */ + --link-color: #076678; + --link-hover-color: #427b58; + --link-hover-background: #427b5824; + + /* Inputs */ + --input-background-color: #d5c4a160; + --input-text-color: #3c3836; + --input-placeholder-color: #7c6f6480; + --input-hover-background: #bdae9360; + --input-focus-outline-color: #076678; + --input-focus-background: #d5c4a150; + --input-focus-color: #282828; + --input-action-button-color: #7c6f64; + --input-action-button-hover: #282828; + + /* Selection */ + --selection-background-color: #83a598; + --hover-item-text-color: #282828; + --hover-item-background-color: #ebdbb2; + --active-item-text-color: #282828; + --active-item-background-color: #d5c4a1; + + /* Left pane / launcher */ + --left-pane-background-color: #ebdbb2; + --left-pane-text-color: #7c6f64; + --left-pane-icon-color: #665c54; + --left-pane-item-hover-background: #d5c4a1; + --left-pane-item-selected-background: #d5c4a1; + --left-pane-item-selected-color: #282828; + --launcher-pane-background-color: #ebdbb2; + --launcher-pane-text-color: #7c6f64; + --launcher-pane-vert-background-color: #ebdbb2; + --launcher-pane-vert-text-color: #7c6f64; + --launcher-pane-horiz-background-color: #ebdbb2; + --launcher-pane-horiz-text-color: #7c6f64; + + /* Tabs & breadcrumb / window backgrounds */ + --window-background-color-bgfx: #ebdbb2; + --root-background: #ebdbb2; + --tab-background-color: #ebdbb2; + --note-split-background-color: #fbf1c7; + --center-pane-background-color-bgfx: #fbf1c7; + --launcher-pane-horiz-background-color-bgfx: #ebdbb2; + --center-pane-horiz-layout-background-color-bgfx: #fbf1c7; + --center-pane-vert-layout-background-color-bgfx: #fbf1c7; + + /* Tabs */ + --active-tab-background-color: #f9f5d7; + --active-tab-text-color: #282828; + --inactive-tab-background-color: #fbf1c7; + --inactive-tab-text-color: #7c6f64; + --tab-close-button-hover-background: #d5c4a1; + --tab-close-button-hover-color: #9d0006; + + /* Right pane */ + --right-pane-background-color: #ebdbb2; + --right-pane-heading-color: #3c3836; + --right-pane-item-hover-background: #d5c4a1; + --right-pane-item-hover-color: #282828; + + /* Bottom panel */ + --bottom-panel-background-color: #ebdbb2; + --bottom-panel-title-bar-background-color: #fbf1c7; + + /* Status bar */ + --status-bar-border-color: #d5c4a1; + + /* Code / inline code */ + --inline-code-background-color: #ebdbb2; + --inline-code-border-color: #d5c4a1; + --code-block-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); + + /* Note icons */ + --note-icon-background-color: #ebdbb2; + --note-icon-color: #3c3836; + + /* Floating buttons */ + --floating-button-background-color: #ebdbb2; + --floating-button-color: #3c3836; + --floating-button-hover-background: #d5c4a1; + --floating-button-hover-color: #282828; + + /* Tooltips */ + --tooltip-background-color: #ebdbb2; + --tooltip-foreground-color: #3c3836; + + /* Scrollbar */ + --scrollbar-thumb-color: #d5c4a1; + --scrollbar-thumb-hover-color: #bdae93; + --scrollbar-background-color: #ebdbb2; + + /* Checkboxes / tasks */ + --task-checkbox-done-color: #79740e; + --task-checkbox-glyph-color: #282828; + --task-checkbox-without-state-background: #d5c4a1; + --task-checkbox-with-state-background: #83a598; + + /* Mermaid */ + --mermaid-theme: light; + + /* Buttons */ + --cmd-button-background-color: #d5c4a1a0; + --cmd-button-text-color: #3c3836; + --cmd-button-hover-background-color: #bdae93a0; + --cmd-button-hover-text-color: #282828; + --icon-button-hover-background: #d5c4a1; + --icon-button-hover-color: #282828; + + /* Logs */ + --log-error-color: #9d0006; + --log-info-color: #076678; + --log-slow-color: #b57614; + --log-success-color: #79740e; + + /* Badges */ + --badge-background-color: #d5c4a1; + --badge-text-color: #3c3836; + + /* CKEditor editor dropdowns / panels (no yellow) */ + --ck-color-base-foreground: #d5c4a1; + --ck-color-base-background: #fbf1c7; + --ck-color-dialog-background: #fbf1c7; + --ck-color-dropdown-panel-background: #fbf1c7; + --ck-color-dropdown-panel-border: #d5c4a1; + --ck-color-list-background: #fbf1c7; + --ck-color-list-button-hover-background: #d5c4a1; + --ck-color-list-button-on-background: #d5c4a1; + --ck-color-button-default-background: #ebdbb2; + --ck-color-button-default-hover-background: #d5c4a1; + --ck-color-button-on-background: #d5c4a1; + --ck-color-button-on-hover-background: #bdae93; + --ck-color-button-action-background: #d5c4a1; + --ck-color-button-action-hover-background: #bdae93; + --ck-color-input-background: #fbf1c7; + --ck-editor-toolbar-button-on-background: #d5c4a1; + --ck-editor-toolbar-button-on-color: #282828; + --ck-editor-toolbar-dropdown-button-open-background: #ebdbb2; +} + +/* Menus & dropdowns are often rendered outside #trilium-app, so also set them globally. */ +:root { + --menu-text-color: #3c3836; + --menu-background-color: #fbf1c7; + --menu-background-color-no-backdrop: #fbf1c7; + --menu-item-icon-color: #7c6f64; + --menu-item-disabled-opacity: 0.5; + --menu-item-keyboard-shortcut-color: #7c6f6490; + --menu-item-arrow-color: #7c6f64a3; + --menu-item-delimiter-color: #d5c4a1; + --menu-item-group-header-color: #665c54; + --menu-section-background-color: #fbf1c7; + --menu-hover-item-background-color: #d5c4a1; + --menu-hover-item-text-color: #282828; + --hover-item-background-color: #d5c4a1; + --active-item-background-color: #d5c4a1; + --dropdown-border-color: #d5c4a1; + --dropdown-item-icon-destructive-color: #9d0006; + + /* CKEditor editor dropdowns are rendered outside #trilium-app, so set them globally (no yellow). */ + --ck-color-base-text: #3c3836; + --ck-color-text: #3c3836; + --ck-color-base-foreground: #d5c4a1; + --ck-color-base-background: #fbf1c7; + --ck-color-dialog-background: #fbf1c7; + --ck-color-dropdown-panel-background: #fbf1c7; + --ck-color-dropdown-panel-border: #d5c4a1; + --ck-color-list-background: #fbf1c7; + --ck-color-list-button-hover-background: #d5c4a1; + --ck-color-list-button-on-background: #d5c4a1; + --ck-color-list-button-on-text: #282828; + --ck-color-button-default-background: #ebdbb2; + --ck-color-button-default-hover-background: #d5c4a1; + --ck-color-button-on-background: #d5c4a1; + --ck-color-button-on-hover-background: #bdae93; + --ck-color-button-action-background: #d5c4a1; + --ck-color-button-action-hover-background: #bdae93; + --ck-color-input-background: #fbf1c7; + --ck-color-input-text: #3c3836; + --ck-color-panel-background: #fbf1c7; + --ck-color-toolbar-background: #ebdbb2; +} + +/* Force the note-tree context menu / dropdowns to a neutral, non-yellow background. */ +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: #fbf1c7 !important; + --menu-background-color-no-backdrop: #fbf1c7 !important; + --menu-section-background-color: #fbf1c7 !important; + background-color: #fbf1c7 !important; +} +body.desktop .dropdown-menu::before, +body.mobile .dropdown-menu::before { + background-color: #fbf1c7 !important; + backdrop-filter: none !important; +} +body.desktop .dropdown-menu .dropdown-item, +body.mobile .dropdown-menu .dropdown-item { + --custom-color: #3c3836 !important; + color: #3c3836; +} +body.desktop .dropdown-menu .dropdown-item:hover, +body.desktop .dropdown-menu .dropdown-item:focus, +body.desktop .dropdown-menu .dropdown-item.active { + background-color: #d5c4a1 !important; + color: #282828; +} + +/* ============ TREELINES (Vertical tree lines) ============ */ +/* Base connector lines — Gruvbox neutral */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:nth-of-type(2n) { + border-left: 2.5px solid rgba(168, 153, 132, 0.8); + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:nth-of-type(2n+1) { + border-left: 2.5px solid rgba(168, 153, 132, 0.5); + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR red */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-E64D4D) { + border-left: 2.5px solid #e64d4d80; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR orange */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-E6994D) { + border-left: 2.5px solid #e6994d80; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR yellow */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-E5E64D) { + border-left: 2.5px solid #e5e64d80; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR green (light) */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-99E64D) { + border-left: 2.5px solid #99e64d80; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR green */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-4DE64D) { + border-left: 2.5px solid #4de64d80; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR aqua/green */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-4DE699) { + border-left: 2.5px solid #4de69980; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR aqua/cyan */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-4DE5E6) { + border-left: 2.5px solid #4de5e680; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR blue */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-4D99E6) { + border-left: 2.5px solid #4d99e680; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR blue/purple */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-4D4DE6) { + border-left: 2.5px solid #4d4de680; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR purple */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-994DE6) { + border-left: 2.5px solid #994de680; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR pink/magenta */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-E64DB3) { + border-left: 2.5px solid #e64db380; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} + +/* ============ NOTE HEADER BOXES (h2-h6) ============ */ +/* Box background behind header text. h2 spans full editor width, h3-h6 hug the text block. Transparent, distinct colours. */ +.ck-content h2 { + background-color: rgba(7, 102, 120, 0.18); + border-bottom: 2px solid rgba(7, 102, 120, 0.45); + border-radius: 4px; + padding: 0.25em 0.4em; +} +.ck-content h3 { + background-color: rgba(121, 116, 14, 0.10); + border-bottom: 2px solid rgba(121, 116, 14, 0.35); + border-radius: 4px; + padding: 0.2em 0.35em; +} +.ck-content h4 { + background-color: rgba(181, 118, 20, 0.10); + border-bottom: 2px solid rgba(181, 118, 20, 0.35); + border-radius: 4px; + padding: 0.2em 0.35em; +} +.ck-content h5 { + background-color: rgba(143, 63, 113, 0.10); + border-bottom: 2px solid rgba(143, 63, 113, 0.35); + border-radius: 4px; + padding: 0.2em 0.35em; +} +.ck-content h6 { + background-color: rgba(175, 58, 3, 0.10); + border-bottom: 2px solid rgba(175, 58, 3, 0.35); + 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(7, 102, 120, 0.20) !important; + color: #282828; + font-weight: 700; + border-bottom: 2px solid rgba(7, 102, 120, 0.45); +} +.ck-content table tbody td:first-child { + background-color: rgba(0, 0, 0, 0.05) !important; + color: #3c3836; + 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.04) !important; +} +.ck-content table tbody tr:hover td { + background-color: rgba(254, 128, 25, 0.08) !important; +} +.ck-content table .col-hover { + background-color: rgba(254, 128, 25, 0.08) !important; +} +.ck-content table tbody tr:hover td.col-hover, +.ck-content table thead th.col-hover { + background-color: rgba(254, 128, 25, 0.15) !important; +} diff --git a/harbor-dark.css b/harbor-dark.css new file mode 100644 index 0000000..fb0a20e --- /dev/null +++ b/harbor-dark.css @@ -0,0 +1,413 @@ +/* + * Harbordark Theme for TriliumNext + * + * Derived from the current default (next) theme via #appThemeBase=next-dark. + * Fixed dark variant (no automatic light/dark switching for user themes). + * + * Harbordark palette (from HANCORE-linux/omarchy-harbordark-theme, MIT): + * bg #1b1b1b / #232323 / #2e2e2e / #141414 fg #efebdc + * accents: red #F44336 coral #e75a50 sage #a99b7a + * gold #E1CE98 rose #e58980 slate #77838a accent #e75a50 + */ + +#trilium-app { + --theme-style: dark; + + /* Main surfaces */ + --main-background-color: #1b1b1b; + --main-text-color: #efebdc; + --main-border-color: #2e2e2e; + --subtle-border-color: #232323; + --dropdown-border-color: #2e2e2e; + --dropdown-shadow-opacity: 0.6; + + /* Accented / highlight */ + --accented-background-color: #232323; + --more-accented-background-color: #2e2e2e; + + /* Cards & dialogs */ + --card-background-color: #232323; + --card-background-hover-color: #2e2e2e; + --card-border-color: #2e2e2e; + --tool-dialog-background-color: #141414; + --modal-background-color: #141414; + --modal-border-color: #2e2e2e; + + /* Text & muted */ + --muted-text-color: #a99b7a; + --menu-text-color: #efebdc; + --menu-background-color: #232323e6; + --menu-background-color-no-backdrop: #141414; + + /* Links */ + --link-color: #e58980; + --link-hover-color: #E1CE98; + --link-hover-background: #E1CE9824; + + /* Inputs */ + --input-background-color: #2e2e2e60; + --input-text-color: #efebdc; + --input-placeholder-color: #a99b7a80; + --input-hover-background: #3f3f3f60; + --input-focus-outline-color: #e58980; + --input-focus-background: #3f3f3f50; + --input-focus-color: #efebdc; + --input-action-button-color: #a99b7a; + --input-action-button-hover: #efebdc; + + /* Selection */ + --selection-background-color: #e75a50; + --hover-item-text-color: #efebdc; + --hover-item-background-color: #232323; + --active-item-text-color: #efebdc; + --active-item-background-color: #2e2e2e; + + /* Left pane / launcher */ + --left-pane-background-color: #141414; + --left-pane-text-color: #a99b7a; + --left-pane-icon-color: #817f68; + --left-pane-item-hover-background: #232323; + --left-pane-item-selected-background: #2e2e2e; + --left-pane-item-selected-color: #efebdc; + --launcher-pane-background-color: #141414; + --launcher-pane-text-color: #a99b7a; + --launcher-pane-vert-background-color: #141414; + --launcher-pane-vert-text-color: #a99b7a; + --launcher-pane-horiz-background-color: #141414; + --launcher-pane-horiz-text-color: #a99b7a; + + /* Tabs & breadcrumb / window backgrounds */ + --window-background-color-bgfx: #141414; + --root-background: #141414; + --tab-background-color: #141414; + --note-split-background-color: #1b1b1b; + --center-pane-background-color-bgfx: #1b1b1b; + --launcher-pane-horiz-background-color-bgfx: #141414; + --center-pane-horiz-layout-background-color-bgfx: #1b1b1b; + --center-pane-vert-layout-background-color-bgfx: #1b1b1b; + + /* Tabs */ + --active-tab-background-color: #141414; + --active-tab-text-color: #efebdc; + --inactive-tab-background-color: #1b1b1b; + --inactive-tab-text-color: #a99b7a; + --tab-close-button-hover-background: #232323; + --tab-close-button-hover-color: #F44336; + + /* Right pane */ + --right-pane-background-color: #141414; + --right-pane-heading-color: #efebdc; + --right-pane-item-hover-background: #232323; + --right-pane-item-hover-color: #efebdc; + + /* Bottom panel */ + --bottom-panel-background-color: #141414; + --bottom-panel-title-bar-background-color: #1b1b1b; + + /* Status bar */ + --status-bar-border-color: #2e2e2e; + + /* Code / inline code */ + --inline-code-background-color: #232323; + --inline-code-border-color: #2e2e2e; + --code-block-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); + + /* Note icons */ + --note-icon-background-color: #232323; + --note-icon-color: #efebdc; + + /* Floating buttons */ + --floating-button-background-color: #232323; + --floating-button-color: #efebdc; + --floating-button-hover-background: #2e2e2e; + --floating-button-hover-color: #efebdc; + + /* Tooltips */ + --tooltip-background-color: #232323; + --tooltip-foreground-color: #efebdc; + + /* Scrollbar */ + --scrollbar-thumb-color: #2e2e2e; + --scrollbar-thumb-hover-color: #3f3f3f; + --scrollbar-background-color: #141414; + + /* Checkboxes / tasks */ + --task-checkbox-done-color: #a99b7a; + --task-checkbox-glyph-color: #efebdc; + --task-checkbox-without-state-background: #2e2e2e; + --task-checkbox-with-state-background: #e75a50; + + /* Mermaid */ + --mermaid-theme: dark; + + /* Buttons */ + --cmd-button-background-color: #2e2e2ea0; + --cmd-button-text-color: #efebdc; + --cmd-button-hover-background-color: #3f3f3fa0; + --cmd-button-hover-text-color: #efebdc; + --icon-button-hover-background: #232323; + --icon-button-hover-color: #efebdc; + + /* Logs */ + --log-error-color: #F44336; + --log-info-color: #e58980; + --log-slow-color: #E1CE98; + --log-success-color: #a99b7a; + + /* Badges */ + --badge-background-color: #2e2e2e; + --badge-text-color: #efebdc; + + /* CKEditor editor dropdowns / panels (no yellow) */ + --ck-color-base-foreground: #232323; + --ck-color-base-background: #1b1b1b; + --ck-color-dialog-background: #1b1b1b; + --ck-color-dropdown-panel-background: #232323; + --ck-color-dropdown-panel-border: #2e2e2e; + --ck-color-list-background: #232323; + --ck-color-list-button-hover-background: #2e2e2e; + --ck-color-list-button-on-background: #2e2e2e; + --ck-color-button-default-background: #232323; + --ck-color-button-default-hover-background: #2e2e2e; + --ck-color-button-on-background: #2e2e2e; + --ck-color-button-on-hover-background: #3f3f3f; + --ck-color-button-action-background: #2e2e2e; + --ck-color-button-action-hover-background: #3f3f3f; + --ck-color-input-background: #1b1b1b; + --ck-editor-toolbar-button-on-background: #2e2e2e; + --ck-editor-toolbar-button-on-color: #efebdc; + --ck-editor-toolbar-dropdown-button-open-background: #232323; +} + +/* Menus & dropdowns are often rendered outside #trilium-app, so also set them globally. */ +:root { + --menu-text-color: #efebdc; + --menu-background-color: #1b1b1b; + --menu-background-color-no-backdrop: #1b1b1b; + --menu-item-icon-color: #a99b7a; + --menu-item-disabled-opacity: 0.5; + --menu-item-keyboard-shortcut-color: #a99b7a90; + --menu-item-arrow-color: #a99b7aa3; + --menu-item-delimiter-color: #232323; + --menu-item-group-header-color: #a99b7a; + --menu-section-background-color: #1b1b1b; + --menu-hover-item-background-color: #232323; + --menu-hover-item-text-color: #efebdc; + --hover-item-background-color: #232323; + --active-item-background-color: #2e2e2e; + --dropdown-border-color: #232323; + --dropdown-item-icon-destructive-color: #F44336; + + /* CKEditor editor dropdowns are rendered outside #trilium-app, so set them globally (no yellow). */ + --ck-color-base-text: #efebdc; + --ck-color-text: #efebdc; + --ck-color-base-foreground: #232323; + --ck-color-base-background: #1b1b1b; + --ck-color-dialog-background: #1b1b1b; + --ck-color-dropdown-panel-background: #232323; + --ck-color-dropdown-panel-border: #2e2e2e; + --ck-color-list-background: #232323; + --ck-color-list-button-hover-background: #2e2e2e; + --ck-color-list-button-on-background: #2e2e2e; + --ck-color-list-button-on-text: #efebdc; + --ck-color-button-default-background: #232323; + --ck-color-button-default-hover-background: #2e2e2e; + --ck-color-button-on-background: #2e2e2e; + --ck-color-button-on-hover-background: #3f3f3f; + --ck-color-button-action-background: #2e2e2e; + --ck-color-button-action-hover-background: #3f3f3f; + --ck-color-input-background: #1b1b1b; + --ck-color-input-text: #efebdc; + --ck-color-panel-background: #232323; + --ck-color-toolbar-background: #232323; +} + +/* Force the note-tree context menu / dropdowns to the Harbordark background. */ +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: #1b1b1b !important; + --menu-background-color-no-backdrop: #1b1b1b !important; + --menu-section-background-color: #1b1b1b !important; + background-color: #1b1b1b !important; +} +body.desktop .dropdown-menu::before, +body.mobile .dropdown-menu::before { + background-color: #1b1b1b !important; + backdrop-filter: none !important; +} +body.desktop .dropdown-menu .dropdown-item, +body.mobile .dropdown-menu .dropdown-item { + --custom-color: #efebdc !important; + color: #efebdc; +} +body.desktop .dropdown-menu .dropdown-item:hover, +body.desktop .dropdown-menu .dropdown-item:focus, +body.desktop .dropdown-menu .dropdown-item.active { + background-color: #232323 !important; + color: #efebdc; +} + +/* ============ TREELINES (Vertical tree lines) ============ */ +/* Base connector lines — Harbordark neutral */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:nth-of-type(2n) { + border-left: 2.5px solid rgba(169, 155, 122, 0.8); + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:nth-of-type(2n+1) { + border-left: 2.5px solid rgba(169, 155, 122, 0.5); + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR red */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-E64D4D) { + border-left: 2.5px solid #F4433680; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR orange */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-E6994D) { + border-left: 2.5px solid #dc816480; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR yellow */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-E5E64D) { + border-left: 2.5px solid #E1CE9880; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR green (light) */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-99E64D) { + border-left: 2.5px solid #a99b7a80; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR green */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-4DE64D) { + border-left: 2.5px solid #a99b7a80; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR aqua/green */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-4DE699) { + border-left: 2.5px solid #77838a80; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR aqua/cyan */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-4DE5E6) { + border-left: 2.5px solid #77838a80; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR blue */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-4D99E6) { + border-left: 2.5px solid #77838a80; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR blue/purple */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-4D4DE6) { + border-left: 2.5px solid #e5898080; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR purple */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-994DE6) { + border-left: 2.5px solid #e5898080; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR pink/magenta */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-E64DB3) { + border-left: 2.5px solid #e5898080; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} + +/* ============ NOTE HEADER BOXES (h2-h6) ============ */ +/* Box background behind header text. h2 spans full editor width, h3-h6 hug the text block. Transparent, distinct colours. */ +.ck-content h2 { + background-color: rgba(231, 90, 80, 0.30); + border-bottom: 2px solid rgba(231, 90, 80, 0.6); + border-radius: 4px; + padding: 0.25em 0.4em; +} +.ck-content h3 { + background-color: rgba(169, 155, 122, 0.25); + border-bottom: 2px solid rgba(169, 155, 122, 0.6); + border-radius: 4px; + padding: 0.2em 0.35em; +} +.ck-content h4 { + background-color: rgba(225, 206, 152, 0.22); + border-bottom: 2px solid rgba(225, 206, 152, 0.55); + border-radius: 4px; + padding: 0.2em 0.35em; +} +.ck-content h5 { + background-color: rgba(119, 131, 138, 0.25); + border-bottom: 2px solid rgba(119, 131, 138, 0.6); + border-radius: 4px; + padding: 0.2em 0.35em; +} +.ck-content h6 { + background-color: rgba(229, 137, 128, 0.25); + border-bottom: 2px solid rgba(229, 137, 128, 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(231, 90, 80, 0.20) !important; + color: #efebdc; + font-weight: 700; + border-bottom: 2px solid rgba(231, 90, 80, 0.45); +} +.ck-content table tbody td:first-child { + background-color: rgba(255, 255, 255, 0.05) !important; + color: #efebdc; + 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 { + background-color: rgba(94, 129, 172, 0.10) !important; +} +.ck-content table .col-hover { + 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 { + background-color: rgba(94, 129, 172, 0.18) !important; +} \ No newline at end of file diff --git a/harbor-light.css b/harbor-light.css new file mode 100644 index 0000000..a822731 --- /dev/null +++ b/harbor-light.css @@ -0,0 +1,413 @@ +/* + * Harbor Light Theme for TriliumNext + * + * Derived from the current default (next) theme via #appThemeBase=next-light. + * Fixed light variant (no automatic light/dark switching for user themes). + * + * Harbor light palette (from HANCORE-linux/omarchy-harbor-theme, MIT): + * bg #dfe4c4 / #d0d6b4 / #c3c9a6 / #e8ecd0 fg #1c2d28 + * accents: red #b14752 green #556753 clay #dc8164 + * blue #4c6c94 purple #8a5b81 cyan #3d727d accent #5e81ac + */ + +#trilium-app { + --theme-style: light; + + /* Main surfaces */ + --main-background-color: #dfe4c4; + --main-text-color: #1c2d28; + --main-border-color: #c3c9a6; + --subtle-border-color: #d0d6b4; + --dropdown-border-color: #c3c9a6; + --dropdown-shadow-opacity: 0.5; + + /* Accented / highlight */ + --accented-background-color: #d0d6b4; + --more-accented-background-color: #c3c9a6; + + /* Cards & dialogs */ + --card-background-color: #d0d6b4; + --card-background-hover-color: #c3c9a6; + --card-border-color: #c3c9a6; + --tool-dialog-background-color: #e8ecd0; + --modal-background-color: #e8ecd0; + --modal-border-color: #c3c9a6; + + /* Text & muted */ + --muted-text-color: #556753; + --menu-text-color: #1c2d28; + --menu-background-color: #d0d6b4; + --menu-background-color-no-backdrop: #d0d6b4; + + /* Links */ + --link-color: #4c6c94; + --link-hover-color: #3d727d; + --link-hover-background: #3d727d24; + + /* Inputs */ + --input-background-color: #c3c9a660; + --input-text-color: #1c2d28; + --input-placeholder-color: #55675380; + --input-hover-background: #b3ba9660; + --input-focus-outline-color: #4c6c94; + --input-focus-background: #c3c9a650; + --input-focus-color: #1c2d28; + --input-action-button-color: #7d8794; + --input-action-button-hover: #1c2d28; + + /* Selection */ + --selection-background-color: #5e81ac; + --hover-item-text-color: #1c2d28; + --hover-item-background-color: #d0d6b4; + --active-item-text-color: #1c2d28; + --active-item-background-color: #c3c9a6; + + /* Left pane / launcher */ + --left-pane-background-color: #d0d6b4; + --left-pane-text-color: #556753; + --left-pane-icon-color: #4a5b52; + --left-pane-item-hover-background: #c3c9a6; + --left-pane-item-selected-background: #c3c9a6; + --left-pane-item-selected-color: #1c2d28; + --launcher-pane-background-color: #d0d6b4; + --launcher-pane-text-color: #556753; + --launcher-pane-vert-background-color: #d0d6b4; + --launcher-pane-vert-text-color: #556753; + --launcher-pane-horiz-background-color: #d0d6b4; + --launcher-pane-horiz-text-color: #556753; + + /* Tabs & breadcrumb / window backgrounds */ + --window-background-color-bgfx: #d0d6b4; + --root-background: #d0d6b4; + --tab-background-color: #d0d6b4; + --note-split-background-color: #dfe4c4; + --center-pane-background-color-bgfx: #dfe4c4; + --launcher-pane-horiz-background-color-bgfx: #d0d6b4; + --center-pane-horiz-layout-background-color-bgfx: #dfe4c4; + --center-pane-vert-layout-background-color-bgfx: #dfe4c4; + + /* Tabs */ + --active-tab-background-color: #e8ecd0; + --active-tab-text-color: #1c2d28; + --inactive-tab-background-color: #dfe4c4; + --inactive-tab-text-color: #556753; + --tab-close-button-hover-background: #c3c9a6; + --tab-close-button-hover-color: #b14752; + + /* Right pane */ + --right-pane-background-color: #d0d6b4; + --right-pane-heading-color: #1c2d28; + --right-pane-item-hover-background: #c3c9a6; + --right-pane-item-hover-color: #1c2d28; + + /* Bottom panel */ + --bottom-panel-background-color: #d0d6b4; + --bottom-panel-title-bar-background-color: #dfe4c4; + + /* Status bar */ + --status-bar-border-color: #c3c9a6; + + /* Code / inline code */ + --inline-code-background-color: #d0d6b4; + --inline-code-border-color: #c3c9a6; + --code-block-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); + + /* Note icons */ + --note-icon-background-color: #d0d6b4; + --note-icon-color: #1c2d28; + + /* Floating buttons */ + --floating-button-background-color: #d0d6b4; + --floating-button-color: #1c2d28; + --floating-button-hover-background: #c3c9a6; + --floating-button-hover-color: #1c2d28; + + /* Tooltips */ + --tooltip-background-color: #d0d6b4; + --tooltip-foreground-color: #1c2d28; + + /* Scrollbar */ + --scrollbar-thumb-color: #c3c9a6; + --scrollbar-thumb-hover-color: #b3ba96; + --scrollbar-background-color: #d0d6b4; + + /* Checkboxes / tasks */ + --task-checkbox-done-color: #556753; + --task-checkbox-glyph-color: #1c2d28; + --task-checkbox-without-state-background: #c3c9a6; + --task-checkbox-with-state-background: #5e81ac; + + /* Mermaid */ + --mermaid-theme: light; + + /* Buttons */ + --cmd-button-background-color: #c3c9a6a0; + --cmd-button-text-color: #1c2d28; + --cmd-button-hover-background-color: #b3ba96a0; + --cmd-button-hover-text-color: #1c2d28; + --icon-button-hover-background: #c3c9a6; + --icon-button-hover-color: #1c2d28; + + /* Logs */ + --log-error-color: #b14752; + --log-info-color: #4c6c94; + --log-slow-color: #dc8164; + --log-success-color: #556753; + + /* Badges */ + --badge-background-color: #c3c9a6; + --badge-text-color: #1c2d28; + + /* CKEditor editor dropdowns / panels (no yellow) */ + --ck-color-base-foreground: #c3c9a6; + --ck-color-base-background: #dfe4c4; + --ck-color-dialog-background: #dfe4c4; + --ck-color-dropdown-panel-background: #dfe4c4; + --ck-color-dropdown-panel-border: #c3c9a6; + --ck-color-list-background: #dfe4c4; + --ck-color-list-button-hover-background: #c3c9a6; + --ck-color-list-button-on-background: #c3c9a6; + --ck-color-button-default-background: #d0d6b4; + --ck-color-button-default-hover-background: #c3c9a6; + --ck-color-button-on-background: #c3c9a6; + --ck-color-button-on-hover-background: #b3ba96; + --ck-color-button-action-background: #c3c9a6; + --ck-color-button-action-hover-background: #b3ba96; + --ck-color-input-background: #dfe4c4; + --ck-editor-toolbar-button-on-background: #c3c9a6; + --ck-editor-toolbar-button-on-color: #1c2d28; + --ck-editor-toolbar-dropdown-button-open-background: #d0d6b4; +} + +/* Menus & dropdowns are often rendered outside #trilium-app, so also set them globally. */ +:root { + --menu-text-color: #1c2d28; + --menu-background-color: #dfe4c4; + --menu-background-color-no-backdrop: #dfe4c4; + --menu-item-icon-color: #7d8794; + --menu-item-disabled-opacity: 0.5; + --menu-item-keyboard-shortcut-color: #7d879490; + --menu-item-arrow-color: #7d8794a3; + --menu-item-delimiter-color: #c3c9a6; + --menu-item-group-header-color: #4a5b52; + --menu-section-background-color: #dfe4c4; + --menu-hover-item-background-color: #c3c9a6; + --menu-hover-item-text-color: #1c2d28; + --hover-item-background-color: #c3c9a6; + --active-item-background-color: #c3c9a6; + --dropdown-border-color: #c3c9a6; + --dropdown-item-icon-destructive-color: #b14752; + + /* CKEditor editor dropdowns are rendered outside #trilium-app, so set them globally (no yellow). */ + --ck-color-base-text: #1c2d28; + --ck-color-text: #1c2d28; + --ck-color-base-foreground: #c3c9a6; + --ck-color-base-background: #dfe4c4; + --ck-color-dialog-background: #dfe4c4; + --ck-color-dropdown-panel-background: #dfe4c4; + --ck-color-dropdown-panel-border: #c3c9a6; + --ck-color-list-background: #dfe4c4; + --ck-color-list-button-hover-background: #c3c9a6; + --ck-color-list-button-on-background: #c3c9a6; + --ck-color-list-button-on-text: #1c2d28; + --ck-color-button-default-background: #d0d6b4; + --ck-color-button-default-hover-background: #c3c9a6; + --ck-color-button-on-background: #c3c9a6; + --ck-color-button-on-hover-background: #b3ba96; + --ck-color-button-action-background: #c3c9a6; + --ck-color-button-action-hover-background: #b3ba96; + --ck-color-input-background: #dfe4c4; + --ck-color-input-text: #1c2d28; + --ck-color-panel-background: #dfe4c4; + --ck-color-toolbar-background: #d0d6b4; +} + +/* Force the note-tree context menu / dropdowns to a neutral, non-yellow background. */ +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: #dfe4c4 !important; + --menu-background-color-no-backdrop: #dfe4c4 !important; + --menu-section-background-color: #dfe4c4 !important; + background-color: #dfe4c4 !important; +} +body.desktop .dropdown-menu::before, +body.mobile .dropdown-menu::before { + background-color: #dfe4c4 !important; + backdrop-filter: none !important; +} +body.desktop .dropdown-menu .dropdown-item, +body.mobile .dropdown-menu .dropdown-item { + --custom-color: #1c2d28 !important; + color: #1c2d28; +} +body.desktop .dropdown-menu .dropdown-item:hover, +body.desktop .dropdown-menu .dropdown-item:focus, +body.desktop .dropdown-menu .dropdown-item.active { + background-color: #c3c9a6 !important; + color: #1c2d28; +} + +/* ============ TREELINES (Vertical tree lines) ============ */ +/* Base connector lines — Harbor neutral */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:nth-of-type(2n) { + border-left: 2.5px solid rgba(85, 103, 83, 0.8); + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:nth-of-type(2n+1) { + border-left: 2.5px solid rgba(85, 103, 83, 0.5); + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR red */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-E64D4D) { + border-left: 2.5px solid #b1475280; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR orange */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-E6994D) { + border-left: 2.5px solid #dc816480; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR yellow */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-E5E64D) { + border-left: 2.5px solid #d8c36e80; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR green (light) */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-99E64D) { + border-left: 2.5px solid #55675380; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR green */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-4DE64D) { + border-left: 2.5px solid #55675380; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR aqua/green */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-4DE699) { + border-left: 2.5px solid #3d727d80; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR aqua/cyan */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-4DE5E6) { + border-left: 2.5px solid #3d727d80; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR blue */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-4D99E6) { + border-left: 2.5px solid #4c6c9480; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR blue/purple */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-4D4DE6) { + border-left: 2.5px solid #5e81ac80; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR purple */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-994DE6) { + border-left: 2.5px solid #8a5b8180; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} +/* COLOR pink/magenta */ +div.tree li.fancytree-lastsib ul li[aria-expanded="true"]:has(> .color-E64DB3) { + border-left: 2.5px solid #a95f8f80; + border-top-left-radius: 10px !important; + border-bottom-left-radius: 10px !important; +} + +/* ============ NOTE HEADER BOXES (h2-h6) ============ */ +/* Box background behind header text. h2 spans full editor width, h3-h6 hug the text block. Transparent, distinct colours. */ +.ck-content h2 { + background-color: rgba(94, 129, 172, 0.18); + border-bottom: 2px solid rgba(94, 129, 172, 0.45); + border-radius: 4px; + padding: 0.25em 0.4em; +} +.ck-content h3 { + background-color: rgba(85, 103, 83, 0.14); + border-bottom: 2px solid rgba(85, 103, 83, 0.38); + border-radius: 4px; + padding: 0.2em 0.35em; +} +.ck-content h4 { + background-color: rgba(220, 129, 100, 0.14); + border-bottom: 2px solid rgba(220, 129, 100, 0.38); + border-radius: 4px; + padding: 0.2em 0.35em; +} +.ck-content h5 { + background-color: rgba(138, 91, 129, 0.12); + border-bottom: 2px solid rgba(138, 91, 129, 0.35); + border-radius: 4px; + padding: 0.2em 0.35em; +} +.ck-content h6 { + background-color: rgba(61, 114, 125, 0.12); + border-bottom: 2px solid rgba(61, 114, 125, 0.35); + 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(94, 129, 172, 0.16) !important; + color: #1c2d28; + font-weight: 700; + border-bottom: 2px solid rgba(94, 129, 172, 0.40); +} +.ck-content table tbody td:first-child { + background-color: rgba(0, 0, 0, 0.05) !important; + color: #1c2d28; + 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.04) !important; +} +.ck-content table tbody tr:hover td { + background-color: rgba(94, 129, 172, 0.08) !important; +} +.ck-content table .col-hover { + background-color: rgba(94, 129, 172, 0.08) !important; +} +.ck-content table tbody tr:hover td.col-hover, +.ck-content table thead th.col-hover { + background-color: rgba(94, 129, 172, 0.15) !important; +} \ No newline at end of file