diff --git a/stellar-dark.css b/stellar-dark.css index 4b80cef..820aca8 100644 --- a/stellar-dark.css +++ b/stellar-dark.css @@ -30,7 +30,7 @@ Inspired by https://github.com/Engr-AllanG/trilium-theme-Neon_Dark /*****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. +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; @@ -44,7 +44,7 @@ html { --tree-font-size: 1.3rem; --detail-font-family: sans-serif; - --detail-font-size: 1.1rem; + --detail-font-size: 1rem; /*code fonts*/ --monospace-font-family: monospace; @@ -58,7 +58,7 @@ html { /*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); @@ -75,12 +75,12 @@ html { --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); + --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); + --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); @@ -92,7 +92,7 @@ html { --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); @@ -112,7 +112,7 @@ html { --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); @@ -221,6 +221,10 @@ body h6 code { letter-spacing: 1.2px; } +p{ + font-size: 1.3rem; +} + /*****TABLE*****/ .ck-content .table>figcaption { @@ -248,7 +252,7 @@ tr:nth-child(odd) { /*****TEXT DECORATION*****/ /*bold*/ body strong { - color:var(--bold-sun); + color:var(--bold-sun); font-weight: 800; } @@ -288,7 +292,7 @@ body blockquote{ .ck-content blockquote p{ margin-bottom: 0; padding-bottom: .3em; -} +} @@ -303,7 +307,7 @@ body blockquote{ } .note-icon:focus::before, .bx-calendar:focus::before { color: var(--bold-sun); -} +} .icon-list { color: var(--shallow-sea-blue); } @@ -322,7 +326,7 @@ body blockquote{ } .icon-action:hover, .tree-floating-button:hover, .top-btn button:hover, .minimize-btn button:hover, .maximize-btn button:hover, .close-btn button:hover, button.button-widget:hover, .sync-status-widget:hover { color: var(--bold-sun) !important; - border: none !important; + border: none !important; } @@ -355,7 +359,7 @@ body .global-menu-button { } .form-control:focus { color: var(--bright-sun) !important; - background-color: var(--supa-dark); + 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; @@ -367,7 +371,7 @@ body .global-menu-button { } .note-title:focus { color: var(--text-gray) !important; - background-color: var(--supa-dark) !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; @@ -394,13 +398,13 @@ span.ck-find-result, span.ck-find-result>.ck-find-result_selected { /***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; + 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; + background-color: var(--supa-dark) !important; color: var(--bold-sun); border-color: var(--bold-sun); } @@ -414,7 +418,7 @@ button:hover :not(.close) :not(.help-button) :not(.ck-button-save) :not(.ck-butt /*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; + 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; @@ -467,20 +471,20 @@ div.backlinks-items div:hover { /*****CODE IN TEXT NOTES)*****/ /***code blocks***/ .ck-content pre { - background: var(--supa-dark); + background: var(--supa-dark); font-family: monospace; font-size: 0.9rem; - border-color: var(--shallow-sea-blue); + border-color: var(--shallow-sea-blue); } .ck-content pre code { font-family: monospace; font-size: 0.9rem; - background: transparent !important; + background: transparent !important; color: var(--shallow-sea-blue) !important; } /*code block label*/ pre::after{ - background: var(--earth-sun) !important; + background: var(--earth-sun) !important; color: var(--bright-sun) !important; border-color: var(--bright-sun) !important; letter-spacing: 1px; @@ -489,8 +493,8 @@ pre::after{ /***inline code***/ .ck-content code, .ck-content code i, .ck-content code strong { font-family: monospace; - font-size: .95rem; - background: var(--supa-dark); + font-size: .95rem; + background: var(--supa-dark); color: var(--shallow-sea-blue) !important; letter-spacing: 1px; @@ -504,7 +508,7 @@ pre::after{ /*****CKEDITOR*****/ /****************************************************************** -NOTE: The following lines of code affect the editor menus. Similar to the General Styles section, the variables below are simply redefined here. +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 ^_^ ******************************************************************/ @@ -525,7 +529,7 @@ body { --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*/ - + /*dropdown buttons*/ --ck-color-button-on-background: var(--earth-sun); /*active*/ --ck-color-button-on-hover-background: var(--midish-gray); /*hover*/ @@ -535,7 +539,7 @@ body { /*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-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; /*?*/ @@ -577,7 +581,7 @@ body { --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-background: var(--bold-sun); --ck-color-tooltip-text: var(--background-gray); /* Overrides the default colors used by the ckeditor5-image package.*/ @@ -603,8 +607,8 @@ body { /*--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). @@ -614,10 +618,10 @@ NOTE: comments for this section are for how they appear in CSS code notes unless /*'...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); -} + color: var(--text-gray); +} -.CodeMirror-linenumber {color: var(--devils-gray-lol);} +.CodeMirror-linenumber {color: var(--devils-gray-lol);} .CodeMirror-cursor { border-left: 1px solid var(--devils-gray-lol); } @@ -654,7 +658,7 @@ NOTE: comments for this section are for how they appear in CSS code notes unless .cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #01ad6e;} /*pseudo elements and classes*/ /***strings***/ -.cm-s-default .cm-string {color: #f7b2b2;} +.cm-s-default .cm-string {color: #f7b2b2;} .cm-s-default .cm-string-2 {color: #fc7462;} /*applies to some CSS properties*/ /***brackets and parentheses***/