Add Solarized and Tokyo Night themes (dark + light) and update README
This commit is contained in:
Richard Zink
@@ -1,6 +1,6 @@
|
||||
# Trilium Themes
|
||||
|
||||
Gruvbox, Harbor and Coffee themes for [TriliumNext](https://github.com/TriliumNext/Trilium) –
|
||||
Gruvbox, Harbor, Coffee, Solarized and Tokyo Night themes for [TriliumNext](https://github.com/TriliumNext/Trilium) –
|
||||
each available in a dark and a light variant. The themes are plain `text/css` files that override
|
||||
Trilium's `--*` variables on `#trilium-app` and the global menus.
|
||||
|
||||
@@ -9,6 +9,8 @@ Trilium's `--*` variables on `#trilium-app` and the global menus.
|
||||
| **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) |
|
||||
| **Solarized** | `solarized-dark.css` | `solarized-light.css` | [Solarized by Ethan Schoonover](https://ethanschoonover.com/solarized/) (MIT) |
|
||||
| **Tokyo Night** | `tokyonight-dark.css` | `tokyonight-light.css` | [tokyonight.nvim](https://github.com/folke/tokyonight.nvim) (Apache-2.0) |
|
||||
|
||||
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
|
||||
@@ -21,6 +23,8 @@ auto-switch with the system preference. Each theme is derived from Trilium's def
|
||||
| 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` |
|
||||
| Solarized | bg `#002b36` / fg `#839496` · blue `#268bd2` cyan `#2aa198` | bg `#fdf6e3` / fg `#657b83` · blue `#268bd2` |
|
||||
| Tokyo Night | bg `#24283b` / fg `#c0caf5` · blue `#7aa2f7` magenta `#bb9af7` | bg `#e1e2e7` / fg `#3760bf` · blue `#2e7de9` red `#f52a65` |
|
||||
|
||||
## Install in Trilium
|
||||
|
||||
@@ -56,3 +60,5 @@ comment in each theme file):
|
||||
- **Gruvbox** – [morhetz/gruvbox](https://github.com/morhetz/gruvbox)
|
||||
- **Harbor / Harbordark** – [HANCORE-linux/omarchy-harbor-theme](https://github.com/HANCORE-linux/omarchy-harbordark-theme) and [omarchy-harbordark-theme](https://github.com/HANCORE-linux/omarchy-harbordark-theme)
|
||||
- **Coffee / Coffee Latte** – [megabyte0x/omarchy-coffee-theme](https://github.com/megabyte0x/omarchy-coffee-theme) and [omarchy-coffee-latte-theme](https://github.com/megabyte0x/omarchy-coffee-latte-theme)
|
||||
- **Solarized** – [ethanschoonover.com/solarized](https://ethanschoonover.com/solarized/) (MIT)
|
||||
- **Tokyo Night / Day** – [folke/tokyonight.nvim](https://github.com/folke/tokyonight.nvim) (Apache-2.0)
|
||||
@@ -0,0 +1,409 @@
|
||||
/*
|
||||
* Solarized Theme for TriliumNext
|
||||
*
|
||||
* Fixed dark variant (no automatic light/dark switching).
|
||||
* Palette: Solarized (Ethan Schoonover, MIT)
|
||||
*/
|
||||
|
||||
|
||||
#trilium-app {
|
||||
--theme-style: dark;
|
||||
|
||||
/* Main surfaces */
|
||||
--main-background-color: #002b36;
|
||||
--main-text-color: #839496;
|
||||
--main-border-color: #073642;
|
||||
--subtle-border-color: #073642;
|
||||
--dropdown-border-color: #073642;
|
||||
--dropdown-shadow-opacity: 0.6;
|
||||
|
||||
/* Accented / highlight */
|
||||
--accented-background-color: #073642;
|
||||
--more-accented-background-color: #073642;
|
||||
|
||||
/* Cards & dialogs */
|
||||
--card-background-color: #073642;
|
||||
--card-background-hover-color: #073642;
|
||||
--card-border-color: #073642;
|
||||
--tool-dialog-background-color: #002b36;
|
||||
--modal-background-color: #002b36;
|
||||
--modal-border-color: #073642;
|
||||
|
||||
/* Text & muted */
|
||||
--muted-text-color: #859900;
|
||||
--menu-text-color: #839496;
|
||||
--menu-background-color: #073642e6;
|
||||
--menu-background-color-no-backdrop: #002b36;
|
||||
|
||||
/* Links */
|
||||
--link-color: #268bd2;
|
||||
--link-hover-color: #b58900;
|
||||
--link-hover-background: #b5890024;
|
||||
|
||||
/* Inputs */
|
||||
--input-background-color: #07364260;
|
||||
--input-text-color: #839496;
|
||||
--input-placeholder-color: #85990080;
|
||||
--input-hover-background: #07364260;
|
||||
--input-focus-outline-color: #268bd2;
|
||||
--input-focus-background: #07364250;
|
||||
--input-focus-color: #839496;
|
||||
--input-action-button-color: #859900;
|
||||
--input-action-button-hover: #839496;
|
||||
|
||||
/* Selection */
|
||||
--selection-background-color: #268bd2;
|
||||
--hover-item-text-color: #839496;
|
||||
--hover-item-background-color: #073642;
|
||||
--active-item-text-color: #839496;
|
||||
--active-item-background-color: #073642;
|
||||
|
||||
/* Left pane / launcher */
|
||||
--left-pane-background-color: #002b36;
|
||||
--left-pane-text-color: #859900;
|
||||
--left-pane-icon-color: #586e75;
|
||||
--left-pane-item-hover-background: #073642;
|
||||
--left-pane-item-selected-background: #073642;
|
||||
--left-pane-item-selected-color: #839496;
|
||||
--launcher-pane-background-color: #002b36;
|
||||
--launcher-pane-text-color: #859900;
|
||||
--launcher-pane-vert-background-color: #002b36;
|
||||
--launcher-pane-vert-text-color: #859900;
|
||||
--launcher-pane-horiz-background-color: #002b36;
|
||||
--launcher-pane-horiz-text-color: #859900;
|
||||
|
||||
/* Tabs & breadcrumb / window backgrounds */
|
||||
--window-background-color-bgfx: #002b36;
|
||||
--root-background: #002b36;
|
||||
--tab-background-color: #002b36;
|
||||
--note-split-background-color: #002b36;
|
||||
--center-pane-background-color-bgfx: #002b36;
|
||||
--launcher-pane-horiz-background-color-bgfx: #002b36;
|
||||
--center-pane-horiz-layout-background-color-bgfx: #002b36;
|
||||
--center-pane-vert-layout-background-color-bgfx: #002b36;
|
||||
|
||||
/* Tabs */
|
||||
--active-tab-background-color: #002b36;
|
||||
--active-tab-text-color: #839496;
|
||||
--inactive-tab-background-color: #002b36;
|
||||
--inactive-tab-text-color: #859900;
|
||||
--tab-close-button-hover-background: #073642;
|
||||
--tab-close-button-hover-color: #dc322f;
|
||||
|
||||
/* Right pane */
|
||||
--right-pane-background-color: #002b36;
|
||||
--right-pane-heading-color: #839496;
|
||||
--right-pane-item-hover-background: #073642;
|
||||
--right-pane-item-hover-color: #839496;
|
||||
|
||||
/* Bottom panel */
|
||||
--bottom-panel-background-color: #002b36;
|
||||
--bottom-panel-title-bar-background-color: #002b36;
|
||||
|
||||
/* Status bar */
|
||||
--status-bar-border-color: #073642;
|
||||
|
||||
/* Code / inline code */
|
||||
--inline-code-background-color: #073642;
|
||||
--inline-code-border-color: #073642;
|
||||
--code-block-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
|
||||
|
||||
/* Note icons */
|
||||
--note-icon-background-color: #073642;
|
||||
--note-icon-color: #839496;
|
||||
|
||||
/* Floating buttons */
|
||||
--floating-button-background-color: #073642;
|
||||
--floating-button-color: #839496;
|
||||
--floating-button-hover-background: #073642;
|
||||
--floating-button-hover-color: #839496;
|
||||
|
||||
/* Tooltips */
|
||||
--tooltip-background-color: #073642;
|
||||
--tooltip-foreground-color: #839496;
|
||||
|
||||
/* Scrollbar */
|
||||
--scrollbar-thumb-color: #073642;
|
||||
--scrollbar-thumb-hover-color: #073642;
|
||||
--scrollbar-background-color: #002b36;
|
||||
|
||||
/* Checkboxes / tasks */
|
||||
--task-checkbox-done-color: #859900;
|
||||
--task-checkbox-glyph-color: #839496;
|
||||
--task-checkbox-without-state-background: #073642;
|
||||
--task-checkbox-with-state-background: #268bd2;
|
||||
|
||||
/* Mermaid */
|
||||
--mermaid-theme: dark;
|
||||
|
||||
/* Buttons */
|
||||
--cmd-button-background-color: #073642a0;
|
||||
--cmd-button-text-color: #839496;
|
||||
--cmd-button-hover-background-color: #073642a0;
|
||||
--cmd-button-hover-text-color: #839496;
|
||||
--icon-button-hover-background: #073642;
|
||||
--icon-button-hover-color: #839496;
|
||||
|
||||
/* Logs */
|
||||
--log-error-color: #dc322f;
|
||||
--log-info-color: #268bd2;
|
||||
--log-slow-color: #b58900;
|
||||
--log-success-color: #859900;
|
||||
|
||||
/* Badges */
|
||||
--badge-background-color: #073642;
|
||||
--badge-text-color: #839496;
|
||||
|
||||
/* CKEditor editor dropdowns / panels (no yellow) */
|
||||
--ck-color-base-foreground: #073642;
|
||||
--ck-color-base-background: #002b36;
|
||||
--ck-color-dialog-background: #002b36;
|
||||
--ck-color-dropdown-panel-background: #073642;
|
||||
--ck-color-dropdown-panel-border: #073642;
|
||||
--ck-color-list-background: #073642;
|
||||
--ck-color-list-button-hover-background: #073642;
|
||||
--ck-color-list-button-on-background: #073642;
|
||||
--ck-color-button-default-background: #073642;
|
||||
--ck-color-button-default-hover-background: #073642;
|
||||
--ck-color-button-on-background: #073642;
|
||||
--ck-color-button-on-hover-background: #073642;
|
||||
--ck-color-button-action-background: #073642;
|
||||
--ck-color-button-action-hover-background: #073642;
|
||||
--ck-color-input-background: #002b36;
|
||||
--ck-editor-toolbar-button-on-background: #073642;
|
||||
--ck-editor-toolbar-button-on-color: #839496;
|
||||
--ck-editor-toolbar-dropdown-button-open-background: #073642;
|
||||
}
|
||||
|
||||
/* Menus & dropdowns are often rendered outside #trilium-app, so also set them globally. */
|
||||
:root {
|
||||
--menu-text-color: #839496;
|
||||
--menu-background-color: #002b36;
|
||||
--menu-background-color-no-backdrop: #002b36;
|
||||
--menu-item-icon-color: #859900;
|
||||
--menu-item-disabled-opacity: 0.5;
|
||||
--menu-item-keyboard-shortcut-color: #85990090;
|
||||
--menu-item-arrow-color: #859900a3;
|
||||
--menu-item-delimiter-color: #073642;
|
||||
--menu-item-group-header-color: #859900;
|
||||
--menu-section-background-color: #002b36;
|
||||
--menu-hover-item-background-color: #073642;
|
||||
--menu-hover-item-text-color: #839496;
|
||||
--hover-item-background-color: #073642;
|
||||
--active-item-background-color: #073642;
|
||||
--dropdown-border-color: #073642;
|
||||
--dropdown-item-icon-destructive-color: #dc322f;
|
||||
|
||||
/* CKEditor editor dropdowns are rendered outside #trilium-app, so set them globally (no yellow). */
|
||||
--ck-color-base-text: #839496;
|
||||
--ck-color-text: #839496;
|
||||
--ck-color-base-foreground: #073642;
|
||||
--ck-color-base-background: #002b36;
|
||||
--ck-color-dialog-background: #002b36;
|
||||
--ck-color-dropdown-panel-background: #073642;
|
||||
--ck-color-dropdown-panel-border: #073642;
|
||||
--ck-color-list-background: #073642;
|
||||
--ck-color-list-button-hover-background: #073642;
|
||||
--ck-color-list-button-on-background: #073642;
|
||||
--ck-color-list-button-on-text: #839496;
|
||||
--ck-color-button-default-background: #073642;
|
||||
--ck-color-button-default-hover-background: #073642;
|
||||
--ck-color-button-on-background: #073642;
|
||||
--ck-color-button-on-hover-background: #073642;
|
||||
--ck-color-button-action-background: #073642;
|
||||
--ck-color-button-action-hover-background: #073642;
|
||||
--ck-color-input-background: #002b36;
|
||||
--ck-color-input-text: #839496;
|
||||
--ck-color-panel-background: #073642;
|
||||
--ck-color-toolbar-background: #073642;
|
||||
}
|
||||
|
||||
/* 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: #002b36 !important;
|
||||
--menu-background-color-no-backdrop: #002b36 !important;
|
||||
--menu-section-background-color: #002b36 !important;
|
||||
background-color: #002b36 !important;
|
||||
}
|
||||
body.desktop .dropdown-menu::before,
|
||||
body.mobile .dropdown-menu::before {
|
||||
background-color: #002b36 !important;
|
||||
backdrop-filter: none !important;
|
||||
}
|
||||
body.desktop .dropdown-menu .dropdown-item,
|
||||
body.mobile .dropdown-menu .dropdown-item {
|
||||
--custom-color: #839496 !important;
|
||||
color: #839496;
|
||||
}
|
||||
body.desktop .dropdown-menu .dropdown-item:hover,
|
||||
body.desktop .dropdown-menu .dropdown-item:focus,
|
||||
body.desktop .dropdown-menu .dropdown-item.active {
|
||||
background-color: #073642 !important;
|
||||
color: #839496;
|
||||
}
|
||||
|
||||
/* ============ 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(133, 153, 0, 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(133, 153, 0, 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 #dc322f80;
|
||||
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 #b5890080;
|
||||
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 #85990080;
|
||||
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 #85990080;
|
||||
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 #83949680;
|
||||
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 #83949680;
|
||||
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 #83949680;
|
||||
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 #268bd280;
|
||||
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 #268bd280;
|
||||
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 #268bd280;
|
||||
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(38, 107, 210, 0.30);
|
||||
border-bottom: 2px solid rgba(38, 107, 210, 0.6);
|
||||
border-radius: 4px;
|
||||
padding: 0.25em 0.4em;
|
||||
}
|
||||
.ck-content h3 {
|
||||
background-color: rgba(133, 153, 0, 0.25);
|
||||
border-bottom: 2px solid rgba(133, 153, 0, 0.6);
|
||||
border-radius: 4px;
|
||||
padding: 0.2em 0.35em;
|
||||
}
|
||||
.ck-content h4 {
|
||||
background-color: rgba(181, 137, 0, 0.22);
|
||||
border-bottom: 2px solid rgba(181, 137, 0, 0.55);
|
||||
border-radius: 4px;
|
||||
padding: 0.2em 0.35em;
|
||||
}
|
||||
.ck-content h5 {
|
||||
background-color: rgba(131, 148, 150, 0.25);
|
||||
border-bottom: 2px solid rgba(131, 148, 150, 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(38, 107, 210, 0.20) !important;
|
||||
color: #839496;
|
||||
font-weight: 700;
|
||||
border-bottom: 2px solid rgba(38, 107, 210, 0.45);
|
||||
}
|
||||
.ck-content table tbody td:first-child {
|
||||
background-color: rgba(255, 255, 255, 0.05) !important;
|
||||
color: #839496;
|
||||
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(38, 107, 210, 0.10) !important;
|
||||
}
|
||||
.ck-content table .col-hover {
|
||||
background-color: rgba(38, 107, 210, 0.10) !important;
|
||||
}
|
||||
.ck-content table tbody tr:hover td.col-hover,
|
||||
.ck-content table thead th.col-hover {
|
||||
background-color: rgba(38, 107, 210, 0.18) !important;
|
||||
}
|
||||
@@ -0,0 +1,409 @@
|
||||
/*
|
||||
* Solarized Light Theme for TriliumNext
|
||||
*
|
||||
* Fixed light variant (no automatic light/dark switching).
|
||||
* Palette: Solarized (Ethan Schoonover, MIT)
|
||||
*/
|
||||
|
||||
|
||||
#trilium-app {
|
||||
--theme-style: light;
|
||||
|
||||
/* Main surfaces */
|
||||
--main-background-color: #fdf6e3;
|
||||
--main-text-color: #657b83;
|
||||
--main-border-color: #93a1a1;
|
||||
--subtle-border-color: #eee8d5;
|
||||
--dropdown-border-color: #93a1a1;
|
||||
--dropdown-shadow-opacity: 0.5;
|
||||
|
||||
/* Accented / highlight */
|
||||
--accented-background-color: #eee8d5;
|
||||
--more-accented-background-color: #93a1a1;
|
||||
|
||||
/* Cards & dialogs */
|
||||
--card-background-color: #eee8d5;
|
||||
--card-background-hover-color: #93a1a1;
|
||||
--card-border-color: #93a1a1;
|
||||
--tool-dialog-background-color: #eee8d5;
|
||||
--modal-background-color: #eee8d5;
|
||||
--modal-border-color: #93a1a1;
|
||||
|
||||
/* Text & muted */
|
||||
--muted-text-color: #586e75;
|
||||
--menu-text-color: #657b83;
|
||||
--menu-background-color: #eee8d5;
|
||||
--menu-background-color-no-backdrop: #eee8d5;
|
||||
|
||||
/* Links */
|
||||
--link-color: #268bd2;
|
||||
--link-hover-color: #2aa198;
|
||||
--link-hover-background: #2aa19824;
|
||||
|
||||
/* Inputs */
|
||||
--input-background-color: #93a1a160;
|
||||
--input-text-color: #657b83;
|
||||
--input-placeholder-color: #586e7580;
|
||||
--input-hover-background: #93a1a160;
|
||||
--input-focus-outline-color: #268bd2;
|
||||
--input-focus-background: #93a1a150;
|
||||
--input-focus-color: #657b83;
|
||||
--input-action-button-color: #93a1a1;
|
||||
--input-action-button-hover: #657b83;
|
||||
|
||||
/* Selection */
|
||||
--selection-background-color: #268bd2;
|
||||
--hover-item-text-color: #657b83;
|
||||
--hover-item-background-color: #eee8d5;
|
||||
--active-item-text-color: #657b83;
|
||||
--active-item-background-color: #93a1a1;
|
||||
|
||||
/* Left pane / launcher */
|
||||
--left-pane-background-color: #eee8d5;
|
||||
--left-pane-text-color: #586e75;
|
||||
--left-pane-icon-color: #586e75;
|
||||
--left-pane-item-hover-background: #93a1a1;
|
||||
--left-pane-item-selected-background: #93a1a1;
|
||||
--left-pane-item-selected-color: #657b83;
|
||||
--launcher-pane-background-color: #eee8d5;
|
||||
--launcher-pane-text-color: #586e75;
|
||||
--launcher-pane-vert-background-color: #eee8d5;
|
||||
--launcher-pane-vert-text-color: #586e75;
|
||||
--launcher-pane-horiz-background-color: #eee8d5;
|
||||
--launcher-pane-horiz-text-color: #586e75;
|
||||
|
||||
/* Tabs & breadcrumb / window backgrounds */
|
||||
--window-background-color-bgfx: #eee8d5;
|
||||
--root-background: #eee8d5;
|
||||
--tab-background-color: #eee8d5;
|
||||
--note-split-background-color: #fdf6e3;
|
||||
--center-pane-background-color-bgfx: #fdf6e3;
|
||||
--launcher-pane-horiz-background-color-bgfx: #eee8d5;
|
||||
--center-pane-horiz-layout-background-color-bgfx: #fdf6e3;
|
||||
--center-pane-vert-layout-background-color-bgfx: #fdf6e3;
|
||||
|
||||
/* Tabs */
|
||||
--active-tab-background-color: #eee8d5;
|
||||
--active-tab-text-color: #657b83;
|
||||
--inactive-tab-background-color: #fdf6e3;
|
||||
--inactive-tab-text-color: #586e75;
|
||||
--tab-close-button-hover-background: #93a1a1;
|
||||
--tab-close-button-hover-color: #dc322f;
|
||||
|
||||
/* Right pane */
|
||||
--right-pane-background-color: #eee8d5;
|
||||
--right-pane-heading-color: #657b83;
|
||||
--right-pane-item-hover-background: #93a1a1;
|
||||
--right-pane-item-hover-color: #657b83;
|
||||
|
||||
/* Bottom panel */
|
||||
--bottom-panel-background-color: #eee8d5;
|
||||
--bottom-panel-title-bar-background-color: #fdf6e3;
|
||||
|
||||
/* Status bar */
|
||||
--status-bar-border-color: #93a1a1;
|
||||
|
||||
/* Code / inline code */
|
||||
--inline-code-background-color: #eee8d5;
|
||||
--inline-code-border-color: #93a1a1;
|
||||
--code-block-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
|
||||
/* Note icons */
|
||||
--note-icon-background-color: #eee8d5;
|
||||
--note-icon-color: #657b83;
|
||||
|
||||
/* Floating buttons */
|
||||
--floating-button-background-color: #eee8d5;
|
||||
--floating-button-color: #657b83;
|
||||
--floating-button-hover-background: #93a1a1;
|
||||
--floating-button-hover-color: #657b83;
|
||||
|
||||
/* Tooltips */
|
||||
--tooltip-background-color: #eee8d5;
|
||||
--tooltip-foreground-color: #657b83;
|
||||
|
||||
/* Scrollbar */
|
||||
--scrollbar-thumb-color: #93a1a1;
|
||||
--scrollbar-thumb-hover-color: #93a1a1;
|
||||
--scrollbar-background-color: #eee8d5;
|
||||
|
||||
/* Checkboxes / tasks */
|
||||
--task-checkbox-done-color: #586e75;
|
||||
--task-checkbox-glyph-color: #657b83;
|
||||
--task-checkbox-without-state-background: #93a1a1;
|
||||
--task-checkbox-with-state-background: #268bd2;
|
||||
|
||||
/* Mermaid */
|
||||
--mermaid-theme: light;
|
||||
|
||||
/* Buttons */
|
||||
--cmd-button-background-color: #93a1a1a0;
|
||||
--cmd-button-text-color: #657b83;
|
||||
--cmd-button-hover-background-color: #93a1a1a0;
|
||||
--cmd-button-hover-text-color: #657b83;
|
||||
--icon-button-hover-background: #93a1a1;
|
||||
--icon-button-hover-color: #657b83;
|
||||
|
||||
/* Logs */
|
||||
--log-error-color: #dc322f;
|
||||
--log-info-color: #268bd2;
|
||||
--log-slow-color: #cb4b16;
|
||||
--log-success-color: #586e75;
|
||||
|
||||
/* Badges */
|
||||
--badge-background-color: #93a1a1;
|
||||
--badge-text-color: #657b83;
|
||||
|
||||
/* CKEditor editor dropdowns / panels (no yellow) */
|
||||
--ck-color-base-foreground: #93a1a1;
|
||||
--ck-color-base-background: #fdf6e3;
|
||||
--ck-color-dialog-background: #fdf6e3;
|
||||
--ck-color-dropdown-panel-background: #fdf6e3;
|
||||
--ck-color-dropdown-panel-border: #93a1a1;
|
||||
--ck-color-list-background: #fdf6e3;
|
||||
--ck-color-list-button-hover-background: #93a1a1;
|
||||
--ck-color-list-button-on-background: #93a1a1;
|
||||
--ck-color-button-default-background: #eee8d5;
|
||||
--ck-color-button-default-hover-background: #93a1a1;
|
||||
--ck-color-button-on-background: #93a1a1;
|
||||
--ck-color-button-on-hover-background: #93a1a1;
|
||||
--ck-color-button-action-background: #93a1a1;
|
||||
--ck-color-button-action-hover-background: #93a1a1;
|
||||
--ck-color-input-background: #fdf6e3;
|
||||
--ck-editor-toolbar-button-on-background: #93a1a1;
|
||||
--ck-editor-toolbar-button-on-color: #657b83;
|
||||
--ck-editor-toolbar-dropdown-button-open-background: #eee8d5;
|
||||
}
|
||||
|
||||
/* Menus & dropdowns are often rendered outside #trilium-app, so also set them globally. */
|
||||
:root {
|
||||
--menu-text-color: #657b83;
|
||||
--menu-background-color: #fdf6e3;
|
||||
--menu-background-color-no-backdrop: #fdf6e3;
|
||||
--menu-item-icon-color: #93a1a1;
|
||||
--menu-item-disabled-opacity: 0.5;
|
||||
--menu-item-keyboard-shortcut-color: #93a1a190;
|
||||
--menu-item-arrow-color: #93a1a1a3;
|
||||
--menu-item-delimiter-color: #93a1a1;
|
||||
--menu-item-group-header-color: #586e75;
|
||||
--menu-section-background-color: #fdf6e3;
|
||||
--menu-hover-item-background-color: #93a1a1;
|
||||
--menu-hover-item-text-color: #657b83;
|
||||
--hover-item-background-color: #93a1a1;
|
||||
--active-item-background-color: #93a1a1;
|
||||
--dropdown-border-color: #93a1a1;
|
||||
--dropdown-item-icon-destructive-color: #dc322f;
|
||||
|
||||
/* CKEditor editor dropdowns are rendered outside #trilium-app, so set them globally (no yellow). */
|
||||
--ck-color-base-text: #657b83;
|
||||
--ck-color-text: #657b83;
|
||||
--ck-color-base-foreground: #93a1a1;
|
||||
--ck-color-base-background: #fdf6e3;
|
||||
--ck-color-dialog-background: #fdf6e3;
|
||||
--ck-color-dropdown-panel-background: #fdf6e3;
|
||||
--ck-color-dropdown-panel-border: #93a1a1;
|
||||
--ck-color-list-background: #fdf6e3;
|
||||
--ck-color-list-button-hover-background: #93a1a1;
|
||||
--ck-color-list-button-on-background: #93a1a1;
|
||||
--ck-color-list-button-on-text: #657b83;
|
||||
--ck-color-button-default-background: #eee8d5;
|
||||
--ck-color-button-default-hover-background: #93a1a1;
|
||||
--ck-color-button-on-background: #93a1a1;
|
||||
--ck-color-button-on-hover-background: #93a1a1;
|
||||
--ck-color-button-action-background: #93a1a1;
|
||||
--ck-color-button-action-hover-background: #93a1a1;
|
||||
--ck-color-input-background: #fdf6e3;
|
||||
--ck-color-input-text: #657b83;
|
||||
--ck-color-panel-background: #fdf6e3;
|
||||
--ck-color-toolbar-background: #eee8d5;
|
||||
}
|
||||
|
||||
/* 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: #fdf6e3 !important;
|
||||
--menu-background-color-no-backdrop: #fdf6e3 !important;
|
||||
--menu-section-background-color: #fdf6e3 !important;
|
||||
background-color: #fdf6e3 !important;
|
||||
}
|
||||
body.desktop .dropdown-menu::before,
|
||||
body.mobile .dropdown-menu::before {
|
||||
background-color: #fdf6e3 !important;
|
||||
backdrop-filter: none !important;
|
||||
}
|
||||
body.desktop .dropdown-menu .dropdown-item,
|
||||
body.mobile .dropdown-menu .dropdown-item {
|
||||
--custom-color: #657b83 !important;
|
||||
color: #657b83;
|
||||
}
|
||||
body.desktop .dropdown-menu .dropdown-item:hover,
|
||||
body.desktop .dropdown-menu .dropdown-item:focus,
|
||||
body.desktop .dropdown-menu .dropdown-item.active {
|
||||
background-color: #93a1a1 !important;
|
||||
color: #657b83;
|
||||
}
|
||||
|
||||
/* ============ 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(88, 110, 117, 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(88, 110, 117, 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 #dc322f80;
|
||||
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 #cb4b1680;
|
||||
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 #586e7580;
|
||||
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 #586e7580;
|
||||
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 #2aa19880;
|
||||
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 #2aa19880;
|
||||
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 #268bd280;
|
||||
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 #268bd280;
|
||||
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 #d3368280;
|
||||
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 #d3368280;
|
||||
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(88, 110, 117, 0.14);
|
||||
border-bottom: 2px solid rgba(88, 110, 117, 0.38);
|
||||
border-radius: 4px;
|
||||
padding: 0.2em 0.35em;
|
||||
}
|
||||
.ck-content h4 {
|
||||
background-color: rgba(203, 75, 22, 0.14);
|
||||
border-bottom: 2px solid rgba(203, 75, 22, 0.38);
|
||||
border-radius: 4px;
|
||||
padding: 0.2em 0.35em;
|
||||
}
|
||||
.ck-content h5 {
|
||||
background-color: rgba(211, 54, 130, 0.12);
|
||||
border-bottom: 2px solid rgba(211, 54, 130, 0.35);
|
||||
border-radius: 4px;
|
||||
padding: 0.2em 0.35em;
|
||||
}
|
||||
.ck-content h6 {
|
||||
background-color: rgba(42, 161, 152, 0.12);
|
||||
border-bottom: 2px solid rgba(42, 161, 152, 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: #657b83;
|
||||
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: #657b83;
|
||||
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,409 @@
|
||||
/*
|
||||
* Tokyo Night Theme for TriliumNext
|
||||
*
|
||||
* Fixed dark variant (no automatic light/dark switching).
|
||||
* Palette: tokyonight.nvim (folke, Apache-2.0)
|
||||
*/
|
||||
|
||||
|
||||
#trilium-app {
|
||||
--theme-style: dark;
|
||||
|
||||
/* Main surfaces */
|
||||
--main-background-color: #24283b;
|
||||
--main-text-color: #c0caf5;
|
||||
--main-border-color: #292e42;
|
||||
--subtle-border-color: #1a1b26;
|
||||
--dropdown-border-color: #292e42;
|
||||
--dropdown-shadow-opacity: 0.6;
|
||||
|
||||
/* Accented / highlight */
|
||||
--accented-background-color: #1a1b26;
|
||||
--more-accented-background-color: #292e42;
|
||||
|
||||
/* Cards & dialogs */
|
||||
--card-background-color: #1a1b26;
|
||||
--card-background-hover-color: #292e42;
|
||||
--card-border-color: #292e42;
|
||||
--tool-dialog-background-color: #16161e;
|
||||
--modal-background-color: #16161e;
|
||||
--modal-border-color: #292e42;
|
||||
|
||||
/* Text & muted */
|
||||
--muted-text-color: #9ece6a;
|
||||
--menu-text-color: #c0caf5;
|
||||
--menu-background-color: #1a1b26e6;
|
||||
--menu-background-color-no-backdrop: #16161e;
|
||||
|
||||
/* Links */
|
||||
--link-color: #7aa2f7;
|
||||
--link-hover-color: #e0af68;
|
||||
--link-hover-background: #e0af6824;
|
||||
|
||||
/* Inputs */
|
||||
--input-background-color: #292e4260;
|
||||
--input-text-color: #c0caf5;
|
||||
--input-placeholder-color: #9ece6a80;
|
||||
--input-hover-background: #292e4260;
|
||||
--input-focus-outline-color: #7aa2f7;
|
||||
--input-focus-background: #292e4250;
|
||||
--input-focus-color: #c0caf5;
|
||||
--input-action-button-color: #9ece6a;
|
||||
--input-action-button-hover: #c0caf5;
|
||||
|
||||
/* Selection */
|
||||
--selection-background-color: #7aa2f7;
|
||||
--hover-item-text-color: #c0caf5;
|
||||
--hover-item-background-color: #1a1b26;
|
||||
--active-item-text-color: #c0caf5;
|
||||
--active-item-background-color: #292e42;
|
||||
|
||||
/* Left pane / launcher */
|
||||
--left-pane-background-color: #16161e;
|
||||
--left-pane-text-color: #9ece6a;
|
||||
--left-pane-icon-color: #565f89;
|
||||
--left-pane-item-hover-background: #1a1b26;
|
||||
--left-pane-item-selected-background: #292e42;
|
||||
--left-pane-item-selected-color: #c0caf5;
|
||||
--launcher-pane-background-color: #16161e;
|
||||
--launcher-pane-text-color: #9ece6a;
|
||||
--launcher-pane-vert-background-color: #16161e;
|
||||
--launcher-pane-vert-text-color: #9ece6a;
|
||||
--launcher-pane-horiz-background-color: #16161e;
|
||||
--launcher-pane-horiz-text-color: #9ece6a;
|
||||
|
||||
/* Tabs & breadcrumb / window backgrounds */
|
||||
--window-background-color-bgfx: #16161e;
|
||||
--root-background: #16161e;
|
||||
--tab-background-color: #16161e;
|
||||
--note-split-background-color: #24283b;
|
||||
--center-pane-background-color-bgfx: #24283b;
|
||||
--launcher-pane-horiz-background-color-bgfx: #16161e;
|
||||
--center-pane-horiz-layout-background-color-bgfx: #24283b;
|
||||
--center-pane-vert-layout-background-color-bgfx: #24283b;
|
||||
|
||||
/* Tabs */
|
||||
--active-tab-background-color: #16161e;
|
||||
--active-tab-text-color: #c0caf5;
|
||||
--inactive-tab-background-color: #24283b;
|
||||
--inactive-tab-text-color: #9ece6a;
|
||||
--tab-close-button-hover-background: #1a1b26;
|
||||
--tab-close-button-hover-color: #f7768e;
|
||||
|
||||
/* Right pane */
|
||||
--right-pane-background-color: #16161e;
|
||||
--right-pane-heading-color: #c0caf5;
|
||||
--right-pane-item-hover-background: #1a1b26;
|
||||
--right-pane-item-hover-color: #c0caf5;
|
||||
|
||||
/* Bottom panel */
|
||||
--bottom-panel-background-color: #16161e;
|
||||
--bottom-panel-title-bar-background-color: #24283b;
|
||||
|
||||
/* Status bar */
|
||||
--status-bar-border-color: #292e42;
|
||||
|
||||
/* Code / inline code */
|
||||
--inline-code-background-color: #1a1b26;
|
||||
--inline-code-border-color: #292e42;
|
||||
--code-block-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
|
||||
|
||||
/* Note icons */
|
||||
--note-icon-background-color: #1a1b26;
|
||||
--note-icon-color: #c0caf5;
|
||||
|
||||
/* Floating buttons */
|
||||
--floating-button-background-color: #1a1b26;
|
||||
--floating-button-color: #c0caf5;
|
||||
--floating-button-hover-background: #292e42;
|
||||
--floating-button-hover-color: #c0caf5;
|
||||
|
||||
/* Tooltips */
|
||||
--tooltip-background-color: #1a1b26;
|
||||
--tooltip-foreground-color: #c0caf5;
|
||||
|
||||
/* Scrollbar */
|
||||
--scrollbar-thumb-color: #292e42;
|
||||
--scrollbar-thumb-hover-color: #292e42;
|
||||
--scrollbar-background-color: #16161e;
|
||||
|
||||
/* Checkboxes / tasks */
|
||||
--task-checkbox-done-color: #9ece6a;
|
||||
--task-checkbox-glyph-color: #c0caf5;
|
||||
--task-checkbox-without-state-background: #292e42;
|
||||
--task-checkbox-with-state-background: #7aa2f7;
|
||||
|
||||
/* Mermaid */
|
||||
--mermaid-theme: dark;
|
||||
|
||||
/* Buttons */
|
||||
--cmd-button-background-color: #292e42a0;
|
||||
--cmd-button-text-color: #c0caf5;
|
||||
--cmd-button-hover-background-color: #292e42a0;
|
||||
--cmd-button-hover-text-color: #c0caf5;
|
||||
--icon-button-hover-background: #1a1b26;
|
||||
--icon-button-hover-color: #c0caf5;
|
||||
|
||||
/* Logs */
|
||||
--log-error-color: #f7768e;
|
||||
--log-info-color: #7aa2f7;
|
||||
--log-slow-color: #e0af68;
|
||||
--log-success-color: #9ece6a;
|
||||
|
||||
/* Badges */
|
||||
--badge-background-color: #292e42;
|
||||
--badge-text-color: #c0caf5;
|
||||
|
||||
/* CKEditor editor dropdowns / panels (no yellow) */
|
||||
--ck-color-base-foreground: #1a1b26;
|
||||
--ck-color-base-background: #24283b;
|
||||
--ck-color-dialog-background: #24283b;
|
||||
--ck-color-dropdown-panel-background: #1a1b26;
|
||||
--ck-color-dropdown-panel-border: #292e42;
|
||||
--ck-color-list-background: #1a1b26;
|
||||
--ck-color-list-button-hover-background: #292e42;
|
||||
--ck-color-list-button-on-background: #292e42;
|
||||
--ck-color-button-default-background: #1a1b26;
|
||||
--ck-color-button-default-hover-background: #292e42;
|
||||
--ck-color-button-on-background: #292e42;
|
||||
--ck-color-button-on-hover-background: #292e42;
|
||||
--ck-color-button-action-background: #292e42;
|
||||
--ck-color-button-action-hover-background: #292e42;
|
||||
--ck-color-input-background: #24283b;
|
||||
--ck-editor-toolbar-button-on-background: #292e42;
|
||||
--ck-editor-toolbar-button-on-color: #c0caf5;
|
||||
--ck-editor-toolbar-dropdown-button-open-background: #1a1b26;
|
||||
}
|
||||
|
||||
/* Menus & dropdowns are often rendered outside #trilium-app, so also set them globally. */
|
||||
:root {
|
||||
--menu-text-color: #c0caf5;
|
||||
--menu-background-color: #24283b;
|
||||
--menu-background-color-no-backdrop: #24283b;
|
||||
--menu-item-icon-color: #9ece6a;
|
||||
--menu-item-disabled-opacity: 0.5;
|
||||
--menu-item-keyboard-shortcut-color: #9ece6a90;
|
||||
--menu-item-arrow-color: #9ece6aa3;
|
||||
--menu-item-delimiter-color: #1a1b26;
|
||||
--menu-item-group-header-color: #9ece6a;
|
||||
--menu-section-background-color: #24283b;
|
||||
--menu-hover-item-background-color: #1a1b26;
|
||||
--menu-hover-item-text-color: #c0caf5;
|
||||
--hover-item-background-color: #1a1b26;
|
||||
--active-item-background-color: #292e42;
|
||||
--dropdown-border-color: #1a1b26;
|
||||
--dropdown-item-icon-destructive-color: #f7768e;
|
||||
|
||||
/* CKEditor editor dropdowns are rendered outside #trilium-app, so set them globally (no yellow). */
|
||||
--ck-color-base-text: #c0caf5;
|
||||
--ck-color-text: #c0caf5;
|
||||
--ck-color-base-foreground: #1a1b26;
|
||||
--ck-color-base-background: #24283b;
|
||||
--ck-color-dialog-background: #24283b;
|
||||
--ck-color-dropdown-panel-background: #1a1b26;
|
||||
--ck-color-dropdown-panel-border: #292e42;
|
||||
--ck-color-list-background: #1a1b26;
|
||||
--ck-color-list-button-hover-background: #292e42;
|
||||
--ck-color-list-button-on-background: #292e42;
|
||||
--ck-color-list-button-on-text: #c0caf5;
|
||||
--ck-color-button-default-background: #1a1b26;
|
||||
--ck-color-button-default-hover-background: #292e42;
|
||||
--ck-color-button-on-background: #292e42;
|
||||
--ck-color-button-on-hover-background: #292e42;
|
||||
--ck-color-button-action-background: #292e42;
|
||||
--ck-color-button-action-hover-background: #292e42;
|
||||
--ck-color-input-background: #24283b;
|
||||
--ck-color-input-text: #c0caf5;
|
||||
--ck-color-panel-background: #1a1b26;
|
||||
--ck-color-toolbar-background: #1a1b26;
|
||||
}
|
||||
|
||||
/* 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: #24283b !important;
|
||||
--menu-background-color-no-backdrop: #24283b !important;
|
||||
--menu-section-background-color: #24283b !important;
|
||||
background-color: #24283b !important;
|
||||
}
|
||||
body.desktop .dropdown-menu::before,
|
||||
body.mobile .dropdown-menu::before {
|
||||
background-color: #24283b !important;
|
||||
backdrop-filter: none !important;
|
||||
}
|
||||
body.desktop .dropdown-menu .dropdown-item,
|
||||
body.mobile .dropdown-menu .dropdown-item {
|
||||
--custom-color: #c0caf5 !important;
|
||||
color: #c0caf5;
|
||||
}
|
||||
body.desktop .dropdown-menu .dropdown-item:hover,
|
||||
body.desktop .dropdown-menu .dropdown-item:focus,
|
||||
body.desktop .dropdown-menu .dropdown-item.active {
|
||||
background-color: #1a1b26 !important;
|
||||
color: #c0caf5;
|
||||
}
|
||||
|
||||
/* ============ 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(158, 206, 106, 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(158, 206, 106, 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 #f7768e80;
|
||||
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 #e0af6880;
|
||||
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 #9ece6a80;
|
||||
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 #9ece6a80;
|
||||
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 #a9b1d680;
|
||||
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 #a9b1d680;
|
||||
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 #a9b1d680;
|
||||
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 #7aa2f780;
|
||||
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 #7aa2f780;
|
||||
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 #7aa2f780;
|
||||
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(122, 162, 247, 0.30);
|
||||
border-bottom: 2px solid rgba(122, 162, 247, 0.6);
|
||||
border-radius: 4px;
|
||||
padding: 0.25em 0.4em;
|
||||
}
|
||||
.ck-content h3 {
|
||||
background-color: rgba(158, 206, 106, 0.25);
|
||||
border-bottom: 2px solid rgba(158, 206, 106, 0.6);
|
||||
border-radius: 4px;
|
||||
padding: 0.2em 0.35em;
|
||||
}
|
||||
.ck-content h4 {
|
||||
background-color: rgba(224, 175, 104, 0.22);
|
||||
border-bottom: 2px solid rgba(224, 175, 104, 0.55);
|
||||
border-radius: 4px;
|
||||
padding: 0.2em 0.35em;
|
||||
}
|
||||
.ck-content h5 {
|
||||
background-color: rgba(169, 177, 214, 0.25);
|
||||
border-bottom: 2px solid rgba(169, 177, 214, 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(122, 162, 247, 0.20) !important;
|
||||
color: #c0caf5;
|
||||
font-weight: 700;
|
||||
border-bottom: 2px solid rgba(122, 162, 247, 0.45);
|
||||
}
|
||||
.ck-content table tbody td:first-child {
|
||||
background-color: rgba(255, 255, 255, 0.05) !important;
|
||||
color: #c0caf5;
|
||||
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(122, 162, 247, 0.10) !important;
|
||||
}
|
||||
.ck-content table .col-hover {
|
||||
background-color: rgba(122, 162, 247, 0.10) !important;
|
||||
}
|
||||
.ck-content table tbody tr:hover td.col-hover,
|
||||
.ck-content table thead th.col-hover {
|
||||
background-color: rgba(122, 162, 247, 0.18) !important;
|
||||
}
|
||||
@@ -0,0 +1,409 @@
|
||||
/*
|
||||
* Tokyo Night Day Theme for TriliumNext
|
||||
*
|
||||
* Fixed light variant (no automatic light/dark switching).
|
||||
* Palette: tokyonight.nvim day (folke, Apache-2.0)
|
||||
*/
|
||||
|
||||
|
||||
#trilium-app {
|
||||
--theme-style: light;
|
||||
|
||||
/* Main surfaces */
|
||||
--main-background-color: #e1e2e7;
|
||||
--main-text-color: #3760bf;
|
||||
--main-border-color: #c4c6dd;
|
||||
--subtle-border-color: #cfc9c2;
|
||||
--dropdown-border-color: #c4c6dd;
|
||||
--dropdown-shadow-opacity: 0.5;
|
||||
|
||||
/* Accented / highlight */
|
||||
--accented-background-color: #cfc9c2;
|
||||
--more-accented-background-color: #c4c6dd;
|
||||
|
||||
/* Cards & dialogs */
|
||||
--card-background-color: #cfc9c2;
|
||||
--card-background-hover-color: #c4c6dd;
|
||||
--card-border-color: #c4c6dd;
|
||||
--tool-dialog-background-color: #e1e2e7;
|
||||
--modal-background-color: #e1e2e7;
|
||||
--modal-border-color: #c4c6dd;
|
||||
|
||||
/* Text & muted */
|
||||
--muted-text-color: #a0a6c2;
|
||||
--menu-text-color: #3760bf;
|
||||
--menu-background-color: #cfc9c2;
|
||||
--menu-background-color-no-backdrop: #cfc9c2;
|
||||
|
||||
/* Links */
|
||||
--link-color: #2e7de9;
|
||||
--link-hover-color: #0db9d7;
|
||||
--link-hover-background: #0db9d724;
|
||||
|
||||
/* Inputs */
|
||||
--input-background-color: #c4c6dd60;
|
||||
--input-text-color: #3760bf;
|
||||
--input-placeholder-color: #a0a6c280;
|
||||
--input-hover-background: #9aa5ce60;
|
||||
--input-focus-outline-color: #2e7de9;
|
||||
--input-focus-background: #c4c6dd50;
|
||||
--input-focus-color: #3760bf;
|
||||
--input-action-button-color: #9aa5ce;
|
||||
--input-action-button-hover: #3760bf;
|
||||
|
||||
/* Selection */
|
||||
--selection-background-color: #2e7de9;
|
||||
--hover-item-text-color: #3760bf;
|
||||
--hover-item-background-color: #cfc9c2;
|
||||
--active-item-text-color: #3760bf;
|
||||
--active-item-background-color: #c4c6dd;
|
||||
|
||||
/* Left pane / launcher */
|
||||
--left-pane-background-color: #cfc9c2;
|
||||
--left-pane-text-color: #a0a6c2;
|
||||
--left-pane-icon-color: #a0a6c2;
|
||||
--left-pane-item-hover-background: #c4c6dd;
|
||||
--left-pane-item-selected-background: #c4c6dd;
|
||||
--left-pane-item-selected-color: #3760bf;
|
||||
--launcher-pane-background-color: #cfc9c2;
|
||||
--launcher-pane-text-color: #a0a6c2;
|
||||
--launcher-pane-vert-background-color: #cfc9c2;
|
||||
--launcher-pane-vert-text-color: #a0a6c2;
|
||||
--launcher-pane-horiz-background-color: #cfc9c2;
|
||||
--launcher-pane-horiz-text-color: #a0a6c2;
|
||||
|
||||
/* Tabs & breadcrumb / window backgrounds */
|
||||
--window-background-color-bgfx: #cfc9c2;
|
||||
--root-background: #cfc9c2;
|
||||
--tab-background-color: #cfc9c2;
|
||||
--note-split-background-color: #e1e2e7;
|
||||
--center-pane-background-color-bgfx: #e1e2e7;
|
||||
--launcher-pane-horiz-background-color-bgfx: #cfc9c2;
|
||||
--center-pane-horiz-layout-background-color-bgfx: #e1e2e7;
|
||||
--center-pane-vert-layout-background-color-bgfx: #e1e2e7;
|
||||
|
||||
/* Tabs */
|
||||
--active-tab-background-color: #e1e2e7;
|
||||
--active-tab-text-color: #3760bf;
|
||||
--inactive-tab-background-color: #e1e2e7;
|
||||
--inactive-tab-text-color: #a0a6c2;
|
||||
--tab-close-button-hover-background: #c4c6dd;
|
||||
--tab-close-button-hover-color: #f52a65;
|
||||
|
||||
/* Right pane */
|
||||
--right-pane-background-color: #cfc9c2;
|
||||
--right-pane-heading-color: #3760bf;
|
||||
--right-pane-item-hover-background: #c4c6dd;
|
||||
--right-pane-item-hover-color: #3760bf;
|
||||
|
||||
/* Bottom panel */
|
||||
--bottom-panel-background-color: #cfc9c2;
|
||||
--bottom-panel-title-bar-background-color: #e1e2e7;
|
||||
|
||||
/* Status bar */
|
||||
--status-bar-border-color: #c4c6dd;
|
||||
|
||||
/* Code / inline code */
|
||||
--inline-code-background-color: #cfc9c2;
|
||||
--inline-code-border-color: #c4c6dd;
|
||||
--code-block-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
|
||||
/* Note icons */
|
||||
--note-icon-background-color: #cfc9c2;
|
||||
--note-icon-color: #3760bf;
|
||||
|
||||
/* Floating buttons */
|
||||
--floating-button-background-color: #cfc9c2;
|
||||
--floating-button-color: #3760bf;
|
||||
--floating-button-hover-background: #c4c6dd;
|
||||
--floating-button-hover-color: #3760bf;
|
||||
|
||||
/* Tooltips */
|
||||
--tooltip-background-color: #cfc9c2;
|
||||
--tooltip-foreground-color: #3760bf;
|
||||
|
||||
/* Scrollbar */
|
||||
--scrollbar-thumb-color: #c4c6dd;
|
||||
--scrollbar-thumb-hover-color: #9aa5ce;
|
||||
--scrollbar-background-color: #cfc9c2;
|
||||
|
||||
/* Checkboxes / tasks */
|
||||
--task-checkbox-done-color: #a0a6c2;
|
||||
--task-checkbox-glyph-color: #3760bf;
|
||||
--task-checkbox-without-state-background: #c4c6dd;
|
||||
--task-checkbox-with-state-background: #2e7de9;
|
||||
|
||||
/* Mermaid */
|
||||
--mermaid-theme: light;
|
||||
|
||||
/* Buttons */
|
||||
--cmd-button-background-color: #c4c6dda0;
|
||||
--cmd-button-text-color: #3760bf;
|
||||
--cmd-button-hover-background-color: #9aa5cea0;
|
||||
--cmd-button-hover-text-color: #3760bf;
|
||||
--icon-button-hover-background: #c4c6dd;
|
||||
--icon-button-hover-color: #3760bf;
|
||||
|
||||
/* Logs */
|
||||
--log-error-color: #f52a65;
|
||||
--log-info-color: #2e7de9;
|
||||
--log-slow-color: #b15c00;
|
||||
--log-success-color: #a0a6c2;
|
||||
|
||||
/* Badges */
|
||||
--badge-background-color: #c4c6dd;
|
||||
--badge-text-color: #3760bf;
|
||||
|
||||
/* CKEditor editor dropdowns / panels (no yellow) */
|
||||
--ck-color-base-foreground: #c4c6dd;
|
||||
--ck-color-base-background: #e1e2e7;
|
||||
--ck-color-dialog-background: #e1e2e7;
|
||||
--ck-color-dropdown-panel-background: #e1e2e7;
|
||||
--ck-color-dropdown-panel-border: #c4c6dd;
|
||||
--ck-color-list-background: #e1e2e7;
|
||||
--ck-color-list-button-hover-background: #c4c6dd;
|
||||
--ck-color-list-button-on-background: #c4c6dd;
|
||||
--ck-color-button-default-background: #cfc9c2;
|
||||
--ck-color-button-default-hover-background: #c4c6dd;
|
||||
--ck-color-button-on-background: #c4c6dd;
|
||||
--ck-color-button-on-hover-background: #9aa5ce;
|
||||
--ck-color-button-action-background: #c4c6dd;
|
||||
--ck-color-button-action-hover-background: #9aa5ce;
|
||||
--ck-color-input-background: #e1e2e7;
|
||||
--ck-editor-toolbar-button-on-background: #c4c6dd;
|
||||
--ck-editor-toolbar-button-on-color: #3760bf;
|
||||
--ck-editor-toolbar-dropdown-button-open-background: #cfc9c2;
|
||||
}
|
||||
|
||||
/* Menus & dropdowns are often rendered outside #trilium-app, so also set them globally. */
|
||||
:root {
|
||||
--menu-text-color: #3760bf;
|
||||
--menu-background-color: #e1e2e7;
|
||||
--menu-background-color-no-backdrop: #e1e2e7;
|
||||
--menu-item-icon-color: #9aa5ce;
|
||||
--menu-item-disabled-opacity: 0.5;
|
||||
--menu-item-keyboard-shortcut-color: #9aa5ce90;
|
||||
--menu-item-arrow-color: #9aa5cea3;
|
||||
--menu-item-delimiter-color: #c4c6dd;
|
||||
--menu-item-group-header-color: #a0a6c2;
|
||||
--menu-section-background-color: #e1e2e7;
|
||||
--menu-hover-item-background-color: #c4c6dd;
|
||||
--menu-hover-item-text-color: #3760bf;
|
||||
--hover-item-background-color: #c4c6dd;
|
||||
--active-item-background-color: #c4c6dd;
|
||||
--dropdown-border-color: #c4c6dd;
|
||||
--dropdown-item-icon-destructive-color: #f52a65;
|
||||
|
||||
/* CKEditor editor dropdowns are rendered outside #trilium-app, so set them globally (no yellow). */
|
||||
--ck-color-base-text: #3760bf;
|
||||
--ck-color-text: #3760bf;
|
||||
--ck-color-base-foreground: #c4c6dd;
|
||||
--ck-color-base-background: #e1e2e7;
|
||||
--ck-color-dialog-background: #e1e2e7;
|
||||
--ck-color-dropdown-panel-background: #e1e2e7;
|
||||
--ck-color-dropdown-panel-border: #c4c6dd;
|
||||
--ck-color-list-background: #e1e2e7;
|
||||
--ck-color-list-button-hover-background: #c4c6dd;
|
||||
--ck-color-list-button-on-background: #c4c6dd;
|
||||
--ck-color-list-button-on-text: #3760bf;
|
||||
--ck-color-button-default-background: #cfc9c2;
|
||||
--ck-color-button-default-hover-background: #c4c6dd;
|
||||
--ck-color-button-on-background: #c4c6dd;
|
||||
--ck-color-button-on-hover-background: #9aa5ce;
|
||||
--ck-color-button-action-background: #c4c6dd;
|
||||
--ck-color-button-action-hover-background: #9aa5ce;
|
||||
--ck-color-input-background: #e1e2e7;
|
||||
--ck-color-input-text: #3760bf;
|
||||
--ck-color-panel-background: #e1e2e7;
|
||||
--ck-color-toolbar-background: #cfc9c2;
|
||||
}
|
||||
|
||||
/* 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: #e1e2e7 !important;
|
||||
--menu-background-color-no-backdrop: #e1e2e7 !important;
|
||||
--menu-section-background-color: #e1e2e7 !important;
|
||||
background-color: #e1e2e7 !important;
|
||||
}
|
||||
body.desktop .dropdown-menu::before,
|
||||
body.mobile .dropdown-menu::before {
|
||||
background-color: #e1e2e7 !important;
|
||||
backdrop-filter: none !important;
|
||||
}
|
||||
body.desktop .dropdown-menu .dropdown-item,
|
||||
body.mobile .dropdown-menu .dropdown-item {
|
||||
--custom-color: #3760bf !important;
|
||||
color: #3760bf;
|
||||
}
|
||||
body.desktop .dropdown-menu .dropdown-item:hover,
|
||||
body.desktop .dropdown-menu .dropdown-item:focus,
|
||||
body.desktop .dropdown-menu .dropdown-item.active {
|
||||
background-color: #c4c6dd !important;
|
||||
color: #3760bf;
|
||||
}
|
||||
|
||||
/* ============ 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(160, 166, 194, 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(160, 166, 194, 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 #f52a6580;
|
||||
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 #b15c0080;
|
||||
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 #a0a6c280;
|
||||
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 #a0a6c280;
|
||||
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 #0db9d780;
|
||||
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 #0db9d780;
|
||||
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 #2e7de980;
|
||||
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 #2e7de980;
|
||||
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 #9854f180;
|
||||
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 #c6437d80;
|
||||
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(160, 166, 194, 0.14);
|
||||
border-bottom: 2px solid rgba(160, 166, 194, 0.38);
|
||||
border-radius: 4px;
|
||||
padding: 0.2em 0.35em;
|
||||
}
|
||||
.ck-content h4 {
|
||||
background-color: rgba(177, 92, 0, 0.14);
|
||||
border-bottom: 2px solid rgba(177, 92, 0, 0.38);
|
||||
border-radius: 4px;
|
||||
padding: 0.2em 0.35em;
|
||||
}
|
||||
.ck-content h5 {
|
||||
background-color: rgba(152, 84, 241, 0.12);
|
||||
border-bottom: 2px solid rgba(152, 84, 241, 0.35);
|
||||
border-radius: 4px;
|
||||
padding: 0.2em 0.35em;
|
||||
}
|
||||
.ck-content h6 {
|
||||
background-color: rgba(13, 185, 215, 0.12);
|
||||
border-bottom: 2px solid rgba(13, 185, 215, 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: #3760bf;
|
||||
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: #3760bf;
|
||||
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