413 lines
14 KiB
CSS
413 lines
14 KiB
CSS
/*
|
|
* 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;
|
|
} |