├── assets ├── obsidian.png └── tag_highlight.png ├── dmytro-shulha ├── Folding arrows │ ├── demo.png │ └── Folding arrows.md ├── Center-Tables.md ├── Command palette.md ├── Hyphenation-Justification.md ├── Animation.md ├── Scroll bar.md ├── Text-Box.md ├── Tooltip.md ├── Export to PDF.md ├── URLs.md ├── Panes.md ├── Buttons - stylized.md ├── Vim Static Caret.md ├── Title bar.md ├── Markers.md ├── Edge on left.md ├── Yaml.md ├── Mermaid.md ├── Clutter remove.md ├── Resizable Mermaid.md ├── Status bar.md ├── Graph nodes.md ├── HTML.md ├── Ribbons.md ├── Country flag hashtag.md ├── Popover-Popup.md ├── Lines - horizontal.md ├── Sidebar.md ├── Note title in pane.md ├── Gutter line numbers.md ├── Images.md ├── Progress bar vault launch.md ├── Tag pills.md ├── Table.md ├── Links.md ├── Footnotes.md ├── Outliner pane.md ├── Sidenotes.md ├── Check box.md ├── Block quote inline.md ├── Search.md ├── Settings.md ├── Lists - (un)ordered.md ├── Block quote.md ├── WYSIWYG.md ├── Special effects.md ├── Headers.md └── File explorer - Obsidian.md ├── scottkillen ├── calendar-weekends.md ├── jesuswords.md ├── tabular-numbers.md ├── tables.md ├── calendar-emoji.md ├── calendar-starred.md ├── minimal-tweaks.md ├── labeled-nav.md ├── typography.md └── print.md ├── awesome-obsidian ├── custom-icons-for-specific-folders.md ├── hyphenation-and-justification.md ├── smaller-scrollbar.md ├── image-cards.md ├── bigger-link-popup-preview.md ├── stylish-blockquotes.md ├── autofading-ui.md ├── enlarge-image-on-hover.md ├── bullet-point-relationship-lines.md ├── better-bullet-points-in-edit-mode.md ├── subtler-folding-gutter-arrows.md ├── collapsing-sidebar.md ├── custom-icons-differing-files-and-folders.md ├── tag-pills.md ├── outliner-for-the-outline-and-file-explorer.md ├── custom-icons-for-frontmatter-tags.md ├── nicer-checkboxes.md └── media-grid.md ├── .obsidian └── themes │ └── Doctorfree │ └── manifest.json ├── dustinknopoff ├── read-file.md ├── adding-css.md ├── active-file-path.md ├── status-bar-border.md ├── retrieve-frontmatter.md ├── block-cursor.md ├── pdf-export-tweaks.md ├── lined-heading.md ├── bullet-relations.md ├── enlarge-image-on-hover.md ├── maintain-line-height-footnotes.md ├── bigger-popup-preview.md ├── collapsible-sidebars.md ├── responsive-type.md ├── set-embed-height.md ├── outliner-tree.md ├── folder-file-icons.md ├── stylish-quotes.md ├── vim-mode-line-focus.md ├── custom-hr.md ├── tag-colors.md ├── naked-embeds.md ├── display-tags-aside.md ├── fade-controls.md ├── builtin-icons.md ├── changing-fonts.md ├── collapsible-side-notes.md ├── pane-controls-hover.md ├── list-obsidian-commands.md ├── dataview-table-as-cards.md ├── birthdays.md └── people-nearby.md ├── .gitignore ├── CHANGELOG.md ├── mkrelease.sh ├── LICENSE ├── Graph-view-skin.md └── Default.md /assets/obsidian.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/doctorfree/Obsidian-Snippets/HEAD/assets/obsidian.png -------------------------------------------------------------------------------- /assets/tag_highlight.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/doctorfree/Obsidian-Snippets/HEAD/assets/tag_highlight.png -------------------------------------------------------------------------------- /dmytro-shulha/Folding arrows/demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/doctorfree/Obsidian-Snippets/HEAD/dmytro-shulha/Folding arrows/demo.png -------------------------------------------------------------------------------- /dmytro-shulha/Center-Tables.md: -------------------------------------------------------------------------------- 1 | # Center Tables 2 | 3 | ```css 4 | .t-c table { 5 | margin-left: auto; 6 | margin-right: auto 7 | } 8 | ``` 9 | -------------------------------------------------------------------------------- /scottkillen/calendar-weekends.md: -------------------------------------------------------------------------------- 1 | # calendar-weekends 2 | 3 | ```css 4 | #calendar-container { 5 | --color-background-weekend: #0d0f13 6 | } 7 | ``` 8 | 9 | -------------------------------------------------------------------------------- /awesome-obsidian/custom-icons-for-specific-folders.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/doctorfree/Obsidian-Snippets/HEAD/awesome-obsidian/custom-icons-for-specific-folders.md -------------------------------------------------------------------------------- /dmytro-shulha/Command palette.md: -------------------------------------------------------------------------------- 1 | # Command palette 2 | ```css 3 | /* Command palette: change font color of hotkeys */ 4 | .suggestion-item.is-selected .suggestion-hotkey{ 5 | color: var(--base3) 6 | } 7 | ``` 8 | -------------------------------------------------------------------------------- /.obsidian/themes/Doctorfree/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Doctorfree", 3 | "version": "1.0.2", 4 | "minAppVersion": "0.16.0", 5 | "author": "Dr. Ronald Joe Record", 6 | "authorUrl": "https://github.com/doctorfree", 7 | "isDesktopOnly": false 8 | } 9 | -------------------------------------------------------------------------------- /scottkillen/jesuswords.md: -------------------------------------------------------------------------------- 1 | # jesuswords 2 | 3 | ```css 4 | 5 | .jesuswords, 6 | .jesuswords em { 7 | color: var(--red) !important; 8 | } 9 | 10 | .admonition-content .internal-embed .markdown-embed { 11 | padding: 0; 12 | border-width: 0; 13 | } 14 | ``` 15 | 16 | -------------------------------------------------------------------------------- /dustinknopoff/read-file.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Read File 3 | date: 2021-05-14 4 | 5 | taxonomies: 6 | tags: 7 | - development 8 | kind: 9 | - plugins 10 | extra: 11 | author: Dustin Knopoff 12 | --- 13 | 14 | ```js 15 | vault.read(file) // where file is a `TFile` 16 | ``` -------------------------------------------------------------------------------- /dmytro-shulha/Hyphenation-Justification.md: -------------------------------------------------------------------------------- 1 | # Hyphenation-Justification 2 | ```css 3 | /* _hyphenation and justification */ 4 | /*-------------------------------------*/ 5 | .cm-s-obsidian, .markdown-preview-view { 6 | text-align: justify; 7 | hyphens: auto; 8 | } 9 | ``` 10 | -------------------------------------------------------------------------------- /dmytro-shulha/Animation.md: -------------------------------------------------------------------------------- 1 | # Animations 2 | ```css 3 | /* ===== snappier animations ==== */ 4 | .workspace-tab-header, 5 | .workspace-tab-header-inner, 6 | .workspace-tab-container-before, 7 | .workspace-tab-container-after { 8 | transition: background-color 100ms linear; 9 | } 10 | ``` 11 | -------------------------------------------------------------------------------- /dustinknopoff/adding-css.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Adding CSS Snippets 3 | date: 2021-04-15 4 | 5 | taxonomies: 6 | tags: 7 | - css 8 | - theming 9 | kind: 10 | - styling 11 | extra: 12 | author: foreveryone 13 | --- 14 | 15 | -------------------------------------------------------------------------------- /dustinknopoff/active-file-path.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Active File Path 3 | date: 2021-05-14 4 | 5 | taxonomies: 6 | tags: 7 | - dataview 8 | kind: 9 | - plugins 10 | extra: 11 | author: Dustin Knopoff 12 | --- 13 | 14 | ```js 15 | app.workspace.getActiveFile().path // Can be a `string | null` 16 | ``` -------------------------------------------------------------------------------- /dustinknopoff/status-bar-border.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Status Bar Border 3 | date: 2021-05-21 4 | 5 | taxonomies: 6 | tags: 7 | - css 8 | kind: 9 | - styling 10 | extra: 11 | author: SIRvb 12 | --- 13 | 14 | ```css 15 | .status-bar { 16 | border-left: 1px solid var(--text-normal); 17 | border-top: 1px solid var(--text-normal); 18 | } 19 | ``` -------------------------------------------------------------------------------- /dmytro-shulha/Scroll bar.md: -------------------------------------------------------------------------------- 1 | # Scroll bar 2 | ```css 3 | /* Scrollbar */ 4 | /* change width */ 5 | ::-webkit-scrollbar { 6 | width:15px; 7 | } 8 | 9 | /* no rounded corners - Obsdn-dark-RMX */ 10 | ::-webkit-scrollbar-thumb { 11 | -webkit-border-radius: 0px; 12 | } 13 | 14 | ::-webkit-scrollbar-thumb:active { 15 | -webkit-border-radius: 0px; 16 | } 17 | ``` 18 | -------------------------------------------------------------------------------- /scottkillen/tabular-numbers.md: -------------------------------------------------------------------------------- 1 | # tabular-numbers 2 | 3 | ```css 4 | body, 5 | .app-container{ 6 | -webkit-font-feature-settings: "tnum"; 7 | -moz-font-feature-settings: "tnum"; 8 | font-feature-settings: "tnum"; 9 | -webkit-font-variant-numeric: tabular-nums; 10 | -moz-font-variant-numeric: tabular-nums; 11 | font-variant-numeric: tabular-nums; 12 | } 13 | ``` 14 | 15 | -------------------------------------------------------------------------------- /dustinknopoff/retrieve-frontmatter.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Retrieving a File's Frontmatter 3 | date: 2021-05-15 4 | 5 | taxonomies: 6 | tags: 7 | - development 8 | kind: 9 | - plugins 10 | extra: 11 | author: Christian 12 | --- 13 | 14 | ```js 15 | if (file instanceof TFile) { 16 | this.app.metadataCache.getFileCache(file).frontmatter; // Is [key: string]: any | undefined 17 | } 18 | ``` -------------------------------------------------------------------------------- /dmytro-shulha/Text-Box.md: -------------------------------------------------------------------------------- 1 | # Text Box 2 | 3 | ```css 4 | /* SYNTAX TO USE IN YOUR NOTE: 5 | **Bold**: name
6 | **Children**: Tom, Dick
7 | **Address**: stone road 2 8 | */ 9 | 10 | i#roundedbox { 11 | display: block; 12 | border-radius: 10px; 13 | background-color: var(--background-modifier-border); 14 | padding: 10px; 15 | font-style: normal; 16 | } 17 | ``` 18 | -------------------------------------------------------------------------------- /dmytro-shulha/Tooltip.md: -------------------------------------------------------------------------------- 1 | # Tooltip 2 | ```css 3 | /* Tooltips - from Obuntu theme */ 4 | .tooltip { 5 | background-color: var(--base2); /* PB changed from var(--text-accent) to (123, 108, 214) to blue */ 6 | color: whitesmoke; /* was 46, 41, 56 */ 7 | font-weight: normal; 8 | font-size: 12px; 9 | } 10 | .tooltip .tooltip-arrow { 11 | border-bottom: 5px solid var(--tooltip-bg); 12 | } 13 | ``` 14 | -------------------------------------------------------------------------------- /dustinknopoff/block-cursor.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Block Cursor 3 | date: 2020-06-17 4 | 5 | taxonomies: 6 | tags: 7 | - css 8 | kind: 9 | - styling 10 | extra: 11 | author: rsdimitrov 12 | --- 13 | 14 | ```css 15 | .CodeMirror-cursor { 16 | border-left-width: 0.5em; 17 | opacity: 0.75; 18 | } 19 | ``` 20 | 21 | [Original Forum Post](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/9) -------------------------------------------------------------------------------- /awesome-obsidian/hyphenation-and-justification.md: -------------------------------------------------------------------------------- 1 | # hyphenation-and-justification 2 | 3 | ```css 4 | /* get more snippets at https://github.com/kmaasrud/awesome-obsidian */ 5 | /* author: https://forum.obsidian.md/u/boyd/summary */ 6 | /* source: https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/25 */ 7 | 8 | .cm-s-obsidian, 9 | .markdown-preview-view { 10 | text-align: justify; 11 | hyphens: auto; 12 | } 13 | ``` 14 | 15 | -------------------------------------------------------------------------------- /dmytro-shulha/Export to PDF.md: -------------------------------------------------------------------------------- 1 | # Export to PDF 2 | ```css 3 | /* Line up "native" blockquotes with transcluded ones in PDF */ 4 | @media print{.internal-embed{margin-left:-30px;}} 5 | 6 | /* Page breaks */ 7 | @media print { 8 | h1 { 9 | page-break-before: always; 10 | } 11 | h2, h3, h4, h5, h6 { 12 | page-break-after: avoid; 13 | } 14 | pre, blockquote { 15 | page-break-inside: avoid; 16 | } 17 | } 18 | ``` 19 | -------------------------------------------------------------------------------- /dmytro-shulha/URLs.md: -------------------------------------------------------------------------------- 1 | # URLs 2 | ```css 3 | /* Hide URLs in Edit mode - source death_au @ https://forum.obsidian.md/t/hide-or-truncate-urls-in-editor-using-css/359/2*/ 4 | div:not(.CodeMirror-activeline) > .CodeMirror-line .cm-string.cm-url:not(.cm-formatting) { 5 | font-size: 0; 6 | } 7 | div:not(.CodeMirror-activeline) > .CodeMirror-line .cm-string.cm-url:not(.cm-formatting)::after { 8 | content: '🔗'; 9 | font-size: 1rem; 10 | } 11 | ``` 12 | -------------------------------------------------------------------------------- /awesome-obsidian/smaller-scrollbar.md: -------------------------------------------------------------------------------- 1 | # smaller-scrollbar 2 | 3 | ```css 4 | /* get more snippets at https://github.com/kmaasrud/awesome-obsidian */ 5 | /* author: https://forum.obsidian.md/u/rsdimitrov */ 6 | /* source: https://forum.obsidian.md/t/optimize-obsidian-ui-for-a-more-seamless-experience/155/5 */ 7 | 8 | /* smaller scrollbar */ 9 | .CodeMirror-vscrollbar, 10 | .CodeMirror-hscrollbar, 11 | ::-webkit-scrollbar { 12 | width: 3px; 13 | } 14 | ``` 15 | 16 | -------------------------------------------------------------------------------- /dmytro-shulha/Panes.md: -------------------------------------------------------------------------------- 1 | # Panes 2 | 3 | ```css 4 | /* Masonry */ 5 | div.workspace-split.mod-root > div.workspace-split.mod-vertical { 6 | overflow: auto; 7 | } 8 | div.workspace-split.mod-root div.workspace-split.mod-vertical > div.workspace-leaf { 9 | min-width: 550px; 10 | } 11 | 12 | /* Horizontal Direction */ 13 | div.workspace-split.mod-root > div.workspace-split.mod-horizontal > div.workspace-split.mod-vertical { 14 | overflow: auto; 15 | } 16 | ``` 17 | -------------------------------------------------------------------------------- /dmytro-shulha/Buttons - stylized.md: -------------------------------------------------------------------------------- 1 | # Buttons - stylized 2 | ```css 3 | /* Stylized buttons - from Gabroel */ 4 | button { 5 | border: solid 2px #fff; 6 | font-weight: bold; 7 | font-family: Product Sans; 8 | border-radius: 30px; 9 | font-size: 20px; 10 | color: #fff; 11 | box-shadow: inset 2px 2px 0 #fff, 0 8px 10px -4px rgba(0,0,0,0.4); 12 | cursor: pointer; 13 | transition: all 0.4s ease; 14 | margin-bottom: 5px; 15 | margin-top: 5px; 16 | } 17 | ``` 18 | -------------------------------------------------------------------------------- /scottkillen/tables.md: -------------------------------------------------------------------------------- 1 | # tables 2 | 3 | ```css 4 | .table-lines-bright td, .table-lines-bright table, .table-lines-bright th { 5 | border-color: #AEAEAE !important; 6 | } 7 | 8 | .table-ui-font td, .table-ui-font table, .table-ui-font th { 9 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important; 10 | } 11 | 12 | .markdown-source-view.mod-cm6 th, 13 | .markdown-preview-view th { 14 | font-weight: bold; 15 | color: var(--text-normal); 16 | } 17 | ``` 18 | 19 | -------------------------------------------------------------------------------- /dmytro-shulha/Vim Static Caret.md: -------------------------------------------------------------------------------- 1 | # Vim Static Caret 2 | 3 | Changes the Vim caret from a blinking one to a static one in the editor to reflect a more realistic Vim experience. 4 | 5 | ```css 6 | .cm-fat-cursor .CodeMirror-cursor { 7 | visibility: visible !important; 8 | } 9 | 10 | .cm-animate-fat-cursor { 11 | animation: none; 12 | } 13 | 14 | div.CodeMirror-cursors, div.CodeMirror-dragcursors, div.CodeMirror-secondarycursor { 15 | visibility: visible !important; 16 | } 17 | ``` 18 | -------------------------------------------------------------------------------- /dmytro-shulha/Title bar.md: -------------------------------------------------------------------------------- 1 | # Title bar 2 | ```css 3 | /* Title Bar without text, custom colour */ 4 | .titlebar { 5 | background-color: black; (match to your theme); 6 | border-bottom:1px solid darkslategrey; 7 | } 8 | 9 | .titlebar-text, 10 | .titlebar-button { 11 | display: none; 12 | } 13 | 14 | /* Frameless = no titlebar */ 15 | .is-frameless { 16 | padding-top:0px !important; 17 | } 18 | 19 | /* hide title bar text */ 20 | .titlebar-text { 21 | color: transparent; 22 | } 23 | ``` 24 | -------------------------------------------------------------------------------- /scottkillen/calendar-emoji.md: -------------------------------------------------------------------------------- 1 | # calendar-emoji 2 | 3 | ```css 4 | #calendar-container [data-emoji-tag]::after { 5 | content: attr(data-emoji-tag); 6 | position: absolute; 7 | top: -4px; 8 | right: 4px; 9 | height: 8px; 10 | width: 8px; 11 | } 12 | 13 | .frontmatter-section-tags .tag[href^='#flagged'], 14 | .frontmatter-section-tags .tag[href^='#🎂'], 15 | .frontmatter-section-tags .tag[href^='#🦃'], 16 | .frontmatter-section-tags .tag[href^='#🌴'] { 17 | display: none !important; 18 | } 19 | ``` 20 | 21 | -------------------------------------------------------------------------------- /awesome-obsidian/image-cards.md: -------------------------------------------------------------------------------- 1 | # image-cards 2 | 3 | ```css 4 | /* get more snippets at https://github.com/kmaasrud/awesome-obsidian */ 5 | /* author: https://github.com/TClark1011 */ 6 | /* source: https://github.com/kmaasrud/awesome-obsidian */ 7 | 8 | img { 9 | border-radius: 4px; 10 | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 11 | background-color: var( 12 | --background-secondary 13 | ); /* Background color so PNGs with transparent backgrounds don't look weird */ 14 | } 15 | ``` 16 | 17 | -------------------------------------------------------------------------------- /dmytro-shulha/Markers.md: -------------------------------------------------------------------------------- 1 | # Markers 2 | ```css 3 | /* Mark a line break, trailing space, tab when in Edit mode */ 4 | .cm-trailing-space-new-line, .cm-trailing-space-a, .cm-trailing-space-b, .cm-tab{ 5 | font-size: 0; 6 | } 7 | .cm-trailing-space-a::before, .cm-trailing-space-b::before, .cm-trailing-space-new-line::before, .cm-tab::before{ 8 | content:'·'; 9 | color:var(--text-faint); 10 | font-size: initial; 11 | } 12 | .cm-trailing-space-new-line::before { 13 | content:'↵'; 14 | } 15 | .cm-tab::before { 16 | content:'⟶' 17 | } 18 | ``` 19 | -------------------------------------------------------------------------------- /dmytro-shulha/Edge on left.md: -------------------------------------------------------------------------------- 1 | # Edge on left 2 | ```css 3 | /* In Edit mode, reduce space between the left edge (blue line) and the line numbering, and instead of toggling to "Readable line length" use max-width - thanks to Reggie*/ 4 | /* https://discord.com/channels/686053708261228577/702656734631821413/73219976395672781 */ 5 | .cm-s-obsidian { 6 | max-width: 750px; 7 | text-align: left; 8 | padding-left: 0; 9 | } 10 | 11 | .markdown-source-view { 12 | padding-right: 0px; 13 | } 14 | 15 | .markdown-preview-view { 16 | max-width: 750px; 17 | text-align: left; 18 | } 19 | ``` 20 | -------------------------------------------------------------------------------- /awesome-obsidian/bigger-link-popup-preview.md: -------------------------------------------------------------------------------- 1 | # bigger-link-popup-preview 2 | 3 | ```css 4 | /* get more snippets at https://github.com/kmaasrud/awesome-obsidian */ 5 | /* author: https://github.com/cannibalox & https://github.com/konhi */ 6 | /* source: https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/82 */ 7 | 8 | .popover.hover-popover { 9 | transform: scale(0.8); /* makes the content smaller */ 10 | max-height: 800px; /* was 300 */ 11 | min-height: 100px; 12 | width: 500px; /* was 400 */ 13 | } 14 | 15 | .popover.hover-popover .markdown-embed { 16 | height: 800px; 17 | } 18 | ``` 19 | 20 | -------------------------------------------------------------------------------- /dmytro-shulha/Yaml.md: -------------------------------------------------------------------------------- 1 | # Yaml 2 | ```css 3 | /* remove the yaml metadata from embed */ 4 | 5 | /* Remove embed yaml first separator */ 6 | .markdown-embed-content > hr:first-child { 7 | display: none; 8 | } 9 | 10 | /* Remove embed yaml content */ 11 | .markdown-embed-content > hr:first-child + p { 12 | display: none; 13 | } 14 | 15 | /* Remove embed yaml second separator (if empty) */ 16 | .markdown-embed-content > hr:first-child + hr { 17 | display: none; 18 | } 19 | 20 | /* Remove embed yaml second separator */ 21 | .markdown-embed-content > hr:first-child + p + hr { 22 | display: none; 23 | } 24 | ``` 25 | -------------------------------------------------------------------------------- /awesome-obsidian/stylish-blockquotes.md: -------------------------------------------------------------------------------- 1 | # stylish-blockquotes 2 | 3 | ```css 4 | /* get more snippets at https://github.com/kmaasrud/awesome-obsidian */ 5 | /* author: https://forum.obsidian.md/u/Thery/summary */ 6 | /* source: https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/39 */ 7 | 8 | blockquote:before { 9 | font: 14px/20px italic Times, serif; 10 | content: "“"; 11 | font-size: 3em; 12 | line-height: 0.1em; 13 | vertical-align: -0.4em; 14 | } 15 | blockquote p { 16 | display: inline; 17 | } 18 | 19 | /* Remove blockquote left margin */ 20 | blockquote { 21 | margin-inline-start: 0; 22 | } 23 | ``` 24 | 25 | -------------------------------------------------------------------------------- /dustinknopoff/pdf-export-tweaks.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: PDF Export Tweaks 3 | date: 2021-04-09 4 | taxonomies: 5 | tags: 6 | - css 7 | kind: 8 | - styling 9 | extra: 10 | author: Mara-Li 11 | --- 12 | 13 | ## Page Break on `---` 14 | 15 | ```css 16 | @media print { 17 | hr { 18 | break-after:page; 19 | visibility: hidden; 20 | } 21 | } 22 | ``` 23 | 24 | ## Prevent Headings from being on bottom of Page 25 | 26 | ```css 27 | @media print { 28 | h1:after, h3:after, h2:after, h4:after, h5:after, h6:after{ 29 | content: ""; 30 | display: block; 31 | height: 100px; 32 | margin-bottom: -100px; 33 | } 34 | } 35 | ``` -------------------------------------------------------------------------------- /dustinknopoff/lined-heading.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Lined Heading 3 | date: 2021-01-06 4 | taxonomies: 5 | tags: 6 | - css 7 | kind: 8 | - styling 9 | extra: 10 | author: frvkl 11 | --- 12 | 13 | ![](https://forum.obsidian.md/uploads/default/optimized/2X/3/31bfb6c7a099447639685da0dfac6b5c0d2d714a_2_690x58.png) 14 | 15 | ```css 16 | h1 { 17 | display: flex; 18 | width: 100%; 19 | align-items: center; 20 | } 21 | h1:before, 22 | h1:after{ 23 | content: ''; 24 | background: gray; 25 | height: .1em; 26 | margin: .2em; 27 | flex: 1; 28 | } 29 | ``` 30 | 31 | [Original Forum Post](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/288) -------------------------------------------------------------------------------- /dustinknopoff/bullet-relations.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Bullet Point Relationship Lines 3 | date: 2020-06-16 4 | 5 | taxonomies: 6 | tags: 7 | - css 8 | kind: 9 | - styling 10 | extra: 11 | author: deathau 12 | --- 13 | 14 | ```css 15 | .cm-hmd-list-indent .cm-tab, ul ul { position: relative; } 16 | .cm-hmd-list-indent .cm-tab::before, ul ul::before { 17 | content:''; 18 | border-left: 1px solid rgba(0, 122, 255, 0.25); 19 | position: absolute; 20 | } 21 | .cm-hmd-list-indent .cm-tab::before { left: 0; top: -5px; bottom: -4px; 22 | } 23 | ul ul::before { left: -11px; top: 0; bottom: 0; 24 | } 25 | 26 | ``` 27 | 28 | [Original Forum Post](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/2) -------------------------------------------------------------------------------- /awesome-obsidian/autofading-ui.md: -------------------------------------------------------------------------------- 1 | # autofading-ui 2 | 3 | ```css 4 | /* get more snippets at https://github.com/kmaasrud/awesome-obsidian */ 5 | /* author: https://forum.obsidian.md/u/rsdimitrov */ 6 | /* source: https://forum.obsidian.md/t/optimize-obsidian-ui-for-a-more-seamless-experience/155/5 */ 7 | 8 | /* change opacity to 0 if you want controls to fade completely */ 9 | /* auto fades note header controlls */ 10 | .view-header:not(:hover) .view-actions { 11 | opacity: 0.1; 12 | transition: opacity 0.25s ease-in-out; 13 | } 14 | 15 | /* auto fades status bar items */ 16 | .status-bar:not(:hover) .status-bar-item { 17 | opacity: 0.25; 18 | transition: opacity 0.25s ease-in-out; 19 | } 20 | ``` 21 | 22 | -------------------------------------------------------------------------------- /awesome-obsidian/enlarge-image-on-hover.md: -------------------------------------------------------------------------------- 1 | # enlarge-image-on-hover 2 | 3 | ```css 4 | /* get more snippets at https://github.com/kmaasrud/awesome-obsidian */ 5 | /* author: https://forum.obsidian.md/u/den/summary */ 6 | /* source: https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/29 */ 7 | 8 | .markdown-preview-view img { 9 | display: block; 10 | margin-top: 20pt; 11 | margin-bottom: 20pt; 12 | margin-left: auto; 13 | margin-right: auto; 14 | width: 50%; /* experiment with values */ 15 | transition: transform 0.25s ease; 16 | } 17 | 18 | .markdown-preview-view img:hover { 19 | -webkit-transform: scale(1.8); /* experiment with values */ 20 | transform: scale(2); 21 | } 22 | ``` 23 | 24 | -------------------------------------------------------------------------------- /awesome-obsidian/bullet-point-relationship-lines.md: -------------------------------------------------------------------------------- 1 | # bullet-point-relationship-lines 2 | 3 | ```css 4 | /* get more snippets at https://github.com/kmaasrud/awesome-obsidian */ 5 | /* author: https://github.com/deathau */ 6 | /* source: https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/2 */ 7 | 8 | .cm-hmd-list-indent .cm-tab, 9 | ul ul { 10 | position: relative; 11 | } 12 | .cm-hmd-list-indent .cm-tab::before, 13 | ul ul::before { 14 | content: ""; 15 | border-left: 1px solid rgba(0, 122, 255, 0.25); 16 | position: absolute; 17 | } 18 | .cm-hmd-list-indent .cm-tab::before { 19 | left: 0; 20 | top: -5px; 21 | bottom: -4px; 22 | } 23 | ul ul::before { 24 | left: -11px; 25 | top: 0; 26 | bottom: 0; 27 | } 28 | ``` 29 | 30 | -------------------------------------------------------------------------------- /dustinknopoff/enlarge-image-on-hover.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Enlarge Image on Hover 3 | date: 2020-06-28 4 | 5 | taxonomies: 6 | tags: 7 | - css 8 | kind: 9 | - styling 10 | extra: 11 | author: den 12 | --- 13 | 14 | 15 | ```css 16 | .markdown-preview-view img { 17 | display: block; 18 | margin-top: 20pt; 19 | margin-bottom: 20pt; 20 | margin-left: auto; 21 | margin-right: auto; 22 | width: 50%; /* experiment with values */ 23 | transition:transform 0.25s ease; 24 | } 25 | 26 | .markdown-preview-view img:hover { 27 | -webkit-transform:scale(1.8); /* experiment with values */ 28 | transform:scale(2); 29 | 30 | } 31 | 32 | ``` 33 | 34 | [Original Forum Post](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/29) -------------------------------------------------------------------------------- /dustinknopoff/maintain-line-height-footnotes.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Maintain Line Height - Footnotes 3 | date: 2021-03-04 4 | taxonomies: 5 | tags: 6 | - css 7 | kind: 8 | - styling 9 | extra: 10 | author: phlind 11 | --- 12 | 13 | Before: 14 | ![](https://forum.obsidian.md/uploads/default/original/2X/1/1e2c18708833addaf9abcb6dc06d6391f682eb97.png) 15 | 16 | After: 17 | ![](https://forum.obsidian.md/uploads/default/original/2X/3/3aaff87ddbb77e93983f40bf9e120578749e961f.png) 18 | 19 | ```css 20 | /* Stop footnotes affecting line height */ 21 | sup { 22 | vertical-align: top; 23 | position: relative; 24 | top: -0.3em; 25 | font-size: 0.75em; 26 | } 27 | ``` 28 | 29 | [Original Forum Post](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/342) -------------------------------------------------------------------------------- /awesome-obsidian/better-bullet-points-in-edit-mode.md: -------------------------------------------------------------------------------- 1 | # better-bullet-points-in-edit-mode 2 | 3 | ```css 4 | /* get more snippets at https://github.com/kmaasrud/awesome-obsidian */ 5 | /* author: https://forum.obsidian.md/u/Piotr & https://github.com/konhi */ 6 | /* source: https://forum.obsidian.md/t/clutter-free-edit-mode/6791/30 */ 7 | 8 | div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-list-ul { 9 | color: transparent; 10 | position: relative; 11 | } 12 | 13 | div:not(.CodeMirror-activeline) 14 | > .CodeMirror-line 15 | span.cm-formatting-list-ul:after { 16 | content: "•"; 17 | position: absolute; 18 | top: -6px; 19 | left: -1px; 20 | color: var(--text-normal); 21 | font-family: sans-serif; 22 | font-size: 20px; 23 | } 24 | ``` 25 | 26 | -------------------------------------------------------------------------------- /awesome-obsidian/subtler-folding-gutter-arrows.md: -------------------------------------------------------------------------------- 1 | # subtler-folding-gutter-arrows 2 | 3 | ```css 4 | /* get more snippets at https://github.com/kmaasrud/awesome-obsidian */ 5 | /* author: https://forum.obsidian.md/u/rsdimitrov */ 6 | /* source: https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/10 */ 7 | 8 | /* Make subtler folding gutter arrows */ 9 | .CodeMirror-foldgutter-folded:after, 10 | .CodeMirror-foldgutter-open:after { 11 | opacity: 0.5; 12 | font-size: 60%; 13 | } 14 | 15 | .CodeMirror-foldgutter-folded:hover:after, 16 | .CodeMirror-foldgutter-open:hover:after { 17 | opacity: 1; 18 | } 19 | 20 | .CodeMirror-foldgutter-folded:after { 21 | content: "\25BA"; 22 | } 23 | 24 | .CodeMirror-foldgutter-open:after { 25 | content: "\25BC"; 26 | } 27 | ``` 28 | 29 | -------------------------------------------------------------------------------- /awesome-obsidian/collapsing-sidebar.md: -------------------------------------------------------------------------------- 1 | # collapsing-sidebar 2 | 3 | ```css 4 | /* get more snippets at https://github.com/kmaasrud/awesome-obsidian */ 5 | /* author: https://github.com/kmaasrud */ 6 | /* source: https://github.com/kmaasrud/awesome-obsidian */ 7 | 8 | .workspace { 9 | position: relative; 10 | } 11 | 12 | .side-dock-ribbon.mod-left.is-collapsed, 13 | .side-dock-ribbon.mod-right.is-collapsed { 14 | height: 100%; 15 | } 16 | 17 | .side-dock-ribbon.mod-left.is-collapsed:not(:hover), 18 | .side-dock-ribbon.mod-right.is-collapsed:not(:hover) { 19 | position: absolute; 20 | opacity: 0; 21 | } 22 | 23 | .side-dock-ribbon.mod-left.is-collapsed:not(:hover) { 24 | left: 0; 25 | } 26 | 27 | .side-dock-ribbon.mod-right.is-collapsed:not(:hover) { 28 | right: 0; 29 | } 30 | ``` 31 | 32 | -------------------------------------------------------------------------------- /dmytro-shulha/Folding arrows/Folding arrows.md: -------------------------------------------------------------------------------- 1 | # Folding arrows 2 | 3 | ![demo](demo.png) 4 | 5 | ```css 6 | /* Bigger folding arrows in edit mode, clearer affordance on hover */ 7 | :root { 8 | --foldgutter-width: 1.8rem; 9 | } 10 | 11 | .CodeMirror-foldgutter { 12 | width: var(--foldgutter-width); 13 | } 14 | 15 | .CodeMirror-guttermarker-subtle { 16 | font-size: 0.8em; 17 | text-align: center; 18 | opacity: 0.5; 19 | line-height: var(--foldgutter-width); 20 | height: var(--foldgutter-width); 21 | border-radius: 3px; 22 | } 23 | 24 | .CodeMirror-guttermarker-subtle:hover { 25 | opacity: 1; 26 | background-color: var(--background-secondary-alt); 27 | } 28 | 29 | .CodeMirror-foldgutter-open::after { 30 | content: "\25BC"; 31 | } 32 | 33 | .CodeMirror-foldgutter-folded::after { 34 | content: "\25BA"; 35 | } 36 | ``` -------------------------------------------------------------------------------- /dmytro-shulha/Mermaid.md: -------------------------------------------------------------------------------- 1 | # Mermaid 2 | ``` 3 | ​```mermaid 4 | graph TD; 5 | 6 | %% Class Definitions 7 | %% ================= 8 | 9 | classDef FixFont font-size:11.5px; 10 | 11 | %% Nodes 12 | %% ===== 13 | 14 | A[CREATIVITY]:::FixFont --> B[Combinatorial]:::FixFont; 15 | A[CREATIVITY]:::FixFont --> C[Exploratory]:::FixFont; 16 | A[CREATIVITY]:::FixFont --> D[Transformational]:::FixFont; 17 | B[Combinatorial] --> E[Problem-driven]:::FixFont; 18 | B[Combinatorial] --> F[Similarity-driven]:::FixFont; 19 | B[Combinatorial] --> G[Inspiration-driven]:::FixFont; 20 | 21 | %% Node styles 22 | %% =========== 23 | 24 | style A fill:gold; 25 | style B fill:cyan; 26 | style C fill:cyan; 27 | style D fill:cyan; 28 | style E fill:mediumvioletred; 29 | style F fill:mediumvioletred; 30 | style G fill:mediumvioletred; 31 | 32 | ​``` 33 | ``` 34 | 35 | -------------------------------------------------------------------------------- /dustinknopoff/bigger-popup-preview.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Bigger Popup Preview 3 | date: 2020-08-07 4 | taxonomies: 5 | tags: 6 | - css 7 | kind: 8 | - styling 9 | extra: 10 | author: _ph 11 | --- 12 | 13 | ![](https://forum.obsidian.md/uploads/default/optimized/2X/a/ac341460fac4f2ad5f1a9c823dec78e68954cf05_2_243x299.png) 14 | ![](https://forum.obsidian.md/uploads/default/optimized/2X/0/04055fe997efda1e66868a45930a8fce5b992169_2_243x299.png) 15 | 16 | ```css 17 | /*============bigger link popup preview ================*/ 18 | .popover.hover-popover { 19 | transform: scale(0.8); /* makes the content smaller */ 20 | max-height: 800px; /* was 300 */ 21 | min-height: 100px; 22 | width: 500px; /* was 400 */ 23 | } 24 | ``` 25 | 26 | [Original Forum Post](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/82) -------------------------------------------------------------------------------- /awesome-obsidian/custom-icons-differing-files-and-folders.md: -------------------------------------------------------------------------------- 1 | # custom-icons-differing-files-and-folders 2 | 3 | ```css 4 | /* get more snippets at https://github.com/kmaasrud/awesome-obsidian */ 5 | /* author: https://github.com/deathau */ 6 | /* source: https://discord.com/channels/686053708261228577/702656734631821413/755293685046050896 */ 7 | 8 | /* Emoji */ 9 | /*.nav-file-title-content::before { content: '🗒 '; } 10 | .nav-folder-title-content::before { content: '📂 '; }*/ 11 | 12 | /* Flat font */ 13 | /* Requires: https://icomoon.io/#icons-icomoon/liga-font */ 14 | .nav-folder-children .nav-file-title-content:first-child::before { 15 | content: "924 "; 16 | font-family: "IcoMoon-Free"; 17 | } 18 | .nav-folder-children .nav-folder-title-content::before { 19 | content: "930 "; 20 | font-family: "IcoMoon-Free"; 21 | } 22 | ``` 23 | 24 | -------------------------------------------------------------------------------- /dustinknopoff/collapsible-sidebars.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Collapsible Sidebars 3 | date: 2020-06-16 4 | 5 | taxonomies: 6 | tags: 7 | - css 8 | kind: 9 | - styling 10 | extra: 11 | author: cmc2397 12 | --- 13 | 14 | ```css 15 | .workspace-ribbon.is-collapsed:not(:hover) .workspace-ribbon-collapse-btn, 16 | .workspace-ribbon.is-collapsed:not(:hover) .side-dock-actions, 17 | .workspace-ribbon.is-collapsed:not(:hover) .side-dock-settings {display:none;} 18 | .workspace-ribbon.is-collapsed:not(:hover) {width: 0;} 19 | .workspace-split.mod-left-split[style="width: 0px;"] {margin-left: 0;} 20 | .workspace-split.mod-right-split[style="width: 0px;"] {margin-right: 0;} 21 | .workspace-ribbon {transition: none} 22 | ``` 23 | 24 | Thanks to @mrjackphil and @MooddooM 25 | 26 | [Original Forum Post](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/3) -------------------------------------------------------------------------------- /dustinknopoff/responsive-type.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Responsive Type 3 | date: 2020-12-16 4 | taxonomies: 5 | tags: 6 | - css 7 | kind: 8 | - styling 9 | extra: 10 | author: Shamama 11 | --- 12 | 13 | ![](https://forum.obsidian.md/uploads/default/optimized/2X/c/c4dc735907db26f6745fc3435e70de42405af4ed_2_690x387.png) 14 | 15 | ```css 16 | :root 17 | { 18 | --font-size-normal: clamp(12px, 5vh, 20px); 19 | --font-size-code: clamp(12px, 5vh, 18px); 20 | --font-size-side-dock: clamp(12px, 5vh, 16px); 21 | --font-size-side-dock-title: clamp(12px, 5vh, 18px); 22 | --font-size-blockquote: clamp(16px, 5vh, 22px); 23 | --font-size-status-bar: clamp(16px, 5vh, 16px); 24 | --font-small: clamp(16px, 5vh, 18px); 25 | --font-medium: clamp(16px, 5vh, 21px); 26 | } 27 | ``` 28 | 29 | [Original Forum Post](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/258) -------------------------------------------------------------------------------- /dustinknopoff/set-embed-height.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Variable Embed Heights 3 | date: 2020-06-21 4 | 5 | taxonomies: 6 | tags: 7 | - css 8 | kind: 9 | - styling 10 | extra: 11 | author: foreveryone 12 | --- 13 | This snippet will make embeds sit within a text without scrollbars by default. If a link is given the alias `[[short|document]]]` or `![[tall|document]]` it will be set to a limited height and given scroll bars if it exceeds the maximum height. 14 | ```css 15 | .markdown-preview-view .markdown-embed-content { 16 | max-height: unset; 17 | } 18 | 19 | .internal-embed.is-loaded[alt="short"] { 20 | max-height: 45vh !important; 21 | overflow: auto !important; 22 | padding-right: 0px!important; 23 | } 24 | 25 | .internal-embed.is-loaded[alt="tall"] { 26 | max-height: 80vh !important; 27 | overflow: auto !important; 28 | } 29 | ``` 30 | -------------------------------------------------------------------------------- /dustinknopoff/outliner-tree.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Outliner for Outliners 3 | date: 2020-12-20 4 | taxonomies: 5 | tags: 6 | - css 7 | kind: 8 | - styling 9 | extra: 10 | author: Shamama 11 | --- 12 | 13 | ```css 14 | 15 | .collapsible-item-collapse { 16 | padding: 2px 15px 2px 15px; 17 | left:1.5px; 18 | } 19 | div.collapsible-item-inner{ 20 | position:relative; 21 | padding-left: 15px; 22 | 23 | } 24 | .outline .collapsible-item-children { 25 | margin-left: 20px; 26 | border-left: 1px solid rgba(118,158,165,0.2); 27 | border-radius: 4px; 28 | transition:all 0.5s ease-in-out; 29 | } 30 | .outline .collapsible-item-children:hover { 31 | border-left-color: rgba(118,158,165,0.4); 32 | } 33 | ``` 34 | 35 | ![](https://forum.obsidian.md/uploads/default/original/2X/6/6d4e69dc5fea6f4ac779c8a6a559bf33e6a90146.png) -------------------------------------------------------------------------------- /dmytro-shulha/Clutter remove.md: -------------------------------------------------------------------------------- 1 | # Clutter remove 2 | ```css 3 | /* Remove markdown clutter */ 4 | div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting, 5 | div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-string.cm-url, 6 | div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-formatting-link 7 | { display: none; } 8 | 9 | /* except list markers */ span.cm-formatting-list, 10 | /*code block backticks */ span.cm-formatting-code-block.cm-hmd-codeblock, 11 | /* optionally header hashes */ span.cm-formatting-header 12 | { display: inline !important; } 13 | 14 | /* and task checkboxes */ 15 | span.cm-formatting-task { display: inline !important; font-family: monospace; } 16 | 17 | /* highlight == markdown not visible anymore if not active line */ 18 | div:not(.CodeMirror-activeline) > .CodeMirror-line .cm-formatting-highlight.cm-highlight { 19 | font-size: 0; 20 | } 21 | ``` 22 | -------------------------------------------------------------------------------- /dmytro-shulha/Resizable Mermaid.md: -------------------------------------------------------------------------------- 1 | # Resizable Mermaid Diagrams 2 | [Here is the original FR: Ability to resize and align mermaid diagrams](https://forum.obsidian.md/t/ability-to-resize-and-align-mermaid-diagrams/7019/22) 3 | 4 | ```css 5 | svg[id^="m"][width][height][viewBox] { 6 | max-width: 95%; 7 | max-height: 95%; 8 | } 9 | 10 | div.mermaid { 11 | margin-left: 0 !important; 12 | text-align: center; 13 | resize:both; 14 | overflow:auto; 15 | margin-bottom: 2px; 16 | position:relative; 17 | max-height: 600px; 18 | max-width: 100%; 19 | } 20 | 21 | div.mermaid::after { 22 | content:''; 23 | display:block; 24 | width:10px; 25 | height:10px; 26 | background-color:yellowgreen; 27 | position:absolute; 28 | right:0; 29 | bottom:0; 30 | } 31 | ``` 32 | 33 | ![](https://raw.githubusercontent.com/tctco/ImgHosting/master/mermaidResize.gif) 34 | -------------------------------------------------------------------------------- /dmytro-shulha/Status bar.md: -------------------------------------------------------------------------------- 1 | # Status bar 2 | ```css 3 | /* Remove status bar */ 4 | .status-bar {display: none;} 5 | 6 | /* Fading Status Bar and Note Controls (from MAGMA theme) */ 7 | .status-bar:hover .status-bar-item { 8 | opacity: 1; 9 | transition: opacity .1s ease-in-out; 10 | } 11 | .status-bar:not(:hover) .status-bar-item { 12 | opacity: 0.25; 13 | transition: opacity .25s ease-in-out; 14 | } 15 | .view-header:hover .view-actions { 16 | opacity: 1; 17 | transition: opacity .1s ease-in-out; 18 | } 19 | .view-header:not(:hover) .view-actions { 20 | opacity: 0.25; 21 | transition: opacity .25s ease-in-out; 22 | } 23 | 24 | /* Flat status bar */ 25 | .status-bar { 26 | background-color: var(--background-secondary-alt); 27 | border-top: 0px solid var(--background-modifier-border); 28 | color: var(--text-accent); 29 | font-family: "Roboto"; 30 | } 31 | ``` 32 | -------------------------------------------------------------------------------- /dustinknopoff/folder-file-icons.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Folder and File Icons in Explorer 3 | date: 2020-09-15 4 | taxonomies: 5 | tags: 6 | - css 7 | kind: 8 | - styling 9 | extra: 10 | author: deathau 11 | --- 12 | 13 | ```css 14 | .nav-folder-children .nav-file-title-content:first-child::before { content: '🗒 '; } 15 | .nav-folder-children .nav-folder-title-content::before { content: '📂 '; } 16 | ``` 17 | 18 | ## Using Wingdings or [IcoMoon](https://icomoon.io/#icons-icomoon/liga-font) 19 | 20 | ```css 21 | .nav-folder-children .nav-file-title-content:first-child::before { 22 | content: "\e924 "; 23 | font-family: 'IcoMoon-Free'; 24 | } 25 | .nav-folder-children .nav-folder-title-content::before { 26 | content: '\e930 '; 27 | font-family: 'IcoMoon-Free'; 28 | } 29 | ``` 30 | 31 | ![](https://forum.obsidian.md/uploads/default/original/2X/7/79c75764a0400ceff97f36e518c4002b2d2a764a.png) -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .obsidian/* 2 | !.obsidian/themes 3 | .obsidian/themes/* 4 | !.obsidian/themes/Doctorfree 5 | .obsidian/themes/Doctorfree/* 6 | !.obsidian/themes/Doctorfree/manifest.json 7 | !.obsidian/themes/Doctorfree/theme.css 8 | 9 | .index 10 | tmp/* 11 | 12 | # ========================= 13 | # Operating System Files 14 | # ========================= 15 | 16 | # OSX 17 | # ========================= 18 | 19 | .DS_Store 20 | .AppleDouble 21 | .LSOverride 22 | 23 | # Thumbnails 24 | ._* 25 | 26 | # Files that might appear in the root of a volume 27 | .DocumentRevisions-V100 28 | .fseventsd 29 | .Spotlight-V100 30 | .TemporaryItems 31 | .Trashes 32 | .VolumeIcon.icns 33 | 34 | # Directories potentially created on remote AFP share 35 | .AppleDB 36 | .AppleDesktop 37 | Network Trash Folder 38 | Temporary Items 39 | .apdisk 40 | 41 | # vim files 42 | .*.sw[a-z] 43 | *.un~ 44 | Session.vim 45 | .netrwhist 46 | 47 | #do not ignore .github directory 48 | !.github 49 | -------------------------------------------------------------------------------- /dmytro-shulha/Graph nodes.md: -------------------------------------------------------------------------------- 1 | # Graph nodes 2 | ```css 3 | /* to style the new nodes in the 0.9.1+ */ 4 | .theme-light .graph-view.color-arrow { 5 | color: #5cc863; 6 | } 7 | 8 | .theme-light .graph-view.color-fill-tag { 9 | color: #440154; 10 | } 11 | 12 | .theme-light .graph-view.color-fill-attachment { 13 | color: #277f8e; 14 | } 15 | 16 | .theme-light .graph-view.color-fill-unresolved { 17 | color: #fde725; 18 | } 19 | ``` 20 | 21 | Might work as well: 22 | ```css 23 | .graph-view.color-fill { 24 | color: var(--background-secondary); 25 | } 26 | .graph-view.color-circle { 27 | color: var(--text-normal); 28 | } 29 | .graph-view.color-line { 30 | color: var(--background-modifier-border); 31 | } 32 | .graph-view.color-text { 33 | color: var(--text-normal); 34 | } 35 | .graph-view.color-fill-highlight { 36 | color: var(--interactive-accent); 37 | } 38 | .graph-view.color-line-highlight { 39 | color: rgb(var(--interactive-accent-rgb)); 40 | } 41 | ``` -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## Version 1.0.1 Release 1 4 | 5 | * Use clearer example snippet and vault names 6 | * Rename snippet folders 7 | * Fixes to Special effects and Outliner pane snippets 8 | * Add Obsidian logo 9 | * Add snippets from Dustin Knopoff 10 | * Add instructions for using snippets 11 | * Add obsidian-snippets from Scott Killen 12 | * Add snippets from awesome-obsidian, reorganize snippets 13 | * Add new snippets and additions/corrections from Dmytro Shulha 14 | * Rearrange table of snippets 15 | * Update Graph View Skin 16 | * Add screenshot to assets 17 | * Fix CSS code blocks in Font, Headers, Outliner pane, and Sentences 18 | 19 | ## Version 1.0.0 Release 1 20 | 21 | * Add usage instructions, use table rather than list for included snippets 22 | * Add link to Folding arrows 23 | * Try using unicode for spaces in links 24 | * Add snippets from https://github.com/ericaxu/obsidian-css-snippets 25 | * Initialize repository with a few snippets 26 | * Initial commit 27 | -------------------------------------------------------------------------------- /awesome-obsidian/tag-pills.md: -------------------------------------------------------------------------------- 1 | # tag-pills 2 | 3 | ```css 4 | /* get more snippets at https://github.com/kmaasrud/awesome-obsidian */ 5 | /* author: https://forum.obsidian.md/u/uzerper */ 6 | /* source: https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/72 */ 7 | 8 | .tag:not(.token) { 9 | background-color: var(--text-accent); 10 | border: none; 11 | color: white; 12 | font-size: 11px; 13 | padding: 1px 8px; 14 | text-align: center; 15 | text-decoration: none; 16 | display: inline-block; 17 | margin: 0px 0px; 18 | cursor: pointer; 19 | border-radius: 14px; 20 | } 21 | .tag:not(.token):hover { 22 | color: white; 23 | background-color: var(--text-accent-hover); 24 | } 25 | .tag[href^="#obsidian"] { 26 | background-color: #4d3ca6; 27 | } 28 | .tag[href^="#important"] { 29 | background-color: red; 30 | } 31 | .tag[href^="#complete"] { 32 | background-color: green; 33 | } 34 | .tag[href^="#inprogress"] { 35 | background-color: orange; 36 | } 37 | ``` 38 | 39 | -------------------------------------------------------------------------------- /dustinknopoff/stylish-quotes.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Stylish Blockquotes 3 | date: 2020-07-04 4 | taxonomies: 5 | tags: 6 | - css 7 | kind: 8 | - styling 9 | extra: 10 | author: Thery 11 | --- 12 | 13 | ## Add quotation mark before quote 14 | 15 | ![](https://forum.obsidian.md/uploads/default/original/2X/a/a64ba8a02dea06dc2fa741f167d7a18b2b52db07.png) 16 | 17 | ```css 18 | /* Add quotation character before quote */ 19 | blockquote:before { 20 | font: 14px/20px italic Times, serif; 21 | content: "“"; 22 | font-size: 3em; 23 | line-height: 0.1em; 24 | vertical-align: -0.4em; 25 | } 26 | blockquote p { display: inline; } 27 | ``` 28 | 29 | ## Remove left margin 30 | 31 | ![](https://forum.obsidian.md/uploads/default/original/2X/c/ca4834dc2741c16320ec45873105c3d3804fb2a1.png) 32 | 33 | ```css 34 | /* Remove blockquote left margin */ 35 | blockquote { 36 | margin-inline-start: 0; 37 | } 38 | ``` 39 | 40 | [Original Forum Post](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/39) -------------------------------------------------------------------------------- /dmytro-shulha/HTML.md: -------------------------------------------------------------------------------- 1 | # HTML 2 | ```css 3 | /* HTML in editor */ 4 | /* html tags in editor */ 5 | .cm-s-obsidian span.cm-tag { 6 | color: var(--base4); 7 | } 8 | 9 | /* html comments in editor */ 10 | .cm-s-obsidian span.cm-comment { 11 | color: var(--base4); 12 | } 13 | 14 | /* Disclosure widget for a block ot text */ 15 | /* Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#Providing_a_summary */ 16 | details { 17 | font: 16px "Open Sans", Calibri, sans-serif; 18 | width: 620px; 19 | } 20 | 21 | details > summary { 22 | padding: 2px 6px; 23 | width: 15em; 24 | background-color: #ddd; 25 | border: none; 26 | box-shadow: 3px 3px 4px black; 27 | cursor: pointer; 28 | } 29 | 30 | details > p { 31 | border-radius: 0 0 10px 10px; 32 | background-color: #ddd; 33 | padding: 2px 6px; 34 | margin: 0; 35 | box-shadow: 3px 3px 4px black; 36 | } 37 | 38 | /* Note: to include a clickable external link in the block, use 39 | /* `Some text` */ 40 | ``` 41 | -------------------------------------------------------------------------------- /dustinknopoff/vim-mode-line-focus.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Vim Mode Line Focus 3 | date: 2020-06-18 4 | 5 | taxonomies: 6 | tags: 7 | - css 8 | kind: 9 | - styling 10 | extra: 11 | author: MooddooM 12 | --- 13 | 14 | ![](https://forum.obsidian.md/uploads/default/original/2X/7/7f61432e9579a1d9086d1caad3aabfd05c1f0abf.gif) 15 | 16 | ```css 17 | /* Cursor color in normal vim mode and opacity */ 18 | .cm-fat-cursor .CodeMirror-cursor, .cm-animate-fat-cursor { 19 | width: 0.5em; 20 | background: #d65d0e; 21 | opacity: 60% !important; 22 | } 23 | 24 | /*an active line highlight in vim normal mode */ 25 | .cm-fat-cursor .CodeMirror-activeline .CodeMirror-linebackground{ 26 | background-color: rgba(89, 75, 95, 0.99) !important; 27 | } 28 | 29 | /*if you want the highlight to present in both normal and insert mode of vim*/ 30 | .CodeMirror-activeline .CodeMirror-linebackground{ 31 | background-color: rgba(89, 75, 95, 0.99) !important; 32 | } 33 | ``` 34 | 35 | [Original Forum Post](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/17) -------------------------------------------------------------------------------- /dustinknopoff/custom-hr.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Custom Symbolic HR Line 3 | date: 2020-10-31 4 | taxonomies: 5 | tags: 6 | - css 7 | kind: 8 | - styling 9 | extra: 10 | author: TriDiamond 11 | --- 12 | 13 | ![](https://forum.obsidian.md/uploads/default/optimized/2X/3/33b0938f405dde20178572fc09afde697b8f38f7_2_373x500.png) 14 | 15 | ```css 16 | .markdown-preview-view hr { 17 | margin-block-start: 4em; 18 | margin-block-end: 4em; 19 | border: none; 20 | height: 1px; 21 | background-image: linear-gradient(to right, var(--background-primary), var(--text-accent), var(--background-primary)); 22 | } 23 | 24 | .markdown-preview-view hr::after { 25 | content: '§'; 26 | display: inline-block; 27 | position: absolute; 28 | left: 50%; 29 | transform: translate(-50%, -50%) rotate(60deg); 30 | transform-origin: 50% 50%; 31 | padding: 0.5rem; 32 | color: var(--text-sub-accent); 33 | background-color: var(--background-primary); 34 | } 35 | ``` 36 | 37 | [Original Forum Post](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/223) -------------------------------------------------------------------------------- /mkrelease.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | VERSION="1.0.1" 4 | RELEASE=1 5 | 6 | usage() { 7 | printf "\nUsage: mkrelease [-c] [-d] [-p] [-u]" 8 | printf "\nWhere:" 9 | printf "\n\t-c indicates clean first" 10 | printf "\n\t-d indicates create draft release" 11 | printf "\n\t-p indicates skip package creation step" 12 | printf "\n\t-u displays this usage message and exits\n" 13 | exit 1 14 | } 15 | 16 | CLEAN= 17 | DRAFT= 18 | PACKAGE=1 19 | while getopts "cdpu" flag; do 20 | case $flag in 21 | c) 22 | CLEAN=1 23 | ;; 24 | d) 25 | DRAFT="--draft" 26 | ;; 27 | p) 28 | PACKAGE= 29 | ;; 30 | u) 31 | usage 32 | ;; 33 | esac 34 | done 35 | shift $(( OPTIND - 1 )) 36 | 37 | ANNO="Obsidian CSS Snippets, Version ${VERSION} Release ${RELEASE}" 38 | 39 | gh release create v${VERSION}r${RELEASE} ${DRAFT} \ 40 | --title "${ANNO}" \ 41 | --generate-notes 42 | 43 | git fetch --tags origin 44 | -------------------------------------------------------------------------------- /dmytro-shulha/Ribbons.md: -------------------------------------------------------------------------------- 1 | # Ribbons 2 | ```css 3 | /* Ribbons */ 4 | /* collapse buttons: change color */ 5 | .workspace-ribbon-collapse-btn { 6 | color: var(--base2); 7 | } 8 | 9 | /* on left change background color */ 10 | .workspace-ribbon.mod-left { 11 | border-color: transparent; 12 | width: 35px; 13 | background: var(--base3); 14 | } 15 | 16 | /* on left icons: change color */ 17 | .side-dock-ribbon-tab, .side-dock-ribbon-action { 18 | color: var(--base2); 19 | text-align: center; 20 | font-size: 18px; 21 | opacity: 0.9; 22 | } 23 | 24 | .side-dock-ribbon-tab, .side-dock-ribbon-action:hover { 25 | color: var(--base5); 26 | text-align: center; 27 | } 28 | 29 | /* on right change background color */ 30 | .workspace-ribbon.mod-right { 31 | border-color: transparent; 32 | width: 30px; 33 | background: var(--base3); 34 | } 35 | 36 | /* hide Preview/Edit icon, only show on hover */ 37 | .view-action[aria-label*="Preview"], .view-action[aria-label*="Edit"] { 38 | opacity: 0; 39 | } 40 | 41 | .view-action:hover { 42 | opacity: 1; 43 | } 44 | ``` 45 | -------------------------------------------------------------------------------- /awesome-obsidian/outliner-for-the-outline-and-file-explorer.md: -------------------------------------------------------------------------------- 1 | # outliner-for-the-outline-and-file-explorer 2 | 3 | ```css 4 | /* get more snippets at https://github.com/kmaasrud/awesome-obsidian */ 5 | /* author: https://forum.obsidian.md/u/Shamama & https://forum.obsidian.md/u/wonton/summary & https://github.com/konhi */ 6 | /* source: https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/112 */ 7 | 8 | .outline .tree-item-children { 9 | margin-left: 20px; 10 | border-left: 1px solid var(--background-modifier-border); 11 | border-radius: 4px; 12 | transition: all 0.5s ease-in-out; 13 | } 14 | .outline .tree-item-children:hover { 15 | margin:0 !important; 16 | border-left-color: var(--background-modifier-border); 17 | } 18 | .nav-folder-children .nav-folder-children { 19 | margin-left: 20px; 20 | padding-left: 0; 21 | border-left: 1px solid var(--background-modifier-border); 22 | border-radius: 4px; 23 | transition: all 0.5s ease-in-out; 24 | } 25 | .nav-folder-children .nav-folder-children:hover { 26 | margin:0 !important; 27 | border-left-color: var(--background-modifier-border); 28 | } 29 | ``` 30 | 31 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Ronald Record 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 | -------------------------------------------------------------------------------- /dmytro-shulha/Country flag hashtag.md: -------------------------------------------------------------------------------- 1 | # Country flag hashtag 2 | ```css 3 | /* Country flag when using hashtag of ISO language code - original */ 4 | /* Source: https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/33?u=klaas */ 5 | .tag[href="#eng"]{ 6 | 7 | color: black; 8 | background: #b5fbac; 9 | text-shadow: 20px 20px 60px #9ad592, 10 | -20px -20px 60px #d0ffc6; 11 | } 12 | 13 | .tag[href="#eng"]:before { 14 | color: white; 15 | content: "🇺🇸"; 16 | padding: -20pt -20pt 15pt 5pt; 17 | margin: 0pt; 18 | font-size: 15pt; 19 | } 20 | 21 | .tag[href="#eng"]:hover { 22 | 23 | border-radius: 14px; 24 | background: #b5fbac; 25 | box-shadow: 20px 20px 60px #9ad592, 26 | -20px -20px 60px #d0ffc6; 27 | } 28 | 29 | /* Used by PB in Solarized */ 30 | .tag[href="#nl"]{ 31 | color: black; 32 | background: var(--base3); 33 | } 34 | 35 | .tag[href="#nl"]:before { 36 | color: black; 37 | content: "🇳🇱"; 38 | padding: -20pt -20pt 15pt 5pt; 39 | margin: 0pt; 40 | font-size: 15pt; 41 | } 42 | 43 | .tag[href="#nl"]:hover { 44 | border-radius: 14px; 45 | background: var(--base3); 46 | } 47 | ``` 48 | -------------------------------------------------------------------------------- /dustinknopoff/tag-colors.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Tag Pills 3 | date: 2020-06-17 4 | 5 | taxonomies: 6 | tags: 7 | - css 8 | kind: 9 | - styling 10 | extra: 11 | author: ph_ 12 | --- 13 | 14 | Insert your tag in place of `#obsidian`, `#important`, etc. to set the color specific to a tag. 15 | 16 | ![](https://forum.obsidian.md/uploads/default/original/2X/3/35df313dfde8fdbae555d251831bbc4ae8b51016.png) 17 | 18 | ```css 19 | tag { 20 | background-color: var(--text-accent); 21 | border: none; 22 | color: white; 23 | font-size: 11px; 24 | padding: 1px 8px; 25 | text-align: center; 26 | text-decoration: none; 27 | display: inline-block; 28 | margin: 0px 0px; 29 | cursor: pointer; 30 | border-radius: 14px; 31 | } 32 | .tag:hover { 33 | color: white; 34 | background-color: var(--text-accent-hover); 35 | } 36 | .tag[href^="#obsidian"] { 37 | background-color: #4d3ca6; 38 | } 39 | .tag[href^="#important"] { 40 | background-color: red; 41 | } 42 | .tag[href^="#complete"] { 43 | background-color: green; 44 | } 45 | .tag[href^="#inprogress"] { 46 | background-color: orange; 47 | } 48 | ``` 49 | 50 | [Original Forum Post](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/13) -------------------------------------------------------------------------------- /dustinknopoff/naked-embeds.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Naked Embeds 3 | date: 2020-06-18 4 | 5 | taxonomies: 6 | tags: 7 | - css 8 | kind: 9 | - styling 10 | extra: 11 | author: deathau 12 | --- 13 | 14 | Embeds the contents of linked notes into the preview 15 | 16 | ![](https://forum.obsidian.md/uploads/default/optimized/2X/d/d33d0de07d58894ab485b37c9806ff88a447fb6a_2_690x136.png) 17 | 18 | ```css 19 | /* Naked Embeds */ 20 | .markdown-embed-title { display: none; } 21 | .markdown-preview-view .markdown-embed-content>:first-child { margin-top: 0;} 22 | .markdown-preview-view .markdown-embed-content>:last-child { margin-bottom: 0;} 23 | 24 | /*remove the following two line, you will get border and scroll*/ 25 | .markdown-preview-view .markdown-embed { border:none; padding:0; margin:0; } 26 | .markdown-preview-view .markdown-embed-content { 27 | max-height: unset; 28 | background-color: var(--background-secondary); /*define different bg color*/ 29 | } 30 | 31 | /* the link on the top right corner*/ 32 | .markdown-embed-link { 33 | color: var(--text-faint) !important; 34 | } 35 | 36 | .markdown-embed-link:hover { 37 | color: var(--text-accent) !important; 38 | } 39 | ``` 40 | 41 | [Original Forum Post](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/19) -------------------------------------------------------------------------------- /dustinknopoff/display-tags-aside.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Display Tags Aside 3 | date: 2021-02-26 4 | taxonomies: 5 | tags: 6 | - css 7 | kind: 8 | - styling 9 | extra: 10 | author: cmjn 11 | --- 12 | 13 | ![](https://forum.obsidian.md/uploads/default/optimized/2X/d/d12f002545f09ee9486ecdaa7879912be533f9b9_2_690x98.jpeg) 14 | ![](https://forum.obsidian.md/uploads/default/optimized/2X/1/1cf2b3239a24f3b0c3176580c1d88fc0b4f43fec_2_690x97.jpeg) 15 | 16 | ```css 17 | p > a.tag { 18 | font-size: 0; 19 | width: 0; 20 | padding: 0; 21 | margin: 0; 22 | background: none; 23 | text-decoration: none; 24 | border: none; 25 | } 26 | p > a.tag::before { 27 | content: '#'; 28 | font-size: 16px; 29 | } 30 | p > a.tag::after { 31 | content: attr(href); 32 | float: right; 33 | min-width: 3ch; 34 | max-width: 25%; 35 | margin-right: calc(-25% - 1.5em); 36 | margin-left: calc(-25% - 1.5em); 37 | position: relative; 38 | clear: right; 39 | white-space: nowrap; 40 | text-overflow: ellipsis; 41 | overflow: hidden; 42 | font-size: 16px; 43 | } 44 | 45 | p > a.tag:hover::after { 46 | max-width: fit-content !important; 47 | } 48 | ``` 49 | 50 | [Original Forum Post](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/327) -------------------------------------------------------------------------------- /scottkillen/calendar-starred.md: -------------------------------------------------------------------------------- 1 | # calendar-starred 2 | 3 | ```css 4 | #calendar-container [data-tags~="flagged"] { 5 | color: var(--text-error) 6 | } 7 | 8 | #calendar-container .today[data-tags~="flagged"] { 9 | font-weight: bold !important 10 | } 11 | 12 | #calendar-container [data-tags~="flagged"]::after { 13 | content: url('data:image/svg+xml; utf8, '); 14 | position: absolute; 15 | top: -4px; 16 | right: 4px; 17 | height: 8px; 18 | width: 8px; 19 | } 20 | 21 | ``` 22 | 23 | -------------------------------------------------------------------------------- /dmytro-shulha/Popover-Popup.md: -------------------------------------------------------------------------------- 1 | # Popover-Popup 2 | ```css 3 | /*============bigger link popup preview ================*/ 4 | .popover.hover-popover { 5 | position: absolute; 6 | z-index: var(--layer-popover); 7 | transform: scale(0.9); /* makes the content smaller */ 8 | max-height: 800px; /* was 300 */ 9 | min-height: 100px; 10 | width: 500px; /* was 400 */ 11 | overflow: hidden; 12 | padding: 0; 13 | border-bottom: none; 14 | } 15 | /* I'm not sure what this does, got popove code from Obsdn-Dark-Rmx */ 16 | /* 17 | .popover { 18 | background-color: var(--background-primary); 19 | border: 1px solid var(--background-primary-alt); 20 | box-shadow: 3px 3px 7px var(--background-modifier-box-shadow); 21 | border-radius: 6px; 22 | padding: 15px 20px 10px 20px; 23 | position: relative; 24 | } 25 | 26 | /* remove-tweak the bottom gradient on the popup: remove the gradient or set height to 0 */ 27 | .popover.hover-popover:after { 28 | height: 0px; 29 | background: linear-gradient(to bottom, transparent, var(--background-primary) 80%, var(--background-primary)); 30 | } 31 | 32 | /* Colour for pop-up text in ⌘+O */ 33 | .suggestion-item.is-selected { 34 | background-color: blue; /* PB changed from var(--text-accent) */ 35 | color: whitesmoke; 36 | } 37 | ``` 38 | -------------------------------------------------------------------------------- /dmytro-shulha/Lines - horizontal.md: -------------------------------------------------------------------------------- 1 | # Lines - horizontal 2 | ```css 3 | /* Horizontal gradient line in Preview as per Obsidianite theme */ 4 | .markdown-preview-view hr { 5 | margin-block-start: 4em; 6 | margin-block-end: 4em; 7 | } 8 | 9 | .markdown-preview-view hr, 10 | div:not(.CodeMirror-activeline)>.HyperMD-hr-bg { 11 | border: none; 12 | height: 0; 13 | border-bottom: 1px solid; 14 | border-image-slice: 1; 15 | border-width: 1px; 16 | border-image-source: linear-gradient(to right, 17 | transparent, 18 | var(--base3), /* PB changed from var(--text-accent) */ 19 | transparent); 20 | } 21 | 22 | div:not(.CodeMirror-activeline)>.HyperMD-hr-bg { 23 | top: 50%; 24 | } 25 | 26 | .markdown-preview-view hr::after, 27 | div:not(.CodeMirror-activeline)>.HyperMD-hr-bg::after { 28 | content: '§'; 29 | display: inline-block; 30 | position: absolute; 31 | left: 50%; 32 | transform: translate(-50%, -50%) rotate(60deg); 33 | transform-origin: 50% 50%; 34 | padding: 0.5rem; 35 | color: var(--base3); /* PB changed from var(--text-sub-accent) */ 36 | background-color: var(--base1); 37 | } 38 | 39 | /* Setting the gap above and below a hor. line, incl. footnotes …… 40 | /* …… but footnotes can be set separately - see section Footnotes */ 41 | div.markdown-preview-section hr { 42 | margin-block-start: 30px; 43 | margin-block-end: 40px; 44 | } 45 | ``` 46 | -------------------------------------------------------------------------------- /dustinknopoff/fade-controls.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Auto fade controls 3 | date: 2020-06-17 4 | 5 | taxonomies: 6 | tags: 7 | - css 8 | kind: 9 | - styling 10 | extra: 11 | author: rsdimitrov 12 | --- 13 | 14 | ## Auto fade note controls 15 | 16 | ```css 17 | .view-header:not(:hover) .view-actions { 18 | opacity: 0.1; 19 | transition: opacity .25s ease-in-out; 20 | } 21 | ``` 22 | 23 | ## Auto fade status bar 24 | 25 | ```css 26 | /* auto fades status bar items */ 27 | .status-bar:not(:hover) .status-bar-item { 28 | opacity: 0.25; 29 | transition: opacity .25s ease-in-out; 30 | } 31 | ``` 32 | 33 | ## Subtler scrollbars 34 | 35 | ```css 36 | .CodeMirror-vscrollbar, .CodeMirror-hscrollbar, ::-webkit-scrollbar { 37 | width: 3px; 38 | height: 3px; 39 | } 40 | ``` 41 | 42 | ## Subtler folding arrows 43 | 44 | ```css 45 | /* Make subtler folding gutter arrows */ 46 | .CodeMirror-foldgutter-folded:after, .CodeMirror-foldgutter-open:after { 47 | opacity: 0.5; 48 | font-size: 60%; 49 | } 50 | 51 | .CodeMirror-foldgutter-folded:hover:after, .CodeMirror-foldgutter-open:hover:after { 52 | opacity: 1; 53 | } 54 | 55 | .CodeMirror-foldgutter-folded:after { 56 | content: "\25BA"; 57 | } 58 | 59 | .CodeMirror-foldgutter-open:after { 60 | content: "\25BC"; 61 | } 62 | 63 | ``` 64 | 65 | [Original Forum Post](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/10) -------------------------------------------------------------------------------- /awesome-obsidian/custom-icons-for-frontmatter-tags.md: -------------------------------------------------------------------------------- 1 | # custom-icons-for-frontmatter-tags 2 | 3 | ```css 4 | /* ====== Custom icons for frontmatter tags ======== */ 5 | 6 | /* Add tag icon to the right of all frontmatter tags by default */ 7 | .frontmatter-section-tags .tag:not(.token)::after { 8 | content: '🔖'; 9 | } 10 | 11 | /* Remove the tag icon from specific tags */ 12 | .frontmatter-section-tags .tag[href^='#Article']::after, 13 | .frontmatter-section-tags .tag[href^='#DailyNote']::after, 14 | .frontmatter-section-tags .tag[href^='#Definition']::after, 15 | .frontmatter-section-tags .tag[href^='#Note']::after, 16 | .frontmatter-section-tags .tag[href^='#Person']::after, 17 | .frontmatter-section-tags .tag[href^='#Sermon']::after, 18 | .frontmatter-section-tags .tag[href^='#Task']::after { 19 | content: ''; 20 | } 21 | 22 | /* Add icon to the left of specific tags */ 23 | .frontmatter-section-tags .tag[href^='#Article']::before { 24 | content: '📰'; 25 | } 26 | 27 | .frontmatter-section-tags .tag[href^='#DailyNote']::before, 28 | .frontmatter-section-tags .tag[href^='#Note']::before { 29 | content: '📝'; 30 | } 31 | 32 | .frontmatter-section-tags .tag[href^='#Definition']::before { 33 | content: '📖'; 34 | } 35 | 36 | .frontmatter-section-tags .tag[href^='#Person']::before { 37 | content: '🧑'; 38 | } 39 | 40 | .frontmatter-section-tags .tag[href^='#Sermon']::before { 41 | content: '✝️'; 42 | } 43 | ``` 44 | 45 | -------------------------------------------------------------------------------- /dmytro-shulha/Sidebar.md: -------------------------------------------------------------------------------- 1 | # Sidebar 2 | ```css 3 | /* BOTH SIDEBARS */ 4 | /* Collapsible ribbon */ 5 | .side-dock-ribbon { flex: 0; } 6 | .workspace-ribbon { width: 0; } 7 | ``` 8 | 9 | OR 10 | 11 | ```css 12 | .side-dock-ribbon { 13 | flex: 0 0 0; 14 | } 15 | ``` 16 | 17 | ```css 18 | /* Vert. resize handle to change pane width: change color */ 19 | .workspace-leaf-resize-handle:hover { 20 | background-color: var(--base2); 21 | } 22 | ``` 23 | 24 | ```css 25 | /* LEFT SIDEBAR */ 26 | /* clean up side bar empty state (e.g. unlinked mentions) */ 27 | .search-empty-state { 28 | width: auto; 29 | padding-left: 15px; 30 | padding-right: 15px; 31 | line-height: normal; 32 | } 33 | 34 | /* Connectining lines for files and folders in File Explorer*/ 35 | .nav-folder-children .nav-folder-children { 36 | margin-left: 20px; 37 | padding-left: 0; 38 | border-left: 1px solid rgba(118,158,165,0.7); 39 | border-radius: 4px; 40 | transition:all 0.5s ease-in-out; 41 | } 42 | .nav-folder-children .nav-folder-children:hover { 43 | border-left-color: rgba(118,158,165,0.7); 44 | } 45 | 46 | /* RIGHT SIDEBAR */ 47 | /* outliner for the outline */ 48 | .outline .collapsible-item-children { 49 | margin-left: 20px; 50 | border-left: 1px solid var(--text-muted); 51 | border-radius: 4px; 52 | transition:all 0.5s ease-in-out; 53 | } 54 | .outline .collapsible-item-children:hover { 55 | border-left-color: var(--text-normal); 56 | } 57 | ``` 58 | -------------------------------------------------------------------------------- /dmytro-shulha/Note title in pane.md: -------------------------------------------------------------------------------- 1 | # Note title in pane 2 | ```css 3 | /* Change the colour or the font-weight of the note title in a pane */ 4 | .view-header-title { 5 | /*color: red; */ 6 | font-weight: 300; /** this range from 1 - 1000 **/ 7 | } 8 | 9 | /* Change color of note title active pane - Obsidianite */ 10 | .workspace-leaf.mod-active .view-header-title { 11 | color: var(--base2); 12 | } 13 | 14 | /* Change icon above vert. note title on title spine - from Obsidianite */ 15 | .view-header-icon { 16 | color: rgb(31, 178, 129); /* PB changed from var(--text-accent) */ 17 | } 18 | 19 | /* Change color of line next to note title in Andy Mode - Obsidianite */ 20 | .workspace-leaf.mod-active .view-header { 21 | border-right: 2px solid var(--base2) !important; /* change to border-bottom in non-AM */ 22 | } 23 | 24 | /* Change color of note spine (Andy mode) */ 25 | /* this is for Light theme; for Dark theme change words "theme-light" to "theme-dark" in the rule */ 26 | body.theme-light.plugin-sliding-panes .view-header { 27 | background-color: #f2f8fd; 28 | } 29 | ``` 30 | 31 | ```css 32 | /* Wrap long title in the title bar of a note 33 | courtsey of SIRvb https://discord.com/channels/686053708261228577/702656734631821413/829852938763370546 */ 34 | .view-header-title { 35 | margin-top: 5px; 36 | margin-bottom: 5px; 37 | white-space: pre-wrap; 38 | line-height: 25px; 39 | } 40 | .view-header { 41 | height: auto; 42 | } 43 | ``` 44 | -------------------------------------------------------------------------------- /dmytro-shulha/Gutter line numbers.md: -------------------------------------------------------------------------------- 1 | # Gutter line numbers 2 | ```css 3 | /* Make subtler folding gutter arrows */ 4 | .CodeMirror-foldgutter-folded:after, .CodeMirror-foldgutter-open:after { 5 | opacity: 0.2; 6 | font-size: 70%; 7 | } 8 | 9 | /*=== From Obsdn-Dark-Rmx: line nos. smaller and less bright ===*/ 10 | /*== Section name in O-D-R: codemirror line numbers gutter edit mode ====*/ 11 | .cm-s-obsidian .CodeMirror-linenumber { 12 | color: var(--text-accent); 13 | opacity : 0.8; 14 | font-size: 14px; 15 | font-family: Consolas,monospace; 16 | } 17 | .CodeMirror-gutter-elt { 18 | position: absolute; 19 | cursor: default; 20 | z-index: 4; 21 | } 22 | .CodeMirror-linenumber { 23 | padding: 0 3px 0 0px; 24 | min-width: 20px; 25 | text-align: right; 26 | white-space: nowrap; 27 | } 28 | 29 | /* align vertically with text */ 30 | .CodeMirror-gutter-wrapper { height:100%; } 31 | .CodeMirror-gutter-elt { top:0; } 32 | .cm-s-obsidian .CodeMirror-linenumber{ 33 | height: 100%; 34 | line-height: 0; 35 | } 36 | .cm-s-obsidian .CodeMirror-linenumber::before { 37 | content: ""; 38 | height: 50%; 39 | display: block; 40 | } 41 | 42 | /* align vertically with header */ 43 | cm-s-obsidian .HyperMD-header { 44 | padding-top:0.125em; 45 | padding-bottom:0.125em; 46 | } 47 | 48 | /* align vertically with text in lists */ 49 | .cm-s-obsidian .HyperMD-list-line { 50 | padding-top:0.15em; 51 | padding-bottom:0.15em; 52 | } 53 | ``` 54 | -------------------------------------------------------------------------------- /dustinknopoff/builtin-icons.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Built-in Icons 3 | date: 2021-05-05 4 | 5 | taxonomies: 6 | tags: 7 | - css 8 | kind: 9 | - styling 10 | extra: 11 | author: rpcm 12 | --- 13 | 14 | - 'logo-crystal' 15 | - 'create-new' 16 | - 'trash' 17 | - 'search' 18 | - 'right-triangle' 19 | - 'document' 20 | - 'folder' 21 | - 'pencil' 22 | - 'left-arrow' 23 | - 'right-arrow' 24 | - 'three-horizontal-bars' 25 | - 'dot-network' 26 | - 'audio-file' 27 | - 'image-file' 28 | - 'pdf-file' 29 | - 'gear' 30 | - 'documents' 31 | - 'blocks' 32 | - 'go-to-file' 33 | - 'presentation' 34 | - 'cross-in-box' 35 | - 'microphone' 36 | - 'microphone-filled' 37 | - 'two-columns' 38 | - 'link' 39 | - 'popup-open' 40 | - 'checkmark' 41 | - 'hashtag' 42 | - 'left-arrow-with-tail' 43 | - 'right-arrow-with-tail' 44 | - 'lines-of-text' 45 | - 'vertical-three-dots' 46 | - 'pin' 47 | - 'magnifying-glass' 48 | - 'info' 49 | - 'horizontal-split' 50 | - 'vertical-split' 51 | - 'calendar-with-checkmark' 52 | - 'sheets-in-box' 53 | - 'up-and-down-arrows' 54 | - 'broken-link' 55 | - 'cross' 56 | - 'any-key' 57 | - 'reset' 58 | - 'star' 59 | - 'crossed-star' 60 | - 'dice' 61 | - 'filled-pin' 62 | - 'enter' 63 | - 'help' 64 | - 'vault' 65 | - 'open-vault' 66 | - 'paper-plane' 67 | - 'bullet-list' 68 | - 'uppercase-lowercase-a' 69 | - 'star-list' 70 | - 'expand-vertically' 71 | - 'languages' 72 | - 'switch' 73 | - 'pane-layout' 74 | - 'install' 75 | 76 | [Original Forum Post](https://forum.obsidian.md/t/list-of-available-icons-for-component-seticon/16332/4) -------------------------------------------------------------------------------- /dustinknopoff/changing-fonts.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Changing Font Styles/Sizes 3 | date: 2020-12-06 4 | taxonomies: 5 | tags: 6 | - css 7 | kind: 8 | - styling 9 | extra: 10 | author: argentum 11 | --- 12 | 13 | ```css 14 | /*---------------------------------------------------------------- 15 | Font styles 16 | Preview mode and UI */ 17 | 18 | --text:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; 19 | 20 | /* Editor mode */ 21 | 22 | --text-editor:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; 23 | 24 | /* Code */ 25 | 26 | --font-monospace:Menlo,SFMono-Regular,Consolas,"Roboto Mono",monospace; 27 | 28 | /* Sizes, weights, padding */ 29 | 30 | --font-normal:16px; 31 | --font-small:13px; 32 | --font-smaller:11px; 33 | --font-smallest:10px; 34 | --normal-weight:400; /* Switch to 300 if you want thinner default text */ 35 | --bold-weight:600; /* Switch to 700 if you want thicker bold text */ 36 | --line-width:40rem; /* Maximum characters per line */ 37 | --line-height:1.5; 38 | --max-width:87%; /* Amount of padding around the text, use 90% for narrower padding */ 39 | --nested-padding:3.5%; /* Amount of padding for quotes and transclusions */ 40 | --icon-muted:0.4; 41 | --border-width:1px; 42 | --border-width-alt:1px; 43 | 44 | /*---------------------------------------------------------------- 45 | ``` 46 | 47 | [Original Snippet](https://github.com/kepano/obsidian-minimal/blob/master/obsidian.css#L116) 48 | 49 | [Original Forum Post](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/248) -------------------------------------------------------------------------------- /dmytro-shulha/Images.md: -------------------------------------------------------------------------------- 1 | # Images 2 | ```css 3 | /* From BLUE TOPAZ */ 4 | /* Images : reduce displayed size of embedded files, zoom on hover */ 5 | .markdown-preview-view img, .markdown-preview-view video { 6 | width: auto; 7 | height: auto; 8 | object-fit: contain; 9 | max-height: 300px; 10 | max-width: 550px; 11 | outline: 0px solid var(--text-accent); 12 | } 13 | .markdown-preview-view img:hover , .markdown-preview-view video:hover { 14 | width: 100%; 15 | height:100%; 16 | max-width: min(100%, 80vw); 17 | max-height: min(100%, 80vh); 18 | outline: none; 19 | cursor: zoom-in; 20 | } 21 | ``` 22 | 23 | OR 24 | 25 | ```css 26 | /* Enlarge image on hover */ 27 | .markdown-preview-view img { 28 | display: block; 29 | margin-top: 20pt; 30 | margin-bottom: 20pt; 31 | margin-left: auto; 32 | margin-right: auto; 33 | width: 50%; /* experiment with values */ 34 | transition:transform 0.25s ease; 35 | } 36 | 37 | .markdown-preview-view img:hover { 38 | -webkit-transform:scale(1.8); /* experiment with values */ 39 | transform:scale(2); 40 | } 41 | ``` 42 | 43 | ## Display side by side image grid 44 | [Obsidian forum](https://forum.obsidian.md/t/display-side-by-side-image-grid-css-snippet/9359) by Kepano 45 | 46 | 47 | 48 | ## Image as background 49 | 50 | ```css 51 | /* Add background image - from Gabroel */ 52 | /* can only add images from the web, not local */ 53 | .markdown-preview-section { 54 | background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Satellite_view_of_Victoria_Falls.jpg/220px-Satellite_view_of_Victoria_Falls.jpg"); 55 | background-size: cover; 56 | background-size: contain; 57 | } 58 | ``` 59 | /*to use a local image, upload to the web (e.g. Imgur), then reference that */ 60 | -------------------------------------------------------------------------------- /Graph-view-skin.md: -------------------------------------------------------------------------------- 1 | # Graph view skin 2 | 3 | ```css 4 | /* 5 | 6 | This is an Obsidian Snippet to apply a skin to the Graph View 7 | 8 | ------------------------------------------------------------- 9 | 10 | Graph View 11 | Circle When Not Hover 12 | Circle When Hover 13 | Line When Hover 14 | Circle Stroke 15 | Circle When Link Unresolved 16 | Tags 17 | Arrows 18 | 19 | ------------------------------------------------------------- 20 | 21 | */ 22 | 23 | /***************************************/ 24 | /* Graph View */ 25 | /***************************************/ 26 | /* Circle Stroke */ 27 | /* Line When Hover */ 28 | .graph-view.color-circle, 29 | .graph-view.color-line-highlight { 30 | color: #81FFEA; 31 | border: 0; 32 | } 33 | /* Circle When Hover */ 34 | .graph-view.color-fill-highlight { 35 | color: #8AFF7F; 36 | } 37 | .graph-view.color-text { 38 | color: #FEFF7F; 39 | } 40 | .graph-view.color-line { 41 | color: #6272a4; 42 | } 43 | /* Circle When Not Hover */ 44 | .graph-view.color-fill { 45 | color: #81FFEA; 46 | } 47 | /* Arrows */ 48 | .theme-light .graph-view.color-arrow, 49 | .theme-dark .graph-view.color-arrow { 50 | color: #50fa7b; 51 | } 52 | /* Tags */ 53 | .theme-light .graph-view.color-fill-tag, 54 | .theme-dark .graph-view.color-fill-tag { 55 | color: #ffb86c; 56 | } 57 | /* Attachments */ 58 | .theme-light .graph-view.color-fill-attachment, 59 | .theme-dark .graph-view.color-fill-attachment { 60 | color: #ff5555; 61 | } 62 | /* Circle When Link Unresolved */ 63 | .theme-light .graph-view.color-fill-unresolved, 64 | .theme-dark .graph-view.color-fill-unresolved { 65 | color: #6272a4; 66 | } 67 | .workspace-leaf-content[data-type=graph] .view-content { 68 | background-color: hsl(207deg, 95%, 5%); 69 | } 70 | ``` 71 | -------------------------------------------------------------------------------- /awesome-obsidian/nicer-checkboxes.md: -------------------------------------------------------------------------------- 1 | # nicer-checkboxes 2 | 3 | ```css 4 | /* get more snippets at https://github.com/kmaasrud/awesome-obsidian */ 5 | /* author: https://forum.obsidian.md/u/kepano/summary, https://forum.obsidian.md/u/rsdimitrov */ 6 | /* source: https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/34 */ 7 | 8 | /* Round checkbxes in preview and editor */ 9 | input[type="checkbox"], 10 | .cm-formatting-task { 11 | -webkit-appearance: none; 12 | appearance: none; 13 | border-radius: 50%; 14 | border: 1px solid var(--text-faint); 15 | padding: 0; 16 | vertical-align: middle; 17 | } 18 | 19 | .cm-s-obsidian span.cm-formatting-task { 20 | color: transparent; 21 | width: 1.25em !important; 22 | height: 1.25em; 23 | display: inline-block; 24 | } 25 | 26 | input[type="checkbox"]:focus { 27 | outline: 0; 28 | } 29 | input[type="checkbox"]:checked, 30 | .cm-formatting-task.cm-property { 31 | background-color: var(--text-accent-hover); 32 | border: 1px solid var(--text-accent-hover); 33 | background-position: center; 34 | background-size: 70%; 35 | background-repeat: no-repeat; 36 | background-image: url('data:image/svg+xml; utf8, '); 37 | } 38 | ``` 39 | 40 | -------------------------------------------------------------------------------- /dustinknopoff/collapsible-side-notes.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Collapsible Side Notes 3 | date: 2021-03-04 4 | taxonomies: 5 | tags: 6 | - css 7 | kind: 8 | - styling 9 | extra: 10 | author: cmjn 11 | --- 12 | 13 | ![](https://forum.obsidian.md/uploads/default/optimized/2X/a/a64f3a0c95b262030c88ad5e82cabee7130f5884_2_690x237.jpeg) 14 | 15 | ```css 16 | blockquote { 17 | border: none !important; 18 | padding: 0 20px; 19 | } 20 | 21 | blockquote .task-list-item { 22 | font-family: var(--font-stack-ui) !important; 23 | font-size: var(--font-size-secondary) !important; 24 | line-height: 1.35em; 25 | font-style: normal; 26 | position: absolute; 27 | text-align: justify; 28 | z-index: 1; 29 | color: var(--text-faint) !important; 30 | right: min(calc(50% + 0.5 * var(--line-width) + 2.5em), calc(100% - 3.5em)); 31 | width: calc(50% - 0.5 * var(--line-width) - 3em); 32 | max-width: calc(0.66 * var(--line-width)); 33 | min-width: 3em; 34 | white-space: nowrap; 35 | overflow: hidden; 36 | text-overflow: ellipsis; 37 | margin-block-start: 0 !important; 38 | margin-block-end: 0 !important; 39 | text-indent: 0 !important; 40 | } 41 | blockquote .task-list-item > .task-list-item-checkbox { 42 | appearance: none; 43 | position: absolute; 44 | height: 100%; 45 | width: 100%; 46 | left: 0; 47 | top: 0; 48 | background: none !important; 49 | background-color: transparent !important; 50 | margin: 0 !important; 51 | border: none; 52 | cursor: pointer; 53 | } 54 | blockquote .task-list-item.is-checked { 55 | z-index: 999; 56 | color: var(--text-normal) !important; 57 | right: min(calc(50% + 0.5 * var(--line-width) + 2.5em), calc(100% - 12.5em)); 58 | min-width: 12em; 59 | overflow: visible; 60 | max-height: none; 61 | white-space: normal; 62 | text-decoration: none !important; 63 | } 64 | 65 | ``` 66 | 67 | [Original Forum Post](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/341) -------------------------------------------------------------------------------- /dmytro-shulha/Progress bar vault launch.md: -------------------------------------------------------------------------------- 1 | # Progress bar vault launch 2 | ```css 3 | /* Vault launch progress bar change color */ 4 | .progress-bar-subline { 5 | position: absolute; 6 | background-color: var(--base2); 7 | height: 8px; 8 | } 9 | 10 | .progress-bar-line { 11 | position: absolute; 12 | opacity: 0.4; 13 | background-color: var(--base2); 14 | width: 150%; 15 | height: 8px; 16 | } 17 | ``` 18 | 19 | Alternatively use this [Obsidian forum](https://forum.obsidian.md/t/progress-bar/9092/3) 20 | ```css 21 | /* in `.theme` put: */ 22 | --interactive-accent: var(--base2) 23 | ``` 24 | 25 | Comment by “Cannibalox” (Obsidian forum) on progress bar: 26 | 27 | > to inspect elements like this (elements that appear on specific events like hover, timer, etc) : use the PAUSE function of the devtools (f_ or CTRL ) : . open obsdian's devtools with CTRL SHIFT I or F12 . go to the `sources` tab, there is a play/pause icon in the sub-header menu . on obsidian, trigger your event (ie: hover over a link to see the popup or in your previous case, refresh Obsi with `CTRL R` to see the loading bar) 28 | > 29 | > while the event is active, hit F8 or CTRL / to pause obsidian (it will 'freeze' obsi until you hit F8 again) 30 | > 31 | > now, in devtools, switch to the `elements` tab and inspect the event as you normally would . tweak and copy your modified parameters . once you're done inspecting the css, hit F8 or CTRL \ to un-pause 32 | > 33 | > you can google `devtools + pause` for more infos on the process. it's easier to do than to describe really 34 | 35 | Comment by PB: 36 | 37 | > Klaas: 38 | > 39 | > The problem is the next step after finding the element that needs to be addressed is knowing the syntax that achieves what you're after. 40 | 41 | Answer from Cannibalox: 42 | 43 | > the devtools should provide suggestions, when you inspect to find the css corresponding to the elements, in the `styles` tab you can tweak values in real time. if you delete a value, it should provide suggestions / autocompletion. Then you copy the rule to your obsidian css. you can use https://www.w3schools.com/css to find relevant infos when you need something specific like taxonomy / syntax / commands 44 | -------------------------------------------------------------------------------- /dmytro-shulha/Tag pills.md: -------------------------------------------------------------------------------- 1 | # Tag pills 2 | ```css 3 | /* Tag pills in edit mode - thanks to Whyl */ 4 | /* to make rectangular tag pills w/ rounded corners change radii to 4 px */ 5 | 6 | 7 | .CodeMirror-line span.cm-hashtag{ 8 | background-color: var(--text-accent); 9 | color: white; 10 | display: inline-block; 11 | text-decoration: none !important; 12 | } 13 | 14 | 15 | .CodeMirror-line span.cm-hashtag-begin { 16 | border-top-left-radius:15px; /* change to 4px for rectangular pills */ 17 | border-bottom-left-radius:15px; /* change to 4px for rectangular pills */ 18 | padding-left:8px; 19 | border-right:none; 20 | } 21 | 22 | .CodeMirror-line span.cm-hashtag-end { 23 | border-top-right-radius:15px; /* change to 4px for rectangular pills */ 24 | border-bottom-right-radius:15px; /* change to 4px for rectangular pills */ 25 | padding-right:8px; 26 | border-left:none; 27 | } 28 | 29 | /* Tag pills in Preview mode */ 30 | .tag:not(.token) { 31 | border: none; 32 | color: white !important; 33 | font-size: 12px; 34 | padding: 1px 8px 3px; 35 | text-align: center; 36 | text-decoration: none; 37 | margin: 0px 0px; 38 | cursor: pointer; 39 | border-radius: 15px; /* change to 4px for rectangular pills */ 40 | background-color: var(--text-accent) !important; 41 | } 42 | 43 | /* Tag pills in tag pane */ 44 | .tag-pane-tag-count { 45 | background-color: var(--text-accent); 46 | border: none; 47 | color: white; 48 | font-size: 11px; 49 | padding: 1px 8px; 50 | text-align: center; 51 | text-decoration: none; 52 | display: inline-block; 53 | margin: 0px 0px; 54 | cursor: pointer; 55 | border-radius: 14px; /* change to 4px for rectangular pills */ 56 | } 57 | 58 | .tag-pane-tag-text { 59 | background-color: var(--text-accent); 60 | border: none; 61 | color: white; 62 | font-size: 11px; 63 | padding: 1px 8px; 64 | text-align: center; 65 | text-decoration: none; 66 | display: inline-block; 67 | margin: 0px 0px; 68 | cursor: pointer; 69 | border-radius: 14px; /* change to 4px for rectangular pills */ 70 | } 71 | 72 | /* Change color of tag count pill when hovering */ 73 | .tag-pane-tag:hover .tag-pane-tag-count { 74 | color: white; 75 | background-color: var(--base2); 76 | } 77 | ``` 78 | -------------------------------------------------------------------------------- /dmytro-shulha/Table.md: -------------------------------------------------------------------------------- 1 | # Table 2 | ```css 3 | /* Expand table cells when clicked */ 4 | .markdown-preview-view table { 5 | position: relative; 6 | } 7 | 8 | tr { 9 | position: relative; 10 | } 11 | 12 | td:active { 13 | position: absolute; 14 | background: black; 15 | width: 100%; 16 | left: 0; 17 | transition: .2s; 18 | transform: scale(1.02); 19 | border-radius: 15px; 20 | } 21 | 22 | /* Table as per Typora Solarized theme */ 23 | table { 24 | padding: 0; 25 | word-break: initial; 26 | } 27 | 28 | table tr { 29 | border-top: 1px solid #cccccc; 30 | margin: 0; 31 | padding: 0; 32 | } 33 | 34 | table tr:nth-child(2n) { 35 | background-color: #f8f8f8; 36 | } 37 | 38 | table tr th { 39 | font-weight: bold; 40 | border: 1px solid #cccccc; 41 | text-align: left; 42 | margin: 0; 43 | padding: 6px 13px; 44 | } 45 | 46 | table tr td { 47 | border: 1px solid #cccccc; 48 | text-align: left; 49 | margin: 0; 50 | padding: 6px 13px; 51 | } 52 | 53 | table tr th:first-child, 54 | table tr td:first-child { 55 | margin-top: 0; 56 | } 57 | 58 | table tr th:last-child, 59 | table tr td:last-child { 60 | margin-bottom: 0; 61 | } 62 | ``` 63 | 64 | ```css 65 | /* Latex table */ 66 | /* Source: DeaconLight - https://forum.obsidian.md/t/obsidian-tables-that-look-like-latex-tables-with-css/16683 */ 67 | /* ------------------------------------*/ 68 | .academia table { 69 | border-collapse: collapse; 70 | border-spacing: 0; 71 | width: auto; 72 | max-width: 100%; 73 | border-top: 2.27px solid black; 74 | border-bottom: 2.27px solid black; 75 | overflow-x: auto; 76 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); 77 | } 78 | .academia th, 79 | .academia td { 80 | border: 0 none !important; 81 | text-align: left; 82 | padding: 0.5rem; 83 | line-height: 1.1; 84 | } 85 | .academia tr:hover, 86 | .academia td:hover { 87 | background-color: #cccccc; 88 | } 89 | .academia table > tbody > tr:first-child > td, 90 | .academia table > tbody > tr:first-child > th { 91 | border-top: 1.36px solid black !important; 92 | } 93 | .academia table > tbody > tr:last-child > td, 94 | .academia table > tbody > tr:last-child > th { 95 | border-bottom: 1.36px solid black !important; 96 | } 97 | .academia thead th { 98 | background-color: white !important; 99 | font-weight: 700; 100 | } 101 | .academia tr:nth-child(even) { background-color: #dddddd ; } 102 | ``` 103 | -------------------------------------------------------------------------------- /dmytro-shulha/Links.md: -------------------------------------------------------------------------------- 1 | # Links 2 | ## Change color 3 | ```css 4 | /* Internal links */ 5 | /* change colour in Preview */ 6 | a.internal-link { 7 | color: var(--base2); 8 | } 9 | ``` 10 | 11 | ## Change colour in Edit 12 | ```css 13 | .cm-s-obsidian span.cm-link, 14 | .cm-s-obsidian span.cm-url { /* PB added */ 15 | color: #c6ceda; 16 | } 17 | ``` 18 | 19 | ## Change colour in Edit 20 | ```css 21 | .cm-s-obsidian span.cm-hmd-internal-link { 22 | color: var(--base2); 23 | } 24 | 25 | /* External links - URLs */ 26 | /* change colour in Preview */ 27 | a.external-link { 28 | color: var(--base3); 29 | font-weight: 500; 30 | } 31 | ``` 32 | 33 | 34 | ## Change color intensity of unresolved links 35 | ```css 36 | .markdown-preview-view .internal-link.is-unresolved { 37 | opacity: 0.8; 38 | } 39 | ``` 40 | 41 | ## Hide little square with arrow shown next to external link in Preview 42 | ```css 43 | .external-link { 44 | background-image: none; 45 | /* This removes the space left over after the arrow is gone **/ 46 | padding: 0; 47 | } 48 | ``` 49 | 50 | ## External link hover - view URL 51 | ```css 52 | /* view URL in popup - courtesy of narand */ 53 | a.external-link { 54 | position: relative; 55 | } 56 | 57 | a.external-link:before { 58 | position: absolute; 59 | padding: 0px 8px 0px 8px; 60 | color: var(--text-normal); 61 | background-color: var(--background-primary-alt); 62 | border-radius: 3px; 63 | font-size: 80%; 64 | display: none; 65 | z-index: 1000; 66 | top: 1.8em; 67 | content: attr(href) 68 | } 69 | 70 | a.external-link:hover:before { 71 | display: inline; 72 | } 73 | 74 | OR 75 | 76 | /* view URL in bottom of screen - courtesy Moonbase59 */ 77 | a.external-link { 78 | position: relative; 79 | } 80 | 81 | a.external-link:before { 82 | position: fixed; 83 | left: 0; 84 | bottom: 0; 85 | padding: 0 0.5em; 86 | color: var(--text-normal); 87 | background-color: var(--background-primary-alt); 88 | border: 1px solid var(--background-modifier-border); 89 | border-radius: 0 0.4em 0 0; 90 | font-family: var(--default-font); 91 | font-size: initial; 92 | font-style: initial; 93 | font-weight: initial; 94 | text-decoration: initial; 95 | display: none; 96 | z-index: 1000; 97 | content: attr(href); 98 | } 99 | 100 | a.external-link:hover:before { 101 | display: block; 102 | max-width: 98%; 103 | overflow: hidden; 104 | text-overflow: ellipsis; 105 | } 106 | ``` 107 | -------------------------------------------------------------------------------- /scottkillen/minimal-tweaks.md: -------------------------------------------------------------------------------- 1 | # minimal-tweaks 2 | 3 | ```css 4 | .view-header-title, .popover-title { 5 | font-family: 'Segoe UI' 6 | } 7 | 8 | .cm-gutterElement { 9 | font-family: "MonoLisa" 10 | } 11 | 12 | .workspace>.workspace-split:not(.mod-root) .CodeMirror, 13 | .workspace>.workspace-split:not(.mod-root) .cm-scroller, 14 | .workspace>.workspace-split:not(.mod-root) .markdown-preview-view, 15 | .workspace>.workspace-split:not(.mod-root) .CodeMirror h1, 16 | .workspace>.workspace-split:not(.mod-root) .cm-scroller h1, 17 | .workspace>.workspace-split:not(.mod-root) .markdown-preview-view h1, 18 | .workspace>.workspace-split:not(.mod-root) .CodeMirror h2, 19 | .workspace>.workspace-split:not(.mod-root) .cm-scroller h2, 20 | .workspace>.workspace-split:not(.mod-root) .markdown-preview-view h2 { 21 | font-family: "Segoe UI" 22 | } 23 | 24 | .is-collapsed .search-result-file-title, .nav-file-title, .nav-folder-title, .tag-pane-tag, .tree-item-self, .vertical-tab-nav-item { 25 | color: #aeaeaeb0 26 | } 27 | 28 | .vertical-tab-header-group-title, 29 | .vertical-tab-nav-item:hover, 30 | body:not(.is-grabbing) .nav-folder-title.is-active:hover, 31 | body:not(.is-grabbing) .nav-folder-title:hover, 32 | body:not(.is-grabbing) .nav-file-title.is-active:hover, 33 | .status-bar-item.plugin-obsidian-reading-time:hover, 34 | .status-bar-item.plugin-word-count:hover { 35 | color: #aeaeae 36 | } 37 | 38 | .colorful-active #calendar-container .active, 39 | .colorful-active #calendar-container .active.today, 40 | .colorful-active #calendar-container .active:hover, 41 | .colorful-active #calendar-container .day:active, 42 | .colorful-active .menu-item.selected:not(.is-disabled):not(.is-label), 43 | .colorful-active .menu-item:hover, 44 | .colorful-active .menu-item:hover:not(.is-disabled):not(.is-label), 45 | .colorful-active .nav-file-title.is-active, 46 | .colorful-active .nav-file-title.is-being-dragged, 47 | .colorful-active .nav-folder-title.is-being-dragged, 48 | .colorful-active .vertical-tab-nav-item.is-active, 49 | body.colorful-active:not(.is-grabbing) .nav-file-title.is-active:hover, 50 | body.colorful-active:not(.is-grabbing) .nav-file-title.is-being-dragged:hover, 51 | body.colorful-active:not(.is-grabbing) .nav-folder-title.is-being-dragged:hover { 52 | background-color: var(--pink); 53 | color: var(--bg1) 54 | } 55 | 56 | div.notice { 57 | background-color: var(--pink) !important; 58 | color: var(--bg1) !important 59 | } 60 | 61 | .status-bar, 62 | .titlebar-button, 63 | .workspace-ribbon-collapse-btn, 64 | div#quick-explorer span.explorable { 65 | color: #aeaeaea0 66 | } 67 | ``` 68 | 69 | -------------------------------------------------------------------------------- /dustinknopoff/pane-controls-hover.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Show Pane Header Icons on Hover 3 | date: 2020-12-10 4 | taxonomies: 5 | tags: 6 | - css 7 | kind: 8 | - styling 9 | extra: 10 | author: ShaneNZ 11 | --- 12 | 13 | ![](https://forum.obsidian.md/uploads/default/original/2X/2/2848c023dc2a3111efecc12cffc9525e78be4493.gif) 14 | 15 | ```css 16 | /* 17 | Fade the pane header controls unless hovered (just to reduce/minimise distraction) 18 | does this per individual control to easily leave link and pin slightly more visible even if not hovered, and 19 | as an easy way to do a snazzy transition delay stagger in and out ;) 20 | */ 21 | 22 | /* not hovered ie. on cursor exit from the header */ 23 | .view-header:not(:hover) a.view-action[aria-label*="Preview"], 24 | .view-header:not(:hover) a.view-action[aria-label*="Edit"] { 25 | opacity: 0.1; 26 | transition: opacity .25s ease-in-out; 27 | transition-delay: 0ms; 28 | } 29 | 30 | .view-header:not(:hover) a.view-action[aria-label*="link"] { 31 | opacity: 0.55; 32 | transition: opacity .25s ease-in-out; 33 | transition-delay: 20ms; 34 | } 35 | 36 | .view-header:not(:hover) a.view-action[aria-label*="Pin"] { 37 | opacity: 0.35; 38 | transition: opacity .25s ease-in-out; 39 | transition-delay: 40ms; 40 | } 41 | 42 | .view-header:not(:hover) a.view-action[aria-label*="Close"] { 43 | opacity: 0.1; 44 | transition: opacity .25s ease-in-out; 45 | transition-delay: 60ms; 46 | } 47 | 48 | .view-header:not(:hover) a.view-action[aria-label*="More"] { 49 | opacity: 0.1; 50 | transition: opacity .25s ease-in-out; 51 | transition-delay: 80ms; 52 | } 53 | 54 | /* hovered ie. on cursor entry to the header */ 55 | .view-header:hover a.view-action[aria-label*="Preview"], 56 | .view-header:hover a.view-action[aria-label*="Edit"] { 57 | opacity: 1; 58 | transition: opacity .25s ease-in-out; 59 | transition-delay: 0ms; 60 | } 61 | 62 | .view-header:hover a.view-action[aria-label*="link"] { 63 | opacity: 1; 64 | transition: opacity .25s ease-in-out; 65 | transition-delay: 20ms; 66 | } 67 | 68 | .view-header:hover a.view-action[aria-label*="Pin"] { 69 | opacity: 1; 70 | transition: opacity .25s ease-in-out; 71 | transition-delay: 40ms; 72 | } 73 | 74 | .view-header:hover a.view-action[aria-label*="Close"] { 75 | opacity: 1; 76 | transition: opacity .25s ease-in-out; 77 | transition-delay: 60ms; 78 | } 79 | 80 | .view-header:hover a.view-action[aria-label*="More"] { 81 | opacity: 1; 82 | transition: opacity .25s ease-in-out; 83 | transition-delay: 80ms; 84 | } 85 | ``` 86 | 87 | [Original Forum Post](https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/250) -------------------------------------------------------------------------------- /dmytro-shulha/Footnotes.md: -------------------------------------------------------------------------------- 1 | # Footnotes 2 | ```css 3 | /* Footnote styling - works for me w/ inline footnotes */ 4 | .footnotes-list {font-size:12px;} 5 | .markdown-preview-section .footnotes {font-size: 80%;} 6 | .footnotes p {margin-top: 0px;margin-bottom:5px;} 7 | 8 | .is-flashing { 9 | transition: background-color 1s ease; 10 | background-color: orange; 11 | } 12 | 13 | a.footnote-link { 14 | color: var(--base2); 15 | } 16 | 17 | /* Setting the gap above and below a hor. footnote line 18 | /* if this code block is deleted from your CSS file, the space above and below the footnote line jumps up, but changing the px values has no effect 19 | /* footnote lines gaps can also be set with a general hr rule - see section Lines */ 20 | .markdown-preview-view 21 | .footnotes hr { 22 | margin-top: 5px; 23 | margin-bottom: 5px; 24 | } 25 | ``` 26 | 27 | Other possibilities: 28 | 29 | ```css 30 | .markdown-preview-view .mod-highlighted { 31 | color: black; 32 | background-color: fuchsia; 33 | } 34 | 35 | .footnotes { 36 | text-align: justify; 37 | hyphens: auto; 38 | font-size: 15px; 39 | } 40 | 41 | sup { 42 | vertical-align: top; 43 | font-size: 11px; 44 | display: inline-block; 45 | position: relative; 46 | margin: -4px 0 0 3px; 47 | } 48 | sub { 49 | vertical-align: bottom; 50 | font-size: 11px; 51 | display: inline-block; 52 | position: relative; 53 | margin: 0px 0 -4px 3px; 54 | } 55 | ``` 56 | 57 | OR 58 | 59 | ```css 60 | /* FROM _ph @ https://forum.obsidian.md/t/theme-obsdn-dark-rmx-now-with-light-dark-updated-2020-08-07/2225/46 */ 61 | /* also sets the colour of superscript number that lights up when return arrow is clicked */ 62 | 63 | .markdown-preview-view .mod-highlighted { 64 | color: #0cf32b; /* <---- pick your color */ 65 | } 66 | 67 | .footnotes-list { 68 | font-size: 13px; /* I like smaller footnotes */ 69 | } 70 | 71 | /* set space above and below hor. line/rule */ 72 | .markdown-preview-view 73 | .footnotes hr { 74 | margin-top: 3px; 75 | margin-bottom: 3px; 76 | } 77 | ``` 78 | 79 | OR 80 | 81 | ```css 82 | /* FROM DANIEL FLAUM via email */ 83 | 84 | /* Footnote styling - smaller font */ 85 | .footnote-link.mod-highlighted { 86 | background-color: var(--orange); 87 | color: var(--base3); 88 | } 89 | 90 | section.footnotes li { 91 | font-size: small; 92 | } 93 | 94 | section.footnotes p { 95 | font-size: small; 96 | } 97 | ``` 98 | 99 | ```css 100 | /* Stop footnotes affecting line height */ 101 | sup { 102 | vertical-align: top; 103 | position: relative; 104 | top: -0.3em; 105 | font-size: 0.75em; 106 | } 107 | ``` 108 | -------------------------------------------------------------------------------- /dmytro-shulha/Outliner pane.md: -------------------------------------------------------------------------------- 1 | # Outliner pane 2 | 3 | ```css 4 | /* connecting lines outliner */ 5 | .outline { 6 | font-size: 0.8rem; 7 | font-weight: 200; 8 | } 9 | 10 | .outline .tree-item { 11 | line-height: 1.3; 12 | } 13 | 14 | .outline .tree-item-self { 15 | padding-top: 0.2rem; 16 | padding-bottom: 0.1rem; 17 | padding-left: 0.5rem; 18 | padding-right: 0.3rem; 19 | } 20 | 21 | .outline .tree-item-collapse { 22 | left: 0.1rem; 23 | } 24 | 25 | .outline .tree-item-inner{ 26 | position:relative; 27 | padding-top: 0.2rem; 28 | /* padding-left: 1rem; */ 29 | padding-left: 1.7em; 30 | text-indent: -0.8em; 31 | margin-left: 0.2rem; 32 | /* font-size: 0.9em; */ 33 | } 34 | 35 | .outline .tree-item-children { 36 | margin-left: 0.7rem; 37 | padding-left: 0.5rem; 38 | margin-top: -0.3rem; 39 | padding-top: 0.3rem; 40 | border-left: 1px solid var(--sidebar-marks, var(--background-modifier-border)); 41 | border-radius: 4px; 42 | transition:all 0.5s ease-in-out; 43 | } 44 | 45 | .outline .tree-item-children:hover { 46 | border-left-color: var(--sidebar-marks-hover, var(--background-secondary)); 47 | } 48 | 49 | .outline .collapse-icon + .tree-item-inner { 50 | font-weight: 400; 51 | padding-left: 0.2rem; 52 | /* margin-left: 0rem; */ 53 | /* font-size: 1em; */ 54 | } 55 | 56 | .outline .collapse-icon { 57 | margin-top: 0.2rem; 58 | margin-left: -0.4rem; 59 | margin-right: -0.4rem; 60 | width: 2rem; 61 | } 62 | ``` 63 | 64 | ```css 65 | /* indent wrapped titles outliner*/ 66 | /* included above */ 67 | 68 | /* change font color outline */ 69 | div.collapsible-item-inner { 70 | color: var(--base3); 71 | } 72 | ``` 73 | 74 | ```css 75 | /* Heading counter for outline pane */ 76 | .outline { 77 | counter-reset: rootLayout; 78 | } 79 | .outline .tree-item .tree-item-self .tree-item-inner::before { 80 | content: counters(rootLayout, ".") ". "; 81 | counter-increment: rootLayout; 82 | } 83 | .tree-item-children { 84 | counter-reset: internalLayout; 85 | } 86 | .tree-item-children .tree-item .tree-item-self .tree-item-inner::before { 87 | content: counters(rootLayout, ".") "." counters(internalLayout, ".") ". "; 88 | counter-increment: internalLayout; 89 | } 90 | 91 | /* nested list counting (ex: 1.1, 1.2) */ 92 | /* https://github.com/hipstersmoothie/obsidian-plugin-toc#detailed-nested-ordered-lists */ 93 | ol { 94 | counter-reset: item; 95 | } 96 | 97 | ol li { 98 | display: block; 99 | } 100 | 101 | ol li:before { 102 | content: counters(item, ".") ". "; 103 | counter-increment: item; 104 | padding-right: 5px; 105 | } 106 | ``` 107 | 108 | TO AUTOMATICALLY CONVERT H1 HEADINGS TO CAPITAL LETTERS, 109 | GO TO THE [Headers.md](Headers.md) FILE AND SCROLL DOWN FAIRLY FAR. 110 | -------------------------------------------------------------------------------- /scottkillen/labeled-nav.md: -------------------------------------------------------------------------------- 1 | # labeled-nav 2 | 3 | ```css 4 | .mod-left-split > .workspace-tabs:nth-child(3) .workspace-tab-header-container { 5 | height: auto; 6 | } 7 | .mod-left-split > .workspace-tabs:nth-child(3) .workspace-tab-container-inner { 8 | flex-direction:column; 9 | padding:8px 8px 6px 8px; 10 | } 11 | .mod-left-split > .workspace-tabs:nth-child(3) .workspace-tab-header { 12 | padding:0; 13 | margin-bottom:2px; 14 | height:auto; 15 | } 16 | .mod-left-split > .workspace-tabs:nth-child(3) .workspace-tab-header .workspace-tab-header-inner { 17 | padding:0; 18 | } 19 | .mod-left-split > .workspace-tabs:nth-child(3) .workspace-tab-header .workspace-tab-header-inner-icon { 20 | border-radius:6px; 21 | padding:5px 6px; 22 | margin:0; 23 | width:100%; 24 | } 25 | .mod-left-split > .workspace-tabs:nth-child(3) .workspace-tab-header-inner-icon { 26 | font-size: var(--font-small); 27 | font-weight:500; 28 | display:flex; 29 | align-items:center; 30 | color:var(--text-normal); 31 | } 32 | .mod-left-split > .workspace-tabs:nth-child(3) .workspace-tab-header-inner-icon svg { 33 | margin-right:6px; 34 | } 35 | 36 | .mod-left-split > .workspace-tabs:nth-child(3) .workspace-tab-header[aria-label="File explorer"] .workspace-tab-header-inner-icon:after { 37 | content:"Notes"; 38 | } 39 | .mod-left-split > .workspace-tabs:nth-child(3) .workspace-tab-header[aria-label="Search"] .workspace-tab-header-inner-icon:after { 40 | content:"Search"; 41 | } 42 | .mod-left-split > .workspace-tabs:nth-child(3) .workspace-tab-header[aria-label="Calendar"] .workspace-tab-header-inner-icon:after { 43 | content:"Calendar"; 44 | } 45 | .mod-left-split > .workspace-tabs:nth-child(3) .workspace-tab-header[aria-label*="Graph of"] .workspace-tab-header-inner-icon:after { 46 | content:"Graph"; 47 | } 48 | .mod-left-split > .workspace-tabs:nth-child(3) .workspace-tab-header[aria-label="Search"] .workspace-tab-header-inner-icon:after { 49 | content:"Search"; 50 | } 51 | .mod-left-split > .workspace-tabs:nth-child(3) .workspace-tab-header[aria-label*="Outline of"] .workspace-tab-header-inner-icon:after { 52 | content:"Outline"; 53 | } 54 | .mod-left-split > .workspace-tabs:nth-child(3) .workspace-tab-header[aria-label="Starred"] .workspace-tab-header-inner-icon:after { 55 | content:"Starred"; 56 | } 57 | .mod-left-split > .workspace-tabs:nth-child(3) .workspace-tab-header[aria-label="Dictionary"] .workspace-tab-header-inner-icon:after { 58 | content:"Dictionary"; 59 | } 60 | .mod-left-split > .workspace-tabs:nth-child(3) .workspace-tab-header[aria-label="Tag pane"] .workspace-tab-header-inner-icon:after { 61 | content:"Tags"; 62 | } 63 | .mod-left-split > .workspace-tabs:nth-child(3) .workspace-tab-header[aria-label*="Backlinks for"] .workspace-tab-header-inner-icon:after { 64 | content:"Backlinks"; 65 | } 66 | .mod-left-split > .workspace-tabs:nth-child(3) .workspace-tab-header[aria-label*="Outgoing links from"] .workspace-tab-header-inner-icon:after { 67 | content:"Links"; 68 | } 69 | ``` 70 | 71 | -------------------------------------------------------------------------------- /dmytro-shulha/Sidenotes.md: -------------------------------------------------------------------------------- 1 | ```css 2 | /* Sidenote in line with the main text */ 3 | aside { 4 | float: right; 5 | border: 1px solid lightgrey; 6 | padding: 8px; 7 | padding-top: 0px; 8 | position: relative; 9 | left: 10px; 10 | top: 5px; 11 | width: 300px; /*PB changed from 155px */ 12 | box-shadow: 5px 10px 10px 2px rgba(119, 119, 119, 0.3); 13 | color: var(--text-accent); 14 | font-size: 14px; 15 | border-radius: 4px; 16 | } 17 | ``` 18 | 19 | ```css 20 | /* to put the sidenote in the right gutter, add this rule to the code above */ 21 | margin-right: -20em; 22 | ``` 23 | 24 | ```css 25 | /*-Comments/Asides- source: ITS theme 26 | Syntax to be used in the note: text 27 | and replace … with show or hide or in */ 28 | 29 | /*Show Aside*/ 30 | .aside-show { 31 | text-decoration: unset; 32 | text-align: justify; 33 | font-weight: unset; 34 | float: right; 35 | position: relative; 36 | margin-right: -23em; 37 | margin-bottom: .2em; 38 | clear: right; 39 | width: 300px; /* PB changed from 400 */ 40 | background-color: var(--background-primary-alt); 41 | padding: 0.2em 1em 1em 1em; /* PB changed from padding: 1em >> the 4 values */ 42 | box-shadow: .3em .3em var(--interactive-accent); 43 | font-size: 14.5px; /* PB added this */ 44 | border-radius: 4px; /* PB added this */ 45 | } 46 | 47 | /*Hide Aside and hover to reveal it*/ 48 | .aside-hide { 49 | text-decoration: unset; 50 | text-align: justify; 51 | color: transparent; 52 | font-weight: unset; 53 | float: right; 54 | position: relative; 55 | margin: .5em; 56 | margin-right: -1.8em; 57 | width: 1.5em; 58 | height: 1.5em; 59 | clear: right; 60 | overflow: hidden; 61 | background-color: var(--background-primary-alt); 62 | color: transparent; 63 | } 64 | .aside-hide:before { 65 | display: block; 66 | border-bottom: 2px solid var(--background-modifier-border); 67 | content: "🗨 "; 68 | color: none; 69 | text-shadow: 0 0 0 var(--interactive-accent); 70 | font-size: 12px; 71 | padding-top: .1em; 72 | padding-left: .3em; 73 | } 74 | .aside-hide:hover { 75 | white-space: normal; 76 | text-overflow: unset; 77 | color: unset; 78 | width: 300px; /* PB changed from 400 */ 79 | height: unset; 80 | background-color: var(--background-primary-alt); 81 | padding: 1em; 82 | padding-top: .5em; 83 | z-index: 3; 84 | /*box-shadow: .5em .5em var(--outer-bar);*/ 85 | border-right: 2px solid var(--interactive-accent); 86 | font-size: 14.5px; /* PB added this */ 87 | border-radius: 4px; /* PB added this */ 88 | } 89 | 90 | /*Aside Inside the Note*/ 91 | .aside-in { 92 | text-decoration: none !important; 93 | text-align: justify; 94 | font-weight: unset; 95 | float: right; 96 | position: relative; 97 | margin-bottom: .2em; 98 | clear: right; 99 | width: 18em; 100 | background-color: var(--background-primary-alt); 101 | padding: 1em; 102 | box-shadow: .3em .3em var(--interactive-accent); 103 | z-index: 3; 104 | font-size: 14.5px; /* PB added this */ 105 | border-radius: 4px; /* PB added this */ 106 | } 107 | 108 | .aside-in .internal-embed.is-loaded:not(.image-embed), 109 | .aside-in .markdown-embed { 110 | width:100%; 111 | } 112 | /*Shrink Scrollbar*/ 113 | .aside > ::-webkit-scrollbar { 114 | width: 5px; 115 | } 116 | ``` 117 | -------------------------------------------------------------------------------- /dustinknopoff/list-obsidian-commands.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: List of Obsidian Commands 3 | date: 2021-05-15 4 | taxonomies: 5 | tags: 6 | - dataview 7 | kind: 8 | - plugins 9 | extra: 10 | author: Moonbase59 11 | --- 12 | 13 | I needed a list of currently enabled Obsidian Commands (those in the Command Palette, internal plus plugins). So I thought »Why not do it using Obsidian itself (and Dataview)?« 14 | 15 | ### Commands sorted by internal Command ID 16 | 17 | ```js 18 | const getNestedObject = (nestedObj, pathArr) => { 19 | return pathArr.reduce((obj, key) => 20 | (obj && obj[key] !== 'undefined') ? obj[key] : undefined, nestedObj); 21 | } 22 | 23 | function getHotkey(arr) { 24 | return arr.hotkeys ? [[getNestedObject(arr.hotkeys, [0, 'modifiers'])], 25 | [getNestedObject(arr.hotkeys, [0, 'key'])]].flat(2).join('+').replace('Mod', 'Ctrl') : '–'; 26 | } 27 | 28 | let cmds = dv.array(Object.entries(app.commands.commands)) 29 | .sort(v => v[1].id, 'asc'); 30 | 31 | dv.paragraph(cmds.length + " commands currently enabled.

