├── LICENCE ├── README.md ├── assets ├── checkbox.webp ├── cover-hq.webp ├── progress-status.webp ├── screenshot-light.webp └── screenshot.webp ├── cover.png ├── manifest.json └── theme.css /LICENCE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # **Neo Theme** 2 | 3 | **Neo** is a theme designed for [Obsidian](https://obsidian.md/), with the goal of maintaining the simplicity of the default theme while adding more colors and enhancing the user interface. 4 | 5 | ![cover](assets/cover-hq.webp) 6 | 7 | ## Features 8 | 9 | - Dark and light theme support 10 | - Mobile support 11 | - Alternate Tabs 12 | - Headings indicator 13 | - Pointer cursor for clickable elements 14 | - Alternate checkboxes 15 | 16 | ## Screenshots 17 | 18 | ![screenshot](assets/screenshot.webp) 19 | 20 |

21 |

Light Theme

22 | 23 | ![screenshot-light](assets/screenshot-light.webp) 24 | 25 |

78 |

Task plugin statuses for progress checkboxes

79 | 80 | ![checkbox progress statuses](assets/progress-status.webp) 81 | 82 |

83 | 84 | ## Helper Classes 85 | 86 | CSS helper classes can be added to individual files using the `cssclasses` [frontmatter](https://help.obsidian.md/Editing+and+formatting/Properties) key. These classes can be combined to create different effects. 87 | 88 | To enable a cards layout, add the following code at the top of your file: 89 | 90 | ```yaml 91 | --- 92 | cssclasses: cards 93 | --- 94 | ``` 95 | 96 | ### Cards (by [kepano](https://github.com/kepano)) 97 | 98 | Using `cards` transforms Dataview tables into cards that can be sorted using the [Sortable plugin](https://github.com/alexandru-dinu/obsidian-sortable). Similarly, you can also transform lists into cards using `list-cards`. Note that `cards` or `list-cards` must be present for the other classes to work. 99 | 100 | | Class | Description | 101 | | :---------------------- | :----------------------------------------------- | 102 | | `cards` (required) | Activate card layout fot Dataview tables | 103 | | `list-cards` (required) | Activate card layout for lists | 104 | | `cards-align-bottom` | Align the last element of a card to the bottom | 105 | | `cards-cover` | Images are resized to fill the defined space | 106 | | `cards-16-9` | Fit images in cards to 16:9 ratio | 107 | | `cards-1-1` | Fit images in cards to 1:1 ratio (square) | 108 | | `cards-2-1` | Fit images in cards to 2:1 ratio | 109 | | `cards-2-3` | Fit images in cards to 2:3 ratio | 110 | | `cards-cols-1` to `8` | Force a specific number of columns (from 1 to 8) | 111 | 112 | ## Banner 113 | 114 | The `banner` class can be used to add a banner to the top of your file, by naming it `banner` like the following. 115 | 116 | ```markdown 117 | ![banner](path/to/image.jpg) 118 | or 119 | ![[image.jpeg|banner]] 120 | ``` 121 | 122 | Note: the image will disapear from it's original position in the file, but you can access it using the arrow keys or by enabling Source mode. it's recommended to place the image at the top of the file for easy access. 123 | 124 | ## Recommended Fonts 125 | 126 | - [Inter](https://fonts.google.com/specimen/Inter) for interface and text fonts. 127 | - [Fira Code](https://fonts.google.com/specimen/Fira+Code) for monospace font. 128 | 129 | ## Disclaimer 130 | 131 | Please note that this theme is designed for my personal use of Obsidian. Therefore, it is not tested for all use cases. 132 | 133 | ## Credit 134 | 135 | - [@kepano](https://github.com/colineckert)'s [Minimal theme](https://github.com/kepano/obsidian-minimal) 136 | - [@colineckert](https://github.com/colineckert)'s [Things theme](https://github.com/colineckert/obsidian-things) 137 | - [@Akifyss](https://github.com/Akifyss)'s [Border theme](https://github.com/Akifyss/obsidian-border) 138 | -------------------------------------------------------------------------------- /assets/checkbox.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/x0aa7i/obsidian-neo/f75573fc1f4351b33ac050896890fa7ff2f3aa6a/assets/checkbox.webp -------------------------------------------------------------------------------- /assets/cover-hq.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/x0aa7i/obsidian-neo/f75573fc1f4351b33ac050896890fa7ff2f3aa6a/assets/cover-hq.webp -------------------------------------------------------------------------------- /assets/progress-status.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/x0aa7i/obsidian-neo/f75573fc1f4351b33ac050896890fa7ff2f3aa6a/assets/progress-status.webp -------------------------------------------------------------------------------- /assets/screenshot-light.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/x0aa7i/obsidian-neo/f75573fc1f4351b33ac050896890fa7ff2f3aa6a/assets/screenshot-light.webp -------------------------------------------------------------------------------- /assets/screenshot.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/x0aa7i/obsidian-neo/f75573fc1f4351b33ac050896890fa7ff2f3aa6a/assets/screenshot.webp -------------------------------------------------------------------------------- /cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/x0aa7i/obsidian-neo/f75573fc1f4351b33ac050896890fa7ff2f3aa6a/cover.png -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Neo", 3 | "version": "0.3.4", 4 | "minAppVersion": "1.1.9", 5 | "author": "ABDO", 6 | "authorUrl": "https://github.com/x0aa7i" 7 | } 8 | -------------------------------------------------------------------------------- /theme.css: -------------------------------------------------------------------------------- 1 | /*────────── 2 | Neo Theme 3 | By @ABDO 4 | ────────── */ 5 | 6 | /* @settings 7 | id: neo-style 8 | name: Neo Theme 9 | settings: 10 | - 11 | id: appearance 12 | title: Appearance 13 | type: heading 14 | level: 2 15 | collapsed: false 16 | - 17 | id: theme-variant 18 | title: Dark Theme variant 19 | description: Variations of dark theme 20 | type: class-select 21 | allowEmpty: false 22 | default: default 23 | options: 24 | - default 25 | - darker 26 | - 27 | id: accent-headings-off 28 | title: White Headings 29 | description: Use white for headings instead of accent color 30 | type: class-toggle 31 | default: false 32 | - 33 | id: accent-affect-bg 34 | title: Accent affect Background 35 | description: Background colors follow Accent color (set in appearance settings) 36 | type: class-toggle 37 | default: false 38 | - 39 | id: neutral-bg 40 | title: Neutral Background colors 41 | description: Remove colors from background 42 | type: class-toggle 43 | default: false 44 | - 45 | id: no-kanban-styles 46 | title: Disable kanban styles 47 | description: Switch to kanban plugin default styles 48 | type: class-toggle 49 | default: false 50 | - 51 | id: no-dv-table-border 52 | title: Hide dataview table borders 53 | description: 54 | type: class-toggle 55 | default: false 56 | - 57 | id: table-auto-capitalization 58 | title: Table headers capitalization 59 | description: Title capitalize table headers 60 | type: class-toggle 61 | default: false 62 | - 63 | id: features 64 | title: Features 65 | type: heading 66 | level: 2 67 | collapsed: false 68 | - 69 | id: neo-tabs-off 70 | title: Obsidian default tabs 71 | description: Restore obsidian default tabs 72 | type: class-toggle 73 | default: false 74 | - 75 | id: heading-indicator-off 76 | title: Disable Heading Indicator 77 | description: Do not show heading level indicator on hover 78 | type: class-toggle 79 | default: false 80 | - 81 | id: active-line 82 | title: Highlight active line 83 | description: Change background color of current active line 84 | type: class-toggle 85 | default: false 86 | - 87 | id: disable-alternative-checkboxes 88 | title: Disable Alternative Checkboxes 89 | description: Enable this if you are using your own implementation via a CSS Snippet. 90 | type: class-toggle 91 | default: false 92 | 93 | */ 94 | 95 | /* * Colors */ 96 | .theme-dark, 97 | .theme-light { 98 | --base-hue: 230; 99 | 100 | --accent-h: 250; 101 | --accent-s: 80%; 102 | --accent-l: 75%; 103 | 104 | --text-normal: var(--base-15); 105 | --text-muted: var(--base-20); 106 | --text-faint: var(--base-35); 107 | --bold-color: var(--base-10); 108 | 109 | --background-primary: var(--base-60); 110 | --background-primary-alt: var(--base-55); 111 | --background-secondary: var(--base-55); 112 | --background-secondary-alt: var(--base-55); 113 | 114 | --code-background: var(--background-secondary); 115 | --code-normal: var(--text-normal); 116 | --code-comment: var(--text-faint); 117 | --code-important: var(--color-red); 118 | --code-value: var(--color-cyan); 119 | --code-tag: var(--color-yellow); 120 | --code-string: var(--color-green); 121 | --code-punctuation: var(--color-pink); 122 | --code-function: var(--color-cyan); 123 | --code-keyword: var(--color-purple); 124 | --code-operator: var(--color-orange); 125 | --code-property: var(--color-blue); 126 | 127 | --inline-title-color: var(--base-05); 128 | --tab-active-color: var(--base-45); 129 | 130 | --prompt-border-width: 1px; 131 | --prompt-border-color: var(--base-50); 132 | 133 | --indentation-guide-color: var(--base-45); 134 | --indentation-guide-color-active: var(--base-35); 135 | 136 | --modal-border-width: 1px; 137 | --modal-border-color: var(--base-45); 138 | 139 | --ribbon-background: var(--background-secondary); 140 | --ribbon-background-collapsed: var(--background-secondary); 141 | 142 | --interactive-accent-hsl: var(--color-accent-hsl); 143 | --interactive-accent: var(--color-accent-1); 144 | --interactive-accent-hover: var(--color-accent-2); 145 | } 146 | 147 | body:not(.accent-headings-off) { 148 | --h1-color: hsl(var(--accent-h), 52%, 72%); 149 | --h2-color: hsl(var(--accent-h), 52%, 68%); 150 | --h3-color: hsl(var(--accent-h), 52%, 64%); 151 | --h4-color: hsl(var(--accent-h), 50%, 60%); 152 | --h5-color: hsl(var(--accent-h), 40%, 52%); 153 | --h6-color: hsl(var(--accent-h), 38%, 46%); 154 | } 155 | 156 | .neutral-bg { 157 | --base-sat: 0%; 158 | } 159 | 160 | .accent-affect-bg { 161 | --base-hue: var(--accent-h); 162 | } 163 | 164 | .theme-dark { 165 | --base-05: hsl(var(--base-hue), var(--base-sat, 2%), 93%); 166 | --base-10: hsl(var(--base-hue), var(--base-sat, 3%), 82%); 167 | --base-15: hsl(var(--base-hue), var(--base-sat, 4%), 75%); 168 | --base-20: hsl(var(--base-hue), var(--base-sat, 5%), 65%); 169 | --base-25: hsl(var(--base-hue), var(--base-sat, 6%), 56%); 170 | --base-30: hsl(var(--base-hue), var(--base-sat, 6%), 46%); 171 | --base-35: hsl(var(--base-hue), var(--base-sat, 7%), 35%); 172 | --base-40: hsl(var(--base-hue), var(--base-sat, 8%), 25%); 173 | --base-45: hsl(var(--base-hue), var(--base-sat, 10%), 19%); 174 | --base-50: hsl(var(--base-hue), var(--base-sat, 11%), 15%); 175 | --base-55: hsl(var(--base-hue), var(--base-sat, 12%), 12%); 176 | --base-60: hsl(var(--base-hue), var(--base-sat, 16%), 9%); 177 | 178 | --color-black: rgb(14 19 25); 179 | --color-white: rgb(230 230 230); 180 | --color-muted: rgb(139 148 158); 181 | --color-cyan: rgb(82 183 213); 182 | --color-blue: rgb(122 162 247); 183 | --color-pink: rgb(255 151 207); 184 | --color-teal: rgb(62 180 191); 185 | --color-green: rgb(34 208 162); 186 | --color-yellow: rgb(230 232 118); 187 | --color-orange: rgb(237 139 79); 188 | --color-red: rgb(219 75 75); 189 | --color-purple: rgb(149, 128, 255); 190 | 191 | --color-black-rgb: 14, 19, 25; 192 | --color-white-rgb: 230, 230, 230; 193 | --color-muted-rgb: 139, 148, 158; 194 | --color-cyan-rgb: 82, 183, 213; 195 | --color-blue-rgb: 122, 162, 247; 196 | --color-pink-rgb: 250, 153, 205; 197 | --color-teal-rgb: 62, 180, 191; 198 | --color-green-rgb: 34, 208, 162; 199 | --color-yellow-rgb: 224, 222, 113; 200 | --color-orange-rgb: 237, 139, 79; 201 | --color-red-rgb: 219, 75, 75; 202 | --color-purple-rgb: 149, 128, 255; 203 | 204 | --text-accent: hsl(var(--accent-h), 85%, 75%); 205 | --text-accent-hover: hsl(var(--accent-h), 90%, 84%); 206 | 207 | --text-highlight-bg: var(--base-40); 208 | --text-selection: var(--base-50); 209 | 210 | --background-modifier-border: var(--base-45); 211 | --background-modifier-form-field: rgba(0, 0, 0, 0.2); 212 | --background-modifier-border-focus: var(--base-35); 213 | --background-modifier-border-hover: var(--base-40); 214 | --background-modifier-hover: hsla(var(--base-hue), 50%, 80%, 0.05); 215 | --background-modifier-cover: rgba(0, 0, 0, 0.6); 216 | 217 | --color-accent-hsl: var(--accent-h), var(--accent-s), 70%; 218 | --color-accent: hsl(var(--color-accent-hsl)); 219 | --color-accent-1: hsl(var(--accent-h), var(--accent-s), 70%); 220 | --color-accent-2: hsl(var(--accent-h), var(--accent-s), 75%); 221 | 222 | --interactive-normal: var(--base-45); 223 | --interactive-hover: var(--base-40); 224 | } 225 | 226 | .theme-dark.darker { 227 | --base-05: hsl(var(--base-hue), var(--base-sat, 16%), 90%); 228 | --base-10: hsl(var(--base-hue), var(--base-sat, 14%), 79%); 229 | --base-15: hsl(var(--base-hue), var(--base-sat, 12%), 70%); 230 | --base-20: hsl(var(--base-hue), var(--base-sat, 12%), 60%); 231 | --base-25: hsl(var(--base-hue), var(--base-sat, 10%), 49%); 232 | --base-30: hsl(var(--base-hue), var(--base-sat, 10%), 37%); 233 | --base-35: hsl(var(--base-hue), var(--base-sat, 12%), 26%); 234 | --base-40: hsl(var(--base-hue), var(--base-sat, 13%), 19%); 235 | --base-45: hsl(var(--base-hue), var(--base-sat, 12%), 15%); 236 | --base-50: hsl(var(--base-hue), var(--base-sat, 10%), 12%); 237 | --base-55: hsl(var(--base-hue), var(--base-sat, 8%), 8%); 238 | --base-60: hsl(var(--base-hue), var(--base-sat, 8%), 5%); 239 | 240 | --text-accent: hsl(var(--accent-h), 75%, 75%); 241 | --text-accent-hover: hsl(var(--accent-h), 75%, 84%); 242 | } 243 | 244 | .theme-light { 245 | --base-05: hsl(var(--base-hue), var(--base-sat, 14%), 8%); 246 | --base-10: hsl(var(--base-hue), var(--base-sat, 12%), 12%); 247 | --base-15: hsl(var(--base-hue), var(--base-sat, 11%), 15%); 248 | --base-20: hsl(var(--base-hue), var(--base-sat, 10%), 19%); 249 | --base-25: hsl(var(--base-hue), var(--base-sat, 10%), 25%); 250 | --base-30: hsl(var(--base-hue), var(--base-sat, 10%), 35%); 251 | --base-35: hsl(var(--base-hue), var(--base-sat, 10%), 62%); 252 | --base-40: hsl(var(--base-hue), var(--base-sat, 15%), 78%); 253 | --base-45: hsl(var(--base-hue), var(--base-sat, 20%), 86%); 254 | --base-50: hsl(var(--base-hue), var(--base-sat, 30%), 92%); 255 | --base-55: hsl(var(--base-hue), var(--base-sat, 25%), 96%); 256 | --base-60: hsl(var(--base-hue), var(--base-sat, 15%), 98%); 257 | 258 | --color-black: rgb(15, 20, 26); 259 | --color-white: rgb(222, 222, 222); 260 | --color-muted: rgb(138, 147, 158); 261 | --color-cyan: rgb(61 155 184); 262 | --color-blue: rgb(26, 159, 255); 263 | --color-blue: rgb(86 128 219); 264 | --color-pink: rgb(212, 73, 147); 265 | --color-teal: rgb(44, 174, 186); 266 | --color-green: rgb(14, 192, 67); 267 | --color-yellow: rgb(229, 199, 0); 268 | --color-orange: rgb(248, 119, 33); 269 | --color-red: rgb(250, 55, 62); 270 | --color-purple: rgb(111, 85, 241); 271 | 272 | --color-black-rgb: 15, 20, 26; 273 | --color-white-rgb: 222, 222, 222; 274 | --color-muted-rgb: 138, 147, 158; 275 | --color-cyan-rgb: 61, 155, 184; 276 | --color-blue-rgb: 86, 128, 219; 277 | --color-pink-rgb: 212, 73, 147; 278 | --color-teal-rgb: 44, 174, 186; 279 | --color-green-rgb: 14, 192, 67; 280 | --color-yellow-rgb: 229, 199, 0; 281 | --color-orange-rgb: 248, 119, 33; 282 | --color-red-rgb: 250, 55, 62; 283 | --color-purple-rgb: 111, 85, 241; 284 | 285 | --inline-title-color: var(--base-05); 286 | 287 | --text-accent: hsl(var(--accent-h), 85%, 65%); 288 | --text-accent-hover: hsl(var(--accent-h), 60%, 45%); 289 | 290 | --text-highlight-bg: var(--base-45); 291 | --text-selection: var(--base-50); 292 | 293 | --background-modifier-border: var(--base-45); 294 | --background-modifier-form-field: rgba(255, 255, 255, 0.5); 295 | --background-modifier-border-focus: var(--base-35); 296 | --background-modifier-border-hover: var(--base-40); 297 | --background-modifier-hover: hsla(var(--base-hue), 40%, 90%, 0.8); 298 | --background-modifier-cover: rgba(0, 0, 0, 0.5); 299 | 300 | --color-accent-hsl: var(--accent-h), var(--accent-s), 75%; 301 | --color-accent: hsl(var(--color-accent-hsl)); 302 | --color-accent-1: hsl(var(--accent-h), var(--accent-s), 75%); 303 | --color-accent-2: hsl(var(--accent-h), var(--accent-s), 70%); 304 | 305 | --interactive-normal: var(--base-55); 306 | --interactive-hover: var(--base-50); 307 | } 308 | 309 | /* * Layout */ 310 | body { 311 | /* Animations */ 312 | --anim-duration-none: 0; 313 | --anim-duration-superfast: 70ms; 314 | --anim-duration-fast: 140ms; 315 | --anim-duration-moderate: 250ms; 316 | --anim-duration-slow: 400ms; 317 | /* Radius */ 318 | --radius-s: 4px; 319 | --radius-m: 6px; 320 | --radius-l: 10px; 321 | --radius-xl: 16px; 322 | } 323 | 324 | .menu { 325 | background-color: var(--base-50); 326 | border-color: var(--base-50); 327 | } 328 | 329 | /* prompt */ 330 | .prompt { 331 | background-color: var(--base-50); 332 | } 333 | 334 | .prompt-instructions { 335 | padding: var(--size-4-3); 336 | border-top: 1px solid var(--base-45); 337 | } 338 | 339 | /* notice */ 340 | .notice-container { 341 | top: var(--header-height); 342 | padding: 10px 16px; 343 | } 344 | .notice-container .notice { 345 | background-color: var(--base-50); 346 | color: var(--text-normal); 347 | margin-bottom: 8px; 348 | } 349 | 350 | .modal { 351 | padding: var(--size-4-8); 352 | padding-bottom: var(--size-4-6); 353 | } 354 | 355 | /* * Cursor */ 356 | body { 357 | --cursor: pointer; 358 | --cursor-link: pointer; 359 | } 360 | 361 | select, 362 | .dropdown, 363 | .view-header-breadcrumb, 364 | .workspace-tab-header, 365 | input[type="checkbox"] { 366 | cursor: var(--cursor); 367 | } 368 | 369 | /* reset cursor for window buttons */ 370 | body .titlebar-button-container { 371 | --cursor: default; 372 | } 373 | 374 | /* windows buttons */ 375 | .titlebar-button-container .titlebar-button:hover { 376 | --background-modifier-error: rgb(212, 32, 38); 377 | color: var(--base-05); 378 | } 379 | 380 | /* new tab image*/ 381 | /* from border theme: https://github.com/Akifyss/obsidian-border */ 382 | .workspace-leaf-content[data-type="empty"] .empty-state::before { 383 | content: ""; 384 | width: 100%; 385 | height: 30%; 386 | background-color: var(--icon-color); 387 | -webkit-mask-size: contain; 388 | -webkit-mask-position: center; 389 | -webkit-mask-repeat: no-repeat; 390 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2280%22%20height%3D%2280%22%20fill%3D%22none%22%20viewBox%3D%220%200%2080%2080%22%3E%3Cpath%20fill%3D%22%23000%22%20fill-opacity%3D%22.1%22%20fill-rule%3D%22evenodd%22%20d%3D%22M41.025%2044.046c-1.565-4.198-2.066-7.455-1.95-10.13.126-2.9.975-5.058%201.89-6.923.243-.495.485-.96.717-1.406.66-1.27%201.243-2.393%201.57-3.657.398-1.537.4-3.279-.519-5.633a3.197%203.197%200%200%200-3.486.523l-9.875%208.884a3.197%203.197%200%200%200-1.023%201.9c-.118.78-.259%201.752-.404%202.757-.25%201.72-.512%203.537-.7%204.67%202.313%201.47%205.437%203.94%207.093%207.98.226.553.424%201.132.589%201.74%202.033-.46%204.085-.765%206.098-.705Zm1.587.128c.957.129%201.901.355%202.827.701%203.307%201.238%206.25%203.964%208.665%208.966l.08-.12a139.935%20139.935%200%200%200%204.196-6.627%201.618%201.618%200%200%200-.122-1.797c-1.03-1.364-3-4.138-4.074-6.706-1.104-2.64-1.269-6.74-1.278-8.736a3.406%203.406%200%200%200-.714-2.097l-7.383-9.38a9.237%209.237%200%200%201-.165%203.912c-.371%201.437-1.062%202.763-1.744%204.075a60.2%2060.2%200%200%200-.644%201.26c-.87%201.771-1.631%203.728-1.745%206.353-.111%202.562.393%205.815%202.101%2010.196Zm4.66%2019.708c2.13.59%204.273-1.12%204.567-3.31.218-1.618.633-3.462%201.408-5.16-2.394-5.402-5.261-8.05-8.312-9.19-2.97-1.112-6.244-.85-9.698-.068.666%203.863.018%208.748-3%2014.906.158.036.32.06.483.072l4.844.367c2.362.182%204.92.956%207.328%201.684.816.246%201.613.488%202.38.7Zm-16.329-3.449c3.777-7.702%203.612-13.101%202.065-16.876-1.404-3.426-3.996-5.637-6.134-7.054-.91%202.125-5.19%2011.535-5.19%2011.535a3.196%203.196%200%200%200%20.622%203.535l8.348%208.597c.091.094.188.182.29.263Z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E"); 391 | mask-size: contain; 392 | mask-position: center; 393 | mask-repeat: no-repeat; 394 | mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2280%22%20height%3D%2280%22%20fill%3D%22none%22%20viewBox%3D%220%200%2080%2080%22%3E%3Cpath%20fill%3D%22%23000%22%20fill-opacity%3D%22.1%22%20fill-rule%3D%22evenodd%22%20d%3D%22M41.025%2044.046c-1.565-4.198-2.066-7.455-1.95-10.13.126-2.9.975-5.058%201.89-6.923.243-.495.485-.96.717-1.406.66-1.27%201.243-2.393%201.57-3.657.398-1.537.4-3.279-.519-5.633a3.197%203.197%200%200%200-3.486.523l-9.875%208.884a3.197%203.197%200%200%200-1.023%201.9c-.118.78-.259%201.752-.404%202.757-.25%201.72-.512%203.537-.7%204.67%202.313%201.47%205.437%203.94%207.093%207.98.226.553.424%201.132.589%201.74%202.033-.46%204.085-.765%206.098-.705Zm1.587.128c.957.129%201.901.355%202.827.701%203.307%201.238%206.25%203.964%208.665%208.966l.08-.12a139.935%20139.935%200%200%200%204.196-6.627%201.618%201.618%200%200%200-.122-1.797c-1.03-1.364-3-4.138-4.074-6.706-1.104-2.64-1.269-6.74-1.278-8.736a3.406%203.406%200%200%200-.714-2.097l-7.383-9.38a9.237%209.237%200%200%201-.165%203.912c-.371%201.437-1.062%202.763-1.744%204.075a60.2%2060.2%200%200%200-.644%201.26c-.87%201.771-1.631%203.728-1.745%206.353-.111%202.562.393%205.815%202.101%2010.196Zm4.66%2019.708c2.13.59%204.273-1.12%204.567-3.31.218-1.618.633-3.462%201.408-5.16-2.394-5.402-5.261-8.05-8.312-9.19-2.97-1.112-6.244-.85-9.698-.068.666%203.863.018%208.748-3%2014.906.158.036.32.06.483.072l4.844.367c2.362.182%204.92.956%207.328%201.684.816.246%201.613.488%202.38.7Zm-16.329-3.449c3.777-7.702%203.612-13.101%202.065-16.876-1.404-3.426-3.996-5.637-6.134-7.054-.91%202.125-5.19%2011.535-5.19%2011.535a3.196%203.196%200%200%200%20.622%203.535l8.348%208.597c.091.094.188.182.29.263Z%22%20clip-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E"); 395 | } 396 | 397 | /** Tabs */ 398 | body { 399 | --tab-divider-color: transparent; 400 | --tab-width: 200px; 401 | --tab-min-width: 92px; 402 | } 403 | 404 | .theme-light { 405 | --tab-active-color: var(--base-60); 406 | --tab-active-shadow: inset 0 0 0 1px var(--background-modifier-border); 407 | } 408 | 409 | .mod-windows, 410 | .mod-linux { 411 | --frame-left-space: 6px; 412 | --frame-right-space: 132px; 413 | } 414 | 415 | body:not(.neo-tabs-off) .workspace-tab-header::after, 416 | body:not(.neo-tabs-off) .workspace-tab-header::before { 417 | display: none; 418 | } 419 | 420 | body:not(.neo-tabs-off) .workspace-tab-header.is-active { 421 | background-color: transparent; 422 | box-shadow: unset; 423 | } 424 | 425 | body:not(.neo-tabs-off) 426 | .mod-root 427 | .workspace-tabs:not(.mod-stacked) 428 | .workspace-tab-header 429 | .workspace-tab-header-inner { 430 | padding: 0 6px 0 14px; 431 | margin: 1px 0; 432 | } 433 | 434 | body:not(.neo-tabs-off) 435 | .workspace-tabs:not(.mod-stacked) 436 | .workspace-tab-header.is-active 437 | .workspace-tab-header-inner { 438 | background-color: var(--tab-active-color); 439 | box-shadow: var(--tab-active-shadow); 440 | } 441 | 442 | .mod-left-split .workspace-tab-header, 443 | .mod-right-split .workspace-tab-header, 444 | .workspace-tab-header-inner { 445 | border-radius: var(--radius-m); 446 | } 447 | 448 | body:not(.neo-tabs-off) .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header, 449 | body:not(.neo-tabs-off) 450 | .mod-root 451 | .workspace-tabs:not(.mod-stacked) 452 | .workspace-tab-header.is-active { 453 | /* padding: 0px 2px 6px; */ 454 | min-width: var(--tab-min-width); 455 | } 456 | 457 | .mod-root .workspace-tab-header-inner { 458 | padding: 0 6px 0; 459 | } 460 | 461 | .mod-left-split .workspace-tab-header-container-inner, 462 | .mod-right-split .workspace-tab-header-container-inner { 463 | padding: 4px; 464 | margin: 0px; 465 | gap: 4px; 466 | } 467 | 468 | body:not(.neo-tabs-off) .mod-root .workspace-tab-header-container-inner { 469 | margin: 0px 5px 0px; 470 | padding: 1px 4px 1px; 471 | } 472 | 473 | /* Changes the resize handles to not overlap the tab area */ 474 | /* from prism theme: https://github.com/damiankorcz/Prism-Theme */ 475 | .workspace-split.mod-vertical > * > .workspace-leaf-resize-handle, 476 | .workspace-split.mod-left-split > .workspace-leaf-resize-handle, 477 | .workspace-split.mod-right-split > .workspace-leaf-resize-handle { 478 | height: calc(var(--divider-vertical-height) - var(--header-height)); 479 | } 480 | 481 | /* * Icons */ 482 | body { 483 | --icon-color: var(--text-muted); 484 | --icon-color-hover: var(--text-muted); 485 | --icon-color-active: var(--text-accent); 486 | --icon-color-focused: var(--text-normal); 487 | 488 | --clickable-icon-radius: 6px; 489 | --ribbon-padding: 8px 0px; 490 | --ribbon-width: 40px; 491 | } 492 | 493 | .workspace-tab-header-inner-icon { 494 | align-items: center; 495 | justify-content: center; 496 | } 497 | 498 | .workspace-tab-header-tab-list, 499 | .workspace-tab-header-new-tab { 500 | padding-top: 4px; 501 | } 502 | 503 | .sidebar-toggle-button { 504 | padding: 4px; 505 | } 506 | 507 | .mod-left-split .workspace-tab-header .workspace-tab-header-inner, 508 | .mod-right-split .workspace-tab-header .workspace-tab-header-inner, 509 | .clickable-icon.nav-action-button, 510 | .clickable-icon.side-dock-ribbon-action, 511 | .sidebar-toggle-button .clickable-icon, 512 | .workspace-tab-header-new-tab .clickable-icon, 513 | .workspace-tab-header-tab-list .clickable-icon { 514 | padding: 6px; 515 | height: 32px; 516 | width: 32px; 517 | } 518 | 519 | /* Pin icon */ 520 | .mod-root .workspace-tab-header.is-active .workspace-tab-header-status-icon.mod-pinned:hover { 521 | color: var(--text-normal); 522 | background-color: transparent; 523 | } 524 | 525 | .is-mobile .clickable-icon.nav-action-button, 526 | .is-mobile .clickable-icon.side-dock-ribbon-action, 527 | .is-mobile .sidebar-toggle-button .clickable-icon { 528 | padding: var(--size-2-2); 529 | } 530 | 531 | body:not(.is-mobile) .mod-left-split .workspace-tab-header-inner-icon .svg-icon, 532 | body:not(.is-mobile) .mod-right-split .workspace-tab-header-inner-icon .svg-icon, 533 | body:not(.is-mobile) .clickable-icon.side-dock-ribbon-action .svg-icon, 534 | body:not(.is-mobile) .clickable-icon.nav-action-button .svg-icon, 535 | body:not(.is-mobile) .sidebar-toggle-button .clickable-icon .svg-icon, 536 | body:not(.is-mobile) .workspace-tab-header-new-tab .clickable-icon .svg-icon, 537 | body:not(.is-mobile) .workspace-tab-header-tab-list .clickable-icon .svg-icon { 538 | /* --icon-l: 20px; */ 539 | --icon-size: var(--icon-l); 540 | } 541 | 542 | .workspace-tab-header-status-icon, 543 | .mod-root .workspace-tab-header-status-icon, 544 | .mod-root .workspace-tab-header-inner-icon { 545 | --icon-size: var(--icon-s); 546 | } 547 | 548 | .titlebar .workspace-tab-header-tab-list, 549 | .titlebar .workspace-tab-header-new-tab, 550 | .mod-root .workspace-tab-header-tab-list, 551 | .mod-root .workspace-tab-header-new-tab { 552 | display: unset; 553 | } 554 | 555 | .side-dock-settings, 556 | .side-dock-actions { 557 | gap: 0; 558 | } 559 | 560 | /* Change Mobile icon colors */ 561 | .workspace-drawer, 562 | body.is-mobile .clickable-icon, 563 | body.is-tablet .clickable-icon { 564 | --interactive-accent: var(--text-muted); 565 | --icon-color: var(--text-muted); 566 | --icon-color-hover: var(--text-normal); 567 | } 568 | 569 | /* * Status bar */ 570 | body { 571 | --status-bar-background: var(--background-secondary); 572 | --status-bar-border-width: 1px 0 0 0px; 573 | --status-bar-radius: 0; 574 | --status-bar-height: 24px; 575 | } 576 | 577 | .status-bar { 578 | padding: 0 16px; 579 | width: 100%; 580 | height: var(--status-bar-height); 581 | flex-direction: row-reverse; 582 | justify-content: flex-start; 583 | flex-wrap: wrap; 584 | overflow: hidden; 585 | } 586 | 587 | .status-bar-item { 588 | flex-shrink: 0; 589 | order: 3; 590 | } 591 | 592 | .status-bar-item.plugin-backlink { 593 | order: 2; 594 | } 595 | 596 | .status-bar-item.plugin-properties { 597 | order: 1; 598 | } 599 | 600 | body:not(.is-mobile) .workspace { 601 | padding-bottom: var(--status-bar-height); 602 | } 603 | 604 | .mod-root .workspace-tab-container { 605 | padding-bottom: 0; 606 | } 607 | 608 | /* mobile toolbar */ 609 | .mobile-toolbar-options-container { 610 | --mobile-toolbar-height: 40px; 611 | } 612 | 613 | .mobile-toolbar-option { 614 | --at-button-height: 40px; 615 | } 616 | 617 | /* Scrollbars */ 618 | /* from border theme: https://github.com/Akifyss/obsidian-border */ 619 | body { 620 | --scrollbar-opacity: 0; 621 | --scrollbar-bg: rgba(var(--mono-rgb-100), 0); 622 | --scrollbar-thumb-bg: rgba(var(--mono-rgb-100), 0.08); 623 | --scrollbar-active-thumb-bg: rgba(var(--mono-rgb-100), 0.15); 624 | } 625 | 626 | .theme-dark { 627 | --mono-rgb-100: 255, 255, 255; 628 | } 629 | .theme-light { 630 | --mono-rgb-100: 0, 0, 0; 631 | } 632 | 633 | body:not(.native-scrollbars) ::-webkit-scrollbar, 634 | body:not(.native-scrollbars) .kanban-plugin__scroll-container::-webkit-scrollbar { 635 | width: 11px; 636 | height: 11px; 637 | } 638 | 639 | body:not(.native-scrollbars) ::-webkit-scrollbar-thumb, 640 | body:not(.native-scrollbars) .kanban-plugin__scroll-container::-webkit-scrollbar-thumb { 641 | border: 3px solid transparent; 642 | } 643 | 644 | .mobile-toolbar-options-container::-webkit-scrollbar { 645 | width: 0 !important; 646 | height: 0 !important; 647 | } 648 | 649 | body:not(.native-scrollbars) ::-webkit-scrollbar-track, 650 | body:not(.native-scrollbars) ::-webkit-scrollbar-track-piece, 651 | body:not(.native-scrollbars):not(.is-mobile) ::-webkit-scrollbar-thumb { 652 | background-color: transparent !important; 653 | } 654 | 655 | body:not(.native-scrollbars):not(.is-mobile) :hover::-webkit-scrollbar-thumb { 656 | background-color: var(--scrollbar-thumb-bg) !important; 657 | } 658 | 659 | body:not(.native-scrollbars):not(.is-mobile) ::-webkit-scrollbar-thumb:hover, 660 | body:not(.native-scrollbars):not(.is-mobile) ::-webkit-scrollbar-thumb:active { 661 | background-color: var(--scrollbar-active-thumb-bg) !important; 662 | } 663 | 664 | body:not(.native-scrollbars) 665 | .workspace-leaf-content:is( 666 | [data-type="surfing-view"], 667 | [data-type="graph"], 668 | [data-type="localgraph"] 669 | ) 670 | ::-webkit-scrollbar, 671 | body:not(.native-scrollbars).scrollbar-hide ::-webkit-scrollbar { 672 | display: none; 673 | } 674 | 675 | /* off scrollbar space occupancy, */ 676 | /* from maple theme: https://github.com/subframe7536/obsidian-theme-maple */ 677 | /* body:not(.is-mobile).scrollbar-space-occupation-off 678 | :is(.mk-file-tree > div > div), */ 679 | body:not(.is-mobile) :is(.mk-file-tree > div > div), 680 | body:not(.is-mobile) 681 | :is( 682 | .vertical-tab-header, 683 | .vertical-tab-content, 684 | .nav-files-container, 685 | .view-content, 686 | .search-result-container, 687 | .git-view-body, 688 | .suggestion-container .suggestion, 689 | .prompt-results, 690 | .community-modal-search-results-wrapper, 691 | .community-modal-info, 692 | .modal:not(.mod-settings, .mod-community-theme, .mod-community-plugin), 693 | .tag-container, 694 | .backlink-pane, 695 | .workspace-leaf-content[data-type="markdown"] .cm-scroller, 696 | .markdown-preview-view:not(.checklist-plugin-main), 697 | .workspace-leaf-content[data-type="calendar"] .view-content, 698 | .janitor-scan-results, 699 | .excalidraw-wrapper :is(.App-mobile-menu, .App-menu .Stack .Island.App-menu__left, .scrollbar), 700 | .excalidraw-contextMenuContainer .popover, 701 | .kanban-plugin__board, 702 | .kanban-plugin__lane-items, 703 | .workspace-leaf-content[data-type="pdf"] .pdf-viewer-container, 704 | .workspace-leaf-content[data-type="pdf"] .pdf-thumbnail-view 705 | ) { 706 | overflow-y: overlay !important; 707 | } 708 | 709 | /* turned off because it does overlap with kanban scrollbars */ 710 | /* body:not(.is-mobile) 711 | .mod-root 712 | .workspace-tabs.mod-stacked 713 | .workspace-tab-container { 714 | overflow-x: overlay !important; 715 | } */ 716 | 717 | /* * Editor */ 718 | /* typography */ 719 | body { 720 | -webkit-font-smoothing: antialiased; 721 | 722 | /* Font families */ 723 | --font-text-theme: Inter, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; 724 | --font-editor-theme: Inter, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; 725 | --font-monospace-theme: "JetBrains Mono", "FiraCode", Menlo, SFMono-Regular, Consolas, 726 | "Roboto Mono", monospace; 727 | --font-interface-theme: Inter, Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; 728 | --font-editor: var(--font-editor-override), var(--font-text-override), var(--font-editor-theme); 729 | 730 | --line-height-normal: 1.6; 731 | --line-height-tight: 1.3; 732 | 733 | --h1-size: 1.802rem; 734 | --h2-size: 1.602rem; 735 | --h3-size: 1.424rem; 736 | --h4-size: 1.266rem; 737 | --h5-size: 1.125rem; 738 | --h6-size: 1rem; 739 | 740 | --h1-weight: 700; 741 | --h2-weight: 675; 742 | --h3-weight: 650; 743 | --h4-weight: 650; 744 | --h5-weight: 625; 745 | --h6-weight: 625; 746 | 747 | --inline-title-size: 2rem; 748 | 749 | --link-decoration: none; 750 | --link-decoration-hover: none; 751 | --link-external-decoration: none; 752 | --link-external-decoration-hover: none; 753 | } 754 | 755 | /* Heading level Indicator */ 756 | body:not(.is-mobile):not(.heading-indicator-off) .is-live-preview .collapse-indicator::before { 757 | content: var(--heading-indicator); 758 | color: var(--text-faint); 759 | background-color: var(--background-primary); 760 | font-size: 0.7rem; 761 | position: absolute; 762 | font-weight: 600; 763 | left: -22px; 764 | top: 50%; 765 | transform: translateY(-50%); 766 | } 767 | 768 | body:not(.is-mobile) .is-live-preview .HyperMD-header-1:hover { 769 | --heading-indicator: "H1"; 770 | } 771 | 772 | body:not(.is-mobile) .is-live-preview .HyperMD-header-2:hover { 773 | --heading-indicator: "H2"; 774 | } 775 | 776 | body:not(.is-mobile) .is-live-preview .HyperMD-header-3:hover { 777 | --heading-indicator: "H3"; 778 | } 779 | 780 | body:not(.is-mobile) .is-live-preview .HyperMD-header-4:hover { 781 | --heading-indicator: "H4"; 782 | } 783 | 784 | body:not(.is-mobile) .is-live-preview .HyperMD-header-5:hover { 785 | --heading-indicator: "H5"; 786 | } 787 | 788 | body:not(.is-mobile) .is-live-preview .HyperMD-header-6:hover { 789 | --heading-indicator: "H6"; 790 | } 791 | 792 | /* Make room for heading indicator */ 793 | body:not(.is-mobile):not(.heading-indicator-off) 794 | .view-content 795 | > .markdown-source-view.mod-cm6 796 | > .cm-editor 797 | > .cm-scroller { 798 | padding-left: 56px; 799 | } 800 | 801 | .cm-contentContainer .cm-content .HyperMD-header.HyperMD-header-1.cm-line, 802 | .cm-contentContainer .cm-content .HyperMD-header.HyperMD-header-2.cm-line, 803 | .cm-contentContainer .cm-content .HyperMD-header.HyperMD-header-3.cm-line, 804 | .cm-contentContainer .cm-content .HyperMD-header.HyperMD-header-4.cm-line, 805 | .cm-contentContainer .cm-content .HyperMD-header.HyperMD-header-5.cm-line, 806 | .cm-contentContainer .cm-content .HyperMD-header.HyperMD-header-6.cm-line, 807 | .markdown-rendered h1, 808 | .markdown-rendered h2, 809 | .markdown-rendered h3, 810 | .markdown-rendered h4, 811 | .markdown-rendered h5, 812 | .markdown-rendered h6 { 813 | padding-bottom: 4px; 814 | } 815 | 816 | /* Highlight selected line */ 817 | /* from border theme: https://github.com/Akifyss/obsidian-border */ 818 | body:is(.active-line) 819 | .markdown-source-view 820 | .cm-scroller 821 | .cm-line.cm-active:not(:has(.mk-note-footer, .mk-floweditor-container)) { 822 | background-color: hsla(var(--accent-h), 6%, 25%, 0.2); 823 | border-radius: var(--radius-s); 824 | } 825 | 826 | /* Table */ 827 | body { 828 | --table-header-background: var(--background-secondary); 829 | --table-header-background-hover: var(--background-secondary); 830 | --table-border-width: 1px; 831 | --table-border-color: var(--background-modifier-border); 832 | } 833 | 834 | .markdown-source-view.mod-cm6, 835 | .markdown-preview-view { 836 | table { 837 | border-collapse: collapse; 838 | } 839 | } 840 | 841 | .markdown-preview-view th, 842 | .markdown-rendered thead > tr > th, 843 | .table-view-table > thead > tr > th, 844 | .markdown-source-view.mod-cm6 .dataview.table-view-table thead.table-view-thead tr th { 845 | font-size: 1rem; 846 | font-size: var(--font-small); 847 | font-weight: 600; 848 | padding: 10px 16px; 849 | } 850 | 851 | body:is(.table-auto-capitalization) tr th { 852 | text-transform: capitalize; 853 | } 854 | 855 | .markdown-preview-view td, 856 | .markdown-rendered tbody > tr > td { 857 | padding: 6px 16px; 858 | } 859 | 860 | .markdown-rendered .table-view-table tbody { 861 | font-size: var(--font-small); 862 | } 863 | 864 | .markdown-rendered .table-view-table > tbody > tr:hover { 865 | background-color: var(--table-header-background-hover) !important; 866 | } 867 | 868 | .markdown-rendered.mod-cm6:not(.cards) .table-view-table th, 869 | .markdown-rendered:not(.cards) .table-view-table th { 870 | border-bottom: var(--table-border-width) solid var(--table-border-color); 871 | } 872 | 873 | body:not(.no-dv-table-border) 874 | :is(.markdown-preview-view, .markdown-source-view):not(.cards) 875 | .table-view-table, 876 | body:not(.no-dv-table-border) 877 | :is(.markdown-preview-view, .markdown-source-view):not(.cards) 878 | .table-view-table 879 | th, 880 | body:not(.no-dv-table-border) 881 | :is(.markdown-preview-view, .markdown-source-view):not(.cards) 882 | .table-view-table 883 | td { 884 | border: var(--table-border-width) solid var(--table-border-color); 885 | } 886 | 887 | .table-100.markdown-rendered table, 888 | .table-100.markdown-source-view.mod-cm6 .cm-table-widget table { 889 | width: 100%; 890 | } 891 | 892 | /* Dataview horizontal scroll */ 893 | .block-language-dataviewjs { 894 | overflow-x: scroll; 895 | } 896 | 897 | /* Tags */ 898 | body { 899 | --tag-radius: var(--radius-m); 900 | } 901 | 902 | /* Callout */ 903 | body { 904 | --callout-default: var(--color-purple-rgb); 905 | --callout-bug: var(--color-red-rgb); 906 | --callout-error: var(--color-red-rgb); 907 | --callout-example: var(--color-purple-rgb); 908 | --callout-fail: var(--color-red-rgb); 909 | --callout-important: var(--color-cyan-rgb); 910 | --callout-info: var(--color-blue-rgb); 911 | --callout-question: var(--color-yellow-rgb); 912 | --callout-success: var(--color-green-rgb); 913 | --callout-summary: var(--color-cyan-rgb); 914 | --callout-tip: var(--color-cyan-rgb); 915 | --callout-todo: var(--color-blue-rgb); 916 | --callout-warning: var(--color-orange-rgb); 917 | --callout-quote: var(--color-muted-rgb); 918 | 919 | --callout-padding: var(--size-4-4) var(--size-4-4) var(--size-4-4) var(--size-4-6); 920 | --callout-border-width: 1px; 921 | --callout-border-opacity: 0.15; 922 | } 923 | 924 | .callout:hover { 925 | --callout-border-opacity: 0.25; 926 | } 927 | 928 | .callout { 929 | background-color: rgba(var(--callout-color), 0.07); 930 | } 931 | 932 | .callout-title { 933 | gap: var(--size-4-2); 934 | } 935 | 936 | .callout p { 937 | margin-bottom: 4px; 938 | } 939 | 940 | /* embeded callouts horizontal margin */ 941 | .markdown-embed-content .markdown-preview-view .callout { 942 | margin: 0.7rem 0; 943 | } 944 | 945 | .callout-fold, 946 | .callout-icon { 947 | margin-top: 0px; 948 | } 949 | 950 | /* Frontmatter */ 951 | .cm-hmd-frontmatter.cm-atom, 952 | .cm-hmd-frontmatter.cm-meta { 953 | color: var(--text-faint); 954 | } 955 | 956 | /* Checkboxes icons */ 957 | body { 958 | /* Done checkbox */ 959 | --checklist-done-decoration: none; 960 | --checklist-done-color: var(--text-faint); 961 | 962 | /* Progress checkbox */ 963 | --checkbox-progress-width: 32px; 964 | } 965 | 966 | /* Alternative checkboxes */ 967 | body:not(.disable-alternative-checkboxes) { 968 | input[data-task='"']:checked, 969 | li[data-task='"'] > input:checked, 970 | li[data-task='"'] > p > input:checked, 971 | input[data-task="-"]:checked, 972 | li[data-task="-"] > input:checked, 973 | li[data-task="-"] > p > input:checked, 974 | input[data-task="!"]:checked, 975 | li[data-task="!"] > input:checked, 976 | li[data-task="!"] > p > input:checked, 977 | input[data-task="?"]:checked, 978 | li[data-task="?"] > input:checked, 979 | li[data-task="?"] > p > input:checked, 980 | input[data-task="“"]:checked, 981 | li[data-task="“"] > input:checked, 982 | li[data-task="“"] > p > input:checked, 983 | input[data-task="*"]:checked, 984 | li[data-task="*"] > input:checked, 985 | li[data-task="*"] > p > input:checked, 986 | input[data-task="/"]:checked, 987 | li[data-task="/"] > input:checked, 988 | li[data-task="/"] > p > input:checked, 989 | input[data-task="<"]:checked, 990 | li[data-task="<"] > input:checked, 991 | li[data-task="<"] > p > input:checked, 992 | input[data-task=">"]:checked, 993 | li[data-task=">"] > input:checked, 994 | li[data-task=">"] > p > input:checked, 995 | input[data-task="b"]:checked, 996 | li[data-task="b"] > input:checked, 997 | li[data-task="b"] > p > input:checked, 998 | input[data-task="c"]:checked, 999 | li[data-task="c"] > input:checked, 1000 | li[data-task="c"] > p > input:checked, 1001 | input[data-task="d"]:checked, 1002 | li[data-task="d"] > input:checked, 1003 | li[data-task="d"] > p > input:checked, 1004 | input[data-task="f"]:checked, 1005 | li[data-task="f"] > input:checked, 1006 | li[data-task="f"] > p > input:checked, 1007 | input[data-task="i"]:checked, 1008 | li[data-task="i"] > input:checked, 1009 | li[data-task="i"] > p > input:checked, 1010 | input[data-task="I"]:checked, 1011 | li[data-task="I"] > input:checked, 1012 | li[data-task="I"] > p > input:checked, 1013 | input[data-task="k"]:checked, 1014 | li[data-task="k"] > input:checked, 1015 | li[data-task="k"] > p > input:checked, 1016 | input[data-task="l"]:checked, 1017 | li[data-task="l"] > input:checked, 1018 | li[data-task="l"] > p > input:checked, 1019 | input[data-task="n"]:checked, 1020 | li[data-task="n"] > input:checked, 1021 | li[data-task="n"] > p > input:checked, 1022 | input[data-task="p"]:checked, 1023 | li[data-task="p"] > input:checked, 1024 | li[data-task="p"] > p > input:checked, 1025 | input[data-task="S"]:checked, 1026 | li[data-task="S"] > input:checked, 1027 | li[data-task="S"] > p > input:checked, 1028 | input[data-task="u"]:checked, 1029 | li[data-task="u"] > input:checked, 1030 | li[data-task="u"] > p > input:checked, 1031 | input[data-task="w"]:checked, 1032 | li[data-task="w"] > input:checked, 1033 | li[data-task="w"] > p > input:checked { 1034 | --checkbox-marker-color: transparent; 1035 | --checkbox-position: 50% 50%; 1036 | --checklist-done-color: var(--text-normal); 1037 | 1038 | color: transparent; 1039 | border: none; 1040 | border-radius: 0; 1041 | background-image: none; 1042 | background-color: currentColor; 1043 | mask-size: var(--checkbox-icon); 1044 | -webkit-mask-size: var(--checkbox-icon); 1045 | mask-position: 50% 50%; 1046 | -webkit-mask-position: 50% 50%; 1047 | mask-image: var(--checkbox-image); 1048 | -webkit-mask-image: var(--checkbox-image); 1049 | } 1050 | 1051 | /* [?] Question */ 1052 | input[data-task="?"]:checked, 1053 | li[data-task="?"] > input:checked, 1054 | li[data-task="?"] > p > input:checked { 1055 | color: var(--color-yellow); 1056 | --checkbox-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="16" height="16" viewBox="0 0 20 20"%3E%3Cg fill="currentColor"%3E%3Cpath d="M11.739 16.213a2 2 0 1 1-4 0a2 2 0 0 1 4 0Z"%2F%3E%3Cpath fill-rule="evenodd" d="M9.71 4.765c-.67 0-1.245.2-1.65.486c-.39.276-.583.597-.639.874a1.45 1.45 0 0 1-2.842-.574c.227-1.126.925-2.045 1.809-2.67c.92-.65 2.086-1.016 3.322-1.016c2.557 0 5.208 1.71 5.208 4.456c0 1.59-.945 2.876-2.169 3.626a1.45 1.45 0 0 1-1.514-2.474c.57-.349.783-.794.783-1.152c0-.574-.715-1.556-2.308-1.556Z" clip-rule="evenodd"%2F%3E%3Cpath fill-rule="evenodd" d="M9.71 8.63c.8 0 1.45.648 1.45 1.45v1.502a1.45 1.45 0 1 1-2.9 0V10.08c0-.8.649-1.45 1.45-1.45Z" clip-rule="evenodd"%2F%3E%3Cpath fill-rule="evenodd" d="M13.239 7.966a1.45 1.45 0 0 1-.5 1.99l-2.284 1.367a1.45 1.45 0 0 1-1.49-2.488l2.285-1.368a1.45 1.45 0 0 1 1.989.5Z" clip-rule="evenodd"%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E'); 1057 | } 1058 | 1059 | /* [>] Forwarded */ 1060 | input[data-task=">"]:checked, 1061 | li[data-task=">"] > input:checked, 1062 | li[data-task=">"] > p > input:checked { 1063 | color: var(--color-green); 1064 | --checkbox-image: url('data:image/svg+xml;utf8,'); 1065 | } 1066 | 1067 | /* [<] Schedule */ 1068 | input[data-task="<"]:checked, 1069 | li[data-task="<"] > input:checked, 1070 | li[data-task="<"] > p > input:checked { 1071 | color: var(--color-blue); 1072 | --checkbox-image: url('data:image/svg+xml;utf8,'); 1073 | } 1074 | 1075 | /* [/] Incomplete */ 1076 | input[data-task="/"]:checked, 1077 | li[data-task="/"] > input:checked, 1078 | li[data-task="/"] > p > input:checked { 1079 | overflow: hidden; 1080 | border-radius: 3px; 1081 | } 1082 | 1083 | input[data-task="/"]:checked:after, 1084 | li[data-task="/"] > input:checked:after, 1085 | li[data-task="/"] > p > input:checked:after { 1086 | top: 0; 1087 | left: 0; 1088 | content: " "; 1089 | display: block; 1090 | position: absolute; 1091 | background-color: var(--checkbox-color); 1092 | width: 50%; 1093 | height: 100%; 1094 | mask-image: none; 1095 | -webkit-mask-image: none; 1096 | } 1097 | 1098 | /* [!] Important */ 1099 | input[data-task="!"]:checked, 1100 | li[data-task="!"] > input:checked, 1101 | li[data-task="!"] > p > input:checked { 1102 | color: var(--color-orange); 1103 | --checkbox-image: url('data:image/svg+xml;utf8,'); 1104 | } 1105 | 1106 | /* ["] Quote */ 1107 | input[data-task='"']:checked, 1108 | li[data-task='"'] > input:checked, 1109 | li[data-task='"'] > p > input:checked, 1110 | input[data-task="“"]:checked, 1111 | li[data-task="“"] > input:checked, 1112 | li[data-task="“"] > p > input:checked { 1113 | color: var(--text-muted); 1114 | --checkbox-image: url('data:image/svg+xml;utf8,'); 1115 | } 1116 | 1117 | /* [-] Canceled */ 1118 | input[data-task="-"]:checked, 1119 | li[data-task="-"] > input:checked, 1120 | li[data-task="-"] > p > input:checked { 1121 | color: var(--text-faint); 1122 | --checkbox-image: url('data:image/svg+xml;utf8,'); 1123 | } 1124 | 1125 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="-"], 1126 | .markdown-preview-view ul > li[data-task="-"].task-list-item.is-checked, 1127 | li[data-task="-"].task-list-item.is-checked { 1128 | color: var(--text-faint); 1129 | text-decoration: line-through solid var(--text-faint) 1px; 1130 | } 1131 | 1132 | /* [*] Star */ 1133 | input[data-task="*"]:checked, 1134 | li[data-task="*"] > input:checked, 1135 | li[data-task="*"] > p > input:checked { 1136 | color: var(--color-yellow); 1137 | --checkbox-image: url('data:image/svg+xml;utf8,'); 1138 | } 1139 | 1140 | /* [l] Location */ 1141 | input[data-task="l"]:checked, 1142 | li[data-task="l"] > input:checked, 1143 | li[data-task="l"] > p > input:checked { 1144 | color: var(--color-red); 1145 | --checkbox-image: url('data:image/svg+xml;utf8,'); 1146 | } 1147 | 1148 | /* [i] Info */ 1149 | input[data-task="i"]:checked, 1150 | li[data-task="i"] > input:checked, 1151 | li[data-task="i"] > p > input:checked { 1152 | color: var(--color-cyan); 1153 | --checkbox-image: url('data:image/svg+xml;utf8,'); 1154 | } 1155 | 1156 | /* [S] Money */ 1157 | input[data-task="S"]:checked, 1158 | li[data-task="S"] > input:checked, 1159 | li[data-task="S"] > p > input:checked { 1160 | color: var(--color-green); 1161 | --checkbox-image: url('data:image/svg+xml;utf8,'); 1162 | } 1163 | 1164 | /* [I] Idea */ 1165 | input[data-task="I"]:checked, 1166 | li[data-task="I"] > input:checked, 1167 | li[data-task="I"] > p > input:checked { 1168 | color: var(--color-yellow); 1169 | --checkbox-image: url('data:image/svg+xml;utf8,'); 1170 | } 1171 | 1172 | /* [f] Fire */ 1173 | input[data-task="f"]:checked, 1174 | li[data-task="f"] > input:checked, 1175 | li[data-task="f"] > p > input:checked { 1176 | color: var(--color-red); 1177 | --checkbox-image: url('data:image/svg+xml;utf8,'); 1178 | } 1179 | 1180 | /* [k] Key */ 1181 | input[data-task="k"]:checked, 1182 | li[data-task="k"] > input:checked, 1183 | li[data-task="k"] > p > input:checked { 1184 | color: var(--color-yellow); 1185 | --checkbox-image: url('data:image/svg+xml;utf8,'); 1186 | } 1187 | 1188 | /* [u] Trend Up */ 1189 | input[data-task="u"]:checked, 1190 | li[data-task="u"] > input:checked, 1191 | li[data-task="u"] > p > input:checked { 1192 | color: var(--color-green); 1193 | --checkbox-image: url('data:image/svg+xml;utf8,'); 1194 | } 1195 | 1196 | /* [d] Trend Down */ 1197 | input[data-task="d"]:checked, 1198 | li[data-task="d"] > input:checked, 1199 | li[data-task="d"] > p > input:checked { 1200 | color: var(--color-red); 1201 | --checkbox-image: url('data:image/svg+xml;utf8,'); 1202 | } 1203 | 1204 | /* [w] Win */ 1205 | input[data-task="w"]:checked, 1206 | li[data-task="w"] > input:checked, 1207 | li[data-task="w"] > p > input:checked { 1208 | color: var(--color-blue); 1209 | --checkbox-image: url('data:image/svg+xml;utf8,'); 1210 | } 1211 | 1212 | /* [p] Pros */ 1213 | input[data-task="p"]:checked, 1214 | li[data-task="p"] > input:checked, 1215 | li[data-task="p"] > p > input:checked { 1216 | color: var(--color-green); 1217 | --checkbox-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath d='M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z' /%3E%3C/svg%3E"); 1218 | } 1219 | 1220 | /* [c] Cons */ 1221 | input[data-task="c"]:checked, 1222 | li[data-task="c"] > input:checked, 1223 | li[data-task="c"] > p > input:checked { 1224 | color: var(--color-orange); 1225 | transform: rotate(180deg); 1226 | --checkbox-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath d='M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z' /%3E%3C/svg%3E"); 1227 | } 1228 | 1229 | /* [b] Bookmark */ 1230 | input[data-task="b"]:checked, 1231 | li[data-task="b"] > input:checked, 1232 | li[data-task="b"] > p > input:checked { 1233 | color: var(--color-orange); 1234 | --checkbox-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath d='M5 4a2 2 0 012-2h6a2 2 0 012 2v14l-5-2.5L5 18V4z' /%3E%3C/svg%3E"); 1235 | } 1236 | 1237 | /* [n] New */ 1238 | input[data-task="n"]:checked, 1239 | li[data-task="n"] > input:checked, 1240 | li[data-task="n"] > p > input:checked { 1241 | color: var(--color-blue); 1242 | --checkbox-image: url('data:image/svg+xml;utf8,'); 1243 | } 1244 | 1245 | /* [0-4] Progress */ 1246 | input[data-task="0"]:checked, 1247 | li[data-task="0"] > input:checked, 1248 | li[data-task="0"] > p > input:checked, 1249 | input[data-task="1"]:checked, 1250 | li[data-task="1"] > input:checked, 1251 | li[data-task="1"] > p > input:checked, 1252 | input[data-task="2"]:checked, 1253 | li[data-task="2"] > input:checked, 1254 | li[data-task="2"] > p > input:checked, 1255 | input[data-task="3"]:checked, 1256 | li[data-task="3"] > input:checked, 1257 | li[data-task="3"] > p > input:checked, 1258 | input[data-task="4"]:checked, 1259 | li[data-task="4"] > input:checked, 1260 | li[data-task="4"] > p > input:checked { 1261 | background: transparent; 1262 | background-image: none; 1263 | width: var(--checkbox-progress-width); 1264 | height: 14px; 1265 | border: 2px solid var(--interactive-accent); 1266 | border-radius: 10px; 1267 | position: relative; 1268 | overflow: hidden; 1269 | mask-image: none; 1270 | -webkit-mask-image: none; 1271 | 1272 | &:hover { 1273 | background-color: transparent; 1274 | 1275 | &::after { 1276 | background: var(--interactive-accent-hover); 1277 | } 1278 | } 1279 | 1280 | &::after { 1281 | content: " "; 1282 | display: block; 1283 | background: var(--interactive-accent); 1284 | width: calc(var(--checkbox-progress-width) * var(--checkbox-progress-frac)); 1285 | height: 100%; 1286 | top: 0; 1287 | border-radius: 10px; 1288 | mask-image: none; 1289 | -webkit-mask-image: none; 1290 | transition: width 0.15s ease-out; 1291 | } 1292 | } 1293 | 1294 | input[data-task="0"], 1295 | li[data-task="0"] { 1296 | --checkbox-progress-frac: 0; 1297 | } 1298 | 1299 | input[data-task="1"], 1300 | li[data-task="1"] { 1301 | --checkbox-progress-frac: 0.25; 1302 | } 1303 | 1304 | input[data-task="2"], 1305 | li[data-task="2"] { 1306 | --checkbox-progress-frac: 0.5; 1307 | } 1308 | 1309 | input[data-task="3"], 1310 | li[data-task="3"] { 1311 | --checkbox-progress-frac: 0.75; 1312 | } 1313 | 1314 | input[data-task="4"], 1315 | li[data-task="4"] { 1316 | --checkbox-progress-frac: 1; 1317 | } 1318 | } 1319 | 1320 | /* * Kanban */ 1321 | /* from things theme: https://github.com/colineckert/obsidian-things */ 1322 | body:not(.no-kanban-styles) .kanban-plugin { 1323 | --dot-color: hsl(0 0% 40% / 20%); 1324 | --dot-spacing: 20px; 1325 | --dot-size: 1px; 1326 | } 1327 | 1328 | .theme-light .kanban-plugin { 1329 | --kanban-item-background: var(--base-60); 1330 | --kanban-item-active-background: var(--base-55); 1331 | --kanban-item-new-background: var(--base-60); 1332 | } 1333 | 1334 | .theme-dark .kanban-plugin { 1335 | --kanban-item-background: var(--base-50); 1336 | --kanban-item-active-background: var(--base-60); 1337 | --kanban-item-new-background: var(--base-60); 1338 | } 1339 | 1340 | body:not(.no-kanban-styles) .kanban-plugin__item-title-wrapper { 1341 | padding: 8px 8px 8px 12px; 1342 | } 1343 | 1344 | .kanban-plugin__item-title-wrapper { 1345 | background: var(--kanban-item-background); 1346 | } 1347 | 1348 | .kanban-plugin__item-title-wrapper[data-ignore-drag="true"] { 1349 | background: var(--kanban-item-active-background); 1350 | } 1351 | 1352 | body:not(.no-kanban-styles) .kanban-plugin__item-form .kanban-plugin__item-input-wrapper { 1353 | background-color: var(--kanban-item-new-background); 1354 | } 1355 | 1356 | body:not(.no-kanban-styles) .kanban-plugin__lane-items > div { 1357 | margin-top: 6px; 1358 | } 1359 | 1360 | body:not(.no-kanban-styles) .kanban-plugin__board { 1361 | background-image: radial-gradient( 1362 | circle, 1363 | var(--dot-color) var(--dot-size), 1364 | transparent var(--dot-size) 1365 | ); 1366 | border-top: var(--thin-border); 1367 | background-size: var(--dot-spacing) var(--dot-spacing); 1368 | background-attachment: local; 1369 | } 1370 | 1371 | body:not(.no-kanban-styles) .kanban-plugin__board > div { 1372 | margin: 0 auto; 1373 | } 1374 | 1375 | body:not(.no-kanban-styles) .kanban-plugin__item-form { 1376 | border-top: none; 1377 | } 1378 | 1379 | body:not(.no-kanban-styles) .kanban-plugin__lane-header-wrapper { 1380 | border-bottom: 0; 1381 | } 1382 | 1383 | body:not(.no-kanban-styles) .kanban-plugin button { 1384 | box-shadow: none; 1385 | } 1386 | 1387 | body:not(.no-kanban-styles) .kanban-plugin__item-button-wrapper > button:hover { 1388 | color: var(--text-normal); 1389 | background: var(--background-modifier-hover); 1390 | } 1391 | 1392 | body:not(.no-kanban-styles) .kanban-plugin__item-button-wrapper { 1393 | border-top: none; 1394 | } 1395 | 1396 | body:not(.no-kanban-styles) .kanban-plugin__lane { 1397 | border: 1px solid transparent; 1398 | } 1399 | 1400 | body:not(.no-kanban-styles) .kanban-plugin__item-content-wrapper { 1401 | box-shadow: none; 1402 | } 1403 | 1404 | body:not(.no-kanban-styles):not(.is-mobile) .kanban-plugin__grow-wrap > textarea:focus { 1405 | box-shadow: none; 1406 | } 1407 | 1408 | body:not(.no-kanban-styles) .kanban-plugin__item-input-actions button, 1409 | body:not(.no-kanban-styles) .kanban-plugin__lane-input-actions button { 1410 | font-size: var(--font-adaptive-small); 1411 | } 1412 | 1413 | .kanban-plugin__lane-header-wrapper .kanban-plugin__grow-wrap > textarea, 1414 | .kanban-plugin__grow-wrap > textarea { 1415 | background: transparent; 1416 | } 1417 | 1418 | .kanban-plugin__item-prefix-button-wrapper input[type="checkbox"] { 1419 | filter: none; 1420 | } 1421 | 1422 | /* * Hover editor */ 1423 | .popover.hover-editor .popover-titlebar { 1424 | --he-title-bar-active-bg: var(--interactive-accent); 1425 | --he-title-bar-active-pinned-bg: var(--interactive-accent); 1426 | --he-title-bar-inactive-bg: var(--base-45); 1427 | --he-title-bar-inactive-pinned-bg: var(--base-45); 1428 | 1429 | --he-title-bar-active-fg: var(--base-05); 1430 | --he-title-bar-active-action: var(--base-05); 1431 | --he-title-bar-inactive-fg: var(--text-normal); 1432 | --he-title-bar-inactive-action: var(--text-normal); 1433 | } 1434 | 1435 | .popover.hover-editor.is-active .popover-titlebar { 1436 | --he-title-bar-inactive-action: var(--base-05); 1437 | } 1438 | 1439 | /* * meta bind */ 1440 | .meta-bind-plugin-input input[type="number"] { 1441 | width: 72px; 1442 | margin-right: 4px; 1443 | height: 24px; 1444 | background-color: var(--base-50); 1445 | border-color: var(--base-50); 1446 | } 1447 | 1448 | .meta-bind-plugin-input input[type="number"]:hover { 1449 | border-color: var(--base-40); 1450 | } 1451 | 1452 | /* Canvas */ 1453 | .canvas-node-container { 1454 | border: 1.5px solid var(--background-modifier-border-focus); 1455 | } 1456 | 1457 | /* MIT License | Copyright (c) Stephan Ango (@kepano) 1458 | 1459 | Cards snippet for Obsidian 1460 | 1461 | author: @kepano 1462 | version: 3.0.0 1463 | 1464 | Support my work: 1465 | https://github.com/sponsors/kepano 1466 | 1467 | */ 1468 | body { 1469 | --cards-min-width: 150px; 1470 | --cards-max-width: 1fr; 1471 | --cards-mobile-width: 120px; 1472 | --cards-image-height: 400px; 1473 | --cards-padding: 1.2em; 1474 | --cards-image-fit: contain; 1475 | --cards-background: transparent; 1476 | --cards-border-width: 1px; 1477 | --cards-aspect-ratio: auto; 1478 | --cards-columns: repeat(auto-fit, minmax(var(--cards-min-width), var(--cards-max-width))); 1479 | } 1480 | 1481 | @media (max-width: 400pt) { 1482 | body { 1483 | --cards-min-width: var(--cards-mobile-width); 1484 | } 1485 | } 1486 | .cards.table-100 table.dataview tbody, 1487 | .table-100 .cards table.dataview tbody { 1488 | padding: 0.25rem 0.75rem; 1489 | } 1490 | 1491 | .cards table.dataview { 1492 | --table-width: 100%; 1493 | --table-edge-cell-padding-first: calc(var(--cards-padding) / 2); 1494 | --table-edge-cell-padding-last: calc(var(--cards-padding) / 2); 1495 | --table-cell-padding: calc(var(--cards-padding) / 3) calc(var(--cards-padding) / 2); 1496 | line-height: 1.3; 1497 | } 1498 | .cards table.dataview tbody { 1499 | clear: both; 1500 | padding: 0.5rem 0; 1501 | display: grid; 1502 | grid-template-columns: var(--cards-columns); 1503 | grid-column-gap: 0.75rem; 1504 | grid-row-gap: 0.75rem; 1505 | } 1506 | .cards table.dataview > tbody > tr { 1507 | background-color: var(--cards-background); 1508 | border: var(--cards-border-width) solid var(--background-modifier-border); 1509 | display: flex; 1510 | flex-direction: column; 1511 | margin: 0; 1512 | padding: 0 0 calc(var(--cards-padding) / 3) 0; 1513 | border-radius: 6px; 1514 | overflow: hidden; 1515 | transition: box-shadow 0.15s linear; 1516 | max-width: var(--cards-max-width); 1517 | } 1518 | .cards table.dataview > tbody > tr:hover { 1519 | border: var(--cards-border-width) solid var(--background-modifier-border-hover); 1520 | box-shadow: 1521 | 0 4px 6px 0px rgba(0, 0, 0, 0.05), 1522 | 0 1px 3px 1px rgba(0, 0, 0, 0.025); 1523 | transition: box-shadow 0.15s linear; 1524 | } 1525 | 1526 | .cards table.dataview tbody > tr > td:first-child { 1527 | font-weight: var(--bold-weight); 1528 | border: none; 1529 | } 1530 | .cards table.dataview tbody > tr > td:first-child a { 1531 | display: block; 1532 | } 1533 | .cards table.dataview tbody > tr > td:last-child { 1534 | border: none; 1535 | } 1536 | .cards table.dataview tbody > tr > td:not(:first-child) { 1537 | font-size: calc(var(--table-text-size) * 0.9); 1538 | color: var(--text-muted); 1539 | } 1540 | .cards table.dataview tbody > tr > td > * { 1541 | padding: calc(var(--cards-padding) / 3) 0; 1542 | } 1543 | .cards table.dataview tbody > tr > td:not(:last-child):not(:first-child) { 1544 | padding: 4px 0; 1545 | border-bottom: 1px solid var(--background-modifier-border); 1546 | width: calc(100% - var(--cards-padding)); 1547 | margin: 0 calc(var(--cards-padding) / 2); 1548 | } 1549 | .cards table.dataview tbody > tr > td a { 1550 | text-decoration: none; 1551 | } 1552 | .cards table.dataview tbody > tr > td > button { 1553 | width: 100%; 1554 | margin: calc(var(--cards-padding) / 2) 0; 1555 | } 1556 | .cards table.dataview tbody > tr > td:last-child > button { 1557 | margin-bottom: calc(var(--cards-padding) / 6); 1558 | } 1559 | .cards table.dataview tbody > tr > td > ul { 1560 | width: 100%; 1561 | padding: 0.25em 0 !important; 1562 | margin: 0 auto !important; 1563 | } 1564 | .cards table.dataview tbody > tr > td:has(img) { 1565 | padding: 0 !important; 1566 | background-color: var(--background-secondary); 1567 | display: block; 1568 | margin: 0; 1569 | width: 100%; 1570 | } 1571 | .cards table.dataview tbody > tr > td img { 1572 | aspect-ratio: var(--cards-aspect-ratio); 1573 | width: 100%; 1574 | object-fit: var(--cards-image-fit); 1575 | max-height: var(--cards-image-height); 1576 | background-color: var(--background-secondary); 1577 | vertical-align: bottom; 1578 | } 1579 | 1580 | .markdown-source-view.mod-cm6.cards .dataview.table-view-table > tbody > tr > td, 1581 | .trim-cols .cards table.dataview tbody > tr > td { 1582 | white-space: normal; 1583 | } 1584 | 1585 | .links-int-on .cards table { 1586 | --link-decoration: none; 1587 | } 1588 | 1589 | /* Block button */ 1590 | .markdown-source-view.mod-cm6.cards .edit-block-button { 1591 | top: 0px; 1592 | right: initial; 1593 | } 1594 | 1595 | /* ------------------- */ 1596 | /* Sorting menu */ 1597 | .cards.table-100 table.dataview thead > tr, 1598 | .table-100 .cards table.dataview thead > tr { 1599 | right: 0.75rem; 1600 | } 1601 | 1602 | .table-100 .cards table.dataview thead:before, 1603 | .cards.table-100 table.dataview thead:before { 1604 | margin-right: 0.75rem; 1605 | } 1606 | 1607 | .theme-light .cards table.dataview thead:before { 1608 | background-image: url('data:image/svg+xml;utf8,'); 1609 | } 1610 | 1611 | .cards table.dataview thead { 1612 | user-select: none; 1613 | width: 180px; 1614 | display: block; 1615 | float: right; 1616 | position: relative; 1617 | text-align: right; 1618 | height: 24px; 1619 | padding-bottom: 0px; 1620 | } 1621 | .cards table.dataview thead:hover:before { 1622 | opacity: 0.5; 1623 | background-color: var(--background-modifier-hover); 1624 | } 1625 | .cards table.dataview thead:before { 1626 | content: ""; 1627 | position: absolute; 1628 | right: 0; 1629 | top: 0; 1630 | width: 10px; 1631 | height: 16px; 1632 | background-repeat: no-repeat; 1633 | cursor: var(--cursor); 1634 | text-align: right; 1635 | padding: var(--size-4-1) var(--size-4-2); 1636 | margin-bottom: 2px; 1637 | border-radius: var(--radius-s); 1638 | font-weight: 500; 1639 | font-size: var(--font-adaptive-small); 1640 | opacity: 0.25; 1641 | background-position: center center; 1642 | background-size: 16px; 1643 | background-image: url('data:image/svg+xml;utf8,'); 1644 | } 1645 | .cards table.dataview thead > tr { 1646 | top: -1px; 1647 | position: absolute; 1648 | display: none; 1649 | z-index: 9; 1650 | border: 1px solid var(--background-modifier-border-hover); 1651 | background-color: var(--background-secondary); 1652 | box-shadow: var(--shadow-s); 1653 | padding: 6px; 1654 | border-radius: var(--radius-m); 1655 | flex-direction: column; 1656 | margin: 24px 0 0 0; 1657 | width: 100%; 1658 | } 1659 | .cards table.dataview thead:hover > tr { 1660 | display: flex; 1661 | } 1662 | .cards table.dataview thead > tr > th { 1663 | display: block; 1664 | padding: 3px 30px 3px 6px !important; 1665 | border-radius: var(--radius-s); 1666 | width: 100%; 1667 | font-weight: 400; 1668 | color: var(--text-normal); 1669 | cursor: var(--cursor); 1670 | border: none; 1671 | font-size: var(--font-ui-small); 1672 | } 1673 | .cards table.dataview thead > tr > th[sortable-style="sortable-asc"], 1674 | .cards table.dataview thead > tr > th[sortable-style="sortable-desc"] { 1675 | color: var(--text-normal); 1676 | } 1677 | .cards table.dataview thead > tr > th:hover { 1678 | color: var(--text-normal); 1679 | background-color: var(--background-modifier-hover); 1680 | } 1681 | 1682 | /* ------------------- */ 1683 | /* Card lists */ 1684 | .list-cards.markdown-preview-view .list-bullet, 1685 | .list-cards.markdown-preview-view .list-collapse-indicator, 1686 | .list-cards.markdown-preview-view.markdown-rendered.show-indentation-guide li > ul::before { 1687 | display: none; 1688 | } 1689 | .list-cards.markdown-preview-view div > ul { 1690 | display: grid; 1691 | gap: 0.75rem; 1692 | grid-template-columns: var(--cards-columns); 1693 | padding: 0; 1694 | line-height: var(--line-height-tight); 1695 | } 1696 | .list-cards.markdown-preview-view div > ul > li { 1697 | background-color: var(--cards-background); 1698 | padding: calc(var(--cards-padding) / 2); 1699 | border-radius: var(--radius-s); 1700 | border: var(--cards-border-width) solid var(--background-modifier-border); 1701 | overflow: hidden; 1702 | } 1703 | .list-cards.markdown-preview-view div > ul .image-embed { 1704 | padding: 0; 1705 | display: block; 1706 | background-color: var(--background-secondary); 1707 | border-radius: var(--image-radius); 1708 | } 1709 | .list-cards.markdown-preview-view div > ul .image-embed img { 1710 | aspect-ratio: var(--cards-aspect-ratio); 1711 | object-fit: var(--cards-image-fit); 1712 | max-height: var(--cards-image-height); 1713 | background-color: var(--background-secondary); 1714 | vertical-align: bottom; 1715 | } 1716 | .list-cards.markdown-preview-view div > ul > li > a { 1717 | --link-decoration: none; 1718 | --link-external-decoration: none; 1719 | font-weight: var(--bold-weight); 1720 | } 1721 | .list-cards.markdown-preview-view div ul > li:hover { 1722 | border-color: var(--background-modifier-border-hover); 1723 | } 1724 | .list-cards.markdown-preview-view div ul ul { 1725 | display: block; 1726 | width: 100%; 1727 | color: var(--text-muted); 1728 | font-size: var(--font-smallest); 1729 | margin: calc(var(--cards-padding) / -4) 0; 1730 | padding: calc(var(--cards-padding) / 2) 0; 1731 | } 1732 | .list-cards.markdown-preview-view div ul ul ul { 1733 | padding-bottom: calc(var(--cards-padding) / 4); 1734 | } 1735 | .list-cards.markdown-preview-view div ul ul > li { 1736 | display: block; 1737 | } 1738 | 1739 | /* ------------------- */ 1740 | /* Helper classes */ 1741 | .cards.cards-16-9, 1742 | .list-cards.cards-16-9 { 1743 | --cards-aspect-ratio: 16/9; 1744 | } 1745 | .cards.cards-1-1, 1746 | .list-cards.cards-1-1 { 1747 | --cards-aspect-ratio: 1/1; 1748 | } 1749 | .cards.cards-2-1, 1750 | .list-cards.cards-2-1 { 1751 | --cards-aspect-ratio: 2/1; 1752 | } 1753 | .cards.cards-2-3, 1754 | .list-cards.cards-2-3 { 1755 | --cards-aspect-ratio: 2/3; 1756 | } 1757 | .cards.cards-cols-1, 1758 | .list-cards.cards-cols-1 { 1759 | --cards-columns: repeat(1, minmax(0, 1fr)); 1760 | } 1761 | .cards.cards-cols-2, 1762 | .list-cards.cards-cols-2 { 1763 | --cards-columns: repeat(2, minmax(0, 1fr)); 1764 | } 1765 | .cards.cards-cover, 1766 | .list-cards.cards-cover { 1767 | --cards-image-fit: cover; 1768 | } 1769 | .cards.cards-align-bottom table.dataview tbody > tr > td:last-child, 1770 | .list-cards.cards-align-bottom table.dataview tbody > tr > td:last-child { 1771 | align-items: flex-end; 1772 | flex-grow: 1; 1773 | } 1774 | 1775 | @media (max-width: 400pt) { 1776 | .cards table.dataview tbody > tr > td:not(:first-child) { 1777 | font-size: 80%; 1778 | } 1779 | } 1780 | @media (min-width: 400pt) { 1781 | .cards-cols-3 { 1782 | --cards-columns: repeat(3, minmax(0, 1fr)); 1783 | } 1784 | 1785 | .cards-cols-4 { 1786 | --cards-columns: repeat(4, minmax(0, 1fr)); 1787 | } 1788 | 1789 | .cards-cols-5 { 1790 | --cards-columns: repeat(5, minmax(0, 1fr)); 1791 | } 1792 | 1793 | .cards-cols-6 { 1794 | --cards-columns: repeat(6, minmax(0, 1fr)); 1795 | } 1796 | 1797 | .cards-cols-7 { 1798 | --cards-columns: repeat(7, minmax(0, 1fr)); 1799 | } 1800 | 1801 | .cards-cols-8 { 1802 | --cards-columns: repeat(8, minmax(0, 1fr)); 1803 | } 1804 | } 1805 | --------------------------------------------------------------------------------