├── .github ├── FUNDING.yml └── assets │ ├── bg-grid.png │ ├── bg-lines.png │ ├── callout-spoiler.gif │ ├── code.png │ ├── comments.gif │ ├── compare.png │ ├── footnote.gif │ ├── headings.png │ ├── lists.png │ ├── properties.png │ ├── quote.png │ ├── settings.png │ ├── table.png │ └── word-count.png ├── .gitignore ├── 01-variables.css ├── README.md ├── bg-grid.css ├── bg-lines.css ├── callout-spoiler.css ├── code.css ├── comments.css ├── footnotes.css ├── headings.css ├── lists.css ├── properties.css ├── quote.css ├── sidebar.css ├── table.css └── word-count.css /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: gsarig -------------------------------------------------------------------------------- /.github/assets/bg-grid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gsarig/obsidian-css-snippets/HEAD/.github/assets/bg-grid.png -------------------------------------------------------------------------------- /.github/assets/bg-lines.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gsarig/obsidian-css-snippets/HEAD/.github/assets/bg-lines.png -------------------------------------------------------------------------------- /.github/assets/callout-spoiler.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gsarig/obsidian-css-snippets/HEAD/.github/assets/callout-spoiler.gif -------------------------------------------------------------------------------- /.github/assets/code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gsarig/obsidian-css-snippets/HEAD/.github/assets/code.png -------------------------------------------------------------------------------- /.github/assets/comments.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gsarig/obsidian-css-snippets/HEAD/.github/assets/comments.gif -------------------------------------------------------------------------------- /.github/assets/compare.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gsarig/obsidian-css-snippets/HEAD/.github/assets/compare.png -------------------------------------------------------------------------------- /.github/assets/footnote.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gsarig/obsidian-css-snippets/HEAD/.github/assets/footnote.gif -------------------------------------------------------------------------------- /.github/assets/headings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gsarig/obsidian-css-snippets/HEAD/.github/assets/headings.png -------------------------------------------------------------------------------- /.github/assets/lists.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gsarig/obsidian-css-snippets/HEAD/.github/assets/lists.png -------------------------------------------------------------------------------- /.github/assets/properties.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gsarig/obsidian-css-snippets/HEAD/.github/assets/properties.png -------------------------------------------------------------------------------- /.github/assets/quote.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gsarig/obsidian-css-snippets/HEAD/.github/assets/quote.png -------------------------------------------------------------------------------- /.github/assets/settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gsarig/obsidian-css-snippets/HEAD/.github/assets/settings.png -------------------------------------------------------------------------------- /.github/assets/table.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gsarig/obsidian-css-snippets/HEAD/.github/assets/table.png -------------------------------------------------------------------------------- /.github/assets/word-count.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gsarig/obsidian-css-snippets/HEAD/.github/assets/word-count.png -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # IntelliJ project files 2 | .idea 3 | *.iml 4 | out 5 | gen 6 | -------------------------------------------------------------------------------- /01-variables.css: -------------------------------------------------------------------------------- 1 | body { 2 | --list-indent: 1.8em; 3 | --text-color-default: #000; 4 | --text-color-light: #999; 5 | --border-color-light: #ccc; 6 | --background-color-default: #fff; 7 | --background-color-light: #f9f9f9; 8 | --font-family-number: Georgia; 9 | } 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CSS Snippets for Obsidian 2 | Various CSS Snippets for Obsidian's "Edit" view (I never use the Reading view 😁), using the default theme in light mode. They are modular on purpose, so that they can be easily enabled or disabled individually. 3 | 4 |
5 | 01-variables.css 6 | 7 | Sets the variables that should be carried over across the various snippets. It is prefixed with `01-` to ensure that it will always load first. 8 | 9 |
10 | 11 |
12 | bg-grid.css 13 | If enabled, it will add a square grid background to all the notes including the `bg--grid` cssclass in their properties: 14 | 15 | ![bg-grid.png](.github/assets/bg-grid.png) 16 | 17 |
18 | 19 |
20 | bg-lines.css 21 | If enabled, it will add horizontal lines to all the notes including the `bg--lines` cssclass in their properties: 22 | 23 | ![bg-grid.png](.github/assets/bg-lines.png) 24 | 25 |
26 | 27 |
28 | callout-spoiler.css 29 | 30 | Styles a `spoiler` custom [callout](https://help.obsidian.md/Editing+and+formatting/Callouts), and reveals its contents after the box is both expanded and the user hovers over the content area. 31 | 32 | ![callout-spoiler.gif](.github/assets/callout-spoiler.gif) 33 | 34 | Syntax: 35 | ```markdown 36 | > [!spoiler]- Spoiler 37 | > The butler did it! 38 | ``` 39 | 40 |
41 | 42 |
43 | code.css 44 | 45 | * Changes to the CodeBlock layout. It uses `filter: invert()` so that it applies the reverse styling on dark mode. 46 | * Highlights the hovered line. 47 | * Adds numbers to the side. 48 | 49 | ![code.png](.github/assets/code.png) 50 | 51 |
52 | 53 |
54 | comments.css 55 | 56 | Converts [comments](https://help.obsidian.md/Editing+and+formatting/Basic+formatting+syntax#Comments) to tooltips which show their content on hover. It works for both inline and block comments. 57 | 58 | ![comments.gif](.github/assets/comments.gif) 59 | 60 | Syntax: 61 | ```markdown 62 | You can use inline footnotes ^[This is an inline footnote.] and then continue your text. 63 | ``` 64 | 65 |
66 | 67 |
68 | footnotes.css 69 | 70 | Converts [inline footnotes](https://help.obsidian.md/Editing+and+formatting/Basic+formatting+syntax#Footnotes) to tooltips which show their content on hover. 71 | 72 | ![footnote.gif](.github/assets/footnote.gif) 73 | 74 | Syntax: 75 | ```markdown 76 | You can use inline footnotes ^[This is an inline footnote.] and then continue your text. 77 | ``` 78 | 79 |
80 | 81 |
82 | headings.css 83 | 84 | Styles the various headings. 85 | 86 | ![headings.png](.github/assets/headings.png) 87 | 88 |
89 | 90 |
91 | lists.css 92 | 93 | Styles the lists (ordered and unordered). 94 | 95 | ![lists.png](.github/assets/lists.png) 96 | 97 |
98 | 99 |
100 | properties.css 101 | 102 | Styles the properties block. 103 | 104 | ![properties.png](.github/assets/properties.png) 105 | 106 |
107 | 108 |
109 | quote.css 110 | 111 | Styles the quote block. 112 | 113 | ![quote.png](.github/assets/quote.png) 114 | 115 |
116 | 117 |
118 | sidebar.css 119 | 120 | Hides the Attachments folder from the sidebar. 121 | 122 |
123 | 124 |
125 | table.css 126 | 127 | Styling changes to the tables from the [Advanced Table](https://github.com/tgrosinger/advanced-tables-obsidian) plugin. 128 | 129 | ![table.png](.github/assets/table.png) 130 | 131 |
132 | 133 |
134 | word-count.css 135 | 136 | A small modification for the [Better Word Count](https://github.com/lukeleppan/better-word-count) plugin, which only shows the counter on hover. 137 | 138 | ![word-count.png](.github/assets/word-count.png) 139 | 140 |
141 | 142 | --- 143 | 144 | ![settings.png](.github/assets/settings.png) 145 | ![compare.png](.github/assets/compare.png) 146 | 147 | # My other Obsidian projects 148 | * 👉 [Sentinel](https://github.com/gsarig/obsidian-sentinel): Update properties or run commands based on document visibility changes (e.g. every time a note opens or closes). 149 | * 👉 [Varinote](https://github.com/gsarig/obsidian-varinote): Add variables in Templates and set their values during the Note creation. -------------------------------------------------------------------------------- /bg-grid.css: -------------------------------------------------------------------------------- 1 | .bg--grid .cm-contentContainer > div::before { 2 | content: ""; 3 | position: absolute; 4 | width: 100%; 5 | height: 100%; 6 | left: 0; 7 | background-image: 8 | linear-gradient(to bottom, #ddd 1px, transparent 1px), /* Horizontal lines */ 9 | linear-gradient(to right, #ddd 1px, transparent 1px); /* Vertical lines */ 10 | background-size: 11 | 100vw calc(var(--line-height-normal) * 1.005em), /* Horizontal line spacing */ 12 | calc(var(--line-height-normal) * 1.005em) 100vh; /* Vertical line spacing */ 13 | z-index: -1; /* Optional: Push the grid behind other elements */ 14 | } 15 | -------------------------------------------------------------------------------- /bg-lines.css: -------------------------------------------------------------------------------- 1 | .bg--lines .cm-contentContainer > div::before { 2 | content: ""; 3 | position: absolute; 4 | width: 100%; 5 | height: 100%; 6 | left: 0; 7 | background-image: 8 | linear-gradient(to bottom, #ddd 1px, transparent 1px); 9 | background-size: 10 | 100vw calc(var(--line-height-normal) * 1em); 11 | z-index: -1; /* Optional: Push the grid behind other elements */ 12 | } 13 | -------------------------------------------------------------------------------- /callout-spoiler.css: -------------------------------------------------------------------------------- 1 | .callout[data-callout="spoiler"] { 2 | --spoiler-background: var(--text-color-default); 3 | --spoiler-color: var(--background-color-default); 4 | background-color: var(--spoiler-background); 5 | color: var(--spoiler-color); 6 | } 7 | 8 | .callout[data-callout="spoiler"] .callout-title { 9 | color: var(--spoiler-color); 10 | } 11 | 12 | .callout[data-callout="spoiler"] .callout-icon svg { 13 | display: none; 14 | } 15 | 16 | .callout[data-callout="spoiler"] .callout-content { 17 | color: var(--spoiler-background); 18 | } 19 | 20 | .callout[data-callout="spoiler"] .callout-content:hover { 21 | color: var(--spoiler-color); 22 | } 23 | 24 | .callout[data-callout="spoiler"] .callout-icon::after { 25 | content: ''; 26 | display: inline-block; 27 | width: 18px; 28 | height: 18px; 29 | background-image: url('data:image/svg+xml;utf8,'); 30 | background-size: cover; 31 | } 32 | 33 | .callout[data-callout="spoiler"].is-collapsed .callout-icon::after { 34 | background-image: url('data:image/svg+xml;utf8,'); 35 | } -------------------------------------------------------------------------------- /code.css: -------------------------------------------------------------------------------- 1 | /* Code block mods */ 2 | .HyperMD-codeblock.cm-line:not(.HyperMD-codeblock-begin-bg):not(.HyperMD-codeblock-end-bg) { 3 | counter-increment: codeLineCounter; 4 | } 5 | .HyperMD-codeblock.cm-line.HyperMD-codeblock-begin-bg { 6 | padding-bottom: 1em; 7 | } 8 | .HyperMD-codeblock.cm-line { 9 | padding-left: 4em !important; 10 | } 11 | .HyperMD-codeblock.cm-line:not(.HyperMD-codeblock-begin-bg):hover { 12 | background-color: rgba(0,0,0,0.05) !important; 13 | } 14 | .HyperMD-codeblock.cm-line:not(.HyperMD-codeblock-begin-bg):not(.HyperMD-codeblock-end-bg)::before { 15 | content: counter(codeLineCounter); 16 | font-size: 0.9em; 17 | display: inline-block; 18 | color: var(--text-color-light); 19 | margin-left: -3em; 20 | min-width: 2em; 21 | padding-right: 0.5em; 22 | } 23 | .HyperMD-codeblock-end-bg { 24 | counter-reset: codeLineCounter 0; 25 | } 26 | 27 | /* Code block dark mode */ 28 | .cm-inline-code { 29 | filter: invert(82%); 30 | padding:0.2em 0.5em !important; 31 | color: #000 !important; 32 | background-color: #ddd !important; 33 | } 34 | .HyperMD-codeblock.cm-line { 35 | filter: invert(92%); 36 | } 37 | .cm-formatting-code.cm-inline-code, 38 | .cm-formatting-code + .cm-inline-code { 39 | filter: unset; 40 | padding: unset !important; 41 | color: unset !important; 42 | background-color: unset !important; 43 | } 44 | .HyperMD-codeblock.cm-line:not(.HyperMD-codeblock-begin-bg):hover { 45 | background-color: rgba(255,255,255,0.8) !important; 46 | } 47 | span.cm-builtin { 48 | color: var(--text-color-default); 49 | } 50 | span.cm-attribute { 51 | color: #6E5300; 52 | } 53 | span.cm-string { 54 | color: #1C7B8F; 55 | } 56 | span.cm-property { 57 | color: #86753B; 58 | } 59 | -------------------------------------------------------------------------------- /comments.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --svg-comment-icon-background: url("data:image/svg+xml;utf8,"); 3 | } 4 | 5 | /* Inline comments */ 6 | .cm-line:not(.cm-active):has(.cm-comment-start):has(.cm-comment-end) .cm-comment-end { 7 | display: none; 8 | } 9 | 10 | .cm-line:not(.cm-active):has(.cm-comment-start):has(.cm-comment-end) .cm-comment-start { 11 | display: inline-block; 12 | color: transparent; 13 | position: relative; 14 | } 15 | 16 | .cm-line:not(.cm-active):has(.cm-comment-start):has(.cm-comment-end) .cm-comment-start::after { 17 | content: ''; 18 | display: inline-block; 19 | width: 16px; 20 | height: 16px; 21 | background: var(--svg-comment-icon-background); 22 | background-size: contain; 23 | background-repeat: no-repeat; 24 | background-position: center; 25 | color: #000; 26 | position: absolute; 27 | left: 0; 28 | top: 0; 29 | font-size: 90%; 30 | } 31 | 32 | .cm-line:not(.cm-active):has(.cm-comment-start):has(.cm-comment-end) .cm-comment-start ~ .cm-comment { 33 | display: inline-block; 34 | opacity: 0; 35 | pointer-events: none; 36 | position: absolute; 37 | background: var(--background-color-default); 38 | border: 1px solid var(--border-color-light); 39 | padding: 0.5rem; 40 | z-index: 999; 41 | left: auto; 42 | top: auto; 43 | border-radius: 6px; 44 | box-shadow: 1px 1px 6px var(--border-color-light); 45 | max-width: 400px; 46 | font-size: 80%; 47 | color: var(--text-color-default); 48 | } 49 | 50 | .cm-line:not(.cm-active):has(.cm-comment-start):has(.cm-comment-end) .cm-comment-start:hover + .cm-comment:not(.cm-comment-start):not(.cm-comment-end) { 51 | opacity: 1; 52 | pointer-events: auto; 53 | } 54 | 55 | /* Block comments */ 56 | .cm-line:not(.cm-active):not(:has(.cm-comment-end)):has(.cm-comment-start) .cm-comment-start { 57 | display: block; 58 | color: transparent; 59 | } 60 | .cm-line:not(.cm-active):not(:has(.cm-comment-end)):has(.cm-comment-start) .cm-comment-start::before { 61 | content: ''; 62 | display: inline-block; 63 | width: 32px; 64 | height: 32px; 65 | background: var(--svg-comment-icon-background); 66 | background-size: contain; 67 | background-repeat: no-repeat; 68 | background-position: center; 69 | background-color: var(--background-color-default); 70 | color: #000; 71 | position: absolute; 72 | left: calc(50% - 21px); 73 | top: 0; 74 | z-index: 9; 75 | padding: 0 10px; 76 | } 77 | 78 | .cm-line:not(.cm-active):not(:has(.cm-comment-end)):has(.cm-comment-start) .cm-comment-start::after { 79 | content: ""; 80 | width: 100%; 81 | height: 1px; 82 | top: 13px; 83 | left: 0; 84 | position: absolute; 85 | border-top: 1px solid var(--border-color-light); 86 | } 87 | 88 | 89 | .cm-line:not(.cm-active):not(:has(.cm-comment-end)):has(.cm-comment-start) ~ .cm-line .cm-comment-end { 90 | opacity: 0; 91 | } 92 | .cm-line:not(.cm-active):not(:has(.cm-comment-end)):has(.cm-comment-start) ~ .cm-line:has(.cm-comment):not(:has(.cm-comment-end)) { 93 | padding-left: 1em; 94 | font-style: italic; 95 | } 96 | .cm-line:not(.cm-active):not(:has(.cm-comment-end)):has(.cm-comment-start) ~ .cm-line:has(.cm-comment-end)::before { 97 | content: ""; 98 | width: 100%; 99 | height: 1em; 100 | top: 0; 101 | left: 0; 102 | position: absolute; 103 | border-bottom: 1px solid var(--border-color-light); 104 | } -------------------------------------------------------------------------------- /footnotes.css: -------------------------------------------------------------------------------- 1 | /* Show footnotes on mouseover */ 2 | .cm-inline-footnote:not(.cm-inline-footnote-start):not(.cm-inline-footnote-end), 3 | .cm-active .cm-inline-footnote-start::after { 4 | display: none; 5 | } 6 | .cm-inline-footnote-start::after { 7 | content:'📒'; 8 | opacity: 1; 9 | position: absolute; 10 | background: var(--background-color-default); 11 | left: 0; 12 | z-index: 99; 13 | width: 20px; 14 | } 15 | .cm-active .cm-inline-footnote:not(.cm-inline-footnote-start):not(.cm-inline-footnote-end) { 16 | display: inline; 17 | } 18 | .cm-inline-footnote-start { 19 | position: relative; 20 | } 21 | .cm-inline-footnote-start:hover + .cm-inline-footnote:not(.cm-inline-footnote-start):not(.cm-inline-footnote-end) { 22 | display: inline-block; 23 | position: absolute; 24 | background: var(--background-color-default); 25 | border: 1px solid var(--border-color-light); 26 | padding: 0.5rem; 27 | z-index: 999; 28 | left: auto; 29 | top: auto; 30 | margin-left: 0.5em; 31 | border-radius: 6px; 32 | box-shadow: 1px 1px 6px var(--border-color-light); 33 | max-width: 400px; 34 | } 35 | -------------------------------------------------------------------------------- /headings.css: -------------------------------------------------------------------------------- 1 | /* Heading mods */ 2 | .markdown-source-view.mod-cm6 .cm-content .HyperMD-header-2, 3 | .markdown-source-view.mod-cm6 .cm-content .HyperMD-header-3, 4 | .markdown-source-view.mod-cm6 .cm-content .HyperMD-header-4, 5 | .markdown-source-view.mod-cm6 .cm-content .HyperMD-header-5, 6 | .markdown-source-view.mod-cm6 .cm-content .HyperMD-header-6 { 7 | padding-bottom: 0.3em; 8 | } 9 | .markdown-source-view.mod-cm6 .cm-content .HyperMD-header-2 { 10 | border-bottom: 1px solid var(--border-color-light); 11 | margin-bottom: 0.5em !important; 12 | color: #0B3C49; 13 | } 14 | .markdown-source-view.mod-cm6 .cm-content .HyperMD-header-3 { 15 | color: #1F7A8C; 16 | } 17 | .markdown-source-view.mod-cm6 .cm-content .HyperMD-header-4 { 18 | color: #3F7D20; 19 | } 20 | .markdown-source-view.mod-cm6 .cm-content .HyperMD-header-5 { 21 | color: #72B01D; 22 | } 23 | .markdown-source-view.mod-cm6 .cm-content .HyperMD-header-6 { 24 | color: #731963; 25 | } 26 | -------------------------------------------------------------------------------- /lists.css: -------------------------------------------------------------------------------- 1 | /* Make ul and ol list prettier */ 2 | .markdown-source-view.mod-cm6 .cm-indent::before { 3 | border-inline-end: none; 4 | } 5 | span.list-number { 6 | font-family: var(--font-family-number); 7 | color: var(--text-color-default); 8 | } 9 | .HyperMD-list-line-2 .cm-formatting-list-ul .list-bullet:after, 10 | .HyperMD-list-line-5 .cm-formatting-list-ul .list-bullet:after { 11 | border: 1px solid var(--text-color-default); 12 | background-color: var(--background-color-default); 13 | } 14 | .HyperMD-list-line-3 .cm-formatting-list-ul .list-bullet:after, 15 | .HyperMD-list-line-6 .cm-formatting-list-ul .list-bullet:after { 16 | content: '-'; 17 | height: 0; 18 | line-height: 0; 19 | font-weight: bold; 20 | color: var(--text-color-default); 21 | } 22 | .HyperMD-list-line-4 .cm-formatting-list-ul .list-bullet:after { 23 | background-color: var(--text-color-light); 24 | } 25 | .HyperMD-list-line-5 .cm-formatting-list-ul .list-bullet:after { 26 | border-color: var(--text-color-light); 27 | } 28 | .HyperMD-list-line-6 .cm-formatting-list-ul .list-bullet:after { 29 | color: var(--text-color-light); 30 | } 31 | -------------------------------------------------------------------------------- /properties.css: -------------------------------------------------------------------------------- 1 | /* Properties mods */ 2 | .metadata-container { 3 | border: 1px solid #DCD9FF; 4 | padding: 1em 1em 0.5em 2em; 5 | border-radius: 5px; 6 | background: #F8F7FF; 7 | } 8 | .metadata-properties-title { 9 | color: #52489C; 10 | } 11 | -------------------------------------------------------------------------------- /quote.css: -------------------------------------------------------------------------------- 1 | /* Quote mods */ 2 | .markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote { 3 | background-color: var(--background-color-light); 4 | font-family: var(--font-family-number); 5 | padding-top: 1em; 6 | padding-bottom: 1em; 7 | color: #666; 8 | font-style: italic; 9 | font-size: 1.2em; 10 | margin-left: 58px !important; 11 | } 12 | 13 | .markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote::before { 14 | width: 43px; 15 | padding-right: 10px; 16 | height: 100%; 17 | content: "“"; 18 | position: absolute; 19 | border-right: calc(var(--blockquote-border-thickness) * 2) solid var(--blockquote-border-color); 20 | color: var(--blockquote-border-color); 21 | border-left: none; 22 | left: -58px; 23 | font-size: 96px; 24 | align-content: center; 25 | line-height: 1em; 26 | font-weight: bold; 27 | font-style: normal; 28 | text-align: right; 29 | } 30 | 31 | .markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote ~ .HyperMD-quote::before { 32 | content: ""; 33 | } 34 | -------------------------------------------------------------------------------- /sidebar.css: -------------------------------------------------------------------------------- 1 | /* Hide attachments from the sidebar */ 2 | div[data-path='Attachments'], 3 | div[data-path='Attachments'] + div.nav-folder-children 4 | { 5 | display: none; 6 | } 7 | -------------------------------------------------------------------------------- /table.css: -------------------------------------------------------------------------------- 1 | /* Table mods */ 2 | .cm-table-widget {} 3 | .cm-table-widget .table-wrapper {} 4 | thead { 5 | background: var(--background-color-light); 6 | filter: invert(100%); 7 | } 8 | .table-cell-wrapper { 9 | padding: 0.5em 1em !important; 10 | } 11 | th .table-cell-wrapper { 12 | font-weight: bold; 13 | } 14 | tbody tr:hover { 15 | background-color: var(--background-color-light) !important; 16 | } 17 | -------------------------------------------------------------------------------- /word-count.css: -------------------------------------------------------------------------------- 1 | /* Show word count on hover */ 2 | .HyperMD-header .bwc-section-count { 3 | opacity: 0; 4 | } 5 | .HyperMD-header:hover .bwc-section-count, 6 | .HyperMD-header.cm-active .bwc-section-count { 7 | opacity: 1; 8 | } 9 | --------------------------------------------------------------------------------