├── README.md ├── UNLICENSE ├── dark.png ├── light.png ├── manifest.json ├── theme-beta.css ├── theme.css └── thumbnail.png /README.md: -------------------------------------------------------------------------------- 1 | # Obsidian Fusion 2 | 3 | > [!note] 4 | > (2024-05-24) Check out the rewritten beta version: [wiki/Fusion v0.4 beta](https://github.com/zamsyt/obsidian-fusion/wiki/Fusion-v0.4-beta) 5 | 6 | Theme for Obsidian which intends to remove unnecessary visual elements. 7 | 8 | ![](dark.png) 9 | 10 | ![](light.png) 11 | 12 | [![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/zamsyt) 13 | -------------------------------------------------------------------------------- /UNLICENSE: -------------------------------------------------------------------------------- 1 | This is free and unencumbered software released into the public domain. 2 | 3 | Anyone is free to copy, modify, publish, use, compile, sell, or 4 | distribute this software, either in source code form or as a compiled 5 | binary, for any purpose, commercial or non-commercial, and by any 6 | means. 7 | 8 | In jurisdictions that recognize copyright laws, the author or authors 9 | of this software dedicate any and all copyright interest in the 10 | software to the public domain. We make this dedication for the benefit 11 | of the public at large and to the detriment of our heirs and 12 | successors. We intend this dedication to be an overt act of 13 | relinquishment in perpetuity of all present and future rights to this 14 | software under copyright law. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 17 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 18 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 19 | IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR 20 | OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, 21 | ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR 22 | OTHER DEALINGS IN THE SOFTWARE. 23 | 24 | For more information, please refer to 25 | -------------------------------------------------------------------------------- /dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zamsyt/obsidian-fusion/72ffc13e934dc0fff36caa84ec163945aa4ba345/dark.png -------------------------------------------------------------------------------- /light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zamsyt/obsidian-fusion/72ffc13e934dc0fff36caa84ec163945aa4ba345/light.png -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Fusion", 3 | "version": "0.3.0", 4 | "minAppVersion": "1.0", 5 | "author": "zamsyt", 6 | "authorUrl": "https://github.com/zamsyt" 7 | } 8 | -------------------------------------------------------------------------------- /theme-beta.css: -------------------------------------------------------------------------------- 1 | /* Fusion v0.4.0-beta */ 2 | .theme-dark { 3 | --c0-r: 17; --c0-g: 19; --c0-b: 30; 4 | --c6-r: 218; --c6-g: 218; --c6-b: 218; 5 | 6 | --k1: var(--k1-dark, 0.04); 7 | --k2: var(--k2-dark, 0.23); 8 | --k3: var(--k3-dark, 0.29); 9 | --k4: var(--k4-dark, 0.47); 10 | --k5: var(--k5-dark, 0.65); 11 | } 12 | 13 | .theme-light { 14 | --c0-r: 239; --c0-g: 245; --c0-b: 255; 15 | --c6-r: 34; --c6-g: 34; --c6-b: 34; 16 | 17 | --k1: var(--k1-light, 0.04); 18 | --k2: var(--k2-light, 0.21); 19 | --k3: var(--k3-light, 0.31); 20 | --k4: var(--k4-light, 0.54); 21 | --k5: var(--k5-light, 0.77); 22 | } 23 | 24 | .theme-dark, .theme-light { 25 | --delta-r: calc(var(--c6-r) - var(--c0-r)); 26 | --delta-g: calc(var(--c6-g) - var(--c0-g)); 27 | --delta-b: calc(var(--c6-b) - var(--c0-b)); 28 | 29 | --fusion-color-0-rgb: var(--c0-r), var(--c0-g), var(--c0-b); 30 | --fusion-color-1-rgb: 31 | calc(var(--c0-r) + var(--delta-r) * var(--k1)), 32 | calc(var(--c0-g) + var(--delta-g) * var(--k1)), 33 | calc(var(--c0-b) + var(--delta-b) * var(--k1)); 34 | --fusion-color-2-rgb: 35 | calc(var(--c0-r) + var(--delta-r) * var(--k2)), 36 | calc(var(--c0-g) + var(--delta-g) * var(--k2)), 37 | calc(var(--c0-b) + var(--delta-b) * var(--k2)); 38 | --fusion-color-3-rgb: 39 | calc(var(--c0-r) + var(--delta-r) * var(--k3)), 40 | calc(var(--c0-g) + var(--delta-g) * var(--k3)), 41 | calc(var(--c0-b) + var(--delta-b) * var(--k3)); 42 | --fusion-color-4-rgb: 43 | calc(var(--c0-r) + var(--delta-r) * var(--k4)), 44 | calc(var(--c0-g) + var(--delta-g) * var(--k4)), 45 | calc(var(--c0-b) + var(--delta-b) * var(--k4)); 46 | --fusion-color-5-rgb: 47 | calc(var(--c0-r) + var(--delta-r) * var(--k5)), 48 | calc(var(--c0-g) + var(--delta-g) * var(--k5)), 49 | calc(var(--c0-b) + var(--delta-b) * var(--k5)); 50 | --fusion-color-6-rgb: var(--c6-r), var(--c6-g), var(--c6-b); 51 | 52 | --fusion-color-0: rgb(var(--fusion-color-0-rgb)); 53 | --fusion-color-1: rgb(var(--fusion-color-1-rgb)); 54 | --fusion-color-2: rgb(var(--fusion-color-2-rgb)); 55 | --fusion-color-3: rgb(var(--fusion-color-3-rgb)); 56 | --fusion-color-4: rgb(var(--fusion-color-4-rgb)); 57 | --fusion-color-5: rgb(var(--fusion-color-5-rgb)); 58 | --fusion-color-6: rgb(var(--fusion-color-6-rgb)); 59 | 60 | --accent-h: 221; 61 | --accent-s: 33%; 62 | --accent-l: 59%; 63 | } 64 | 65 | .theme-dark, .theme-light { 66 | --color-base-00: var(--fusion-color-0); 67 | --color-base-05: var(--fusion-color-0); 68 | --color-base-10: var(--fusion-color-1); 69 | --color-base-20: var(--fusion-color-1); 70 | --color-base-25: var(--fusion-color-1); 71 | --color-base-30: var(--fusion-color-2); 72 | --color-base-35: var(--fusion-color-2); 73 | --color-base-40: var(--fusion-color-2); 74 | --color-base-50: var(--fusion-color-2); 75 | --color-base-60: var(--fusion-color-3); 76 | --color-base-70: var(--fusion-color-4); 77 | --color-base-100: var(--fusion-color-6); 78 | 79 | --fusion-hc-bg: rgb(var(--mono-rgb-0)); 80 | --fusion-hc-fg: rgb(var(--mono-rgb-100)); 81 | --fusion-bg: var(--fusion-color-0); 82 | --fusion-bg-2: var(--fusion-color-1); 83 | --fusion-bg-element-faint: var(--fusion-color-2); 84 | --fusion-bg-element: var(--fusion-color-3); 85 | --fusion-bg-text: var(--fusion-color-4); 86 | --fusion-fg-secondary: var(--fusion-color-5); 87 | --fusion-fg: var(--fusion-color-6); 88 | 89 | --interactive-normal: var(--fusion-bg); 90 | --background-modifier-form-field: var(--fusion-bg); 91 | } 92 | 93 | body { 94 | /*--text-normal: var(--fusion-fg);*/ 95 | 96 | /* Remove background color variations */ 97 | --background-secondary: var(--fusion-bg); 98 | --titlebar-background-focused: var(--fusion-bg); 99 | 100 | /*--list-marker-color: var(--fusion-bg-element); /*make more visible*/ 101 | /*--code-normal: var(--fusion-fg-secondary);*/ 102 | 103 | --tab-text-color-focused-active: var(--fusion-fg-secondary); 104 | 105 | --code-comment: var(--fusion-bg-text); 106 | } 107 | 108 | /* Hide lines and borders */ 109 | body { --divider-color: transparent; } 110 | .setting-item, .modal-setting-nav-bar { border-color: transparent; } 111 | .mod-community-theme .community-item { --background-modifier-border: transparent; } 112 | 113 | /* Tabs */ 114 | /* Hide tab close buttons */ 115 | :root:root .workspace-tab-header:not(:hover, :only-child) .workspace-tab-header-inner-close-button { opacity: 0; } 116 | @media (hover: none) { 117 | :root:root .workspace-tab-header.is-active .workspace-tab-header-inner-close-button { opacity: 1; } 118 | } 119 | 120 | /* Make tab dividers consistently visible */ 121 | body { --tab-background-active: transparent; } 122 | :root:root .workspace-tab-header-inner::after { opacity: 1; } 123 | .workspace-tab-header:last-child .workspace-tab-header-inner::after { opacity: 0; } 124 | 125 | /* Improve text contrast with hover background (when window not focused) */ 126 | .workspace-tab-header:hover { color: var(--fusion-bg-text); } 127 | 128 | /* Add hover background to active tab too */ 129 | .workspace-tab-header:hover .workspace-tab-header-inner { 130 | background-color: var(--background-modifier-hover); 131 | } 132 | 133 | /* Move new tab button to right */ 134 | .workspace-tab-header-spacer { display: none; } 135 | .workspace-tab-header-new-tab { 136 | margin-left: auto; 137 | margin-right: var(--size-4-1); 138 | } 139 | 140 | /* Hide only tab */ 141 | /* WIP */ 142 | .mod-root .workspace-tab-header-container-inner:has(> :only-child) { 143 | width: 100%; 144 | margin: 0; 145 | padding: 0; 146 | /*overflow: visible;*/ 147 | --tab-width: auto; 148 | /*flex-grow: 1;*/ 149 | margin-left: auto; 150 | } 151 | .mod-root .workspace-tab-header-container-inner:has(> :only-child) + .workspace-tab-header-new-tab { 152 | margin-left: initial; 153 | } 154 | .workspace .mod-root .workspace-tab-header:only-child { 155 | /*padding: 0;*/ 156 | padding: var(--size-4-2) 0 var(--size-2-3); 157 | } 158 | /* Match only tab close button to the other tab header buttons */ 159 | .workspace-tab-header:only-child .workspace-tab-header-inner-close-button { 160 | /*padding: var(--size-4-2) 0 var(--size-2-3);*/ 161 | padding: var(--size-2-2); 162 | color: var(--icon-color); 163 | } 164 | .workspace-tab-header:only-child .workspace-tab-header-inner-title { 165 | display: none; 166 | } 167 | .workspace-tab-header:only-child .workspace-tab-header-inner { 168 | background: transparent; 169 | justify-content: right; 170 | } 171 | /*quick alignment fix*/ 172 | .workspace-tab-header-container { 173 | border-bottom: none; 174 | } 175 | 176 | /* Make icons less prominent */ 177 | body { --icon-color: var(--fusion-bg-element); } 178 | .titlebar-button:not(:hover) { color: var(--fusion-bg-element); } /* window controls */ 179 | .clickable-icon[aria-disabled='true'] { color: var(--fusion-bg-element-faint); } /* disabled buttons */ 180 | 181 | .vertical-tab-nav-item { color: var(--fusion-fg-secondary); } /* Settings navigation */ 182 | 183 | :is(.mod-left-split, .mod-right-split) .workspace-tab-header:is(.has-active-menu, .is-active, :hover) .workspace-tab-header-inner-icon { 184 | color: var(--fusion-bg-text); 185 | } 186 | 187 | 188 | /* Buttons, Input */ 189 | /* Add border to replace button background color */ 190 | button:not(.clickable-icon, .mod-cta, .mod-warning), .dropdown { 191 | border: 1px solid var(--background-modifier-border); 192 | } 193 | .search-results-info .dropdown { border: none; } 194 | 195 | body { --text-on-accent: var(--fusion-hc-bg); } 196 | 197 | 198 | /* Preview mode Metadata block */ 199 | .frontmatter-container .frontmatter-container-header { 200 | border-bottom: none; /* Hide header underline */ 201 | /* Reduce padding to compensate */ 202 | padding-bottom: 0; } 203 | .frontmatter-container.is-collapsed { 204 | padding: var(--size-4-2) 0; 205 | } 206 | 207 | /* Search */ 208 | .search-results-info { border-color: transparent; } 209 | /*.search-result-container { padding-top: 0; } /* Reduce padding to balance for removed border */ 210 | /*.search-result-container { 211 | /*padding: ;/*0 var(--size-4-3) var(--size-4-6) var(--size-4-3)*/ 212 | /*var(--size-4-3) var(--size-4-3) var(--size-4-4)*/ 213 | /*padding: 0 var(--sidebar-padding) var(--size-4-4); /* Reduce padding to balance for removed borders */ 214 | /*}*/ 215 | 216 | /* Reduce padding to balance for removed borders */ 217 | body { 218 | --file-margins: var(--size-4-6); 219 | 220 | --sidebar-padding: 6px; 221 | } 222 | .nav-files-container { padding: 0 var(--sidebar-padding) var(--size-4-6); } /*0 var(--size-4-3) var(--size-4-6) var(--size-4-3);*/ 223 | .search-result-container { padding: 0 var(--sidebar-padding) var(--size-4-4); } /*var(--size-4-3) var(--size-4-3) var(--size-4-4)*/ 224 | 225 | .backlink-pane, .outgoing-link-pane, 226 | .tag-container, 227 | .outline { 228 | /*var(--size-4-3) var(--size-4-3) var(--size-4-8)*/ 229 | padding: var(--size-4-3) var(--sidebar-padding) var(--size-4-8); 230 | } 231 | 232 | /* Adjust transition to make resize handles easier to grab */ 233 | .workspace-leaf-resize-handle { transition-duration: 300ms; } 234 | .workspace-leaf-resize-handle:hover { transition-duration: 10ms; } 235 | /* Increase size of grab area */ 236 | .workspace-leaf-resize-handle { overflow: visible; } 237 | body { --divider-grab-radius: 12px; } 238 | .workspace-leaf-resize-handle::before { 239 | content: ""; 240 | position: absolute; 241 | width: calc(100% + var(--divider-grab-radius)); 242 | height: calc(100% + var(--divider-grab-radius)); 243 | bottom: 0; 244 | } 245 | .workspace-tabs:not(:last-child) { overflow: visible; } 246 | 247 | /* Style settings reset button colors */ 248 | .themed-color-wrapper > .theme-light button { 249 | background: white; 250 | color: black; 251 | } 252 | .themed-color-wrapper > .theme-dark button { 253 | background: #222; 254 | color: white; 255 | } 256 | 257 | body { 258 | --tab-header-height: var(--header-height); 259 | --view-header-height: 30px; 260 | } 261 | 262 | /* View header */ 263 | .view-header { 264 | position: absolute; 265 | width: calc(100% - var(--size-4-3)); /* Leave space for scrollbar */ 266 | height: var(--view-header-height); 267 | } 268 | :root:root:root .view-header { background: transparent; } 269 | /* Shift page back down */ 270 | .markdown-preview-view, 271 | .view-content > .markdown-source-view.mod-cm6 > .cm-editor > .cm-scroller { 272 | padding-top: var(--view-header-height); 273 | } 274 | /* TODO 275 | - button backgrounds 276 | - titlebar (height/position) 277 | */ 278 | /* TODO: clean up, fix jumpiness */ 279 | .mod-root .workspace-tab-header-container:has(.workspace-tab-header-container-inner > :only-child) { 280 | height: 0; } 281 | .workspace-tab-header-container-inner ~ * { 282 | z-index: 1; 283 | height: var(--header-height); } 284 | .workspace-tab-header-container:has(.workspace-tab-header-container-inner > :only-child) + * .view-header { 285 | margin-top: var(--header-height); } 286 | .mod-root .workspace-tab-header-container:has(.workspace-tab-header-container-inner > :only-child) 287 | + * :is(.view-content > * > .markdown-preview-view, .view-content > .markdown-source-view.mod-cm6 > .cm-editor > .cm-scroller) { 288 | padding-top: calc(var(--tab-header-height) + var(--view-header-height)); 289 | } 290 | 291 | @media (hover: hover) { 292 | .view-header-title-container:not(:hover, :focus-within), /* View header title */ 293 | .workspace-tab-header-container:not(:hover) + * .view-header:not(:hover) .clickable-icon /* Header buttons */ 294 | { opacity: 0; } 295 | } 296 | /* Add background for buttons */ 297 | :root .view-header .clickable-icon { 298 | background-color: var(--fusion-color-0); 299 | opacity: .98; 300 | } 301 | /* Adjust title container size */ 302 | .view-header-title-container { 303 | margin: 0 auto; 304 | flex-grow: 0; 305 | background: var(--fusion-bg); 306 | align-self: center; 307 | min-height: 30px; 308 | transition: opacity 0.15s ease-in-out; 309 | } 310 | /* push aside the fade overlay (FIXME: leaves an annoying empty space) */ 311 | .view-header-title::after { 312 | content: ""; 313 | display: inline-block; 314 | width: 30px; 315 | } 316 | /* TODO: yeets to the side when clicking off. fix.. animation? */ 317 | .mod-root .workspace-tab-header-container-inner:has(> :only-child)::after { 318 | z-index: 1; 319 | content: ""; 320 | width: 100%; 321 | /*width: calc(100% - var(--ribbon-width));*/ 322 | /*background: #f001;*/ 323 | -webkit-app-region: drag; 324 | height: var(--header-height); 325 | } 326 | 327 | @media (hover: hover) { 328 | .titlebar-button-container, 329 | .workspace-tab-header-container > :not(.workspace-tab-header-container-inner), 330 | .status-bar { 331 | transition: opacity 0.15s ease-in-out; 332 | } 333 | 334 | /* FIXME: tab header buttons take up space even when hidden */ 335 | /*body:not(:has(:is( 336 | .titlebar-button-container.mod-right, 337 | .workspace-tabs.mod-top-right-space .workspace-tab-header-container 338 | ):hover)):not(:has(.is-right-sidedock-open)) :is( 339 | .titlebar-button-container.mod-right, 340 | .workspace .mod-root .workspace-tabs.mod-top-right-space .workspace-tab-header-container > :not(.workspace-tab-header-container-inner) 341 | ), 342 | .workspace:not(.is-right-sidedock-open) .mod-root .workspace-tabs:not(.mod-top-right-space) .workspace-tab-header-container:not(:hover) > :not(.workspace-tab-header-container-inner) 343 | { opacity: 0; }*/ 344 | 345 | body/*.hide-top-buttons*/:not(:has(:is( 346 | .titlebar-button-container.mod-right, 347 | .workspace-tabs.mod-top-right-space .workspace-tab-header-container 348 | ):hover)):not(:has(.is-right-sidedock-open)) :is( 349 | /**/.titlebar-button-container.mod-right,/**/ 350 | .workspace .mod-root .workspace-tabs.mod-top-right-space .workspace-tab-header-container > :not(.workspace-tab-header-container-inner) 351 | )/*, 352 | .workspace:not(.is-right-sidedock-open) .mod-root .workspace-tabs:not(.mod-top-right-space) .workspace-tab-header-container:not(:hover) > :not(.workspace-tab-header-container-inner)*/ 353 | { opacity: 0; } 354 | 355 | /* TODO 356 | - Does right sidedock need to reveal tab header buttons? 357 | */ 358 | 359 | 360 | /* Hide status bar (when sidedocks closed) */ 361 | 362 | body:not(:has(.is-left-sidedock-open, .is-right-sidedock-open)) { 363 | /*.status-bar:not(:hover) { 364 | opacity: 0; 365 | }*/ 366 | } 367 | } 368 | 369 | /* Ribbon */ 370 | /* TODO: canvas? (margin) */ 371 | :root:root .workspace-ribbon { 372 | transition: opacity 0.15s ease-in-out; 373 | } 374 | /*.hide-ribbon*/ :not(.is-left-sidedock-open) > .workspace-ribbon:not(:hover) { 375 | opacity: 0; 376 | } 377 | 378 | /* @settings 379 | name: Fusion (beta) 380 | id: fusion 381 | settings: 382 | - 383 | id: c0 384 | title: "Background color" 385 | type: variable-themed-color 386 | format: rgb-split 387 | default-dark: '#11131E' 388 | default-light: '#EFF5FF' 389 | - 390 | id: c6 391 | title: "Text color" 392 | type: variable-themed-color 393 | format: rgb-split 394 | default-dark: '#dadada' 395 | default-light: '#222' 396 | - 397 | id: intermediate-colors 398 | type: heading 399 | title: Intermediate colors 400 | level: 2 401 | - 402 | id: interpolation-light 403 | type: heading 404 | title: Light 405 | level: 3 406 | collapsed: true 407 | - <<: &slider {type: variable-number-slider, min: 0, max: 1, step: 0.01} 408 | <<: { id: k1-light, title: k1, default: 0.04} 409 | - {<<: *slider, id: k2-light, title: k2, default: 0.21} 410 | - {<<: *slider, id: k3-light, title: k3, default: 0.31} 411 | - {<<: *slider, id: k4-light, title: k4, default: 0.54} 412 | - {<<: *slider, id: k5-light, title: k5, default: 0.77} 413 | - 414 | id: interpolation-dark 415 | type: heading 416 | title: Dark 417 | level: 3 418 | collapsed: true 419 | - {<<: *slider, id: k1-dark, title: k1, default: 0.04} 420 | - {<<: *slider, id: k2-dark, title: k2, default: 0.23} 421 | - {<<: *slider, id: k3-dark, title: k3, default: 0.29} 422 | - {<<: *slider, id: k4-dark, title: k4, default: 0.47} 423 | - {<<: *slider, id: k5-dark, title: k5, default: 0.65} 424 | */ 425 | -------------------------------------------------------------------------------- /theme.css: -------------------------------------------------------------------------------- 1 | /* @settings 2 | 3 | name: Fusion 4 | id: fusion 5 | settings: 6 | - 7 | id: colors 8 | title: Colors 9 | type: heading 10 | level: 1 11 | - 12 | id: theme-variant 13 | title: Color scheme 14 | type: class-select 15 | allowEmpty: false 16 | default: fusion-default 17 | options: 18 | - 19 | label: Blue (default) 20 | value: fusion-default 21 | - 22 | label: Black/White 23 | value: fusion-black 24 | - 25 | id: high-contrast-text 26 | title: Increase text contrast 27 | description: Use a brighter text color. 28 | type: class-toggle 29 | - 30 | id: hidden-elements 31 | title: Hidden elements 32 | type: heading 33 | level: 1 34 | - 35 | id: no-note-padding 36 | title: Disable note padding 37 | description: Removes the bottom padding from notes. (Hides scrollbar in short notes) 38 | type: class-toggle 39 | - 40 | id: show-view-header-title 41 | title: Show view header title 42 | description: Show view header title (while hovering). 43 | type: class-toggle 44 | */ 45 | 46 | body.no-note-padding :is(.cm-content, .markdown-preview-sizer) { 47 | padding-bottom: 0 !important; 48 | } 49 | 50 | .setting-item { 51 | border-top: none; 52 | } 53 | 54 | .frontmatter-container.is-collapsed { 55 | padding: var(--size-4-2) 0; } 56 | .frontmatter-container .frontmatter-container-header { 57 | padding-bottom: 0; 58 | border-bottom: none; 59 | } 60 | 61 | :root .theme-dark { 62 | --color-base-00: #0b0e14; 63 | --color-base-10: #1c2028; 64 | --color-base-20: #2d323c; 65 | --color-base-25: #363b46; 66 | --color-base-30: #3f4450; 67 | --color-base-35: #474d5a; 68 | --color-base-40: #505664; 69 | --color-base-50: #626879; 70 | --color-base-60: #737a8d; 71 | --color-base-70: #848ca1; 72 | --color-base-100: #b9c3de; 73 | 74 | --text-on-accent: black; 75 | --background-modifier-form-field: var(--background-primary-alt); 76 | } 77 | 78 | .theme-light { 79 | --color-base-00: #b9c3de; 80 | --color-base-05: #b0b9d3; 81 | --color-base-10: #a7b0c9; 82 | --color-base-20: #969eb5; 83 | --color-base-25: #8d95ab; 84 | --color-base-30: #848ca1; 85 | --color-base-35: #7c8397; 86 | --color-base-40: #737a8d; 87 | --color-base-50: #626879; 88 | --color-base-60: #505664; 89 | --color-base-70: #3f4450; 90 | --color-base-100: #0b0e14; 91 | --accent-l: 60%; 92 | 93 | --color-yellow-rgb: 190, 146, 0; 94 | --color-yellow: rgb(var(--color-yellow-rgb)); 95 | } 96 | 97 | :root:root body.high-contrast-text { 98 | --color-base-100: rgb(var(--mono-rgb-100)); 99 | } 100 | 101 | :root body.fusion-black { 102 | --accent-s: 60%; 103 | --accent-l: 60%; 104 | --color-base-00: rgb(var(--mono-rgb-0)); 105 | } 106 | 107 | button:not(.clickable-icon, .mod-cta, .mod-warning), .dropdown { 108 | border: 1px solid var(--background-modifier-border); 109 | } 110 | 111 | :root:root body { 112 | --interactive-normal: var(--background-primary); 113 | } 114 | 115 | body { 116 | --background-primary-alt: var(--background-primary); 117 | --background-secondary: var(--background-primary); 118 | --background-modifier-active-hover: var(--background-primary); 119 | 120 | --titlebar-background: var(--background-primary); 121 | --titlebar-background-focused: var(--background-primary); 122 | 123 | --divider-color: var(--background-primary); 124 | --tab-divider-color: var(--background-primary); 125 | 126 | --icon-color: var(--text-faint); 127 | 128 | --accent-h: 228; 129 | 130 | --hr-color: var(--text-accent); 131 | } 132 | 133 | .checkbox-container { 134 | background: var(--color-base-10); 135 | } 136 | 137 | .titlebar-button:not(:hover) { color: var(--text-faint); } 138 | 139 | .workspace-tab-header:not(.is-active, :hover) .workspace-tab-header-inner-title { 140 | color: var(--tab-text-color); 141 | } 142 | 143 | .workspace-tab-header-inner-title { text-align: center; } 144 | 145 | :root hr { border-width: 1px; } 146 | 147 | :root:root:root .view-header { 148 | background: transparent; 149 | } 150 | .view-header { 151 | position: absolute; 152 | width: calc(100% - var(--size-4-6)); 153 | } 154 | 155 | :root .view-header .clickable-icon { 156 | background-color: var(--background-primary); 157 | opacity: .8; 158 | } 159 | 160 | body:not(.show-view-header-title) .view-header-title-container > *, 161 | .view-header-title-container::after { 162 | display: none; 163 | } 164 | 165 | @media (hover: hover) { 166 | :root:root .workspace-tab-header:not(:hover) .workspace-tab-header-inner-close-button, 167 | .workspace-tab-header-container:not(:hover) + * .view-header:not(:hover) .clickable-icon { 168 | opacity: 0; 169 | } 170 | 171 | body.show-view-header-title .view-header-title-container:not(:hover) > *:not(:focus) { 172 | opacity: 0 !important; 173 | } 174 | } 175 | 176 | @media (hover: none) { 177 | .workspace-tab-header:not(.is-active) .workspace-tab-header-inner-close-button { opacity: 0; } 178 | 179 | .view-header { pointer-events: none; } 180 | .view-header .clickable-icon { pointer-events: auto; } 181 | } 182 | 183 | body.show-view-header-title .view-header-title-container > * { 184 | background: var(--background-primary); 185 | opacity: .8; 186 | box-shadow: 0 2px 4px #0004; 187 | transition: opacity 0.15s ease-in-out; 188 | } 189 | .view-header-title { 190 | padding: var(--size-2-1) var(--size-4-1); 191 | } 192 | 193 | .workspace-leaf-resize-handle:hover { 194 | transition: background-color 50ms ease-out, 195 | border-color 50ms ease-out, 196 | opacity 50ms ease-out; 197 | } 198 | -------------------------------------------------------------------------------- /thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zamsyt/obsidian-fusion/72ffc13e934dc0fff36caa84ec163945aa4ba345/thumbnail.png --------------------------------------------------------------------------------