├── LICENSE ├── README.md ├── obsidian_looks.png ├── obsidian_search.png ├── obsidian_spoiler.png ├── obsidian_todo.png └── snippets ├── animated-search-highlight.css ├── checkboxes-into-spoilers.css ├── dataview-wordbreak.css ├── fonts.css ├── language-todo.css └── ui-custom.css /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Tamás Deme 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # obsidian-toolkit 2 | Plugins, templates, css snippets and more for obsidian.md 3 | 4 | ## CSS Snippets 5 | 6 | ### Reusable snippets 7 | 8 | #### `checkboxes-into-spoilers.css` 9 | 10 | Add `snippets/checkboxes-into-spoilers.css` to your `/.obsidian/snippets/` folder. 11 | 12 | Adding `cssclass: checkboxes-into-spoilers` into your yaml frontmatter changes the preview mode markdown checkboxes in that note into spoiler tags a'la Discord's `||spoiler||`. Spoilers have to be separated by a different block inbetween. See screenshot below. 13 | 14 | ![screenshot](./obsidian_spoiler.png) 15 | 16 | #### `language-todo.css` 17 | 18 | Changes code blocks with the language `todo` into bright yellow todo blocks that match my personal settings for them in ReSharper. See screenshot below. 19 | 20 | ![screenshot](./obsidian_todo.png) 21 | 22 | #### `animated-search-highlight.css` 23 | 24 | Changes search result highlight backgrounds into an animated one, a'la iOS's slide to unlock effect (except on the background and not on the text). See screenshot below. 25 | 26 | ![screenshot](./obsidian_search.png) 27 | 28 | ### UI / Content theming 29 | 30 | The following CSS snippets are intended to modify the basic obsidian theme. See screenshot below. 31 | 32 | ![screenshot](./obsidian_looks.png) 33 | 34 | #### `ui-custom.css` 35 | 36 | Modifies the Obsidian UI in the following ways: 37 | 38 | - makes the UI fonts lighter, increasing readability and contrast 39 | - adds yellow-ish accents instead of the blue ones 40 | - shortens the flashing animation 41 | - changes the note header to match an H1 block 42 | - changes the note tree header 43 | - adds icons to the tree (with an extra sample on how to add custom icons for custom paths) 44 | 45 | #### `fonts.css` 46 | 47 | Modifies the Obsidian markdown preview in the following ways: 48 | 49 | - changes the headers to Futura BT Medium (assuming it's available on your PC) 50 | - increases header sizes across the board 51 | - changes code block highlighting to match the Visual Studio default dark theme 52 | - changes the inline code blocks to a light blue color 53 | - changes the highlights to a bright black-on-yellow style 54 | -------------------------------------------------------------------------------- /obsidian_looks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tomzorz/obsidian-toolkit/46aacb1dc1f40d0e6b08ef949907bee1b4d678c0/obsidian_looks.png -------------------------------------------------------------------------------- /obsidian_search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tomzorz/obsidian-toolkit/46aacb1dc1f40d0e6b08ef949907bee1b4d678c0/obsidian_search.png -------------------------------------------------------------------------------- /obsidian_spoiler.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tomzorz/obsidian-toolkit/46aacb1dc1f40d0e6b08ef949907bee1b4d678c0/obsidian_spoiler.png -------------------------------------------------------------------------------- /obsidian_todo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tomzorz/obsidian-toolkit/46aacb1dc1f40d0e6b08ef949907bee1b4d678c0/obsidian_todo.png -------------------------------------------------------------------------------- /snippets/animated-search-highlight.css: -------------------------------------------------------------------------------- 1 | .markdown-preview-view .search-highlight div.is-active, .markdown-source-view span.obsidian-search-match-highlight { 2 | background: linear-gradient(90deg, var(--text-highlight-bg) 0%, var(--text-highlight-bg) 40%, var(--text-on-accent) 50%, var(--text-highlight-bg) 60%, var(--text-highlight-bg) 100%); 3 | animation: slide 5s infinite; 4 | animation-timing-function: linear; 5 | background-size: 200px 100%; 6 | } 7 | 8 | 9 | @keyframes slide { 10 | 0% { 11 | background-position: 0% 0; 12 | } 13 | 100%{ 14 | background-position: 400px 0; 15 | } 16 | } -------------------------------------------------------------------------------- /snippets/checkboxes-into-spoilers.css: -------------------------------------------------------------------------------- 1 | .checkboxes-into-spoilers.markdown-preview-view ul.contains-task-list { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | .checkboxes-into-spoilers.markdown-preview-view ul.contains-task-list > li.task-list-item { 7 | text-decoration: none; 8 | color: black; 9 | position: relative; 10 | background: black; 11 | text-indent: 0; 12 | } 13 | 14 | .checkboxes-into-spoilers.markdown-preview-view ul.contains-task-list > li.task-list-item.is-checked { 15 | text-decoration: none; 16 | color: var(--text-normal); 17 | background: rgba(0, 0, 0, 0.3); 18 | } 19 | 20 | .checkboxes-into-spoilers.markdown-preview-view ul.contains-task-list > li.task-list-item > * { 21 | position: absolute; 22 | } 23 | 24 | .checkboxes-into-spoilers.markdown-preview-view ul.contains-task-list > li.task-list-item > a { 25 | position: relative; 26 | color: black; 27 | } 28 | 29 | .checkboxes-into-spoilers.markdown-preview-view ul.contains-task-list > li.task-list-item.is-checked > a { 30 | position: relative; 31 | color: var(--text-accent); 32 | } 33 | 34 | .checkboxes-into-spoilers.markdown-preview-view ul.contains-task-list > li.task-list-item > input.task-list-item-checkbox { 35 | z-index: 4; 36 | height: 100%; 37 | top: -3px; 38 | width: 100%; 39 | cursor: pointer; 40 | opacity: 0; 41 | } -------------------------------------------------------------------------------- /snippets/dataview-wordbreak.css: -------------------------------------------------------------------------------- 1 | body .table-view-table > thead > tr > th { 2 | white-space: pre; 3 | } 4 | .table-view-table > tbody > tr > td { 5 | word-wrap: normal; 6 | word-break: normal; 7 | } 8 | 9 | /* via https://discord.com/channels/686053708261228577/702656734631821413/940691880801341502 */ -------------------------------------------------------------------------------- /snippets/fonts.css: -------------------------------------------------------------------------------- 1 | /* font family override */ 2 | 3 | .markdown-preview-view { 4 | font-family: 'Grandview', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Microsoft YaHei Light", sans-serif; 5 | } 6 | 7 | .markdown-source-view { 8 | font-family: 'Grandview', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Microsoft YaHei Light", sans-serif; 9 | } 10 | 11 | .markdown-source-view.mod-cm6 .cm-scroller { 12 | font-family: 'Grandview', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Microsoft YaHei Light", sans-serif; 13 | } 14 | 15 | /* .markdown-source-view .cm-header { 16 | font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Microsoft YaHei Light", sans-serif; 17 | } */ 18 | 19 | /* headers */ 20 | 21 | .markdown-source-view.mod-cm6 .cm-scroller .cm-header { 22 | font-family: "Futura Md BT", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 23 | line-height: 1.4em; 24 | } 25 | 26 | .markdown-preview-view h1, .markdown-preview-view h2, .markdown-preview-view h3, .markdown-preview-view h4 { 27 | font-family: "Futura Md BT", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 28 | line-height: 1.4em; 29 | } 30 | 31 | .markdown-preview-view h1, .markdown-source-view.mod-cm6 .cm-scroller .cm-header-1 { 32 | font-size: 2.4em; 33 | } 34 | 35 | .markdown-preview-view h2, .markdown-source-view.mod-cm6 .cm-scroller .cm-header-2 { 36 | font-size: 2.0em; 37 | } 38 | 39 | .markdown-preview-view h3, .markdown-source-view.mod-cm6 .cm-scroller .cm-header-3 { 40 | font-size: 1.6em; 41 | } 42 | 43 | .markdown-preview-view h4, .markdown-source-view.mod-cm6 .cm-scroller .cm-header-4 { 44 | font-size: 1.2em; 45 | } 46 | 47 | @media only screen and (min-width: 2280px) { 48 | /* apply 1.2x multiplier to 2560 width */ 49 | 50 | .markdown-preview-view { 51 | font-size: 1.2em; 52 | } 53 | 54 | .markdown-source-view { 55 | font-size: 1.2em; 56 | } 57 | } 58 | 59 | /* code blocks */ 60 | 61 | .markdown-preview-view pre code[class*="language-"], .markdown-source-view.mod-cm6 .cm-scroller .cm-hmd-codeblock { 62 | font-family: Consolas, "Source Code Pro", "Courier New", Courier, monospace; 63 | color: rgb(218, 218, 218); 64 | } 65 | 66 | .markdown-preview-view pre code[class*="language-"] .token.keyword, .markdown-source-view.mod-cm6 .cm-scroller .cm-hmd-codeblock.cm-keyword { 67 | color: rgb(86, 153, 190); 68 | } 69 | 70 | .markdown-preview-view pre code[class*="language-"] .token.operator, .markdown-source-view.mod-cm6 .cm-scroller .cm-hmd-codeblock.cm-operator { 71 | color: rgb(180, 180, 180); 72 | } 73 | 74 | .markdown-preview-view pre code[class*="language-"] .token.function, .markdown-source-view.mod-cm6 .cm-scroller .cm-hmd-codeblock.cm-function { 75 | color: rgb(218, 218, 218); 76 | } 77 | 78 | .markdown-preview-view pre code[class*="language-"] .token.string, .markdown-source-view.mod-cm6 .cm-scroller .cm-hmd-codeblock.cm-string { 79 | color: rgb(214, 157, 133); 80 | } 81 | 82 | .markdown-preview-view pre code[class*="language-"] .token.comment, .markdown-source-view.mod-cm6 .cm-scroller .cm-hmd-codeblock.cm-comment { 83 | color: rgb(87, 166, 74); 84 | } 85 | 86 | .markdown-preview-view pre code[class*="language-"] .token.class-name, .markdown-source-view.mod-cm6 .cm-scroller .cm-hmd-codeblock.cm-class-name { 87 | color: rgb(78, 201, 176); 88 | } 89 | 90 | .markdown-preview-view code, .markdown-source-view.mod-cm6 .cm-scroller .cm-inline-code { 91 | font-family: Consolas, "Source Code Pro", "Courier New", Courier, monospace; 92 | color: cyan; 93 | } 94 | 95 | .markdown-preview-view p code, .markdown-source-view.mod-cm6 .cm-scroller .cm-inline-code { 96 | font-size: 1em; 97 | } 98 | 99 | /* highlights */ 100 | 101 | .markdown-preview-view mark, .markdown-source-view.mod-cm6 .cm-scroller .cm-highlight { 102 | --text-highlight-bg: #ffff00; 103 | --text-normal: #000000; 104 | padding: 2px; 105 | font-weight: 600; 106 | } 107 | 108 | /* non-existent links */ 109 | 110 | .markdown-preview-view a.internal-link.is-unresolved, .markdown-source-view.mod-cm6 .cm-scroller .is-unresolved .cm-hmd-internal-link { 111 | text-decoration: none; 112 | opacity: 1.0; 113 | } 114 | 115 | .markdown-preview-view a.internal-link.is-unresolved::after, .markdown-source-view.mod-cm6 .cm-scroller .is-unresolved .cm-hmd-internal-link::after { 116 | vertical-align: super; 117 | content: '💢'; 118 | font-size: 0.7em; 119 | } 120 | 121 | /* quotes */ 122 | 123 | .markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote:before, .markdown-source-view.mod-cm6 .cm-blockquote-border:before { 124 | border-left: 2px solid white; 125 | } 126 | 127 | .markdown-source-view.mod-cm6 .cm-scroller .HyperMD-quote { 128 | padding: 6px 0; 129 | } -------------------------------------------------------------------------------- /snippets/language-todo.css: -------------------------------------------------------------------------------- 1 | pre.language-todo { 2 | background-color: #ffff00 !important; 3 | border-radius: 0 !important; 4 | display: inline !important; 5 | margin: 6px !important; 6 | padding: 3px 6px !important; 7 | } 8 | 9 | pre.language-todo code.language-todo { 10 | color: black !important; 11 | display: inline !important; 12 | } 13 | 14 | pre.language-todo code.language-todo::before { 15 | content: '// TODO '; 16 | } 17 | 18 | pre.language-todo button 19 | { 20 | display: none !important; 21 | } -------------------------------------------------------------------------------- /snippets/ui-custom.css: -------------------------------------------------------------------------------- 1 | /* special icons for a few tree locations */ 2 | 3 | .workspace-leaf-content[data-type="file-explorer"] .nav-file-title[data-path^="00"] .nav-file-title-content::before { 4 | content: '⚡ '; 5 | } 6 | 7 | .workspace-leaf-content[data-type="file-explorer"] .nav-file-title[data-path^="07"] .nav-file-title-content::before { 8 | content: '⚙ '; 9 | } 10 | 11 | .workspace-leaf-content[data-type="file-explorer"] .nav-file-title[data-path^="08"] .nav-file-title-content::before { 12 | content: '🧱 '; 13 | } 14 | 15 | .workspace-leaf-content[data-type="file-explorer"] .nav-file-title[data-path^="09"] .nav-file-title-content::before { 16 | content: '❓ '; 17 | } 18 | 19 | .workspace-leaf-content[data-type="file-explorer"] .nav-file-title[data-path^="80"] .nav-file-title-content::before { 20 | content: '💡 '; 21 | } 22 | 23 | .workspace-leaf-content[data-type="file-explorer"] .nav-file-title[data-path^="81"] .nav-file-title-content::before { 24 | content: '🧑 '; 25 | } 26 | 27 | .workspace-leaf-content[data-type="file-explorer"] .nav-file-title[data-path^="82"] .nav-file-title-content::before { 28 | content: '📍 '; 29 | } 30 | 31 | /* testing grounds */ 32 | --------------------------------------------------------------------------------