custom-dark-theme.css

/*
Custom Dark Mode based off of:
https://github.com/SiriusXT/trilium-theme-blue
dark-mode version:0.7.1 for trilium:>0.58.4
*/


/* 

    It's in Gitea at: https://gitea.perfectra1n.com/perf3ct/custom-trilium-themes/src/branch/master/custom-dark-theme.css

    
    Changes:
    - Made the width of quote blocks shorter
    - Removed the radius of the note button's colors
    - Removed the 'text-indent: 2em;' for each paragraph
    - Set -more-accented-background-color: transparent;
    - Disable "font-size: 80% !important;" tweak so top bar buttons didn't break
    - Removed the `div.tree:not()` statements so that the coloring would work on hoisted notes.
    - Change the `--link-color` to #85c8ff
    - Add some margin-top and margin-bottom to span.ck-list-bogus-paragraph to provide some space between the crowded lists
    - Changed the 0.1rem space to 1rem that existed between paragraphs 
    - Added some spacing to the note tabs at the top
    - Fix for TriliumNext icon
    - Remove weird note title color
	- Added word wrapping for new code block
    - Stop doing word wrapping since Trilium supports just disabling it in settings lol
*/

body {
  --h2-background-color: rgb(105 154 187 / 50%);
  --h3-background-color: rgb(112 175 164 / 40%);
  --h4-background-color: rgb(215 187 162 / 40%);
  --h5-background-color: rgb(190 186 206 / 40%);
  --h6-background-color: rgb(197 197 197 / 40%);
  --ck-color-table-focused-cell-background: #1E1E1E;
  --ck-color-focus-border: #bfbfbf;
}

:root {
  --theme-style: dark;
  --main-background-color: #1E1E1E;
  --main-text-color: #d4d4d4;
  --main-border-color: #333333;
  --more-accented-background-color: transparent;

  --accented-background-color: #222;

  --button-background-color: transparent;
  --button-border-color: #333;
  --button-text-color: currentColor;
  --button-border-radius: 3px;
  --button-disabled-background-color: transparent;
  --button-disabled-text-color: #999;

  --primary-button-background-color: #0E639C50;
  --primary-button-text-color: #ccc;
  --primary-button-border-color: transparent;

  --muted-text-color: #bbb;

  --input-text-color: #ccc;


  --hover-item-text-color: #ccc;
  --hover-item-background-color: transparent;
  --hover-item-border-color: #333;

  --active-item-text-color: #ccc;
  --active-item-background-color: #4682B430;
  --active-item-border-color: transparent;

  --menu-text-color: #ccc;
  --menu-background-color: #222;

  --modal-background-color: #333;
  --modal-backdrop-color: #444;

  --left-pane-background-color: #252526;
  --left-pane-text-color: #AAAAAA;

  --launcher-pane-background-color: #333333;
  --launcher-pane-text-color: rgba(255, 255, 255, 0.4);

  --active-tab-background-color: rgb(30, 30, 30);
  --active-tab-hover-background-color: rgb(30, 30, 30);
  --active-tab-text-color: rgb(255, 255, 255);

  --inactive-tab-background-color: rgb(51, 51, 51);
  --inactive-tab-hover-background-color: rgb(51, 51, 51);
  --inactive-tab-text-color: rgba(255, 255, 255, 0.5);

  --scrollbar-border-color: #333;
  --tooltip-background-color: #333;
  --link-color: #85c8ff;

  --mermaid-theme: dark;
  --ck-color-code-block-label-background: #333;


}



body ::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

body .CodeMirror {
  filter: invert(88%) hue-rotate(180deg);
}

div.note-book-content.type-canvas>div.rendered-note-content>svg {
  filter: invert(88%) hue-rotate(180deg);
}

.excalidraw.theme--dark {
  --theme-filter: invert(80%) hue-rotate(180deg) !important;
}


div#launcher-pane .global-menu-button {
  filter: invert(0.5);
}


body div.CodeMirror-vscrollbar::-webkit-scrollbar-thumb {
  border-radius: 5px !important;
  background: #ddd !important;
  border-color: #ccc;
}

