Last active
December 9, 2024 00:03
-
-
Save tallguyjenks/d11c82b6661ac177c2cba51c2efe35dd to your computer and use it in GitHub Desktop.
Revisions
-
tallguyjenks revised this gist
Apr 4, 2021 . 2 changed files with 1 addition and 1381 deletions.There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -1,1381 +0,0 @@ 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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1 @@ To get a copy of my most up to date custom CSS sign up to my monthly newsletter [[[HERE]]](https://bryanjenkstech.ck.page/d4ec0713d5) Thank you! 🙏🏻️ -
tallguyjenks revised this gist
Nov 20, 2020 . 1 changed file with 116 additions and 1 deletion.There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -49,6 +49,7 @@ /** .... 2.7 Check Boxes */ /** ...... 2.7.1 Nicer Round Checkboxes -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/34 */ /** ...... 2.7.2 Animated Check Boxes -- https://github.com/TriDiamond/Obsidian-Obsidianite/blob/82207bed4313ee0e6f0bb1fd59b04129408018f5/obsidian.css#L463 */ /** .... 2.8 Tags */ /** ...... 2.8.1 Tag Pills -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/72 */ @@ -770,7 +771,7 @@ u { } /* .... 2.7 Check Boxes */ /* ...... 2.7.1 Nicer Round Checkboxes -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/34 */ /* input[type="checkbox"], .cm-formatting-task { -webkit-appearance: none; appearance: none; @@ -796,6 +797,120 @@ input[type="checkbox"]:checked, background-size: 70%; background-repeat: no-repeat; background-image: url('data:image/svg+xml; utf8, <svg width="12px" height="10px" viewBox="0 0 12 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-4.000000, -6.000000)" fill="%23ffffff"><path d="M8.1043257,14.0367999 L4.52468714,10.5420499 C4.32525014,10.3497722 4.32525014,10.0368095 4.52468714,9.8424863 L5.24777413,9.1439454 C5.44721114,8.95166768 5.77142411,8.95166768 5.97086112,9.1439454 L8.46638057,11.5903727 L14.0291389,6.1442083 C14.2285759,5.95193057 14.5527889,5.95193057 14.7522259,6.1442083 L15.4753129,6.84377194 C15.6747499,7.03604967 15.6747499,7.35003511 15.4753129,7.54129009 L8.82741268,14.0367999 C8.62797568,14.2290777 8.3037627,14.2290777 8.1043257,14.0367999"></path></g></g></svg>'); } */ /** ...... 2.7.2 Animated Check Boxes -- https://github.com/TriDiamond/Obsidian-Obsidianite/blob/82207bed4313ee0e6f0bb1fd59b04129408018f5/obsidian.css#L463 */ .contains-task-list .task-list-item .contains-task-list { padding-inline-start: 5px; } .contains-task-list .task-list-item ul.contains-task-list::before { left: -46px !important; border-width: 2px; } .contains-task-list .task-list-item { position: relative; vertical-align: middle; box-sizing: border-box; padding-left: 30px; } .contains-task-list .task-list-item input[type='checkbox'] { position: absolute; top: 4px; left: -23px; width: 20px; height: 20px; margin: 0; opacity: 0; z-index: 10; } .markdown-preview-view .list-collapse-indicator { margin-left: -80px !important; box-sizing: border-box; } .contains-task-list .task-list-item::before { content: ''; position: absolute; top: 2px; left: -25px; width: 20px; height: 20px; display: inline-flex; justify-content: center; border: 2px solid var(--neutral-blue);/* #9e9e9e; */ margin-right: 15px; border-radius: 3px; transition: all 0.3s; box-sizing: border-box; z-index: 1; } .contains-task-list .is-checked.task-list-item::before { border: 10px solid var(--neutral-purple); animation: bounce 300ms; } .contains-task-list .is-checked.task-list-item::after { content: ''; position: absolute; top: 8px; left: -21px; border-right: 3px solid transparent; border-bottom: 3px solid transparent; transform: rotate(45deg); transform-origin: 0% 100%; animation: checked-box 125ms 250ms forwards; z-index: 5; } .markdown-preview-view ul > li.task-list-item.is-checked { text-decoration: line-through !important; color: var(--interactive-accent) !important; } .markdown-preview-view ul > li.task-list-item.is-checked ul > li:not(.is-checked) { text-decoration: none !important; color: var(--text-normal) !important; } @keyframes checked-box { 0% { width: 0; height: 0; border-color: #FFFFFF; transform: translate(0, 0) rotate(45deg); } 33% { width: 4px; height: 0; border-color: #FFFFFF; transform: translate(0, 0) rotate(45deg); } 100% { width: 4px; height: 8px; border-color: #FFFFFF; transform: translate(0, -8px) rotate(45deg); } } @keyframes bounce { 0% { border-width: 2px; /* transform: scale(1); */ } 33% { border-width: 4px; /* transform: scale(0.7); */ } 100% { border-width: 10px; /* transform: scale(1); */ } } /* .... 2.8 Tags */ /* ...... 2.8.1 Tag Pills -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/72 */ -
tallguyjenks revised this gist
Nov 19, 2020 . 1 changed file with 14 additions and 3 deletions.There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -123,7 +123,7 @@ .theme-dark { --font-monospace: 'fira code', 'Hack Nerd Font', 'Source Code Pro', monospace; --background-primary: var(--dark0); --background-primary-alt: var(--dark0); --background-secondary: var(--dark0-hard); @@ -215,6 +215,11 @@ html, body { font-size: 16px !important; font-family: var(--font-monospace); /** Remove this to return body font back to normal */ /** Norse rune font for hilarity */ /* font-family: 'Norse'; font-size: 20px !important; */ } strong @@ -335,11 +340,12 @@ img { padding-top: 0 !important; } .CodeMirror-code, .CodeMirror-linenumber, .cm-formatting { font-family: var(--font-monospace) !important; font-size: 0.9em; } .markdown-preview-section pre code, @@ -409,7 +415,7 @@ img /* 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 !important; @@ -445,6 +451,11 @@ img margin-right: 10px !important; } .mermaid .note { fill: var(--dark3) !important; } .cm-header-1, .markdown-preview-section h1 { -
tallguyjenks revised this gist
Nov 15, 2020 . 1 changed file with 45 additions and 3 deletions.There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -69,6 +69,9 @@ /** .... 2.13 PDF Export Formatting */ /** ...... 2.13.1 Page Break -- https://gist.github.com/liamcain/81679412643690a7cdd13dff4dc909ce */ /** .... 2.14 Tables */ /** ...... 2.14.1 Banded Table Rows -- https://discord.com/channels/686053708261228577/702656734631821413/777106171948564500 */ /** .. 3. Grave Yard */ /* ============================================================================================================================================================ */ @@ -961,6 +964,48 @@ body.plugin-sliding-panes-rotate-header .workspace > .mod-root .view-header { padding-top: 2em; } } /** ...... 2.14.1 Banded Table Rows -- https://discord.com/channels/686053708261228577/702656734631821413/777106171948564500 */ table { padding: 0; word-break: initial; } table tr { border-top: 1px solid #cccccc; margin: 0; padding: 0; } table tr:nth-child(2n) { background-color: var(--dark1); } table tr th { font-weight: bold; border: 1px solid #cccccc; text-align: left; margin: 0; padding: 6px 13px; } table tr td { border: 1px solid #cccccc; text-align: left; margin: 0; padding: 6px 13px; } table tr th:first-child, table tr td:first-child { margin-top: 0; } table tr th:last-child, table tr td:last-child { margin-bottom: 0; } /** .. 3. Grave Yard */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ @@ -1208,6 +1253,3 @@ div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-highlight { display: none !important; } */ -
tallguyjenks revised this gist
Nov 11, 2020 . 1 changed file with 41 additions and 6 deletions.There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -61,10 +61,14 @@ /** .... 2.11 Heading Formatting */ /** ...... 2.11.1 Heading Under Gradient Line -- https://github.com/TriDiamond/Obsidian-Obsidianite */ /** ...... 2.11.2 Emoji Orientation in Andy Mode Headers -- https://discord.com/channels/686053708261228577/702656734631821413/775900471406624768 */ /** .... 2.12 Horizontal Rule Formatting */ /** ...... 2.12.1 Aesthetic Horizontal Rule -- https://github.com/TriDiamond/Obsidian-Obsidianite */ /** .... 2.13 PDF Export Formatting */ /** ...... 2.13.1 Page Break -- https://gist.github.com/liamcain/81679412643690a7cdd13dff4dc909ce */ /** .. 3. Grave Yard */ /* ============================================================================================================================================================ */ @@ -898,6 +902,10 @@ padding: 10px 10px 10px 16px; /*16px two pop magin */ background-image: linear-gradient(to right, var(--bright-aqua), var(--background-primary)) ; opacity: 1; } /** ...... 2.11.2 Emoji Orientation in Andy Mode Headers -- https://discord.com/channels/686053708261228577/702656734631821413/775900471406624768 */ body.plugin-sliding-panes-rotate-header .workspace > .mod-root .view-header { text-orientation: sideways; } /** .... 2.12 Horizontal Rule Formatting */ /** ...... 2.12.1 Aesthetic Horizontal Rule -- https://github.com/TriDiamond/Obsidian-Obsidianite */ @@ -921,10 +929,39 @@ padding: 10px 10px 10px 16px; /*16px two pop magin */ color: var(--bright-aqua); background-color: var(--background-primary); } /** ...... 2.13.1 Page Break -- https://gist.github.com/liamcain/81679412643690a7cdd13dff4dc909ce */ @media print { /* pagebreak before all ## headings */ h2 { page-break-before: always; } h3, h4 { page-break-after: avoid; } pre, blockquote { page-break-inside: avoid; } /* use double <hr> ('---') to indicate a page break */ hr + hr { page-break-before: always; visibility: hidden; } :not(hr) + hr { visibility: hidden; } :not(hr) + hr + :not(hr):not(h2) { border-top: 1px solid black; padding-top: 2em; } } /** .. 3. Grave Yard */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* Change color of internal links https://discordapp.com/channels/686053708261228577/702656734631821413/767572809848848385 */ @@ -1174,5 +1211,3 @@ div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-highlight { -
tallguyjenks revised this gist
Nov 4, 2020 . 1 changed file with 16 additions and 0 deletions.There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -1,3 +1,19 @@ /**================================================================================= /** ██████╗░██████╗░██╗░░░██╗░█████╗░███╗░░██╗██╗░██████╗ /** ██╔══██╗██╔══██╗╚██╗░██╔╝██╔══██╗████╗░██║╚█║██╔════╝ /** ██████╦╝██████╔╝░╚████╔╝░███████║██╔██╗██║░╚╝╚█████╗░ /** ██╔══██╗██╔══██╗░░╚██╔╝░░██╔══██║██║╚████║░░░░╚═══██╗ /** ██████╦╝██║░░██║░░░██║░░░██║░░██║██║░╚███║░░░██████╔╝ /** ╚═════╝░╚═╝░░╚═╝░░░╚═╝░░░╚═╝░░╚═╝╚═╝░░╚══╝░░░╚═════╝░ /** /** ░█████╗░██████╗░░██████╗██╗██████╗░██╗░█████╗░███╗░░██╗ ░█████╗░░██████╗░██████╗ /** ██╔══██╗██╔══██╗██╔════╝██║██╔══██╗██║██╔══██╗████╗░██║ ██╔══██╗██╔════╝██╔════╝ /** ██║░░██║██████╦╝╚█████╗░██║██║░░██║██║███████║██╔██╗██║ ██║░░╚═╝╚█████╗░╚█████╗░ /** ██║░░██║██╔══██╗░╚═══██╗██║██║░░██║██║██╔══██║██║╚████║ ██║░░██╗░╚═══██╗░╚═══██╗ /** ╚█████╔╝██████╦╝██████╔╝██║██████╔╝██║██║░░██║██║░╚███║ ╚█████╔╝██████╔╝██████╔╝ /** ░╚════╝░╚═════╝░╚═════╝░╚═╝╚═════╝░╚═╝╚═╝░░╚═╝╚═╝░░╚══╝ ░╚════╝░╚═════╝░╚═════╝░ /**==================================================================================*/ /** ----- TABLE OF CONTENTS ----- */ /** .. 1. Default Theme */ -
tallguyjenks revised this gist
Nov 1, 2020 . 1 changed file with 710 additions and 677 deletions.There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -1,122 +1,181 @@ /** ----- TABLE OF CONTENTS ----- */ /** .. 1. Default Theme */ /** .. 2. Custom CSS Section */ /** .... 2.1 Bullet Points */ /** ...... 2.1.1 Bullet Point Relationship Lines -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/2 */ /** ...... 2.1.2 tasklist (preview) indentation lines correction -- https://forum.obsidian.md/t/bullet-lines-in-css-for-checkboxes/6262/3 */ /** ...... 2.1.3 Better Bullet Points In Edit Mode https://forum.obsidian.md/t/clutter-free-edit-mode/6791/30 */ /** ...... 2.1.4 Bullet points in preview -- https://discord.com/channels/686053708261228577/702656734631821413/772094128832905226 */ /** .... 2.2 File Navigation Pane */ /** ...... 2.2.1 Relationship lines for the folder levels in file navigation: https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/112 */ /** ...... 2.2.2 Custom icons differing files and folders -- https://discordapp.com/channels/686053708261228577/702656734631821413/755293685046050896 */ /** .... 2.3 Clutter Free Mode */ /** ...... 2.3.1 Make subtler folding gutter arrows -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/10 */ /** ...... 2.3.2 Hide Block Reference ID's -- https://discord.com/channels/686053708261228577/716028884885307432/769267134114037871 */ /** ...... 2.3.3 Shortened Url Links -- https://forum.obsidian.md/t/hide-or-truncate-urls-in-editor-using-css/359/3 */ /** ...... 2.3.4 highlight (==) not visible anymore if not active line -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/221 */ /** .... 2.4 Font Formatting */ /** ...... 2.4.1 Make Mathjax Font Larger */ /** ...... 2.4.2 Hyphenation & Justification -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/25 */ /** ...... 2.4.3 Stylish Block Quotes -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/39 */ /** ...... 2.4.4 General Font Formatting */ /** .... 2.5 Graph Formatting */ /** ...... 2.5.1 Graph View CSS -- https://discordapp.com/channels/686053708261228577/702656734631821413/760488978691784705 */ /** .... 2.6 Image Manipulation */ /** ...... 2.6.1 Image Hover Grow -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/29 */ /** .... 2.7 Check Boxes */ /** ...... 2.7.1 Nicer Round Checkboxes -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/34 */ /** .... 2.8 Tags */ /** ...... 2.8.1 Tag Pills -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/72 */ /** .... 2.9 [[Link]] Modification */ /** ...... 2.9.1 Bigger Link Hover Popup Preview -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/175 */ /** .... 2.10 Plugin Specific CSS */ /** ...... 2.10.1 Calendar Plugin CSS */ /** .... 2.11 Heading Formatting */ /** ...... 2.11.1 Heading Under Gradient Line -- https://github.com/TriDiamond/Obsidian-Obsidianite */ /** .... 2.12 Horizontal Rule Formatting */ /** ...... 2.12.1 Aesthetic Horizontal Rule -- https://github.com/TriDiamond/Obsidian-Obsidianite */ /** .. 3. Grave Yard */ /* ============================================================================================================================================================ */ /* 1. Default Theme */ :root { --dark0-hard: #1d2021; --dark0: #282828; --dark0-soft: #32302f; --dark1: #3c3836; --dark2: #504945; --dark3: #665c54; --dark4: #7c6f64; --gray: #928374; --light0-hard: #f9f5d7; --light0: #fbf1c7; --light0-soft: #f2e5bc; --light1: #ebdbb2; --light2: #d5c4a1; --light3: #bdae93; --light4: #a89984; --bright-red: #fb4934; --bright-green: #b8bb26; --bright-yellow: #fabd2f; --bright-blue: #83a598; --bright-purple: #d3869b; --bright-aqua: #8ec07c; --bright-orange: #fe8019; --neutral-red: #cc241d; --neutral-green: #98971a; --neutral-yellow: #d79921; --neutral-blue: #458588; --neutral-purple: #b16286; --neutral-aqua: #689d6a; --neutral-orange: #d65d0e; --faded-red: #9d0006; --faded-green: #79740e; --faded-yellow: #b57614; --faded-blue: #076678; --faded-purple: #8f3f71; --faded-aqua: #427b58; --faded-orange: #af3a03; } .theme-dark { --font-monospace: 'Hack Nerd Font', 'Source Code Pro', monospace; --background-primary: var(--dark0); --background-primary-alt: var(--dark0); --background-secondary: var(--dark0-hard); --background-secondary-alt: var(--dark1); --text-normal: var(--light0); --text-faint: var(--light3); --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(--bright-blue); --text-a: var(--bright-orange); --text-a-hover: var(--bright-blue); --text-mark: var(--neutral-yellow); --pre-code: var(--dark1); --text-highlight-bg: var(--faded-aqua); --interactive-accent: var(--bright-orange); --interactive-before: var(--dark4); --background-modifier-border: var(--dark2); --text-accent: var(--bright-orange); --interactive-accent-rgb: var(--bright-orange); --inline-code: var(--bright-blue); --code-block: var(--bright-blue); --vim-cursor: var(--bright-orange); --text-selection: rgba(168, 153, 132, 0.5); /* light4 */ } .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(--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-link: var(--neutral-blue); --text-a: var(--neutral-orange); --text-a-hover: var(--neutral-blue); --text-mark: var(--neutral-yellow); --pre-code: var(--light1); --text-highlight-bg: var(--bright-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); --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 !important; background-color: var(--pre-code) !important; } .graph-view.color-circle, .graph-view.color-fill-highlight, .graph-view.color-line-highlight { color: var(--interactive-accent-rgb) !important; } .graph-view.color-text { color: var(--text-a-hover) !important; } /* .graph-view.color-fill @@ -130,296 +189,340 @@ */ html, body { font-size: 16px !important; } strong { font-weight: 600 !important; } a, .cm-hmd-internal-link { color: var(--text-a) !important; text-decoration: none !important; } a:hover, .cm-hmd-internal-link:hover, .cm-url { color: var(--text-a-hover) !important; text-decoration: none !important; } mark { background-color: var(--text-mark) !important; color: var(--dark0) !important; } .view-actions a { color: var(--text-normal) !important; } .view-actions a:hover { color: var(--text-a) !important; } .HyperMD-codeblock-bg { background-color: var(--pre-code) !important; } .HyperMD-codeblock { line-height: 1.4em !important; color: var(--code-block) !important; } .HyperMD-codeblock-begin { border-top-left-radius: 4px !important; border-top-right-radius: 4px !important; } .HyperMD-codeblock-end { border-bottom-left-radius: 4px !important; border-bottom-right-radius: 4px !important; } th { font-weight: 600 !important; } thead { border-bottom: 2px solid var(--background-modifier-border) !important; } .HyperMD-table-row { line-height: normal !important; padding-left: 4px !important; padding-right: 4px !important; background-color: var(--pre-code) !important; } .HyperMD-table-row-0 { /* padding-top: 4px !important; */ } .CodeMirror-foldgutter-folded, .is-collapsed .nav-folder-collapse-indicator { color: var(--text-a) !important; } .nav-file-tag { color: var(--text-a) !important; } .is-active .nav-file-title { color: var(--text-a) !important; background-color: var(--background-primary-alt) !important; } .nav-file-title { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; } img { display: block !important; margin-left: auto !important; margin-right: auto !important; } .HyperMD-list-line { padding-top: 0 !important; } .CodeMirror-linenumber, .cm-formatting { font-family: var(--font-monospace) !important; } .markdown-preview-section pre code, .markdown-preview-section code { font-size: 0.9em !important; background-color: var(--pre-code) !important; } .markdown-preview-section pre code { padding: 4px !important; line-height: 1.4em !important; display: block !important; color: var(--code-block) !important; } .markdown-preview-section code { color: var(--inline-code) !important; } .cm-s-obsidian, .cm-inline-code { -webkit-font-smoothing: auto !important; } .cm-inline-code { color: var(--inline-code) !important; background-color: var(--pre-code) !important; padding: 1px !important; } .workspace-leaf-header-title { font-weight: 600 !important; } .side-dock-title { padding-top: 15px !important; font-size: 20px !important; } .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 !important; } .cm-s-obsidian, .markdown-preview-view { padding-left: 10px !important; padding-right: 10px !important; } /* 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 !important; background-color: var(--background-secondary-alt); } /* horizontal resize-handle */ .workspace-split.mod-horizontal > * > .workspace-leaf-resize-handle { height: 1px !important; background-color: var(--background-secondary-alt); } /* 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 !important; } .markdown-embed { padding-left: 10px !important; padding-right: 10px !important; margin-left: 10px !important; margin-right: 10px !important; } .cm-header-1, .markdown-preview-section h1 { font-weight: 500 !important; font-size: 34px !important; color: var(--text-title-h1) !important; } .cm-header-2, .markdown-preview-section h2 { font-weight: 500 !important; font-size: 26px !important; color: var(--text-title-h2) !important; } .cm-header-3, .markdown-preview-section h3 { font-weight: 500 !important; font-size: 22px !important; color: var(--text-title-h3) !important; } .cm-header-4, .markdown-preview-section h4 { font-weight: 500 !important; font-size: 20px !important; color: var(--text-title-h4) !important; } .cm-header-5, .cm-header-6, .markdown-preview-section h5, .markdown-preview-section h6 { font-weight: 500 !important; font-size: 18px !important; color: var(--text-title-h5) !important; } .suggestion-item.is-selected { background-color: var(--background-secondary); } .empty-state-container:hover { background-color: var(--background-secondary-alt); border: 5px solid var(--interactive-accent) !important; } .checkbox-container { background-color: var(--interactive-before); } .checkbox-container:after { background-color: var(--background-secondary-alt); } .mod-cta { color: var(--background-secondary-alt) !important; font-weight: 600 !important; } .mod-cta:hover { background-color: var(--interactive-before) !important; font-weight: 600 !important; } .CodeMirror-cursor { background-color: var(--vim-cursor) !important; opacity: 60% !important; } input.task-list-item-checkbox { border: 1px solid var(--dark4); appearance: none; -webkit-appearance: none; } input.task-list-item-checkbox:checked { background-color: var(--dark4); box-shadow: inset 0 0 0 2px var(--background-primary); } ::selection { background-color: var(--text-selection) !important; } /* .. 2. Custom CSS Section */ /* .... 2.1 Bullet Points */ /* ...... 2.1.1 Bullet Point Relationship Lines -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/2 */ .cm-hmd-list-indent .cm-tab, ul ul { position: relative; @@ -440,33 +543,184 @@ ul ul::before { top: 0; bottom: 0; } /* ...... 2.1.2 tasklist (preview) indentation lines correction -- https://forum.obsidian.md/t/bullet-lines-in-css-for-checkboxes/6262/3 */ .contains-task-list::before { left: 10px ; } /* ...... 2.1.3 Better Bullet Points In Edit Mode https://forum.obsidian.md/t/clutter-free-edit-mode/6791/30 */ div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-list-ul { color: transparent; position: relative; } div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-list-ul:after { content: "•"; position: absolute; top: -6px; left: 4px; color: var(--bright-aqua); font-family: sans-serif; font-size: 20px; } /* ...... 2.1.4 Bullet points in preview -- https://discord.com/channels/686053708261228577/702656734631821413/772094128832905226 */ ul, ul ul, ol ul, ul ul ul, ol ul ul { list-style: none; } li > p { display: inline-block; margin-top: 0; margin-bottom: 0; } ul li:not(.task-list-item)::before { content: '•'; color: var(--bright-aqua); display: inline-block; width: 1em; margin-left: -1.15em; padding: 0; font-weight: bold; text-shadow: 0 0 0.5em var(--bright-aqua); } ul ul li:not(.task-list-item)::before { content: '•'; } ul ul ul li:not(.task-list-item)::before { content: '•'; } /* .... 2.2 File Navigation Pane */ /* ...... 2.2.1 Relationship lines for the folder levels in file navigation: https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/112 */ .outline .collapsible-item-children { margin-left: 20px; border-left: 1px solid var(--faded-aqua); border-radius: 4px; transition:all 0.5s ease-in-out; } .outline .collapsible-item-children:hover { border-left-color: var(--faded-aqua); } .nav-folder-children .nav-folder-children { margin-left: 20px; padding-left: 0; border-left: 1px solid var(--faded-aqua); border-radius: 4px; transition:all 0.5s ease-in-out; } .nav-folder-children .nav-folder-children:hover { border-left-color: var(--faded-aqua); } /* ...... 2.2.2 Custom icons differing files and folders: https://discordapp.com/channels/686053708261228577/702656734631821413/755293685046050896 */ /* Emoji */ /*.nav-file-title-content::before { content: '🗒 '; } .nav-folder-title-content::before { content: '📂 '; } */ /* Flat font */ /* Requires: https://icomoon.io/#icons-icomoon/liga-font */ .nav-folder-children .nav-file-title-content:first-child::before { content: "\e924 "; font-family: "IcoMoon-Free"; } .nav-folder-children .nav-folder-title-content::before { content: "\e930 "; font-family: "IcoMoon-Free"; } /* .... 2.3 Clutter Free Mode */ /* ...... 2.3.1 Make subtler folding gutter arrows -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/10 */ .CodeMirror-foldgutter-folded:after, .CodeMirror-foldgutter-open:after { opacity: 0.5; font-size: 60%; color: var(--bright-aqua); } .CodeMirror-foldgutter-folded:hover:after, .CodeMirror-foldgutter-open:hover:after { opacity: 1; } .CodeMirror-foldgutter-folded:after { content: "\25BA"; } .CodeMirror-foldgutter-open:after { content: "\25BC"; } /* ...... 2.3.2 Hide Block Reference ID's -- https://discord.com/channels/686053708261228577/716028884885307432/769267134114037871 */ div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-blockid { visibility: hidden; } .cm-blockid::first-letter { visibility: visible; font-weight: 800; } /* ...... 2.3.3 Shortened Url Links -- https://forum.obsidian.md/t/hide-or-truncate-urls-in-editor-using-css/359/3 */ div:not(.CodeMirror-activeline) > .CodeMirror-line .cm-string.cm-url:not(.cm-formatting) { font-size: 0; } div:not(.CodeMirror-activeline) > .CodeMirror-line .cm-string.cm-url:not(.cm-formatting)::after { content: '🔗'; font-size: 1rem; } /* ...... 2.3.4 highlight (==) not visible anymore if not active line -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/221 */ div:not(.CodeMirror-activeline) > .CodeMirror-line .cm-formatting-highlight.cm-highlight { font-size: 1em; color: transparent; } /* .... 2.4 Font Formatting */ /* ...... 2.4.1 Make Mathjax Font Larger */ .MJX-TEX { font-size: 180%; } /* ...... 2.4.2 Hyphenation & Justification https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/25 */ .cm-s-obsidian, .markdown-preview-view { text-align: justify; hyphens: auto; } /* ...... 2.4.3 Stylish Block Quotes -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/39 */ blockquote:before { font: 14px/20px italic Times, serif; content: "“"; font-size: 3em; line-height: 0.1em; vertical-align: -0.4em; } blockquote p { display: inline; } /* ...... 2.4.4 General Font Formatting */ b, strong, .cm-s-obsidian .cm-strong{ color: var(--bright-red) !important; } i, em, span.cm-em { color: var(--bright-green) !important; } u { color: var(--bright-purple) !important; } /* .... 2.5 Graph Formatting */ /* ...... 2.5.1 Graph View CSS -- https://discordapp.com/channels/686053708261228577/702656734631821413/760488978691784705 */ .theme-dark .graph-view.color-arrow { color: var(--bright-aqua); } .theme-dark .graph-view.color-fill-tag { color: var(--bright-yellow); } .theme-dark .graph-view.color-fill-attachment { color: var(--neutral-blue); } .theme-dark .graph-view.color-fill-unresolved { color: var(--bright-red); } .graph-view.color-fill { color: var(--light1); } /* .graph-view.color-line { color: var(--gray); }*/ /* .... 2.6 Image Manipulation */ /* ...... 2.6.1 Image Hover Grow -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/29 */ .markdown-preview-view img { display: block; margin-top: 20pt; @@ -476,17 +730,12 @@ ul ul::before { width: 50%; /* experiment with values */ transition: transform 0.25s ease; } .markdown-preview-view img:hover { -webkit-transform: scale(1.8); /* experiment with values */ transform: scale(2); } /* .... 2.7 Check Boxes */ /* ...... 2.7.1 Nicer Round Checkboxes -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/34 */ input[type="checkbox"], .cm-formatting-task { -webkit-appearance: none; @@ -496,14 +745,12 @@ input[type="checkbox"], padding: 0; vertical-align: top; } .cm-s-obsidian span.cm-formatting-task { color: transparent; width: 1.25em !important; height: 1.25em; display: inline-block; } input[type="checkbox"]:focus { outline: 0; } @@ -516,197 +763,205 @@ input[type="checkbox"]:checked, background-repeat: no-repeat; background-image: url('data:image/svg+xml; utf8, <svg width="12px" height="10px" viewBox="0 0 12 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-4.000000, -6.000000)" fill="%23ffffff"><path d="M8.1043257,14.0367999 L4.52468714,10.5420499 C4.32525014,10.3497722 4.32525014,10.0368095 4.52468714,9.8424863 L5.24777413,9.1439454 C5.44721114,8.95166768 5.77142411,8.95166768 5.97086112,9.1439454 L8.46638057,11.5903727 L14.0291389,6.1442083 C14.2285759,5.95193057 14.5527889,5.95193057 14.7522259,6.1442083 L15.4753129,6.84377194 C15.6747499,7.03604967 15.6747499,7.35003511 15.4753129,7.54129009 L8.82741268,14.0367999 C8.62797568,14.2290777 8.3037627,14.2290777 8.1043257,14.0367999"></path></g></g></svg>'); } /* .... 2.8 Tags */ /* ...... 2.8.1 Tag Pills -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/72 */ .tag:not(.token) { background-color: var(--faded-blue); border: none; color: white; font-size: 14px; padding: 0px 8px; text-align: center; text-decoration: none; display: inline-block; margin: 0px 0px; cursor: pointer; border-radius: 14px; font-weight: bold; } .tag:not(.token):hover { color: var(--bright-red) !important; background-color: var(--bright-red); } /*==============================================*/ .tag[href^="#📥️"] { background-color: var(--light4); color: var(--light4) !important; } .tag[href^="#🌱️"] { background-color: var(--faded-aqua); color: var(--faded-aqua) !important; } .tag[href^="#🌞️"] { background-color: var(--faded-aqua); color: var(--faded-aqua) !important; } .tag[href^="#🌲️"] { background-color: var(--faded-aqua); color: var(--faded-aqua) !important; } .tag[href^="#✏"] { background-color: var(--faded-blue); color: var(--faded-blue) !important; } /*==============================================*/ .tag[href^="#✅️"] { background-color: var(--bright-orange); color: var(--bright-orange) !important; } .tag[href^="#🗺️"] { background-color: var(--bright-yellow); color: var(--bright-yellow) !important; } .tag[href^="#⚙️"] { background-color: var(--dark3); color: var(--dark3) !important; } .tag[href^="#❗️"] { background-color: var(--light1); color: var(--light1) !important; } .tag[href^="#🏷️"] { background-color: var(--faded-purple); color: var(--faded-purple) !important; } /* .... 2.9 [[Link]] Modification */ /* ...... 2.9.1 Bigger Link Hover Popup Preview -- https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/175 */ .popover.hover-popover { transform: scale(0.8); /* makes the content smaller */ max-height: 800px; min-height: 50px; width: 700px; overflow: overlay; /* new added */ } .popover.hover-popover .markdown-embed { height: 100%; } .popover.hover-popover.is-loaded .markdown-embed .markdown-embed-content .markdown-preview-view{ padding: 10px 10px 10px 16px; /*16px two pop magin */ } /* ...... 2.10.1 Calendar Plugin CSS */ .container { --color-background-heading: transparent; --color-background-day: transparent; --color-background-day-empty: var(--background-secondary-alt); --color-background-day-active: var(--interactive-accent); --color-background-day-hover: var(--interactive-hover); --color-dot: var(--text-muted); --color-text-heading: var(--text-normal); --color-text-day: var(--text-normal); --color-text-today: var(--text-accent); } /** .... 2.11 Heading Formatting */ /** ...... 2.11.1 Heading Under Gradient Line -- https://github.com/TriDiamond/Obsidian-Obsidianite */ .markdown-preview-view h1, .markdown-preview-view h2, .markdown-preview-view h3, .markdown-preview-view h4, .markdown-preview-view h5, .markdown-preview-view h6 { /* padding-top: 1.25rem; */ /* margin: 45px 0 20px 0; */ position: relative; } .markdown-preview-view h1:after, .markdown-preview-view h2:after, .markdown-preview-view h3:after, .markdown-preview-view h4:after, .markdown-preview-view h5:after, .markdown-preview-view h6:after { position: absolute; content: ''; height: 1px; width: 35%; left: 0; bottom: -0.2rem; background-image: linear-gradient(to right, var(--bright-aqua), var(--background-primary)) ; opacity: 1; } /** .... 2.12 Horizontal Rule Formatting */ /** ...... 2.12.1 Aesthetic Horizontal Rule -- https://github.com/TriDiamond/Obsidian-Obsidianite */ .markdown-preview-view hr { margin-block-start: 4em; margin-block-end: 4em; border: none; height: 1px; background-image: linear-gradient(to right, var(--background-primary), var(--text-accent), var(--background-primary)); } .markdown-preview-view hr::after { content: '§'; display: inline-block; position: absolute; left: 50%; transform: translate(-50%, -50%) rotate(60deg); transform-origin: 50% 50%; padding: 0.5rem; color: var(--bright-aqua); background-color: var(--background-primary); } /* .. 3. Grave Yard */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* Change color of internal links https://discordapp.com/channels/686053708261228577/702656734631821413/767572809848848385 */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* .cm-s-obsidian span.cm-hmd-internal-link, a.internal-link { color: var(--bright-orange) !important; } */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* Whitespace Characters */ /* https://forum.obsidian.md/t/editors-css-to-show-tabs-trailing-whitespace-and-strict-line-breaks/4234 */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* .cm-trailing-space-new-line, .cm-trailing-space-a, .cm-trailing-space-b, .cm-tab{ font-size: 0; } .cm-trailing-space-a::before, .cm-trailing-space-b::before, .cm-trailing-space-new-line::before, .cm-tab::before{ content:'·'; color:var(--dark2); font-size: initial; } .cm-trailing-space-new-line::before { content:'↵'; } .cm-tab::before { content:'⟶' } */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* Remove blockquote left margin /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* blockquote { margin-inline-start: 0; } */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* Make Tags and Searched pages have expanded columns --- THIS MESSES WITH ANDY MODE */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /*body > div > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-right-split > div:nth-child(4) > div.workspace-leaf > div > div > div, body > div > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-left-split > div.workspace-tabs > div.workspace-leaf > div > div.search-result-container.mod-global-search > div { column-width:200px; }*/ /* Expand List Column for file search (THIS MESSES WITH ANDY MODE): */ /*.nav-folder-children { column-width:200px; }*/ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* Lime Light but only for body text */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /*.cm-s-obsidian, .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-link, .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hmd-internal-link, @@ -728,48 +983,40 @@ body > div > div.horizontal-main-container > div > div.workspace-split.mod-horiz .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.hmd-fold-math-placeholder { color: var(--dark2); } .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-highlight, .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-highlight { background-color: transparent; } .CodeMirror-activeline { color: var(--light1); }*/ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* WYSIWYG Editor Features From: https://discordapp.com/channels/686053708261228577/702656734631821413/749843052385796147 */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* inline formatting, link targets and [[ ]] disappears if not active line div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting, div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-string.cm-url, div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-link { display: none; } */ /* hide all html tags -- IT IS COMMENTED OUT BY DEFAULT div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-tag{ display: none; }*/ /* optionally header hashes span.cm-formatting-header, /* except list markers span.cm-formatting-list, /* code block backticks span.cm-formatting-code-block.cm-hmd-codeblock { display: inline !important; }*/ /* and task checkboxes span.cm-formatting-task { display: inline !important; font-family: monospace; } */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* replace H1-H6 markup in edit mode: https://discordapp.com/channels/686053708261228577/702656734631821413/753842312882159687 /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* .CodeMirror-sizer { margin-left: 48px !important; } */ /*-- reduce left padding --*/ /* .CodeMirror { height: 100%; @@ -787,7 +1034,6 @@ span.cm-formatting-task { display: inline !important; font-family: monospace; } left: 0px; position: relative; } */ /*-- hide # markup--*/ /* .cm-formatting.cm-formatting-header.cm-formatting-header-1.cm-header.cm-header-1, .cm-formatting.cm-formatting-header.cm-formatting-header-2.cm-header.cm-header-2, @@ -904,226 +1150,13 @@ span.cm-formatting-task { display: inline !important; font-family: monospace; } /*-------------------------------------------------------------------------------------------------------------------------------------------- NO HIGHLIGHT OR LINK MARKS WYSIWYG https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/175 --------------------------------------------------------------------------------------------------------------------------------------------*/ /* div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-link:not(.cm-link), div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-highlight { display: none !important; } */ -
tallguyjenks revised this gist
Oct 16, 2020 . 1 changed file with 819 additions and 573 deletions.There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -1,129 +1,122 @@ :root { --dark0-hard: #1d2021; --dark0: #282828; --dark0-soft: #32302f; --dark1: #3c3836; --dark2: #504945; --dark3: #665c54; --dark4: #7c6f64; --gray: #928374; --light0-hard: #f9f5d7; --light0: #fbf1c7; --light0-soft: #f2e5bc; --light1: #ebdbb2; --light2: #d5c4a1; --light3: #bdae93; --light4: #a89984; --bright-red: #fb4934; --bright-green: #b8bb26; --bright-yellow: #fabd2f; --bright-blue: #83a598; --bright-purple: #d3869b; --bright-aqua: #8ec07c; --bright-orange: #fe8019; --neutral-red: #cc241d; --neutral-green: #98971a; --neutral-yellow: #d79921; --neutral-blue: #458588; --neutral-purple: #b16286; --neutral-aqua: #689d6a; --neutral-orange: #d65d0e; --faded-red: #9d0006; --faded-green: #79740e; --faded-yellow: #b57614; --faded-blue: #076678; --faded-purple: #8f3f71; --faded-aqua: #427b58; --faded-orange: #af3a03; } .theme-dark { --font-monospace: "Hack Nerd Font", "Source Code Pro", monospace; --background-primary: var(--dark0); --background-primary-alt: var(--dark0); --background-secondary: var(--dark0-hard); --background-secondary-alt: var(--dark1); --text-normal: var(--light0); --text-faint: var(--light3); --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-title-h6: var(--neutral-purple); --text-link: var(--bright-blue); --text-a: var(--bright-orange); --text-a-hover: var(--bright-blue); --text-mark: var(--neutral-yellow); --pre-code: var(--dark1); --text-highlight-bg: var(--faded-aqua); --interactive-accent: var(--bright-orange); --interactive-before: var(--dark4); --background-modifier-border: var(--dark2); --text-accent: var(--bright-orange); --interactive-accent-rgb: var(--bright-orange); --inline-code: var(--bright-blue); --code-block: var(--bright-blue); --vim-cursor: var(--bright-orange); --text-selection: var(--dark3); } .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(--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); --text-a: var(--neutral-orange); --text-a-hover: var(--neutral-blue); --text-mark: var(--neutral-yellow); --pre-code: var(--light1); --text-highlight-bg: var(--bright-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); --text-selection: var(--light2); } .theme-dark code[class*="language-"], .theme-dark pre[class*="language-"], .theme-light code[class*="language-"], .theme-light pre[class*="language-"] { text-shadow: none !important; background-color: var(--pre-code) !important; } .graph-view.color-circle, .graph-view.color-fill-highlight, .graph-view.color-line-highlight { color: var(--interactive-accent-rgb) !important; } .graph-view.color-text { color: var(--text-a-hover) !important; } /* .graph-view.color-fill @@ -137,338 +130,285 @@ */ html, body { font-size: 16px !important; } strong { font-weight: 600 !important; } a, .cm-hmd-internal-link { color: var(--text-a) !important; text-decoration: none !important; } a:hover, .cm-hmd-internal-link:hover, .cm-url { color: var(--text-a-hover) !important; text-decoration: none !important; } mark { background-color: var(--text-mark) !important; color: var(--dark0) !important; } .view-actions a { color: var(--text-normal) !important; } .view-actions a:hover { color: var(--text-a) !important; } .HyperMD-codeblock-bg { background-color: var(--pre-code) !important; } .HyperMD-codeblock { line-height: 1.4em !important; color: var(--code-block) !important; } .HyperMD-codeblock-begin { border-top-left-radius: 4px !important; border-top-right-radius: 4px !important; } .HyperMD-codeblock-end { border-bottom-left-radius: 4px !important; border-bottom-right-radius: 4px !important; } th { font-weight: 600 !important; } thead { border-bottom: 2px solid var(--background-modifier-border) !important; } .HyperMD-table-row { line-height: normal !important; padding-left: 4px !important; padding-right: 4px !important; background-color: var(--pre-code) !important; } .HyperMD-table-row-0 { /* padding-top: 4px !important; */ } .CodeMirror-foldgutter-folded, .is-collapsed .nav-folder-collapse-indicator { color: var(--text-a) !important; } .nav-file-tag { color: var(--text-a) !important; } .is-active .nav-file-title { color: var(--text-a) !important; background-color: var(--background-primary-alt) !important; } .nav-file-title { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; } img { display: block !important; margin-left: auto !important; margin-right: auto !important; } .HyperMD-list-line { padding-top: 0 !important; } .CodeMirror-linenumber, .cm-formatting { font-family: var(--font-monospace) !important; } .markdown-preview-section pre code, .markdown-preview-section code { font-size: 0.9em !important; background-color: var(--pre-code) !important; } .markdown-preview-section pre code { padding: 4px !important; line-height: 1.4em !important; display: block !important; color: var(--code-block) !important; } .markdown-preview-section code { color: var(--inline-code) !important; } .cm-s-obsidian, .cm-inline-code { -webkit-font-smoothing: auto !important; } .cm-inline-code { color: var(--inline-code) !important; background-color: var(--pre-code) !important; padding: 1px !important; } .workspace-leaf-header-title { font-weight: 600 !important; } .side-dock-title { padding-top: 15px !important; font-size: 20px !important; } .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 !important; } .cm-s-obsidian, .markdown-preview-view { padding-left: 10px !important; padding-right: 10px !important; } /* 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 !important; background-color: var(--background-secondary-alt); } /* horizontal resize-handle */ .workspace-split.mod-horizontal > * > .workspace-leaf-resize-handle { height: 1px !important; background-color: var(--background-secondary-alt); } /* 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 !important; } .markdown-embed { padding-left: 10px !important; padding-right: 10px !important; margin-left: 10px !important; margin-right: 10px !important; } .cm-header-1, .markdown-preview-section h1 { font-weight: 500 !important; font-size: 34px; /* Removed !important so that the #'s are hidden */ color: var(--text-title-h1) !important; } .cm-header-2, .markdown-preview-section h2 { font-weight: 500 !important; font-size: 26px; /* Removed !important so that the #'s are hidden */ color: var(--text-title-h2) !important; } .cm-header-3, .markdown-preview-section h3 { font-weight: 500 !important; font-size: 22px; /* Removed !important so that the #'s are hidden */ color: var(--text-title-h3) !important; } .cm-header-4, .markdown-preview-section h4 { font-weight: 500 !important; font-size: 20px; /* Removed !important so that the #'s are hidden */ color: var(--text-title-h4) !important; } .cm-header-5, .markdown-preview-section h5 { font-weight: 500 !important; font-size: 18px; /* Removed !important so that the #'s are hidden */ color: var(--text-title-h5) !important; } .cm-header-6, .markdown-preview-section h6 { font-weight: 500 !important; font-size: 16px; /* Removed !important so that the #'s are hidden */ color: var(--text-title-h6) !important; } .suggestion-item.is-selected { background-color: var(--background-secondary); } .empty-state-container:hover { background-color: var(--background-secondary-alt); border: 5px solid var(--interactive-accent) !important; } .checkbox-container { background-color: var(--interactive-before); } .checkbox-container:after { background-color: var(--background-secondary-alt); } .mod-cta { color: var(--background-secondary-alt) !important; font-weight: 600 !important; } .mod-cta:hover { background-color: var(--interactive-before) !important; font-weight: 600 !important; } .CodeMirror-cursor { background-color: var(--vim-cursor) !important; opacity: 60% !important; } input.task-list-item-checkbox { border: 1px solid var(--dark4); appearance: none; -webkit-appearance: none; } input.task-list-item-checkbox:checked { background-color: var(--dark4); box-shadow: inset 0 0 0 2px var(--background-primary); } /*============================================================================================================================================*/ @@ -480,95 +420,118 @@ input.task-list-item-checkbox:checked { /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* BULLET POINT RELATIONSHIP LINES */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ .cm-hmd-list-indent .cm-tab, ul ul { position: relative; } .cm-hmd-list-indent .cm-tab::before, ul ul::before { content: ""; border-left: 1px solid var(--bright-aqua); position: absolute; } .cm-hmd-list-indent .cm-tab::before { left: 5px; top: -5px; bottom: -4px; } ul ul::before { left: -16px; top: 0; bottom: 0; } /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* tasklist (preview) indentation lines correction */ /* https://forum.obsidian.md/t/bullet-lines-in-css-for-checkboxes/6262/3 */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ .contains-task-list::before { left: 10px ; } /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* MAKE MATHJAX FONT LARGER */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ .MJX-TEX { font-size: 180%; } /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* _hyphenation_and_justification https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/25 */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ .cm-s-obsidian, .markdown-preview-view { text-align: justify; hyphens: auto; } /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* IMAGE HOVER GROW https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/29 */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ .markdown-preview-view img { display: block; margin-top: 20pt; margin-bottom: 20pt; margin-left: auto; margin-right: auto; width: 50%; /* experiment with values */ transition: transform 0.25s ease; } .markdown-preview-view img:hover { -webkit-transform: scale(1.8); /* experiment with values */ transform: scale(2); } /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* NICER CHECK BOXES */ /* Round checkbxes in preview and editor */ /* https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/34 */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ input[type="checkbox"], .cm-formatting-task { -webkit-appearance: none; appearance: none; border-radius: 50%; border: 1px solid var(--text-faint); padding: 0; vertical-align: top; } .cm-s-obsidian span.cm-formatting-task { color: transparent; width: 1.25em !important; height: 1.25em; display: inline-block; } input[type="checkbox"]:focus { outline: 0; } input[type="checkbox"]:checked, .cm-formatting-task.cm-property { background-color: var(--text-accent-hover); border: 1px solid var(--text-accent-hover); background-position: center; background-size: 70%; background-repeat: no-repeat; background-image: url('data:image/svg+xml; utf8, <svg width="12px" height="10px" viewBox="0 0 12 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-4.000000, -6.000000)" fill="%23ffffff"><path d="M8.1043257,14.0367999 L4.52468714,10.5420499 C4.32525014,10.3497722 4.32525014,10.0368095 4.52468714,9.8424863 L5.24777413,9.1439454 C5.44721114,8.95166768 5.77142411,8.95166768 5.97086112,9.1439454 L8.46638057,11.5903727 L14.0291389,6.1442083 C14.2285759,5.95193057 14.5527889,5.95193057 14.7522259,6.1442083 L15.4753129,6.84377194 C15.6747499,7.03604967 15.6747499,7.35003511 15.4753129,7.54129009 L8.82741268,14.0367999 C8.62797568,14.2290777 8.3037627,14.2290777 8.1043257,14.0367999"></path></g></g></svg>'); } /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* STYLISH BLOCK QUOTES */ /* Add quotation character before quote */ /* https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/39 */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ blockquote:before { font: 14px/20px italic Times, serif; content: "“"; font-size: 3em; line-height: 0.1em; vertical-align: -0.4em; } blockquote p { display: inline; } /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* Remove blockquote left margin @@ -580,24 +543,25 @@ blockquote { /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /*============bigger link popup preview ================*/ /* https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/82 */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ .popover.hover-popover { transform: scale(0.8); /* makes the content smaller */ max-height: 800px; /* was 300 */ min-height: 100px; width: 500px; /* was 400 */ } /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* Expand List Column for file search --- THIS MESSES WITH ANDY MODE */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /*.nav-folder-children { column-width:200px; }*/ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* Make Tags and Searched pages have expanded columns --- THIS MESSES WITH ANDY MODE */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /*body > div > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-right-split > div:nth-child(4) > div.workspace-leaf > div > div > div, body > div > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-left-split > div.workspace-tabs > div.workspace-leaf > div > div.search-result-container.mod-global-search > div @@ -606,110 +570,144 @@ body > div > div.horizontal-main-container > div > div.workspace-split.mod-horiz }*/ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* Andy Matuschak mode! */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* Andy Matuschak mode! V2! for 0.7.0! (so... 2.7?) */ /* everything under .mod-root now. Don't want Andy messing with sidebars */ /* also, Andy only makes sense for vertical splits, at the root level, right? */ /* 36px is the header height in the default theme */ /* .mod-root.workspace-split.mod-vertical { overflow-x: auto; --header-width: 36px; } */ /* 700px is the default theme's "readable" max-width */ /* .mod-root.workspace-split.mod-vertical > div { min-width: calc( 700px + var(--header-width) ); box-shadow: 0px 0px 20px 20px rgba(0, 0, 0, 0.25); position: sticky; left: 0; } */ /* shift sticky position, so titles will stack up to the left */ /* This will currently stack to a maximum of 10 before resetting */ /* .mod-root.workspace-split.mod-vertical > div:nth-child(10n-8) { left: calc(var(--header-width) * 0); } .mod-root.workspace-split.mod-vertical > div:nth-child(10n-7) { left: calc(var(--header-width) * 1); } .mod-root.workspace-split.mod-vertical > div:nth-child(10n-6) { left: calc(var(--header-width) * 2); } .mod-root.workspace-split.mod-vertical > div:nth-child(10n-5) { left: calc(var(--header-width) * 3); } .mod-root.workspace-split.mod-vertical > div:nth-child(10n-4) { left: calc(var(--header-width) * 4); } .mod-root.workspace-split.mod-vertical > div:nth-child(10n-3) { left: calc(var(--header-width) * 5); } .mod-root.workspace-split.mod-vertical > div:nth-child(10n-2) { left: calc(var(--header-width) * 6); } .mod-root.workspace-split.mod-vertical > div:nth-child(10n-1) { left: calc(var(--header-width) * 7); } .mod-root.workspace-split.mod-vertical > div:nth-child(10n + 0) { left: calc(var(--header-width) * 8); } .mod-root.workspace-split.mod-vertical > div:nth-child(10n + 1) { left: calc(var(--header-width) * 9); } */ /* now it's time for the fancy vertical titles */ /* first we'll add a bit of gap for the title to sit inside of */ /* .workspace-leaf-content { padding-left: var(--header-width); position: relative; } */ /* this is where the magic happens */ /* .view-header { writing-mode: vertical-lr; border-right: 1px solid var(--background-secondary-alt); border-left: 2px solid var(--background-secondary-alt); border-top: none; border-bottom: none; height: auto; width: var(--header-width); position: absolute; left: 0; top: 0; bottom: 0; } */ /* active titles have different border colours */ /* .workspace-leaf.mod-active .view-header { border-right: 2px solid var(--interactive-accent); border-bottom: none; } */ /* unset the title container height and swap padding */ /* .view-header-title-container { height: unset; padding-left: unset; padding-top: 5px; } */ /* fix the long-title-obscuring shadows */ /* .view-header-title-container:after { width: 100%; height: 30px; top: unset; bottom: 0; background: linear-gradient( to bottom, transparent, var(--background-secondary) ); } .workspace-leaf.mod-active .view-header-title-container:after { background: linear-gradient( to bottom, transparent, var(--background-primary-alt) ); } */ /* swap the padding/margin around for the header and actions icons */ /* .view-header-icon, .view-actions { padding: 10px 5px; } .view-action { margin: 8px 0; } */ /* get rid of the gap left by the now-missing horizontal title */ /* .view-content { height: 100%; } */ /* make the fake drop target overlay have a background so you can see it. */ /* TODO: figure out how the fake target overlay works so we can put the title back, too */ /* .workspace-fake-target-overlay { background-color: var(--background-primary); } */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* Lime Light but only for body text */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /*.cm-s-obsidian, .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-link, .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hmd-internal-link, .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-url, @@ -740,7 +738,6 @@ body > div > div.horizontal-main-container > div > div.workspace-split.mod-horiz color: var(--light1); }*/ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* WYSIWYG Editor Features From: https://discordapp.com/channels/686053708261228577/702656734631821413/749843052385796147 */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ @@ -766,118 +763,367 @@ span.cm-formatting-task { display: inline !important; font-family: monospace; } */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* replace H1-H6 markup in edit mode: https://discordapp.com/channels/686053708261228577/702656734631821413/753842312882159687 /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* .CodeMirror-sizer { margin-left: 48px !important; } */ /*-- reduce left padding --*/ /* .CodeMirror { height: 100%; direction: ltr; padding: 0 10px; } */ /*-- header color --*/ /* .cm-header.cm-header-1 { color: var(--text-accent); left: 0px; position: relative; } */ /* .cm-header.cm-header-2 { color: var(--text-accent2); left: 0px; position: relative; } */ /*-- hide # markup--*/ /* .cm-formatting.cm-formatting-header.cm-formatting-header-1.cm-header.cm-header-1, .cm-formatting.cm-formatting-header.cm-formatting-header-2.cm-header.cm-header-2, .cm-formatting.cm-formatting-header.cm-formatting-header-3.cm-header.cm-header-3, .cm-formatting.cm-formatting-header.cm-formatting-header-4.cm-header.cm-header-4, .cm-formatting.cm-formatting-header.cm-formatting-header-5.cm-header.cm-header-5, .cm-formatting.cm-formatting-header.cm-formatting-header-6.cm-header.cm-header-6 { font-size: 0px; } */ /*-- display H1-h6 in gutter--*/ /* .cm-formatting.cm-formatting-header.cm-formatting-header-1.cm-header.cm-header-1:before { content: "H1"; font-size: 34px; color: var(--text-accent2); left: -49px; top: -50px; position: absolute; } .cm-formatting.cm-formatting-header.cm-formatting-header-2.cm-header.cm-header-2:before { content: "H2"; font-size: 26px; color: var(--text-accent2); left: -43px; top: -35px; position: absolute; } .cm-formatting.cm-formatting-header.cm-formatting-header-3.cm-header.cm-header-3:before { content: "H3"; font-size: 22px; color: var(--text-accent2); left: -36px; top: -6px; position: absolute; } .cm-formatting.cm-formatting-header.cm-formatting-header-4.cm-header.cm-header-4:before { content: "H4"; font-size: 20px; color: var(--text-accent2); left: -36px; top: -6px; position: absolute; } .cm-formatting.cm-formatting-header.cm-formatting-header-5.cm-header.cm-header-5:before { content: "H5"; font-size: 18px; color: var(--text-accent2); left: -36px; top: -6px; position: absolute; } .cm-formatting.cm-formatting-header.cm-formatting-header-6.cm-header.cm-header-6:before { content: "H6"; font-size: 16px; color: var(--text-accent2); left: -36px; top: -4px; position: absolute; } */ /*-- is active line, hide H[1-6] in gutter --*/ /* .CodeMirror-activeline span.cm-formatting.cm-formatting-header.cm-formatting-header-1.cm-header.cm-header-1:before, .CodeMirror-activeline span.cm-formatting.cm-formatting-header.cm-formatting-header-2.cm-header.cm-header-2:before, .CodeMirror-activeline span.cm-formatting.cm-formatting-header.cm-formatting-header-3.cm-header.cm-header-3:before, .CodeMirror-activeline span.cm-formatting.cm-formatting-header.cm-formatting-header-4.cm-header.cm-header-4:before, .CodeMirror-activeline span.cm-formatting.cm-formatting-header.cm-formatting-header-5.cm-header.cm-header-5:before, .CodeMirror-activeline span.cm-formatting.cm-formatting-header.cm-formatting-header-6.cm-header.cm-header-6:before { font-size: 0px; } */ /*-- is active line, display # markup --*/ /* .CodeMirror-activeline > pre > span .cm-formatting.cm-formatting-header.cm-formatting-header-1.cm-header.cm-header-1 { font-size: 32px; display: inline; } .CodeMirror-activeline > pre > span .cm-formatting.cm-formatting-header.cm-formatting-header-2.cm-header.cm-header-2 { font-size: 24px; display: inline; } .CodeMirror-activeline > pre > span .cm-formatting.cm-formatting-header.cm-formatting-header-3.cm-header.cm-header-3 { font-size: 19px; display: inline; } .CodeMirror-activeline > pre > span .cm-formatting.cm-formatting-header.cm-formatting-header-4.cm-header.cm-header-4, .CodeMirror-activeline > pre > span .cm-formatting.cm-formatting-header.cm-formatting-header-5.cm-header.cm-header-5, .CodeMirror-activeline > pre > span .cm-formatting.cm-formatting-header.cm-formatting-header-6.cm-header.cm-header-6 { font-size: 13px; display: inline; } */ /*-------------------------------------------------------------------------------------------------------------------------------------------- NO HIGHLIGHT OR LINK MARKS WYSIWYG https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/175 --------------------------------------------------------------------------------------------------------------------------------------------*/ /* div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-link:not(.cm-link), div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-highlight { display: none !important; } */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* Custom icons differing files and folders: https://discordapp.com/channels/686053708261228577/702656734631821413/755293685046050896 /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* Emoji */ /*.nav-file-title-content::before { content: '🗒 '; } .nav-folder-title-content::before { content: '📂 '; }*/ /* Flat font */ /* Requires: https://icomoon.io/#icons-icomoon/liga-font */ .nav-folder-children .nav-file-title-content:first-child::before { content: "\e924 "; font-family: "IcoMoon-Free"; } .nav-folder-children .nav-folder-title-content::before { content: "\e930 "; font-family: "IcoMoon-Free"; } /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* ====== Tag Pills ======== https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/72 /*--------------------------------------------------------------------------------------------------------------------------------------------*/ .tag:not(.token) { background-color: var(--faded-blue); border: none; color: white; font-size: 14px; padding: 0px 8px; text-align: center; text-decoration: none; display: inline-block; margin: 0px 0px; cursor: pointer; border-radius: 14px; font-weight: bold; } .tag:not(.token):hover { color: var(--bright-red) !important; background-color: var(--bright-red); } /*==============================================*/ .tag[href^="#📥️"] { background-color: var(--light4); color: var(--light4) !important; } .tag[href^="#🌱️"] { background-color: var(--faded-aqua); color: var(--faded-aqua) !important; } .tag[href^="#🌞️"] { background-color: var(--faded-aqua); color: var(--faded-aqua) !important; } .tag[href^="#🌲️"] { background-color: var(--faded-aqua); color: var(--faded-aqua) !important; } .tag[href^="#✏"] { background-color: var(--faded-blue); color: var(--faded-blue) !important; } /*==============================================*/ .tag[href^="#✅️"] { background-color: var(--bright-orange); color: var(--bright-orange) !important; } .tag[href^="#🗺️"] { background-color: var(--bright-yellow); color: var(--bright-yellow) !important; } .tag[href^="#⚙️"] { background-color: var(--dark3); color: var(--dark3) !important; } .tag[href^="#❗️"] { background-color: var(--light1); color: var(--light1) !important; } .tag[href^="#🏷️"] { background-color: var(--faded-purple); color: var(--faded-purple) !important; } /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* Make subtler folding gutter arrows: https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/10 /*--------------------------------------------------------------------------------------------------------------------------------------------*/ .CodeMirror-foldgutter-folded:after, .CodeMirror-foldgutter-open:after { opacity: 0.5; font-size: 60%; } .CodeMirror-foldgutter-folded:hover:after, .CodeMirror-foldgutter-open:hover:after { opacity: 1; } .CodeMirror-foldgutter-folded:after { content: "\25BA"; } .CodeMirror-foldgutter-open:after { content: "\25BC"; } /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* Relationship lines for the folder levels in file navigation: https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/112 /*--------------------------------------------------------------------------------------------------------------------------------------------*/ .outline .collapsible-item-children { margin-left: 20px; border-left: 1px solid var(--faded-aqua); border-radius: 4px; transition:all 0.5s ease-in-out; } .outline .collapsible-item-children:hover { border-left-color: var(--faded-aqua); } .nav-folder-children .nav-folder-children { margin-left: 20px; padding-left: 0; border-left: 1px solid var(--faded-aqua); border-radius: 4px; transition:all 0.5s ease-in-out; } .nav-folder-children .nav-folder-children:hover { border-left-color: var(--faded-aqua); } /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* Graph View CSS https://discordapp.com/channels/686053708261228577/702656734631821413/760488978691784705 */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ .theme-dark .graph-view.color-arrow { color: var(--bright-aqua); } .theme-dark .graph-view.color-fill-tag { color: var(--bright-yellow); } .theme-dark .graph-view.color-fill-attachment { color: var(--neutral-blue); } .theme-dark .graph-view.color-fill-unresolved { color: var(--bright-red); } .graph-view.color-fill { color: var(--light1); } /* .graph-view.color-line { color: var(--gray); } */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* Better bullet points in edit mode https://forum.obsidian.md/t/clutter-free-edit-mode/6791/30 */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-list-ul { color: transparent; position: relative; } div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-list-ul:after { content: "•"; position: absolute; top: -6px; left: 4px; color: var(--bright-aqua); font-family: sans-serif; font-size: 20px; } /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* some more text formatting */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ b, strong, .cm-s-obsidian .cm-strong{ color: var(--bright-red) !important; } i, em { color: var(--bright-green) !important; } u { color: var(--bright-purple) !important; } /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* Larger popup windows https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/175 */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ .popover.hover-popover { transform: scale(0.8); /* makes the content smaller */ max-height: 800px; min-height: 50px; width: 700px; overflow: overlay; /* new added */ } .popover.hover-popover .markdown-embed { height: 100%; } .popover.hover-popover.is-loaded .markdown-embed .markdown-embed-content .markdown-preview-view{ padding: 10px 10px 10px 16px; /*16px two pop magin */ } -
tallguyjenks created this gist
Sep 14, 2020 .There are no files selected for viewing
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 charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,883 @@ :root { --dark0-hard: #1d2021; --dark0: #282828; --dark0-soft: #32302f; --dark1: #3c3836; --dark2: #504945; --dark3: #665c54; --dark4: #7c6f64; --gray: #928374; --light0-hard: #f9f5d7; --light0: #fbf1c7; --light0-soft: #f2e5bc; --light1: #ebdbb2; --light2: #d5c4a1; --light3: #bdae93; --light4: #a89984; --bright-red: #fb4934; --bright-green: #b8bb26; --bright-yellow: #fabd2f; --bright-blue: #83a598; --bright-purple: #d3869b; --bright-aqua: #8ec07c; --bright-orange: #fe8019; --neutral-red: #cc241d; --neutral-green: #98971a; --neutral-yellow: #d79921; --neutral-blue: #458588; --neutral-purple: #b16286; --neutral-aqua: #689d6a; --neutral-orange: #d65d0e; --faded-red: #9d0006; --faded-green: #79740e; --faded-yellow: #b57614; --faded-blue: #076678; --faded-purple: #8f3f71; --faded-aqua: #427b58; --faded-orange: #af3a03; } .theme-dark { --font-monospace: 'Hack Nerd Font', 'Source Code Pro', monospace; --background-primary: var(--dark0); --background-primary-alt: var(--dark0); --background-secondary: var(--dark0-hard); --background-secondary-alt: var(--dark1); --text-normal: var(--light0); --text-faint: var(--light3); --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-title-h6: var(--neutral-purple); --text-link: var(--bright-blue); --text-a: var(--bright-orange); --text-a-hover: var(--bright-blue); --text-mark: var(--neutral-yellow); --pre-code: var(--dark1); --text-highlight-bg: var(--faded-aqua); --interactive-accent: var(--bright-orange); --interactive-before: var(--dark4); --background-modifier-border: var(--dark2); --text-accent: var(--bright-orange); --interactive-accent-rgb: var(--bright-orange); --inline-code: var(--bright-blue); --code-block: var(--bright-blue); --vim-cursor: var(--bright-orange); --text-selection: var(--dark3); } .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(--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); --text-a: var(--neutral-orange); --text-a-hover: var(--neutral-blue); --text-mark: var(--neutral-yellow); --pre-code: var(--light1); --text-highlight-bg: var(--bright-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); --text-selection: var(--light2); } .theme-dark code[class*="language-"], .theme-dark pre[class*="language-"], .theme-light code[class*="language-"], .theme-light pre[class*="language-"] { text-shadow: none !important; background-color: var(--pre-code) !important; } .graph-view.color-circle, .graph-view.color-fill-highlight, .graph-view.color-line-highlight { color: var(--interactive-accent-rgb) !important; } .graph-view.color-text { color: var(--text-a-hover) !important; } /* .graph-view.color-fill { color: var(--background-secondary); } .graph-view.color-line { color: var(--background-modifier-border); } */ html, body { font-size: 16px !important; } strong { font-weight: 600 !important; } a, .cm-hmd-internal-link { color: var(--text-a) !important; text-decoration: none !important; } a:hover, .cm-hmd-internal-link:hover, .cm-url { color: var(--text-a-hover) !important; text-decoration: none !important; } mark { background-color: var(--text-mark) !important; color: var(--dark0) !important; } .view-actions a { color: var(--text-normal) !important; } .view-actions a:hover { color: var(--text-a) !important; } .HyperMD-codeblock-bg { background-color: var(--pre-code) !important; } .HyperMD-codeblock { line-height: 1.4em !important; color: var(--code-block) !important; } .HyperMD-codeblock-begin { border-top-left-radius: 4px !important; border-top-right-radius: 4px !important; } .HyperMD-codeblock-end { border-bottom-left-radius: 4px !important; border-bottom-right-radius: 4px !important; } th { font-weight: 600 !important; } thead { border-bottom: 2px solid var(--background-modifier-border) !important; } .HyperMD-table-row { line-height: normal !important; padding-left: 4px !important; padding-right: 4px !important; background-color: var(--pre-code) !important; } .HyperMD-table-row-0 { /* padding-top: 4px !important; */ } .CodeMirror-foldgutter-folded, .is-collapsed .nav-folder-collapse-indicator { color: var(--text-a) !important; } .nav-file-tag { color: var(--text-a) !important; } .is-active .nav-file-title { color: var(--text-a) !important; background-color: var(--background-primary-alt) !important; } .nav-file-title { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; } img { display: block !important; margin-left: auto !important; margin-right: auto !important; } .HyperMD-list-line { padding-top: 0 !important; } .CodeMirror-linenumber, .cm-formatting { font-family: var(--font-monospace) !important; } .markdown-preview-section pre code, .markdown-preview-section code { font-size: 0.9em !important; background-color: var(--pre-code) !important; } .markdown-preview-section pre code { padding: 4px !important; line-height: 1.4em !important; display: block !important; color: var(--code-block) !important; } .markdown-preview-section code { color: var(--inline-code) !important; } .cm-s-obsidian, .cm-inline-code { -webkit-font-smoothing: auto !important; } .cm-inline-code { color: var(--inline-code) !important; background-color: var(--pre-code) !important; padding: 1px !important; } .workspace-leaf-header-title { font-weight: 600 !important; } .side-dock-title { padding-top: 15px !important; font-size: 20px !important; } .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 !important; } .cm-s-obsidian, .markdown-preview-view { padding-left: 10px !important; padding-right: 10px !important; } /* 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 !important; background-color: var(--background-secondary-alt); } /* horizontal resize-handle */ .workspace-split.mod-horizontal > * > .workspace-leaf-resize-handle { height: 1px !important; background-color: var(--background-secondary-alt); } /* 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 !important; } .markdown-embed { padding-left: 10px !important; padding-right: 10px !important; margin-left: 10px !important; margin-right: 10px !important; } .cm-header-1, .markdown-preview-section h1 { font-weight: 500 !important; font-size: 34px; /* Removed !important so that the #'s are hidden */ color: var(--text-title-h1) !important; } .cm-header-2, .markdown-preview-section h2 { font-weight: 500 !important; font-size: 26px; /* Removed !important so that the #'s are hidden */ color: var(--text-title-h2) !important; } .cm-header-3, .markdown-preview-section h3 { font-weight: 500 !important; font-size: 22px; /* Removed !important so that the #'s are hidden */ color: var(--text-title-h3) !important; } .cm-header-4, .markdown-preview-section h4 { font-weight: 500 !important; font-size: 20px; /* Removed !important so that the #'s are hidden */ color: var(--text-title-h4) !important; } .cm-header-5, .markdown-preview-section h5 { font-weight: 500 !important; font-size: 18px; /* Removed !important so that the #'s are hidden */ color: var(--text-title-h5) !important; } .cm-header-6, .markdown-preview-section h6 { font-weight: 500 !important; font-size: 16px; /* Removed !important so that the #'s are hidden */ color: var(--text-title-h6) !important; } .suggestion-item.is-selected { background-color: var(--background-secondary); } .empty-state-container:hover { background-color: var(--background-secondary-alt); border: 5px solid var(--interactive-accent) !important; } .checkbox-container { background-color: var(--interactive-before); } .checkbox-container:after { background-color: var(--background-secondary-alt); } .mod-cta { color: var(--background-secondary-alt) !important; font-weight: 600 !important; } .mod-cta:hover { background-color: var(--interactive-before) !important; font-weight: 600 !important; } .CodeMirror-cursor { background-color: var(--vim-cursor) !important; opacity: 60% !important; } input.task-list-item-checkbox { border: 1px solid var(--dark4); appearance: none; -webkit-appearance: none; } input.task-list-item-checkbox:checked { background-color: var(--dark4); box-shadow: inset 0 0 0 2px var(--background-primary); } /*============================================================================================================================================*/ /*| |*/ /*| THIS IS MY CUSTOM CSS SECTION WHERE I FIND COOL SHIT AND ADD IT IN |*/ /*| |*/ /*============================================================================================================================================*/ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* BULLET POINT RELATIONSHIP LINES */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ .cm-hmd-list-indent .cm-tab, ul ul { position: relative; } .cm-hmd-list-indent .cm-tab::before, ul ul::before { content:''; border-left: 1px solid rgba(235, 219, 178, 0.5); position: absolute; } .cm-hmd-list-indent .cm-tab::before { left: 0; top: -5px; bottom: -4px; } ul ul::before { left: -16px; top: 0; bottom: 0; } /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* MAKE MATHJAX FONT LARGER */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ .MJX-TEX { font-size: 180%; } /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* _hyphenation_and_justification */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ .cm-s-obsidian, .markdown-preview-view { text-align: justify; hyphens: auto; } /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* IMAGE HOVER GROW */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ .markdown-preview-view img { display: block; margin-top: 20pt; margin-bottom: 20pt; margin-left: auto; margin-right: auto; width: 50%; /* experiment with values */ transition:transform 0.25s ease; } .markdown-preview-view img:hover { -webkit-transform:scale(1.8); /* experiment with values */ transform:scale(2); } /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* NICER CHECK BOXES */ /* Round checkbxes in preview and editor */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ input[type=checkbox], .cm-formatting-task { -webkit-appearance: none; appearance: none; border-radius: 50%; border: 1px solid var(--text-faint); padding: 0; vertical-align: top; } .cm-s-obsidian span.cm-formatting-task { color: transparent; width: 1.25em !important; height: 1.25em; display: inline-block; } input[type=checkbox]:focus{ outline:0; } input[type=checkbox]:checked, .cm-formatting-task.cm-property { background-color: var(--text-accent-hover); border: 1px solid var(--text-accent-hover); background-position: center; background-size: 70%; background-repeat: no-repeat; background-image: url('data:image/svg+xml; utf8, <svg width="12px" height="10px" viewBox="0 0 12 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-4.000000, -6.000000)" fill="%23ffffff"><path d="M8.1043257,14.0367999 L4.52468714,10.5420499 C4.32525014,10.3497722 4.32525014,10.0368095 4.52468714,9.8424863 L5.24777413,9.1439454 C5.44721114,8.95166768 5.77142411,8.95166768 5.97086112,9.1439454 L8.46638057,11.5903727 L14.0291389,6.1442083 C14.2285759,5.95193057 14.5527889,5.95193057 14.7522259,6.1442083 L15.4753129,6.84377194 C15.6747499,7.03604967 15.6747499,7.35003511 15.4753129,7.54129009 L8.82741268,14.0367999 C8.62797568,14.2290777 8.3037627,14.2290777 8.1043257,14.0367999"></path></g></g></svg>'); } /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* STYLISH BLOCK QUOTES */ /* Add quotation character before quote */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ blockquote:before { font: 14px/20px italic Times, serif; content: "“"; font-size: 3em; line-height: 0.1em; vertical-align: -0.4em; } blockquote p { display: inline; } /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* Remove blockquote left margin /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* blockquote { margin-inline-start: 0; } */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /*============bigger link popup preview ================*/ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ .popover.hover-popover { transform: scale(0.8); /* makes the content smaller */ max-height: 800px; /* was 300 */ min-height: 100px; width: 500px; /* was 400 */ } /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* Expand List Column for file search */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /*.nav-folder-children { column-width:200px; }*/ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* Make Tags and Searched pages have expanded columns */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /*body > div > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-right-split > div:nth-child(4) > div.workspace-leaf > div > div > div, body > div > div.horizontal-main-container > div > div.workspace-split.mod-horizontal.mod-left-split > div.workspace-tabs > div.workspace-leaf > div > div.search-result-container.mod-global-search > div { column-width:200px; }*/ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* Andy Matuschak mode! */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* Andy Matuschak mode! V2! for 0.7.0! (so... 2.7?) */ /* everything under .mod-root now. Don't want Andy messing with sidebars */ /* also, Andy only makes sense for vertical splits, at the root level, right? */ .mod-root.workspace-split.mod-vertical { overflow-x:auto; --header-width: 36px; /* <- 36px is the header height in the default theme */ } .mod-root.workspace-split.mod-vertical > div { min-width: calc(700px + var(--header-width)); /* <-- 700px is the default theme's "readable" max-width */ box-shadow: 0px 0px 20px 20px rgba(0,0,0,0.25); position:sticky; left:0; } /* shift sticky position, so titles will stack up to the left */ /* This will currently stack to a maximum of 10 before resetting */ .mod-root.workspace-split.mod-vertical > div:nth-child(10n-8) { left: calc(var(--header-width) * 0); } .mod-root.workspace-split.mod-vertical > div:nth-child(10n-7) { left: calc(var(--header-width) * 1); } .mod-root.workspace-split.mod-vertical > div:nth-child(10n-6) { left: calc(var(--header-width) * 2); } .mod-root.workspace-split.mod-vertical > div:nth-child(10n-5) { left: calc(var(--header-width) * 3); } .mod-root.workspace-split.mod-vertical > div:nth-child(10n-4) { left: calc(var(--header-width) * 4); } .mod-root.workspace-split.mod-vertical > div:nth-child(10n-3) { left: calc(var(--header-width) * 5); } .mod-root.workspace-split.mod-vertical > div:nth-child(10n-2) { left: calc(var(--header-width) * 6); } .mod-root.workspace-split.mod-vertical > div:nth-child(10n-1) { left: calc(var(--header-width) * 7); } .mod-root.workspace-split.mod-vertical > div:nth-child(10n+0) { left: calc(var(--header-width) * 8); } .mod-root.workspace-split.mod-vertical > div:nth-child(10n+1) { left: calc(var(--header-width) * 9); } /* now it's time for the fancy vertical titles */ /* first we'll add a bit of gap for the title to sit inside of */ .workspace-leaf-content { padding-left: var(--header-width); position: relative; } /* this is where the magic happens */ .view-header { writing-mode: vertical-lr; border-right: 1px solid var(--background-secondary-alt); border-left: 2px solid var(--background-secondary-alt); border-top: none; border-bottom: none; height: auto; width: var(--header-width); position: absolute; left:0; top:0; bottom:0; } /* active titles have different border colours */ .workspace-leaf.mod-active .view-header { border-right: 2px solid var(--interactive-accent); border-bottom: none; } /* unset the title container height and swap padding */ .view-header-title-container { height: unset; padding-left: unset; padding-top: 5px; } /* fix the long-title-obscuring shadows */ .view-header-title-container:after { width: 100%; height: 30px; top:unset; bottom: 0; background: linear-gradient(to bottom, transparent, var(--background-secondary)); } .workspace-leaf.mod-active .view-header-title-container:after { background: linear-gradient(to bottom, transparent, var(--background-primary-alt)); } /* swap the padding/margin around for the header and actions icons */ .view-header-icon, .view-actions { padding: 10px 5px; } .view-action { margin: 8px 0; } /* get rid of the gap left by the now-missing horizontal title */ .view-content { height: 100%; } /* make the fake drop target overlay have a background so you can see it. */ /* TODO: figure out how the fake target overlay works so we can put the title back, too */ .workspace-fake-target-overlay { background-color: var(--background-primary); } /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* Lime Light but only for body text */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* .cm-s-obsidian, .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-link, .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hmd-internal-link, .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-url, .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hmd-escape-backslash, .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-inline-code, .cm-s-obsidian div:not(.CodeMirror-activeline) > pre.CodeMirror-line.HyperMD-codeblock, .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hashtag, .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-builtin, .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hr, .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-footref, .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line pre.HyperMD-footnote span.cm-hmd-footnote, .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-highlight, .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-highlight, .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-list, .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-task, .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-quote, .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-math, .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.hmd-fold-math-placeholder { color: var(--dark2); } .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-highlight, .cm-s-obsidian div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-highlight { background-color: transparent; } .CodeMirror-activeline { color: var(--light1); }*/ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* WYSIWYG Editor Features From: https://discordapp.com/channels/686053708261228577/702656734631821413/749843052385796147 */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* inline formatting, link targets and [[ ]] disappears if not active line div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting, div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-string.cm-url, div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-link { display: none; } */ /* hide all html tags -- IT IS COMMENTED OUT BY DEFAULT div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-tag{ display: none; }*/ /* optionally header hashes span.cm-formatting-header, /* except list markers span.cm-formatting-list, /* code block backticks span.cm-formatting-code-block.cm-hmd-codeblock { display: inline !important; }*/ /* and task checkboxes span.cm-formatting-task { display: inline !important; font-family: monospace; } */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ /* replace H1-H6 markup in edit mode */ /*--------------------------------------------------------------------------------------------------------------------------------------------*/ .CodeMirror-sizer{ margin-left: 48px !important; } /*-- reduce left padding --*/ .CodeMirror { height: 100%; direction: ltr; padding: 0 10px; } /*-- header color --*/ .cm-header.cm-header-1{ color: var(--text-accent); left: 0px; position: relative; } .cm-header.cm-header-2{ color: var(--text-accent2); left: 0px; position: relative; } /*-- hide # markup--*/ .cm-formatting.cm-formatting-header.cm-formatting-header-1.cm-header.cm-header-1, .cm-formatting.cm-formatting-header.cm-formatting-header-2.cm-header.cm-header-2, .cm-formatting.cm-formatting-header.cm-formatting-header-3.cm-header.cm-header-3, .cm-formatting.cm-formatting-header.cm-formatting-header-4.cm-header.cm-header-4, .cm-formatting.cm-formatting-header.cm-formatting-header-5.cm-header.cm-header-5, .cm-formatting.cm-formatting-header.cm-formatting-header-6.cm-header.cm-header-6 { font-size: 0px; } /*-- display H1-h6 in gutter--*/ .cm-formatting.cm-formatting-header.cm-formatting-header-1.cm-header.cm-header-1:before{ content:"H1"; font-size:34px; color: var(--text-accent2); left:-49px; top:-50px; position:absolute; } .cm-formatting.cm-formatting-header.cm-formatting-header-2.cm-header.cm-header-2:before{ content:"H2"; font-size:26px; color: var(--text-accent2); left:-43px; top:-35px; position:absolute; } .cm-formatting.cm-formatting-header.cm-formatting-header-3.cm-header.cm-header-3:before{ content:"H3"; font-size:22px; color: var(--text-accent2); left:-36px; top:-6px; position:absolute; } .cm-formatting.cm-formatting-header.cm-formatting-header-4.cm-header.cm-header-4:before{ content:"H4"; font-size:20px; color: var(--text-accent2); left:-36px; top:-6px; position:absolute; } .cm-formatting.cm-formatting-header.cm-formatting-header-5.cm-header.cm-header-5:before{ content:"H5"; font-size:18px; color: var(--text-accent2); left:-36px; top:-6px; position:absolute; } .cm-formatting.cm-formatting-header.cm-formatting-header-6.cm-header.cm-header-6:before{ content:"H6"; font-size:16px; color: var(--text-accent2); left:-36px; top:-4px; position:absolute; } /*-- is active line, hide H[1-6] in gutter --*/ .CodeMirror-activeline span.cm-formatting.cm-formatting-header.cm-formatting-header-1.cm-header.cm-header-1:before, .CodeMirror-activeline span.cm-formatting.cm-formatting-header.cm-formatting-header-2.cm-header.cm-header-2:before, .CodeMirror-activeline span.cm-formatting.cm-formatting-header.cm-formatting-header-3.cm-header.cm-header-3:before, .CodeMirror-activeline span.cm-formatting.cm-formatting-header.cm-formatting-header-4.cm-header.cm-header-4:before, .CodeMirror-activeline span.cm-formatting.cm-formatting-header.cm-formatting-header-5.cm-header.cm-header-5:before, .CodeMirror-activeline span.cm-formatting.cm-formatting-header.cm-formatting-header-6.cm-header.cm-header-6:before { font-size: 0px; } /*-- is active line, display # markup --*/ .CodeMirror-activeline > pre > span .cm-formatting.cm-formatting-header.cm-formatting-header-1.cm-header.cm-header-1{ font-size:32px; display:inline; } .CodeMirror-activeline > pre > span .cm-formatting.cm-formatting-header.cm-formatting-header-2.cm-header.cm-header-2{ font-size:24px; display:inline; } .CodeMirror-activeline > pre > span .cm-formatting.cm-formatting-header.cm-formatting-header-3.cm-header.cm-header-3{ font-size:19px; display:inline; } .CodeMirror-activeline > pre > span .cm-formatting.cm-formatting-header.cm-formatting-header-4.cm-header.cm-header-4, .CodeMirror-activeline > pre > span .cm-formatting.cm-formatting-header.cm-formatting-header-5.cm-header.cm-header-5, .CodeMirror-activeline > pre > span .cm-formatting.cm-formatting-header.cm-formatting-header-6.cm-header.cm-header-6{ font-size:13px; display:inline; }