Add Gruvbox, Harbor and Coffee themes for TriliumNext (dark + light)
This commit is contained in:
Richard Zink
@@ -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.
|
||||
+413
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
+413
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
Reference in New Issue
Block a user