Created
August 28, 2022 02:26
-
-
Save brianwisti/29653609d4ba6e389dcb065458001584 to your computer and use it in GitHub Desktop.
Quick dump of CSS output from a Notion-ish style I set up in Trilium Notes
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :root { | |
| --system-stack-sans-serif: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; | |
| --system-stack-serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; | |
| --system-stack-monospace: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace; | |
| } | |
| :root { | |
| --notion-fg-default: rgb(255, 255, 255); | |
| --notion-fg-gray: rgb(151, 154, 155); | |
| --notion-fg-brown: rgb(147, 114, 100); | |
| --notion-fg-orange: rgb(255, 163, 68); | |
| --notion-fg-yellow: rgb(225, 220, 73); | |
| --notion-fg-green: rgb(77, 171, 154); | |
| --notion-fg-blue: rgb(82, 156, 202); | |
| --notion-fg-purple: rgb(154, 109, 215); | |
| --notion-fg-pink: rgb(226, 85, 161); | |
| --notion-fg-red: rgb(255, 115, 105); | |
| --notion-bg-default: rgb(47, 52, 55); | |
| --notion-bg-gray: rgb(69, 75, 78); | |
| --notion-bg-brown: rgb(67, 64, 64); | |
| --notion-bg-orange: rgb(89, 74, 58); | |
| --notion-bg-yellow: rgb(89, 86, 59); | |
| --notion-bg-green: rgb(53, 76, 75); | |
| --notion-bg-blue: rgb(54, 73, 84); | |
| --notion-bg-purple: rgb(68, 63, 87); | |
| --notion-bg-pink: rgb(83, 59, 76); | |
| --notion-bg-red: rgb(89, 65, 65); | |
| --notion-select-default: rgb(80, 85, 88); | |
| --notion-select-gray: rgb(151, 154, 155); | |
| --notion-select-brown: rgb(147, 114, 100); | |
| --notion-select-orange: rgb(255, 163, 68); | |
| --notion-select-yellow: rgb(255, 220, 73); | |
| --notion-select-green: rgb(77, 171, 154); | |
| --notion-select-blue: rgb(82, 156, 202); | |
| --notion-select-purple: rgb(154, 109, 215); | |
| --notion-select-pink: rgb(226, 85, 161); | |
| --notion-select-red: rgb(255, 115, 105); | |
| } | |
| :root { | |
| --rg-prose-font: var(--system-stack-sans-serif); | |
| --rg-prose-size: 16px; | |
| --theme-style: dark; | |
| --main-font-family: var(--rg-prose-font); | |
| --main-font-size: var(--rg-prose-size); | |
| --tree-font-family: var(--rg-prose-font); | |
| --tree-font-size: calc(var(--rg-prose-size) * 0.8); | |
| --detail-font-family: var(--rg-prose-font); | |
| --detail-font-size: var(--rg-prose-size); | |
| --monospace-font-family: var(--system-stack-monospace); | |
| --monospace-font-size: var(--rg-prose-size); | |
| --main-background-color: var(--notion-bg-default); | |
| --main-border-color: var(--notion-fg-gray); | |
| --main-text-color: var(--notion-fg-default); | |
| --accented-background-color: var(--notion-bg-blue); | |
| --more-accented-background-color: var(--notion-bg-gray); | |
| --button-background-color: var(--accented-background-color); | |
| --button-border-color: var(--more-accented-background-color); | |
| --button-text-color: var(--main-text-color); | |
| --button-disabled-background-color: var(--more-accented-background-color); | |
| --button-disabled-text-color: var(--main-text-color); | |
| --button-border-color: var(--notion-bg-gray); | |
| --button-text-color: var(--notion-fg-default); | |
| --button-border-radius: 5px; | |
| --primary-button-background-color: var(--notion-bg-blue); | |
| --primary-button-text-color: var(--notion-bg-default); | |
| --primary-button-border-color: var(--notion-select-blue); | |
| --muted-text-color: var(--notion-select-gray); | |
| --input-text-color: var(--main-text-color); | |
| --input-background-color: transparent; | |
| --hover-item-text-color: var(--main-text-color); | |
| --hover-item-background-color: transparent; | |
| --hover-item-border-color: var(--main-border-color); | |
| --active-item-text-color: var(--main-text-color); | |
| --active-item-background-color: var(--accented-background-color); | |
| --active-item-border-color: transparent; | |
| --menu-text-color: var(--main-text-color); | |
| --menu-background-color: var(--main-background-color); | |
| --modal-background-color: var(--main-background-color); | |
| --modal-backdrop-color: var(--main-text-color); | |
| --left-pane-background-color: var(--main-background-color); | |
| --left-pane-text-color: var(--main-text-color); | |
| --launcher-pane-background-color: var(--accented-background-color); | |
| --launcher-pane-text-color: var(--main-text-color); | |
| --active-tab-background-color: var(--accented-background-color); | |
| --active-tab-hover-background-color: var(--notion-select-default); | |
| --active-tab-text-color: var(--main-text-color); | |
| --inactive-tab-background-color: var(--notion-bg-gray); | |
| --inactive-tab-hover-background-color: var(--notion-select-default); | |
| --inactive-tab-text-color: var(--muted-text-color); | |
| --scrollbar-border-color: var(--more-accented-background-color); | |
| --tooltip-background-color: var(--notion-select-default); | |
| --link-color: var(--notion-fg-blue); | |
| --mermaid-theme: default; | |
| } | |
| .CodeMirror { | |
| font-family: var(--monospace-font-family); | |
| color: var(--main-text-color); | |
| background: var(--main-background-color); | |
| } | |
| .CodeMirror-activeline-background { | |
| background: var(--notion-bg-gray); | |
| } | |
| .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { | |
| background-color: var(--main-background-color); | |
| } | |
| .CodeMirror-gutters { | |
| background-color: var(--more-accented-color); | |
| border-color: var(--accented-color); | |
| } | |
| .CodeMirror-linenumber { | |
| color: var(--muted-text-color); | |
| } | |
| .CodeMirror-guttermarker { | |
| color: var(--main-text-color); | |
| } | |
| .CodeMirror-guttermarker-subtle { | |
| color: var(--muted-text-color); | |
| } | |
| .CodeMirror-cursor { | |
| border-left-color: var(--main-text-color); | |
| } | |
| .cm-fat-cursor .CodeMirror-cursor { | |
| background: var(--notion-bg-green); | |
| } | |
| .CodeMirror-matchingtag { | |
| background: var(--notion-bg-orange); | |
| } | |
| .CodeMirror-ruler { | |
| border-color: var(--accented-color); | |
| } | |
| .CodeMirror-selected { | |
| background: var(--notion-select-default); | |
| } | |
| .CodeMirror-focused .CodeMirror-selected { | |
| background: var(--notion-select-default); | |
| } | |
| .CodeMirror div.CodeMirror-secondarycursor { | |
| border-color: var(--accented-background-color); | |
| } | |
| .CodeMirror span.CodeMirror-matchingbracket { | |
| color: var(--notion-fg-green); | |
| } | |
| .CodeMirror span.CodeMirror-nonmatchingbracket { | |
| color: var(--notion-fg-red); | |
| } | |
| .cm-fat-cursor-mark { | |
| background-color: rgba(20, 255, 20, 0.5); | |
| } | |
| .cm-animate-fat-cursor { | |
| background-color: var(--notion-bg-green); | |
| } | |
| /* DEFAULT THEME */ | |
| .cm-s-default .cm-atom { | |
| color: var(--notion-fg-blue); | |
| } | |
| .cm-s-default .cm-attribute { | |
| color: var(--notion-fg-blue); | |
| } | |
| .cm-s-default .cm-bracket { | |
| color: var(--notion-fg-gray); | |
| } | |
| .cm-s-default .cm-buitin { | |
| color: var(--notion-fg-green); | |
| } | |
| .cm-s-default .cm-comment { | |
| color: var(--notion-fg-gray); | |
| } | |
| .cm-s-default .cm-def { | |
| color: var(--notion-fg-blue); | |
| } | |
| .cm-s-default .cm-error { | |
| color: var(--notion-fg-red); | |
| } | |
| .cm-s-default .cm-header { | |
| color: var(--notion-fg-blue); | |
| } | |
| .cm-s-default .cm-hr { | |
| color: var(--notion-fg-gray); | |
| } | |
| .cm-s-default .cm-invalidchar { | |
| color: var(--notion-fg-red); | |
| } | |
| .cm-s-default .cm-keyword { | |
| color: var(--notion-fg-purple); | |
| } | |
| .cm-s-default .cm-link { | |
| color: var(--notion-fg-blue); | |
| } | |
| .cm-s-default .cm-meta { | |
| color: var(--notion-fg-gray); | |
| } | |
| .cm-s-default .cm-number { | |
| color: var(--notion-fg-green); | |
| } | |
| .cm-s-default .cm-qualifier { | |
| color: var(--notion-fg-gray); | |
| } | |
| .cm-s-default .cm-quote { | |
| color: var(--notion-fg-green); | |
| } | |
| .cm-s-default .cm-string { | |
| color: var(--notion-fg-red); | |
| } | |
| .cm-s-default .cm-string-2 { | |
| color: var(--notion-fg-orange); | |
| } | |
| .cm-s-default .cm-tag { | |
| color: var(--notion-fg-green); | |
| } | |
| .cm-s-default .cm-type { | |
| color: var(--notion-fg-green); | |
| } | |
| .cm-s-default .cm-variable-2 { | |
| color: var(--notion-fg-blue); | |
| } | |
| .cm-s-default .cm-variable-3 { | |
| color: var(--notion-fg-green); | |
| } | |
| .cm-negative { | |
| color: var(--notion-fg-red); | |
| } | |
| .cm-positive { | |
| color: var(--notion-fg-green); | |
| } | |
| .cm-searching { | |
| background-color: var(--notion-bg-yellow); | |
| } | |
| .CodeMirror-line::selection, | |
| .CodeMirror-line > span::selection, | |
| .CodeMirror-line > span > span::selection { | |
| background: var(--notion-select-default); | |
| } | |
| .CodeMirror-line::-moz-selection, | |
| .CodeMirror-line > span::-moz-selection, | |
| .CodeMirror-line > span > span::-moz-selection { | |
| background: var(--notion-select-default); | |
| } | |
| ul.fancytree-container { | |
| padding-left: 0; | |
| } | |
| ul.fancytree-container li { | |
| list-style: none; | |
| } | |
| span.fancytree-node.fancytree-hide { | |
| display: none; | |
| } | |
| .fancytree-title { | |
| margin-left: 0.4375em; | |
| outline: none; | |
| position: relative; | |
| top: 0.125em; | |
| } | |
| .fancytree-node { | |
| height: 2.375em; | |
| padding: 0.25em; | |
| border: 1px solid transparent; | |
| border-radius: 5px; | |
| } | |
| .fancytree-node:not(.fancytree-loading) .fancytree-expander:before { | |
| top: 0.125em; | |
| margin-right: 0.3125em; | |
| } | |
| .fancytree-loading span.fancytree-expander { | |
| width: 1em; | |
| height: 1em; | |
| margin-left: 0.3125em; | |
| margin-right: 0.5em; | |
| margin-top: 0.25em; | |
| margin-bottom: 0.125em; | |
| } | |
| .fancytree-loading span.fancytree-expander:after { | |
| width: 0.75em; | |
| height: 0.75em; | |
| margin-top: 0.25em; | |
| margin-left: 0.0625em; | |
| border-width: 0.0625em; | |
| border-style: solid; | |
| } | |
| ul.fancytree-container { | |
| outline: none; | |
| background-color: inherit; | |
| } | |
| .fancytree-custom-icon { | |
| font-size: 1.2em; | |
| } | |
| span.fancytree-node.protected > span.fancytree-custom-icon { | |
| filter: drop-shadow(2px 2px 2px var(--main-text-color)); | |
| } | |
| /* first nesting level has lower left padding to avoid extra left padding. Other levels are not affected */ | |
| .ui-fancytree > li > ul { | |
| padding-left: 0.3125em; | |
| } | |
| .ui-fancytree ul { | |
| padding-left: 1.25em; | |
| } | |
| .bx.tree-item-button { | |
| margin-left: 0.5em; | |
| padding: 0.0625em; | |
| border: 1px solid transparent; | |
| border-radius: 5px; | |
| } | |
| #fancytree-drop-marker.fancytree-drop-after, #fancytree-drop-marker.fancytree-drop-before { | |
| width: 100px; | |
| /* marker is by default position: relative which doesn't make sense */ | |
| position: absolute !important; | |
| /* heaving a height helps with positioning since the algorithm calculating "top" takes it into account */ | |
| height: 19px; | |
| } | |
| input.note-title { | |
| font-weight: 500; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :root { | |
| --system-stack-sans-serif: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif; | |
| --system-stack-serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol; | |
| --system-stack-monospace: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace; | |
| } | |
| :root { | |
| --notion-fg-default: rgb(55, 53, 47); | |
| --notion-fg-gray: rgb(155, 154, 151); | |
| --notion-fg-brown: rgb(100, 71, 58); | |
| --notion-fg-orange: rgb(217, 115, 13); | |
| --notion-fg-yellow: rgb(223, 171, 1); | |
| --notion-fg-green: rgb(15, 123, 108); | |
| --notion-fg-blue: rgb(11, 110, 153); | |
| --notion-fg-purple: rgb(105, 64, 165); | |
| --notion-fg-pink: rgb(173, 26, 114); | |
| --notion-fg-red: rgb(224, 62, 62); | |
| --notion-bg-default: rgb(255, 255, 255); | |
| --notion-bg-gray: rgb(235, 236, 237); | |
| --notion-bg-brown: rgb(233, 229, 227); | |
| --notion-bg-orange: rgb(250, 235, 221); | |
| --notion-bg-yellow: rgb(251, 243, 219); | |
| --notion-bg-green: rgb(221, 237, 234); | |
| --notion-bg-blue: rgb(221, 235, 241); | |
| --notion-bg-purple: rgb(234, 228, 242); | |
| --notion-bg-pink: rgb(244, 223, 235); | |
| --notion-bg-red: rgb(251, 228, 228); | |
| --notion-select-default: rgb(206, 205, 202); | |
| --notion-select-gray: rgb(155, 154, 151); | |
| --notion-select-brown: rgb(140, 46, 0); | |
| --notion-select-orange: rgb(245, 93, 0); | |
| --notion-select-yellow: rgb(233, 168, 0); | |
| --notion-select-green: rgb(0, 135, 107); | |
| --notion-select-blue: rgb(0, 120, 223); | |
| --notion-select-purple: rgb(103, 36, 222); | |
| --notion-select-pink: rgb(221, 0, 129); | |
| --notion-select-red: rgb(255, 0, 26); | |
| } | |
| :root { | |
| --rg-prose-font: var(--system-stack-sans-serif); | |
| --rg-prose-size: 16px; | |
| --theme-style: light; | |
| --main-font-family: var(--rg-prose-font); | |
| --main-font-size: var(--rg-prose-size); | |
| --tree-font-family: var(--rg-prose-font); | |
| --tree-font-size: calc(var(--rg-prose-size) * 0.8); | |
| --detail-font-family: var(--rg-prose-font); | |
| --detail-font-size: var(--rg-prose-size); | |
| --monospace-font-family: var(--system-stack-monospace); | |
| --monospace-font-size: var(--rg-prose-size); | |
| --main-background-color: var(--notion-bg-default); | |
| --main-border-color: var(--notion-fg-gray); | |
| --main-text-color: var(--notion-fg-default); | |
| --accented-background-color: var(--notion-bg-blue); | |
| --more-accented-background-color: var(--notion-bg-gray); | |
| --button-background-color: var(--accented-background-color); | |
| --button-border-color: var(--more-accented-background-color); | |
| --button-text-color: var(--main-text-color); | |
| --button-disabled-background-color: var(--more-accented-background-color); | |
| --button-disabled-text-color: var(--main-text-color); | |
| --button-border-color: var(--notion-bg-gray); | |
| --button-text-color: var(--notion-fg-default); | |
| --button-border-radius: 5px; | |
| --primary-button-background-color: var(--notion-bg-blue); | |
| --primary-button-text-color: var(--notion-bg-default); | |
| --primary-button-border-color: var(--notion-select-blue); | |
| --muted-text-color: var(--notion-select-gray); | |
| --input-text-color: var(--main-text-color); | |
| --input-background-color: transparent; | |
| --hover-item-text-color: var(--main-text-color); | |
| --hover-item-background-color: transparent; | |
| --hover-item-border-color: var(--main-border-color); | |
| --active-item-text-color: var(--main-text-color); | |
| --active-item-background-color: var(--accented-background-color); | |
| --active-item-border-color: transparent; | |
| --menu-text-color: var(--main-text-color); | |
| --menu-background-color: var(--main-background-color); | |
| --modal-background-color: var(--main-background-color); | |
| --modal-backdrop-color: var(--main-text-color); | |
| --left-pane-background-color: var(--main-background-color); | |
| --left-pane-text-color: var(--main-text-color); | |
| --launcher-pane-background-color: var(--accented-background-color); | |
| --launcher-pane-text-color: var(--main-text-color); | |
| --active-tab-background-color: var(--accented-background-color); | |
| --active-tab-hover-background-color: var(--notion-select-default); | |
| --active-tab-text-color: var(--main-text-color); | |
| --inactive-tab-background-color: var(--notion-bg-gray); | |
| --inactive-tab-hover-background-color: var(--notion-select-default); | |
| --inactive-tab-text-color: var(--muted-text-color); | |
| --scrollbar-border-color: var(--more-accented-background-color); | |
| --tooltip-background-color: var(--notion-select-default); | |
| --link-color: var(--notion-fg-blue); | |
| --mermaid-theme: default; | |
| } | |
| .CodeMirror { | |
| font-family: var(--monospace-font-family); | |
| color: var(--main-text-color); | |
| background: var(--main-background-color); | |
| } | |
| .CodeMirror-activeline-background { | |
| background: var(--notion-bg-gray); | |
| } | |
| .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler { | |
| background-color: var(--main-background-color); | |
| } | |
| .CodeMirror-gutters { | |
| background-color: var(--more-accented-color); | |
| border-color: var(--accented-color); | |
| } | |
| .CodeMirror-linenumber { | |
| color: var(--muted-text-color); | |
| } | |
| .CodeMirror-guttermarker { | |
| color: var(--main-text-color); | |
| } | |
| .CodeMirror-guttermarker-subtle { | |
| color: var(--muted-text-color); | |
| } | |
| .CodeMirror-cursor { | |
| border-left-color: var(--main-text-color); | |
| } | |
| .cm-fat-cursor .CodeMirror-cursor { | |
| background: var(--notion-bg-green); | |
| } | |
| .CodeMirror-matchingtag { | |
| background: var(--notion-bg-orange); | |
| } | |
| .CodeMirror-ruler { | |
| border-color: var(--accented-color); | |
| } | |
| .CodeMirror-selected { | |
| background: var(--notion-select-default); | |
| } | |
| .CodeMirror-focused .CodeMirror-selected { | |
| background: var(--notion-select-default); | |
| } | |
| .CodeMirror div.CodeMirror-secondarycursor { | |
| border-color: var(--accented-background-color); | |
| } | |
| .CodeMirror span.CodeMirror-matchingbracket { | |
| color: var(--notion-fg-green); | |
| } | |
| .CodeMirror span.CodeMirror-nonmatchingbracket { | |
| color: var(--notion-fg-red); | |
| } | |
| .cm-fat-cursor-mark { | |
| background-color: rgba(20, 255, 20, 0.5); | |
| } | |
| .cm-animate-fat-cursor { | |
| background-color: var(--notion-bg-green); | |
| } | |
| /* DEFAULT THEME */ | |
| .cm-s-default .cm-atom { | |
| color: var(--notion-fg-blue); | |
| } | |
| .cm-s-default .cm-attribute { | |
| color: var(--notion-fg-blue); | |
| } | |
| .cm-s-default .cm-bracket { | |
| color: var(--notion-fg-gray); | |
| } | |
| .cm-s-default .cm-buitin { | |
| color: var(--notion-fg-green); | |
| } | |
| .cm-s-default .cm-comment { | |
| color: var(--notion-fg-gray); | |
| } | |
| .cm-s-default .cm-def { | |
| color: var(--notion-fg-blue); | |
| } | |
| .cm-s-default .cm-error { | |
| color: var(--notion-fg-red); | |
| } | |
| .cm-s-default .cm-header { | |
| color: var(--notion-fg-blue); | |
| } | |
| .cm-s-default .cm-hr { | |
| color: var(--notion-fg-gray); | |
| } | |
| .cm-s-default .cm-invalidchar { | |
| color: var(--notion-fg-red); | |
| } | |
| .cm-s-default .cm-keyword { | |
| color: var(--notion-fg-purple); | |
| } | |
| .cm-s-default .cm-link { | |
| color: var(--notion-fg-blue); | |
| } | |
| .cm-s-default .cm-meta { | |
| color: var(--notion-fg-gray); | |
| } | |
| .cm-s-default .cm-number { | |
| color: var(--notion-fg-green); | |
| } | |
| .cm-s-default .cm-qualifier { | |
| color: var(--notion-fg-gray); | |
| } | |
| .cm-s-default .cm-quote { | |
| color: var(--notion-fg-green); | |
| } | |
| .cm-s-default .cm-string { | |
| color: var(--notion-fg-red); | |
| } | |
| .cm-s-default .cm-string-2 { | |
| color: var(--notion-fg-orange); | |
| } | |
| .cm-s-default .cm-tag { | |
| color: var(--notion-fg-green); | |
| } | |
| .cm-s-default .cm-type { | |
| color: var(--notion-fg-green); | |
| } | |
| .cm-s-default .cm-variable-2 { | |
| color: var(--notion-fg-blue); | |
| } | |
| .cm-s-default .cm-variable-3 { | |
| color: var(--notion-fg-green); | |
| } | |
| .cm-negative { | |
| color: var(--notion-fg-red); | |
| } | |
| .cm-positive { | |
| color: var(--notion-fg-green); | |
| } | |
| .cm-searching { | |
| background-color: var(--notion-bg-yellow); | |
| } | |
| .CodeMirror-line::selection, | |
| .CodeMirror-line > span::selection, | |
| .CodeMirror-line > span > span::selection { | |
| background: var(--notion-select-default); | |
| } | |
| .CodeMirror-line::-moz-selection, | |
| .CodeMirror-line > span::-moz-selection, | |
| .CodeMirror-line > span > span::-moz-selection { | |
| background: var(--notion-select-default); | |
| } | |
| ul.fancytree-container { | |
| padding-left: 0; | |
| } | |
| ul.fancytree-container li { | |
| list-style: none; | |
| } | |
| span.fancytree-node.fancytree-hide { | |
| display: none; | |
| } | |
| .fancytree-title { | |
| margin-left: 0.4375em; | |
| outline: none; | |
| position: relative; | |
| top: 0.125em; | |
| } | |
| .fancytree-node { | |
| height: 2.375em; | |
| padding: 0.25em; | |
| border: 1px solid transparent; | |
| border-radius: 5px; | |
| } | |
| .fancytree-node:not(.fancytree-loading) .fancytree-expander:before { | |
| top: 0.125em; | |
| margin-right: 0.3125em; | |
| } | |
| .fancytree-loading span.fancytree-expander { | |
| width: 1em; | |
| height: 1em; | |
| margin-left: 0.3125em; | |
| margin-right: 0.5em; | |
| margin-top: 0.25em; | |
| margin-bottom: 0.125em; | |
| } | |
| .fancytree-loading span.fancytree-expander:after { | |
| width: 0.75em; | |
| height: 0.75em; | |
| margin-top: 0.25em; | |
| margin-left: 0.0625em; | |
| border-width: 0.0625em; | |
| border-style: solid; | |
| } | |
| ul.fancytree-container { | |
| outline: none; | |
| background-color: inherit; | |
| } | |
| .fancytree-custom-icon { | |
| font-size: 1.2em; | |
| } | |
| span.fancytree-node.protected > span.fancytree-custom-icon { | |
| filter: drop-shadow(2px 2px 2px var(--main-text-color)); | |
| } | |
| /* first nesting level has lower left padding to avoid extra left padding. Other levels are not affected */ | |
| .ui-fancytree > li > ul { | |
| padding-left: 0.3125em; | |
| } | |
| .ui-fancytree ul { | |
| padding-left: 1.25em; | |
| } | |
| .bx.tree-item-button { | |
| margin-left: 0.5em; | |
| padding: 0.0625em; | |
| border: 1px solid transparent; | |
| border-radius: 5px; | |
| } | |
| #fancytree-drop-marker.fancytree-drop-after, #fancytree-drop-marker.fancytree-drop-before { | |
| width: 100px; | |
| /* marker is by default position: relative which doesn't make sense */ | |
| position: absolute !important; | |
| /* heaving a height helps with positioning since the algorithm calculating "top" takes it into account */ | |
| height: 19px; | |
| } | |
| :root { | |
| --rg-prose-font: var(--system-stack-sans-serif); | |
| --rg-prose-size: 16px; | |
| --theme-style: light; | |
| --main-font-family: var(--rg-prose-font); | |
| --main-font-size: var(--rg-prose-size); | |
| --tree-font-family: var(--rg-prose-font); | |
| --tree-font-size: calc(var(--rg-prose-size) * 0.8); | |
| --detail-font-family: var(--rg-prose-font); | |
| --detail-font-size: var(--rg-prose-size); | |
| --monospace-font-family: var(--system-stack-monospace); | |
| --monospace-font-size: var(--rg-prose-size); | |
| --main-background-color: var(--notion-bg-default); | |
| --main-border-color: var(--notion-fg-gray); | |
| --main-text-color: var(--notion-fg-default); | |
| --accented-background-color: var(--notion-bg-blue); | |
| --more-accented-background-color: var(--notion-bg-gray); | |
| --button-background-color: var(--accented-background-color); | |
| --button-border-color: var(--more-accented-background-color); | |
| --button-text-color: var(--main-text-color); | |
| --button-disabled-background-color: var(--more-accented-background-color); | |
| --button-disabled-text-color: var(--main-text-color); | |
| --button-border-color: var(--notion-bg-gray); | |
| --button-text-color: var(--notion-fg-default); | |
| --button-border-radius: 5px; | |
| --primary-button-background-color: var(--notion-bg-blue); | |
| --primary-button-text-color: var(--notion-bg-default); | |
| --primary-button-border-color: var(--notion-select-blue); | |
| --muted-text-color: var(--notion-select-gray); | |
| --input-text-color: var(--main-text-color); | |
| --input-background-color: transparent; | |
| --hover-item-text-color: var(--main-text-color); | |
| --hover-item-background-color: transparent; | |
| --hover-item-border-color: var(--main-border-color); | |
| --active-item-text-color: var(--main-text-color); | |
| --active-item-background-color: var(--accented-background-color); | |
| --active-item-border-color: transparent; | |
| --menu-text-color: var(--main-text-color); | |
| --menu-background-color: var(--main-background-color); | |
| --modal-background-color: var(--main-background-color); | |
| --modal-backdrop-color: var(--main-text-color); | |
| --left-pane-background-color: var(--main-background-color); | |
| --left-pane-text-color: var(--main-text-color); | |
| --launcher-pane-background-color: var(--accented-background-color); | |
| --launcher-pane-text-color: var(--main-text-color); | |
| --active-tab-background-color: var(--accented-background-color); | |
| --active-tab-hover-background-color: var(--notion-select-default); | |
| --active-tab-text-color: var(--main-text-color); | |
| --inactive-tab-background-color: var(--notion-bg-gray); | |
| --inactive-tab-hover-background-color: var(--notion-select-default); | |
| --inactive-tab-text-color: var(--muted-text-color); | |
| --scrollbar-border-color: var(--more-accented-background-color); | |
| --tooltip-background-color: var(--notion-select-default); | |
| --link-color: var(--notion-fg-blue); | |
| --mermaid-theme: default; | |
| } | |
| input.note-title { | |
| font-weight: 500; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment