/* ============================================================================= */
/* MELON 4 */
/* by https://github.com/raphwriter/ */
/* A Theme For Trilium Notes (https://github.com/zadam/trilium) */
/* ============================================================================= */
/* ----------------------------------------------------------------------------- */
/* FONT DECLARATIONS
/* ----------------------------------------------------------------------------- */
/* Fira Mono */
@font-face {
font-family: 'Fira Mono';
font-style: normal;
font-weight: 400;
src: url('/custom/fonts/FiraMono-Regular.woff') format('woff');
}
/* Fira Sans */
@font-face {
font-family: 'Fira Sans';
font-style: light;
font-weight: 300;
src: url('/custom/fonts/FiraSans-Light.woff') format('woff');
}
@font-face {
font-family: 'Fira Sans';
font-style: regular;
font-weight: 400;
src: url('/custom/fonts/FiraSans-Regular.woff') format('woff');
}
/* Fira Code */
@font-face {
font-family: 'Fira Code';
font-style: normal;
font-weight: 300;
src: url('/custom/fonts/FiraCode-Regular.woff') format('woff');
}
@font-face {
font-family: 'Fira Code';
font-style: normal;
font-weight: 600;
src: url('/custom/fonts/FiraCode-Bold.woff') format('woff');
}
/* Roboto-slab */
@font-face {
font-family: 'Roboto Slab';
font-style: normal;
font-weight: 200;
src: url('/custom/fonts/roboto-slab-v11-latin-200.woff') format('woff');
}
@font-face {
font-family: 'Roboto Slab';
font-style: normal;
font-weight: 300;
src: url('/custom/fonts/roboto-slab-v11-latin-300.woff') format('woff');
}
@font-face {
font-family: 'Roboto Slab';
font-style: normal;
font-weight: 400;
src: url('/custom/fonts/roboto-slab-v11-latin-regular.woff') format('woff');
}
@font-face {
font-family: 'Roboto Slab';
font-style: normal;
font-weight: 600;
src: url('/custom/fonts/roboto-slab-v11-latin-600.woff') format('woff');
}
html {
/* ----------------------------------------------------------------------------- */
/* COLOR VARIABLES
/* ----------------------------------------------------------------------------- */
--color-blue-dark: #2e4b76;
--color-blue-dark-alpha: #2e4b76d1;
--color-blue-dark-text: #e8f1f5;
--color-blue-light: #3cad9e;
--color-blue-light-alpha: #3cad9e70;
--color-blue-light-alpha-darker: #3cad9ed1;
--color-blue-light-alpha-lighter: #2aa19229;
--color-blue-light-text: #f0f4f4;
--color-blue-light-gradient-1: #4ea596;
--color-blue-light-gradient-2: #2ba090;
--color-yellow: #e9c46a;
--color-yellow-darker: #ecb400;
--color-yellow-text: #63583c;
--color-yellow-bg-alpha: #e9c46a1a;
--color-sidebar-yellow-dark: #e1dbce;
--color-orange-light: #f4a261;
--color-orange-light-text: #c96a2e;
--color-orange-dark: #e76f51;
--color-orange-dark-text: #f2dcd6;
--color-gray: #d6d6d6;
--color-gray-text: #333;
--color-gray-text-code: #555;
--color-gray-light: #f5f5f5;
--color-gray-light-alpha: rgba(199, 199, 199, 0.2);
--color-gray-light-text: #999;
--color-gray-medium: #868E8D;
--color-gray-light-buttons: #e9e9e9;
--color-gray-light-buttons-text: #434343;
--color-gray-dark: #666;
--color-gray-dark-text: #666;
--color-paper: #ecebe3;
--color-paper-text: #555;
--color-paper-light: #fcfcfa;
--color-paper-light-cool: #fcfcfd;
--color-shadow: rgba(181, 181, 181, 0.6);
--color-shadow-light: rgba(181, 181, 181, 0.3);
--gradient-blue-light: linear-gradient(138deg, var(--color-blue-light-gradient-1) 0%, var(--color-blue-light-gradient-1) 35%, var(--color-blue-light-gradient-2) 100%);
--gradient-paper-light: linear-gradient(170deg, var(--color-paper-light-cool) 0%, var(--color-paper-light-cool) 45%, var(--color-paper-light) 100%);
--launcher-pane-background-color: var(--gradient-blue-light);
--ck-color-image-caption-background: var(--color-shadow-light);
/* ----------------------------------------------------------------------------- */
/* BORDER & SHADOW VARIABLES
/* ----------------------------------------------------------------------------- */
--border-radius-small: 2px;
--border-radius-tabs: 2px;
--border-radius-large: 10px;
--border-standard: 1px solid var(--color-gray);
--border-accent: 2px solid var(--color-orange-dark);
--border-accent-alt: 2px solid var(--color-blue-light);
--border-accent-muted: 2px solid var(--color-gray-dark);
--border-accent-light: 1px dotted var(--color-blue-dark-text);
--shadow-light: 3px 4px 3px -3px var(--color-shadow-light);
--shadow-standard: 3px 4px 3px -3px var(--color-shadow);
--shadow-accented: 2px 2px 5px -2px var(--color-gray-dark);
--shadow-90deg: 0 3px 5px -3px var(--color-shadow);
--shadow-90deg-inset: 0 9px 4px -9px inset var(--color-shadow-light);
--shadow-embedded-notes: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
/* ----------------------------------------------------------------------------- */
/* FONT VARIABLES
/* ----------------------------------------------------------------------------- */
--main-font-family-sans: 'Fira Sans', 'Open Sans', 'Source Sans Pro', 'Liberation Sans', Arial, Sans-serif;
--main-font-family-serif: 'Roboto Slab', Georgia, Serif;
--main-font-family-mono: 'Fira Mono', 'Source Code Pro', Courier, Monospace;
--detail-text-font-family: 'Fira Sans', 'Open Sans', 'Source Sans Pro', 'Liberation Sans', Arial, Sans-serif;
--font-family-monospace: 'Fira Mono', 'Source Code Pro', Courier, Monospace;
--font-headers: 'Roboto Slab', Georgia, Serif;
--font-body: 'Fira Sans', 'Open Sans', 'Source Sans Pro', 'Liberation Sans', Arial, Sans-serif;
--font-code: 'Fira Code', 'Source Code Pro', Courier, Monospace;
}
#root-widget {
/* FF basic styling */
scrollbar-color: var(--color-gray-dark) var(--color-gray-light);
scrollbar-gutter: 5px;
}
/* ----------------------------------------------------------------------------- */
/* RESET
/* ----------------------------------------------------------------------------- */
#root-widget *, .modal-content, :not(.ribbon-body *), form input, :not(h1, h2, h3, h4, h5, h6) {
font-family: var(--font-body);
border-radius: var(--border-radius-small);
}
#root-widget #center-pane :is(h1, h2, h3, h4, h5, h6),
.modal-content :is(h1, h2, h3, h4, h5, h6) {
border-bottom: none;
color: var(--color-gray-light-buttons-text);
font-family: var(--main-font-family-serif);
margin-top: 1.6rem;
margin-bottom: .3rem;
font-weight: bold;
padding: 6px 0px;
border-radius: 0;
font-family: var(--font-headers) !important;
}
/* Excalidraw fixes */
#root-widget #center-pane div.excalidraw-wrapper :is(h1, h2, h3, h4, h5, h6) {
margin: unset;
padding: unset;
}
#root-widget #center-pane div.excalidraw-wrapper .App-menu__left .panelColumn {
row-gap: 0;
}
#root-widget a {
color: var(--color-blue-dark);
}
span.edited-note-line {
padding: 0 .5rem 0 0;
display: flex;
}
span.edited-note-line small {
color: var(--color-gray-dark);
margin-right: 2px;
margin-left: 2px;
}
div#rest-pane.component div#center-pane .title-row {
}
/* ----------------------------------------------------------------------------- */
/* CodeMirror
/* ----------------------------------------------------------------------------- */
div#root-widget div#rest-pane div#center-pane div.note-detail div.note-detail-code div.note-detail-code-editor div.CodeMirror-code span {
/*color: var(--color-gray-text-code);*/
font-family: var(--font-code);
}
div.CodeMirror span.cm-atom {
color: var(--color-gray-text-code);
}
div.CodeMirror span.cm-builtin {
color: var(--color-gray-text-code);
}
div.CodeMirror span.cm-callee {
color: var(--color-yellow-text);
}
div.CodeMirror span.cm-comment {
color: var(--color-yellow-darker);
background-color: var(--color-gray-light);
padding: 5px 2px;
margin: -5px -2px;
}
div.CodeMirror span.cm-def {
color: var(--color-gray-text-code);
}
div.CodeMirror span.cm-keyword {
color: var(--color-gray-text-code);
}
div.CodeMirror span.cm-matchhighlight {
color: var(--color-gray-text-code);
}
div.CodeMirror span.cm-number {
color: var(--color-gray-text-code);
}
div.CodeMirror span.cm-operator {
color: var(--color-gray-text-code);
}
div.CodeMirror span.cm-overlay {
color: var(--color-gray-text-code);
}
div.CodeMirror span.cm-property {
color: var(--color-paper-text);
text-decoration: underline;
text-decoration-color: var(--color-gray);
text-decoration-style: dotted;
}
div.CodeMirror span.cm-variable {
color: var(--color-blue-dark);
}
div.CodeMirror span.cm-variable-2 {
color: var(--color-blue-light);
}
div.CodeMirror span.cm-variable-3 {
color: var(--color-gray-text-code);
}
div.CodeMirror span.cm-qualifier {
color: var(--color-gray-text-code);
}
div.CodeMirror span.cm-string {
color: var(--color-orange-dark);
}
div.CodeMirror span.cm-string-2 {
color: var(--color-gray-text-code);
}
div.CodeMirror span.cm-tag {
color: var(--color-gray-text-code);
}
.note-detail-code-editor div.CodeMirror-selected,
.note-detail-code-editor div.CodeMirror-line::selection {
background-color: var(--color-blue-light-alpha);
}
.CodeMirror-matchingbracket {
text-decoration: none;
color: var(--color-orange-dark) !important;
border: 1px solid var(--color-gray);
}
.CodeMirror-linenumber {
/*! font-size: 0.9rem; */
color: var(--color-gray);
font-family: var(--font-code) !important;
}
.CodeMirror-linenumber::before {
/*content: "\00B7";*/
}
/* ----------------------------------------------------------------------------- */
/* HYPERLINKS
/* ----------------------------------------------------------------------------- */
a, a:visited, a:hover,
.note-detail a, .note-detail a:hover,
.modal-dialog a, .modal-dialog a:hover,
.note-paths-widget a, .note-paths-widget a:hover,
.similar-notes-widget a, .similar-notes-widget a:hover,
.related-notes-container a, .related-notes-container a:hover,
div.tooltip a,
li a, li a:visited, li a:hover
{
color: var(--color-blue-dark);
border-bottom: 1px solid var(--color-gray-dark);
border-radius: 0 !important;
text-decoration: none;
}
a:hover,
.note-detail a:hover,
.modal-dialog a:hover,
.note-paths-widget a:hover,
.similar-notes-widget a:hover,
.related-notes-container a:hover {
border-bottom: 1px solid var(--color-blue-light);
border-radius: 0;
color: var(--color-blue-light);
text-decoration: none;
}
div#root-widget div#rest-pane div#center-pane div.scrolling-container div.note-detail.component div.note-detail-editable-text div.note-detail-editable-text-editor.ck.ck-content li span.todo-list__label__description a {
margin-left: 0.4rem;
}
/* ----------------------------------------------------------------------------- */
/* CK EDITOR
/* ----------------------------------------------------------------------------- */
div.ck-body-wrapper div.ck.ck-reset_all.ck-body.ck-rounded-corners button.ck.ck-button.ck-off.ck-block-toolbar-button,
div.ck-body-wrapper div.ck.ck-reset_all.ck-body.ck-rounded-corners button.ck.ck-button.ck-on.ck-block-toolbar-button {
/*! position: absolute; */
/*! left: -50px; */
margin: 0 0 0 -20px;
/*! border: 1px dashed var(--color-gray-light-buttons-text); */
border-radius: 7px;
width: 31px;
height: 31px;
color: var(--color-gray-light-buttons-text);
outline: 1px solid var(--color-blue-light-text);
outline-offset: -3px;
box-shadow: var(--shadow-embedded-notes);
padding: 5px;
background: var(--gradient-paper-light);
border: 2px solid white;
}
div.ck-body-wrapper div.ck.ck-reset_all.ck-body.ck-rounded-corners div.ck.ck-balloon-panel.ck-balloon-panel_with-arrow.ck-toolbar-container.ck-balloon-panel_visible {
border-radius: 7px;
background: var(--gradient-paper-light);
border: 2px solid white;
box-shadow: var(--shadow-embedded-notes);
color: var(--color-gray-light-buttons-text);
outline: 1px solid var(--color-blue-light-text);
outline-offset: -3px;
padding: 5px;
}
div.ck-body-wrapper div.ck.ck-reset_all.ck-body.ck-rounded-corners div.ck.ck-balloon-panel.ck-balloon-panel_with-arrow.ck-toolbar-container.ck-balloon-panel_visible .ck-toolbar,
div.ck-body-wrapper div.ck.ck-reset_all.ck-body.ck-rounded-corners div.ck.ck-balloon-panel.ck-balloon-panel_with-arrow.ck-toolbar-container.ck-balloon-panel_visible .ck-toolbar .ck-toolbar__items {
background: var(--gradient-paper-light);
}
.ck.ck-button, a.ck.ck-button {
background: var(--gradient-light-gray);
}
.ck.ck-button:not(.ck-disabled):hover, a.ck.ck-button:not(.ck-disabled):hover {
background: var(--color-blue-light-alpha);
}
/* ----------------------------------------------------------------------------- */
/* MODALS
/* ----------------------------------------------------------------------------- */
/* ----------- RECENT CHANGES ----------- */
div#recent-changes-content div {
margin-bottom: 2rem;
}
div#recent-changes-content div ul {
margin-left: .5rem;
margin-top: .5rem;
padding-left: 0;
}
div#recent-changes-content div ul li {
list-style-type: none;
margin-bottom: .3rem;
}
div#recent-changes-content div ul li span {
color: var(--color-blue-light);
font-family: var(--main-font-family-serif);
}
div#recent-changes-content div ul li span small {
color: var(--color-gray-light-text);
display: block;
margin-left: 0rem;
}
div#recent-changes-content div b {
border-bottom: 1px solid var(--color-gray);
color: var(--color-blue-dark);
display: block;
font-family: var(--main-font-family-serif);
font-weight: normal;
}
/* ----------------------------------------------------------------------------- */
/* COMPONENTS
/* ----------------------------------------------------------------------------- */
/* ----------- GUTTER ----------- */
div#root-widget div.gutter-horizontal {
background: var(--color-gray-light);
/*! width: 5px !important; */
border-left: var(--border-standard);
border-radius: 0;
padding-right: 0.5rem;
border-right: var(--border-standard);
}
/* -----------LEFT PANE -------------- */
div#left-pane {
background-color: var(--color-paper-light-cool);
}
/* ----------- RIGHT PANE ------------ */
div#right-pane.component {
margin-left: 10px;
}
div#right-pane.component div.card-header {
border-radius: 0;
font-family: var(--font-headers);
font-weight: normal;
}
div#right-pane.component div.card-header .toc > ol {
padding-left: 15px;
}
div#right-pane.component div.card-body .toc > ol > ol li {
list-style: lower-latin;
}
div#right-pane.component div.card-body div.toc-widget {
padding: 0 1rem;
contain: none;
overflow: auto;
}
/* ----------- DROPDOWN MENU ----------- */
div#root-widget div#left-pane .dropdown-menu a {
color: var(--color-dark-blue);
}
a.dropdown-item {
border-bottom: none;
}
div#root-widget div#launcher-pane div.dropdown div.dropdown-menu span.bx {
color: var(--color-blue-dark);
}
div#root-widget div#launcher-pane div.dropdown div.dropdown-menu a {
color: var(--color-blue-dark);
}
div#root-widget div#rest-pane .dropdown-menu a:hover:not(.disabled), .dropdown-item:hover:not(.disabled),
div#root-widget div#rest-pane div#center-pane div.ribbon-container div.ribbon-top-row div.ribbon-button-container div.dropdown.show div.dropdown-menu a.dropdown-item.show-source-button:hover kbd{
background-color: var(--color-blue-light-alpha) !important;
color: var(--color-blue-light-gradient-2) !important;
}
/* ----------- TABS ----------- */
div#root-widget div#rest-pane > div.component:first-child {
border-bottom: var(--border-standard);
height: 50px !important;
}
div#root-widget div#rest-pane div.tab-row-widget {
}
div#root-widget div#rest-pane div.tab-row-widget-container {
}
div#root-widget div#rest-pane div.tab-row-widget div.note-new-tab {
height: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-gray-dark);
background-color: var(--color-gray-light-alpha);
border-radius: 0;
margin-left: 5px;
}
div#root-widget div#rest-pane div.tab-row-widget div.note-new-tab:hover {
color: var(--color-blue-light);
background-color: var(--color-blue-light-alpha);
}
.tab-row-widget .note-tab .note-tab-title {
}
div#rest-pane div.tab-row-widget div.tab-row-widget-container div.note-tab div.note-tab-wrapper {
background-color: var(--color-gray-light);
color: var(--color-gray-light-text);
align-items: center;
height: 50px;
border-radius: 0;
}
div#rest-pane div.tab-row-widget div.tab-row-widget-container div.note-tab div.note-tab-wrapper:hover {
color: var(--color-blue-light);
background-color: var(--color-blue-light-alpha);
}
div#rest-pane div.tab-row-widget div.tab-row-widget-container div.note-tab[active=""] div.note-tab-wrapper {
color: white;
}
div#rest-pane div.tab-row-widget div.tab-row-widget-container div.note-tab div.note-tab-wrapper > div {
height: 50px;
align-items: center;
display: flex;
padding: 0;
font-family: var(--font-headers);
font-weight: normal;
}
/* close button */
div#rest-pane div.tab-row-widget div.tab-row-widget-container div.note-tab div.note-tab-wrapper .note-tab-close span {
justify-content: end;
margin-right: 3px;
margin-left: 3px;
}
div#rest-pane div.tab-row-widget div.tab-row-widget-container div.note-tab div.note-tab-wrapper .note-tab-close {
height: 1.5rem;
width: 1.5rem;
justify-content: center;
}
div#rest-pane div.tab-row-widget div.tab-row-widget-container div.note-tab div.note-tab-wrapper .note-tab-close:hover {
color: var(--color-gray-light-buttons-text);
cursor: pointer;
}
/* close button "x" */
div#rest-pane div.tab-row-widget div.tab-row-widget-container div.note-tab div.note-tab-wrapper > div span {
top: unset;
font-size: 1.5rem;
}
div#rest-pane div.tab-row-widget div.tab-row-widget-container div.note-tab[active] .note-tab-wrapper {
background-color: #3cad9e;
color: var(--color-blue-light-text);
background: var(--gradient-blue-light);
}
div#rest-pane div.tab-row-widget div.tab-row-widget-container div.note-tab[active] .note-tab-wrapper div.note-tab-title::before {
/*! content: "\203B "; */ /* reference mark */
/*! content: "\1F348 "; */ /* melon */
content: "\1F34B "; /* lemon */
margin-right: 5px;
font-size: .8rem;
}
/* ----------- TREE ----------- */
div#root-widget div#left-pane div.tree ul#ft-id-1 {
margin-left: .4rem;
margin-right: .7rem;
}
div#root-widget div#left-pane span.fancytree-node:hover {
background-color: #2aa19229;
border: 1px dotted var(--color-blue-light);
color: var(--color-blue-light);
}
div#root-widget div#left-pane .fancytree-node {
height: 36px; padding: 2px 4px 5px;
font-family: var(--main-font-family-serif);
}
div#root-widget div#left-pane span.fancytree-node.fancytree-active {
background-color: var(--color-gray-light-alpha) !important;
border: none !important;
}
div#root-widget div#left-pane span.fancytree-node.fancytree-node span {
font-family: var(--main-font-family-serif);
}
div#root-widget div#left-pane span.fancytree-node.fancytree-active span {
color: var(--color-blue-dark);
}
div#root-widget div#left-pane span.fancytree-node.protected > span.fancytree-custom-icon {
/* remove shadow from protected notes icon */
filter: none;
color: var(--color-gray-medium);
}
/* multiple selected nodes */
div#root-widget div#left-pane div.tree-wrapper div.tree span.fancytree-selected {
background-color: var(--color-gray-light) !important;
color: var(--color-blue-dark-alpha);
}
div#root-widget div#left-pane div.tree-wrapper div.tree span.fancytree-selected .fancytree-title {
font-style: normal;
text-decoration: none;
}
/* NOTES WITH MULTIPLE PARENTS*/
div#root-widget div#left-pane span.fancytree-node.multiple-parents .fancytree-title::after {
/* cloned notes icon */
font-family: boxicons;
/*content: " \1F517";*/
content: " \EA72";
font-size: .85rem;
color: var(--color-blue-dark);
}
div#root-widget div#left-pane div.tree-wrapper div.tree .ui-fancytree.fancytree-container.fancytree-plain.fancytree-ext-clones.fancytree-treefocus span.fancytree-node.fancytree-has-children.multiple-parents.fancytree-match.fancytree-active-clone {
background-color: var(--color-gray-light) !important;
color: var(--color-blue-dark-alpha);
}
/* ----------- CONTEXT MENU ----------- */
#context-menu-container {
font-family: var(--main-font-family-sans);
}
/* ----------- LAUNCHER PANE ----------- */
div#launcher-pane {
background-color: var(--color-blue-light);
background: var(--gradient-blue-light);
}
div#launcher-pane .component,
div#launcher-pane .component button,
div#launcher-pane .icon-action {
color: var(--color-blue-light-text);
}
div#launcher-pane .global-menu-button {
filter:invert(1);
}
div#launcher-pane .global-menu-button:hover {
filter:invert(1);
}
div#launcher-pane .component button:hover {
filter: invert(0);
background-color: var(--color-gray-light-alpha);
display: block;
width: inherit;
}
div#launcher-pane .icon-action:hover {
background-color: var(--color-gray-text);
}
.tooltip-inner {
font-family: var(--main-font-family-sans);
}
/* ----------- RIBBON ----------- */
div#rest-pane.component div#center-pane div.ribbon-body.active {
margin-left: 0;
margin-right: 0;
border: none;
}
div#rest-pane.component div#center-pane div.attribute-list {
margin-top: 0;
}
div#rest-pane.component div#center-pane div.ribbon-tab-container {
justify-content: start;
margin-left: 0;
}
div#rest-pane.component div#center-pane div.ribbon-container {
margin-bottom: 0px;
/*! padding-bottom: 5px; */
border-bottom: 1px solid var(--color-gray-light-buttons);
border-top: 1px solid var(--color-gray-light-buttons);
background-color: var(--color-blue-light-text);
}
div#rest-pane.component div#center-pane div.ribbon-body-container,
div#rest-pane.component div#center-pane div.ribbon-body-container p,
div#rest-pane.component div#center-pane div.ribbon-body-container div.inherited-attributes-container span {
font-family: var(--main-font-family-mono) !important;
}
div#rest-pane.component div#center-pane div.ribbon-body-container div.component {
font-size: 1rem;
}
div#rest-pane.component div#center-pane span.bx {
font-family: boxicons !important;
}
div#rest-pane.component div#center-pane div.split-note-container-widget div.ribbon-container div.ribbon-tab-title {
}
div#rest-pane.component div#center-pane div.split-note-container-widget div.ribbon-container div.ribbon-top-row {
justify-content: space-between;
border: none;
}
div#rest-pane.component div#center-pane .ribbon-button-container {
border: none;
padding: 0.3rem .3rem 0rem;
justify-content: end;
align-content: end;
}
div#rest-pane.component div#center-pane .ribbon-button-container button {
}
div#rest-pane.component div#center-pane div.split-note-container-widget div.ribbon-container div.ribbon-tab-spacer,
div#rest-pane.component div#center-pane div.split-note-container-widget div.ribbon-container div.ribbon-tab-title {
border-radius: 0;
padding: 0.3rem 1rem;
border-bottom: none;
}
div#rest-pane.component div#center-pane div.split-note-container-widget div.ribbon-container div.ribbon-tab-spacer {
display: none;
max-width: 0;
}
div#rest-pane.component div#center-pane div.split-note-container-widget div.ribbon-container div.ribbon-tab-title.active {
color: var(--color-blue-light);
}
div#rest-pane.component div#center-pane div.split-note-container-widget div.ribbon-container div.ribbon-tab-title:hover {
background-color: var(--color-blue-light-alpha);
color: var(--color-blue-light);
}
div#rest-pane.component div#center-pane div.split-note-container-widget div.ribbon-container div.ribbon-tab-title.active:hover {
background-color: var(--color-blue-light-alpha);
color: var(--color-blue-light);
}
div#root-widget div#center-pane .note-paths-widget a {
font-weight: 400;
}
div#root-widget div#center-pane .note-paths-widget ul {
padding: .4rem 0;
}
div#root-widget div#center-pane .note-paths-widget li {
list-style-type: none;
}
div#root-widget div#center-pane .note-paths-widget li::before {
content: "\203A \202F";
}
div#rest-pane.component div#center-pane .button-widget.icon-action {
color: var(--color-gray-medium);
}
/* ----------- FORM ELEMENTS ----------- */
div#root-widget div#center-pane button:not(.bx).btn-primary {
background-color: var(--color-blue-light);
color: white;
}
div#center-pane button:not(.bx).btn-secondary {
background-color: var(--color-gray-dark);
}
div#center-pane .switch {
background: none;
}
div#center-pane .switch .slider {
/*slider background*/
background-color: var(--color-gray-light-buttons);
box-shadow: var(--shadow-light);
border-radius: var(--border-radius-small);
}
div#center-pane .switch .slider::before {
/*slider off state*/
background-color: var(--color-gray-light-buttons-text);
border-radius: var(--border-radius-small);
}
div#center-pane .switch .slider.checked::before {
/*slider on state*/
background-color: var(--color-blue-light);
border-radius: var(--border-radius-small);
}
input#clone-to-note-autocomplete,
.algolia-autocomplete {
}
/*Algolia (Search Autocomplete Form Field)*/
.algolia-autocomplete small {
font-family: var(--main-font-family-mono);
color: var(--color-gray-dark);
display: block;
}
.algolia-autocomplete .aa-suggestion {
border-bottom: var(--border-standard);
}
.algolia-autocomplete .aa-dropdown-menu b {
color: var(--color-blue-light-gradient-1);
text-decoration: underline;
font-weight: normal;
}
/* checkbox background*/
.ck-content .todo-list .todo-list__label > input[checked]::before {
background: var(--color-blue-dark-alpha);
border-radius: var(--border-radius-small);
}
#left-pane input.search-string {
background: white !important;
border: 1px solid var(--color-blue-light);
border-radius: var(--border-radius-small);
border: var(--border-accent-light);
box-shadow: var(--shadow-light) inset;
margin-right: 10px;
}
#left-pane div.quick-search {
border-bottom: var(--border-standard);
padding: unset;
align-content: center;
align-items: center;
}
#left-pane div.quick-search button {
padding: unset;
align-self: center;
margin: 0 10px;
}
div#root-widget div#rest-pane div#center-pane div.split-note-container-widget div.note-split.component {
margin-left: 0;
border-right: var(--border-standard);
}
/* ----------- NOTEBOOK CARDS ----------- */
div#center-pane .note-list {
}
div#center-pane .note-list .note-book-card {
border: var(--border-standard) !important;
border-radius: var(--border-radius-small);
box-shadow: var(--shadow-standard);
padding: 10px;
}
div#center-pane .note-list.list-view .note-book-card {
margin: 5px 0px;
overflow-y: hidden;
}
div#center-pane .note-list.grid-view .note-book-card {
margin: 10px;
}
div#center-pane .note-book-card :is(h1, h2, h3, h4, h5, h6) {
border-bottom: var(--border-standard);
background-color: var(--color-gray-light);
color: var(--color-blue-dark);
display: block;
margin-top: 0;
width: 100%;
padding: 6px;
margin-bottom: 0;
}
div#center-pane .note-book-card h5:first-of-type {
background-color: var(--color-blue-light-text);
border: 1px solid white;
outline: 1px solid var(--color-gray);
}
div#center-pane h5 > span.note-book-title{
font-family: var(--font-headers);
/*! font-weight: normal; */
}
div#center-pane .note-book-card :is(h1, h2, h3, h4, h5, h6).note-book-header span.note-icon {
padding: 3px;
border-radius: 3px;
margin-right: 5px;
}
div.note-list-widget div.note-list-widget-content div.note-list-container div.note-book-card.expanded div.note-book-content div.rendered-note-content pre {
font-size: .9rem;
padding: 3px 6px;
}
.note-book-card.expanded > .note-book-title {
font-weight: 500;
}
.note-list-widget .note-list-widget-content .note-list .note-book-card :is(h1, h2, h3, h4, h5) {
font-size: 1rem;
}
.note-list-container div.note-book-card h5.note-book-title {
margin-top: 0;
}
.note-list-widget .note-list-widget-content .note-list .note-book-card {
background-color: white;
}
.note-list-widget .note-list-widget-content .note-list .note-book-card:hover {
background-color: white;
box-shadow: var(--shadow-standard);
}
.note-list-widget .note-list-widget-content .note-list .note-book-card h5 {
color: var(--color-blue-dark);
}
.note-list-widget .note-list-widget-content .note-list .note-book-card h5 span.rendered-note-attributes {
display: none; /* hide note attributes */
}
.note-list-widget .note-list-widget-content .note-list .note-book-card .note-book-content {
}
.note-list-widget .note-list-widget-content .note-list .note-book-card.expanded .note-book-content {
}
.note-list-widget .note-list-widget-content .note-list .note-book-card .note-book-content a,
.note-list-widget .note-list-widget-content .note-list .note-book-card h5 a {
color: var(--color-blue-dark);
}
.note-list-widget .note-list-widget-content .note-list .note-book-card .note-book-content .rendered-note-content {
color: var(--color-gray-dark);
padding: 0 5px !important;
}
div#center-pane div.note-list-widget div.note-list-widget-content div.note-list.grid-view div.note-list-wrapper div.note-list-container div.note-book-card.block-link.expanded div.note-book-content.type-text {
contain: content;
border: 1px solid lightgray;
margin-top: 10px;
padding: 10px;
}
div#center-pane div.note-list-widget div.note-list-widget-content div.note-list.grid-view div.note-list-wrapper div.note-list-container div.note-book-card.block-link.expanded div.note-book-content.type-text img {
max-width: 100%;
}
/* remove background from small note renders*/
div#center-pane div.note-list-widget div.note-list-widget-content div.note-list-wrapper div.note-list-container div.note-book-card div.note-book-content.type-text div.rendered-note-content div.ck-content :is(h2, h3, h4, h5, pre) {
background: none;
/*! padding-left: 0; */
margin-bottom: 5px;
}
div#center-pane div.note-list-widget div.note-list-widget-content div.note-list-wrapper div.note-list-container div.note-book-card div.note-book-content.type-text div.rendered-note-content div.ck-content :is(h2, h3, h4, h5) {
padding-left: 0;
}
/* ----------- NOTES ----------- */
#center-pane .backlinks-ticker {
background-color: var(--color-gray-light);
color: var(--color-gray-dark-text);
border: var(--border-accent-light);
top: 0;
right: 12px;
width: fit-content;
}
#center-pane .backlinks-items div :is(h2, h3, h4, h5, h6) {
font-size: 1.1rem;
}
#center-pane .backlinks-ticker span.backlinks-count {
font-family: var(--main-font-family-mono);
font-size: .95rem;
}
#center-pane .title-row {
min-height: 4.5rem;
display: flex;
align-items: center;
}
#center-pane .title-row .note-icon-widget {
/*! align-content: baseline; */
display: flex;
margin: 0;
padding: 5px;
}
/* Trilium >= 0.55.1 */
#center-pane div.scrolling-container {
/*! display: flex; */
/*! flex-direction: column; */
/*! justify-content: space-between; */
}
#center-pane .note-detail {
/*! margin: 0; */
/*! padding: 0; */
flex-grow: 1;
/*! display: flex; */
}
div#center-pane div.note-detail div.canvas-widget {
display: grid;
}
div#center-pane div.note-detail div.note-detail-readonly-text
{
border-left: 5px solid var(--color-blue-light);
padding: 2rem 4rem 1rem 2rem;
}
div#center-pane div.note-detail div.note-detail-printable {
}
div#center-pane div.note-detail div.note-detail-editable-text-editor {
}
div#center-pane div.note-detail div.note-detail-editable-text {
/*padding: 20px 25px 5px 25px;*/
padding: 2rem 0 1rem 2rem;
border-left: 5px solid var(--color-orange-dark);
flex-direction: column;
display: flex;
flex-grow: 1;
}
#center-pane .note-detail + .note-list-widget {
padding: 0;
background-color: var(--color-blue-light-text);
border-top: var(--border-standard);
box-shadow: var(--shadow-90deg-inset);
margin-bottom: 0;
margin-right: 0;
display: flex;
flex-direction: column;
flex-shrink: 0;
}
#center-pane .note-list-widget div.note-list.list-view,
#center-pane .note-list-widget div.note-list.grid-view {
}
#center-pane div.note-list.list-view div.note-list-wrapper div.note-list-container {
display: flex;
flex-direction: column;
}
#center-pane .title-row .note-icon-widget button {
color: var(--color-blue-dark);
}
#center-pane .title-row .note-title-widget {
align-self: center;
display: flex;
align-items: center;
}
#center-pane .title-row .note-title-widget input.note-title {
color: var(--color-blue-dark) !important;
font-family: var(--main-font-family-serif);
font-weight: 600;
font-size: 2rem;
/*! box-shadow: none; */
}
#center-pane .title-row .note-title-widget input.note-title.protected {
text-shadow: none;
color: var(--color-gray-medium) !important;
}
#center-pane .title-row .note-title-widget input.note-title.protected {
}
#center-pane .note-detail h2:first-of-type {
margin-top: auto;
}
#center-pane .note-detail p {
color: var(--color-gray-text);
}
#center-pane .note-detail p a {
color: var(--color-blue-dark);
border-bottom: 1px solid var(--color-orange-dark);
}
#center-pane div.note-detail-editable-text div.note-detail-editable-text-editor.ck.ck-content pre,
#center-pane .CodeMirror pre code {
color: var(--color-blue-dark) !important;
padding: 1.5rem;
margin: 1.0rem auto 2.5rem;
background-color: var(--color-gray-light);
border: 1px dotted var(--color-gray);
}
/* embedded notes */
div#center-pane div.scrolling-container div.note-detail section.include-note {
background-color: white;
margin: 1rem 12rem 1rem;
box-shadow: var(--shadow-embedded-notes);
border-radius: var(--border-radius-small);
padding: 20px 30px;
}
#center-pane code {
font-family: var(--main-font-family-mono);
}
div#root-widget div#rest-pane div#center-pane div.note-detail img {
border: 1px solid var(--color-gray);
padding: .5rem;
}
/* FIGURES & IMAGES */
/* figcaption */
div#root-widget div#center-pane div.split-note-container-widget div.note-detail figure > figcaption {
font-style: italic;
background-color: white !important;
}