├── .gitattributes ├── LICENSE ├── README.md ├── img ├── dark-theme.png ├── light-theme.png ├── mado-daily.png ├── mado-explorer.png ├── mado-heading.png ├── mado-panel.png ├── mado-table-check.png ├── mado-table.png ├── mado-timeline.png ├── store-cover.png └── stylesettings.png ├── manifest.json ├── obsidian.css └── theme.css /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 hydescarf 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Obsidian Theme - Mado 11 2 | 3 | --- 4 | 5 | **_NOTE: This theme is now on maintenance mode, update won't be frequent, and no feature/pull requests will be accepted._** 6 | 7 | --- 8 | 9 | Mado 11 is an [Obsidian](https://obsidian.md/) theme, inspired by Windows 11 UI styling. 10 | 11 | This theme aims for a simplified, yet spacious kind of an app feel, with bigger buttons to click on the sidebar. 12 | 13 | (Looking for a more minimalism theme? Check out [Mado Miniflow](https://github.com/hydescarf/Obsidian-Theme-Mado-Miniflow)!) 14 | 15 | ![](img/light-theme.png) 16 | ![](img/dark-theme.png) 17 | 18 | Recommended fonts for this theme: 19 | - Text: Segoe UI, Noto Sans 20 | - Code: Fira Code 21 | 22 | 23 | ## Style Settings Available 24 | 25 | ![](img/stylesettings.png) 26 | 27 | - Customizable theme colours, basic layout modifying, element hide-&-unhiding, and some basic markdown styling. 28 | - To use, you need to install a community plugin called [Style Settings](https://github.com/mgmeyers/obsidian-style-settings). 29 | 30 | 31 | ## Mado CSS Classes For Fun! 32 |
33 | Mado Heading 34 | 35 | ![](img/mado-heading.png) 36 | 37 | ``` 38 | cssclass: mado-heading 39 | ``` 40 | 41 |
42 |
43 | Mado Explorer 44 | 45 | ![](img/mado-explorer.png) 46 | 47 | ``` 48 | cssclass: mado-explorer 49 | ``` 50 | 51 | When placed onto the sidebar, it will become exactly like how File Explorer would look like. A.k.a. pseudo-File Explorer! 52 | There are rules for this to work: 53 | 54 | ``` 55 | 1. You may only use (link),

(h1 heading) and
  • (list) in the note. 56 | 2. will act as first level file title. 57 | 3.

    will act as first level folder title. 58 | 4.
  • will act as first level folder's children, where its contents should fill with just , and itself should be placed below

    . 59 | 5. Second level folder, or nested
  • , is not possible. 60 | 6. For

    to be foldable, you have to enable the foldable option in the settings. 61 | 7. To make a solo-file below a folder list, use an empty

    to act as a separator. 62 | ``` 63 | 64 | Example: 65 | 66 | ``` 67 | [[File 1]] 68 | [[File 2]] 69 | # Folder 1 70 | - [[Listed File 1]] 71 | - [[Listed File 2]] 72 | [[File 3]] 73 | ``` 74 | 75 |

    • 76 |
    77 | Mado Table 78 | 79 | ![](img/mado-table.png) 80 | 81 | ``` 82 | cssclass: mado-table 83 | ``` 84 | 85 | ``` 86 | cssclass: mado-table (special styling) 87 | cssclass: mado-table-XXX (special styling with XXX being the options) 88 | cssclass: mado-table-XXX, mado-table-XXX (special styling with multiple options) 89 | ``` 90 | 91 | ``` 92 | Options: 93 | mado-table-auto (auto-widen table size by its contents and center it) 94 | mado-table-normal (no special styling, include this if you wish to use other options without special styling) 95 | 96 | mado-table-stripe, mado-table-border (stripe/border design) 97 | mado-table-left, mado-table-right, mado-table-top, mado-table-bottom (define table-header position) 98 | mado-table-topless (remove table-header position on the top) 99 | ``` 100 | 101 |
    102 |
    103 | Mado Panel 104 | 105 | ![](img/mado-panel.png) 106 | 107 | ``` 108 | cssclass: mado-panel 109 | ``` 110 | 111 | ``` 112 | cssclass: mado-panel (transform all lists into panels) 113 | cssclass: mado-panel-XXX (XXX being the options) 114 | cssclass: mado-panel-XXX, mado-panel-XXX (including more options, in this case, only `auto` is available as an extra) 115 | 116 | Options: 117 | mado-panel-list (long and thin size, lists can be nested) 118 | mado-panel-list-rightbox (the position of the checkbox in a list will be placed on the right instead of left) 119 | mado-panel-small, mado-panel-medium, mado-panel-large, mado-panel-long, mado-panel-short (define fixed-size, lists cannot be nested) 120 | mado-panel-auto (maintain the minimum fixed-size of above, while auto-widen based on its contents, not applicable to mado-panel-list) 121 | mado-panel-link (turns link into a full button. Must not mix with plain text inside a single list) 122 | ``` 123 | 124 | Rule: 125 | 126 | ``` 127 | 1. Only
  • (list) will turn into panel. 128 | 2. The list can consist of (link) or "[]"(Checkbox), or plain text. 129 | ``` 130 | Callout version is also available if you need only one part of the list to become panel. 131 | Options in callout version can be chained directly. (Only `auto` and `link` are currently available to be chained) 132 | Example: 133 | 134 | ``` 135 | > [!mado-panel-small-auto] 136 | > - Listing 137 | ``` 138 | 139 |
    • 140 |
    141 | Mado Timeline 142 | 143 | ![](img/mado-timeline.png) 144 | 145 | ``` 146 | cssclass: mado-timeline 147 | ``` 148 | 149 |
    150 |
    151 | Mado Daily 152 | 153 | ![](img/mado-daily.png) 154 | 155 | ``` 156 | cssclass: mado-daily 157 | ``` 158 | 159 | Feel like logging into a game to turn in for daily bonus? Well, now you can with this manual-stamp daily! 160 | You can set the reward for every 2nd and 5th day, and then start filling in with any value or emoji in the empty cells. The reward will mark as checked when the previous cell is filled in. 161 | Also, adding in another cssclass `mado-table` will give it a better looking, optional of course! 162 | 163 |
    164 |
    165 | Mado Table Check & List2Table 166 | 167 | ![](img/mado-table-check.png) 168 | 169 | Stamp a checkmark by manually using "strikethrough" (`~~~~`/``) inside the block, either on the value or beside the value! 170 | 171 | ``` 172 | cssclass: mado-table-check 173 | ``` 174 | 175 | Don't like manually stamping? Then try out callout `mado-list2table`! By turning a list of checklists into a pseudo-table, you can now mark a check on the block by directly clicking onto it! 176 | 177 | ``` 178 | > [!mado-list2table] 179 | > - Title 180 | > - [ ] Checkboxes 181 | > - [ ] Checkboxes 182 | ``` 183 | 184 |
    185 | -------------------------------------------------------------------------------- /img/dark-theme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hydescarf/Obsidian-Theme-Mado-11/7ed684732edcc146df4c99e0b85327025cfa180e/img/dark-theme.png -------------------------------------------------------------------------------- /img/light-theme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hydescarf/Obsidian-Theme-Mado-11/7ed684732edcc146df4c99e0b85327025cfa180e/img/light-theme.png -------------------------------------------------------------------------------- /img/mado-daily.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hydescarf/Obsidian-Theme-Mado-11/7ed684732edcc146df4c99e0b85327025cfa180e/img/mado-daily.png -------------------------------------------------------------------------------- /img/mado-explorer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hydescarf/Obsidian-Theme-Mado-11/7ed684732edcc146df4c99e0b85327025cfa180e/img/mado-explorer.png -------------------------------------------------------------------------------- /img/mado-heading.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hydescarf/Obsidian-Theme-Mado-11/7ed684732edcc146df4c99e0b85327025cfa180e/img/mado-heading.png -------------------------------------------------------------------------------- /img/mado-panel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hydescarf/Obsidian-Theme-Mado-11/7ed684732edcc146df4c99e0b85327025cfa180e/img/mado-panel.png -------------------------------------------------------------------------------- /img/mado-table-check.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hydescarf/Obsidian-Theme-Mado-11/7ed684732edcc146df4c99e0b85327025cfa180e/img/mado-table-check.png -------------------------------------------------------------------------------- /img/mado-table.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hydescarf/Obsidian-Theme-Mado-11/7ed684732edcc146df4c99e0b85327025cfa180e/img/mado-table.png -------------------------------------------------------------------------------- /img/mado-timeline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hydescarf/Obsidian-Theme-Mado-11/7ed684732edcc146df4c99e0b85327025cfa180e/img/mado-timeline.png -------------------------------------------------------------------------------- /img/store-cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hydescarf/Obsidian-Theme-Mado-11/7ed684732edcc146df4c99e0b85327025cfa180e/img/store-cover.png -------------------------------------------------------------------------------- /img/stylesettings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hydescarf/Obsidian-Theme-Mado-11/7ed684732edcc146df4c99e0b85327025cfa180e/img/stylesettings.png -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Mado 11", 3 | "version": "1.4.2", 4 | "minAppVersion": "1.0.0", 5 | "author": "hydescarf", 6 | "authorUrl": "https://github.com/hydescarf/Obsidian-Theme-Mado-11" 7 | } -------------------------------------------------------------------------------- /obsidian.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* Mado-11 Palette */ 3 | --mado-white-1:hsla(204, 45%, 97%, 1); 4 | --mado-white-2:hsla(210, 45%, 95%, 1); 5 | --mado-white-3:hsla(212, 17%, 80%, 0.2); 6 | --mado-white-6:hsla(212, 17%, 80%, 0.3); 7 | --mado-white-4:hsla(180, 33%, 99%, 1); 8 | --mado-white-5:hsla(207, 10%, 90%, 0.1); 9 | 10 | --mado-blue-1:hsla(209, 95%, 62%, 1); 11 | --mado-blue-2:hsla(209, 85%, 72%, 0.5); 12 | 13 | --mado-black-1:hsla(0, 0%, 13%, 1); 14 | --mado-black-2:hsla(220, 20%, 35%, 1); 15 | --mado-gray-1:hsla(0, 0%, 33%, 1); 16 | --mado-gray-2:hsla(210, 15%, 70%, 0.2); 17 | --mado-gray-3:hsla(210, 15%, 20%, 0.2); 18 | --mado-gray-4:hsla(210, 15%, 30%, 0.5); 19 | --mado-gray-5:hsla(207, 17%, 90%, 1); 20 | --mado-gray-6:hsla(217, 15%, 83%, 1); 21 | 22 | --mado-yellow:hsla(60, 100%, 50%, 0.4); 23 | --mado-orange:hsla(25, 75%, 65%, 1); 24 | --mado-red-1:hsla(365, 90%, 62%, 1); 25 | --mado-red-2:hsl(365, 95%, 85%, 1); 26 | --mado-red-3:hsl(365, 85%, 45%, 1); 27 | 28 | --button-radius:4px; 29 | --window-radius:8px; 30 | --readable-line-length:45rem; 31 | } 32 | 33 | 34 | .theme-light { 35 | --color-black: var(--mado-black-1); 36 | --color-dark-gray: var(--mado-gray-1); 37 | --color-accent: var(--mado-blue-1); 38 | --color-accent-alt: var(--mado-blue-2); 39 | --color-gray: var(--mado-gray-2); 40 | --color-light-gray: var(--mado-gray-3); 41 | --color-medium-gray:var(--mado-gray-4); 42 | 43 | --modal-group-border: var(--mado-gray-6); 44 | --button-selected: var(--mado-white-6); 45 | --button-hover: var(--mado-white-6); 46 | --button-selected-hover:var(--mado-white-3); 47 | 48 | --window-shadow: 0 1px 3px var(--mado-white-3); 49 | --window-shadow-hover: 0 3px 5px var(--mado-white-6); 50 | --window-shadow-transparent:0 3px 5px transparent; 51 | 52 | --border:1px solid var(--mado-gray-5); 53 | 54 | 55 | --background-primary: var(--mado-white-1); 56 | --background-secondary: var(--mado-white-2); 57 | --background-secondary-alt: var(--mado-gray-5); 58 | --background-tertiary: var(--mado-white-3); 59 | 60 | --background-accent: var(--mado-blue-1); 61 | --background-fourth: var(--mado-white-4); 62 | --background-fifth: var(--mado-white-5); 63 | --background-sixth: var(--mado-white-4); 64 | --background-code-for-mado: var(--background-primary-alt); 65 | 66 | --text-code: var(--mado-red-3); 67 | --text-normal: var(--mado-black-1); 68 | --text-error: var(--mado-red-1); 69 | --text-on-accent: var(--mado-white-1); 70 | --text-faint: var(--mado-gray-6); 71 | --text-highlight-bg:var(--mado-yellow); 72 | --text-bold: var(--mado-black-2); 73 | --text-em: var(--mado-gray-4); 74 | --text-muted: hsla(218, 19%, 39%, 1); 75 | 76 | --background-modifier-error: var(--mado-red-1); 77 | --background-modifier-border: var(--mado-gray-5); 78 | --interactive-accent: var(--mado-blue-1); 79 | --indentation-guide: var(--mado-gray-5); 80 | 81 | --scrollbar-bg: transparent; 82 | } 83 | 84 | .theme-dark { 85 | 86 | /* dark mode quick hack */ 87 | --mado-white-1:hsla(215, 17%, 19%, 1); 88 | --mado-white-2:hsla(214, 24%, 15%, 1); 89 | --mado-white-3:hsla(212, 17%, 22%, 0.9); 90 | --mado-white-6:hsla(212, 17%, 0%, 0.3); 91 | --mado-white-4:hsla(215, 22%, 13%, 1); 92 | --mado-white-5:hsla(207, 10%, 10%, 0.1); 93 | 94 | --mado-black-1:hsla(0, 0%, 73%, 1); 95 | --mado-black-2:hsla(213, 33%, 65%, 1); 96 | --mado-gray-1:hsla(0, 0%, 83%, 1); 97 | --mado-gray-2:hsla(210, 25%, 5%, 0.3); 98 | --mado-gray-3:hsla(210, 15%, 50%, 0.4); 99 | --mado-gray-4:hsla(210, 15%, 70%, 0.5); 100 | --mado-gray-5:hsla(207, 17%, 10%, 0.5); 101 | --mado-gray-6:hsla(217, 18%, 50%, 0.7); 102 | 103 | --mado-yellow:hsla(45, 63%, 43%, 1); 104 | 105 | 106 | 107 | 108 | --color-black: var(--mado-black-1); 109 | --color-dark-gray: var(--mado-gray-1); 110 | --color-accent: var(--mado-blue-1); 111 | --color-accent-alt: var(--mado-blue-2); 112 | --color-gray: var(--mado-gray-2); 113 | --color-light-gray: var(--mado-gray-3); 114 | --color-medium-gray:var(--mado-gray-4); 115 | 116 | --modal-group-border: var(--mado-gray-6); 117 | --button-selected: var(--mado-white-6); 118 | --button-hover: var(--mado-white-6); 119 | --button-selected-hover:var(--mado-white-3); 120 | 121 | --window-shadow: 0 1px 3px var(--mado-white-5); 122 | --window-shadow-hover: 0 3px 5px var(--mado-white-6); 123 | --window-shadow-transparent:0 3px 5px transparent; 124 | 125 | --border:1px solid var(--mado-gray-5); 126 | 127 | 128 | 129 | --background-primary: var(--mado-white-1); 130 | --background-secondary: var(--mado-white-2); 131 | --background-secondary-alt: var(--mado-gray-5); 132 | --background-tertiary: var(--mado-white-3); 133 | --background-primary-alt: var(--mado-white-6); 134 | 135 | --background-accent: var(--mado-blue-1); 136 | --background-fourth: var(--mado-white-3); 137 | --background-fifth: var(--mado-white-5); 138 | --background-sixth: var(--mado-white-5); 139 | --background-code-for-mado: var(--mado-white-5); 140 | 141 | --text-code: var(--mado-red-1); 142 | --text-normal: var(--mado-black-1); 143 | --text-error: var(--mado-red-1); 144 | --text-on-accent: var(--mado-white-1); 145 | --text-faint: var(--mado-gray-6); 146 | --text-highlight-bg:var(--mado-yellow); 147 | --text-bold: var(--mado-black-2); 148 | --text-em: var(--mado-gray-6); 149 | --text-muted: hsl(218, 17%, 58%); 150 | 151 | --background-modifier-error: var(--mado-red-1); 152 | --background-modifier-border: var(--mado-gray-5); 153 | --interactive-accent: var(--mado-blue-1); 154 | --indentation-guide: var(--mado-gray-3); 155 | 156 | --scrollbar-bg: transparent; 157 | } 158 | 159 | 160 | body{ 161 | background:var(--background-secondary); 162 | } 163 | 164 | /* 165 | --------------------------- 166 | Title Bar 167 | --------------------------- 168 | */ 169 | .titlebar{ 170 | height:22px!important; 171 | padding-top:0!important; 172 | /* background none to let way for translucent mode design */ 173 | border-bottom:none; 174 | background:none; 175 | position:absolute; 176 | } 177 | .is-translucent .titlebar{ 178 | z-index:1; 179 | /* Possible reason fof it to not work with opacity: https://stackoverflow.com/questions/23995799/css-hover-not-working-due-to-opacity */ 180 | } 181 | 182 | .titlebar-text{ 183 | /* hide obsidian app title */ 184 | display:none; 185 | } 186 | 187 | .titlebar-button-container.mod-left{ 188 | left:0!important; 189 | } 190 | .mod-macos .titlebar-button-container.mod-left{ 191 | left:70px!important; 192 | } 193 | 194 | /* Hide buttons but show them when hovered */ 195 | .titlebar-button-container.mod-left, 196 | .titlebar-button-container.mod-right{ 197 | position:absolute; 198 | opacity:0; 199 | z-index:1; 200 | } 201 | 202 | .titlebar-button-container.mod-left:hover, 203 | .titlebar-button-container.mod-right:hover{ 204 | opacity:1; 205 | } 206 | 207 | /* Button styling */ 208 | .titlebar-button-container{ 209 | display:flex; 210 | } 211 | .titlebar-button{ 212 | display:flex; 213 | padding:11px 17px; 214 | color:var(--color-dark-gray); 215 | border-radius:var(--button-radius); 216 | transition:0.1s background; 217 | opacity:0.7; 218 | z-index:10; 219 | } 220 | 221 | .titlebar-button:hover{ 222 | background:var(--button-hover); 223 | color:var(--color-dark-gray); 224 | } 225 | 226 | .titlebar-button.mod-close:hover{ 227 | color:var(--text-on-accent); 228 | } 229 | 230 | .app-container{ 231 | /* readjust height as to fill the gap caused by hiding the titlebar */ 232 | margin-top:-25px; 233 | height:calc(100% + 25px); 234 | } 235 | 236 | /* Remove :before style that made up the weird spacing */ 237 | .titlebar-button:before{ 238 | content:""; 239 | } 240 | 241 | 242 | /* 243 | --------------------------- 244 | Status Bar 245 | --------------------------- 246 | */ 247 | /* hide status bar */ 248 | .status-bar{ 249 | display:none; 250 | } 251 | 252 | 253 | /* 254 | --------------------------- 255 | PopOver Embed 256 | --------------------------- 257 | */ 258 | .popover.hover-popover{ 259 | width:500px; 260 | max-height:400px; 261 | } 262 | .popover.hover-popover .markdown-embed{ 263 | padding:13px 13px 13px 23px; 264 | height:400px; 265 | } 266 | 267 | 268 | /* 269 | --------------------------- --------------------------- 270 | --------------------------- --------------------------- 271 | Markdown Common Styling 272 | --------------------------- --------------------------- 273 | --------------------------- --------------------------- 274 | */ 275 | strong, 276 | .cm-strong{ 277 | font-weight:800; 278 | color:var(--text-bold); 279 | } 280 | 281 | mark, 282 | .cm-highlight{ 283 | background:var(--text-highlight-bg); 284 | } 285 | .theme-dark mark, 286 | .theme-dark .cm-line .cm-highlight{ 287 | background:none; 288 | border-bottom:2px solid var(--text-highlight-bg); 289 | } 290 | 291 | em, 292 | .cm-em{ 293 | color:var(--text-em); 294 | } 295 | 296 | a{ 297 | text-decoration:none; 298 | } 299 | 300 | hr{ 301 | background-color:var(--background-modifier-border); 302 | height:2px; 303 | } 304 | 305 | .markdown-preview-view{ 306 | padding-inline:63px; 307 | } 308 | .markdown-source-view .cm-content{ 309 | padding-inline:13px; 310 | } 311 | 312 | .markdown-preview-view.is-readable-line-width .markdown-preview-sizer, 313 | .markdown-source-view.mod-cm6.is-readable-line-width .cm-editor .cm-contentContainer, 314 | .markdown-source-view.mod-cm6.is-readable-line-width .cm-editor .cm-contentContainer .cm-content, 315 | .markdown-source-view.mod-cm6.is-readable-line-width .cm-editor .cm-contentContainer .cm-content .cm-line{ 316 | max-width:1000px; 317 | } 318 | 319 | .markdown-rendered code{ 320 | background:none; 321 | color:var(--text-code); 322 | } 323 | 324 | .callout{ 325 | border-radius:var(--button-radius); 326 | } 327 | 328 | /* Whenever pane is opened/entered, or even updated, make an animation suggesting it, can be annoying */ 329 | .workspace-split.mod-vertical.mod-root .markdown-preview-sizer.markdown-preview-section div{ 330 | animation:0.3s slide-up forwards; 331 | } 332 | @keyframes slide-up{ 333 | 0% { transform:translateY(0%); opacity:0; } 334 | 15% { transform:translateY(5px); opacity:0.1; } 335 | 25% { transform:translateY(10px); } 336 | 45% { opacity:0.3s; } 337 | 65% { opacity:0.7; } 338 | 100% { transform:translateY(0%); opacity:1; } 339 | } 340 | 341 | /* 342 | --------------------------- 343 | Markdown Checkbox 344 | --------------------------- 345 | */ 346 | input[type=checkbox]{ 347 | appearance:none; 348 | cursor:pointer; 349 | border:1px solid var(--color-light-gray); 350 | border-radius:var(--button-radius); 351 | } 352 | 353 | input[type=checkbox]:checked{ 354 | background-color:var(--color-medium-gray); 355 | background-position:center; 356 | background-size:70%; 357 | background-repeat:no-repeat; 358 | background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' aria-hidden='true' focusable='false' width='1em' height='1em' style='-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);' preserveAspectRatio='xMidYMid meet' viewBox='0 0 20 20'%3E%3Cpath d='M0 11l2-2l5 5L18 3l2 2L7 18z' fill='%23fff'/%3E%3C/svg%3E"); 359 | } 360 | 361 | .markdown-source-view .task-list-item-checkbox, 362 | .markdown-preview-view .task-list-item-checkbox{ 363 | width:20px; 364 | height:20px; 365 | margin-top:-3px; 366 | } 367 | 368 | .markdown-preview-view .task-list-item-checkbox{ 369 | top:8px; 370 | margin-left:-1px; 371 | margin-right:10px; 372 | } 373 | 374 | /* Checkbox Bullet Point Alignment */ 375 | .task-list-item .external-link{ 376 | vertical-align:middle; 377 | } 378 | 379 | /* Checkbox with link visual fix */ 380 | .task-list-item .external-link{ 381 | vertical-align:top; 382 | } 383 | /* 384 | --------------------------- 385 | Markdown Unordered / Ordered List 386 | --------------------------- 387 | */ 388 | 389 | /* Build spaces at the end of each listing to distinguish from each other (preview) */ 390 | ul,ol{ 391 | padding:7px 0; 392 | margin-bottom:13px; 393 | 394 | /* Build spaces at the start of each line (preview) */ 395 | padding-left:40px; 396 | } 397 | /* Only works if indentation-guide is enabled in the settings */ 398 | /* Not sure how to style it without that for source-view */ 399 | .cm-indent{ 400 | /* Build spaces at the start of each line (source) */ 401 | padding-left:12px; 402 | padding-right:12px; 403 | } 404 | 405 | /* Build spaces at the end of each listing to distinguish from each other (source) */ 406 | .HyperMD-list-line-1+.HyperMD-list-line:not(.HyperMD-list-line-1):not(.HyperMD-list-line-2), 407 | .HyperMD-list-line-2+.HyperMD-list-line:not(.HyperMD-list-line-2):not(.HyperMD-list-line-3), 408 | .HyperMD-list-line-3+.HyperMD-list-line:not(.HyperMD-list-line-3):not(.HyperMD-list-line-4), 409 | .HyperMD-list-line-4+.HyperMD-list-line:not(.HyperMD-list-line-4):not(.HyperMD-list-line-5), 410 | .HyperMD-list-line-5+.HyperMD-list-line:not(.HyperMD-list-line-5):not(.HyperMD-list-line-6), 411 | .HyperMD-list-line-6+.HyperMD-list-line:not(.HyperMD-list-line-6):not(.HyperMD-list-line-7){ 412 | padding-top:23px!important; 413 | } 414 | 415 | li{ 416 | padding-block:3px; 417 | } 418 | .HyperMD-list-line.cm-line{ 419 | padding-block:4px; 420 | } 421 | 422 | ul>li::marker{ 423 | /* Resize bullet point to a smaller version */ 424 | color:var(--color-dark-gray); 425 | font-size:0.6rem; 426 | } 427 | 428 | /* Adjust line position to fit below bullet point (preview) */ 429 | .markdown-rendered.show-indentation-guide li > ul::before, 430 | .markdown-rendered.show-indentation-guide li > ol::before{ 431 | left:-12px; 432 | } 433 | 434 | /* Adjust line position to fit below bullet point (source) */ 435 | /* .cm-formatting-list-ol, */ 436 | .list-bullet{ 437 | margin-right:7px; 438 | margin-left:10px; 439 | } 440 | 441 | /* fix link in bullet list breaking to new line */ 442 | li .external-link{ 443 | display:inline-block; 444 | word-break:break-word; 445 | vertical-align:top; 446 | overflow-wrap: break-word; 447 | word-wrap: break-word; 448 | max-width: 98%; 449 | } 450 | 451 | 452 | 453 | /* 454 | --------------------------- 455 | Markdown Table 456 | --------------------------- 457 | */ 458 | 459 | /* Adds margin for easier identification */ 460 | table{ 461 | margin:13px; 462 | /* width:calc(100% - 26px); */ 463 | border-radius:var(--button-radius); 464 | overflow:hidden; 465 | } 466 | 467 | /* Adds color to the header */ 468 | thead { 469 | border-top:2px solid var(--color-accent); 470 | background:var(--background-tertiary); 471 | } 472 | 473 | /* Adds padding spaces & color to the border */ 474 | .markdown-rendered td, 475 | .markdown-rendered th{ 476 | border:1px solid var(--color-light-gray); 477 | padding:4px 17px; 478 | } 479 | 480 | 481 | /* Adjust bold size of the header */ 482 | th{ 483 | font-weight:600; 484 | } 485 | 486 | 487 | /* 488 | --------------------------- 489 | Markdown Strikethrough 490 | --------------------------- 491 | */ 492 | /* adjust color for strikethrough + on embed */ 493 | ul > li.task-list-item.is-checked{ 494 | text-decoration-color:var(--text-faint); 495 | } 496 | 497 | del, 498 | .cm-strikethrough, 499 | ul > li.task-list-item.is-checked *, 500 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task]:not([data-task=" "]) span { 501 | color:var(--text-faint); 502 | } 503 | 504 | /* 505 | --------------------------- 506 | Markdown Embed 507 | --------------------------- 508 | */ 509 | /* adjust embed padding, visual border */ 510 | .markdown-preview-view .markdown-embed{ 511 | border: 2px solid var(--background-modifier-border); 512 | border-radius: var(--window-radius); 513 | padding: 13px 23px; 514 | margin: 0; 515 | overflow:auto; 516 | } 517 | 518 | /* Show collapse indicator */ 519 | .markdown-preview-view:not(.allow-fold-lists) .list-collapse-indicator{ 520 | display:inline-block; 521 | } 522 | 523 | /* Align checkbox and text together */ 524 | .markdown-source-view.mod-cm6 .internal-embed .task-list-item-checkbox{ 525 | vertical-align:initial; 526 | } 527 | 528 | /* Adjust margin size for checkboxes in embed */ 529 | .HyperMD-list-line.HyperMD-list-line-2.cm-line .internal-embed .contains-task-list, 530 | .HyperMD-list-line.HyperMD-list-line-3.cm-line .internal-embed .contains-task-list, 531 | .markdown-preview-view blockquote .markdown-embed .contains-task-list{ 532 | margin:3px; 533 | } 534 | 535 | 536 | /* 537 | --------------------------- 538 | Markdown Quote 539 | --------------------------- 540 | */ 541 | .markdown-preview-view blockquote{ 542 | margin:13px 0px 13px 11px; 543 | padding:23px 27px 23px 37px; 544 | border-radius:var(--window-radius); 545 | background:var(--background-secondary); 546 | border:var(--border); 547 | /* border-left:5px solid var(--background-modifier-border); */ 548 | color:var(--text-muted); 549 | position:relative; 550 | } 551 | .markdown-preview-view blockquote:before{ 552 | content:""; 553 | position:absolute; 554 | left:7px; 555 | top:10px; 556 | width:5px; 557 | height:calc(100% - 20px); 558 | background:var(--color-accent-alt); 559 | border-radius:var(--window-radius); 560 | } 561 | 562 | /* adjust quote issue overflowing */ 563 | .markdown-preview-view blockquote p{ 564 | overflow:hidden; 565 | } 566 | 567 | .markdown-preview-view blockquote p+p{ 568 | /* add padding-top to siblings for easier reading*/ 569 | padding-top:13px; 570 | } 571 | 572 | .markdown-source-view.mod-cm6 .HyperMD-quote.cm-line{ 573 | padding:13px 13px!important; 574 | text-indent:0!important; 575 | border-left:3px solid var(--color-accent-alt); 576 | } 577 | .HyperMD-quote.cm-line+.HyperMD-quote.cm-line{ 578 | /* remove siblings padding-top */ 579 | padding-top:0!important; 580 | } 581 | 582 | 583 | 584 | 585 | 586 | /* 587 | --------------------------- --------------------------- 588 | --------------------------- --------------------------- 589 | Dock/Sidebar Layout W11-Styling 590 | --------------------------- --------------------------- 591 | --------------------------- --------------------------- 592 | */ 593 | 594 | /* Left dock Ribbon hidden (includes expand button) */ 595 | .workspace-ribbon{ 596 | visibility:collapse; 597 | position:absolute; 598 | } 599 | 600 | /* Show expand button when hovered */ 601 | .workspace-ribbon-collapse-btn, 602 | .side-dock-actions, 603 | .side-dock-settings{ 604 | position:fixed; 605 | visibility:visible; 606 | top:0; 607 | opacity:0; 608 | padding:7px; 609 | color:var(--color-dark-gray); 610 | border-radius:var(--button-radius); 611 | transition:0.1s background, 0.1s opacity; 612 | } 613 | 614 | /* Fix left ribbon position for easier hovering */ 615 | .workspace-ribbon.side-dock-ribbon.mod-left .workspace-ribbon-collapse-btn{ 616 | left:-1px; 617 | } 618 | 619 | .side-dock-actions{ 620 | top:initial; 621 | bottom:114px; 622 | left:-23px; 623 | padding:0; 624 | } 625 | .side-dock-settings{ 626 | top:initial; 627 | bottom:0; 628 | left:-23px; 629 | margin-bottom:0; 630 | padding:0; 631 | } 632 | .side-dock-ribbon-action{ 633 | color:var(--text-muted); 634 | padding:7px; 635 | } 636 | 637 | .mod-right.workspace-ribbon, 638 | .mod-right .workspace-ribbon-collapse-btn{ 639 | right:0; 640 | } 641 | .workspace-ribbon-collapse-btn:hover, 642 | .side-dock-actions:hover, 643 | .side-dock-settings:hover{ 644 | visibility:visible; 645 | opacity:1; 646 | background:var(--button-hover); 647 | border:1px solid var(--color-gray); 648 | color:var(--color-dark-gray); 649 | } 650 | .side-dock-actions:hover, 651 | .side-dock-settings:hover{ 652 | left:0; 653 | } 654 | 655 | 656 | /* Hide dock's tab menu, and show them when hovered */ 657 | .workspace-tab-header-container{ 658 | position:absolute; 659 | top:0; 660 | opacity:0; 661 | z-index:1; 662 | height:1px; 663 | transition:opacity 0.2s; 664 | border-radius:var(--button-radius); 665 | border:var(--border); 666 | box-shadow:var(--window-shadow); 667 | width:100%; 668 | } 669 | .workspace-tab-header-container:hover{ 670 | opacity:1; 671 | height:auto; 672 | } 673 | 674 | /* remove border-radius on icons */ 675 | .workspace-tab-header.is-before-active .workspace-tab-header-inner, 676 | .workspace-tab-header.is-after-active .workspace-tab-header-inner, 677 | .workspace-tab-container-after.is-after-active .workspace-tab-header-inner{ 678 | border-radius:0; 679 | } 680 | 681 | .workspace-split.mod-horizontal.mod-left-split .workspace-ribbon.side-dock-ribbon, 682 | .workspace-split.mod-horizontal.mod-left-split .workspace-tab-header-container, 683 | .workspace-split.mod-horizontal.mod-left-split .workspace-tab-header-inner{ 684 | background:var(--background-secondary); 685 | } 686 | 687 | /* Remove style for border-on-active */ 688 | .workspace-tabs .workspace-leaf, 689 | .workspace-tabs .workspace-leaf.mod-active{ 690 | border:none; 691 | } 692 | 693 | /* 694 | --------------------------- 695 | Note Title 696 | --------------------------- 697 | */ 698 | .workspace-split.mod-root > .workspace-leaf:first-of-type:last-of-type .view-header, 699 | .workspace-split.mod-horizontal > .workspace-leaf .view-header, 700 | .workspace-split.mod-vertical > .workspace-leaf .view-header{ 701 | height:auto; 702 | display:flex; 703 | align-items:center; 704 | padding:13px 17px; 705 | border:none; 706 | background:none; 707 | } 708 | 709 | .view-header-title{ 710 | font-size:1.25rem; 711 | border-radius:var(--button-radius); 712 | padding:11px 17px; 713 | margin-left:0px; 714 | border:1px solid transparent; 715 | transition:border 0.2s, background 0.2s; 716 | } 717 | 718 | .view-header-title:hover,.view-header-title:focus{ 719 | background:var(--background-fifth); 720 | border:var(--border); 721 | } 722 | 723 | /* Remove Title gradient background */ 724 | .workspace-split.mod-root > .workspace-leaf:first-of-type:last-of-type.mod-active .view-header-title-container:after, 725 | .workspace-split.mod-horizontal > .workspace-leaf .view-header-title-container:after, 726 | .workspace-split.mod-vertical > .workspace-leaf .view-header-title-container:after{ 727 | background:none; 728 | pointer-events:none; /* Avoid blocking the space to edit title */ 729 | } 730 | 731 | .view-action,.view-header-icon{ 732 | display:flex; 733 | padding:11px; 734 | margin:0 3px; 735 | color:var(--color-dark-gray); 736 | border-radius:var(--button-radius); 737 | transition:0.1s background, 0.1s opacity; 738 | top:0; 739 | } 740 | 741 | .view-action:hover,.view-header-icon:hover{ 742 | background:var(--button-hover); 743 | color:var(--color-dark-gray); 744 | } 745 | 746 | .view-action:active,.view-header-icon:active{ 747 | opacity:0.75; 748 | } 749 | 750 | /* Adjust Title Background color */ 751 | .workspace-split.mod-vertical.mod-root .workspace-leaf-content{ 752 | background:var(--background-primary); 753 | } 754 | 755 | /* 756 | --------------------------- 757 | Pane Resizer Handle 758 | --------------------------- 759 | */ 760 | /* Hide them at default, shows only when hovered */ 761 | /* Also adjusted thickness for easier finding/gripping */ 762 | .workspace-split.mod-horizontal > * > .workspace-leaf-resize-handle{ 763 | background:none; 764 | height:7px; 765 | border:none; 766 | } 767 | 768 | .workspace-split.mod-vertical > * > .workspace-leaf-resize-handle, 769 | .workspace-split.mod-left-split > .workspace-leaf-resize-handle, 770 | .workspace-split.mod-right-split > .workspace-leaf-resize-handle{ 771 | background:none; 772 | width:7px; 773 | border:none; 774 | } 775 | 776 | .workspace-split .workspace-leaf-resize-handle:hover{ 777 | background:var(--color-accent); 778 | } 779 | 780 | /* Show some space when there are multiple notes in a single screen */ 781 | .workspace-split.mod-horizontal > .workspace-leaf{ 782 | padding-bottom:4px; 783 | } 784 | 785 | 786 | /* 787 | --------------------------- 788 | Main Pane Border Styling 789 | --------------------------- 790 | */ 791 | .workspace-split.mod-horizontal.mod-left-split.is-collapsed+.workspace-split.mod-root > .workspace-leaf:first-of-type .workspace-leaf-content{ 792 | border-top-left-radius: 0px; 793 | } 794 | 795 | .workspace-split.mod-vertical.mod-root .workspace-leaf:first-of-type{ 796 | border-top-right-radius: 0px; 797 | border-top-left-radius: 23px; 798 | } 799 | .workspace-split.mod-vertical.mod-root .workspace-leaf{ 800 | border-left:var(--border); 801 | } 802 | .workspace-split.mod-root > .workspace-leaf:last-of-type .workspace-leaf-content{ 803 | border-top-right-radius: 0px; 804 | } 805 | 806 | /* 807 | --------------------------- 808 | Left Dock Styling 809 | --------------------------- 810 | */ 811 | /* markdown-preview-sizer is note placed onto the dock */ 812 | 813 | /* Left dock navigation (new note, new folder, reorder) */ 814 | .mod-left-split .workspace-leaf-content[data-type="file-explorer"] .nav-header{ 815 | position:absolute; 816 | top:13px; 817 | right:-23px; 818 | flex-direction:column; 819 | z-index:1; 820 | padding:0; 821 | opacity:0; 822 | } 823 | .mod-left-split .workspace-leaf-content[data-type="file-explorer"] .nav-header:hover{ 824 | right:0; 825 | opacity:1; 826 | } 827 | 828 | .mod-left-split .workspace-leaf-content[data-type="file-explorer"] .nav-header .nav-buttons-container{ 829 | flex-direction:column; 830 | } 831 | .mod-left-split .nav-header .nav-action-button{ 832 | padding:7px 7px 3px; 833 | margin:0; 834 | color:var(--color-dark-gray); 835 | border-radius:var(--button-radius); 836 | transition:0.1s background, 0.1s opacity; 837 | background:var(--background-secondary); 838 | top:0; 839 | border:1px solid var(--color-gray); 840 | } 841 | .mod-left-split .workspace-leaf-content:not([data-type="file-explorer"]) .nav-header .nav-action-button{ 842 | margin:0 1px; 843 | } 844 | .mod-left-split .nav-header .nav-action-button:hover{ 845 | background:var(--button-hover); 846 | color:var(--color-dark-gray); 847 | } 848 | .mod-left-split .workspace-leaf-content[data-type="file-explorer"] .nav-header .nav-action-button:active{ 849 | opacity:0.75; 850 | } 851 | 852 | /* Left dock Vault title hidden */ 853 | .nav-folder.mod-root>.nav-folder-title{ 854 | display:none; 855 | } 856 | 857 | /* Give space for title-bar dragging */ 858 | .mod-left-split{ 859 | padding-top:22px; 860 | } 861 | 862 | .workspace-leaf-content[data-type="file-explorer"], 863 | .workspace-leaf-content[data-type="starred"], 864 | .mod-left-split .workspace-tabs .view-content .markdown-preview-view.mado-side-button .markdown-preview-sizer div{ 865 | background:var(--background-secondary); 866 | display:flex; 867 | flex-direction:column; 868 | gap:4px; 869 | user-select:none; 870 | padding-inline:8px; 871 | padding-block:8px; 872 | } 873 | 874 | .nav-folder-children, 875 | .item-list, 876 | .mod-left-split .workspace-tabs .view-content .markdown-preview-view.mado-side-button .markdown-preview-sizer p{ 877 | display:flex; 878 | flex-direction:column; 879 | gap:4px; 880 | } 881 | 882 | .mod-left-split .workspace-tabs .view-content .markdown-preview-view.mado-side-button .markdown-preview-sizer{ 883 | padding:0!important; 884 | } 885 | .mod-left-split .workspace-tabs .view-content .markdown-preview-view.is-readable-line-width.mado-side-button, 886 | .mod-left-split .workspace-tabs .view-content .markdown-preview-view.mado-side-button .markdown-preview-sizer p{ 887 | padding:0; 888 | margin:0; 889 | } 890 | 891 | /* Remove br (new line) */ 892 | .mod-left-split .workspace-tabs .view-content .markdown-preview-view.mado-side-button .markdown-preview-sizer br{ 893 | display:none; 894 | } 895 | 896 | 897 | /* Remove pusher? to decrease addition height */ 898 | .mod-left-split .workspace-tabs .view-content .markdown-preview-view.mado-side-button div.markdown-preview-pusher{ 899 | display:none; 900 | } 901 | /* Remove frontmatter */ 902 | .mod-left-split .workspace-tabs .view-content .markdown-preview-view.mado-side-button .markdown-preview-pusher+div{ 903 | display:none; 904 | } 905 | 906 | /* Define height to achieve margin-top:auto which automatically push the contents to the bottom */ 907 | .mod-left-split .workspace-tabs .view-content .markdown-preview-view.mado-side-button div{ 908 | height:100%; 909 | } 910 | .mod-left-split .workspace-tabs .view-content .markdown-preview-view.mado-side-button p:first-child{ 911 | margin-top:auto; 912 | } 913 | /* Also have to remove min-height to achieve function above */ 914 | .mod-left-split .workspace-tabs .view-content .markdown-preview-view.mado-side-button .markdown-preview-sizer.markdown-preview-section{ 915 | min-height:0!important; 916 | } 917 | 918 | /* Ignore padding when the setting Readable Line Length is turned off */ 919 | .mod-left-split .workspace-tabs .view-content .markdown-preview-view.mado-side-button{ 920 | padding:0; 921 | } 922 | 923 | /* Button Plugin: Adjust style to match the current theme */ 924 | .mod-left-split .workspace-tabs .view-content .markdown-preview-view.mado-side-button .button-default{ 925 | border:none; 926 | background:none; 927 | color:var(--color-black); 928 | margin:0; 929 | box-shadow:none; 930 | width:100%; 931 | } 932 | .mod-left-split .workspace-tabs .view-content .markdown-preview-view.mado-side-button .button-default:hover{ 933 | transform:none; 934 | } 935 | 936 | /* Button styling */ 937 | .nav-file-title, 938 | .nav-folder-title, 939 | .mod-left-split .workspace-tabs .view-content .markdown-preview-view.mado-side-button .button-default{ 940 | padding:7px 15px; 941 | border-radius:var(--button-radius); 942 | transition:0.05s ease-in; 943 | transition-property:background, opacity; 944 | opacity:1; 945 | display:flex; 946 | align-items:center; 947 | position:relative; 948 | overflow:hidden; /* to hide left border animation */ 949 | font-size:0.9rem; 950 | color:var(--color-black); 951 | width:100%; 952 | white-space:nowrap; 953 | } 954 | .mod-left-split .workspace-tabs .view-content .markdown-preview-view.mado-side-button .button-default{ 955 | padding:11px 15px; 956 | } 957 | 958 | /* Icon Folder Plugin: Adjust button icon size */ 959 | .mod-left-split .nav-file-title svg, 960 | .nav-folder-title svg, 961 | .mod-left-split .workspace-tabs .view-content .markdown-preview-view.mado-side-button .button-default svg{ 962 | width:24px; 963 | height:24px; 964 | margin-right:3px; 965 | } 966 | 967 | /* Adjust spacing between icon and text*/ 968 | .mod-left-split .workspace-tabs .view-content .markdown-preview-view.mado-side-button .button-default svg{ 969 | margin-right:11px; 970 | /* Prevent icon from shrinking when resizing */ 971 | flex-shrink:0; 972 | } 973 | 974 | .nav-file-title:active, 975 | .side-dock-ribbon-action:active{ 976 | opacity:0.8; 977 | } 978 | 979 | 980 | /* Navigation Button Left Border Styling and Animation */ 981 | .nav-file-title::before, 982 | .side-dock-ribbon-action::before{ 983 | content:""; 984 | position:absolute; 985 | left:0; 986 | top:50%; 987 | width:4px; 988 | height:0%; 989 | border-radius:30%; 990 | background:var(--color-accent); 991 | transform:translateY(10%); 992 | transition:all 0.3s cubic-bezier(1,.1,.36,1.22); 993 | } 994 | 995 | /* Navigation Button Selected and Hover */ 996 | .nav-file-title.is-active{ 997 | background:var(--button-selected); 998 | } 999 | 1000 | .nav-file-title.is-active::before{ 1001 | height:55%; 1002 | transform:translateY(-50%); 1003 | } 1004 | 1005 | .nav-file-title.is-active svg{ 1006 | animation:0.3s bounceback; 1007 | } 1008 | 1009 | .nav-file-title:hover, 1010 | .side-dock-ribbon-action:hover, 1011 | .mod-left-split .workspace-tabs .view-content .markdown-preview-view.mado-side-button .button-default:hover{ 1012 | background:var(--button-hover); 1013 | } 1014 | 1015 | .nav-file-title.is-active:hover{ 1016 | background:var(--button-selected-hover); 1017 | } 1018 | 1019 | @keyframes bounceback{ 1020 | 0% { transform:translateY(0%); } 1021 | 60% { transform:translateY(10%); } 1022 | 100% { transform:translateY(0%); } 1023 | } 1024 | 1025 | /* Prevent from overflowing and show ... instead */ 1026 | .nav-file-title-content{ 1027 | white-space: nowrap; 1028 | overflow: hidden; 1029 | text-overflow: ellipsis; 1030 | } 1031 | 1032 | 1033 | /* Remove sttles on button-on-active, but not during right-click-menu as that is alright */ 1034 | .nav-folder-title, .nav-file{ 1035 | border:none; 1036 | } 1037 | .workspace-leaf.mod-active .nav-folder.has-focus > .nav-folder-title, .workspace-leaf.mod-active .nav-file.has-focus{ 1038 | border-radius:none; 1039 | border:none; 1040 | background-color:none; 1041 | } 1042 | 1043 | 1044 | 1045 | /* 1046 | --------------------------- 1047 | Left Dock Styling but for the other panes 1048 | --------------------------- 1049 | */ 1050 | 1051 | /* Add a distinguishing border but opt out if tab is the first one */ 1052 | .mod-left-split .workspace-tabs:not(:nth-of-type(2)) .workspace-leaf-content:not([data-type="markdown"]):not([data-type="file-explorer"]):not([data-type="star"]){ 1053 | border-top:3px solid var(--color-gray); 1054 | } 1055 | 1056 | /* 1057 | --------------------------- 1058 | Right Dock Styling 1059 | --------------------------- 1060 | */ 1061 | .workspace-split.mod-horizontal.mod-right-split{ 1062 | padding:23px 33px; 1063 | } 1064 | 1065 | /* Adjust padding */ 1066 | .workspace-split.mod-horizontal.mod-right-split .markdown-preview-view{ 1067 | padding:11px 43px; 1068 | } 1069 | 1070 | /* Remove additional padding at the bottom for docked notes */ 1071 | .workspace-split.mod-horizontal.mod-right-split .markdown-preview-view .markdown-preview-sizer.markdown-preview-section{ 1072 | padding:0!important; 1073 | } 1074 | 1075 | /* Remove background to match main pane's color */ 1076 | .workspace-split.mod-horizontal.mod-right-split{ 1077 | background:var(--background-primary); 1078 | } 1079 | 1080 | /* Adjust embed size to fit into smaller dock */ 1081 | .workspace-split.mod-horizontal.mod-right-split .markdown-preview-view .internal-embed .markdown-embed .markdown-preview-view{ 1082 | padding:0; 1083 | min-height:0; 1084 | } 1085 | 1086 | .workspace-split.mod-horizontal.mod-right-split .workspace-ribbon.side-dock-ribbon, 1087 | .workspace-split.mod-horizontal.mod-right-split .workspace-tab-header-container, 1088 | .workspace-split.mod-horizontal.mod-right-split .workspace-tab-header-inner{ 1089 | background:var(--background-primary); 1090 | } 1091 | 1092 | .workspace-split.mod-horizontal.mod-right-split{ 1093 | padding-block:43px 43px; 1094 | gap:33px; 1095 | } 1096 | 1097 | .workspace-split.mod-horizontal.mod-right-split .workspace-tabs .workspace-leaf-content{ 1098 | background:var(--background-sixth); 1099 | } 1100 | 1101 | .workspace-split.mod-horizontal.mod-right-split .workspace-tabs{ 1102 | background:var(--background-sixth); 1103 | border-radius:var(--window-radius); 1104 | border:var(--border); 1105 | box-shadow:var(--window-shadow); 1106 | } 1107 | 1108 | /* 1109 | --------------------------- 1110 | Overall / Remaining Styling 1111 | --------------------------- 1112 | */ 1113 | 1114 | 1115 | /* Adjust remaining background colours to match the theme */ 1116 | /* Includes Docks' tab-menu buttons */ 1117 | .workspace-tabs, 1118 | .workspace-ribbon.side-dock-ribbon, 1119 | .workspace-tab-header-container, 1120 | .workspace-tab-header-inner{ 1121 | background:var(--background-secondary); 1122 | } 1123 | 1124 | /* Backgorund for the back of the pane */ 1125 | .workspace-split, 1126 | .workspace-split.mod-root{ 1127 | background:var(--background-secondary); 1128 | } 1129 | 1130 | /* Readjust translucent element */ 1131 | .is-translucent .workspace-split{ 1132 | opacity:var(--opacity-translucency); 1133 | } 1134 | .is-translucent .workspace-tabs{ 1135 | opacity:1; 1136 | } 1137 | 1138 | 1139 | /* Make search visual more apparent */ 1140 | .document-search-container{ 1141 | border-top:var(--border); 1142 | } 1143 | .document-search-close-button{ 1144 | color:var(--text-muted); 1145 | } 1146 | input[type='text'], 1147 | input[type='search'], 1148 | input[type='email'], 1149 | input[type='password'], 1150 | input[type='number']{ 1151 | border:var(--border); 1152 | } 1153 | 1154 | 1155 | 1156 | /* Centering the numbers and the background for backlinks etc. */ 1157 | .workspace-tabs .tree-item-flair-outer{ 1158 | vertical-align:middle; 1159 | display:inline-block; 1160 | } 1161 | 1162 | /* Allow some space for the arrow buttons for backlinks etc. */ 1163 | .workspace-tabs .search-result-file-match{ 1164 | padding-right:23px; 1165 | width:calc(100% - 13px); 1166 | } 1167 | .workspace-tabs .search-result-hover-button{ 1168 | color:var(--text-muted); 1169 | } 1170 | 1171 | /* 1172 | --------------------------- --------------------------- 1173 | --------------------------- --------------------------- 1174 | Settings 1175 | --------------------------- --------------------------- 1176 | --------------------------- --------------------------- 1177 | */ 1178 | 1179 | .modal{ 1180 | border-radius:var(--window-radius); 1181 | animation:0.2s popup forwards; 1182 | } 1183 | @keyframes popup{ 1184 | 0% { transform:scale(70%); opacity:0; } 1185 | 15% { transform:scale(80%); opacity:0.1; } 1186 | 35% { transform:scale(102%); } 1187 | 45% { opacity:0.3; } 1188 | 65% { opacity:0.7; } 1189 | 100% { transform:scale(100%); opacity:1; } 1190 | } 1191 | 1192 | /* Adjust width and height */ 1193 | .modal.mod-settings{ 1194 | max-width:67vw; 1195 | height:83vh; 1196 | } 1197 | 1198 | .modal.mod-settings .vertical-tabs-container, 1199 | .modal.mod-settings .vertical-tab-header, 1200 | .modal.mod-settings .vertical-tab-content-container{ 1201 | height:100%; 1202 | } 1203 | 1204 | 1205 | 1206 | .modal.mod-settings .vertical-tab-header{ 1207 | flex:0 0 243px; 1208 | } 1209 | 1210 | /* close button styling */ 1211 | .modal-close-button{ 1212 | display:flex; 1213 | padding:7px 11px 14px; 1214 | color:var(--color-dark-gray); 1215 | border-radius:var(--button-radius); 1216 | transition:0.1s background,0.1s opacity; 1217 | z-index:10; 1218 | opacity:0.7; 1219 | top:5px; 1220 | right:5px; 1221 | } 1222 | .modal-close-button:hover{ 1223 | background:var(--button-hover); 1224 | color:var(--color-dark-gray); 1225 | opacity:1; 1226 | } 1227 | 1228 | /* Make font red? */ 1229 | .mod-warning{ 1230 | color:var(--text-error); 1231 | } 1232 | 1233 | /* Make text readable in red background */ 1234 | button.mod-warning, 1235 | button.mod-cta, 1236 | .setting-hotkey.mod-active, 1237 | .setting-hotkey.has-conflict{ 1238 | color:var(--text-on-accent); 1239 | } 1240 | 1241 | 1242 | /* Button styling for small icon */ 1243 | .setting-editor-extra-setting-button.clickable-icon{ 1244 | display:flex; 1245 | padding:11px; 1246 | color:var(--color-dark-gray); 1247 | border-radius:var(--button-radius); 1248 | transition:0.1s background; 1249 | opacity:0.7; 1250 | margin:0; 1251 | } 1252 | 1253 | .pickr+.setting-editor-extra-setting-button.clickable-icon, 1254 | .setting-editor-extra-setting-button.clickable-icon+.checkbox-container, 1255 | .setting-editor-extra-setting-button.clickable-icon+.mod-cta{ 1256 | margin-left:10px; 1257 | } 1258 | .setting-editor-extra-setting-button.clickable-icon:hover{ 1259 | background:var(--button-hover); 1260 | color:var(--color-dark-gray); 1261 | } 1262 | 1263 | 1264 | 1265 | /* 1266 | --------------------------- 1267 | Settings - Left sidebar 1268 | --------------------------- 1269 | */ 1270 | 1271 | 1272 | .modal.mod-settings .vertical-tab-header{ 1273 | background:var(--background-secondary); 1274 | padding:0; 1275 | display:flex; 1276 | flex-direction:column; 1277 | gap:33px; 1278 | } 1279 | 1280 | /* Remove top padding */ 1281 | .vertical-tab-header-group{ 1282 | padding:0; 1283 | } 1284 | 1285 | /* Button styling */ 1286 | .vertical-tab-header-group-items{ 1287 | background:var(--background-secondary); 1288 | display:flex; 1289 | flex-direction:column; 1290 | gap:4px; 1291 | user-select:none; 1292 | padding-inline:8px; 1293 | padding-block:8px; 1294 | } 1295 | 1296 | .vertical-tab-nav-item{ 1297 | padding:7px 15px; 1298 | border-radius:var(--button-radius); 1299 | transition:0.05s ease-in; 1300 | transition-property:background, opacity; 1301 | opacity:1; 1302 | display:flex; 1303 | align-items:center; 1304 | position:relative; 1305 | overflow:hidden; /* to hide left border animation */ 1306 | font-size:0.9rem; 1307 | color:var(--color-black); 1308 | width:100%; 1309 | white-space:nowrap; 1310 | border:none; 1311 | background:none; 1312 | } 1313 | 1314 | .vertical-tab-nav-item::before{ 1315 | content:""; 1316 | position:absolute; 1317 | left:0; 1318 | top:50%; 1319 | width:4px; 1320 | height:0%; 1321 | border-radius:30%; 1322 | background:var(--color-accent); 1323 | transform:translateY(10%); 1324 | transition:all 0.3s cubic-bezier(1,.1,.36,1.22); 1325 | } 1326 | 1327 | .vertical-tab-nav-item.is-active{ 1328 | background:var(--button-selected); 1329 | } 1330 | 1331 | .vertical-tab-nav-item.is-active::before{ 1332 | height:55%; 1333 | transform:translateY(-50%); 1334 | } 1335 | 1336 | .vertical-tab-nav-item:hover{ 1337 | background:var(--button-hover); 1338 | } 1339 | 1340 | .vertical-tab-nav-item.is-active:hover{ 1341 | background:var(--button-selected-hover); 1342 | } 1343 | 1344 | /* Make it so that the title can be distinguished from the buttons */ 1345 | .vertical-tab-header-group-title{ 1346 | background:var(--color-gray); 1347 | color:var(--text-muted); 1348 | font-size:0.75rem; 1349 | padding:7px 13px; 1350 | border-top:1px solid var(--modal-group-border); 1351 | border-bottom:1px solid var(--modal-group-border); 1352 | } 1353 | 1354 | 1355 | /* 1356 | --------------------------- 1357 | Settings - Right Content 1358 | --------------------------- 1359 | */ 1360 | 1361 | .modal.mod-settings .vertical-tab-content-container{ 1362 | background:var(--background-primary); 1363 | border-left:var(--border); 1364 | padding-top:53px; 1365 | } 1366 | 1367 | .vertical-tab-content{ 1368 | background:var(--background-primary); 1369 | } 1370 | 1371 | 1372 | 1373 | /* 1374 | --------------------------- --------------------------- 1375 | --------------------------- --------------------------- 1376 | Special Class: mado-header 1377 | --------------------------- --------------------------- 1378 | --------------------------- --------------------------- 1379 | */ 1380 | .mado-header .markdown-preview-section>div>*{ 1381 | position:relative; 1382 | padding:13px 33px 13px 63px; 1383 | margin:0 -30px; 1384 | border:var(--border); 1385 | border-radius:var(--button-radius); 1386 | background:var(--background-fourth); 1387 | transition:background 0.1s; 1388 | } 1389 | 1390 | 1391 | .mado-header .markdown-preview-section h1{ 1392 | font-size:1.2rem; 1393 | font-weight:700; 1394 | padding:13px 43px; 1395 | margin-top:17px; 1396 | } 1397 | .mado-header h2{ 1398 | font-size:1.17rem; 1399 | } 1400 | .mado-header h3{ 1401 | font-size:1.07rem; 1402 | } 1403 | .mado-header h4{ 1404 | font-size:1rem; 1405 | } 1406 | .mado-header h5{ 1407 | font-size:1rem; 1408 | font-weight:700; 1409 | } 1410 | .mado-header h6{ 1411 | font-size:1rem; 1412 | font-weight:700; 1413 | } 1414 | 1415 | 1416 | /* left border to indicate collapsible action */ 1417 | .mado-header h1:before, 1418 | .mado-header h2:before, 1419 | .mado-header h3:before, 1420 | .mado-header h4:before, 1421 | .mado-header h5:before, 1422 | .mado-header h6:before{ 1423 | content:""; 1424 | position:absolute; 1425 | left:0px; 1426 | top:0; 1427 | height:100%; 1428 | border-radius:var(--button-radius); 1429 | border-left:3px solid var(--color-accent-alt); 1430 | } 1431 | 1432 | .mado-header h1:before{ 1433 | border-radius:4px 0 0 4px; 1434 | border-left:3px solid var(--color-accent); 1435 | } 1436 | .mado-header h2:before{ 1437 | left:0px; 1438 | } 1439 | .mado-header h3:before{ 1440 | left:2px; 1441 | } 1442 | .mado-header h4:before{ 1443 | left:4px; 1444 | } 1445 | .mado-header h5:before{ 1446 | left:6px; 1447 | } 1448 | .mado-header h6:before{ 1449 | left:8px; 1450 | } 1451 | 1452 | 1453 | .mado-header .heading-collapse-indicator{ 1454 | margin-left:0; 1455 | width:100%; 1456 | height:100%; 1457 | padding:9px 33px; 1458 | top:0; 1459 | left:0; 1460 | position:absolute; 1461 | } 1462 | .mado-header h1 .heading-collapse-indicator{ 1463 | padding:13px 33px; 1464 | text-align:right; 1465 | } 1466 | 1467 | .mado-header h1:hover, 1468 | .mado-header h2:hover, 1469 | .mado-header h3:hover, 1470 | .mado-header h4:hover, 1471 | .mado-header h5:hover, 1472 | .mado-header h6:hover{ 1473 | background:var(--background-fifth); 1474 | } 1475 | 1476 | .mado-header .markdown-preview-section>div>p{ 1477 | padding-block:17px; 1478 | } 1479 | .mado-header .markdown-preview-section>div>ul, 1480 | .mado-header .markdown-preview-section>div>ol{ 1481 | padding-block:23px; 1482 | } 1483 | .mado-header .markdown-preview-section>div>hr{ 1484 | display:none; 1485 | } 1486 | .mado-header .markdown-preview-section>div>pre{ 1487 | background:var(--background-code-for-mado); 1488 | } 1489 | .mado-header .markdown-preview-section>div>blockquote{ 1490 | padding-block:33px; 1491 | background:var(--background-secondary); 1492 | /* border-left:7px solid var(--background-modifier-border); */ 1493 | } 1494 | .mado-header .markdown-preview-section>div>blockquote:before{ 1495 | background:none; 1496 | } 1497 | .mado-header .markdown-preview-section>div>.callout{ 1498 | padding-block:13px; 1499 | background:var(--background-secondary); 1500 | } 1501 | .mado-header .markdown-preview-section>div>.callout .callout-title{ 1502 | /* margin:-13px -33px -13px -63px; */ 1503 | margin:-7px -27px -7px -57px; 1504 | border-radius:var(--button-radius); 1505 | } 1506 | .mado-header .markdown-preview-section>div>blockquote>ul, 1507 | .mado-header .markdown-preview-section>div>blockquote>ol{ 1508 | padding:0; 1509 | } 1510 | .mado-header .markdown-preview-section>div>table{ 1511 | width:calc(100% + 60px); 1512 | border-radius:var(--button-radius); 1513 | border-collapse:separate; 1514 | padding:0; 1515 | background:var(--background-secondary); 1516 | } 1517 | .mado-header .markdown-preview-section>div>table th, 1518 | .mado-header .markdown-preview-section>div>table td{ 1519 | padding:11px 13px; 1520 | text-align:center; 1521 | width:83px; 1522 | } 1523 | .mado-header .markdown-preview-section>div>table th{ 1524 | background-color:var(--background-secondary); 1525 | } 1526 | .mado-header .markdown-preview-section>div>table td{ 1527 | background:var(--background-fourth); 1528 | border:none; 1529 | } 1530 | .mado-header .markdown-preview-section>div>table thead>tr>*:first-child{ 1531 | border-radius:4px 0 0 0; 1532 | } 1533 | .mado-header .markdown-preview-section>div>table thead>tr>*:last-child{ 1534 | border-radius:0 4px 0 0; 1535 | } 1536 | .mado-header .markdown-preview-section>div>table tbody>tr:last-child>*:first-child{ 1537 | border-radius:0 0 0 4px; 1538 | } 1539 | .mado-header .markdown-preview-section>div>table tbody>tr:last-child>*:last-child{ 1540 | border-radius:0 0 4px 0; 1541 | } 1542 | 1543 | 1544 | 1545 | /* 1546 | --------------------------- --------------------------- 1547 | --------------------------- --------------------------- 1548 | Community Plugin Support 1549 | --------------------------- --------------------------- 1550 | --------------------------- --------------------------- 1551 | */ 1552 | 1553 | /* 1554 | --------------------------- 1555 | Banner Plugin 1556 | --------------------------- 1557 | */ 1558 | /* Fixing extra spacing on top */ 1559 | .workspace-split.mod-vertical.mod-root .markdown-preview-sizer.markdown-preview-section div.obsidian-banner-wrapper{ 1560 | /* transform is the culprit, possible reason: https://stackoverflow.com/questions/70995180/strange-change-in-the-behavior-of-a-modal-child-component-after-setting-style */ 1561 | animation:none; 1562 | } 1563 | .mado-header .markdown-preview-section>div.obsidian-banner-wrapper>*{ 1564 | padding:0; 1565 | margin:0; 1566 | position:absolute; 1567 | } -------------------------------------------------------------------------------- /theme.css: -------------------------------------------------------------------------------- 1 | /* 2 | --------------------------- --------------------------- --------------------------- 3 | --------------------------- --------------------------- --------------------------- 4 | Mado 11 - Obsidian Theme by hydescarf 5 | https://github.com/hydescarf/Obsidian-Theme-Mado-11 6 | --------------------------- --------------------------- --------------------------- 7 | --------------------------- --------------------------- --------------------------- 8 | */ 9 | 10 | body{ 11 | --accent-h: 210; 12 | --accent-s: 93%; 13 | --accent-l: 62%; 14 | 15 | --bgcolor-h:204; 16 | --bgcolor-s:45%; 17 | --bgcolor-l:97%; 18 | 19 | --titlebar-background:var(--background-secondary); 20 | --titlebar-background-focused:var(--background-secondary); 21 | 22 | --background-modifier-hover:var(--color-base-hover); 23 | 24 | --bold-weight:var(--font-bold); 25 | --italic-color:var(--text-muted); 26 | --code-normal:var(--text-muted); 27 | --blockquote-color:var(--color-muted); 28 | 29 | --background-primary:var(--color-base-00); 30 | --background-secondary:var(--color-base-20); 31 | --checklist-done-color:var(--color-base-50); 32 | 33 | --icon-m:20px; 34 | --icon-l:20px; 35 | --divider-width:4px; 36 | --callout-padding:0px; 37 | --callout-title-padding:11px; 38 | --callout-content-padding:0 11px 0 27px; 39 | 40 | --embed-padding:13px 23px; 41 | --list-indent:37px; 42 | 43 | --header-height:43px; 44 | --tab-stacked-header-width:53px; 45 | --vault-name-font-size:14px; 46 | 47 | 48 | /* custom */ 49 | --border:1px solid var(--tab-outline-color); 50 | --button-radius:4px; 51 | --panel-radius:8px; 52 | --window-radius:23px; 53 | --button-padding-icon:7px; 54 | --button-padding-long:11px 15px; 55 | 56 | --background-fourth:var(--color-base-00-0); 57 | --background-fifth:var(--color-base-20-0); 58 | --panel-shadow:0 1px 3px var(--color-base-shadow); 59 | --panel-shadow-hover:0 3px 5px var(--color-base-shadow-hover); 60 | --window-shadow:0 0 9px var(--color-base-shadow-hover); 61 | --window-shadow-left:-4px 0 5px var(--color-base-shadow-hover); 62 | --window-shadow-right:4px 0 5px var(--color-base-shadow-hover); 63 | 64 | --sidebar-size-left:270px; 65 | --sidebar-size-right:270px; 66 | 67 | 68 | --color-strikethrough:var(--text-faint); 69 | --italic-color:var(--color-italic); 70 | --inline-code-color:var(--color-red); 71 | 72 | --hovering-trigger-size:1px; 73 | 74 | 75 | } 76 | body.is-translucent{ 77 | --background-primary:var(--color-base-00-trans); 78 | --background-secondary:var(--color-base-20-trans); 79 | --background-fourth:var(--color-base-00-0-trans); 80 | } 81 | body:is(:not(.css-settings-manager),.toggle-easy-toggle){ 82 | --hovering-trigger-size:13px; 83 | } 84 | 85 | .theme-light, 86 | .is-mobile.theme-light, 87 | .is-tablet.theme-light{ 88 | --color-base-00:hsla(calc(var(--bgcolor-h) - 0), calc(var(--bgcolor-s) - 0%), calc(var(--bgcolor-l) - 0%), 1); 89 | --color-base-10:hsla(calc(var(--bgcolor-h) + 6), calc(var(--bgcolor-s) - 6%), calc(var(--bgcolor-l) - 4%), 1); 90 | 91 | --color-base-05:hsla(calc(var(--bgcolor-h) + 3), calc(var(--bgcolor-s) - 28%), calc(var(--bgcolor-l) - 7%), 1); 92 | --color-base-20:hsla(calc(var(--bgcolor-h) + 9), calc(var(--bgcolor-s) - 0%), calc(var(--bgcolor-l) - 2%), 1); 93 | 94 | --color-base-00-trans:hsla(calc(var(--bgcolor-h) - 0), calc(var(--bgcolor-s) - 0%), calc(var(--bgcolor-l) - 0%), 0.5); /*for transparency background*/ 95 | --color-base-00-trans-alt:hsla(calc(var(--bgcolor-h) - 0), calc(var(--bgcolor-s) - 35%), calc(var(--bgcolor-l) - 7%), 0.8); /* alt for transparency background sidebar (hidden, sliding mode) */ 96 | --color-base-20-trans:hsla(calc(var(--bgcolor-h) + 6), calc(var(--bgcolor-s) - 8%), calc(var(--bgcolor-l) - 2%), 0.5); 97 | --color-base-00-0:hsla(calc(var(--bgcolor-h) - 27), calc(var(--bgcolor-s) - 12%), calc(var(--bgcolor-l) + 2%), 1); /* very white */ 98 | --color-base-20-0:hsla(calc(var(--bgcolor-h) + 3), calc(var(--bgcolor-s) - 27%), calc(var(--bgcolor-l) - 7%), 0.1); /* hovered version for above */ 99 | --color-base-00-0-trans:hsla(calc(var(--bgcolor-h) - 20), calc(var(--bgcolor-s) - 12%), calc(var(--bgcolor-l) + 2%), 0.5); 100 | --color-base-shadow:hsla(212, 17%, 80%, 0.2); /* shadow */ 101 | --color-base-shadow-hover:hsla(212, 17%, 80%, 0.3); /* shadow hover*/ 102 | --color-base-hover:var(--color-base-shadow-hover); /* hover*/ 103 | 104 | --color-base-35:hsla(210, 15%, 73%, 1); 105 | --color-base-50:hsla(217, 15%, 73%, 1); 106 | --color-base-70:hsla(218, 19%, 39%, 1); 107 | --color-base-100:hsla(0, 0%, 13%, 1); /* text-normal color */ 108 | 109 | --color-accent-1: hsl(calc(var(--accent-h) - 0), calc(var(--accent-s) - 0%), calc(var(--accent-l) + 10%)); 110 | --color-accent-2: hsl(calc(var(--accent-h) - 0), calc(var(--accent-s) - 0%), calc(var(--accent-l) - 5%)); 111 | 112 | --color-red:hsla(365, 85%, 55%, 1); 113 | --color-muted:var(--color-base-70); 114 | --color-italic:hsla(215, 43%, 63%, 1); 115 | 116 | --color-highlight:var(--text-normal); /* for highlight text color */ 117 | } 118 | .theme-dark, 119 | .is-mobile.theme-dark, 120 | .is-tablet.theme-dark{ 121 | --bgcolor-h:215; 122 | --bgcolor-s:17%; 123 | --bgcolor-l:19%; 124 | 125 | --color-base-00:hsla(calc(var(--bgcolor-h) - 0), calc(var(--bgcolor-s) - 0%), calc(var(--bgcolor-l) - 0%), 1); 126 | --color-base-10:hsla(calc(var(--bgcolor-h) - 1), calc(var(--bgcolor-s) + 7%), calc(var(--bgcolor-l) - 4%), 1); 127 | 128 | --color-base-05:hsla(calc(var(--bgcolor-h) - 8), calc(var(--bgcolor-s) - 0%), calc(var(--bgcolor-l) - 9%), 0.5); 129 | --color-base-20:hsla(calc(var(--bgcolor-h) - 1), calc(var(--bgcolor-s) + 7%), calc(var(--bgcolor-l) - 4%), 1); 130 | 131 | --color-base-00-trans:hsla(calc(var(--bgcolor-h) - 0), calc(var(--bgcolor-s) - 0%), calc(var(--bgcolor-l) - 0%), 0.5); /*for transparency background*/ 132 | --color-base-00-trans-alt:hsla(calc(var(--bgcolor-h) - 0), calc(var(--bgcolor-s) - 0%), calc(var(--bgcolor-l) - 6%), 0.8); /* alt for transparency background sidebar (hidden, sliding mode) */ 133 | --color-base-20-trans:hsla(calc(var(--bgcolor-h) - 1), calc(var(--bgcolor-s) + 7%), calc(var(--bgcolor-l) - 4%), 0.5); 134 | --color-base-00-0:hsla(calc(var(--bgcolor-h) - 0), calc(var(--bgcolor-s) - 0%), calc(var(--bgcolor-l) + 3%), 0.9); /* very white */ 135 | --color-base-20-0:hsla(calc(var(--bgcolor-h) - 0), calc(var(--bgcolor-s) - 7%), calc(var(--bgcolor-l) - 9%), 0.1); /* hovered version for above */ 136 | --color-base-00-0-trans:hsla(calc(var(--bgcolor-h) - 0), calc(var(--bgcolor-s) - 0%), calc(var(--bgcolor-l) + 3%), 0.5); 137 | --color-base-shadow:hsla(207, 10%, 10%, 0.1); /* shadow */ 138 | --color-base-shadow-hover:hsla(212, 17%, 0%, 0.3); /* shadow hover*/ 139 | --color-base-hover:var(--color-base-05); /* hover*/ 140 | 141 | --color-base-30:hsla(215, 22%, 13%, 1); 142 | --color-base-35:hsla(210, 15%, 33%, 1); 143 | --color-base-50:hsla(217, 18%, 50%, 0.7); 144 | --color-base-70:hsl(218, 17%, 58%); /* text-muted */ 145 | --color-base-100:hsla(0, 0%, 73%, 1); /* text-normal color */ 146 | 147 | --color-accent: hsl(calc(var(--accent-h) - 0), calc(var(--accent-s) + 13%), calc(var(--accent-l) + 3%)); 148 | --color-accent-1: hsl(calc(var(--accent-h) - 3), calc(var(--accent-s) - 13%), calc(var(--accent-l) - 3%)); 149 | --color-accent-2: hsl(calc(var(--accent-h) - 0), calc(var(--accent-s) + 7%), calc(var(--accent-l) + 2%)); 150 | 151 | --color-red:hsla(365, 90%, 65%, 1); 152 | --color-muted:hsl(218, 17%, 62%); 153 | --color-italic:hsla(215, 33%, 60%, 1); 154 | 155 | --color-highlight:hsla(45, 63%, 63%, 1); /* for highlight text color */ 156 | --text-highlight-bg:hsla(45, 53%, 53%, 1); /* for highlight text underline color */ 157 | } 158 | .theme-dark:is(.THT-background,.THT-underline-light){ 159 | --color-highlight:hsla(45, 53%, 13%, 1); 160 | } 161 | .theme-light:is(.THT-underline,.THT-underline-light){ 162 | --color-highlight:var(--color-yellow); 163 | --text-highlight-bg:hsla(45, 53%, 73%, 1); 164 | } 165 | 166 | body.theme-daisy-blue{ 167 | --accent-h: 210; 168 | --accent-s: 93%; 169 | --accent-l: 62%; 170 | } 171 | body.theme-red-sky{ 172 | --accent-h: 0; 173 | --accent-s: 88%; 174 | --accent-l: 57%; 175 | } 176 | body.theme-red-sky.theme-dark{ 177 | --accent-h: 0; 178 | --accent-s: 73%; 179 | --accent-l: 57%; 180 | } 181 | body.theme-violette{ 182 | --accent-h: 254; 183 | --accent-s: 80%; 184 | --accent-l: 68%; 185 | } 186 | body.theme-violette.theme-dark{ 187 | --accent-h: 255; 188 | --accent-s: 73%; 189 | --accent-l: 68%; 190 | } 191 | body.theme-greenery{ 192 | --accent-h: 125; 193 | --accent-s: 83%; 194 | --accent-l: 43%; 195 | } 196 | body.theme-greenery.theme-dark{ 197 | --accent-h: 125; 198 | --accent-s: 81%; 199 | --accent-l: 38%; 200 | } 201 | body.theme-yellowish{ 202 | --accent-h: 43; 203 | --accent-s: 76%; 204 | --accent-l: 50%; 205 | } 206 | body.theme-yellowish.theme-dark{ 207 | --accent-h: 47; 208 | --accent-s: 85%; 209 | --accent-l: 50%; 210 | } 211 | body.theme-orange-jist{ 212 | --accent-h: 23; 213 | --accent-s: 100%; 214 | --accent-l: 61%; 215 | } 216 | body.theme-deep-blue{ 217 | --accent-h: 229; 218 | --accent-s: 83%; 219 | --accent-l: 53%; 220 | } 221 | body.theme-deep-blue.theme-dark{ 222 | --accent-h: 229; 223 | --accent-s: 78%; 224 | --accent-l: 63%; 225 | } 226 | body.theme-tea-teal{ 227 | --accent-h: 195; 228 | --accent-s: 63%; 229 | --accent-l: 52%; 230 | } 231 | body.theme-magenta-pink{ 232 | --accent-h: 302; 233 | --accent-s: 70%; 234 | --accent-l: 60%; 235 | } 236 | body.theme-grayscale{ 237 | --accent-h: 234; 238 | --accent-s: 15%; 239 | --accent-l: 45%; 240 | } 241 | body.theme-grayscale.theme-dark{ 242 | --accent-h: 224; 243 | --accent-s: 12%; 244 | --accent-l: 63%; 245 | } 246 | 247 | body.mod-macos{ 248 | --frame-left-space:80px; 249 | } 250 | 251 | 252 | 253 | 254 | 255 | 256 | /* 257 | --------------------------- --------------------------- 258 | --------------------------- --------------------------- 259 | Mado Layout Basic Styling 260 | --------------------------- --------------------------- 261 | --------------------------- --------------------------- 262 | */ 263 | 264 | body, body.is-translucent{ 265 | background-color:var(--background-secondary); 266 | } 267 | 268 | /* Background Wave design */ 269 | body.toggle-wave-background:before{ 270 | content:""; 271 | position:absolute; 272 | width:100%; 273 | height:100%; 274 | 275 | -webkit-mask-image: url('data:image/svg+xml;utf8,'); 276 | -webkit-mask-size:300% 300px; 277 | -webkit-mask-position:88.5% -73px; 278 | -webkit-mask-repeat:no-repeat; 279 | background-color:var(--color-accent-2); 280 | transform:rotateZ(180deg); 281 | opacity:0.3; 282 | } 283 | 284 | /* remove padding-top when fullscreen in obsidian-ver titlebar */ 285 | body.is-frameless:not(.is-hidden-frameless).is-fullscreen{ 286 | padding-top:0; 287 | } 288 | 289 | /* hidden scrollbar */ 290 | body:not(.is-mobile):is(:not(.css-settings-manager),.toggle-scrollbar) ::-webkit-scrollbar-thumb{ 291 | visibility:hidden; 292 | } 293 | body ::-webkit-scrollbar-thumb:hover:hover{ 294 | visibility:initial; 295 | } 296 | 297 | /* Switching overflow:auto to overlay */ 298 | .workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container, 299 | body:not(.is-mobile):is(:not(.css-settings-manager),.toggle-scrollbar-overlay) :is(.callout-content,.markdown-rendered pre,.markdown-source-view.mod-cm6 .math-block > mjx-container){ 300 | overflow-x:overlay; 301 | } 302 | body:not(.is-mobile):is(:not(.css-settings-manager),.toggle-scrollbar-overlay) :is(.cm-scroller,.workspace-leaf-content .view-content,.backlink-pane, .outgoing-link-pane,.item-list,.search-result-container.mod-global-search,.open-vault-options,.recent-vaults-list,.workspace-leaf-content .view-content:not(:has(.canvas-wrapper)) .markdown-preview-view,,.community-modal-info,.prompt-results,.suggestion,.vertical-tab-content,.pdf-scroll-container,.nav-files-container){ 303 | overflow-y:overlay; 304 | } 305 | /* Switching overflow:scroll to overlay */ 306 | body:not(.is-mobile):is(:not(.css-settings-manager),.toggle-scrollbar-overlay) .CodeMirror-hscrollbar{ 307 | overflow-x:overlay; 308 | } 309 | body:not(.is-mobile):is(:not(.css-settings-manager),.toggle-scrollbar-overlay) .CodeMirror-vscrollbar{ 310 | overflow-y:overlay; 311 | } 312 | 313 | 314 | /* remove backgrounds */ 315 | .workspace, 316 | .workspace-tabs .workspace-leaf, 317 | .workspace-ribbon, 318 | .workspace-split, 319 | .workspace-split .view-content, 320 | .workspace-split.mod-root, 321 | body.is-hidden-frameless:not(.is-fullscreen):is(.is-focused,) .titlebar-button-container:is(.mod-right,.mod-left), 322 | .workspace-tab-header-container{ /* remove background as parent will be the one to have it instead */ 323 | background-color:initial; 324 | background:none; 325 | } 326 | 327 | 328 | /* remove background to adapt translucent mode */ 329 | .is-translucent:not(.is-fullscreen) .titlebar, 330 | .mod-root .workspace-tabs .workspace-leaf, 331 | body.is-translucent.is-hidden-frameless:not(.is-fullscreen) .titlebar-button-container:is(.mod-right,.mod-left){ 332 | background:none; 333 | } 334 | 335 | /* force background color as it is unnoticable during sliding(hidden) mode*/ 336 | body.is-translucent:is(:not(.css-settings-manager),.toggle-side-ribbons) .side-dock-ribbon.mod-left, 337 | body.is-translucent:is(:not(.css-settings-manager),.toggle-sidebar-buttons) .mod-top:is(.mod-top-left-space,.mod-top-right-space) .workspace-tab-header-container, 338 | body.is-translucent:is(:not(.css-settings-manager),.toggle-tab-section) .workspace-split.mod-vertical.mod-root .workspace-tab-header-container{ 339 | background:var(--color-base-00-trans-alt)!important; 340 | } 341 | 342 | 343 | 344 | 345 | 346 | /* remove distinguishing-borders on sidebars and headers */ 347 | .workspace-ribbon, 348 | .workspace-tab-header-container{ 349 | border:none; 350 | } 351 | 352 | /* hide handle visibility when not hovered */ 353 | .workspace-leaf-resize-handle{ 354 | border-color:transparent; 355 | } 356 | 357 | 358 | /* Toggle visibility on Sidebar Tab Icons */ 359 | /* and on Left Sidebar (File Explorer) */ 360 | /* and on Toggle Sidebar (3 rows) */ 361 | /* and on Note Title Header Bar */ 362 | /* and on Titlebar */ 363 | body:not(.is-mobile):is(:not(.css-settings-manager),.toggle-sidebar-buttons) .workspace-split.mod-horizontal:is(.mod-left-split, .mod-right-split) .workspace-tab-header-container, 364 | body:not(.is-mobile):is(:not(.css-settings-manager),.TEB-hide-vertical) .workspace-leaf-content[data-type="file-explorer"] .nav-buttons-container, 365 | body:not(.is-mobile):is(.TEB-hide-horizontal,.TEB-show-vertical,.TEB-show-horizontal) .workspace-leaf-content[data-type="file-explorer"] .nav-buttons-container, 366 | body:not(.is-mobile):is(:not(.css-settings-manager),.toggle-sidebar-toggle) .workspace-split .sidebar-toggle-button, 367 | body.toggle-note-header .workspace-split.mod-vertical.mod-root .view-header, 368 | body:not(.is-mobile):is(:not(.css-settings-manager),.toggle-titlebar-buttons) .titlebar{ 369 | opacity:0; 370 | transition:opacity 0.1s; 371 | } 372 | 373 | body .workspace-split.mod-horizontal:is(.mod-left-split, .mod-right-split) .workspace-tab-header-container:hover, 374 | body .workspace-leaf-content[data-type="file-explorer"] .nav-header:hover .nav-buttons-container, 375 | body .workspace-split.mod-vertical.mod-root .workspace-tab-header-container:hover:hover:hover div, 376 | body .workspace-split.mod-vertical.mod-root .view-header:hover, 377 | body.toggle-note-header .workspace-split.mod-vertical.mod-root .view-header:focus-within, 378 | body .sidebar-toggle-button:hover:hover, 379 | body .workspace-tab-header-container:hover:hover .sidebar-toggle-button, 380 | body.is-grabbing.is-grabbing.is-grabbing.is-grabbing .app-container:not(.no-transition) .workspace-split .workspace-tabs .workspace-tab-header-container, 381 | body .titlebar:hover:hover:hover:hover:hover:hover:hover:hover:hover{ 382 | opacity:1; 383 | } 384 | 385 | 386 | /* Make spacing to match collapsed left-ribbon-dock, also remove background for wave background */ 387 | .is-mobilebody, .is-mobile .app-container, 388 | .is-mobile .horizontal-main-container, 389 | .workspace-ribbon.mod-left.is-collapsed{ 390 | background:none; 391 | } 392 | 393 | /* remove border-bottom below left-sidebar-toggle button */ 394 | .workspace-ribbon.mod-left:before{ 395 | border:none; 396 | } 397 | 398 | /* Hide Vault Title */ 399 | body:is(:not(.css-settings-manager),.toggle-vault-title) .nav-folder-title[data-path="/"]{ 400 | display:none; 401 | } 402 | 403 | 404 | /* Vault hidden by default, and show up when hovered at the very bottom part of the sidebar */ 405 | body:not(.is-mobile) .workspace-split.mod-left-split .workspace-sidedock-vault-profile{ 406 | margin-bottom:-40px!important; 407 | opacity:0; 408 | transition:margin 0.2s, opacity 0.1s; 409 | padding:5px; 410 | } 411 | body:not(.is-mobile) .workspace-split.mod-left-split .workspace-sidedock-vault-profile:hover{ 412 | margin-bottom:0!important; 413 | opacity:1; 414 | } 415 | body:not(.is-mobile) .workspace-split.mod-left-split .workspace-drawer-vault-switcher{ 416 | padding:0; 417 | } 418 | body:not(.is-mobile) .workspace-split.mod-left-split .workspace-drawer-vault-switcher-icon{ 419 | padding:7px 3px 7px 7px; 420 | } 421 | 422 | 423 | 424 | 425 | 426 | 427 | /* 428 | --------------------------- --------------------------- 429 | --------------------------- --------------------------- 430 | Slide-down Toggle Design 431 | --------------------------- --------------------------- 432 | --------------------------- --------------------------- 433 | */ 434 | /* a bit confusing but I tried my best with the documentation :p */ 435 | 436 | 437 | /* Toggle drawer-hiding on Ribbon Icons */ 438 | body:not(.is-mobile):is(:not(.css-settings-manager),.toggle-side-ribbons) .workspace-ribbon.side-dock-ribbon{ 439 | position:absolute; 440 | height:100%; 441 | left:calc(var(--hovering-trigger-size) - var(--ribbon-width)); 442 | margin-top:0; 443 | padding-top:var(--header-height); 444 | background:var(--background-secondary); 445 | border-right:var(--border); 446 | box-shadow:var(--panel-shadow); 447 | z-index:50; 448 | transition:left 0.2s, opacity 0.1s; 449 | opacity:0; 450 | } 451 | body .workspace-ribbon.side-dock-ribbon:hover:hover:hover{ 452 | left:0; 453 | opacity:1; 454 | } 455 | 456 | 457 | 458 | 459 | 460 | 461 | /* Toggle drawer-hiding on Top Headers */ 462 | body:not(.is-mobile).is-hidden-frameless:is(:not(.css-settings-manager),.toggle-titlebar-buttons):not(.toggle-topright-opacity) .titlebar-button-container:is(.mod-right,.mod-left){ 463 | top:calc(1px + var(--hovering-trigger-size) - var(--header-height)); 464 | background:var(--background-secondary); 465 | border:var(--border); 466 | border-top:none; 467 | border-right:none; 468 | border-bottom-left-radius:var(--button-radius); 469 | border-bottom-right-radius:var(--button-radius); 470 | box-shadow:var(--panel-shadow); 471 | z-index:1; 472 | -webkit-app-region:no-drag; 473 | transition:top 0.2s, opacity 0.1s; 474 | opacity:0; 475 | } 476 | body:not(.is-mobile).toggle-tab-section .workspace>.workspace-split.mod-vertical.mod-root .workspace-tabs .workspace-tab-header-container, 477 | body:not(.is-mobile):is(:not(.css-settings-manager),.toggle-sidebar-buttons) .workspace>.workspace-split.mod-horizontal:not(.mod-right-split) .workspace-tabs.mod-top .workspace-tab-header-container, 478 | body:not(.is-mobile):is(:not(.css-settings-manager),.toggle-sidebar-buttons):not(.toggle-topright-opacity) .workspace>.workspace-split.mod-horizontal.mod-right-split .workspace-tabs.mod-top .workspace-tab-header-container{ 479 | position:absolute; 480 | width:100%; 481 | top:calc(var(--hovering-trigger-size) - var(--header-height)); 482 | background:var(--background-secondary); 483 | border:var(--border); 484 | border-top:none; 485 | border-bottom-left-radius:var(--button-radius); 486 | border-bottom-right-radius:var(--button-radius); 487 | box-shadow:var(--panel-shadow); 488 | z-index:1; 489 | -webkit-app-region:no-drag; 490 | transition:top 0.2s, opacity 0.1s; 491 | opacity:0; 492 | } 493 | 494 | body:not(.is-mobile):is(:not(.css-settings-manager),.toggle-sidebar-buttons) .workspace>.workspace-split.mod-horizontal:not(.mod-right-split) .workspace-tabs.mod-top .workspace-tab-header-container{ 495 | border-left:none; 496 | /* fix for macos */ 497 | /* margin-left:var(--frame-left-space); */ 498 | /* width:calc(100% - var(--frame-left-space)); */ 499 | } 500 | body:not(.is-mobile):is(:not(.css-settings-manager),.toggle-sidebar-buttons):not(.toggle-topright-opacity) .workspace>.workspace-split.mod-horizontal.mod-right-split .workspace-tabs.mod-top .workspace-tab-header-container{ 501 | border-right:none; 502 | } 503 | 504 | body .workspace-split .workspace-tabs .workspace-tab-header-container:hover:hover:hover:hover:hover:hover:hover, 505 | body.is-grabbing.is-grabbing.is-grabbing.is-grabbing.is-grabbing .app-container:not(.no-transition) .workspace-split .workspace-tabs .workspace-tab-header-container, 506 | body .titlebar-button-container:is(.mod-right,.mod-left):hover:hover:hover:hover{ 507 | top:0; 508 | opacity:1; 509 | } 510 | 511 | /* when grabbing, push down left side bar contents */ 512 | .workspace-split.mod-horizontal.mod-left-split .workspace-tabs.mod-top .workspace-leaf{ 513 | transition:padding-top 0.2s; 514 | } 515 | body:is(:not(.css-settings-manager),.toggle-sidebar-buttons).is-grabbing.is-grabbing.is-grabbing.is-grabbing.is-grabbing .app-container:not(.no-transition) .workspace-split.mod-horizontal.mod-left-split .workspace-tabs.mod-top .workspace-leaf{ 516 | padding-top:var(--header-height); 517 | } 518 | 519 | 520 | 521 | /* Hide hidden tabs behind for those that are in the middle of the panes, also give them a little more space to be hovered */ 522 | body:not(.is-mobile).toggle-tab-section .workspace-tabs:not(.mod-top){ 523 | overflow:hidden; 524 | } 525 | body:not(.is-mobile).toggle-tab-section .workspace>.workspace-split.mod-vertical.mod-root .workspace-tabs .workspace-tab-header-container{ 526 | top:calc(13px - var(--header-height)); 527 | } 528 | 529 | 530 | 531 | 532 | /* resize titlebar height to allow titlebar to response to cursor, this :after is a no-drag element */ 533 | body:is(:not(.css-settings-manager),.toggle-titlebar-buttons):not(.toggle-topright-opacity) .workspace .workspace-tabs.mod-top:is(.mod-top-right-space,.mod-top-left-space) .workspace-tab-header-container:after{ 534 | height:var(--hovering-trigger-size); 535 | } 536 | /* when successfully hovered, expand back the size to full height until the cursor move away */ 537 | body:is(:not(.css-settings-manager),.toggle-titlebar-buttons):not(.toggle-topright-opacity) .titlebar:hover~.app-container .workspace .workspace-tabs.mod-top:is(.mod-top-right-space,.mod-top-left-space) .workspace-tab-header-container:after{ 538 | height:var(--header-height); 539 | } 540 | 541 | 542 | /* readjust spacing for window titlebar buttons */ 543 | body:not(.mod-macos):not(.is-mobile).is-hidden-frameless:not(.is-fullscreen):is(:not(.css-settings-manager),.toggle-titlebar-buttons):not(.toggle-topright-opacity) .workspace-tabs.mod-top.mod-top-right-space .workspace-tab-header-container{ 544 | padding-right:0; 545 | } 546 | body:not(.mod-macos):not(.is-mobile).is-hidden-frameless:not(.is-fullscreen):is(:not(.css-settings-manager),.toggle-titlebar-buttons) .workspace-tabs.mod-top.mod-top-left-space .workspace-tab-header-container{ 547 | padding-left:0; 548 | } 549 | 550 | /* exception for macos */ 551 | /* Unconfirmed: possible bad fix because of macos-css-simulation on windows, thus disabling this but keep for future reference */ 552 | body.mod-macos.is-hidden-frameless:not(.is-mobile):is(:not(.css-settings-manager),.toggle-sidebar-buttons):not(.is-popout-window) .workspace>.workspace-split.mod-horizontal.mod-right-split .workspace-tabs.mod-top .workspace-tab-header-container{ 553 | /* width:calc(100% - 44px); */ 554 | /* border-right:var(--border); */ 555 | } 556 | 557 | 558 | /* Toggle drawer-hiding on Top Headers (Middle Tab) and adjust sizing */ 559 | body:not(.is-mobile).toggle-tab-section .workspace>.workspace-split.mod-vertical.mod-root .workspace-tabs .workspace-tab-header-container .workspace-tab-header-container-inner{ 560 | margin-left:0; 561 | padding-block:5px; 562 | } 563 | body:not(.is-mobile).toggle-tab-section .workspace>.workspace-split.mod-vertical.mod-root .workspace-tabs .workspace-tab-header-container .workspace-tab-header-inner{ 564 | padding:20px 9px 13px; 565 | } 566 | 567 | 568 | /* buttons are blocked by :after no-drag space element, overcome with higher z-index. Also disable drag element since we cant click on fading block anyway */ 569 | body:not(.is-mobile).toggle-tab-section .workspace>.workspace-split.mod-vertical.mod-root .workspace-tabs.mod-top .workspace-tab-header-container>div, 570 | body:not(.is-mobile):is(:not(.css-settings-manager),.toggle-sidebar-buttons) .workspace>.workspace-split.mod-horizontal .workspace-tabs.mod-top:is(.mod-top-left-space,.mod-top-right-space) .workspace-tab-header-container>div{ 571 | z-index:1; 572 | -webkit-app-region:no-drag; 573 | } 574 | 575 | 576 | /* make temporary drag area below when buttons are hidden (slide up) */ 577 | /* middle note tab area */ 578 | /* hidden sidebar both side */ 579 | /* when left dock is collapsed */ 580 | /* when right dock is collapsed & not opacity-mode*/ 581 | body:not(.is-mobile).toggle-tab-section .workspace>.workspace-split.mod-vertical.mod-root .workspace-tabs.mod-top .workspace-tab-header-container:before, 582 | body:not(.is-mobile):is(:not(.css-settings-manager),.toggle-sidebar-buttons) .workspace>.workspace-split.mod-horizontal .workspace-tabs.mod-top .workspace-tab-header-container:before, 583 | body:not(.is-mobile) .workspace>.workspace-split.mod-horizontal:not(.mod-left-split) .workspace-tabs.mod-top.mod-top-left-space .workspace-tab-header-container:before, 584 | body:not(.is-mobile):not(.toggle-topright-opacity) .workspace>.workspace-split.mod-horizontal:not(.mod-right-split) .workspace-tabs.mod-top.mod-top-right-space .workspace-tab-header-container:before{ 585 | position:absolute; 586 | content:""; 587 | width:100%; 588 | height:calc(100% - var(--hovering-trigger-size)); 589 | left:0; 590 | top:var(--header-height); 591 | /* background:black; */ 592 | -webkit-app-region:drag; 593 | pointer-events:none; /* preven unclickabled buttons underneath it */ 594 | transition:height 0.2s; 595 | } 596 | body:not(.is-mobile).toggle-tab-section .workspace>.workspace-split.mod-vertical.mod-root .workspace-tabs.mod-top .workspace-tab-header-container:hover:before, 597 | body:not(.is-mobile) .workspace>.workspace-split.mod-horizontal .workspace-tabs.mod-top:is(.mod-top-left-space,.mod-top-right-space) .workspace-tab-header-container:hover:before{ 598 | height:0; 599 | } 600 | /* macos fix, remove :before height so that button on top-right corner can be hovered */ 601 | /* Unconfirmed: possible bad fix because of macos-css-simulation on windows, thus disabling this but keep for future reference */ 602 | body.mod-macos:not(.is-mobile):is(:not(.css-settings-manager),.toggle-sidebar-buttons) .workspace>.workspace-split.mod-horizontal .workspace-tabs.mod-top.mod-top-right-space .workspace-tab-header-container:before{ 603 | /* height:0; */ 604 | } 605 | 606 | /* resize "drag" space to allow titlebar buttons to be hovered */ 607 | body:not(.is-grabbing):not(.is-fullscreen).is-hidden-frameless .titlebar:hover~.app-container .workspace-split .workspace-tabs.mod-top.mod-top-right-space .workspace-tab-header-container:before{ 608 | width:calc(100% - var(--frame-right-space)); 609 | } 610 | body:not(.is-grabbing):not(.is-fullscreen).is-hidden-frameless .titlebar:hover~.app-container .workspace-split .workspace-tabs.mod-top.mod-top-left-space .workspace-tab-header-container:before{ 611 | width:calc(100% - var(--frame-left-space)); 612 | left:var(--frame-left-space); 613 | } 614 | /* resize "drag" space to allow ribbon dock to be hovered properly, during both hidden and non-hidden sidebar header buttons */ 615 | body:not(.is-grabbing):not(.is-fullscreen).is-hidden-frameless:is(:not(.css-settings-manager),.toggle-side-ribbons) .side-dock-ribbon.mod-left:hover~.workspace-split .workspace-tabs.mod-top.mod-top-left-space .workspace-tab-header-container:before{ 616 | width:calc(100% - var(--frame-left-space) - var(--ribbon-width)); 617 | left:calc(var(--frame-left-space) + var(--ribbon-width)); 618 | } 619 | body:not(.is-grabbing):not(.is-fullscreen).is-hidden-frameless:is(:not(.css-settings-manager),.toggle-side-ribbons) .side-dock-ribbon.mod-left:hover~.workspace-split .workspace-tabs.mod-top.mod-top-left-space .workspace-tab-header-container:before{ 620 | width:var(--ribbon-width); 621 | left:0; 622 | -webkit-app-region:no-drag; 623 | } 624 | 625 | 626 | /* fix minmaxclose buttons not being able to fully hovered when both sidebars are collapsed during toggle-toporight-opacity */ 627 | body.toggle-topright-opacity .titlebar:hover:hover~.app-container .workspace .workspace-tabs.mod-top .workspace-tab-header-container:before{ 628 | top:0; 629 | } 630 | 631 | 632 | 633 | 634 | 635 | 636 | 637 | 638 | 639 | 640 | 641 | 642 | 643 | 644 | /* Toggle drawer-hiding on File Explorer Buttons */ 645 | body:not(.is-mobile):is(:not(.css-settings-manager),.TEB-hide-vertical) .workspace-leaf-content[data-type="file-explorer"] .nav-buttons-container, 646 | body:not(.is-mobile):is(.TEB-hide-horizontal,.TEB-show-vertical,.TEB-show-horizontal) .workspace-leaf-content[data-type="file-explorer"] .nav-buttons-container{ 647 | flex-direction:column; 648 | position:absolute; 649 | background:var(--background-secondary); 650 | border:var(--border); 651 | border-radius:var(--button-radius); 652 | box-shadow:var(--panel-shadow); 653 | z-index:1; 654 | right:13px; 655 | top:13px; 656 | pointer-events:none; 657 | transition:top 0.2s, opacity 0.2s; 658 | } 659 | /* If sidebar header buttons is not hidden and explorer buttons are, adjust the initial position */ 660 | body:not(.is-mobile).css-settings-manager.TEB-hide-vertical:not(.toggle-sidebar-buttons) .workspace-leaf-content[data-type="file-explorer"] .nav-buttons-container, 661 | body:not(.is-mobile):is(.TEB-hide-horizontal,.TEB-show-horizontal):not(.toggle-sidebar-buttons) .workspace-leaf-content[data-type="file-explorer"] .nav-buttons-container{ 662 | left:13px; 663 | right:unset; 664 | top:0px; 665 | box-shadow:var(--window-shadow); 666 | } 667 | /* macos fix */ 668 | body.mod-macos:not(.is-mobile).css-settings-manager.TEB-hide-vertical:not(.toggle-sidebar-buttons) .workspace-leaf-content[data-type="file-explorer"] .nav-buttons-container, 669 | body.mod-macos:not(.is-mobile):is(.TEB-hide-horizontal):not(.toggle-sidebar-buttons) .workspace-leaf-content[data-type="file-explorer"] .nav-buttons-container{ 670 | left:var(--frame-left-space); 671 | } 672 | 673 | body:not(.is-mobile):is(:not(.css-settings-manager),.TEB-hide-vertical) .workspace-leaf-content[data-type="file-explorer"] .nav-buttons-container .nav-action-button, 674 | body:not(.is-mobile):is(.TEB-hide-horizontal,.TEB-show-vertical,.TEB-show-horizontal) .workspace-leaf-content[data-type="file-explorer"] .nav-buttons-container .nav-action-button{ 675 | padding:11px; 676 | } 677 | 678 | 679 | 680 | /* When hovered on the top header tab, it'll also show the file explorer buttons */ 681 | body .workspace-split.mod-horizontal:is(.mod-left-split,.mod-right-split) .workspace-tabs.mod-top .workspace-tab-header-container:hover:hover+.workspace-tab-container .workspace-leaf-content[data-type="file-explorer"] .nav-buttons-container, 682 | body .workspace-leaf-content[data-type="file-explorer"] .nav-buttons-container:hover:hover{ 683 | pointer-events:initial; 684 | top:calc(var(--header-height) - 1px); 685 | opacity:1; 686 | } 687 | /* If sidebar header buttons is not hidden and explorer buttons are, adjust the revealing position */ 688 | body:not(.toggle-sidebar-buttons).css-settings-manager .workspace-split.mod-horizontal:is(.mod-left-split,.mod-right-split) .workspace-tabs.mod-top .workspace-tab-header-container:hover:hover+.workspace-tab-container .workspace-leaf-content[data-type="file-explorer"] .nav-buttons-container, 689 | body:not(.toggle-sidebar-buttons).css-settings-manager .workspace-leaf-content[data-type="file-explorer"] .nav-buttons-container:hover:hover{ 690 | pointer-events:initial; 691 | top:0px; 692 | opacity:1; 693 | } 694 | body:not(.toggle-sidebar-buttons):is(.TEB-show-vertical,.TEB-show-horizontal).css-settings-manager .workspace-leaf-content[data-type="file-explorer"] .nav-buttons-container:hover:hover{ 695 | top:13px; 696 | } 697 | 698 | 699 | /* horizontal aligned explorer buttons */ 700 | body:not(.is-mobile):is(.TEB-hide-horizontal,.TEB-show-horizontal) .workspace-leaf-content[data-type="file-explorer"] .nav-buttons-container{ 701 | flex-direction:row; 702 | } 703 | body:not(.is-mobile):not(.is-mobile):is(.TEB-show-vertical,.TEB-show-horizontal) .workspace-leaf-content[data-type="file-explorer"] .nav-buttons-container, 704 | body:not(.toggle-sidebar-buttons):is(.TEB-show-vertical,.TEB-show-horizontal) .workspace-split.mod-horizontal:is(.mod-left-split,.mod-right-split) .workspace-tabs.mod-top .workspace-tab-header-container:hover:hover+.workspace-tab-container .workspace-leaf-content[data-type="file-explorer"] .nav-buttons-container{ 705 | pointer-events:initial; 706 | opacity:1; 707 | right:13px; 708 | left:unset; 709 | top:13px; 710 | } 711 | 712 | 713 | 714 | 715 | 716 | 717 | 718 | 719 | 720 | 721 | 722 | 723 | 724 | 725 | 726 | 727 | 728 | 729 | 730 | 731 | 732 | 733 | 734 | /* 735 | --------------------------- --------------------------- 736 | --------------------------- --------------------------- 737 | Main Note Pane Desgin 738 | --------------------------- --------------------------- 739 | --------------------------- --------------------------- 740 | */ 741 | .workspace-tab-header-container{ 742 | padding:0; 743 | } 744 | 745 | /* Extend margin beneath it */ 746 | .workspace-split.mod-vertical.mod-root .workspace-tab-header-container{ 747 | margin:0 0 11px 0; 748 | } 749 | 750 | /* Remove top-margin and increase gap in between tabs */ 751 | .workspace-split.mod-vertical.mod-root .workspace-tab-header-container-inner{ 752 | margin:0 0 0 23px; 753 | gap:var(--size-2-2); 754 | padding-top:0; 755 | } 756 | 757 | /* Remove tab siblings border-radius design */ 758 | .workspace-split.mod-vertical.mod-root .workspace-tab-header:before, 759 | .workspace-split.mod-vertical.mod-root .workspace-tab-header:after, 760 | .workspace .mod-root .workspace-tab-header-inner::after{ /* Remove border-right on tabs that are not active */ 761 | display:none; 762 | } 763 | 764 | 765 | 766 | 767 | 768 | 769 | /* Tab design */ 770 | .workspace-split.mod-vertical.mod-root .workspace-tab-header{ 771 | padding:0; 772 | border-radius:6px; 773 | border:1px solid transparent; 774 | box-shadow:none; 775 | margin-top:-13px; 776 | /* background:var(--background-secondary); */ 777 | } 778 | .workspace-split.mod-vertical.mod-root .workspace-tab-header.is-active{ 779 | background:var(--background-fourth); 780 | border:var(--border); 781 | } 782 | .workspace-split.mod-vertical.mod-root .workspace-tab-header-inner{ 783 | padding:27px 11px 13px; 784 | } 785 | 786 | /* Prevent sticking-to-top design during obsidian window frame mode */ 787 | body.is-frameless:not(.is-hidden-frameless) .workspace-split.mod-vertical.mod-root .workspace-tabs.mod-top, 788 | body.is-frameless:not(.is-hidden-frameless) .workspace-split.mod-horizontal.mod-right-split .workspace-tabs.mod-top{ 789 | border-top:var(--border); 790 | } 791 | 792 | /* remove margin-top of tab headers that block the possibilities to implement pseudo-clickable area */ 793 | .workspace-split.mod-horizontal.mod-left-split .workspace-tab-header-container-inner, 794 | .workspace-split.mod-horizontal.mod-right-split .workspace-tab-header-container-inner{ 795 | margin-top:0; 796 | padding:0; 797 | gap:0; 798 | } 799 | 800 | 801 | 802 | 803 | /* Main Note Headers spacing */ 804 | .workspace-split.mod-vertical.mod-root .view-header{ 805 | margin-block:7px; 806 | background:none; 807 | } 808 | /* prevent dragging on title */ 809 | .workspace-split.mod-vertical.mod-root .view-header .view-header-title-container>div{ 810 | -webkit-app-region:no-drag; 811 | } 812 | /* remove title fading element */ 813 | .view-header-title-container:not(.mod-at-end):after{ 814 | display:none; 815 | } 816 | /* increase Main Note Headers icon size */ 817 | .workspace-split.mod-vertical.mod-root .view-header svg{ 818 | --icon-size:var(--icon-l); 819 | } 820 | /* increase Main Note Headers breadcrumb button size */ 821 | .view-header-title-parent .view-header-breadcrumb{ 822 | padding:3px 7px; 823 | } 824 | 825 | /* make space for top-right button */ 826 | .sidebar-toggle-button.mod-right{ 827 | padding-right:4px; 828 | } 829 | 830 | /* macos fixes for top-right buttons */ 831 | /* Unconfirmed: possible bad fix because of macos-css-simulation on windows, thus disabling this but keep for future reference */ 832 | .mod-macos.is-hidden-frameless:not(.is-popout-window) .sidebar-toggle-button.mod-right{ 833 | /* border:var(--border); */ 834 | /* padding:4px; */ 835 | /* border-top:none; */ 836 | /* border-radius:var(--button-radius); */ 837 | } 838 | .mod-macos .workspace:not(.is-right-sidedock-open) .sidebar-toggle-button.mod-right{ 839 | /* border-left:none; */ 840 | } 841 | 842 | 843 | 844 | 845 | 846 | /* Stacked Mode styling */ 847 | body:not(.toggle-tab-section) .workspace-split.mod-vertical.mod-root .workspace-tabs.mod-stacked .workspace-tab-header-container{ 848 | margin-bottom:0; 849 | } 850 | body:not(.toggle-tab-section) .workspace-split.mod-vertical.mod-root .workspace-tabs.mod-stacked{ 851 | border-radius:0; 852 | } 853 | body .workspace-split.mod-vertical.mod-root .workspace-tabs.mod-stacked .workspace-tab-header-container>.workspace-tab-header-new-tab{ 854 | order:1; 855 | margin-right:var(--size-4-1); 856 | } 857 | body .workspace-split.mod-vertical.mod-root .workspace-tabs.mod-stacked .workspace-tab-header-container>.workspace-tab-header-tab-list{ 858 | order:2; 859 | } 860 | body .workspace-split.mod-vertical.mod-root .workspace-tabs.mod-stacked .workspace-tab-header-container>.sidebar-toggle-button.mod-right{ 861 | order:3; 862 | } 863 | 864 | .workspace-split.mod-vertical.mod-root .workspace-tabs.mod-stacked .workspace-tab-header{ 865 | margin:0; 866 | padding-top:7px; 867 | /* border-top-left-radius:var(--window-radius); */ 868 | box-shadow:none; 869 | border-top:1px solid var(--color-accent-1); 870 | border-left:1px solid var(--color-accent-1); 871 | border-right:none; 872 | border-bottom:none; 873 | } 874 | .workspace-split.mod-vertical.mod-root .workspace-tabs.mod-stacked .workspace-tab-header+.workspace-leaf{ 875 | /* border-top-left-radius:0; */ 876 | border-top:var(--border); 877 | border-image:linear-gradient(90deg, var(--color-accent-1) 0, var(--tab-outline-color) 60%, transparent 90%) 1; 878 | box-shadow:none; 879 | background-color:var(--background-primary); 880 | } 881 | /* Disable transparency on main note during translucent mode due to unreadable issue */ 882 | body.is-translucent .workspace-split.mod-vertical.mod-root .workspace-tabs.mod-stacked :is(.workspace-leaf, .workspace-tab-header){ 883 | transition:background 0.2s; 884 | background:var(--background-primary)!important; 885 | } 886 | body.is-translucent .workspace-split.mod-vertical.mod-root .workspace-tabs.mod-stacked :is(.workspace-tab-header.is-active+.workspace-leaf, .workspace-tab-header.is-active){ 887 | background:var(--color-base-00)!important; 888 | } 889 | 890 | 891 | 892 | /* Border radius on Pane design, however, not adjusted for multiple panes */ 893 | body:not(.is-mobile) .workspace-split.mod-vertical.mod-root .workspace-tabs{ 894 | border:var(--border); 895 | border-right:none; 896 | border-top:none; 897 | background-color:var(--background-primary); 898 | } 899 | /* hard override original important'd background */ 900 | body.is-translucent .workspace-split.mod-vertical.mod-root .workspace-tabs{ 901 | background-color:var(--background-primary)!important; 902 | } 903 | body:not(.is-mobile):is(:not(.css-settings-manager),.toggle-topleft-radius) .workspace-split.mod-vertical.mod-root>hr+.workspace-tabs:not(.mod-stacked), 904 | body:not(.is-mobile):is(:not(.css-settings-manager),.toggle-topleft-radius) .workspace-split.mod-vertical.mod-root>hr+.workspace-split>hr+.workspace-tabs:not(.mod-stacked), 905 | body:not(.is-mobile):is(:not(.css-settings-manager),.toggle-topleft-radius) .workspace-split.mod-vertical.mod-root>hr+.workspace-split>hr+.workspace-split>hr+.workspace-tabs:not(.mod-stacked), 906 | body:not(.is-mobile):is(:not(.css-settings-manager),.toggle-topleft-radius).toggle-tab-section .workspace-split.mod-vertical.mod-root .workspace-tabs.mod-stacked, 907 | body:not(.is-mobile):is(:not(.css-settings-manager),.toggle-topleft-radius) .workspace-split.mod-vertical.mod-root .workspace-tabs.mod-stacked .workspace-tab-header{ 908 | border-top-left-radius:var(--window-radius); 909 | } 910 | 911 | 912 | 913 | /* Overflow to allow shadow flowing out */ 914 | body:not(.is-mobile) .workspace-tabs, 915 | body:not(.is-mobile) .workspace-tabs .workspace-tab-container{ 916 | overflow:visible; 917 | } 918 | 919 | /* Minimum padding to push down cut-off scrollbars when show-tab-title-bar is disabled */ 920 | body:not(.show-view-header) .workspace-split.mod-vertical.mod-root .workspace-leaf{ 921 | padding-top:23px; 922 | } 923 | body.is-mobile .workspace-split.mod-vertical.mod-root .workspace-leaf{ 924 | padding-top:0; 925 | } 926 | 927 | /* Adjust mobile header position */ 928 | body.is-phone .view-header, .show-view-header .view-header{ 929 | align-items:center; 930 | } 931 | .is-mobile .view-actions{ 932 | margin-right:-3px; 933 | } 934 | 935 | /* Gap inbetween panes */ 936 | .workspace-split.mod-vertical.mod-root{ 937 | gap:0; 938 | } 939 | 940 | /* Main Note padding space, only in middle pane, not sidebars*/ 941 | .workspace-split.mod-vertical.mod-root .markdown-preview-view{ 942 | padding-inline:53px; 943 | } 944 | .workspace-split.mod-vertical.mod-root .markdown-source-view .cm-content{ 945 | padding-inline:13px; 946 | } 947 | 948 | 949 | 950 | 951 | 952 | 953 | 954 | /* SIDEBAR - RIGHT DESIGN */ 955 | 956 | /* instead of padding-block, we do bottom and a separate one below, as the first panel may requires the tab header to be hidden to the top */ 957 | .workspace-split.mod-horizontal.mod-right-split{ 958 | background:var(--background-primary); 959 | padding-bottom:var(--header-height); 960 | } 961 | .workspace-split.mod-horizontal.mod-right-split .workspace-tabs.mod-top.mod-top-right-space .workspace-tab-container{ 962 | padding-top:var(--header-height); 963 | } 964 | 965 | .workspace-split.mod-horizontal.mod-right-split .workspace-leaf{ 966 | background:var(--background-fourth); 967 | border:var(--border); 968 | border-radius:var(--panel-radius); 969 | box-shadow:var(--panel-shadow); 970 | margin-inline:33px; 971 | } 972 | body.toggle-sidebar-right-color .workspace-split.mod-horizontal.mod-right-split .workspace-leaf{ 973 | background:var(--background-secondary); 974 | } 975 | 976 | .workspace-split.mod-horizontal.mod-right-split .view-content{ 977 | padding:var(--size-4-4); 978 | } 979 | .workspace-split.mod-horizontal.mod-right-split .view-content .markdown-rendered{ 980 | padding-block:0; 981 | } 982 | .workspace-split.mod-horizontal.mod-right-split .inline-title{ 983 | padding-block:0.5em; 984 | } 985 | 986 | /* hard override translucent mode transparent background */ 987 | body.is-translucent .workspace-split.mod-horizontal.mod-right-split .workspace-leaf{ 988 | background-color:var(--background-fourth)!important; 989 | } 990 | body.is-translucent.toggle-sidebar-right-color .workspace-split.mod-horizontal.mod-right-split .workspace-leaf{ 991 | background-color:var(--background-secondary)!important; 992 | } 993 | 994 | 995 | 996 | 997 | 998 | 999 | 1000 | 1001 | 1002 | 1003 | 1004 | 1005 | 1006 | 1007 | /* Context menu styling */ 1008 | .menu{ 1009 | padding:0; 1010 | } 1011 | .menu-item{ 1012 | padding:var(--button-padding-long); 1013 | } 1014 | body.is-translucent .menu{ 1015 | background:var(--color-base-00); 1016 | } 1017 | 1018 | 1019 | 1020 | 1021 | 1022 | /* Hide status bar */ 1023 | body:is(:not(.css-settings-manager),.toggle-status-bar) .status-bar{ 1024 | bottom:-50px; 1025 | } 1026 | /* Show Sync Button Only */ 1027 | body.toggle-sync-button.toggle-status-bar .status-bar-item.plugin-sync{ 1028 | bottom:54px; 1029 | right:5px; 1030 | position:absolute; 1031 | padding:var(--button-padding-icon); 1032 | } 1033 | body.toggle-sync-button.toggle-status-bar .status-bar-item.plugin-sync:hover{ 1034 | filter:brightness(0.8); 1035 | } 1036 | body.toggle-sync-button.toggle-status-bar .status-bar-item .svg-icon{ 1037 | --icon-size:var(--icon-l); 1038 | } 1039 | 1040 | 1041 | /* Adjust button spacing on search result items */ 1042 | .search-result-hover-button{ 1043 | padding-block:0; 1044 | } 1045 | .search-result-hover-button.mod-top { 1046 | top:0; 1047 | } 1048 | .search-result-hover-button.mod-bottom { 1049 | bottom:0; 1050 | } 1051 | 1052 | 1053 | 1054 | 1055 | 1056 | /* Setting Modal */ 1057 | .vertical-tab-header{ 1058 | padding-inline:0; 1059 | } 1060 | .vertical-tab-header-group-title{ 1061 | color:var(--color-accent-2); 1062 | } 1063 | .vertical-tab-header-group{ 1064 | padding-inline:var(--size-4-3); 1065 | } 1066 | .vertical-tab-header-group:not(:last-child){ 1067 | border-bottom:var(--border); 1068 | margin-bottom:23px; 1069 | } 1070 | body.is-translucent .modal{ 1071 | background:var(--color-base-00); 1072 | } 1073 | 1074 | 1075 | 1076 | 1077 | 1078 | 1079 | 1080 | 1081 | 1082 | 1083 | 1084 | 1085 | 1086 | /* 1087 | --------------------------- --------------------------- 1088 | --------------------------- --------------------------- 1089 | Animation 1090 | --------------------------- --------------------------- 1091 | --------------------------- --------------------------- 1092 | */ 1093 | 1094 | .modal{ 1095 | border-radius:var(--window-radius); 1096 | animation:0.2s popup forwards; 1097 | } 1098 | @keyframes popup{ 1099 | 0% { transform:scale(70%); opacity:0; } 1100 | 15% { transform:scale(80%); opacity:0.1; } 1101 | 35% { transform:scale(102%); } 1102 | 45% { opacity:0.3; } 1103 | 65% { opacity:0.7; } 1104 | 100% { transform:scale(100%); opacity:1; } 1105 | } 1106 | 1107 | body:is(:not(.css-settings-manager), .toggle-note-animation) .workspace-split.mod-vertical.mod-root .workspace-tabs:not(.mod-stacked) .workspace-leaf-content:not([data-type="pdf"]) .view-content{ 1108 | animation:0.2s slide-up forwards; 1109 | } 1110 | @keyframes slide-up{ 1111 | 0% { transform:translateY(0%); opacity:0; } 1112 | 15% { transform:translateY(5px); opacity:0; } 1113 | 25% { transform:translateY(10px); } 1114 | 45% { opacity:0.5; } 1115 | 65% { opacity:0.7; } 1116 | 100% { transform:translateY(0%); opacity:1; } 1117 | } 1118 | 1119 | :is(.nav-folder, .nav-file) :is(.nav-folder-title, .nav-file-title).is-active svg{ 1120 | animation:0.3s bounceback; 1121 | } 1122 | @keyframes bounceback{ 1123 | 0% { transform:translateY(0%); } 1124 | 60% { transform:translateY(10%); } 1125 | 100% { transform:translateY(0%); } 1126 | } 1127 | 1128 | 1129 | 1130 | 1131 | 1132 | 1133 | 1134 | /* 1135 | --------------------------- --------------------------- 1136 | --------------------------- --------------------------- 1137 | Icon Button Style 1138 | --------------------------- --------------------------- 1139 | --------------------------- --------------------------- 1140 | */ 1141 | 1142 | /* tab close button */ 1143 | .workspace .mod-root .workspace-tab-header .workspace-tab-header-inner-close-button{ 1144 | padding:var(--button-padding-icon); 1145 | right:unset; 1146 | margin-right:-4px; 1147 | } 1148 | /* remove margin during stacked mode */ 1149 | .workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-header-inner-close-button{ 1150 | margin-right:0; 1151 | } 1152 | 1153 | /* easier hover adaption color */ 1154 | :is(.workspace-tab-header-status-icon, .workspace-tab-header-inner-close-button, .clickable-icon):hover{ 1155 | background-color:var(--background-modifier-hover); 1156 | filter:brightness(0.8); 1157 | } 1158 | 1159 | :is(*, .workspace-tab-header-tab-list, .workspace-tab-header-new-tab) .clickable-icon, /*all clickable icon button */ 1160 | .workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header-inner-icon, /* icon in stacked tab mode*/ 1161 | .workspace-tab-header-inner-icon{ /* Sidebar header icons, though the original padding overrides a bit */ 1162 | padding:var(--button-padding-icon); 1163 | } 1164 | 1165 | /* Adjust icon size during stacked */ 1166 | .workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header-inner-icon{ 1167 | --icon-size:var(--icon-s); 1168 | } 1169 | 1170 | /* Setting close button */ 1171 | body:not(.native-scrollbars) .modal-close-button{ 1172 | right:7px; 1173 | top:7px; 1174 | height:32px; 1175 | width:34px; 1176 | } 1177 | .modal-close-button:before{ 1178 | position:absolute; 1179 | top:5px; 1180 | left:9px; 1181 | } 1182 | 1183 | 1184 | /* undo original style to adapt consistency on header position */ 1185 | .sidebar-toggle-button{ 1186 | height:unset; 1187 | justify-content:unset; 1188 | padding:unset; 1189 | --icon-size:unset; 1190 | --icon-stroke:unset; 1191 | align-items:center; 1192 | padding-block:4.5px; 1193 | -webkit-app-region:no-drag; 1194 | z-index:1; 1195 | } 1196 | .workspace-tab-header-new-tab, 1197 | .workspace-tab-header-tab-list{ 1198 | padding-block:4.5px; 1199 | } 1200 | 1201 | 1202 | 1203 | /* background space to be hovered/clicked, a.k.a. "fake" empty space / pseudo-clickable area */ 1204 | /* maintains the position of hovered whitespace design while still being able to click a little outside of the proposed size. */ 1205 | :is(.workspace-tab-header-status-icon, .clickable-icon):before{ 1206 | position:absolute; 1207 | content:""; 1208 | height:var(--ribbon-width); 1209 | width:var(--ribbon-width); 1210 | } 1211 | /* fix the above design since v16/17 */ 1212 | .clickable-icon:before{ 1213 | height:41px; 1214 | width:41px; 1215 | } 1216 | 1217 | 1218 | /* extend setting clickable area to the bottom */ 1219 | .side-dock-settings .clickable-icon.side-dock-ribbon-action:last-child:before{ 1220 | height:calc(var(--ribbon-width) + 8px); 1221 | margin-bottom:-5px; 1222 | } 1223 | 1224 | /* remove side padding and add pseudo space on header-parent, then remove parent's is-active background and re-enable child's background */ 1225 | .workspace-split.mod-horizontal:is(.mod-left-split,.mod-right-split) .workspace-tab-header-inner{ 1226 | padding:0; 1227 | } 1228 | .workspace-split.mod-horizontal:is(.mod-left-split,.mod-right-split) .workspace-tab-header{ 1229 | padding:5px 3px; 1230 | } 1231 | .workspace-split.mod-horizontal:is(.mod-left-split,.mod-right-split) .workspace-tab-header:first-child{ 1232 | padding-left:5px; 1233 | } 1234 | .workspace-split.mod-horizontal:is(.mod-left-split,.mod-right-split) .workspace-tab-header:last-child, 1235 | .workspace-split.mod-horizontal:is(.mod-left-split,.mod-right-split) .sidebar-toggle-button.mod-left, 1236 | .workspace-split.mod-horizontal:is(.mod-left-split,.mod-right-split) .sidebar-toggle-button.mod-right{ 1237 | padding-right:5px; 1238 | } 1239 | .workspace-split.mod-horizontal:is(.mod-left-split,.mod-right-split) .workspace-tab-header.is-active{ 1240 | background:transparent; 1241 | } 1242 | .workspace-split.mod-horizontal:is(.mod-left-split,.mod-right-split) .workspace-tab-header.is-active .workspace-tab-header-inner{ 1243 | background-color:var(--background-modifier-hover); 1244 | } 1245 | 1246 | 1247 | 1248 | 1249 | 1250 | 1251 | 1252 | 1253 | 1254 | /* 1255 | --------------------------- --------------------------- 1256 | --------------------------- --------------------------- 1257 | Long Button Style 1258 | --------------------------- --------------------------- 1259 | --------------------------- --------------------------- 1260 | */ 1261 | /* Append some spaces so that when on-focused, the border does not get cut */ 1262 | .nav-files-container{ 1263 | padding-top:2px; 1264 | } 1265 | 1266 | 1267 | :is(.nav-folder, .nav-file) :is(.nav-folder-title, .nav-file-title), 1268 | .vertical-tab-nav-item, 1269 | .tree-item-self, 1270 | button{ 1271 | padding:var(--button-padding-long); 1272 | transition:0.05s ease-in; 1273 | transition-property:background, color; 1274 | position:relative; 1275 | -webkit-app-region:no-drag; 1276 | } 1277 | 1278 | /* Left-border style on long button, just for file-explorer */ 1279 | .nav-file-title:before{ 1280 | content:""; 1281 | position:absolute; 1282 | left:0; 1283 | top:50%; 1284 | width:3px; 1285 | height:0; 1286 | border-radius:var(--button-radius); 1287 | background:var(--color-accent); 1288 | transform:translateY(0%); 1289 | transition:0.25s cubic-bezier(1,0.33,0.76,1.22); 1290 | transition-property:height, transform; 1291 | } 1292 | .nav-file-title.is-active::before{ 1293 | height:50%; 1294 | transform:translateY(-50%); 1295 | } 1296 | 1297 | /* Folder styling, just for file-explorer */ 1298 | .nav-folder-title{ 1299 | color:var(--color-accent-2); 1300 | font-size:0.95em; 1301 | font-weight:500; 1302 | } 1303 | body:is(:not(.css-settings-manager),.toggle-explorer-collapse) .nav-folder-title .collapse-icon{ 1304 | display:none; 1305 | } 1306 | body:not(.is-grabbing) .tree-item-self.is-clickable.nav-folder-title:hover{ 1307 | color:var(--color-accent-2); 1308 | font-weight:500; 1309 | } 1310 | /* Additional padding inside folder, also remove border-left as indentation-guide */ 1311 | .nav-folder > .nav-folder-children{ 1312 | padding-block:7px; 1313 | padding-left:13px; 1314 | margin-left:20px; 1315 | } 1316 | body:is(:not(.css-settings-manager),.toggle-explorer-indent) .nav-folder > .nav-folder-children{ 1317 | border-inline-start:none; 1318 | padding-left:33px; 1319 | margin-left:0; 1320 | } 1321 | 1322 | :is(.nav-folder-title, .nav-file-title):hover{ 1323 | filter:brightness(0.9); 1324 | } 1325 | 1326 | 1327 | 1328 | 1329 | 1330 | 1331 | 1332 | 1333 | /* 1334 | --------------------------- --------------------------- 1335 | --------------------------- --------------------------- 1336 | Markdown Stying 1337 | --------------------------- --------------------------- 1338 | --------------------------- --------------------------- 1339 | */ 1340 | 1341 | 1342 | a, .external-link{ 1343 | text-decoration:none; 1344 | } 1345 | a, .external-link:hover{ 1346 | text-decoration:underline; 1347 | } 1348 | .cm-hashtag{ 1349 | vertical-align:unset; 1350 | } 1351 | 1352 | code{ 1353 | --code-normal:var(--blockquote-color); 1354 | margin-inline:3px; 1355 | } 1356 | 1357 | /* Inline code */ 1358 | .markdown-rendered :not(pre)>code, 1359 | .cm-s-obsidian span.cm-inline-code{ 1360 | color:var(--inline-code-color); 1361 | } 1362 | /* inline code background */ 1363 | .cm-hmd-indented-code, 1364 | .cm-s-obsidian span.cm-inline-code.cm-hmd-indented-code{ 1365 | background:var(--code-background); 1366 | } 1367 | 1368 | 1369 | .markdown-rendered pre{ 1370 | overflow-x: auto; 1371 | } 1372 | 1373 | 1374 | :is(mark, .cm-s-obsidian span.cm-formatting-highlight, .cm-s-obsidian span.cm-highlight, .search-result-file-matched-text){ 1375 | color:var(--color-highlight); 1376 | } 1377 | body.theme-dark:not(.css-settings-manager) :is(mark, .cm-s-obsidian span.cm-formatting-highlight, .cm-s-obsidian span.cm-highlight, .search-result-file-matched-text), 1378 | body.THT-underline :is(mark, .cm-s-obsidian span.cm-formatting-highlight, .cm-s-obsidian span.cm-highlight, .search-result-file-matched-text), 1379 | body.THT-underline-dark.theme-dark :is(mark, .cm-s-obsidian span.cm-formatting-highlight, .cm-s-obsidian span.cm-highlight, .search-result-file-matched-text), 1380 | body.THT-underline-light.theme-light :is(mark, .cm-s-obsidian span.cm-formatting-highlight, .cm-s-obsidian span.cm-highlight, .search-result-file-matched-text){ 1381 | border-bottom:2px solid var(--text-highlight-bg); 1382 | color:var(--color-highlight); 1383 | background:none; 1384 | } 1385 | 1386 | sup,sub{ 1387 | font-size:0.85em; 1388 | } 1389 | .footnote-ref{ 1390 | vertical-align:super; 1391 | } 1392 | 1393 | img{ 1394 | max-width:100%; 1395 | border-radius:var(--panel-radius); 1396 | } 1397 | 1398 | /* Markdown Headings */ 1399 | body:is(:not(.css-settings-manager),.toggle-h1-margin-top) :is(h1, .markdown-rendered h1){ 1400 | margin-top:73px; 1401 | } 1402 | :is(h1,h2,h3,h4,h5,h6), .markdown-rendered :is(h1,h2,h3,h4,h5,h6){ 1403 | margin-top:33px; 1404 | } 1405 | .markdown-embed .markdown-preview-pusher+div>h1, 1406 | .markdown-preview-section div.is-collapsed+div>h1{ 1407 | margin-top:33px; 1408 | } 1409 | 1410 | 1411 | /* Markdown Checkbox */ 1412 | 1413 | /* Give some space on top of parent div */ 1414 | .markdown-source-view.mod-cm6 .HyperMD-task-line{ 1415 | padding-top:3px; 1416 | } 1417 | 1418 | /* Adjust checkbox position and styling */ 1419 | .markdown-source-view.mod-cm6 .task-list-item-checkbox{ 1420 | padding:11px; 1421 | top:-2px; 1422 | left:-6px; 1423 | } 1424 | .markdown-preview-view .task-list-item-checkbox{ 1425 | padding:11px; 1426 | top:5px; 1427 | } 1428 | input[type=checkbox]:checked:after{ 1429 | -webkit-mask-size:73%; 1430 | -webkit-mask-position:73% 60%; 1431 | width:100%; 1432 | height:100%; 1433 | } 1434 | .contains-task-list.has-list-bullet li{ 1435 | margin-block:1px; 1436 | } 1437 | /* Adjust line position to fit below checkbox */ 1438 | .markdown-rendered.show-indentation-guide li.task-list-item > :is(ul,ol)::before{ 1439 | left:-10px; 1440 | } 1441 | /* Collapse indicator position adjustment on lists & tasks */ 1442 | .markdown-source-view.mod-cm6.is-live-preview .cm-line.HyperMD-list-line.HyperMD-task-line .cm-fold-indicator .collapse-indicator{ 1443 | padding-inline-end:5px; 1444 | } 1445 | .markdown-rendered .task-list-item .list-collapse-indicator{ 1446 | margin-top:5px; 1447 | margin-left:-47px; 1448 | } 1449 | 1450 | 1451 | 1452 | /* Markdown Listings */ 1453 | ul, ol{ 1454 | padding:7px 0 13px; 1455 | } 1456 | 1457 | /* Only append indent if it's from a list */ 1458 | .cm-hmd-list-indent .cm-indent{ 1459 | padding-inline:0px 11px; 1460 | } 1461 | /* Build spaces at the end of each listing to distinguish from each other (source) */ 1462 | .HyperMD-list-line-1+.HyperMD-list-line:not(.HyperMD-list-line-1):not(.HyperMD-list-line-2), 1463 | .HyperMD-list-line-2+.HyperMD-list-line:not(.HyperMD-list-line-2):not(.HyperMD-list-line-3), 1464 | .HyperMD-list-line-3+.HyperMD-list-line:not(.HyperMD-list-line-3):not(.HyperMD-list-line-4), 1465 | .HyperMD-list-line-4+.HyperMD-list-line:not(.HyperMD-list-line-4):not(.HyperMD-list-line-5), 1466 | .HyperMD-list-line-5+.HyperMD-list-line:not(.HyperMD-list-line-5):not(.HyperMD-list-line-6), 1467 | .HyperMD-list-line-6+.HyperMD-list-line:not(.HyperMD-list-line-6):not(.HyperMD-list-line-7){ 1468 | padding-top:11px!important; 1469 | } 1470 | 1471 | 1472 | 1473 | ol > li::marker, 1474 | ul > li::marker, 1475 | .cm-s-obsidian .cm-formatting-list{ 1476 | margin-right:3px; 1477 | } 1478 | 1479 | /* indent size adjustment */ 1480 | .cm-hmd-list-indent .cm-indent{ 1481 | padding-inline:0; 1482 | } 1483 | .markdown-preview-sizer>div>:is(ul, ol){ 1484 | padding-inline:7px; 1485 | } 1486 | 1487 | /* reduce padding of ul/ol inside callout/blockquote */ 1488 | .callout-content>:is(ul,ol){ 1489 | padding-block:0; 1490 | } 1491 | blockquote>:is(ul,ol){ 1492 | padding-block:7px; 1493 | } 1494 | 1495 | /* force break word for links */ 1496 | .markdown-preview-sizer>div ul li a:not(.tag), div.callout ul li a:not(.tag){ 1497 | word-break:break-all; 1498 | } 1499 | 1500 | 1501 | 1502 | /* Markdown Table */ 1503 | /* Adds margin for easier identification */ 1504 | table{ 1505 | margin:11px 7px; 1506 | } 1507 | 1508 | /* Adds color to the header */ 1509 | thead { 1510 | border-top:2px solid var(--color-accent); 1511 | } 1512 | 1513 | /* Adds padding spaces to the border */ 1514 | .markdown-rendered :is(td, th){ 1515 | padding:4px 13px; 1516 | } 1517 | 1518 | 1519 | 1520 | /* Markdown Strikethrough */ 1521 | /* adjust color for strikethrough + on embed */ 1522 | ul > li.task-list-item.is-checked{ 1523 | text-decoration-color:var(--color-strikethrough); 1524 | } 1525 | del, .cm-strikethrough, 1526 | ul > li.task-list-item.is-checked *, 1527 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task]:not([data-task=" "]) span { 1528 | color:var(--color-strikethrough); 1529 | } 1530 | 1531 | /* Markdown Embed */ 1532 | /* adjust embed padding, visual border */ 1533 | .markdown-embed{ 1534 | border:var(--border); 1535 | border-radius:var(--button-radius); 1536 | padding:var(--embed-padding); 1537 | } 1538 | /* revert "p" margin-top back from 0 */ 1539 | .markdown-embed-content p:first-child{ 1540 | margin-top:1em; 1541 | } 1542 | 1543 | 1544 | 1545 | 1546 | 1547 | /* Markdown Quote */ 1548 | .markdown-preview-view blockquote{ 1549 | margin:13px 0px; 1550 | padding:17px 27px 17px 37px; 1551 | border-radius:var(--button-radius); 1552 | background:var(--background-secondary); 1553 | border:var(--border); 1554 | color:var(--blockquote-color); 1555 | position:relative; 1556 | } 1557 | .markdown-preview-view blockquote:before{ 1558 | content:""; 1559 | position:absolute; 1560 | left:5px; 1561 | top:7px; 1562 | width:3px; 1563 | height:calc(100% - 14px); 1564 | background:var(--color-accent-1); 1565 | border-radius:var(--button-radius); 1566 | } 1567 | .markdown-source-view.mod-cm6 .HyperMD-quote.cm-line{ 1568 | padding-right:17px; 1569 | padding-block:3px; 1570 | } 1571 | .markdown-source-view.mod-cm6 .HyperMD-quote.cm-line+.HyperMD-quote.cm-line{ 1572 | padding-top:0; 1573 | } 1574 | 1575 | 1576 | 1577 | 1578 | /* Markdown Callout */ 1579 | .callout{ 1580 | border:1px solid rgba(var(--callout-color), 0.3); 1581 | background-color: rgba(var(--callout-color), 0.07); 1582 | } 1583 | .callout-title{ 1584 | gap:var(--size-4-3); 1585 | align-items:center; 1586 | background-color:rgba(var(--callout-color), 0.07); 1587 | border-bottom:1px solid transparent; 1588 | transition:border 0.3s; 1589 | } 1590 | .callout-icon, 1591 | .callout-fold{ 1592 | margin:0; 1593 | align-self:center; 1594 | } 1595 | 1596 | /* only apply border if callout is not collapsed */ 1597 | .callout:not(.is-collapsed)>.callout-title:has(+.callout-content){ 1598 | border-bottom:1px solid rgba(var(--callout-color), 0.3); 1599 | } 1600 | 1601 | .markdown-source-view.mod-cm6 .callout .callout{ 1602 | margin:1em 0; 1603 | } 1604 | 1605 | 1606 | 1607 | 1608 | 1609 | 1610 | /* canvas text blurry fix */ 1611 | .is-focused .canvas-node-content.markdown-embed > .markdown-embed-content > .markdown-preview-view { 1612 | transform: unset; 1613 | } 1614 | .canvas-node-content.markdown-embed{ 1615 | border-radius:0; 1616 | } 1617 | 1618 | 1619 | 1620 | 1621 | 1622 | /* 1623 | --------------------------- --------------------------- 1624 | --------------------------- --------------------------- 1625 | Mado Theme Special Classes 1626 | --------------------------- --------------------------- 1627 | --------------------------- --------------------------- 1628 | */ 1629 | /* Mado Heading */ 1630 | 1631 | .mado-heading .markdown-preview-section>div>*{ 1632 | position:relative; 1633 | padding:13px 53px; 1634 | margin:0; 1635 | border:var(--border); 1636 | border-radius:var(--button-radius); 1637 | transition:background 0.1s; 1638 | } 1639 | .mado-heading .markdown-preview-section>div.mod-header>*{ 1640 | padding:23px 23px 0; 1641 | border:none; 1642 | } 1643 | .mado-heading .markdown-preview-section>div:not(.is-collapsed)>h1{ 1644 | border-bottom-left-radius:0; 1645 | border-bottom-right-radius:0; 1646 | border-bottom:none; 1647 | } 1648 | .mado-heading .markdown-preview-section>div:not(.is-collapsed)>h1:before{ 1649 | border-radius:4px 0 0 0; 1650 | } 1651 | .mado-heading .markdown-preview-section>div:has(+div>*:not(h1))>*:not(h1){ 1652 | border-radius:0; 1653 | border-bottom:none; 1654 | } 1655 | .mado-heading .markdown-preview-section>div:has(+div>h1)>*:not(h1), 1656 | .mado-heading .markdown-preview-section>div:has(+div.mod-footer)>*:not(h1){ 1657 | border-radius:0; 1658 | border-bottom-left-radius:var(--button-radius); 1659 | border-bottom-right-radius:var(--button-radius); 1660 | border-bottom:var(--border); 1661 | } 1662 | .mado-heading :is(h1,h2,h3,h4,h5,h6){ 1663 | background:var(--background-fourth); 1664 | } 1665 | .mado-heading :is(h1,h2,h3,h4,h5,h6):hover{ 1666 | background:var(--background-fifth); 1667 | } 1668 | .mado-heading{ 1669 | --h1-size: 1.6em; 1670 | --h2-size: 1.5em; 1671 | --h3-size: 1.37em; 1672 | --h4-size: 1.25em; 1673 | --h5-size: 1.12em; 1674 | --h6-size: 1.12em; 1675 | } 1676 | 1677 | .mado-heading .markdown-preview-section>div:has(+div>p)>p{ 1678 | padding-bottom:0; 1679 | } 1680 | .mado-heading .markdown-preview-section>div:has(>p)+div>p{ 1681 | border-top:none; 1682 | } 1683 | 1684 | 1685 | .mado-heading .markdown-preview-section h1{ 1686 | padding-block:19px; 1687 | margin-top:73px; 1688 | } 1689 | .mado-heading .markdown-preview-section h2{ 1690 | padding-block:17px; 1691 | } 1692 | .mado-heading .markdown-preview-section h3{ 1693 | padding-block:15px; 1694 | } 1695 | .mado-heading .markdown-preview-section h4{ 1696 | padding-block:13px; 1697 | } 1698 | 1699 | /* left border to indicate collapsible action */ 1700 | .mado-heading :is(h1,h2,h3,h4,h5,h6):before{ 1701 | content:""; 1702 | position:absolute; 1703 | left:5px; 1704 | top:5px; 1705 | height:calc(100% - 10px); 1706 | border-radius:var(--button-radius); 1707 | border-left:3px solid var(--color-accent-1); 1708 | } 1709 | .mado-heading h1:before{ 1710 | left:0; 1711 | top:0; 1712 | height:100%; 1713 | border-radius:4px 0 0 4px; 1714 | border-left:3px solid var(--color-accent-2); 1715 | } 1716 | .mado-heading h3:before{ 1717 | top:7px; 1718 | height:calc(100% - 14px); 1719 | } 1720 | .mado-heading h4:before{ 1721 | top:9px; 1722 | height:calc(100% - 18px); 1723 | } 1724 | .mado-heading h5:before{ 1725 | top:11px; 1726 | height:calc(100% - 22px); 1727 | } 1728 | .mado-heading h6:before{ 1729 | top:13px; 1730 | height:calc(100% - 26px); 1731 | } 1732 | 1733 | /* expand clickable collapsible size to match parent size */ 1734 | .mado-heading .heading-collapse-indicator{ 1735 | margin-left:0; 1736 | width:100%; 1737 | height:100%; 1738 | padding:9px 33px; 1739 | top:0; 1740 | left:0; 1741 | position:absolute; 1742 | opacity:1; 1743 | } 1744 | .mado-heading .heading-collapse-indicator svg{ 1745 | right:27px; 1746 | width:14px; 1747 | height:14px; 1748 | position:absolute; 1749 | } 1750 | 1751 | 1752 | 1753 | .mado-heading .markdown-preview-section>div>p{ 1754 | padding-block:23px; 1755 | background:var(--background-fourth); 1756 | } 1757 | .mado-heading .markdown-preview-section>div>:is(ul, ol){ 1758 | padding-block:23px; 1759 | background:var(--background-fourth); 1760 | } 1761 | .mado-heading .markdown-preview-section>div>hr{ 1762 | display:none; 1763 | } 1764 | .mado-heading .markdown-preview-section>div>pre{ 1765 | padding-block:23px; 1766 | } 1767 | .mado-heading .markdown-preview-section>div>blockquote{ 1768 | padding-block:23px; 1769 | } 1770 | .mado-heading .markdown-preview-section>div>.callout{ 1771 | padding:var(--callout-padding); 1772 | border:1px solid rgba(var(--callout-color), 0.3); 1773 | } 1774 | .mado-heading .markdown-preview-section>div>.callout .callout-title{ 1775 | padding:17px 23px; 1776 | } 1777 | .mado-heading .markdown-preview-section>div>.callout .callout-content{ 1778 | padding:3px 53px; 1779 | } 1780 | .mado-heading .markdown-preview-section>div>blockquote>:is(ul,ol){ 1781 | padding:0; 1782 | } 1783 | .mado-heading .markdown-preview-section>div>table{ 1784 | width:calc(100% + 0px); 1785 | border-radius:var(--button-radius); 1786 | border-collapse:separate; 1787 | padding:0; 1788 | background:var(--background-secondary); 1789 | } 1790 | .mado-heading .markdown-preview-section>div>table :is(th, td){ 1791 | padding:9px 11px; 1792 | text-align:center; 1793 | width:83px; 1794 | } 1795 | .mado-heading .markdown-preview-section>div>table th{ 1796 | background-color:var(--background-secondary); 1797 | font-weight:600; 1798 | font-size:1em; 1799 | } 1800 | .mado-heading .markdown-preview-section>div>table td{ 1801 | background:var(--background-fourth); 1802 | border:none; 1803 | } 1804 | .mado-heading .markdown-preview-section>div>table thead>tr>*:first-child{ 1805 | border-radius:4px 0 0 0; 1806 | } 1807 | .mado-heading .markdown-preview-section>div>table thead>tr>*:last-child{ 1808 | border-radius:0 4px 0 0; 1809 | } 1810 | .mado-heading .markdown-preview-section>div>table tbody>tr:last-child>*:first-child{ 1811 | border-radius:0 0 0 4px; 1812 | } 1813 | .mado-heading .markdown-preview-section>div>table tbody>tr:last-child>*:last-child{ 1814 | border-radius:0 0 4px 0; 1815 | } 1816 | 1817 | 1818 | 1819 | 1820 | 1821 | /* Mado Table */ 1822 | [class*="mado-table"]:not(.mado-table-normal) .markdown-preview-section table{ 1823 | width:calc(100% - 0px); 1824 | margin-inline:auto; 1825 | border-radius:var(--button-radius); 1826 | border-collapse:separate; 1827 | border:var(--border); 1828 | padding:2px; 1829 | background:var(--background-secondary); 1830 | } 1831 | [class*="mado-table"]:not(.mado-table-normal) .markdown-preview-section table :is(th, td){ 1832 | padding:11px 11px; 1833 | text-align:center; 1834 | min-width:83px; 1835 | } 1836 | [class*="mado-table"]:not(.mado-table-normal) .markdown-preview-section table th{ 1837 | background-color:var(--background-secondary); 1838 | font-weight:600; 1839 | font-size:1em; 1840 | } 1841 | [class*="mado-table"]:not(.mado-table-normal).markdown-rendered .markdown-preview-section table td, 1842 | [class*="mado-table"]:not(.mado-table-normal).mado-table-topless .markdown-preview-section table th{ 1843 | background:var(--background-fourth); 1844 | border:none; 1845 | font-weight:400; 1846 | } 1847 | [class*="mado-table"]:not(.mado-table-normal) .markdown-preview-section table thead>tr>*:first-child{ 1848 | border-radius:4px 0 0 0; 1849 | } 1850 | [class*="mado-table"]:not(.mado-table-normal) .markdown-preview-section table thead>tr>*:last-child{ 1851 | border-radius:0 4px 0 0; 1852 | } 1853 | [class*="mado-table"]:not(.mado-table-normal) .markdown-preview-section table tbody>tr:last-child>*:first-child{ 1854 | border-radius:0 0 0 4px; 1855 | } 1856 | [class*="mado-table"]:not(.mado-table-normal) .markdown-preview-section table tbody>tr:last-child>*:last-child{ 1857 | border-radius:0 0 4px 0; 1858 | } 1859 | 1860 | 1861 | 1862 | 1863 | /* Mado Table Options */ 1864 | [class*="mado-table"]:not(.mado-table-normal).mado-table-left .markdown-preview-section table tr :is(th:first-child, td:first-child), 1865 | [class*="mado-table"]:not(.mado-table-normal).mado-table-right .markdown-preview-section table tr :is(th:last-child, td:last-child), 1866 | [class*="mado-table"]:not(.mado-table-normal).mado-table-top.markdown-rendered .markdown-preview-section table tr th, 1867 | [class*="mado-table"]:not(.mado-table-normal).mado-table-bottom .markdown-preview-section table tr:last-child td{ 1868 | background-color:var(--background-secondary); 1869 | font-weight:600; 1870 | font-size:1em; 1871 | border:var(--border); 1872 | } 1873 | .mado-table-normal.mado-table-left .markdown-preview-section table tr :is(th:first-child, td:first-child), 1874 | .mado-table-normal.mado-table-right .markdown-preview-section table tr :is(th:last-child, td:last-child), 1875 | .mado-table-normal.mado-table-top.markdown-rendered .markdown-preview-section table tr th, 1876 | .mado-table-normal.mado-table-bottom .markdown-preview-section table tr:last-child td{ 1877 | background-color:var(--background-secondary); 1878 | font-weight:600; 1879 | font-size:1em; 1880 | } 1881 | .mado-table-normal.mado-table-left .markdown-preview-section table tr :is(th:first-child, td:first-child){ 1882 | border-right:1px solid var(--color-accent-1); 1883 | } 1884 | .mado-table-normal.mado-table-right .markdown-preview-section table tr :is(th:last-child, td:last-child){ 1885 | border-left:1.5px solid var(--color-accent-1); 1886 | } 1887 | .mado-table-normal.mado-table-bottom .markdown-preview-section table tr:last-child td{ 1888 | border-top:2px solid var(--color-accent-1); 1889 | } 1890 | 1891 | /* Mado Table Stripe/Border styling, also adapting colors for headers */ 1892 | [class*="mado-table"]:not(.mado-table-normal).mado-table-stripe.markdown-rendered .markdown-preview-section table tr:nth-child(2n) td:not(:first-child):not(:last-child), 1893 | [class*="mado-table"]:not(.mado-table-normal).mado-table-stripe.markdown-rendered:not(.mado-table-left) .markdown-preview-section table tr:nth-child(2n) td:first-child, 1894 | [class*="mado-table"]:not(.mado-table-normal).mado-table-stripe.markdown-rendered.mado-table-left .markdown-preview-section table tr:nth-child(2n+1) td:first-child, 1895 | [class*="mado-table"]:not(.mado-table-normal).mado-table-stripe.markdown-rendered:not(.mado-table-right) .markdown-preview-section table tr:nth-child(2n) td:last-child, 1896 | [class*="mado-table"]:not(.mado-table-normal).mado-table-stripe.markdown-rendered.mado-table-right .markdown-preview-section table tr:nth-child(2n+1) td:last-child, 1897 | .mado-table-normal.mado-table-stripe.markdown-rendered .markdown-preview-section table tr:nth-child(2n+1) :is(td:first-child, td:last-child), 1898 | [class*="mado-table"]:not(.mado-table-normal).mado-table-border.markdown-rendered .markdown-preview-section table :is(tr th:nth-child(2n+2), tr td:nth-child(2n+1)), 1899 | [class*="mado-table"]:not(.mado-table-normal).mado-table-border.markdown-rendered.mado-table-bottom .markdown-preview-section table tr:last-child td:nth-child(2n){ 1900 | background-color:var(--background-primary); 1901 | } 1902 | .mado-table-normal.mado-table-stripe.markdown-rendered .markdown-preview-section table tr:nth-child(2n) td, 1903 | .mado-table-normal.mado-table-border.markdown-rendered .markdown-preview-section table :is(tr th:nth-child(2n+1), tr td:nth-child(2n+1)), 1904 | .mado-table-border.markdown-rendered.mado-table-bottom .markdown-preview-section table tr:last-child td:nth-child(2n+1), 1905 | [class*="mado-table"]:not(.mado-table-normal).mado-table-stripe.markdown-rendered.mado-table-bottom .markdown-preview-section table tr:last-child :is(td:first-child, td:last-child){ 1906 | background-color:var(--background-secondary); 1907 | } 1908 | 1909 | 1910 | 1911 | 1912 | 1913 | 1914 | /* Mado Table Auto-Expand */ 1915 | 1916 | /* Remove master-parent width limit */ 1917 | .mado-table-auto.is-readable-line-width>div.markdown-preview-sizer.markdown-preview-section, 1918 | .mado-table-auto.markdown-source-view.mod-cm6.is-readable-line-width :is(.cm-sizer, .cm-content){ 1919 | max-width:100%; 1920 | } 1921 | 1922 | /* attach width limit to all other normal divs except table */ 1923 | .mado-table-auto.is-readable-line-width>div.markdown-preview-sizer.markdown-preview-section>div>*, 1924 | .mado-table-auto.markdown-source-view.mod-cm6.is-readable-line-width .cm-editor .cm-contentContainer .cm-content div:not(.cm-table-widget){ 1925 | max-width:var(--file-line-width); 1926 | margin-inline:auto!important; 1927 | } 1928 | .mado-table-auto.is-readable-line-width>div.markdown-preview-sizer.markdown-preview-section>div>table, 1929 | .mado-table-auto.markdown-source-view.mod-cm6.is-readable-line-width .cm-editor .cm-contentContainer .cm-content table{ 1930 | max-width:100%; 1931 | width:auto; 1932 | margin-inline:auto!important; 1933 | } 1934 | 1935 | 1936 | /* Mado Table Check */ 1937 | 1938 | .mado-table-check td:has(del){ 1939 | position:relative; 1940 | /* display:flex; */ 1941 | align-items:center; 1942 | justify-content:center; 1943 | z-index:0; 1944 | } 1945 | .mado-table-check td:has(del):before{ 1946 | background:var(--background-primary); 1947 | z-index:-1; 1948 | position:absolute; 1949 | left:0; 1950 | top:0; 1951 | content:""; 1952 | width:100%; 1953 | height:100%; 1954 | } 1955 | .mado-table-check td:has(del):after{ 1956 | position:absolute; 1957 | left:50%; 1958 | top:50%; 1959 | content:""; 1960 | width:50px; 1961 | height:50px; 1962 | transform:translate(-50%, -50%); 1963 | opacity:0.3; 1964 | background-color:MediumSeaGreen; 1965 | -webkit-mask-size:83%; 1966 | -webkit-mask-position:53%; 1967 | -webkit-mask-repeat:no-repeat; 1968 | -webkit-mask-image:url('data:image/svg+xml; utf8, '); 1969 | } 1970 | 1971 | 1972 | 1973 | 1974 | 1975 | 1976 | 1977 | 1978 | /* Mado List2Table */ 1979 | 1980 | div.callout[data-callout="mado-list2table"]{ 1981 | background:none; 1982 | border:none; 1983 | } 1984 | div.callout[data-callout="mado-list2table"] .callout-title, 1985 | div.callout[data-callout="mado-list2table"] .callout-content:before, 1986 | div.callout[data-callout="mado-list2table"] .callout-content>ul :is(.list-bullet,.collapse-indicator), 1987 | div.callout[data-callout="mado-list2table"] .callout-content>ul .contains-task-list:before{ 1988 | display:none; 1989 | } 1990 | div.callout[data-callout="mado-list2table"] .callout-content{ 1991 | padding:0; 1992 | } 1993 | div.callout[data-callout="mado-list2table"] .callout-content>ul{ 1994 | display:flex; 1995 | flex-direction:column; 1996 | min-width:max-content; 1997 | height:auto; 1998 | padding:0; 1999 | } 2000 | div.callout[data-callout="mado-list2table"] .callout-content>ul>li{ 2001 | display:flex; 2002 | flex-direction:row; 2003 | gap:7px; 2004 | align-items:center; 2005 | } 2006 | div.callout[data-callout="mado-list2table"] .callout-content>ul>li>ul{ 2007 | display:flex; 2008 | flex-direction:row; 2009 | gap:3px; 2010 | padding:0; 2011 | } 2012 | div.callout[data-callout="mado-list2table"] .callout-content>ul>li>ul>li{ 2013 | position:relative; 2014 | height:53px; 2015 | min-width:53px; 2016 | display:flex; 2017 | align-items:center; 2018 | justify-content:center; 2019 | padding:11px; 2020 | overflow:hidden; 2021 | } 2022 | div.callout[data-callout="mado-list2table"] .callout-content>ul>li>ul>li>*{ 2023 | position:absolute; 2024 | left:0; 2025 | top:0; 2026 | } 2027 | div.callout[data-callout="mado-list2table"] .callout-content>ul>li>ul>li .task-list-item-checkbox{ 2028 | margin:0; 2029 | padding:0; 2030 | height:100%; 2031 | width:100%; 2032 | } 2033 | div.callout[data-callout="mado-list2table"] .callout-content>ul>li>ul>li.is-checked{ 2034 | text-decoration:none; 2035 | opacity:0.4; 2036 | } 2037 | div.callout[data-callout="mado-list2table"] .callout-content>ul>li>ul>li .task-list-item-checkbox:checked{ 2038 | background:none; 2039 | z-index:10; 2040 | } 2041 | div.callout[data-callout="mado-list2table"] .callout-content>ul>li>ul>li .task-list-item-checkbox:checked:after{ 2042 | left:50%; 2043 | top:50%; 2044 | transform:translate(-50%, -50%); 2045 | width:40px; 2046 | height:40px; 2047 | opacity:0.4; 2048 | background-color:MediumSeaGreen; 2049 | -webkit-mask-size:83%; 2050 | -webkit-mask-position:53%; 2051 | -webkit-mask-repeat:no-repeat; 2052 | -webkit-mask-image:url('data:image/svg+xml; utf8, '); 2053 | } 2054 | 2055 | 2056 | 2057 | 2058 | 2059 | 2060 | 2061 | 2062 | 2063 | /* Mado Explorer */ 2064 | 2065 | /* Hide Inline Title */ 2066 | .workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer .inline-title{ 2067 | display:none; 2068 | } 2069 | 2070 | /* Reset font size */ 2071 | .workspace-split:is(.mod-right-split, .mod-left-split) :is(.markdown-preview-view, .markdown-source-view).mado-explorer{ 2072 | font-size:var(--font-text-size); 2073 | } 2074 | 2075 | /* Adjust margin and padding from the note pane & the elements */ 2076 | .workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer, 2077 | .workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer .markdown-preview-sizer.markdown-preview-section{ 2078 | margin:0!important; 2079 | padding:0!important; 2080 | } 2081 | .workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer{ 2082 | padding:var(--size-4-6) var(--size-4-3)!important; 2083 | } 2084 | .workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer .markdown-preview-sizer p, 2085 | .workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer .markdown-preview-sizer ul, 2086 | .workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer .markdown-preview-sizer li{ 2087 | margin:0; 2088 | padding:0; 2089 | } 2090 | .workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer ul{ 2091 | padding-block:7px!important; 2092 | padding-left:13px!important; 2093 | margin-left:20px!important; 2094 | } 2095 | body.css-settings-manager:not(.toggle-explorer-indent) .workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer ul{ 2096 | border-left:var(--nav-indentation-guide-width) solid var(--nav-indentation-guide-color); 2097 | } 2098 | 2099 | /* Explorer Button design */ 2100 | .workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer a, 2101 | .workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer li, 2102 | .workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer h1{ 2103 | padding:var(--button-padding-long); 2104 | transition:0.05s ease-in; 2105 | transition-property:background, color; 2106 | text-decoration:none; 2107 | margin:0; 2108 | position:relative; 2109 | color:var(--nav-item-color); 2110 | font-size:var(--nav-item-size); 2111 | font-weight:var(--nav-item-weight); 2112 | line-height:var(--line-height-tight); 2113 | border-radius:var(--button-radius); 2114 | cursor:var(--cursor); 2115 | margin-bottom:var(--size-2-1); 2116 | overflow:hidden; 2117 | white-space:var(--nav-item-white-space); 2118 | text-overflow:ellipsis; 2119 | width:calc(100% - 0px); 2120 | display:inline-block; 2121 | vertical-align:middle; 2122 | } 2123 | 2124 | /* expand collapse icon to full size of parent to be clickable */ 2125 | .workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer h1 .heading-collapse-indicator.collapse-indicator.collapse-icon{ 2126 | position:absolute; 2127 | width:100%; 2128 | height:100%; 2129 | margin:0; 2130 | padding:0; 2131 | top:0; 2132 | left:0; 2133 | opacity:1; 2134 | } 2135 | 2136 | body.css-settings-manager:not(.toggle-explorer-collapse) .workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer h1{ 2137 | padding-left:33px; 2138 | } 2139 | body.css-settings-manager:not(.toggle-explorer-collapse) .workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer .collapse-indicator svg{ 2140 | position:absolute; 2141 | left:15px; 2142 | top:16px; 2143 | } 2144 | 2145 | /* hide frontmatter, collapse icon, heading without value and linebreak */ 2146 | .workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer .frontmatter, 2147 | body:is(:not(.css-settings-manager),.toggle-explorer-collapse) .workspace-tabs .markdown-preview-view.mado-explorer .collapse-indicator svg, 2148 | .workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer .list-bullet, 2149 | .workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer .markdown-preview-sizer h1[data-heading=""], 2150 | .workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer .markdown-preview-sizer p br{ 2151 | display:none; 2152 | } 2153 | 2154 | .workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer a:hover, 2155 | .workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer li:hover, 2156 | .workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer h1:hover{ 2157 | background-color:var(--nav-item-background-hover); 2158 | color:var(--nav-item-color-hover); 2159 | font-weight:var(--nav-item-weight-hover); 2160 | } 2161 | .workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer li>a:hover{ 2162 | background:none; 2163 | } 2164 | .workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer h1, 2165 | .workspace-split:not(.mod-root) .workspace-tabs .markdown-preview-view.mado-explorer h1:hover{ 2166 | color:var(--color-accent-2); 2167 | font-size:0.95em; 2168 | font-weight:500; 2169 | } 2170 | 2171 | 2172 | 2173 | /* Mado Daily */ 2174 | .mado-daily table td{ 2175 | font-size:2rem; 2176 | position:relative; 2177 | } 2178 | .mado-daily table td:not(:empty):not(:nth-child(3)):not(:nth-child(7)){ 2179 | background:var(--background-primary); 2180 | } 2181 | .mado-daily table thead{ 2182 | display:none; 2183 | } 2184 | /* show checkmark when previous days are filled(no longer empty), */ 2185 | /* using "~" instead of "+" decrease the complexity, though it also decrease credibility(?) as checkmark will appear if the previous day is filled */ 2186 | .mado-daily table td:first-child:not(:empty)~td:not(:empty)+td:nth-child(3), 2187 | .mado-daily table td:first-child:not(:empty)~td:not(:empty)+td:nth-child(7){ 2188 | background:var(--background-secondary); 2189 | position:relative; 2190 | overflow:hidden; 2191 | z-index:10; 2192 | } 2193 | .mado-daily table td:nth-child(3):before, 2194 | .mado-daily table td:nth-child(7):before{ 2195 | position:absolute; 2196 | left:50%; 2197 | top:50%; 2198 | content:""; 2199 | width:100%; 2200 | height:100%; 2201 | transform:translate(-50%, -50%); 2202 | z-index:-1; 2203 | opacity:0.3; 2204 | background-color:MediumSeaGreen; 2205 | -webkit-mask-size:83%; 2206 | -webkit-mask-position:53%; 2207 | -webkit-mask-repeat:no-repeat; 2208 | -webkit-mask-image:url('data:image/svg+xml; utf8, '); 2209 | } 2210 | 2211 | 2212 | 2213 | 2214 | 2215 | 2216 | 2217 | 2218 | /* Mado Timeline */ 2219 | 2220 | .mado-timeline .markdown-preview-sizer>div{ 2221 | text-align:center; 2222 | display:flex; 2223 | align-items:center; 2224 | justify-content:center; 2225 | } 2226 | .mado-timeline .markdown-preview-sizer>div>ul{ 2227 | text-align:center; 2228 | display:flex; 2229 | flex-direction:column; 2230 | align-items:center; 2231 | justify-content:center; 2232 | margin-bottom:0; 2233 | padding-bottom:13px; 2234 | } 2235 | .mado-timeline .markdown-preview-sizer>div>:is(blockquote,.callout, pre, table){ 2236 | margin-top:23px; 2237 | } 2238 | .mado-timeline .markdown-preview-sizer>div>hr{ 2239 | width:70%; 2240 | margin-top:53px; 2241 | } 2242 | 2243 | .mado-timeline .markdown-preview-sizer>div>:is(pre,table){ 2244 | text-align:left; 2245 | } 2246 | 2247 | .mado-timeline .markdown-preview-sizer>div>.callout .callout-title{ 2248 | justify-content:center; 2249 | } 2250 | .mado-timeline .markdown-preview-sizer>div>.callout .callout-title .callout-fold{ 2251 | padding-right:0; 2252 | } 2253 | .mado-timeline .markdown-preview-sizer>div>.callout .callout-content{ 2254 | padding:7px 0; 2255 | } 2256 | .mado-timeline .markdown-preview-sizer>div>.callout .callout-content:before{ 2257 | display:none; 2258 | } 2259 | 2260 | .mado-timeline .markdown-preview-sizer>div>h1{\ 2261 | margin-block:100px 11px; 2262 | color:var(--color-accent); 2263 | font-size:36px; 2264 | } 2265 | .mado-timeline .markdown-preview-sizer>div>h2{ 2266 | font-size:1.7rem; 2267 | position:relative; 2268 | padding-top:13px; 2269 | margin-block:33px var(--p-spacing); 2270 | } 2271 | .mado-timeline .markdown-preview-sizer>div:has(>h2)+div>*:not(h2){ 2272 | margin-top:-13px; 2273 | } 2274 | .mado-timeline .markdown-preview-sizer>div>h2:before{ 2275 | content:""; 2276 | width:2px; 2277 | border-radius:100%; 2278 | background:var(--text-faint); 2279 | position:absolute; 2280 | height: 40px; 2281 | top: -35px; 2282 | left: 50%; 2283 | opacity:0.5; 2284 | } 2285 | .mado-timeline .markdown-preview-sizer>div.is-collapsed>h2{ 2286 | margin-bottom:13px; 2287 | } 2288 | 2289 | 2290 | 2291 | 2292 | 2293 | 2294 | 2295 | 2296 | 2297 | /* Mado Panel */ 2298 | 2299 | /* Mado Panel Flexible(default) & Mado Panel Callout */ 2300 | 2301 | div.callout[data-callout*="mado-panel"]{ 2302 | background-color:initial; 2303 | mix-blend-mode:normal; 2304 | padding:0; 2305 | border:none; 2306 | } 2307 | div.callout[data-callout*="mado-panel"] .callout-content{ 2308 | padding:0; 2309 | overflow-x:initial; 2310 | } 2311 | 2312 | /* hide original callout design */ 2313 | div.callout[data-callout*="mado-panel"] :is(.callout-title, .list-bullet), 2314 | div.callout[data-callout*="mado-panel"] .callout-content:before{ 2315 | display:none; 2316 | } 2317 | 2318 | 2319 | [class*="mado-panel"] .markdown-preview-sizer>div ul.has-list-bullet:before, 2320 | div.callout[data-callout*="mado-panel"] ul.has-list-bullet:before{ 2321 | display:none; 2322 | } 2323 | 2324 | [class*="mado-panel"] .markdown-preview-sizer>div ul, 2325 | div.callout[data-callout*="mado-panel"] ul{ 2326 | display:flex; 2327 | flex-wrap:wrap; 2328 | width:100%; 2329 | gap:13px; 2330 | transition:height 0.2s, opacity 0.2s; 2331 | padding-inline:23px; 2332 | padding-block:7px; 2333 | } 2334 | 2335 | [class*="mado-panel"] .markdown-preview-sizer>div ul li, 2336 | div.callout[data-callout*="mado-panel"] ul li{ 2337 | display:flex; 2338 | align-items:center; 2339 | justify-content:center; 2340 | padding-block:13px; 2341 | padding-inline:23px; 2342 | background:var(--background-fourth); 2343 | border:var(--border); 2344 | border-radius:var(--panel-radius); 2345 | box-shadow:var(--panel-shadow); 2346 | transition:0.1s background, 0.1s box-shadow, transform 0.1s; 2347 | text-align:center; 2348 | width:auto; 2349 | /* min-width:calc(100% / 4 - 10px); */ 2350 | flex:auto; 2351 | min-height:70px; 2352 | overflow:hidden; 2353 | } 2354 | 2355 | [class*="mado-panel"] .markdown-preview-sizer>div ul li .list-bullet{ 2356 | display:none; 2357 | } 2358 | /* Hover-Child-Only doesn't actually look too comfortable, disabling it for the time being */ 2359 | /* [class*="mado-panel"] .markdown-preview-sizer>div ul li:hover:not(:has(li:hover)), */ 2360 | /* div.callout[data-callout*="mado-panel"] ul li:hover:not(:has(li:hover)){ */ 2361 | [class*="mado-panel"] .markdown-preview-sizer>div ul li:hover, 2362 | div.callout[data-callout*="mado-panel"] ul li:hover{ 2363 | background:var(--background-fifth); 2364 | /* background:var(--background-primary); */ 2365 | transform:translateY(-3px); 2366 | box-shadow:var(--panel-shadow-hover); 2367 | } 2368 | 2369 | [class*="mado-panel"] .markdown-preview-sizer>div ul a:not(:hover), 2370 | div.callout[data-callout*="mado-panel"] ul a:not(:hover){ 2371 | text-decoration:none; 2372 | } 2373 | /* adapt "a" link to whole panel so to be clickable */ 2374 | [class*="mado-panel-link"] .markdown-preview-sizer>div ul a:not(.tag), 2375 | div.callout[data-callout*="mado-panel"][data-callout*="-link"] ul a:not(.tag){ 2376 | display:flex; 2377 | align-items:center; 2378 | justify-content:center; 2379 | height:calc(100% + 26px); 2380 | width:calc(100% + 46px); 2381 | padding-block:13px; 2382 | padding-inline:23px; 2383 | margin-block:-13px; 2384 | margin-inline:-23px; 2385 | text-decoration:none; 2386 | } 2387 | [class*="mado-panel"] .markdown-preview-sizer>div li.task-list-item, 2388 | div.callout[data-callout*="mado-panel"] ul li.task-list-item{ 2389 | position:relative; 2390 | } 2391 | [class*="mado-panel"] .markdown-preview-sizer>div li.task-list-item>input, 2392 | div.callout[data-callout*="mado-panel"] ul li.task-list-item>input{ 2393 | padding:11px; 2394 | position:absolute; 2395 | right:0; 2396 | top:0; 2397 | left:unset; 2398 | margin:7px; 2399 | border:var(--border); 2400 | border-radius:var(--button-radius); 2401 | } 2402 | [class*="mado-panel"] .markdown-preview-sizer>div li.task-list-item.is-checked, 2403 | div.callout[data-callout*="mado-panel"] ul li.task-list-item.is-checked{ 2404 | background:var(--background-secondary); 2405 | } 2406 | [class*="mado-panel"] .contains-task-list.has-list-bullet li, 2407 | div.callout[data-callout*="mado-panel"] .contains-task-list.has-list-bullet li{ 2408 | margin-block:0; 2409 | } 2410 | 2411 | 2412 | 2413 | 2414 | /* Mado Panel List & Mado Panel Callout List*/ 2415 | [class*="mado-panel-list"] .markdown-preview-sizer>div ul, 2416 | div.callout[data-callout*="mado-panel-list"] ul{ 2417 | gap:7px; 2418 | } 2419 | [class*="mado-panel-list"] .markdown-preview-sizer>div ul li, 2420 | div.callout[data-callout*="mado-panel-list"] ul li{ 2421 | display:inline-block; 2422 | padding-block:8px; 2423 | min-height:unset; 2424 | text-align:left; 2425 | width:100%; 2426 | overflow:visible; 2427 | margin-inline-start:0; 2428 | } 2429 | /* fix some panel-link margin issue */ 2430 | [class*="mado-panel-list"] .markdown-preview-sizer>div ul li:has(>p){ 2431 | display: inline-block; 2432 | vertical-align: super; 2433 | height: calc(100% + 16px); 2434 | width: calc(100% + 23px); 2435 | padding-block: 8px; 2436 | margin-block: -8px; 2437 | text-align: left; 2438 | } 2439 | [class*="mado-panel-list"][class*="mado-panel-link"] .markdown-preview-sizer>div ul li a:not(.tag), 2440 | div.callout[data-callout*="mado-panel-list"][data-callout*="-link"] ul li a:not(.tag){ 2441 | height:calc(100% + 16px); 2442 | width:calc(100% + 46px); 2443 | padding-block:8px; 2444 | margin-block:-8px; 2445 | display:inline-block; 2446 | text-align:left; 2447 | } 2448 | 2449 | [class*="mado-panel-list"] .markdown-preview-sizer>div li.task-list-item, 2450 | div.callout[data-callout*="mado-panel-list"] ul li.task-list-item{ 2451 | padding-inline:43px 23px; 2452 | } 2453 | [class*="mado-panel-list"] .markdown-preview-sizer>div li.task-list-item>input, 2454 | div.callout[data-callout*="mado-panel-list"] ul li.task-list-item>input{ 2455 | padding:12px; 2456 | left:0; 2457 | } 2458 | [class*="mado-panel-list"] .markdown-preview-sizer>div li:hover>.list-collapse-indicator, 2459 | div.callout[data-callout*="mado-panel-list"] ul li:hover>.list-collapse-indicator{ 2460 | opacity:1; 2461 | } 2462 | 2463 | [class*="mado-panel-list-rightbox"] .markdown-preview-sizer>div li.task-list-item, 2464 | div.callout[data-callout*="mado-panel-list-rightbox"] ul li.task-list-item{ 2465 | padding-inline:23px; 2466 | } 2467 | [class*="mado-panel-list-rightbox"] .markdown-preview-sizer>div li.task-list-item>input, 2468 | div.callout[data-callout*="mado-panel-list"][data-callout*="-rightbox"] ul li.task-list-item>input{ 2469 | left:unset; 2470 | } 2471 | 2472 | 2473 | /* the very first list */ 2474 | [class*="mado-panel-list"] .markdown-preview-sizer>div>ul>li>.list-collapse-indicator, 2475 | div.callout[data-callout*="mado-panel-list"] .callout-content>ul>li>.list-collapse-indicator{ 2476 | margin-left:-53px; 2477 | } 2478 | /* all normal list */ 2479 | [class*="mado-panel-list"] .markdown-preview-sizer>div li>.list-collapse-indicator, 2480 | div.callout[data-callout*="mado-panel-list"] ul li>.list-collapse-indicator{ 2481 | margin-left:-40px; 2482 | } 2483 | /* all task lisk */ 2484 | [class*="mado-panel-list"] .markdown-preview-sizer>div li.task-list-item>.list-collapse-indicator, 2485 | div.callout[data-callout*="mado-panel-list"] ul li.task-list-item>.list-collapse-indicator{ 2486 | margin-left:-73px; 2487 | margin-top:0px; 2488 | } 2489 | /* rightbox task lisk */ 2490 | [class*="mado-panel-list-rightbox"] .markdown-preview-sizer>div li.task-list-item>.list-collapse-indicator, 2491 | div.callout[data-callout*="mado-panel-list"][data-callout*="-rightbox"] ul li.task-list-item>.list-collapse-indicator{ 2492 | margin-left:-49px; 2493 | } 2494 | /* normal list inside a task list */ 2495 | [class*="mado-panel-list"] .markdown-preview-sizer>div li.task-list-item li:not(.task-list-item)>.list-collapse-indicator, 2496 | div.callout[data-callout*="mado-panel-list"] ul li.task-list-item li:not(.task-list-item)>.list-collapse-indicator{ 2497 | margin-left:-53px; 2498 | } 2499 | /* task list inside a normal list */ 2500 | [class*="mado-panel-list"] .markdown-preview-sizer>div li:not(.task-list-item)>ul>li.task-list-item>.list-collapse-indicator, 2501 | div.callout[data-callout*="mado-panel-list"] ul li:not(.task-list-item)>ul>li.task-list-item>.list-collapse-indicator{ 2502 | margin-left:-60px; 2503 | } 2504 | 2505 | [class*="mado-panel-list"] .markdown-preview-sizer>div li :is(ul,ol), 2506 | div.callout[data-callout*="mado-panel-list"] ul li :is(ul,ol){ 2507 | padding-inline:0; 2508 | } 2509 | [class*="mado-panel-list"] .markdown-preview-sizer>div li.is-collapsed>:is(ul,ol), 2510 | [class*="mado-panel-list"] .markdown-preview-sizer>div li :is(ul,ol):before, 2511 | div.callout[data-callout*="mado-panel-list"] ul li.is-collapsed>:is(ul,ol), 2512 | div.callout[data-callout*="mado-panel-list"] ul li :is(ul,ol):before{ 2513 | display:none; 2514 | } 2515 | 2516 | 2517 | 2518 | 2519 | /* Mado Panel Sizing */ 2520 | /* small = short & short */ 2521 | /* medium = taller & longer */ 2522 | /* large = tallest & longest */ 2523 | /* short = short & longer */ 2524 | /* long = short & longest */ 2525 | [class*="mado-panel-small"] .markdown-preview-sizer>div ul li, 2526 | div.callout[data-callout*="mado-panel-small"]>.callout-content>ul>li{ 2527 | width:calc(100% / 4 - 10px); 2528 | max-width:200px; 2529 | height:70px; 2530 | } 2531 | [class*="mado-panel-medium"] .markdown-preview-sizer>div ul li, 2532 | div.callout[data-callout*="mado-panel-medium"]>.callout-content>ul>li{ 2533 | width:calc(100% / 3 - 9px); 2534 | max-width:250px; 2535 | height:110px; 2536 | } 2537 | [class*="mado-panel-large"] .markdown-preview-sizer>div ul li, 2538 | div.callout[data-callout*="mado-panel-large"]>.callout-content>ul>li{ 2539 | width:calc(100% / 2 - 7px); 2540 | max-width:300px; 2541 | height:130px; 2542 | } 2543 | [class*="mado-panel-short"] .markdown-preview-sizer>div ul li, 2544 | div.callout[data-callout*="mado-panel-short"]>.callout-content>ul>li{ 2545 | width:calc(100% / 3 - 9px); 2546 | max-width:250px; 2547 | height:70px; 2548 | } 2549 | [class*="mado-panel-long"] .markdown-preview-sizer>div ul li, 2550 | div.callout[data-callout*="mado-panel-long"]>.callout-content>ul>li{ 2551 | width:calc(100% / 2 - 7px); 2552 | max-width:300px; 2553 | height:70px; 2554 | } 2555 | [class*="mado-panel-auto"] .markdown-preview-sizer>div ul li, 2556 | div.callout[data-callout*="mado-panel"][data-callout*="-auto"]>.callout-content>ul>li{ 2557 | max-width:unset; 2558 | } 2559 | [class*="mado-panel-auto"][class*="mado-panel-small"] .markdown-preview-sizer>div ul li, 2560 | div.callout[data-callout*="mado-panel-small"][data-callout*="-auto"]>.callout-content>ul>li{ 2561 | min-width:calc(100% / 4 - 10px); 2562 | } 2563 | [class*="mado-panel-auto"][class*="mado-panel-medium"] .markdown-preview-sizer>div ul li, 2564 | div.callout[data-callout*="mado-panel-medium"][data-callout*="-auto"]>.callout-content>ul>li{ 2565 | min-width:calc(100% / 3 - 9px); 2566 | } 2567 | [class*="mado-panel-auto"][class*="mado-panel-large"] .markdown-preview-sizer>div ul li, 2568 | div.callout[data-callout*="mado-panel-large"][data-callout*="-auto"]>.callout-content>ul>li{ 2569 | min-width:calc(100% / 2 - 7px); 2570 | } 2571 | [class*="mado-panel-auto"][class*="mado-panel-short"] .markdown-preview-sizer>div ul li, 2572 | div.callout[data-callout*="mado-panel-short"][data-callout*="-auto"]>.callout-content>ul>li{ 2573 | min-width:calc(100% / 3 - 9px); 2574 | } 2575 | [class*="mado-panel-auto"][class*="mado-panel-long"] .markdown-preview-sizer>div ul li, 2576 | div.callout[data-callout*="mado-panel-long"][data-callout*="-auto"]>.callout-content>ul>li{ 2577 | min-width:calc(100% / 2 - 7px); 2578 | } 2579 | 2580 | 2581 | 2582 | 2583 | 2584 | 2585 | /* Mado Panel Callout Task Feature */ 2586 | div.callout[data-callout*="mado-panel-task"]>.callout-content>ul>li{ 2587 | width:calc(100% / 2 - 7px); 2588 | height:130px; 2589 | display:none; 2590 | } 2591 | div.callout[data-callout*="mado-panel-task"]>.callout-content>ul>li:nth-child(1), 2592 | div.callout[data-callout*="mado-panel-task"]>.callout-content>ul>li:nth-child(2){ 2593 | display:flex; 2594 | } 2595 | /* When two main tasks above are completed, show the rest of the tasks */ 2596 | div.callout[data-callout*="mado-panel-task"]>.callout-content>ul>li.is-checked:nth-child(1)+li.is-checked:nth-child(2)~li{ 2597 | width:calc(100% / 4 - 10px); 2598 | height:70px; 2599 | display:flex; 2600 | } 2601 | 2602 | 2603 | 2604 | 2605 | 2606 | 2607 | 2608 | 2609 | 2610 | 2611 | /* 2612 | --------------------------- --------------------------- 2613 | --------------------------- --------------------------- 2614 | Plugin Supports 2615 | --------------------------- --------------------------- 2616 | --------------------------- --------------------------- 2617 | */ 2618 | 2619 | 2620 | 2621 | /* Banner Plugin */ 2622 | img.banner-image{ 2623 | border-radius:0; 2624 | } 2625 | 2626 | 2627 | 2628 | 2629 | /* Kanban Plugin */ 2630 | .kanban-plugin{ 2631 | background:var(--background-primary); 2632 | } 2633 | .kanban-plugin .markdown-preview-view{ 2634 | padding-inline:3px; 2635 | } 2636 | 2637 | .kanban-plugin__lane { 2638 | background: var(--background-fourth); 2639 | box-shadow: var(--window-shadow); 2640 | } 2641 | .kanban-plugin__lane-items>div { 2642 | margin-top: 7px; 2643 | } 2644 | .kanban-plugin__lane-items.kanban-plugin__vertical.kanban-plugin__scroll-container{ 2645 | background: var(--background-primary); 2646 | margin:0; 2647 | padding:7px 11px; 2648 | } 2649 | .kanban-plugin__item-wrapper{ 2650 | box-shadow: var(--panel-shadow); 2651 | } 2652 | .kanban-plugin__item-title-wrapper { 2653 | background: var(--background-fourth); 2654 | padding: 11px 15px; 2655 | } 2656 | .kanban-plugin__item-metadata{ 2657 | padding-top:0; 2658 | } 2659 | /* .markdown-preview-view.kanban-plugin__markdown-preview-view.kanban-plugin__item-markdown>div>ul{ */ 2660 | /* border: var(--border); */ 2661 | /* padding: 23px 33px; */ 2662 | /* background: var(--background-secondary); */ 2663 | /* border-radius: var(--panel-radius); */ 2664 | /* margin-block: 7px; */ 2665 | /* box-shadow: var(--panel-shadow); */ 2666 | /* } */ 2667 | 2668 | .kanban-plugin__item-markdown code{ 2669 | font-family: var(--font-monospace); 2670 | background-color: var(--code-background); 2671 | border-radius: var(--code-radius); 2672 | font-size: var(--code-size); 2673 | padding: 0.1em 0.25em; 2674 | } 2675 | .kanban-plugin__item-markdown :not(pre)>code{ 2676 | color:var(--inline-code-color); 2677 | } 2678 | .kanban-plugin__item-markdown pre{ 2679 | position: relative; 2680 | padding: var(--size-4-3) var(--size-4-4); 2681 | min-height: 38px; 2682 | background-color: var(--code-background); 2683 | border-radius: var(--code-radius); 2684 | white-space: var(--code-white-space); 2685 | } 2686 | .kanban-plugin__item-markdown pre .copy-code-button{ 2687 | display:none; 2688 | } 2689 | 2690 | /* icon and button styling */ 2691 | .kanban-plugin__item :is(button.kanban-plugin__item-prefix-button, button.kanban-plugin__item-postfix-button), 2692 | .kanban-plugin__lane button.kanban-plugin__lane-settings-button{ 2693 | -webkit-app-region: no-drag; 2694 | display: flex; 2695 | align-items: center; 2696 | justify-content: center; 2697 | padding: var(--button-padding-icon); 2698 | cursor: var(--cursor); 2699 | border-radius: var(--clickable-icon-radius); 2700 | color: var(--icon-color); 2701 | opacity: var(--icon-opacity); 2702 | transition: opacity 0.15s ease-in-out; 2703 | height: auto; 2704 | box-shadow:none; 2705 | } 2706 | .kanban-plugin__item :is(button.kanban-plugin__item-prefix-button, button.kanban-plugin__item-postfix-button):hover, 2707 | .kanban-plugin__lane button.kanban-plugin__lane-settings-button:hover{ 2708 | opacity: var(--icon-opacity-hover); 2709 | color: var(--icon-color-hover); 2710 | background-color: var(--background-modifier-hover); 2711 | } 2712 | div.kanban-plugin__lane-title-count{ 2713 | padding: var(--button-padding-icon); 2714 | width:33px; 2715 | height:27px; 2716 | text-align:center; 2717 | } 2718 | 2719 | .kanban-plugin__item-metadata-wrapper:not(:empty){ 2720 | background:var(--background-primary); 2721 | } 2722 | 2723 | /* checkbox completed styling */ 2724 | .kanban-plugin__item.is-complete :is(.markdown-preview-view>div *, .kanban-plugin__item-metadata-wrapper:not(:empty) *){ 2725 | text-decoration:line-through; 2726 | text-decoration-color:var(--color-strikethrough); 2727 | color:var(--color-strikethrough); 2728 | } 2729 | .kanban-plugin__item.is-complete img{ 2730 | opacity:0.3; 2731 | } 2732 | 2733 | 2734 | 2735 | 2736 | 2737 | 2738 | /* db folder & kanban fix */ 2739 | .workspace-split.mod-vertical.mod-root :is([data-type="database-plugin"],.kanban-plugin) .markdown-preview-view{ 2740 | padding-inline:0; 2741 | } 2742 | 2743 | 2744 | 2745 | 2746 | 2747 | 2748 | 2749 | 2750 | 2751 | 2752 | 2753 | 2754 | 2755 | 2756 | 2757 | 2758 | 2759 | 2760 | 2761 | 2762 | 2763 | /* Style Setting Styling */ 2764 | .style-settings-container{ 2765 | border:var(--border); 2766 | border-radius:var(--panel-radius); 2767 | padding:17px 27px; 2768 | } 2769 | 2770 | /* Remove border-bottom, replace it with border-top */ 2771 | .setting-item.setting-item-heading.style-settings-heading{ 2772 | border-bottom:none; 2773 | border-top:1px solid var(--background-modifier-border); 2774 | } 2775 | /* Remove margin-bottom when collapsed*/ 2776 | .setting-item.setting-item-heading.style-settings-heading:not(.is-collapsed){ 2777 | margin-bottom:0; 2778 | } 2779 | /* Remove border-top if header is first-child, and header if previous header is collapsed */ 2780 | .setting-item.setting-item-heading.style-settings-heading:not(.is-collapsed)+.style-settings-container+.setting-item.setting-item-heading.style-settings-heading, 2781 | .setting-item.setting-item-heading.style-settings-heading:first-child{ 2782 | border-top:none; 2783 | } 2784 | .style-settings-container{ 2785 | padding-block:13px; 2786 | } 2787 | .style-settings-heading{ 2788 | padding-block:13px 0; 2789 | } 2790 | .style-settings-container{ 2791 | margin-block:13px; 2792 | box-shadow:var(--panel-shadow); 2793 | } 2794 | .style-settings-heading .setting-item:last-child{ 2795 | padding-bottom:0; 2796 | } 2797 | .style-settings-heading .setting-item+.setting-item-heading{ 2798 | margin-top:0; 2799 | } 2800 | .style-settings-collapse-indicator{ 2801 | color:var(--text-normal); 2802 | } 2803 | .style-settings-heading+.style-settings-container+.style-settings-heading{ 2804 | margin-top:13px; 2805 | } 2806 | 2807 | 2808 | /* remove weird margin top */ 2809 | .themed-color-wrapper>div, 2810 | .themed-color-wrapper>div+div{ 2811 | margin-top:0; 2812 | padding:0 0 0 7px; 2813 | border:var(--border); 2814 | background:var(--color-base-00); /* For some reason it's not working originally */ 2815 | } 2816 | 2817 | 2818 | .themed-color-wrapper{ 2819 | display:flex; 2820 | align-items:center; 2821 | flex-direction:row; 2822 | gap:7px; 2823 | } 2824 | 2825 | /* Button here has no .clickable-icon, so applying the originals into it */ 2826 | .pickr-reset button{ 2827 | -webkit-app-region: no-drag; 2828 | display: flex; 2829 | align-items: center; 2830 | justify-content: center; 2831 | padding: var(--button-padding-icon); 2832 | cursor: var(--cursor); 2833 | border-radius: var(--clickable-icon-radius); 2834 | color: var(--icon-color); 2835 | opacity: var(--icon-opacity); 2836 | transition: opacity 0.15s ease-in-out; 2837 | height: auto; 2838 | box-shadow:none; 2839 | background:none; 2840 | } 2841 | .pickr-reset button:hover{ 2842 | opacity: var(--icon-opacity-hover); 2843 | color: var(--icon-color-hover); 2844 | background-color: var(--background-modifier-hover); 2845 | } 2846 | /* For some reason it's not working originally, so manually change the hover color */ 2847 | .themed-color-wrapper>div.theme-light .pickr-reset button:hover{ 2848 | background-color:var(--color-base-shadow-hover); 2849 | } 2850 | .themed-color-wrapper>div.theme-dark .pickr-reset button:hover{ 2851 | background-color:var(--color-base-05); 2852 | } 2853 | 2854 | /* turn into One row instead of multi rows */ 2855 | .view-content .style-settings-container .setting-item:not(.setting-item-heading){ 2856 | flex-direction:row; 2857 | align-items:center; 2858 | } 2859 | .view-content .style-settings-container .setting-item:not(.setting-item-heading) .setting-item-control{ 2860 | padding-top:0; 2861 | } 2862 | 2863 | /* Custom intro section styling */ 2864 | .setting-item.setting-item-heading.style-settings-heading[data-id="intro-section"]{ 2865 | cursor:default; 2866 | } 2867 | .setting-item.setting-item-heading.style-settings-heading[data-id="intro-section"]:not(.is-collapsed){ 2868 | padding-bottom:13px; 2869 | } 2870 | .setting-item.setting-item-heading.style-settings-heading[data-id="intro-section"]:not(.is-collapsed)+.style-settings-container+.style-settings-heading{ 2871 | margin-top:0; 2872 | } 2873 | .setting-item.setting-item-heading.style-settings-heading[data-id="intro-section"]+.style-settings-container{ 2874 | padding:0; 2875 | border-bottom:0; 2876 | margin-block:0; 2877 | } 2878 | .setting-item.setting-item-heading.style-settings-heading[data-id="intro-section"] :is(.style-settings-collapse-indicator, .setting-item-control){ 2879 | display:none 2880 | } 2881 | .setting-item.setting-item-heading.style-settings-heading[data-id="intro-section"] .setting-item-description{ 2882 | user-select:text; 2883 | cursor:text; 2884 | font-size:14px; 2885 | } 2886 | 2887 | 2888 | 2889 | 2890 | 2891 | 2892 | /* @settings 2893 | 2894 | name: Mado 11 2895 | id: mado-11 2896 | settings: 2897 | - 2898 | id: intro-section 2899 | title: Introduction 2900 | description: "The setting here covers only the very basic to avoid complexity fatigue. That being said, feel free to suggest anything by submitting a Github issue on: https://github.com/hydescarf/Obsidian-Theme-Mado-11" 2901 | type: heading 2902 | collapsed: true 2903 | level: 3 2904 | 2905 | 2906 | 2907 | 2908 | - 2909 | id: theme-section 2910 | title: Theme Section 2911 | type: heading 2912 | collapsed: true 2913 | level: 3 2914 | - 2915 | id: theme-color 2916 | title: Theme Color 2917 | type: class-select 2918 | allowEmpty: false 2919 | default: theme-daisy-blue 2920 | options: 2921 | - 2922 | label: Daisy Blue 2923 | value: theme-daisy-blue 2924 | - 2925 | label: Red Sky 2926 | value: theme-red-sky 2927 | - 2928 | label: Violette 2929 | value: theme-violette 2930 | - 2931 | label: Greenery 2932 | value: theme-greenery 2933 | - 2934 | label: Yellowish 2935 | value: theme-yellowish 2936 | - 2937 | label: Orange Jist 2938 | value: theme-orange-jist 2939 | - 2940 | label: Deep Blue 2941 | value: theme-deep-blue 2942 | - 2943 | label: Tea Teal 2944 | value: theme-tea-teal 2945 | - 2946 | label: Magenta Pink 2947 | value: theme-magenta-pink 2948 | - 2949 | label: Grayscale 2950 | value: theme-grayscale 2951 | - 2952 | id: accent 2953 | title: Accent Color 2954 | type: variable-themed-color 2955 | opacity: false 2956 | format: hsl-split 2957 | default-light: '#' 2958 | default-dark: '#' 2959 | - 2960 | id: bgcolor 2961 | title: Background Color 2962 | description: "*Background color is not dynamically coded. You may see off-colors if you wish to change this setting." 2963 | type: variable-themed-color 2964 | opacity: false 2965 | format: hsl-split 2966 | default-light: '#' 2967 | default-dark: '#' 2968 | - 2969 | id: toggle-wave-background 2970 | title: Enable background wave design on left sidebar 2971 | type: class-toggle 2972 | default: false 2973 | - 2974 | id: toggle-sidebar-right-color 2975 | title: Enable alternative background color for right sidebar 2976 | type: class-toggle 2977 | default: false 2978 | - 2979 | id: toggle-topleft-radius 2980 | title: Enable rounded top-left corner of the main pane 2981 | type: class-toggle 2982 | default: true 2983 | - 2984 | id: toggle-note-animation 2985 | title: Enable sliding animation on main pane 2986 | description: Animation is noticable when you switch to a new tab 2987 | type: class-toggle 2988 | default: true 2989 | - 2990 | 2991 | 2992 | 2993 | id: layout-section 2994 | title: Layout Section 2995 | type: heading 2996 | collapsed: true 2997 | level: 3 2998 | - 2999 | 3000 | 3001 | id: toggle-scrollbar-overlay 3002 | title: Enable Overlay Scrollbar 3003 | type: class-toggle 3004 | description: Overlay will provide you wider field of contents, but in return, scrollbar will have to overlap onto it. 3005 | default: true 3006 | - 3007 | id: toggle-easy-toggle 3008 | title: Enable Easy Toggle 3009 | type: class-toggle 3010 | description: Enabling Easy Toggle gives you more triggerable area to reveal the hidden buttons. 3011 | default: true 3012 | - 3013 | id: toggle-topright-opacity 3014 | title: Enable Alternative Toggle Style (Top-right) 3015 | description: Enabling this will switch the toggle style from "sliding" to "fading". 3016 | type: class-toggle 3017 | default: false 3018 | - 3019 | 3020 | 3021 | id: hiding-section 3022 | title: Hiding Elements 3023 | type: heading 3024 | description: Hide/Unhide the surrounding elements. Most can be hovered to reveal them. 3025 | level: 4 3026 | collapsed: true 3027 | - 3028 | id: toggle-titlebar-buttons 3029 | title: Hide Window Titlebar Buttons 3030 | type: class-toggle 3031 | default: true 3032 | - 3033 | id: toggle-side-ribbons 3034 | title: Hide Sidedock Ribbons 3035 | type: class-toggle 3036 | default: true 3037 | - 3038 | id: toggle-sidebar-toggle 3039 | title: Hide Sidebar Toggle Button 3040 | type: class-toggle 3041 | default: true 3042 | - 3043 | id: toggle-sidebar-buttons 3044 | title: Hide Sidebar Tab Buttons 3045 | type: class-toggle 3046 | default: true 3047 | - 3048 | id: toggle-explorer-buttons 3049 | title: Hide File Explorer Buttons 3050 | description: If they are hidden, you may reveal the buttons by hovering at the "Tab Header Buttons" above it. 3051 | type: class-select 3052 | allowEmpty: false 3053 | default: TEB-hide-vertical 3054 | options: 3055 | - 3056 | label: Hide (Vertical) 3057 | value: TEB-hide-vertical 3058 | - 3059 | label: Hide (Horizontal) 3060 | value: TEB-hide-horizontal 3061 | - 3062 | label: Show (Normal) 3063 | value: TEB-show-normal 3064 | - 3065 | label: Show (Vertical) 3066 | value: TEB-show-vertical 3067 | - 3068 | label: Show (Horizontal) 3069 | value: TEB-show-horizontal 3070 | - 3071 | id: toggle-vault-title 3072 | title: Hide File Explorer Vault Title (Unhoverable) 3073 | type: class-toggle 3074 | default: true 3075 | - 3076 | id: toggle-explorer-indent 3077 | title: Hide File Explorer Indentation Guide (Unhoverable) 3078 | type: class-toggle 3079 | default: true 3080 | - 3081 | id: toggle-explorer-collapse 3082 | title: Hide File Explorer Collapse Indicator (Unhoverable) 3083 | type: class-toggle 3084 | default: true 3085 | - 3086 | id: toggle-tab-section 3087 | title: Hide Note Tab Section 3088 | type: class-toggle 3089 | default: false 3090 | - 3091 | id: toggle-note-header 3092 | title: Hide Note Title Bar 3093 | type: class-toggle 3094 | default: false 3095 | - 3096 | id: toggle-status-bar 3097 | title: Hide Status Bar (Unhoverable) 3098 | type: class-toggle 3099 | default: true 3100 | - 3101 | id: toggle-sync-button 3102 | title: Show Sync Button Independently 3103 | type: class-toggle 3104 | description: Available when Status Bar is hidden. 3105 | default: false 3106 | - 3107 | id: toggle-scrollbar 3108 | title: Hide Scrollbar 3109 | type: class-toggle 3110 | default: true 3111 | - 3112 | 3113 | 3114 | 3115 | 3116 | 3117 | 3118 | id: markdown-section 3119 | title: Markdown Section 3120 | type: heading 3121 | collapsed: true 3122 | level: 3 3123 | - 3124 | id: file-line-width 3125 | title: Readable Line Length 3126 | type: variable-number-slider 3127 | default: 700 3128 | format: px 3129 | min: 400 3130 | max: 1200 3131 | step: 10 3132 | - 3133 | id: text-normal 3134 | title: Text Color 3135 | type: variable-themed-color 3136 | format: hsl 3137 | default-light: '#' 3138 | default-dark: '#' 3139 | - 3140 | id: text-muted 3141 | title: Muted Text Color 3142 | type: variable-themed-color 3143 | format: hsl 3144 | default-light: '#' 3145 | default-dark: '#' 3146 | - 3147 | id: text-faint 3148 | title: Faint Text Color 3149 | type: variable-themed-color 3150 | format: hsl 3151 | default-light: '#' 3152 | default-dark: '#' 3153 | - 3154 | 3155 | 3156 | id: typography-section 3157 | title: Typography Section 3158 | type: heading 3159 | collapsed: true 3160 | level: 4 3161 | - 3162 | 3163 | 3164 | id: bold-color 3165 | title: Bold Color 3166 | type: variable-themed-color 3167 | format: hsl 3168 | default-light: '#' 3169 | default-dark: '#' 3170 | - 3171 | id: bold-weight 3172 | title: Bold Weight 3173 | type: variable-number-slider 3174 | default: 700 3175 | min: 100 3176 | max: 1000 3177 | step: 100 3178 | - 3179 | id: italic-color 3180 | title: Italic Color 3181 | type: variable-themed-color 3182 | format: hsl 3183 | default-light: '#' 3184 | default-dark: '#' 3185 | - 3186 | id: toggle-highlight-type 3187 | title: Highlight Type 3188 | type: class-select 3189 | allowEmpty: false 3190 | default: THT-underline-dark 3191 | options: 3192 | - 3193 | label: Background-filled 3194 | value: THT-background 3195 | - 3196 | label: Underlined 3197 | value: THT-underline 3198 | - 3199 | label: Underlined (Light-mode only) 3200 | value: THT-underline-light 3201 | - 3202 | label: Underlined (Dark-mode only) 3203 | value: THT-underline-dark 3204 | - 3205 | id: color-highlight 3206 | title: Highlight Color (Text) 3207 | type: variable-themed-color 3208 | format: hsl 3209 | default-light: '#' 3210 | default-dark: '#' 3211 | - 3212 | id: text-highlight-bg 3213 | title: Highlight Color (Background/Underline) 3214 | type: variable-themed-color 3215 | format: hsl 3216 | default-light: '#' 3217 | default-dark: '#' 3218 | - 3219 | id: color-strikethrough 3220 | title: Strikethrough Color 3221 | type: variable-themed-color 3222 | format: hsl 3223 | default-light: '#' 3224 | default-dark: '#' 3225 | - 3226 | id: inline-code-color 3227 | title: Inline Code Color 3228 | type: variable-themed-color 3229 | format: hsl 3230 | default-light: '#' 3231 | default-dark: '#' 3232 | - 3233 | id: list-marker-color 3234 | title: Listing Bullet/Marker Color 3235 | type: variable-themed-color 3236 | format: hsl 3237 | default-light: '#' 3238 | default-dark: '#' 3239 | - 3240 | 3241 | 3242 | id: heading-section 3243 | title: Heading Section 3244 | description: "Not applicable to cssclass: mado-heading." 3245 | type: heading 3246 | collapsed: true 3247 | level: 4 3248 | - 3249 | 3250 | 3251 | - 3252 | id: toggle-h1-margin-top 3253 | title: Enable H1 Spacious Separator 3254 | description: When an H1 is uncollapsed, it will create a big wide space below to distinguish from the next H1. Downside, however, is the first H1 will always have the wide space above it. 3255 | type: class-toggle 3256 | default: true 3257 | - 3258 | id: h1-size 3259 | title: H1 Size 3260 | type: variable-number 3261 | format: em 3262 | default: 2 3263 | - 3264 | id: h2-size 3265 | title: H2 Size 3266 | type: variable-number 3267 | format: em 3268 | default: 1.6 3269 | - 3270 | id: h3-size 3271 | title: H3 Size 3272 | type: variable-number 3273 | format: em 3274 | default: 1.37 3275 | - 3276 | id: h4-size 3277 | title: H4 Size 3278 | type: variable-number 3279 | format: em 3280 | default: 1.25 3281 | - 3282 | id: h5-size 3283 | title: H5 Size 3284 | type: variable-number 3285 | format: em 3286 | default: 1.12 3287 | - 3288 | id: h6-size 3289 | title: H6 Size 3290 | type: variable-number 3291 | format: em 3292 | default: 1.12 3293 | - 3294 | 3295 | id: h1-color 3296 | title: H1 Color 3297 | type: variable-themed-color 3298 | format: hsl 3299 | default-light: '#' 3300 | default-dark: '#' 3301 | - 3302 | id: h2-color 3303 | title: H2 Color 3304 | type: variable-themed-color 3305 | format: hsl 3306 | default-light: '#' 3307 | default-dark: '#' 3308 | - 3309 | id: h3-color 3310 | title: H3 Color 3311 | type: variable-themed-color 3312 | format: hsl 3313 | default-light: '#' 3314 | default-dark: '#' 3315 | - 3316 | id: h4-color 3317 | title: H4 Color 3318 | type: variable-themed-color 3319 | format: hsl 3320 | default-light: '#' 3321 | default-dark: '#' 3322 | - 3323 | id: h5-color 3324 | title: H5 Color 3325 | type: variable-themed-color 3326 | format: hsl 3327 | default-light: '#' 3328 | default-dark: '#' 3329 | - 3330 | id: h6-color 3331 | title: H6 Color 3332 | type: variable-themed-color 3333 | format: hsl 3334 | default-light: '#' 3335 | default-dark: '#' 3336 | */ --------------------------------------------------------------------------------