dom/obsidian_everforest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refined colors; updated skeleton ToC; updated README

Browse Source
This commit is contained in:
GlitchByte
2021-07-14 15:38:55 -04:00
parent b114d6a769
commit 8585e70287
4 changed files with 182 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

246
everforest.css
View File

@@ -1,101 +1,185 @@
/***** 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
{
--dark0-hard: #22282c;
--dark0: #2f383e;
--dark0-soft: #2f383e;
--dark1: #374247;
--dark2: #404c51;
--dark3: #4a555b;
--dark4: #525c62;
/* 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;
--gray: #7c8377;
--light0-hard: #fff9e8;
--light0: #fdf6e3;
--light0-soft: #f8f0dc;
--light1: #f7f2e0;
--light2: #f0eed9;
--light3: #e9e8d2;
--light4: #e1ddcb;
--fg-dark: #d3c6aa;
--grey0-dark: #7f897d;
--grey1-dark: #859289;
--grey2-dark: #9aa79d;
--faded-red: #e67e80;
--faded-green: #a7c080;
--faded-yellow: #dbbc7f;
--faded-blue: #7fbbb3;
--faded-purple: #d3869b;
--faded-aqua: #83c092;
--faded-orange: #e69875;
--faded-yellow: #dbbc7f;
--faded-green: #a7c080;
--faded-aqua: #83c092;
--faded-blue: #7fbbb3;
--faded-purple: #d699b6;
--neutral-red: #da6362;
--neutral-green: #899c40;
--neutral-yellow: #bf983d;
--neutral-blue: #5a93a2;
--neutral-purple: #b87b9d;
--neutral-aqua: #569d79;
--neutral-orange: #d77f48;
--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
{
--font-monospace: 'Hack Nerd Font', 'Source Code Pro', monospace;
--background-primary: var(--dark0);
--background-primary-alt: var(--dark0);
--background-secondary: var(--dark0);
--background-secondary-alt: var(--dark1);
--text-normal: var(--light0);
--text-faint: var(--light3);
--text-title-h1: var(--faded-red);
--text-title-h2: var(--faded-orange);
--text-title-h3: var(--faded-yellow);
--text-title-h4: var(--faded-green);
--text-title-h5: var(--faded-aqua);
--text-title-h6: var(--faded-purple);
--text-link: var(--neutral-blue);
--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(--faded-green);
--text-a-hover: var(--faded-aqua);
/*--text-mark: rgba(215, 153, 33, 0.4); /* neutral-yellow */
--pre-code: var(--dark1);
--text-highlight-bg: var(--neutral-aqua);
--interactive-accent: var(--neutral-blue);
--interactive-before: var(--dark4);
--background-modifier-border: var(--dark2);
--text-accent: var(--neutral-green);
--interactive-accent-rgb: var(--neutral-blue);
--inline-code: var(--faded-blue);
--code-block: var(--faded-red);
--vim-cursor: var(--neutral-blue);
--text-selection: var(--dark4)
--text-a-hover: var(--dim-green);
--text-mark: rgba(215, 153, 33, 0.4); /* light-yellow */
--pre-code: var(--bg1-dark);
--text-highlight-bg: var(--bg_green);
--interactive-accent: var(--bg5-dark);
--interactive-before: var(--bg5-dark);
--background-modifier-border: var(--bg5-dark);
--text-accent: var(--bg5-dark);
--interactive-accent-rgb: var(--faded-green);
--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(--light0);
--background-primary-alt: var(--light0);
--background-secondary: var(--light0-hard);
--background-secondary-alt: var(--light1);
--text-normal: var(--dark0);
--text-faint: var(--dark3);
--text-title-h1: var(--neutral-red);
--text-title-h2: var(--neutral-orange);
--text-title-h3: var(--neutral-yellow);
--text-title-h4: var(--neutral-green);
--text-title-h5: var(--neutral-aqua);
--text-link: var(--neutral-blue);
--text-a: var(--neutral-orange);
--text-a-hover: var(--neutral-aqua);
--text-mark: rgba(215, 153, 33, 0.4); /* neutral-yellow */
--pre-code: var(--light1);
--text-highlight-bg: var(--neutral-aqua);
--interactive-accent: var(--neutral-orange);
--interactive-before: var(--light4);
--background-modifier-border: var(--light2);
--text-accent: var(--neutral-orange);
--interactive-accent-rgb: var(--neutral-orange);
--inline-code: var(--neutral-blue);
--vim-cursor: var(--neutral-orange);
--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 */
}
@@ -472,14 +556,14 @@ img
}
input.task-list-item-checkbox {
border: 1px solid var(--dark4);
border: 1px solid var(--dark3);
appearance: none;
-webkit-appearance: none;
}
input.task-list-item-checkbox:checked
{
background-color: var(--dark4);
background-color: var(--dark3);
box-shadow: inset 0 0 0 2px var(--background-primary);
}