div.tree li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n) {
  border-left: 3px solid #f4a6a670;

}

div.tree li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+1) {
  border-left: 3px solid #99d0df70;

}

div.tree li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+2) {
  border-left: 3px solid #b4afdf70;

}

div.tree li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+3) {
  border-left: 3px solid #abd58b70;

}

div.tree li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+4) {
  border-left: 3px solid #f3d27570;

}

div.tree li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+5) {
  border-left: 3px solid #bccdf170;

}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n):hover {
  background-color: #f4a6a607 !important;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+1):hover {
  background-color: #99d0df07 !important;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+2):hover {
  background-color: #b4afdf07 !important;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+3):hover {
  background-color: #abd58b07 !important;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+4):hover {
  background-color: #f3d27507 !important;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+5):hover {
  background-color: #bccdf107 !important;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n)>span.fancytree-node:hover {
  background-color: #f4a6a607 !important;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+1)>span.fancytree-node:hover {
  background-color: #99d0df07 !important;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+2)>span.fancytree-node:hover {
  background-color: #b4afdf07 !important;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+3)>span.fancytree-node:hover {
  background-color: #abd58b07 !important;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+4)>span.fancytree-node:hover {
  background-color: #f3d27507 !important;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+5)>span.fancytree-node:hover {
  background-color: #bccdf107 !important;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n)>span.fancytree-node.fancytree-active {
  background-color: #f4a6a610 !important;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+1)>span.fancytree-node.fancytree-active {
  background-color: #99d0df10 !important;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+2)>span.fancytree-node.fancytree-active {
  background-color: #b4afdf10 !important;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+3)>span.fancytree-node.fancytree-active {
  background-color: #abd58b10 !important;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+4)>span.fancytree-node.fancytree-active {
  background-color: #f3d27510 !important;
}

li.fancytree-lastsib ul li[role='treeitem']:nth-of-type(6n+5)>span.fancytree-node.fancytree-active {
  background-color: #bccdf110 !important;
}


div.note-detail.component .hljs-built_in,
div.note-detail.component .hljs-keyword,
div.note-detail.component .hljs-name,
div.note-detail.component .hljs-selector-tag,
div.note-detail.component .hljs-tag {
  color: #4aa8b7;
}

.hljs-addition,
.hljs-attribute,
.hljs-literal,
.hljs-section,
.hljs-string,
.hljs-template-tag,
.hljs-template-variable,
.hljs-title,
.hljs-type {
  color: #bd3c16;
}

div.note-detail.component .ck-content code {
  background-color: var(--more-accented-background-color);
}

.ck-content pre {
  border: 1px solid var(--more-accented-background-color) !important;
  border-radius: 0px !important;
  background-color: var(--accented-background-color);
}


div.tooltip-inner {
  box-shadow: 0px 0px 0px 0px #000 !important;
}

div.modal.mx-auto.component {
  background-color: #00000085 !important;
}


div.component.note-split.type-text h1 {
  padding-left: 0.4em;
  border-left: 9px solid rgba(0, 0, 0, 1);
  border-bottom: 1px solid rgba(0, 0, 0, 1);
}


div.component.note-split.type-text h2:not(div.note-list-widget h2) {
  background: var(--h2-background-color);
  border-radius: 6px 6px 6px 6px;


  padding: 5px 0 2px 10px;
  text-shadow: 2px 2px 3px var(--main-background-color);
}

div.component.note-split.type-text h3:not(div.note-list-widget h3) {
  background: var(--h3-background-color);
  border-radius: 6px 6px 6px 6px;


  padding: 4px 0 2px 10px;
  text-shadow: 2px 2px 3px var(--main-background-color);
}

div.component.note-split.type-text h4:not(div.note-list-widget h4) {
  background: var(--h4-background-color);
  border-radius: 6px 6px 6px 6px;


  padding: 3px 0 2px 10px;
  text-shadow: 2px 2px 3px var(--main-background-color);
}

