snek-tech-blog/content/posts/.obsidian/themes/Everforest.css

670 lines
14 KiB
CSS
Raw Normal View History

2022-10-17 22:23:50 +00:00
/***** 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;
}
/* 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(--bg5-light);
--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);
}