├── .gitignore ├── .github ├── FUNDING.yml └── workflows │ └── release.yml ├── w95.png ├── Reactionary.png ├── README.md ├── manifest.json ├── LICENSE └── theme.css /.gitignore: -------------------------------------------------------------------------------- 1 | .idea -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | buy_me_a_coffee: phchang 2 | -------------------------------------------------------------------------------- /w95.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phchang/W95/HEAD/w95.png -------------------------------------------------------------------------------- /Reactionary.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/phchang/W95/HEAD/Reactionary.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Obsidian W95 2 | 3 | A theme inspired by an OS released in 1995 by a company in Redmond, Washington. 4 | 5 | ![w95.png](w95.png) 6 | -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "W95", 3 | "version": "1.1.0", 4 | "minAppVersion": "1.2.8", 5 | "author": "@phchang", 6 | "authorUrl": "https://github.com/phchang", 7 | "fundingUrl": "https://buymeacoffee.com/phchang" 8 | } 9 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: Release Obsidian theme 2 | 3 | on: 4 | push: 5 | tags: 6 | - "*" 7 | 8 | jobs: 9 | build: 10 | runs-on: ubuntu-latest 11 | 12 | steps: 13 | - uses: actions/checkout@v3 14 | 15 | - name: Create release 16 | env: 17 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 18 | run: | 19 | tag="${GITHUB_REF#refs/tags/}" 20 | 21 | gh release create "$tag" \ 22 | --title="$tag" \ 23 | --generate-notes \ 24 | --draft \ 25 | manifest.json theme.css 26 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 phchang 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /theme.css: -------------------------------------------------------------------------------- 1 | /* @settings 2 | 3 | name: W95 Display Properties 4 | id: w95-display-props 5 | settings: 6 | - 7 | id: w95-display-props-font 8 | title: Font 9 | type: heading 10 | level: 3 11 | - 12 | id: font-ui-smaller 13 | title: Smaller font size (px) 14 | type: variable-number 15 | default: 11 16 | format: px 17 | - 18 | id: font-ui-small 19 | title: Small font size (px) 20 | type: variable-number 21 | default: 12 22 | format: px 23 | - 24 | id: font-ui-medium 25 | title: Medium font size (px) 26 | type: variable-number 27 | default: 14 28 | format: px 29 | - 30 | id: font-ui-large 31 | title: Large font size (px) 32 | type: variable-number 33 | default: 20 34 | format: px 35 | - 36 | id: w95-display-theme 37 | title: Appearance 38 | type: heading 39 | level: 3 40 | - 41 | id: w95-display-themes 42 | title: Scheme 43 | type: class-select 44 | allowEmpty: false 45 | default: w95-default 46 | options: 47 | - 48 | label: W95 Standard 49 | value: w95-default 50 | - 51 | label: Reactionary 52 | value: w95-reactionary 53 | - 54 | label: Brick 55 | value: w95-scheme-brick 56 | - 57 | label: Desert 58 | value: w95-scheme-desert 59 | - 60 | label: Eggplant 61 | value: w95-scheme-eggplant 62 | - 63 | label: Lilac 64 | value: w95-scheme-lilac 65 | - 66 | label: Maple 67 | value: w95-scheme-maple 68 | - 69 | label: Marine (high color) 70 | value: w95-scheme-marine 71 | - 72 | label: Mystery 73 | value: w95-scheme-mystery 74 | - 75 | label: Plum (high color) 76 | value: w95-scheme-plum 77 | - 78 | label: Pumpkin 79 | value: w95-scheme-pumpkin 80 | - 81 | label: Rainy Day 82 | value: w95-scheme-rainy-day 83 | - 84 | label: Rose 85 | value: w95-scheme-rose 86 | - 87 | label: Slate 88 | value: w95-scheme-slate 89 | - 90 | label: Spruce 91 | value: w95-scheme-spruce 92 | - 93 | label: Storm (VGA) 94 | value: w95-scheme-storm 95 | - 96 | label: Teal (VGA) 97 | value: w95-scheme-teal 98 | - 99 | label: Wheat 100 | value: w95-scheme-wheat 101 | */ 102 | 103 | .theme-dark, 104 | .theme-light { 105 | --accent-h: 240; 106 | --accent-s: 100%; 107 | --accent-l: 24%; 108 | 109 | --interactive-normal: var(--accent-1); 110 | --interactive-hover: var(--accent-1); 111 | --interactive-accent: var(--accent-6); 112 | --interactive-accent-hover: var(--background-primary); 113 | 114 | --background-primary: #bdbebd; 115 | --background-secondary: #bdbebd; 116 | --nav-item-background-active: #00007b; 117 | --nav-item-color-active: var(--accent-1); 118 | --scrollbar-track: var(--color-base-25); 119 | --scrollbar-thumb: var(--color-base-20); 120 | 121 | --border-highlight: var(--accent-1); 122 | --border-shadow: var(--color-base-55); 123 | } 124 | 125 | .theme-dark.w95-scheme-rose, 126 | .theme-light.w95-scheme-rose { 127 | --background-primary: #cdaeb4; 128 | --background-secondary: #cdaeb4; 129 | 130 | --border-highlight: #e6d6de; 131 | --border-shadow: #8a525c; 132 | 133 | --scrollbar-track: #ead8df; 134 | --scrollbar-thumb: #e6c6cc; 135 | 136 | --nav-item-background-active: #9c5d6a; 137 | --interactive-accent: #9c5d6a; 138 | } 139 | 140 | .theme-dark.w95-scheme-brick, 141 | .theme-light.w95-scheme-brick { 142 | --background-primary: #bdbea4; 143 | --background-secondary: #bdbea4; 144 | 145 | --border-highlight: #dedecd; 146 | --border-shadow: #514e35; 147 | 148 | --scrollbar-track: #d4d5c1; 149 | --scrollbar-thumb: #d5d6ba; 150 | 151 | --nav-item-background-active: #8b855a; 152 | --interactive-accent: #8b855a; 153 | } 154 | 155 | .theme-dark.w95-scheme-desert, 156 | .theme-light.w95-scheme-desert { 157 | --background-primary: #d5cab5; 158 | --background-secondary: #d5cab4; 159 | 160 | --border-highlight: #e6e6de; 161 | --border-shadow: #594d37; 162 | 163 | --scrollbar-track: #e1dacc; 164 | --scrollbar-thumb: #e6dcc8; 165 | 166 | --nav-item-background-active: #007d7b; 167 | --interactive-accent:; 168 | } 169 | 170 | .theme-dark.w95-scheme-eggplant, 171 | .theme-light.w95-scheme-eggplant { 172 | --background-primary: #8baea4; 173 | --background-secondary: #8baea4; 174 | 175 | --border-highlight: #c5d6d5; 176 | --border-shadow: #304943; 177 | 178 | --scrollbar-track: #aec5be; 179 | --scrollbar-thumb: #b1d6cc; 180 | 181 | --nav-item-background-active: #527d73; 182 | --interactive-accent: #527d73; 183 | } 184 | 185 | .theme-dark.w95-scheme-lilac, 186 | .theme-light.w95-scheme-lilac { 187 | --background-primary: #aca5d6; 188 | --background-secondary: #aca5d6; 189 | 190 | --border-highlight: #d5d2ee; 191 | --border-shadow: #3e3d45; 192 | 193 | --scrollbar-track: #cdcae3; 194 | --scrollbar-thumb: #bfb9e4; 195 | 196 | --nav-item-background-active: #524cab; 197 | --interactive-accent: #524cab; 198 | } 199 | 200 | .theme-dark.w95-scheme-maple, 201 | .theme-light.w95-scheme-maple { 202 | --background-primary: #e6d6ac; 203 | --background-secondary: #e6d6ac; 204 | 205 | --border-highlight: #eeead5; 206 | --border-shadow: #736026; 207 | 208 | --scrollbar-track: #e4d7b1; 209 | --scrollbar-thumb: #f1e2ba; 210 | 211 | --nav-item-background-active: #c5a540; 212 | --interactive-accent: #c5a540; 213 | } 214 | 215 | .theme-dark.w95-scheme-marine, 216 | .theme-light.w95-scheme-marine { 217 | --background-primary: #83beb5; 218 | --background-secondary: #83beb5; 219 | 220 | --border-highlight: #c5dfd5; 221 | --border-shadow: #7b8a84; 222 | 223 | --scrollbar-track: #aad6d0; 224 | --scrollbar-thumb: #9edcd2; 225 | 226 | --nav-item-background-active: #00147b; 227 | --interactive-accent: #00147b; 228 | 229 | --background-editor-primary: #c5dfd5; 230 | } 231 | 232 | .theme-dark.w95-scheme-mystery, 233 | .theme-light.w95-scheme-mystery { 234 | --background-primary: #687868; 235 | --background-secondary: #687868; 236 | 237 | --border-highlight: #92a292; 238 | --border-shadow: #414c41; 239 | 240 | --scrollbar-track: #a1aea1; 241 | --scrollbar-thumb: #859585; 242 | 243 | --nav-item-background-active: #b77840; 244 | --interactive-accent: #b77840; 245 | } 246 | 247 | .theme-dark.w95-scheme-plum, 248 | .theme-light.w95-scheme-plum { 249 | --background-primary: #a4958b; 250 | --background-secondary: #a4958b; 251 | 252 | --border-highlight: #d5cec4; 253 | --border-shadow: #d5cec4; 254 | 255 | --scrollbar-track: #cac0b9; 256 | --scrollbar-thumb: #bfb1a7; 257 | 258 | --nav-item-background-active: #a4958b; 259 | --interactive-accent: #a4958b; 260 | 261 | --background-editor-primary: #a4958b; 262 | } 263 | 264 | .theme-dark.w95-scheme-pumpkin, 265 | .theme-light.w95-scheme-pumpkin { 266 | --background-primary: #eed29c; 267 | --background-secondary: #eed29c; 268 | 269 | --border-highlight: #eed29c; 270 | --border-shadow: #7c5e19; 271 | 272 | --scrollbar-track: #f8e6c4; 273 | --scrollbar-thumb: #f6dca9; 274 | 275 | --nav-item-background-active: #7b157a; 276 | --interactive-accent: #7b157a; 277 | } 278 | 279 | .theme-dark.w95-scheme-rainy-day, 280 | .theme-light.w95-scheme-rainy-day { 281 | --background-primary: #7b95ac; 282 | --background-secondary: #7b95ac; 283 | 284 | --border-highlight: #bdcad5; 285 | --border-shadow: #4a617b; 286 | 287 | --scrollbar-track: #b0c2d3; 288 | --scrollbar-thumb: #9ab4cc; 289 | 290 | --nav-item-background-active: #4a617b; 291 | --interactive-accent: #4a617b; 292 | } 293 | 294 | .theme-dark.w95-scheme-slate, 295 | .theme-light.w95-scheme-slate { 296 | --background-primary: #9cb6c5; 297 | --background-secondary: #9cb6c5; 298 | 299 | --border-highlight: #cddade; 300 | --border-shadow: #527d94; 301 | 302 | --scrollbar-track: #c6d6df; 303 | --scrollbar-thumb: #b2cad8; 304 | 305 | --nav-item-background-active: #527d94; 306 | --interactive-accent: #527d94; 307 | } 308 | 309 | .theme-dark.w95-scheme-spruce, 310 | .theme-light.w95-scheme-spruce { 311 | --background-primary: #9cc6a4; 312 | --background-secondary: #9cc6a4; 313 | 314 | --border-highlight: #cde2cd; 315 | --border-shadow: #529562; 316 | 317 | --scrollbar-track: #bfd8c4; 318 | --scrollbar-thumb: #b3d8ba; 319 | 320 | --nav-item-background-active: #529562; 321 | --interactive-accent: #529562; 322 | } 323 | 324 | .theme-dark.w95-scheme-storm, 325 | .theme-light.w95-scheme-storm { 326 | --background-primary: #bdbebd; 327 | --background-secondary: #bdbebd; 328 | 329 | --border-highlight: #ffffff; 330 | --border-shadow: #7b7d7b; 331 | 332 | --scrollbar-track: #dedfde; 333 | --scrollbar-thumb: #cbcccb; 334 | 335 | --nav-item-background-active: #7b157a; 336 | --interactive-accent: #7b157a; 337 | } 338 | 339 | .theme-dark.w95-scheme-teal, 340 | .theme-light.w95-scheme-teal { 341 | --background-primary: #bdbebd; 342 | --background-secondary: #bdbebd; 343 | 344 | --border-highlight: #ffffff; 345 | --border-shadow: #7b7d7b; 346 | 347 | --scrollbar-track: #dedfde; 348 | --scrollbar-thumb: #cbcccb; 349 | 350 | --nav-item-background-active: #0b7d7b; 351 | --interactive-accent: #0b7d7b; 352 | } 353 | 354 | .theme-dark.w95-scheme-wheat, 355 | .theme-light.w95-scheme-wheat { 356 | --background-primary: #dede9c; 357 | --background-secondary: #dede9c; 358 | 359 | --border-highlight: #eeeecd; 360 | --border-shadow: #bdba39; 361 | 362 | --scrollbar-track: #dede9c; 363 | --scrollbar-thumb: #dede9c; 364 | 365 | --nav-item-background-active: #7b7d00; 366 | --interactive-accent: #7b7d00; 367 | } 368 | 369 | .theme-dark.w95-reactionary, 370 | .theme-light.w95-reactionary { 371 | --background-primary: #d4d0c8; 372 | --background-secondary: #d4d0c8; 373 | 374 | --text-normal: #181612; 375 | 376 | --nav-item-background-active: #3a6ea5; 377 | --nav-item-color-active: var(--accent-1); 378 | } 379 | 380 | .theme-dark, 381 | .theme-light { 382 | color-scheme: light; 383 | --highlight-mix-blend-mode: darken; 384 | --mono-rgb-0: 255, 255, 255; 385 | --mono-rgb-100: 0, 0, 0; 386 | --color-red-rgb: 233, 49, 71; 387 | --color-red: #e93147; 388 | --color-orange-rgb: 236, 117, 0; 389 | --color-orange: #ec7500; 390 | --color-yellow-rgb: 224, 172, 0; 391 | --color-yellow: #e0ac00; 392 | --color-green-rgb: 8, 185, 78; 393 | --color-green: #08b94e; 394 | --color-cyan-rgb: 0, 191, 188; 395 | --color-cyan: #00bfbc; 396 | --color-blue-rgb: 8, 109, 221; 397 | --color-blue: #086ddd; 398 | --color-purple-rgb: 120, 82, 238; 399 | --color-purple: #7852ee; 400 | --color-pink-rgb: 213, 57, 132; 401 | --color-pink: #d53984; 402 | --color-base-00: #ffffff; 403 | --color-base-05: #fcfcfc; 404 | --color-base-10: #fafafa; 405 | --color-base-20: #f6f6f6; 406 | --color-base-25: #e3e3e3; 407 | --color-base-30: #e0e0e0; 408 | --color-base-35: #d4d4d4; 409 | --color-base-40: #bdbdbd; 410 | --color-base-50: #ababab; 411 | --color-base-55: #808080; 412 | --color-base-60: #707070; 413 | --color-base-70: #5c5c5c; 414 | --color-base-100: #222222; 415 | --color-accent-hsl: var(--accent-h), var(--accent-s), var(--accent-l); 416 | --color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l)); 417 | --color-accent-1: hsl(calc(var(--accent-h) - 1), calc(var(--accent-s) * 1.01), calc(var(--accent-l) * 1.075)); 418 | --color-accent-2: hsl(calc(var(--accent-h) - 3), calc(var(--accent-s) * 1.02), calc(var(--accent-l) * 1.15)); 419 | --background-secondary-alt: var(--color-base-05); 420 | --background-modifier-box-shadow: rgba(0, 0, 0, 0.1); 421 | --background-modifier-cover: rgba(220, 220, 220, 0.4); 422 | --input-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 423 | 0 2px 3px 0 rgba(0, 0, 0, .05), 424 | 0 1px 1.5px 0 rgba(0, 0, 0, .03), 425 | 0 1px 2px 0 rgba(0, 0, 0, .04), 426 | 0 0 0 0 transparent; 427 | --input-shadow-hover: inset 0 0 0 1px rgba(0, 0, 0, 0.17), 428 | 0 2px 3px 0 rgba(0, 0, 0, .1), 429 | 0 1px 1.5px 0 rgba(0, 0, 0, .03), 430 | 0 1px 2px 0 rgba(0, 0, 0, .04), 431 | 0 0 0 0 transparent; 432 | --shadow-s: 0px 1px 2px rgba(0, 0, 0, 0.028), 433 | 0px 3.4px 6.7px rgba(0, 0, 0, .042), 434 | 0px 15px 30px rgba(0, 0, 0, .07); 435 | --shadow-l: 0px 1.8px 7.3px rgba(0, 0, 0, 0.071), 436 | 0px 6.3px 24.7px rgba(0, 0, 0, 0.112), 437 | 0px 30px 90px rgba(0, 0, 0, 0.2); 438 | 439 | --accent-1: #FFFFFF; 440 | --accent-2: #00FFFF; 441 | --accent-3: #00FF00; 442 | --accent-4: #FFFF00; 443 | --accent-5: #FF0000; 444 | --accent-6: #00007b; 445 | 446 | --accent-1-muted: #ff79c6; 447 | --accent-2-muted: #8be9fd; 448 | --accent-3-muted: #50fa7b; 449 | --accent-4-muted: #ffb86c; 450 | --accent-5-muted: #ff5555; 451 | --accent-6-muted: #bd93f9; 452 | 453 | --header-color: #34548a; 454 | --bold-color: #000000; 455 | --italic-color: #343b58; 456 | --text-highlight-bg: #485e3066; 457 | --text-faint: #4f5057; 458 | 459 | --background-editor-primary: #ffffff; 460 | 461 | --nav-files-background: var(--background-editor-primary); 462 | 463 | --indentation-guide-color: rgba(var(--mono-rgb-100), 0.4); 464 | 465 | /* Backgrounds */ 466 | --background-modifier-border: var(--color-base-60); 467 | --background-modifier-border-hover: var(--background-primary); 468 | --background-modifier-border-focus: var(--background-primary); 469 | --ribbon-background: var(--background-primary); 470 | --code-background: var(--accent-1); 471 | 472 | /* editor */ 473 | 474 | /* Normalize title bar colors */ 475 | --tab-container-background: var(--background-primary); 476 | --titlebar-background: var(--background-primary); 477 | --titlebar-background-focused: var(--background-primary); 478 | 479 | /* Graph adjustments */ 480 | --graph-line: var(--background-primary, var(--background-modifier-border-focus)); 481 | 482 | /* UI font colors */ 483 | --h1-color: var(--header-color); 484 | --h2-color: var(--header-color); 485 | --h3-color: var(--header-color); 486 | --h4-color: var(--header-color); 487 | --h5-color: var(--header-color); 488 | --h6-color: var(--header-color); 489 | } 490 | 491 | body { 492 | /* Font sizes */ 493 | --header-size: 1.4rem; 494 | --h1-size: var(--header-size); 495 | --h2-size: 1.3rem; 496 | --h3-size: 1.2rem; 497 | --h4-size: 1.1rem; 498 | --h5-size: 1rem; 499 | --h6-size: 0.9rem; 500 | 501 | /* UI font sizes */ 502 | --font-ui-smaller: 11px; 503 | --font-ui-small: 12px; 504 | --font-ui-medium: 14px; 505 | --font-ui-large: 20px; 506 | 507 | /* tabs */ 508 | --tab-radius-active: 1px; 509 | --tab-curve: 1px; 510 | 511 | /* buttons */ 512 | --clickable-icon-radius: 0; 513 | } 514 | 515 | button, 516 | button.mod-cta, 517 | button:not(.clickable-icon) { 518 | background-color: var(--background-primary); 519 | border: 2px outset var(--color-base-30); 520 | border-radius: 0; 521 | color: var(--color-base-100); 522 | } 523 | 524 | button:active, 525 | button.mod-cta:active { 526 | background-color: var(--background-primary); 527 | border: 2px inset var(--color-base-30); 528 | border-radius: 0; 529 | color: var(--color-base-100); 530 | } 531 | 532 | 533 | select.dropdown { 534 | border-radius: 0; 535 | border: 2px inset var(--color-base-30); 536 | } 537 | 538 | .clickable-icon { 539 | border-top: 1px solid var(--border-highlight); 540 | border-left: 1px solid var(--border-highlight); 541 | border-right: 1px solid var(--border-shadow); 542 | border-bottom: 1px solid var(--border-shadow); 543 | } 544 | 545 | .clickable-icon:active { 546 | border-top: 1px solid var(--border-shadow); 547 | border-left: 1px solid var(--border-shadow); 548 | border-right: 1px solid var(--border-highlight); 549 | border-bottom: 1px solid var(--border-highlight); 550 | } 551 | 552 | .clickable-icon::before { 553 | content: ' '; 554 | } 555 | 556 | .side-dock-settings, 557 | .side-dock-actions { 558 | gap: 0; 559 | } 560 | 561 | .workspace-tab-container .view-header {} 562 | 563 | .workspace-tab-container .view-header-title-container { 564 | height: var(--header-height); 565 | } 566 | 567 | .mod-right-split .workspace-tab-header-container-inner, 568 | .mod-left-split .workspace-tab-header-container-inner { 569 | gap: 0; 570 | margin-left:1rem; 571 | } 572 | .mod-right-split .workspace-tab-header, 573 | .mod-left-split .workspace-tab-header { 574 | border-radius: 0; 575 | } 576 | 577 | .mod-right-split .workspace-tab-header, 578 | .mod-left-split .workspace-tab-header { 579 | border-top: 1px solid var(--border-highlight); 580 | border-left: 1px solid var(--border-highlight); 581 | border-right: 1px solid var(--border-shadow); 582 | border-bottom: 1px solid var(--border-shadow); 583 | color: var(--tab-text-color-active); 584 | background-color: var(--tab-background-active); 585 | 586 | box-shadow: none; 587 | } 588 | 589 | .mod-right-split .workspace-tab-header.is-active, 590 | .mod-left-split .workspace-tab-header.is-active { 591 | border-top: 1px solid var(--tab-outline-color); 592 | border-left: 1px solid var(--tab-outline-color); 593 | border-bottom: 1px solid #FFFFFF; 594 | border-right: 1px solid var(--color-base-20); 595 | 596 | box-shadow: none; 597 | } 598 | .mod-right-split .workspace-tab-header.is-active .workspace-tab-header-inner, 599 | .mod-left-split .workspace-tab-header.is-active .workspace-tab-header-inner { 600 | border: 0; 601 | } 602 | 603 | .mod-root .workspace-tab-header:not(.is-active) { 604 | top: 3px; 605 | border-top: 1px solid var(--border-highlight); 606 | border-left: 1px solid var(--border-highlight); 607 | border-right: 1px solid var(--border-shadow); 608 | border-right: 1px solid var(--border-shadow); 609 | color: var(--tab-text-color-active); 610 | } 611 | 612 | .mod-root .workspace-tab-header :not(.is-active) * { 613 | border: none; 614 | } 615 | 616 | .mod-root .workspace-tab-header-inner::after { 617 | background: none !important; 618 | } 619 | 620 | .workspace-tab-header { 621 | align-items: center; 622 | border-radius: var(--tab-radius) var(--tab-radius) 0 0; 623 | } 624 | 625 | .workspace-tab-header-inner { 626 | margin: 1px 0; 627 | border-radius: var(--tab-radius) var(--tab-radius) 0 0; 628 | } 629 | 630 | .workspace-tab-header.is-active .workspace-tab-header-inner { 631 | border: 1px dotted var(--color-base-70); 632 | } 633 | 634 | .workspace-tab-header-container { 635 | display: flex; 636 | background-color: var(--tab-container-background); 637 | height: var(--header-height); 638 | border-bottom: var(--tab-outline-width) solid var(--border-highlight); 639 | flex: 0 0 auto; 640 | padding-left: 0; 641 | padding-right: var(--size-4-2); 642 | position: relative; 643 | } 644 | 645 | .workspace-ribbon { 646 | border-right: var(--divider-width) solid var(--border-shadow); 647 | } 648 | 649 | .workspace-ribbon.mod-left:before { 650 | border-bottom: 1px solid var(--accent-1); 651 | opacity: 0; 652 | } 653 | 654 | .workspace-tab-header.is-active { 655 | border-top: 1px solid var(--border-highlight); 656 | border-left: 1px solid var(--border-highlight); 657 | box-shadow: 1px 1px 0 var(--tab-outline-width) var(--tab-outline-color); 658 | color: var(--tab-text-color-active); 659 | background-color: var(--tab-background-active); 660 | z-index: 2; 661 | } 662 | 663 | .workspace-leaf-resize-handle { 664 | opacity: 0 !important; 665 | } 666 | 667 | .workspace-tabs .workspace-leaf .view-content { 668 | background-color: var(--background-editor-primary); 669 | border: 4px ridge var(--border-highlight); 670 | } 671 | 672 | .nav-action-button:active {} 673 | 674 | .nav-header { 675 | height: var(--header-height); 676 | /* todo: make this more dynamic */ 677 | background-color: var(--background-primary); 678 | } 679 | 680 | .mod-left-split .nav-header { 681 | border-left: var(--divider-width) solid var(--border-highlight); 682 | } 683 | 684 | .nav-files-container { 685 | background-color: var(--nav-files-background); 686 | border: 4px ridge var(--border-highlight); 687 | border-right: 0; 688 | } 689 | 690 | .nav-buttons-container { 691 | padding: 0; 692 | gap: 0; 693 | } 694 | 695 | .inline-title { 696 | font-size: 2rem; 697 | font-family: system-ui, Helvetica, Arial, sans-serif; 698 | background-color: #000; 699 | -webkit-background-clip: text; 700 | -webkit-text-fill-color: transparent; 701 | } 702 | 703 | .tree-item-self.is-being-renamed:focus-within { 704 | color: var(--tab-text-color-active); 705 | } 706 | 707 | /* vault switcher */ 708 | .workspace-sidedock-vault-profile { 709 | border-left: 1px solid var(--border-highlight); 710 | border-bottom: 1px solid var(--border-shadow); 711 | } 712 | 713 | /* scroll bar */ 714 | ::-webkit-scrollbar { 715 | width: 16px; 716 | } 717 | 718 | ::-webkit-scrollbar-track { 719 | background-color: var(--scrollbar-track); 720 | } 721 | 722 | ::-webkit-scrollbar-thumb { 723 | border: 2px outset var(--scrollbar-thumb); 724 | } 725 | 726 | /* status bar */ 727 | .status-bar { 728 | position: inherit; 729 | border-radius: 0; 730 | border-style: none; 731 | border-width: 0; 732 | background-color: inherit; 733 | } 734 | 735 | .nav-folder.mod-root .nav-folder>.nav-folder-children { 736 | border-left: var(--nav-indentation-guide-width) dotted var(--nav-indentation-guide-color); 737 | } 738 | 739 | .modal-close-button { 740 | margin-right: 0.25rem; 741 | } 742 | 743 | /* search results */ 744 | .search-result:not(.is-collapsed) .search-result-file-title { 745 | color: var(--nav-item-color); 746 | } 747 | 748 | /* mobile */ 749 | 750 | .is-mobile .workspace-drawer.mod-left { 751 | border-right: 1px outset var(--color-base-60); 752 | } 753 | 754 | .is-mobile .workspace-drawer.mod-right { 755 | border-left: 1px outset var(--color-base-60); 756 | } 757 | 758 | .is-mobile .nav-files-container { 759 | border: 4px ridge var(--color-base-25); 760 | } 761 | 762 | .is-mobile .empty-state-action { 763 | background-color: transparent; 764 | } 765 | 766 | .is-mobile .workspace-drawer-inner { 767 | padding-bottom: var(--safe-area-inset-bottom); 768 | } 769 | --------------------------------------------------------------------------------