├── .gitattributes ├── ARRL-Fork ├── ARLL_StyleSettings.gif ├── README.md └── obsidian-vii-adjustable-readable-line-length.css ├── CalloutAsides ├── CalloutAsides.css └── README.md ├── CalloutTypesetting ├── CalloutTypesetting.css ├── Demos │ ├── CallType_keep-height.gif │ ├── CallType_rtl.png │ ├── CallType_vertical-lr.png │ └── CallType_vertical-rl.gif ├── Examples │ ├── keep-height.md │ ├── rtl.md │ ├── vertical-lr.md │ └── vertical-rl.md └── README.md ├── ChassisCallouts ├── README.md └── chassis_callouts.css ├── LICENSE ├── OtherLittleThings ├── CodeBlockColors.css ├── LinkColors.css ├── README.md ├── TextSelectionColors.css └── ViewModeIcons.css ├── README.md ├── ScrollHeaders ├── Demo.gif ├── Example.md ├── README.md └── ScrollHeadings.css ├── TabsInObsidian ├── README.md ├── TabsInObsidian.css ├── TabsInObsidianDemo.gif ├── example.md └── legacy │ ├── TabsInObsidian-Legacy.css │ ├── TabsInObsidianDemo-Legacy.gif │ └── example-Legacy.md └── dv_devotee └── README.md /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /ARRL-Fork/ARLL_StyleSettings.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sailKiteV/Obsidian-Snippets-and-Demos/c3c531c1b09228a9d9a8c11edff08a14623fdc6d/ARRL-Fork/ARLL_StyleSettings.gif -------------------------------------------------------------------------------- /ARRL-Fork/README.md: -------------------------------------------------------------------------------- 1 | # Adjustable Readable Line Length in Obsidian with Style Settings 2 | This is a CSS [snippet](obsidian-vii-adjustable-readable-line-length.css) that will let you easily change the length used for the Readable Line Length Editor setting in Obsidian. You will need to have the [Style Settings](https://github.com/mgmeyers/obsidian-style-settings) plugin installed and enabled in your vault in order to change the setting in-app. The plugin can be found in the Community Plugins inside of Obsidian, or you can manually install if you wish. If you choose not to use Style Settings, you'll be able to manually adjust the `--read-line-length` property in the snippet instead. 3 | 4 | By default, this snippet uses pixels as its unit, but you can change that in the snippet by changing the line `format: px` to some other unit, such as `format: vw`, and changing the property declaration in `body {}` to use the same unit. You probably should change the default value from 700 to something else, too 😅. 5 | 6 | --- 7 | ## Demo 8 | ![Demo](ARLL_StyleSettings.gif) 9 | -------------------------------------------------------------------------------- /ARRL-Fork/obsidian-vii-adjustable-readable-line-length.css: -------------------------------------------------------------------------------- 1 | /* Changes the readable line length in Obsidian Notes. Tested in Obsidian v0.14.6 2 | See also: https://forum.obsidian.md/t/adjustable-readable-line-length/7564/6 3 | Note: For this the "readable line length" property in settings has to be enabled 4 | (as expected). 700px width is the application's default, adjust all numbers below. 5 | Pixel (or percentage) as a unit enables a width independent from the number of characters 6 | (good when adjusting zoom level / font size). For fixed amount of characters use rem 7 | Original snippet by https://gist.github.com/vii33 , modified by sailKite to use 8 | custom properties and enable Style Settings support*/ 9 | 10 | /* @settings 11 | 12 | name: Adjust Readable Line Length 13 | id: adj-read-line 14 | settings: 15 | - 16 | id: read-line-length 17 | title: Length 18 | type: variable-number 19 | description: Length in pixels. 20 | default: 700 21 | format: px 22 | 23 | */ 24 | 25 | body { 26 | --read-line-length: 700px; 27 | } 28 | 29 | /* Width in preview / read mode */ 30 | .markdown-preview-view.is-readable-line-width .markdown-preview-sizer, 31 | .markdown-source-view.is-readable-line-width .cm-content { 32 | max-width: var(--read-line-length); 33 | } 34 | 35 | /* Widths in editor mode */ 36 | .markdown-source-view.mod-cm6.is-readable-line-width.is-rtl .cm-contentContainer { 37 | max-width: var(--read-line-length); 38 | margin-left: auto; 39 | } 40 | 41 | .markdown-source-view.mod-cm6.is-readable-line-width:not(.is-rtl) .cm-contentContainer { 42 | max-width: var(--read-line-length); 43 | margin-right: auto; 44 | } 45 | 46 | .markdown-source-view.mod-cm6.is-line-wrap.is-readable-line-width .cm-line:not(.HyperMD-table-row) { 47 | max-width: var(--read-line-length); 48 | } 49 | 50 | .markdown-source-view.mod-cm6.is-line-wrap.is-readable-line-width .cm-content { 51 | max-width: var(--read-line-length); 52 | } -------------------------------------------------------------------------------- /CalloutAsides/CalloutAsides.css: -------------------------------------------------------------------------------- 1 | /* aside functionality as a custom callout 2 | use "askide" instead of "aside" due to compatiblity, e.g. 3 | 4 | > [!example|askide-r] something 5 | > 6 | > some content 7 | */ 8 | .callout[data-callout-metadata*="askide"] { 9 | /* change these values as desired */ 10 | --askide-width: 200px; 11 | --askide-offset: var(--size-4-4); 12 | 13 | /* leave anything that is here alone */ 14 | position: absolute; 15 | } 16 | :is(.markdown-source-view .cm-callout, .el-div):has(> .callout[data-callout-metadata*="askide"]) { 17 | position: relative; 18 | overflow: visible; 19 | contain: none !important; 20 | } 21 | .callout[data-callout-metadata*="askide-l"] { 22 | left: calc( -1 * (var(--askide-width) + var(--askide-offset))); 23 | right: calc( 100% + var(--askide-offset)); 24 | } 25 | .callout[data-callout-metadata*="askide-r"] { 26 | left: calc( 100% + var(--askide-offset)); 27 | right: calc( -1 * (var(--askide-width) + var(--askide-offset))); 28 | } 29 | @media (hover: hover) { 30 | .markdown-source-view.mod-cm6 .cm-embed-block:has(> div > [data-callout-metadata*="askide"]):hover { 31 | overflow: visible; 32 | } 33 | } 34 | 35 | body { 36 | --editor-wrap-callout-width: 30%; 37 | } 38 | .cm-callout:has(> div > .callout[data-callout-metadata*="editor-wrap"]) { 39 | width: var(--editor-wrap-callout-width); 40 | float: right; 41 | } 42 | .cm-callout:has(> div > .callout[data-callout-metadata*="editor-wrap-l"]) { 43 | float: left; 44 | } 45 | .markdown-source-view.mod-cm6 .cm-content .cm-callout:has(> div > .callout[data-callout-metadata*="askide"]) { 46 | contain: none !important; 47 | } 48 | -------------------------------------------------------------------------------- /CalloutAsides/README.md: -------------------------------------------------------------------------------- 1 | todo 2 | -------------------------------------------------------------------------------- /CalloutTypesetting/CalloutTypesetting.css: -------------------------------------------------------------------------------- 1 | /* --- callouts for directional text and other formatting --- */ 2 | /* @settings 3 | 4 | name: Callouts for Typesetting 5 | id: typeset-callouts 6 | settings: 7 | - 8 | id: vertical-callout-section 9 | title: Vertical Callouts 10 | type: heading 11 | level: 1 12 | description: Settings for the vertical callout formats, vertical-rl and vertical-lr. 13 | - 14 | id: vertical-callout-max-line-height 15 | title: Vertical Callout Max Line Height 16 | type: variable-number 17 | format: px 18 | description: The maximum height that a line in a vertical-mode callout should have, in pixels. 19 | default: 300 20 | - 21 | id: vertical-callout-title-flex-gap 22 | title: Flex Gap in Vertical Callout Titles 23 | type: variable-number 24 | format: px 25 | description: The size of vertical gaps in between elements of the title in a vertical-mode callout, in pixels. 26 | default: 5 27 | - 28 | id: vertical-callout-glyph-spacing 29 | title: Vertical Callout Glyph Spacing 30 | type: variable-number 31 | format: em 32 | description: Size of the vertical spacing between invididual glyphs in vertical-mode callouts, in em. 33 | default: 0.125 34 | - 35 | id: vertical-callout-vertical-padding 36 | Title: Vertical Callout Vertical Padding 37 | type: variable-number 38 | format: em 39 | description: Size of the vertical padding between content and the callout edge, in em. 40 | default: 1em; 41 | */ 42 | body { 43 | --vertical-callout-max-line-height: 300px; 44 | --vertical-callout-title-flex-gap: 5px; 45 | --vertical-callout-glyph-spacing: 0.125em; 46 | --vertical-callout-vertical-padding: 1em; 47 | } 48 | 49 | /* simple right-to-left */ 50 | div[data-callout-metadata~="rtl"] { 51 | text-align: right; 52 | direction: rtl; 53 | } 54 | 55 | /* simple left-to-right */ 56 | div[data-callout-metadata~="ltr"] { 57 | text-align: left; 58 | direction: ltr; 59 | } 60 | 61 | /* border correction for right-to-left */ 62 | div[data-callout-metadata~="rtl"], 63 | div[data-callout-metadata~="vertical-rl"] { 64 | border-right: 5px solid rgb(var(--callout-color)); 65 | border-left: none; 66 | } 67 | 68 | /* vertical writing mode, lines right-to-left */ 69 | div[data-callout-metadata~="vertical-rl"] { 70 | writing-mode: vertical-rl; 71 | border-left: 1em solid var(--background-secondary); 72 | } 73 | 74 | /* vertical writing mode, lines left-to-right */ 75 | div[data-callout-metadata~="vertical-lr"] { 76 | writing-mode: vertical-lr; 77 | border-right: 1em solid var(--background-secondary); 78 | } 79 | 80 | /* rules for both vertical modes */ 81 | div[data-callout-metadata~="vertical-rl"], 82 | div[data-callout-metadata~="vertical-lr"] { 83 | max-inline-size: var(--vertical-callout-max-line-height); 84 | letter-spacing: var(--vertical-callout-glyph-spacing); 85 | max-width: 100%; 86 | overflow: auto; 87 | } 88 | div[data-callout-metadata~="vertical-rl"] > .callout-title, 89 | div[data-callout-metadata~="vertical-lr"] > .callout-title { 90 | gap: var(--vertical-callout-title-flex-gap); 91 | } 92 | div[data-callout-metadata~="vertical-rl"] > .callout-content, 93 | div[data-callout-metadata~="vertical-lr"]:not([data-callout="hidden"]) > .callout-content { 94 | padding-top: var(--vertical-callout-vertical-padding) !important; 95 | padding-bottom: calc( var(--vertical-callout-vertical-padding) - 9px ) !important; 96 | padding-block-end: 0px; 97 | } 98 | div[data-callout-metadata~="vertical-rl"] > .callout-content > p:last-child, 99 | div[data-callout-metadata~="vertical-lr"] > .callout-content > p:last-child { 100 | margin-block-end: 0px; 101 | } 102 | 103 | /* keep height while collapsed */ 104 | div[data-callout-metadata~="keep-height"] { 105 | min-height: var(--vertical-callout-max-line-height); 106 | } 107 | div[data-callout-metadata~="keep-height"] > .callout-content { 108 | min-height: calc(var(--vertical-callout-max-line-height) - var(--vertical-callout-vertical-padding)); 109 | } 110 | 111 | /* hide content pseudo-padding when collapsed */ 112 | div.is-collapsed[data-callout-metadata~="vertical-rl"], 113 | div.is-collapsed[data-callout-metadata~="vertical-lr"] { 114 | border-block-end: none; 115 | } 116 | 117 | /* left-align vertical callout */ 118 | div[data-callout-metadata~="l-align"], 119 | .markdown-source-view.mod-cm6 div[data-callout-metadata~="l-align"] { 120 | margin-right: auto; 121 | } 122 | 123 | /* right-align vertical callout */ 124 | div[data-callout-metadata~="r-align"], 125 | .markdown-source-view.mod-cm6 div[data-callout-metadata~="r-align"] { 126 | margin-left: auto; 127 | } 128 | 129 | /* text orientation upright */ 130 | div[data-callout-metadata~="upright"] { 131 | text-orientation: upright; 132 | } 133 | 134 | /* full-width callout */ 135 | div[data-callout-metadata~="wide"]:not(.is-collapsed) { 136 | width: 100%; 137 | } 138 | 139 | /* rotate line */ 140 | div[data-callout-metadata~="sideways"] { 141 | text-orientation: sideways; 142 | } 143 | 144 | /* container-like callout, meant to have no visible styling */ 145 | div[data-callout="hidden"] { 146 | background: unset; 147 | border: unset; 148 | margin: unset; 149 | padding: unset; 150 | clear: both; 151 | overflow: hidden; 152 | } 153 | /* hide only title text */ 154 | div[data-callout-metadata~="empty-title"] > .callout-title > .callout-title-inner { 155 | font-size: 0px; 156 | } 157 | /* hide title for container-like callout */ 158 | div[data-callout-metadata~="no-title"] > .callout-title, 159 | div[data-callout="hidden"] > .callout-title { 160 | display: none; 161 | } -------------------------------------------------------------------------------- /CalloutTypesetting/Demos/CallType_keep-height.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sailKiteV/Obsidian-Snippets-and-Demos/c3c531c1b09228a9d9a8c11edff08a14623fdc6d/CalloutTypesetting/Demos/CallType_keep-height.gif -------------------------------------------------------------------------------- /CalloutTypesetting/Demos/CallType_rtl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sailKiteV/Obsidian-Snippets-and-Demos/c3c531c1b09228a9d9a8c11edff08a14623fdc6d/CalloutTypesetting/Demos/CallType_rtl.png -------------------------------------------------------------------------------- /CalloutTypesetting/Demos/CallType_vertical-lr.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sailKiteV/Obsidian-Snippets-and-Demos/c3c531c1b09228a9d9a8c11edff08a14623fdc6d/CalloutTypesetting/Demos/CallType_vertical-lr.png -------------------------------------------------------------------------------- /CalloutTypesetting/Demos/CallType_vertical-rl.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sailKiteV/Obsidian-Snippets-and-Demos/c3c531c1b09228a9d9a8c11edff08a14623fdc6d/CalloutTypesetting/Demos/CallType_vertical-rl.gif -------------------------------------------------------------------------------- /CalloutTypesetting/Examples/keep-height.md: -------------------------------------------------------------------------------- 1 | ``` 2 | > [!example|vertical-rl upright keep-height]+ 漢語 3 | “滚滚长江东逝水，浪花淘尽英雄。是非成败转头空，青山依旧在，几度夕阳红。白发渔樵江渚上，惯看秋月春风。一壶浊酒喜相逢，古今多少事，都付笑谈中。 4 | 是非成败转头空，青山依旧在，惯看秋月春风。一壶浊酒喜相逢，古今多少事，滚滚长江东逝水，浪花淘尽英雄。 几度夕阳红。白发渔樵江渚上，都付笑谈中...” 5 | ``` -------------------------------------------------------------------------------- /CalloutTypesetting/Examples/rtl.md: -------------------------------------------------------------------------------- 1 | ``` 2 | > [!quote|rtl] لكن لا بد أن أوضح لك أن كل 3 | > المغلوطة حول استنكار النشوة وتمجيد الألم نشأت بالفعل، وسأعرض لك التفاصيل لتكتشف حقيقة وأساس تلك السعادة البشرية، فلا أحد يرفض أو يكره أو يتجنب الشعور بالسعادة، ولكن بفضل هؤ. 4 | ``` -------------------------------------------------------------------------------- /CalloutTypesetting/Examples/vertical-lr.md: -------------------------------------------------------------------------------- 1 | ``` 2 | > [!example|vertical-lr no-title] 3 | > ᠪᠦᠬᠦ ᠠᠮᠢᠳᠤ ᠵᠦᠢᠯ ᠨᠢ ᠪᠠᠶᠢᠭᠠᠯ ᠤᠨ ᠥᠰᠦᠯᠲᠡ ᠶᠢ ᠴᠢᠯᠦᠭᠡᠲᠡᠢ᠂ ᠡᠷᠡᠭᠦᠯ ᠥᠰᠦᠯᠲᠡ ᠶᠤᠮ 4 | ᠠᠵᠢᠯᠴᠢᠨ ᠥᠪᠡᠷ ᠢᠶᠡᠨ ᠠᠷᠪᠠᠨ ᠠᠯᠢᠮ᠎ᠠ ᠭᠠᠷᠭᠠᠳᠠᠭ 5 | ᠡᠷᠬᠡ ᠳᠠᠰᠬᠠᠯ ᠶᠠᠮᠠᠷ ᠬᠡᠯᠪᠡᠷᠢ ᠭᠡᠵᠦ ᠪᠠᠶᠢᠬᠤ ᠶᠣᠰᠣᠲᠠᠢ 6 | ``` -------------------------------------------------------------------------------- /CalloutTypesetting/Examples/vertical-rl.md: -------------------------------------------------------------------------------- 1 | ``` 2 | > [!summary|vertical-rl upright]- こんばんは 3 | 　こんな夢を見た。 4 | 　腕組をして枕元に坐すわっていると、仰向あおむきに寝た女が、静かな声でもう死にますと云う。女は長い髪を枕に敷いて、輪郭りんかくの柔やわらかな瓜実うりざね顔がおをその中に横たえている。真白な頬の底に温かい血の色がほどよく差して、唇くちびるの色は無論赤い。とうてい死にそうには見えない。しかし女は静かな声で、もう死にますと判然はっきり云った。自分も確たしかにこれは死ぬなと思った。そこで、そうかね、もう死ぬのかね、と上から覗のぞき込むようにして聞いて見た。死にますとも、と云いながら、女はぱっちりと眼を開あけた。大きな潤うるおいのある眼で、長い睫まつげに包まれた中は、ただ一面に真黒であった。その真黒な眸ひとみの奥に、自分の姿が鮮あざやかに浮かんでいる。 5 | 　自分は透すき徹とおるほど深く見えるこの黒眼の色沢つやを眺めて、これでも死ぬのかと思った。それで、ねんごろに枕の傍そばへ口を付けて、死ぬんじゃなかろうね、大丈夫だろうね、とまた聞き返した。すると女は黒い眼を眠そうに![※(「目＋爭」、第3水準1-88-85)](https://www.aozora.gr.jp/gaiji/1-88/1-88-85.png)みはったまま、やっぱり静かな声で、でも、死ぬんですもの、仕方がないわと云った。 6 | 　じゃ、私わたしの顔が見えるかいと一心いっしんに聞くと、見えるかいって、そら、そこに、写ってるじゃありませんかと、にこりと笑って見せた。自分は黙って、顔を枕から離した。腕組をしながら、どうしても死ぬのかなと思った。 7 | 　しばらくして、女がまたこう云った。 8 | 「死んだら、埋うめて下さい。大きな真珠貝で穴を掘って。そうして天から落ちて来る星の破片かけを墓標はかじるしに置いて下さい。そうして墓の傍に待っていて下さい。また逢あいに来ますから」 9 | 　自分は、いつ逢いに来るかねと聞いた。 10 | 「日が出るでしょう。それから日が沈むでしょう。それからまた出るでしょう、そうしてまた沈むでしょう。――赤い日が東から西へ、東から西へと落ちて行くうちに、――あなた、待っていられますか」 11 | 　自分は黙って首肯うなずいた。女は静かな調子を一段張り上げて、 12 | 「百年待っていて下さい」と思い切った声で云った。 13 | 「百年、私の墓の傍そばに坐って待っていて下さい。きっと逢いに来ますから」 14 | 　自分はただ待っていると答えた。すると、黒い眸ひとみのなかに鮮あざやかに見えた自分の姿が、ぼうっと崩くずれて来た。静かな水が動いて写る影を乱したように、流れ出したと思ったら、女の眼がぱちりと閉じた。長い睫まつげの間から涙が頬へ垂れた。――もう死んでいた。 15 | 　自分はそれから庭へ下りて、真珠貝で穴を掘った。真珠貝は大きな滑なめらかな縁ふちの鋭するどい貝であった。土をすくうたびに、貝の裏に月の光が差してきらきらした。湿しめった土の匂においもした。穴はしばらくして掘れた。女をその中に入れた。そうして柔らかい土を、上からそっと掛けた。掛けるたびに真珠貝の裏に月の光が差した。 16 | 　それから星の破片かけの落ちたのを拾って来て、かろく土の上へ乗せた。星の破片は丸かった。長い間大空を落ちている間まに、角かどが取れて滑なめらかになったんだろうと思った。抱だき上あげて土の上へ置くうちに、自分の胸と手が少し暖くなった。 17 | 　自分は苔こけの上に坐った。これから百年の間こうして待っているんだなと考えながら、腕組をして、丸い墓石はかいしを眺めていた。そのうちに、女の云った通り日が東から出た。大きな赤い日であった。それがまた女の云った通り、やがて西へ落ちた。赤いまんまでのっと落ちて行った。一つと自分は勘定かんじょうした。 18 | 　しばらくするとまた唐紅からくれないの天道てんとうがのそりと上のぼって来た。そうして黙って沈んでしまった。二つとまた勘定した。 19 | 　自分はこう云う風に一つ二つと勘定して行くうちに、赤い日をいくつ見たか分らない。勘定しても、勘定しても、しつくせないほど赤い日が頭の上を通り越して行った。それでも百年がまだ来ない。しまいには、苔こけの生はえた丸い石を眺めて、自分は女に欺だまされたのではなかろうかと思い出した。 20 | 　すると石の下から斜はすに自分の方へ向いて青い茎くきが伸びて来た。見る間に長くなってちょうど自分の胸のあたりまで来て留まった。と思うと、すらりと揺ゆらぐ茎くきの頂いただきに、心持首を傾かたぶけていた細長い一輪の蕾つぼみが、ふっくらと弁はなびらを開いた。真白な百合ゆりが鼻の先で骨に徹こたえるほど匂った。そこへ遥はるかの上から、ぽたりと露つゆが落ちたので、花は自分の重みでふらふらと動いた。自分は首を前へ出して冷たい露の滴したたる、白い花弁はなびらに接吻せっぷんした。自分が百合から顔を離す拍子ひょうしに思わず、遠い空を見たら、暁あかつきの星がたった一つ瞬またたいていた。 21 | 「百年はもう来ていたんだな」とこの時始めて気がついた。 22 | ``` -------------------------------------------------------------------------------- /CalloutTypesetting/README.md: -------------------------------------------------------------------------------- 1 | # Callout Typesetting 2 | - [Introduction](#introduction) 3 | - [Modifiers](#modifiers) 4 | - [Style Settings](#style-settings) 5 | - [Demos](#demos) 6 | - [rtl](#rtl) 7 | - [vertical-lr (and no-title)](#vertical-lr-and-no-title) 8 | - [vertical-rl](#vertical-rl) 9 | - [keep-height](#keep-height) 10 | 11 | --- 12 | ## Introduction 13 | The [Callout Typesetting](CalloutTypesetting.css) snippet enables some composable inline formatting options that can be applied to your callouts. If you’re new to callouts, consider taking a peek at the documention for it on the [Obsidian website](https://help.obsidian.md/How+to/Use+callouts). The snippet uses a special attribute, `data-callout-metadata`, which gets its value from any string of text that you enter inside of a callout declaration that comes after a single pipe `|` character. 14 | 15 | For example, let’s say you have a `> [!quote]` declared, and you want to change its formatting so that it can display some right-to-left text, such as putting some Arabic or Hebrew text into your otherwise English (and therefore left-to-right) notes. To do this, you can change the callout declaration to `> [!quote|rtl]`. Now, your quote’s text should display as if it the page were written in right-to-left-mode! 16 | 17 | --- 18 | ## Modifiers 19 | Modifiers can be chained together, such as `> [!example|vertical-lr no-title]` in the second example below. These modifiers can be in any order. If a modifier of a given type is not included, the callout will try to use appropriate defaults. (Many defaults have not been given explicit modifiers to save on how much typing is needed to produce the desired callout formatting.) 20 | 21 | Modifiers: 22 | - Flow 23 | - **ltr**: Allows text to flow right-to-left. 24 | - **rtl**: Allows text to flow left-to-right. 25 | - **vertical-lr**: Allows vertically-oriented text whose lines flow left-to-right. 26 | - **vertical-rl**: Allows vertically-oriented text whose lines flow right-to-left. 27 | - Glyph Orientation 28 | - **upright**: Displays *all* glyphs in an upright orientation. 29 | - **sideways**: Displays *all* gyphs in a sideways orientation. 30 | - Title 31 | - **empty-title**: Hides only the title text of any callout. 32 | - **no-title**: Hides the entire title portion of any callout. 33 | - Display 34 | - **l-align**: Aligns the entire callout to the left. 35 | - **r-align**: Aligns the entire callout to the right. 36 | - Vertical Display 37 | - **wide**: Forces the callout to run the entire width of the page, or up to your Readable Line Length if that setting is enabled. 38 | - **keep-height**: Forces the callout to keep its vertical height when collapsed the same as its vertical height when expanded. 39 | 40 | --- 41 | ## Style Settings 42 | The snippet includes an implementation of a few adjustable values using the [Style Settings](https://github.com/mgmeyers/obsidian-style-settings) plugin by mgmeyers. The following settings (mostly for vertical callouts) are available: 43 | - **Max Line Height**: The maximum height in pixels of `vertical-lr` and `vertical-rl` callouts. Default 300px. 44 | - **Title Flex Gap**: The size of vertical gaps between elements contained in vertical callout titles, in pixels. Default 5px. 45 | - **Glyph Spacing**: The size of the vertical spacing between individual glyphs in vertical callouts, in [em](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#relative_length_units). Default 0.125em. 46 | - **Vertical Padding**: The size of the vertical padding between a vertical callout's edges and its content, in [em](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#relative_length_units). Default 1em. 47 | 48 | --- 49 | ## Demos 50 | Click any of the header links to see the associated written Markdown. 51 | ### |[rtl](Examples/rtl.md) 52 | ![rtl](Demos/CallType_rtl.png) 53 | 54 | ### |[vertical-lr](Examples/vertical-lr.md) (and no-title) 55 | ![vertical-lr](Demos/CallType_vertical-lr.png) 56 | 57 | ### |[vertical-rl](Examples/vertical-rl.md) 58 | ![vertical-rl](Demos/CallType_vertical-rl.gif) 59 | 60 | ### |[keep-height](Examples/keep-height.md) 61 | ![keep-height](Demos/CallType_keep-height.gif) 62 | -------------------------------------------------------------------------------- /ChassisCallouts/README.md: -------------------------------------------------------------------------------- 1 | todo -------------------------------------------------------------------------------- /ChassisCallouts/chassis_callouts.css: -------------------------------------------------------------------------------- 1 | /* 2 | Chassis Callouts to use as platforms for other styling 3 | author: sailKite 4 | url: https://github.com/sailKiteV/Obsidian-Snippets-and-Demos/tree/main/ChassisCallouts 5 | version: 1.2.3 6 | date: 2025-04-29 7 | recommended_installer: 1.5.8+ 8 | */ 9 | /* basic div-like callout as a platform for other styling: [!div] */ 10 | .callout:is( 11 | [data-callout="div"], [data-callout="div-m"], 12 | [data-callout-metadata~="div"], [data-callout-metadata~="div-m"] 13 | ) { 14 | margin: unset; 15 | border: unset; 16 | border-radius: unset; 17 | padding: unset; 18 | background: unset; 19 | mix-blend-mode: normal; 20 | 21 | & > .callout-title { 22 | display: none; 23 | } 24 | 25 | & > .callout-content { 26 | padding: 0; 27 | } 28 | } 29 | 30 | /* [!div-m] and [!example|div-m] has extra margin control */ 31 | .callout:is([data-callout="div-m"], [data-callout-metadata~="div-m"]) { 32 | margin-block: 1em; 33 | 34 | & > .callout-content { 35 | & > :first-child { margin-top: 0 !important; } 36 | & > :last-child { margin-bottom: 0 !important; } 37 | } 38 | } 39 | 40 | /* grid-ify any callout, add new ratios as needed: [!example|grid] */ 41 | .callout:is([data-callout-metadata*="grid"], [data-callout-metadata*="grid-m"]) { 42 | --col-gap: 8px; 43 | 44 | & > .callout-content { 45 | display: grid; 46 | grid-auto-flow: column; 47 | grid-auto-columns: 1fr; 48 | gap: var(--col-gap); 49 | 50 | /* add ratios like this */ 51 | & > [data-callout-metadata*="span-2"] { grid-column-end: span 2; } 52 | & > [data-callout-metadata*="span-3"] { grid-column-end: span 3; } 53 | & > [data-callout-metadata*="span-4"] { grid-column-end: span 4; } 54 | & > [data-callout-metadata*="span-5"] { grid-column-end: span 5; } 55 | & > [data-callout-metadata*="span-6"] { grid-column-end: span 6; } 56 | & > [data-callout-metadata*="span-7"] { grid-column-end: span 7; } 57 | & > [data-callout-metadata*="span-8"] { grid-column-end: span 8; } 58 | & > [data-callout-metadata*="span-9"] { grid-column-end: span 9; } 59 | 60 | & > .callout.is-collapsed { height: fit-content; } 61 | } 62 | 63 | &[data-callout-metadata*="grid-m"] { 64 | margin-block: var(--col-gap); 65 | } 66 | 67 | &[data-callout-metadata*="grid-m"] > .callout-content > * { 68 | margin-block: 0 !important; 69 | } 70 | } 71 | 72 | @media print { 73 | .print .markdown-preview-view .callout:is([data-callout-metadata*="grid"], [data-callout-metadata*="grid-m"]) > .callout-content { 74 | display: grid !important; 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 sailKiteV 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 | -------------------------------------------------------------------------------- /OtherLittleThings/CodeBlockColors.css: -------------------------------------------------------------------------------- 1 | /* --- Code Block Colors --- */ 2 | /* @settings 3 | 4 | name: Code Block Colors 5 | id: code-block-colors 6 | settings: 7 | - 8 | id: code-block-colors-fenced-text-toggle 9 | title: Fenced Block Text Editing View Toggle 10 | description: Force text in fenced code blocks to use the assigned text color while in Editing View. 11 | type: class-toggle 12 | - 13 | id: code-block-colors-text 14 | title: Text Color 15 | description: Color of text in code blocks and inline code. 16 | type: variable-color 17 | format: rgb 18 | opacity: true 19 | default: rgba(255, 165, 0, 1) 20 | - 21 | id: code-block-colors-background 22 | title: Background Color 23 | description: Color of background in code blocks and inline code. 24 | type: variable-color 25 | format: rgb 26 | opacity: true 27 | default: rgba(0, 0, 0, 0) 28 | - 29 | id: code-block-colors-fenced-border 30 | title: Border Color 31 | description: Color of border in fenced code blocks. 32 | type: variable-color 33 | format: rgb 34 | opacity: true 35 | default: rgba(0, 0, 0, 0) 36 | */ 37 | body { 38 | --code-block-colors-text: rgba(255, 165, 0, 1); 39 | --code-block-colors-background: rgba(0, 0, 0, 0); 40 | --code-block-colors-fenced-border: rgba(0, 0, 0, 0); 41 | } 42 | /* text */ 43 | .markdown-rendered code, 44 | .cm-s-obsidian span:is(.cm-inline-code, .cm-formatting-code-block), 45 | .code-block-colors-fenced-text-toggle .markdown-source-view.mod-cm6 .HyperMD-codeblock { 46 | color: var(--code-block-colors-text); 47 | background-color: transparent; 48 | } 49 | /* fenced block and inline background */ 50 | .markdown-rendered :is(pre, code), 51 | .cm-s-obsidian div.HyperMD-codeblock, 52 | .cm-s-obsidian span:is(.cm-inline-code, .cm-formatting-code-block), 53 | .cm-s-obsidian span.cm-inline-code:not(.cm-formatting):not(.cm-hmd-indented-code):not(.obsidian-search-match-highlight) { 54 | background-color: var(--code-block-colors-background); 55 | } 56 | /* code block borders */ 57 | .cm-s-obsidian div.HyperMD-codeblock-begin { 58 | border-top: 1px solid var(--code-block-colors-fenced-border); 59 | } 60 | .cm-s-obsidian div.HyperMD-codeblock-end { 61 | border-bottom: 1px solid var(--code-block-colors-fenced-border); 62 | } 63 | .cm-s-obsidian div.HyperMD-codeblock { 64 | border-left: 1px solid var(--code-block-colors-fenced-border); 65 | border-right: 1px solid var(--code-block-colors-fenced-border); 66 | } -------------------------------------------------------------------------------- /OtherLittleThings/LinkColors.css: -------------------------------------------------------------------------------- 1 | /* --- Link Colors --- */ 2 | /* @settings 3 | 4 | id: link-colors 5 | name: Link Colors 6 | settings: 7 | - 8 | id: link-colors-internal 9 | title: Internal Links 10 | type: variable-color 11 | opacity: true 12 | format: rgb 13 | alt-format: 14 | - 15 | id: link-colors-internal-hsl 16 | format: hsl 17 | default: 'rgba(127, 109, 242, 1.0)' 18 | description: Color of internal link text. 19 | - 20 | id: link-colors-unresolved 21 | title: Unresolved Links 22 | type: variable-color 23 | opacity: true 24 | format: rgb 25 | alt-format: 26 | - 27 | id: link-colors-unresolved-hsl 28 | format: hsl 29 | default: 'rgba(127, 109, 242, 0.5)' 30 | description: Color of unresolved link text. 31 | - 32 | id: link-colors-external 33 | title: External Links 34 | type: variable-color 35 | opacity: true 36 | format: rgb 37 | alt-format: 38 | - 39 | id: link-colors-external-hsl 40 | format: hsl 41 | default: 'rgba(127, 109, 242, 1.0)' 42 | description: Color of external link text. 43 | - 44 | id: link-colors-raw 45 | title: Raw Links 46 | type: variable-color 47 | opacity: true 48 | format: rgb 49 | alt-format: 50 | - 51 | id: link-colors-raw-hsl 52 | format: hsl 53 | default: 'rgba(153, 153, 153, 1.0)' 54 | description: Color of raw link text. (Raw links are links that do not have markdown syntax, such as "https://www.google.com" with no brackets.) 55 | - 56 | id: link-hover-menu-h 57 | title: Hovers 58 | type: heading 59 | level: 2 60 | - 61 | id: link-hover-type 62 | title: Hover Type 63 | type: class-select 64 | allowEmpty: false 65 | default: link-hover-use-filter 66 | options: 67 | - link-hover-use-filter 68 | - link-hover-use-colors 69 | - 70 | id: link-hover-filter-dark 71 | title: Hover Filter in Dark Theme 72 | type: variable-number 73 | default: 150 74 | format: percent 75 | description: Brightness percentage relative to 100% (unchanged). Default 150%. 76 | - 77 | id: link-hover-filter-light 78 | title: Hover Filter in Light Theme 79 | type: variable-number 80 | default: 66 81 | format: percent 82 | description: Brightness percentage relative to 100% (unchanged). Default 66%. 83 | - 84 | id: link-hover-internal-color 85 | title: Hover Color for Internal Links 86 | type: variable-themed-color 87 | format: rgb 88 | default-light: 'rgba(153, 153, 153, 1.0)' 89 | default-dark: 'rgba(153, 153, 153, 1.0)' 90 | description: Hover colors for internal links. 91 | - 92 | id: link-hover-unresolved-color 93 | title: Hover Color for Unresolved Links 94 | type: variable-themed-color 95 | format: rgb 96 | default-light: 'rgba(153, 153, 153, 1.0)' 97 | default-dark: 'rgba(153, 153, 153, 1.0)' 98 | description: Hover colors for unresolved links. 99 | - 100 | id: link-hover-external-color 101 | title: Hover Color for External Links 102 | type: variable-themed-color 103 | format: rgb 104 | default-light: 'rgba(153, 153, 153, 1.0)' 105 | default-dark: 'rgba(153, 153, 153, 1.0)' 106 | description: Hover colors for external links. 107 | */ 108 | body { 109 | --link-colors-internal: rgba(127, 109, 242, 1.0); 110 | --link-colors-unresolved: rgba(127, 109, 242, 0.5); 111 | --link-colors-external: rgba(127, 109, 242, 1.0); 112 | --link-colors-raw: rgba(153, 153, 153, 1.0); 113 | --link-colors-header: rgba(127, 109, 242, 1.0); 114 | --link-hover-filter-dark: 150%; 115 | --link-hover-filter-light: 66%; 116 | } 117 | body.theme-dark.css-settings-manager { 118 | --link-hover-internal-color: rgba(153, 153, 153, 1.0); 119 | --link-hover-unresolved-color: rgba(153, 153, 153, 1.0); 120 | --link-hover-external-color: rgba(153, 153, 153, 1.0); 121 | } 122 | body.theme-light.css-settings-manager { 123 | --link-hover-internal-color: rgba(153, 153, 153, 1.0); 124 | --link-hover-external-color: rgba(153, 153, 153, 1.0); 125 | } 126 | 127 | /* internal links */ 128 | a.internal-link, 129 | .cm-hmd-internal-link { 130 | color: var(--link-colors-internal) !important; 131 | } 132 | 133 | /* unresolved links */ 134 | .markdown-rendered a.internal-link.is-unresolved, 135 | .cm-hmd-internal-link > .is-unresolved { 136 | color: var(--link-colors-unresolved) !important; 137 | opacity: 1; 138 | } 139 | .markdown-source-view.mod-cm6 .is-unresolved { 140 | opacity: 1; 141 | } 142 | 143 | /* external links */ 144 | a.external-link, 145 | .cm-line > .cm-link:not(.cm-hmd-barelink, .cm-hmd-barelink + *) { 146 | color: var(--link-colors-external) !important; 147 | } 148 | 149 | /* raw links (links with no markdown syntax) */ 150 | .cm-url > .cm-underline, 151 | a.external-link:not([aria-label]) { 152 | color: var(--link-colors-raw) !important; 153 | } 154 | 155 | /* header and block links */ 156 | a.internal-link[data-href^="#"] { 157 | color: var(--link-colors-header) !important; 158 | } 159 | 160 | /* hover filter */ 161 | .theme-dark :is(a, .internal-link:is(*,.is-unresolved), .cm-s-obsidian :is(.cm-link,.cm-hmd-internal-link)):hover { 162 | filter: brightness(var(--link-hover-filter-dark)); 163 | text-decoration: none; 164 | } 165 | .theme-light :is(a, .internal-link:is(*,.is-unresolved), .cm-s-obsidian :is(.cm-link,.cm-hmd-internal-link)):hover { 166 | filter: brightness(var(--link-hover-filter-light)); 167 | text-decoration: none; 168 | } 169 | 170 | /* hover colors */ 171 | .link-hover-use-colors .cm-s-obsidian :is(a.internal-link, .cm-hmd-internal-link):hover { 172 | filter: none; 173 | color: var(--link-hover-internal-color) !important; 174 | } 175 | .link-hover-use-colors :is(.markdown-rendered a.internal-link.is-unresolved, .cm-hmd-internal-link > .is-unresolved):hover { 176 | filter: none; 177 | color: var(--link-hover-unresolved-color) !important; 178 | } 179 | .link-hover-use-colors :is(a.external-link, .cm-link:not(.cm-hmd-internal-link)):hover { 180 | filter: none; 181 | color: var(--link-hover-external-color) !important; 182 | } 183 | -------------------------------------------------------------------------------- /OtherLittleThings/README.md: -------------------------------------------------------------------------------- 1 | # Other Little Things 2 | A collection of snippets and things that don't quite need their own directory. Entries prefixed by an asterisk `*` have an implementation for the [Style Settings](https://github.com/mgmeyers/obsidian-style-settings) plugin by mgmeyers. Instructions for using these snippets may be found [below](#instructions). 3 | 4 | --- 5 | ## Snippets 6 | ### Colors 7 | - \**[Text Selection Colors](https://github.com/sailKiteV/Obsidian-Snippets-and-Demos/blob/master/OtherLittleThings/TextSelectionColors.css)*: Change the color of the text, background, and caret for selected text. Optionally increase the width of the caret. Credit to Murf#2728 on the [Obsidian Members Group](https://obsidian.md/community) Discord server for the original snippet; i just dressed it up a bit. 8 | - \**[Link Colors](https://github.com/sailKiteV/Obsidian-Snippets-and-Demos/blob/master/OtherLittleThings/LinkColors.css)*: Change the colors of the text for internal, unresolved, and external links. 9 | - \**[Code Block Colors](https://github.com/sailKiteV/Obsidian-Snippets-and-Demos/blob/master/OtherLittleThings/CodeBlockColors.css)*: Change the color of the text and background of code blocks and inline code, as well as the border of fenced code blocks. 10 | ### Icons 11 | - \**[View Mode Icons](https://github.com/sailKiteV/Obsidian-Snippets-and-Demos/blob/master/OtherLittleThings/ViewModeIcons.css)*: Swaps the default Editing and Reading View icons (to be indicative of *state* rather than an *action*). ~~Only has one Style Settings option right now, which is to toggle on a custom icon for Source Mode Editing View.~~ (Nevermind, this doesn't work and i can't imagine why i thought it would.) Icons cannot be changed with Style Settings (due to limitations of how `url()` works in CSS), but *can* be changed manually in the snippet itself. 12 | 13 | --- 14 | ## Instructions 15 | 1. Copy the snippet text into your own snippet, or download the snippet. 16 | 2. Place or make sure that the snippet is in your vault's snippets folder (which can be accessed from Obsidian's Appearance settings). 17 | a. Refresh your snippets if it does not appear. 18 | 3. Enable the snippet (also in Appearance settings). 19 | 4. Change properties as desired. 20 | a. If using Style Settings: Go to the "Plugin options" entry for Style Settings, and there should be a new section for the associated snippet. Modify settings as desired. 21 | b. Else: Change the assigned values for properties in the CSS snippet to be whatever you like. 22 | -------------------------------------------------------------------------------- /OtherLittleThings/TextSelectionColors.css: -------------------------------------------------------------------------------- 1 | /* --- Change Selected Text Color --- */ 2 | /* Based on snippet courtesy of Murf#2728 from OMG Discord */ 3 | /* @settings 4 | 5 | name: Text Selection Colors 6 | id: text-selection-colors 7 | settings: 8 | - 9 | id: text-selection-colors-info 10 | title: General Settings 11 | type: heading 12 | level: 1 13 | description: General settings for use across all modes. Future versions of this snippet may have more granular control for different Editor and View modes. 14 | - 15 | id: text-selection-colors-content 16 | title: Content Color (Text) 17 | type: variable-color 18 | opacity: true 19 | format: rgb 20 | alt-format: 21 | - 22 | id: text-selection-colors-content-hsl 23 | format: hsl 24 | default: 'rgba(153,153,153,1)' 25 | description: Color of the selected text itself. 26 | - 27 | id: text-selection-colors-background 28 | title: Background Color 29 | type: variable-color 30 | opacity: true 31 | format: rgb 32 | alt-format: 33 | - 34 | id: text-selection-colors-background-hsl 35 | format: hsl 36 | default: 'rgba(23,48,77,0.99)' 37 | description: Color of the background for selected text. 38 | - 39 | id: text-selection-colors-cursor 40 | title: Cursor Color 41 | type: variable-color 42 | opacity: true 43 | format: rgb 44 | alt-format: 45 | - 46 | id: text-selection-colors-cursor-hsl 47 | format: hsl 48 | default: 'rgba(255,255,255,1)' 49 | description: Color of the blinking cursor in Editing View. 50 | - 51 | id: text-selection-colors-cursor-width 52 | title: Cursor Width 53 | type: variable-number 54 | default: 1 55 | format: px 56 | description: Width in pixels of the cursor. 57 | */ 58 | body { 59 | --text-selection-colors-content: rgba(153,153,153,1); 60 | --text-selection-colors-background: rgba(23,48,77,0.99); 61 | --text-selection-colors-cursor: rgba(255,255,255,1); 62 | --text-selection-colors-cursor-width: 1px; 63 | } 64 | 65 | /* Cursor color */ 66 | .markdown-source-view.mod-cm6 div.cm-editor .cm-cursor { 67 | border-left-color: var(--text-selection-colors-cursor); 68 | border-width: var(--text-selection-colors-cursor-width); 69 | } 70 | .markdown-source-view.mod-cm6 div.cm-editor div { 71 | caret-color: var(--text-selection-colors-cursor); 72 | } 73 | 74 | /* Text selection background */ 75 | .markdown-source-view.mod-cm6 div.cm-editor ::selection { 76 | color: var(--text-selection-colors-content); 77 | background-color: var(--text-selection-colors-background); 78 | } 79 | .markdown-source-view.mod-cm6 .cm-editor .cm-selectionBackground { 80 | background: transparent; 81 | } -------------------------------------------------------------------------------- /OtherLittleThings/ViewModeIcons.css: -------------------------------------------------------------------------------- 1 | /* --- custom reading view and editing view pane icons --- */ 2 | /* @settings 3 | 4 | name: View Mode Icons 5 | id: view-mode-icons 6 | settings: 7 | - 8 | id: source-editing-custom-icon-toggle 9 | title: Source Mode Editing View Custom Icon Toggle 10 | description: Toggle on a custom icon for Source Mode Editing View. 11 | type: class-toggle 12 | */ 13 | /* reading view */ 14 | a.view-action[aria-label~="reading"] > svg { 15 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' class='reading-glasses' width='17' height='17'%3E%3Cpath fill='currentColor' stroke='currentColor' d='M21.1,18c-0.7,0-1.8,0.3-2.6,1s-1.4,1.5-2.3,2.9c-0.6,1.1-1.7,3.3-3.3,6.6S9.5,36,7.6,40.1c-3.7,8.2-7.3,16.1-7.3,16.1 c-0.4,0.6-0.4,1.3-0.1,1.9c0,0,0,0.1,0.1,0.1c0.1,0.4,0.2,0.7,0.4,0.9c0.4,0.4,0.8,0.7,1.1,0.8c0.6,0.3,1,0.5,1.3,0.6 c0.6,0.4,1,0.4,1,2.8c0,4.7,1.3,9.8,4.9,13.9c3.6,4,9.5,6.8,17.9,6.8c6.8,0,11.9-2.2,15-6.3c3.1-4,4.2-9.5,4.2-15.8v-4.9 c0.7-0.4,1.9-1.1,4-1.1s3.3,0.7,4,1.1V62c0,6.2,1.1,11.7,4.2,15.8c3.1,4,8.2,6.3,15,6.3c8.4,0,14.3-2.7,17.9-6.7 c3.6-4,4.9-9.1,4.9-13.7c0-2.4,0.5-2.6,1-2.9c0.3-0.2,0.6-0.3,1.3-0.6c0.3-0.1,0.7-0.4,1.1-0.8c0.3-0.3,0.5-0.8,0.6-1.3 c0.3-0.6,0.2-1.3-0.1-1.9c0,0-3.6-7.9-7.3-16.1c-1.9-4.1-3.8-8.2-5.4-11.6S84.6,23,84,21.9c-0.9-1.4-1.5-2.3-2.3-2.9 c-0.8-0.7-1.9-1-2.6-1c-0.9,0-1.9,0.4-2.6,1.1c-0.7,0.6-1.3,1.5-2.1,2.7c-1.2,2-2,3.1-2,3.1c-0.6,0.9-0.4,2.2,0.6,2.8 c0.9,0.6,2.2,0.4,2.8-0.6c0,0,0.8-1.3,2-3.3c0,0,0,0,0-0.1c0.6-0.9,1.1-1.5,1.3-1.7c0.2,0.2,0.8,0.8,1.5,1.9 c0.1,0.2,1.5,2.9,3.1,6.2c1.6,3.3,3.4,7.5,5.3,11.6c2.8,6,4.2,9.2,5.4,11.8c-0.6-0.1-1.1-0.3-1.8-0.4C88.4,52.5,82,52,72.9,52 C67,52,61,53.3,56.5,53.9c-0.9-0.7-3-1.9-6.4-1.9c-3.4,0-5.4,1.3-6.4,1.9C39.1,53.3,33.2,52,27.3,52c-9.1,0-15.5,0.5-19.7,1.2 c-0.7,0.1-1.2,0.3-1.8,0.4c1.2-2.7,2.6-5.8,5.4-11.8c1.9-4.1,3.8-8.3,5.3-11.6c1.6-3.3,2.9-5.9,3.1-6.2V24 c0.7-1.1,1.3-1.7,1.5-1.9c0.2,0.2,0.7,0.7,1.3,1.7c0,0,0,0,0,0.1c1.2,2,2,3.3,2,3.3c0.6,0.9,1.9,1.2,2.8,0.6s1.2-1.9,0.6-2.8 c0,0-0.8-1.2-2-3.1c-0.8-1.2-1.3-2-2.1-2.7C23,18.4,22,18,21.1,18L21.1,18z M27.3,56c4.9,0,10.2,1.1,14.8,1.8V62 c0,5.8-1.1,10.3-3.4,13.2c-2.3,3-5.8,4.8-11.8,4.8c-7.6,0-12.1-2.3-14.9-5.4c-2.8-3.1-3.9-7.3-3.9-11.2c0-2.8-1.2-4.6-2.4-5.6 c0.8-0.2,1.4-0.4,2.6-0.6C12.2,56.5,18.4,56,27.3,56z M72.9,56c8.9,0,15.1,0.5,19,1.2c1.3,0.2,1.9,0.5,2.7,0.7 c-1.3,1-2.5,2.8-2.5,5.8c0,3.8-1.1,7.9-3.9,11c-2.8,3.1-7.4,5.4-14.9,5.4c-6,0-9.5-1.8-11.8-4.7c-2.3-3-3.4-7.5-3.4-13.3v-4.2 C62.7,57.1,68,56,72.9,56L72.9,56z'%3E%3C/path%3E%3C/svg%3E"); 16 | -webkit-mask-repeat: no-repeat; 17 | background-color: currentColor; 18 | } 19 | /* editing view */ 20 | a.view-action[aria-label~="editing"] > svg { 21 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' class='pencil' width='17' height='17'%3E%3Cpath fill='currentColor' stroke='currentColor' d='M86.3,4c-2.5,0-5,1-6.9,2.9l-1.6,1.6l13.7,13.7c0,0,1.6-1.6,1.6-1.6c3.8-3.8,3.8-10,0-13.8C91.2,5,88.7,4,86.3,4z M74.7,12.1c-0.5,0.1-0.9,0.3-1.2,0.6L8.6,77.6c-0.3,0.2-0.5,0.5-0.6,0.9l-4,15c-0.2,0.7,0,1.4,0.5,1.9s1.2,0.7,1.9,0.5l15-4 c0.3-0.1,0.6-0.3,0.9-0.6l64.9-64.9c0.8-0.8,0.8-2,0-2.8c-0.8-0.8-2-0.8-2.8,0L19.9,88.2l-8.1-8.1l64.6-64.6 c0.6-0.6,0.8-1.5,0.4-2.2c-0.3-0.8-1.1-1.2-1.9-1.2C74.8,12.1,74.7,12.1,74.7,12.1z'%3E%3C/path%3E%3C/svg%3E"); 22 | -webkit-mask-repeat: no-repeat; 23 | background-color: currentColor; 24 | } 25 | /* source mode (requires Style Settings) */ 26 | .source-editing-custom-icon-toggle a.view-action[aria-label~="editing"] > svg { 27 | -webkit-mask-image: url("https://cdn-icons.flaticon.com/png/128/2775/premium/2775432.png?token=exp=1656355257~hmac=7deb30ada6ab7c62b9ef698c3a7c0cc6"); 28 | -webkit-mask-repeat: no-repeat; 29 | -webkit-mask-size: cover; 30 | background-color: currentColor; 31 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Obsidian-Snippets-and-Demos 2 | A collection of CSS snippets, Markdown files, and visual examples of fun little tricks and techniques for use in the [Obsidian.md](https://obsidian.md/) app. 3 | 4 | --- 5 | ## Contents 6 | - *[Tabs in Obsidian](https://github.com/sailKiteV/Obsidian-Snippets-and-Demos/tree/main/TabsInObsidian)*: a tab-style rendering scheme for use in your Obsidian notes, using mostly CSS and the [Meta Bind]() community plugin. 7 | - *[Chassis Callouts](https://github.com/sailKiteV/Obsidian-Snippets-and-Demos/tree/main/ChassisCallouts)*: some callouts to use as styling platforms for other things. Not yet documented in detail. 8 | - *[Callout Asides](https://github.com/sailKiteV/Obsidian-Snippets-and-Demos/tree/main/CalloutAsides)*: callouts metadata for placing content into the gutters of the note area when Readable Line Length is active. 9 | - *[Scroll Headers](https://github.com/sailKiteV/Obsidian-Snippets-and-Demos/tree/main/ScrollHeaders)*: render the header of a section of your notes as a floating element that scrolls with you. 10 | - *[Adjustable Readable Line Length (ARRL-Fork)](https://github.com/sailKiteV/Obsidian-Snippets-and-Demos/tree/main/ARRL-Fork)*: change the width of the content area when Readable Line Length is enabled in the Editor. Credit to [vii33](https://github.com/vii33) for the initial snippet. 11 | - *[Callout Typesetting](https://github.com/sailKiteV/Obsidian-Snippets-and-Demos/tree/main/CalloutTypesetting)*: format your callouts in various ways, including support for various directional layouts used by non-English languages. 12 | - *[Other Little Things](https://github.com/sailKiteV/Obsidian-Snippets-and-Demos/tree/main/OtherLittleThings)*: a catch-all for snippets and things that don't quite need their own directory. 13 | -------------------------------------------------------------------------------- /ScrollHeaders/Demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sailKiteV/Obsidian-Snippets-and-Demos/c3c531c1b09228a9d9a8c11edff08a14623fdc6d/ScrollHeaders/Demo.gif -------------------------------------------------------------------------------- /ScrollHeaders/Example.md: -------------------------------------------------------------------------------- 1 | ``` 2 | > [!header-holder] 3 | > ## but i’m a rather long string 4 | > Quisque quis dolor eget purus sodales ultricies eget vitae ipsum. Praesent sagittis nisi finibus felis accumsan, ac tincidunt lacus blandit. Pellentesque non nibh et urna suscipit convallis id eget est. In tempus, sem sit amet blandit viverra, ex enim porta nunc, eget varius eros lorem et purus. Vivamus quis viverra dui, eget lacinia nibh. Aenean sagittis enim velit, nec placerat erat posuere ut. Nunc sed dolor odio. Suspendisse turpis risus, laoreet in aliquet in, lacinia et magna. Maecenas eget pellentesque metus. Fusce rutrum lorem orci, vel pharetra neque tempor nec. Ut molestie mauris non ipsum consectetur tristique. Nullam tristique tellus vel urna dignissim, sit amet aliquam enim venenatis. Curabitur eu tincidunt turpis. Curabitur interdum id augue id rutrum. 5 | > 6 | > Nulla facilisis, justo posuere accumsan consectetur, ligula ligula ornare dolor, ac hendrerit ligula ligula a ligula. Proin non auctor dolor. Fusce pulvinar justo eros. Curabitur auctor molestie mollis. Phasellus sapien ex, pharetra ut bibendum quis, pretium in felis. In eleifend tempor bibendum. Aliquam ex odio, pellentesque non molestie eu, vehicula id dui. Duis quam felis, pharetra sed imperdiet eget, rutrum nec augue. Sed enim erat, pulvinar aliquet nisl et, rhoncus consectetur urna. In hac habitasse platea dictumst. Vivamus condimentum, neque vitae vehicula dictum, magna neque dignissim magna, vel dignissim dui ligula elementum nisi. Donec a dui gravida, volutpat augue eu, semper leo. Aliquam non justo rhoncus, pulvinar ex non, consectetur ligula. 7 | 8 | stuff after callout 9 | ``` 10 | -------------------------------------------------------------------------------- /ScrollHeaders/README.md: -------------------------------------------------------------------------------- 1 | # Scroll Header Callout 2 | 3 | ⚠ Warning, this WILL break header references to contained headers! This can be partially remedied by creating a block reference to the entire callout. Other behavior related to snippets or plugins may change as a result of using this snippet. Be prepared and always make good, retrievable backups. ⚠ 4 | 5 | This is a CSS [snippet](ScrollHeadings.css) that adds a custom callout to Obsidian. It will style any heading on the first line of the callout's content to appear as a title to the left of the main body. This snippet is intended for use with Readable Line Length enabled. Additionally, it is intended primarily for use with Source Mode, though some Live Preview functionality is supported. 6 | 7 | The snippet includes an implementation for the [Style Settings](https://github.com/mgmeyers/obsidian-style-settings) plugin. 8 | 9 | --- 10 | ## Demo 11 | A demo using the [Example.md](Example.md) file. 12 | ![Demo](Demo.gif) 13 | -------------------------------------------------------------------------------- /ScrollHeaders/ScrollHeadings.css: -------------------------------------------------------------------------------- 1 | /* --- a callout style for creating scrolling headers --- */ 2 | /* --- intended for use with readable line length on! --- */ 3 | /* @settings 4 | 5 | name: Scroll Header Callout 6 | id: scroll-header-callout 7 | settings: 8 | - 9 | id: options 10 | title: Options 11 | description: This snippet is intended for use with Readable Line Length enabled. 12 | type: heading 13 | level: 1 14 | - 15 | id: scroll-header-width 16 | title: Header Width 17 | type: variable-number 18 | format: px 19 | description: Width in pixels of the scroll header. The text will wrap if it would overflow this width. 20 | default: 100 21 | - 22 | id: scroll-header-callout-in-lp 23 | title: Enable in Live Preview 24 | type: class-toggle 25 | description: Enables scroll headers in Live Preview. This *will* change the behavior of affected callout code blocks, so be mindful that unexpected behavior may result. 26 | default: false 27 | 28 | */ 29 | /* custom properties for Style Settings */ 30 | body { 31 | --scroll-header-width: 100px; 32 | } 33 | /* initialize and de-style callout */ 34 | .callout[data-callout="scroll-header"] { 35 | background: unset; 36 | border: unset; 37 | margin: unset; 38 | padding: unset; 39 | position: relative; 40 | display: block; 41 | overflow: visible; 42 | } 43 | .callout[data-callout="scroll-header"] > .callout-title { 44 | display: none; 45 | } 46 | /* set up the content container */ 47 | .callout[data-callout="scroll-header"] > .callout-content { 48 | position: relative; 49 | height: 100%; 50 | padding: 0; 51 | overflow: visible; 52 | } 53 | /* commit warcrimes */ 54 | .callout[data-callout="scroll-header"] > .callout-content > :is(h1,h2,h3,h4,h5,h6):first-child { 55 | position: sticky; 56 | display: block; 57 | float: left; 58 | top: 0px; 59 | margin-top: 0; 60 | margin-bottom: 0; 61 | max-width: var(--scroll-header-width); 62 | margin-right: 0px; 63 | margin-left: calc( -1 * var(--scroll-header-width)); 64 | padding-right: 5px; 65 | line-height: 100%; 66 | } 67 | /* for Live Preview, this WILL change callout behavior */ 68 | .scroll-header-callout-in-lp .cm-callout.cm-embed-block { 69 | overflow: visible; 70 | display: contents !important; 71 | } 72 | /* header colors in Live Preview */ 73 | .scroll-header-callout-in-lp .cm-callout.cm-embed-block .callout-content > h1 { 74 | color: var(--text-title-h1); 75 | } 76 | .scroll-header-callout-in-lp .cm-callout.cm-embed-block .callout-content > h2 { 77 | color: var(--text-title-h2); 78 | } 79 | .scroll-header-callout-in-lp .cm-callout.cm-embed-block .callout-content > h3 { 80 | color: var(--text-title-h3); 81 | } 82 | .scroll-header-callout-in-lp .cm-callout.cm-embed-block .callout-content > h4 { 83 | color: var(--text-title-h4); 84 | } 85 | .scroll-header-callout-in-lp .cm-callout.cm-embed-block .callout-content > h5 { 86 | color: var(--text-title-h5); 87 | } 88 | .scroll-header-callout-in-lp .cm-callout.cm-embed-block .callout-content > h6 { 89 | color: var(--text-title-h6); 90 | } -------------------------------------------------------------------------------- /TabsInObsidian/README.md: -------------------------------------------------------------------------------- 1 | # Mostly-CSS Tabs in Obsidian 2 | 3 | This is an implementation for a tab-based rendering scheme in Obsidian.md, leaning heavily on capabilities offered by the native callouts feature of the app. The snippet is available in this repository or at [this link](TabsInObsidian.css). We use mostly CSS and a very minor amount of code for the [Meta Bind]() community plugin to get everything working properly. To get started, you'll want to be familiar with the [basic syntax of callouts](https://help.obsidian.md/How+to/Use+callouts), and Meta Bind's [select]() input fields. 4 | 5 | ![](TabsInObsidianDemo.gif) 6 | 7 | ## The Meta Bind 8 | 9 | For everything to function, we need a way to consistently manage the state of some kind of element in the DOM of our page, to then use as a hinge on which to apply CSS to our callouts and create the illusion of a functional tabbed component. The Meta Bind plugin provides a convenient way to do this. i will not go deep into a full explanation of Meta Bind, but i *will* explain a basic example, such as the below. 10 | 11 | ```md 12 | ~~~meta-bind 13 | INPUT[select( 14 | option(1, option 1), 15 | option(2, option 2), 16 | option(3, option 3), 17 | class(tabbed) 18 | )] 19 | ~~~ 20 | ``` 21 | 22 | Without getting too deep into what all this means, there are a few bits to be cognizant of: 23 | 24 | - As written, you should attempt to use a `select` input field in all situations, preferring the codeblock format as demonstrated above. (Yes, the triple tilde `~~~` is valid Markdown and will work in Obsidian; easy to copy and paste in Discord, too.) 25 | - All labels used in the tabs will be explicitly determined by the text passed in the second argument of each `option()` in the input field. 26 | - You must absolutely include the `class(tabbed)` argument, as this is what allows our snippet to only select the fields that we want to style and not affect others that you may use elsewhere in your notes with Meta Bind. 27 | 28 | ## The Callouts 29 | We will be using two types of callout to help us with structure, and a third type to hold our desired content: 30 | 31 | - `[!tabbed-box]` is the outermost callout and will serve as a container for any tabs and content that you want to have grouped together. 32 | - `[!div-m]` is a custom inner callout from the [Chassis Callouts](../ChassisCallouts/chassis_callouts.css) snippet that i use to remove most default styling and act as something of an arbitrary div, but you can use any inner callouts that you prefer. The actual content that you want to have exist for each virtual tab will be in the callout content of *these* (inner) callouts. 33 | 34 | The basic structure inside the actual note will look something like this: 35 | 36 | ```md 37 | >[!tabbed-box] 38 | > >[!div] 39 | > > 40 | > > $a^2$ plus 41 | > 42 | > > [!div] 43 | > > 44 | > > $b^2$ equals 45 | > 46 | > > [!div] 47 | > > 48 | > > $\frac{E}{m}$ 49 | ``` 50 | 51 | Overall, there's nothing too complex here from a callouts perspective, just a lot of nesting which can be somewhat uncomfortable sometimes. Protip: you can write the things you want to put in each layer of the callout *first*, and then select all of those things and use `Ctrl+P -> Insert callout` to wrap them up automatically. If you start at the deepest branches and work your way back up to the top, it's a pretty convenient way to get those fancy infoboxes and the like in working order. 52 | 53 | And that's really all that we need on the callout side. If you want a full demo to read through, check out [example.md](example.md). 54 | 55 | ## Putting it together 56 | 57 | Finally all we have to do is plaster these two blocks directly on top of each other: 58 | 59 | ```md 60 | ~~~meta-bind 61 | INPUT[select( 62 | option(1, option 1), 63 | option(2, option 2), 64 | option(3, option 3), 65 | class(tabbed) 66 | )] 67 | ~~~ 68 | >[!tabbed-box] 69 | > >[!div] 70 | > > 71 | > > $a^2$ plus 72 | > 73 | > > [!div] 74 | > > 75 | > > $b^2$ equals 76 | > 77 | > > [!div] 78 | > > 79 | > > $\frac{E}{m}$ 80 | ``` 81 | 82 | ## Live Preview 83 | 84 | i would like to warn ahead of time about a small incongruency that can sometimes pop up if you are particularly ambitious with using nested callouts. Normal use of the Markdown structure offered above will function perfectly well in Live Preview, and that is in fact one of many reasons that we use Meta Bind for this solution in the first place. *However*, if you put a tab setup *inside* of another callout in Live Preview, clicking on it automatically passes through the click event down to the editor, which means the *outer* callout will cease to be rendered along with everything inside of it. To my knowledge, this cannot be prevented in vanilla Obsidian, and as of Obsidian v1.5.12 and 2024-04-30, i am not aware of any plugins that can intervene and prevent it. In all other respects, things should work in both Live Preview and Reading View. -------------------------------------------------------------------------------- /TabsInObsidian/TabsInObsidian.css: -------------------------------------------------------------------------------- 1 | /* 2 | Meta Bind version of tabbed callouts 3 | author: sailKite 4 | url: https://github.com/sailKiteV/Obsidian-Snippets-and-Demos/tree/main/TabsInObsidian 5 | version: 0.5.2 6 | date: 2024-12-23 7 | recommended_obsidian: 1.7.7+ 8 | recommended_installer: 1.6.7+ 9 | dependencies: 10 | - https://obsidian.md/plugins?id=obsidian-meta-bind-plugin 11 | */ 12 | .mb-input-type-select.tabbed { 13 | display: flex; 14 | 15 | .mb-card:has(&) { 16 | border-radius: 5px 5px 0px 0px; 17 | margin: 0px; 18 | padding: 0px; 19 | border: 0px; 20 | } 21 | 22 | & .mb-select-input-element { 23 | margin: 0px; 24 | border: 0px; 25 | border-radius: 0px; 26 | flex: 1 0; 27 | min-width: 0px; 28 | word-break: break-all; 29 | text-align: center; 30 | border: var(--mb-border-width) solid var(--background-primary); 31 | border-bottom-color: var(--background-modifier-border); 32 | background-color: var(--background-primary); 33 | 34 | &.is-selected { 35 | pointer-events: none; 36 | } 37 | &:is(.is-selected, :not(:has(> .is-selected)) > :first-child) { 38 | border-color: var(--background-modifier-border); 39 | border-bottom-color: transparent; 40 | background-color: var(--background-secondary); 41 | } 42 | 43 | &:first-child { 44 | border-start-start-radius: 5px; 45 | } 46 | 47 | &:last-child { 48 | border-start-end-radius: 5px; 49 | } 50 | 51 | & > input[type="checkbox"] { 52 | display: none; 53 | } 54 | } 55 | 56 | [data-callout="infobox"] > .callout-content:has(.mb-input > * > &) { 57 | border-radius: 5px; 58 | } 59 | } 60 | 61 | :root:root .callout[data-callout="tabbed-box"] { 62 | --callout-content-padding: 4px; 63 | margin: 0px; 64 | padding: 0; 65 | border-radius: 0px 0px 5px 5px; 66 | background-color: transparent; 67 | mix-blend-mode: normal; 68 | 69 | & > .callout-title { 70 | display: none; 71 | } 72 | 73 | & > .callout-content { 74 | border: var(--background-modifier-border) solid var(--mb-border-width); 75 | border-top: none; 76 | } 77 | 78 | & > .callout-content > * { 79 | display: none; 80 | } 81 | } 82 | 83 | 84 | :has(.tabbed.mb-input-type-select):not(:has(.tabbed.mb-input-type-select > .is-selected)) + .callout[data-callout="tabbed-box"] > .callout-content > :nth-child(1) 85 | , :has(.tabbed.mb-input-type-select > :nth-child(1).is-selected) + .callout[data-callout="tabbed-box"] > .callout-content > :nth-child(1) 86 | , :has(.tabbed.mb-input-type-select > :nth-child(2).is-selected) + .callout[data-callout="tabbed-box"] > .callout-content > :nth-child(2) 87 | , :has(.tabbed.mb-input-type-select > :nth-child(3).is-selected) + .callout[data-callout="tabbed-box"] > .callout-content > :nth-child(3) 88 | , :has(.tabbed.mb-input-type-select > :nth-child(4).is-selected) + .callout[data-callout="tabbed-box"] > .callout-content > :nth-child(4) 89 | , :has(.tabbed.mb-input-type-select > :nth-child(5).is-selected) + .callout[data-callout="tabbed-box"] > .callout-content > :nth-child(5) 90 | , :has(.tabbed.mb-input-type-select > :nth-child(6).is-selected) + .callout[data-callout="tabbed-box"] > .callout-content > :nth-child(6) 91 | , :has(.tabbed.mb-input-type-select > :nth-child(7).is-selected) + .callout[data-callout="tabbed-box"] > .callout-content > :nth-child(7) 92 | , :has(.tabbed.mb-input-type-select > :nth-child(8).is-selected) + .callout[data-callout="tabbed-box"] > .callout-content > :nth-child(8) 93 | 94 | , :has(.tabbed.mb-input-type-select):not(:has(.tabbed.mb-input-type-select > .is-selected)) + .cm-callout > * > .callout[data-callout="tabbed-box"] > .callout-content > :nth-child(1) 95 | , :has(.tabbed.mb-input-type-select > :nth-child(1).is-selected) + .cm-callout > * > .callout[data-callout="tabbed-box"] > .callout-content > :nth-child(1) 96 | , :has(.tabbed.mb-input-type-select > :nth-child(2).is-selected) + .cm-callout > * > .callout[data-callout="tabbed-box"] > .callout-content > :nth-child(2) 97 | , :has(.tabbed.mb-input-type-select > :nth-child(3).is-selected) + .cm-callout > * > .callout[data-callout="tabbed-box"] > .callout-content > :nth-child(3) 98 | , :has(.tabbed.mb-input-type-select > :nth-child(4).is-selected) + .cm-callout > * > .callout[data-callout="tabbed-box"] > .callout-content > :nth-child(4) 99 | , :has(.tabbed.mb-input-type-select > :nth-child(5).is-selected) + .cm-callout > * > .callout[data-callout="tabbed-box"] > .callout-content > :nth-child(5) 100 | , :has(.tabbed.mb-input-type-select > :nth-child(6).is-selected) + .cm-callout > * > .callout[data-callout="tabbed-box"] > .callout-content > :nth-child(6) 101 | , :has(.tabbed.mb-input-type-select > :nth-child(7).is-selected) + .cm-callout > * > .callout[data-callout="tabbed-box"] > .callout-content > :nth-child(7) 102 | , :has(.tabbed.mb-input-type-select > :nth-child(8).is-selected) + .cm-callout > * > .callout[data-callout="tabbed-box"] > .callout-content > :nth-child(8) 103 | 104 | , :has(.tabbed.mb-input-type-select):not(:has(.tabbed.mb-input-type-select > .is-selected)) + .el-div > .callout[data-callout="tabbed-box"] > .callout-content > :nth-child(1) 105 | , :has(.tabbed.mb-input-type-select > :nth-child(1).is-selected) + .el-div > .callout[data-callout="tabbed-box"] > .callout-content > :nth-child(1) 106 | , :has(.tabbed.mb-input-type-select > :nth-child(2).is-selected) + .el-div > .callout[data-callout="tabbed-box"] > .callout-content > :nth-child(2) 107 | , :has(.tabbed.mb-input-type-select > :nth-child(3).is-selected) + .el-div > .callout[data-callout="tabbed-box"] > .callout-content > :nth-child(3) 108 | , :has(.tabbed.mb-input-type-select > :nth-child(4).is-selected) + .el-div > .callout[data-callout="tabbed-box"] > .callout-content > :nth-child(4) 109 | , :has(.tabbed.mb-input-type-select > :nth-child(5).is-selected) + .el-div > .callout[data-callout="tabbed-box"] > .callout-content > :nth-child(5) 110 | , :has(.tabbed.mb-input-type-select > :nth-child(6).is-selected) + .el-div > .callout[data-callout="tabbed-box"] > .callout-content > :nth-child(6) 111 | , :has(.tabbed.mb-input-type-select > :nth-child(7).is-selected) + .el-div > .callout[data-callout="tabbed-box"] > .callout-content > :nth-child(7) 112 | , :has(.tabbed.mb-input-type-select > :nth-child(8).is-selected) + .el-div > .callout[data-callout="tabbed-box"] > .callout-content > :nth-child(8) { 113 | display: block; 114 | } 115 | -------------------------------------------------------------------------------- /TabsInObsidian/TabsInObsidianDemo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sailKiteV/Obsidian-Snippets-and-Demos/c3c531c1b09228a9d9a8c11edff08a14623fdc6d/TabsInObsidian/TabsInObsidianDemo.gif -------------------------------------------------------------------------------- /TabsInObsidian/example.md: -------------------------------------------------------------------------------- 1 | ~~~meta-bind 2 | INPUT[select( 3 | option(1, option 1), 4 | option(2, option 2), 5 | option(3, option 3), 6 | class(tabbed) 7 | )] 8 | ~~~ 9 | >[!tabbed-box] 10 | > >[!div-m] 11 | > > $a^2$ plus 12 | > 13 | > > [!div-m] 14 | > > $b^2$ equals 15 | > 16 | > > [!div-m] 17 | > > $\frac{E}{m}$ -------------------------------------------------------------------------------- /TabsInObsidian/legacy/TabsInObsidian-Legacy.css: -------------------------------------------------------------------------------- 1 | /* --- Attempted Tab Implementation Through Callouts --- */ 2 | /* initial attribute setup */ 3 | div[data-callout="tabbed-box"], 4 | div[data-callout="tabs"], 5 | div[data-callout="tab-content"] { background: unset; border: unset; margin: unset; padding: unset; clear: both; overflow: hidden; } 6 | 7 | div[data-callout="tabbed-box"].callout > .callout-title, 8 | div[data-callout="tabs"].callout > .callout-title, 9 | div[data-callout="tab-content"] > .callout-title { display: none; } 10 | 11 | div[data-callout="tabbed-box"] > .callout-content, 12 | div[data-callout="tabs"] > .callout-content, 13 | div[data-callout="tab-content"] > .callout-content { 14 | border: none !important; 15 | } 16 | 17 | /* fix margin in Live Preview Edit Mode */ 18 | .markdown-source-view.mod-cm6 .callout:is(div[data-callout="tabbed-box"], div[data-callout="tabs"], div[data-callout="tab-content"]) { 19 | margin: 0px; 20 | } 21 | 22 | /* baseline label style */ 23 | div[data-callout="tabbed-box"] label { 24 | background: var(--background-primary); 25 | padding: 10px; 26 | top: 10px; 27 | margin-left: -1px; 28 | left: 0px; 29 | } 30 | 31 | /* "default" and checked label style */ 32 | /*[type=radio]:is(:checked, [checked]) + label*/ 33 | [type=radio][id$="1"]:is(:checked, [checked]) ~ label:nth-of-type(1), 34 | [type=radio][id$="2"]:is(:checked, [checked]) ~ label:nth-of-type(2), 35 | [type=radio][id$="3"]:is(:checked, [checked]) ~ label:nth-of-type(3), 36 | [type=radio][id$="4"]:is(:checked, [checked]) ~ label:nth-of-type(4), 37 | [type=radio][id$="5"]:is(:checked, [checked]) ~ label:nth-of-type(5), 38 | [type=radio][id$="6"]:is(:checked, [checked]) ~ label:nth-of-type(6), 39 | label:first-of-type:not(input:is(:checked, [checked]) ~ label) { 40 | background: var(--background-active-tab); 41 | z-index: 2; 42 | } 43 | 44 | /* hide radio buttons */ 45 | div[data-callout="tabbed-box"] > .callout-content > [type="radio"] { 46 | display: none; 47 | } 48 | 49 | div[data-callout="tabbed-box"] > .callout-content { 50 | --background-active-tab: #222229; 51 | padding: 0; 52 | padding-top: 5px; 53 | } 54 | 55 | div[data-callout="tabs"] { 56 | padding-top: 5px; 57 | } 58 | 59 | div[data-callout="tabs"] > .callout-content { 60 | display: grid; 61 | grid-template-columns: 1fr; 62 | padding: 0; 63 | } 64 | 65 | /* stack content areas in grid */ 66 | div[data-callout="tab-content"] { 67 | grid-column-start: 1; 68 | grid-column-end: 1; 69 | grid-row: 1; 70 | } 71 | 72 | /* hide inactive content */ 73 | div[data-callout="tab-content"] { 74 | z-index: 1; 75 | display: none; 76 | } 77 | 78 | div[data-callout="tab-content"] > .callout-content { 79 | background-color: var(--background-active-tab); 80 | } 81 | 82 | div[data-callout="tab-content"] > .callout-content > p:nth-child(1), 83 | div[data-callout="tab-content"] > .callout-content > table:nth-child(1) { 84 | margin-top: 10px; 85 | } 86 | 87 | /* ultra ugly list of label-to-active-tab relations */ 88 | input[type=radio]:last-of-type:not( input[type=radio]:checked ~ input[type=radio], :checked, [checked] ) ~ div[data-callout="tabs"] > .callout-content div[data-callout="tab-content"]:nth-of-type(1), 89 | div[data-callout="tabbed-box"] > .callout-content > [type=radio][id$="1"]:is(:checked, [checked]) ~ div[data-callout="tabs"] > .callout-content div[data-callout="tab-content"]:nth-of-type(1) { 90 | z-index: 2; 91 | display: block; 92 | } 93 | div[data-callout="tabbed-box"] > .callout-content > [type=radio][id$="2"]:is(:checked, [checked]) ~ div[data-callout="tabs"] > .callout-content div[data-callout="tab-content"]:nth-of-type(2) { 94 | z-index: 2; 95 | display: block; 96 | } 97 | div[data-callout="tabbed-box"] > .callout-content > [type=radio][id$="3"]:is(:checked, [checked]) ~ div[data-callout="tabs"] > .callout-content div[data-callout="tab-content"]:nth-of-type(3) { 98 | z-index: 2; 99 | display: block; 100 | } 101 | div[data-callout="tabbed-box"] > .callout-content > [type=radio][id$="4"]:is(:checked, [checked]) ~ div[data-callout="tabs"] > .callout-content div[data-callout="tab-content"]:nth-of-type(4) { 102 | z-index: 2; 103 | display: block; 104 | } 105 | div[data-callout="tabbed-box"] > .callout-content > [type=radio][id$="5"]:is(:checked, [checked]) ~ div[data-callout="tabs"] > .callout-content div[data-callout="tab-content"]:nth-of-type(5) { 106 | z-index: 2; 107 | display: block; 108 | } 109 | div[data-callout="tabbed-box"] > .callout-content > [type=radio][id$="6"]:is(:checked, [checked]) ~ div[data-callout="tabs"] > .callout-content div[data-callout="tab-content"]:nth-of-type(6) { 110 | z-index: 2; 111 | display: block; 112 | } -------------------------------------------------------------------------------- /TabsInObsidian/legacy/TabsInObsidianDemo-Legacy.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sailKiteV/Obsidian-Snippets-and-Demos/c3c531c1b09228a9d9a8c11edff08a14623fdc6d/TabsInObsidian/legacy/TabsInObsidianDemo-Legacy.gif -------------------------------------------------------------------------------- /TabsInObsidian/legacy/example-Legacy.md: -------------------------------------------------------------------------------- 1 | ``` 2 | > [!tabbed-box] 3 | > 4 | > 5 | > 6 | > 7 | > 8 | > 9 | > 10 | > > [!tabs] 11 | > > > [!tab-content] 12 | > > > [[Useful ALT Codes]] #woohoo 13 | > > 14 | > > > [!tab-content] 15 | > > > | it | all | 16 | | ----- | ------- | 17 | | works | inside! | 18 | > > 19 | > > > [!tab-content] 20 | > > > > [!info] title 21 | > > > > "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." 22 | ``` -------------------------------------------------------------------------------- /dv_devotee/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | 3 | --- 4 | 5 | # Dataview For Devoted Learners 6 | 7 | This repository is a supplemental resource for [Obsidian]() users looking to learn the [Dataview]() plugin. Explanations of syntax, data types, functions, and recommendations for query structure, both for DQL and DVJS, will be offered. API references will be mixed with Markdown annotations, visual aides, and example queries that operate on an included set of mock files, in order to help motivate the understanding and use of Dataview. 8 | 9 | This repository is not directly intended to be used as an Obsidian vault, and is instead meant to be downloaded, either in part or in whole, and included in a user's vault(s) to facilitate ease of access and live experimentation. As such, it does not include a copy of the Dataview plugin, nor any supporting configuration files. 10 | 11 | Many of the Markdown files in this repository include helpful [Properties]() in a YAML Frontmatter block. These Properties simultaneously allow for Dataview querying, and also allow for improved filtering and searching via Obsidian's core [Search]() plugin. Property keys and values will be written with the aim of preventing namespace collisions in user vaults, typically by prefixing with `dvL_` ("Dataview Learners", not "deviL" 😉) when needed. 12 | --------------------------------------------------------------------------------