├── LICENSE ├── README.md ├── imgs ├── promo.png ├── screenshots │ ├── command-palette.png │ ├── kanban-plugin.png │ ├── note-2.png │ └── note.png └── thumbnail.png ├── manifest.json └── theme.css /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2023 Vladimir Kidyaev 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all 11 | copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 19 | SOFTWARE. 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Obsidian GitHub Theme 2 | 3 | ![Promo](/imgs/promo.png) 4 | ![](https://img.shields.io/badge/downloads-54200%2B-7ee787?style=for-the-badge&labelColor=21262d) 5 | [![](https://img.shields.io/badge/Obsidian%20October%202022-Runner%20Up-7b6cd9?style=for-the-badge&logo=obsidian&labelColor=21262d)](https://obsidian.md/blog/2022-obsidian-october-winners/#New%20theme) 6 | 7 | ## Preview 8 | 9 |
10 | Screenshots 11 |

12 | 13 | ![Screenshot-1](/imgs/screenshots/note.png) 14 | 15 | ![Screenshot-2](/imgs/screenshots/note-2.png) 16 | 17 | ![Screenshot-3](/imgs/screenshots/command-palette.png) 18 | 19 | ![Kanban](/imgs/screenshots/kanban-plugin.png) 20 | 21 |

22 |
23 | 24 | ## Features 25 | 26 | - [Kanban](https://github.com/mgmeyers/obsidian-kanban) board has been styled to look like a GitHub Projects 27 | - Callouts in GitHub style 28 | - Inline code blocks in GitHub style 29 | - Obsidian UI buttons in GitHub style 30 | 31 | ## Theme Settigns 32 | 33 | Theme settings can be find in the [Style Settings](https://github.com/mgmeyers/obsidian-style-settings) plugin. 34 | 35 | Current settings include: 36 | 37 | - Header colors 38 | - On/Off kanban styles 39 | - On/Off callout styles 40 | - Colorblind colorscheme variants 41 | 42 | ## How to Install 43 | 44 | Available on the Obsidian theme store. 45 | 46 |
47 | Manually 48 |

49 | 50 | 1. Download `theme.css` and `manifest.json` files from latest [release](https://github.com/krios2146/obsidian-github/releases/) 51 | 2. Go to **/your_vault/.obsidian/themes/** and create folder for theme files 52 | 3. Paste downloaded theme files into created folder 53 | 4. In Obsidian go to Settings -> Appearance -> select GitHub theme in dropdown menu 54 | 55 |

56 |
57 | 58 | ## Contributing 59 | 60 | Feel free to open [issue](https://github.com/krios2146/obsidian-github/issues) or [pull request](https://github.com/krios2146/obsidian-github/pulls) on GitHub. I will be glad to work on it. 61 | -------------------------------------------------------------------------------- /imgs/promo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/krios2146/obsidian-theme-github/07533eec45010ee0b3dc3da86a8846dc6d55c513/imgs/promo.png -------------------------------------------------------------------------------- /imgs/screenshots/command-palette.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/krios2146/obsidian-theme-github/07533eec45010ee0b3dc3da86a8846dc6d55c513/imgs/screenshots/command-palette.png -------------------------------------------------------------------------------- /imgs/screenshots/kanban-plugin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/krios2146/obsidian-theme-github/07533eec45010ee0b3dc3da86a8846dc6d55c513/imgs/screenshots/kanban-plugin.png -------------------------------------------------------------------------------- /imgs/screenshots/note-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/krios2146/obsidian-theme-github/07533eec45010ee0b3dc3da86a8846dc6d55c513/imgs/screenshots/note-2.png -------------------------------------------------------------------------------- /imgs/screenshots/note.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/krios2146/obsidian-theme-github/07533eec45010ee0b3dc3da86a8846dc6d55c513/imgs/screenshots/note.png -------------------------------------------------------------------------------- /imgs/thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/krios2146/obsidian-theme-github/07533eec45010ee0b3dc3da86a8846dc6d55c513/imgs/thumbnail.png -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "GitHub Theme", 3 | "version": "1.1.6", 4 | "minAppVersion": "1.0.0", 5 | "author": "@krios2146", 6 | "authorUrl": "https://github.com/krios2146" 7 | } 8 | -------------------------------------------------------------------------------- /theme.css: -------------------------------------------------------------------------------- 1 | /* @settings 2 | 3 | name: GitHub theme settings 4 | id: id 5 | settings: 6 | - 7 | # Colorblind 8 | 9 | id: colorblind 10 | title: Colorblind variants 11 | type: heading 12 | level: 1 13 | collapsed: true 14 | - 15 | id: colorblind_protan-deutan 16 | title: Protanopia & Deuteranopia 17 | type: class-toggle 18 | - 19 | id: colorblind_tritan 20 | title: Tritanopia 21 | type: class-toggle 22 | 23 | - 24 | # Callout Settings 25 | 26 | id: callout 27 | title: Callouts 28 | type: heading 29 | level: 1 30 | collapsed: true 31 | - 32 | id: callout-on 33 | title: GitHub callout style 34 | type: class-toggle 35 | default: true 36 | 37 | - 38 | # Headers underline 39 | 40 | id: headers-underline 41 | title: Headers underline 42 | type: heading 43 | level: 1 44 | collapsed: true 45 | - 46 | id: h1-underline 47 | title: H1 header underline enabled 48 | type: class-toggle 49 | - 50 | id: h2-underline 51 | title: H2 header underline enabled 52 | type: class-toggle 53 | 54 | - 55 | # Headers Settings 56 | 57 | id: headers 58 | title: Headers colors 59 | type: heading 60 | level: 1 61 | collapsed: true 62 | - 63 | # All Headers 64 | 65 | id: all-headers 66 | title: All headers 67 | type: heading 68 | level: 3 69 | collapsed: true 70 | - 71 | id: headers-one-color 72 | title: All headers are the same color 73 | type: class-toggle 74 | default: true 75 | - 76 | id: h-color-theme 77 | title: Header color 78 | type: variable-themed-color 79 | opacity: false 80 | format: hex 81 | default-light: '#24292f' 82 | default-dark: '#7ee787' 83 | 84 | - 85 | # Particular Headers 86 | 87 | id: particular headers 88 | title: Particular headers 89 | description: This settings won't work if `All headers are the same color` is ON 90 | type: heading 91 | level: 3 92 | collapsed: true 93 | - 94 | id: h1-color-theme 95 | title: h1 color 96 | type: variable-themed-color 97 | opacity: false 98 | format: hex 99 | default-light: '#24292f' 100 | default-dark: '#7ee787' 101 | - 102 | id: h2-color-theme 103 | title: h2 color 104 | type: variable-themed-color 105 | opacity: false 106 | format: hex 107 | default-light: '#24292f' 108 | default-dark: '#7ee787' 109 | - 110 | id: h3-color-theme 111 | title: h3 color 112 | type: variable-themed-color 113 | opacity: false 114 | format: hex 115 | default-light: '#24292f' 116 | default-dark: '#7ee787' 117 | - 118 | id: h4-color-theme 119 | title: h4 color 120 | type: variable-themed-color 121 | opacity: false 122 | format: hex 123 | default-light: '#24292f' 124 | default-dark: '#7ee787' 125 | - 126 | id: h5-color-theme 127 | title: h5 color 128 | type: variable-themed-color 129 | opacity: false 130 | format: hex 131 | default-light: '#24292f' 132 | default-dark: '#7ee787' 133 | - 134 | id: h6-color-theme 135 | title: h6 color 136 | type: variable-themed-color 137 | opacity: false 138 | format: hex 139 | default-light: '#24292f' 140 | default-dark: '#7ee787' 141 | 142 | - 143 | # Kanban Settings 144 | 145 | id: kanban 146 | title: Kanban 147 | type: heading 148 | level: 1 149 | collapsed: true 150 | - 151 | id: kanban-variant 152 | title: Kanban variant 153 | description: Variations of Kanban styles 154 | type: class-select 155 | allowEmpty: false 156 | default: kanban-full 157 | options: 158 | - 159 | label: GitHub projects style 160 | value: kanban-full 161 | - 162 | label: Minimal style 163 | value: kanban-on 164 | - 165 | label: Disable styles 166 | value: kanban-off 167 | - 168 | id: kanban-same-height-cards 169 | title: Minimal height for cards 170 | description: All cards will have the same initial height 171 | type: class-toggle 172 | default: true 173 | - 174 | id: kanban-full-height-column 175 | title: Full height lists 176 | description: 177 | type: class-toggle 178 | default: true 179 | */ 180 | body { 181 | /* Animations */ 182 | --anim-duration-none: 0; 183 | --anim-duration-superfast: 70ms; 184 | --anim-duration-fast: 140ms; 185 | --anim-duration-moderate: 300ms; 186 | --anim-duration-slow: 560ms; 187 | --anim-motion-smooth: cubic-bezier(0.45, 0.05, 0.55, 0.95); 188 | --anim-motion-delay: cubic-bezier(0.65, 0.05, 0.36, 1); 189 | --anim-motion-jumpy: cubic-bezier(0.68, -0.55, 0.27, 1.55); 190 | --anim-motion-swing: cubic-bezier(0, 0.55, 0.45, 1); 191 | /* Blockquotes */ 192 | --blockquote-border-thickness: 2px; 193 | --blockquote-border-color: var(--interactive-accent); 194 | --blockquote-font-style: normal; 195 | --blockquote-color: inherit; 196 | --blockquote-background-color: transparent; 197 | /* Bold */ 198 | --bold-weight: var(--font-semibold); 199 | --bold-color: inherit; 200 | /* Borders */ 201 | --border-width: 1px; 202 | /* Buttons */ 203 | --button-radius: var(--input-radius); 204 | /* Callouts */ 205 | --callout-border-width: 0px; 206 | --callout-border-opacity: 0.25; 207 | --callout-padding: var(--size-4-3) var(--size-4-3) var(--size-4-3) var(--size-4-6); 208 | --callout-radius: var(--radius-s); 209 | --callout-blend-mode: var(--highlight-mix-blend-mode); 210 | --callout-title-color: inherit; 211 | --callout-title-padding: 0; 212 | --callout-title-size: inherit; 213 | --callout-content-padding: 0; 214 | --callout-content-background: transparent; 215 | --callout-bug: var(--color-red-rgb); 216 | --callout-default: var(--color-blue-rgb); 217 | --callout-error: var(--color-red-rgb); 218 | --callout-example: var(--color-purple-rgb); 219 | --callout-fail: var(--color-red-rgb); 220 | --callout-important: var(--color-cyan-rgb); 221 | --callout-info: var(--color-blue-rgb); 222 | --callout-question: var(--color-yellow-rgb); 223 | --callout-success: var(--color-green-rgb); 224 | --callout-summary: var(--color-cyan-rgb); 225 | --callout-tip: var(--color-cyan-rgb); 226 | --callout-todo: var(--color-blue-rgb); 227 | --callout-warning: var(--color-orange-rgb); 228 | --callout-quote: 158, 158, 158; 229 | /* Canvas */ 230 | --canvas-background: var(--background-primary); 231 | --canvas-card-label-color: var(--text-faint); 232 | --canvas-color-1: var(--color-red-rgb); 233 | --canvas-color-2: var(--color-orange-rgb); 234 | --canvas-color-3: var(--color-yellow-rgb); 235 | --canvas-color-4: var(--color-green-rgb); 236 | --canvas-color-5: var(--color-cyan-rgb); 237 | --canvas-color-6: var(--color-purple-rgb); 238 | --canvas-dot-pattern: var(--color-base-30); 239 | /* Checkboxes */ 240 | --checkbox-radius: var(--radius-s); 241 | --checkbox-size: var(--font-text-size); 242 | --checkbox-marker-color: var(--background-primary); 243 | --checkbox-color: var(--interactive-accent); 244 | --checkbox-color-hover: var(--interactive-accent-hover); 245 | --checkbox-border-color: var(--text-faint); 246 | --checkbox-border-color-hover: var(--text-muted); 247 | --checklist-done-decoration: line-through; 248 | --checklist-done-color: var(--text-muted); 249 | /* Code */ 250 | --code-white-space: pre-wrap; 251 | --code-size: var(--font-smaller); 252 | --code-background: var(--background-primary-alt); 253 | --code-normal: var(--text-muted); 254 | --code-comment: var(--text-faint); 255 | --code-function: var(--color-orange); 256 | --code-important: var(--color-orange); 257 | --code-keyword: var(--color-red); 258 | --code-property: var(--color-blue); 259 | --code-punctuation: var(--text-muted); 260 | --code-string: var(--color-cyan); 261 | --code-tag: var(--color-red); 262 | --code-value: var(--color-purple); 263 | /* Collapse icons */ 264 | --collapse-icon-color: var(--text-faint); 265 | --collapse-icon-color-collapsed: var(--text-accent); 266 | /* Cursor */ 267 | --cursor: default; 268 | --cursor-link: pointer; 269 | /* Dialogs - e.g. small modals, confirmations */ 270 | --dialog-width: 560px; 271 | --dialog-max-width: 80vw; 272 | --dialog-max-height: 85vh; 273 | /* Dividers — between panes */ 274 | --divider-color: var(--background-modifier-border); 275 | --divider-color-hover: var(--interactive-accent); 276 | --divider-width: 1px; 277 | --divider-width-hover: 3px; 278 | --divider-vertical-height: calc(100% - var(--header-height)); 279 | /* Dragging */ 280 | --drag-ghost-background: rgba(0, 0, 0, 0.85); 281 | --drag-ghost-text-color: #fff; 282 | /* Embeds */ 283 | --embed-max-height: 4000px; 284 | --embed-canvas-max-height: 400px; 285 | --embed-background: inherit; 286 | --embed-border-left: 2px solid var(--interactive-accent); 287 | --embed-border-right: none; 288 | --embed-border-top: none; 289 | --embed-border-bottom: none; 290 | --embed-padding: 0 0 0 var(--size-4-6); 291 | --embed-font-style: inherit; 292 | /* Blocks */ 293 | --embed-block-shadow-hover: 0 0 0 1px var(--background-modifier-border), 294 | inset 0 0 0 1px var(--background-modifier-border); 295 | /* File layout */ 296 | --file-line-width: 700px; 297 | --file-folding-offset: 24px; 298 | --file-margins: var(--size-4-8); 299 | --file-header-font-size: var(--font-ui-small); 300 | --file-header-font-weight: 400; 301 | --file-header-border: var(--border-width) solid transparent; 302 | --file-header-justify: center; 303 | /* Relative font sizes */ 304 | --font-smallest: 0.8em; 305 | --font-smaller: 0.875em; 306 | --font-small: 0.933em; 307 | /* UI font sizes */ 308 | --font-ui-smaller: 12px; 309 | --font-ui-small: 13px; 310 | --font-ui-medium: 15px; 311 | --font-ui-large: 20px; 312 | /* Font weights */ 313 | --font-thin: 100; 314 | --font-extralight: 200; 315 | --font-light: 300; 316 | --font-normal: 400; 317 | --font-medium: 500; 318 | --font-semibold: 600; 319 | --font-bold: 700; 320 | --font-extrabold: 800; 321 | --font-black: 900; 322 | /* Footnotes */ 323 | --footnote-size: var(--font-smaller); 324 | /* Graphs */ 325 | --graph-controls-width: 240px; 326 | --graph-text: var(--text-normal); 327 | --graph-line: var(--color-base-35, var(--background-modifier-border-focus)); 328 | --graph-node: var(--text-muted); 329 | --graph-node-unresolved: var(--text-faint); 330 | --graph-node-focused: var(--text-accent); 331 | --graph-node-tag: var(--color-green); 332 | --graph-node-attachment: var(--color-yellow); 333 | /* Headings */ 334 | --heading-formatting: var(--text-faint); 335 | --h1-color: var(--h1-color-theme); 336 | --h2-color: var(--h2-color-theme); 337 | --h3-color: var(--h3-color-theme); 338 | --h4-color: var(--h4-color-theme); 339 | --h5-color: var(--h5-color-theme); 340 | --h6-color: var(--h6-color-theme); 341 | --h1-font: inherit; 342 | --h2-font: inherit; 343 | --h3-font: inherit; 344 | --h4-font: inherit; 345 | --h5-font: inherit; 346 | --h6-font: inherit; 347 | --h1-line-height: 1.2; 348 | --h2-line-height: 1.2; 349 | --h3-line-height: 1.3; 350 | --h4-line-height: 1.4; 351 | --h5-line-height: var(--line-height-normal); 352 | --h6-line-height: var(--line-height-normal); 353 | --h1-size: 2em; 354 | --h2-size: 1.6em; 355 | --h3-size: 1.37em; 356 | --h4-size: 1.25em; 357 | --h5-size: 1.12em; 358 | --h6-size: 1.12em; 359 | --h1-style: normal; 360 | --h2-style: normal; 361 | --h3-style: normal; 362 | --h4-style: normal; 363 | --h5-style: normal; 364 | --h6-style: normal; 365 | --h1-variant: normal; 366 | --h2-variant: normal; 367 | --h3-variant: normal; 368 | --h4-variant: normal; 369 | --h5-variant: normal; 370 | --h6-variant: normal; 371 | --h1-weight: 700; 372 | --h2-weight: 600; 373 | --h3-weight: 600; 374 | --h4-weight: 600; 375 | --h5-weight: 600; 376 | --h6-weight: 600; 377 | /* View header */ 378 | --header-height: 40px; 379 | /* Horizontal rules */ 380 | --hr-color: var(--background-modifier-border); 381 | --hr-thickness: 2px; 382 | /* Icons */ 383 | --icon-size: var(--icon-m); 384 | --icon-stroke: var(--icon-m-stroke-width); 385 | --icon-xs: 14px; 386 | --icon-s: 16px; 387 | --icon-m: 18px; 388 | --icon-l: 18px; 389 | --icon-xl: 32px; 390 | --icon-xs-stroke-width: 2px; 391 | --icon-s-stroke-width: 2px; 392 | --icon-m-stroke-width: 1.75px; 393 | --icon-l-stroke-width: 1.75px; 394 | --icon-xl-stroke-width: 1.25px; 395 | --icon-color: var(--text-muted); 396 | --icon-color-hover: var(--text-muted); 397 | --icon-color-active: var(--text-accent); 398 | --icon-color-focused: var(--text-normal); 399 | --icon-opacity: 0.85; 400 | --icon-opacity-hover: 1; 401 | --icon-opacity-active: 1; 402 | --clickable-icon-radius: var(--radius-s); 403 | /* Indentation guide */ 404 | --indentation-guide-width: 1px; 405 | --indentation-guide-color: rgba(var(--mono-rgb-100), 0.12); 406 | --indentation-guide-color-active: rgba(var(--mono-rgb-100), 0.3); 407 | /* Inline title */ 408 | --inline-title-color: var(--h1-color); 409 | --inline-title-font: var(--h1-font); 410 | --inline-title-line-height: var(--h1-line-height); 411 | --inline-title-size: var(--h1-size); 412 | --inline-title-style: var(--h1-style); 413 | --inline-title-variant: var(--h1-variant); 414 | --inline-title-weight: var(--h1-weight); 415 | --inline-title-margin-bottom: 0.5em; 416 | /* Inputs */ 417 | --input-height: 30px; 418 | --input-radius: 5px; 419 | --input-font-weight: var(--font-normal); 420 | --input-border-width: 1px; 421 | /* Italic */ 422 | --italic-color: inherit; 423 | --italic-weight: inherit; 424 | /* Z-index */ 425 | --layer-cover: 5; 426 | --layer-sidedock: 10; 427 | --layer-status-bar: 15; 428 | --layer-popover: 30; 429 | --layer-slides: 45; 430 | --layer-modal: 50; 431 | --layer-notice: 60; 432 | --layer-menu: 65; 433 | --layer-tooltip: 70; 434 | --layer-dragged-item: 80; 435 | /* Line heights */ 436 | --line-height-normal: 1.5; 437 | --line-height-tight: 1.3; 438 | /* Links */ 439 | --link-color: var(--text-accent); 440 | --link-color-hover: var(--text-accent-hover); 441 | --link-decoration: none; 442 | --link-decoration-hover: underline; 443 | --link-decoration-thickness: auto; 444 | --link-external-color: var(--text-accent); 445 | --link-external-color-hover: var(--text-accent-hover); 446 | --link-external-decoration: none; 447 | --link-external-decoration-hover: underline; 448 | --link-external-filter: none; 449 | --link-unresolved-color: var(--text-accent); 450 | --link-unresolved-opacity: 0.7; 451 | --link-unresolved-filter: none; 452 | --link-unresolved-decoration-style: solid; 453 | --link-unresolved-decoration-color: hsla(var(--interactive-accent-hsl), 0.3); 454 | /* Lists */ 455 | --list-indent: 2em; 456 | --list-spacing: 0.075em; 457 | --list-marker-color: var(--text-normal); 458 | --list-marker-color-hover: var(--text-muted); 459 | --list-marker-color-collapsed: var(--text-accent); 460 | --list-bullet-border: none; 461 | --list-bullet-radius: 50%; 462 | --list-bullet-size: 5px; 463 | --list-bullet-transform: none; 464 | --list-numbered-style: decimal; 465 | /* File navigator */ 466 | --nav-item-size: var(--font-ui-small); 467 | --nav-item-color: var(--text-muted); 468 | --nav-item-color-hover: var(--text-normal); 469 | --nav-item-color-active: var(--text-normal); 470 | --nav-item-color-selected: var(--text-normal); 471 | --nav-item-color-highlighted: var(--text-accent-hover); 472 | --nav-item-background-hover: var(--background-modifier-hover); 473 | --nav-item-background-active: var(--background-modifier-hover); 474 | --nav-item-background-selected: hsla(var(--color-accent-hsl), 0.2); 475 | --nav-item-padding: var(--size-4-1) var(--size-4-2) var(--size-4-1) var(--size-4-6); 476 | --nav-item-parent-padding: var(--nav-item-padding); 477 | --nav-item-children-padding-left: var(--size-2-2); 478 | --nav-item-children-margin-left: var(--size-4-3); 479 | --nav-item-weight: inherit; 480 | --nav-item-weight-hover: inherit; 481 | --nav-item-weight-active: inherit; 482 | --nav-item-white-space: nowrap; 483 | --nav-indentation-guide-width: var(--indentation-guide-width); 484 | --nav-indentation-guide-color: var(--indentation-guide-color); 485 | --nav-collapse-icon-color: var(--collapse-icon-color); 486 | --nav-collapse-icon-color-collapsed: var(--text-faint); 487 | /* Modals - e.g. settings, community themes, community plugins */ 488 | --modal-background: var(--background-primary); 489 | --modal-width: 90vw; 490 | --modal-height: 85vh; 491 | --modal-max-width: 1100px; 492 | --modal-max-height: 1000px; 493 | --modal-max-width-narrow: 800px; 494 | --modal-border-width: var(--border-width); 495 | --modal-border-color: var(--color-base-30, var(--background-modifier-border-focus)); 496 | --modal-radius: var(--radius-l); 497 | --modal-community-sidebar-width: 280px; 498 | /* PDF view */ 499 | --pdf-background: var(--background-primary); 500 | --pdf-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 2px 8px rgba(0, 0, 0, 0.1); 501 | --pdf-spread-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05); 502 | --pdf-sidebar-background: var(--background-primary); 503 | --pdf-thumbnail-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 2px 8px rgba(0, 0, 0, 0.2); 504 | /* Popovers - file previews */ 505 | --popover-width: 450px; 506 | --popover-height: 400px; 507 | --popover-max-height: 70vh; 508 | --popover-pdf-width: 600px; 509 | --popover-pdf-height: 800px; 510 | --popover-font-size: var(--font-text-size); 511 | /* Prompts - e.g. quick switcher, command palette */ 512 | --prompt-width: 700px; 513 | --prompt-max-width: 80vw; 514 | --prompt-max-height: 70vh; 515 | --prompt-border-width: var(--border-width); 516 | --prompt-border-color: var(--color-base-40, var(--background-modifier-border-focus)); 517 | /* Radiuses */ 518 | --radius-s: 4px; 519 | --radius-m: 8px; 520 | --radius-l: 12px; 521 | --radius-xl: 16px; 522 | /* Ribbon */ 523 | --ribbon-background: var(--background-secondary); 524 | --ribbon-background-collapsed: var(--background-primary); 525 | --ribbon-width: 44px; 526 | --ribbon-padding: var(--size-4-2) var(--size-4-1) var(--size-4-3); 527 | /* Scrollbars */ 528 | --scrollbar-active-thumb-bg: rgba(var(--mono-rgb-100), 0.2); 529 | --scrollbar-bg: rgba(var(--mono-rgb-100), 0.05); 530 | --scrollbar-thumb-bg: rgba(var(--mono-rgb-100), 0.1); 531 | /* Search */ 532 | --search-clear-button-color: var(--text-muted); 533 | --search-clear-button-size: 13px; 534 | --search-icon-color: var(--text-muted); 535 | --search-icon-size: 18px; 536 | --search-result-background: var(--background-primary); 537 | /* Layout sizing - for padding and margins */ 538 | --size-2-1: 2px; 539 | --size-2-2: 4px; 540 | --size-2-3: 6px; 541 | --size-4-1: 4px; 542 | --size-4-2: 8px; 543 | --size-4-3: 12px; 544 | --size-4-4: 16px; 545 | --size-4-5: 20px; 546 | --size-4-6: 24px; 547 | --size-4-8: 32px; 548 | --size-4-9: 36px; 549 | --size-4-12: 48px; 550 | --size-4-16: 64px; 551 | --size-4-18: 72px; 552 | /* Sidebar */ 553 | --sidebar-markdown-font-size: calc(var(--font-text-size) * 0.9); 554 | --sidebar-tab-text-display: none; 555 | /* Sliders */ 556 | --slider-thumb-border-width: 1px; 557 | --slider-thumb-border-color: var(--background-modifier-border-hover); 558 | --slider-thumb-height: 18px; 559 | --slider-thumb-width: 18px; 560 | --slider-thumb-y: -6px; 561 | --slider-thumb-radius: 50%; 562 | --slider-s-thumb-size: 15px; 563 | --slider-s-thumb-position: -5px; 564 | --slider-track-background: var(--background-modifier-border); 565 | --slider-track-height: 3px; 566 | /* Status bar */ 567 | --status-bar-background: var(--background-secondary); 568 | --status-bar-border-color: var(--divider-color); 569 | --status-bar-border-width: 1px 0 0 1px; 570 | --status-bar-font-size: var(--font-ui-smaller); 571 | --status-bar-text-color: var(--text-muted); 572 | --status-bar-position: fixed; 573 | --status-bar-radius: var(--radius-m) 0 0 0; 574 | --status-bar-scroll-padding: calc(var(--status-bar-font-size) + 18px); 575 | /* Swatch for color inputs */ 576 | --swatch-radius: 14px; 577 | --swatch-height: 24px; 578 | --swatch-width: 24px; 579 | --swatch-shadow: inset 0 0 0 1px rgba(var(--mono-rgb-100), 0.15); 580 | /* Tabs */ 581 | --tab-background-active: var(--background-primary); 582 | --tab-text-color: var(--text-faint); 583 | --tab-text-color-active: var(--text-muted); 584 | --tab-text-color-focused: var(--text-muted); 585 | --tab-text-color-focused-active: var(--text-muted); 586 | --tab-text-color-focused-highlighted: var(--text-accent); 587 | --tab-text-color-focused-active-current: var(--text-normal); 588 | --tab-font-size: var(--font-ui-small); 589 | --tab-font-weight: inherit; 590 | --tab-container-background: var(--background-secondary); 591 | --tab-divider-color: var(--background-modifier-border-hover); 592 | --tab-outline-color: var(--divider-color); 593 | --tab-outline-width: 1px; 594 | --tab-curve: 6px; 595 | --tab-radius: var(--radius-s); 596 | --tab-radius-active: 6px 6px 0 0; 597 | --tab-width: 200px; 598 | --tab-max-width: 320px; 599 | /* Stacked tabs */ 600 | --tab-stacked-pane-width: 700px; 601 | --tab-stacked-header-width: var(--header-height); 602 | --tab-stacked-font-size: var(--font-ui-small); 603 | --tab-stacked-font-weight: 400; 604 | --tab-stacked-text-align: left; 605 | --tab-stacked-text-transform: rotate(0deg); 606 | --tab-stacked-text-writing-mode: vertical-lr; 607 | --tab-stacked-shadow: -8px 0 8px 0 rgba(0, 0, 0, 0.05); 608 | /* Tables */ 609 | --table-background: transparent; 610 | --table-border-width: 1px; 611 | --table-border-color: var(--background-modifier-border); 612 | --table-white-space: normal; 613 | --table-header-background: var(--table-background); 614 | --table-header-background-hover: inherit; 615 | --table-header-border-width: var(--table-border-width); 616 | --table-header-border-color: var(--table-border-color); 617 | --table-header-font: inherit; 618 | --table-header-size: var(--font-text-size); 619 | --table-header-weight: var(--bold-weight); 620 | --table-header-color: var(--text-normal); 621 | --table-text-size: inherit; 622 | --table-text-color: inherit; 623 | --table-column-max-width: none; 624 | --table-column-alt-background: var(--table-background); 625 | --table-column-first-border-width: var(--table-border-width); 626 | --table-column-last-border-width: var(--table-border-width); 627 | --table-row-background-hover: var(--table-background); 628 | --table-row-alt-background: var(--table-background); 629 | --table-row-last-border-width: var(--table-border-width); 630 | /* Tags */ 631 | --tag-size: var(--font-smaller); 632 | --tag-color: var(--text-accent); 633 | --tag-color-hover: var(--text-accent); 634 | --tag-decoration: none; 635 | --tag-decoration-hover: none; 636 | --tag-background: hsla(var(--interactive-accent-hsl), 0.1); 637 | --tag-background-hover: hsla(var(--interactive-accent-hsl), 0.2); 638 | --tag-border-color: hsla(var(--interactive-accent-hsl), 0.15); 639 | --tag-border-color-hover: hsla(var(--interactive-accent-hsl), 0.15); 640 | --tag-border-width: 0px; 641 | --tag-padding-x: 0.65em; 642 | --tag-padding-y: 0.25em; 643 | --tag-radius: 2em; 644 | /* Window frame */ 645 | --titlebar-background: var(--background-secondary); 646 | --titlebar-background-focused: var(--background-secondary-alt); 647 | --titlebar-border-width: 0px; 648 | --titlebar-border-color: var(--background-modifier-border); 649 | --titlebar-text-color: var(--text-muted); 650 | --titlebar-text-color-focused: var(--text-normal); 651 | --titlebar-text-weight: var(--font-bold); 652 | /* Toggles */ 653 | --toggle-border-width: 2px; 654 | --toggle-width: 40px; 655 | --toggle-radius: 18px; 656 | --toggle-thumb-color: white; 657 | --toggle-thumb-radius: 18px; 658 | --toggle-thumb-height: 18px; 659 | --toggle-thumb-width: 18px; 660 | --toggle-s-border-width: 2px; 661 | --toggle-s-width: 34px; 662 | --toggle-s-thumb-height: 15px; 663 | --toggle-s-thumb-width: 15px; 664 | /* Vault name */ 665 | --vault-name-font-size: var(--font-ui-small); 666 | --vault-name-font-weight: var(--font-medium); 667 | --vault-name-color: var(--text-normal); 668 | /* Workspace */ 669 | --workspace-background-translucent: rgba(var(--mono-rgb-0), 0.6); 670 | /* Color mappings ------------------------ */ 671 | /* Accent HSL values */ 672 | --accent-h: var(--accent-h-theme); 673 | --accent-s: var(--accent-s-theme); 674 | --accent-l: var(--accent-l-theme); 675 | /* Backgrounds */ 676 | --background-primary: var(--color-base-00); 677 | --background-primary-alt: var(--color-base-10); 678 | --background-secondary: var(--color-base-20); 679 | --background-modifier-hover: rgba(var(--rgb-hover), var(--background-modifier-hover-alpha)); 680 | --background-modifier-active-hover: hsla(var(--interactive-accent-hsl), 0.15); 681 | --background-modifier-border: var(--color-base-30); 682 | --background-modifier-border-hover: var(--color-base-30); 683 | --background-modifier-border-focus: var(--color-accent); 684 | --background-modifier-error-rgb: var(--color-red-rgb); 685 | --background-modifier-error: var(--color-red); 686 | --background-modifier-error-hover: var(--color-red); 687 | --background-modifier-success-rgb: var(--color-green-rgb); 688 | --background-modifier-success: var(--color-green); 689 | --background-modifier-message: rgba(0, 0, 0, 0.9); 690 | /* Inputs */ 691 | --background-modifier-form-field: var(--color-base-25); 692 | /* Text */ 693 | --text-normal: var(--color-base-100); 694 | --text-muted: var(--color-base-70); 695 | --text-faint: var(--color-base-50); 696 | --text-on-accent: white; 697 | --text-on-accent-inverted: black; 698 | --text-error: var(--color-red); 699 | --text-success: var(--color-green); 700 | --text-selection: hsla(var(--color-accent-hsl), 0.2); 701 | --text-highlight-bg: rgba(255, 208, 0, 0.4); 702 | --text-accent: var(--color-accent); 703 | --text-accent-hover: var(--color-accent-2); 704 | --interactive-normal: var(--color-base-00); 705 | --interactive-hover: var(--color-base-10); 706 | --interactive-accent-hsl: var(--color-accent-hsl); 707 | --interactive-accent: var(--color-accent-1); 708 | --interactive-accent-hover: var(--color-accent-2); 709 | } 710 | 711 | .theme-dark { 712 | color-scheme: dark; 713 | --highlight-mix-blend-mode: lighten; 714 | --mono-rgb-0: 0, 0, 0; 715 | --mono-rgb-100: 255, 255, 255; 716 | --rgb-hover: 177, 186, 196; 717 | --color-red-rgb: 248, 81, 73; 718 | --color-red: #F47067; 719 | --color-green-rgb: 126, 231, 135; 720 | --color-green: #7ee787; 721 | --color-orange: #FFA657; 722 | --color-yellow: #d29922; 723 | --color-cyan: #A5D6FF; 724 | --color-blue: #6CB6FF; 725 | --color-purple: #D2A8FF; 726 | --color-pink: #f778ba; 727 | 728 | --color-base-00: #0d1117; 729 | --color-base-10: #161b22; 730 | --color-base-20: #161b22; 731 | --color-base-25: #010409; 732 | --color-base-30: #30363d; 733 | --color-base-35: #21262d; 734 | --color-base-40: #30363d; 735 | --color-base-50: #6e7681; 736 | --color-base-60: #999; /* Unused */ 737 | --color-base-70: #8b949e; 738 | --color-base-100: #c9d1d9; 739 | 740 | --accent-h-theme: 212; 741 | --accent-s-theme: 100%; 742 | --accent-l-theme: 67%; 743 | --color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l); 744 | --color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l)); 745 | --color-accent-1: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - 3.8%)); 746 | --color-accent-2: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + 3.8%)); 747 | 748 | --background-secondary-alt: var(--color-base-25); 749 | --background-modifier-box-shadow: rgba(0, 0, 0, 0.3); 750 | --background-modifier-cover: rgba(10, 10, 10, 0.4); 751 | --text-highlight-bg: rgba(255, 208, 0, 0.4); 752 | --text-highlight-bg-active: rgba(255, 128, 0, 0.4); 753 | --text-selection: hsla(var(--interactive-accent-hsl), 0.4); 754 | --input-shadow: inset 0 0 0 1px #f0f6fc1a; 755 | --input-shadow-hover: inset 0 0 0 1px var(--color-base-70); 756 | --shadow-s: none; 757 | --shadow-l: none; 758 | 759 | --inline-code-background: #6e768166; 760 | --h-color-theme: var(--color-green); 761 | --h1-color-theme: var(--color-green); 762 | --h2-color-theme: var(--color-green); 763 | --h3-color-theme: var(--color-green); 764 | --h4-color-theme: var(--color-green); 765 | --h5-color-theme: var(--color-green); 766 | --h6-color-theme: var(--color-green); 767 | --background-modifier-hover-alpha: 0.12; 768 | --color-btn-primary-bg: #238636; 769 | --color-btn-primary-hover-bg: #2ea043; 770 | 771 | /* Kanban colors */ 772 | --kanban-background: var(--background-primary); 773 | --kanban-lane-background: var(--background-secondary-alt); 774 | --kanban-item-background: var(--background-primary-alt); 775 | --kanban-lane-border: var(--color-base-35); 776 | --kanban-lane-count: var(--color-base-35); 777 | --kanban-options-btn: var(--color-base-30); 778 | } 779 | .is-mobile.theme-dark { 780 | --color-base-00: #0d1117; 781 | --color-base-10: #161b22; 782 | --color-base-20: #161b22; 783 | --tag-background: hsla(var(--interactive-accent-hsl), 0.2); 784 | --modal-background: var(--background-secondary); 785 | --search-result-background: var(--background-secondary); 786 | --background-modifier-form-field: var(--background-modifier-border); 787 | --background-modifier-cover: rgba(0, 0, 0, 0.5); 788 | --background-modifier-hover: rgba(var(--mono-rgb-100), 0.15); 789 | --settings-home-background: var(--background-primary); 790 | } 791 | 792 | .theme-light { 793 | color-scheme: light; 794 | --highlight-mix-blend-mode: darken; 795 | --mono-rgb-0: 255, 255, 255; 796 | --mono-rgb-100: 0, 0, 0; 797 | --rgb-hover: 208, 215, 222; 798 | --color-red-rgb: 228, 55, 75; 799 | --color-red: #cf222e; 800 | --color-green-rgb: 12, 181, 79; 801 | --color-green: #0cb54f; 802 | --color-orange: #d96c00; 803 | --color-yellow: #BD8E37; 804 | --color-cyan: #2db7b5; 805 | --color-blue: #086DDD; 806 | --color-purple: #876be0; 807 | --color-pink: #C32B74; 808 | 809 | --color-base-00: #ffffff; 810 | --color-base-05: #fcfcfc; 811 | --color-base-10: #f6f8fa; 812 | --color-base-20: #f6f8fa; 813 | --color-base-25: #f6f8fa; 814 | --color-base-30: #d0d7de; 815 | --color-base-35: #d4d4d4; 816 | --color-base-40: #bdbdbd; 817 | --color-base-50: #6e7781; 818 | --color-base-60: #707070; /* Unused */ 819 | --color-base-70: #57606a; 820 | --color-base-100: #24292f; 821 | 822 | --accent-h-theme: 212; 823 | --accent-s-theme: 92%; 824 | --accent-l-theme: 45%; 825 | --color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l); 826 | --color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l)); 827 | --color-accent-1: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + 2.5%)); 828 | --color-accent-2: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + 5%)); 829 | 830 | --background-secondary-alt: var(--color-base-05); 831 | --background-modifier-box-shadow: rgba(0, 0, 0, 0.1); 832 | --background-modifier-cover: rgba(220, 220, 220, 0.4); 833 | --text-highlight-bg: rgba(255, 208, 0, 0.4); 834 | --text-highlight-bg-active: rgba(255, 128, 0, 0.4); 835 | --input-shadow: inset 0 0 0 1px #1b1f2426; 836 | --input-shadow-hover: inset 0 0 0 1px #1b1f2426; 837 | --shadow-s: none; 838 | --shadow-l: none; 839 | 840 | --inline-code-background: #aeb8c133; 841 | --h-color-theme: var(--text-normal); 842 | --h1-color-theme: var(--text-normal); 843 | --h2-color-theme: var(--text-normal); 844 | --h3-color-theme: var(--text-normal); 845 | --h4-color-theme: var(--text-normal); 846 | --h5-color-theme: var(--text-normal); 847 | --h6-color-theme: var(--text-normal); 848 | --background-modifier-hover-alpha: 0.32; 849 | --color-btn-primary-bg: #2da44f; 850 | --color-btn-primary-hover-bg: #2c964a; 851 | 852 | /* Kanban colors */ 853 | --kanban-background: var(--background-primary); 854 | --kanban-lane-background: var(--background-primary-alt); 855 | --kanban-item-background: var(--background-primary); 856 | --kanban-lane-border: #d8dee4; 857 | --kanban-lane-count: #aeb8c133; 858 | --kanban-options-btn: var(--background-primary-alt); 859 | } 860 | 861 | 862 | body.colorblind_protan-deutan.theme-dark { 863 | --color-red-rgb: 253, 172, 84; 864 | --color-red: #fdac54; 865 | --color-green-rgb: 165, 214, 255; 866 | --color-green: #a3d6ff; 867 | --color-orange: #fdac54; 868 | 869 | --color-btn-primary-bg: #1f6feb; 870 | --color-btn-primary-hover-bg: #388bfd; 871 | } 872 | body.colorblind_protan-deutan.theme-light { 873 | --color-red-rgb: 179, 89, 0; 874 | --color-red: #b35900; 875 | --color-green-rgb: 33, 139, 255; 876 | --color-green: #218bff; 877 | --color-orange: #dd7815; 878 | 879 | --color-btn-primary-bg: #218bff; 880 | --color-btn-primary-hover-bg: #0969da; 881 | } 882 | 883 | body.colorblind_tritan.theme-dark { 884 | --color-green-rgb: 165, 214, 255; 885 | --color-green: #a5d6ff; 886 | --color-orange: #ffa198; 887 | 888 | --text-highlight-bg: rgba(255, 0, 0, 0.4); 889 | --text-highlight-bg-active: rgba(255, 50, 0, 0.4); 890 | 891 | --color-btn-primary-bg: #1f6feb; 892 | --color-btn-primary-hover-bg: #388bfd; 893 | } 894 | body.colorblind_tritan.theme-light { 895 | --color-green-rgb: 12, 181, 79; 896 | --color-green: #218bff; 897 | --color-orange: #fa4549; 898 | 899 | --text-highlight-bg: rgba(255, 0, 0, 0.4); 900 | --text-highlight-bg-active: rgba(255, 50, 0, 0.4); 901 | 902 | --color-btn-primary-bg: #218bff; 903 | --color-btn-primary-hover-bg: #0969da; 904 | } 905 | 906 | /* Tables */ 907 | .markdown-rendered td, 908 | .markdown-rendered th { 909 | padding: var(--size-2-3) var(--size-4-3); 910 | } 911 | .markdown-rendered th { 912 | text-align: center; 913 | } 914 | .markdown-rendered tbody tr:nth-child(2n) { 915 | background-color: var(--background-secondary); 916 | } 917 | 918 | /* Buttons */ 919 | button { 920 | transition: 80ms cubic-bezier(0.33, 1, 0.68, 1); 921 | } 922 | button:hover { 923 | cursor: var(--cursor-link); 924 | } 925 | button.mod-cta { 926 | background-color: var(--color-btn-primary-bg); 927 | color: var(--text-on-accent); 928 | } 929 | button.mod-cta:hover { 930 | background-color: var(--color-btn-primary-hover-bg); 931 | } 932 | 933 | /* Callout */ 934 | body.callout-on { 935 | --callout-radius: 0; 936 | --callout-border-width: 0; 937 | --callout-padding: 0 1em; 938 | } 939 | body.callout-on .callout { 940 | border-left: 0.25em solid var(--color-base-30); 941 | background-color: transparent; 942 | color: var(--text-muted); 943 | } 944 | body.callout-on .callout-content p { 945 | margin: 0.1em 0; 946 | } 947 | 948 | /* Headers */ 949 | body.headers-one-color { 950 | --h1-color: var(--h-color-theme); 951 | --h2-color: var(--h-color-theme); 952 | --h3-color: var(--h-color-theme); 953 | --h4-color: var(--h-color-theme); 954 | --h5-color: var(--h-color-theme); 955 | --h6-color: var(--h-color-theme); 956 | } 957 | 958 | /* Kanban-common */ 959 | .kanban-plugin { 960 | --lane-width: 348px; 961 | } 962 | body.theme-light .kanban-plugin__lane-items>div { 963 | box-shadow: rgb(140 149 159 / 15%) 0px 3px 6px; 964 | } 965 | 966 | /* Kanban-same-height-cards */ 967 | body.kanban-same-height-cards .kanban-plugin__item-content-wrapper, 968 | body.kanban-same-height-cards .kanban-plugin__item-title-wrapper { 969 | min-height: 68px; 970 | } 971 | 972 | /* Kanban-full-height-column */ 973 | body.kanban-full-height-column button.kanban-plugin__new-item-button { 974 | align-self: flex-end; 975 | } 976 | body.kanban-full-height-column .kanban-plugin__item-button-wrapper { 977 | flex-grow: 1; 978 | display: flex; 979 | } 980 | body.kanban-full-height-column .kanban-plugin__lane-wrapper { 981 | min-height: 100%; 982 | } 983 | 984 | /* Kanban-Minimal */ 985 | body.kanban-on .kanban-plugin { 986 | background-color: var(--kanban-background); 987 | } 988 | body.kanban-on .kanban-plugin__lane { 989 | background-color: var(--kanban-lane-background); 990 | border: 1px solid var(--kanban-lane-border); 991 | } 992 | body.kanban-on .kanban-plugin__lane-title { 993 | flex-grow: 0; 994 | width: fit-content; 995 | } 996 | body.kanban-on .kanban-plugin__item-content-wrapper, 997 | body.kanban-on .kanban-plugin__item-title-wrapper, 998 | body.kanban-on .kanban-plugin__item-metadata-wrapper:not(:empty) { 999 | background: var(--kanban-item-background); 1000 | } 1001 | body.kanban-on .kanban-plugin__icon>svg { 1002 | transform: rotate(90deg); 1003 | } 1004 | body.kanban-on .kanban-plugin__lane-settings-button-wrapper { 1005 | margin-left: auto; 1006 | } 1007 | body.kanban-on div.kanban-plugin__lane-title-count { 1008 | background-color: var(--kanban-lane-count); 1009 | border-radius: 1em; 1010 | padding: 2px 5px; 1011 | } 1012 | body.kanban-on .kanban-plugin__item button.kanban-plugin__item-prefix-button, 1013 | body.kanban-on .kanban-plugin__item button.kanban-plugin__item-postfix-button, 1014 | body.kanban-on .kanban-plugin__lane button.kanban-plugin__lane-settings-button { 1015 | padding: 0 5px; 1016 | height: 24px; 1017 | box-shadow: none; 1018 | } 1019 | body.kanban-on .kanban-plugin__item button.kanban-plugin__item-prefix-button:hover, 1020 | body.kanban-on .kanban-plugin__item button.kanban-plugin__item-postfix-button:hover, 1021 | body.kanban-on .kanban-plugin__lane button.kanban-plugin__lane-settings-button:hover { 1022 | background-color: var(--kanban-options-btn); 1023 | cursor: pointer; 1024 | } 1025 | body.kanban-on button.kanban-plugin__new-item-button { 1026 | border: none; 1027 | justify-content: flex-start; 1028 | } 1029 | body.kanban-on .kanban-plugin__new-item-button:hover { 1030 | color: var(--text-normal); 1031 | background-color: inherit; 1032 | box-shadow: none; 1033 | } 1034 | body.kanban-on .kanban-plugin__lane-items { 1035 | padding: 8px 15px; 1036 | } 1037 | body.kanban-on .kanban-plugin__item-prefix-button-wrapper input[type=checkbox] { 1038 | filter: none; 1039 | } 1040 | 1041 | /* Kanban-Full */ 1042 | /* Main color */ 1043 | body.kanban-full .kanban-plugin { 1044 | background-color: var(--kanban-background); 1045 | } 1046 | 1047 | /* LANE */ 1048 | /* Colors */ 1049 | body.kanban-full .kanban-plugin__lane { 1050 | background-color: var(--kanban-lane-background); 1051 | border: 1px solid var(--kanban-lane-border); 1052 | } 1053 | 1054 | /* Grip icon hiding */ 1055 | body.kanban-full .kanban-plugin__lane-grip { 1056 | position: absolute; 1057 | opacity: 0; 1058 | width: calc(var(--lane-width) - 1em); 1059 | height: 3em; 1060 | z-index: 0; 1061 | margin: 0; 1062 | cursor: default; 1063 | } 1064 | body.kanban-full .kanban-plugin__lane-header-wrapper div { 1065 | z-index: 1; 1066 | } 1067 | 1068 | /* Header */ 1069 | body.kanban-full .kanban-plugin__lane-header-wrapper { 1070 | padding-left: 14px; 1071 | } 1072 | body.kanban-full .kanban-plugin__markdown-preview-view { 1073 | font-size: inherit; 1074 | } 1075 | 1076 | /* Header + Counter */ 1077 | body.kanban-full .kanban-plugin__lane-title { 1078 | flex-grow: 0; 1079 | width: fit-content; 1080 | font-size: 1em; 1081 | } 1082 | 1083 | /* Counter */ 1084 | body.kanban-full div.kanban-plugin__lane-title-count { 1085 | background-color: var(--kanban-lane-count); 1086 | border-radius: 1em; 1087 | padding: 2px 5px; 1088 | } 1089 | 1090 | /* Three dot position */ 1091 | body.kanban-full .kanban-plugin__lane-settings-button-wrapper { 1092 | margin-left: auto; 1093 | } 1094 | 1095 | /* Cards padding */ 1096 | body.kanban-full .kanban-plugin__lane-items { 1097 | padding: 2px 6px; 1098 | } 1099 | 1100 | /* ITEM */ 1101 | /* Colors */ 1102 | body.kanban-full .kanban-plugin__item-content-wrapper, 1103 | body.kanban-full .kanban-plugin__item-title-wrapper, 1104 | body.kanban-full .kanban-plugin__item-metadata-wrapper:not(:empty) { 1105 | background: var(--kanban-item-background); 1106 | } 1107 | body.kanban-full .kanban-plugin__item { 1108 | border-color: var(--kanban-lane-border); 1109 | } 1110 | 1111 | /* Between items */ 1112 | body.kanban-full .kanban-plugin__lane-items>div { 1113 | margin-bottom: 8px; 1114 | margin-top: 0; 1115 | } 1116 | 1117 | /* Borders */ 1118 | body.kanban-full .kanban-plugin__lane-header-wrapper, 1119 | body.kanban-full .kanban-plugin__item-button-wrapper, 1120 | body.kanban-full .kanban-plugin__item-form { 1121 | border: none; 1122 | } 1123 | 1124 | /* Content */ 1125 | body.kanban-full .kanban-plugin__item-title-wrapper { 1126 | padding: 12px 12px 12px 0; 1127 | } 1128 | body.kanban-full .kanban-plugin__item-title, 1129 | body.kanban-full .kanban-plugin__item-input-wrapper { 1130 | padding-left: 12px; 1131 | } 1132 | 1133 | /* Archive/checkbox */ 1134 | body.kanban-full .kanban-plugin__item-prefix-button-wrapper { 1135 | align-self: center; 1136 | margin-left: 5px; 1137 | } 1138 | 1139 | /* Time Date Buttons */ 1140 | body.kanban-full .kanban-plugin__item-metadata .is-button:hover { 1141 | cursor: var(--cursor-link); 1142 | color: var(--text-normal); 1143 | } 1144 | 1145 | /* THREE DOT BUTTON */ 1146 | /* Rotation */ 1147 | body.kanban-full .kanban-plugin__icon>svg { 1148 | transform: rotate(90deg); 1149 | } 1150 | 1151 | /* Size */ 1152 | body.kanban-full .kanban-plugin__icon { 1153 | font-size: 1.4em; 1154 | } 1155 | 1156 | /* Item */ 1157 | body.kanban-full .kanban-plugin__item-postfix-button.clickable-icon { 1158 | opacity: 0; 1159 | } 1160 | body.kanban-full .kanban-plugin__item:hover .kanban-plugin__item-postfix-button.clickable-icon { 1161 | opacity: 1; 1162 | } 1163 | 1164 | /* ADD A CARD BUTTON */ 1165 | /* Position */ 1166 | body.kanban-full .kanban-plugin__new-item-button { 1167 | border: none; 1168 | justify-content: flex-start; 1169 | box-shadow: none; 1170 | padding-left: 0; 1171 | } 1172 | 1173 | /* + Size */ 1174 | body.kanban-full .kanban-plugin__item-button-plus { 1175 | margin-right: 8px; 1176 | font-size: 1.9em; 1177 | height: inherit; 1178 | } 1179 | 1180 | /* Hover */ 1181 | body.kanban-full .kanban-plugin__new-item-button:hover { 1182 | background-color: inherit; 1183 | box-shadow: none; 1184 | color: var(--text-muted); 1185 | } 1186 | 1187 | /* HOVER EDITOR PLUGIN */ 1188 | /* Add borders */ 1189 | .popover.hover-editor > .popover-content { 1190 | border: var(--border-width) var(--color-base-30) solid; 1191 | box-shadow: 0 0 10px 3px var(--background-modifier-box-shadow); 1192 | } 1193 | 1194 | /* FIXIES */ 1195 | body.kanban-full .kanban-plugin__item-prefix-button-wrapper input[type=checkbox] { 1196 | filter: none; 1197 | margin: 3px; 1198 | } 1199 | body.kanban-full .kanban-plugin__markdown-preview-view>div>* { 1200 | overflow-x: unset; 1201 | } 1202 | 1203 | /* fix: input borders */ 1204 | textarea:active, 1205 | input[type='text']:active, 1206 | input[type='search']:active, 1207 | input[type='email']:active, 1208 | input[type='password']:active, 1209 | input[type='number']:active, 1210 | textarea:focus, 1211 | input[type='text']:focus, 1212 | input[type='search']:focus, 1213 | input[type='email']:focus, 1214 | input[type='password']:focus, 1215 | input[type='number']:focus, 1216 | textarea:focus-visible, 1217 | input[type='text']:focus-visible, 1218 | input[type='search']:focus-visible, 1219 | input[type='email']:focus-visible, 1220 | input[type='password']:focus-visible, 1221 | input[type='number']:focus-visible { 1222 | box-shadow: 0 0 0 1px var(--background-modifier-border-focus); 1223 | } 1224 | select:focus, .dropdown:focus { 1225 | box-shadow: 0 0 0 2px var(--background-modifier-border-focus); 1226 | } 1227 | 1228 | /* inline code block */ 1229 | .markdown-rendered :not(pre) > code { 1230 | background-color: var(--inline-code-background); 1231 | padding: 0.2em 0.4em; 1232 | border-radius: 6px; 1233 | color: var(--text-normal); 1234 | } 1235 | 1236 | /* Underline for the top level headers */ 1237 | 1238 | body.h1-underline h1, body.h1-underline.markdown-rendered h1 { 1239 | padding-bottom: .3em; 1240 | border-bottom: 1px solid var(--color-base-40); 1241 | } 1242 | body.h2-underline h2, body.h2-underline.markdown-rendered h2 { 1243 | padding-bottom: .3em; 1244 | border-bottom: 1px solid var(--color-base-40); 1245 | } 1246 | --------------------------------------------------------------------------------