theme.css
1 /*─────────────────────────────────────────────────────── 2 THINGS 3 Version 2.1.13 4 Created by @colineckert 5 6 Readme: 7 https://github.com/colineckert/obsidian-things 8 9 Support my work: 10 https://www.buymeacoffee.com/colineckert 11 ────────────────────────────────────────────────────── */ 12 13 /* ─────────────────────────────────────────────────── */ 14 /* Main Theme Styling */ 15 /* ─────────────────────────────────────────────────── */ 16 17 @charset "UTF-8"; 18 body { 19 /* Colors */ 20 --base-h: 212; /* Base hue */ 21 --base-s: 15%; /* Base saturation */ 22 --base-d: 13%; /* Base lightness Dark Mode - 0 is black */ 23 --base-l: 97%; /* Base lightness Light Mode - 100 is white */ 24 --accent-h: 215; /* Accent hue */ 25 --accent-s: 75%; /* Accent saturation */ 26 --accent-d: 70%; /* Accent lightness Dark Mode */ 27 --accent-l: 60%; /* Accent lightness Light Mode */ 28 29 --blue: #2e80f2; 30 --pink: #ff82b2; 31 --green: #3eb4bf; 32 --yellow: #e5b567; 33 --orange: #e87d3e; 34 --red: #e83e3e; 35 --purple: #9e86c8; 36 37 --h1-color: var(--text-normal); 38 --h2-color: var(--text-normal); 39 --h3-color: var(--blue); 40 --h4-color: var(--yellow); 41 --h5-color: var(--red); 42 --h6-color: var(--text-muted); 43 44 --strong-color: var(--pink); 45 --em-color: var(--pink); 46 --quote-color: var(--green); 47 48 --tag-background-color-l: #bde1d3; 49 --tag-font-color-l: #1d694b; 50 --tag-background-color-d: #1d694b; 51 --tag-font-color-d: #ffffff; 52 53 --highlight-background-color--normal: hsl(50deg 100% 50% / 15%) !important; 54 --highlight-background-color-underline: hsl(50deg 100% 50% / 100%) !important; 55 --highlight-background-color--active: hsl(50deg 100% 50% / 20%) !important; 56 57 /* Font families */ 58 --font-text-theme: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 59 Inter, Ubuntu, sans-serif; 60 --font-editor-theme: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 61 Inter, Ubuntu, sans-serif; 62 --font-monospace-theme: 'JetBrains Mono', 'Fira Code', Menlo, SFMono-Regular, 63 Consolas, 'Roboto Mono', monospace; 64 --font-interface-theme: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 65 Inter, Ubuntu, sans-serif; 66 --font-editor: var(--font-editor-override), var(--font-text-override), 67 var(--font-editor-theme); 68 69 --h1-size: 1.7rem; 70 --h2-size: 1.5rem; 71 --h3-size: 1.2rem; 72 --h4-size: 1.1rem; 73 --h5-size: 1rem; 74 --h6-size: 0.9rem; 75 76 /* Misc */ 77 --checkbox-radius: 30%; 78 --link-external-decoration: underline; 79 --link-decoration: underline; 80 81 /* -------- */ 82 --radius-s: 4px; 83 --radius-m: 8px; 84 --radius-l: 10px; 85 --radius-xl: 16px; 86 87 --line-width: 40rem; 88 --line-height: 1.5; 89 --max-width: 90%; 90 --max-col-width: 18em; 91 --icon-muted: 0.5; 92 --nested-padding: 1.1em; 93 --folding-offset: 10px; 94 95 --line-width-adaptive: var(--line-width); 96 --line-width-wide: calc(var(--line-width) + 12.5%); 97 } 98 99 /* COLOR SCHEMES 100 ────────────────────────────────────────────────────── */ 101 102 .theme-light, 103 body.theme-light.is-mobile { 104 color-scheme: light; 105 --highlight-mix-blend-mode: darken; 106 --mono-rgb-0: 255, 255, 255; 107 --mono-rgb-100: 0, 0, 0; 108 --color-red-rgb: 228, 55, 75; 109 --color-red: #e4374b; 110 --color-green-rgb: 12, 181, 79; 111 --color-green: #0cb54f; 112 --color-orange: #d96c00; 113 --color-yellow: #bd8e37; 114 --color-cyan: #2db7b5; 115 --color-blue: #086ddd; 116 --color-purple: #876be0; 117 --color-pink: #c32b74; 118 --color-base-00: #ffffff; 119 --color-base-05: #fcfcfc; 120 --color-base-10: #f6f7f8; /* code blocks */ 121 --color-base-20: #f6f7f8; 122 --color-base-25: #f0f0f0; 123 --color-base-30: #ebedf0; /* soften dividing lines */ 124 --color-base-35: #d4d4d4; 125 --color-base-40: #bdbdbd; 126 --color-base-50: #ababab; 127 --color-base-60: #707070; 128 --color-base-70: #5a5a5a; 129 --color-base-100: #222222; 130 --color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l); 131 --color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l)); 132 --color-accent-1: hsl( 133 var(--accent-h), 134 var(--accent-s), 135 calc(var(--accent-l) + 2.5%) 136 ); 137 --color-accent-2: hsl( 138 var(--accent-h), 139 var(--accent-s), 140 calc(var(--accent-l) + 5%) 141 ); 142 --background-modifier-hover: #e2e5e9; 143 --background-secondary-alt: var(--color-base-05); 144 --background-modifier-box-shadow: rgba(0, 0, 0, 0.1); 145 --background-modifier-cover: rgba(220, 220, 220, 0.4); 146 --text-highlight-bg-l: rgba(255, 208, 0, 0.4); 147 --text-highlight-bg: var(--text-highlight-bg-l); 148 --text-highlight-bg-active: rgba(255, 128, 0, 0.4); 149 --input-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 150 0 2px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 1.5px 0 rgba(0, 0, 0, 0.03), 151 0 1px 2px 0 rgba(0, 0, 0, 0.04), 0 0 0 0 transparent; 152 --input-shadow-hover: inset 0 0 0 1px rgba(0, 0, 0, 0.17), 153 0 2px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 1.5px 0 rgba(0, 0, 0, 0.03), 154 0 1px 2px 0 rgba(0, 0, 0, 0.04), 0 0 0 0 transparent; 155 --shadow-s: 0px 1px 2px rgba(0, 0, 0, 0.028), 156 0px 3.4px 6.7px rgba(0, 0, 0, 0.042), 0px 15px 30px rgba(0, 0, 0, 0.07); 157 --shadow-l: 0px 1.8px 7.3px rgba(0, 0, 0, 0.071), 158 0px 6.3px 24.7px rgba(0, 0, 0, 0.112), 0px 30px 90px rgba(0, 0, 0, 0.2); 159 160 --tag-background: var(--tag-background-color-l); 161 --tag-color: var(--tag-font-color-l); 162 163 /* --text-normal: hsl(var(--base-h), var(--base-s), calc(var(--base-l) - 80%)); */ 164 --text-muted: hsl( 165 var(--base-h), 166 calc(var(--base-s) - 5%), 167 calc(var(--base-l) - 60%) 168 ); 169 --text-faint: hsl( 170 var(--base-h), 171 calc(var(--base-s) - 5%), 172 calc(var(--base-l) - 30%) 173 ); 174 --text-formatted: hsl( 175 var(--base-h), 176 calc(var(--base-s) - 5%), 177 calc(var(--base-l) - 35%) 178 ); 179 --text-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l)); 180 --text-accent-hover: hsl( 181 var(--accent-h), 182 var(--accent-s), 183 calc(var(--accent-l) - 10%) 184 ); 185 186 --atom-gray-1: #383a42; 187 --atom-gray-2: #383a42; 188 --atom-red: #e75545; 189 --atom-green: #4ea24c; 190 --atom-blue: #3d74f6; 191 --atom-purple: #a625a4; 192 --atom-aqua: #0084bc; 193 --atom-yellow: #e35649; 194 --atom-orange: #986800; 195 } 196 197 .theme-dark, 198 body.theme-dark.is-mobile { 199 color-scheme: dark; 200 --highlight-mix-blend-mode: lighten; 201 --mono-rgb-0: 0, 0, 0; 202 --mono-rgb-100: 255, 255, 255; 203 --color-red-rgb: 251, 70, 76; 204 --color-red: #fb464c; 205 --color-green-rgb: 68, 207, 110; 206 --color-green: #44cf6e; 207 --color-orange: #e9973f; 208 --color-yellow: #e0de71; 209 --color-cyan: #53dfdd; 210 --color-blue: #027aff; 211 --color-purple: #a882ff; 212 --color-pink: #fa99cd; 213 --color-base-00: #1c2127; /* main editor window */ 214 --color-base-10: #282c34; /* code blocks */ 215 --color-base-20: #181c20; /* top unselected unfocused nav */ 216 --color-base-25: #2c313c; 217 --color-base-30: #35393e; 218 --color-base-35: #3f3f3f; 219 --color-base-40: #555; 220 --color-base-50: #666; /* unfocused text */ 221 --color-base-60: #999; 222 --color-base-70: #bababa; 223 --color-base-100: #dadada; 224 --color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l); 225 --color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l)); 226 --color-accent-1: hsl( 227 var(--accent-h), 228 var(--accent-s), 229 calc(var(--accent-l) - 3.8%) 230 ); 231 --color-accent-2: hsl( 232 var(--accent-h), 233 var(--accent-s), 234 calc(var(--accent-l) + 3.8%) 235 ); 236 --titlebar-background-focused: var(--color-base-10); 237 --background-modifier-form-field: var(--color-base-25); 238 --background-secondary-alt: var(--color-base-30); 239 --interactive-normal: var(--color-base-30); 240 --interactive-hover: var(--color-base-35); 241 --text-highlight-bg-d: rgba(255, 208, 0, 0.4); 242 --text-highlight-bg: var(--text-highlight-bg-d); 243 --text-highlight-bg-active: rgba(255, 128, 0, 0.4); 244 --text-selection: hsla(var(--interactive-accent-hsl), 0.25); 245 --input-shadow: inset 0 0.5px 0.5px 0.5px rgba(255, 255, 255, 0.09), 246 0 2px 4px 0 rgba(0, 0, 0, 0.15), 0 1px 1.5px 0 rgba(0, 0, 0, 0.1), 247 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 0 0 0 transparent; 248 --input-shadow-hover: inset 0 0.5px 1px 0.5px rgba(255, 255, 255, 0.16), 249 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 1.5px 0 rgba(0, 0, 0, 0.2), 250 0 1px 2px 0 rgba(0, 0, 0, 0.4), 0 0 0 0 transparent; 251 --shadow-s: 0px 1px 2px rgba(0, 0, 0, 0.121), 252 0px 3.4px 6.7px rgba(0, 0, 0, 0.179), 0px 15px 30px rgba(0, 0, 0, 0.3); 253 --shadow-l: 0px 1.8px 7.3px rgba(0, 0, 0, 0.071), 254 0px 6.3px 24.7px rgba(0, 0, 0, 0.112), 0px 30px 90px rgba(0, 0, 0, 0.2); 255 256 --tag-background: var(--tag-background-color-d); 257 --tag-color: var(--tag-font-color-d); 258 259 --text-muted: hsl(var(--base-h), var(--base-s), calc(var(--base-d) + 65%)); 260 --text-faint: hsl(var(--base-h), var(--base-s), calc(var(--base-d) + 30%)); 261 --text-formatted: hsl( 262 var(--base-h), 263 var(--base-s), 264 calc(var(--base-d) + 50%) 265 ); 266 267 --text-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-d)); 268 --text-accent-hover: hsl( 269 var(--accent-h), 270 var(--accent-s), 271 calc(var(--accent-d) + 12%) 272 ); 273 274 --atom-gray-1: #5c6370; 275 --atom-gray-2: #abb2bf; 276 --atom-red: #e06c75; 277 --atom-orange: #d19a66; 278 --atom-green: #98c379; 279 --atom-aqua: #56b6c2; 280 --atom-purple: #c678dd; 281 --atom-blue: #61afef; 282 --atom-yellow: #e5c07b; 283 } 284 285 body.is-mobile.theme-dark.mobile-black-background { 286 --color-base-00: black; 287 } 288 289 /* Make exported PDFs render correctly */ 290 @media print { 291 .theme-dark { 292 --highlight-mix-blend-mode: darken; 293 --color-base-30: #ebedf0; 294 --h1-color: var(--color-base-00); 295 } 296 } 297 298 /* H2 styling */ 299 body.h2-underline h2, 300 body.h2-underline .HyperMD-header.HyperMD-header-2.cm-line { 301 border-bottom: 2px solid var(--background-modifier-border); 302 width: 100%; 303 padding-bottom: 2px; 304 } 305 306 /* Hashtags font */ 307 .markdown-source-view.mod-cm6.is-live-preview .cm-hashtag.cm-meta, 308 .markdown-source-view.mod-cm5 .cm-hashtag.cm-meta { 309 font-family: var(--font-text-theme); 310 } 311 312 /* Blockquote */ 313 body:not(.default-font-color) .markdown-preview-view blockquote, 314 body:not(.default-font-color) span.cm-quote.cm-quote-1 { 315 font-style: italic; 316 color: var(--quote-color); 317 } 318 319 /* Bold font */ 320 body:not(.default-font-color) strong, 321 body:not(.default-font-color) span:not(.cm-highlight).cm-strong { 322 color: var(--strong-color); 323 } 324 325 /* Italics */ 326 body:not(.default-font-color) em, 327 body:not(.default-font-color) span:not(.cm-highlight).cm-em { 328 color: var(--em-color); 329 } 330 331 /* Styled highlights */ 332 body:not(.default-font-color) mark strong, 333 body:not(.default-font-color) mark em { 334 color: var(--text-normal); 335 } 336 337 /* Highlight styling */ 338 span.cm-highlight, 339 .markdown-preview-view mark, 340 span.search-result-file-matched-text { 341 padding: 0.05em 0; 342 -webkit-box-decoration-break: clone; 343 box-decoration-break: clone; 344 background-image: linear-gradient( 345 0deg, 346 var(--highlight-background-color-underline) 0%, 347 var(--highlight-background-color-underline) 2px, 348 var(--highlight-background-color--active) 2px, 349 var(--highlight-background-color--active) 100% 350 ) !important; 351 background-color: var(--highlight-text-color--active) !important; 352 } 353 354 /* Markdown formatting */ 355 .cm-formatting-strong, 356 .cm-formatting-em, 357 .cm-formatting.cm-formatting-quote { 358 color: var(--text-formatted) !important; 359 font-weight: var(--normal-weight); 360 letter-spacing: -0.02em; 361 } 362 363 /* Completed checkboxes */ 364 .markdown-preview-view ul > li.task-list-item.is-checked, 365 .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task='x'], 366 .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task='X'], 367 .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task='M'] { 368 text-decoration: none; 369 color: var(--text-faint); 370 } 371 372 /* Image card */ 373 img { 374 border-radius: 4px; 375 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); 376 } 377 378 .theme-dark .modal-container .suggestion-item.is-selected { 379 background: var(--color-accent); 380 } 381 382 /* Focus active line */ 383 body.active-line .cm-active:not(.HyperMD-header, .HyperMD-codeblock)::before, 384 body.active-line .cm-active.HyperMD-quote::before { 385 content: ''; 386 height: 100%; 387 position: absolute; 388 left: -1.125em; 389 border-left: 3px solid var(--color-accent); 390 border-radius: 10px 0 0 10px; 391 opacity: 0.85; 392 } 393 394 /* Code blocks horizontal scroll */ 395 .markdown-reading-view .markdown-preview-view pre:not(.frontmatter) code { 396 white-space: pre; 397 } 398 399 /* ------------------- */ 400 /* One Dark Syntax Coloring */ 401 /* Source: https://github.com/AGMStudio/prism-theme-one-dark */ 402 /* ------------------- */ 403 .theme-light .token.comment { 404 color: #ababab; 405 } 406 .theme-dark .token.comment, 407 .token.prolog, 408 .token.doctype, 409 .token.cdata { 410 color: var(--atom-gray-1); 411 } 412 .token.punctuation, 413 .token.plain-text, 414 .token.parameter, 415 .token.dom.variable, 416 .cm-hmd-codeblock.cm-bracket { 417 color: var(--atom-gray-2) !important; 418 } 419 .token.selector, 420 .token.tag, 421 .token.property, 422 .token.property-access, 423 .token.dom.variable, 424 span.token.variable, 425 .cm-hmd-codeblock.cm-tag, 426 .cm-variable, 427 .cm-property, 428 .cm-qualifier { 429 color: var(--atom-red); 430 } 431 .token.boolean, 432 .token.number, 433 .token.symbol, 434 .token.builtin, 435 .token.attr-name, 436 .token.deleted, 437 .cm-attribute, 438 .cm-number, 439 .cm-property.cm-string { 440 color: var(--atom-orange) !important; 441 } 442 .token.string, 443 .token.char, 444 .token.attr-value, 445 .token.inserted, 446 .cm-hmd-codeblock.cm-string, 447 .cm-hmd-codeblock.cm-string-2 { 448 color: var(--atom-green); 449 } 450 .token.operator, 451 .cm-operator, 452 .token.entity, 453 .token.url, 454 .language-css .token.string, 455 .style .token.string { 456 color: var(--atom-aqua); 457 } 458 .token.atrule, 459 .token.keyword, 460 .cm-keyword { 461 color: var(--atom-purple); 462 } 463 .cm-builtin, 464 .token.function, 465 .token.method, 466 .token.macro.property { 467 color: var(--atom-blue); 468 } 469 .token.class-name, 470 .token.constant, 471 .cm-atom, 472 code .cm-tag, 473 .cm-variable-2, 474 .cm-type { 475 color: var(--atom-yellow); 476 } 477 .token.regex, 478 .token.important, 479 .token.variable { 480 color: var(--atom-purple); 481 } 482 .token.important, 483 .token.bold { 484 font-weight: bold; 485 } 486 .token.italic { 487 font-style: italic; 488 } 489 .token.entity { 490 cursor: help; 491 } 492 493 /* --------------------- */ 494 /* Mobile toolbar button */ 495 /* --------------------- */ 496 497 body.is-mobile:not(.floating-button-off):not(.advanced-toolbar) 498 .view-action:nth-last-of-type(2), 499 body.is-mobile:not(.floating-button-off):not(.advanced-toolbar) 500 .view-action:nth-last-of-type(2) { 501 color: white; 502 background-color: var(--blue); 503 opacity: 1; 504 top: calc(90vh - 110px); 505 display: flex; 506 padding: 5px; 507 position: fixed; 508 left: 86vw; 509 transform: translate(-40%, 5%); 510 justify-content: center; 511 align-items: center; 512 width: 53px; 513 height: 53px; 514 border-radius: 50% !important; 515 box-shadow: 1.1px 0.3px 2.2px rgba(0, 0, 0, 0.02), 516 2.7px 0.7px 5.3px rgba(0, 0, 0, 0.028), 5px 1.3px 10px rgba(0, 0, 0, 0.035), 517 8.9px 2.2px 17.9px rgba(0, 0, 0, 0.042), 518 16.7px 4.2px 33.4px rgba(0, 0, 0, 0.05), 40px 10px 80px rgba(0, 0, 0, 0.07); 519 } 520 521 body.is-mobile:not(.floating-button-off).advanced-toolbar 522 .view-action:nth-last-of-type(2), 523 body.is-mobile:not(.floating-button-off).advanced-toolbar 524 .view-action:nth-last-of-type(2) { 525 color: white; 526 background-color: var(--blue); 527 opacity: 1; 528 position: fixed; 529 top: calc(100vh - 138px); 530 display: flex; 531 padding: 5px; 532 left: 86vw; 533 transform: translate(-40%, -115%); 534 justify-content: center; 535 align-items: center; 536 width: 53px; 537 height: 53px; 538 border-radius: 50% !important; 539 box-shadow: 1.1px 0.3px 2.2px rgba(0, 0, 0, 0.02), 540 2.7px 0.7px 5.3px rgba(0, 0, 0, 0.028), 5px 1.3px 10px rgba(0, 0, 0, 0.035), 541 8.9px 2.2px 17.9px rgba(0, 0, 0, 0.042), 542 16.7px 4.2px 33.4px rgba(0, 0, 0, 0.05), 40px 10px 80px rgba(0, 0, 0, 0.07); 543 } 544 545 /* ------------------- */ 546 /* Checkbox styling & icons. Credit Minimal theme: https://minimal.guide/Block+types/Checklists#Checkbox+styling */ 547 /* Support @kepano - https://www.buymeacoffee.com/kepano */ 548 /* ------------------- */ 549 550 input[data-task='!']:checked, 551 input[data-task='*']:checked, 552 input[data-task='-']:checked, 553 input[data-task='<']:checked, 554 input[data-task='>']:checked, 555 input[data-task='I']:checked, 556 input[data-task='b']:checked, 557 input[data-task='c']:checked, 558 input[data-task='d']:checked, 559 input[data-task='f']:checked, 560 input[data-task='k']:checked, 561 input[data-task='l']:checked, 562 input[data-task='p']:checked, 563 input[data-task='u']:checked, 564 input[data-task='w']:checked, 565 input[data-task='P']:checked, /* Open PR */ 566 input[data-task='M']:checked, /* Merged PR */ 567 input[data-task='D']:checked, /* Draft PR */ 568 li[data-task='!'] > input:checked, 569 li[data-task='!'] > p > input:checked, 570 li[data-task='*'] > input:checked, 571 li[data-task='*'] > p > input:checked, 572 li[data-task='-'] > input:checked, 573 li[data-task='-'] > p > input:checked, 574 li[data-task='<'] > input:checked, 575 li[data-task='<'] > p > input:checked, 576 li[data-task='>'] > input:checked, 577 li[data-task='>'] > p > input:checked, 578 li[data-task='I'] > input:checked, 579 li[data-task='I'] > p > input:checked, 580 li[data-task='b'] > input:checked, 581 li[data-task='b'] > p > input:checked, 582 li[data-task='c'] > input:checked, 583 li[data-task='c'] > p > input:checked, 584 li[data-task='d'] > input:checked, 585 li[data-task='d'] > p > input:checked, 586 li[data-task='f'] > input:checked, 587 li[data-task='f'] > p > input:checked, 588 li[data-task='k'] > input:checked, 589 li[data-task='k'] > p > input:checked, 590 li[data-task='l'] > input:checked, 591 li[data-task='l'] > p > input:checked, 592 li[data-task='p'] > input:checked, 593 li[data-task='p'] > p > input:checked, 594 li[data-task='u'] > input:checked, 595 li[data-task='u'] > p > input:checked, 596 li[data-task='w'] > input:checked, 597 li[data-task='w'] > p > input:checked, 598 li[data-task='P'] > input:checked, 599 li[data-task='P'] > p > input:checked, 600 li[data-task='M'] > input:checked, 601 li[data-task='M'] > p > input:checked, 602 li[data-task='D'] > input:checked, 603 li[data-task='D'] > p > input:checked { 604 --checkbox-marker-color: transparent; 605 border: none; 606 border-radius: 0; 607 background-image: none; 608 background-color: currentColor; 609 -webkit-mask-size: var(--checkbox-icon); 610 -webkit-mask-position: 50% 50%; 611 } 612 input[data-task='>']:checked, 613 li[data-task='>'] > input:checked, 614 li[data-task='>'] > p > input:checked { 615 color: var(--text-faint); 616 transform: rotate(90deg); 617 -webkit-mask-position: 50% 100%; 618 -webkit-mask-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='M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z' /%3E%3C/svg%3E"); 619 } 620 input[data-task='<']:checked, 621 li[data-task='<'] > input:checked, 622 li[data-task='<'] > p > input:checked { 623 color: var(--text-faint); 624 -webkit-mask-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 fill-rule='evenodd' d='M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z' clip-rule='evenodd' /%3E%3C/svg%3E"); 625 -webkit-mask-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 fill-rule='evenodd' d='M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z' clip-rule='evenodd' /%3E%3C/svg%3E"); 626 } 627 input[data-task='?']:checked, 628 li[data-task='?'] > input:checked, 629 li[data-task='?'] > p > input:checked { 630 --checkbox-marker-color: transparent; 631 background-color: var(--color-yellow); 632 border-color: var(--color-yellow); 633 background-position: 50% 50%; 634 background-size: 200% 90%; 635 background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"%3E%3Cpath fill="white" fill-rule="evenodd" d="M4.475 5.458c-.284 0-.514-.237-.47-.517C4.28 3.24 5.576 2 7.825 2c2.25 0 3.767 1.36 3.767 3.215c0 1.344-.665 2.288-1.79 2.973c-1.1.659-1.414 1.118-1.414 2.01v.03a.5.5 0 0 1-.5.5h-.77a.5.5 0 0 1-.5-.495l-.003-.2c-.043-1.221.477-2.001 1.645-2.712c1.03-.632 1.397-1.135 1.397-2.028c0-.979-.758-1.698-1.926-1.698c-1.009 0-1.71.529-1.938 1.402c-.066.254-.278.461-.54.461h-.777ZM7.496 14c.622 0 1.095-.474 1.095-1.09c0-.618-.473-1.092-1.095-1.092c-.606 0-1.087.474-1.087 1.091S6.89 14 7.496 14Z"%2F%3E%3C%2Fsvg%3E'); 636 } 637 .theme-dark input[data-task='?']:checked, 638 .theme-dark li[data-task='?'] > input:checked, 639 .theme-dark li[data-task='?'] > p > input:checked { 640 background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"%3E%3Cpath fill="black" fill-opacity="0.8" fill-rule="evenodd" d="M4.475 5.458c-.284 0-.514-.237-.47-.517C4.28 3.24 5.576 2 7.825 2c2.25 0 3.767 1.36 3.767 3.215c0 1.344-.665 2.288-1.79 2.973c-1.1.659-1.414 1.118-1.414 2.01v.03a.5.5 0 0 1-.5.5h-.77a.5.5 0 0 1-.5-.495l-.003-.2c-.043-1.221.477-2.001 1.645-2.712c1.03-.632 1.397-1.135 1.397-2.028c0-.979-.758-1.698-1.926-1.698c-1.009 0-1.71.529-1.938 1.402c-.066.254-.278.461-.54.461h-.777ZM7.496 14c.622 0 1.095-.474 1.095-1.09c0-.618-.473-1.092-1.095-1.092c-.606 0-1.087.474-1.087 1.091S6.89 14 7.496 14Z"%2F%3E%3C%2Fsvg%3E'); 641 } 642 input[data-task='/']:checked, 643 li[data-task='/'] > input:checked, 644 li[data-task='/'] > p > input:checked { 645 background-image: none; 646 background-color: transparent; 647 position: relative; 648 overflow: hidden; 649 } 650 input[data-task='/']:checked:after, 651 li[data-task='/'] > input:checked:after, 652 li[data-task='/'] > p > input:checked:after { 653 top: 0; 654 left: 0; 655 content: ' '; 656 display: block; 657 position: absolute; 658 background-color: var(--color-accent); 659 width: calc(50% - 0.5px); 660 height: 100%; 661 -webkit-mask-image: none; 662 } 663 input[data-task='!']:checked, 664 li[data-task='!'] > input:checked, 665 li[data-task='!'] > p > input:checked { 666 color: var(--color-orange); 667 -webkit-mask-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 fill-rule='evenodd' d='M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z' clip-rule='evenodd' /%3E%3C/svg%3E"); 668 } 669 input[data-task='"']:checked, 670 input[data-task='“']:checked, 671 li[data-task='"'] > input:checked, 672 li[data-task='"'] > p > input:checked, 673 li[data-task='“'] > input:checked, 674 li[data-task='“'] > p > input:checked { 675 --checkbox-marker-color: transparent; 676 background-position: 50% 50%; 677 background-color: var(--color-cyan); 678 border-color: var(--color-cyan); 679 background-size: 75%; 680 background-repeat: no-repeat; 681 background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"%3E%3Cpath fill="white" d="M6.5 10c-.223 0-.437.034-.65.065c.069-.232.14-.468.254-.68c.114-.308.292-.575.469-.844c.148-.291.409-.488.601-.737c.201-.242.475-.403.692-.604c.213-.21.492-.315.714-.463c.232-.133.434-.28.65-.35l.539-.222l.474-.197l-.485-1.938l-.597.144c-.191.048-.424.104-.689.171c-.271.05-.56.187-.882.312c-.318.142-.686.238-1.028.466c-.344.218-.741.4-1.091.692c-.339.301-.748.562-1.05.945c-.33.358-.656.734-.909 1.162c-.293.408-.492.856-.702 1.299c-.19.443-.343.896-.468 1.336c-.237.882-.343 1.72-.384 2.437c-.034.718-.014 1.315.028 1.747c.015.204.043.402.063.539l.025.168l.026-.006A4.5 4.5 0 1 0 6.5 10zm11 0c-.223 0-.437.034-.65.065c.069-.232.14-.468.254-.68c.114-.308.292-.575.469-.844c.148-.291.409-.488.601-.737c.201-.242.475-.403.692-.604c.213-.21.492-.315.714-.463c.232-.133.434-.28.65-.35l.539-.222l.474-.197l-.485-1.938l-.597.144c-.191.048-.424.104-.689.171c-.271.05-.56.187-.882.312c-.317.143-.686.238-1.028.467c-.344.218-.741.4-1.091.692c-.339.301-.748.562-1.05.944c-.33.358-.656.734-.909 1.162c-.293.408-.492.856-.702 1.299c-.19.443-.343.896-.468 1.336c-.237.882-.343 1.72-.384 2.437c-.034.718-.014 1.315.028 1.747c.015.204.043.402.063.539l.025.168l.026-.006A4.5 4.5 0 1 0 17.5 10z"%2F%3E%3C%2Fsvg%3E'); 682 } 683 .theme-dark input[data-task='"']:checked, 684 .theme-dark input[data-task='“']:checked, 685 .theme-dark li[data-task='"'] > input:checked, 686 .theme-dark li[data-task='"'] > p > input:checked, 687 .theme-dark li[data-task='“'] > input:checked, 688 .theme-dark li[data-task='“'] > p > input:checked { 689 background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"%3E%3Cpath fill="black" fill-opacity="0.7" d="M6.5 10c-.223 0-.437.034-.65.065c.069-.232.14-.468.254-.68c.114-.308.292-.575.469-.844c.148-.291.409-.488.601-.737c.201-.242.475-.403.692-.604c.213-.21.492-.315.714-.463c.232-.133.434-.28.65-.35l.539-.222l.474-.197l-.485-1.938l-.597.144c-.191.048-.424.104-.689.171c-.271.05-.56.187-.882.312c-.318.142-.686.238-1.028.466c-.344.218-.741.4-1.091.692c-.339.301-.748.562-1.05.945c-.33.358-.656.734-.909 1.162c-.293.408-.492.856-.702 1.299c-.19.443-.343.896-.468 1.336c-.237.882-.343 1.72-.384 2.437c-.034.718-.014 1.315.028 1.747c.015.204.043.402.063.539l.025.168l.026-.006A4.5 4.5 0 1 0 6.5 10zm11 0c-.223 0-.437.034-.65.065c.069-.232.14-.468.254-.68c.114-.308.292-.575.469-.844c.148-.291.409-.488.601-.737c.201-.242.475-.403.692-.604c.213-.21.492-.315.714-.463c.232-.133.434-.28.65-.35l.539-.222l.474-.197l-.485-1.938l-.597.144c-.191.048-.424.104-.689.171c-.271.05-.56.187-.882.312c-.317.143-.686.238-1.028.467c-.344.218-.741.4-1.091.692c-.339.301-.748.562-1.05.944c-.33.358-.656.734-.909 1.162c-.293.408-.492.856-.702 1.299c-.19.443-.343.896-.468 1.336c-.237.882-.343 1.72-.384 2.437c-.034.718-.014 1.315.028 1.747c.015.204.043.402.063.539l.025.168l.026-.006A4.5 4.5 0 1 0 17.5 10z"%2F%3E%3C%2Fsvg%3E'); 690 } 691 input[data-task='-']:checked, 692 li[data-task='-'] > input:checked, 693 li[data-task='-'] > p > input:checked { 694 color: var(--text-faint); 695 -webkit-mask-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 fill-rule='evenodd' d='M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z' clip-rule='evenodd' /%3E%3C/svg%3E"); 696 } 697 body:not(.tasks) 698 .markdown-preview-view 699 ul 700 li[data-task='-'].task-list-item.is-checked, 701 body:not(.tasks) 702 .markdown-source-view.mod-cm6 703 .HyperMD-task-line[data-task]:is([data-task='-']), 704 body:not(.tasks) li[data-task='-'].task-list-item.is-checked { 705 color: var(--text-faint); 706 text-decoration: line-through solid var(--text-faint) 1px; 707 } 708 input[data-task='*']:checked, 709 li[data-task='*'] > input:checked, 710 li[data-task='*'] > p > input:checked { 711 color: var(--color-yellow); 712 -webkit-mask-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='M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z' /%3E%3C/svg%3E"); 713 } 714 input[data-task='l']:checked, 715 li[data-task='l'] > input:checked, 716 li[data-task='l'] > p > input:checked { 717 color: var(--color-red); 718 -webkit-mask-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 fill-rule='evenodd' d='M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z' clip-rule='evenodd' /%3E%3C/svg%3E"); 719 } 720 input[data-task='i']:checked, 721 li[data-task='i'] > input:checked, 722 li[data-task='i'] > p > input:checked { 723 --checkbox-marker-color: transparent; 724 background-color: var(--color-blue); 725 border-color: var(--color-blue); 726 background-position: 50%; 727 background-size: 100%; 728 background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 512 512"%3E%3Cpath fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="40" d="M196 220h64v172"%2F%3E%3Cpath fill="none" stroke="white" stroke-linecap="round" stroke-miterlimit="10" stroke-width="40" d="M187 396h138"%2F%3E%3Cpath fill="white" d="M256 160a32 32 0 1 1 32-32a32 32 0 0 1-32 32Z"%2F%3E%3C%2Fsvg%3E'); 729 } 730 .theme-dark input[data-task='i']:checked, 731 .theme-dark li[data-task='i'] > input:checked, 732 .theme-dark li[data-task='i'] > p > input:checked { 733 background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 512 512"%3E%3Cpath fill="none" stroke="black" stroke-opacity="0.8" stroke-linecap="round" stroke-linejoin="round" stroke-width="40" d="M196 220h64v172"%2F%3E%3Cpath fill="none" stroke="black" stroke-opacity="0.8" stroke-linecap="round" stroke-miterlimit="10" stroke-width="40" d="M187 396h138"%2F%3E%3Cpath fill="black" fill-opacity="0.8" d="M256 160a32 32 0 1 1 32-32a32 32 0 0 1-32 32Z"%2F%3E%3C%2Fsvg%3E'); 734 } 735 input[data-task='S']:checked, 736 li[data-task='S'] > input:checked, 737 li[data-task='S'] > p > input:checked { 738 --checkbox-marker-color: transparent; 739 border-color: var(--color-green); 740 background-color: var(--color-green); 741 background-size: 100%; 742 background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 48 48"%3E%3Cpath fill="white" fill-rule="evenodd" d="M26 8a2 2 0 1 0-4 0v2a8 8 0 1 0 0 16v8a4.002 4.002 0 0 1-3.773-2.666a2 2 0 0 0-3.771 1.332A8.003 8.003 0 0 0 22 38v2a2 2 0 1 0 4 0v-2a8 8 0 1 0 0-16v-8a4.002 4.002 0 0 1 3.773 2.666a2 2 0 0 0 3.771-1.332A8.003 8.003 0 0 0 26 10V8Zm-4 6a4 4 0 0 0 0 8v-8Zm4 12v8a4 4 0 0 0 0-8Z" clip-rule="evenodd"%2F%3E%3C%2Fsvg%3E'); 743 } 744 .theme-dark input[data-task='S']:checked, 745 .theme-dark li[data-task='S'] > input:checked, 746 .theme-dark li[data-task='S'] > p > input:checked { 747 background-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="20" height="20" preserveAspectRatio="xMidYMid meet" viewBox="0 0 48 48"%3E%3Cpath fill-opacity="0.8" fill="black" fill-rule="evenodd" d="M26 8a2 2 0 1 0-4 0v2a8 8 0 1 0 0 16v8a4.002 4.002 0 0 1-3.773-2.666a2 2 0 0 0-3.771 1.332A8.003 8.003 0 0 0 22 38v2a2 2 0 1 0 4 0v-2a8 8 0 1 0 0-16v-8a4.002 4.002 0 0 1 3.773 2.666a2 2 0 0 0 3.771-1.332A8.003 8.003 0 0 0 26 10V8Zm-4 6a4 4 0 0 0 0 8v-8Zm4 12v8a4 4 0 0 0 0-8Z" clip-rule="evenodd"%2F%3E%3C%2Fsvg%3E'); 748 } 749 input[data-task='I']:checked, 750 li[data-task='I'] > input:checked, 751 li[data-task='I'] > p > input:checked { 752 color: var(--color-yellow); 753 -webkit-mask-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='M11 3a1 1 0 10-2 0v1a1 1 0 102 0V3zM15.657 5.757a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414l.707-.707zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM5.05 6.464A1 1 0 106.464 5.05l-.707-.707a1 1 0 00-1.414 1.414l.707.707zM5 10a1 1 0 01-1 1H3a1 1 0 110-2h1a1 1 0 011 1zM8 16v-1h4v1a2 2 0 11-4 0zM12 14c.015-.34.208-.646.477-.859a4 4 0 10-4.954 0c.27.213.462.519.476.859h4.002z' /%3E%3C/svg%3E"); 754 } 755 input[data-task='f']:checked, 756 li[data-task='f'] > input:checked, 757 li[data-task='f'] > p > input:checked { 758 color: var(--color-red); 759 -webkit-mask-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 fill-rule='evenodd' d='M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z' clip-rule='evenodd' /%3E%3C/svg%3E"); 760 } 761 input[data-task='k']:checked, 762 li[data-task='k'] > input:checked, 763 li[data-task='k'] > p > input:checked { 764 color: var(--color-yellow); 765 -webkit-mask-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 fill-rule='evenodd' d='M18 8a6 6 0 01-7.743 5.743L10 14l-1 1-1 1H6v2H2v-4l4.257-4.257A6 6 0 1118 8zm-6-4a1 1 0 100 2 2 2 0 012 2 1 1 0 102 0 4 4 0 00-4-4z' clip-rule='evenodd' /%3E%3C/svg%3E"); 766 } 767 input[data-task='u']:checked, 768 li[data-task='u'] > input:checked, 769 li[data-task='u'] > p > input:checked { 770 color: var(--color-green); 771 -webkit-mask-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 fill-rule='evenodd' d='M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z' clip-rule='evenodd' /%3E%3C/svg%3E"); 772 } 773 input[data-task='d']:checked, 774 li[data-task='d'] > input:checked, 775 li[data-task='d'] > p > input:checked { 776 color: var(--color-red); 777 -webkit-mask-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 fill-rule='evenodd' d='M12 13a1 1 0 100 2h5a1 1 0 001-1V9a1 1 0 10-2 0v2.586l-4.293-4.293a1 1 0 00-1.414 0L8 9.586 3.707 5.293a1 1 0 00-1.414 1.414l5 5a1 1 0 001.414 0L11 9.414 14.586 13H12z' clip-rule='evenodd' /%3E%3C/svg%3E"); 778 } 779 input[data-task='w']:checked, 780 li[data-task='w'] > input:checked, 781 li[data-task='w'] > p > input:checked { 782 color: var(--color-purple); 783 -webkit-mask-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 fill-rule='evenodd' d='M6 3a1 1 0 011-1h.01a1 1 0 010 2H7a1 1 0 01-1-1zm2 3a1 1 0 00-2 0v1a2 2 0 00-2 2v1a2 2 0 00-2 2v.683a3.7 3.7 0 011.055.485 1.704 1.704 0 001.89 0 3.704 3.704 0 014.11 0 1.704 1.704 0 001.89 0 3.704 3.704 0 014.11 0 1.704 1.704 0 001.89 0A3.7 3.7 0 0118 12.683V12a2 2 0 00-2-2V9a2 2 0 00-2-2V6a1 1 0 10-2 0v1h-1V6a1 1 0 10-2 0v1H8V6zm10 8.868a3.704 3.704 0 01-4.055-.036 1.704 1.704 0 00-1.89 0 3.704 3.704 0 01-4.11 0 1.704 1.704 0 00-1.89 0A3.704 3.704 0 012 14.868V17a1 1 0 001 1h14a1 1 0 001-1v-2.132zM9 3a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1zm3 0a1 1 0 011-1h.01a1 1 0 110 2H13a1 1 0 01-1-1z' clip-rule='evenodd' /%3E%3C/svg%3E"); 784 } 785 input[data-task='p']:checked, 786 li[data-task='p'] > input:checked, 787 li[data-task='p'] > p > input:checked { 788 color: var(--color-green); 789 -webkit-mask-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"); 790 } 791 input[data-task='c']:checked, 792 li[data-task='c'] > input:checked, 793 li[data-task='c'] > p > input:checked { 794 color: var(--color-orange); 795 -webkit-mask-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='M18 9.5a1.5 1.5 0 11-3 0v-6a1.5 1.5 0 013 0v6zM14 9.667v-5.43a2 2 0 00-1.105-1.79l-.05-.025A4 4 0 0011.055 2H5.64a2 2 0 00-1.962 1.608l-1.2 6A2 2 0 004.44 12H8v4a2 2 0 002 2 1 1 0 001-1v-.667a4 4 0 01.8-2.4l1.4-1.866a4 4 0 00.8-2.4z' /%3E%3C/svg%3E"); 796 } 797 input[data-task='b']:checked, 798 li[data-task='b'] > input:checked, 799 li[data-task='b'] > p > input:checked { 800 color: var(--color-orange); 801 -webkit-mask-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"); 802 } 803 input[data-task='P']:checked, 804 li[data-task='P'] > input:checked, 805 li[data-task='P'] > p > input:checked { 806 color: var(--color-green); 807 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3E%3Cpath d='M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z'%3E%3C/path%3E%3C/svg%3E"); 808 } 809 input[data-task='M']:checked, 810 li[data-task='M'] > input:checked, 811 li[data-task='M'] > p > input:checked { 812 color: var(--color-purple); 813 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3E%3Cpath d='M5.45 5.154A4.25 4.25 0 0 0 9.25 7.5h1.378a2.251 2.251 0 1 1 0 1.5H9.25A5.734 5.734 0 0 1 5 7.123v3.505a2.25 2.25 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.95-.218ZM4.25 13.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm8.5-4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM5 3.25a.75.75 0 1 0 0 .005V3.25Z'%3E%3C/path%3E%3C/svg%3E"); 814 } 815 input[data-task='D']:checked, 816 li[data-task='D'] > input:checked, 817 li[data-task='D'] > p > input:checked { 818 color: var(--color-base-50); 819 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3E%3Cpath d='M3.25 1A2.25 2.25 0 0 1 4 5.372v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.251 2.251 0 0 1 3.25 1Zm9.5 14a2.25 2.25 0 1 1 0-4.5 2.25 2.25 0 0 1 0 4.5ZM2.5 3.25a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0ZM3.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm9.5 0a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5ZM14 7.5a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Zm0-4.25a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Z'%3E%3C/path%3E%3C/svg%3E"); 820 } 821 822 body:not(.tasks) li[data-task='>'].task-list-item.is-checked, 823 body:not(.tasks) li[data-task='<'].task-list-item.is-checked, 824 body:not(.tasks) li[data-task='b'].task-list-item.is-checked, 825 body:not(.tasks) li[data-task='i'].task-list-item.is-checked, 826 body:not(.tasks) li[data-task='*'].task-list-item.is-checked, 827 body:not(.tasks) li[data-task='!'].task-list-item.is-checked, 828 body:not(.tasks) li[data-task='S'].task-list-item.is-checked, 829 body:not(.tasks) li[data-task='?'].task-list-item.is-checked, 830 body:not(.tasks) li[data-task='/'].task-list-item.is-checked, 831 body:not(.tasks) li[data-task='"'].task-list-item.is-checked, 832 body:not(.tasks) li[data-task='l'].task-list-item.is-checked, 833 body:not(.tasks) li[data-task='I'].task-list-item.is-checked, 834 body:not(.tasks) li[data-task='p'].task-list-item.is-checked, 835 body:not(.tasks) li[data-task='c'].task-list-item.is-checked, 836 body:not(.tasks) li[data-task='f'].task-list-item.is-checked, 837 body:not(.tasks) li[data-task='k'].task-list-item.is-checked, 838 body:not(.tasks) li[data-task='w'].task-list-item.is-checked, 839 body:not(.tasks) li[data-task='u'].task-list-item.is-checked, 840 body:not(.tasks) li[data-task='d'].task-list-item.is-checked, 841 body:not(.tasks) li[data-task='P'].task-list-item.is-checked, 842 body:not(.tasks) li[data-task='D'].task-list-item.is-checked { 843 color: var(--text-normal); 844 } 845 846 /* ─────────────────────────────────────────────────── */ 847 /* Plugins */ 848 /* ─────────────────────────────────────────────────── */ 849 850 /* --------------- */ 851 /* Todoist */ 852 /* --------------- */ 853 854 .todoist-p1 > input[type='checkbox'] { 855 border: 1px solid #ff757f !important; 856 background-color: rgba(255, 117, 127, 0.25) !important; 857 } 858 .todoist-p1 > input[type='checkbox']:hover { 859 background-color: rgba(255, 117, 127, 0.5) !important; 860 } 861 .todoist-p2 > input[type='checkbox'] { 862 border: 1px solid #ffc777 !important; 863 background-color: rgba(255, 199, 119, 0.25) !important; 864 } 865 .todoist-p2 > input[type='checkbox']:hover { 866 background-color: rgba(255, 199, 119, 0.5) !important; 867 } 868 .todoist-p3 > input[type='checkbox'] { 869 border: 1px solid #65bcff !important; 870 background-color: rgba(101, 188, 255, 0.25) !important; 871 } 872 .todoist-p3 > input[type='checkbox']:hover { 873 background-color: rgba(101, 188, 255, 0.5) !important; 874 } 875 .todoist-p4 > input[type='checkbox'] { 876 border: 1px solid #b4c2f0 !important; 877 background-color: rgba(180, 194, 240, 0.25) !important; 878 } 879 .todoist-p4 > input[type='checkbox']:hover { 880 background-color: rgba(180, 194, 240, 0.5) !important; 881 } 882 .task-metadata { 883 font-size: var(--font-todoist-metadata-size); 884 color: #7a88cf; 885 margin-left: unset; 886 } 887 .task-metadata > * { 888 margin-right: 30px; 889 } 890 .task-date.task-overdue { 891 color: rgba(255, 152, 164, 0.75) !important; 892 } 893 .task-calendar-icon, 894 .task-project-icon, 895 .task-labels-icon { 896 vertical-align: middle; 897 height: 17px; 898 width: 17px; 899 } 900 .todoist-project .todoist-project { 901 margin-left: 20px; 902 } 903 .todoist-section { 904 margin-left: 20px; 905 } 906 .todoist-project .todoist-project-title { 907 font-weight: 700; 908 margin-block-end: 0px; 909 } 910 .todoist-section .todoist-section-title { 911 font-size: var(--font-todoist-title-size); 912 color: #7a88cf; 913 font-weight: 700; 914 margin-block-end: 0px; 915 } 916 .todoist-error { 917 border: 1px solid #ff98a4; 918 background-color: rgba(255, 152, 164, 0.05); 919 padding: 1em 1em; 920 margin: 1em 0px; 921 } 922 .todoist-error p { 923 margin: 0 0 1em 0; 924 font-weight: 600; 925 } 926 .todoist-error code { 927 background-color: unset !important; 928 padding: unset !important; 929 margin: unset !important; 930 } 931 .todoist-success { 932 border: 1px solid #c3e88d !important; 933 background-color: rgba(195, 232, 141, 0.05); 934 padding: 1em 1em !important; 935 margin: 1em 0px; 936 } 937 .todoist-success p { 938 margin: 0; 939 font-weight: 600; 940 } 941 /* .priority-container .priority-1 { 942 color: #ff98a4; 943 } 944 .priority-container .priority-2 { 945 color: #ffc777; 946 } 947 .priority-container .priority-3 { 948 color: #65bcff; 949 } 950 .priority-container .priority-4 { 951 color: #b4c2f0; 952 } */ 953 954 /* --------------- */ 955 /* Checklist */ 956 /* --------------- */ 957 958 .checklist-plugin-main .title { 959 font-size: var(--nav-item-size); 960 } 961 962 .checklist-plugin-main .container input.search { 963 font-size: var(--font-ui-small); 964 } 965 966 .checklist-plugin-main .group-header button.collapse, 967 .checklist-plugin-main button.toggle { 968 box-shadow: none; 969 cursor: pointer; 970 } 971 972 .checklist-plugin-main .classic .content > p { 973 font-size: var(--font-ui-smaller); 974 } 975 976 .checklist-plugin-main .toggle .checkbox { 977 border-radius: var(--checkbox-radius) !important; 978 } 979 980 /* --------------- */ 981 /* Kanban */ 982 /* --------------- */ 983 984 body:not(.no-kanban-styles) .kanban-plugin { 985 --dot-color: hsl(0 0% 40% / 10%); 986 --dot-spacing: 9px; 987 --dot-size: 1px; 988 } 989 body:not(.no-kanban-styles) .kanban-plugin__board { 990 background-image: radial-gradient( 991 circle, 992 var(--dot-color) var(--dot-size), 993 transparent var(--dot-size) 994 ); 995 border-top: var(--thin-border); 996 background-size: var(--dot-spacing) var(--dot-spacing); 997 background-attachment: local; 998 } 999 1000 body:not(.no-kanban-styles) .kanban-plugin__board > div { 1001 margin: 0 auto; 1002 } 1003 body:not(.no-kanban-styles) .kanban-plugin__item-form { 1004 border-top: none; 1005 } 1006 body:not(.no-kanban-styles) .kanban-plugin__lane-header-wrapper { 1007 border-bottom: 0; 1008 } 1009 body:not(.no-kanban-styles) .kanban-plugin button { 1010 box-shadow: none; 1011 } 1012 body:not(.no-kanban-styles) .kanban-plugin__item-button-wrapper > button:hover { 1013 color: var(--text-normal); 1014 background: var(--background-modifier-hover); 1015 } 1016 body:not(.no-kanban-styles) .kanban-plugin__item-button-wrapper { 1017 border-top: none; 1018 } 1019 body:not(.no-kanban-styles) .kanban-plugin__lane { 1020 border: 1px solid transparent; 1021 } 1022 body:not(.no-kanban-styles) .kanban-plugin__item-content-wrapper { 1023 box-shadow: none; 1024 } 1025 1026 body:not(.no-kanban-styles):not(.is-mobile) 1027 .kanban-plugin__grow-wrap 1028 > textarea:focus { 1029 box-shadow: none; 1030 } 1031 body:not(.no-kanban-styles) .kanban-plugin__item-input-actions button, 1032 body:not(.no-kanban-styles) .kanban-plugin__lane-input-actions button { 1033 font-size: var(--font-adaptive-small); 1034 } 1035 body:not(.no-kanban-styles) 1036 .kanban-plugin__lane-header-wrapper 1037 .kanban-plugin__grow-wrap 1038 > textarea, 1039 body:not(.no-kanban-styles) 1040 .kanban-plugin__lane-input-wrapper 1041 .kanban-plugin__grow-wrap 1042 > textarea { 1043 background: transparent; 1044 } 1045 1046 /* ─────────────────────────────────────────────────── */ 1047 /* Styles Settings */ 1048 /* ─────────────────────────────────────────────────── */ 1049 1050 /* @settings 1051 name: Things Theme 1052 id: things-style 1053 settings: 1054 - 1055 id: features 1056 title: Features 1057 type: heading 1058 level: 2 1059 collapsed: true 1060 - 1061 title: Black mobile background 1062 description: Change mobile editor background to default theme black 1063 id: mobile-black-background 1064 type: class-toggle 1065 default: false 1066 - 1067 title: Disable mobile floating-action button 1068 description: Revert placement of edit/preview button to default in header (mobile) 1069 id: floating-button-off 1070 type: class-toggle 1071 default: false 1072 - 1073 title: Highlight active line 1074 description: Change background color of current working line 1075 id: active-line 1076 type: class-toggle 1077 default: false 1078 - 1079 title: Disable Kanban board styles 1080 description: Remove minimalist styling to the Kanban plugin 1081 id: no-kanban-styles 1082 type: class-toggle 1083 default: false 1084 - 1085 id: link-decoration 1086 title: Underline internal links 1087 description: Show underlines on internal links 1088 type: variable-select 1089 default: Underline 1090 options: 1091 - Underline 1092 - None 1093 - 1094 id: link-external-decoration 1095 title: Underline external links 1096 description: Show underlines on external links 1097 type: variable-select 1098 default: Underline 1099 options: 1100 - Underline 1101 - None 1102 - 1103 id: custom-fonts 1104 title: Typography 1105 type: heading 1106 level: 2 1107 collapsed: true 1108 - 1109 id: default-font-color 1110 title: Default font colors 1111 description: Use the default font color styling for bold, italics, and quotes 1112 type: class-toggle 1113 default: false 1114 - 1115 id: text-highlight-bg-l 1116 title: Highlight color (light) 1117 type: variable-color 1118 format: rgb 1119 default: 'rgba(255, 208, 0, 0.4)' 1120 - 1121 id: text-highlight-bg-d 1122 title: Highlight color (dark) 1123 type: variable-color 1124 format: rgb 1125 default: 'rgba(255, 208, 0, 0.4)' 1126 - 1127 id: strong-color 1128 title: Bold font color 1129 type: variable-color 1130 format: hex 1131 default: '#FF82B2' 1132 - 1133 id: em-color 1134 title: Italics font color 1135 type: variable-color 1136 format: hex 1137 default: '#FF82B2' 1138 - 1139 id: quote-color 1140 title: Blockquotes font color 1141 type: variable-color 1142 format: hex 1143 default: '#3EB4BF' 1144 - 1145 id: code-normal 1146 title: Inline code blocks font color (Light mode) 1147 type: variable-color 1148 format: hex 1149 default: '#BEC6CF' 1150 - 1151 id: code-color-d 1152 title: Inline code blocks font color (Dark mode) 1153 type: variable-color 1154 format: hex 1155 default: '#555E68' 1156 - 1157 id: tag-background-color-l 1158 title: Tag background color (Light mode) 1159 type: variable-color 1160 format: hex 1161 default: '#BDE1D3' 1162 - 1163 id: tag-font-color-l 1164 title: Tag font color (Light mode) 1165 type: variable-color 1166 format: hex 1167 default: '#1D694B' 1168 - 1169 id: tag-background-color-d 1170 title: Tag background color (Dark mode) 1171 type: variable-color 1172 format: hex 1173 default: '#1D694B' 1174 - 1175 id: tag-font-color-d 1176 title: Tag font color (Dark mode) 1177 type: variable-color 1178 format: hex 1179 default: '#FFFFFF' 1180 - 1181 id: headings 1182 title: Headings 1183 type: heading 1184 level: 2 1185 collapsed: true 1186 - 1187 id: level-1-headings 1188 title: Level 1 Headings 1189 type: heading 1190 level: 3 1191 collapsed: true 1192 - 1193 id: h1-size 1194 title: H1 font size 1195 description: Accepts any CSS font-size value 1196 type: variable-text 1197 default: 1.7em 1198 - 1199 id: h1-weight 1200 title: H1 font weight 1201 description: Accepts numbers representing the CSS font-weight 1202 type: variable-number 1203 default: 700 1204 - 1205 id: h1-color 1206 title: H1 color 1207 type: variable-color 1208 format: hex 1209 default: '#' 1210 - 1211 id: level-2-headings 1212 title: Level 2 Headings 1213 type: heading 1214 level: 3 1215 collapsed: true 1216 - 1217 id: h2-size 1218 title: H2 font size 1219 description: Accepts any CSS font-size value 1220 type: variable-text 1221 default: 1.5em 1222 - 1223 id: h2-weight 1224 title: H2 font weight 1225 description: Accepts numbers representing the CSS font-weight 1226 type: variable-number 1227 default: 700 1228 - 1229 id: h2-color 1230 title: H2 color 1231 type: variable-color 1232 format: hex 1233 default: '#2E80F2' 1234 - 1235 id: h2-underline 1236 title: H2 underline 1237 description: Toggle H2 underline (border-bottom) 1238 type: class-toggle 1239 default: true 1240 - 1241 id: level-3-headings 1242 title: Level 3 Headings 1243 type: heading 1244 level: 3 1245 collapsed: true 1246 - 1247 id: h3-size 1248 title: H3 font size 1249 description: Accepts any CSS font-size value 1250 type: variable-text 1251 default: 1.2em 1252 - 1253 id: h3-weight 1254 title: H3 font weight 1255 description: Accepts numbers representing the CSS font-weight 1256 type: variable-number 1257 default: 600 1258 - 1259 id: h3-color 1260 title: H3 color 1261 type: variable-color 1262 format: hex 1263 default: '#2E80F2' 1264 - 1265 id: level-4-headings 1266 title: Level 4 Headings 1267 type: heading 1268 level: 3 1269 collapsed: true 1270 - 1271 id: h4-size 1272 title: H4 font size 1273 description: Accepts any CSS font-size value 1274 type: variable-text 1275 default: 1.1em 1276 - 1277 id: h4-weight 1278 title: H4 font weight 1279 description: Accepts numbers representing the CSS font-weight 1280 type: variable-number 1281 default: 500 1282 - 1283 id: h4-color 1284 title: H4 color 1285 type: variable-color 1286 format: hex 1287 default: '#E5B567' 1288 - 1289 id: h4-transform 1290 title: H4 transform 1291 description: Transform the H4 heading text 1292 type: variable-select 1293 default: uppercase 1294 options: 1295 - 1296 label: Uppercase 1297 value: uppercase 1298 - 1299 label: None 1300 value: none 1301 - 1302 id: level-5-headings 1303 title: Level 5 Headings 1304 type: heading 1305 level: 3 1306 collapsed: true 1307 - 1308 id: h5-size 1309 title: H5 font size 1310 description: Accepts any CSS font-size value 1311 type: variable-text 1312 default: 1em 1313 - 1314 id: h5-weight 1315 title: H5 font weight 1316 description: Accepts numbers representing the CSS font-weight 1317 type: variable-number 1318 default: 500 1319 - 1320 id: h5-color 1321 title: H5 color 1322 type: variable-color 1323 format: hex 1324 default: '#E83E3E' 1325 - 1326 id: level-6-headings 1327 title: Level 6 Headings 1328 type: heading 1329 level: 3 1330 collapsed: true 1331 - 1332 id: h6-size 1333 title: H6 font size 1334 description: Accepts any CSS font-size value 1335 type: variable-text 1336 default: 0.9em 1337 - 1338 id: h6-weight 1339 title: H6 font weight 1340 description: Accepts numbers representing the CSS font-weight 1341 type: variable-number 1342 default: 400 1343 - 1344 id: h6-color 1345 title: H6 color 1346 type: variable-color 1347 format: hex 1348 default: '#' 1349 - 1350 id: credits 1351 title: Credits 1352 type: heading 1353 description: Created with ❤︎ by @colineckert. Support @colineckert at buymeacoffee.com/colineckert 1354 level: 2 1355 collapsed: true 1356 1357 */ 1358 1359 /* ─────────────────────────────────────────────────── */ 1360 /* Plugin Compatibility info for the Obsidian Hub */ 1361 /* ─────────────────────────────────────────────────── */ 1362 1363 /* @plugins 1364 core: 1365 - backlink 1366 - command-palette 1367 - file-explorer 1368 - global-search 1369 - graph 1370 - outgoing-link 1371 - outline 1372 - page-preview 1373 - starred 1374 - switcher 1375 - tag-pane 1376 - file-recovery 1377 - daily-notes 1378 - random-note 1379 - publish 1380 - sync 1381 - word-count 1382 community: 1383 - sliding-panes-obsidian 1384 - obsidian-codemirror-options 1385 - obsidian-kanban 1386 - dataview 1387 - obsidian-hider 1388 - calendar 1389 - mysnippets-plugin 1390 - cmenu-plugin 1391 - obsidian-outliner 1392 - readwise-official 1393 - tag-wrangler 1394 - todoist-sync-plugin 1395 - templater-obsidian 1396 - obsidian-system-dark-mode 1397 - obsidian-style-settings 1398 */