Adjust read-only footnote styles

everforest-ant-dark.css

@@ -106,7 +106,7 @@ This theme inspired by and meant to be paired with the KDE Plasma theme Ant Dark
 :root{
    /***main body (including CKEditor), modal(options menu), and some code colors (see last section for more code colors)*/
    --text-gray: #D8D8D8;
-   --devils-gray-lol: #666;
+   --devils-gray-lol: #666 /*replace with a grayer version of cool-gray*/;
    --background-gray: #192124;
    --soft-gray: #23272E;
    --sand: #D3C6AA;
@@ -185,8 +185,8 @@ html {
 
    /*notes title and text fields in options menu and find (ctrl+f) search*/
    --input-text-color: var(--sand);
-   /*affects find (ctrl+f) search input when inactive*/
-   --input-background-color: var(--sand);
+   /*affects all form inputs*/
+   --input-background-color: var(--backround-gray);
 
    /*changes the 'x' on the note tabs and the right+click and trilium (icon) menus*/
    --hover-item-text-color: var(--text-gray);
@@ -214,9 +214,9 @@ html {
    /*tabs*/
    --active-tab-background-color: var(--sand);
    --active-tab-text-color: var(--background-gray);
+   --active-tab-hover-background-color: var(--text-gray);
    --inactive-tab-background-color: var(--table-header-gray);
    --inactive-tab-text-color: var(--text-gray);
-   --active-tab-hover-background-color: var(--text-gray);
    --inactive-tab-hover-background-color: var(--soft-gray);
 
    /*general*/
@@ -227,6 +227,13 @@ html {
    --mermaid-theme: dark;
 }
 
+*:focus-visible {
+    outline: var(--sand) auto 1px;
+}
+.component.note-detail, .component.note-list-widget {
+    margin: auto;
+}
+
 
 /*****Image Caption*****/
 .ck-content figure.image>figcaption {
@@ -257,8 +264,11 @@ html {
 
 
 /*****TABS*****/
-.tab-row-widget .note-tab .note-tab-wrapper {
-   height: 46px !important;
+div.tab-row-widget .note-tab .note-tab-wrapper {
+   height: 39px;
+   padding: 5px 5px 2px 11px;
+   margin-top: 1px;
+   border-radius: 8px 8px 0 0;
    font-size: var(--detail-font-size);
    font-family: var(--header-font-family);
 }
@@ -271,11 +281,11 @@ html {
 }
 .note-tab div.note-tab-close.bx.bx-x:hover {
    background: transparent;
-   color: var(--tan);
+   color: var(--tan) !important;
 }
 .note-tab[active] div.note-tab-close.bx.bx-x:hover {
    background: transparent;
-   color: var(--cherry-red);
+   color: var(--cherry-red) !important;
 }
 
 /*fixes the issue of not being able to access widgets in the top bar*/
@@ -285,21 +295,10 @@ html {
 
 
 /*****TOC*****/
-span.toc ol, span.highlights-list ol {
-padding-left: 1.5rem;
-}
-
 /***Only applies if 'Show Position in TOC' widget is in use***/
-.toc-widget span.toc li[style] {
+.toc li.in-view {
    color: var(--tan) !important;
 }
-.toc-widget span.toc li:not([style*="color:"]) {
-   color: inherit !important;
-}
-
-.toc-widget .toc li, .highlights-list > ol > li {
-   text-align: left;
-}
 
 
 /*****Included Notes*****/
@@ -316,10 +315,13 @@ padding-left: 1.5rem;
    font-family: var(--header-font-family);
    font-size: 2rem;
 }
-.ck-content h2 code, .ck-content h2 code b, .ck-content h2 code strong, .ck-content h2 code i, .ck-content h2 code em {
-   font-size: 1.7rem;
+.ck-content h2 code, .ck-content h2 code b, .ck-content h2 code strong, .ck-content h2 code i, .ck-content h2 code em, .ck-content h2 kbd, .ck-content h2 kbd i, .ck-content h2 kbd b, .ck-content h2 kbd strong {
+   font-size: 1.6rem;
    background: transparent;
 }
+.ck-content h2 kbd, .ck-content h2 kbd i, .ck-content h2 kbd b, .ck-content h2 kbd strong {
+ text-decoration: underline;
+}
 
 .ck-content h3 {
    color: #B29556;
@@ -327,10 +329,13 @@ padding-left: 1.5rem;
    font-family: var(--header-font-family);
    font-size: 1.9rem;
 }
-.ck-content h3 code, .ck-content h3 code b, .ck-content h3 code strong, .ck-content h3 code i, .ck-content h3 code em {
-   font-size: 1.6rem;
+.ck-content h3 code, .ck-content h3 code b, .ck-content h3 code strong, .ck-content h3 code i, .ck-content h3 code em, .ck-content h3 kbd, .ck-content h3 kbd i, .ck-content h3 kbd b, .ck-content h3 kbd strong {
+   font-size: 1.4rem;
    background: transparent;
 }
+.ck-content h3 kbd, .ck-content h3 kbd i, .ck-content h3 kbd b, .ck-content h3 kbd strong {
+ text-decoration: underline;
+}
 
 .ck-content h4 {
    color: #E2B24D;
@@ -338,10 +343,13 @@ padding-left: 1.5rem;
    font-family: var(--header-font-family);
    font-size: 1.78rem;
 }
-.ck-content h4 code, .ck-content h4 code b, .ck-content h4 code strong, .ck-content h4 code i, .ck-content h4 code em {
-   font-size: 1.5rem;
+.ck-content h4 code, .ck-content h4 code b, .ck-content h4 code strong, .ck-content h4 code i, .ck-content h4 code em, .ck-content h4 kbd, .ck-content h4 kbd i, .ck-content h4 kbd b, .ck-content h4 kbd strong {
+   font-size: 1.3rem;
    background: transparent;
 }
+.ck-content h4 kbd, .ck-content h4 kbd i, .ck-content h4 kbd b, .ck-content h4 kbd strong {
+ text-decoration: underline;
+}
 
 .ck-content h5 {
    color: #BDA97F;
@@ -349,10 +357,13 @@ padding-left: 1.5rem;
    font-family: var(--header-font-family);
    font-size: 1.65rem;
 }
-.ck-content h5 code, .ck-content h5 code b, .ck-content h5 code strong, .ck-content h5 code i, .ck-content h5 code em {
-   font-size: 1.4rem;
+.ck-content h5 code, .ck-content h5 code b, .ck-content h5 code strong, .ck-content h5 code i, .ck-content h5 code em, .ck-content h5 kbd, .ck-content h5 kbd i, .ck-content h5 kbd b, .ck-content h5 kbd strong {
+   font-size: 1.18rem;
    background: transparent;
 }
+.ck-content h5 kbd, .ck-content h5 kbd i, .ck-content h5 kbd b, .ck-content h5 kbd strong {
+ text-decoration: underline;
+}
 
 .ck-content h6 {
    color: var(--tan);
@@ -360,10 +371,13 @@ padding-left: 1.5rem;
    font-family: var(--header-font-family);
    font-size: 1.53rem;
 }
-.ck-content h6 code, .ck-content h6 code b, .ck-content h6 code strong, .ck-content h6 code i, .ck-content h6 code em {
-   font-size: 1.3rem;
+.ck-content h6 code, .ck-content h6 code b, .ck-content h6 code strong, .ck-content h6 code i, .ck-content h6 code em, .ck-content h6 kbd, .ck-content h6 kbd i, .ck-content h6 kbd b, .ck-content h6 kbd strong {
+   font-size: 1.1rem;
    background: transparent;
 }
+.ck-content h6 kbd, .ck-content h6 kbd i, .ck-content h6 kbd b, .ck-content h6 kbd strong {
+ text-decoration: underline;
+}
 
 
 /*****TABLE*****/
@@ -375,7 +389,7 @@ padding-left: 1.5rem;
    font-family: var(--header-font-family);
 }
 .ck-content .table table, .ck-content .table table td, .ck-content .table table th {
-   border: none;
+   border: none !important;
 }
 .ck-content .table table th {
    font-weight: 600 !important;
@@ -401,16 +415,11 @@ tr:nth-child(odd) {
 }
 .ck-content .table table thead th {
    position: sticky;
-   position: -webkit-sticky;
    top: 0;
    z-index: 1;
 }
-.ck-content .table table tbody th {
-   position: relative;
-}
 .ck-content .table table thead th:first-child {
    position: sticky;
-   position: -webkit-sticky;
    left: 0;
    z-index: 2;
 }
@@ -423,20 +432,21 @@ tr:nth-child(odd) {
 
 /*****TEXT DECORATION*****/
 body strong, body b {
-color:var(--sand);
-font-weight: 700;
+ color:var(--sand);
+ font-weight: 700;
 }
 body em, body i {
-color:var(--sand);
+ color:var(--sand);
 }
 body u {
-   text-decoration-style: dashed;
+    text-decoration-style: dashed;
 }
 body s, body del {
-   text-decoration-style: double;
+    text-decoration-style: double;
 }
 
-/***lists***/
+
+/*****LISTS*****/
 li label {
    display: inline;
    line-height: 2rem;
@@ -450,21 +460,20 @@ li label {
 }
 .ck-content .todo-list .todo-list__label > input:not([checked]):before, .ck-editor__editable.ck-content .todo-list .todo-list__label>span[contenteditable=false]>input:not([checked]):before {
    border: 1px solid var(--cherry-red) !important;
+   background: var(--background-gray);
 }
 
-/***italics and quotes***/
-body em, body i {
- color:var(--sand);
-}
+
+/*****CARDS*****/
+/***blockquotes***/
 .ck-content blockquote {
    color: var(--sand);
    font-weight: 300;
-   font-size: 1.5rem;
+   font-size: 1.65rem;
    overflow: hidden;
-   padding-right: 1.5em;
+   padding-right: 0;
    padding-left: .5em;
-   margin-left: 0;
-   margin-right: 0;
+   margin: 1.5rem 10rem;
    font-style: italic;
    border-left: 3px solid var(--tan);
 }
@@ -472,35 +481,113 @@ body em, body i {
    margin-bottom: 0;
    padding-bottom: .3em;
 }
-.ck-content blockquote i{
-   font-style: normal;
-   color: var(--text-gray);
-}
 .ck-content blockquote b, .ck-content blockquote strong{
    color: var(--text-gray);
    font-weight: 500;
 }
-.ck-content blockquote code, .ck-content blockquote code i, .ck-content blockquote code strong {
-   font-size: 1.1rem;
+.ck-content blockquote i, .ck-content blockquote i > b, .ck-content blockquote i > strong, .ck-content blockquote em, .ck-content blockquote em > b, .ck-content blockquote em > strong {
+   font-style: normal;
+   color: var(--text-gray);
+  }
+.ck-content blockquote code, .ck-content blockquote kbd, .ck-content blockquote code strong, .ck-content blockquote kbd strong {
+ font-size: 1.25rem;
 }
-.ck-content blockquote code strong {
-   font-weight: 700;
+.ck-content blockquote code strong, .ck-content blockquote kbd strong {
+ font-weight: 700;
+}
+
+/***asides***/
+.ck-content .admonition.note {
+   --accent-color: var(--code-attribute) !important;
+   --rgb: 203, 224, 234;
+}
+.ck-content .admonition.tip {
+   --accent-color: var(--code-builtin) !important;
+   --rgb: 195, 154, 208;
+}
+.ck-content .admonition.important {
+   --accent-color: var(--code-def) !important;
+    --rgb: 92, 156, 228;
+}
+.ck-content .admonition.caution {
+   --accent-color: var(--cherry-red) !important;
+   --rgb: 255, 48, 48;
+}
+.ck-content .admonition.warning {
+   --accent-color: var(--code-var) !important;
+   --rgb: 210, 158, 88;
+}
+.ck-content aside.admonition {
+   /*--accent-color: var(--card-border-color);*/
+   --card-background-color: rgba(var(--rgb), .12);
+   border: none;
+   border-left: 3px solid var(--accent-color);
+   box-shadow: var(--card-box-shadow);
+   background: var(--card-background-color);
+   border-radius: 0;
+   padding: 0;
+   margin: 1.5rem 5rem;
+   position: relative;
+   padding-left: 2em;
+   overflow: hidden;
+   font-weight: 300;
+   font-size: 1.35rem;
+}   
+.ck-content aside.admonition::before {
+   color: var(--accent-color);
+   font-family: boxicons !important;
+   position: absolute;
+   top: 0;
+   left: .5em;
+}
+
+/***footnotes***/
+/*inline*/
+span.footnote-reference > sup > a {
+    font-weight: 100;
+    font-size: .9em;
+}
+/*block*/
+div.footnote-section.ck-widget, ol.footnote-section.footnotes {
+   border: none;
+   border-top: 1px solid var(--devils-gray-lol);
+   border-radius: 0;
+   counter-reset: footnote-counter;
+   margin: 2.5rem 0;
+   padding: 10px 0;
+   opacity: 0.9;
+   font-size: 1.2rem;
+}
+.ck-content span.footnote-back-link {
+    margin-right: 0;
+    position: relative;
+    top: 0;
+}
+.ck-content li.footnote-item:before {
+    content: counter(footnote-counter) ". ";
+    display: inline-block;
+    min-width: 25px;
+    position: relative;
+    right: 0.2em;
+    text-align: right;
+    overflow: hidden;
+    margin-left: -5px;
 }
 
 
 /*****LINKS*****/
 body a *, a.ck-widget span {
-   color: var(--link-color);
+	color: var(--link-color);
 }
-.ck-content a:hover, a.no-tooltip-preview:hover {
-   text-decoration-style: double !important;
+.ck-content a:hover {
+    text-decoration-style: double !important;
 }
 .ck-content a[href^="#root"]:not(.ck-widget) {
-   text-decoration: underline dotted;
+    text-decoration: underline dotted;
 }
 .ck-content a:not([href^="#"],[href^="https://"],[href^="http://"]) {
-   color: var(--cherry-red);
-   text-decoration: underline wavy 1px;
+    color: var(--cherry-red);
+    text-decoration: underline wavy 1px;
 }
 
 
@@ -536,6 +623,9 @@ div.title-bar-buttons.component button, button.icon-action, .icon-action {
    color: var(--tan) !important;
    border: none !important;
 }
+#launcher-pane button.launcher-button {
+   padding: 0;
+}
 
 /***Calendar***/
 div.dropdown-menu.dropdown-menu-right > div.calendar-dropdown-widget > div.calendar-body > a.calendar-date:hover, .calendar-dropdown-widget .calendar-btn:hover {
@@ -572,11 +662,6 @@ button.tree-floating-button {
    font-size: 1.5rem !important;
 }
 
-/***Trilium icon***/
-body .global-menu-button {
-   background-image: url("/assets/vX/images/icon-grey.png");
-}
-
 
 /*****INPUT FIELDS*****/
 /***password and options menu fields***/
@@ -633,14 +718,17 @@ input.form-control.note-autocomplete.note-autocomplete-input.aa-input {
 /*****BUTTONS*****/
 /***modal buttons***/
 button.help-button {
-   color: var(--sand);
-   padding: 0;
+    color: var(--sand);
+    font-size: 1.7rem;
 }
 button.help-button:hover {
-   color: var(--tan);
+    color: var(--tan);
+}
+button.btn-close {
+    filter: invert(1)
 }
 
-/*edit button*/
+/***edit button***/
 .bx-edit-alt {
    height: 40px;
 }
@@ -774,7 +862,7 @@ div.backlinks-items div:hover {
    margin: 5px 0 5px 1px !important;
    border-radius: var(--button-border-radius);
 }
-.relation-map-buttons > button:hover, .relation-map-buttons > .btn-group button:hover, button.copy-image-reference-button:hover, button.export-mermaid-button:hover {
+.relation-map-buttons > button:hover, .relation-map-buttons > .btn-group button:hover, button.copy-image-reference-button:hover, button.export-mermaid-button:hover, .floating-buttons-children > button:hover, .floating-buttons-children .floating-button:hover, div.content-floating-buttons button.bx:hover, button.close-floating-buttons-button:hover {
    border: none;
    background: transparent !important;
    color: var(--tan);
@@ -788,9 +876,20 @@ div.backlinks-items div:hover {
    border-radius: 100px;
    margin: 5px;
 }
-.close-floating-buttons-button:hover {
-   border: none !important;
-   color: var(--cherry-red) !important;
+
+.button-widget.bx.component.bx-pencil.visible, .button-widget.bx.component.visible.bx-lock-alt {
+ padding: 5px 9px 30px;
+}
+div.content-floating-buttons.bottom-right {
+    bottom: 5px;
+    right: 10px;
+}
+div.content-floating-buttons button.bx {
+    font-size: 130%;
+    padding: 4px;
+    width: 38px;
+    height: 34px;
+    border: none;
 }
 
 
@@ -798,6 +897,10 @@ div.backlinks-items div:hover {
 .attr-help td {
    color: var(--text-gray) !important;
 }
+.ck.ck-balloon-panel.ck-balloon-panel_visible {
+    display: block;
+    z-index: 100000;
+}
 
 
 /*****DELETION ALERT*****/
@@ -810,7 +913,7 @@ div.backlinks-items div:hover {
 
 /*****CODE IN TEXT NOTES)*****/
 /***code blocks***/
-.ck-content pre {
+.ck-content pre, .ck-content pre.hljs {
    background: var(--soft-gray);
    font-size: 0.95rem;
    border-color: var(--soft-sea-green);
@@ -828,18 +931,107 @@ pre::after{
    letter-spacing: 1px;
 }
 
-/***inline code***/
+/***inline code and kbd***/
 .ck-content code, .ck-content code i, .ck-content code strong  {
    font-size: .95rem;
    background: var(--soft-gray);
    color: var(--soft-sea-green) !important;
    letter-spacing: 1px;
-   padding: 0;
+   padding: .1rem .3rem;
+   border-radius: .25rem;
 }
 .ck-content .ck-code_selected {
    background-color: var(--code-select-gray) !important;
    letter-spacing: 1px;
 }
+.ck-content kbd, .ck-content kbd i, .ck-content kbd strong {
+   font-size: .95rem;
+   letter-spacing: 1px;
+   padding: .1rem .3rem;
+   border-radius: .25rem;
+   background-color: var(--table-header-gray);
+   color: var(--sand);
+}
+
+/***Highlight.js***/
+pre code.hljs {
+   display:block;
+   overflow-x:auto;
+   padding:1em;
+}
+code.hljs {
+   padding:3px 5px;
+}
+.hljs{
+   background: var(--main-background);
+   color: var(--soft-sea-green) !important;
+}
+.hljs-number {
+   color: var(--code-number) !important;
+}
+.hljs-selector-class {
+   color: var(--code-class) !important;
+}
+.hljs-selector-pseudo {
+   color: var(--code-pseudo) !important;
+}
+.hljs-keyword {
+   color: var(--code-keyword) !important;
+}
+.hljs-meta {
+   color: var(--code-meta) !important;
+}
+.hljs-title,.hljs-property {
+   color: var(--code-def) !important;
+}
+.hljs-variable,.hljs-params,.hljs-subst {
+   color: var(--code-var) !important;
+}
+.hljs-comment,.hljs-quote {
+   color: var(--code-comment) !important;
+}
+.hljs-name,.hljs-name>.hljs-tag,.hljs-selector-tag,.hljs-tag,.hljs-deletion,.hljs-selector-attr {
+   color: var(--code-tag) !important;
+}
+.hljs-attribute {
+   color: var(--code-attribute) !important;
+}
+.hljs-addition,.hljs-literal,.hljs-section,.hljs-string.hljs-string>.hljs-tag,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-regexp {
+   color: var(--code-string) !important;
+}
+.hljs-built_in {
+   color: var(--code-builtin) !important;
+}
+.hljs-doctag,.hljs-attr,.hljs-attr>.hljs-tag,.hljs-bullet,.hljs-link,.hljs-symbol {
+   color: var(--soft-sea-green) !important;
+}
+.hljs-emphasis {
+   font-style:italic;
+}
+.hljs-strong {
+   font-weight:700;
+}
+
+
+/*****ZEN MODE*****/
+.zen div.title-bar-buttons {
+    margin-left: 50px;
+}
+/*hide none-essential title-bar buttons*/
+.zen .title-bar-buttons > :not(.top-btn,.minimize-btn,.maximize-btn,.close-btn) {
+	display: none;
+}
+/*hide nonessential center pane widgets*/
+.zen #center-pane > :not(.split-note-container-widget) {
+	display: none !important;
+}
+/*show right pane*/
+body.zen div.gutter {
+    display: block !important;
+}
+body.zen div#right-pane:not(.hidden-int) {
+	display: flex !important;
+}
 
 
 /*****CKEDITOR*****/
@@ -946,169 +1138,7 @@ body {
 }
 
 
-/*****CODEMIRROR****/
-/******************************************************************
-NOTE: comments for this section are for how they appear in CSS code notes unless otherwise noted. All code notes have the same color theme, but the application may be different. Some elements are affected the same way accross all code notes (i.e. all strings appear the same across code notes and as do comments, variables, and functions).
-******************************************************************/
-
-/***general appearance***/
-/*'...line' is for regular code notes text, not sure what '...line-like' is for*/
-.CodeMirror pre.CodeMirror-line,
-.CodeMirror pre.CodeMirror-line-like {
-   color: var(--text-gray);
-}
-
-.CodeMirror-linenumber {color: var(--devils-gray-lol);}
-.CodeMirror-cursor {
-   border-left: 1px solid var(--devils-gray-lol);
-}
-
-/***highlighted and selected text in code notes***/
-.CodeMirror-selected {
-  background-color: var(--code-select-gray);
-}
-.CodeMirror-focused .CodeMirror-selected {
-   background-color: var(--code-select-gray);
-}
-.cm-s-default .cm-matchhighlight{
-   color: var(--text-gray) !important;
-   background-color: var(--table-header-gray);
-}
-
-/***general elements***/
-.cm-s-default .cm-atom {color: var(--code-number);} /*fonts and colors (code not words)*/
-.cm-s-default .cm-def {color: var(--code-def);} /*@ and class definitions (php)*/
-.cm-s-default .cm-qualifier {color: var(--code-class);} /*class*/
-.cm-s-default .cm-builtin {color: var(--code-builtin);} /*id-selectors*/
-.cm-s-default .cm-tag {color: var(--code-tag);} /*html tags*/
-.cm-s-default .cm-meta {color: var(--code-meta);}  /*meta (browser compatability) tags*/
-.cm-s-default .cm-comment {color: var(--code-comment);} /*comments*/
-.cm-s-default .cm-number {color: var(--code-number);} /*numbers including units, not including color codes*/
-.cm-s-default .cm-keyword {color: var(--code-keyword);} /*color names and keywords*/
-.cm-s-default .cm-attribute {color: var(--code-attribute);} /*print keyword*/
-
-/***variables***/
-.cm-s-default .cm-punctuation, .cm-s-default .cm-operator {}
-.cm-s-default .cm-property{color: var(--code-attribute);}
-.cm-s-default .cm-variable, .cm-s-default .cm-variable-2 {color: var(--code-var);} /*custom properties and php variables*/
-.cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: var(--code-pseudo);} /*pseudo elements and classes*/
-
-/***strings***/
-.cm-s-default .cm-string {color: var(--code-string);}
-.cm-s-default .cm-string-2 {color: var(--code-string);} /*Regex and strings that can contain other strings*/
-
-/***brackets and parentheses***/
-div.CodeMirror span.CodeMirror-matchingbracket {color: #92D652;}
-div.CodeMirror span.CodeMirror-nonmatchingbracket {color: var(--cherry-red);}
-
-/***code errors***/
-.cm-s-default .cm-error {color: var(--cherry-red);}
-.cm-invalidchar {color: var(--cherry-red);}
-
-
 /*****ADDONS*****/
-/***Highlight.js***/
-pre code.hljs {
-  display:block;
-  overflow-x:auto;
-  padding:1em;
-}
-code.hljs {
-  padding:3px 5px;
-}
-.hljs{
-  background: var(--main-background);
-  color: var(--soft-sea-green) !important;
-}
-.hljs-number {
-  color: var(--code-number) !important;
-}
-.hljs-selector-class {
-  color: var(--code-class) !important;
-}
-.hljs-selector-pseudo {
-  color: var(--code-pseudo) !important;
-}
-.hljs-keyword {
-  color: var(--code-keyword) !important;
-}
-.hljs-meta {
-  color: var(--code-meta) !important;
-}
-.hljs-title,.hljs-property {
-  color: var(--code-def) !important;
-}
-.hljs-variable,.hljs-params,.hljs-subst {
-  color: var(--code-var) !important;
-}
-.hljs-comment,.hljs-quote {
-  color: var(--code-comment) !important;
-}
-.hljs-name,.hljs-name>.hljs-tag,.hljs-selector-tag,.hljs-tag,.hljs-deletion,.hljs-selector-attr {
-  color: var(--code-tag) !important;
-}
-.hljs-attribute {
-  color: var(--code-attribute) !important;
-}
-.hljs-addition,.hljs-literal,.hljs-section,.hljs-string.hljs-string>.hljs-tag,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-regexp {
-  color: var(--code-string) !important;
-}
-.hljs-built_in {
-  color: var(--code-builtin) !important;
-}
-.hljs-doctag,.hljs-attr,.hljs-attr>.hljs-tag,.hljs-bullet,.hljs-link,.hljs-symbol {
-  color: var(--soft-sea-green) !important;
-}
-.hljs-emphasis {
-  font-style:italic;
-}
-.hljs-strong {
-  font-weight:700;
-}
-
-/***Zen Mode***/
-/*Use the button or alt+z to toggle it on and off*/
-/* hide launcher buttons*/
-.zen-mode button.bx-chevrons-left,.zen-mode #launcher-pane > .component > :not(button.component.button-widget.bx-spa) {
-   display: none !important;
-}
-/*hide note tree*/
-.zen-mode #left-pane {
-   display: none !important;
-}
-/*hide ribbon buttons*/
-.zen-mode .ribbon-container {
-   display: none !important;
-}
-/*hide note title*/
-.zen-mode .title-row {
-   display: none !important;
-}
-/*hide note tabs*/
-.zen-mode .tab-row-widget .tab-row-widget-container {
-   display: none !important;
-}
-/*hide none-essential title-bar buttons*/
-.zen-mode .title-bar-buttons > :not(.top-btn,.minimize-btn,.maximize-btn,.close-btn) {
-   display: none;
-}
-/*hide preview of child notes*/
-.zen-mode .note-list-widget {
-   display: none !important;
-}
-/*hide backlink, code buttons, etc.*/
-.zen-mode .floating-buttons-children {
-   display: none !important;
-}
-/*hide nonessential center pane widgets*/
-.zen-mode #center-pane > :not(.split-note-container-widget) {
-   display: none !important;
-}
-/*hide right pane*/
-.zen-mode #right-pane {
-   display: none !important;
-}
-
 /***Theme Switcher***/
 .theme-selection.component .switch {
    top: 5.75px !important;
@@ -1128,29 +1158,3 @@ code.hljs {
 .chat-wrapper .header_face:hover {
    color: var(--sand) !important;
 }
-
-/***Breadcrumbs***/
-#breadcrumbs-bar {
-   display: flex;
-   align-items: center;
-   gap: 10px;
-   padding: 10px;
-   border-top: 1px solid var(--main-border-color);
-   border-bottom: 1px solid var(--main-border-color);
-   contain: none;
-   overflow: auto;
-}
-#breadcrumbs span a {
-   white-space: pre;
-   overflow: hidden;
-   text-overflow: ellipsis;
-   display: inherit;
-}
-#breadcrumbs a {
-   display: inline-flex;
-   line-height: 1;
-   padding: 5px 10px;
-   background-color: rgba(252, 251, 179, 0.05) !important;
-   border-radius: 12px;
-   transition: transform 200ms ease, background-color 200ms ease, filter 200ms ease;
-}