div.component.note-split.type-text h5:not(.note-book-header):not(div.note-list-widget h5) {
  background: var(--h5-background-color);
  border-radius: 6px 6px 6px 6px;


  padding: 2px 0 2px 10px;
  text-shadow: 2px 2px 3px var(--main-background-color);
}

div.component.note-split.type-text h6:not(div.note-list-widget h6) {
  background: var(--h6-background-color);
  border-radius: 6px 6px 6px 6px;


  padding: 1px 0 2px 10px;
  text-shadow: 2px 2px 3px var(--main-background-color);
}


div.component.note-split.type-text h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: .3rem !important;
  margin-bottom: .15rem !important;
}





div.toc-widget span.toc>ol>li {
  color: var(--h2-background-color);
}

div.toc-widget span.toc>ol>ol>li {
  color: var(--h3-background-color);
}

div.toc-widget span.toc>ol>ol>ol>li {
  color: var(--h4-background-color);
}

div.toc-widget span.toc>ol>ol>ol>ol>li {
  color: var(--h5-background-color);
}

div.toc-widget span.toc>ol>ol>ol>ol>ol>li {
  color: var(--h6-background-color);
}

div.toc-widget .toc ol {
  padding-left: 15px;
}




div#rest-pane.component div.tab-row-widget.component {
  box-shadow: 0px 1px #111;
}

div.quick-search.input-group.input-group-sm.component {
  box-shadow: 0px 1px #111;
}

div.note-book-card.block-link.expanded {
  box-shadow: 1px 1px 1px 0px #111;
}

::-webkit-scrollbar-thumb {
  background-color: #222 !important;
}

div#toast-container {
  right: 0px !important;
  bottom: 0px !important;
  top: auto !important;
  width: auto !important;
}

.switch-widget span.slider.checked {
  background-color: var(--primary-button-background-color) !important;
}

div.note-detail div.ck-horizontal-line.ck-widget {
  margin-top: 10px !important;
}

.ck-content hr {
  margin-bottom: 10px !important;
}

body,
span.fancytree-title {
  font-family: var(--detail-font-family) !important;
  top: 0px !important;
}

span:not(.fancytree-active) span.fancytree-title {
  font-weight: 500 !important;
}

.global-menu {

  width: auto !important;
}

#launcher-container div.dropdown.right-dropdown-widget.dropright.component>button {
  padding-left: 8px !important;
}

ul.fancytree-container li {
  contain: initial;
}


div#launcher-pane.component {
  width: 44px !important;
}

#launcher-pane .launcher-button {

  padding: initial !important;
}

div.dropdown.global-menu.dropright.component>.icon-action {
  border: 0px;
}

.dropdown,
.dropleft,
.dropright,
.dropup {
  position: initial;
}

.sync-status .sync-status-icon {
  padding: 13px 8px 8px 8px;
}

.sync-status .sync-status-icon span {
  padding: 13px 8px 8px 8px;
}

div.quick-search.input-group.input-group-sm.component {
  align-content: center;
}

span.fancytree-node:not(.fancytree-folder) .fancytree-expander::before {
  content: "\ec21" !important;
  visibility: visible !important;
  color: var(--left-pane-text-color) !important;
  opacity: 0.1;
}

#center-pane .title-row .note-icon-widget button {
  display: flex;
  margin: 0;
}

input.note-title {
  font-family: var(--detail-font-family) !important;
  font-weight: bold;
}

.bx-dock-right::before {
  vertical-align: middle;
}

div#rest-pane>div.component {
  height: 4rem !important;
  margin-bottom: 1px !important;
}

.note-new-tab {
  width: 30px !important;
  height: 30px !important;
  font-size: 19px !important;
}

div#rest-pane div.tab-row-widget div.tab-row-widget-container div.note-tab div.note-tab-wrapper {
  padding: 1rem 1rem 1rem 1rem !important;
  height: 2rem !important;
}

div.note-tab-wrapper div.note-tab-close.bx {
  padding-bottom: 1rem;
}

div#rest-pane div.tab-row-widget div.tab-row-widget-container div.note-tab div.note-tab-wrapper>div:hover {
  background: none;
}

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 ";
  margin-right: 5px;
}