"); 32 | 33 | dv.table(["Command ID", "Name in current locale", "Hotkeys"], 34 | cmds.map(v => [ 35 | v[1].id, 36 | v[1].name, 37 | getHotkey(v[1]), 38 | ]) 39 | ); 40 | ``` 41 | 42 | 43 | Result: 44 | 45 | ![obsidian-dataview-command-list-by-id](https://forum.obsidian.md/uploads/default/optimized/2X/9/941d1ddfba27d5caab7bc258634ac95fb017525d_2_482x500.png) 46 | 47 | ### Commands sorted by assigned hotkey 48 | 49 | This I missed the most. Just to check if a planned hotkey combo is already taken … 50 | 51 | ```js 52 | const getNestedObject = (nestedObj, pathArr) => { 53 | return pathArr.reduce((obj, key) => 54 | (obj && obj[key] !== 'undefined') ? obj[key] : undefined, nestedObj); 55 | } 56 | 57 | function getHotkey(arr) { 58 | return arr.hotkeys ? [[getNestedObject(arr.hotkeys, [0, 'modifiers'])], 59 | [getNestedObject(arr.hotkeys, [0, 'key'])]].flat(2).join('+').replace('Mod', 'Ctrl') : '–'; 60 | } 61 | 62 | let cmds = dv.array(Object.entries(app.commands.commands)) 63 | .where(v => getHotkey(v[1]) != '–') 64 | .sort(v => v[1].id, 'asc') 65 | .sort(v => getHotkey(v[1]), 'asc'); 66 | 67 | dv.paragraph(cmds.length + " commands with assigned hotkeys.

