From 693131b1b674a8c17faadd64bd55ea7954844635 Mon Sep 17 00:00:00 2001 From: lolabird <89228316+Lolabird@users.noreply.github.com> Date: Sat, 19 Apr 2025 15:23:31 -0600 Subject: [PATCH 01/14] Fix tab styles --- next_stellar-dark.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/next_stellar-dark.css b/next_stellar-dark.css index 0c62b2a..2993531 100644 --- a/next_stellar-dark.css +++ b/next_stellar-dark.css @@ -246,8 +246,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); } From 1f9b9daf01c5474bd47cb4dc0a7e8e0283732708 Mon Sep 17 00:00:00 2001 From: lolabird <89228316+Lolabird@users.noreply.github.com> Date: Sat, 17 Jan 2026 13:39:15 -0700 Subject: [PATCH 02/14] Remove and rename files --- og_stellar-dark.css | 1113 --------------------- next_stellar-dark.css => stellar-dark.css | 0 2 files changed, 1113 deletions(-) delete mode 100644 og_stellar-dark.css rename next_stellar-dark.css => stellar-dark.css (100%) diff --git a/og_stellar-dark.css b/og_stellar-dark.css deleted file mode 100644 index 3793223..0000000 --- a/og_stellar-dark.css +++ /dev/null @@ -1,1113 +0,0 @@ -/****************************************************************** -Stellar Dark by Octavia N. (https://github.com/Lolabird/stellar-dark-theme-trilium) - -Inspired by https://github.com/Engr-AllanG/trilium-theme-Neon_Dark -******************************************************************/ -/*****FONT IMPORTS*****/ -@font-face{ - font-family: 'Fira Mono'; - src:url('/custom/themes/StellarDark/FiraMono-Regular.woff2') format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face{ - font-family: 'Fira Mono'; - src:url('/custom/themes/StellarDark/FiraMono-Bold.woff2') format("woff2"); - font-weight: 600; - font-style: normal; -} -@font-face{ - font-family: 'Fira Sans'; - src:url('/custom/themes/StellarDark/FiraSans-Light.woff2') format("woff2"); - font-weight: 300; - font-style: normal; -} -@font-face{ - font-family: 'Fira Sans'; - src:url('/custom/themes/StellarDark/FiraSans-LightItalic.woff2') format("woff2"); - font-weight: 300; - font-style: oblique; -} -@font-face{ - font-family: 'Fira Sans'; - src:url('/custom/themes/StellarDark/FiraSans-Regular.woff2') format("woff2"); - font-weight: 400; - font-style: normal; -} -@font-face{ - font-family: 'Fira Sans'; - src:url('/custom/themes/StellarDark/FiraSans-Italic.woff2') format("woff2"); - font-weight: 400; - font-style: oblique; -} -@font-face{ - font-family: 'Fira Sans'; - src:url('/custom/themes/StellarDark/FiraSans-Medium.woff2') format("woff2"); - font-weight: 500; - font-style: normal; -} -@font-face{ - font-family: 'Fira Sans'; - src:url('/custom/themes/StellarDark/FiraSans-MediumItalic.woff2') format("woff2"); - font-weight: 500; - font-style: oblique; -} -@font-face{ - font-family: 'Fira Sans'; - src:url('/custom/themes/StellarDark/FiraSans-SemiBold.woff2') format("woff2"); - font-weight: 600; - font-style: normal; -} -@font-face{ - font-family: 'Fira Sans'; - src:url('/custom/themes/StellarDark/FiraSans-SemiBoldItalic.woff2') format("woff2"); - font-weight: 600; - font-style: oblique; -} -@font-face{ - font-family: 'Fira Sans'; - src:url('/custom/themes/StellarDark/FiraSans-Bold.woff2') format("woff2"); - font-weight: 700; - font-style: normal; -} -@font-face{ - font-family: 'Fira Sans'; - src:url('/custom/themes/StellarDark/FiraSans-BoldItalic.woff2') format("woff2"); - font-weight: 700; - font-style: oblique; -} -@font-face{ - font-family: 'Fira Sans'; - src:url('/custom/themes/StellarDark/FiraSans-ExtraBold.woff2') format("woff2"); - font-weight: 800; - font-style: normal; -} -@font-face{ - font-family: 'Fira Sans'; - src:url('/custom/themes/StellarDark/FiraSans-ExtraBoldItalic.woff2') format("woff2"); - font-weight: 800; - font-style: oblique; -} - - -/*****ROOT (COLOR AND FONT KEY)*****/ -:root{ - /***main body (including CKEditor), modal(options menu), and some code colors (see last section for more code colors)***/ - --text-gray: lightgray; - --devils-gray-lol: #666; - --background-gray: #111; - --supa-dark: black; - --midish-gray: #444; - --bold-sun: #fcfbb3; - --bright-sun: #cccb99; - --dim-sun: #969573; - --darkened-sun: #ccca6c; - --earth-sun: #333225; - --light-turquoise: #6df9f7; - --sea-foam: #6df9b1; - --italic-orange: #f4db92 /*#f4ba92*/; - --border-orange: #cc862c /*#cc6c2c*/; - --sea-green: #04c963; - --shallow-sea-blue: #54bcba; - --header-font-family: 'Fira Sans', sans-serif; - --code-select-gray: #333; - --table-header-gray: #222; - --soft-red: #ed363c; - --code-comment: #a57489; - --code-tag: #06dd87; - --code-string: #f7b2b2; - --code-number: #ea5474; - --code-pseudo: #01ad6e; - --code-class: #269b4d; - --code-keyword: var(--soft-red); - --code-meta: #777; - --code-def: #5df7e8; - --code-var: #08a; - --code-builtin: #9368f7; - --code-attribute: #CBEAD9; -} - - -/*****HTML (GENERAL STYLES)*****/ -/****************************************************************** -These are variables that already exist in the native stylesheet, just redefined here. This could have been put in ':root' or 'body{}' but for the sake of organization, I kept them in 'html' where they have been similarly placed in the Light Theme. -******************************************************************/ -html { - --theme-style: dark; - - /***fonts***/ - /*general fonts*/ - --main-font-family: 'Fira Sans', sans-serif; - --main-font-size: 1.2rem; - - --tree-font-family: 'Fira Sans', sans-serif; - --tree-font-size: 1.3rem; - - --detail-font-family: 'Fira Sans', sans-serif; - --detail-font-size: 1.3rem; - - /*code fonts*/ - --monospace-font-family: 'Fira Mono', monospace; - --monospace-font-size: 1.2rem; - - /***colors***/ - /*main notes window*/ - --main-background-color: var(--background-gray); - --main-text-color: var(--text-gray); - --main-border-color: var(--devils-gray-lol); - - /*changes the window icons(x, [], -) and some text fields*/ - --accented-background-color: var(--supa-dark); - - /*changes the edit icons on text notes and the alert messages*/ - --more-accented-background-color: var(--midish-gray); - - /*left, bottom left, and lower upper right icons*/ - --button-background-color: transparent; - --button-disabled-background-color: var(--midish-gray); - --button-border-color: var(--text-gray); - --button-text-color: var(--text-gray); - --button-border-radius: 5px; - - /*changes button in label detail*/ - --primary-button-background-color: var(--midish-gray); - --primary-button-text-color: var(--text-gray); - --primary-button-border-color: var(--text-gray); - - /* "muted-text-color" affects several components, but most are individually styled in this doc, so this should only affect the drop shadow of protected notes titles. */ - --muted-text-color: var(--devils-gray-lol); - - /*notes title and text fields in options menu and find (ctrl+f) search*/ - --input-text-color: var(--bright-sun); - /*affects find (ctrl+f) search input when inactive*/ - --input-background-color: var(--dim-sun); - - /*changes the 'x' on the note tabs and the right+click and trilium (icon) menus*/ - --hover-item-text-color: var(--text-gray); - /*changes side and right+click menus and note tabs*/ - --hover-item-background-color: var(--supa-dark); - - /*tree*/ - --active-item-text-color: var(--supa-dark); - --active-item-background-color: var(--bright-sun); - --left-pane-background-color: var(--supa-dark); - --left-pane-text-color: var(--text-gray); - - /*right+click menus*/ - --menu-text-color: var(--text-gray); - --menu-background-color: var(--background-gray); - - /*the options menu*/ - --modal-background-color: var(--background-gray); - --modal-backdrop-color: var(--text-gray); - - /*left and bottom left menus*/ - --launcher-pane-background-color: var(--background-gray); - --launcher-pane-text-color: var(--dim-sun); - - /*tabs*/ - --active-tab-background-color: var(--bold-sun); - --active-tab-text-color: var(--background-gray); - --inactive-tab-background-color: var(--midish-gray); - --inactive-tab-text-color: var(--text-gray); - --active-tab-hover-background-color: var(--text-gray); - --inactive-tab-hover-background-color: var(--earth-sun); - - /*general*/ - --scrollbar-border-color: var(--dim-sun); - --tooltip-background-color: var(--background-gray); - --link-color: var(--light-turquoise); - - --mermaid-theme: dark; -} - - -/*****Image Caption*****/ -.ck-content .image>figcaption { - font-size: 1rem; -} -.ck-content figure.image>figcaption code { - font-size: .95rem; -} - - -/*****Scrollbar*****/ -::-webkit-scrollbar-thumb{ - background-color: transparent !important; -} -::-webkit-scrollbar-thumb:hover{ - border-color: var(--bright-sun) !important; -} - - -/*****TABS*****/ -.tab-row-widget .note-tab .note-tab-wrapper { - height: 46px !important; - font-size: var(--detail-font-size); - font-family: var(--header-font-family); -} -.tab-row-widget .note-tab .note-tab-title { - font-size: 1.5rem; -} -.tab-row-widget .note-tab .note-tab-close { - font-size: 1.5rem; - margin-bottom: 10px; -} -.note-tab div.note-tab-close.bx.bx-x:hover { - background: transparent; - color: var(--soft-red); -} - -/*fixes the issue of not being able to access widgets in the top bar*/ -.tab-row-filler { - -webkit-app-region: none !important; -} - - -/*****TOC*****/ - -/***Only applies if 'Show Position in TOC' widget is in use***/ -.toc-widget span.toc li[style] { - color: var(--bold-sun) !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*****/ -.include-note { - margin-bottom: 1.1rem !important; -} - - -/*****HEADERS*****/ -/*h1 is not defined, because it's not currently an option for headers in the main body*/ -.ck-content h2 { - color: var(--darkened-sun); - font-weight: 800; - 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.9rem; - background: transparent; -} -.ck-content h3 { - color: var(--bright-sun); - font-weight: 700; - 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.78rem; - background: transparent; -} -.ck-content h4 { - color: #6cccca; - font-weight: 600; - 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.65rem; - background: transparent; -} -.ck-content h5 { - color: #99cccb; - font-weight: 600; - 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.53rem; - background: transparent; -} -.ck-content h6 { - color: #99ccb1; - font-weight: 600; - 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.4rem; - background: transparent; -} - - -/*****TABLE*****/ -.ck-content .table>figcaption { - background-color: var(--table-header-gray); - color: var(--darkened-sun); - font-size: 1.3rem; - font-weight: 600; - font-family: var(--header-font-family); -} -.ck-content .table table, .ck-content .table table td, .ck-content .table table th { - border: none; -} -.ck-content .table table th { - font-weight: 600 !important; - font-size: 1.15rem; -} -tr:nth-child(odd) { - background-color: var(--code-select-gray); -} -.ck-content .table table tbody tr:nth-child(odd) th { - background-color: var(--table-header-gray) !important; -} -.ck-content .table table { - width: 100%; - max-height: 90vh; - overflow: auto; -} -.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; -} -.ck-content .table table tbody th { - position: sticky; - left: 0; - z-index: 1; -} - - -/*****TEXT DECORATION*****/ -body strong, body b { - color:var(--bold-sun); - font-weight: 700; -} -body i, body em { - color: var(--italic-orange); -} -body u { - text-decoration-style: dashed; -} -body s, body del { - text-decoration-style: double; -} - -/***lists***/ -li label { - display: inline; - line-height: 2rem; -} -.ck-content .todo-list .todo-list__label>input[checked]:before, .ck-editor__editable.ck-content .todo-list .todo-list__label>span[contenteditable=false]>input[checked]:before { - background: var(--sea-green); - border-color: var(--sea-foam) !important; -} -.ck-content .todo-list .todo-list__label>input[checked]:after, .ck-editor__editable.ck-content .todo-list .todo-list__label>span[contenteditable=false]>input[checked]:after { - border-color: var(--background-gray); -} -.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(--soft-red) !important; -} - -/***italics and quotes***/ -body i { - color: var(--italic-orange); -} -body blockquote{ - color: var(--italic-orange); -} -.ck-content blockquote { - overflow: hidden; - padding-right: 1.5em; - padding-left: .5em; - margin-left: 0; - margin-right: 0; - font-style: italic; - font-weight: 300; - font-size: 1.35rem; - border-left: 5px solid var(--border-orange); -} -.ck-content blockquote p { - margin-bottom: 0; - padding-bottom: .3em; -} -.ck-content blockquote i { - font-style: normal; - color: var(--bold-sun); -} -.ck-content blockquote b { - font-weight: 500; -} -.ck-content blockquote code strong { - font-weight: 700; -} - - -/*****LINKS*****/ -body a *, a.ck-widget span { - color: var(--link-color); -} -.ck-content a:hover, a.no-tooltip-preview:hover { - text-decoration-style: double !important; -} -.ck-content a[href^="#root"]:not(.ck-widget) { - text-decoration: underline dotted; -} -.ck-content a:not([href^="#"],[href^="https://"],[href^="http://"]) { - color: var(--soft-red); - text-decoration: underline wavy 1px; -} - - -/*****ICONS*****/ -/*main note icon*/ -.note-icon::before { - color: var(--devils-gray-lol); -} -.note-icon:hover::before { - color: var(--bold-sun); - border-color: var(--bold-sun) !important; /*not working*/ -} -.note-icon:focus::before, .bx-calendar:focus::before { - color: var(--bold-sun); -} -.icon-list { - color: var(--shallow-sea-blue); -} - -/***note properties menu***/ -.ribbon-tab-title-icon { - color: var(--devils-gray-lol); -} -.ribbon-tab-title-icon:hover { - color: var(--bold-sun); -} - -/***launcher, floating tree, icon action and title bar buttons***/ -div.title-bar-buttons.component button, button.icon-action, .icon-action { - color: var(--dim-sun) !important; -} -#launcher-pane .launcher-button:hover, button.tree-floating-button:hover, .title-bar-buttons div:hover button, button.icon-action:hover, .icon-action:hover { - color: var(--bold-sun) !important; - border: none !important; -} - -/***Calendar***/ -div.dropdown-menu.dropdown-menu-right > div.calendar-dropdown-widget > div.calendar-body > a.calendar-date:hover, .calendar-dropdown-widget .calendar-btn:hover { - color: var(--bold-sun) !important; - background: var(--earth-sun) !important; -} -a.calendar-date.calendar-date-exists { - color: var(--dim-sun); -} -a.calendar-date.calendar-date-today { - background: var(--midish-gray); -} - -/***tree***/ -/*note icon*/ -.fancytree-custom-icon { - color: var(--dim-sun); -} -.note-icon-widget button.note-icon { - border: none !important; -} -span.fancytree-node.protected > span.fancytree-custom-icon { - filter: drop-shadow(2px 2px 2px var(--shallow-sea-blue)); -} -/*drop down icon*/ -.fancytree-expander::before { - color: var(--devils-gray-lol); -} -/*tree action buttons*/ -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***/ -.form-control { - color: var(--text-gray) !important; -} -.form-control:focus { - color: var(--bright-sun) !important; - background-color: var(--supa-dark); - border-color: var(--text-gray) !important; - outline: 0; - box-shadow: 0 0 0 0.2rem rgb(252 251 179 / 50%) !important; -} - -.component.title-row{ - margin-top: 10px; - margin-bottom: 10px; -} -.note-title-widget input.note-title { - font-family: var(--header-font-family); - font-size: 180% !important; -} -.note-title:focus { - color: var(--text-gray) !important; - background-color: var(--supa-dark) !important; - border-color: var(--text-gray) !important; - outline: 0; - box-shadow: 0 0 0 0.2rem rgb(252 251 179 / 50%) !important; -} - - -/***selection and find/replace (button)***/ -::selection { - color: black !important /*var(--supa-dark)*/; - background: #fcfbb3 !important /*var(--bold-sun)*/; -} -span.ck-find-result { - color: var(text-gray) !important; - background: var(--code-select-gray); -} -span.ck-find-result_selected { - color: var(--supa-dark) !important; - background: var(--bright-sun); -} - -/***Empty note field***/ -input.form-control.note-autocomplete.note-autocomplete-input.aa-input { - height: auto; -} - - -/*****BUTTONS*****/ -/***modal buttons***/ -button.help-button { - color: var(--bright-sun); - padding: 0; -} -button.help-button:hover { - color: var(--dim-sun); -} - -/*edit button*/ -.bx-edit-alt { - height: 40px; -} - -/***primary and secondary buttons***/ -button:focus :not(.close) :not(.help-button) :not(.ck-button-save) :not(.ck-button-cancel), .btn:focus { - color: var(--text-gray) !important; - background-color: var(--devils-gray-lol) !important; - border-color: var(--text-gray) !important; - outline: 0; - box-shadow: 0 0 0 0.2rem rgb(252 251 179 / 50%) !important; -} -button:hover :not(.close) :not(.help-button) :not(.ck-button-save) :not(.ck-button-cancel), .btn:hover { - background-color: var(--supa-dark) !important; - color: var(--bold-sun); - border-color: var(--bold-sun); -} - -/***table sub-menu***/ -/*table field input label*/ -.ck.ck-labeled-field-view>.ck.ck-labeled-field-view__input-wrapper>.ck.ck-label{ - background: var(--supa-dark); - color: var(--text-gray); -} -/*table field and button inputs*/ -.ck.ck-button:active, .ck.ck-button:focus, a.ck.ck-button:active, a.ck.ck-button:focus, .ck.ck-input-text:focus { - border: 1px solid var(--text-gray) !important; - box-shadow: 0 0 0 0.2rem rgb(252 251 179 / 50%) !important; -} -.ck.ck-input-text[readonly]:focus { - border: 1px solid var(--ck-color-input-disabled-border) !important; - background: var(--ck-color-input-disabled-background) !important; - color: var(--ck-color-input-disabled-text) !important; -} -/*color button*/ -.ck.ck-input-color>.ck.ck-dropdown>.ck.ck-button.ck-input-color__button.ck-disabled, .ck.ck-input-color>.ck.ck-dropdown>.ck.ck-button.ck-input-color__button.ck-disabled>.ck.ck-input-color__button__preview, .ck.ck-input-color>.ck.ck-dropdown>.ck.ck-button.ck-input-color__button.ck-disabled>.ck.ck-input-color__button__preview>.ck.ck-input-color__button__preview__no-color-indicator { - border: 1px solid var(--ck-color-input-disabled-border) !important; -} -/*image caption field*/ -.ck .ck-editor__nested-editable.ck-editor__nested-editable_focused, .ck .ck-editor__nested-editable:focus { - background-color: var(--ck-color-widget-editable-focus-background); - border: none /*var(--ck-focus-ring)*/; - box-shadow: var(--ck-inner-shadow),0 0; - outline: none; -} -/*backend logs*/ -textarea.backend-log-textarea { - color: var(--shallow-sea-blue) !important; -} - - -/*****NOTE MAP*****/ -.note-detail-relation-map path, .note-detail-relation-map .jtk-endpoint{ - fill: var(--shallow-sea-blue) !important; -} -svg.jtk-connector path { - stroke: var(--shallow-sea-blue); - fill: none !important; -} -.note-detail-relation-map .note-box { - padding: 12px 30px 12px 12px; - position: absolute !important; - background-color: var(--accented-background-color); - color: var(--main-text-color); - z-index: 4; - border: 1px solid #666; - box-shadow: 2px 2px 19px #999; - border-radius: 8px; - opacity: 0.8; - font-size: 1rem; - width: auto; - height: auto; - max-width: 240px; - min-width: 150px; - max-height: 200px; - overflow: hidden; -} - - -/*****FLOATING BUTTONS*****/ -/***Backlinks Popup***/ -.floating-buttons-children { - flex-direction: column-reverse !important; -} -.backlinks-ticker { - padding: 6px 3px !important; - writing-mode: vertical-lr; - margin-bottom: 15px; -} -div.backlinks-items { - z-index: 10; - position: absolute; - top: 50px; - right: 10px; - width: 400px; - border-radius: 10px; - background-color: var(--supa-dark); - color: var(--text-gray); - padding: 20px; - overflow-y: auto; - box-shadow: 2px 2px 5px var(--text-gray); -} -div.backlinks-items div:hover { - background-color: var(--earth-sun); -} -.backlink-excerpt .backlink-link { - background-color: var(--midish-gray) !important; -} -.backlinks-ticker:hover { - background-color: var(--earth-sun); -} - -/***Relation Map and Canvas Buttons***/ -.relation-map-buttons { - display: flex; - gap: 10px; - flex-direction: column; -} -.relation-map-buttons > .btn-group { - position: relative; - display: -ms-inline-flexbox; - display: inline-flex; - flex-direction: column; - vertical-align: middle; -} -.relation-map-buttons > button, .relation-map-buttons > .btn-group button { - border: none !important; -} -.relation-map-buttons > .btn-group > .btn-group:not(:first-child), .relation-map-buttons > .btn-group > .btn:not(:first-child), .relation-map-buttons > .btn-group > .btn-group:not(:last-child) >.btn, .relation-map-buttons > .btn-group > .btn:not(:last-child):not(.dropdown-toggle), button.copy-image-reference-button, button.export-mermaid-button { - 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 { - border: none; - background: transparent !important; - color: var(--bold-sun); -} - -/***Close Button***/ -.close-floating-buttons-button { - border: none !important; - color: var(--button-text-color); - padding: 6px; - border-radius: 100px; - margin: 5px; -} -.close-floating-buttons-button:hover { - border: none !important; - color: var(--soft-red) !important; -} - - -/*****Attributes Popup*****/ -.attr-help td { - color: var(--text-gray) !important; -} - - -/*****Deletion Alert*****/ -.alert-danger { - color: #f5c6cb; - background-color: #930210; - border-color: #f5c6cb; -} - - -/*****CODE IN TEXT NOTES)*****/ -/***code blocks***/ -.ck-content pre { - background: var(--supa-dark); - font-size: 0.9rem; - border-color: var(--shallow-sea-blue); -} -.ck-content pre code { - font-size: 0.9rem; - background: transparent !important; - color: var(--shallow-sea-blue) !important; -} -/*code block label*/ -pre::after{ - background: var(--earth-sun) !important; - color: var(--bright-sun) !important; - border-color: var(--bright-sun) !important; - letter-spacing: 1px; -} - -/***inline code***/ -.ck-content code, .ck-content code i, .ck-content code strong { - font-size: 1.1rem; - background: var(--supa-dark); - color: var(--shallow-sea-blue) !important; - letter-spacing: 1px; - -} -.ck-content .ck-code_selected { - background-color: var(--earth-sun) !important; - letter-spacing: 1px; -} - - -/*****CKEDITOR*****/ -/****************************************************************** -NOTE: The following lines of code affect the editor menus. Similar to the General Styles section, the variables below are simply redefined here. - -I've commented out the lines that don't seem to have an affect on anything, along with adding a question mark (?) in a comment to differentiate those lines from the rest of the code. They are left here in case anyone wants to experiment and figure out where those lines have an effect. If you find anything, please let me know so I can update the code ^_^ -******************************************************************/ - -body { - /***overrides generic colors***/ - --ck-color-base-text: var(--border-orange); /*toggled color (editor sub-menu)*/ - --ck-color-base-foreground: var(--midish-gray); /*tiny attached triangle and selection hover*/ - --ck-color-focus-border: var(--bright-sun); /*table and color (editor menu) focus*/ - --ck-color-text: var(--shallow-sea-blue); /*text color*/ - /* --ck-color-shadow-drop: red; /*?*/ - /* --ck-color-shadow-inner: red; /*?*/ - - /***overrides the default '.ck-button' class colors***/ - /*general buttons*/ - --ck-color-button-default-background: transparent; - --ck-color-button-default-hover-background: var(--midish-gray); - --ck-color-button-default-active-background: var(--devils-gray-lol); - --ck-color-button-default-active-shadow: var(--devils-gray-lol); /*thin line on top of active buttons*/ - --ck-color-button-default-disabled-background: var(--background-gray); /*disabled buttons*/ - --ck-color-button-on-color: var(--bright-sun); /*selected property/button*/ - - /*dropdown buttons*/ - --ck-color-button-on-background: var(--earth-sun); /*active*/ - --ck-color-button-on-hover-background: var(--midish-gray); /*hover*/ - --ck-color-button-on-active-background: var(--devils-gray-lol); /*exit click on active*/ - --ck-color-button-on-active-shadow: transparent; /*top line on exit click of active*/ - /*--ck-color-button-on-disabled-background: red; /*?*/ - - /*find button (editor sub-menu)*/ - --ck-color-button-action-background: var(--darkened-sun) !important; - --ck-color-button-action-hover-background: var(--devils-gray-lol) !important; - --ck-color-button-action-active-background: var(--darkened-sun) !important; /*find button active and field descritpion*/ - --ck-color-button-action-active-shadow: transparent !important; /*top line*/ - /*--ck-color-button-action-disabled-background: red; /*?*/ - --ck-color-button-action-text: var(--supa-dark) !important; /*find button(editor sub-menu)*/ - - /*save and cancel*/ - --ck-color-button-save: var(--sea-green) /*hsl(120, 100%, 46%)*/; /*table sub-menu*/ - --ck-color-button-cancel: hsl(15, 100%, 56%); /*table sub-menu*/ - - /***overrides the default '.ck-dropdown' class colors (color sub-menus)***/ - --ck-color-dropdown-panel-background: var(--supa-dark); - --ck-color-dropdown-panel-border: var(--devils-gray-lol); - - /***overrides the default '.ck-splitbutton' class colors***/ - --ck-color-split-button-hover-background: var(--devils-gray-lol); - --ck-color-split-button-hover-border: var(--shallow-sea-blue); - - /***overrides the default '.ck-input' class colors***/ - /*--ck-color-input-background: red; /*?*/ - --ck-color-input-border: var(--text-gray); /*inactive (enabled AND disabled) editable field(editor sub-menus)*/ - /*--ck-color-input-text: red; /*?*/ - --ck-color-input-disabled-background: var(--supa-dark); /*disabled color picker(table sub-menu)*/ - --ck-color-input-disabled-border: var(--background-gray); /*disabled editor border (table sub-menu)*/ - --ck-color-input-disabled-text: var(--text-gray); /*editor input text (enable AND disabled)*/ - - /***overrides the default '.ck-list' (list menus) class colors***/ - --ck-color-list-background: transparent; /*focus out*/ - --ck-color-list-button-hover-background: var(--midish-gray); - --ck-color-list-button-on-background: var(--dim-sun); /*toggled/active*/ - --ck-color-list-button-on-background-focus: var(--devils-gray-lol); /*hover on toggled/active*/ - --ck-color-list-button-on-text: var(--supa-dark); /*toggled/active*/ - - /***overrides the default .ck-balloon-panel class colors (overall look and feel of the editor toolbars and sub-menus)***/ - --ck-color-panel-background: var(--supa-dark); - --ck-color-panel-border: var(--devils-gray-lol); - - /***overrides the default .ck-toolbar class colors***/ - --ck-color-toolbar-background: var(--supa-dark); /*lots of overlap with the above backgound setting*/ - --ck-color-toolbar-border: var(--dim-sun); /*section separators*/ - - /***overrides the default .ck-tooltip class colors***/ - --ck-color-tooltip-background: var(--bold-sun); - --ck-color-tooltip-text: var(--background-gray); - - /* Overrides the default colors used by the ckeditor5-image package.*/ - /*--ck-color-image-caption-background: red; /*?*/ - /*--ck-color-image-caption-text: red; /*?*/ - - /***overrides the default colors used by the ckeditor5-widget (image/table) package***/ - --ck-color-widget-blurred-border: var(--devils-gray-lol); /*shows up briefly after switching tabs*/ - --ck-color-widget-hover-border: var(--dim-sun); /*object in focus*/ - --ck-color-widget-editable-focus-background: var(--midish-gray); /*table caption in focus*/ - - /***overrides the default colors used by the ckeditor5-link package***/ - /*--ck-color-link-default: red; /*this is overridden by a link setting set earlier in the code*/ - - --ck-color-table-focused-cell-background: var(--midish-gray); - - /*--ck-color-todo-list-checkmark-border: red; /*?*/ - - --ck-color-engine-placeholder-text: var(--text-gray); /*caption placeholder text*/ - - --ck-z-modal: 10000; - - /*--ck-color-widget-type-around-button: red; /*?*/ - --ck-color-widget-type-around-button-hover: var(--darkened-sun); /*applies when table/image is in focus*/ -} - - -/*****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(--earth-sun); -} - -/***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: #01ba3f;} -div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #c60101;} - -/***code errors***/ -.cm-s-default .cm-error {color: #f00;} -.cm-invalidchar {color: #f00;} - - -/*****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(--shallow-sea-blue) !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; -} -.theme-selection.component { - --icon-dark: var(--bright-sun) !important; -} -.theme-selection.component:hover { - --icon-dark: var(--supa-dark) !important; -} - -/***Trilium Chat***/ -.chat-wrapper { - --trilium-green: var(--sea-foam); -} -.chat-wrapper .header_face:hover { - color: var(--bright-sun) !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; -} \ No newline at end of file diff --git a/next_stellar-dark.css b/stellar-dark.css similarity index 100% rename from next_stellar-dark.css rename to stellar-dark.css From c9b0845d840b86e6b7580d6cda931467824728a1 Mon Sep 17 00:00:00 2001 From: lolabird <89228316+Lolabird@users.noreply.github.com> Date: Sat, 17 Jan 2026 13:43:48 -0700 Subject: [PATCH 03/14] Remove styles for breadcrumbs plugin --- stellar-dark.css | 26 -------------------------- 1 file changed, 26 deletions(-) diff --git a/stellar-dark.css b/stellar-dark.css index 2993531..ac0d532 100644 --- a/stellar-dark.css +++ b/stellar-dark.css @@ -1209,29 +1209,3 @@ body.zen div#right-pane:not(.hidden-int) { .chat-wrapper .header_face:hover { color: var(--bright-sun) !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; -} From 357fc7b20da3252b1886853495ecd2749f449517 Mon Sep 17 00:00:00 2001 From: lolabird <89228316+Lolabird@users.noreply.github.com> Date: Sat, 17 Jan 2026 13:57:19 -0700 Subject: [PATCH 04/14] Remove Codemirror code --- stellar-dark.css | 60 ------------------------------------------------ 1 file changed, 60 deletions(-) diff --git a/stellar-dark.css b/stellar-dark.css index ac0d532..7aa178c 100644 --- a/stellar-dark.css +++ b/stellar-dark.css @@ -1051,66 +1051,6 @@ 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(--earth-sun); -} - -/***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: #01ba3f;} -div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #c60101;} - -/***code errors***/ -.cm-s-default .cm-error {color: #f00;} -.cm-invalidchar {color: #f00;} - - /*****ADDONS*****/ /***Highlight.js***/ pre code.hljs { From 491b8b0fa2d4034cf6356e48a877724895f7f385 Mon Sep 17 00:00:00 2001 From: lolabird <89228316+Lolabird@users.noreply.github.com> Date: Sat, 17 Jan 2026 15:19:00 -0700 Subject: [PATCH 05/14] Fix background color in text editor code blocks --- stellar-dark.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/stellar-dark.css b/stellar-dark.css index 7aa178c..5f956fc 100644 --- a/stellar-dark.css +++ b/stellar-dark.css @@ -906,7 +906,7 @@ div.content-floating-buttons button.bx { /*****CODE IN TEXT NOTES)*****/ /***code blocks***/ -.ck-content pre { +.ck-content pre, .ck-content pre.hljs { background: var(--supa-dark); font-size: 0.9rem; border-color: var(--shallow-sea-blue); From e94cee02a81be57438e2f4748f4679be2a11e0fd Mon Sep 17 00:00:00 2001 From: lolabird <89228316+Lolabird@users.noreply.github.com> Date: Sat, 17 Jan 2026 15:54:20 -0700 Subject: [PATCH 06/14] Fix show position in toc colors --- stellar-dark.css | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/stellar-dark.css b/stellar-dark.css index 5f956fc..86ef46c 100644 --- a/stellar-dark.css +++ b/stellar-dark.css @@ -279,12 +279,9 @@ div.tab-row-widget .note-tab .note-tab-wrapper { /*****TOC*****/ /***Only applies if 'Show Position in TOC' widget is in use***/ -.toc-widget span.toc li[style] { +.toc li.in-view { color: var(--bold-sun) !important; } -.toc-widget span.toc li:not([style*="color:"]), .toc-widget span.toc li:not([style*="color:"]) * { - color: inherit !important; -} .toc-widget .toc li, .highlights-list > ol > li { text-align: left; From 27c9e844badc8c8229ff6758931d3ce94bf52514 Mon Sep 17 00:00:00 2001 From: lolabird <89228316+Lolabird@users.noreply.github.com> Date: Sat, 17 Jan 2026 16:09:22 -0700 Subject: [PATCH 07/14] Remove unnecessry toc styles --- stellar-dark.css | 9 --------- 1 file changed, 9 deletions(-) diff --git a/stellar-dark.css b/stellar-dark.css index 86ef46c..534d132 100644 --- a/stellar-dark.css +++ b/stellar-dark.css @@ -283,15 +283,6 @@ div.tab-row-widget .note-tab .note-tab-wrapper { color: var(--bold-sun) !important; } -.toc-widget .toc li, .highlights-list > ol > li { - text-align: left; -} -.toc kbd { - background: transparent; - text-decoration: underline; - color: inherit; -} - /*****Included Notes*****/ .include-note { From 3993998e442fcb0436eed6c576227d7ad78e81e8 Mon Sep 17 00:00:00 2001 From: lolabird <89228316+Lolabird@users.noreply.github.com> Date: Sat, 17 Jan 2026 16:43:02 -0700 Subject: [PATCH 08/14] Adjust order of sections --- stellar-dark.css | 1 - 1 file changed, 1 deletion(-) diff --git a/stellar-dark.css b/stellar-dark.css index 534d132..952538b 100644 --- a/stellar-dark.css +++ b/stellar-dark.css @@ -277,7 +277,6 @@ div.tab-row-widget .note-tab .note-tab-wrapper { /*****TOC*****/ - /***Only applies if 'Show Position in TOC' widget is in use***/ .toc li.in-view { color: var(--bold-sun) !important; From 76975bef3373ceab31fb6eb59461678445caacf3 Mon Sep 17 00:00:00 2001 From: lolabird <89228316+Lolabird@users.noreply.github.com> Date: Sat, 17 Jan 2026 17:26:52 -0700 Subject: [PATCH 09/14] Adjust order of sections --- stellar-dark.css | 165 ++++++++++++++++++++++++----------------------- 1 file changed, 83 insertions(+), 82 deletions(-) diff --git a/stellar-dark.css b/stellar-dark.css index 952538b..2e0f083 100644 --- a/stellar-dark.css +++ b/stellar-dark.css @@ -248,9 +248,9 @@ html { /*****TABS*****/ 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; + 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); } @@ -933,6 +933,86 @@ pre::after{ color: var(--bold-sun); } +/***Highlight.js***/ +pre code.hljs { + display:block; + overflow-x:auto; + padding:1em; +} +code.hljs { + padding:3px 5px; +} +.hljs{ + background: var(--main-background); + color: var(--shallow-sea-blue) !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*****/ /****************************************************************** @@ -1039,85 +1119,6 @@ body { /*****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(--shallow-sea-blue) !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; -} - /***Theme Switcher***/ .theme-selection.component .switch { top: 5.75px !important; From 2fab6158dc3bc6bab4b8013bdd71100df9fb1f2f Mon Sep 17 00:00:00 2001 From: lolabird <89228316+Lolabird@users.noreply.github.com> Date: Sat, 17 Jan 2026 18:19:49 -0700 Subject: [PATCH 10/14] Remove icon styles --- stellar-dark.css | 5 ----- 1 file changed, 5 deletions(-) diff --git a/stellar-dark.css b/stellar-dark.css index 2e0f083..b491085 100644 --- a/stellar-dark.css +++ b/stellar-dark.css @@ -640,11 +640,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***/ From 498ca4d4c4c10625dd4a6c1afc69434fc5807a14 Mon Sep 17 00:00:00 2001 From: lolabird <89228316+Lolabird@users.noreply.github.com> Date: Sat, 17 Jan 2026 18:56:01 -0700 Subject: [PATCH 11/14] Center text note content --- stellar-dark.css | 3 +++ 1 file changed, 3 insertions(+) diff --git a/stellar-dark.css b/stellar-dark.css index b491085..9aa78d7 100644 --- a/stellar-dark.css +++ b/stellar-dark.css @@ -225,6 +225,9 @@ html { *:focus-visible { outline: var(--bold-sun) auto 1px; } +.component.note-detail { + margin: auto; +} /*****Image Caption*****/ From 8652185ed74fbbe81fc33c9516c43c7ce5ae0935 Mon Sep 17 00:00:00 2001 From: lolabird <89228316+Lolabird@users.noreply.github.com> Date: Sun, 18 Jan 2026 12:37:17 -0700 Subject: [PATCH 12/14] Remove table borders and unnecessary attributes --- stellar-dark.css | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/stellar-dark.css b/stellar-dark.css index 9aa78d7..9f990fa 100644 --- a/stellar-dark.css +++ b/stellar-dark.css @@ -374,7 +374,7 @@ div.tab-row-widget .note-tab .note-tab-wrapper { 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; @@ -393,16 +393,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; } From c2977c80cbb67ea8b334ed515e2603e3969ac6b5 Mon Sep 17 00:00:00 2001 From: lolabird <89228316+Lolabird@users.noreply.github.com> Date: Sun, 18 Jan 2026 13:17:24 -0700 Subject: [PATCH 13/14] Center note grids --- stellar-dark.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/stellar-dark.css b/stellar-dark.css index 9f990fa..39d5f13 100644 --- a/stellar-dark.css +++ b/stellar-dark.css @@ -225,7 +225,7 @@ html { *:focus-visible { outline: var(--bold-sun) auto 1px; } -.component.note-detail { +.component.note-detail, .component.note-list-widget { margin: auto; } From 5123ac56af3a9ff4cb6be5164324e985fe9a08ab Mon Sep 17 00:00:00 2001 From: lolabird <89228316+Lolabird@users.noreply.github.com> Date: Sun, 18 Jan 2026 15:21:43 -0700 Subject: [PATCH 14/14] Adjust read-only footnote styles --- stellar-dark.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/stellar-dark.css b/stellar-dark.css index 39d5f13..78a7a9b 100644 --- a/stellar-dark.css +++ b/stellar-dark.css @@ -526,7 +526,7 @@ span.footnote-reference > sup > a { font-size: .9em; } /*Block*/ -div.footnote-section.ck-widget { +div.footnote-section.ck-widget, ol.footnote-section.footnotes { border: none; border-top: 1px solid var(--devils-gray-lol); border-radius: 0;