-
-
Save brimwats1/e047d3ce02e7c6e98858c25d2a65639e to your computer and use it in GitHub Desktop.
My custom theme for the Obsidian Editor
This file contains 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 characters
| /**================================================================================= | |
| /** ██████╗░██████╗░░░███░░░░█████╗░███╗░░██╗██╗░██████╗ | |
| /** ██╔══██╗██╔══██╗░░███░░░██╔══██╗████╗░██║╚█║██╔════╝ | |
| /** ██████╦╝██████╔╝░░███░░░███████║██╔██╗██║░╚╝╚█████╗░ | |
| /** ██╔══██╗██╔══██╗░░███░░░██╔══██║██║╚████║░░░░╚═══██╗ | |
| /** ██████╦╝██║░░██║░░███░░░██║░░██║██║░╚███║░░░██████╔╝ | |
| /** ╚═════╝░╚═╝░░╚═╝░░░░░░░░╚═╝░░╚═╝╚═╝░░╚══╝░░░╚═════╝░ | |
| /** | |
| /** ░█████╗░██████╗░░██████╗██╗██████╗░██╗░█████╗░███╗░░██╗ ░█████╗░░██████╗░██████╗ | |
| /** ██╔══██╗██╔══██╗██╔════╝██║██╔══██╗██║██╔══██╗████╗░██║ ██╔══██╗██╔════╝██╔════╝ | |
| /** ██║░░██║██████╦╝╚█████╗░██║██║░░██║██║███████║██╔██╗██║ ██║░░╚═╝╚█████╗░╚█████╗░ | |
| /** ██║░░██║██╔══██╗░╚═══██╗██║██║░░██║██║██╔══██║██║╚████║ ██║░░██╗░╚═══██╗░╚═══██╗ | |
| /** ╚█████╔╝██████╦╝██████╔╝██║██████╔╝██║██║░░██║██║░╚███║ ╚█████╔╝██████╔╝██████╔╝ | |
| /** ░╚════╝░╚═════╝░╚═════╝░╚═╝╚═════╝░╚═╝╚═╝░░╚═╝╚═╝░░╚══╝ ░╚════╝░╚═════╝░╚═════╝░ | |
| /**==================================================================================*/ | |
| /** ----- 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.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 */ | |
| /** .... 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.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 */ | |
| /** .... 2.14 Tables */ | |
| /** ...... 2.14.1 Banded Table Rows -- https://discord.com/channels/686053708261228577/702656734631821413/777106171948564500 */ | |
| /** .. 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: 'cartograph mono', 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 | |
| { | |
| --font-monospace: 'cartograph mono cf medium', monospace; | |
| --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 | |
| { | |
| color: var(--background-secondary); | |
| } | |
| .graph-view.color-line | |
| { | |
| color: var(--background-modifier-border); | |
| } | |
| */ | |
| 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 | |
| { | |
| 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-code, | |
| .CodeMirror-linenumber, | |
| .cm-formatting | |
| { | |
| font-family: var(--font-monospace) !important; | |
| font-size: 0.9em; | |
| } | |
| .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; | |
| } | |
| .mermaid .note | |
| { | |
| fill: var(--dark3) !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; | |
| } | |
| .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; | |
| } | |
| /* ...... 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; | |
| 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); | |
| } | |
| /* .... 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; | |
| 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>'); | |
| } */ | |
| /** ...... 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 */ | |
| .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.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 */ | |
| .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); | |
| } | |
| /** ...... 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; | |
| } | |
| } | |
| /** ...... 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 */ | |
| /*--------------------------------------------------------------------------------------------------------------------------------------------*/ | |
| /* 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, | |
| .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: 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; | |
| } */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment