NicolaiVdS/Obsidian_Starter_Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Nicolai.vanderstorm - DSV
2024-05-21 15:51:11 +02:00
commit 5d48341cc7
326 changed files with 324847 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

499
.obsidian/snippets/Colored Sidebar Items.css vendored Normal file
View File

@@ -0,0 +1,499 @@
/*------------------------------------------------------------------------------
Obsidian Colored Sidebar Items by CyanVoxel v2.0.0
A colored sidebar CSS snippet inspired by
the "Coloured Folders" snippet by Lithou.
This snippet targets folders beginning with numbered prefixes, and applies full
color formatting based on the root colors listed below. The prefixes are both
customizable and extensible; feel free to change, add, and remove them based on
your own titles and vault structure! By default I have a range of 8+1 colors,
however I've provided some other common colors as a starting point for your own
customization. Just swap out the color variable names in the prefix groups.
------------------------------------------------------------------------------*/
:root {
/* ================================ Colors ================================ */
--red: #e22c3c;
/* Default Prefix: None */
--red-orange: #e9404b;
/* Default Prefix: None */
--orange: #ee6748;
/* Default Prefix: None */
--amber: #fa9f50;
/* Default Prefix: None */
--yellow: #ffd85e;
/* Default Prefix: None */
--lime: #97e768;
/* Default Prefix: None */
--mint: #52eea3;
/* Default Prefix: 00 */
--cyan: #51e1e9;
/* Default Prefix: 01 */
--cool-cyan: #43cfea;
/* Default Prefix: None */
--light-blue: #54b6f8;
/* Default Prefix: 02 */
--blue: #437cf3;
/* Default Prefix: 03 */
--blue-violet: #6f51f4;
/* Default Prefix: None */
--violet: #9446f8;
/* Default Prefix: 04 */
--purple: #c952ed;
/* Default Prefix: 05 */
--magenta: #e54f9b;
/* Default Prefix: 06 */
--hot-red: #e3365e;
/* Default Prefix: 07 */
--cool-gray: #515768;
/* Default Prefix: 99 */
--default-text-color: #d0d0d0;
--highlight: #fff;
--shadow: #0b0c2c;
--nav-item-weight-hover: bold;
}
/* Light Theme Specific Properties */
.theme-light {
--contrast-color: var(--shadow);
--default-text-color: var(--shadow);
--bg-contrast-amount: 70%;
--fg-contrast-amount: 30%;
--medium-contrast-amount: 60%;
--active-contrast-amount: 30%;
/* Darker Versions of Bright Colors for Light Theme */
--yellow: color-mix(in srgb, #ffd85e 90%, var(--shadow));
--lime: color-mix(in srgb, #97e768 90%, var(--shadow));
--mint: color-mix(in srgb, #52eea3 85%, var(--shadow));
--cyan: color-mix(in srgb, #51e1e9 85%, var(--shadow));
--cool-cyan: color-mix(in srgb, #43cfea 85%, var(--shadow));
--light-blue: color-mix(in srgb, #54b6f8 90%, var(--shadow));
}
/* Dark Theme Specific Properties */
.theme-dark {
--contrast-color: var(--highlight);
--bg-contrast-amount: 15%;
--fg-contrast-amount: 40%;
--medium-contrast-amount: 20%;
--active-contrast-amount: 10%;
}
/* All Folder Titles */
.nav-folder-title {
font-weight: bold;
border-radius: 5px;
}
/* Narrower Padding on Desktop*/
@media only screen and (min-width: 768px) {
.nav-file-title,
.nav-folder-title {
/* padding: 3px 5px 2px 4px !important; */
padding-top: 3px !important;
padding-right: 5px !important;
padding-bottom: 2px !important;
padding-left: 15px;
}
}
/*
============================ Folder Title Prefixes =============================
The following groups of prefixes are divided by the numbering prefix that they
target. For example, prefix '00' targets any folder titles beginning with '00',
such as '00 - Maps of Content'. The only other piece of information that changes
between the prefix groups are the color variables. Change or expand on any of
these to suit your own folder structure and vault theme!
*/
/* ------------------------------- 00 Prefix -------------------------------- */
.nav-folder-title[data-path^="00"] {
color: var(--mint);
--nav-item-color-hover: color-mix(in srgb,
var(--mint) var(--fg-contrast-amount),
var(--contrast-color));
--nav-item-background-hover: color-mix(in srgb,
var(--mint) var(--bg-contrast-amount),
transparent);
--background-modifier-border-focus: color-mix(in srgb,
var(--mint) 40%,
transparent);
--nav-collapse-icon-color: color-mix(in srgb, var(--mint) 60%, transparent);
}
.nav-folder-title[data-path^="00"]:hover {
--nav-collapse-icon-color: color-mix(in srgb,
var(--mint) 60%,
var(--contrast-color));
}
.tree-item-children .nav-folder:has(.nav-folder-title[data-path^="00"]) {
--nav-indentation-guide-color: color-mix(in srgb,
var(--mint) var(--medium-contrast-amount),
transparent);
}
.tree-item-children .nav-folder:has(.nav-folder-title[data-path^="00"]) .nav-file-title {
color: color-mix(in srgb,
var(--mint) var(--medium-contrast-amount),
var(--default-text-color));
--nav-item-background-hover: color-mix(in srgb,
color-mix(in srgb, var(--mint) 50%, var(--highlight)) var(--bg-contrast-amount),
transparent);
--background-modifier-border-focus: color-mix(in srgb,
var(--mint) 40%,
transparent);
--nav-item-background-active: color-mix(in srgb,
var(--mint) var(--active-contrast-amount),
transparent);
}
/* ------------------------------- 01 Prefix -------------------------------- */
.nav-folder-title[data-path^="01"] {
color: var(--cyan);
--nav-item-color-hover: color-mix(in srgb,
var(--cyan) var(--fg-contrast-amount),
var(--contrast-color));
--nav-item-background-hover: color-mix(in srgb,
var(--cyan) var(--bg-contrast-amount),
transparent);
--background-modifier-border-focus: color-mix(in srgb,
var(--cyan) 40%,
transparent);
--nav-collapse-icon-color: color-mix(in srgb, var(--cyan) 60%, transparent);
}
.nav-folder-title[data-path^="01"]:hover {
--nav-collapse-icon-color: color-mix(in srgb,
var(--cyan) 60%,
var(--contrast-color));
}
.tree-item-children .nav-folder:has(.nav-folder-title[data-path^="01"]) {
--nav-indentation-guide-color: color-mix(in srgb,
var(--cyan) var(--medium-contrast-amount),
transparent);
}
.tree-item-children .nav-folder:has(.nav-folder-title[data-path^="01"]) .nav-file-title {
color: color-mix(in srgb,
var(--cyan) var(--medium-contrast-amount),
var(--default-text-color));
--nav-item-background-hover: color-mix(in srgb,
color-mix(in srgb, var(--cyan) 50%, var(--highlight)) var(--bg-contrast-amount),
transparent);
--background-modifier-border-focus: color-mix(in srgb,
var(--cyan) 40%,
transparent);
--nav-item-background-active: color-mix(in srgb,
var(--cyan) var(--active-contrast-amount),
transparent);
}
/* ------------------------------- 02 Prefix -------------------------------- */
.nav-folder-title[data-path^="02"] {
color: var(--light-blue);
--nav-item-color-hover: color-mix(in srgb,
var(--light-blue) var(--fg-contrast-amount),
var(--contrast-color));
--nav-item-background-hover: color-mix(in srgb,
var(--light-blue) var(--bg-contrast-amount),
transparent);
--background-modifier-border-focus: color-mix(in srgb,
var(--light-blue) 40%,
transparent);
--nav-collapse-icon-color: color-mix(in srgb,
var(--light-blue) 60%,
transparent);
}
.nav-folder-title[data-path^="02"]:hover {
--nav-collapse-icon-color: color-mix(in srgb,
var(--light-blue) 60%,
var(--contrast-color));
}
.tree-item-children .nav-folder:has(.nav-folder-title[data-path^="02"]) {
--nav-indentation-guide-color: color-mix(in srgb,
var(--light-blue) var(--medium-contrast-amount),
transparent);
}
.tree-item-children .nav-folder:has(.nav-folder-title[data-path^="02"]) .nav-file-title {
color: color-mix(in srgb,
var(--light-blue) var(--medium-contrast-amount),
var(--default-text-color));
--nav-item-background-hover: color-mix(in srgb,
color-mix(in srgb, var(--light-blue) 50%, var(--highlight)) var(--bg-contrast-amount),
transparent);
--background-modifier-border-focus: color-mix(in srgb,
var(--light-blue) 40%,
transparent);
--nav-item-background-active: color-mix(in srgb,
var(--light-blue) var(--active-contrast-amount),
transparent);
}
/* ------------------------------- 03 Prefix -------------------------------- */
.nav-folder-title[data-path^="03"] {
color: var(--blue);
--nav-item-color-hover: color-mix(in srgb,
var(--blue) var(--fg-contrast-amount),
var(--contrast-color));
--nav-item-background-hover: color-mix(in srgb,
var(--blue) var(--bg-contrast-amount),
transparent);
--background-modifier-border-focus: color-mix(in srgb,
var(--blue) 40%,
transparent);
--nav-collapse-icon-color: color-mix(in srgb, var(--blue) 60%, transparent);
}
.nav-folder-title[data-path^="03"]:hover {
--nav-collapse-icon-color: color-mix(in srgb,
var(--blue) 60%,
var(--contrast-color));
}
.tree-item-children .nav-folder:has(.nav-folder-title[data-path^="03"]) {
--nav-indentation-guide-color: color-mix(in srgb,
var(--blue) var(--medium-contrast-amount),
transparent);
}
.tree-item-children .nav-folder:has(.nav-folder-title[data-path^="03"]) .nav-file-title {
color: color-mix(in srgb,
var(--blue) var(--medium-contrast-amount),
var(--default-text-color));
--nav-item-background-hover: color-mix(in srgb,
color-mix(in srgb, var(--blue) 50%, var(--highlight)) var(--bg-contrast-amount),
transparent);
--background-modifier-border-focus: color-mix(in srgb,
var(--blue) 40%,
transparent);
--nav-item-background-active: color-mix(in srgb,
var(--blue) var(--active-contrast-amount),
transparent);
}
/* ------------------------------- 04 Prefix -------------------------------- */
.nav-folder-title[data-path^="04"] {
color: var(--violet);
--nav-item-color-hover: color-mix(in srgb,
var(--violet) var(--fg-contrast-amount),
var(--contrast-color));
--nav-item-background-hover: color-mix(in srgb,
var(--violet) var(--bg-contrast-amount),
transparent);
--background-modifier-border-focus: color-mix(in srgb,
var(--violet) 40%,
transparent);
--nav-collapse-icon-color: color-mix(in srgb, var(--violet) 60%, transparent);
}
.nav-folder-title[data-path^="04"]:hover {
--nav-collapse-icon-color: color-mix(in srgb,
var(--violet) 60%,
var(--contrast-color));
}
.tree-item-children .nav-folder:has(.nav-folder-title[data-path^="04"]) {
--nav-indentation-guide-color: color-mix(in srgb,
var(--violet) var(--medium-contrast-amount),
transparent);
}
.tree-item-children .nav-folder:has(.nav-folder-title[data-path^="04"]) .nav-file-title {
color: color-mix(in srgb,
var(--violet) var(--medium-contrast-amount),
var(--default-text-color));
--nav-item-background-hover: color-mix(in srgb,
color-mix(in srgb, var(--violet) 50%, var(--highlight)) var(--bg-contrast-amount),
transparent);
--background-modifier-border-focus: color-mix(in srgb,
var(--violet) 40%,
transparent);
--nav-item-background-active: color-mix(in srgb,
var(--violet) var(--active-contrast-amount),
transparent);
}
/* ------------------------------- 05 Prefix -------------------------------- */
.nav-folder-title[data-path^="05"] {
color: var(--purple);
--nav-item-color-hover: color-mix(in srgb,
var(--purple) var(--fg-contrast-amount),
var(--contrast-color));
--nav-item-background-hover: color-mix(in srgb,
var(--purple) var(--bg-contrast-amount),
transparent);
--background-modifier-border-focus: color-mix(in srgb,
var(--purple) 40%,
transparent);
--nav-collapse-icon-color: color-mix(in srgb, var(--purple) 60%, transparent);
}
.nav-folder-title[data-path^="05"]:hover {
--nav-collapse-icon-color: color-mix(in srgb,
var(--purple) 60%,
var(--contrast-color));
}
.tree-item-children .nav-folder:has(.nav-folder-title[data-path^="05"]) {
--nav-indentation-guide-color: color-mix(in srgb,
var(--purple) var(--medium-contrast-amount),
transparent);
}
.tree-item-children .nav-folder:has(.nav-folder-title[data-path^="05"]) .nav-file-title {
color: color-mix(in srgb,
var(--purple) var(--medium-contrast-amount),
var(--default-text-color));
--nav-item-background-hover: color-mix(in srgb,
color-mix(in srgb, var(--purple) 50%, var(--highlight)) var(--bg-contrast-amount),
transparent);
--background-modifier-border-focus: color-mix(in srgb,
var(--purple) 40%,
transparent);
--nav-item-background-active: color-mix(in srgb,
var(--purple) var(--active-contrast-amount),
transparent);
}
/* ------------------------------- 06 Prefix -------------------------------- */
.nav-folder-title[data-path^="06"] {
color: var(--magenta);
--nav-item-color-hover: color-mix(in srgb,
var(--magenta) var(--fg-contrast-amount),
var(--contrast-color));
--nav-item-background-hover: color-mix(in srgb,
var(--magenta) var(--bg-contrast-amount),
transparent);
--background-modifier-border-focus: color-mix(in srgb,
var(--magenta) 40%,
transparent);
--nav-collapse-icon-color: color-mix(in srgb,
var(--magenta) 60%,
transparent);
}
.nav-folder-title[data-path^="06"]:hover {
--nav-collapse-icon-color: color-mix(in srgb,
var(--magenta) 60%,
var(--contrast-color));
}
.tree-item-children .nav-folder:has(.nav-folder-title[data-path^="06"]) {
--nav-indentation-guide-color: color-mix(in srgb,
var(--magenta) var(--medium-contrast-amount),
transparent);
}
.tree-item-children .nav-folder:has(.nav-folder-title[data-path^="06"]) .nav-file-title {
color: color-mix(in srgb,
var(--magenta) var(--medium-contrast-amount),
var(--default-text-color));
--nav-item-background-hover: color-mix(in srgb,
color-mix(in srgb, var(--magenta) 50%, var(--highlight)) var(--bg-contrast-amount),
transparent);
--background-modifier-border-focus: color-mix(in srgb,
var(--magenta) 40%,
transparent);
--nav-item-background-active: color-mix(in srgb,
var(--magenta) var(--active-contrast-amount),
transparent);
}
/* ------------------------------- 07 Prefix -------------------------------- */
.nav-folder-title[data-path^="07"] {
color: var(--hot-red);
--nav-item-color-hover: color-mix(in srgb,
var(--hot-red) var(--fg-contrast-amount),
var(--contrast-color));
--nav-item-background-hover: color-mix(in srgb,
var(--hot-red) var(--bg-contrast-amount),
transparent);
--background-modifier-border-focus: color-mix(in srgb,
var(--hot-red) 40%,
transparent);
--nav-collapse-icon-color: color-mix(in srgb,
var(--hot-red) 60%,
transparent);
}
.nav-folder-title[data-path^="07"]:hover {
--nav-collapse-icon-color: color-mix(in srgb,
var(--hot-red) 60%,
var(--contrast-color));
}
.tree-item-children .nav-folder:has(.nav-folder-title[data-path^="07"]) {
--nav-indentation-guide-color: color-mix(in srgb,
var(--hot-red) var(--medium-contrast-amount),
transparent);
}
.tree-item-children .nav-folder:has(.nav-folder-title[data-path^="07"]) .nav-file-title {
color: color-mix(in srgb,
var(--hot-red) var(--medium-contrast-amount),
var(--default-text-color));
--nav-item-background-hover: color-mix(in srgb,
color-mix(in srgb, var(--hot-red) 50%, var(--highlight)) var(--bg-contrast-amount),
transparent);
--background-modifier-border-focus: color-mix(in srgb,
var(--hot-red) 40%,
transparent);
--nav-item-background-active: color-mix(in srgb,
var(--hot-red) var(--active-contrast-amount),
transparent);
}
/* ------------------------------- 99 Prefix -------------------------------- */
.nav-folder-title[data-path^="99"] {
color: var(--cool-gray);
--nav-item-color-hover: color-mix(in srgb,
var(--cool-gray) var(--fg-contrast-amount),
var(--contrast-color));
--nav-item-background-hover: color-mix(in srgb,
var(--cool-gray) var(--bg-contrast-amount),
transparent);
--background-modifier-border-focus: color-mix(in srgb,
var(--cool-gray) 40%,
transparent);
--nav-collapse-icon-color: color-mix(in srgb,
var(--cool-gray) 60%,
transparent);
}
.nav-folder-title[data-path^="99"]:hover {
--nav-collapse-icon-color: color-mix(in srgb,
var(--cool-gray) 60%,
var(--contrast-color));
}
.tree-item-children .nav-folder:has(.nav-folder-title[data-path^="99"]) {
--nav-indentation-guide-color: color-mix(in srgb,
var(--cool-gray) var(--medium-contrast-amount),
transparent);
}
.tree-item-children .nav-folder:has(.nav-folder-title[data-path^="99"]) .nav-file-title {
color: color-mix(in srgb,
var(--cool-gray) var(--medium-contrast-amount),
var(--default-text-color));
--nav-item-background-hover: color-mix(in srgb,
color-mix(in srgb, var(--cool-gray) 50%, var(--highlight)) var(--bg-contrast-amount),
transparent);
--background-modifier-border-focus: color-mix(in srgb,
var(--cool-gray) 40%,
transparent);
--nav-item-background-active: color-mix(in srgb,
var(--cool-gray) var(--active-contrast-amount),
transparent);
}

168
.obsidian/snippets/Daily Note Themes.css vendored Normal file
View File

@@ -0,0 +1,168 @@
/*------------------------------------------------------------------------------
Daily Note Themes by CyanVoxel v1.0.0
These are a set of 7 main CSS classes that can be used to apply individual color
schemes to daily notes for each day of the week.
To customize the colors for each day, just swamp out the colors values under
the main "day of the week" classes.
NOTE: By default, this snippet relies on the "Bai Jamjuree" or
"JetBrainsMono Nerd Font Mono" fonts. If you don't wish to use these, then just
remove those font-family lines from this snippet.
------------------------------------------------------------------------------*/
:root {
--highlight: #ffffff;
--primary: #aaaaaa;
--dark: #333333;
}
.daily {
--dark: var(--dark);
color: var(--highlight);
background-color: var(--dark);
--text-normal: var(--highlight);
--text-muted: var(--highlight);
--text-faint: var(--highlight);
--checklist-done-color: var(--highlight);
--metadata-label-text-color: var(--highlight);
--metadata-input-text-color: var(--highlight);
--tag-color: var(--dark);
--tag-background: var(--primary);
--hr-color: var(--primary);
--blockquote-border-color: var(--primary);
--interactive-accent: var(--primary);
--collapse-icon-color-collapsed: var(--primary);
--checkbox-color: var(--primary);
--checkbox-marker-color: var(--dark);
--checkbox-color-hover: var(--highlight);
--checkbox-border-color: var(--highlight);
--list-marker-color: var(--highlight);
--code-background: black;
--code-normal: var(--primary);
--background-modifier-border-focus: var(--primary);
--background-modifier-border: color-mix(in srgb, var(--highlight) 60%, transparent);
--background-modifier-hover: color-mix(in srgb, var(--highlight) 60%, transparent);
--pill-cover-hover: color-mix(in srgb, var(--highlight) 60%, transparent);
}
.sunday {
--highlight: #f39caa;
--primary: #f6466f;
--dark: #2d0916;
}
.monday {
--highlight: #fcadaa;
--primary: #f65848;
--dark: #3c0e0b;
}
.tuesday {
--highlight: #aedbfa;
--primary: #3b87f0;
--dark: #070615;
}
.wednesday {
--highlight: #fff3c4;
--primary: #ffd63d;
--dark: #2c1404;
}
.thursday {
--highlight: #f7b79b;
--primary: #ed6022;
--dark: #210b04;
}
.friday {
--highlight: #e9f9b7;
--primary: #92e649;
--dark: #192108;
}
.saturday {
--highlight: #f39caa;
--primary: #e22c3c;
--dark: #100305;
}
.daily :is(h1, .HyperMD-header.HyperMD-header-1) {
color: var(--primary);
text-align: center;
font-size: 60px;
font-family: "Bai Jamjuree", "JetBrainsMono Nerd Font Mono";
padding: 0 !important;
}
.daily :is(h2, .HyperMD-header.HyperMD-header-2) {
color: var(--highlight);
text-align: center;
font-size: 30px;
font-family: "Bai Jamjuree", "JetBrainsMono Nerd Font Mono";
font-style: italic;
padding: 0 !important;
}
.daily :is(h3, .HyperMD-header.HyperMD-header-3) {
color: var(--primary);
text-align: center;
font-size: 32px;
font-family: "Bai Jamjuree", "JetBrainsMono Nerd Font Mono";
padding-top: 0;
}
.daily :is(h4, .HyperMD-header.HyperMD-header-4) {
background-color: var(--primary);
color: var(--dark);
/* border-color: var(--primary); */
/* font-family: "Bai Jamjuree", "JetBrainsMono Nerd Font Mono", monospace; */
font-weight: 900;
margin-bottom: 0;
padding-top: 0;
font-size: 20px;
width: fit-content;
padding-left: 6px;
padding-right: 6px;
/* border: solid; */
border-radius: 8px;
/* border-width: 2px; */
word-wrap: normal;
}
.daily p {
margin-top: 4px;
margin-bottom: 4px;
}
.daily :is(a:link, .cm-hmd-internal-link) {
color: var(--primary);
}
.daily :is(a:hover, .cm-hmd-internal-link:hover) {
color: var(--highlight);
}
.daily hr {
margin-top: 20px !important;
margin-bottom: 20px !important;
}
.daily img {
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
}
:is(.sunday,
.monday,
.tuesday,
.wednesday,
.thursday,
.friday,
.saturday) svg {
color: color-mix(in srgb, var(--highlight) 60%, transparent);
}

79
.obsidian/snippets/NicolaiVdS General Tweaks.css vendored Normal file
View File

@@ -0,0 +1,79 @@
/* CyanVoxel's General Tweaks */
.theme-light,
.theme-dark {
--link-decoration: none;
}
h1 {
margin-top: 20px !important;
}
hr {
margin-top: 10px;
margin-bottom: 10px;
}
.image-borders img {
border: solid;
/* border-width: 1em; */
border-width: 2px;
/* border-radius: 6px; */
border-color: rgba(122, 122, 122, 0.2);
}
.markdown-preview-view img {
max-width: 100%;
}
img {
max-width: 100%;
border-radius: 6px;
}
.callout {
border-radius: 12px;
border-width: 2px;
}
.task-list-item-checkbox {
border-width: 2px;
}
#calendar-container .title {
font-size: 18px;
}
.center-images img {
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
}
.no-embed-border {
--embed-border-left: 0px solid black !important;
}
/* .markdown-preview-view */
.markdown-preview-view {
border-radius: 6px;
}
.center-titles :is(h1,
h2,
h3,
h4,
h5,
h6,
.HyperMD-header.HyperMD-header-1,
.HyperMD-header.HyperMD-header-2,
.HyperMD-header.HyperMD-header-3,
.HyperMD-header.HyperMD-header-4,
.HyperMD-header.HyperMD-header-5,
.HyperMD-header.HyperMD-header-6) {
text-align: center;
}
code {
font-family: "JetBrainsMono Nerd Font Mono", monospace;
}

234
.obsidian/snippets/Notebook Backgrounds.css vendored Normal file
View File

@@ -0,0 +1,234 @@
/*------------------------------------------------------------------------------
Notebook Background Color Schemes by CyanVoxel v2.1.1
These a few CSS classes that mimic a few of my real-world pages and pen colors.
Go ahead and try it out! You can change or add new color variables or entire new
classes and combinations. Inside Obsidian, apply a page class with an optional
pen color class to see the effects. Add the recolor-images class to recolor
the images in your notes, too!
Website used to generate Color Filters:
https://angel-rs.github.io/css-color-filter-generator
------------------------------------------------------------------------------*/
/* Global Variables */
:root {
/* Base Pen Colors */
--pen-white: #edf1fc;
--pen-gray: #5f5d58;
--pen-black: #26241f;
--pen-red: #e14a49;
--pen-green: #15b64f;
--pen-blue: #3f76ed;
--pen-light-blue: #54b6f8;
--pen-purple: #9b4ff0;
--neutral-pen-black: #272727;
--neutral-pen-black-trans: #27272722;
/* Page Colors */
--page-white: #ffffff;
--page-manila: #f3deaf;
--page-blue: #3f76ed;
/* Default Variables */
--page-color: var(--page-manila);
--accent-color: var(--pen-black);
--accent-color-trans: color-mix(in srgb, var(--pen-black) 15%, transparent);
--grid-size: 32px;
}
/* Recolors images on the page with the current accent color. */
.recolor-images img {
filter: var(--image-effect);
}
/* ---------------------------- Page Backgrounds ---------------------------- */
/* All Pages */
.page-manila,
.page-white,
.page-blueprint {
--text-normal: var(--accent-color);
--text-muted: var(--accent-color);
--text-faint: var(--accent-color-trans);
--h1-color: var(--accent-color);
--h2-color: var(--accent-color);
--h3-color: var(--accent-color);
--h4-color: var(--accent-color);
--h5-color: var(--accent-color);
--h6-color: var(--accent-color);
--link-color: var(--pen-blue);
--link-color-hover: var(--pen-light-blue);
--link-unresolved-color: var(--pen-red);
--hr-color: var(--accent-color);
--blockquote-border-color: var(--accent-color);
--embed-border-left: 2px solid var(--accent-color);
--collapse-icon-color-collapsed: var(--accent-color);
--checkbox-color: var(--accent-color);
--checkbox-marker-color: var(--page-color);
--checkbox-color-hover: var(--accent-color-trans);
--checkbox-border-color: var(--accent-color);
--checklist-done-color: var(--accent-color);
--list-marker-color: var(--accent-color);
--interactive-accent: var(--accent-color);
--metadata-label-text-color: var(--accent-color);
--metadata-input-text-color: var(--accent-color);
--tag-color: var(--accent-color);
--tag-background: var(--accent-color-trans);
--pill-cover-hover: color-mix(in srgb, var(--accent-color) 60%, transparent);
--background-modifier-border-focus: var(--accent-color);
--background-modifier-border: var(--accent-color-trans);
--background-modifier-hover: color-mix(in srgb,
var(--accent-color) 60%,
transparent);
color: var(--accent-color);
background-color: var(--page-color);
font-weight: bold;
}
/* ----------------------- Manila/Tan Page Background ----------------------- */
/* Defaults to Black Pen */
.page-manila {
--page-color: var(--page-manila);
--accent-color: var(--pen-black);
--accent-color-trans: color-mix(in srgb,
var(--accent-color) 15%,
transparent);
--image-effect: brightness(0) saturate(100%) invert(14%) sepia(19%) saturate(296%) hue-rotate(5deg) brightness(90%) contrast(96%);
color-scheme: light;
}
.embed-manila img {
background-color: var(--page-manila);
}
/* --------------------------- White Page Background ------------------------ */
/* Defaults to Black Pen */
.page-white {
--page-color: var(--page-white);
--accent-color: var(--neutral-pen-black);
--accent-color-trans: color-mix(in srgb,
var(--accent-color) 15%,
transparent);
--image-effect: brightness(0) saturate(100%) invert(14%) sepia(19%) saturate(296%) hue-rotate(5deg) brightness(90%) contrast(96%);
color-scheme: light;
}
.embed-white img {
background-color: var(--page-white);
}
/* -------------------------- Blueprint Styled Page ------------------------- */
/* Defaults to White Pen */
.page-blueprint {
--page-color: var(--page-blue);
--accent-color: var(--pen-white);
--accent-color-trans: color-mix(in srgb,
var(--accent-color) 15%,
transparent);
--image-effect: brightness(0) saturate(100%) invert(89%) sepia(1%) saturate(2714%) hue-rotate(196deg) brightness(107%) contrast(98%);
color-scheme: dark;
--link-color: color-mix(in srgb, var(--pen-light-blue) 60%, var(--pen-white));
--link-color-hover: color-mix(in srgb,
var(--pen-light-blue) 20%,
var(--pen-white));
}
.embed-blueprint img {
background-color: var(--page-blue);
}
/* Adds a grid layout on page background */
.page-grid {
background-image: linear-gradient(0deg,
transparent 0px,
var(--accent-color-trans) 1px,
var(--accent-color-trans) 2px,
transparent 3px),
linear-gradient(90deg,
transparent calc(var(--grid-size) - 3px),
var(--accent-color-trans) calc(var(--grid-size) - 2px),
var(--accent-color-trans) calc(var(--grid-size) - 1px),
transparent var(--grid-size));
background-size: var(--grid-size) var(--grid-size);
}
/* ------------------------------- Pen Colors ------------------------------- */
/* Image Effects generated with:
https://angel-rs.github.io/css-color-filter-generator */
/* All Colors */
:is(.page-white,
.page-manila,
.page-blueprint,
.pen-white,
.pen-blue,
.pen-red,
.pen-green,
.pen-black,
.pen-gray,
.pen-purple) svg {
color: color-mix(in srgb, var(--accent-color) 60%, transparent);
}
.pen-white {
--accent-color: var(--pen-white);
--accent-color-trans: color-mix(in srgb, var(--pen-white) 15%, transparent);
color: var(--accent-color);
--hr-color: var(--accent-color);
--image-effect: brightness(0) saturate(100%) invert(89%) sepia(1%) saturate(2714%) hue-rotate(196deg) brightness(107%) contrast(98%);
}
.pen-blue {
--accent-color: var(--pen-blue);
--accent-color-trans: color-mix(in srgb, var(--pen-blue) 15%, transparent);
color: var(--accent-color);
--hr-color: var(--accent-color);
--image-effect: brightness(0) saturate(100%) invert(36%) sepia(95%) saturate(945%) hue-rotate(199deg) brightness(95%) contrast(95%);
}
.pen-red {
--accent-color: var(--pen-red);
--accent-color-trans: color-mix(in srgb, var(--pen-red) 15%, transparent);
color: var(--accent-color);
--hr-color: var(--accent-color);
--image-effect: brightness(0) saturate(100%) invert(40%) sepia(41%) saturate(1024%) hue-rotate(316deg) brightness(99%) contrast(94%);
}
.pen-green {
--accent-color: var(--pen-green);
--accent-color-trans: color-mix(in srgb, var(--pen-green) 15%, transparent);
color: var(--accent-color);
--hr-color: var(--accent-color);
--image-effect: brightness(0) saturate(100%) invert(52%) sepia(60%) saturate(2521%) hue-rotate(105deg) brightness(96%) contrast(84%);
}
.pen-black {
--accent-color: var(--pen-black);
--accent-color-trans: color-mix(in srgb, var(--pen-black) 15%, transparent);
color: var(--accent-color);
--hr-color: var(--accent-color);
--image-effect: brightness(0) saturate(100%) invert(14%) sepia(19%) saturate(296%) hue-rotate(5deg) brightness(90%) contrast(96%);
}
.pen-gray {
--accent-color: var(--pen-gray);
--accent-color-trans: color-mix(in srgb, var(--pen-gray) 15%, transparent);
color: var(--accent-color);
--hr-color: var(--accent-color);
--image-effect: brightness(0) saturate(100%) invert(35%) sepia(13%) saturate(189%) hue-rotate(5deg) brightness(96%) contrast(86%);
}
.pen-purple {
--accent-color: var(--pen-purple);
--accent-color-trans: color-mix(in srgb, var(--pen-purple) 15%, transparent);
color: var(--accent-color);
--hr-color: var(--accent-color);
--image-effect: brightness(0) saturate(100%) invert(33%) sepia(59%) saturate(2620%) hue-rotate(249deg) brightness(98%) contrast(93%);
}