diff options
Diffstat (limited to '.obsidian/themes/Everforest/theme.css')
| -rwxr-xr-x | .obsidian/themes/Everforest/theme.css | 675 |
1 files changed, 675 insertions, 0 deletions
diff --git a/.obsidian/themes/Everforest/theme.css b/.obsidian/themes/Everforest/theme.css new file mode 100755 index 0000000..d897bba --- /dev/null +++ b/.obsidian/themes/Everforest/theme.css @@ -0,0 +1,675 @@ +/***** TABLE OF CONTENTS *****/ +/* TODO: Reformat entire CSS file as below. +/* 1. Font +/* 2. Colours +/* 2.1. Dark theme color variables +/* 2.2. Light theme color variables +/* 2.3. Dark theme implementation +/* 2.4. Light theme implementation +/* 3. General UI +/* 3.1. Title Bar +/* 4. Markdown (editor / preview) +/* 4.1. Headings +/* 4.1.1. Fix font weights +/* 4.2. Links +/* 4.2.1. Nifty arrow before internal links (also applies to embeds) +/* 4.3. Embeds +/* 4.4. Tables +/* 4.5. Popovers +/* 4.6. Task Lists +/* 4.7. Blockquotes +/* 4.8. Code +/* 4.9. Bulleted lists +/* 4.10. Misc Fixes +/* 5. Graph view colours +/* 6. Notion Colour Blocks +/* 7. In-document header (scrolls with the document) [remove for compatibility with Andy's mode] +/* 7.1. Adjustments for non-in-document headers (graphs, etc)\ +/* 7.2. Active pane border +/* 7.3. Misc fixes +/* 8. Tags +/* 8.1. Tag custom colours +/***** *****/ + +/* 1. Font */ +body { + /* font stacks taken directly from Notion */ + --font-monospace: "Hack Nerd Font", "Source Code Pro", monospace; + -webkit-font-smoothing: auto; + --h1-color: var(--text-title-h1); + --h2-color: var(--text-title-h2); + --h3-color: var(--text-title-h3); + --h4-color: var(--text-title-h4); + --h5-color: var(--text-title-h5); + --h6-color: var(--text-title-h6); +} + +/* 2. Colours */ +:root +{ + /* 2.1 Dark theme color variables */ + --bg0-dark: #22282c; + --bg1-dark: #272f34; + --bg-dark: #2f383e; + --bg2-dark: #374247; + --bg3-dark: #404c51; + --bg4-dark: #4a555b; + --bg5-dark: #525c62; + --bg_visual: #503946; + --bg_red: #4e3e43; + --bg_green: #404d44; + --bg_blue: #394f5a; + --bg_yellow: #4a4940; + --shadow: #00000070; + + --fg-dark: #d3c6aa; + --grey0-dark: #7f897d; + --grey1-dark: #859289; + --grey2-dark: #9aa79d; + + --faded-red: #e67e80; + --faded-orange: #e69875; + --faded-yellow: #dbbc7f; + --faded-green: #a7c080; + --faded-aqua: #83c092; + --faded-blue: #7fbbb3; + --faded-purple: #d699b6; + + --dim-red: #da6362; + --dim-orange: #d77f48; + --dim-yellow: #bf983d; + --dim-green: #899c40; + --dim-aqua: #569d79; + --dim-blue: #5a93a2; + --dim-purple: #b87b9d; + + + /* 2.2 Light theme color variables */ + --bg0-light: #f0edd8; + --bg1-light: #f6f1dd; + --bg-light: #fdf6e3; + --bg2-light: #f3efda; + --bg3-light: #edead5; + --bg4-light: #e4e1cd; + --bg5-light: #dfdbc8; + --grey0-light: #a4ad9e; + --grey1-light: #939f91; + --grey2-light: #879686; + --shadow-light: #3c474d20; + + + --bg_visual_light: #eaedc8; + --bg_red_light: #fbe3da; + --bg_green_light: #f0f1d2; + --bg_blue_light: #e9f0e9; + --bg_yellow_light: #faedcd; + + --fg-light: #5c6a72; + + --light-red: #f85552; + --light-orange: #f57d26; + --light-yellow: #bf983d; + --light-green: #899c40; + --light-aqua: #569d79; + --light-blue: #5a93a2; + --light-purple: #b87b9d; + + --light-dim-red: #f1706f; + --light-dim-orange: #f39459; + --light-dim-yellow: #e4b649; + --light-dim-green: #a4bb4a; + --light-dim-aqua: #6ec398; + --light-dim-blue: #6cb3c6; + --light-dim-purple: #e092be; + + +} + +/* 2.3 Dark theme implementation */ +.theme-dark +{ + --background-primary: var(--bg-dark); + --background-primary-alt: var(--bg-dark); + --background-secondary: var(--bg-dark); + --background-secondary-alt: var(--bg-dark); + --text-normal: var(--fg-dark); + --text-faint: var(--grey1-dark); + --text-title-h1: var(--dim-red); + --text-title-h2: var(--dim-orange); + --text-title-h3: var(--dim-yellow); + --text-title-h4: var(--dim-green); + --text-title-h5: var(--dim-aqua); + --text-title-h6: var(--dim-purple); + --text-link: var(--faded-blue); + --text-a: var(--dim-aqua); + --text-a-hover: var(--faded-aqua); + --text-mark: rgba(215, 153, 33, 0.4); /* light-yellow */ + --pre-code: var(--bg1-dark); + --text-highlight-bg: var(--bg_green); + --interactive-accent: var(--dim-aqua); + --interactive-before: var(--bg5-dark); + --background-modifier-border: var(--bg5-dark); + --text-accent: var(--dim-blue); + --interactive-accent-rgb: var(--dim-blue); + --inline-code: var(--dim-blue); + --code-block: var(--fg-dark); + --vim-cursor: var(--faded-blue); + --text-selection: var(--bg5-dark); +} + +/* 2.4 Light theme implementation */ +.theme-light +{ + --background-primary: var(--bg-light); + --background-primary-alt: var(--bg-light); + --background-secondary: var(--bg-light); + --background-secondary-alt: var(--bg-light); + --text-normal: var(--fg-light); + --text-faint: var(--grey1-light); + --text-title-h1: var(--light-red); + --text-title-h2: var(--light-orange); + --text-title-h3: var(--light-yellow); + --text-title-h4: var(--light-green); + --text-title-h5: var(--light-aqua); + --text-title-h6: var(--light-purple); + --text-link: var(--light-blue); + --text-a: var(--light-dim-blue); + --text-a-hover: var(--light-blue); + --text-mark: rgba(215, 153, 33, 0.4); /* light-yellow */ + --pre-code: var(--bg1-light); + --text-highlight-bg: var(--light-dim-green); + --interactive-accent: var(--bg5-light); + --interactive-before: var(--bg5-light); + --background-modifier-border: var(--bg5-light); + --text-accent: var(--light-dim-green); + --interactive-accent-rgb: var(--light-dim-green); + --inline-code: var(--light-blue); + --code-block: var(--fg-light); + --vim-cursor: var(--light-blue); + --text-selection: rgba(189, 174, 147, 0.5); /* light3 */ +} + +.theme-dark code[class*="language-"], +.theme-dark pre[class*="language-"], +.theme-light code[class*="language-"], +.theme-light pre[class*="language-"] +{ + text-shadow: none ; + background-color: var(--pre-code) ; +} + +/* 3. General UI */ +.view-header-title { + font-weight: 700; + } + + /* 3.1. Title bar */ + .titlebar { + background-color: var(--background-secondary-alt); + } + + .titlebar-inner { + color: var(--text-normal); + } + +.graph-view.color-circle, +.graph-view.color-fill-highlight, +.graph-view.color-line-highlight +{ + color: var(--interactive-accent-rgb) ; +} +.graph-view.color-text +{ + color: var(--text-a-hover) ; +} +/* +.graph-view.color-fill +{ + color: var(--background-secondary); +} +.graph-view.color-line +{ + color: var(--background-modifier-border); +} +*/ + +html, +body +{ + font-size: 16px ; +} + +strong +{ + font-weight: 600 ; +} + +a, +.cm-hmd-internal-link +{ + color: var(--text-a) ; + text-decoration: none ; +} + +a:hover, +.cm-hmd-internal-link:hover, +.cm-url +{ + color: var(--text-a-hover) ; + text-decoration: none ; +} + + +/*---------------------------------------------------------------- +TAGS +----------------------------------------------------------------*/ + +.token.tag { + padding: 0px 0px; + background-color: transparent; + border: none; + } + + .token.tag:hover { + background: transparent; + color: var(--text-a-hover) !important; + } + + /*---------------------------------------------------------------- + TAG PILLS + ----------------------------------------------------------------*/ + .markdown-preview-section h1 a.tag, + .markdown-preview-section h2 a.tag, + .markdown-preview-section h3 a.tag, + .markdown-preview-section h4 a.tag, + .markdown-preview-section h5 a.tag, + .markdown-preview-section h4 a.tag { + font-weight: inherit; + } + + .tag { + background-color: var(--tag-base); + border: 1px solid var(--interactive-accent); + color: var(--text-a); + font-weight: 500; + padding: 1.5px 6px; + padding-left: 6px; + padding-right: 6px; + text-align: center; + text-decoration: none !important; + display: inline-block; + cursor: pointer; + border-radius: 8px; + transition: 0.2s ease-in-out; + } + + .tag:hover { + color: var(--interactive-accent); + } + + /*---------------------------------------------------------------- + TAG REF STYLING + ----------------------------------------------------------------*/ + + .tag[href^="#❗️"], + .tag[href^="#important❗️"] { + background-color: var(--tag-base); + border: 1px solid var(--boldred); + } + + .tag[href^="#📓"], + .tag[href^="#journal📓"] { + background-color: var(--tag-base); + border: 1px solid var(--purple); + } + + .tag[href^="#🌱"], + .tag[href^="#seedling🌱"], + .tag[href^="#🌿"], + .tag[href^="#budding🌿"], + .tag[href^="#🌳"], + .tag[href^="#evergreen🌳"] { + background-color: var(--tag-base); + border: 1px solid var(--boldgreen); + } + +mark +{ + background-color: var(--text-mark) ; +} + +.view-actions a +{ + color: var(--text-normal) ; +} + +.view-actions a:hover +{ + color: var(--text-a) ; +} + +.HyperMD-codeblock-bg +{ + background-color: var(--pre-code) ; +} + +.HyperMD-codeblock +{ + line-height: 1.4em ; + color: var(--code-block) ; +} + +.HyperMD-codeblock-begin +{ + border-top-left-radius: 4px ; + border-top-right-radius: 4px ; +} + +.HyperMD-codeblock-end +{ + border-bottom-left-radius: 4px ; + border-bottom-right-radius: 4px ; +} + +th +{ + font-weight: 600 ; +} + +thead +{ + border-bottom: 2px solid var(--background-modifier-border) ; +} + +.HyperMD-table-row +{ + line-height: normal ; + padding-left: 4px ; + padding-right: 4px ; + /* background-color: var(--pre-code) ; */ +} + +.HyperMD-table-row-0 +{ + padding-top: 4px ; +} + +.CodeMirror-foldgutter-folded, +.is-collapsed .nav-folder-collapse-indicator +{ + color: var(--text-a) ; +} + +.nav-file-tag +{ + color: var(--text-a) ; +} + +.is-active .nav-file-title +{ + color: var(--text-a) ; + background-color: var(--background-primary-alt) ; +} + +.nav-file-title +{ + border-bottom-left-radius: 0 ; + border-bottom-right-radius: 0 ; + border-top-left-radius: 0 ; + border-top-right-radius: 0 ; +} + +img +{ + display: block ; + margin-left: auto ; + margin-right: auto ; +} + +.HyperMD-list-line +{ + padding-top: 0 ; +} + +.CodeMirror-code, +.CodeMirror-linenumber, +.cm-formatting +{ + font-family: var(--font-monospace) ; + font-size: 0.9em; +} + +.markdown-preview-section pre code, +.markdown-preview-section code +{ + font-size: 0.9em ; + background-color: var(--pre-code) ; +} + +.markdown-preview-section pre code +{ + padding: 4px ; + line-height: 1.4em ; + display: block ; + color: var(--code-block) ; +} + +.markdown-preview-section code +{ + color: var(--inline-code) ; +} + +.cm-s-obsidian, +.cm-inline-code +{ + -webkit-font-smoothing: auto ; +} + +.cm-inline-code +{ + color: var(--inline-code) ; + background-color: var(--pre-code) ; + padding: 1px ; +} + +.workspace-leaf-header-title +{ + font-weight: 600 ; +} + +.side-dock-title +{ + padding-top: 15px ; + font-size: 20px ; +} + +.side-dock-ribbon-tab:hover, +.side-dock-ribbon-action:hover, +.side-dock-ribbon-action.is-active:hover, +.nav-action-button:hover, +.side-dock-collapse-btn:hover +{ + color: var(--text-a); +} + +.side-dock +{ + border-right: 0 ; +} + +.cm-s-obsidian, +.markdown-preview-view +{ + /* padding-left: 10px ; */ + padding-right: 10px ; +} + +/* vertical resize-handle */ +.workspace-split.mod-vertical > * > .workspace-leaf-resize-handle, +.workspace-split.mod-left-split > .workspace-leaf-resize-handle, +.workspace-split.mod-right-split > .workspace-leaf-resize-handle +{ + width: 1px ; + background-color: var(--dim-aqua); +} + +/* horizontal resize-handle */ +.workspace-split.mod-horizontal > * > .workspace-leaf-resize-handle +{ + height: 1px ; + background-color: var(--dim-aqua); +} + +/* Remove vertical split padding */ +.workspace-split.mod-root .workspace-split.mod-vertical .workspace-leaf-content, +.workspace-split.mod-vertical > .workspace-split, +.workspace-split.mod-vertical > .workspace-leaf, +.workspace-tabs +{ + padding-right: 0px; +} + +.markdown-embed-title +{ + font-weight: 600 ; +} + +.markdown-embed +{ + padding-left: 10px ; + padding-right: 10px ; + margin-left: 10px ; + margin-right: 10px ; +} + +.cm-header-1, +.markdown-preview-section h1 +{ + font-weight: 500 ; + font-size: 34px ; + color: var(--text-title-h1) ; +} + +.cm-header-2, +.markdown-preview-section h2 +{ + font-weight: 500 ; + font-size: 26px ; + color: var(--text-title-h2) ; +} + +.cm-header-3, +.markdown-preview-section h3 +{ + font-weight: 500 ; + font-size: 22px ; + color: var(--text-title-h3) ; +} + +.cm-header-4, +.markdown-preview-section h4 +{ + font-weight: 500 ; + font-size: 20px ; + color: var(--text-title-h4) ; +} + +.cm-header-5, +.markdown-preview-section h5 +{ + font-weight: 500 ; + font-size: 18px ; + color: var(--text-title-h5) ; +} + +.cm-header-6, +.markdown-preview-section h6 +{ + font-weight: 500 ; + font-size: 18px ; + color: var(--text-title-h6) ; +} + +.suggestion-item.is-selected +{ + background-color: var(--text-selection); +} + +.empty-state-container:hover +{ + background-color: var(--background-secondary-alt); + border: 5px solid var(--interactive-accent) ; +} + +.checkbox-container +{ + background-color: var(--interactive-before); +} + +.checkbox-container:after +{ + background-color: var(--interactive-accent); +} + +.checkbox-container.is-enabled:after +{ + background-color: var(--bg5-dark); +} + +.mod-cta +{ + color: var(--background-secondary-alt) ; + font-weight: 600 ; +} + +.mod-cta a +{ + color: var(--background-secondary-alt) ; + font-weight: 600 ; +} + +.mod-cta:hover +{ + background-color: var(--interactive-before) ; + font-weight: 600 ; +} + +.CodeMirror-cursor +{ + background-color: var(--vim-cursor) ; + opacity: 60% ; +} + +input.task-list-item-checkbox { + border: 1px solid var(--faded-blue); + appearance: none; + -webkit-appearance: none; +} + +input.task-list-item-checkbox:checked +{ + background-color: var(--faded-blue); + box-shadow: inset 0 0 0 2px var(--background-primary); +} + +::selection +{ + background-color: var(--text-selection) ; +} + +.mermaid .note +{ + fill: var(--dark3) ; +} + +.frontmatter-container { + display: none; +} + +/* Bullet point relationship lines */ +.markdown-source-view.mod-cm6 .cm-indent::before, +.markdown-rendered.show-indentation-guide li > ul::before, +.markdown-rendered.show-indentation-guide li > ol::before { + position: absolute; + border-right: 1px solid var(--dim-blue); +} |