├── .obsidian ├── hotkeys.json ├── community-plugins.json ├── appearance.json ├── app.json ├── themes │ └── 🔔 Chime │ │ └── manifest.json ├── plugins │ ├── dataview │ │ ├── manifest.json │ │ └── styles.css │ └── obsidian-style-settings │ │ ├── manifest.json │ │ └── data.json ├── core-plugins.json ├── graph.json ├── core-plugins-migration.json └── workspace.json ├── .github └── FUNDING.yml ├── Snippets ├── Card view.md ├── Popover border.md ├── Safari tabs.md ├── Tabs styling - Square tabs.md ├── Compact tabs.md ├── Left aligned note header.md ├── Tags styling - Rainbow tags.md ├── Image tweak.md ├── Table styling - Centred table.md ├── Code block styling 02.md ├── Multicolumn note.md ├── Accented settings side headings.md ├── Callout styling - Callout without icon.md ├── Tag styling 01.md ├── Coloured tab header container.md ├── Bigger first letter.md ├── Unordered list styling 01.md ├── Icon before headings.md ├── Command palette styling 02.md ├── Tags styling - Target specific tag.md ├── Properties into two columns.md ├── Tabs styling - Stacked tabbed minimal tweak.md ├── Blockquote styling 03.md ├── Author callout.md ├── Kanban styling - background customized.md ├── Callout styling - Old callouts.md ├── Sidenote callout 02.md ├── Show note header on hover.md ├── Command palette styling 01.md ├── Hide window button panel.md ├── Checkboxes - Priority checkboxes.md ├── Table styling - Rounded corners.md ├── Callout styling - Minimal callout.md ├── Coloured ribbon.md ├── Calendar styling.md ├── Image description when hover.md ├── Kanban styling - background based on tag.md ├── Properties on hover.md ├── Celtic inline title styling.md ├── Checkboxes - SlRvb's checkboxes (ITS theme).md ├── Equally spaced dataview columns.md ├── Note icon.md ├── Collapsible image caption callout.md ├── Faded emoji in tasks.md ├── Spoiler text.md ├── Callout styling 02.md ├── Table styling - Left column header.md ├── Unordered list styling 02.md ├── Image grid.md ├── Image styling - Zoom image.md ├── Heading indicators 01.md ├── Outline numbering.md ├── Callout styling - Quote callout.md ├── Link styling 01.md ├── Callout styling - Wikipedia like infobox.md ├── Callout styling - Theorem callout.md ├── Sidenote callout 01.md ├── Image as a background 02.md ├── Callout styling - Scroller callout.md ├── Callout styling - Leader list callout.md ├── New note button.md ├── Pinned tab styling.md ├── Blockquote styling 02.md ├── Callout styling - Label callout.md ├── Hide ribbon on collapse.md ├── External link styling 01.md ├── Callout icon to the top right corner.md ├── Gradient Colored Icon Tabs.md ├── Tooltip styling.md ├── Progress bar styling.md ├── Hide titlebar buttons and freeze the right-sidedock toggle button position.md ├── Image as a background 01.md ├── Code block styling 01.md ├── Callout styling - Tabbed callout.md ├── Blockquote styling 01.md ├── Callout styling - Outlined callout.md ├── Callout styling - Folder structure callout.md ├── Empty tab styling.md ├── Colourful headings underline and divider.md ├── Tag styling - Hide hash symbol.md ├── Image gallery.md ├── File explorer styling - Folder headers.md ├── Checkboxes - Progress bar checkboxes.md ├── Callout styling - Sleek callout (AnuPpuccin theme).md ├── Loading screen tweak.md ├── Card layout.md ├── Callout styling - 3 callouts.md ├── Empty Tab Styling 02.md ├── File explorer styling - Rainbow folder titles.md ├── File explorer styling - Rainbow folder background.md ├── Callout styling - Timeline callout.md ├── Heading indicators 02.md ├── Callout styling - Power callouts.md ├── File explorer styling - Folder description.md ├── Vertical label arrangement.md ├── Canvas styling - Gradient canvas cards.md ├── Callout styling - Gummy callout.md └── Kanban styling - Notion like Kanban board.md ├── Collection.md └── LICENSE /.obsidian/hotkeys.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /.obsidian/community-plugins.json: -------------------------------------------------------------------------------- 1 | [ 2 | "dataview", 3 | "obsidian-style-settings" 4 | ] -------------------------------------------------------------------------------- /.obsidian/appearance.json: -------------------------------------------------------------------------------- 1 | { 2 | "accentColor": "", 3 | "cssTheme": "🔔 Chime", 4 | "baseFontSize": 17 5 | } -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | custom: https://www.paypal.com/paypalme/spysonu 4 | -------------------------------------------------------------------------------- /.obsidian/app.json: -------------------------------------------------------------------------------- 1 | { 2 | "propertiesInDocument": "hidden", 3 | "showInlineTitle": false, 4 | "readableLineLength": false, 5 | "defaultViewMode": "preview" 6 | } 7 | -------------------------------------------------------------------------------- /.obsidian/themes/🔔 Chime/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "🔔 Chime", 3 | "version": "1.4.41", 4 | "minAppversion": "1.0.0", 5 | "author": "Ha'ani Whitlock", 6 | "authorUrl": "https://github.com/Bluemoondragon07" 7 | } 8 | -------------------------------------------------------------------------------- /Snippets/Card view.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Card view 4 | 5 | --- 6 | 7 | - author:: raisabelatrix 8 | - source:: https://gist.github.com/raisabelatrix/a92a2c9c43c2deb2ebb5175f11631608 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/YN56k3S.png) 13 | 14 | ```css 15 | 16 | ``` 17 | -------------------------------------------------------------------------------- /Snippets/Popover border.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Popover Border (minimal tweak) 4 | 5 | --- 6 | 7 | - author:: rushi 8 | - source:: 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/oXNlnHH.png) 13 | 14 | ```css 15 | .popover { 16 | border: solid var(--text-accent); 17 | } 18 | ``` 19 | -------------------------------------------------------------------------------- /Snippets/Safari tabs.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Tabs styling - Safari tabs 4 | 5 | --- 6 | 7 | - author:: gavinmn 8 | - source:: https://github.com/gavinmn/obsidian-theme/blob/main/safaritabs.css 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/TwpaIDT.png) 13 | 14 | ```css 15 | 16 | ``` 17 | -------------------------------------------------------------------------------- /Snippets/Tabs styling - Square tabs.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Tabs styling - Square tabs 4 | 5 | --- 6 | 7 | - author:: gavinmn 8 | - source:: https://github.com/gavinmn/obsidian-theme/blob/main/square-tabs.css 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/1rH0K30.png) 13 | 14 | ```css 15 | 16 | ``` 17 | -------------------------------------------------------------------------------- /Snippets/Compact tabs.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Compact tabs 4 | 5 | --- 6 | 7 | - author:: replete 8 | - source:: https://github.com/replete/obsidian-minimal-theme-css-snippets/blob/main/%5Bui%5D%20Compact%20Tabs.css 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/5TESm09.png) 13 | 14 | ```css 15 | 16 | ``` 17 | -------------------------------------------------------------------------------- /Snippets/Left aligned note header.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Left aligned note header (minimal tweak) 4 | 5 | --- 6 | 7 | - author:: rushi 8 | - source:: 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/pyjIskI.png) 13 | 14 | ```css 15 | .view-header-title-container { 16 | justify-content: start; 17 | } 18 | ``` 19 | -------------------------------------------------------------------------------- /Snippets/Tags styling - Rainbow tags.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Tags styling - Rainbow tags 4 | 5 | --- 6 | 7 | - author:: raisabelatrix 8 | - source:: https://gist.github.com/raisabelatrix/eb383f7e19b59f951430c2f3c6ed80b0 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/QahcMIX.png) 13 | 14 | ```css 15 | 16 | ``` 17 | -------------------------------------------------------------------------------- /Collection.md: -------------------------------------------------------------------------------- 1 | --- 2 | cssclasses: 3 | - cards 4 | - cards-cols-3 5 | --- 6 | # Obsidian CSS Snippets Collection 🤧 7 | 8 | ____ 9 | ```dataview 10 | TABLE without id cover AS "Cover", file.link AS "Name", "" + author AS "Author" 11 | FROM "Snippets" 12 | SORT file.name 13 | ``` 14 | 15 | ____ 16 | -------------------------------------------------------------------------------- /.obsidian/plugins/dataview/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "dataview", 3 | "name": "Dataview", 4 | "version": "0.5.64", 5 | "minAppVersion": "0.13.11", 6 | "description": "Complex data views for the data-obsessed.", 7 | "author": "Michael Brenan ", 8 | "authorUrl": "https://github.com/blacksmithgu", 9 | "isDesktopOnly": false 10 | } 11 | -------------------------------------------------------------------------------- /Snippets/Image tweak.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Image minimal tweak 4 | 5 | --- 6 | 7 | - author:: rushi 8 | - source:: 9 | 10 | --- 11 | 12 | > _Only works in light mode :)_ 13 | 14 | cover:: ![](https://i.imgur.com/xcJUzKw.png) 15 | 16 | ```css 17 | img { 18 | border-radius: 4px; 19 | box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -26px; 20 | } 21 | ``` 22 | -------------------------------------------------------------------------------- /Snippets/Table styling - Centred table.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Table styling - Centred table 4 | 5 | --- 6 | 7 | - author:: rushi 8 | - source:: 9 | 10 | --- 11 | 12 | > _Only works in reading mode_ 13 | 14 | cover:: ![](https://i.imgur.com/Tpxc3uJ.png) 15 | 16 | ```css 17 | .markdown-preview-view table { 18 | margin-left: auto; 19 | margin-right: auto; 20 | } 21 | ``` 22 | -------------------------------------------------------------------------------- /.obsidian/core-plugins.json: -------------------------------------------------------------------------------- 1 | [ 2 | "file-explorer", 3 | "global-search", 4 | "switcher", 5 | "graph", 6 | "backlink", 7 | "canvas", 8 | "outgoing-link", 9 | "tag-pane", 10 | "page-preview", 11 | "daily-notes", 12 | "templates", 13 | "note-composer", 14 | "command-palette", 15 | "editor-status", 16 | "bookmarks", 17 | "outline", 18 | "word-count", 19 | "file-recovery" 20 | ] -------------------------------------------------------------------------------- /.obsidian/plugins/obsidian-style-settings/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "obsidian-style-settings", 3 | "name": "Style Settings", 4 | "version": "1.0.7", 5 | "minAppVersion": "0.11.5", 6 | "description": "Offers controls for adjusting theme, plugin, and snippet CSS variables.", 7 | "author": "mgmeyers", 8 | "authorUrl": "https://github.com/mgmeyers/obsidian-style-settings", 9 | "isDesktopOnly": false 10 | } 11 | -------------------------------------------------------------------------------- /Snippets/Code block styling 02.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Code block styling 02 4 | 5 | --- 6 | 7 | - author:: rushi 8 | - source:: 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/hZFhK0I.png) 13 | 14 | ```css 15 | .markdown-rendered pre { 16 | border-left: solid; 17 | } 18 | 19 | .markdown-source-view.mod-cm6 .cm-line.HyperMD-codeblock { 20 | border-left: solid; 21 | } 22 | ``` 23 | -------------------------------------------------------------------------------- /Snippets/Multicolumn note.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Multicolumn note 4 | 5 | --- 6 | 7 | - author:: zamsyt 8 | - source:: https://github.com/zamsyt/obsidian-snippets/wiki/Easy-multi-column-notes 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/0krxxi2.png) 13 | 14 | ```css 15 | 16 | ``` 17 | 18 | ## How to use 19 | 20 | ```md 21 | first column 22 | 23 | --- 24 | 25 | --- 26 | 27 | second column 28 | ``` 29 | -------------------------------------------------------------------------------- /Snippets/Accented settings side headings.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Accented settings side headings 4 | 5 | --- 6 | 7 | - author:: rushi 8 | - source:: 9 | 10 | --- 11 | 12 | > _Inspired from [Origami theme](https://github.com/7368697661/Origami) of_ **kneecaps.** 13 | 14 | cover:: ![](https://i.imgur.com/KnhS6VY.png) 15 | 16 | ```css 17 | .vertical-tab-header-group-title { 18 | color: var(--color-accent); 19 | } 20 | ``` 21 | -------------------------------------------------------------------------------- /Snippets/Callout styling - Callout without icon.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Callout styling - Callout without icon 4 | 5 | --- 6 | 7 | - author:: rushi 8 | - source:: 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/qVSE6Vp.png) 13 | 14 | ```css 15 | .callout:is([data-callout-metadata="noicon"]) .callout-icon { 16 | display: none; 17 | } 18 | ``` 19 | 20 | --- 21 | 22 | ## How to use 23 | 24 | ```md 25 | > [!done|noicon] Title 26 | > Lorem, ipsum dolor sit amet consectetur, adipisicing elit. 27 | ``` 28 | -------------------------------------------------------------------------------- /Snippets/Tag styling 01.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Tag styling 01 4 | 5 | --- 6 | 7 | - author:: rushi 8 | - source:: 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/kEcixGq.png) 13 | 14 | ```css 15 | /* reading mode */ 16 | a.tag { 17 | border-radius: 2px !important; 18 | color: white; 19 | background-color: var(--text-accent); 20 | } 21 | 22 | /* live preview */ 23 | span.cm-hashtag.cm-hashtag { 24 | border-radius: 0; 25 | color: white; 26 | background-color: var(--text-accent); 27 | } 28 | ``` 29 | -------------------------------------------------------------------------------- /.obsidian/graph.json: -------------------------------------------------------------------------------- 1 | { 2 | "collapse-filter": true, 3 | "search": "", 4 | "showTags": false, 5 | "showAttachments": false, 6 | "hideUnresolved": false, 7 | "showOrphans": true, 8 | "collapse-color-groups": true, 9 | "colorGroups": [], 10 | "collapse-display": true, 11 | "showArrow": false, 12 | "textFadeMultiplier": 0, 13 | "nodeSizeMultiplier": 1, 14 | "lineSizeMultiplier": 1, 15 | "collapse-forces": true, 16 | "centerStrength": 0.518713248970312, 17 | "repelStrength": 10, 18 | "linkStrength": 1, 19 | "linkDistance": 250, 20 | "scale": 0.3508306925556174, 21 | "close": true 22 | } -------------------------------------------------------------------------------- /Snippets/Coloured tab header container.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Coloured tab header container 4 | 5 | --- 6 | 7 | - author:: rushi 8 | - source:: 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/oFWH7MM.png) 13 | 14 | ```css 15 | .workspace-tab-header-container { 16 | background-color: var(--text-accent); /* change this to your desired colour */ 17 | } 18 | 19 | /* additional code for windows min,mix buttons */ 20 | .titlebar-button-container { 21 | background-color: transparent !important; 22 | } 23 | ``` 24 | 25 | > _You might need to change colour of some elements inside the tab container_ 26 | -------------------------------------------------------------------------------- /Snippets/Bigger first letter.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Bigger first letter 4 | 5 | --- 6 | 7 | - author:: FireIsGood 8 | - source:: https://discord.com/channels/686053708261228577/702656734631821413/1091853109300559942 9 | 10 | --- 11 | 12 | > _Extracted from the [original code](https://discord.com/channels/686053708261228577/702656734631821413/1091853109300559942)._ 13 | 14 | cover:: ![](https://i.imgur.com/zDjkb9m.png) 15 | 16 | ```css 17 | :is(.cm-line, p, h1, h2, h3, h4, h5, h6)::first-letter { 18 | margin: 0.36rem; 19 | color: var(--text-normal); 20 | font-size: 2em; 21 | font-weight: bold; 22 | color: var(--text-accent); 23 | } 24 | ``` 25 | -------------------------------------------------------------------------------- /Snippets/Unordered list styling 01.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Unordered list styling 01 4 | 5 | --- 6 | 7 | - author:: SlRvb, kneecaps 8 | - source:: https://discord.com/channels/686053708261228577/931552763467411487/1022340935721439242 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/kWNrs1Q.png) 13 | 14 | ```css 15 | /* 16 | author: SlRvb, kneecaps 17 | source: https://discord.com/channels/686053708261228577/931552763467411487/1022340935721439242 18 | */ 19 | 20 | .list-bullet.list-bullet.list-bullet:after { 21 | content: "◈"; 22 | height: unset; 23 | width: unset; 24 | background: transparent; 25 | margin-top: 5px; 26 | color: var(--text-accent); 27 | } 28 | ``` 29 | -------------------------------------------------------------------------------- /Snippets/Icon before headings.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Icon before headings 4 | 5 | --- 6 | 7 | - author:: rushi 8 | - source:: 9 | 10 | --- 11 | 12 | > _You can change `§` with something else._ 13 | 14 | cover:: ![](https://i.imgur.com/ocKrrzy.png) 15 | 16 | ```css 17 | :is( 18 | h1, 19 | h2, 20 | h3, 21 | h4, 22 | h5, 23 | h6, 24 | .HyperMD-header-1, 25 | .HyperMD-header-2, 26 | .HyperMD-header-3, 27 | .HyperMD-header-4, 28 | .HyperMD-header-5, 29 | .HyperMD-header-6 30 | )::before { 31 | content: "§ "; 32 | font-size: 0.7em; 33 | vertical-align: middle; 34 | color: var(--text-accent); 35 | font-weight: 500; 36 | } 37 | ``` 38 | -------------------------------------------------------------------------------- /Snippets/Command palette styling 02.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Command palette styling 02 4 | 5 | --- 6 | 7 | - author:: rushi 8 | - source:: 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/bnqAiaJ.gif) 13 | 14 | ```css 15 | .suggestion-item.is-selected { 16 | background-color: hsla(var(--interactive-accent-hsl), 0.8); 17 | border-radius: 6px; 18 | } 19 | 20 | .prompt { 21 | border-radius: 8px; 22 | } 23 | 24 | .suggestion-highlight { 25 | color: var(--text-accent); 26 | } 27 | 28 | .suggestion-item.is-selected .suggestion-highlight { 29 | color: white !important; 30 | } 31 | 32 | input.prompt-input { 33 | box-shadow: rgba(0, 0, 0, 0.2) 0px 60px 40px -7px !important; 34 | } 35 | ``` 36 | -------------------------------------------------------------------------------- /Snippets/Tags styling - Target specific tag.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Tags styling - Target specific tag 4 | 5 | --- 6 | 7 | - author:: rushi 8 | - source:: 9 | 10 | --- 11 | 12 | > _Only works in reading mode._ 13 | 14 | cover:: ![](https://i.imgur.com/HhjZpgh.png) 15 | 16 | ```css 17 | /* Tags styling - Target specific tag */ 18 | .tag[href^="#obsidian"] { 19 | background-color: rgb(var(--color-obsidian-rgb), 0.1); 20 | color: var(--obsidian); 21 | font-weight: bolder; 22 | } 23 | 24 | /* Feel free to customize for other tags by modifying the selector and color variables below */ 25 | 26 | body { 27 | --color-obsidian-rgb: 233, 49, 71; 28 | --obsidian: rgb(var(--color-obsidian-rgb)); 29 | } 30 | ``` 31 | -------------------------------------------------------------------------------- /Snippets/Properties into two columns.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Properties into two columns 4 | 5 | --- 6 | 7 | - author:: sailKite 8 | - source:: https://discord.com/channels/686053708261228577/702656734631821413/1155496243691266158 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/8zFYyGV.png) 13 | 14 | ```css 15 | /* 16 | author: sailKite 17 | source: https://discord.com/channels/686053708261228577/702656734631821413/1155496243691266158 18 | */ 19 | 20 | [data-type="markdown"] .metadata-properties { 21 | display: grid; 22 | grid: auto-flow / 50% 50%; 23 | gap: 3px 0px; 24 | } 25 | 26 | [data-type="markdown"] .metadata-properties .metadata-property-value { 27 | align-items: start; 28 | } 29 | 30 | body { 31 | --metadata-label-width: 5em; 32 | } 33 | ``` 34 | -------------------------------------------------------------------------------- /.obsidian/core-plugins-migration.json: -------------------------------------------------------------------------------- 1 | { 2 | "file-explorer": true, 3 | "global-search": true, 4 | "switcher": true, 5 | "graph": true, 6 | "backlink": true, 7 | "canvas": true, 8 | "outgoing-link": true, 9 | "tag-pane": true, 10 | "properties": false, 11 | "page-preview": true, 12 | "daily-notes": true, 13 | "templates": true, 14 | "note-composer": true, 15 | "command-palette": true, 16 | "slash-command": false, 17 | "editor-status": true, 18 | "bookmarks": true, 19 | "markdown-importer": false, 20 | "zk-prefixer": false, 21 | "random-note": false, 22 | "outline": true, 23 | "word-count": true, 24 | "slides": false, 25 | "audio-recorder": false, 26 | "workspaces": false, 27 | "file-recovery": true, 28 | "publish": false, 29 | "sync": false 30 | } -------------------------------------------------------------------------------- /Snippets/Tabs styling - Stacked tabbed minimal tweak.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Tabs styling - Stacked tabbed minimal tweak 4 | 5 | --- 6 | 7 | - author:: TheEmperor 8 | - source:: https://forum.obsidian.md/t/vertical-tabs-for-more-efficient-use-of-space-and-easier-faster-navigation/42987/10?u 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/kAsKDoX.png) 13 | 14 | ```css 15 | /* 16 | author: TheEmperor 17 | source: https://forum.obsidian.md/t/vertical-tabs-for-more-efficient-use-of-space-and-easier-faster-navigation/42987/10?u 18 | */ 19 | 20 | .workspace 21 | .mod-root 22 | .workspace-tabs.mod-stacked 23 | .workspace-tab-container 24 | .workspace-tab-header-inner-title { 25 | text-orientation: upright; 26 | letter-spacing: -3px; 27 | text-transform: uppercase; 28 | } 29 | ``` 30 | -------------------------------------------------------------------------------- /Snippets/Blockquote styling 03.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Blockquote styling 03 4 | 5 | --- 6 | 7 | - author:: eleanorkonik 8 | - source:: https://github.com/eleanorkonik/-palatinate/blob/main/fancy-blockquote.css 9 | 10 | --- 11 | 12 | > _Only works in reading mode._ 13 | 14 | cover:: ![](https://i.imgur.com/vxLR98e.png) 15 | 16 | ```css 17 | 18 | ``` 19 | 20 | --- 21 | 22 | ## How to use 23 | 24 | ```md 25 | > Lorem ipsum dolor sit amet, consectetur, adipisicing elit. Iure minus voluptates illum aspernatur officia vel officiis, et quis qui. Enim omnis officia sunt consectetur obcaecati repudiandae! Numquam, voluptas at, ab officiis recusandae, dolorum inventore quod iste cumque explicabo dicta quidem accusantium velit odit deleniti, ipsum commodi? 26 | > Name of the author 27 | ``` 28 | -------------------------------------------------------------------------------- /Snippets/Author callout.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Author callout 4 | 5 | --- 6 | 7 | - author:: rushi 8 | - reference:: https://discord.com/channels/686053708261228577/702656734631821413/1096863934100807701 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/2PuEAwx.png) 13 | 14 | ```css 15 | .callout[data-callout="author"] { 16 | display: flex; 17 | flex-direction: column-reverse; 18 | --callout-icon: user; 19 | --callout-color: transparent; 20 | box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px; 21 | border-left: solid; 22 | } 23 | 24 | .callout[data-callout="author"] > .callout-title { 25 | display: flex; 26 | justify-content: flex-end; 27 | padding-right: 8px; 28 | font-style: italic; 29 | } 30 | 31 | .callout[data-callout="author"] .callout-content p { 32 | margin-top: 0; 33 | } 34 | ``` 35 | -------------------------------------------------------------------------------- /Snippets/Kanban styling - background customized.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Kanban styling - background customized 4 | 5 | --- 6 | 7 | - author:: dev-araujo 8 | - source:: 9 | 10 | --- 11 | 12 | cover::![](https://i.pinimg.com/originals/0a/de/07/0ade07fe59d1e3d892a26e7e3dc1de3f.png) 13 | 14 | ```css 15 | /* 16 | author: dev-araujo 17 | */ 18 | 19 | /* --- Kanban With Background Customized --- */ 20 | 21 | .theme-dark .view-content .kanban-plugin::after, 22 | .theme-light .view-content .kanban-plugin::after { 23 | content: ""; 24 | position: fixed; 25 | left: 0; 26 | top: 0; 27 | right: 0; 28 | bottom: 0; 29 | z-index: -1; 30 | 31 | /* Change PATH-FOR-YOUR-BACKGROUND to your image path */ 32 | background-image: url(PATH-FOR-YOUR-BACKGROUND) !important; 33 | background-repeat: no-repeat; 34 | background-size: cover; 35 | } 36 | ``` 37 | -------------------------------------------------------------------------------- /Snippets/Callout styling - Old callouts.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Callout styling - Old callouts 4 | 5 | --- 6 | 7 | - author:: kepano 8 | - source:: https://gist.github.com/kepano/cde61ac7db1afd3f173a16157c627f93 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/yQy1Vem.png) 13 | 14 | ```css 15 | /* 16 | author: kepano 17 | source: https://gist.github.com/kepano/cde61ac7db1afd3f173a16157c627f93 18 | */ 19 | 20 | body { 21 | --callout-border-width: 0 0 0 4px; 22 | --callout-border-opacity: 1; 23 | --callout-radius: 0; 24 | --callout-padding: 0; 25 | --callout-title-padding: var(--size-4-4) var(--size-4-4); 26 | --callout-content-padding: var(--size-4-2) var(--size-4-4); 27 | } 28 | .callout-title-inner { 29 | color: var(--text-normal); 30 | } 31 | .callout-content { 32 | background-color: var(--background-primary-alt); 33 | } 34 | ``` 35 | -------------------------------------------------------------------------------- /Snippets/Sidenote callout 02.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Sidenote callout 02 4 | 5 | --- 6 | 7 | - author:: FireIsGood 8 | - source:: https://discord.com/channels/686053708261228577/702656734631821413/1145768722431225926 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/EfL7ROv.gif) 13 | 14 | ```css 15 | /* 16 | author: FireIsGood 17 | source: https://discord.com/channels/686053708261228577/702656734631821413/1145768722431225926 18 | */ 19 | 20 | :root { 21 | --tooltip-size: 250px; 22 | } 23 | 24 | .markdown-preview-view { 25 | container-name: page; 26 | container-type: inline-size; 27 | } 28 | 29 | @container page (width > 1200px) { 30 | .markdown-reading-view .callout[data-callout="epic"] { 31 | --p-spacing: 0; 32 | position: absolute; 33 | width: var(--tooltip-size); 34 | translate: calc(-1 * (var(--tooltip-size) + 1rem)) 0; 35 | } 36 | } 37 | ``` 38 | -------------------------------------------------------------------------------- /Snippets/Show note header on hover.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | # Show note header on hover 3 | 4 | ___ 5 | 6 | - author:: sailKite 7 | - source:: https://discord.com/channels/686053708261228577/702656734631821413/1170914511788724254 8 | 9 | ___ 10 | 11 | cover:: ![](https://i.imgur.com/pptQgvz.gif) 12 | 13 | ```css 14 | /* 15 | author: sailKite 16 | source: https://discord.com/channels/686053708261228577/702656734631821413/1170914511788724254 17 | */ 18 | 19 | .workspace-tabs:not(.mod-top) .workspace-tab-header-container { 20 | height: 0px; 21 | transition: height 200ms ease-in; 22 | 23 | &:hover { 24 | height: var(--header-height); 25 | } 26 | 27 | &::after { 28 | content: ""; 29 | display: block; 30 | width: 100%; 31 | height: var(--size-4-4); 32 | top: 100%; 33 | position: absolute; 34 | z-index: 1; 35 | } 36 | } 37 | ``` 38 | 39 | 40 | -------------------------------------------------------------------------------- /Snippets/Command palette styling 01.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Command palette styling 01 4 | 5 | --- 6 | 7 | - author:: rushi 8 | - source:: 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/1gctisH.gif) 13 | 14 | ```css 15 | .prompt { 16 | border: solid var(--text-accent); 17 | opacity: 0.9; 18 | } 19 | 20 | .suggestion-highlight { 21 | text-decoration: none; 22 | color: var(--text-accent); 23 | } 24 | 25 | .suggestion-item.is-selected { 26 | border: solid var(--text-accent); 27 | border-radius: 14px; 28 | } 29 | 30 | .suggestion-hotkey { 31 | background-color: var(--text-accent); 32 | color: black; 33 | border-radius: 10px; 34 | font-weight: 500; 35 | } 36 | 37 | .prompt-instruction { 38 | font-weight: 500; 39 | } 40 | 41 | .prompt-instruction-command { 42 | background-color: rgb(250, 252, 255, 0.5); 43 | color: black; 44 | border-radius: 10px; 45 | padding: 0 3px 0 3px; 46 | } 47 | ``` 48 | -------------------------------------------------------------------------------- /Snippets/Hide window button panel.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Hide window button panel 4 | 5 | --- 6 | 7 | - author:: sailKite 8 | - source:: https://discord.com/channels/686053708261228577/702656734631821413/1138096095851978833 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/Adi7Eyi.gif) 13 | 14 | ```css 15 | /* 16 | author: sailKite 17 | source: https://discord.com/channels/686053708261228577/702656734631821413/1138096095851978833 18 | */ 19 | 20 | /* virtually hide the custom window button panel */ 21 | body.is-hidden-frameless:not(:has(.is-right-sidedock-open)) { 22 | --frame-right-space: 0px; 23 | } 24 | body.is-hidden-frameless:not(:has(.is-right-sidedock-open)) 25 | .titlebar-button-container.mod-right { 26 | width: 0px; 27 | transition: width 275ms var(--anim-motion-swing); 28 | } 29 | body.is-hidden-frameless:not(:has(.is-right-sidedock-open)) 30 | .sidebar-toggle-button.mod-right { 31 | width: var(--ribbon-width); 32 | } 33 | ``` 34 | -------------------------------------------------------------------------------- /Snippets/Checkboxes - Priority checkboxes.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Checkboxes - Priority checkboxes 4 | 5 | --- 6 | 7 | - author:: rushi 8 | - source:: 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/acGvB3R.png) 13 | 14 | ```css 15 | .HyperMD-list-line:has(.cm-tag-p1) .task-list-label { 16 | --checkbox-border-color: red; 17 | } 18 | .task-list-item:has([href="#p1"]) { 19 | --checkbox-border-color: red; 20 | } 21 | 22 | .HyperMD-list-line:has(.cm-tag-p2) .task-list-label { 23 | --checkbox-border-color: gold; 24 | } 25 | .task-list-item:has([href="#p2"]) { 26 | --checkbox-border-color: gold; 27 | } 28 | 29 | .HyperMD-list-line:has(.cm-tag-p3) .task-list-label { 30 | --checkbox-border-color: #1895f5; 31 | } 32 | .task-list-item:has([href="#p3"]) { 33 | --checkbox-border-color: #1895f5; 34 | } 35 | ``` 36 | 37 | --- 38 | 39 | ## How to use 40 | 41 | ```md 42 | - [ ] High priority #p1 43 | - [ ] Medium priority #p2 44 | - [ ] Low priority #p3 45 | ``` 46 | -------------------------------------------------------------------------------- /Snippets/Table styling - Rounded corners.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Table styling - Rounded corners 4 | 5 | --- 6 | 7 | - author:: FireIsGood 8 | - source:: https://discord.com/channels/686053708261228577/702656734631821413/1112164539975340032 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/OEAPHo8.png) 13 | 14 | ```css 15 | /* 16 | author: FireIsGood 17 | source: https://discord.com/channels/686053708261228577/702656734631821413/1112164539975340032 18 | */ 19 | 20 | :root table { 21 | border-collapse: separate; 22 | border-spacing: 0; 23 | } 24 | th:first-of-type { 25 | border-top-left-radius: 8px; 26 | } 27 | th:last-of-type { 28 | border-top-right-radius: 8px; 29 | } 30 | tr:last-of-type td:first-of-type { 31 | border-bottom-left-radius: 8px; 32 | } 33 | tr:last-of-type td:last-of-type { 34 | border-bottom-right-radius: 8px; 35 | } 36 | 37 | :root :is(td, th) { 38 | border-width: 0 var(--table-border-width) var(--table-border-width) 0; 39 | } 40 | ``` 41 | -------------------------------------------------------------------------------- /Snippets/Callout styling - Minimal callout.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Callout styling - Minimal callout 4 | 5 | --- 6 | 7 | - author:: rushi 8 | - source:: 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/nmyuR4y.png) 13 | 14 | ```css 15 | .callout[data-callout="m-callout"] { 16 | --callout-color: transparent; 17 | border: none; 18 | padding: 0; 19 | } 20 | 21 | .callout[data-callout="m-callout"] .callout-title { 22 | display: none; 23 | padding: 0; 24 | } 25 | 26 | .callout[data-callout="m-callout"] .callout-content { 27 | font-size: 85%; 28 | text-align: center; 29 | } 30 | 31 | .callout[data-callout="m-callout"] .callout-content::after { 32 | content: "--- ♪ ♪ ♪ ---"; 33 | color: var(--text-accent); 34 | } 35 | ``` 36 | 37 | --- 38 | 39 | ## How to use 40 | 41 | ```md 42 | > [!m-callout] Title 43 | > Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus assumenda iusto sint officia quas distinctio doloribus harum optio commodi eum! 44 | ``` 45 | -------------------------------------------------------------------------------- /Snippets/Coloured ribbon.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Coloured ribbon 4 | 5 | --- 6 | 7 | - author:: sailKite 8 | - source:: https://discord.com/channels/686053708261228577/702656734631821413/1147201536171196416 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/fTqcg5Y.png) 13 | 14 | ```css 15 | /* 16 | author: sailKite 17 | source: https://discord.com/channels/686053708261228577/702656734631821413/1147201536171196416 18 | */ 19 | 20 | .workspace-ribbon.side-dock-ribbon.mod-left { 21 | --titlebar-background-focused: red; 22 | background-color: var(--titlebar-background-focused); 23 | } 24 | .workspace-ribbon.side-dock-ribbon.mod-left::before, 25 | .workspace-ribbon.side-dock-ribbon.mod-left > .sidebar-toggle-button { 26 | --titlebar-background: var(--titlebar-background-focused); 27 | } 28 | ``` 29 | 30 | --- 31 | 32 | > ## _To change colour of icons on the ribbon :)_ 33 | 34 | ```css 35 | .workspace-ribbon.side-dock-ribbon.mod-left .clickable-icon { 36 | color: white; 37 | } 38 | ``` 39 | -------------------------------------------------------------------------------- /Snippets/Calendar styling.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Calendar styling 4 | 5 | --- 6 | 7 | - author:: sailKite 8 | - source:: https://discord.com/channels/686053708261228577/702656734631821413/1168178314318458980 9 | 10 | --- 11 | 12 | (cover::![](https://i.imgur.com/wvqLZ97.png)) 13 | 14 | --- 15 | 16 | ```css 17 | /* 18 | author: sailKite 19 | source: https://discord.com/channels/686053708261228577/702656734631821413/1168178314318458980 20 | */ 21 | 22 | .container#calendar-container .calendar { 23 | & > thead > tr:first-of-type { 24 | & > th:nth-child(1) { 25 | color: red; 26 | } 27 | & > th:nth-child(2) { 28 | color: orange; 29 | } 30 | & > th:nth-child(3) { 31 | color: yellow; 32 | } 33 | & > th:nth-child(4) { 34 | color: green; 35 | } 36 | & > th:nth-child(5) { 37 | color: blue; 38 | } 39 | & > th:nth-child(6) { 40 | color: indigo; 41 | } 42 | & > th:nth-child(7) { 43 | color: violet; 44 | } 45 | } 46 | } 47 | ``` 48 | -------------------------------------------------------------------------------- /Snippets/Image description when hover.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Image description when hover 4 | 5 | --- 6 | 7 | - author:: sailKite 8 | - source:: https://discord.com/channels/686053708261228577/694233507500916796/1169731141813674075 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/VzcAJXe.gif) 13 | 14 | ```css 15 | /* 16 | author: sailKite 17 | source: https://discord.com/channels/686053708261228577/694233507500916796/1169731141813674075 18 | */ 19 | 20 | .internal-embed.image-embed { 21 | position: relative; 22 | 23 | &:hover::after { 24 | content: attr(alt); 25 | display: block; 26 | position: absolute; 27 | background-color: var(--background-primary); 28 | border: 1px solid var(--color-base-30); 29 | border-radius: var(--size-2-2); 30 | padding: 0.5em; 31 | top: 50%; 32 | left: 50%; 33 | transform: translate(-50%, -50%); 34 | } 35 | } 36 | ``` 37 | 38 | --- 39 | 40 | ## Usage 41 | 42 | ```md 43 | ![[image 01.jpg|Lorem, ipsum dolor sit amet consectetur, adipisicing elit.]] 44 | ``` 45 | -------------------------------------------------------------------------------- /Snippets/Kanban styling - background based on tag.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Kanban styling - background based on tag 4 | 5 | --- 6 | 7 | - author:: sailKite 8 | - source:: https://discord.com/channels/686053708261228577/702656734631821413/1173968522372722689 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/p9i7Mdb.png) 13 | 14 | ```css 15 | /* 16 | author: sailKite 17 | source: https://discord.com/channels/686053708261228577/702656734631821413/1173968522372722689 18 | */ 19 | 20 | /* --- Kanban With Background Color Based On Tag --- */ 21 | /* use this to style the card background and text */ 22 | .kanban-plugin__item.has-tag-someTag, 23 | .has-tag-someTag 24 | :is( 25 | .kanban-plugin__item-content-wrapper, 26 | .kanban-plugin__item-title-wrapper 27 | ) { 28 | background-color: red !important; 29 | color: black; 30 | } 31 | 32 | /* use this to style the tag bubble at the bottom of the card */ 33 | a[href="#someTag"].kanban-plugin__item-tag { 34 | background-color: yellow; 35 | color: green !important; 36 | font-weight: bold; 37 | } 38 | ``` 39 | -------------------------------------------------------------------------------- /Snippets/Properties on hover.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Properties on hover 4 | 5 | --- 6 | 7 | - author:: The Useful Walrus 8 | - source:: https://discord.com/channels/686053708261228577/702656734631821413/1144209029464342538 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/JS0E9Sz.gif) 13 | 14 | ```css 15 | /* 16 | author: The Useful Walrus 17 | source: https://discord.com/channels/686053708261228577/702656734631821413/1144209029464342538 18 | */ 19 | 20 | .metadata-properties-title { 21 | transition: 500ms; 22 | opacity: 0.2; 23 | pointer-events: none; 24 | } 25 | .metadata-container:hover .metadata-properties-title { 26 | opacity: 1; 27 | color: var(--text-accent); 28 | pointer-events: auto; 29 | } 30 | 31 | .metadata-content { 32 | transition: 200ms cubic-bezier(0.25, 1, 0.5, 1); 33 | opacity: 0; 34 | height: 0; 35 | margin-bottom: -1.8em; 36 | pointer-events: none; 37 | } 38 | .metadata-container:hover .metadata-content { 39 | opacity: 1; 40 | height: auto; 41 | margin-bottom: 0.5em; 42 | pointer-events: auto; 43 | } 44 | ``` 45 | -------------------------------------------------------------------------------- /Snippets/Celtic inline title styling.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Celtic inline title styling 4 | 5 | --- 6 | 7 | - author:: sailKite 8 | - source:: https://discord.com/channels/686053708261228577/702656734631821413/1163153997465653370 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/cMSMue3.png) 13 | 14 | ```css 15 | /* 16 | author: sailKite 17 | source: https://discord.com/channels/686053708261228577/702656734631821413/1163153997465653370 18 | */ 19 | 20 | .inline-title { 21 | display: flex; 22 | justify-content: center; 23 | gap: 2.5%; 24 | align-items: center; 25 | 26 | &::before, 27 | &::after { 28 | content: ""; 29 | background-image: url("https://media.discordapp.net/attachments/702656734631821413/1163152299464605909/Obsiidan_border_detail.png?ex=653e88fe&is=652c13fe&hm=0213a2468a424a48e898c3a02a621c9e0a102b902fd8fb6e48fa8bd43d8c1cd3&=&width=300&height=147"); 30 | background-size: contain; 31 | background-repeat: no-repeat; 32 | background-position: center; 33 | flex: 0 0 5em; 34 | aspect-ratio: 1; 35 | } 36 | 37 | &::after { 38 | scale: -1 1; 39 | } 40 | } 41 | ``` 42 | -------------------------------------------------------------------------------- /Snippets/Checkboxes - SlRvb's checkboxes (ITS theme).md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Checkboxes - SlRvb's checkboxes (ITS theme) 4 | 5 | --- 6 | 7 | - author:: SlRvb 8 | - source:: https://github.com/SlRvb/Obsidian--ITS-Theme/blob/main/Guide/Alternate-Checkboxes.md 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/LiMKSfo.png) 13 | 14 | ```css 15 | 16 | ``` 17 | 18 | --- 19 | 20 | ## Usage 21 | 22 | ```md 23 | - [ ] Unchecked 24 | - [x] Regular 25 | - [x] Checked 26 | - [-] Dropped 27 | - [>] Forward 28 | - [D] Date 29 | - [?] Question 30 | - [/] Half Done 31 | - [+] Add 32 | - [R] Research 33 | - [!] Important 34 | - [i] Idea 35 | - [B] Brainstorm 36 | - [P] Pro 37 | - [C] Con 38 | - [Q] Quote 39 | - [N] Note 40 | - [b] Bookmark 41 | - [I] Information 42 | - [p] Paraphrase 43 | - [L] Location 44 | - [E] Example 45 | - [A] Answer 46 | - [r] Reward 47 | - [c] Choice 48 | - [d] Doing 49 | - [T] Time 50 | - [@] Character / Person 51 | - [t] Talk 52 | - [O] Outline / Plot 53 | - [~] Conflict 54 | - [W] World 55 | - [f] Clue / Find 56 | - [F] Foreshadow 57 | - [H] Favorite / Health 58 | - [&] Symbolism 59 | - [s] Secret 60 | ``` 61 | -------------------------------------------------------------------------------- /Snippets/Equally spaced dataview columns.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Equally spaced dataview columns 4 | 5 | --- 6 | 7 | - author:: sailKite 8 | - source:: https://discord.com/channels/686053708261228577/707816848615407697/1154034583478751282 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/fU7LRj3.png) 13 | 14 | ```css 15 | /* 16 | author: sailKite 17 | source: https://discord.com/channels/686053708261228577/707816848615407697/1154034583478751282 18 | */ 19 | 20 | .dv-equal-columns .dataview.table-view-table tr > * { 21 | width: calc(100% / var(--dv-col-count)); 22 | } 23 | .dv-equal-columns .dataview.table-view-table { 24 | :has(> tr > :nth-child(2)) { 25 | --dv-col-count: 2; 26 | } 27 | :has(> tr > :nth-child(3)) { 28 | --dv-col-count: 3; 29 | } 30 | :has(> tr > :nth-child(4)) { 31 | --dv-col-count: 4; 32 | } 33 | :has(> tr > :nth-child(5)) { 34 | --dv-col-count: 5; 35 | } 36 | :has(> tr > :nth-child(6)) { 37 | --dv-col-count: 6; 38 | } 39 | } 40 | ``` 41 | 42 | --- 43 | 44 | ## How to use 45 | 46 | ```md 47 | --- 48 | cssclasses: 49 | - dv-equal-columns 50 | --- 51 | ``` 52 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 r-u-s-h-i-k-e-s-h 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 | -------------------------------------------------------------------------------- /Snippets/Note icon.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Note icon 4 | 5 | --- 6 | 7 | - author:: Trevor 8 | - source:: https://discord.com/channels/686053708261228577/744933215063638183/1106245045834756229 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/M5CM6Ip.png) 13 | 14 | ```css 15 | /* 16 | author: Trevor 17 | source: https://discord.com/channels/686053708261228577/744933215063638183/1106245045834756229 18 | */ 19 | 20 | .workspace-tab-header[aria-label="Inbox"] .workspace-tab-header-inner-icon svg { 21 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-inbox'%3E%3Cpolyline points='22 12 16 12 14 15 10 15 8 12 2 12'%3E%3C/polyline%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'%3E%3C/path%3E%3C/svg%3E"); 22 | color: var(--icon-color); 23 | background-color: var(--icon-color); 24 | } 25 | ``` 26 | 27 | [more info](https://discord.com/channels/686053708261228577/744933215063638183/1106245045834756229) 28 | -------------------------------------------------------------------------------- /Snippets/Collapsible image caption callout.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Collapsible image caption callout 4 | 5 | --- 6 | 7 | - author:: sailKite 8 | - source:: https://discord.com/channels/686053708261228577/702656734631821413/1134127383872536576 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/mquPDHu.gif) 13 | 14 | ```css 15 | /* 16 | author: sailKite 17 | source: https://discord.com/channels/686053708261228577/702656734631821413/1134127383872536576 18 | */ 19 | 20 | /* image caption collapsible callout */ 21 | .callout[data-callout="img-caption"] { 22 | --callout-color: none; 23 | --callout-icon: none; 24 | padding: 12px 0px; 25 | } 26 | .callout[data-callout="img-caption"] > .callout-title { 27 | font-size: 0px; 28 | justify-content: center; 29 | } 30 | .callout[data-callout="img-caption"] 31 | > .callout-title 32 | > :is(.callout-icon, .callout-fold) { 33 | display: none; 34 | } 35 | .callout[data-callout*="img-caption"] > .callout-content { 36 | text-align: center; 37 | } 38 | ``` 39 | 40 | --- 41 | 42 | ## How to use 43 | 44 | ```md 45 | > [!img-caption]- ![[img name.format]] 46 | > Lorem, ipsum dolor sit amet consectetur, adipisicing elit. 47 | ``` 48 | -------------------------------------------------------------------------------- /Snippets/Faded emoji in tasks.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Faded emoji in tasks 4 | 5 | --- 6 | 7 | - author:: skantola 8 | - source:: https://discord.com/channels/686053708261228577/702656734631821413/930104927009779823 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/dTY63UO.png) 13 | 14 | ```css 15 | /* ----------------------- */ 16 | /* Faded emoji in ✓ tasks */ 17 | /* github.com/sampokantola */ 18 | /* ----------------------- */ 19 | ul > li.task-list-item p { 20 | text-indent: -1.5em; 21 | } 22 | ul > li.task-list-item.is-checked { 23 | position: relative; 24 | filter: url(); 25 | } 26 | ul > li.task-list-item.is-checked::after { 27 | content: ""; 28 | position: absolute; 29 | display: inline-block; 30 | backdrop-filter: grayscale(); 31 | width: 100%; 32 | height: 100%; 33 | top: 0; 34 | left: 0; 35 | } 36 | .markdown-source-view.mod-cm6 37 | .HyperMD-task-line[data-task]:not([data-task=" "]) 38 | span { 39 | filter: grayscale(); 40 | } 41 | ``` 42 | 43 | --- 44 | 45 | ## How to use 46 | 47 | ```md 48 | - [ ] 🚨 Lorem, ipsum dolor sit amet consectetur, adipisicing elit. 49 | - [x] 🚨 Lorem, ipsum dolor sit amet consectetur, adipisicing elit. 50 | ``` 51 | -------------------------------------------------------------------------------- /Snippets/Spoiler text.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Text styling - Spoiler text 4 | 5 | --- 6 | 7 | - author:: pseudometa 8 | - source:: https://discord.com/channels/686053708261228577/702656734631821413/893816224247586868 9 | 10 | --- 11 | 12 | > _Only works in reading mode._ 13 | 14 | cover:: ![](https://i.imgur.com/rd71oCp.gif) 15 | 16 | ```css 17 | /* 18 | author: pseudometa 19 | source: https://discord.com/channels/686053708261228577/702656734631821413/893816224247586868 20 | */ 21 | 22 | /* pseudo(meta) spoiler tags */ 23 | /* blacks out non-hovered-nonactive text surrounded in *~~text~~* */ 24 | .theme-light { 25 | --spoiler-bg: #111; 26 | } 27 | 28 | .theme-dark { 29 | --spoiler-bg: #eee; 30 | } 31 | 32 | div:not(.CodeMirror-activeline) > .CodeMirror-line .cm-em.cm-strikethrough, 33 | em > del { 34 | font-style: initial; 35 | text-decoration: unset; 36 | background-color: var(--spoiler-bg); 37 | color: var(--spoiler-bg); 38 | } 39 | 40 | .CodeMirror-activeline > .CodeMirror-line .cm-em.cm-strikethrough, 41 | em > del:hover, 42 | .cm-em.cm-strikethrough:hover { 43 | background-color: var(--background-secondary-alt) !important; 44 | } 45 | ``` 46 | 47 | --- 48 | 49 | ## How to use 50 | 51 | ```md 52 | _~~your text here~~_ 53 | ``` 54 | -------------------------------------------------------------------------------- /Snippets/Callout styling 02.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Callout Styling 02 4 | 5 | --- 6 | 7 | - author:: kneecaps 8 | - source:: https://discord.com/channels/686053708261228577/702656734631821413/1053024490843557958 9 | 10 | --- 11 | 12 | > _I've modified the original code a bit to get this look_ 13 | 14 | cover:: ![](https://i.imgur.com/izbQq7Q.png) 15 | 16 | ```css 17 | .callout::after { 18 | content: ""; 19 | width: 48px; 20 | height: 15px; 21 | border-radius: 8px; 22 | position: absolute; 23 | display: inline-block; 24 | background: rgb(var(--callout-color)); 25 | margin-top: 0.3%; 26 | margin-left: auto; 27 | border: var(--border-lowOp); 28 | box-shadow: var(--sbs); 29 | } 30 | 31 | .callout { 32 | background: transparent; 33 | } 34 | 35 | body { 36 | --callout-border-width: 2px; 37 | --callout-border-opacity: 1; 38 | } 39 | ``` 40 | 41 | --- 42 | 43 | ## Original code 44 | 45 | ```css 46 | .callout::after { 47 | content: ""; 48 | width: 48px; 49 | height: 12px; 50 | border-radius: 8px; 51 | position: absolute; 52 | display: inline-block; 53 | background: rgb(var(--callout-color)); 54 | margin-top: 0.3%; 55 | margin-left: auto; 56 | border: var(--border-lowOp); 57 | box-shadow: var(--sbs); 58 | } 59 | ``` 60 | -------------------------------------------------------------------------------- /Snippets/Table styling - Left column header.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Table styling - Left column header 4 | 5 | --- 6 | 7 | - author:: zamsyt 8 | - source:: https://discord.com/channels/686053708261228577/702656734631821413/1076475103006687232 9 | 10 | --- 11 | 12 | > _Only works in reading mode_ 13 | 14 | cover:: ![](https://i.imgur.com/yVG3f3o.png) 15 | 16 | ```css 17 | /* 18 | author: zamsyt 19 | source: https://discord.com/channels/686053708261228577/702656734631821413/1076475103006687232 20 | */ 21 | 22 | :is(.cm-table-widget, .markdown-preview-section > div):has(+ * .left-thead) th { 23 | font-weight: unset; 24 | } 25 | :is(.cm-table-widget, .markdown-preview-section > div):has(+ * .left-thead) 26 | > table 27 | > * 28 | > tr 29 | > :first-child { 30 | font-weight: var(--table-header-weight); 31 | background-color: var(--background-secondary); 32 | } 33 | ``` 34 | 35 | --- 36 | 37 | ## How to use 38 | 39 | ```md 40 | | Header 1 | Header 2 | Header 3 | Header 4 | 41 | | :------: | :------: | :------: | :------: | 42 | | Value A | Value B | Value C | Value D | 43 | | Value E | Value F | Value G | Value H | 44 | | Value I | Value J | Value K | Value L | 45 | 46 | 47 | ``` 48 | 49 | > [!warning] Remember to put `` at the bottom of the table 50 | -------------------------------------------------------------------------------- /Snippets/Unordered list styling 02.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Unordered list styling 02 4 | 5 | --- 6 | 7 | - author:: sailKite 8 | - source:: https://discord.com/channels/686053708261228577/702656734631821413/1140761432082886707 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/ZicMDLz.png) 13 | 14 | ```css 15 | /* 16 | author: sailKite 17 | source: https://discord.com/channels/686053708261228577/702656734631821413/1140761432082886707 18 | */ 19 | 20 | :is(.cm-formatting-list-ul, .markdown-rendered ul > li) > .list-bullet::after { 21 | border: 1px solid var(--list-marker-color); 22 | } 23 | :is( 24 | ul:not(li > ul) > li > ul > li, 25 | ul:not(li > ul) > li > ul > li > ul > li > ul > li, 26 | ul:not(li > ul) > li > ul > li > ul > li > ul > li > ul > li > ul > li, 27 | ul:not(li > ul) 28 | > li 29 | > ul 30 | > li 31 | > ul 32 | > li 33 | > ul 34 | > li 35 | > ul 36 | > li 37 | > ul 38 | > li 39 | ul 40 | > li 41 | > ul 42 | > li 43 | ) 44 | > .list-bullet::after, 45 | :is( 46 | .HyperMD-list-line-2, 47 | .HyperMD-list-line-4, 48 | .HyperMD-list-line-6, 49 | .HyperMD-list-line-8 50 | ) 51 | .cm-formatting-list-ul 52 | > .list-bullet::after { 53 | background-color: transparent; 54 | } 55 | ``` 56 | -------------------------------------------------------------------------------- /Snippets/Image grid.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Image grid 4 | 5 | --- 6 | 7 | - author:: FireIsGood 8 | - source:: https://discord.com/channels/686053708261228577/702656734631821413/1096492008526319677 9 | 10 | --- 11 | 12 | > _Only works in reading mode_ 13 | 14 | cover:: ![](https://i.imgur.com/WVW4rKV.png) 15 | 16 | ```css 17 | /* 18 | author: FireIsGood 19 | source: https://discord.com/channels/686053708261228577/702656734631821413/1096492008526319677 20 | */ 21 | 22 | /* Makes multiple images on the same line appear in a flex grid */ 23 | .cm-line:not(.cm-active):has(.image-embed ~ .image-embed), 24 | p:has(.image-embed ~ .image-embed) { 25 | display: flex; 26 | gap: 0.5rem; 27 | } 28 | .cm-line:not(.cm-active):has(.image-embed ~ .image-embed) 29 | :is(.cm-widgetBuffer, span) { 30 | display: none !important; 31 | } 32 | /* Makes a highlighted line shrink the image */ 33 | :root:root .cm-line.cm-active > .image-embed { 34 | width: 100px; 35 | display: inline-block; 36 | } 37 | /* Centers the image if it is modified */ 38 | :root:root .cm-line:not(.cm-active) > .image-embed, 39 | p > .image-embed { 40 | display: flex; 41 | place-items: center; 42 | flex-direction: column; 43 | } 44 | ``` 45 | 46 | --- 47 | 48 | ## Usage 49 | 50 | ```md 51 | ![[image 01.jpg]] 52 | ![[image 01.jpg]] 53 | ![[image 01.jpg]] 54 | ![[image 01.jpg]] 55 | ``` 56 | -------------------------------------------------------------------------------- /Snippets/Image styling - Zoom image.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Image styling - Zoom image 4 | 5 | --- 6 | 7 | - author:: Kepano 8 | - source:: https://forum.obsidian.md/t/image-zoom-click-hold-to-expand-images/5164?u 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/ObcCIWz.gif) 13 | 14 | ```css 15 | /* 16 | author: Kepano 17 | source: https://forum.obsidian.md/t/image-zoom-click-hold-to-expand-images/5164?u 18 | */ 19 | 20 | .view-content img { 21 | max-width: 100%; 22 | cursor: zoom-in; 23 | } 24 | 25 | .view-content img:active { 26 | cursor: zoom-out; 27 | } 28 | .view-content .markdown-preview-view img[referrerpolicy="no-referrer"]:active, 29 | .view-content .image-embed:active { 30 | background: var(--background-primary); 31 | cursor: zoom-out; 32 | display: block; 33 | z-index: 200; 34 | position: fixed; 35 | max-height: 100%; 36 | max-width: 100%; 37 | height: 100%; 38 | width: 100%; 39 | object-fit: contain; 40 | margin: 0 auto; 41 | text-align: center; 42 | padding: 0; 43 | left: 0; 44 | right: 0; 45 | bottom: 0; 46 | } 47 | .view-content .image-embed:active img { 48 | top: 50%; 49 | transform: translateY(-50%); 50 | padding: 0; 51 | margin: 0 auto; 52 | width: 100%; 53 | max-height: 100vh; 54 | object-fit: contain; 55 | left: 0; 56 | right: 0; 57 | bottom: 0; 58 | position: absolute; 59 | opacity: 1; 60 | } 61 | ``` 62 | -------------------------------------------------------------------------------- /Snippets/Heading indicators 01.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Heading indicators 01 4 | 5 | --- 6 | 7 | - author:: rushi 8 | - source:: 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/AVh7wWL.png) 13 | 14 | ```css 15 | :is( 16 | h1, 17 | h2, 18 | h3, 19 | h4, 20 | h5, 21 | h6, 22 | .HyperMD-header-1, 23 | .HyperMD-header-2, 24 | .HyperMD-header-3, 25 | .HyperMD-header-4, 26 | .HyperMD-header-5, 27 | .HyperMD-header-6 28 | )::after { 29 | font-size: 12px; 30 | padding-left: 3em; 31 | color: var(--text-accent); 32 | } 33 | 34 | /* reading mode */ 35 | h1::after { 36 | content: "...H1"; 37 | } 38 | h2::after { 39 | content: "...H2"; 40 | } 41 | h3::after { 42 | content: "...H3"; 43 | } 44 | h4::after { 45 | content: "...H4"; 46 | } 47 | h5::after { 48 | content: "...H5"; 49 | } 50 | h6::after { 51 | content: "...H6"; 52 | } 53 | 54 | /* live preview */ 55 | .HyperMD-header-1:not(.cm-active)::after { 56 | content: "...H1"; 57 | } 58 | .HyperMD-header-2:not(.cm-active)::after { 59 | content: "...H2"; 60 | } 61 | .HyperMD-header-3:not(.cm-active)::after { 62 | content: "...H3"; 63 | } 64 | .HyperMD-header-4:not(.cm-active)::after { 65 | content: "...H4"; 66 | } 67 | .HyperMD-header-5:not(.cm-active)::after { 68 | content: "...H5"; 69 | } 70 | .HyperMD-header-6:not(.cm-active)::after { 71 | content: "...H6"; 72 | } 73 | ``` 74 | -------------------------------------------------------------------------------- /Snippets/Outline numbering.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Outline numbering 4 | 5 | --- 6 | 7 | - author:: sailKite 8 | - source:: https://discord.com/channels/686053708261228577/702656734631821413/1172421139931340810 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/lbylqzH.png) 13 | 14 | ```css 15 | /* 16 | author: sailKite 17 | source: https://discord.com/channels/686053708261228577/702656734631821413/1172421139931340810 18 | */ 19 | 20 | /************************************** 21 | * Header Counters in ToC pane 22 | **************************************/ 23 | 24 | [data-type="outline"] { 25 | counter-reset: rootLayout; 26 | } 27 | [data-type="outline"] .tree-item .tree-item-self .tree-item-inner::before { 28 | content: counters(rootLayout, ".") ". "; 29 | counter-increment: rootLayout; 30 | } 31 | [data-type="outline"] .tree-item-children { 32 | counter-reset: internalLayout; 33 | } 34 | [data-type="outline"] 35 | .tree-item-children 36 | .tree-item 37 | .tree-item-self 38 | .tree-item-inner::before { 39 | content: counters(rootLayout, ".") "." counters(internalLayout, ".") ". " !important; 40 | counter-increment: internalLayout; 41 | } 42 | 43 | /* nested list counting (ex: 1.1, 1.2) */ 44 | ol { 45 | counter-reset: item; 46 | } 47 | 48 | ol li { 49 | display: block; 50 | } 51 | 52 | ol li:before { 53 | content: counters(item, ".") ". "; 54 | counter-increment: item; 55 | padding-right: 5px; 56 | } 57 | ``` 58 | -------------------------------------------------------------------------------- /Snippets/Callout styling - Quote callout.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Callout styling - Quote callout 4 | 5 | --- 6 | 7 | - author:: Adonis 8 | - source:: https://discord.com/channels/686053708261228577/702656734631821413/1040111314963546142 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/lBP1wae.png) 13 | 14 | ```css 15 | /* 16 | author: Adonis 17 | source: https://discord.com/channels/686053708261228577/702656734631821413/1040111314963546142 18 | */ 19 | 20 | .callout[data-callout="quote"] { 21 | --callout-padding: var(--size-4-3); 22 | --icon-size: 70px; 23 | max-width: 250px; 24 | } 25 | .callout[data-callout="quote"] .callout-title .callout-icon { 26 | margin: 0 auto; 27 | } 28 | .callout[data-callout="quote"] .callout-title .callout-title-inner { 29 | display: none; 30 | } 31 | .callout[data-callout="quote"] .callout-content { 32 | padding-top: 20px; 33 | } 34 | .callout[data-callout="quote"] .callout-content p { 35 | font-style: italic; 36 | text-align: center; 37 | } 38 | .callout[data-callout="quote"] .callout-content p:first-child { 39 | margin-top: 0; 40 | } 41 | .callout[data-callout="quote"] .callout-content p:last-child { 42 | font-style: normal; 43 | color: rgb(var(--ctp-yellow, 153, 122, 0)); 44 | text-align: right; 45 | margin-bottom: 0; 46 | } 47 | ``` 48 | 49 | --- 50 | 51 | ## Usage 52 | 53 | ```md 54 | > [!quote] Title 55 | > "Lorem, ipsum dolor sit amet consectetur, adipisicing elit." 56 | > 57 | > \- Alucard 58 | ``` 59 | -------------------------------------------------------------------------------- /Snippets/Link styling 01.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Link styling 01 4 | 5 | --- 6 | 7 | - author:: rushi 8 | - source:: 9 | 10 | --- 11 | 12 | > _Inspired from [Origami theme](https://github.com/7368697661/Origami)_ of **kneecaps**. 13 | 14 | cover:: ![](https://i.imgur.com/4Twe0hL.gif) 15 | 16 | ```css 17 | .markdown-source-view.mod-cm6 .is-unresolved .cm-underline, 18 | .markdown-source-view.mod-cm6 .cm-underline.is-unresolved, 19 | .markdown-source-view.mod-cm6 .cm-underline { 20 | text-decoration-line: underline; 21 | text-decoration-thickness: 2px; 22 | color: var(--text-normal); 23 | text-decoration-color: var(--color-accent); 24 | text-decoration-skip-ink: none; 25 | font-weight: 600; 26 | } 27 | 28 | .markdown-rendered .internal-link { 29 | text-decoration-line: underline; 30 | text-decoration-thickness: 2px; 31 | color: var(--text-normal); 32 | text-decoration-color: var(--color-accent); 33 | text-decoration-skip-ink: none; 34 | font-weight: 600; 35 | } 36 | .markdown-rendered .internal-link:hover { 37 | text-decoration: none; 38 | color: var(--text-accent); 39 | font-weight: 600; 40 | } 41 | 42 | .external-link { 43 | text-decoration-line: underline; 44 | text-decoration-thickness: 2px; 45 | color: var(--text-normal); 46 | text-decoration-color: var(--color-accent); 47 | text-decoration-skip-ink: none; 48 | font-weight: 600; 49 | } 50 | 51 | .external-link:hover { 52 | text-decoration: none; 53 | color: var(--text-accent); 54 | font-weight: 600; 55 | } 56 | ``` 57 | -------------------------------------------------------------------------------- /Snippets/Callout styling - Wikipedia like infobox.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Callout styling - Wikipedia like infobox 4 | 5 | --- 6 | 7 | - author:: chuckharmston 8 | - source:: https://gist.github.com/chuckharmston/3ea52371c399377bad1e3adbe46024a9 9 | 10 | --- 11 | > _Doesn't work with Minimal theme_ 12 | 13 | cover:: ![](https://i.imgur.com/iiY9lqW.png) 14 | 15 | ```css 16 | 17 | ``` 18 | 19 | --- 20 | 21 | ## How to use 22 | 23 | ```md 24 | > [!infobox] 25 | > 26 | > ## Dansby Swanson 27 | > 28 | > ![[dansby-swanson.jpeg]] 29 | > Dansby Swanson details decision to sign with the Chicago Cubs 30 | > 31 | > ### Chicago Cubs – No. 7 32 | > 33 | > | Type | Stat | 34 | > | -------- | --------------------------------------------- | 35 | > | Position | Shortstop | 36 | > | Born | February 11, 1994 (age 28), Kennesaw, Georgia | 37 | > | Bats | Right | 38 | > | Throws | Right | 39 | > 40 | > ### MLB debut 41 | > 42 | > August 17, 2016, for the Atlanta Braves 43 | > 44 | > ### MLB statistics 45 | > 46 | > | Type | Stat | 47 | > | ---- | ---- | 48 | > | AVG | .256 | 49 | > | HR | 103 | 50 | > | RBI | 413 | 51 | > 52 | > ### Teams 53 | > 54 | > - Atlanta Braves (2016-2022) 55 | > - Chicago Cubs (2023-) 56 | > 57 | > ### Career highlights and awards 58 | > 59 | > - All-Star (2022) 60 | > - World Series champion (2021) 61 | > - Gold Glove Award (2022) 62 | ``` 63 | -------------------------------------------------------------------------------- /Snippets/Callout styling - Theorem callout.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Callout styling - Theorem callout 4 | 5 | --- 6 | 7 | - author:: sailKite, elevict 8 | - source:: https://discord.com/channels/686053708261228577/702656734631821413/1164269429543149598 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/8QnNSCF.png) 13 | 14 | ```css 15 | /* 16 | author: sailKite, elevict 17 | source: https://discord.com/channels/686053708261228577/702656734631821413/1164269429543149598 18 | */ 19 | 20 | .callout[data-callout="theorem"] { 21 | --callout-color: var(--text-normal); 22 | font-family: Times; 23 | background-color: rgb(0, 0, 0, 0); 24 | border: solid; 25 | border-radius: 6px; 26 | } 27 | .callout[data-callout="theorem"] .callout-icon { 28 | display: none; 29 | } 30 | .callout[data-callout="theorem"] .callout-title-inner { 31 | font-weight: revert; 32 | } 33 | .callout[data-callout="theorem"] .callout-content { 34 | font-style: italic; 35 | } 36 | ``` 37 | 38 | --- 39 | 40 | ## How to use 41 | 42 | ```md 43 | > [!theorem] **Theorem 1.4.49** (Dominated convergence theorem). 44 | > Let $(X,B,\mu)$ be a measure space, and let $f_1, f_2, \dots: X \rightarrow C$ be a sequence of measurable functions that converge pointwise $\mu$-almost everywhere to a measurable limit $f:X \rightarrow C$. Suppose that there is an unsigned absolutely integrable function $G:X \rightarrow [0,+\infty]$ such that $|f_n|$ are pointwise $\mu$-almost everywhere bounded by $G$ for each $n$. Then we have 45 | > $$\lim_{n \rightarrow \infty}\int_{X}f_nd\mu = \int_{X}f~d\mu$$ 46 | ``` 47 | -------------------------------------------------------------------------------- /Snippets/Sidenote callout 01.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Sidenote callout 01 4 | 5 | --- 6 | 7 | - author:: sailKite 8 | - source:: https://discord.com/channels/686053708261228577/702656734631821413/1155147566615367680 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/z64RVEY.png) 13 | 14 | ```css 15 | /* 16 | author: sailKite 17 | source: https://discord.com/channels/686053708261228577/702656734631821413/1155147566615367680 18 | */ 19 | 20 | /* aside functionality as a custom callout */ 21 | :is(.markdown-source-view .cm-callout, div:not([class])):has( 22 | > .callout[data-callout-metadata*="aside"] 23 | ) { 24 | position: relative; 25 | overflow: visible; 26 | contain: none !important; 27 | } 28 | .callout[data-callout-metadata*="aside"] { 29 | --aside-width: 200px; 30 | --aside-offset: var(--size-4-4); 31 | position: absolute; 32 | } 33 | .callout[data-callout-metadata*="aside-l"] { 34 | left: calc(-1 * (var(--aside-width) + var(--aside-offset))); 35 | right: calc(100% + var(--aside-offset)); 36 | } 37 | .callout[data-callout-metadata*="aside-r"] { 38 | left: calc(100% + var(--aside-offset)); 39 | right: calc(-1 * (var(--aside-width) + var(--aside-offset))); 40 | } 41 | @media (hover: hover) { 42 | .markdown-source-view.mod-cm6 43 | .cm-embed-block:has(> div > [data-callout-metadata*="aside"]):hover { 44 | overflow: visible; 45 | } 46 | } 47 | ``` 48 | 49 | --- 50 | 51 | ## How to use 52 | 53 | ```md 54 | > [!bug|aside-r] 55 | > your text here 56 | ``` 57 | 58 | ```md 59 | > [!bug|aside-l] 60 | > your text here 61 | ``` 62 | -------------------------------------------------------------------------------- /Snippets/Image as a background 02.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Image as a background 02 4 | 5 | --- 6 | 7 | - author:: Bluemoondragon07 8 | - source:: https://forum.obsidian.md/t/how-to-add-a-custom-image-as-a-background/53416/2?u 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/fsE8GIl.png) 13 | 14 | ```css 15 | /* 16 | author: Bluemoondragon07 17 | source: https://forum.obsidian.md/t/how-to-add-a-custom-image-as-a-background/53416/2?u 18 | */ 19 | 20 | .theme-light .workspace { 21 | backdrop-filter: brightness(1) blur(5px); /* filter for light mode */ 22 | background-color: transparent; 23 | } 24 | .theme-dark .workspace { 25 | backdrop-filter: brightness(0.35) blur(5px); /* filter for dark mode */ 26 | background-color: transparent; 27 | } 28 | .horizontal-main-container { 29 | /* below is the background image. Change it to whatever you want */ 30 | background: url(https://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2076&q=80); 31 | background-size: cover; 32 | } 33 | .workspace-split.mod-root { 34 | background-color: var(--background-primary); 35 | } 36 | 37 | body { 38 | /* the background-primary makes the main note pane completely transparent. 39 | You can change it to be semi-transparent if you want. 40 | I changed background-secondary and divider-width because it 41 | looks a bit cleaner in my opinion. You can delete those modifications if you want.*/ 42 | --background-primary: transparent; 43 | --background-secondary: transparent; 44 | --divider-width: 0px; 45 | } 46 | ``` 47 | -------------------------------------------------------------------------------- /Snippets/Callout styling - Scroller callout.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Callout styling - Scroller callout 4 | 5 | --- 6 | 7 | - author:: FireIsGood 8 | - source:: https://discord.com/channels/686053708261228577/702656734631821413/1103116637529456720 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/nSnLYXO.gif) 13 | 14 | ```css 15 | /* 16 | author: FireIsGood 17 | source: https://discord.com/channels/686053708261228577/702656734631821413/1103116637529456720 18 | */ 19 | 20 | [data-callout="scroller"] { 21 | --callout-color: 255, 0, 0; /* Replace this with rgb values */ 22 | --shown-line-count: 8; /* Replace this with the number of text lines to show */ 23 | } 24 | [data-callout="scroller"] .callout-title { 25 | display: none; 26 | } 27 | [data-callout="scroller"] .callout-content { 28 | max-height: calc(var(--line-height-normal) * 1rem * var(--shown-line-count)); 29 | } 30 | ``` 31 | 32 | --- 33 | 34 | ## How to use 35 | 36 | ```md 37 | > [!scroller] 38 | > Generating random paragraphs can be an excellent way for writers to get their creative flow going at the beginning of the day. The writer has no idea what topic the random paragraph will be about when it appears. This forces the writer to use creativity to complete one of three common writing challenges. The writer can use the paragraph as the first one of a short story and build upon it. A second option is to use the random paragraph somewhere in a short story they create. The third option is to have the random paragraph be the ending paragraph in a short story. No matter which of these challenges is undertaken, the writer is forced to use creativity to incorporate the paragraph into their writing. 39 | ``` 40 | -------------------------------------------------------------------------------- /Snippets/Callout styling - Leader list callout.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Callout styling - Leader list callout 4 | 5 | --- 6 | 7 | - author:: sailKite 8 | - source:: https://discord.com/channels/686053708261228577/702656734631821413/1148625898074017863 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/n0bH8ST.png) 13 | 14 | ```css 15 | /* 16 | author: sailKite 17 | source: https://discord.com/channels/686053708261228577/702656734631821413/1148625898074017863 18 | */ 19 | 20 | /* goofy attempt at dot leaders */ 21 | .callout[data-callout="leader-list"] { 22 | --callout-color: unset; 23 | --callout-icon: unset; 24 | --callout-blend-mode: normal; 25 | padding: unset; 26 | margin: unset; 27 | } 28 | .callout[data-callout="leader-list"] > .callout-title { 29 | display: none; 30 | } 31 | .callout[data-callout="leader-list"] > .callout-content { 32 | --gap: var(--size-2-2); 33 | display: grid; 34 | grid-template-columns: 1fr auto; 35 | row-gap: var(--gap); 36 | } 37 | .callout[data-callout="leader-list"] > .callout-content > p { 38 | display: grid; 39 | grid-template-columns: auto 1fr; 40 | margin: unset; 41 | } 42 | .callout[data-callout="leader-list"] > .callout-content > p::after { 43 | content: " "; 44 | background-image: radial-gradient( 45 | circle, 46 | currentColor 0px 0.1em, 47 | transparent 0.1em 48 | ); 49 | background-size: 0.5em 1em; 50 | background-position: bottom right; 51 | background-repeat: repeat-x; 52 | } 53 | .callout[data-callout="leader-list"] > .callout-content > blockquote { 54 | padding: unset; 55 | margin: unset; 56 | border: unset; 57 | align-self: center; 58 | text-align: end; 59 | } 60 | ``` 61 | -------------------------------------------------------------------------------- /Snippets/New note button.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # New note button 4 | 5 | --- 6 | 7 | - author:: kneecaps 8 | - source:: 9 | 10 | --- 11 | 12 | > _Extracted form [Origami Theme](https://github.com/7368697661/Origami)_ of **kneecaps** 13 | 14 | cover:: ![](https://i.imgur.com/N1Sbvj2.png) 15 | 16 | ```css 17 | /* 18 | MIT License 19 | 20 | Copyright (c) 2022 kneecaps 21 | 22 | Permission is hereby granted, free of charge, to any person obtaining a copy 23 | of this software and associated documentation files (the "Software"), to deal 24 | in the Software without restriction, including without limitation the rights 25 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 26 | copies of the Software, and to permit persons to whom the Software is 27 | furnished to do so, subject to the following conditions: 28 | 29 | The above copyright notice and this permission notice shall be included in all 30 | copies or substantial portions of the Software. 31 | 32 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 33 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 34 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 35 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 36 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 37 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 38 | SOFTWARE. 39 | */ 40 | 41 | .clickable-icon[aria-label="New note"] { 42 | padding: 0px 8px 0px 4px; 43 | border: var(--o-border); 44 | } 45 | 46 | .clickable-icon[aria-label="New note"]::before { 47 | content: "New Note"; 48 | padding: 0px 8px; 49 | } 50 | ``` 51 | -------------------------------------------------------------------------------- /Snippets/Pinned tab styling.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Pinned tab styling 4 | 5 | --- 6 | 7 | - author:: damikiller37 8 | - source:: https://discord.com/channels/686053708261228577/702656734631821413/1122956284040327328 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/1Shx6tI.png) 13 | 14 | ```css 15 | /* 16 | author: damikiller37 17 | source: https://discord.com/channels/686053708261228577/702656734631821413/1122956284040327328 18 | */ 19 | 20 | /* 21 | Icon Only Pinned Tabs Snippet 22 | Requires Installer version 1.1.9+ due to the use of :has. 23 | */ 24 | 25 | /* You don't need this if you you want the pin icons removed */ 26 | .workspace 27 | .mod-root 28 | .workspace-tab-header[data-type="markdown"]:has(.mod-pinned) 29 | .workspace-tab-header-inner-icon, 30 | .workspace 31 | .mod-root 32 | .workspace-tab-header[data-type="empty"]:has(.mod-pinned) 33 | .workspace-tab-header-inner-icon { 34 | display: flex; 35 | } 36 | 37 | .workspace-tab-header:has(.mod-pinned) .workspace-tab-header-inner-title { 38 | display: none; 39 | } 40 | 41 | .workspace .mod-root .workspace-tab-header:has(.mod-pinned), 42 | .workspace-tab-header:has(.mod-pinned) .workspace-tab-header-inner { 43 | flex: unset; 44 | width: fit-content; 45 | min-width: unset; 46 | } 47 | 48 | /* Keep below if you want to remove the pin icon as well (You can unpin using the right click menu) */ 49 | 50 | .workspace-tab-header:has(.mod-pinned) .workspace-tab-header-status-container { 51 | display: none; 52 | } 53 | 54 | .workspace-tab-header:has(.mod-pinned) .workspace-tab-header-inner-icon { 55 | padding-right: unset; 56 | } 57 | 58 | .workspace-tab-header:has(.mod-pinned) .workspace-tab-header-inner { 59 | padding: 0 var(--size-4-2); 60 | } 61 | ``` 62 | -------------------------------------------------------------------------------- /Snippets/Blockquote styling 02.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Blockquote styling 02 4 | 5 | --- 6 | 7 | - author:: ApolloGoneRogue 8 | - source:: https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/244?u 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/KuFyzsu.png) 13 | 14 | ```css 15 | /* 16 | author: ApolloGoneRogue 17 | source: https://forum.obsidian.md/t/how-to-achieve-css-code-snippets/8474/244?u 18 | */ 19 | 20 | /* This snippet provides a style to blockquotes and to the element. */ 21 | 22 | /* for preview */ 23 | .markdown-preview-view blockquote { 24 | border-color: #1abf7f !important; 25 | border-left-width: 2px !important; 26 | background-image: linear-gradient( 27 | to right, 28 | rgba(26, 191, 127, 0.1), 29 | rgba(26, 191, 127, 0) 30 | ); 31 | font-size: 1em; 32 | line-height: 1.5em; 33 | margin: auto; 34 | margin-bottom: 10px; 35 | padding-top: 10px; 36 | padding-bottom: 10px; 37 | padding-right: 15px; 38 | width: 80%; 39 | } 40 | 41 | .markdown-preview-view blockquote { 42 | position: relative; 43 | } 44 | 45 | .markdown-preview-view blockquote:after { 46 | content: "\275D"; 47 | position: absolute; 48 | top: 0.4em; 49 | left: -1em; 50 | font-size: 2.5em; 51 | color: #1abf7f; 52 | } 53 | 54 | cite { 55 | color: #1abf7f; 56 | text-align: end; 57 | display: block; 58 | } 59 | ``` 60 | 61 | --- 62 | 63 | ## How to use 64 | 65 | ```md 66 | > Lorem ipsum dolor sit amet, consectetur, adipisicing elit. Iure minus voluptates illum aspernatur officia vel officiis, et quis qui. Enim omnis officia sunt consectetur obcaecati repudiandae! Numquam, voluptas at, ab officiis recusandae, dolorum inventore quod iste cumque explicabo dicta quidem accusantium velit odit deleniti, ipsum commodi? 67 | > Name of the author 68 | ``` 69 | -------------------------------------------------------------------------------- /Snippets/Callout styling - Label callout.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Callout styling - Label callout 4 | 5 | --- 6 | 7 | - author:: sailKite, Lunairee 8 | - source:: https://discord.com/channels/686053708261228577/702656734631821413/1073456247849881610 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/vVuVZYy.png) 13 | 14 | ```css 15 | /* original by Lunairee#2396 on Obsidian Discord */ 16 | .callout[data-callout-metadata*="label"] { 17 | --block-spacing: 1rem; 18 | --speaker-block-width: 20%; 19 | margin: 0px; 20 | padding: 0px; 21 | display: grid; 22 | grid-template-columns: var(--speaker-block-width) calc(100% - var(--speaker-block-width)); 23 | background-color: var(--background-primary); 24 | border: none; 25 | } 26 | 27 | .callout[data-callout-metadata*="label"] .callout-title { 28 | display: inline-block; 29 | height: calc(100% - var(--block-spacing)); 30 | text-align: right; 31 | border-right: 3px solid; 32 | padding-right: var(--block-spacing); 33 | flex: 1 0 auto; 34 | } 35 | 36 | .callout[data-callout-metadata*="label"] > * { 37 | margin-top: var(--block-spacing); 38 | } 39 | 40 | .callout[data-callout-metadata*="label"] > .callout-title > .callout-icon { 41 | display: none; 42 | } 43 | 44 | .callout[data-callout-metadata*="label"] > .callout-content { 45 | padding: 0px var(--block-spacing); 46 | } 47 | .callout[data-callout-metadata*="label"] > .callout-content > p:first-child { 48 | margin-top: 0px; 49 | } 50 | .callout[data-callout-metadata*="label"] > .callout-content > p:last-child { 51 | margin-bottom: 0px; 52 | } 53 | ``` 54 | 55 | --- 56 | 57 | ## How to use 58 | 59 | ```md 60 | > [!bug|label] Lorem, ipsum dolor sit amet 61 | > Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Lorem, ipsum dolor sit amet consectetur, adipisicing elit. 62 | ``` 63 | -------------------------------------------------------------------------------- /Snippets/Hide ribbon on collapse.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Ribbon styling - Hide ribbon on collapse 4 | 5 | --- 6 | 7 | - author:: matekusu 8 | - source:: https://discord.com/channels/686053708261228577/702656734631821413/1147232919946022943 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/FCwk5lw.gif) 13 | 14 | ```css 15 | /* 16 | author: matekusu 17 | source: https://discord.com/channels/686053708261228577/702656734631821413/1147232919946022943 18 | */ 19 | 20 | /* Immersive Ribbon Menu */ 21 | .workspace-ribbon.mod-left { 22 | background-color: transparent; /*c myn: hides weird flashing in default theme when opening */ 23 | transition: all 0.2s ease-in-out; 24 | &::before { 25 | border-bottom-color: transparent; 26 | transition: all 0.2s ease-in-out; 27 | } 28 | &.is-collapsed { 29 | border-right-color: transparent; 30 | transition: all 0.2s ease-in-out; 31 | &::before { 32 | border-bottom-color: var(--tab-outline-color); 33 | transition: all 0.2s ease-in-out; 34 | } 35 | &:hover > :nth-child(n + 2) { 36 | opacity: 1; 37 | transition: all 0.2s ease-in-out; 38 | } 39 | &:not(:hover) > :nth-child(n + 2) { 40 | opacity: 0; 41 | transition: all 0.2s ease-in-out; 42 | } 43 | } 44 | } 45 | 46 | /* Immersive Sidebar Collapse */ 47 | .workspace-split.mod-horizontal:is(.mod-left-split, .mod-right-split) { 48 | &.is-sidedock-collapsed { 49 | .workspace-tabs .workspace-tab-header-container, 50 | .workspace-tabs .workspace-tab-container, 51 | .workspace-tabs .workspace-leaf-resize-handle, 52 | .workspace-tabs.mod-top .workspace-tab-header-inner { 53 | opacity: 0; 54 | transition: all 0.2s ease-in-out; 55 | } 56 | .workspace-tabs.mod-top .workspace-tab-header-container { 57 | opacity: 1; 58 | } 59 | } 60 | } 61 | ``` 62 | -------------------------------------------------------------------------------- /Snippets/External link styling 01.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # External link styling 01 4 | 5 | --- 6 | 7 | - author:: sailKite 8 | - source:: https://discord.com/channels/686053708261228577/702656734631821413/1144453260707647538 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/WzApq7M.png) 13 | 14 | ```css 15 | /* 16 | author: sailKite 17 | source: https://discord.com/channels/686053708261228577/702656734631821413/1144453260707647538 18 | */ 19 | 20 | .external-link:after { 21 | content: ""; 22 | display: inline-block; 23 | font-weight: 300; 24 | font-size: 15px; 25 | margin-left: 2px; 26 | transition: 100ms; 27 | 28 | /* these bits are for sizing the box */ 29 | width: 1em; 30 | aspect-ratio: 1; 31 | 32 | /* setting the "image" as a mask through which the background color can show */ 33 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' stroke='currentColor' fill='currentColor' viewBox='0 0 24 24'%3E%3Cpath d='M18.3643 15.5353L16.95 14.1211L18.3643 12.7069C20.3169 10.7543 20.3169 7.58847 18.3643 5.63585C16.4116 3.68323 13.2458 3.68323 11.2932 5.63585L9.87898 7.05007L8.46477 5.63585L9.87898 4.22164C12.6127 1.48797 17.0448 1.48797 19.7785 4.22164C22.5121 6.95531 22.5121 11.3875 19.7785 14.1211L18.3643 15.5353ZM15.5358 18.3638L14.1216 19.778C11.388 22.5117 6.9558 22.5117 4.22213 19.778C1.48846 17.0443 1.48846 12.6122 4.22213 9.87849L5.63634 8.46428L7.05055 9.87849L5.63634 11.2927C3.68372 13.2453 3.68372 16.4112 5.63634 18.3638C7.58896 20.3164 10.7548 20.3164 12.7074 18.3638L14.1216 16.9496L15.5358 18.3638ZM14.8287 7.75717L16.2429 9.17139L9.17187 16.2425L7.75766 14.8282L14.8287 7.75717Z'%3E%3C/path%3E%3C/svg%3E"); 34 | background-color: currentColor; 35 | } 36 | 37 | /* remove external link icon */ 38 | .external-link { 39 | background-image: none; 40 | padding-right: 0; 41 | } 42 | ``` 43 | -------------------------------------------------------------------------------- /Snippets/Callout icon to the top right corner.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Callout icon to the top right corner 4 | 5 | --- 6 | 7 | - author:: efemkay 8 | - source:: 9 | 10 | --- 11 | 12 | > _Extracted from [Listive theme](https://github.com/efemkay/obsidian-listive-theme) by_ **efemkay**. 13 | 14 | cover:: ![](https://i.imgur.com/Ew0oJi0.png) 15 | 16 | ```css 17 | /* 18 | MIT License 19 | 20 | Copyright (c) 2022 efemkay 21 | 22 | Permission is hereby granted, free of charge, to any person obtaining a copy 23 | of this software and associated documentation files (the "Software"), to deal 24 | in the Software without restriction, including without limitation the rights 25 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 26 | copies of the Software, and to permit persons to whom the Software is 27 | furnished to do so, subject to the following conditions: 28 | 29 | The above copyright notice and this permission notice shall be included in all 30 | copies or substantial portions of the Software. 31 | 32 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 33 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 34 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 35 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 36 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 37 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 38 | SOFTWARE. 39 | */ 40 | 41 | body.markdown-preview-view .callout-icon > svg { 42 | width: 48px; 43 | height: 48px; 44 | } 45 | 46 | .callout > .callout-title > .callout-icon { 47 | --icon-size: 48px; 48 | opacity: 0.3; 49 | position: absolute; 50 | top: -10px; 51 | right: -8px; 52 | } 53 | 54 | .callout { 55 | position: relative; 56 | } 57 | ``` 58 | -------------------------------------------------------------------------------- /Snippets/Gradient Colored Icon Tabs.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Gradient Colored Icon Tabs 4 | 5 | --- 6 | 7 | - author:: ebullient 8 | - source:: https://discord.com/channels/686053708261228577/702656734631821413/930097778741354517 9 | 10 | --- 11 | 12 | > _Only works when your note is on one of the sidebars. You can change file name `colors` in the code with your file name_ 13 | 14 | cover:: ![](https://i.imgur.com/JDNmpNe.png) 15 | 16 | ```css 17 | /* 18 | author: ebullient 19 | source: https://discord.com/channels/686053708261228577/702656734631821413/930097778741354517 20 | */ 21 | 22 | .workspace-tab-header[aria-label="colors"] 23 | > .workspace-tab-header-inner 24 | > .workspace-tab-header-inner-icon { 25 | width: 17px; 26 | height: 17px; 27 | background: red; /* For browsers that do not support gradients */ 28 | background: -webkit-linear-gradient( 29 | left, 30 | red, 31 | orange, 32 | yellow, 33 | green, 34 | cyan, 35 | blue, 36 | violet 37 | ); /* For Safari 5.1 to 6.0 */ 38 | background: -o-linear-gradient( 39 | right, 40 | red, 41 | orange, 42 | yellow, 43 | green, 44 | cyan, 45 | blue, 46 | violet 47 | ); /* For Opera 11.1 to 12.0 */ 48 | background: -moz-linear-gradient( 49 | right, 50 | red, 51 | orange, 52 | yellow, 53 | green, 54 | cyan, 55 | blue, 56 | violet 57 | ); /* For Firefox 3.6 to 15 */ 58 | background: linear-gradient( 59 | to right, 60 | red, 61 | orange, 62 | yellow, 63 | green, 64 | cyan, 65 | blue, 66 | violet 67 | ); /* Standard syntax (must be last) */ 68 | border-radius: 4px; 69 | } 70 | .workspace-tab-header[aria-label="colors"] 71 | > .workspace-tab-header-inner 72 | > .workspace-tab-header-inner-icon 73 | > svg { 74 | display: none; 75 | } 76 | ``` 77 | 78 | --- 79 | -------------------------------------------------------------------------------- /Snippets/Tooltip styling.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Tooltip styling 4 | 5 | --- 6 | 7 | - author:: kneecaps 8 | - source:: 9 | 10 | --- 11 | 12 | > _Extracted form [Origami Theme](https://github.com/7368697661/Origami)_ of **kneecaps** 13 | 14 | cover:: ![](https://i.imgur.com/wyGvM7S.png) 15 | 16 | ```css 17 | /* 18 | MIT License 19 | 20 | Copyright (c) 2022 kneecaps 21 | 22 | Permission is hereby granted, free of charge, to any person obtaining a copy 23 | of this software and associated documentation files (the "Software"), to deal 24 | in the Software without restriction, including without limitation the rights 25 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 26 | copies of the Software, and to permit persons to whom the Software is 27 | furnished to do so, subject to the following conditions: 28 | 29 | The above copyright notice and this permission notice shall be included in all 30 | copies or substantial portions of the Software. 31 | 32 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 33 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 34 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 35 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 36 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 37 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 38 | SOFTWARE. 39 | */ 40 | 41 | .tooltip { 42 | background-color: var(--red); 43 | color: black; 44 | word-wrap: break-word; 45 | } 46 | .tooltip .tooltip-arrow { 47 | border-bottom: 5px solid var(--red); 48 | } 49 | .tooltip.mod-right .tooltip-arrow { 50 | border-right: 5px solid var(--red); 51 | } 52 | .tooltip.mod-left .tooltip-arrow { 53 | border-left: 5px solid var(--red); 54 | } 55 | .tooltip.mod-top .tooltip-arrow { 56 | border-top: 5px solid var(--red); 57 | } 58 | body { 59 | --red: hsla(var(--interactive-accent-hsl), 0.9); 60 | } 61 | ``` 62 | -------------------------------------------------------------------------------- /Snippets/Progress bar styling.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Progress bar styling 4 | 5 | --- 6 | 7 | - author:: sailKite 8 | - source:: https://discord.com/channels/686053708261228577/702656734631821413/1160777103948656681 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/KNfB1GQ.png) 13 | 14 | ```css 15 | /* 16 | author: sailKite 17 | source: https://discord.com/channels/686053708261228577/702656734631821413/1160777103948656681 18 | */ 19 | 20 | /* basic star rating system using progress elements */ 21 | :is( 22 | .markdown-preview-view, 23 | .markdown-rendered, 24 | .markdown-source-view.is-live-preview 25 | ) 26 | progress.star { 27 | --total-number-of-stars: 10; 28 | height: 20px; 29 | vertical-align: middle; 30 | } 31 | :is( 32 | .markdown-preview-view, 33 | .markdown-rendered, 34 | .markdown-source-view.is-live-preview 35 | ) 36 | progress[value].star::-webkit-progress-bar { 37 | container: starprog / inline-size; 38 | border: none; 39 | box-shadow: none; 40 | /* background: transparent; */ 41 | } 42 | :is( 43 | .markdown-preview-view, 44 | .markdown-rendered, 45 | .markdown-source-view.is-live-preview 46 | ) 47 | progress[value].star::-webkit-progress-value { 48 | background-color: unset; 49 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='dodgerblue' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-star'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E"); 50 | background-size: calc(100cqw / var(--total-number-of-stars)) 100%; 51 | } 52 | ``` 53 | 54 | --- 55 | 56 | ## How to use 57 | 58 | ```md 59 | 70% 60 | 70% 61 | 70% 62 | 70% 63 | 70% 64 | ``` 65 | -------------------------------------------------------------------------------- /.obsidian/plugins/obsidian-style-settings/data.json: -------------------------------------------------------------------------------- 1 | { 2 | "chime-theme@@theme-settings": "theme-anytype", 3 | "chime-theme@@hide-dividers": false, 4 | "chime-theme@@cards-layout": false, 5 | "chime-theme@@classic-layout": false, 6 | "chime-theme@@line-style": "line-style-solid", 7 | "chime-theme@@border-width": 1.2, 8 | "chime-theme@@border-radius-average": 11, 9 | "chime-theme@@folder-color-options": "folder-default", 10 | "chime-theme@@tab-text-color-focused-active-current": "var(--text-accent)", 11 | "chime-theme@@background-image": false, 12 | "chime-theme@@custom-image": "url(https://images.unsplash.com/photo-1554034483-04fda0d3507b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80)", 13 | "chime-theme@@bg-blur": 1, 14 | "chime-theme@@blockquote-mark": false, 15 | "chime-theme@@checkbox-style": "checkbox-anytype", 16 | "chime-theme@@tag-style": "tag-button", 17 | "chime-theme@@link-style": "link-em", 18 | "chime-theme@@code-normal": "var(--text-muted)", 19 | "chime-theme@@code-background": "var(--background-primary-alt)", 20 | "chime-theme@@hide-buttons": false, 21 | "chime-theme@@hide-tabs": false, 22 | "chime-theme@@hide-titlebar": true, 23 | "chime-theme@@hide-scrollbars": false, 24 | "chime-theme@@ultra-focus": false, 25 | "minimal-style@@ribbon-style": "ribbon-hidden", 26 | "minimal-style@@window-title-off": false, 27 | "minimal-style@@file-header-visibility": "minimal-tab-title-visible", 28 | "minimal-style@@frame-background@@light": "#F52727", 29 | "minimal-advanced@@styled-scrollbars": true, 30 | "minimal-advanced@@cursor": "default", 31 | "chime-theme@@heading-colors": "heading-default", 32 | "chime-theme@@smaller-headings": false, 33 | "chime-theme@@h1-variant": "petite-caps", 34 | "chime-theme@@h1-center": true, 35 | "chime-theme@@h1-bottom-border": false, 36 | "chime-theme@@blockquote-style": "blockquote-floating", 37 | "chime-theme@@colored-bold-and-italic": false, 38 | "chime-theme@@underlined-highlight": false, 39 | "chime-theme@@increased-line-height": false, 40 | "chime-theme@@custom-font-toggle": true, 41 | "chime-theme@@custom-font": "Merriweather" 42 | } -------------------------------------------------------------------------------- /Snippets/Hide titlebar buttons and freeze the right-sidedock toggle button position.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Hide titlebar buttons and freeze the right-sidedock toggle button position 4 | 5 | --- 6 | 7 | - author:: cerenkov 8 | - source:: 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/GD4gqWJ.gif) 13 | 14 | ```css 15 | /* hide window's titlebar buttons (minimize, maximize, close) 16 | and freeze the right-sidedock toggle button position to the right corner 17 | (making the left- and right-sidedock behaviours symmetrical, at last) 18 | only when obsidian is using hidden-frameless style and is maximized but not fullscreen */ 19 | /* author: cerenkov */ 20 | 21 | /* hide titlebar buttons */ 22 | body.is-hidden-frameless.is-maximized:not(.is-fullscreen) 23 | .titlebar-button-container.mod-right { 24 | display: none !important; 25 | } 26 | 27 | /* expand the tabbar to full width like when there's no titlebar buttons */ 28 | body.is-hidden-frameless.is-maximized:not(.is-fullscreen) 29 | .workspace-tab-header-container { 30 | padding-right: 8px !important; 31 | } 32 | 33 | /* remove the tabbar::after placeholder of titlebar buttons */ 34 | body.is-hidden-frameless.is-maximized:not(.is-fullscreen) 35 | .workspace-tab-header-container::after { 36 | display: none !important; 37 | } 38 | 39 | /* move the right-sidedock toggle button to the right corner when right-sidedock is open 40 | with a caveat that it might overlap with right-sidedock tab icons 41 | but you can use a horizontal split and keep most icons in the lower workspace */ 42 | body.is-hidden-frameless.is-maximized:not(.is-fullscreen):has(.is-right-sidedock-open) 43 | .sidebar-toggle-button.mod-right { 44 | position: fixed !important; 45 | right: 8px !important; 46 | z-index: 5; 47 | } 48 | 49 | /* modify the right-sidedock spacer element to be a no-drag region 50 | so that the right-sidedock toggle button can receive mouse click events 51 | with a caveat that the right spacer region can no longer double click to maximize/restore 52 | but you can still double click / right click on the left-sidedock spacer region */ 53 | body.is-hidden-frameless.is-maximized:not(.is-fullscreen):has(.is-right-sidedock-open) 54 | .mod-sidedock.mod-right-split 55 | .workspace-tab-header-spacer { 56 | app-region: no-drag !important; 57 | } 58 | ``` -------------------------------------------------------------------------------- /Snippets/Image as a background 01.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Image as a background 01 4 | 5 | --- 6 | 7 | - author:: Chetachi 8 | - source:: https://discord.com/channels/686053708261228577/702656734631821413/893904428430680065 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/OL69KyI.png) 13 | 14 | ```css 15 | /* 16 | author: Chetachi 17 | source: https://discord.com/channels/686053708261228577/702656734631821413/893904428430680065 18 | */ 19 | 20 | .workspace { 21 | background-image: url("https://images.wallpapersden.com/image/download/macos-12-monterey-stock-dark_bGxsaGiUmZqaraWkpJRmbmdlrWZlbWU.jpg"); 22 | background-size: cover; 23 | --background-primary: #20202040; 24 | --background-primary-alt: #1a1a1a40; 25 | --background-secondary: #16161640; 26 | --background-secondary-alt: #00000040; 27 | --background-modifier-border: #00000040; 28 | --background-modifier-form-field: var(--background-primary-alt); 29 | --svg-faint: var(--text-muted); 30 | } 31 | 32 | .graph-controls { 33 | border: none; 34 | } 35 | 36 | .graph-controls, 37 | .graph-controls.is-close, 38 | .theme-light .nav-action-button.is-active, 39 | .theme-dark .nav-action-button.is-active, 40 | .theme-light .workspace-tab-header.is-active, 41 | .theme-dark .workspace-tab-header.is-active { 42 | box-shadow: none !important; 43 | } 44 | 45 | .workspace-ribbon, 46 | .workspace-split .workspace-tabs { 47 | background: var(--background-primary); 48 | background-color: var(--background-primary) !important; 49 | } 50 | 51 | .workspace-tabs .workspace-leaf { 52 | background-color: unset; 53 | } 54 | 55 | div.view-header, 56 | .workspace-tab-header-container, 57 | .workspace-split.mod-root .view-content, 58 | .mod-root .CodeMirror-gutter.CodeMirror-linenumbers, 59 | .mod-root .CodeMirror-gutter.CodeMirror-foldgutter { 60 | background-color: transparent !important; 61 | } 62 | 63 | /* 64 | body:not(.no-svg-replace) svg.right-triangle, 65 | body:not(.no-svg-replace) 66 | .markdown-preview-view 67 | .collapse-indicator 68 | > svg.right-triangle { 69 | background-color: var(--text-muted); 70 | } 71 | */ 72 | 73 | body:not(.no-svg-replace) svg.right-triangle, 74 | body:not(.no-svg-replace) span[title="Fold line"]:after, 75 | body:not(.no-svg-replace) span[title="Unfold line"]:after, 76 | body:not(.no-svg-replace) .CodeMirror-foldgutter-open:after, 77 | body:not(.no-svg-replace) .CodeMirror-foldgutter-folded:after { 78 | color: var(--text-muted); 79 | } 80 | ``` 81 | -------------------------------------------------------------------------------- /Snippets/Code block styling 01.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Code block styling 01 4 | 5 | --- 6 | 7 | - author:: kneecaps 8 | - source:: 9 | 10 | --- 11 | 12 | > _Extracted from [Origami theme](https://github.com/7368697661/Origami) of_ **kneecaps**. 13 | 14 | cover:: ![](https://i.imgur.com/EX3aQgt.png) 15 | 16 | ```css 17 | /* 18 | MIT License 19 | 20 | Copyright (c) 2022 kneecaps 21 | 22 | Permission is hereby granted, free of charge, to any person obtaining a copy 23 | of this software and associated documentation files (the "Software"), to deal 24 | in the Software without restriction, including without limitation the rights 25 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 26 | copies of the Software, and to permit persons to whom the Software is 27 | furnished to do so, subject to the following conditions: 28 | 29 | The above copyright notice and this permission notice shall be included in all 30 | copies or substantial portions of the Software. 31 | 32 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 33 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 34 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 35 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 36 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 37 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 38 | SOFTWARE. 39 | */ 40 | 41 | /* reading mode */ 42 | .markdown-rendered pre { 43 | border: solid var(--color-accent); 44 | border-radius: var(--radius-m); 45 | box-shadow: var(--shadow-lm-only); 46 | } 47 | 48 | /* live preview */ 49 | .cm-s-obsidian div.HyperMD-codeblock-begin-bg { 50 | background: var(--code-background); 51 | border-top: solid var(--color-accent); 52 | /* stylelint-disable-next-line declaration-no-important */ 53 | border-top-right-radius: 8px !important; 54 | /* stylelint-disable-next-line declaration-no-important */ 55 | border-top-left-radius: 8px !important; 56 | margin-top: 8px; 57 | } 58 | 59 | .cm-s-obsidian div.HyperMD-codeblock-end-bg { 60 | background: var(--code-background); 61 | border-bottom: solid var(--color-accent); 62 | border-bottom-right-radius: 8px; 63 | border-bottom-left-radius: 8px; 64 | } 65 | 66 | .cm-s-obsidian div.HyperMD-codeblock-bg { 67 | border-right: solid var(--color-accent); 68 | border-left: solid var(--color-accent); 69 | } 70 | ``` 71 | -------------------------------------------------------------------------------- /Snippets/Callout styling - Tabbed callout.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Callout styling - Tabbed callout 4 | 5 | --- 6 | 7 | - author:: FireIsGood 8 | - source:: https://discord.com/channels/686053708261228577/702656734631821413/1092995965583114341 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/ai6x8Ha.gif) 13 | 14 | ```css 15 | /* 16 | author: FireIsGood 17 | source: https://discord.com/channels/686053708261228577/702656734631821413/1092995965583114341 18 | */ 19 | 20 | [data-callout="tabbed"] { 21 | outline: 1px solid var(--color-base-30); 22 | border-radius: 0.5rem; 23 | } 24 | [data-callout="tabbed"] > .callout-content { 25 | padding: 0.25rem; 26 | 27 | display: grid; 28 | grid-template-columns: repeat(auto-fill, minmax(5rem, max-content)); 29 | gap: 0 1rem; 30 | } 31 | [data-callout="tabbed"] > .callout-title { 32 | display: none; 33 | } 34 | [data-callout="tabbed"] > .callout-content p { 35 | margin: 0; 36 | } 37 | [data-callout="tabbed"] > .callout-content label > input { 38 | display: none; 39 | } 40 | [data-callout="tabbed"] > .callout-content label { 41 | width: 100%; 42 | display: inline-block; 43 | padding: 0.15rem 0.75ch; 44 | border-radius: 1rem; 45 | 46 | color: #ccc; 47 | background-color: #2e7d32; 48 | 49 | text-align: center; 50 | font-weight: bold; 51 | font-size: 1.15rem; 52 | cursor: pointer; 53 | } 54 | [data-callout="tabbed"] > .callout-content label:has(input:checked) { 55 | color: white; 56 | background-color: #8bc34a; 57 | } 58 | [data-callout="tabbed"] 59 | > .callout-content 60 | p:not(:has(label input:checked)) 61 | + blockquote { 62 | display: none; 63 | } 64 | [data-callout="tabbed"] > .callout-content > blockquote { 65 | order: 999; 66 | grid-column: 1 / -1; 67 | 68 | background-color: transparent; 69 | padding-left: 0; 70 | border: 0; 71 | } 72 | ``` 73 | 74 | --- 75 | 76 | ## How to use 77 | 78 | ```md 79 | > [!tabbed] 80 | > 81 | > 82 | > 83 | > > Lorem, ipsum dolor sit amet consectetur, adipisicing elit. (First) 84 | > > [[Obsidian CSS|Internal Link]] > > **bold** _italic_ 85 | > 86 | > 87 | > 88 | > > Lorem, ipsum dolor sit amet consectetur, adipisicing elit. (Second) 89 | > > [External Link](https://google.com) > > $\LaTeX$ 90 | > 91 | > 92 | > 93 | > > Lorem, ipsum dolor sit amet consectetur, adipisicing elit. (Third) 94 | > > 95 | > > - bullet item 96 | > > - [ ] checkbox 97 | > > - [x] #tag 98 | ``` 99 | -------------------------------------------------------------------------------- /Snippets/Blockquote styling 01.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Blockquote styling 01 4 | 5 | --- 6 | 7 | - author:: kneecaps 8 | - source:: https://discord.com/channels/686053708261228577/702656734631821413/1042896580539330560 9 | 10 | --- 11 | 12 | > _Only works in reading mode._ 13 | 14 | cover:: ![](https://i.imgur.com/B3fyyED.png) 15 | 16 | ```css 17 | /* 18 | author: kneecaps 19 | source: https://discord.com/channels/686053708261228577/702656734631821413/1042896580539330560 20 | */ 21 | 22 | .theme-light { 23 | --cbs: 0px 2px 4px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.01), 24 | 0px 4px 8px rgba(0, 0, 0, 0.01), 0px 0px 12px rgba(0, 0, 0, 0.01), 25 | 0px 2px 16px rgba(0, 0, 0, 0.01), 0px 4px 20px rgba(0, 0, 0, 0.01); 26 | --background-primary-alt-1: var(--background-primary); 27 | } 28 | 29 | .theme-dark { 30 | --cbs: 0px 2px 4px rgba(0, 0, 0, 0.05), 0px 4px 8px rgba(0, 0, 0, 0.03), 31 | 0px 4px 8px rgba(0, 0, 0, 0.05), 0px 0px 12px rgba(0, 0, 0, 0.03), 32 | 0px 2px 16px rgba(0, 0, 0, 0.03), 0px 4px 20px rgba(0, 0, 0, 0.02); 33 | --background-primary-alt-1: var(--background-primary-alt); 34 | } 35 | 36 | .markdown-preview-view blockquote { 37 | padding: 8px 12px 8px 32px; 38 | border: 2px dashed var(--background-primary-alt-1); /* put 'border: 0px;' if you dont want the dashed border! */ 39 | color: var(--text-muted); /* this is the text color */ 40 | position: relative; 41 | border-radius: 12px; /* this controls the quotes 'roundness' */ 42 | box-shadow: var(--cbs); 43 | background: var( 44 | --background-primary-alt-1 45 | ); /* var(--background-primary-alt) gives better contrast in darkmode, var(--background-primary) is more minimal; */ 46 | } 47 | 48 | .markdown-preview-view blockquote:before { 49 | content: ""; 50 | position: absolute; 51 | left: 15px; 52 | top: 15px; 53 | width: 3px; 54 | height: calc(100% - 30px); 55 | background: var( 56 | --color-accent 57 | ); /* change this color to change the vertical bar in preview mode! */ 58 | border-radius: var(--button-radius); 59 | } 60 | 61 | cite { 62 | color: var(--text-accent); 63 | text-align: end; 64 | display: block; 65 | padding-right: 1em; 66 | } 67 | ``` 68 | 69 | --- 70 | 71 | ## How to use 72 | 73 | ```md 74 | > Lorem ipsum dolor sit amet, consectetur, adipisicing elit. Iure minus voluptates illum aspernatur officia vel officiis, et quis qui. Enim omnis officia sunt consectetur obcaecati repudiandae! Numquam, voluptas at, ab officiis recusandae, dolorum inventore quod iste cumque explicabo dicta quidem accusantium velit odit deleniti, ipsum commodi? 75 | > Name of the author 76 | ``` 77 | -------------------------------------------------------------------------------- /Snippets/Callout styling - Outlined callout.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Callout styling - Outlined callout 4 | 5 | --- 6 | 7 | - author:: Kepano, sailKite (extracted by) 8 | - source:: https://discord.com/channels/686053708261228577/702656734631821413/1087513978793635860 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/d7Cz7m1.png) 13 | 14 | ```css 15 | /* 16 | author: Kepano, sailKite (extracted by) 17 | source: https://discord.com/channels/686053708261228577/702656734631821413/1087513978793635860 18 | */ 19 | 20 | /* --------------------------------------------------------------------------- 21 | 22 | Bordered Callouts from Minimal Theme by @kepano 23 | 24 | User interface replacement for Obsidian. 25 | 26 | Sponsor my work: 27 | https://www.buymeacoffee.com/kepano 28 | 29 | Readme: 30 | https://github.com/kepano/obsidian-minimal 31 | 32 | ----------------------------------------------------------------------------- 33 | 34 | MIT License 35 | 36 | Copyright (c) 2020-2023 Stephan Ango (@kepano) 37 | 38 | Permission is hereby granted, free of charge, to any person obtaining a copy 39 | of this software and associated documentation files (the "Software"), to deal 40 | in the Software without restriction, including without limitation the rights 41 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 42 | copies of the Software, and to permit persons to whom the Software is 43 | furnished to do so, subject to the following conditions: 44 | The above copyright notice and this permission notice shall be included in 45 | all copies or substantial portions of the Software. 46 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 47 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 48 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 49 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 50 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 51 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 52 | SOFTWARE. 53 | */ 54 | .callouts-outlined .callout .callout-title { 55 | background-color: var(--background-primary); 56 | margin-top: -24px; 57 | z-index: 200; 58 | width: fit-content; 59 | padding: 0 0.5em; 60 | margin-left: -0.75em; 61 | letter-spacing: 0.05em; 62 | font-variant-caps: all-small-caps; 63 | } 64 | .callouts-outlined .callout { 65 | overflow: visible; 66 | --callout-border-width: 1px; 67 | --callout-border-opacity: 0.5; 68 | --callout-title-size: 0.8em; 69 | --callout-blend-mode: normal; 70 | background-color: transparent; 71 | } 72 | .callouts-outlined .cm-embed-block.cm-callout { 73 | padding-top: 12px; 74 | } 75 | .callouts-outlined .callout-content .callout { 76 | margin-top: 18px; 77 | } 78 | ``` 79 | 80 | --- 81 | 82 | ## Usage 83 | 84 | ```md 85 | --- 86 | cssclasses: 87 | - callouts-outlined 88 | --- 89 | ``` 90 | -------------------------------------------------------------------------------- /Snippets/Callout styling - Folder structure callout.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Callout styling - Folder structure callout 4 | 5 | --- 6 | 7 | - author:: BunkerD 8 | - source:: https://forum.obsidian.md/t/a-callout-for-a-folder-structure/61366 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/BndqHMj.png) 13 | 14 | ```css 15 | /* 16 | author: BunkerD 17 | source: https://forum.obsidian.md/t/a-callout-for-a-folder-structure/61366 18 | */ 19 | 20 | .callout[data-callout="folder" i] { 21 | --list-indent: 0em; 22 | --indentation-guide-color: transparent; 23 | overflow: scroll; 24 | } 25 | .callout[data-callout="folder" i] .list-bullet { 26 | display: none; 27 | } 28 | .callout[data-callout="folder" i] ul { 29 | -webkit-margin-after: 0; 30 | margin-block-end: 0; 31 | } 32 | .callout[data-callout="folder" i] li { 33 | --list-indent: 1.5em; 34 | list-style-type: none; 35 | font-family: var(--font-monospace); 36 | white-space: nowrap; 37 | } 38 | .callout[data-callout="folder" i] li li { 39 | position: relative; 40 | box-sizing: border-box; 41 | } 42 | .callout[data-callout="folder" i] li li::before, 43 | .callout[data-callout="folder" i] li li::after { 44 | content: ""; 45 | position: absolute; 46 | left: -1em; 47 | background: var(--list-marker-color); 48 | } 49 | .callout[data-callout="folder" i] li li::before { 50 | top: 0.85em; 51 | width: 10px; 52 | height: 1.5px; 53 | margin: auto; 54 | } 55 | .callout[data-callout="folder" i] li li::after { 56 | top: 0; 57 | bottom: 0; 58 | width: 1.5px; 59 | height: 100%; 60 | } 61 | .callout[data-callout="folder" i] li li:last-child::after { 62 | height: 0.85em; 63 | } 64 | .callout[data-callout="folder" i] li .list-collapse-indicator { 65 | position: absolute; 66 | left: -2em; 67 | margin: 0; 68 | } 69 | .callout[data-callout="folder" i] li em { 70 | opacity: 0.5; 71 | font-family: var(--font-text); 72 | } 73 | .callout[data-callout="folder" i] li code { 74 | font-size: 1em; 75 | font-family: var(--font-monospace); 76 | font-style: normal !important; 77 | background: none; 78 | white-space: pre; 79 | margin: 0; 80 | padding: 0; 81 | } 82 | .callout[data-callout="folder" i] li mark { 83 | font-style: italic; 84 | color: #d3a3e5; 85 | } 86 | .callout[data-callout="folder" i] .callout-content { 87 | overflow-x: visible; 88 | } 89 | ``` 90 | 91 | --- 92 | 93 | ## How to use 94 | 95 | ```md 96 | > [!folder] folder 97 | > 98 | > - 📁 Folder _` `← root folder_ 99 | > - 📄 Item 1 _` `← some item in the folder_ 100 | > - 📁 Subfolder 1 _` `← another folder_ 101 | > - 📄 Subitem 1-1 102 | > - 📄 Subitem 1-2 103 | > - 📁 Subfolder 2 104 | > - 📄 Subitem 2-1 105 | > - 📄 Subitem 2-2 106 | > - 📁 Subsubfolder 107 | > - 📄 ==Name==.jpg _` `… Some variable name?_ 108 | > - … 109 | ``` 110 | -------------------------------------------------------------------------------- /Snippets/Empty tab styling.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Empty tab styling 4 | 5 | --- 6 | 7 | - author:: sai1494 8 | - source:: https://discord.com/channels/686053708261228577/702656734631821413/1052346864055369808 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/MsmvCh8.gif) 13 | 14 | ```css 15 | /* 16 | author: sai1494 17 | source: https://discord.com/channels/686053708261228577/702656734631821413/1052346864055369808 18 | */ 19 | 20 | .empty-state-container { 21 | max-height: unset; 22 | opacity: 1 !important; 23 | } 24 | 25 | .theme-dark .empty-state-container::before { 26 | content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' shape-rendering='auto' viewBox='0 0 100 100' width='250' height='300' fill='none' stroke='gray' stroke-width='2' stroke-linecap='round' stroke-linejoin='bevel' class='logo-wireframe'%3E%3Cpath d='M 30.91 17.52 L 34.43 35.7 M 61.44 14.41 L 62.61 0 M 34.43 35.7 L 37.57 90.47 M 81 26.39 L 61.44 14.41 L 34.43 35.7 L 65.35 100 M 62.61 0 L 30.91 17.52 L 18 45.45 L 37.57 90.47 L 65.35 100 L 70.44 89.8 L 81 26.39 L 62.61 0 Z'%3E%3C/path%3E%3C/svg%3E"); 27 | opacity: 30%; 28 | } 29 | 30 | .theme-light .empty-state-container::before { 31 | content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' shape-rendering='auto' viewBox='0 0 100 100' width='250' height='300' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='bevel' class='logo-wireframe'%3E%3Cpath d='M 30.91 17.52 L 34.43 35.7 M 61.44 14.41 L 62.61 0 M 34.43 35.7 L 37.57 90.47 M 81 26.39 L 61.44 14.41 L 34.43 35.7 L 65.35 100 M 62.61 0 L 30.91 17.52 L 18 45.45 L 37.57 90.47 L 65.35 100 L 70.44 89.8 L 81 26.39 L 62.61 0 Z'%3E%3C/path%3E%3C/svg%3E"); 32 | opacity: 5%; 33 | } 34 | 35 | .empty-state-container:hover::before { 36 | content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' shape-rendering='auto' viewBox='0 0 100 100' width='250' height='300' class='logo-full'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='82.85' y1='30.41' x2='51.26' y2='105.9' gradientTransform='matrix(1, 0, 0, -1, -22.41, 110.97)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%236c56cc'%3E%3C/stop%3E%3Cstop offset='1' stop-color='%239785e5'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='62.61,0 30.91,17.52 18,45.45 37.57,90.47 65.35,100 70.44,89.8 81,26.39 62.61,0' fill='%2334208c'%3E%3C/polygon%3E%3Cpolygon points='81,26.39 61.44,14.41 34.43,35.7 65.35,100 70.44,89.8 81,26.39' fill='url(%23a)'%3E%3C/polygon%3E%3Cpolygon points='81,26.39 81,26.39 62.61,0 61.44,14.41 81,26.39' fill='%23af9ff4'%3E%3C/polygon%3E%3Cpolygon points='61.44,14.41 62.61,0 30.91,17.52 34.43,35.7 61.44,14.41' fill='%234a37a0'%3E%3C/polygon%3E%3Cpolygon points='34.43,35.7 37.57,90.47 65.35,100 34.43,35.7' fill='%234a37a0'%3E%3C/polygon%3E%3C/svg%3E"); 37 | opacity: 100%; 38 | transition: opacity 1000ms cubic-bezier(0.25, 0.8, 0.25, 1); 39 | } 40 | 41 | .empty-state-title { 42 | display: none; 43 | } 44 | ``` 45 | -------------------------------------------------------------------------------- /Snippets/Colourful headings underline and divider.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Colourful headings underline and divider 4 | 5 | --- 6 | 7 | - author:: relkion 8 | - source:: https://discord.com/channels/686053708261228577/744933215063638183/1006815302866186260 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/P1V3vIJ.png) 13 | 14 | ```css 15 | /* 16 | author: relkion 17 | source: https://discord.com/channels/686053708261228577/744933215063638183/1006815302866186260 18 | */ 19 | 20 | /*--colorful heading underline for headings and hr--*/ 21 | 22 | h1::after, 23 | .HyperMD-header-1::after, 24 | h2::after, 25 | .HyperMD-header-2::after, 26 | h3::after, 27 | .HyperMD-header-3::after, 28 | h4::after, 29 | .HyperMD-header-4::after, 30 | h5::after, 31 | .HyperMD-header-5::after, 32 | h6::after, 33 | .HyperMD-header-6::after, 34 | .markdown-preview-view hr, 35 | .hr.cm-line, 36 | .HyperMD-hr-bg { 37 | background: linear-gradient( 38 | 90deg, 39 | rgba(194, 24, 91, 0.8) 10%, 40 | rgba(137, 46, 127, 0.8) 0 20%, 41 | rgba(79, 67, 163, 0.8) 0 30%, 42 | rgba(34, 103, 163, 0.8) 0 40%, 43 | rgba(0, 151, 167, 0.8) 0 50%, 44 | rgba(82, 173, 90, 0.8) 0 60%, 45 | rgba(166, 172, 64, 0.8) 0 70%, 46 | rgba(249, 171, 37, 0.8) 0 80%, 47 | rgba(230, 109, 42, 0.8) 0 90%, 48 | rgba(211, 47, 47, 0.8) 0 49 | ); 50 | } 51 | 52 | /*--center h1--*/ 53 | h1, 54 | .HyperMD-header-1 { 55 | text-align: center; 56 | } 57 | 58 | h1::after, 59 | .HyperMD-header-1::after, 60 | h2::after, 61 | .HyperMD-header-2::after, 62 | h3::after, 63 | .HyperMD-header-3::after, 64 | h4::after, 65 | .HyperMD-header-4::after, 66 | h5::after, 67 | .HyperMD-header-5::after, 68 | h6::after, 69 | .HyperMD-header-6::after { 70 | margin-top: 0.2em; 71 | content: ""; 72 | width: auto !important; 73 | display: flex !important; 74 | height: 0.3em; 75 | border-radius: 10px; 76 | } 77 | 78 | /*--Taken from ITS: Horizontal Linebreak, HR--*/ 79 | .markdown-source-view.mod-cm6 .cm-content :is(.hr, .HyperMD-hr) { 80 | contain: style !important; 81 | } 82 | 83 | .markdown-preview-view hr, 84 | .hr.cm-line, 85 | .HyperMD-hr-bg { 86 | margin-block-start: 2em; 87 | margin-block-end: 2em; 88 | border: none; 89 | border-radius: 3px; 90 | height: 3px; 91 | } 92 | 93 | .hr.cm-line hr { 94 | border: 0; 95 | } 96 | 97 | /*Stylized HR/Horizontal Line*/ 98 | .hr.cm-line::after, 99 | .markdown-preview-view hr::after, 100 | div:not(.CodeMirror-activeline) > .HyperMD-hr-bg::after { 101 | content: "★"; 102 | display: inline-block; 103 | position: absolute; 104 | left: 50%; 105 | font-size: 13px; 106 | color: var(--text-sub-accent); 107 | padding: 0 0.5em; 108 | /*--margin-top might need tweaking if symbol is misaligned--*/ 109 | margin-top: -0.6em; 110 | /*--set to transparent or delete for clear symbol bg--*/ 111 | background-color: var(--background-primary); 112 | } 113 | ``` 114 | 115 | --- 116 | 117 | ## how to use 118 | 119 | ```md 120 | # Heading 121 | 122 | --- 123 | ``` 124 | -------------------------------------------------------------------------------- /Snippets/Tag styling - Hide hash symbol.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Tag styling - Hide hash symbol 4 | 5 | --- 6 | 7 | - author:: Bluemoondragon07, FireIsGood 8 | - source:: https://forum.obsidian.md/t/hiding-hashtags-but-again/61706?u 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/wqMrZpi.png) 13 | 14 | ```css 15 | /* 16 | author: Bluemoondragon07, FireIsGood 17 | source: https://forum.obsidian.md/t/hiding-hashtags-but-again/61706?u 18 | */ 19 | 20 | @font-face { 21 | font-family: "Formular"; 22 | src: url("data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAXMAA4AAAAACOAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABHREVGAAAFZAAAABYAAAAWABMABkdQT1MAAAV8AAAAIAAAACBEdkx1R1NVQgAABZwAAAAvAAAAMCN+JIxPUy8yAAACDAAAAEcAAABgII84HWNtYXAAAAJUAAAAMQAAADwAOwB9Z2FzcAAABVwAAAAIAAAACP//AANnbHlmAAABRAAAACgAAAAoKX11F2hlYWQAAAGcAAAANgAAADYW4dEnaGhlYQAAAewAAAAgAAAAJA/2Cc9obXR4AAAB1AAAABgAAAAYDeYAd2xvY2EAAAGMAAAADQAAAA4APAA8bWF4cAAAAWwAAAAeAAAAIABLAEVuYW1lAAACiAAAAq4AAAXocAf8uHBvc3QAAAU4AAAAJAAAADNVXVC5AAIAdwAAA8MFtgADAAcAADMRIRElIREhdwNM/T8CNf3LBbb6SoEEtHjaY2BkYGBgY3BiYGYAASYgZmQAiTmA+QwACZIAkQAAeNpjYGAQQUAAAt4AeQAAAAABAAAAAgCDDlp/b18PPPUACwgAAAAAAM8sf4QAAAAA4KMGkP+m/lgITAc7AAAACAACAAAAAAAABDkAdwAAAAACqgAAAAAAAAI5AAAEygAAeNpjYGRgYLP8Z8l4krv//zIGBg4fBqAICmADAH24BNx42mNgZrnJOIGBlYGB1ZjlLAMDwywIzXSWIY0pC0gzIAFGBnTgwKDAoMxm+c+S8ST7XcY3CgwM08EKfzCdAlIKDEwAU4UM+QB42mNgYGBiYGBgBmIRIMkIplkYNIA0G5BmBMoqMCj//w/kg+n/T/4/AqsCAgCI4wiyAAAAeNqtUrtu1EAUvfZu3g/RISGERqJJpMReVkFityKJlBSRUEgRiXJsjx+s12ONZ9dxw5/QUFJS8QF8AZ9CS8Px7CRrIJEosOWZc1/nnrkeInrmFOTQ4nmHb4EdWoe1wC6tEbe4Ry8ptbjfyVmhHfpo8WrHv0Zv6bPF67RHPy3e6ODNTt8teuw8t3i7g3dozxlbvEtPnQBKnP4GrC/OB4sdeuQOLHZp131tcY/eu28s7ndyVuiJ+9Xi1Y5/jT653y1ep8uetnijgzc7fbfI632zeLuDd5D/w+JdetU/OZVlo7Ik1Wwv3GfDwYujQywjFjTsnDe8EOyEJxGvuIJxwK4bHqaiyvmcXWQqy0UxkR47znNmSCqmRCXUXETemVTTWc7VlUjabUHW5VpS3TGN2W3VuJUyuhaqymTBht5gMLzMBa8EGsRCMS2ZTgVbqq9EqNvUWCoTiWWhmVY8ElOuJoxrrbJgZlIKqbNQVN6/ni/Vuhz7fl3XXqBkXcTyxpMqOS4aNoOgOtOpnGlWCjXNKqM3q1ipZJoFmRaRLe+W+jkEFKHw6ZQkldSQoowS3GJNDLcwpH3sQxrQCzqiQ4tG8AXIZXSOu9/gK0jAOgFKKMJa4VM2coDItcEheAViOfAc3gv0avvl8BY0gQIP3mPYOfalkspYbaXAPscaIfMM+YqmNDN8iq7gT+6srrKHdN2n6m9NY3T/s9f4biojsLSqKtRIVLR+D5EB9kvDwo3uxQlik8twJmnW1ETum31bEwLdssZGwbImNn5tPAo9IninRtsEPg6vNnwBNC9ZCuytFZoTe//9/6Wmb4n5+Hhr83rQoBCrkdOqvoGnPUuCP12YWzSzE6rB1Z5PGs0MPMJMPUN8Od/M3IfScKbmhG1Veyd+7/5QVx96FxMozOr/AnWqLjEAAHjaY2BiAIP/DAxpDNgAGxAzMjAxMjEwM7Cx+IX6+AAAP3gCvAAAAAH//wACAAEAAAAMAAAAAAAAAAIAAQADAAUAAQAAAAEAAAAKABwAHgABREZMVAAIAAQAAAAA//8AAAAAAAB42mNgZGBg4GLQYdBjYHZx8wlhEEmuLMphkMtJLMljkGNgAcoy/P/PAAcArlkHTgA=") 23 | format("woff"); 24 | } 25 | 26 | /* Hide hashtag (reading mode) */ 27 | a.tag { 28 | font-family: "Formular", var(--font-text); 29 | padding: 9px 0.55em 5px 0; 30 | } 31 | a.tag:hover { 32 | padding: 5px 7px 5px 7px !important; 33 | font-family: var(--font-text); 34 | } 35 | 36 | /* Hide hashtag (live preview mode) */ 37 | .cm-line:not(.cm-active) .cm-hashtag-begin { 38 | display: none; 39 | } 40 | .cm-line:not(.cm-active) .cm-hashtag-end { 41 | border-radius: var(--tag-radius) !important; 42 | padding-left: var(--tag-padding-x); 43 | border-left: var(--tag-border-width) solid var(--tag-border-color); 44 | } 45 | 46 | /* prevent overlapping tags on separate lines */ 47 | p:has(.tag ~ br ~ .tag) { 48 | line-height: 2; 49 | } 50 | .cm-line:has(.cm-meta):has(+ .cm-line .cm-meta) { 51 | padding-bottom: 6px; 52 | } 53 | ``` 54 | -------------------------------------------------------------------------------- /Snippets/Image gallery.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Image gallery 4 | 5 | --- 6 | 7 | - author:: WindWalker 8 | - source:: https://discord.com/channels/686053708261228577/744933215063638183/1098803015164633139 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/heTNDVW.gif) 13 | 14 | ```css 15 | /* 16 | author: WindWalker 17 | source: https://discord.com/channels/686053708261228577/744933215063638183/1098803015164633139 18 | */ 19 | 20 | /* Adjustable Hight, Manual Width Aadjustment*/ 21 | 22 | body .imagegallery { 23 | --file-line-width: 1100px; 24 | } 25 | 26 | 27 | .imagegallery .cm-editor img { 28 | max-width: 300px; 29 | } 30 | 31 | .imagegallery p { 32 | display: flex; 33 | flex-wrap: wrap; 34 | justify-content: flex-start; 35 | align-content: flex-start; 36 | } 37 | 38 | .imagegallery p span { 39 | margin: 5px; 40 | border: 0px solid #ccc; 41 | height: 250px; 42 | } 43 | 44 | .imagegallery p img { 45 | height: 250px; 46 | object-fit: cover; 47 | transition: .0s; 48 | } 49 | 50 | .imagegallery p img:hover { 51 | object-fit: cover; 52 | /*box-shadow: 5px 5px 15px rgb(0, 0, 0, 0.5);*/ 53 | } 54 | 55 | 56 | .imagegallery p span:hover img:not(:active) { 57 | transition: transform .1s ; 58 | transition-property: ; 59 | transform: scale(1.13); 60 | z-index: 1000; 61 | transition-property: initial; 62 | box-shadow: 5px 5px 10px rgb(0, 0, 0, 0.4); 63 | 64 | } 65 | 66 | 67 | .popover .imagegallery img { 68 | width: 100px; 69 | height: 100px; 70 | } 71 | 72 | .popover .imagegallery p span { 73 | width: 100px; 74 | height: 100px; 75 | } 76 | 77 | .popover .imagegallery p span:hover img:not(:active) { 78 | transform: scale(1.05); 79 | } 80 | 81 | .imagegallery p img:active{ 82 | transition: none; 83 | display:block; 84 | z-index:100; 85 | position:fixed; 86 | max-height:100%; 87 | max-width:100%; 88 | height:100%; 89 | width:100%; 90 | object-fit: contain; 91 | margin:0 auto; 92 | text-align:center; 93 | top: 50%; 94 | transform: translateY(-50%); 95 | padding:0; 96 | left:0; 97 | right:0; 98 | bottom:0; 99 | background:var(--background-primary);} 100 | } 101 | 102 | 103 | /* 104 | body .imagegallery { 105 | --file-line-width: 1120px; 106 | } 107 | 108 | .imagegallery p { 109 | display: flex; 110 | flex-wrap: wrap; 111 | justify-content: flex-start; 112 | align-content: flex-start; 113 | } 114 | 115 | .imagegallery p span { 116 | margin: 6px; 117 | margin-bottom: -2px; 118 | border: 0px solid #ccc; 119 | height: auto; 120 | } 121 | 122 | .imagegallery p img { 123 | max-height: 175px; 124 | padding: 0px; 125 | object-fit: cover; 126 | } 127 | 128 | 129 | .imagegallery p span:hover { 130 | 131 | } 132 | */ 133 | ``` 134 | 135 | --- 136 | 137 | ## How to use 138 | 139 | ```md 140 | --- 141 | cssclasses: 142 | - imagegallery 143 | --- 144 | 145 | ![[image 01.jpg]] 146 | ![[image 01.jpg]] 147 | ![[image 01.jpg]] 148 | ![[image 01.jpg]] 149 | ``` 150 | -------------------------------------------------------------------------------- /Snippets/File explorer styling - Folder headers.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # File explorer styling - Folder headers 4 | 5 | --- 6 | 7 | - author:: Corellan 8 | - source:: https://discord.com/channels/686053708261228577/702656734631821413/1120163092752510976 9 | 10 | --- 11 | 12 | > _You will need to change the order of headers depending on your folder structure._ 13 | 14 | cover:: ![](https://i.imgur.com/WA4nplM.png) 15 | 16 | ```css 17 | /* modified version of Corellan's snippet for v1.6.5 */ 18 | 19 | .nav-files-container > div > .nav-folder::after { 20 | position: relative; 21 | left: var(--layout-margin); 22 | font-size: 11px; 23 | font-weight: 500; 24 | text-transform: uppercase; 25 | letter-spacing: 0.05em; 26 | color: var(--text-muted); 27 | font-size: var(--font-adaptive-smallest); 28 | } 29 | 30 | 31 | .nav-files-container > div > .nav-folder:nth-child(3)::after { 32 | content: "Private"; 33 | } 34 | 35 | .nav-files-container > div > .nav-folder:nth-child(7)::after { 36 | content: "Assets"; 37 | } 38 | 39 | .nav-files-container > div > .nav-folder:nth-child(9)::after { 40 | content: "Sorting"; 41 | } 42 | ``` 43 | 44 | 45 | 46 |
47 | For older versions of Obsidian 48 | 49 | ```css 50 | /* 51 | author: Corellan 52 | source: https://discord.com/channels/686053708261228577/702656734631821413/1120163092752510976 53 | */ 54 | 55 | /* ╔════════════════════════════════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗ */ 56 | /* ║ Obsidian Add-On ║ */ 57 | /* ╠══════════════════════════╦═════════════════════════════════════════════════════════════════════════════════════════╣ */ 58 | /* ║ Name: ║ CreArts Vault Header ║ */ 59 | /* ║ Version: ║ 1.0.0 ║ */ 60 | /* ║ Author: ║ Corellan ║ */ 61 | /* ║ License: ║ MIT ║ */ 62 | /* ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝ */ 63 | 64 | /* ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗ */ 65 | /* ║ Custom CSS ║ General ║ */ 66 | /* ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝ */ 67 | 68 | .tree-item .nav-folder::after { 69 | position: relative; 70 | left: var(--layout-margin); 71 | font-size: 11px; 72 | font-weight: 500; 73 | text-transform: uppercase; 74 | letter-spacing: 0.05em; 75 | color: var(--text-muted); 76 | font-size: var(--font-adaptive-smallest); 77 | } 78 | 79 | .tree-item .nav-folder .is-collapsed::after { 80 | display: none !important; 81 | } 82 | 83 | .tree-item .nav-folder:nth-child(3)::after { 84 | content: "Private"; 85 | } 86 | 87 | .tree-item .nav-folder:nth-child(7)::after { 88 | content: "Assets"; 89 | } 90 | 91 | .tree-item .nav-folder:nth-child(9)::after { 92 | content: "Sorting"; 93 | } 94 | ``` 95 | 96 |
97 | -------------------------------------------------------------------------------- /Snippets/Checkboxes - Progress bar checkboxes.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Checkboxes - Progress bar checkboxes 4 | 5 | --- 6 | 7 | - author:: quinntyx, sailKite 8 | - source:: https://discord.com/channels/686053708261228577/744933215063638183/1145481360757244065 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/yJDlOAx.png) 13 | 14 | ```css 15 | /* 16 | author: quinntyx, sailKite 17 | source: https://discord.com/channels/686053708261228577/744933215063638183/1145481360757244065 18 | */ 19 | 20 | body { 21 | --checkbox-progress-width: 55px; 22 | --checkbox-progress-radius: 10px; 23 | --checkbox-progress-border-width: 1px; 24 | --checkbox-progress-height: 12px; 25 | --checkbox-progress-background: initial; 26 | --checkbox-progress-unit-frac: 0.2; 27 | --checkbox-progress-animation-time: 600ms; 28 | } 29 | 30 | @keyframes checkbox-progress-transition { 31 | from { 32 | width: calc( 33 | var(--checkbox-progress-width) * 34 | (var(--progress-frac) - var(--checkbox-progress-unit-frac)) 35 | ); 36 | } 37 | to { 38 | width: calc(var(--checkbox-progress-width) * var(--progress-frac)); 39 | } 40 | } 41 | 42 | input:is(.task-list-item-checkbox):is( 43 | [data-task="0"], 44 | [data-task="1"], 45 | [data-task="2"], 46 | [data-task="3"], 47 | [data-task="4"], 48 | [data-task="5"], 49 | :is( 50 | [data-task="0"], 51 | [data-task="1"], 52 | [data-task="2"], 53 | [data-task="3"], 54 | [data-task="4"], 55 | [data-task="5"] 56 | ) 57 | > * 58 | ) { 59 | width: var(--checkbox-progress-width); 60 | border-radius: var(--checkbox-progress-radius); 61 | background: var(--checkbox-progress-background); 62 | border: var(--checkbox-progress-border-width) solid var(--interactive-accent); 63 | height: var(--checkbox-progress-height); 64 | transition: border var(--checkbox-progress-animation-time); 65 | 66 | &:hover { 67 | background: var(--checkbox-progress-background); 68 | } 69 | 70 | &::after { 71 | width: calc(var(--checkbox-progress-width) * var(--progress-frac)); 72 | animation-name: checkbox-progress-transition; 73 | animation-duration: var(--checkbox-progress-animation-time); 74 | background: var(--interactive-accent) !important; 75 | margin-top: 1px; 76 | height: 100%; 77 | border-radius: var(--checkbox-progress-radius); 78 | -webkit-mask-image: none; 79 | mask-image: none; /* vsc is not happy since -webkit-mask-image is not cross-platform even though this does nothing */ 80 | } 81 | } 82 | input.task-list-item-checkbox:is([data-task="0"], [data-task="0"] > *) { 83 | border: var(--checkbox-progress-border-width) solid var( 84 | --checkbox-border-color 85 | ) !important; 86 | } 87 | input.task-list-item-checkbox:is([data-task="0"], [data-task="0"] > *) { 88 | --progress-frac: 0; 89 | } 90 | input.task-list-item-checkbox:is([data-task="1"], [data-task="1"] > *) { 91 | --progress-frac: 0.2; 92 | } 93 | input.task-list-item-checkbox:is([data-task="2"], [data-task="2"] > *) { 94 | --progress-frac: 0.4; 95 | } 96 | input.task-list-item-checkbox:is([data-task="3"], [data-task="3"] > *) { 97 | --progress-frac: 0.6; 98 | } 99 | input.task-list-item-checkbox:is([data-task="4"], [data-task="4"] > *) { 100 | --progress-frac: 0.8; 101 | } 102 | input.task-list-item-checkbox:is([data-task="5"], [data-task="5"] > *) { 103 | --progress-frac: 1; 104 | } 105 | ``` 106 | 107 | --- 108 | 109 | ## How to use 110 | 111 | ```md 112 | - [0] zero `0` 113 | - [1] one `1` 114 | - [2] two `2` 115 | - [3] three `3` 116 | - [4] four `4` 117 | - [5] five `5` 118 | ``` 119 | -------------------------------------------------------------------------------- /Snippets/Callout styling - Sleek callout (AnuPpuccin theme).md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Callout styling - Sleek callout (AnuPpuccin theme) 4 | 5 | --- 6 | 7 | - author:: Adonis, Anubis 8 | - source:: https://discord.com/channels/686053708261228577/702656734631821413/1040275500297375856 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/oDUzADg.png) 13 | 14 | ```css 15 | /* 16 | author: Adonis, Anubis 17 | source: https://discord.com/channels/686053708261228577/702656734631821413/1040275500297375856 18 | support Anubis: https://www.buymeacoffee.com/anubisnekhet 19 | */ 20 | 21 | .callout:not(.is-collapsible) { 22 | padding: 0px; 23 | } 24 | .callout:not(.is-collapsible) .callout-content { 25 | padding: 0 var(--callout-title-padding) var(--callout-title-padding) var(--callout-title-padding); 26 | } 27 | .callout:not(.is-collapsible) .callout-title { 28 | background-color: rgba(var(--callout-color), 0 0.5); 29 | padding: var(--callout-title-padding); 30 | cursor: pointer; 31 | } 32 | .callout:not(.is-collapsible) .callout-title .callout-title-inner { 33 | font-weight: normal; 34 | } 35 | 36 | .callout:not(.is-collapsible) { 37 | border-color: rgba(var(--callout-color), 0.4); 38 | border-width: 1px; 39 | border-radius: var(--callout-radius); 40 | background-color: rgba(var(--ctp-mantle), 0.4); 41 | } 42 | 43 | .callout-content { 44 | padding: var(--callout-title-padding) var(--callout-title-padding) var( 45 | --callout-title-padding 46 | ) calc(var(--callout-title-padding) * 1.5); 47 | border-top: 1px dashed rgba(var(--callout-color), 0.4); 48 | } 49 | 50 | .callout-fold { 51 | padding-right: 0px; 52 | } 53 | 54 | .callout-title-inner { 55 | flex-grow: var(--anp-callout-fold-position, unset); 56 | } 57 | 58 | .callout { 59 | --callout-title-padding: var(--size-4-2); 60 | } 61 | .callout.is-collapsible { 62 | border-color: rgba(var(--callout-color), 0.4); 63 | border-width: 1px; 64 | border-radius: var(--callout-radius); 65 | background-color: rgba(var(--ctp-mantle), 0.4); 66 | --bold-weight: bolder; 67 | } 68 | .callout.is-collapsible .callout-fold { 69 | padding-right: 0px; 70 | } 71 | .callout.is-collapsible .callout-title-inner { 72 | flex-grow: var(--anp-callout-fold-position, unset); 73 | } 74 | .callout.is-collapsible.is-collapsed { 75 | padding: 0; 76 | } 77 | .callout.is-collapsible.is-collapsed .callout-title { 78 | background-color: rgba(var(--callout-color), 0.1); 79 | padding: var(--callout-title-padding); 80 | cursor: pointer; 81 | } 82 | .callout.is-collapsible.is-collapsed .callout-content { 83 | display: none; 84 | } 85 | .callout.is-collapsible:not(.is-collapsed) { 86 | padding: 0px 0px var(--callout-title-padding) 0px; 87 | } 88 | .callout.is-collapsible:not(.is-collapsed) .callout-title { 89 | background-color: rgba(var(--callout-color), 0.1); 90 | padding: var(--callout-title-padding); 91 | border-color: rgba(var(--callout-color), 0.4); 92 | cursor: pointer; 93 | } 94 | .callout.is-collapsible:not(.is-collapsed) .callout-content { 95 | padding: var(--callout-title-padding) var(--callout-title-padding) 0 calc(var( 96 | --callout-title-padding 97 | ) * 1.5); 98 | border-top: 1px dashed rgba(var(--callout-color), 0.4); 99 | } 100 | .callout:not(.is-collapsible) { 101 | padding: 0px; 102 | } 103 | .callout:not(.is-collapsible) .callout-title { 104 | background-color: rgba(var(--callout-color), 0.1); 105 | padding: var(--callout-title-padding); 106 | border-color: rgba(var(--callout-color), 0.4); 107 | } 108 | .callout .list-collapse-indicator { 109 | margin-left: -35px; 110 | padding-right: 3px; 111 | } 112 | 113 | /*# sourceMappingURL=anuppuccin-sleek-callout.css.map */ 114 | ``` 115 | -------------------------------------------------------------------------------- /Snippets/Loading screen tweak.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Loading screen tweak 4 | 5 | --- 6 | 7 | - author:: FireIsGood 8 | - source:: https://codepen.io/fireisgood/pen/eYQmyPJ 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/na2WAxm.gif) 13 | 14 | ```css 15 | /* 16 | author: FireIsGood 17 | source: https://codepen.io/fireisgood/pen/eYQmyPJ 18 | */ 19 | 20 | *, 21 | *::after, 22 | *::before { 23 | box-sizing: border-box; 24 | } 25 | @import url("https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap"); 26 | 27 | .progress-bar { 28 | position: absolute; 29 | height: 100vh; 30 | width: 100vw; 31 | top: 0; 32 | left: 0; 33 | background-color: var(--background-primary); 34 | z-index: 10000; 35 | display: flex; 36 | flex-direction: column; 37 | justify-content: center; 38 | align-items: center; 39 | } 40 | .progress-bar-message { 41 | margin-bottom: var(--size-4-8); 42 | opacity: 1; 43 | color: var(--text-muted); 44 | } 45 | .progress-bar-indicator { 46 | position: relative; 47 | height: 8px; 48 | margin: 0 10vw; 49 | width: 90vw; 50 | overflow-x: hidden; 51 | border-radius: 3px; 52 | } 53 | .progress-bar-line { 54 | position: absolute; 55 | opacity: 0.4; 56 | background-color: var(--interactive-accent); 57 | width: 150%; 58 | height: 8px; 59 | } 60 | .progress-bar-subline { 61 | position: absolute; 62 | background-color: var(--interactive-accent); 63 | height: 8px; 64 | } 65 | .progress-bar-subline.mod-increase { 66 | animation: increase 2s infinite; 67 | } 68 | .progress-bar-subline.mod-decrease { 69 | animation: decrease 2s 0.5s infinite; 70 | } 71 | .progress-bar .progress-bar-subline { 72 | transition: width 150ms ease-in-out; 73 | } 74 | @keyframes increase { 75 | from { 76 | left: -5%; 77 | width: 5%; 78 | } 79 | to { 80 | left: 130%; 81 | width: 100%; 82 | } 83 | } 84 | @keyframes decrease { 85 | from { 86 | left: -80%; 87 | width: 80%; 88 | } 89 | to { 90 | left: 110%; 91 | width: 10%; 92 | } 93 | } 94 | 95 | /**** My code ****/ 96 | 97 | /* Text trees */ 98 | 99 | .progress-bar-message::before { 100 | content: "🌺 "; 101 | } 102 | .progress-bar-message::after { 103 | content: " 🌺"; 104 | } 105 | 106 | /* Progress bars */ 107 | 108 | body { 109 | --bar-height: 64px; 110 | } 111 | 112 | .progress-bar-indicator { 113 | height: var(--bar-height); 114 | overflow-y: hidden; 115 | } 116 | .progress-bar-indicator { 117 | border-radius: var(--bar-height); 118 | } 119 | .progress-bar-line, 120 | .progress-bar-subline { 121 | overflow: hidden; 122 | border-radius: var(--bar-height); 123 | height: 100%; 124 | display: grid; 125 | place-items: center; 126 | } 127 | 128 | :root .progress-bar-subline { 129 | animation-duration: 8s; 130 | animation-timing-function: ease-out; 131 | } 132 | :root .mod-decrease { 133 | animation-name: increase-special; 134 | } 135 | :root .mod-decrease { 136 | animation-name: decrease-special; 137 | animation-delay: 2s; 138 | } 139 | 140 | .progress-bar-subline::before { 141 | content: ""; 142 | height: 100%; 143 | aspect-ratio: 1/1; 144 | background-image: url("https://d1w8c6s6gmwlek.cloudfront.net/retrogametees.com/overlays/179/236/17923636.png"); 145 | background-size: cover; 146 | background-position: top -25% center; 147 | } 148 | /* .mod-decrease::before { 149 | right: 0; 150 | text-align: left; 151 | } */ 152 | 153 | @keyframes increase-special { 154 | from { 155 | left: 0%; 156 | width: 0%; 157 | } 158 | to { 159 | left: 120%; 160 | width: 100%; 161 | } 162 | } 163 | 164 | @keyframes decrease-special { 165 | from { 166 | left: -100%; 167 | width: 100%; 168 | } 169 | to { 170 | left: 120%; 171 | width: 0%; 172 | } 173 | } 174 | ``` 175 | -------------------------------------------------------------------------------- /.obsidian/plugins/dataview/styles.css: -------------------------------------------------------------------------------- 1 | /** Live Preview padding fixes, specifically for DataviewJS custom HTML elements. */ 2 | .is-live-preview .block-language-dataviewjs > p, .is-live-preview .block-language-dataviewjs > span { 3 | line-height: 1.0; 4 | } 5 | 6 | .block-language-dataview { 7 | overflow-y: auto; 8 | } 9 | 10 | /*****************/ 11 | /** Table Views **/ 12 | /*****************/ 13 | 14 | /* List View Default Styling; rendered internally as a table. */ 15 | .table-view-table { 16 | width: 100%; 17 | } 18 | 19 | .table-view-table > thead > tr, .table-view-table > tbody > tr { 20 | margin-top: 1em; 21 | margin-bottom: 1em; 22 | text-align: left; 23 | } 24 | 25 | .table-view-table > tbody > tr:hover { 26 | background-color: var(--table-row-background-hover); 27 | } 28 | 29 | .table-view-table > thead > tr > th { 30 | font-weight: 700; 31 | font-size: larger; 32 | border-top: none; 33 | border-left: none; 34 | border-right: none; 35 | border-bottom: solid; 36 | 37 | max-width: 100%; 38 | } 39 | 40 | .table-view-table > tbody > tr > td { 41 | text-align: left; 42 | border: none; 43 | font-weight: 400; 44 | max-width: 100%; 45 | } 46 | 47 | .table-view-table ul, .table-view-table ol { 48 | margin-block-start: 0.2em !important; 49 | margin-block-end: 0.2em !important; 50 | } 51 | 52 | /** Rendered value styling for any view. */ 53 | .dataview-result-list-root-ul { 54 | padding: 0em !important; 55 | margin: 0em !important; 56 | } 57 | 58 | .dataview-result-list-ul { 59 | margin-block-start: 0.2em !important; 60 | margin-block-end: 0.2em !important; 61 | } 62 | 63 | /** Generic grouping styling. */ 64 | .dataview.result-group { 65 | padding-left: 8px; 66 | } 67 | 68 | /*******************/ 69 | /** Inline Fields **/ 70 | /*******************/ 71 | 72 | .dataview.inline-field-key { 73 | padding-left: 8px; 74 | padding-right: 8px; 75 | font-family: var(--font-monospace); 76 | background-color: var(--background-primary-alt); 77 | color: var(--text-nav-selected); 78 | } 79 | 80 | .dataview.inline-field-value { 81 | padding-left: 8px; 82 | padding-right: 8px; 83 | font-family: var(--font-monospace); 84 | background-color: var(--background-secondary-alt); 85 | color: var(--text-nav-selected); 86 | } 87 | 88 | .dataview.inline-field-standalone-value { 89 | padding-left: 8px; 90 | padding-right: 8px; 91 | font-family: var(--font-monospace); 92 | background-color: var(--background-secondary-alt); 93 | color: var(--text-nav-selected); 94 | } 95 | 96 | /***************/ 97 | /** Task View **/ 98 | /***************/ 99 | 100 | .dataview.task-list-item, .dataview.task-list-basic-item { 101 | margin-top: 3px; 102 | margin-bottom: 3px; 103 | transition: 0.4s; 104 | } 105 | 106 | .dataview.task-list-item:hover, .dataview.task-list-basic-item:hover { 107 | background-color: var(--text-selection); 108 | box-shadow: -40px 0 0 var(--text-selection); 109 | cursor: pointer; 110 | } 111 | 112 | /*****************/ 113 | /** Error Views **/ 114 | /*****************/ 115 | 116 | div.dataview-error-box { 117 | width: 100%; 118 | min-height: 150px; 119 | display: flex; 120 | align-items: center; 121 | justify-content: center; 122 | border: 4px dashed var(--background-secondary); 123 | } 124 | 125 | .dataview-error-message { 126 | color: var(--text-muted); 127 | text-align: center; 128 | } 129 | 130 | /*************************/ 131 | /** Additional Metadata **/ 132 | /*************************/ 133 | 134 | .dataview.small-text { 135 | font-size: smaller; 136 | color: var(--text-muted); 137 | margin-left: 3px; 138 | } 139 | 140 | .dataview.small-text::before { 141 | content: "("; 142 | } 143 | 144 | .dataview.small-text::after { 145 | content: ")"; 146 | } 147 | -------------------------------------------------------------------------------- /Snippets/Card layout.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Card layout 4 | 5 | --- 6 | 7 | - author:: sai1494 8 | - source:: https://discord.com/channels/686053708261228577/744933215063638183/1034885176968347668 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/ZRV5Y1v.png) 13 | 14 | ```css 15 | /* 16 | author: sai1494 17 | source: https://discord.com/channels/686053708261228577/744933215063638183/1034885176968347668 18 | */ 19 | 20 | html * { 21 | --titlebar-background: transparent !important; 22 | --titlebar-background-focused: transparent !important; 23 | --ribbon-background: transparent !important; 24 | --ribbon-background-collapsed: transparent !important; 25 | --collapsed-right-margin: 24px; 26 | } 27 | 28 | .workspace { 29 | background-color: var(--background-secondary); 30 | } 31 | 32 | .workspace-ribbon, 33 | .workspace-leaf-resize-handle { 34 | border: none !important; 35 | } 36 | 37 | .workspace-leaf { 38 | border-radius: 8px; 39 | border: 0; 40 | } 41 | 42 | /* Adding border to the main workspace leaf */ 43 | .mod-root .workspace-leaf { 44 | border: 1px solid var(--divider-color); 45 | 46 | /* contain is to fix the border-right getting cut off when right collapsed */ 47 | contain: size !important; 48 | } 49 | 50 | /* contain is to fix the border-right getting cut off when right collapsed */ 51 | .workspace-split.mod-root .view-content { 52 | background-color: inherit !important; 53 | } 54 | 55 | .mod-root .view-content { 56 | border-top: 1px solid var(--divider-color); 57 | } 58 | 59 | /* This is the gap between split workspaces */ 60 | .workspace-split { 61 | background-color: transparent !important; 62 | gap: 0px 8px; 63 | } 64 | 65 | /* .workspace-split.mod-root { 66 | gap: 8px; 67 | } */ 68 | 69 | body .mod-right-split { 70 | --background-secondary: initial !important; 71 | } 72 | 73 | .workspace-tab-header-container { 74 | background-color: var(--background-secondary); 75 | border-bottom: initial; 76 | } 77 | 78 | .workspace-tab-header.is-active { 79 | box-shadow: initial; 80 | } 81 | 82 | .workspace-ribbon.mod-left:before { 83 | border-bottom: initial; 84 | } 85 | 86 | .workspace-ribbon.mod-left.is-collapsed { 87 | --titlebar-background-focused: transparent !important; 88 | } 89 | 90 | .status-bar { 91 | --status-bar-position: static; 92 | /* --status-bar-radius: 0; */ 93 | /* --status-bar-border-width: 0 !important; */ 94 | /* --status-bar-background: var(--background-secondary); */ 95 | /* --status-bar-border-color: var(--ui1); */ 96 | border: none; 97 | border-radius: 0%; 98 | } 99 | 100 | /* Fixing indent guides alignment in reader mode */ 101 | .markdown-rendered.show-indentation-guide li > ul::before, 102 | .markdown-rendered.show-indentation-guide li > ol::before { 103 | left: -12px; 104 | } 105 | 106 | /* Used to apply a right margin when the right sidebar is collapsed */ 107 | .workspace:not(.is-right-sidedock-open) > .mod-root { 108 | margin-right: var(--collapsed-right-margin) !important; 109 | } 110 | 111 | .workspace:not(.is-right-sidedock-open) * .sidebar-toggle-button { 112 | margin-right: calc(0px - var(--collapsed-right-margin)) !important; 113 | } 114 | 115 | .mod-root .workspace-tab-header-container:after { 116 | margin-right: calc(0px - var(--collapsed-right-margin)); 117 | } 118 | 119 | /* Used for left aligning the document breadcrumb */ 120 | .view-header-title-container { 121 | justify-content: left; 122 | opacity: initial; 123 | } 124 | 125 | /* Fix tag misalignment */ 126 | .cm-hashtag-begin { 127 | display: inline-block; 128 | line-height: unset !important; 129 | } 130 | 131 | /* Fix tag misalignment */ 132 | .cm-hashtag-end { 133 | display: inline-block; 134 | } 135 | 136 | /* Font clarity adjustment */ 137 | body { 138 | word-spacing: -0.04rem; 139 | letter-spacing: 0.01rem; 140 | -webkit-font-smoothing: antialiased !important; 141 | } 142 | ``` 143 | -------------------------------------------------------------------------------- /Snippets/Callout styling - 3 callouts.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Callout styling - 3 callouts 4 | 5 | --- 6 | 7 | - author:: Bluemoondragon07 8 | - source:: 9 | 10 | --- 11 | 12 | > _Extracted from [Chime Theme](https://github.com/Bluemoondragon07/chime-theme)_ of **Bluemoondragon07** 13 | 14 | **Note**: _You will need **Style settings** plugin_. 15 | cover:: ![](https://i.imgur.com/beca3NA.png) 16 | 17 | ```css 18 | /* 19 | MIT License 20 | 21 | Copyright (c) 2023 Ha'ani Whitlock 22 | 23 | Permission is hereby granted, free of charge, to any person obtaining a copy 24 | of this software and associated documentation files (the "Software"), to deal 25 | in the Software without restriction, including without limitation the rights 26 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 27 | copies of the Software, and to permit persons to whom the Software is 28 | furnished to do so, subject to the following conditions: 29 | 30 | The above copyright notice and this permission notice shall be included in all 31 | copies or substantial portions of the Software. 32 | 33 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 34 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 35 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 36 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 37 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 38 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 39 | SOFTWARE. 40 | 41 | */ 42 | 43 | /* @settings 44 | 45 | name: Chime Theme 46 | id: chime-theme 47 | settings: 48 | - 49 | id: callout-options 50 | title: Callouts 51 | type: heading 52 | level: 2 53 | collapsed: true 54 | - 55 | id: callout-style 56 | title: Callout Style 57 | type: class-select 58 | allowEmpty: false 59 | default: callout-normal 60 | options: 61 | - 62 | label: Default 63 | value: callout-normal 64 | - 65 | label: Bordered 66 | value: callout-bordered 67 | - 68 | label: Outlined 69 | value: callout-outlined 70 | - 71 | label: Card 72 | value: callout-floating 73 | 74 | */ 75 | 76 | /* ----- callouts ----- */ 77 | 78 | .callout, 79 | .callout-normal .callout { 80 | background-color: rgba(var(--callout-color), 0.17); 81 | border: none; 82 | position: relative; 83 | z-index: 2; 84 | } 85 | .callout-bordered .callout { 86 | border: 1.2px solid rgb(var(--callout-color)); 87 | } 88 | .callout-outlined { 89 | --callout-title-padding: 5px; 90 | } 91 | .callout-outlined .callout, 92 | .callout-outlined .markdown-source-view.mod-cm6 .callout { 93 | background-color: transparent !important; 94 | border: 1.5px solid rgb(var(--callout-color)); 95 | overflow: visible; 96 | margin: 1.5em 0px 1.5em; 97 | } 98 | .callout-outlined .callout-title { 99 | background-color: var(--background-primary); 100 | margin-top: -22.5px; 101 | margin-left: -0.75em; 102 | padding: 0 0.5em; 103 | width: fit-content; 104 | } 105 | .callout-floating .callout, 106 | .callout-floating .markdown-source-view.mod-cm6 .callout { 107 | margin: 13px 0px; 108 | border-radius: var(--radius-s); 109 | border: 1.2px solid rgba(var(--callout-color), 0.7); 110 | box-shadow: var(--shadow-s); 111 | background-color: transparent; 112 | padding: 0px; 113 | } 114 | 115 | .callout-floating .callout-title, 116 | .callout-floating .markdown-source-view.mod-cm6 .callout-title { 117 | background-color: rgba(var(--callout-color), 0.2); 118 | padding: 10px; 119 | min-width: 100%; 120 | } 121 | .callout-floating .callout-content, 122 | .callout-floating .markdown-source-view.mod-cm6 .callout-content { 123 | padding: 0px 10px; 124 | } 125 | ``` 126 | -------------------------------------------------------------------------------- /Snippets/Empty Tab Styling 02.md: -------------------------------------------------------------------------------- 1 | ↪ [Collection](Collection.md) 2 | 3 | # Empty tab styling 4 | 5 | --- 6 | 7 | - author:: mrkcmn 8 | - source:: 9 | 10 | --- 11 | 12 | cover:: ![xSWOGhi.gif|461](https://imgur.com/xSWOGhi.gif) 13 | 14 | ## Snippet 15 | ```css 16 | 17 | .empty-state-container { 18 |     position: relative; 19 |     top: -15%; 20 |     left: 1%; 21 | } 22 | 23 | 24 | 25 | .empty-state-container:hover::before{ 26 |     content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' shape-rendering='auto' viewBox='0 0 100 100' width='250' height='300' class='logo-full'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='82.85' y1='30.41' x2='51.26' y2='105.9' gradientTransform='matrix(1, 0, 0, -1, -22.41, 110.97)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%236c56cc'%3E%3C/stop%3E%3Cstop offset='1' stop-color='%239785e5'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='62.61,0 30.91,17.52 18,45.45 37.57,90.47 65.35,100 70.44,89.8 81,26.39 62.61,0' fill='%2334208c'%3E%3C/polygon%3E%3Cpolygon points='81,26.39 61.44,14.41 34.43,35.7 65.35,100 70.44,89.8 81,26.39' fill='url(%23a)'%3E%3C/polygon%3E%3Cpolygon points='81,26.39 81,26.39 62.61,0 61.44,14.41 81,26.39' fill='%23af9ff4'%3E%3C/polygon%3E%3Cpolygon points='61.44,14.41 62.61,0 30.91,17.52 34.43,35.7 61.44,14.41' fill='%234a37a0'%3E%3C/polygon%3E%3Cpolygon points='34.43,35.7 37.57,90.47 65.35,100 34.43,35.7' fill='%234a37a0'%3E%3C/polygon%3E%3C/svg%3E"); 27 |     opacity: 100%; 28 |     transition: opacity 1000ms cubic-bezier(0, 0.2, 0.8, 1); 29 |     position: relative; 30 |     z-index: 1; 31 | } 32 | 33 | .empty-state-container:not(:hover)::before { 34 |     content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' shape-rendering='auto' viewBox='0 0 100 100' width='250' height='300' class='logo-full'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='82.85' y1='30.41' x2='51.26' y2='105.9' gradientTransform='matrix(1, 0, 0, -1, -22.41, 110.97)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%236c56cc'%3E%3C/stop%3E%3Cstop offset='1' stop-color='%239785e5'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='62.61,0 30.91,17.52 18,45.45 37.57,90.47 65.35,100 70.44,89.8 81,26.39 62.61,0' fill='%2334208c'%3E%3C/polygon%3E%3Cpolygon points='81,26.39 61.44,14.41 34.43,35.7 65.35,100 70.44,89.8 81,26.39' fill='url(%23a)'%3E%3C/polygon%3E%3Cpolygon points='81,26.39 81,26.39 62.61,0 61.44,14.41 81,26.39' fill='%23af9ff4'%3E%3C/polygon%3E%3Cpolygon points='61.44,14.41 62.61,0 30.91,17.52 34.43,35.7 61.44,14.41' fill='%234a37a0'%3E%3C/polygon%3E%3Cpolygon points='34.43,35.7 37.57,90.47 65.35,100 34.43,35.7' fill='%234a37a0'%3E%3C/polygon%3E%3C/svg%3E"); 35 |     opacity: 0%; 36 |     transition: opacity 1300ms cubic-bezier(0, 0.2, 0.8, 1); 37 |     position: relative; 38 |     z-index: 1; 39 | } 40 | 41 | .empty-state-title { 42 |     position: absolute; 43 |     top: -7.2%; 44 |     left: 0.2%; 45 |     z-index: 0; 46 |     color: var(--background-primary); 47 | } 48 | 49 | 50 | 51 | .theme-dark .empty-state-title { 52 |     content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' shape-rendering='auto' viewBox='0 0 100 100' width='250' height='300' fill='none' stroke='gray' stroke-width='0.5' stroke-linecap='round' stroke-linejoin='bevel' class='logo-wireframe'%3E%3Cpath d='M 30.91 17.52 L 34.43 35.7 M 61.44 14.41 L 62.61 0 M 34.43 35.7 L 37.57 90.47 M 81 26.39 L 61.44 14.41 L 34.43 35.7 L 65.35 100 M 62.61 0 L 30.91 17.52 L 18 45.45 L 37.57 90.47 L 65.35 100 L 70.44 89.8 L 81 26.39 L 62.61 0 Z'%3E%3C/path%3E%3C/svg%3E"); 53 |     opacity: 40%; 54 | } 55 | 56 | .theme-light .empty-state-title { 57 |     content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' shape-rendering='auto' viewBox='0 0 100 100' width='250' height='300' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='bevel' class='logo-wireframe'%3E%3Cpath d='M 30.91 17.52 L 34.43 35.7 M 61.44 14.41 L 62.61 0 M 34.43 35.7 L 37.57 90.47 M 81 26.39 L 61.44 14.41 L 34.43 35.7 L 65.35 100 M 62.61 0 L 30.91 17.52 L 18 45.45 L 37.57 90.47 L 65.35 100 L 70.44 89.8 L 81 26.39 L 62.61 0 Z'%3E%3C/path%3E%3C/svg%3E"); 58 |     opacity: 10%; 59 | } 60 | ``` 61 | -------------------------------------------------------------------------------- /Snippets/File explorer styling - Rainbow folder titles.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # File explorer styling - Rainbow folder titles 4 | 5 | --- 6 | 7 | - author:: sailKite 8 | - source:: https://discord.com/channels/686053708261228577/702656734631821413/1163095446919585843 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/vjXhJdp.png) 13 | 14 | ```css 15 | /* 16 | author: sailKite 17 | source: https://discord.com/channels/686053708261228577/702656734631821413/1163095446919585843 18 | */ 19 | 20 | /* updated snippet for v1.6.3 */ 21 | 22 | .nav-folder-children > .nav-folder, 23 | .nav-files-container > div > .nav-folder { 24 | --nav-item-color: var(--folder-color); 25 | } 26 | .nav-folder-children > .nav-folder, 27 | .nav-files-container > div > .nav-folder:hover { 28 | filter: brightness(0.9); 29 | } 30 | .nav-folder-children > .nav-folder, 31 | .nav-files-container > div > .nav-folder:nth-child(11n + 2) { 32 | --folder-color: rgb(243, 139, 168); 33 | } 34 | .nav-folder-children > .nav-folder, 35 | .nav-files-container > div > .nav-folder:nth-child(11n + 3) { 36 | --folder-color: rgb(235, 160, 172); 37 | } 38 | .nav-folder-children > .nav-folder, 39 | .nav-files-container > div > .nav-folder:nth-child(11n + 4) { 40 | --folder-color: rgb(250, 179, 135); 41 | } 42 | .nav-folder-children > .nav-folder, 43 | .nav-files-container > div > .nav-folder:nth-child(11n + 5) { 44 | --folder-color: rgb(249, 226, 175); 45 | } 46 | .nav-folder-children > .nav-folder, 47 | .nav-files-container > div > .nav-folder:nth-child(11n + 6) { 48 | --folder-color: rgb(166, 227, 161); 49 | } 50 | .nav-folder-children > .nav-folder, 51 | .nav-files-container > div > .nav-folder:nth-child(11n + 7) { 52 | --folder-color: rgb(148, 226, 213); 53 | } 54 | .nav-folder-children > .nav-folder, 55 | .nav-files-container > div > .nav-folder:nth-child(11n + 8) { 56 | --folder-color: rgb(137, 220, 235); 57 | } 58 | .nav-folder-children > .nav-folder, 59 | .nav-files-container > div > .nav-folder:nth-child(11n + 9) { 60 | --folder-color: rgb(116, 199, 236); 61 | } 62 | .nav-folder-children > .nav-folder, 63 | .nav-files-container > div > .nav-folder:nth-child(11n + 10) { 64 | --folder-color: rgb(135, 176, 249); 65 | } 66 | .nav-folder-children > .nav-folder, 67 | .nav-files-container > div > .nav-folder:nth-child(11n + 11) { 68 | --folder-color: rgb(180, 190, 254); 69 | } 70 | .nav-folder-children > .nav-folder, 71 | .nav-files-container > div > .nav-folder:nth-child(11n + 12) { 72 | --folder-color: rgb(203, 166, 247); 73 | } 74 | ``` 75 | 76 | **Subfolders with same colour as main folder** 77 | 78 | ```css 79 | /* updated snippet for v1.6.3 */ 80 | 81 | .nav-files-container > div > .nav-folder { 82 | --nav-item-color: var(--folder-color); 83 | } 84 | 85 | .nav-files-container > div > .nav-folder:hover { 86 | filter: brightness(0.9); 87 | } 88 | 89 | .nav-files-container > div > .nav-folder:nth-child(11n + 2) { 90 | --folder-color: rgb(243, 139, 168); 91 | } 92 | 93 | .nav-files-container > div > .nav-folder:nth-child(11n + 3) { 94 | --folder-color: rgb(235, 160, 172); 95 | } 96 | 97 | .nav-files-container > div > .nav-folder:nth-child(11n + 4) { 98 | --folder-color: rgb(250, 179, 135); 99 | } 100 | 101 | .nav-files-container > div > .nav-folder:nth-child(11n + 5) { 102 | --folder-color: rgb(249, 226, 175); 103 | } 104 | 105 | .nav-files-container > div > .nav-folder:nth-child(11n + 6) { 106 | --folder-color: rgb(166, 227, 161); 107 | } 108 | 109 | .nav-files-container > div > .nav-folder:nth-child(11n + 7) { 110 | --folder-color: rgb(148, 226, 213); 111 | } 112 | 113 | .nav-files-container > div > .nav-folder:nth-child(11n + 8) { 114 | --folder-color: rgb(137, 220, 235); 115 | } 116 | 117 | .nav-files-container > div > .nav-folder:nth-child(11n + 9) { 118 | --folder-color: rgb(116, 199, 236); 119 | } 120 | 121 | .nav-files-container > div > .nav-folder:nth-child(11n + 10) { 122 | --folder-color: rgb(135, 176, 249); 123 | } 124 | 125 | .nav-files-container > div > .nav-folder:nth-child(11n + 11) { 126 | --folder-color: rgb(180, 190, 254); 127 | } 128 | 129 | .nav-files-container > div > .nav-folder:nth-child(11n + 12) { 130 | --folder-color: rgb(203, 166, 247); 131 | } 132 | ``` 133 | -------------------------------------------------------------------------------- /Snippets/File explorer styling - Rainbow folder background.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # File explorer styling - Rainbow folder background 4 | 5 | --- 6 | 7 | - author:: sailKite, rushi 8 | (_just tweaked a bit the original [code](https://discord.com/channels/686053708261228577/702656734631821413/1163095446919585843) by_ **sailKite**) 9 | - source:: 10 | 11 | --- 12 | 13 | cover:: ![](https://i.imgur.com/zjZHS82.png) 14 | 15 | ```css 16 | /* updated snippet for version 1.6.3 */ 17 | 18 | .nav-folder-children > .nav-folder, 19 | .nav-files-container > div > .nav-folder { 20 | background-color: var(--folder-color); 21 | --nav-item-color: black; 22 | --nav-item-color-hover: black; 23 | --nav-collapse-icon-color: black; 24 | --nav-item-color-active: black; 25 | border-radius: 10px; 26 | } 27 | .nav-folder-children > .nav-folder, 28 | .nav-files-container > div > .nav-folder:hover { 29 | filter: brightness(0.9); 30 | } 31 | .nav-folder-children > .nav-folder, 32 | .nav-files-container > div > .nav-folder:nth-child(11n + 2) { 33 | --folder-color: rgb(243, 139, 168); 34 | } 35 | .nav-folder-children > .nav-folder, 36 | .nav-files-container > div > .nav-folder:nth-child(11n + 3) { 37 | --folder-color: rgb(235, 160, 172); 38 | } 39 | .nav-folder-children > .nav-folder, 40 | .nav-files-container > div > .nav-folder:nth-child(11n + 4) { 41 | --folder-color: rgb(250, 179, 135); 42 | } 43 | .nav-folder-children > .nav-folder, 44 | .nav-files-container > div > .nav-folder:nth-child(11n + 5) { 45 | --folder-color: rgb(249, 226, 175); 46 | } 47 | .nav-folder-children > .nav-folder, 48 | .nav-files-container > div > .nav-folder:nth-child(11n + 6) { 49 | --folder-color: rgb(166, 227, 161); 50 | } 51 | .nav-folder-children > .nav-folder, 52 | .nav-files-container > div > .nav-folder:nth-child(11n + 7) { 53 | --folder-color: rgb(148, 226, 213); 54 | } 55 | .nav-folder-children > .nav-folder, 56 | .nav-files-container > div > .nav-folder:nth-child(11n + 8) { 57 | --folder-color: rgb(137, 220, 235); 58 | } 59 | .nav-folder-children > .nav-folder, 60 | .nav-files-container > div > .nav-folder:nth-child(11n + 9) { 61 | --folder-color: rgb(116, 199, 236); 62 | } 63 | .nav-folder-children > .nav-folder, 64 | .nav-files-container > div > .nav-folder:nth-child(11n + 10) { 65 | --folder-color: rgb(135, 176, 249); 66 | } 67 | .nav-folder-children > .nav-folder, 68 | .nav-files-container > div > .nav-folder:nth-child(11n + 11) { 69 | --folder-color: rgb(180, 190, 254); 70 | } 71 | .nav-folder-children > .nav-folder, 72 | .nav-files-container > div > .nav-folder:nth-child(11n + 12) { 73 | --folder-color: rgb(203, 166, 247); 74 | } 75 | ``` 76 | 77 | **Subfolders with same colour as main folder** 78 | 79 | ```css 80 | /* updated snippet for version 1.6.3 */ 81 | 82 | .nav-files-container > div > .nav-folder { 83 | background-color: var(--folder-color); 84 | --nav-item-color: black; 85 | --nav-item-color-hover: black; 86 | --nav-collapse-icon-color: black; 87 | border-radius: 10px; 88 | } 89 | 90 | .nav-files-container > div > .nav-folder:hover { 91 | filter: brightness(0.9); 92 | } 93 | 94 | .nav-files-container > div > .nav-folder:nth-child(11n + 2) { 95 | --folder-color: rgb(243, 139, 168); 96 | } 97 | 98 | .nav-files-container > div > .nav-folder:nth-child(11n + 3) { 99 | --folder-color: rgb(235, 160, 172); 100 | } 101 | 102 | .nav-files-container > div > .nav-folder:nth-child(11n + 4) { 103 | --folder-color: rgb(250, 179, 135); 104 | } 105 | 106 | .nav-files-container > div > .nav-folder:nth-child(11n + 5) { 107 | --folder-color: rgb(249, 226, 175); 108 | } 109 | 110 | .nav-files-container > div > .nav-folder:nth-child(11n + 6) { 111 | --folder-color: rgb(166, 227, 161); 112 | } 113 | 114 | .nav-files-container > div > .nav-folder:nth-child(11n + 7) { 115 | --folder-color: rgb(148, 226, 213); 116 | } 117 | 118 | .nav-files-container > div > .nav-folder:nth-child(11n + 8) { 119 | --folder-color: rgb(137, 220, 235); 120 | } 121 | 122 | .nav-files-container > div > .nav-folder:nth-child(11n + 9) { 123 | --folder-color: rgb(116, 199, 236); 124 | } 125 | 126 | .nav-files-container > div > .nav-folder:nth-child(11n + 10) { 127 | --folder-color: rgb(135, 176, 249); 128 | } 129 | 130 | .nav-files-container > div > .nav-folder:nth-child(11n + 11) { 131 | --folder-color: rgb(180, 190, 254); 132 | } 133 | 134 | .nav-files-container > div > .nav-folder:nth-child(11n + 12) { 135 | --folder-color: rgb(203, 166, 247); 136 | } 137 | ``` 138 | -------------------------------------------------------------------------------- /Snippets/Callout styling - Timeline callout.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Callout styling - Timeline callout 4 | 5 | --- 6 | 7 | - author:: FireIsGood 8 | - source:: https://discord.com/channels/686053708261228577/702656734631821413/1156868388249935883 9 | 10 | --- 11 | 12 | > _There might be some conflict if you are using_ **SlRvb's callout adjustment or ITS theme** 13 | 14 | cover:: ![](https://i.imgur.com/UzllmA4.png) 15 | 16 | ```css 17 | /* 18 | author: FireIsGood 19 | source: https://discord.com/channels/686053708261228577/702656734631821413/1156868388249935883 20 | */ 21 | 22 | /* Timeline Callout settings */ 23 | body { 24 | --timeline-title-color: var(--text-normal); 25 | --timeline-title-size: var(--h2-size); 26 | --timeline-title-width: 150px; 27 | 28 | --timeline-line-color: var(--color-base-35); 29 | --timeline-line-margin: 16px; 30 | --timeline-line-width: 4px; 31 | --timeline-line-style: solid; 32 | 33 | --timeline-dot-color: var(--color-base-70); 34 | --timeline-dot-size: 32px; 35 | --timeline-dot-radius: 100%; 36 | --timeline-dot-border-color: var(--background-primary); 37 | --timeline-dot-border-size: 6px; 38 | --timeline-dot-offset-x: -18px; 39 | --timeline-dot-offset-y: -2px; 40 | 41 | --timeline-card-margin: 16px; 42 | --timeline-card-background-color: var(--color-base-30); 43 | --timeline-card-padding-x: 10px; 44 | --timeline-card-padding-y: 16px; 45 | } 46 | 47 | /* Timeline styling */ 48 | [data-callout="timeline"] { 49 | order: 1; 50 | padding: 0; 51 | margin: 0; 52 | display: grid; 53 | mix-blend-mode: normal; 54 | background-color: unset; 55 | grid-template-columns: var(--timeline-title-width, 150px) auto; 56 | --dot-offset: calc( 57 | var(--timeline-dot-offset-y) + var(--timeline-card-padding-y) 58 | ); 59 | 60 | .callout-title-inner { 61 | width: 100%; 62 | text-align: right; 63 | color: var(--timeline-title-color); 64 | font-size: var(--timeline-title-size); 65 | margin-top: var(--dot-offset); 66 | } 67 | .callout-icon { 68 | order: 2; 69 | margin-inline: var(--timeline-line-margin); 70 | border-left: var(--timeline-line-width) var(--timeline-line-style) var(--timeline-line-color); 71 | height: 100%; 72 | position: relative; 73 | 74 | &::after { 75 | content: ""; 76 | box-sizing: border-box; 77 | background-color: var(--timeline-dot-color); 78 | position: absolute; 79 | border: var(--timeline-dot-border-size) solid var( 80 | --timeline-dot-border-color 81 | ); 82 | border-radius: var(--timeline-dot-radius); 83 | width: var(--timeline-dot-size); 84 | height: var(--timeline-dot-size); 85 | top: var(--dot-offset); 86 | left: var(--timeline-dot-offset-x); 87 | } 88 | } 89 | .svg-icon { 90 | display: none; 91 | } 92 | 93 | .callout-content { 94 | order: 3; 95 | --p-spacing: 0.5rem; 96 | background-color: var(--timeline-card-background-color); 97 | border-radius: 1rem; 98 | margin-bottom: var(--timeline-card-margin); 99 | padding: var(--timeline-card-padding-x) var(--timeline-card-padding-y); 100 | 101 | & > h2:first-child { 102 | margin-top: 0; 103 | } 104 | } 105 | } 106 | 107 | /* Stacking multiple timelines */ 108 | div:not(:has(> [data-callout="timeline"])) + div > [data-callout="timeline"] { 109 | margin-top: var(--p-spacing); 110 | } 111 | div:has(> [data-callout="timeline"]) + div:not(> [data-callout="timeline"]) { 112 | margin-bottom: 1rem; 113 | } 114 | 115 | /* Timeline dot colors */ 116 | [data-callout-metadata="red"] { 117 | --timeline-dot-color: var(--color-red); 118 | } 119 | [data-callout-metadata="orange"] { 120 | --timeline-dot-color: var(--color-orange); 121 | } 122 | [data-callout-metadata="yellow"] { 123 | --timeline-dot-color: var(--color-yellow); 124 | } 125 | [data-callout-metadata="green"] { 126 | --timeline-dot-color: var(--color-green); 127 | } 128 | [data-callout-metadata="cyan"] { 129 | --timeline-dot-color: var(--color-cyan); 130 | } 131 | [data-callout-metadata="blue"] { 132 | --timeline-dot-color: var(--color-blue); 133 | } 134 | [data-callout-metadata="purple"] { 135 | --timeline-dot-color: var(--color-purple); 136 | } 137 | [data-callout-metadata="pink"] { 138 | --timeline-dot-color: var(--color-pink); 139 | } 140 | ``` 141 | 142 | --- 143 | 144 | ## How to use 145 | 146 | ```md 147 | > [!timeline|red] Title 148 | > Lorem, ipsum dolor sit amet consectetur, adipisicing elit. 149 | ``` 150 | -------------------------------------------------------------------------------- /.obsidian/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "main": { 3 | "id": "7bbff34bb0533f24", 4 | "type": "split", 5 | "children": [ 6 | { 7 | "id": "2566e214125b5fec", 8 | "type": "tabs", 9 | "children": [ 10 | { 11 | "id": "542c313f773a8de5", 12 | "type": "leaf", 13 | "pinned": true, 14 | "state": { 15 | "type": "markdown", 16 | "state": { 17 | "file": "Collection.md", 18 | "mode": "preview", 19 | "source": false 20 | }, 21 | "pinned": true 22 | } 23 | }, 24 | { 25 | "id": "49838a775dc98e0d", 26 | "type": "leaf", 27 | "state": { 28 | "type": "markdown", 29 | "state": { 30 | "file": "README.md", 31 | "mode": "source", 32 | "source": false 33 | } 34 | } 35 | } 36 | ] 37 | } 38 | ], 39 | "direction": "vertical" 40 | }, 41 | "left": { 42 | "id": "bb61bd438af99114", 43 | "type": "split", 44 | "children": [ 45 | { 46 | "id": "60d9168d287e034e", 47 | "type": "tabs", 48 | "children": [ 49 | { 50 | "id": "2e82ba6254f0c2b4", 51 | "type": "leaf", 52 | "state": { 53 | "type": "file-explorer", 54 | "state": { 55 | "sortOrder": "alphabetical" 56 | } 57 | } 58 | }, 59 | { 60 | "id": "c2d35e4ad469ffb5", 61 | "type": "leaf", 62 | "state": { 63 | "type": "search", 64 | "state": { 65 | "query": "", 66 | "matchingCase": false, 67 | "explainSearch": false, 68 | "collapseAll": false, 69 | "extraContext": false, 70 | "sortOrder": "alphabetical" 71 | } 72 | } 73 | }, 74 | { 75 | "id": "39a79074a99bad8c", 76 | "type": "leaf", 77 | "state": { 78 | "type": "bookmarks", 79 | "state": {} 80 | } 81 | } 82 | ] 83 | } 84 | ], 85 | "direction": "horizontal", 86 | "width": 297.50550842285156, 87 | "collapsed": true 88 | }, 89 | "right": { 90 | "id": "96a444775a89a0c6", 91 | "type": "split", 92 | "children": [ 93 | { 94 | "id": "3829c84ae75cba88", 95 | "type": "tabs", 96 | "children": [ 97 | { 98 | "id": "5a0ebc6dc0c2d0f6", 99 | "type": "leaf", 100 | "state": { 101 | "type": "backlink", 102 | "state": { 103 | "file": "Collection.md", 104 | "collapseAll": false, 105 | "extraContext": false, 106 | "sortOrder": "alphabetical", 107 | "showSearch": false, 108 | "searchQuery": "", 109 | "backlinkCollapsed": false, 110 | "unlinkedCollapsed": true 111 | } 112 | } 113 | }, 114 | { 115 | "id": "2f856161313deb5f", 116 | "type": "leaf", 117 | "state": { 118 | "type": "outgoing-link", 119 | "state": { 120 | "file": "Collection.md", 121 | "linksCollapsed": false, 122 | "unlinkedCollapsed": true 123 | } 124 | } 125 | }, 126 | { 127 | "id": "b7edaa4f64cb6f08", 128 | "type": "leaf", 129 | "state": { 130 | "type": "tag", 131 | "state": { 132 | "sortOrder": "frequency", 133 | "useHierarchy": true 134 | } 135 | } 136 | }, 137 | { 138 | "id": "cb5b1e9384e733d8", 139 | "type": "leaf", 140 | "state": { 141 | "type": "outline", 142 | "state": { 143 | "file": "Collection.md" 144 | } 145 | } 146 | } 147 | ] 148 | } 149 | ], 150 | "direction": "horizontal", 151 | "width": 300, 152 | "collapsed": true 153 | }, 154 | "left-ribbon": { 155 | "hiddenItems": { 156 | "switcher:Open quick switcher": false, 157 | "graph:Open graph view": false, 158 | "canvas:Create new canvas": false, 159 | "daily-notes:Open today's daily note": false, 160 | "templates:Insert template": false, 161 | "command-palette:Open command palette": false 162 | } 163 | }, 164 | "active": "542c313f773a8de5", 165 | "lastOpenFiles": [ 166 | "README.md", 167 | "Snippets/Banner.md", 168 | "Collection.md", 169 | "Snippets/Accented settings side headings.md", 170 | "Snippets/Author callout.md" 171 | ] 172 | } -------------------------------------------------------------------------------- /Snippets/Heading indicators 02.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Heading indicators 02 4 | 5 | --- 6 | 7 | - author:: Daniel, sailKite 8 | - source:: https://discord.com/channels/686053708261228577/702656734631821413/1155544494897365084 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/4qQrLIN.png) 13 | 14 | ```css 15 | /* 16 | author: Daniel, sailKite 17 | source: https://discord.com/channels/686053708261228577/702656734631821413/1155544494897365084 18 | */ 19 | 20 | /* 21 | cssclass: 'numbered-headers' 22 | functionality: Adds numbers to headers in all views/modes, as well as the dynamic TOC plugin. 23 | */ 24 | 25 | /* inside Dynamic ToC */ 26 | .numbered-headers .dynamic-toc ol { 27 | list-style-type: none; 28 | } 29 | .numbered-headers .dynamic-toc ol { 30 | counter-reset: decimal; 31 | } 32 | .numbered-headers .dynamic-toc ol > li { 33 | display: block; 34 | } 35 | .numbered-headers .dynamic-toc ol > li::before { 36 | content: counters(decimal, ".") " "; 37 | counter-increment: decimal; 38 | color: var(--text-a) /* put your text var here or hardcode the color */; 39 | } 40 | 41 | /* headers */ 42 | /* h1 */ 43 | .numbered-headers div:has(> h1) { 44 | counter-increment: h1counter; 45 | counter-reset: h2counter; 46 | } 47 | .numbered-headers div:has(> h1) > h1::before { 48 | content: counter(h1counter) ". "; 49 | color: var(--text-accent); 50 | } 51 | /* h2 */ 52 | .numbered-headers h2 { 53 | counter-increment: h2counter; 54 | counter-reset: h3counter; 55 | } 56 | .numbered-headers h2::before { 57 | content: counter(h1counter) "." counter(h2counter) ". "; 58 | color: var(--text-accent); 59 | } 60 | /* h3 */ 61 | .numbered-headers div:has(> h3) { 62 | counter-increment: h3counter; 63 | counter-reset: h4counter; 64 | } 65 | .numbered-headers div:has(> h3) > h3::before { 66 | content: counter(h1counter) "." counter(h2counter) "." counter(h3counter) ". "; 67 | color: var(--text-accent); 68 | } 69 | /* h4 */ 70 | .numbered-headers div:has(> h4) { 71 | counter-increment: h4counter; 72 | counter-reset: h5counter; 73 | } 74 | .numbered-headers div:has(> h4) > h4::before { 75 | content: counter(h1counter) "." counter(h2counter) "." counter(h3counter) "." counter( 76 | h4counter 77 | ) 78 | ". "; 79 | color: var(--text-accent); 80 | } 81 | /* h5 */ 82 | .numbered-headers div:has(> h5) { 83 | counter-increment: h5counter; 84 | counter-reset: h6counter; 85 | } 86 | .numbered-headers div:has(> h5) > h5::before { 87 | content: counter(h1counter) "." counter(h2counter) "." counter(h3counter) "." counter( 88 | h4counter 89 | ) 90 | "." counter(h5counter) ". "; 91 | color: var(--text-accent); 92 | } 93 | /* h6 */ 94 | .numbered-headers div:has(> h6) { 95 | counter-increment: h6counter; 96 | } 97 | .numbered-headers div:has(> h6) > h6::before { 98 | content: counter(h1counter) "." counter(h2counter) "." counter(h3counter) "." counter( 99 | h4counter 100 | ) 101 | "." counter(h5counter) "." counter(h6counter) ". "; 102 | color: var(--text-accent); 103 | } 104 | 105 | /* live preview */ 106 | .numbered-headers .HyperMD-header-1 { 107 | counter-increment: h1counter; 108 | counter-reset: h2counter; 109 | } 110 | .numbered-headers .HyperMD-header-1::before { 111 | content: counter(h1counter) ". "; 112 | color: var(--text-accent); 113 | } 114 | /* h2 */ 115 | .numbered-headers .HyperMD-header-2 { 116 | counter-increment: h2counter; 117 | counter-reset: h3counter; 118 | } 119 | .numbered-headers .HyperMD-header-2::before { 120 | content: counter(h1counter) "." counter(h2counter) ". "; 121 | color: var(--text-accent); 122 | } 123 | /* h3 */ 124 | .numbered-headers .HyperMD-header-3 { 125 | counter-increment: h3counter; 126 | counter-reset: h4counter; 127 | } 128 | .numbered-headers .HyperMD-header-3:before { 129 | content: counter(h1counter) "." counter(h2counter) "." counter(h3counter) ". "; 130 | color: var(--text-accent); 131 | } 132 | /* h4 */ 133 | .numbered-headers .HyperMD-header-4 { 134 | counter-increment: h4counter; 135 | counter-reset: h5counter; 136 | } 137 | .numbered-headers .HyperMD-header-4::before { 138 | content: counter(h1counter) "." counter(h2counter) "." counter(h3counter) "." counter( 139 | h4counter 140 | ) 141 | ". "; 142 | color: var(--text-accent); 143 | } 144 | /* h5 */ 145 | .numbered-headers .HyperMD-header-5 { 146 | counter-increment: h5counter; 147 | counter-reset: h6counter; 148 | } 149 | .numbered-headers .HyperMD-header-5:before { 150 | content: counter(h1counter) "." counter(h2counter) "." counter(h3counter) "." counter( 151 | h4counter 152 | ) 153 | "." counter(h5counter) ". "; 154 | color: var(--text-accent); 155 | } 156 | /* h6 */ 157 | .numbered-headers .HyperMD-header-6 { 158 | counter-increment: h6counter; 159 | } 160 | .numbered-headers .HyperMD-header-6::before { 161 | content: counter(h1counter) "." counter(h2counter) "." counter(h3counter) "." counter( 162 | h4counter 163 | ) 164 | "." counter(h5counter) "." counter(h6counter) ". "; 165 | color: var(--text-accent); 166 | } 167 | ``` 168 | -------------------------------------------------------------------------------- /Snippets/Callout styling - Power callouts.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Callout styling - Power callouts 4 | 5 | --- 6 | 7 | - author:: kneecaps 8 | - source:: https://discord.com/channels/686053708261228577/702656734631821413/1070521863761047593 9 | 10 | --- 11 | 12 | > _You will need to turn it on using **style settings** plugin_ 13 | 14 | cover:: ![](https://i.imgur.com/bdbC8Pz.png) 15 | 16 | ```css 17 | /* 18 | author: kneecaps 19 | source: https://discord.com/channels/686053708261228577/702656734631821413/1070521863761047593 20 | */ 21 | 22 | /* Style Settings*/ 23 | /* @settings 24 | name: Power Callouts 25 | id: power-callouts 26 | settings: 27 | - 28 | id: brutal 29 | title: Brutalist 30 | description: Sharp corners, thick border, heavy color demarking 31 | type: class-toggle 32 | - 33 | id: soft 34 | title: Soft 35 | description: Rounded corners, duo-tone 36 | type: class-toggle 37 | */ 38 | 39 | .callout[data-callout="multi-column"]:hover { 40 | transform: translateY(0px); 41 | } 42 | 43 | .callout:hover { 44 | transform: translateY(4px); 45 | } 46 | 47 | .callout { 48 | transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1); 49 | } 50 | 51 | .callout[data-callout="shadow"] { 52 | --callout-title-color: var(--color-blue-rgb); 53 | --callout-color: var(--color-blue-rgb); 54 | } 55 | 56 | .callout[data-callout="shadow"] .callout-icon .svg-icon { 57 | background-color: var(--color-blue); 58 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-layers-subtract' width='16' height='16' viewBox='0 0 24 24' stroke-width='1.5' stroke='%232c3e50' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Crect x='8' y='4' width='12' height='12' rx='2' /%3E%3Cpath d='M16 16v2a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-8a2 2 0 0 1 2 -2h2' /%3E%3C/svg%3E"); 59 | } 60 | 61 | .callout[data-callout="sorcery"] { 62 | --callout-title-color: var(--color-red-rgb); 63 | --callout-color: var(--color-red-rgb); 64 | } 65 | .callout[data-callout="sorcery"] .callout-icon .svg-icon { 66 | background-color: var(--color-red); 67 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-layers-union' width='16' height='16' viewBox='0 0 24 24' stroke-width='1.5' stroke='%232c3e50' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M16 16v2a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-8a2 2 0 0 1 2 -2h2v-2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-2' /%3E%3C/svg%3E"); 68 | } 69 | 70 | .callout[data-callout="eidolon"] { 71 | --callout-title-color: var(--color-green-rgb); 72 | --callout-color: var(--color-green-rgb); 73 | } 74 | .callout[data-callout="eidolon"] .callout-icon .svg-icon { 75 | background-color: var(--color-green); 76 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-layers-difference' width='16' height='16' viewBox='0 0 24 24' stroke-width='1.5' stroke='%232c3e50' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M16 16v2a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2v-8a2 2 0 0 1 2 -2h2v-2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-2' /%3E%3Cpolyline points='10 8 8 8 8 10' /%3E%3Cpolyline points='8 14 8 16 10 16' /%3E%3Cpolyline points='14 8 16 8 16 10' /%3E%3Cpolyline points='16 14 16 16 14 16' /%3E%3C/svg%3E"); 77 | } 78 | 79 | .callout[data-callout="umbra"] { 80 | --callout-title-color: var(--color-purple-rgb); 81 | --callout-color: var(--color-purple-rgb); 82 | } 83 | .callout[data-callout="umbra"] .callout-icon .svg-icon { 84 | background-color: var(--color-purple); 85 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-layers-intersect' width='16' height='16' viewBox='0 0 24 24' stroke-width='1.5' stroke='%232c3e50' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Crect x='8' y='4' width='12' height='12' rx='2' /%3E%3Crect x='4' y='8' width='12' height='12' rx='2' /%3E%3C/svg%3E"); 86 | } 87 | 88 | .brutal .callout { 89 | position: relative; 90 | overflow: visible; 91 | background: var(--background-primary); 92 | box-shadow: 8px 8px 0 -2.5px var(--background-primary), 8px 8px 0 0 rgb(var(--callout-color)); 93 | border: 2.5px solid rgb(var(--callout-color)); 94 | border-radius: 0px; 95 | } 96 | 97 | .brutal .callout:before { 98 | background: rgb(var(--callout-color)); 99 | content: ""; 100 | position: absolute; 101 | top: 8px; 102 | left: 8px; 103 | width: 100%; 104 | height: 100%; 105 | opacity: 0.2; 106 | } 107 | 108 | .soft .callout { 109 | position: relative; 110 | overflow: hidden; 111 | } 112 | 113 | .soft .callout:before { 114 | background: rgb(var(--callout-color)); 115 | content: ""; 116 | position: absolute; 117 | top: 64px; 118 | left: 0; 119 | width: 100%; 120 | height: 100%; 121 | opacity: 0.1; 122 | border-radius: 0px; 123 | } 124 | ``` 125 | -------------------------------------------------------------------------------- /Snippets/File explorer styling - Folder description.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # File explorer styling - Folder description 4 | 5 | --- 6 | 7 | - author:: Corellan 8 | - source:: https://discord.com/channels/686053708261228577/702656734631821413/1120300422565994516 9 | 10 | --- 11 | 12 | > _You can change the folder name, and add your own description_ 13 | 14 | cover:: ![](https://i.imgur.com/UsB7YMQ.png) 15 | 16 | ```css 17 | /* 18 | author: Corellan 19 | source: https://discord.com/channels/686053708261228577/702656734631821413/1120300422565994516 20 | */ 21 | 22 | /* ╔════════════════════════════════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗ */ 23 | /* ║ Obsidian Add-On ║ */ 24 | /* ╠══════════════════════════╦═════════════════════════════════════════════════════════════════════════════════════════╣ */ 25 | /* ║ Name: ║ CreArts Folder-Description ║ */ 26 | /* ║ Version: ║ 1.0.0 ║ */ 27 | /* ║ Author: ║ Corellan ║ */ 28 | /* ║ License: ║ MIT ║ */ 29 | /* ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝ */ 30 | 31 | /* ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗ */ 32 | /* ║ Custom CSS ║ Vars ║ */ 33 | /* ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝ */ 34 | 35 | :root { 36 | --folder-comments-height: 30px; 37 | } 38 | 39 | /* ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗ */ 40 | /* ║ Custom CSS ║ General ║ */ 41 | /* ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝ */ 42 | 43 | .tree-item-inner::after { 44 | position: absolute; 45 | font-size: 10px; 46 | bottom: 4px; 47 | left: 25px; 48 | opacity: 40%; 49 | } 50 | 51 | .tree-item .nav-folder:not(.is-collapsed) .tree-item-inner::after { 52 | color: var(--custom-color-primary); 53 | opacity: 100; 54 | } 55 | 56 | /* ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗ */ 57 | /* ║ Custom CSS ║ Plugins ║ */ 58 | /* ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝ */ 59 | 60 | .nav-folder-title[data-count]::after { 61 | align-self: start; 62 | } 63 | 64 | /* ╔══════════════════════════╦═════════════════════════════════════════════════════════════════════════════[─]═[□]═[×]═╗ */ 65 | /* ║ Custom CSS ║ Pseudo ║ */ 66 | /* ╚══════════════════════════╩═════════════════════════════════════════════════════════════════════════════════════════╝ */ 67 | 68 | /* Notes */ 69 | [data-path="1 Notes"] .tree-item-inner { 70 | height: var(--folder-comments-height); 71 | } 72 | 73 | [data-path="1 Notes"] .tree-item-inner::after { 74 | content: "My Personal notes"; 75 | } 76 | 77 | /* Tasks */ 78 | [data-path="2 Tasks"] .tree-item-inner { 79 | height: var(--folder-comments-height); 80 | } 81 | 82 | [data-path="2 Tasks"] .tree-item-inner::after { 83 | content: "My To-Do's"; 84 | } 85 | 86 | /* Projects */ 87 | [data-path="3 Projects"] .tree-item-inner { 88 | height: var(--folder-comments-height); 89 | } 90 | 91 | [data-path="3 Projects"] .tree-item-inner::after { 92 | content: "Work in Progress"; 93 | } 94 | 95 | /* Bookmarks */ 96 | [data-path="4 Bookmarks"] .tree-item-inner { 97 | height: var(--folder-comments-height); 98 | } 99 | 100 | [data-path="4 Bookmarks"] .tree-item-inner::after { 101 | content: "Saved web links"; 102 | } 103 | 104 | /* Documents */ 105 | [data-path="5 Documents"] .tree-item-inner { 106 | height: var(--folder-comments-height); 107 | } 108 | 109 | [data-path="5 Documents"] .tree-item-inner::after { 110 | content: "Important files"; 111 | } 112 | 113 | /* Research */ 114 | [data-path="6 Research"] .tree-item-inner { 115 | height: var(--folder-comments-height); 116 | } 117 | 118 | [data-path="6 Research"] .tree-item-inner::after { 119 | content: "Knowledge Hub"; 120 | } 121 | 122 | /* Resources */ 123 | [data-path="8 Resources"] .tree-item-inner { 124 | height: var(--folder-comments-height); 125 | } 126 | 127 | [data-path="8 Resources"] .tree-item-inner::after { 128 | content: "Files & Resources"; 129 | } 130 | 131 | /* Templates */ 132 | [data-path="9 Templates"] .tree-item-inner { 133 | height: var(--folder-comments-height); 134 | } 135 | 136 | [data-path="9 Templates"] .tree-item-inner::after { 137 | content: "My Custom Tempaltes"; 138 | } 139 | ``` 140 | -------------------------------------------------------------------------------- /Snippets/Vertical label arrangement.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Vertical label arrangement 4 | 5 | --- 6 | 7 | - author:: kepano 8 | - source:: 9 | 10 | --- 11 | 12 | > \*Extracted from [Minimal Theme](https://github.com/kepano/obsidian-minimal) of **kepano\*** 13 | 14 | cover:: ![](https://i.imgur.com/EcIdMeF.png) 15 | 16 | ```css 17 | /* --------------------------------------------------------------------------- 18 | 19 | Minimal Theme by @kepano 20 | 21 | User interface replacement for Obsidian. 22 | 23 | Sponsor my work: 24 | https://www.buymeacoffee.com/kepano 25 | 26 | Readme: 27 | https://github.com/kepano/obsidian-minimal 28 | 29 | ----------------------------------------------------------------------------- 30 | 31 | MIT License 32 | 33 | Copyright (c) 2020-2023 Stephan Ango (@kepano) 34 | 35 | Permission is hereby granted, free of charge, to any person obtaining a copy 36 | of this software and associated documentation files (the "Software"), to deal 37 | in the Software without restriction, including without limitation the rights 38 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 39 | copies of the Software, and to permit persons to whom the Software is 40 | furnished to do so, subject to the following conditions: 41 | 42 | The above copyright notice and this permission notice shall be included in 43 | all copies or substantial portions of the Software. 44 | 45 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 46 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 47 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 48 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 49 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 50 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 51 | SOFTWARE. 52 | 53 | */ 54 | 55 | .is-fullscreen:not(.colorful-frame) { 56 | --labeled-nav-top-margin: 0; 57 | } 58 | { 59 | --labeled-nav-top-margin: var(--header-height); 60 | } 61 | .is-translucent 62 | .mod-left-split 63 | .mod-top 64 | .workspace-tab-header-container 65 | .workspace-tab-header-container-inner { 66 | background-color: transparent; 67 | } 68 | .is-hidden-frameless:not(.is-fullscreen) 69 | .mod-left-split 70 | .workspace-tabs.mod-top-left-space 71 | .workspace-tab-header-container { 72 | padding-left: 0; 73 | } 74 | .mod-macos .mod-left-split .mod-top .workspace-tab-header-container:before, 75 | .mod-macos.is-hidden-frameless:not(.is-fullscreen) 76 | .mod-left-split 77 | .mod-top 78 | .workspace-tab-header-container:before { 79 | -webkit-app-region: drag; 80 | position: absolute; 81 | width: calc(100% - var(--divider-width)); 82 | height: calc(var(--header-height) - var(--tab-outline-width)); 83 | border-bottom: 0 solid var(--tab-outline-color); 84 | } 85 | .mod-macos.is-hidden-frameless:not(.is-fullscreen) 86 | .workspace-ribbon.mod-left:not(.is-collapsed) { 87 | border: none; 88 | --tab-outline-width: 0px; 89 | } 90 | .colorful-frame.is-hidden-frameless:not(.is-fullscreen) 91 | .mod-left-split 92 | .mod-top 93 | .workspace-tab-header-container:before, 94 | .mod-macos:not(.hider-ribbon) 95 | .mod-left-split 96 | .mod-top 97 | .workspace-tab-header-container:before, 98 | :not(.is-hidden-frameless) 99 | .mod-left-split 100 | .mod-top 101 | .workspace-tab-header-container:before { 102 | border-bottom: var(--tab-outline-width) solid var(--tab-outline-color); 103 | } 104 | .colorful-frame.is-hidden-frameless:not(.is-fullscreen) 105 | .workspace-ribbon.mod-left:not(.is-collapsed), 106 | .mod-macos:not(.hider-ribbon) .workspace-ribbon.mod-left:not(.is-collapsed), 107 | :not(.is-hidden-frameless) .workspace-ribbon.mod-left:not(.is-collapsed) { 108 | --tab-outline-width: 1px; 109 | } 110 | :not(.is-hidden-frameless) 111 | .mod-left-split 112 | .mod-top 113 | .workspace-tab-header-container:before { 114 | position: absolute; 115 | top: 0; 116 | content: " "; 117 | } 118 | .hider-ribbon.mod-macos.is-hidden-frameless:not(.is-fullscreen):not( 119 | .is-popout-window 120 | ) 121 | .mod-left-split:not(.is-sidedock-collapsed) 122 | .workspace-tabs.mod-top-left-space 123 | .workspace-tab-header-container { 124 | padding-left: 0; 125 | } 126 | :not(.is-grabbing):not(.is-fullscreen).is-hidden-frameless 127 | .mod-top 128 | .workspace-tab-header-container { 129 | -webkit-app-region: no-drag; 130 | } 131 | .mod-left-split .mod-top .workspace-tab-header-spacer { 132 | display: none; 133 | } 134 | .mod-left-split .mod-top .workspace-tab-header-inner-title { 135 | display: inline-block; 136 | font-weight: 500; 137 | font-size: var(--font-adaptive-smaller); 138 | } 139 | .mod-left-split .mod-top .workspace-tab-header-container { 140 | position: relative; 141 | flex-direction: column-reverse !important; 142 | height: auto; 143 | width: 100%; 144 | } 145 | 146 | .mod-left-split 147 | .mod-top 148 | .workspace-tab-header-container 149 | .sidebar-toggle-button.mod-left { 150 | position: absolute; 151 | justify-content: flex-end; 152 | padding-right: var(--size-4-2); 153 | top: 0; 154 | right: 0; 155 | } 156 | 157 | .mod-left-split 158 | .mod-top 159 | .workspace-tab-header-container 160 | .workspace-tab-header-container-inner { 161 | padding-top: var(--size-4-2); 162 | margin-top: var(--labeled-nav-top-margin); 163 | flex-direction: column !important; 164 | background-color: var(--background-secondary); 165 | } 166 | 167 | .mod-left-split 168 | .mod-top 169 | .workspace-tab-header-container 170 | .workspace-tab-container-inner { 171 | flex-grow: 1; 172 | gap: 0; 173 | padding: var(--size-4-2) var(--size-4-3); 174 | } 175 | .mod-left-split .mod-top .workspace-tab-header { 176 | --icon-color: var(--text-muted); 177 | --tab-text-color: var(--text-muted); 178 | --tab-text-color-focused: var(--text-muted); 179 | padding: 0; 180 | margin-bottom: 2px; 181 | border: none; 182 | height: auto; 183 | } 184 | 185 | .mod-left-split .mod-top .workspace-tab-header.is-active:not(:hover) { 186 | background-color: transparent; 187 | } 188 | .mod-left-split .mod-top .workspace-tab-header.is-active, 189 | .mod-left-split .mod-top .workspace-tab-header:hover { 190 | opacity: 1; 191 | --tab-text-color-active: var(--text-normal); 192 | --tab-text-color-focused: var(--text-normal); 193 | --tab-text-color-focused-active: var(--text-normal); 194 | --tab-text-color-focused-active-current: var(--text-normal); 195 | --icon-color: var(--text-normal); 196 | } 197 | 198 | .mod-left-split .mod-top .workspace-tab-header .workspace-tab-header-inner { 199 | gap: var(--size-2-3); 200 | padding: var(--size-4-1) var(--size-4-2); 201 | box-shadow: none; 202 | border: none; 203 | } 204 | 205 | .mod-left-split .mod-top .workspace-tab-header.has-active-menu:hover, 206 | .mod-left-split .mod-top .workspace-tab-header.is-active:hover { 207 | background-color: transparent; 208 | } 209 | 210 | .mod-left-split 211 | .mod-top 212 | .workspace-tab-header.is-active:hover 213 | .workspace-tab-header-inner, 214 | .mod-left-split 215 | .mod-top 216 | .workspace-tab-header:not(.is-active):hover 217 | .workspace-tab-header-inner { 218 | background-color: var(--nav-item-background-hover); 219 | } 220 | 221 | .mod-left-split 222 | .mod-top 223 | .workspace-tab-header.is-active 224 | .workspace-tab-header-inner-icon, 225 | .mod-left-split 226 | .mod-top 227 | .workspace-tab-header:hover 228 | .workspace-tab-header-inner-icon { 229 | color: var(--icon-color-active); 230 | } 231 | .mod-left-split .mod-top .workspace-tab-header-container { 232 | border: none; 233 | padding: 0; 234 | } 235 | body:not(.links-int-on) { 236 | --link-decoration: none; 237 | } 238 | body:not(.links-ext-on) { 239 | --link-external-decoration: none; 240 | } 241 | body:not(.sidebar-color) .mod-right-split { 242 | --background-secondary: var(--background-primary); 243 | } 244 | body:not(.sidebar-color) 245 | .mod-right-split 246 | :not(.mod-top) 247 | .workspace-tab-header-container { 248 | --tab-container-background: var(--background-primary); 249 | } 250 | ``` 251 | -------------------------------------------------------------------------------- /Snippets/Canvas styling - Gradient canvas cards.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Canvas styling - Gradient canvas cards 4 | 5 | --- 6 | 7 | - author:: kneecaps 8 | - source:: https://discord.com/channels/686053708261228577/702656734631821413/1095868229634773143 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/EtCIye8.png) 13 | 14 | ```css 15 | /* 16 | author: kneecaps 17 | source: https://discord.com/channels/686053708261228577/702656734631821413/1095868229634773143 18 | */ 19 | 20 | .canvas-node.is-themed.mod-canvas-color-1 21 | .canvas-node-content 22 | .markdown-preview-view 23 | .inline-title { 24 | color: rgb(var(--color-red-rgb)); 25 | } 26 | 27 | .canvas-node.is-themed.mod-canvas-color-2 28 | .canvas-node-content 29 | .markdown-preview-view 30 | .inline-title { 31 | color: rgb(var(--color-orange-rgb)); 32 | } 33 | 34 | .canvas-node.is-themed.mod-canvas-color-3 35 | .canvas-node-content 36 | .markdown-preview-view 37 | .inline-title { 38 | color: rgb(var(--color-yellow-rgb)); 39 | } 40 | 41 | .canvas-node.is-themed.mod-canvas-color-4 42 | .canvas-node-content 43 | .markdown-preview-view 44 | .inline-title { 45 | color: rgb(var(--color-green-rgb)); 46 | } 47 | 48 | .canvas-node.is-themed.mod-canvas-color-5 49 | .canvas-node-content 50 | .markdown-preview-view 51 | .inline-title { 52 | color: rgb(var(--color-blue-rgb)); 53 | } 54 | 55 | .canvas-node.is-themed.mod-canvas-color-6 56 | .canvas-node-content 57 | .markdown-preview-view 58 | .inline-title { 59 | color: rgb(var(--color-purple-rgb)); 60 | } 61 | 62 | .canvas-node.is-themed.mod-canvas-color-1 .canvas-node-container, 63 | .canvas-node.is-themed.mod-canvas-color-2 .canvas-node-container, 64 | .canvas-node.is-themed.mod-canvas-color-3 .canvas-node-container, 65 | .canvas-node.is-themed.mod-canvas-color-4 .canvas-node-container, 66 | .canvas-node.is-themed.mod-canvas-color-5 .canvas-node-container, 67 | .canvas-node.is-themed.mod-canvas-color-6 .canvas-node-container { 68 | border: 1px solid rgb(var(--canvas-color)); 69 | } 70 | 71 | .theme-light .canvas-node.is-themed.mod-canvas-color-1 .canvas-node-content { 72 | background-image: linear-gradient( 73 | 45deg, 74 | hsl(0deg 87% 79%) 0%, 75 | hsl(360deg 87% 78%) 21%, 76 | hsl(360deg 87% 77%) 30%, 77 | hsl(359deg 87% 75%) 39%, 78 | hsl(359deg 87% 74%) 46%, 79 | hsl(359deg 87% 73%) 54%, 80 | hsl(359deg 86% 72%) 61%, 81 | hsl(358deg 86% 71%) 69%, 82 | hsl(358deg 86% 70%) 79%, 83 | hsl(358deg 85% 68%) 100% 84 | ); 85 | } 86 | 87 | .theme-dark .canvas-node.is-themed.mod-canvas-color-1 .canvas-node-content { 88 | background-image: linear-gradient( 89 | 45deg, 90 | hsl(18deg 88% 66%) 0%, 91 | hsl(17deg 88% 65%) 21%, 92 | hsl(16deg 87% 63%) 30%, 93 | hsl(15deg 86% 62%) 39%, 94 | hsl(14deg 85% 60%) 46%, 95 | hsl(13deg 85% 59%) 54%, 96 | hsl(11deg 84% 57%) 61%, 97 | hsl(10deg 83% 56%) 69%, 98 | hsl(8deg 82% 55%) 79%, 99 | hsl(6deg 81% 54%) 100% 100 | ); 101 | } 102 | 103 | .theme-light .canvas-node.is-themed.mod-canvas-color-2 .canvas-node-content { 104 | background-image: linear-gradient( 105 | 45deg, 106 | hsl(16deg 100% 76%) 0%, 107 | hsl(20deg 100% 76%) 21%, 108 | hsl(23deg 100% 76%) 30%, 109 | hsl(27deg 100% 77%) 39%, 110 | hsl(30deg 100% 77%) 46%, 111 | hsl(34deg 100% 77%) 54%, 112 | hsl(37deg 100% 78%) 61%, 113 | hsl(41deg 100% 79%) 69%, 114 | hsl(45deg 100% 80%) 79%, 115 | hsl(49deg 100% 81%) 100% 116 | ); 117 | } 118 | 119 | .theme-dark .canvas-node.is-themed.mod-canvas-color-2 .canvas-node-content { 120 | background-image: linear-gradient( 121 | 45deg, 122 | hsl(23deg 92% 71%) 0%, 123 | hsl(21deg 93% 71%) 21%, 124 | hsl(18deg 93% 71%) 30%, 125 | hsl(16deg 93% 72%) 39%, 126 | hsl(14deg 93% 72%) 46%, 127 | hsl(11deg 93% 72%) 54%, 128 | hsl(9deg 92% 73%) 61%, 129 | hsl(6deg 91% 73%) 69%, 130 | hsl(3deg 89% 73%) 79%, 131 | hsl(0deg 87% 73%) 100% 132 | ); 133 | } 134 | 135 | .theme-light .canvas-node.is-themed.mod-canvas-color-3 .canvas-node-content { 136 | background-image: linear-gradient( 137 | 45deg, 138 | hsl(60deg 89% 72%) 0%, 139 | hsl(59deg 91% 73%) 21%, 140 | hsl(57deg 92% 74%) 30%, 141 | hsl(56deg 94% 76%) 39%, 142 | hsl(55deg 96% 77%) 46%, 143 | hsl(53deg 97% 78%) 54%, 144 | hsl(52deg 98% 79%) 61%, 145 | hsl(51deg 99% 80%) 69%, 146 | hsl(50deg 100% 80%) 79%, 147 | hsl(49deg 100% 81%) 100% 148 | ); 149 | } 150 | 151 | .theme-dark .canvas-node.is-themed.mod-canvas-color-3 .canvas-node-content { 152 | background-image: linear-gradient( 153 | 45deg, 154 | hsl(46deg 95% 56%) 0%, 155 | hsl(44deg 95% 55%) 21%, 156 | hsl(43deg 94% 54%) 30%, 157 | hsl(41deg 94% 53%) 39%, 158 | hsl(39deg 93% 53%) 46%, 159 | hsl(37deg 92% 53%) 54%, 160 | hsl(35deg 91% 52%) 61%, 161 | hsl(34deg 89% 52%) 69%, 162 | hsl(32deg 88% 52%) 79%, 163 | hsl(29deg 86% 52%) 100% 164 | ); 165 | } 166 | 167 | .theme-light .canvas-node.is-themed.mod-canvas-color-4 .canvas-node-content { 168 | background-image: linear-gradient( 169 | 45deg, 170 | hsl(99deg 75% 75%) 0%, 171 | hsl(103deg 75% 77%) 21%, 172 | hsl(108deg 75% 79%) 30%, 173 | hsl(113deg 76% 81%) 39%, 174 | hsl(119deg 76% 83%) 46%, 175 | hsl(124deg 77% 84%) 54%, 176 | hsl(129deg 79% 85%) 61%, 177 | hsl(133deg 80% 86%) 69%, 178 | hsl(137deg 81% 86%) 79%, 179 | hsl(141deg 81% 87%) 100% 180 | ); 181 | } 182 | 183 | .theme-dark .canvas-node.is-themed.mod-canvas-color-4 .canvas-node-content { 184 | background-image: linear-gradient( 185 | 45deg, 186 | hsl(145deg 84% 73%) 0%, 187 | hsl(145deg 78% 71%) 21%, 188 | hsl(146deg 74% 68%) 30%, 189 | hsl(146deg 70% 66%) 39%, 190 | hsl(146deg 67% 63%) 46%, 191 | hsl(147deg 64% 60%) 54%, 192 | hsl(148deg 61% 57%) 61%, 193 | hsl(148deg 60% 55%) 69%, 194 | hsl(149deg 58% 52%) 79%, 195 | hsl(150deg 61% 48%) 100% 196 | ); 197 | } 198 | 199 | .theme-light .canvas-node.is-themed.mod-canvas-color-5 .canvas-node-content { 200 | background-image: linear-gradient( 201 | 45deg, 202 | hsl(187deg 100% 89%) 0%, 203 | hsl(187deg 100% 87%) 21%, 204 | hsl(187deg 100% 85%) 30%, 205 | hsl(187deg 100% 83%) 39%, 206 | hsl(187deg 100% 81%) 46%, 207 | hsl(187deg 100% 79%) 54%, 208 | hsl(187deg 100% 77%) 61%, 209 | hsl(186deg 100% 75%) 69%, 210 | hsl(186deg 100% 72%) 79%, 211 | hsl(186deg 100% 69%) 100% 212 | ); 213 | } 214 | 215 | /* .theme-light .canvas-node.is-themed.mod-canvas-color-5 .canvas-node-content p{ 216 | color: white; 217 | } */ 218 | 219 | .theme-dark .canvas-node.is-themed.mod-canvas-color-1 .canvas-node-content p, 220 | .theme-dark .canvas-node.is-themed.mod-canvas-color-2 .canvas-node-content p, 221 | .theme-dark .canvas-node.is-themed.mod-canvas-color-3 .canvas-node-content p, 222 | .theme-dark .canvas-node.is-themed.mod-canvas-color-4 .canvas-node-content p, 223 | .theme-dark .canvas-node.is-themed.mod-canvas-color-5 .canvas-node-content p, 224 | .theme-dark .canvas-node.is-themed.mod-canvas-color-6 .canvas-node-content p { 225 | color: var(--text-on-accent); 226 | } 227 | 228 | .theme-dark .canvas-node.is-themed.mod-canvas-color-5 .canvas-node-content { 229 | background-image: linear-gradient( 230 | 45deg, 231 | hsl(210deg 90% 80%) 0%, 232 | hsl(211deg 91% 77%) 21%, 233 | hsl(212deg 92% 74%) 30%, 234 | hsl(212deg 93% 71%) 39%, 235 | hsl(213deg 93% 68%) 46%, 236 | hsl(213deg 93% 65%) 54%, 237 | hsl(213deg 92% 61%) 61%, 238 | hsl(213deg 91% 58%) 69%, 239 | hsl(213deg 90% 54%) 79%, 240 | hsl(212deg 93% 49%) 100% 241 | ); 242 | } 243 | 244 | .theme-light .canvas-node.is-themed.mod-canvas-color-6 .canvas-node-content { 245 | background-image: linear-gradient( 246 | 45deg, 247 | hsl(298deg 68% 90%) 0%, 248 | hsl(287deg 68% 89%) 21%, 249 | hsl(277deg 68% 89%) 30%, 250 | hsl(267deg 67% 88%) 39%, 251 | hsl(258deg 65% 87%) 46%, 252 | hsl(249deg 63% 87%) 54%, 253 | hsl(240deg 61% 86%) 61%, 254 | hsl(232deg 62% 83%) 69%, 255 | hsl(225deg 62% 81%) 79%, 256 | hsl(220deg 61% 79%) 100% 257 | ); 258 | } 259 | 260 | .theme-dark .canvas-node.is-themed.mod-canvas-color-6 .canvas-node-content { 261 | background-image: linear-gradient( 262 | 45deg, 263 | hsl(276deg 91% 79%) 0%, 264 | hsl(274deg 88% 77%) 21%, 265 | hsl(272deg 85% 75%) 30%, 266 | hsl(270deg 83% 74%) 39%, 267 | hsl(267deg 81% 72%) 46%, 268 | hsl(265deg 79% 71%) 54%, 269 | hsl(262deg 78% 69%) 61%, 270 | hsl(260deg 76% 68%) 69%, 271 | hsl(257deg 75% 66%) 79%, 272 | hsl(254deg 74% 65%) 100% 273 | ); 274 | } 275 | ``` 276 | -------------------------------------------------------------------------------- /Snippets/Callout styling - Gummy callout.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Callout styling - Gummy callout 4 | 5 | --- 6 | 7 | - author:: kneecaps 8 | - source:: https://discord.com/channels/686053708261228577/744933215063638183/1114979796250787890 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/uOW5VRg.png) 13 | 14 | ```css 15 | /* 16 | author: kneecaps 17 | source: https://discord.com/channels/686053708261228577/744933215063638183/1114979796250787890 18 | */ 19 | 20 | .callout[data-callout="abstract"], 21 | .callout[data-callout="warning"], 22 | .callout[data-callout="info"], 23 | .callout[data-callout="example"], 24 | .callout[data-callout="note"], 25 | .callout[data-callout="tip"], 26 | .callout[data-callout="success"], 27 | .callout[data-callout="question"], 28 | .callout[data-callout="failure"], 29 | .callout[data-callout="danger"], 30 | .callout[data-callout="bug"], 31 | .callout[data-callout="quote"] { 32 | color: var(--color-callout-text); 33 | } 34 | 35 | .theme-dark { 36 | --color-callout-red: #502626; 37 | --color-callout-blue: #263850; 38 | --color-callout-green: #265029; 39 | --color-callout-yellow: #4c5026; 40 | --color-callout-orange: #504126; 41 | --color-callout-teal: #264e50; 42 | --color-callout-grey: #3b3b3b; 43 | --color-callout-purple: #392650; 44 | 45 | --color-callout-border-red: #715050; 46 | --color-callout-border-blue: #516073; 47 | --color-callout-border-green: #507153; 48 | --color-callout-border-yellow: #6e7150; 49 | --color-callout-border-orange: #716550; 50 | --color-callout-border-teal: #507171; 51 | --color-callout-border-grey: #616161; 52 | --color-callout-border-purple: #472650; 53 | --color-callout-text: var(--text-on-accent); 54 | } 55 | 56 | .theme-light { 57 | --color-callout-red: #ffe0e0; 58 | --color-callout-blue: #def1ff; 59 | --color-callout-green: #e0ffe3; 60 | --color-callout-yellow: #ffffe0; 61 | --color-callout-orange: #fff2e0; 62 | --color-callout-teal: #e0feff; 63 | --color-callout-grey: #ededed; 64 | --color-callout-purple: #ede0ff; 65 | 66 | --color-callout-border-red: #e5c7c7; 67 | --color-callout-border-blue: #c7d8e5; 68 | --color-callout-border-green: #cce5c7; 69 | --color-callout-border-yellow: #e3e5c7; 70 | --color-callout-border-orange: #e5dbc7; 71 | --color-callout-border-teal: #c7e5e5; 72 | --color-callout-border-grey: #dbdbdb; 73 | --color-callout-border-purple: #d8c7e5; 74 | --color-callout-text: var(--text-normal); 75 | } 76 | 77 | .callout[data-callout="info"], 78 | .callout[data-callout="todo"] { 79 | border: 1px solid var(--color-callout-border-blue); 80 | background: var(--color-callout-blue); 81 | } 82 | 83 | .callout[data-callout="abstract"], 84 | .callout[data-callout="summary"], 85 | .callout[data-callout="tldr"] { 86 | border: 1px solid var(--color-callout-border-teal); 87 | background: var(--color-callout-teal); 88 | } 89 | 90 | .callout[data-callout="warning"], 91 | .callout[data-callout="caution"], 92 | .callout[data-callout="danger"] { 93 | border: 1px solid var(--color-callout-border-orange); 94 | background: var(--color-callout-orange); 95 | } 96 | 97 | .callout[data-callout="example"] { 98 | border: 1px solid var(--color-callout-border-purple); 99 | background: var(--color-callout-purple); 100 | } 101 | 102 | .callout[data-callout="note"] { 103 | border: 1px solid var(--color-callout-border-blue); 104 | background: var(--color-callout-blue); 105 | } 106 | 107 | .callout[data-callout="tip"], 108 | .callout[data-callout="hint"], 109 | .callout[data-callout="important"] { 110 | border: 1px solid var(--color-callout-border-teal); 111 | background: var(--color-callout-teal); 112 | } 113 | 114 | .callout[data-callout="question"], 115 | .callout[data-callout="help"], 116 | .callout[data-callout="faq"] { 117 | border: 1px solid var(--color-callout-border-yellow); 118 | background: var(--color-callout-yellow); 119 | } 120 | 121 | .callout[data-callout="danger"], 122 | .callout[data-callout="error"] { 123 | border: 1px solid var(--color-callout-border-red); 124 | background: var(--color-callout-red); 125 | } 126 | 127 | .callout[data-callout="failure"], 128 | .callout[data-callout="fail"], 129 | .callout[data-callout="missing"] { 130 | border: 1px solid var(--color-callout-border-red); 131 | background: var(--color-callout-red); 132 | } 133 | 134 | .callout[data-callout="bug"] { 135 | border: 1px solid var(--color-callout-border-red); 136 | background: var(--color-callout-red); 137 | } 138 | 139 | .callout[data-callout="quote"], 140 | .callout[data-callout="cite"] { 141 | border: 1px solid var(--color-callout-border-grey); 142 | background: var(--color-callout-grey); 143 | } 144 | 145 | .callout[data-callout="success"], 146 | .callout[data-callout="check"], 147 | .callout[data-callout="done"] { 148 | border: 1px solid var(--color-callout-border-green); 149 | background: var(--color-callout-green); 150 | } 151 | 152 | .callout { 153 | border-radius: 8px; 154 | transition: 700ms; 155 | } 156 | 157 | .callout:hover { 158 | transform: translateY(4px); 159 | } 160 | 161 | .callout-title-inner { 162 | color: var(--color-base-100); 163 | } 164 | 165 | .callout[data-callout="todo"] { 166 | border: 1px solid rgb(255, 204, 112); 167 | background: linear-gradient( 168 | 43deg, 169 | rgb(65, 88, 208) 0%, 170 | rgb(200, 80, 192) 46%, 171 | rgb(255, 204, 112) 100% 172 | ); 173 | } 174 | 175 | .callout[data-callout="tldr"] { 176 | border: 1px solid #07f49e; 177 | background: linear-gradient(43deg, #42047e 0%, #07f49e 100%); 178 | } 179 | 180 | .callout[data-callout="missing"] { 181 | border: 1px solid #ef745c; 182 | background: linear-gradient(43deg, #34073d 0%, #ef745c 100%); 183 | } 184 | 185 | .callout[data-callout="summary"] { 186 | border: 1px solid #ccb3d1; 187 | background: linear-gradient(43deg, #22052d 0%, #ccb3d1 100%); 188 | } 189 | 190 | .callout[data-callout="caution"] { 191 | border: 1px solid #557c93; 192 | background: linear-gradient(43deg, #08203e 0%, #557c93 100%); 193 | } 194 | 195 | .callout[data-callout="hint"] { 196 | border: 1px solid #a4c6b8; 197 | background: linear-gradient(43deg, #5e435d 0%, #a4c6b8 100%); 198 | } 199 | 200 | .callout[data-callout="help"], 201 | .callout[data-callout="faq"] { 202 | border: 1px solid #5d5d3c; 203 | background: linear-gradient(43deg, #3f3f42 0%, #5d5d3c 100%); 204 | } 205 | 206 | .callout[data-callout="error"] { 207 | border: 1px solid #751006; 208 | background: linear-gradient(43deg, #1f0021 0%, #751006 100%); 209 | } 210 | 211 | .callout[data-callout="fail"] { 212 | border: 1px solid #f4985a; 213 | background: linear-gradient(43deg, #12243f 0%, #f4985a 100%); 214 | } 215 | 216 | .callout[data-callout="important"] { 217 | border: 1px solid #f9bc2c; 218 | background: linear-gradient(43deg, #f74c06 0%, #f9bc2c 100%); 219 | } 220 | 221 | .callout[data-callout="cite"] { 222 | border: 1px solid #858e96; 223 | background: linear-gradient(43deg, #60696b 0%, #858e96 100%); 224 | } 225 | 226 | .callout[data-callout="check"], 227 | .callout[data-callout="done"] { 228 | border: 1px solid #99f2d1; 229 | background: linear-gradient(43deg, #1c3e35 0%, #99f2d1 100%); 230 | } 231 | 232 | .callout[data-callout="tldr"]:hover { 233 | box-shadow: -24px 24px 69px -3px rgba(66, 4, 126, 0.4), 24px -24px 69px -3px 234 | rgba(7, 244, 158, 0.1); 235 | } 236 | 237 | .callout[data-callout="caution"]:hover { 238 | box-shadow: -24px 24px 69px -3px rgba(52, 7, 61, 0.3), 24px -24px 69px -3px 239 | rgba(239, 116, 92, 0.3); 240 | } 241 | 242 | .callout[data-callout="todo"]:hover { 243 | box-shadow: -24px 24px 69px -3px rgba(84, 86, 206, 0.3), 0px 1px 69px -3px 244 | rgba(201, 88, 187, 0.3), 24px -24px 69px -3px rgba(250, 191, 120, 0.3); 245 | } 246 | 247 | .callout[data-callout="summary"]:hover { 248 | box-shadow: -24px 24px 69px -3px rgba(34, 5, 45, 0.3), 24px -24px 69px -3px 249 | rgba(239, 116, 92, 0.2); 250 | } 251 | 252 | .callout[data-callout="caution"]:hover { 253 | box-shadow: -24px 24px 69px -3px rgba(8, 32, 62, 0.3), 24px -24px 69px -3px 254 | rgba(85, 124, 147, 0.3); 255 | } 256 | 257 | .callout[data-callout="hint"]:hover, 258 | .callout[data-callout="important"]:hover { 259 | box-shadow: -24px 24px 69px -3px rgba(94, 67, 93, 0.3), 24px -24px 69px -3px 260 | rgba(164, 198, 184, 0.3); 261 | } 262 | 263 | .callout[data-callout="check"]:hover, 264 | .callout[data-callout="done"]:hover { 265 | box-shadow: -24px 24px 69px -3px rgba(28, 62, 53, 0.3), 24px -24px 69px -3px 266 | rgba(153, 242, 209, 0.3); 267 | } 268 | 269 | .callout[data-callout="help"]:hover, 270 | .callout[data-callout="faq"]:hover { 271 | box-shadow: -24px 24px 69px -3px rgba(63, 63, 66, 0.3), 24px -24px 69px -3px 272 | rgba(93, 93, 60, 0.3); 273 | } 274 | 275 | .callout[data-callout="fail"]:hover { 276 | box-shadow: -24px 24px 69px -3px rgba(18, 36, 63, 0.3), 24px -24px 69px -3px 277 | rgba(244, 152, 90, 0.3); 278 | } 279 | 280 | .callout[data-callout="error"]:hover { 281 | box-shadow: -24px 24px 69px -3px rgba(31, 0, 33, 0.3), 24px -24px 69px -3px 282 | rgba(117, 16, 6, 0.3); 283 | } 284 | 285 | .callout[data-callout="important"]:hover { 286 | box-shadow: -24px 24px 69px -3px rgba(249, 188, 44, 0.3), 24px -24px 69px -3px 287 | rgba(247, 76, 6, 0.3); 288 | } 289 | 290 | .callout[data-callout="cite"]:hover { 291 | box-shadow: -24px 24px 69px -3px rgba(96, 105, 107, 0.3), 24px -24px 69px -3px 292 | rgba(133, 142, 150, 0.3); 293 | } 294 | 295 | .callout[data-callout="tldr"]:hover, 296 | .callout[data-callout="caution"]:hover, 297 | .callout[data-callout="todo"]:hover, 298 | .callout[data-callout="summary"]:hover, 299 | .callout[data-callout="hint"]:hover, 300 | .callout[data-callout="important"]:hover, 301 | .callout[data-callout="check"]:hover, 302 | .callout[data-callout="done"]:hover, 303 | .callout[data-callout="help"]:hover, 304 | .callout[data-callout="faq"]:hover, 305 | .callout[data-callout="fail"]:hover, 306 | .callout[data-callout="error"]:hover, 307 | .callout[data-callout="important"]:hover, 308 | .callout[data-callout="cite"]:hover { 309 | border: 1px solid white; 310 | } 311 | 312 | .callout[data-callout="tldr"], 313 | .callout[data-callout="caution"], 314 | .callout[data-callout="todo"], 315 | .callout[data-callout="summary"], 316 | .callout[data-callout="hint"], 317 | .callout[data-callout="important"], 318 | .callout[data-callout="check"], 319 | .callout[data-callout="done"], 320 | .callout[data-callout="help"], 321 | .callout[data-callout="faq"], 322 | .callout[data-callout="fail"], 323 | .callout[data-callout="error"], 324 | .callout[data-callout="important"], 325 | .callout[data-callout="cite"] { 326 | color: white; 327 | } 328 | 329 | .callout[data-callout="tldr"] .callout-title-inner, 330 | .callout[data-callout="caution"] .callout-title-inner, 331 | .callout[data-callout="todo"] .callout-title-inner, 332 | .callout[data-callout="summary"] .callout-title-inner, 333 | .callout[data-callout="hint"] .callout-title-inner, 334 | .callout[data-callout="important"] .callout-title-inner, 335 | .callout[data-callout="check"] .callout-title-inner, 336 | .callout[data-callout="done"] .callout-title-inner, 337 | .callout[data-callout="help"] .callout-title-inner, 338 | .callout[data-callout="faq"] .callout-title-inner, 339 | .callout[data-callout="fail"] .callout-title-inner, 340 | .callout[data-callout="error"] .callout-title-inner, 341 | .callout[data-callout="important"] .callout-title-inner, 342 | .callout[data-callout="cite"] .callout-title-inner { 343 | color: white; 344 | } 345 | ``` 346 | -------------------------------------------------------------------------------- /Snippets/Kanban styling - Notion like Kanban board.md: -------------------------------------------------------------------------------- 1 | ↪[Collection](Collection.md) 2 | 3 | # Kanban styling - Notion like Kanban board 4 | 5 | --- 6 | 7 | - author:: Anubis 8 | - source:: https://github.com/AnubisNekhet/AnuPpuccin/blob/main/snippets/notion-cards.css 9 | 10 | --- 11 | 12 | cover:: ![](https://i.imgur.com/iQ1G46S.png) 13 | 14 | ```css 15 | /* AGPLv3 License 16 | Notion-Styled Kanban 17 | Author: AnubisNekhet 18 | Note: If you decide to implement it in your theme or redistribute it, please keep this comment (Especially for *certain* individuals who may try to rebrand it as their own :)) 19 | Support me: https://buymeacoffee.com/AnubisNekhet 20 | */ 21 | body.theme-light { 22 | --notion-kanban-card: var(--background-primary); 23 | --notion-kanban-card-hover: var(--background-primary-alt); 24 | --notion-kanban-darken: var(--background-primary); 25 | --notion-kanban-darken-hover: var(--background-primary-alt); 26 | } 27 | 28 | body.theme-dark { 29 | --notion-kanban-card: var(--color-base-30); 30 | --notion-kanban-card-hover: var(--color-base-35); 31 | --notion-kanban-darken: rgba(var(--ctp-crust, 0, 0, 0), 0.3); 32 | --notion-kanban-darken-hover: rgba(var(--ctp-crust, 0, 0, 0), 0.2); 33 | } 34 | 35 | body { 36 | --kanban-transition: 100ms ease-out 0s; 37 | } 38 | body .kanban-plugin__lane { 39 | background-color: transparent; 40 | border: none; 41 | border-radius: 0; 42 | } 43 | body .kanban-plugin__lane .kanban-plugin__lane-header-wrapper { 44 | border-bottom: none; 45 | } 46 | body 47 | .kanban-plugin__lane 48 | .kanban-plugin__lane-header-wrapper 49 | .kanban-plugin__lane-grip { 50 | color: var(--text-muted); 51 | } 52 | body 53 | .kanban-plugin__lane 54 | .kanban-plugin__lane-header-wrapper 55 | .kanban-plugin__lane-grip:hover { 56 | color: var(--text-normal); 57 | background-color: var(--background-modifier-hover); 58 | border-radius: var(--radius-s); 59 | } 60 | body 61 | .kanban-plugin__lane 62 | .kanban-plugin__lane-header-wrapper 63 | .kanban-plugin__lane-title { 64 | flex-grow: 0; 65 | width: auto; 66 | } 67 | body 68 | .kanban-plugin__lane 69 | .kanban-plugin__lane-header-wrapper 70 | .kanban-plugin__lane-title 71 | .kanban-plugin__lane-title-text { 72 | flex-grow: 0; 73 | } 74 | body 75 | .kanban-plugin__lane 76 | .kanban-plugin__lane-header-wrapper 77 | .kanban-plugin__lane-settings-button-wrapper { 78 | opacity: 0; 79 | transition: opacity var(--kanban-transition); 80 | } 81 | body 82 | .kanban-plugin__lane 83 | .kanban-plugin__lane-header-wrapper 84 | .kanban-plugin__lane-settings-button-wrapper 85 | .kanban-plugin__lane-settings-button 86 | .kanban-plugin__icon { 87 | rotate: 90deg; 88 | } 89 | body 90 | .kanban-plugin__lane:has(.kanban-plugin__placeholder:only-child):not( 91 | :has(.kanban-plugin__item) 92 | ) 93 | .kanban-plugin__item-button-wrapper { 94 | padding: 0; 95 | } 96 | body 97 | .kanban-plugin__lane:has(.kanban-plugin__placeholder:only-child):not( 98 | :has(.kanban-plugin__item) 99 | ) 100 | .kanban-plugin__item-button-wrapper 101 | .kanban-plugin__new-item-button { 102 | padding: 0 10px; 103 | } 104 | body 105 | .kanban-plugin__lane 106 | .kanban-plugin__lane-items.kanban-plugin__scroll-container.kanban-plugin__vertical { 107 | background-color: transparent; 108 | } 109 | body 110 | .kanban-plugin__lane 111 | .kanban-plugin__lane-items 112 | .kanban-plugin__placeholder { 113 | border: none; 114 | height: 5px; 115 | margin-bottom: 0; 116 | margin-top: 0; 117 | } 118 | body 119 | .kanban-plugin__lane 120 | .kanban-plugin__lane-items 121 | .kanban-plugin__item-wrapper 122 | .kanban-plugin__item { 123 | border: none; 124 | box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 125 | 4px; 126 | transition: background var(--kanban-transition) !important; 127 | } 128 | body 129 | .kanban-plugin__lane 130 | .kanban-plugin__lane-items 131 | .kanban-plugin__item-wrapper 132 | .kanban-plugin__item.is-complete 133 | .kanban-plugin__item-markdown { 134 | text-decoration: line-through; 135 | color: var(--text-faint); 136 | } 137 | body 138 | .kanban-plugin__lane 139 | .kanban-plugin__lane-items 140 | .kanban-plugin__item-wrapper 141 | .kanban-plugin__item 142 | .kanban-plugin__item-content-wrapper { 143 | background: var(--notion-kanban-card); 144 | transition: background var(--kanban-transition) !important; 145 | } 146 | body 147 | .kanban-plugin__lane 148 | .kanban-plugin__lane-items 149 | .kanban-plugin__item-wrapper 150 | .kanban-plugin__item 151 | .kanban-plugin__item-content-wrapper 152 | .kanban-plugin__item-title-wrapper { 153 | background: var(--notion-kanban-darken); 154 | transition: background var(--kanban-transition) !important; 155 | } 156 | body 157 | .kanban-plugin__lane 158 | .kanban-plugin__lane-items 159 | .kanban-plugin__item-wrapper 160 | .kanban-plugin__item 161 | .kanban-plugin__item-content-wrapper 162 | .kanban-plugin__item-title-wrapper 163 | .kanban-plugin__item-prefix-button-wrapper { 164 | margin-right: 6px; 165 | box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 166 | 4px; 167 | border-radius: 3px; 168 | background: var(--notion-kanban-card); 169 | transition: background var(--kanban-transition) !important; 170 | } 171 | body 172 | .kanban-plugin__lane 173 | .kanban-plugin__lane-items 174 | .kanban-plugin__item-wrapper 175 | .kanban-plugin__item 176 | .kanban-plugin__item-content-wrapper 177 | .kanban-plugin__item-title-wrapper 178 | .kanban-plugin__item-prefix-button-wrapper:hover { 179 | transition: background var(--kanban-transition) !important; 180 | background: var(--notion-kanban-card-hover); 181 | } 182 | body 183 | .kanban-plugin__lane 184 | .kanban-plugin__lane-items 185 | .kanban-plugin__item-wrapper 186 | .kanban-plugin__item 187 | .kanban-plugin__item-content-wrapper 188 | .kanban-plugin__item-title-wrapper 189 | .kanban-plugin__item-prefix-button-wrapper:hover 190 | .kanban-plugin__item-prefix-button { 191 | background-color: transparent; 192 | } 193 | body 194 | .kanban-plugin__lane 195 | .kanban-plugin__lane-items 196 | .kanban-plugin__item-wrapper 197 | .kanban-plugin__item 198 | .kanban-plugin__item-content-wrapper 199 | .kanban-plugin__item-title-wrapper 200 | .kanban-plugin__item-prefix-button-wrapper 201 | .kanban-plugin__item-prefix-button { 202 | left: 0; 203 | background-color: var(--background-primary); 204 | padding: var(--size-2-3); 205 | } 206 | body 207 | .kanban-plugin__lane 208 | .kanban-plugin__lane-items 209 | .kanban-plugin__item-wrapper 210 | .kanban-plugin__item 211 | .kanban-plugin__item-content-wrapper 212 | .kanban-plugin__item-postfix-button-wrapper { 213 | box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 214 | 4px; 215 | border-radius: 3px; 216 | background-color: var(--notion-kanban-card); 217 | opacity: 0; 218 | transition: opacity var(--kanban-transition), background-color var(--kanban-transition); 219 | } 220 | body 221 | .kanban-plugin__lane 222 | .kanban-plugin__lane-items 223 | .kanban-plugin__item-wrapper 224 | .kanban-plugin__item 225 | .kanban-plugin__item-content-wrapper 226 | .kanban-plugin__item-postfix-button-wrapper:hover { 227 | background-color: var(--notion-kanban-card-hover); 228 | transition: background-color var(--kanban-transition); 229 | } 230 | body 231 | .kanban-plugin__lane 232 | .kanban-plugin__lane-items 233 | .kanban-plugin__item-wrapper 234 | .kanban-plugin__item 235 | .kanban-plugin__item-content-wrapper 236 | .kanban-plugin__item-postfix-button-wrapper:hover 237 | .kanban-plugin__item-postfix-button { 238 | background-color: transparent; 239 | } 240 | body 241 | .kanban-plugin__lane 242 | .kanban-plugin__lane-items 243 | .kanban-plugin__item-wrapper 244 | .kanban-plugin__item 245 | .kanban-plugin__item-content-wrapper 246 | .kanban-plugin__item-postfix-button-wrapper 247 | .kanban-plugin__item-postfix-button { 248 | right: 0; 249 | padding: var(--size-2-3); 250 | background-color: var(--background-primary); 251 | } 252 | body 253 | .kanban-plugin__lane 254 | .kanban-plugin__lane-items 255 | .kanban-plugin__item-wrapper 256 | .kanban-plugin__item 257 | .kanban-plugin__item-content-wrapper 258 | .kanban-plugin__item-postfix-button-wrapper 259 | .kanban-plugin__item-postfix-button 260 | .kanban-plugin__icon { 261 | rotate: 90deg; 262 | } 263 | body 264 | .kanban-plugin__lane 265 | .kanban-plugin__lane-items 266 | .kanban-plugin__item-wrapper 267 | .kanban-plugin__item:hover { 268 | transition: background var(--kanban-transition) !important; 269 | } 270 | body 271 | .kanban-plugin__lane 272 | .kanban-plugin__lane-items 273 | .kanban-plugin__item-wrapper 274 | .kanban-plugin__item:hover 275 | .kanban-plugin__item-content-wrapper { 276 | transition: background var(--kanban-transition) !important; 277 | background-color: var(--notion-kanban-card-hover); 278 | } 279 | body 280 | .kanban-plugin__lane 281 | .kanban-plugin__lane-items 282 | .kanban-plugin__item-wrapper 283 | .kanban-plugin__item:hover 284 | .kanban-plugin__item-content-wrapper 285 | .kanban-plugin__item-title-wrapper { 286 | transition: background var(--kanban-transition) !important; 287 | background-color: var(--notion-kanban-darken-hover); 288 | } 289 | body 290 | .kanban-plugin__lane 291 | .kanban-plugin__lane-items 292 | .kanban-plugin__item-wrapper 293 | .kanban-plugin__item:hover 294 | .kanban-plugin__item-content-wrapper 295 | .kanban-plugin__item-postfix-button-wrapper { 296 | opacity: 1; 297 | transition: opacity var(--kanban-transition), background-color var(--kanban-transition); 298 | } 299 | body .kanban-plugin__lane .kanban-plugin__item-button-wrapper { 300 | border-top: none; 301 | padding: 0; 302 | } 303 | body 304 | .kanban-plugin__lane 305 | .kanban-plugin__item-button-wrapper 306 | .kanban-plugin__new-item-button { 307 | justify-content: flex-start; 308 | color: transparent; 309 | box-shadow: none; 310 | border: none; 311 | background: transparent; 312 | } 313 | body 314 | .kanban-plugin__lane 315 | .kanban-plugin__item-button-wrapper 316 | .kanban-plugin__new-item-button:hover { 317 | background: var(--background-modifier-hover); 318 | } 319 | body 320 | .kanban-plugin__lane 321 | .kanban-plugin__item-button-wrapper 322 | .kanban-plugin__new-item-button:hover 323 | .kanban-plugin__item-button-plus { 324 | color: var(--text-normal); 325 | } 326 | body 327 | .kanban-plugin__lane 328 | .kanban-plugin__item-button-wrapper 329 | .kanban-plugin__new-item-button 330 | .kanban-plugin__item-button-plus { 331 | color: var(--text-muted); 332 | } 333 | body 334 | .kanban-plugin__lane 335 | .kanban-plugin__item-button-wrapper 336 | .kanban-plugin__new-item-button 337 | .kanban-plugin__item-button-plus::after { 338 | content: " New"; 339 | } 340 | body .kanban-plugin__lane .kanban-plugin__item-form { 341 | border-top: none; 342 | } 343 | body 344 | .kanban-plugin__lane:hover 345 | .kanban-plugin__lane-header-wrapper 346 | .kanban-plugin__lane-grip { 347 | opacity: 1; 348 | transition: opacity var(--kanban-transition); 349 | } 350 | body 351 | .kanban-plugin__lane:hover 352 | .kanban-plugin__lane-header-wrapper 353 | .kanban-plugin__lane-settings-button-wrapper { 354 | opacity: 1; 355 | transition: opacity var(--kanban-transition); 356 | } 357 | body 358 | .kanban-plugin__drag-container 359 | .kanban-plugin__item-wrapper 360 | .kanban-plugin__item { 361 | border: none; 362 | box-shadow: rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 363 | 4px; 364 | } 365 | body .kanban-plugin__item-input { 366 | background-color: transparent; 367 | } 368 | ``` 369 | --------------------------------------------------------------------------------