"); 68 | 69 | dv.table(["Command ID", "Name in current locale", "Hotkeys"], 70 | cmds.map(v => [ 71 | v[1].id, 72 | v[1].name, 73 | getHotkey(v[1]), 74 | ]) 75 | ); 76 | ``` 77 | 78 | 79 | Result: 80 | 81 | ![obsidian-dataview-command-list-by-hotkey](https://forum.obsidian.md/uploads/default/optimized/2X/8/86470033b38fd2b4ca5ec117606d210f2c4d349b_2_479x500.png) 82 | 83 | ### Notes 84 | 85 | 86 | I’m on Linux and this is good enough for me. I leave remapping MacOS keys and/or adding nice `…` tags around the keys (but not the plus signs in between!) as an exercise for the reader. ![wink](https://forum.obsidian.md/images/emoji/apple/wink.png?v=9) 87 | 88 | Anyway, it’s a good check what we have, and could well be a starting point for the [Buttons](https://github.com/shabegom/buttons) and [Obsidian Leaflet 1](https://github.com/valentine195/obsidian-leaflet-plugin) plugins to maybe invoke commands _language-independently_, using their _ID_. Because now we know it an can make a list! 89 | 90 | (Bi- and multilingual people switch Obsidian’s language often, and it sucks that commands called up by their (locale-specific!) _name_ suddenly stop working.) 91 | 92 | [Original Forum Post](https://forum.obsidian.md/t/dataviewjs-snippet-showcase/17847/13) -------------------------------------------------------------------------------- /dmytro-shulha/Check box.md: -------------------------------------------------------------------------------- 1 | # Check box 2 | ```css 3 | /* checkbox alignment */ 4 | .markdown-preview-view .task-list-item-checkbox { 5 | width: 15px; 6 | height: 15px; 7 | top: 0px 8 | } 9 | 10 | /* Apple style checkbox */ 11 | input[type=checkbox] { 12 | vertical-align: middle; 13 | -webkit-appearance: none; 14 | appearance: none; 15 | border-radius: 50%; 16 | border: 1px solid var(--text-faint); 17 | padding: 0; 18 | } 19 | 20 | input[type=checkbox]:focus{ 21 | outline:0; 22 | } 23 | 24 | input[type=checkbox]:checked { 25 | background-color: var(--text-accent-hover); 26 | border: 1px solid var(--text-accent-hover); 27 | background-position: center; 28 | background-size: 70%; 29 | background-repeat: no-repeat; 30 | background-image: url('data:image/svg+xml; utf8, '); 31 | .markdown-preview-view .task-list-item-checkbox { margin-left:-25px; } 32 | .markdown-preview-view .task-list-item { padding-inline-start:25px; } 33 | 34 | /* Checkbox as per Molecule theme */ 35 | .markdown-preview-view .task-list-item-checkbox { 36 | -webkit-appearance: none; 37 | box-sizing: border-box; 38 | border: 1px solid var(--text-muted); 39 | border-radius: 2px; 40 | position: relative; 41 | width: 1.3em; 42 | height: 1.3em; 43 | margin: 12px; 44 | filter: none; 45 | outline: none; 46 | margin-right: 4px; 47 | margin-bottom: 1px; 48 | cursor: pointer; 49 | vertical-align: center; 50 | } 51 | 52 | .markdown-preview-view .task-list-item-checkbox:checked { 53 | border: none; 54 | background-color: var(--base2); 55 | } 56 | 57 | .markdown-preview-view .task-list-item-checkbox:checked::before { 58 | content: ' '; 59 | position: absolute; 60 | background-color: white; 61 | left: 2px; 62 | top: 2px; 63 | right: 2px; 64 | bottom: 2px; 65 | -webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 14 14\'%3E%3Cpolygon points=\'5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039\'%3E%3C/polygon%3E%3C/svg%3E'); 66 | } 67 | 68 | /* Remove strikethrough from completed to-do lists/checkbox */ 69 | .markdown-preview-view ul > li.task-list-item.is-checked { 70 | text-decoration: none; 71 | color: inherit; 72 | } 73 | ``` 74 | 75 | ```css 76 | /* CHECKBOX: Green / Red color */ 77 | 78 | .markdown-preview-view .task-list-item-checkbox{ 79 | -webkit-appearance: none; 80 | box-sizing: border-box; 81 | border: 1px solid var(--text-muted); 82 | border-radius: 2px; 83 | position: relative; 84 | width: 1.3em; 85 | height: 1.3em; 86 | margin: 0; 87 | outline: none; 88 | margin-right: 4px; 89 | margin-bottom: 2px; 90 | cursor: pointer; 91 | vertical-align: baseline; 92 | 93 | background-color: #d068688f; 94 | } 95 | 96 | .markdown-preview-view .task-list-item-checkbox:checked { 97 | background-color: #68d0688f; 98 | } 99 | ``` -------------------------------------------------------------------------------- /dmytro-shulha/Block quote inline.md: -------------------------------------------------------------------------------- 1 | # Block quote inline 2 | 3 | May be very useful to create block references to a certain paragraphs and formulas. 4 | 5 | ```css 6 | /* Source by Murf: https://gist.github.com/GitMurf/bb68e9f48556b80d9a694eb0fd1742fe */ 7 | /* INLINE BLOCK REFS v1.0 */ 8 | :root { 9 | --block-ref-color: yellow; 10 | --block-ref-link-color: transparent; 11 | } 12 | .markdown-preview-view span[src*="^"].internal-embed:not(.image-embed) > div.markdown-embed { 13 | border-top: none; 14 | border-bottom-color: var(--block-ref-color); 15 | border-bottom-style: dashed; 16 | padding: 0px; 17 | margin: 0px; 18 | } 19 | 20 | .markdown-preview-view span[src*="^"].internal-embed:not(.image-embed), 21 | .markdown-preview-view span[src*="^"].internal-embed > .markdown-embed, 22 | .markdown-preview-view span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content, 23 | .markdown-preview-view span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view, 24 | .markdown-preview-view span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer, 25 | .markdown-preview-view span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div, 26 | .markdown-preview-view span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > p, 27 | .markdown-preview-view span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer > div > div { 28 | display: inline; 29 | padding: 0px !important; 30 | margin: 0px !important; 31 | } 32 | 33 | /* Convert bullet list block refs inline (remove the bullet) */ 34 | .markdown-preview-view span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer ul, 35 | .markdown-preview-view span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li, 36 | .markdown-preview-view span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer li > div { 37 | display: inline; 38 | } 39 | .markdown-preview-view span[src*="^"].internal-embed:not(.image-embed) > div.markdown-embed > div.markdown-embed-content > div.markdown-preview-view > div.markdown-preview-section ul { 40 | padding: 0px !important; 41 | margin: 0px !important; 42 | } 43 | 44 | /* Hide the block ref link unless hovered */ 45 | .markdown-preview-view span[src*="^"].internal-embed:not(.image-embed) > div.markdown-embed > div.markdown-embed-link { 46 | display: none; 47 | color: var(--block-ref-link-color); 48 | top: 0px; 49 | left: 20px; 50 | } 51 | /* Show the block ref link on hover */ 52 | .markdown-preview-view span[src*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover > div.markdown-embed-link { 53 | display: block; 54 | } 55 | .markdown-preview-view span[src*="^"].internal-embed:not(.image-embed) > div.markdown-embed:hover { 56 | border-bottom-style: solid; 57 | } 58 | 59 | .markdown-preview-view span[src*="^"].internal-embed:not(.image-embed) > div.markdown-embed > div.markdown-embed-content > div.markdown-preview-view > div.markdown-preview-section { 60 | min-height: 0px !important; 61 | } 62 | /* Remove line breaks on multi-line block refs */ 63 | .markdown-preview-view span[src*="^"].internal-embed > .markdown-embed > .markdown-embed-content > .markdown-preview-view > .markdown-preview-sizer br { 64 | /*display: none;*/ 65 | } 66 | ``` 67 | -------------------------------------------------------------------------------- /scottkillen/typography.md: -------------------------------------------------------------------------------- 1 | # typography 2 | 3 | ```css 4 | /* TYPOGRAPHY */ 5 | 6 | .subtle { 7 | color: var(--h6); 8 | letter-spacing: 0.02em; 9 | font-weight: var(--h6-weight); 10 | font-size: var(--h6); 11 | } 12 | 13 | .small-caps { 14 | font-variant: small-caps; 15 | } 16 | 17 | /* Colors */ 18 | 19 | .red { 20 | color: var(--red) 21 | } 22 | 23 | .orange { 24 | color: var(--orange) 25 | } 26 | 27 | .yellow { 28 | color: var(--yellow) 29 | } 30 | 31 | .green { 32 | color: var(--green) 33 | } 34 | 35 | .cyan { 36 | color: var(--cyan) 37 | } 38 | 39 | .blue { 40 | color: var(--blue) 41 | } 42 | 43 | .purple { 44 | color: var(--purple) 45 | } 46 | 47 | .pink { 48 | color: var(--pink) 49 | } 50 | 51 | 52 | /* Strikethrough */ 53 | 54 | .cm-strikethrough, del { 55 | color: var(--text-faint); 56 | text-decoration: line-through; 57 | transition: color 220ms cubic-bezier(0.45,0.05,0.55,0.95); 58 | } 59 | 60 | .cm-strikethrough:hover, del:hover { 61 | text-decoration: none; 62 | color: var(--text-normal); 63 | transition: color 220ms cubic-bezier(0.45,0.05,0.55,0.95); 64 | } 65 | 66 | /*~ Ordered List / Number List ~*/ 67 | 68 | ol > li::marker, 69 | .cm-s-obsidian span.cm-formatting-list { 70 | font-weight: var(--font-regular); 71 | font-size: var(--font-scale-0-5); 72 | color: var(--text-muted); 73 | font-family: var(--font-monospace); 74 | } 75 | 76 | ol { 77 | list-style-type: decimal; 78 | } 79 | ol ol { 80 | list-style-type: lower-alpha; 81 | } 82 | ol ol ol { 83 | list-style-type: decimal; 84 | } 85 | ol ol ol ol { 86 | list-style-type: lower-alpha; 87 | } 88 | ol ol ol ol ol { 89 | list-style-type: decimal; 90 | } 91 | ol ol ol ol ol ol { 92 | list-style-type: lower-alpha; 93 | } 94 | ol ol ol ol ol ol ol { 95 | list-style-type: decimal; 96 | } 97 | ol ol ol ol ol ol ol ol { 98 | list-style-type: lower-alpha; 99 | } 100 | ol ol ol ol ol ol ol ol ol { 101 | list-style-type: decimal; 102 | } 103 | ol ol ol ol ol ol ol ol ol ol { 104 | list-style-type: lower-alpha; 105 | } 106 | ol ol ol ol ol ol ol ol ol ol ol { 107 | list-style-type: decimal; 108 | } 109 | ol ol ol ol ol ol ol ol ol ol ol ol { 110 | list-style-type: lower-alpha; 111 | } 112 | ol ol ol ol ol ol ol ol ol ol ol ol ol { 113 | list-style-type: decimal; 114 | } 115 | ol ol ol ol ol ol ol ol ol ol ol ol ol ol { 116 | list-style-type: lower-alpha; 117 | } 118 | ol ol ol ol ol ol ol ol ol ol ol ol ol ol ol { 119 | list-style-type: decimal; 120 | } 121 | ol ol ol ol ol ol ol ol ol ol ol ol ol ol ol ol { 122 | list-style-type: lower-alpha; 123 | } 124 | /*~ Unordered List / Bullet List ~*/ 125 | 126 | ul { 127 | list-style-type: disc; 128 | } 129 | ul ul { 130 | list-style-type: circle; 131 | } 132 | ul ul ul { 133 | list-style-type: square; 134 | } 135 | ul ul ul ul { 136 | list-style-type: disc; 137 | } 138 | ul ul ul ul ul { 139 | list-style-type: circle; 140 | } 141 | ul ul ul ul ul ul { 142 | list-style-type: square; 143 | } 144 | ul ul ul ul ul ul ul { 145 | list-style-type: disc; 146 | } 147 | ul ul ul ul ul ul ul ul { 148 | list-style-type: circle; 149 | } 150 | ul ul ul ul ul ul ul ul ul { 151 | list-style-type: square; 152 | } 153 | ul ul ul ul ul ul ul ul ul ul { 154 | list-style-type: disc; 155 | } 156 | ul ul ul ul ul ul ul ul ul ul ul { 157 | list-style-type: circle; 158 | } 159 | ul ul ul ul ul ul ul ul ul ul ul ul { 160 | list-style-type: square; 161 | } 162 | ul ul ul ul ul ul ul ul ul ul ul ul ul { 163 | list-style-type: disc; 164 | } 165 | ul ul ul ul ul ul ul ul ul ul ul ul ul ul { 166 | list-style-type: circle; 167 | } 168 | ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul { 169 | list-style-type: square; 170 | } 171 | 172 | .callout-title-inner { 173 | font-family: 'Century Gothic'; 174 | } 175 | ``` 176 | 177 | -------------------------------------------------------------------------------- /dmytro-shulha/Search.md: -------------------------------------------------------------------------------- 1 | # Search 2 | ```css 3 | /* Global search results */ 4 | /* global search results: reduce gap between note title (bold) and hor. line above */ 5 | .search-result { 6 | word-break: break-word; 7 | margin-bottom: -4px; 8 | } 9 | 10 | /* global search match highlight color */ 11 | .search-result-file-matched-text { 12 | background-color: lightgrey; 13 | } 14 | 15 | /* global search result: color of count squarelet */ 16 | .pane-list-item:hover .pane-list-item-ending-flair { 17 | background-color: var(--base2); 18 | color: white; 19 | } 20 | 21 | /* Local search match highlight */ 22 | /* Local (= in note) search match highlight color change in Edit mode */ 23 | .cm-s-obsidian span.obsidian-search-match-highlight { 24 | background-color: lightgrey; /* was fuchsia */ 25 | color: var(--text-normal); 26 | } 27 | 28 | /* Local (= in note) search match highlight color change in Preview mode */ 29 | .markdown-preview-view .search-highlight > div { 30 | background-color: darkgrey; 31 | } 32 | 33 | /* reduce global search result margin - Blue Topaz */ 34 | .search-result-file-match{ 35 | padding: 0px 0px; 36 | } 37 | 38 | /* margin color for box for global search input */ 39 | .search-input-container input.search-input { 40 | border: 1px solid var(--base2); 41 | } 42 | 43 | .search-result-file-matched-text { 44 | color: var(--text-muted); 45 | } 46 | 47 | .search-input { 48 | display: block; 49 | margin: 0 auto 10px auto; 50 | width: calc(100% - 20px); 51 | } 52 | 53 | .nav-action-button > svg { 54 | width: 17px; 55 | height: 17px; 56 | } 57 | 58 | /* align top tab header with header title - Obsdn-dark-RMX */ 59 | .workspace-leaf { 60 | display: flex; 61 | flex-direction: column; 62 | position: relative; 63 | will-change: transform; 64 | min-height: 20px; 65 | } 66 | .workspace-leaf-content[data-type='backlink'] .view-content { 67 | padding: 0; 68 | overflow: hidden; 69 | display: flex; 70 | flex-direction: column; 71 | min-height: 20px; 72 | } 73 | .nav-header { 74 | padding: 8px 4px 1px 8px; 75 | } 76 | .nav-buttons-container { 77 | display: flex; 78 | justify-content: left; 79 | padding-bottom: 2px; 80 | border-bottom: 1px solid var(--base3); 81 | margin-bottom: 2px; 82 | } 83 | 84 | .nav-action-button > svg { 85 | width: 17px; 86 | height: 17px; 87 | } 88 | 89 | .nav-action-button { 90 | color: var(--text-muted); 91 | padding: 0 20px 0 10px; 92 | cursor: pointer; 93 | } 94 | 95 | .nav-files-container { 96 | flex-grow: 1; 97 | overflow-y: auto; 98 | padding-left: 7px; /* reduce to 0 for more space */ 99 | padding-bottom: 10px; 100 | margin-bottom: 10px; 101 | } 102 | 103 | /* Don't know what this does */ 104 | .cm-highlight, mark { 105 | background: orange; 106 | } 107 | ``` 108 | 109 | ## search results are waayyy too big 110 | ```css 111 | /* NOTE: I picked this up from somehwere, have not used it. I use "Condense line spacing ……" 112 | 113 | /* search results are waayyy too big */ 114 | /* These settings relate to American Typewriter font */ 115 | .search-result-file-matches { 116 | margin-bottom: 5px; 117 | } 118 | 119 | .search-result-file-title { 120 | font-size: .83rem; 121 | font-weight: 600; 122 | line-height: 1.2rem; 123 | padding-left: 1.2rem !important; 124 | padding-right: 1.2rem !important; 125 | } 126 | 127 | .search-result-file-match { 128 | font-size: 12px; 129 | } 130 | 131 | .search-result-file-title, 132 | .search-result-file-match { 133 | padding: 0; 134 | } 135 | 136 | .search-result-container { 137 | padding: 10px 5px; 138 | } 139 | 140 | .search-result-container.mod-global-search { 141 | padding: 10px 15px 15px 8px; 142 | } 143 | 144 | .search-result-container.mod-global-search .search-result { 145 | padding-bottom: 5px; 146 | } 147 | 148 | .search-empty-state { 149 | font-size: 12px; 150 | margin: -10px 5px 15px 5px; 151 | } 152 | ``` 153 | -------------------------------------------------------------------------------- /scottkillen/print.md: -------------------------------------------------------------------------------- 1 | # print 2 | 3 | ```css 4 | @media print { 5 | 6 | /* Setting content width, unsetting floats and margins */ 7 | .markdown-preview-view { 8 | width: 100%; 9 | margin: 0; 10 | float: none; 11 | } 12 | 13 | /* Set margins */ 14 | @page { 15 | margin: 1in; 16 | } 17 | 18 | /* Fonts */ 19 | body { 20 | font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif; 21 | line-height: 1.3; 22 | } 23 | 24 | h1, h2, h3, h4, h5, h6 { 25 | font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; 26 | } 27 | 28 | th { 29 | font-weight: bold !important; 30 | } 31 | 32 | /* Colors */ 33 | body, th, em, strong, del, h1, h2, h3, h4, h5, pre, code, .token, 34 | .markdown-preview-view ul>li.task-list-item.is-checked, 35 | ol>li::marker, ul>li::marker, blockquote, .admonition { 36 | background: white !important; 37 | color: black !important; 38 | } 39 | 40 | .admonition { 41 | border-left: none !important; 42 | box-shadow: none !important; 43 | } 44 | 45 | .admonition-title-icon { 46 | color: gray !important; 47 | } 48 | 49 | del { 50 | color: slategray !important; 51 | } 52 | 53 | h6 { 54 | background: white !important; 55 | color: darkslategray !important; 56 | } 57 | 58 | hr { 59 | border-color:gray !important; 60 | } 61 | 62 | /* Tables */ 63 | 64 | table, thead, th, tbody, td { 65 | border: none !important; 66 | } 67 | 68 | tr { 69 | border-bottom: lightgray dotted 1px; 70 | color: black !important; 71 | } 72 | 73 | tr:nth-child(odd){ 74 | background: white; 75 | } 76 | 77 | tr:nth-child(even){ 78 | background: gainsboro; 79 | } 80 | 81 | /* Page Breaks */ 82 | a { 83 | page-break-inside:avoid; 84 | } 85 | 86 | blockquote, .admonition { 87 | page-break-inside: avoid; 88 | } 89 | 90 | h1, h2, h3, h4, h5, h6 { 91 | page-break-after:avoid; 92 | page-break-inside:avoid; 93 | } 94 | 95 | img { 96 | page-break-inside:avoid; 97 | page-break-after:avoid; 98 | } 99 | 100 | table, pre { 101 | page-break-inside:avoid; 102 | } 103 | 104 | ul, ol, dl, div.math-block { 105 | page-break-before:avoid; 106 | } 107 | 108 | /* Displaying link color and link behaviour */ 109 | a:link, a:visited, a { 110 | background: transparent; 111 | color: black; 112 | text-decoration: underline; 113 | text-align: left; 114 | } 115 | 116 | a[href^=http]:after { 117 | content:" < " attr(href) "> "; 118 | } 119 | 120 | a:after > img { 121 | content: ""; 122 | } 123 | 124 | article a[href^="#"]:after { 125 | content: ""; 126 | } 127 | 128 | a.external-link::after { 129 | content:" <" attr(href) "> "; 130 | font-style:italic; 131 | font-size: 0.9em; 132 | } 133 | 134 | /** 135 | * Making intergated videos disappear, and removing the iframes' whitespace to zero. 136 | */ 137 | 138 | .entry iframe, ins { 139 | display: none; 140 | width: 0 !important; 141 | height: 0 !important; 142 | overflow: hidden !important; 143 | line-height: 0pt !important; 144 | white-space: nowrap; 145 | } 146 | 147 | .embed-youtube, .embed-responsive { 148 | position: absolute; 149 | height: 0; 150 | overflow: hidden; 151 | } 152 | 153 | /* Hide unnecessary Elements */ 154 | 155 | body.minimal-rel-preview:not(.ig-lists-preview) .markdown-preview-view ul ul, 156 | body.minimal-rel-preview:not(.ig-lists-preview) .markdown-preview-view ol ul, 157 | body.minimal-rel-preview:not(.ig-lists-preview) .markdown-preview-view ul ol, 158 | body.minimal-rel-preview:not(.ig-lists-preview) .markdown-preview-view ol ol { 159 | border: none; 160 | } 161 | 162 | .task-list-item a[href="#task"] { 163 | display: none; 164 | } 165 | 166 | /* Hide scrollbars */ 167 | ::-webkit-scrollbar { 168 | display:none; 169 | } 170 | 171 | /* Type Rhythm */ 172 | p + p { 173 | text-indent: 1em; 174 | } 175 | 176 | p { 177 | margin: 0 auto; 178 | } 179 | 180 | dl + p, ol + p, ul + p, div.math-block { 181 | margin-top: 2.8rem; 182 | } 183 | 184 | } 185 | ``` 186 | 187 | -------------------------------------------------------------------------------- /awesome-obsidian/media-grid.md: -------------------------------------------------------------------------------- 1 | # media-grid 2 | 3 | ```css 4 | /* 5 | IMPORTANT 6 | For information on requirements and how to use this snippet, see its original repo: 7 | https://github.com/zremboldt/obsidian-media-grid 8 | 9 | This snippet requires Contextual Typography 2.2.1+ 10 | https://github.com/mgmeyers/obsidian-contextual-typography 11 | */ 12 | 13 | :root { 14 | --content-base-width: 45rem; 15 | } 16 | 17 | /* ----------------------------------------- */ 18 | /* Handle overall content width */ 19 | /* ----------------------------------------- */ 20 | 21 | /* Wrapper with padding keeps content from bumping the edges */ 22 | .markdown-preview-view.is-readable-line-width { 23 | padding-inline: 30px; 24 | } 25 | 26 | /* Container controlling overall max content width */ 27 | .markdown-preview-view.is-readable-line-width .markdown-preview-section { 28 | width: 100%; 29 | max-width: var(--content-max-width, 45rem); /* Second value is fallback in case user isn't using Style settings */ 30 | } 31 | 32 | /* All children of overall container are divs */ 33 | .markdown-preview-view.is-readable-line-width .markdown-preview-section > div { 34 | margin-inline: auto; 35 | width: min(var(--content-base-width), 100%); 36 | } 37 | 38 | /* Specific children of overall container that contain media */ 39 | .markdown-preview-view.is-readable-line-width .markdown-preview-section div[data-is-embed] { 40 | width: 100%; 41 | } 42 | 43 | /* ----------------------------------------- */ 44 | /* Make media items display in rows */ 45 | /* ----------------------------------------- */ 46 | 47 | /* p tags wrap each row */ 48 | .markdown-preview-view.is-readable-line-width .markdown-preview-section div[data-is-embed] > p { 49 | display:grid; 50 | grid-template-columns:repeat(auto-fit, minmax(0, 1fr)); 51 | grid-gap: var(--media-grid-gap, 7px); 52 | margin: 0; 53 | } 54 | 55 | /* Remove breaks from the document flow */ 56 | .markdown-preview-view.is-readable-line-width .markdown-preview-section div[data-is-embed] > p br { 57 | display: none; 58 | } 59 | 60 | /* Media items sourced from your vault are wrapped in a span – media linked from the web is not wrapped */ 61 | .markdown-preview-view.is-readable-line-width .markdown-preview-section div[data-is-embed] > p > span { 62 | display: flex; 63 | } 64 | 65 | /* Apply this to all img/video tags in a row whether they're wrapped in a span or not */ 66 | .markdown-preview-view.is-readable-line-width .markdown-preview-section div[data-is-embed] > p img, 67 | .markdown-preview-view.is-readable-line-width .markdown-preview-section div[data-is-embed] > p video { 68 | flex: 1; 69 | align-self: stretch; 70 | object-fit: cover; 71 | border-radius: var(--media-border-radius, 4px); 72 | } 73 | 74 | /* Create gaps between rows */ 75 | .markdown-preview-view.is-readable-line-width .markdown-preview-section div[data-is-embed] + div[data-is-embed] { 76 | margin-top: var(--media-grid-gap, 7px); 77 | } 78 | 79 | /* ----------------------------------------- */ 80 | /* Style settings */ 81 | /* ----------------------------------------- */ 82 | 83 | /* @settings 84 | name: Media Grid Snippet 85 | id: media-grid-snippet 86 | settings: 87 | - 88 | id: content-max-width 89 | title: Grid width 90 | description: Set the max width of your grid layouts. 91 | type: variable-select 92 | allowEmpty: false 93 | default: var(--content-base-width) 94 | options: 95 | - 96 | label: Base width 97 | value: var(--content-base-width) 98 | - 99 | label: Small 100 | value: calc(var(--content-base-width) + 5%) 101 | - 102 | label: Medium 103 | value: calc(var(--content-base-width) + 10%) 104 | - 105 | label: Large 106 | value: calc(var(--content-base-width) + 20%) 107 | - 108 | label: Full width 109 | value: 100% 110 | - 111 | id: media-grid-gap 112 | title: Grid gap 113 | description: Set the gap size between items in your grid layouts. 114 | type: variable-number-slider 115 | format: px 116 | default: 7 117 | min: 0 118 | max: 80 119 | step: 1 120 | - 121 | id: media-border-radius 122 | title: Border radius 123 | description: Set the border radius of your images and videos. 124 | type: variable-number-slider 125 | format: px 126 | default: 4 127 | min: 0 128 | max: 40 129 | step: 1 130 | */ 131 | ``` 132 | 133 | -------------------------------------------------------------------------------- /dmytro-shulha/Settings.md: -------------------------------------------------------------------------------- 1 | # Settings window/modal (CMD/CTRL+,) 2 | ```css 3 | /* make the window bigger and more compact - courtesy: pseudometa */ 4 | .modal.mod-settings { 5 | height: 92.5%; 6 | width: 90%; 7 | } 8 | .modal-close-button { 9 | top: 0px; 10 | right:3px; 11 | } 12 | .vertical-tab-content-container { 13 | padding-bottom: 0 !important; 14 | padding-top: 1em !important; 15 | padding-left: 1em !important; 16 | padding-right: 1em !important; 17 | height: 40em !important; 18 | } 19 | .vertical-tab-header { 20 | height: 40em !important; 21 | } 22 | .setting-item { 23 | padding-top: 0.5em; 24 | padding-bottom: 0.5em; 25 | } 26 | .setting-item-description{ 27 | font-size: 0.85em; 28 | line-height: 1.5em; 29 | } 30 | .setting-item-name{ 31 | font-size: 0.95em; 32 | line-height: 1.5em; 33 | } 34 | .mod-cta, .dropdown{ 35 | font-size: 0.85em !important; 36 | line-height: 1.5em; 37 | } 38 | .horizontal-tab-content, .vertical-tab-content { 39 | background:var(--background-primary); 40 | padding-bottom:100px; 41 | } 42 | .modal.mod-settings .vertical-tab-header { 43 | background:var(--background-secondary); 44 | padding-top: 0; 45 | } 46 | .vertical-tab-header-group-title { 47 | color:var(--text-normal); 48 | font-size:0.8em; 49 | letter-spacing:0.1em; 50 | font-weight:600; 51 | padding-bottom:0; 52 | } 53 | .vertical-tab-nav-item { 54 | padding:3px 3px 3px 0.9em; 55 | color:var(--text-muted); 56 | background:var(--background-secondary); 57 | } 58 | ``` 59 | 60 | ```css 61 | /* make the plug-ins window bigger and more compact - courtesy: pseudometa */ 62 | .modal.mod-community-plugin { 63 | height: 93%; 64 | max-width: unset; 65 | width: 96%; 66 | } 67 | .community-plugin-item { 68 | padding-top: 0.1em; 69 | padding-left: 0.9em; 70 | padding-right: 0.3em; 71 | padding-bottom: 0.1em; 72 | line-height: 1.2em; 73 | margin-top: 0.1em; 74 | } 75 | .community-plugin-search-summary.u-muted{ 76 | font-weight: 600; 77 | padding-left: 0.9em; 78 | } 79 | .community-plugin-author, 80 | .community-plugin-desc, 81 | .community-plugin-version { 82 | font-size: 0.85em !important; 83 | line-height: 1.3em; 84 | color: var(--text-muted); 85 | } 86 | .community-plugin-author, 87 | .community-plugin-version{ 88 | font-style: italic; 89 | } 90 | .community-plugin-name { 91 | line-height: 1.2em; 92 | font-size: 0.9em; 93 | font-weight: 500; 94 | } 95 | .flair.mod-pop { 96 | top: 4px; 97 | } 98 | .install{ 99 | display:none; 100 | } 101 | .community-plugin-downloads::before, 102 | .community-plugin-downloads-text { 103 | content: "↓"; 104 | font-size: 0.9em; 105 | color: var(--text-muted); 106 | } 107 | ``` 108 | 109 | # Settings buttons colour 110 | ```css 111 | /* Obsidian settings, change color of: */ 112 | /* the enable/disable buttons */ 113 | .checkbox-container.is-enabled { 114 | background-color: var(--base2); 115 | } 116 | 117 | /* "Check for updates" button */ 118 | button.mod-cta { 119 | background-color: var(--base2); 120 | } 121 | 122 | button.mod-cta:hover { 123 | background-color: var(--base3); 124 | } 125 | 126 | /* "Installed" button in 3rd party plug-ins tab */ 127 | span.flair.mod-pop { 128 | background-color: var(--base2); 129 | } 130 | 131 | /* tab "3rd party plugins" font color Browse button */ 132 | .setting-item-control button { 133 | background-color: var(--base2) !important; 134 | color: var(--base3); 135 | } 136 | 137 | .setting-item-control button:hover { 138 | background-color: var(--base5) !important; 139 | color: var(--base3); 140 | } 141 | 142 | /* change color of buttons in Settings > Appearance > Themes > Browse */ 143 | .modal button:not(.mod-cta):not(.mod-warning) { 144 | background-color: var(--base2); 145 | } 146 | 147 | /* In tab "Appearance" set color of "refresh" and "Open themes folder" icons */ 148 | .setting-editor-extra-setting-button.clickable-icon { 149 | color: var(--base2); 150 | } 151 | 152 | /* link color in the settings e.g. in description of plug-in */ 153 | a { 154 | color: var(--base3); 155 | } 156 | 157 | a:hover { 158 | color: var(--base3); 159 | } 160 | 161 | /* dropdown box color, excl. arrow */ 162 | .dropdown { 163 | background-color: var(--text-accent); 164 | color: white; 165 | border: none; 166 | } 167 | 168 | .setting-item-control .dropdown:hover { 169 | background-color: rgb(202, 89, 86); 170 | color: white; 171 | border: none; 172 | } 173 | 174 | /* dropdown box arrow color 175 | /* NOTE: in the long line of code below, the color is designated by 23ffffff. ffffff = white. 176 | /* You can change it to any color using a hex code */ 177 | .dropdown { 178 | background-image: url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E); 179 | } 180 | ``` 181 | -------------------------------------------------------------------------------- /dmytro-shulha/Lists - (un)ordered.md: -------------------------------------------------------------------------------- 1 | # Lists - (un)ordered 2 | 3 | ```css 4 | /* Reduce indentation in bullet lists */ 5 | ol { 6 | padding-inline-start: 18px; 7 | } 8 | ul { 9 | padding-inline-start: 18px; 10 | list-style-type: disc; 11 | } 12 | 13 | /* Long bullet list: connect the same levels of bullets with vertical "lines" */ 14 | .cm-hmd-list-indent .cm-tab, ul ul { position: relative; } 15 | .cm-hmd-list-indent .cm-tab::before, ul ul::before { 16 | content:''; 17 | border-left: 1px solid rgba(0, 122, 255, 0.25); 18 | position: absolute; 19 | } 20 | 21 | .cm-hmd-list-indent .cm-tab::before { left: 0; top: -5px; bottom: -4px; 22 | } 23 | 24 | ul ul::before { left: -11px; top: 0; bottom: 0; /* change "left:" value for align of vert. line */ 25 | } 26 | 27 | /* Edit mode unordered list dash rendered as dot for WYSIWYG */ 28 | /* I prefer "Turn -lists into bullets as you type as per Typora */ 29 | /* Unordered lists: turn into bullets as you type, as per Typora */ 30 | ```css 31 | span.cm-formatting-list-ul { 32 | visibility: hidden !important; 33 | } 34 | 35 | span.cm-formatting-list-ul:after { 36 | content: '• '; /* ITS theme; for Blue Topaz */ 37 | margin-left: -12px; 38 | color: var(--accent); /* ITS theme; for Blue Topaz --text-normal */ 39 | visibility: visible !important; 40 | } 41 | ``` 42 | 43 | ## Stylized lists 44 | ```css 45 | /*From Gabroel - Obsidian #css-themes channel*/ 46 | * {margin: 0; padding: 0; list-style: none;} 47 | ul li:not(.task-list-item) { 48 | margin-left: 15px; 49 | position: relative; 50 | padding-left: 5px; 51 | list-style-position: inside; 52 | border-left: 5px solid yellow; 53 | box-shadow: 0 0 0 0.5px hotpink; 54 | border-radius: 10px; 55 | } 56 | 57 | ol { 58 | counter-reset: cupcake; 59 | padding-left: 5px; 60 | } 61 | ol li { 62 | counter-increment: cupcake; 63 | margin-left: 15px; 64 | position: relative; 65 | padding-left: 5px; 66 | list-style-position: inside; 67 | border-left: 5px solid hotpink; 68 | box-shadow: 0 0 0 0.5px hotpink; 69 | border-radius: 10px; 70 | } 71 | 72 | ol li:before { 73 | content: counters(cupcake, '.') ' '; 74 | /* Whatever custom styles you want here */ 75 | color: hotpink; 76 | font-weight: bold; 77 | display: inline-block; 78 | white-space: pre; 79 | } 80 | 81 | /*Collapse indicator*/ 82 | .markdown-preview-view .collapse-indicator { 83 | margin-left: -46px; 84 | padding: 0 18px; 85 | } 86 | 87 | /*heading collapse indicator*/ 88 | .markdown-preview-view .heading-collapse-indicator { 89 | margin-left: -25px; 90 | padding: 0 8px; 91 | } 92 | 93 | div.heading-collapse-indicator.collapse-indicator.collapse-icon:hover{ 94 | color: var(--text-accent); 95 | } 96 | .markdown-preview-section:not(.is-collapsed) svg.right-triangle{ 97 | color: var(--text-accent); 98 | } 99 | 100 | /*outline collapse indicator*/ 101 | div.collapsible-item-collapse.collapse-icon{ 102 | color: var(--text-accent); 103 | } 104 | ``` 105 | 106 | ## Stylized lists - auto-adjust width & auto-counter 107 | ```css 108 | /*From Gabroel - Obsidian #css-themes channel*/ 109 | /*video demo https://discord.com/channels/686053708261228577/702656734631821413/784922140465692712 */ 110 | 111 | * {margin: 0; padding: 0; list-style: none;} 112 | 113 | li > p:not(.task-list-item) { 114 | display: inline; 115 | margin-top: 0; 116 | margin-bottom: 0; 117 | } 118 | 119 | ul li:not(.task-list-item) { 120 | margin-left: 15px; 121 | border-left: 5px solid gray; 122 | box-shadow: 0 0 0 0.5px gray; 123 | border-radius: 10px; 124 | width: fit-content; 125 | margin-bottom: 8px; 126 | padding-left: 5px; 127 | padding-right: 5px; 128 | position: relative; 129 | list-style: none; 130 | display: list-item; 131 | height: fit-content; 132 | } 133 | 134 | ul li:not(.task-list-item)::before { 135 | content: '•'; 136 | color: #8ec07c; 137 | display: inline-block; 138 | width: 1em; 139 | position: relative; 140 | margin-left: 0em; 141 | font-weight: bold; 142 | text-shadow: 0 0 0.5em #8ec07c; 143 | } 144 | 145 | ol { 146 | counter-reset: cupcake; 147 | padding-left: 5px; 148 | } 149 | ol li { 150 | counter-increment: cupcake; 151 | margin-left: 15px; 152 | position: relative; 153 | padding-left: 5px; 154 | list-style-position: inside; 155 | border-left: 5px solid gray; 156 | box-shadow: 0 0 0 0.5px darkgray; 157 | border-radius: 10px; 158 | width: fit-content; 159 | margin-bottom: 8px; 160 | padding-right: 5px; 161 | } 162 | 163 | ol li::before { 164 | content: counters(cupcake, '.') '. '; 165 | /* Whatever custom styles you want here */ 166 | color: gray; 167 | font-weight: bold; 168 | display: inline-block; 169 | white-space: pre; 170 | } 171 | 172 | 173 | /*Collapse indicator*/ 174 | .markdown-preview-view .collapse-indicator { 175 | margin-left: -46px; 176 | padding: 0 18px; 177 | } 178 | 179 | /*heading collapse indicator*/ 180 | .markdown-preview-view .heading-collapse-indicator { 181 | margin-left: -25px; 182 | padding: 0 8px; 183 | } 184 | 185 | div.heading-collapse-indicator.collapse-indicator.collapse-icon:hover{ 186 | color: var(--text-accent); 187 | } 188 | .markdown-preview-section:not(.is-collapsed) svg.right-triangle{ 189 | color: var(--text-accent); 190 | } 191 | ``` 192 | -------------------------------------------------------------------------------- /dustinknopoff/dataview-table-as-cards.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Dataview Table as Cards 3 | date: 2021-05-20 4 | taxonomies: 5 | tags: 6 | - css 7 | kind: 8 | - styling 9 | extra: 10 | author: yungbananapeel 11 | --- 12 | 13 | ![](https://cdn.discordapp.com/attachments/840286238928797736/845044771621699634/dataview_library.jpg) 14 | 15 | ```css 16 | /* READ ME */ 17 | /* 18 | This css has been built to be used with dataview tables, and assumes you are not using dataviewjs. But this can easily be adapted to list view. Because this css is not supported by a js backend, text and backgrounds will not autosize (i think so anyway, i haven't found a way. if you do share on discord @yungbananapeel#2624) 19 | 20 | I'm not that great as using css, so there is probably a lot of redundancies in the file. The Main thing to understand about using the css to manipulate the tables is the structure of a DV table. 21 | 22 | Any content about a page you want returned is delivered as a child element of a span, that is nested inside of a TD.The TD's are the individual containers that make up the columns of a row. if you want to change the structure of a table on top of this file, its important to remember all the relationships between the TR>TD>SPAN>CONTENT. 23 | 24 | An an example images and links are returned as & tags as children of a div, but strings are returned as the content of the span, not as content of a child element.like so: 25 | 26 | cool link 27 | picture 28 | 29 | YOUR TEXT HERE 30 | 31 | TABLE STRUCTURE 32 |
33 | 34 | 35 | 36 | 37 | 38 | EACH TR CORRESPONDS TO A SINGLE PAGE RETURNED FROM YOUR QUERY. 39 | 46 | 47 | 48 |
40 | EACH TD CORRESPONDS TO A COLUMN 41 | THEY ARE ORDERED TOP TO BOTTOM, IN ORDER FROM LEFT TO RIGHT 42 | 43 | THIS SPAN IS WHERE YOUR RETURNS INFO IS (links, images, text) 44 | 45 |
49 |
50 | */ 51 | /* COLORS */ 52 | .CardView { 53 | --Name-bg: red; 54 | -- 55 | } 56 | /* Hide Table Head */ 57 | .CardView thead{ 58 | display: none; 59 | line-height: 0; 60 | height: 0px; 61 | } 62 | CardView table { 63 | border-collapse: collapse; 64 | border-spacing: 0; 65 | width: 100%; 66 | } 67 | 68 | 69 | /* Table wide Changes */ 70 | /* .CardView tbody { 71 | display: flex; 72 | flex-direction: row; 73 | flex-wrap: wrap; 74 | } */ 75 | /* Turn all spans into flex boxes*/ 76 | .CardView span { 77 | display: flex; 78 | float: left; 79 | margin: 0; 80 | padding: 0; 81 | max-width: 350px; 82 | } 83 | /* Create a card Shape from the Table Row */ 84 | .CardView tr { 85 | display: block; 86 | text-align: justify; 87 | float: left; 88 | padding: 0; 89 | margin-right: 60px; 90 | height: 475px; 91 | width: 310px; 92 | background-color: rgb(36, 32, 32) !important; 93 | border: 5px solid rgb(0, 0, 0) !important; 94 | box-shadow: 10px 11px 19px -1px #070202; 95 | } 96 | 97 | .CardView td { 98 | display: block; 99 | min-height: 50px; 100 | padding: 15px; 101 | } 102 | /* First Column Box*/ 103 | .CardView td:first-child { 104 | min-height: 75px !important ; 105 | padding: auto; 106 | background-color: rgba(255, 255, 255, 0.863); 107 | border: 5px solid rgb(255, 255, 255); 108 | } 109 | /* First Column link */ 110 | .CardView td:first-child span a { 111 | text-overflow: ellipsis !important; 112 | word-wrap: break-word !important; 113 | text-overflow: ellipsis !important; 114 | display: block; 115 | line-height: 1em; 116 | max-height: 2em; 117 | font-size: 23px; 118 | font-weight: bold !important; 119 | color: rgb(207, 17, 17) !important; 120 | } 121 | 122 | /* Second Column */ 123 | /* column bg */ 124 | .CardView td:nth-child(2) { 125 | z-index: 2; 126 | background-color: rgb(226, 75, 75); 127 | width: 175px; 128 | display: block; 129 | float: left; 130 | line-height: 1em; 131 | max-height: 2em; 132 | } 133 | /* column link */ 134 | .CardView td:nth-child(2) a { 135 | color: rgb(206, 211, 189) !important; 136 | font-weight: bold !important; 137 | width: 60px; 138 | word-wrap: break-word; 139 | text-overflow: ellipsis !important; 140 | } 141 | 142 | /* third column */ 143 | .CardView td:nth-child(3) { 144 | max-height: 50px !important; 145 | color: rgb(255, 81, 81) !important; 146 | z-index: -1; 147 | width: 125px; 148 | line-height: 1em; 149 | max-height: 2em; 150 | display: block; 151 | float: right; 152 | background-color: rgb(250, 246, 0); 153 | } 154 | /* third column links */ 155 | .CardView td:nth-child(3) span a { 156 | color: rgb(255, 81, 81) !important; 157 | text-align: right; 158 | width: 100%; 159 | overflow: hidden; 160 | display: block; 161 | float: right; 162 | font-weight: bold !important; 163 | word-wrap: break-word; 164 | text-overflow: ellipsis !important; 165 | } 166 | /* third column strings */ 167 | .CardView td:nth-child(3) span{ 168 | color: rgb(255, 81, 81) !important; 169 | text-align: right; 170 | width: 100%; 171 | overflow: hidden; 172 | display: block; 173 | float: right; 174 | font-weight: bold !important; 175 | word-wrap: break-word; 176 | text-overflow: ellipsis !important; 177 | } 178 | 179 | /* Last Column Image */ 180 | .CardView td span img { 181 | display: block; 182 | width: 300px; 183 | height: 300px; 184 | object-fit: contain; 185 | margin: 0 auto; 186 | padding: 0; 187 | margin: 20px auto; 188 | } 189 | 190 | ``` -------------------------------------------------------------------------------- /dmytro-shulha/Block quote.md: -------------------------------------------------------------------------------- 1 | # Block quote 2 | ```css 3 | /* for editor */ 4 | .cm-quote { 5 | color: var(--text-normal) !important; 6 | } 7 | 8 | /* for preview */ 9 | .markdown-preview-view blockquote { 10 | background-color: #d3d3d3; 11 | border: 0px solid; 12 | border-color: red !important; 13 | border-left-width: 5px !important; 14 | border-radius: 0 8px 8px 0; 15 | font-family: ; 16 | color: black; 17 | font-size: 15px; 18 | line-height: 1.5em; 19 | margin: 0 10px; 20 | padding-top: 2px; 21 | padding-bottom: 13px; 22 | } 23 | 24 | /* Vertical centering of text in blockquote */ 25 | blockquote { 26 | display: flex; 27 | flex-direction: column; 28 | justify-content: center; 29 | } 30 | ``` 31 | 32 | ## Blockquote as per Obsidianite 33 | /* in Edit mode */ 34 | ```css 35 | .cm-quote { 36 | color: var(--text-normal) !important; 37 | } 38 | 39 | div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-quote { 40 | color: transparent !important; 41 | display: inline !important; 42 | } 43 | 44 | div:not(.CodeMirror-activeline)>.HyperMD-quote { 45 | border-left: 4px solid var(--text-selection); 46 | border-color: var(--text-accent); 47 | border-top-right-radius: 5px; 48 | border-bottom-right-radius: 5px; 49 | border-top-left-radius: 3px; 50 | border-bottom-left-radius: 3px; 51 | line-height: 1.3em; 52 | padding: 12px 0px 15px 8.5px; /* or 12px 15px 15px 8.5px ? */ 53 | margin-right: 15px !important; 54 | margin-left: 15px !important; /* or 5px ? */ 55 | border-top: transparent; 56 | border-bottom: transparent; 57 | background: linear-gradient(120deg, var(--background-secondary), var(--text-faint)); 58 | display: inline-block; 59 | } 60 | 61 | div:not(.CodeMirror-activeline)>.HyperMD-quote::before { 62 | content: ''; 63 | position: absolute; 64 | top: 0; 65 | left: 0px; 66 | height: 2px; 67 | width: 60%; 68 | background: linear-gradient(90deg, var(--text-accent), var(--text-faint)); 69 | } 70 | 71 | div:not(.CodeMirror-activeline)>.HyperMD-quote::after { 72 | content: ''; 73 | position: absolute; 74 | bottom: 0; 75 | left: 0px; 76 | height: 2px; 77 | width: 25%; 78 | background: linear-gradient(90deg, var(--text-accent), var(--text-faint)); 79 | } 80 | ``` 81 | 82 | /* in Preview mode */ 83 | ```css 84 | .markdown-preview-view blockquote { 85 | position: relative; 86 | padding: 1rem 2rem 1rem 3rem; 87 | color: white; /* #bdbdbd */ 88 | line-height: 1.4em; 89 | border-top-right-radius: 5px; 90 | border-bottom-right-radius: 5px; 91 | border-top-left-radius: 3px; 92 | border-bottom-left-radius: 3px; 93 | margin-bottom: 2em; 94 | border-left: 4px rgba(31, 178, 129, 0.9) solid; 95 | border-top: transparent; 96 | border-bottom: transparent; 97 | background: linear-gradient(135deg, var(--base4), var(--base3)); 98 | border-right: transparent; 99 | display: inline-block; 100 | margin-right: 0 !important; 101 | } 102 | 103 | .markdown-preview-view blockquote::before { 104 | content: ''; 105 | position: absolute; 106 | top: 0; 107 | left: 0px; 108 | height: 2px; 109 | width: 60%; 110 | background: linear-gradient(90deg, rgba(31, 178, 129, 0.9), var(--base3)); 111 | } 112 | 113 | .markdown-preview-view blockquote::after { 114 | content: ''; 115 | position: absolute; 116 | bottom: 0; 117 | left: 0px; 118 | height: 2px; 119 | width: 25%; 120 | background: linear-gradient(90deg, rgba(31, 178, 129, 0.9), var(--base3)); 121 | } 122 | 123 | .markdown-preview-view blockquote p { 124 | position: relative; 125 | } 126 | ``` 127 | 128 | ## Quotation marks 129 | ```css 130 | /* from https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/39 */ 131 | /* Add quotation character before quote */ 132 | blockquote:before { 133 | font: 14px/20px italic Times, serif; 134 | content: "“"; 135 | font-size: 3em; 136 | line-height: 0.1em; 137 | vertical-align: -0.4em; 138 | } 139 | blockquote p { display: inline; } 140 | ``` 141 | 142 | /* as per Obsidianite */ 143 | /* in Edit mode */ 144 | ```css 145 | div:not(.CodeMirror-activeline)>.HyperMD-quote>span:first-of-type::before { 146 | content: '“' !important; 147 | font: 14px/20px italic Times, serif; 148 | font-weight: 700; 149 | font-size: 3em; 150 | color: var(--text-accent); 151 | left: 3px; 152 | top: 15px; 153 | position: relative; 154 | } 155 | ``` 156 | 157 | /* in Preview mode */ 158 | ```css 159 | .markdown-preview-view blockquote p:first-of-type::before { 160 | content: '“'; 161 | font: 14px/20px italic Times, serif; 162 | font-weight: 700; 163 | font-size: 3em; 164 | color: var(--text-accent); 165 | position: absolute; 166 | top: 0.1rem; 167 | left: -1.8rem; 168 | } 169 | ``` 170 | 171 | ## Signature: name of the person quoted 172 | ```css 173 | Put this code in the CSS sheet (courtesy Gabroel) 174 | /* signature inside the blockquote*/ 175 | .signature { 176 | font-family: "SignPainter"; /**Choose a cursive font */ 177 | text-align: right; 178 | } 179 | 180 | Then, in the note, at the end of the blockquote put this: 181 | `
- Name
` 182 | 183 | if you want the font size of the signature bigger, use this instead: 184 | `
- Name
` 185 | ``` 186 | 187 | OR, without the css code and the div rule, you can simply write at the end of the blockquote: 188 | 189 | ` — Name ` 190 | 191 | which puts the name in italics, though unstylised, and thus differentiates it from the quote. 192 | -------------------------------------------------------------------------------- /dmytro-shulha/WYSIWYG.md: -------------------------------------------------------------------------------- 1 | # WYSIWYG 2 | ```css 3 | /**************************************/ 4 | /* 5. WYSIWYG: imitation in Edit mode */ 5 | /**************************************/ 6 | /* Source: various people on forum, incl. Piotr and pihentagy 7 | /**************************************/ 8 | /* Editor font: make thicker so it is like in Preview 9 | /* Remove markdown clutter 10 | /* Unordered lists: turn into bullets as you type, as per Typora 11 | /* Underline H1 heading in Edit mode 12 | /* Blockquote in edit mode with left border rendered instead of ">" 13 | /* Tag pills in edit mode 14 | /* Coloured headings for editor and preview, same font-weight in Edit & Preview 15 | /* ============================================================================*/ 16 | 17 | /* For Edit mode use same font and font size as for Preview mode */ 18 | 19 | /* Editor font: make thicker so it is like in Preview */ 20 | .cm-s-obsidian .CodeMirror-line * { 21 | -webkit-font-smoothing: auto; 22 | } 23 | 24 | /* Remove markdown clutter */ 25 | div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting, 26 | div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-string.cm-url, 27 | div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-link, 28 | div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-link:not(.cm-link), 29 | div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-comment, 30 | div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-hmd-barelink, 31 | div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-tag { 32 | display: none !important; 33 | } 34 | 35 | /* except numbered list */ 36 | div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-list { 37 | display: inline !important; 38 | } 39 | 40 | /* except list markers */ span.cm-formatting-list, 41 | /*code block backticks */ span.cm-formatting-code-block.cm-hmd-codeblock, 42 | /* optionally header hashes */ /*span.cm-formatting-header 43 | { display: inline !important; } 44 | 45 | /* and task checkboxes */ 46 | span.cm-formatting-task { display: inline !important; font-family: monospace; } 47 | 48 | /* highlight (==) not visible anymore if not active line */ 49 | div:not(.CodeMirror-activeline) > .CodeMirror-line .cm-formatting-highlight.cm-highlight { 50 | font-size: 0; 51 | } 52 | 53 | /* Unordered lists: turn into bullets as you type, as per Typora */ 54 | span.cm-formatting-list-ul { 55 | visibility: hidden !important; 56 | } 57 | 58 | span.cm-formatting-list-ul:after { 59 | content: '• '; 60 | margin-left: -12px; 61 | color: var(--text-normal); 62 | visibility: visible !important; 63 | } 64 | 65 | /* Underline H1 heading in Edit mode */ 66 | .cm-s-obsidian pre.HyperMD-header-1:after { 67 | content: ""; 68 | position: absolute; 69 | bottom: 5px; 70 | left: 5px; 71 | width: calc(100% - 10px); 72 | height: 1px; 73 | background: var(--text-accent); /* rgb(123, 108, 214); */ 74 | } 75 | 76 | /* Blockquote: in edit mode with left border rendered instead of > */ 77 | div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting.cm-formatting-quote, 78 | div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-hmd-indent-in-quote { 79 | display: inline !important; 80 | color: transparent !important; 81 | } 82 | 83 | div:not(.CodeMirror-activeline)>.HyperMD-quote { 84 | background-color:rgb(238, 234, 234); 85 | border-left: 3px solid var(--text-selection); 86 | border-color: red !important; 87 | border-radius: 0 8px 8px 0; 88 | font-size: 17px; 89 | line-height: 1.5em; 90 | margin-left: 5px; 91 | padding: 12px 10px 15px 8.5px; 92 | display: inline-block; 93 | } 94 | 95 | /* Tag pills in edit mode */ 96 | div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hashtag-end:before { 97 | content: ''; 98 | } 99 | .tag, div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hashtag-end { 100 | background-color: rgba(123, 108, 214); /* wasvar(--text-accent); */ 101 | border: none; 102 | color: white !important; 103 | font-size: 14px; 104 | padding: 0px 8px; 105 | padding-top: -2px; 106 | padding-bottom: 3px; 107 | text-align: center; 108 | text-decoration: none !important; 109 | display: inline-block; 110 | margin: 1px 1px; 111 | cursor: pointer; 112 | border-radius: 14px; 113 | } 114 | 115 | .tag:hover { 116 | color: white; 117 | background-color: var(--text-accent-hover); 118 | } 119 | 120 | /* Coloured headings for editor and preview, same font-weight in Edit & Preview */ 121 | .cm-s-obsidian .cm-header-1, 122 | .markdown-preview-view h1 { 123 | font-weight: 450; 124 | color: rgb(123, 108, 214); /* was(115, 98, 205); */ 125 | } 126 | 127 | .cm-s-obsidian .cm-header-2, 128 | .markdown-preview-view h2 { 129 | font-weight: 450; 130 | color: rgb(123, 108, 214); 131 | } 132 | 133 | .cm-s-obsidian .cm-header-3, 134 | .markdown-preview-view h3 { 135 | font-weight: 450; 136 | color: rgb(123, 108, 214); 137 | } 138 | 139 | .cm-s-obsidian .cm-header-4, 140 | .markdown-preview-view h4 { 141 | font-weight: 450; 142 | color: rgb(123, 108, 214); 143 | } 144 | 145 | .cm-s-obsidian .cm-header-5, 146 | .markdown-preview-view h5 { 147 | font-weight: 450; 148 | color: rgb(123, 108, 214); 149 | } 150 | 151 | .cm-s-obsidian .cm-header-6, 152 | .markdown-preview-view h6 { 153 | font-weight: 450; 154 | color: rgb(123, 108, 214); 155 | } 156 | ``` 157 | 158 | ```css 159 | /* Show line numbers only on hover */ 160 | .theme-dark 161 | .cm-s-obsidian .CodeMirror-linenumber { 162 | opacity : 0; 163 | } 164 | 165 | .cm-s-obsidian .CodeMirror-linenumber:hover { 166 | opacity: 1; 167 | } 168 | ``` 169 | -------------------------------------------------------------------------------- /dustinknopoff/birthdays.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Upcoming Birthdays 3 | date: 2021-05-09 4 | taxonomies: 5 | tags: 6 | - dataview 7 | kind: 8 | - plugins 9 | extra: 10 | author: Moonbase59 11 | --- 12 | 13 | Here’s a rather robust and flexible list of upcoming birthdays that 14 | 15 | - shows **link**, **next birthday**, and **age** someone will turn to 16 | - has a configurabe **date range** (from today, for a “natural language” duration) 17 | - sorts by **next birthday** 18 | - uses **locale settings** from the language _Obsidian is set to_ 19 | - doesn’t choke when crossing the year boundary 20 | - has YAML **searchterm** configuration 21 | - has YAML “natural language” **duration** configuration; “odd” data like `duration: 0.5 years` will be auto-translated to `6 months` (or `6 Monate` in German) 22 | - has YAML **date format** configuration (yay!) 23 | - has a configurable **info line** above the table (can be disabled) 24 | 25 | ![obsidian-dataview-upcoming-birthdays](https://forum.obsidian.md/uploads/default/optimized/2X/4/4f70d33649d6c45a7ac9c86b3226b0cb3f021dc0_2_690x487.png) 26 | 27 | 28 | Upcoming birthdays with English settings, custom date format and info line 29 | 30 | **The technically-minded** may also find interesting: 31 | 32 | - utility functions that can be used for table data 33 | - custom function for “where” 34 | - comparator function for “sort” 35 | - easily translatable “info line” with parameters 36 | - how I need to _undo_ Dataview’s YAML pre-parsing of dates and durations 37 | 38 | ![obsidian-dataview-upcoming-birthdays-de](https://forum.obsidian.md/uploads/default/optimized/2X/5/5d6ccde0ae290500f38c930b2c91142f45f27304_2_690x483.png) 39 | 40 | 41 | Upcoming birthdays with German settings, custom date format and info line 42 | 43 | ## Requirements 44 | 45 | 46 | - _Dataview 0.3.3+_ 47 | - `moment.js` (comes with Obsidian) 48 | - Notes to be included must have a birthday as `YYYY-MM-DD` in the frontmatter: 49 | 50 | birthday: 1959-07-19 51 | 52 | 53 | - The note _using_ this script **must** have the parameters `searchterm` and a (more or less) “natural language” `duration` in the frontmatter: 54 | 55 | #searchterm: "#family or #friends" 56 | searchterm: '"People"' 57 | duration: 1 year 58 | 59 | 60 | - The note using this script **_can_** have an additional `dateformat` in the frontmatter: 61 | 62 | dateformat: "ddd, D MMMM YYYY" 63 | 64 | 65 | If left out or empty, it will default to `YYYY-MM-DD`. 66 | 67 | ## Code 68 | 69 | ### YAML frontmatter example 70 | 71 | ```yaml 72 | #searchterm: "#family or #friends" 73 | searchterm: '"People"' 74 | duration: 1 year 75 | dateformat: "ddd, D MMMM YYYY" 76 | ``` 77 | 78 | ### `dataviewjs` code 79 | 80 | This contains some utility functions that can be used in your table, like `nextBirthday()`, `turns()`. 81 | 82 | ```js 83 | var start = moment().startOf('day'); 84 | var end = moment(start).add(dv.current().duration); 85 | var dateformat = "YYYY-MM-DD"; 86 | if (dv.current().dateformat) { dateformat = dv.current().dateformat; } 87 | 88 | // info text above table, {0}=duration, {1}=start date, {2}=end date 89 | // parameters can be left out, or the string empty 90 | var infotext = "Upcoming birthdays for {0} from now ({1} – {2})

"; 91 | 92 | //====================================================================== 93 | 94 | function nextBirthday(birthday) { 95 | // Get person’s next birthday on or after "start" 96 | // returns a moment 97 | 98 | // need to "unparse" because DV has already converted YAML birthday to DateTime object 99 | // shouldn’t harm if already a string 100 | var bday = moment(birthday.toString()); 101 | var bdayNext = moment(bday).year(start.year()); 102 | if (bdayNext.isBefore(start, 'day')) { 103 | bdayNext.add(1, "year"); 104 | } 105 | return bdayNext; 106 | } 107 | 108 | function turns(birthday) { 109 | // Get the age in years a person will turn to on their next birthday 110 | 111 | // need to "unparse" because DV has already converted YAML birthday to DateTime object 112 | // shouldn’t harm if already a string 113 | var bday = moment(birthday.toString()); 114 | return nextBirthday(birthday).diff(bday, 'years'); 115 | } 116 | 117 | function showBirthday(birthday) { 118 | // Determine if this birthday is in the range to be shown 119 | // including the start date, excluding the end date 120 | // because that comes from a duration calculation 121 | // for use with "where", returns true or false 122 | 123 | if (birthday) { 124 | // need to "unparse" because DV has already converted YAML birthday to DateTime object 125 | // shouldn’t harm if already a string 126 | var bday = moment(birthday.toString()); 127 | var bdayNext = nextBirthday(birthday); 128 | if (bdayNext.isBetween(start, end, 'day', '[)')) { 129 | return true; 130 | } else { 131 | return false; 132 | } 133 | } else { 134 | return false; 135 | } 136 | } 137 | 138 | function sortByNextBirthday(a, b) { 139 | // comparator function for "sort" 140 | 141 | if (nextBirthday(a).isBefore(nextBirthday(b))) { 142 | return -1; 143 | } 144 | if (nextBirthday(a).isAfter(nextBirthday(b))) { 145 | return 1; 146 | } 147 | // they’re equal 148 | return 0; 149 | } 150 | 151 | 152 | //====================================================================== 153 | 154 | dv.paragraph(infotext.format(moment.duration(dv.current().duration.toString()).humanize(), start.format(dateformat), end.format(dateformat))); 155 | 156 | dv.table( 157 | ["Name", "Birthday", "Turns"], 158 | dv.pages(dv.current().searchterm) 159 | // use a function to see if this birthday is in range to be shown 160 | .where(p => showBirthday(p.birthday)) 161 | // use a comparator function to sort by next birthday 162 | .sort(p => p.birthday, 'asc', sortByNextBirthday) 163 | .map(p => [ 164 | p.file.link, 165 | p.birthday ? nextBirthday(p.birthday).format(dateformat) : '–', 166 | turns(p.birthday) 167 | ]) 168 | ); 169 | ``` 170 | 171 | ## Notes 172 | 173 | 174 | - Dataview actually _parses_ the cell content, so if you for example set the date format to `D. MMMM`, you’ll get large vertical spacing. This is because DV _thinks_ something like `17. May` must be an _ordered list item_ and parses it accordingly. Which in turn will ruin your vertical spacing. 175 | See [0.3.3: table item converts to ordered list, ruining vertical spacing · Issue #199 · blacksmithgu/obsidian-dataview · GitHub 1](https://github.com/blacksmithgu/obsidian-dataview/issues/199). 176 | 177 | - Using durations > 1 year (like `2 years`) _work_, but don’t make much sense. The table will only display a person’s _next_ birthday. So no duplicates. 178 | 179 | [Original Forum Post](https://forum.obsidian.md/t/dataviewjs-snippet-showcase/17847/6) -------------------------------------------------------------------------------- /dustinknopoff/people-nearby.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Show family members friends and places that are nearby 3 | date: 2021-05-08 4 | taxonomies: 5 | tags: 6 | - dataview 7 | kind: 8 | - plugins 9 | extra: 10 | author: Moonbase59 11 | --- 12 | 13 | I love location data, maps, and visualizing stuff. When I plan to travel or visit a friend or family member, I love to see “what’s near” in each person or location note. Automatically linking places and people together, so to say. 14 | 15 | ![](https://forum.obsidian.md/uploads/default/original/2X/c/cd1e190d4115a6935a5429fee51683d41cc34739.png) 16 | 17 | * If I visit a friend, I can check if there are other friends or places of interest nearby, and we could maybe visit them together. 18 | * I can check if other friends are near enough to do something together, maybe meet for a barbeque. 19 | * When sightseeing, I won’t miss nearby friends, business contacts, favourite restaurants or other sights anymore. 20 | 21 | ## Goals 22 | - Never miss anything nearby anymore. 23 | - Have this dataview available as a template so it can be in every person, business contact, and place-of-interest note and automatically show me what’s near this place. 24 | - No more people and location notes without location data (easily be copied from Google Maps or the like). 25 | 26 | ## Requirements 27 | 28 | - All people/location notes must have a 29 | 30 | ```yaml 31 | location: [lat, lon] 32 | ``` 33 | 34 | entry in the YAML frontmatter. (This syntax has something to do with YAML & JS data structure and easy parsing. The sequence [lat, lon] has been chosen for practical reasons: People are used to it and it can easily be copied from Google Maps and others.) 35 | - _Dataview 0.3.0+_ installed. 36 | - `moment.js` available (it currently is). 37 | - Distance units of **m**, **km**, **yd** and **mi** must be usable and easy to switch. 38 | - Distances must be calculated as correct straight-line distances, taking into account that Earth is not a perfect sphere but a rotational ellipsoid. 39 | - Distances must also be available as (approximate; for speed and offline use) driving distances. 40 | - Distances shall be shown with the unit appended but internally numeric, for easy calculation/comparison. 41 | - Numbers shall be formatted *according to the language currently set in Obsidian* (`4,096.1` vs `4.096,1`). The OS’s system setting shall only be used if all else fails. 42 | - Date & time strings must be easily formatable however I wish, defaulting to ISO-8601 (`2021-05-08T10:34:05+02:00`). 43 | - Very long note title links shall optionally be shortened in Dataview table views, using my [dataview-shorten-links.css snippet](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/152). 44 | - Tags (from frontmatter only, a current Dataview restriction) shall be shown in one (comma- or blank-)separated string, not as a list. 45 | - The list shall be sorted by distance from “here” (i.e., this note). 46 | - The distance values shall be clickable and lead to the Google Maps Route Planner, destination already filled in, and start point taken from the current location. 47 | - Above the table, a text line shall show the currently set “nearby” radius as well as the selected unit of measurement (`within 100 km driving distance, within 50 mi straight-line distance`), so we later know what’s actually shown in the table. 48 | 49 | ## The Code 50 | 51 | ```js 52 | // Nearby Family Members, Friends and Places 53 | // 2021-05-15 - Matthias C. Hormann (Moonbase59) 54 | 55 | // set parameters (to be supplied via YAML frontmatter, eventually) 56 | // DV 0.3.3 interprets "500000 m" as a Luxon duration, 57 | // so we have to put nearby: '"500000 m"' and remove the ". 58 | let nearby = dv.current().nearby.replace(/['"]+/g, ''); 59 | let unit = nearby.split(' ')[1]; 60 | let radius = nearby.split(' ')[0]; 61 | let origin = dv.current().location; 62 | 63 | // search term as used in dv.pages() 64 | // use "#tags" or '"folder/subfolder"' for a folder 65 | let searchterm = dv.current().searchterm; 66 | 67 | //====================================================================== 68 | 69 | function getDistance(origin, destination, unit='m') { 70 | // return distance in selected unit (m,km,yd,mi) 71 | var factor = 1.0; 72 | switch (unit) { 73 | case 'm': 74 | factor = 1.0; 75 | break; 76 | case 'km': 77 | factor = 1000.0; 78 | break; 79 | case 'yd': 80 | factor = 0.9144; 81 | break; 82 | case 'mi': 83 | factor = 1609.344; 84 | break; 85 | default: 86 | factor = 1.0; 87 | console.warn("getDistance: Invalid unit '%s', using 'm'. Valid units are: m,km,yd,mi.",unit); 88 | } 89 | 90 | var lon1 = toRadian(origin[1]), 91 | lat1 = toRadian(origin[0]), 92 | lon2 = toRadian(destination[1]), 93 | lat2 = toRadian(destination[0]); 94 | 95 | var deltaLat = lat2 - lat1; 96 | var deltaLon = lon2 - lon1; 97 | 98 | var a = Math.pow(Math.sin(deltaLat/2), 2) + Math.cos(lat1) * Math.cos(lat2) * Math.pow(Math.sin(deltaLon/2), 2); 99 | var c = 2 * Math.asin(Math.sqrt(a)); 100 | var EARTH_RADIUS = 6371000; // 6,371 km in metres 101 | return c * EARTH_RADIUS / factor; 102 | } 103 | 104 | function toRadian(degree) { 105 | return degree*Math.PI/180; 106 | } 107 | 108 | function getDrivingDistance(origin, destination, unit='m') { 109 | // PREDICTED, using a factor. 110 | // Much faster, and no need for Internet access. 111 | // The U.S. predict 1.417, based on statistical analysis. 112 | // For Germany, I’ve found 1.3 a good value (comparing w/ Google Maps "best route") 113 | var factor = 1.3; 114 | return getDistance(origin, destination, unit) * factor; 115 | } 116 | 117 | //====================================================================== 118 | 119 | // Show what we will display. 120 | dv.paragraph("List shows nearby places (within " + radius + " " + unit + " driving distance)."); 121 | dv.paragraph("

"); 122 | 123 | // get the pages 124 | let pages = dv.pages(searchterm) 125 | .where(p => p.location && 126 | // must be >0 so we don’t catch ourselves! 127 | getDrivingDistance(origin, p.location, unit) > 0.0 && 128 | getDrivingDistance(origin, p.location, unit) <= radius) 129 | .sort(p => getDistance(origin, p.location, unit)); 130 | 131 | // create table 132 | dv.table(["Name", "Tags", "Distance*"], 133 | pages.map(p => [ 134 | // The name 135 | p.file.link, 136 | // tags (show '–' if none defined) 137 | (p.file.etags ? p.file.etags.join(' ') : '–'), 138 | // straight-line distance 139 | /* 140 | getDistance(origin, p.location, unit) 141 | .toLocaleString(moment.locale(), {maximumFractionDigits: 1}) + " " + unit, 142 | */ 143 | // predicted driving distance and Google Maps Route Planner Link 144 | (getDrivingDistance(origin, p.location, unit) 145 | .toLocaleString(moment.locale(), {maximumFractionDigits: 1}) + " " + unit) 146 | .link('https://www.google.com/maps/dir/?api=1&dir_action=navigate&destination=' + p.location[0] + ',' + p.location[1]), 147 | ]) 148 | ); 149 | 150 | // show a small legend 151 | dv.paragraph("* Approximate driving distance; when clicked, opens a new Google Maps Route Planner window."); 152 | ``` 153 | 154 | [Original Forum Post](https://forum.obsidian.md/t/dataviewjs-snippet-showcase/17847/2) -------------------------------------------------------------------------------- /Default.md: -------------------------------------------------------------------------------- 1 | # Default Obsidian Theme 2 | 3 | ```css 4 | /* @settings 5 | 6 | name: Obsidian Default Theme 7 | id: obsidian-default-theme 8 | settings: 9 | - 10 | id: heading-fonts 11 | title: Fonts 12 | type: heading 13 | level: 1 14 | collapsed: true 15 | - 16 | id: default-font 17 | title: Base Font 18 | type: variable-text 19 | default: '"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' 20 | - 21 | id: mermaid-font 22 | title: Mermaid Font 23 | type: variable-text 24 | default: '"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' 25 | - 26 | id: reveal-font 27 | title: Reveal Font 28 | type: variable-text 29 | default: '"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' 30 | - 31 | id: font-monospace 32 | title: Monospace Font 33 | description: Used for codeblocks, tables, etc. 34 | type: variable-text 35 | default: '"Source Code Pro", monospace' 36 | 37 | - 38 | id: heading-translucency 39 | title: Translucency 40 | type: heading 41 | level: 1 42 | collapsed: true 43 | - 44 | id: opacity-translucency-light 45 | title: Light Theme Translucency 46 | type: variable-number-slider 47 | default: 0.6 48 | min: 0 49 | max: 1 50 | step: 0.01 51 | - 52 | id: opacity-translucency-dark 53 | title: Dark Theme Translucency 54 | type: variable-number-slider 55 | default: 0.75 56 | min: 0 57 | max: 1 58 | step: 0.01 59 | 60 | - 61 | id: heading-colors-background 62 | title: Background Colors 63 | type: heading 64 | level: 1 65 | collapsed: true 66 | - 67 | id: background-primary 68 | title: Background Primary 69 | type: variable-themed-color 70 | opacity: false 71 | format: hex 72 | default-light: '#ffffff' 73 | default-dark: '#202020' 74 | - 75 | id: background-primary-alt 76 | title: Background Primary (alt) 77 | type: variable-themed-color 78 | opacity: false 79 | format: hex 80 | default-light: '#f5f6f8' 81 | default-dark: '#1a1a1a' 82 | - 83 | id: background-secondary 84 | title: Background Secondary 85 | type: variable-themed-color 86 | opacity: false 87 | format: hex 88 | default-light: '#f2f3f5' 89 | default-dark: '#161616' 90 | - 91 | id: background-secondary-alt 92 | title: Background Secondary (alt) 93 | type: variable-themed-color 94 | opacity: false 95 | format: hex 96 | default-light: '#e3e5e8' 97 | default-dark: '#000000' 98 | - 99 | id: background-modifier-border 100 | title: 'Background Modifier: Border' 101 | type: variable-themed-color 102 | opacity: true 103 | format: rgb 104 | default-light: '#dddddd' 105 | default-dark: '#333333' 106 | - 107 | id: background-modifier-form-field 108 | title: 'Background Modifier: Form Field' 109 | type: variable-themed-color 110 | opacity: true 111 | format: rgb 112 | default-light: '#ffffffff' 113 | default-dark: '#0000004d' 114 | - 115 | id: background-modifier-form-field-highlighted 116 | title: 'Background Modifier: Form Field (highlighted)' 117 | type: variable-themed-color 118 | opacity: true 119 | format: rgb 120 | default-light: '#ffffffff' 121 | default-dark: '#00000038' 122 | - 123 | id: background-modifier-box-shadow 124 | title: 'Background Modifier: Box Shadow' 125 | type: variable-themed-color 126 | opacity: true 127 | format: rgb 128 | default-light: '#0000001a' 129 | default-dark: '#0000004d' 130 | - 131 | id: background-modifier-success 132 | title: 'Background Modifier: Success' 133 | type: variable-themed-color 134 | opacity: true 135 | format: rgb 136 | default-light: '#A4E7C3' 137 | default-dark: '#197300' 138 | - 139 | id: background-modifier-error 140 | title: 'Background Modifier: Error' 141 | type: variable-themed-color 142 | opacity: false 143 | format: hex 144 | alt-format: 145 | - 146 | id: background-modifier-error-rgb 147 | format: rgb-values 148 | default-light: '#990000' 149 | default-dark: '#3d0000' 150 | - 151 | id: background-modifier-error-hover 152 | title: 'Background Modifier: Error (hover)' 153 | type: variable-themed-color 154 | opacity: true 155 | format: rgb 156 | default-light: '#bb0000' 157 | default-dark: '#470000' 158 | - 159 | id: background-modifier-cover 160 | title: 'Background Modifier: Cover' 161 | type: variable-themed-color 162 | opacity: true 163 | format: rgb 164 | default-light: '#000000cc' 165 | default-dark: '#000000cc' 166 | 167 | - 168 | id: heading-colors-text 169 | title: Text Colors 170 | type: heading 171 | level: 1 172 | collapsed: true 173 | - 174 | id: text-accent 175 | title: 'Text: Accent' 176 | type: variable-themed-color 177 | opacity: false 178 | format: hex 179 | default-light: '#705dcf' 180 | default-dark: '#7f6df2' 181 | - 182 | id: text-accent-hover 183 | title: 'Text: Accent (hover)' 184 | type: variable-themed-color 185 | opacity: false 186 | format: hex 187 | default-light: '#7a6ae6' 188 | default-dark: '#8875ff' 189 | - 190 | id: text-normal 191 | title: 'Text: Normal' 192 | type: variable-themed-color 193 | opacity: false 194 | format: hex 195 | default-light: '#2e3338' 196 | default-dark: '#dcddde' 197 | - 198 | id: text-muted 199 | title: 'Text: Muted' 200 | type: variable-themed-color 201 | opacity: false 202 | format: hex 203 | default-light: '#888888' 204 | default-dark: '#999999' 205 | - 206 | id: text-faint 207 | title: 'Text: Faint' 208 | type: variable-themed-color 209 | opacity: false 210 | format: hex 211 | default-light: '#999999' 212 | default-dark: '#666666' 213 | - 214 | id: text-error 215 | title: 'Text: Error' 216 | type: variable-themed-color 217 | opacity: false 218 | format: hex 219 | default-light: '#800000' 220 | default-dark: '#ff3333' 221 | - 222 | id: text-error-hover 223 | title: 'Text: Error (hover)' 224 | type: variable-themed-color 225 | opacity: false 226 | format: hex 227 | default-light: '#990000' 228 | default-dark: '#990000' 229 | - 230 | id: text-highlight-bg 231 | title: 'Text: Highlight Background' 232 | type: variable-themed-color 233 | opacity: true 234 | format: rgb 235 | default-light: '#ffff0066' 236 | default-dark: '#ffff0066' 237 | - 238 | id: text-highlight-bg-active 239 | title: 'Text: Highlight Background (active)' 240 | type: variable-themed-color 241 | opacity: true 242 | format: rgb 243 | default-light: '#ff800066' 244 | default-dark: '#ff800066' 245 | - 246 | id: text-selection 247 | title: 'Text: Selection Background' 248 | type: variable-themed-color 249 | opacity: true 250 | format: rgb 251 | default-light: '#cce6fffc' 252 | default-dark: '#17304dfc' 253 | - 254 | id: text-selection 255 | title: 'Text: On Accent' 256 | type: variable-themed-color 257 | opacity: false 258 | format: hex 259 | default-light: '#f2f2f2' 260 | default-dark: '#dcddde' 261 | 262 | - 263 | id: heading-colors-interactive 264 | title: Interactive Colors 265 | type: heading 266 | level: 1 267 | collapsed: true 268 | - 269 | id: interactive-normal 270 | title: 'Interactive: Normal' 271 | type: variable-themed-color 272 | opacity: false 273 | format: hex 274 | default-light: '#f2f3f5' 275 | default-dark: '#2a2a2a' 276 | - 277 | id: interactive-hover 278 | title: 'Interactive: Hover' 279 | type: variable-themed-color 280 | opacity: false 281 | format: hex 282 | default-light: '#e9e9e9' 283 | default-dark: '#303030' 284 | - 285 | id: interactive-accent 286 | title: 'Interactive: Accent' 287 | type: variable-themed-color 288 | opacity: false 289 | format: hex 290 | alt-format: 291 | - 292 | id: interactive-accent-rgb 293 | format: rgb-values 294 | default-light: '#7b6cd9' 295 | default-dark: '#483699' 296 | 297 | - 298 | id: interactive-accent-hover 299 | title: 'Interactive: Accent (hover)' 300 | type: variable-themed-color 301 | opacity: false 302 | format: hex 303 | default-light: '#8273e6' 304 | default-dark: '#4d3ca6' 305 | - 306 | id: interactive-success 307 | title: 'Interactive: Success' 308 | type: variable-themed-color 309 | opacity: false 310 | format: hex 311 | default-light: '#197300' 312 | default-dark: '#197300' 313 | 314 | - 315 | id: heading-colors-scrollbar 316 | title: Scrollbar Colors 317 | type: heading 318 | level: 1 319 | collapsed: true 320 | - 321 | id: scrollbar-bg 322 | title: 'Scrollbar: Background' 323 | type: variable-themed-color 324 | opacity: true 325 | format: rgb 326 | default-light: '#0000000d' 327 | default-dark: '#ffffff0d' 328 | - 329 | id: scrollbar-thumb-bg 330 | title: 'Scrollbar: Thumb Background' 331 | type: variable-themed-color 332 | opacity: true 333 | format: rgb 334 | default-light: '#0000001a' 335 | default-dark: '#ffffff1a' 336 | - 337 | id: scrollbar-active-thumb-bg 338 | title: 'Scrollbar: Active Thumb Background' 339 | type: variable-themed-color 340 | opacity: true 341 | format: rgb 342 | default-light: '#00000033' 343 | default-dark: '#ffffff33' 344 | 345 | */ 346 | ``` 347 | -------------------------------------------------------------------------------- /dmytro-shulha/Special effects.md: -------------------------------------------------------------------------------- 1 | # Special effects 2 | 3 | ## Translucent modals and popovers 4 | 5 | ```css 6 | /* Translucent modals - from: Nosedive-Obsidian */ 7 | /* Modify modal, omnibar, open looks */ 8 | input.prompt-input, input.prompt-input:active, input.prompt-input:focus { 9 | border-radius: 3px; 10 | border: 2px solid rgba(38, 38, 59, 0.5); /* in the original code this is var(--text-muted) */ 11 | background-color: transparent; 12 | box-sizing: border-box; 13 | border-collapse: collapse; 14 | } 15 | 16 | .modal-bg { 17 | background-color: #FFFFFF01; 18 | backdrop-filter: blur(20px); 19 | } 20 | 21 | /* Make legible background for menus since we overrode the background */ 22 | div.popover.hover-popover, .menu, .suggestion-container { 23 | background-color: #FFFFFF01; 24 | backdrop-filter: blur(30px); 25 | border: none; 26 | } 27 | ``` 28 | 29 | ## Oval, call-out, in sidebar 30 | 31 | ```css 32 | /* 33 | There is an amazing piece of CSS code by [Lithou](https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/35?u=klaas) on the forum. I have not copied the code here because it is important to 1st see what it does. Also, check out his video that he links to. 34 | */ 35 | ``` 36 | 37 | ## Sticky notes 38 | 39 | ```css 40 | /* NOTE: syntax to be used to have a sticky rendered 41 | /*

Some text

*/ 42 | 43 | 44 | /* From Gabroel - https://discord.com/channels/686053708261228577/702656734631821413/789334135788273724 and scroll down that page. Code was not quite correct, so here is the right code. */ 45 | 46 | .stickies { 47 | text-align: center; 48 | transition: width 2s; 49 | padding: 5px; 50 | margin: 10px; 51 | position: relative; 52 | float: right; 53 | right: -30px; 54 | box-shadow: 0 10px 10px 2px rgba(0, 0, 0, 0.3); 55 | width: 40%; 56 | background: hotpink; 57 | -webkit-transform: rotate(0deg); 58 | -moz-transform: rotate(0deg); 59 | -o-transform: rotate(0deg); 60 | -ms-transform: rotate(0deg); 61 | transform: rotate(2deg); 62 | transition: all 2s ease; 63 | z-index: 1; 64 | padding-top: 10px; 65 | padding-bottom: 10px; 66 | border-radius: 0px; 67 | color: black; 68 | } 69 | 70 | .stickies::after { 71 | content: ""; 72 | left: -1%; 73 | top: -10px; 74 | background: ffff00; 75 | height: 40px; 76 | width: 15px; 77 | border-radius: 10px; 78 | border: 3px solid black; 79 | display: inline-block; 80 | position: absolute; 81 | -webkit-transform: rotate(0deg); 82 | -moz-transform: rotate(0deg); 83 | -o-transform: rotate(0deg); 84 | -ms-transform: rotate(0deg); 85 | transform: rotate(-11deg); 86 | z-index: 11; 87 | } 88 | 89 | .stickies::before { 90 | width: 11px; 91 | height: 20px; 92 | content: ""; 93 | background: ffff00; 94 | display: inline-block; 95 | position: absolute; 96 | left: -1.3%; 97 | top: -2px; 98 | border-radius: 10px; 99 | border: 3px solid black; 100 | border-bottom: 0; 101 | border-bottom-right-radius: 0; 102 | border-bottom-left-radius: 0; 103 | z-index: 10; 104 | -webkit-transform: rotate(0deg); 105 | -moz-transform: rotate(0deg); 106 | -o-transform: rotate(0deg); 107 | -ms-transform: rotate(0deg); 108 | transform: rotate(-11deg); 109 | } 110 | 111 | .stickies2 { 112 | position: relative; 113 | float: left; 114 | box-shadow: 0 10px 10px 2px rgba(0, 0, 0, 0.3); 115 | width: 30%; 116 | background: #edec92; 117 | -webkit-transform: rotate(0deg); 118 | -moz-transform: rotate(0deg); 119 | -o-transform: rotate(0deg); 120 | -ms-transform: rotate(0deg); 121 | transform: rotate(-2deg); 122 | transition: all 2s ease; 123 | z-index: 1; 124 | padding: 20px; 125 | margin: 10px; 126 | color: black; 127 | } 128 | 129 | .stickies2::after { 130 | content: ""; 131 | display: block; 132 | height: 32px; 133 | width: 2px; 134 | position: absolute; 135 | left: 50%; 136 | top: -10px; 137 | z-index: 1; 138 | border-radius: 50%; 139 | display: inline-block; 140 | height: 15px; 141 | width: 15px; 142 | border: 1px; 143 | box-shadow: inset -10px -10px 10px #f0b7a4, inset 3px 3px 5px; 144 | } 145 | ``` 146 | 147 | ```css 148 | /* Another sticky possibility from j314 - https://discord.com/channels/686053708261228577/702656734631821413/801873554785566760 149 | /* NOTE: syntax to be used to have a sticky rendered 150 | /*

Some text

*/ 151 | 152 | .sticky { 153 | background-color:var(--yellow); 154 | padding:10px; 155 | width:300px; 156 | height:200px; 157 | color:black; 158 | margin-left:150px; 159 | font-family: chalkboard; 160 | box-shadow: 10px 10px 7px rgb(0,0,0,0.5); 161 | transform:rotate(3deg); 162 | transition: transform .15s linear; 163 | } 164 | .sticky:hover { 165 | transform:scale(1.1); 166 | } 167 | ``` 168 | 169 | ## Images with a piece of scotch tape effect - thanks to Lithou 170 | 171 | ```css 172 | /* placement of images */ 173 | /* After putting the code below, you can get the tape effect doing */ 174 | /* ![[imagename.png#tape]] */ 175 | /* refer to Lithou's sandbox https://github.com/lithou/sandbox */ 176 | 177 | div{ 178 | --coremarg: 1%; 179 | --extramarg: 1%; /* This margin is used for any added margin between items */ 180 | --defaultwidth: 60%; /*This is the default width for core flags such as the "side" and "tape" */ 181 | } 182 | 183 | /* Core Flags */ 184 | /* side */ 185 | 186 | div[alt*="+side"]{ 187 | position: relative; 188 | width: var(--defaultwidth); 189 | float: right; 190 | margin: 0px; 191 | margin-left: var(--coremarg); 192 | } 193 | 194 | /* tape */ 195 | 196 | div[alt*="+tape"] { 197 | position: relative; 198 | float: right; 199 | width: var(--defaultwidth); 200 | margin-left: var(--coremarg); 201 | -webkit-transform: rotate(0deg); 202 | -moz-transform: rotate(0deg); 203 | -o-transform: rotate(0deg); 204 | -ms-transform: rotate(0deg); 205 | transform: rotate(2deg); 206 | } 207 | 208 | div[alt*="+tape"]::before { 209 | content: ""; 210 | display: block; 211 | position: relative; 212 | margin: auto; 213 | width: 100px; 214 | height: 30px; 215 | top: 12px; 216 | background: rgba(255, 234, 118, 0.377); /*here you can chosse the scotch tape background*/ 217 | -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.4); 218 | -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.4); 219 | box-shadow: 0px 1px 3px rgba(0,0,0,0.4); 220 | z-index: 10; 221 | clip-path: polygon(50% 0%, 100% 0%, 222 | 98% 10%, 100% 20%, 98% 30%, 100% 40%, 98% 50%, 100% 60%, 98% 70%, 100% 80%, 98% 90%,100% 100%, 223 | 0% 100%, 2% 90%, 0% 80%, 2% 70%, 0% 60%, 2% 50%, 0% 40%, 2% 30%, 0% 20%, 2% 10%, 0% 0%); 224 | } 225 | div[alt*="-lg"]::before{ 226 | width: 100px; 227 | height: 30px; 228 | } 229 | 230 | div[alt*="-med"]::before{ 231 | width: 70px; 232 | height: 25px; 233 | } 234 | 235 | div[alt*="-sm"]::before{ 236 | width: 45px; 237 | height: 15px; 238 | top: 8px; 239 | } 240 | div[alt*="-thumb"]::before{ 241 | width: 25px; 242 | height: 5px; 243 | top: 2px; 244 | } 245 | ``` 246 | 247 | ```css 248 | /* Push Pin */ 249 | 250 | div[alt*="+pin"] { 251 | position: relative; 252 | float: right; 253 | width: var(--defaultwidth); 254 | margin: auto; 255 | margin-left: var(--coremarg); 256 | -webkit-transform: rotate(0deg); 257 | -moz-transform: rotate(0deg); 258 | -o-transform: rotate(0deg); 259 | -ms-transform: rotate(0deg); 260 | transform: rotate(2deg);} 261 | div[alt*="+pin"]::before { 262 | content: ""; 263 | position: absolute; 264 | width: 5px; 265 | height: 5px; 266 | background-color: #4588cc; 267 | top: -3%; 268 | left: 50%; 269 | border: solid #336699 8px; 270 | border-radius: 50%; 271 | box-shadow: #274d74 -5px 3px 1px;} 272 | /* Portrait and Landscape */ 273 | div[alt*="+portrait"]{ 274 | position: relative; 275 | width: calc(var(--defaultwidth)/2); 276 | float: right; 277 | /* background-color:blue; This setting will create a border effect of set color */ 278 | clip-path: ellipse(36% 46% at 50% 50%);} 279 | div[alt*="+portrait"]>img{ 280 | vertical-align: middle; 281 | clip-path: ellipse(35% 45% at 50% 50%);} 282 | div[alt*="+landscape"]{ 283 | position: relative; 284 | width: var(--defaultwidth); 285 | float: right; 286 | /* background-color:blue; This setting will create a border effect of set color */ 287 | clip-path: ellipse(46% 36% at 50% 50%);} 288 | div[alt*="+landscape"]>img{ 289 | vertical-align: middle; 290 | clip-path: ellipse(45% 35% at 50% 50%);} 291 | ``` 292 | 293 | ```css 294 | /* Banner and HR */ 295 | 296 | div[alt*="+banner"]{ 297 | height: 100px; 298 | overflow: hidden; 299 | 300 | } 301 | 302 | div[alt*="+banner"]>img{ 303 | margin-top: -130px; 304 | } 305 | 306 | div[alt*="+hr"]{ 307 | height: 10px; 308 | overflow: hidden; 309 | border-radius: 20px; 310 | 311 | } 312 | 313 | div[alt*="+hr"]>img{ 314 | margin-top: -200px; 315 | } 316 | ``` 317 | 318 | ```css 319 | /* Custom Core Flags */ 320 | 321 | div[alt*="+custom1"]{ 322 | position: relative; 323 | width: var(--defaultwidth); 324 | float: right; 325 | margin-top: 0px; 326 | margin-bottom: 0px; 327 | } 328 | div[alt*="+custom2"]{ 329 | position: relative; 330 | width: var(--defaultwidth); 331 | float: right; 332 | margin-top: 0px; 333 | margin-bottom: 0px; 334 | } 335 | ``` 336 | 337 | ```css 338 | /* Modifier Flags */ 339 | /* Orientation and position */ 340 | 341 | div[alt*="-left"]{ 342 | float: left; 343 | margin: 0px; 344 | margin-right: var(--extramarg);} 345 | div[alt*="-right"]{ 346 | float: right; 347 | margin: 0px; 348 | margin-left: var(--extramarg);} 349 | div[alt*="-fix"]{position: fixed;} 350 | div[alt*="-abs"]{position: absolute;} 351 | ``` 352 | 353 | ```css 354 | /* Size */ 355 | 356 | div[alt*="-thumb"]{width: 11.50%;} 357 | div[alt*="-sm"]{width: 24%;} 358 | div[alt*="-med"]{width: 32.3333%;} 359 | div[alt*="-lg"]{width: 49%;} 360 | div[alt*="-huge"]{width: 67%;} 361 | div[alt*="-cwidth"]{float: none;margin-left: -10%;width: 120%;} 362 | ``` 363 | 364 | ```css 365 | /* Borders */ 366 | 367 | div[alt*="-border1"]>img{border: solid black 3px;} 368 | div[alt*="-border2"]>img{border: solid white 3px;} 369 | div[alt*="-bradius1"]>img{border-radius: 5px;} 370 | div[alt*="-bradius2"]>img{border-radius: 20px;} 371 | div[alt*="-bradiustl"]>img{border-top-left-radius: 20px;} 372 | div[alt*="-bradiusbr"]>img{border-bottom-right-radius: 20px;} 373 | div[alt*="-bradiustr"]>img{border-top-right-radius: 20px;} 374 | div[alt*="-bradiusbl"]>img{border-bottom-left-radius: 20px;} 375 | div[alt*="-bthick"]>img{border-width: 5px;} 376 | div[alt*="-bthin"]>img{border-width: 1px;} 377 | ``` 378 | 379 | ```css 380 | /* Div Borders */ 381 | 382 | div[alt*="-divborder1"]{border: solid #336699 2px;} 383 | div[alt*="-divborder2"]{border: solid black 2px;} 384 | div[alt*="-divbradius1"]{border-radius: 5px;} 385 | div[alt*="-divbradius2"]{border-radius: 20px;} 386 | div[alt*="-cdivbradius1"]{border-radius: 50px;} 387 | 388 | div[alt*="-shadow1"]>img{ 389 | box-shadow: darkgrey -2px 2px 2px; 390 | 391 | } 392 | 393 | div[alt*="-glow"]>img{ 394 | box-shadow: darkgrey 0px 0px 20px; 395 | } 396 | 397 | div[alt*="-nofloat"]{ 398 | float:none 399 | } 400 | ``` 401 | -------------------------------------------------------------------------------- /dmytro-shulha/Headers.md: -------------------------------------------------------------------------------- 1 | # Headers 2 | 3 | ```css 4 | /* List styling (H1 numbering ONLY) for note content */ 5 | 6 | /* initialize css counter */ 7 | body { 8 | counter-reset: head-num-1; 9 | } 10 | 11 | /* put counter result into H1 headings */ 12 | .markdown-source-view .cm-formatting-header-1::after , h1::before { 13 | counter-increment: head-num-1; 14 | content: counter(head-num-1) ". "; 15 | } 16 | 17 | /* Do not render H6 header in Preview */ 18 | h6 { 19 | display: none; 20 | } 21 | ``` 22 | 23 | ```css 24 | /* Selection the first H1 header of the Note */ 25 | pre:nth-of-type(2).HyperMD-header.HyperMD-header-1 { 26 | color: red; 27 | } 28 | ``` 29 | 30 | ```css 31 | /* Change just 1 particular header */ 32 | /* Note: gap between 1st and 2nd line must be put in ! */ 33 |
34 | ``` 35 | 36 | OR put it in an html element with a class that changes the color 37 | 38 | ```css 39 | .important { 40 | color: red; 41 | } 42 | 43 |
44 | 45 | /* changing the color of the header in edit mode */ 46 | .cm-header-1 { 47 | color:rgb(203, 77, 73); 48 | } 49 | 50 | /* Gradient coloured headers in Edit and Preview mode */ 51 | .cm-s-obsidian .cm-header-1, 52 | .markdown-preview-view h1 { 53 | background: linear-gradient(to right, gold, coral); /* choose any 2 colors you like */ 54 | -webkit-background-clip: text; 55 | color: transparent; 56 | width: fit-content; 57 | } 58 | 59 | /* Coloured headings for editor and preview in Dracula */ 60 | .cm-header-1, .markdown-preview-view h1 61 | { 62 | font-family: var(--font-family-editor); 63 | font-weight: 500; 64 | font-size: var(--font-size-h1); 65 | color: var(--text-title-h1); 66 | } 67 | 68 | .cm-header-2, .markdown-preview-view h2 69 | { 70 | font-family: var(--font-family-editor); 71 | font-weight: 500; 72 | font-size: var(--font-size-h2); 73 | color: var(--text-title-h2); 74 | } 75 | 76 | .cm-header-3, .markdown-preview-view h3 77 | { 78 | font-family: var(--font-family-editor); 79 | font-weight: 500; 80 | font-size: var(--font-size-h3); 81 | color: var(--text-title-h3); 82 | } 83 | 84 | .cm-header-4, .markdown-preview-view h4 85 | { 86 | font-family: var(--font-family-editor); 87 | font-weight: 500; 88 | font-size: var(--font-size-h4); 89 | color: var(--text-title-h4); 90 | } 91 | 92 | .cm-header-5, .markdown-preview-view h5 93 | { 94 | font-family: var(--font-family-editor); 95 | font-weight: 500; 96 | font-size: var(--font-size-h5); 97 | color: var(--text-title-h5); 98 | } 99 | 100 | .cm-header-6, .markdown-preview-view h6 101 | { 102 | font-family: var(--font-family-editor); 103 | font-weight: 500; 104 | font-size: var(--font-size-h6); 105 | color: var(--text-title-h6); 106 | } */ 107 | 108 | /* Coloured headings for editor and preview, same font-weight in Edit & Preview */ 109 | .cm-s-obsidian .cm-header-1, 110 | .markdown-preview-view h1 { 111 | font-weight: 450; 112 | color: rgb(123, 108, 214); /* was(115, 98, 205); */ 113 | } 114 | 115 | .cm-s-obsidian .cm-header-2, 116 | .markdown-preview-view h2 { 117 | font-weight: 450; 118 | color: rgb(123, 108, 214); 119 | } 120 | 121 | .cm-s-obsidian .cm-header-3, 122 | .markdown-preview-view h3 { 123 | font-weight: 450; 124 | color: rgb(123, 108, 214); 125 | } 126 | 127 | .cm-s-obsidian .cm-header-4, 128 | .markdown-preview-view h4 { 129 | font-weight: 450; 130 | color: rgb(123, 108, 214); 131 | } 132 | 133 | .cm-s-obsidian .cm-header-5, 134 | .markdown-preview-view h5 { 135 | font-weight: 450; 136 | color: rgb(123, 108, 214); 137 | } 138 | 139 | .cm-s-obsidian .cm-header-6, 140 | .markdown-preview-view h6 { 141 | font-weight: 450; 142 | color: rgb(123, 108, 214); 143 | } 144 | 145 | /* Underline H1 heading in Edit mode */ 146 | /* .cm-header-1 { 147 | border-bottom: 1px solid var(--text-accent); 148 | } */ 149 | 150 | .cm-s-obsidian pre.HyperMD-header-1:after { 151 | content: ""; 152 | position: absolute; 153 | bottom: 5px; 154 | left: 5px; 155 | width: calc(100% - 10px); 156 | height: 1px; 157 | background: var(--text-accent); /* rgb(123, 108, 214); */ 158 | } 159 | ``` 160 | 161 | ```css 162 | 163 | /* Eliminate margin (gap, space) under headings - Preview mode only */ 164 | /* H1 underlined too */ 165 | .markdown-preview-view h1 { 166 | padding-bottom: 5px; 167 | border-bottom: 1px solid var(--base2); /* PB changed from --text-accent */ 168 | margin-bottom: -10px; 169 | } 170 | 171 | .markdown-preview-view h2, 172 | .markdown-preview-view h3, 173 | .markdown-preview-view h4, 174 | .markdown-preview-view h5, 175 | .markdown-preview-view h6 { 176 | margin-bottom: -20px; 177 | padding-bottom: 5px; 178 | } 179 | 180 | /* Changing size/color of the header hashtags # */ 181 | .cm-formatting-header { 182 | color: var(--text-faint); 183 | font-size: 0.6em; 184 | } 185 | 186 | /* USED IN CONTEXT OF "REMOVE CLUTTER" */ 187 | /* Replace header hashes (#) by H1, H2, etc. in edit mode */ 188 | /* from Blue Topaz theme: DIRTY WYSIWYM HEADERS by _ph */ 189 | 190 | /* Header folder icon */ 191 | .CodeMirror-foldgutter-open, .CodeMirror-foldgutter-folded { 192 | padding-left: -10px; 193 | } 194 | 195 | .CodeMirror-sizer{ 196 | margin-left: 35px !important; 197 | } 198 | 199 | /*-- reduce left padding --*/ 200 | .CodeMirror { 201 | height: 100%; 202 | direction: ltr; 203 | padding: 0 5px; 204 | } 205 | 206 | /*-- hide # markup--*/ 207 | .cm-formatting.cm-formatting-header.cm-formatting-header-1.cm-header.cm-header-1, 208 | .cm-formatting.cm-formatting-header.cm-formatting-header-2.cm-header.cm-header-2, 209 | .cm-formatting.cm-formatting-header.cm-formatting-header-3.cm-header.cm-header-3, 210 | .cm-formatting.cm-formatting-header.cm-formatting-header-4.cm-header.cm-header-4, 211 | .cm-formatting.cm-formatting-header.cm-formatting-header-5.cm-header.cm-header-5, 212 | .cm-formatting.cm-formatting-header.cm-formatting-header-6.cm-header.cm-header-6 213 | {font-size:0px;} 214 | 215 | /*-- display H1-h6 in gutter--*/ 216 | .cm-formatting.cm-formatting-header.cm-formatting-header-1.cm-header.cm-header-1:before{ 217 | content:"H1"; 218 | font-size:14px; 219 | color: var(--h1ys); 220 | left:-36.5px; 221 | top:11px; 222 | position:absolute; 223 | } 224 | .cm-formatting.cm-formatting-header.cm-formatting-header-2.cm-header.cm-header-2:before{ 225 | content:"H2"; 226 | font-size:13px; 227 | color: var(--h2ys); 228 | left:-36.5px; 229 | top:9px; 230 | position:absolute; 231 | } 232 | .cm-formatting.cm-formatting-header.cm-formatting-header-3.cm-header.cm-header-3:before{ 233 | content:"H3"; 234 | font-size:12px; 235 | color: var(--h3ys); 236 | left:-36.7px; 237 | top: 7px; 238 | position:absolute; 239 | } 240 | .cm-formatting.cm-formatting-header.cm-formatting-header-4.cm-header.cm-header-4:before{ 241 | content:"H4"; 242 | font-size:11px; 243 | color: var(--h4ys); 244 | left:-20.5px; 245 | top: 7px; 246 | position:absolute; 247 | } 248 | .cm-formatting.cm-formatting-header.cm-formatting-header-5.cm-header.cm-header-5:before{ 249 | content:"H5"; 250 | font-size:10px; 251 | color: var(--h5ys); 252 | left:-20px; 253 | top: 9px; 254 | position:absolute; 255 | } 256 | .cm-formatting.cm-formatting-header.cm-formatting-header-6.cm-header.cm-header-6:before{ 257 | content:"H6"; 258 | font-size:9px; 259 | color: var(--h6ys); 260 | left:-19.5px; 261 | top: 9px; 262 | position:absolute; 263 | } 264 | 265 | /*-- is active line, hide H[1-6] in gutter --*/ 266 | .CodeMirror-activeline span.cm-formatting.cm-formatting-header.cm-formatting-header-1.cm-header.cm-header-1:before, 267 | .CodeMirror-activeline span.cm-formatting.cm-formatting-header.cm-formatting-header-2.cm-header.cm-header-2:before, 268 | .CodeMirror-activeline span.cm-formatting.cm-formatting-header.cm-formatting-header-3.cm-header.cm-header-3:before, 269 | .CodeMirror-activeline span.cm-formatting.cm-formatting-header.cm-formatting-header-4.cm-header.cm-header-4:before, 270 | .CodeMirror-activeline span.cm-formatting.cm-formatting-header.cm-formatting-header-5.cm-header.cm-header-5:before, 271 | .CodeMirror-activeline span.cm-formatting.cm-formatting-header.cm-formatting-header-6.cm-header.cm-header-6:before 272 | {font-size:0px;} 273 | 274 | /*-- is active line, display # markup --*/ 275 | .CodeMirror-activeline > pre > span .cm-formatting.cm-formatting-header.cm-formatting-header-1.cm-header.cm-header-1{ 276 | font-size:24px; 277 | display:inline; 278 | } 279 | .CodeMirror-activeline > pre > span .cm-formatting.cm-formatting-header.cm-formatting-header-2.cm-header.cm-header-2{ 280 | font-size:22px; 281 | display:inline; 282 | } 283 | .CodeMirror-activeline > pre > span .cm-formatting.cm-formatting-header.cm-formatting-header-3.cm-header.cm-header-3{ 284 | font-size:20px; 285 | display:inline; 286 | } 287 | .CodeMirror-activeline > pre > span .cm-formatting.cm-formatting-header.cm-formatting-header-4.cm-header.cm-header-4{ 288 | font-size:18px; 289 | display:inline; 290 | } 291 | .CodeMirror-activeline > pre > span .cm-formatting.cm-formatting-header.cm-formatting-header-5.cm-header.cm-header-5{ 292 | font-size:16px; 293 | display:inline; 294 | } 295 | .CodeMirror-activeline > pre > span .cm-formatting.cm-formatting-header.cm-formatting-header-6.cm-header.cm-header-6{ 296 | font-size:16px; 297 | display:inline; 298 | } 299 | 300 | /* Change header size in Edit mode */ 301 | .cm-header-1 { 302 | font-size: 27px; 303 | } 304 | 305 | .cm-header-2 { 306 | font-size: 22px; 307 | } 308 | 309 | .cm-header-3 { 310 | font-size: 21px; 311 | } 312 | 313 | .cm-header-4 { 314 | font-size: 19px; 315 | } 316 | 317 | .cm-header-5 { 318 | font-size: 16px; 319 | } 320 | 321 | .cm-header-6 { 322 | font-size: 13px; 323 | } 324 | 325 | /* Change header size in Preview mode */ 326 | .markdown-preview-view h1 { 327 | font-size: 27px; 328 | } 329 | 330 | .markdown-preview-view h2 { 331 | font-size: 20px; 332 | } 333 | 334 | .markdown-preview-view h3 { 335 | font-size: 21px; 336 | } 337 | 338 | .markdown-preview-view h4 { 339 | font-size: 19px; 340 | } 341 | 342 | .markdown-preview-view h5 { 343 | font-size: 16px; 344 | } 345 | 346 | .markdown-preview-view h6 { 347 | font-size: 13px; 348 | font-weight: bold; 349 | } 350 | ``` 351 | 352 | ```css 353 | /* Automatically convert H1 headings to capitals in the Outline pane */ 354 | .outline .tree-item-inner { 355 | text-transform: uppercase; 356 | } 357 | 358 | .outline .tree-item-children .tree-item-inner { 359 | text-transform: none; 360 | } 361 | ``` 362 | 363 | If you need to have H1 headings capitalized in the note text, use: 364 | 365 | ```css 366 | /* Automatically convert H1 headings to capitals in text */ 367 | .cm-header-1, .markdown-preview-view h1 { 368 | text-transform: uppercase; 369 | } 370 | ``` 371 | 372 | In Live Preview, header hashes are hidden if the line is not active. 373 | Some people prefer to keep them visible to know what level header they are dealing with. 374 | The code below is courtesy of @NothingIsLost on the Discord forum. 375 | 376 | ```css 377 | .cm-line > span.cm-header-1:not(.cm-formatting):before { content: "# "; } 378 | .cm-line.cm-active > span.cm-header-1 > span:not(.cm-selection):before { content: "# "; } 379 | .cm-line > span.cm-header-1 ~ span.cm-header-1:not(.cm-formatting):before { content: ""; } 380 | 381 | .cm-line > span.cm-header-2:not(.cm-formatting):before { content: "## "; } 382 | .cm-line.cm-active > span.cm-header-2 > span:not(.cm-selection):before { content: "## "; } 383 | .cm-line > span.cm-header-2 ~ span.cm-header-2:not(.cm-formatting):before { content: ""; } 384 | 385 | .cm-line > span.cm-header-3:not(.cm-formatting):before { content: "### "; } 386 | .cm-line.cm-active > span.cm-header-3 > span:not(.cm-selection):before { content: "### "; } 387 | .cm-line > span.cm-header-3 ~ span.cm-header-3:not(.cm-formatting):before { content: ""; } 388 | 389 | .cm-line > span.cm-header-4:not(.cm-formatting):before { content: "#### "; } 390 | .cm-line.cm-active > span.cm-header-4 > span:not(.cm-selection):before { content: "#### "; } 391 | .cm-line > span.cm-header-4 ~ span.cm-header-4:not(.cm-formatting):before { content: ""; } 392 | 393 | .cm-line > span.cm-header-5:not(.cm-formatting):before { content: "##### "; } 394 | .cm-line.cm-active > span.cm-header-5 > span:not(.cm-selection):before { content: "##### "; } 395 | .cm-line > span.cm-header-5 ~ span.cm-header-5:not(.cm-formatting):before { content: ""; } 396 | 397 | .cm-line > span.cm-header-6:not(.cm-formatting):before { content: "###### "; } 398 | .cm-line.cm-active > span.cm-header-6 > span:not(.cm-selection):before { content: "###### "; } 399 | .cm-line > span.cm-header-6 ~ span.cm-header-6:not(.cm-formatting):before { content: ""; } 400 | ``` 401 | -------------------------------------------------------------------------------- /dmytro-shulha/File explorer - Obsidian.md: -------------------------------------------------------------------------------- 1 | # File explorer - Obsidian 2 | ```css 3 | /* condense line spacing on file explorer title list. also avoids character-level word breaks */ 4 | .nav-file-title-content, 5 | .search-result-file-title, 6 | .search-result-file-match { 7 | padding-top: 0 !important; 8 | padding-bottom: 0 !important; 9 | line-height: normal !important; 10 | word-break: keep-all; 11 | } 12 | 13 | /* file xplor : smaller & bold vault title */ 14 | .nav-folder.mod-root > .nav-folder-title { 15 | padding-left: 6px; 16 | font-size: 14px; 17 | font-weight: bolder; 18 | top:-6px; /* higher */ 19 | cursor: default; 20 | color: var(--base2); 21 | } 22 | 23 | /* Enhancing the view of folders in left pane */ 24 | /* by Shamama on https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/112 */ 25 | 26 | /* outliner for the outline */ 27 | .outline-heading-children{ 28 | border-left: 1px solid rgba(118,158,165,0.2); 29 | border-radius:0 0px 0px 0; 30 | transition:all 0.5s ease-in-out; 31 | } 32 | 33 | .outline-heading-children:hover{ 34 | border-left-color:rgba(118,158,165,0.4); 35 | } 36 | 37 | /* Connectining lines for files and folders in left pane*/ 38 | .nav-folder,.nav-file{ 39 | margin:0 !important; 40 | border-left: 1px solid rgba(118,158,165,0.2); 41 | } 42 | 43 | /* == File Explorer - animation for active file as per Obuntu === */ 44 | .nav-file-title, 45 | .nav-folder-title { 46 | padding: 0px 14px 0px 20px; 47 | } 48 | 49 | .nav-folder-title { 50 | font-weight: bold; 51 | } 52 | 53 | .nav-folder.mod-root > .nav-folder-title { 54 | padding-left: 6px; 55 | font-size: 14px; 56 | font-weight: bolder; 57 | top: -6px; 58 | cursor: default; 59 | } 60 | 61 | .nav-file.is-active > .nav-file-title, 62 | .nav-file.is-active > .nav-file-title:hover { 63 | background-color: var(--background-primary); 64 | border-radius: 6px; 65 | font-weight: bold; 66 | /* color: var(--text-accent); */ 67 | border-left: 2px solid var(--text-accent); 68 | transition: all 0.5s ease; 69 | } 70 | 71 | .nav-file.is-active > .nav-file-title { 72 | padding-left: 5px; 73 | /* margin-left: 5px; */ 74 | } 75 | 76 | body:not(.is-grabbing) .nav-file-title:hover, 77 | body:not(.is-grabbing) .nav-folder-title:hover { 78 | background-color: var(--background-primary); 79 | border-radius: 2px; 80 | transition: all 0.2s ease; 81 | } 82 | 83 | .nav-file-tag { 84 | background-color: var(--background-secondary-alt); 85 | top: -1px; 86 | } 87 | 88 | /* Folder and file icons */ 89 | .nav-folder-children .nav-file-title-content:first-child::before { content: '🗒 '; } 90 | .nav-folder-children .nav-folder-title-content::before { content: '📂 '; } 91 | 92 | /* add colour to folder icons - needs 2 lines of .nav-folder-children above to work*/ 93 | .nav-folder-title-content::before { 94 | 95 | font-size: 17px; 96 | /* 97 | how to get CSS filter ? 98 | 0, open website: 99 | https://www.zhangxinxu.com/sp/filter.html 100 | 101 | 1, first: image original cloro this is : #000 102 | 2, second: display color i want : #D6FFF1 103 | 3, CSS filter trans btn clik: the result is : 104 | filter: invert(99%) sepia(90%) saturate(382%) hue-rotate(69deg) brightness(106%) contrast(102%); 105 | 106 | 4, pause👇 : OK ✌️; 107 | */ 108 | filter: invert(88%) sepia(8%) saturate(554%) hue-rotate(103deg) brightness(108%) contrast(102%); 109 | 110 | /* 111 | If you want to change the icon, you only need to modify this code.you can only change d='' 112 | */ 113 | 114 | content: url("data:image/svg+xml;charset=UTF-8, "); 115 | 116 | /* margin */ 117 | margin-right: 5px !important; 118 | } 119 | 120 | /*hover color*/ 121 | .nav-folder-title:hover .nav-folder-title-content::before { 122 | 123 | /* hover color #69fafd 👆 CSS filter 👇 */ 124 | filter: invert(87%) sepia(20%) saturate(1026%) hue-rotate(113deg) brightness(105%) contrast(103%); 125 | } 126 | 127 | /* change font size of file explorer */ 128 | .nav-file-title, .nav-folder-title { font-size: 14px; line-height: 15px; } 129 | 130 | /* change font size of search results */ 131 | .search-result-file-title { font-size: xyz; } 132 | .search-result-file-matches { font-size: xyz; } 133 | 134 | /* Reduce space of header buttons/icons - Blue Topaz */ 135 | div.nav-header{ 136 | padding: 0px 5px 5px 5px; 137 | margin-bottom: 0px; 138 | margin-top: 5px; 139 | line-height: 0px; 140 | } 141 | div.nav-buttons-container{ 142 | margin: 0px 0px 0px 0px; 143 | } 144 | input.search-input{ 145 | margin: 0px 10px -3px 10px; 146 | } 147 | .nav-action-button{ 148 | margin: 0px 2px 0px 2px !important; 149 | } 150 | .workspace-leaf-content[data-type='search'] .nav-action-button, .workspace-leaf-content[data-type='backlink'] .nav-action-button{ 151 | padding: 3px 3px 3px 3px; 152 | } 153 | 154 | /* Fix background of folder-collapse-indicator */ 155 | body:not(.is-grabbing) .nav-folder-title:hover .nav-folder-collapse-indicator { 156 | background: none; 157 | } 158 | 159 | /* Line up tabs with macOS traffic lights */ 160 | .hider-frameless .workspace-split.mod-left-split > .workspace-tabs { 161 | padding: 0;} 162 | .workspace-tab-container-inner { 163 | padding-left:30px; 164 | } 165 | ``` 166 | 167 | ## Chest-of-drawers icon in nav tab - California Coast theme by mgmeyers 168 | ```css 169 | /* Note: css variables do not work in embedded svgs, so 170 | I took the rgb equivalents of var(--text-accent) when active 171 | and of var(--text-faint) for not active */ 172 | 173 | /* when the tab is NOT in focus */ 174 | .theme-light 175 | .workspace-tab-header[aria-label="File explorer"] 176 | .workspace-tab-header-inner-icon:after { 177 | opacity: 0.5; 178 | content: url('data:image/svg+xml; utf8, '); 179 | } 180 | 181 | .theme-light 182 | .workspace-tab-header[aria-label="File explorer"]:hover 183 | .workspace-tab-header-inner-icon:after { 184 | opacity: 0.5; 185 | content: url('data:image/svg+xml; utf8, '); 186 | } 187 | 188 | /* when the tab is in focus */ 189 | .theme-light 190 | .workspace-tab-header[aria-label="File explorer"].is-active 191 | .workspace-tab-header-inner-icon:after { 192 | opacity: 0.5; 193 | content: url('data:image/svg+xml; utf8, '); 194 | } 195 | 196 | /* when the tab is NOT in focus */ 197 | .theme-dark 198 | .workspace-tab-header[aria-label="File explorer"] 199 | .workspace-tab-header-inner-icon:after { 200 | content: url('data:image/svg+xml; utf8, '); 201 | } 202 | 203 | .theme-dark 204 | .workspace-tab-header[aria-label="File explorer"]:hover 205 | .workspace-tab-header-inner-icon:after { 206 | content: url('data:image/svg+xml; utf8, '); 207 | } 208 | 209 | /* when the tab is in focus */ 210 | .theme-dark 211 | .workspace-tab-header[aria-label="File explorer"].is-active 212 | .workspace-tab-header-inner-icon:after { 213 | content: url('data:image/svg+xml; utf8, '); 214 | } 215 | 216 | .workspace-tab-header[aria-label="File explorer"] 217 | .workspace-tab-header-inner-icon:after, 218 | .view-header-icon:after, 219 | .search-input-clear-button:before, 220 | .document-search-close-button:before { 221 | line-height: 1; 222 | display: inline-block; 223 | width: 18px; 224 | height: 18px; 225 | } 226 | 227 | .workspace-tab-header[aria-label="File explorer"] 228 | .workspace-tab-header-inner-icon 229 | > svg { 230 | display: none; 231 | } 232 | ``` 233 | 234 | ## Nav titles 235 | ```css 236 | /* Wrap long nav text */ 237 | .nav-file-title, .nav-folder-title { 238 | white-space: normal; 239 | width: auto; 240 | } 241 | 242 | /* Indent wrapped nav text */ 243 | .nav-file-title-content { 244 | margin-left: 10px; 245 | text-indent: -10px; 246 | } 247 | 248 | /* Set background color when hovering over a title */ 249 | .nav-file-title-content:hover { 250 | background-color: var(--base4); 251 | } 252 | ``` 253 | 254 | ## Top tab container background color 255 | ```css 256 | .theme-dark { 257 | --background1: rgb(51, 51, 51); 258 | } 259 | 260 | .theme-light { 261 | --background1: #f2f8fd; 262 | } 263 | 264 | .workspace-tab-header-container { 265 | background-color: var(--background1); 266 | } 267 | 268 | .workspace-tab-container-before.is-before-active .workspace-tab-header-inner, 269 | .workspace-tab-container-after.is-after-active .workspace-tab-header-inner, 270 | .workspace-tab-header.is-before-active .workspace-tab-header-inner, 271 | .workspace-tab-header.is-after-active .workspace-tab-header-inner { 272 | background-color: var(--background1); 273 | } 274 | 275 | .workspace-tab-header, 276 | .workspace-tab-header-inner, 277 | .workspace-tab-container-before, 278 | .workspace-tab-container-after { 279 | transition: none; 280 | } 281 | 282 | .workspace-tabs { 283 | background-color: var(--background1); 284 | } 285 | ``` 286 | 287 | ## Emojis in folder name 288 | /* 2 examples */ 289 | ```css 290 | .nav-folder-title[data-path="+inbox"] .nav-folder-title-content::before { 291 | content: "📥 "; 292 | font-size:1.3em; 293 | } 294 | 295 | .nav-folder-title[data-path="+Obsidian"] .nav-folder-title-content::before { 296 | content: "⚙️ "; 297 | font-size:1.3em; 298 | } 299 | ``` 300 | 301 | ## Hide a folder 302 | Note: If you don’t know the data-path to put in the code below, you can open the developer with 303 | CTRL/CMD+SHIFT+I and check the path. Beware, the data path only updates after a restart for newly file/folder. 304 | ```css 305 | div[data-path='folder'], 306 | div[data-path='folder'] + div.nav-folder-children 307 | { 308 | display: none; 309 | } 310 | ``` 311 | 312 | # Hide a file 313 | ```css 314 | .nav-file-title[data-path="file_path.md"] { 315 | display: none; 316 | } 317 | ``` 318 | --------------------------------------------------------------------------------