.fancytree-node {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

span.fancytree-node.fancytree-active {

  border-radius: 0px !important;
  border: 0px !important;
}

span.button-widget.icon-action.bx.component.bx-history,
.ribbon-button-container .icon-action {
  padding-top: 5px !important;
}

span.fancytree-node:hover {
  border: 0px !important;
}

span.fancytree-node {
  border: 0px !important;
}

/*
I think this was breaking the top bar on Tril

.title-bar-buttons div button.icon-action {
  font-size: 80% !important;
}
*/


.title-bar-buttons {
  font-size: 12px;
}

div.note-detail p {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;

  text-align: justify;
  text-justify: distribute;
}

.note-detail-editable-text *:not(figure,.include-note):first-child span.ck-list-bogus-paragraph {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

span.ck-list-bogus-paragraph {
  margin-bottom: 0.5rem !important;
}

div.note-detail p span.bx {
  display: inline;
}

dl,
ol,
ul {
  padding-left: 2em;
}

div.note-detail ul>li,
ol>li {
  text-align: justify;
  text-justify: distribute;
}

blockquote>p {
  text-indent: 0em;
}

p>span.ck-math-tex {
  text-indent: 0em;
}


.note-detail {
  line-height: 1.35;
}


.ck-content p>span.image-inline {
  vertical-align: middle;

}


.ck-content figure.image {
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
}


div.note-detail.component span.image-inline {
  border: 1px dashed var(--main-border-color);
}

div.note-detail.component figure.image {
  border: 1px dashed var(--main-border-color);
}

::selection {
  background-color: rgba(70, 130, 180, 0.5) !important;

}


.note-properties-widget {
  padding: 0px !important;
}


.note-icon-widget.dropdown.component {
  padding-top: 1.5px !important;
}


.basic-properties-widget>* {
  margin-top: 0px !important;
}

div.attribute-list {
  margin-top: 0px !important;
}


.basic-properties-widget {
  padding: 0px 12px 0px 12px !important;
}

.component {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
}

.inherited-attributes-container {
  padding: 0px 12px 0px 12px !important;
}

.add-new-attribute-button,
.save-attributes-button {
  bottom: 0px !important;
}


#center-pane div.note-detail-editable-text div.note-detail-editable-text-editor.ck.ck-content pre,
#center-pane .CodeMirror pre code {

  padding: 0.2em;

  margin: 0.5rem auto 0.5rem;


  border-radius: 5px;
}

.ck.ck-editor__editable pre[data-language]::after {
  opacity: 0.5;
}


span.katex * {
  font-family: KaTeX_Main !important;
  font: KaTeX_Main, Times New Roman, serif !important;
}

.katex-display {
  margin: 0.1rem 0;
}


.ck-content blockquote {
  font-style: initial !important;
  color: #708faf !important;
  border-left: 5px solid var(--main-border-color) !important;
  background: none repeat scroll 0 0 rgba(102, 128, 153, .1) !important;
  margin: 3rem !important;
}

code {
  font-size: 100% !important;
}

blockquote>p {
  margin-bottom: 0 !important;
  text-indent: 1.7em !important;
}


.ck-content .table {
  margin-top: 0.1rem;
  margin-bottom: 0.1rem;
}

.ck-content .table table td,
.ck-content .table table th {
  border: 1px solid var(--main-border-color) !important;
}

.ck-content .table table {
  border: 1px solid var(--main-border-color) !important;
}


.form-control {
  border: 1px solid var(--main-border-color) !important;
}

.input-group-text {
  border: 1px solid var(--main-border-color) !important;
}

div.shared-info-widget.alert.alert-warning.component {
  margin-top: 0;
  margin-bottom: 0;
}


:focus-visible {
  outline: 2px solid var(--main-border-color);
}


div.note-title-widget.component>input.note-title {
  margin-top: 2px;
}

div.note-icon-widget>button.bx.bx-code.note-icon {
  margin-top: 2px !important;
}

span.fancytree-active .fancytree-title {
  font-weight: normal;
}