From 93edd678ee5f2e090479f1807dfe13c71fc22720 Mon Sep 17 00:00:00 2001 From: Anubis <102488279+AnubisNekhet@users.noreply.github.com> Date: Sat, 11 May 2024 02:27:20 +0530 Subject: [PATCH] fix rainbow folders and layout changes --- manifest.json | 4 +- obsidian.css | 75 +++-- .../Features/Rainbow-File-Browser/colors.scss | 3 +- .../Rainbow-File-Browser/fullrainbow.scss | 78 ++--- .../Rainbow-File-Browser/simplerainbow.scss | 9 +- src/modules/Workspace/Layouts/cards.scss | 306 +++++++++--------- theme.css | 75 +++-- versions.json | 3 +- 8 files changed, 302 insertions(+), 251 deletions(-) diff --git a/manifest.json b/manifest.json index 78e2690..97f36d3 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "name": "AnuPpuccin", - "version": "1.4.5", - "minAppVersion": "0.16.0", + "version": "1.5.0", + "minAppVersion": "1.6.0", "author": "Anubis", "authorUrl": "https://github.com/AnubisNekhet" } diff --git a/obsidian.css b/obsidian.css index 4e3fa4b..809a250 100644 --- a/obsidian.css +++ b/obsidian.css @@ -4057,7 +4057,8 @@ body.anp-card-layout { --divider-width: 4px; --divider-width-hover: 4px; --tab-container-background: var(--card-background-color); - --file-header-border: var(--border-width) dashed var(--background-modifier-border); + --file-header-border: var(--border-width) dashed + var(--background-modifier-border); --ribbon-padding: 0; } body.anp-card-layout.anp-hide-borders { @@ -4066,7 +4067,8 @@ body.anp-card-layout.anp-hide-borders { body.anp-card-layout.anp-hide-borders .menu { border: 0px !important; } -body.anp-card-layout .sidebar-toggle-button, body.anp-card-layout .workspace-tabs.mod-top { +body.anp-card-layout .sidebar-toggle-button, +body.anp-card-layout .workspace-tabs.mod-top { --tab-container-background: var(--card-background-color); } body.anp-card-layout .workspace-tabs.mod-top:has(.obsidian-banner-wrapper) { @@ -4097,27 +4099,31 @@ body.anp-card-layout.anp-card-layout-actions .side-dock-actions { margin-top: 2px; border-width: 1px 1px 0px 1px; } -body.anp-card-layout.anp-card-layout-actions .side-dock-actions, body.anp-card-layout.anp-card-layout-actions .side-dock-settings { +body.anp-card-layout.anp-card-layout-actions .side-dock-actions { border-style: solid; border-color: var(--tab-outline-color); background-color: var(--card-foreground-color); } -body.anp-card-layout.anp-card-layout-actions .side-dock-settings { - border-width: 1px 1px 0px 0px; - border-radius: 0px var(--anp-card-radius, var(--radius-xl)) 0px 0px; -} body.anp-card-layout.anp-card-layout-actions.anp-fixed-status-bar .side-dock-settings { border-width: 1px; border-radius: 0px var(--anp-card-radius, var(--radius-xl)) var(--anp-card-radius, var(--radius-xl)) 0px; } -body.anp-card-layout .side-dock-actions, -body.anp-card-layout .side-dock-settings { +body.anp-card-layout .side-dock-actions { padding: var(--size-4-2) var(--size-4-1) var(--size-4-3); } +body.anp-card-layout .workspace-split.mod-left-split .workspace-sidedock-vault-profile { + border: var(--tab-outline-width) solid var(--tab-outline-color); + border-bottom: none; + margin: var(--anp-card-layout-padding, 10px); + margin-bottom: 0; + border-radius: var(--anp-card-radius, var(--radius-xl)) var(--anp-card-radius, var(--radius-xl)) 0 0; + background-color: var(--card-foreground-color); +} body.anp-card-layout .workspace-ribbon.mod-left { margin-top: calc(var(--header-height) - 1px); } -body.anp-card-layout .workspace-tab-header-container, body.anp-card-layout .workspace-ribbon.mod-left:before { +body.anp-card-layout .workspace-tab-header-container, +body.anp-card-layout .workspace-ribbon.mod-left:before { border-bottom: none; } body.anp-card-layout .mod-vertical .workspace-tabs { @@ -6908,51 +6914,62 @@ None of the original code was used and the feature was implemented from scratch. * folder colors. *---------------------------------------------------------------*/ .nav-folder-children > .nav-folder:nth-child(11n+2), +.nav-files-container > div > .nav-folder:nth-child(11n+2), [data-type=bookmarks] .tree-item:nth-child(11n+2) { --rainbow-folder-color: var(--ctp-red); } .nav-folder-children > .nav-folder:nth-child(11n+3), +.nav-files-container > div > .nav-folder:nth-child(11n+3), [data-type=bookmarks] .tree-item:nth-child(11n+3) { --rainbow-folder-color: var(--ctp-maroon); } .nav-folder-children > .nav-folder:nth-child(11n+4), +.nav-files-container > div > .nav-folder:nth-child(11n+4), [data-type=bookmarks] .tree-item:nth-child(11n+4) { --rainbow-folder-color: var(--ctp-peach); } .nav-folder-children > .nav-folder:nth-child(11n+5), +.nav-files-container > div > .nav-folder:nth-child(11n+5), [data-type=bookmarks] .tree-item:nth-child(11n+5) { --rainbow-folder-color: var(--ctp-yellow); } .nav-folder-children > .nav-folder:nth-child(11n+6), +.nav-files-container > div > .nav-folder:nth-child(11n+6), [data-type=bookmarks] .tree-item:nth-child(11n+6) { --rainbow-folder-color: var(--ctp-green); } .nav-folder-children > .nav-folder:nth-child(11n+7), +.nav-files-container > div > .nav-folder:nth-child(11n+7), [data-type=bookmarks] .tree-item:nth-child(11n+7) { --rainbow-folder-color: var(--ctp-teal); } .nav-folder-children > .nav-folder:nth-child(11n+8), +.nav-files-container > div > .nav-folder:nth-child(11n+8), [data-type=bookmarks] .tree-item:nth-child(11n+8) { --rainbow-folder-color: var(--ctp-sky); } .nav-folder-children > .nav-folder:nth-child(11n+9), +.nav-files-container > div > .nav-folder:nth-child(11n+9), [data-type=bookmarks] .tree-item:nth-child(11n+9) { --rainbow-folder-color: var(--ctp-sapphire); } .nav-folder-children > .nav-folder:nth-child(11n+10), +.nav-files-container > div > .nav-folder:nth-child(11n+10), [data-type=bookmarks] .tree-item:nth-child(11n+10) { --rainbow-folder-color: var(--ctp-blue); } .nav-folder-children > .nav-folder:nth-child(11n+11), +.nav-files-container > div > .nav-folder:nth-child(11n+11), [data-type=bookmarks] .tree-item:nth-child(11n+11) { --rainbow-folder-color: var(--ctp-lavender); } .nav-folder-children > .nav-folder:nth-child(11n+12), +.nav-files-container > div > .nav-folder:nth-child(11n+12), [data-type=bookmarks] .tree-item:nth-child(11n+12) { --rainbow-folder-color: var(--ctp-mauve); } -.anp-rainbow-subfolder-color-toggle .nav-folder.mod-root .nav-folder.nav-folder .nav-folder, +.anp-rainbow-subfolder-color-toggle .nav-files-container .nav-folder.nav-folder .nav-folder, .anp-rainbow-subfolder-color-toggle [data-type=bookmarks] .tree-item .tree-item { --rainbow-folder-color: inherit; } @@ -6960,30 +6977,30 @@ None of the original code was used and the feature was implemented from scratch. /*--------------------------------------------------------------- * FULL RAINBOW STYLE *---------------------------------------------------------------*/ -.anp-full-rainbow-color-toggle .nav-folder.mod-root > .nav-folder-children > .nav-folder .nav-folder-title, -.anp-full-rainbow-color-toggle .nav-folder.mod-root > .nav-folder-children > .nav-folder .nav-file-title, -.anp-full-rainbow-color-toggle .nav-folder.mod-root .collapse-icon svg.svg-icon, +.anp-full-rainbow-color-toggle .nav-files-container > div > .nav-folder .nav-folder-title, +.anp-full-rainbow-color-toggle .nav-files-container > div > .nav-folder .nav-file-title, +.anp-full-rainbow-color-toggle .nav-files-container .collapse-icon svg.svg-icon, .anp-full-rainbow-color-toggle .tree-item-self .tree-item-icon { color: var(--anp-full-rainbow-text-inverted, var(--background-primary)); } -.anp-full-rainbow-color-toggle.anp-rainbow-file-toggle .nav-folder.mod-root > .nav-folder-children > .nav-file .nav-file-title { +.anp-full-rainbow-color-toggle.anp-rainbow-file-toggle .nav-files-container > div > .nav-folder-children > .nav-file .nav-file-title { color: var(--anp-full-rainbow-text-inverted, var(--background-primary)); } -.anp-full-rainbow-color-toggle.anp-rainbow-file-toggle.theme-dark .nav-folder.mod-root > .nav-folder-children > .nav-file { +.anp-full-rainbow-color-toggle.anp-rainbow-file-toggle.theme-dark .nav-files-container > .nav-folder-children > .nav-file { background-color: rgba(var(--ctp-text), var(--anp-rainbow-folder-bg-opacity)); } -.anp-full-rainbow-color-toggle.anp-rainbow-file-toggle.theme-light .nav-folder.mod-root > .nav-folder-children > .nav-file { +.anp-full-rainbow-color-toggle.anp-rainbow-file-toggle.theme-light .nav-files-container > div > .nav-file { background-color: rgba(var(--ctp-overlay1), var(--anp-rainbow-folder-bg-opacity)); } -.anp-full-rainbow-color-toggle.anp-rainbow-file-toggle .nav-folder.mod-root > .nav-folder-children > .nav-file { +.anp-full-rainbow-color-toggle.anp-rainbow-file-toggle .nav-files-container > div > .nav-file { border-radius: 5px; margin-bottom: 2px; } -.anp-full-rainbow-color-toggle:not(.is-grabbing) .nav-folder.mod-root > .nav-folder-children > .nav-folder .nav-folder-title:hover, -.anp-full-rainbow-color-toggle:not(.is-grabbing) .nav-folder.mod-root > .nav-folder-children .nav-file .nav-file-title:hover { +.anp-full-rainbow-color-toggle:not(.is-grabbing) .nav-files-container > div > .nav-folder .nav-folder-title:hover, +.anp-full-rainbow-color-toggle:not(.is-grabbing) .nav-files-container > div .nav-file .nav-file-title:hover { background-color: rgba(var(--ctp-base), 0.1); } -.anp-full-rainbow-color-toggle:not(.is-grabbing) .nav-folder.mod-root > .nav-folder-children > .nav-folder .nav-file-title.is-active { +.anp-full-rainbow-color-toggle:not(.is-grabbing) .nav-files-container > div > .nav-folder .nav-file-title.is-active { border-color: rgba(var(--ctp-base), 0.2); background-color: rgba(var(--ctp-base), 0.2); } @@ -7003,24 +7020,24 @@ None of the original code was used and the feature was implemented from scratch. .anp-full-rainbow-color-toggle .nav-file-title-content.is-being-renamed::selection { background-color: rgba(var(--ctp-accent), 0.2); } -.anp-full-rainbow-color-toggle .nav-folder.mod-root .nav-folder > .nav-folder-children { +.anp-full-rainbow-color-toggle .nav-files-container .nav-folder > .nav-folder-children { padding: 0 5px 0 5px; } -.anp-full-rainbow-color-toggle .nav-folder.mod-root > .nav-folder-children > .nav-folder { +.anp-full-rainbow-color-toggle .nav-files-container > div > .nav-folder { transition: background-color 0.4s; background-color: rgba(var(--rainbow-folder-color), var(--anp-rainbow-folder-bg-opacity)); margin-bottom: 2px; border-radius: 5px; } -.anp-full-rainbow-color-toggle .nav-folder.mod-root > .nav-folder-children > .nav-folder .nav-folder-children { +.anp-full-rainbow-color-toggle .nav-files-container > div > .nav-folder .nav-folder-children { border-color: rgba(var(--ctp-crust), 0.4); } -.anp-full-rainbow-color-toggle .nav-folder.mod-root > .nav-folder-children > .nav-file.has-focus { +.anp-full-rainbow-color-toggle .nav-files-container > div > .nav-file.has-focus { background-color: rgba(var(--ctp-text), var(--anp-rainbow-folder-bg-opacity)); border-left: none; border-color: rgb(var(--ctp-accent)); } -.anp-full-rainbow-color-toggle .nav-folder.mod-root > .nav-folder-children > .nav-file > .nav-file-title, .anp-full-rainbow-color-toggle .nav-folder.mod-root > .nav-folder-children > .nav-file.has-focus > .nav-file-title { +.anp-full-rainbow-color-toggle .nav-files-container > div > .nav-file > .nav-file-title, .anp-full-rainbow-color-toggle .nav-files-container > div > .nav-file.has-focus > .nav-file-title { margin-bottom: 0; } .anp-full-rainbow-color-toggle .workspace-leaf.mod-active .nav-folder.has-focus > .nav-file-title, .anp-full-rainbow-color-toggle .workspace-leaf.mod-active .nav-folder.has-focus > .nav-file-title:focus-within, @@ -7040,7 +7057,7 @@ None of the original code was used and the feature was implemented from scratch. /*--------------------------------------------------------------- * SIMPLE RAINBOW STYLE *---------------------------------------------------------------*/ -.anp-simple-rainbow-color-toggle.anp-simple-rainbow-title-toggle .nav-folder.mod-root > .nav-folder-children > .nav-folder .nav-folder-title, +.anp-simple-rainbow-color-toggle.anp-simple-rainbow-title-toggle .nav-files-container > div > .nav-folder .nav-folder-title, .anp-simple-rainbow-color-toggle.anp-simple-rainbow-title-toggle [data-type=bookmarks] .tree-item .tree-item-inner { transition: color 0.4s; color: rgba(var(--rainbow-folder-color), var(--anp-simple-rainbow-opacity, 1)); @@ -7050,7 +7067,7 @@ None of the original code was used and the feature was implemented from scratch. .anp-simple-rainbow-color-toggle.anp-simple-rainbow-title-toggle .nav-folder.is-being-dragged-over { background-color: rgba(var(--rainbow-folder-color), 0.1); } -.anp-simple-rainbow-color-toggle.anp-simple-rainbow-icon-toggle .nav-folder.mod-root > .nav-folder-children > .nav-folder .nav-folder-title:after, +.anp-simple-rainbow-color-toggle.anp-simple-rainbow-icon-toggle .nav-files-container > div > .nav-folder .nav-folder-title:after, .anp-simple-rainbow-color-toggle.anp-simple-rainbow-icon-toggle [data-type=bookmarks] .tree-item .tree-item-inner:after { transition: color 0.4s; color: rgba(var(--rainbow-folder-color), var(--anp-simple-rainbow-opacity, 1)); @@ -7067,7 +7084,7 @@ None of the original code was used and the feature was implemented from scratch. flex-grow: 1; justify-content: space-between; } -.anp-simple-rainbow-color-toggle.anp-simple-rainbow-indentation-toggle .nav-folder.mod-root .nav-folder > .nav-folder-children, +.anp-simple-rainbow-color-toggle.anp-simple-rainbow-indentation-toggle .nav-files-container .nav-folder > .nav-folder-children, .anp-simple-rainbow-color-toggle.anp-simple-rainbow-indentation-toggle [data-type=bookmarks] .tree-item .tree-item-children { transition: color 0.4s; border-color: rgba(var(--rainbow-folder-color), 0.5); diff --git a/src/modules/Features/Rainbow-File-Browser/colors.scss b/src/modules/Features/Rainbow-File-Browser/colors.scss index 0442420..ea20994 100644 --- a/src/modules/Features/Rainbow-File-Browser/colors.scss +++ b/src/modules/Features/Rainbow-File-Browser/colors.scss @@ -8,6 +8,7 @@ * folder colors. *---------------------------------------------------------------*/ .nav-folder-children > .nav-folder, +.nav-files-container > div > .nav-folder, [data-type="bookmarks"] .tree-item { &:nth-child(11n + 2) { --rainbow-folder-color: var(--ctp-red); @@ -44,7 +45,7 @@ } } .anp-rainbow-subfolder-color-toggle { - .nav-folder.mod-root .nav-folder.nav-folder .nav-folder, + .nav-files-container .nav-folder.nav-folder .nav-folder, [data-type="bookmarks"] .tree-item .tree-item { --rainbow-folder-color: inherit; } diff --git a/src/modules/Features/Rainbow-File-Browser/fullrainbow.scss b/src/modules/Features/Rainbow-File-Browser/fullrainbow.scss index 82cf47c..5d6db1f 100644 --- a/src/modules/Features/Rainbow-File-Browser/fullrainbow.scss +++ b/src/modules/Features/Rainbow-File-Browser/fullrainbow.scss @@ -3,37 +3,41 @@ *---------------------------------------------------------------*/ .anp-full-rainbow-color-toggle { // Apply styling to folders - .nav-folder.mod-root > .nav-folder-children > .nav-folder .nav-folder-title, - .nav-folder.mod-root > .nav-folder-children > .nav-folder .nav-file-title, - .nav-folder.mod-root .collapse-icon svg.svg-icon, + .nav-files-container > div > .nav-folder .nav-folder-title, + .nav-files-container > div > .nav-folder .nav-file-title, + .nav-files-container .collapse-icon svg.svg-icon, .tree-item-self .tree-item-icon { color: var(--anp-full-rainbow-text-inverted, var(--background-primary)); } // Apply styling to files in root level &.anp-rainbow-file-toggle { - .nav-folder.mod-root > .nav-folder-children > .nav-file .nav-file-title { + .nav-files-container + > div + > .nav-folder-children + > .nav-file + .nav-file-title { color: var(--anp-full-rainbow-text-inverted, var(--background-primary)); } - &.theme-dark .nav-folder.mod-root > .nav-folder-children > .nav-file { + &.theme-dark .nav-files-container > .nav-folder-children > .nav-file { background-color: rgba( var(--ctp-text), var(--anp-rainbow-folder-bg-opacity) ); } - &.theme-light .nav-folder.mod-root > .nav-folder-children > .nav-file { + &.theme-light .nav-files-container > div > .nav-file { background-color: rgba( var(--ctp-overlay1), var(--anp-rainbow-folder-bg-opacity) ); } - .nav-folder.mod-root > .nav-folder-children > .nav-file { + .nav-files-container > div > .nav-file { border-radius: 5px; margin-bottom: 2px; } } // Apply styling to files in folders - &:not(.is-grabbing) .nav-folder.mod-root > .nav-folder-children { + &:not(.is-grabbing) .nav-files-container > div { // Files have a slight background & > .nav-folder .nav-folder-title:hover, .nav-file .nav-file-title:hover { @@ -62,37 +66,35 @@ .nav-file-title-content.is-being-renamed::selection { background-color: rgba(var(--ctp-accent), 0.2); } - .nav-folder { - &.mod-root { - .nav-folder > .nav-folder-children { - padding: 0 5px 0 5px; - } - > .nav-folder-children { - > .nav-folder { - transition: background-color 0.4s; - background-color: rgba( - var(--rainbow-folder-color), - var(--anp-rainbow-folder-bg-opacity) - ); - margin-bottom: 2px; - border-radius: 5px; - .nav-folder-children { - border-color: rgba(var(--ctp-crust), 0.4); - } - } - > .nav-file.has-focus { - background-color: rgba( - var(--ctp-text), - var(--anp-rainbow-folder-bg-opacity) - ); - border-left: none; - border-color: rgb(var(--ctp-accent)); + .nav-files-container { + .nav-folder > .nav-folder-children { + padding: 0 5px 0 5px; + } + > div { + > .nav-folder { + transition: background-color 0.4s; + background-color: rgba( + var(--rainbow-folder-color), + var(--anp-rainbow-folder-bg-opacity) + ); + margin-bottom: 2px; + border-radius: 5px; + .nav-folder-children { + border-color: rgba(var(--ctp-crust), 0.4); } - & > .nav-file, - & > .nav-file.has-focus { - & > .nav-file-title { - margin-bottom: 0; - } + } + > .nav-file.has-focus { + background-color: rgba( + var(--ctp-text), + var(--anp-rainbow-folder-bg-opacity) + ); + border-left: none; + border-color: rgb(var(--ctp-accent)); + } + & > .nav-file, + & > .nav-file.has-focus { + & > .nav-file-title { + margin-bottom: 0; } } } diff --git a/src/modules/Features/Rainbow-File-Browser/simplerainbow.scss b/src/modules/Features/Rainbow-File-Browser/simplerainbow.scss index 3864cd7..a3b6ba3 100644 --- a/src/modules/Features/Rainbow-File-Browser/simplerainbow.scss +++ b/src/modules/Features/Rainbow-File-Browser/simplerainbow.scss @@ -4,7 +4,7 @@ .anp-simple-rainbow-color-toggle { // Apply styling to titles &.anp-simple-rainbow-title-toggle { - .nav-folder.mod-root > .nav-folder-children > .nav-folder .nav-folder-title, + .nav-files-container > div > .nav-folder .nav-folder-title, [data-type="bookmarks"] .tree-item .tree-item-inner { transition: color 0.4s; color: rgba( @@ -20,10 +20,7 @@ } // Circle icon indicator &.anp-simple-rainbow-icon-toggle { - .nav-folder.mod-root - > .nav-folder-children - > .nav-folder - .nav-folder-title:after, + .nav-files-container > div > .nav-folder .nav-folder-title:after, [data-type="bookmarks"] .tree-item .tree-item-inner:after { transition: color 0.4s; color: rgba( @@ -46,7 +43,7 @@ } // Color indents &.anp-simple-rainbow-indentation-toggle { - .nav-folder.mod-root .nav-folder > .nav-folder-children, + .nav-files-container .nav-folder > .nav-folder-children, [data-type="bookmarks"] .tree-item .tree-item-children { transition: color 0.4s; border-color: rgba(var(--rainbow-folder-color), 0.5); diff --git a/src/modules/Workspace/Layouts/cards.scss b/src/modules/Workspace/Layouts/cards.scss index 4d654dc..5156acd 100644 --- a/src/modules/Workspace/Layouts/cards.scss +++ b/src/modules/Workspace/Layouts/cards.scss @@ -1,148 +1,164 @@ body.anp-card-layout { - --card-background-color: rgb(var(--ctp-crust)); - --card-foreground-color: var(--background-primary); - --divider-color: transparent; - --tab-outline-color: var(--background-modifier-border); - --divider-color-hover: var(--backgrouund-modifier-border); - --divider-width: 4px; - --divider-width-hover: 4px; - --tab-container-background: var(--card-background-color); - --file-header-border: var(--border-width) dashed var(--background-modifier-border); - --ribbon-padding: 0; - &.anp-hide-borders { - --tab-outline-color: transparent; - .menu { - border: 0px !important; // hide menu border - } - } + --card-background-color: rgb(var(--ctp-crust)); + --card-foreground-color: var(--background-primary); + --divider-color: transparent; + --tab-outline-color: var(--background-modifier-border); + --divider-color-hover: var(--backgrouund-modifier-border); + --divider-width: 4px; + --divider-width-hover: 4px; + --tab-container-background: var(--card-background-color); + --file-header-border: var(--border-width) dashed + var(--background-modifier-border); + --ribbon-padding: 0; + &.anp-hide-borders { + --tab-outline-color: transparent; + .menu { + border: 0px !important; // hide menu border + } + } - .sidebar-toggle-button, .workspace-tabs.mod-top { - --tab-container-background: var(--card-background-color); - } - .workspace-tabs.mod-top:has(.obsidian-banner-wrapper) { - --file-header-border: none; - } - &.is-focused { - &, - .sidebar-toggle-button, - .workspace-tabs.mod-top { - --tab-container-background: var(--card-background-color); - } - } - .mod-left-split .workspace-tabs .workspace-leaf, - .mod-right-split .workspace-tabs .workspace-leaf, - .mod-left-split, - .mod-vertical .workspace-tab-container, - .mod-vertical, - .workspace-split.mod-vertical, - .workspace-fake-target-overlay:not(.is-in-sidebar) .workspace-tabs .workspace-leaf, - .mod-root .workspace-tabs .workspace-leaf, - .workspace-ribbon.mod-left, - .workspace-ribbon.mod-left:before { - background-color: var(--tab-container-background); - } - &.anp-card-layout-actions { - .workspace-ribbon.mod-left { - margin-right: var(--anp-card-layout-padding, 10px); - } - .side-dock-actions { - border-radius: 0px var(--anp-card-radius, var(--radius-xl)) var(--anp-card-radius, var(--radius-xl)) 0px; - margin-top: 2px; - border-width: 1px 1px 0px 1px; - } - .side-dock-actions, .side-dock-settings { - border-style: solid; - border-color: var(--tab-outline-color); - background-color: var(--card-foreground-color); - } - .side-dock-settings { - border-width: 1px 1px 0px 0px; - border-radius: 0px var(--anp-card-radius, var(--radius-xl)) 0px 0px; - } - &.anp-fixed-status-bar { - .side-dock-settings { - border-width: 1px; - border-radius: 0px var(--anp-card-radius, var(--radius-xl)) var(--anp-card-radius, var(--radius-xl)) 0px; - } - } - } - .side-dock-actions, - .side-dock-settings { - padding: var(--size-4-2) var(--size-4-1) var(--size-4-3); - } - .workspace-ribbon.mod-left { - margin-top: calc(var(--header-height) - 1px); - } - .workspace-tab-header-container, .workspace-ribbon.mod-left:before { - border-bottom: none; - } - .mod-vertical { - .workspace-tabs { - padding-left: var(--anp-card-layout-padding, 10px); - padding-right: var(--anp-card-layout-padding, 10px); - .workspace-tab-header-container { - padding-left: var(--anp-card-header-left-padding, 20px); - .workspace-tab-header-container-inner { - margin: 6px -5px calc(var(--tab-outline-width) * -1); - z-index: 1; - } - } - } - } - .mod-left-split, - .mod-right-split { - .workspace-tab-container { - padding-left: var(--anp-card-layout-padding, 10px); - padding-right: var(--anp-card-layout-padding, 10px); - background-color: var(--tab-container-background); - } - } - .workspace-split .workspace-leaf-content:not([data-type="file-explorer"]), - &.anp-card-layout-filebrowser .workspace-leaf-content[data-type="file-explorer"] { - border-radius: var(--anp-card-radius, var(--radius-xl)); - background-color: var(--card-foreground-color); - border: 1px solid var(--tab-outline-color); - margin-bottom: var(--anp-card-layout-padding, 10px); - } - &.anp-card-shadows { - .workspace-split .workspace-leaf-content, - &.anp-card-layout-actions .side-dock-actions, - &.anp-card-layout-filebrowser .workspace-split .workspace-leaf-content[data-type="file-explorer"] { - box-shadow: 0 3px 4px 0px rgba(0,0,0,0.05); - } - } - .workspace-split .mod-stacked .workspace-leaf-content { - border-radius: 0; - border: none; - margin-bottom: 0px; - border-left: none; - } - .workspace-split.mod-horizontal > * { - width: unset; - } - .workspace .workspace-tabs.mod-stacked { - .workspace-tab-container .workspace-tab-header { - border-style: solid; - border-radius: var(--anp-card-radius, var(--radius-xl)) 0px 0px var(--anp-card-radius, var(--radius-xl)); - border-width: var(--tab-outline-width); - border-color: var(--tab-outline-color); - border-right: var(--tab-outline-width) dashed var(--tab-outline-color); - } - .workspace-leaf { - border-left-width: 0px; - border-top-width: var(--tab-outline-width); - border-bottom-width: var(--tab-outline-width); - border-style: solid; - border-color: var(--tab-outline-color); - border-radius: 0 var(--anp-card-radius, var(--radius-xl)) var(--anp-card-radius, var(--radius-xl)) 0; - } - .workspace-tab-container { - padding-bottom: var(--anp-card-layout-padding, 10px); - } - } - .workspace-drop-overlay:before { - width: calc(100% - 6px - var(--anp-card-layout-padding, 0)*2); - height: calc(100% - 6px - var(--anp-card-layout-padding, 0)*2); - margin: auto; - } + .sidebar-toggle-button, + .workspace-tabs.mod-top { + --tab-container-background: var(--card-background-color); + } + .workspace-tabs.mod-top:has(.obsidian-banner-wrapper) { + --file-header-border: none; + } + &.is-focused { + &, + .sidebar-toggle-button, + .workspace-tabs.mod-top { + --tab-container-background: var(--card-background-color); + } + } + .mod-left-split .workspace-tabs .workspace-leaf, + .mod-right-split .workspace-tabs .workspace-leaf, + .mod-left-split, + .mod-vertical .workspace-tab-container, + .mod-vertical, + .workspace-split.mod-vertical, + .workspace-fake-target-overlay:not(.is-in-sidebar) + .workspace-tabs + .workspace-leaf, + .mod-root .workspace-tabs .workspace-leaf, + .workspace-ribbon.mod-left, + .workspace-ribbon.mod-left:before { + background-color: var(--tab-container-background); + } + &.anp-card-layout-actions { + .workspace-ribbon.mod-left { + margin-right: var(--anp-card-layout-padding, 10px); + } + .side-dock-actions { + border-radius: 0px var(--anp-card-radius, var(--radius-xl)) + var(--anp-card-radius, var(--radius-xl)) 0px; + margin-top: 2px; + border-width: 1px 1px 0px 1px; + } + .side-dock-actions { + border-style: solid; + border-color: var(--tab-outline-color); + background-color: var(--card-foreground-color); + } + &.anp-fixed-status-bar { + .side-dock-settings { + border-width: 1px; + border-radius: 0px var(--anp-card-radius, var(--radius-xl)) + var(--anp-card-radius, var(--radius-xl)) 0px; + } + } + } + .side-dock-actions { + padding: var(--size-4-2) var(--size-4-1) var(--size-4-3); + } + .workspace-split.mod-left-split .workspace-sidedock-vault-profile { + border: var(--tab-outline-width) solid var(--tab-outline-color); + border-bottom: none; + margin: var(--anp-card-layout-padding, 10px); + margin-bottom: 0; + border-radius: var(--anp-card-radius, var(--radius-xl)) + var(--anp-card-radius, var(--radius-xl)) 0 0; + background-color: var(--card-foreground-color); + } + .workspace-ribbon.mod-left { + margin-top: calc(var(--header-height) - 1px); + } + .workspace-tab-header-container, + .workspace-ribbon.mod-left:before { + border-bottom: none; + } + .mod-vertical { + .workspace-tabs { + padding-left: var(--anp-card-layout-padding, 10px); + padding-right: var(--anp-card-layout-padding, 10px); + .workspace-tab-header-container { + padding-left: var(--anp-card-header-left-padding, 20px); + .workspace-tab-header-container-inner { + margin: 6px -5px calc(var(--tab-outline-width) * -1); + z-index: 1; + } + } + } + } + .mod-left-split, + .mod-right-split { + .workspace-tab-container { + padding-left: var(--anp-card-layout-padding, 10px); + padding-right: var(--anp-card-layout-padding, 10px); + background-color: var(--tab-container-background); + } + } + .workspace-split .workspace-leaf-content:not([data-type="file-explorer"]), + &.anp-card-layout-filebrowser + .workspace-leaf-content[data-type="file-explorer"] { + border-radius: var(--anp-card-radius, var(--radius-xl)); + background-color: var(--card-foreground-color); + border: 1px solid var(--tab-outline-color); + margin-bottom: var(--anp-card-layout-padding, 10px); + } + &.anp-card-shadows { + .workspace-split .workspace-leaf-content, + &.anp-card-layout-actions .side-dock-actions, + &.anp-card-layout-filebrowser + .workspace-split + .workspace-leaf-content[data-type="file-explorer"] { + box-shadow: 0 3px 4px 0px rgba(0, 0, 0, 0.05); + } + } + .workspace-split .mod-stacked .workspace-leaf-content { + border-radius: 0; + border: none; + margin-bottom: 0px; + border-left: none; + } + .workspace-split.mod-horizontal > * { + width: unset; + } + .workspace .workspace-tabs.mod-stacked { + .workspace-tab-container .workspace-tab-header { + border-style: solid; + border-radius: var(--anp-card-radius, var(--radius-xl)) 0px 0px + var(--anp-card-radius, var(--radius-xl)); + border-width: var(--tab-outline-width); + border-color: var(--tab-outline-color); + border-right: var(--tab-outline-width) dashed var(--tab-outline-color); + } + .workspace-leaf { + border-left-width: 0px; + border-top-width: var(--tab-outline-width); + border-bottom-width: var(--tab-outline-width); + border-style: solid; + border-color: var(--tab-outline-color); + border-radius: 0 var(--anp-card-radius, var(--radius-xl)) + var(--anp-card-radius, var(--radius-xl)) 0; + } + .workspace-tab-container { + padding-bottom: var(--anp-card-layout-padding, 10px); + } + } + .workspace-drop-overlay:before { + width: calc(100% - 6px - var(--anp-card-layout-padding, 0) * 2); + height: calc(100% - 6px - var(--anp-card-layout-padding, 0) * 2); + margin: auto; + } } diff --git a/theme.css b/theme.css index 4e3fa4b..809a250 100644 --- a/theme.css +++ b/theme.css @@ -4057,7 +4057,8 @@ body.anp-card-layout { --divider-width: 4px; --divider-width-hover: 4px; --tab-container-background: var(--card-background-color); - --file-header-border: var(--border-width) dashed var(--background-modifier-border); + --file-header-border: var(--border-width) dashed + var(--background-modifier-border); --ribbon-padding: 0; } body.anp-card-layout.anp-hide-borders { @@ -4066,7 +4067,8 @@ body.anp-card-layout.anp-hide-borders { body.anp-card-layout.anp-hide-borders .menu { border: 0px !important; } -body.anp-card-layout .sidebar-toggle-button, body.anp-card-layout .workspace-tabs.mod-top { +body.anp-card-layout .sidebar-toggle-button, +body.anp-card-layout .workspace-tabs.mod-top { --tab-container-background: var(--card-background-color); } body.anp-card-layout .workspace-tabs.mod-top:has(.obsidian-banner-wrapper) { @@ -4097,27 +4099,31 @@ body.anp-card-layout.anp-card-layout-actions .side-dock-actions { margin-top: 2px; border-width: 1px 1px 0px 1px; } -body.anp-card-layout.anp-card-layout-actions .side-dock-actions, body.anp-card-layout.anp-card-layout-actions .side-dock-settings { +body.anp-card-layout.anp-card-layout-actions .side-dock-actions { border-style: solid; border-color: var(--tab-outline-color); background-color: var(--card-foreground-color); } -body.anp-card-layout.anp-card-layout-actions .side-dock-settings { - border-width: 1px 1px 0px 0px; - border-radius: 0px var(--anp-card-radius, var(--radius-xl)) 0px 0px; -} body.anp-card-layout.anp-card-layout-actions.anp-fixed-status-bar .side-dock-settings { border-width: 1px; border-radius: 0px var(--anp-card-radius, var(--radius-xl)) var(--anp-card-radius, var(--radius-xl)) 0px; } -body.anp-card-layout .side-dock-actions, -body.anp-card-layout .side-dock-settings { +body.anp-card-layout .side-dock-actions { padding: var(--size-4-2) var(--size-4-1) var(--size-4-3); } +body.anp-card-layout .workspace-split.mod-left-split .workspace-sidedock-vault-profile { + border: var(--tab-outline-width) solid var(--tab-outline-color); + border-bottom: none; + margin: var(--anp-card-layout-padding, 10px); + margin-bottom: 0; + border-radius: var(--anp-card-radius, var(--radius-xl)) var(--anp-card-radius, var(--radius-xl)) 0 0; + background-color: var(--card-foreground-color); +} body.anp-card-layout .workspace-ribbon.mod-left { margin-top: calc(var(--header-height) - 1px); } -body.anp-card-layout .workspace-tab-header-container, body.anp-card-layout .workspace-ribbon.mod-left:before { +body.anp-card-layout .workspace-tab-header-container, +body.anp-card-layout .workspace-ribbon.mod-left:before { border-bottom: none; } body.anp-card-layout .mod-vertical .workspace-tabs { @@ -6908,51 +6914,62 @@ None of the original code was used and the feature was implemented from scratch. * folder colors. *---------------------------------------------------------------*/ .nav-folder-children > .nav-folder:nth-child(11n+2), +.nav-files-container > div > .nav-folder:nth-child(11n+2), [data-type=bookmarks] .tree-item:nth-child(11n+2) { --rainbow-folder-color: var(--ctp-red); } .nav-folder-children > .nav-folder:nth-child(11n+3), +.nav-files-container > div > .nav-folder:nth-child(11n+3), [data-type=bookmarks] .tree-item:nth-child(11n+3) { --rainbow-folder-color: var(--ctp-maroon); } .nav-folder-children > .nav-folder:nth-child(11n+4), +.nav-files-container > div > .nav-folder:nth-child(11n+4), [data-type=bookmarks] .tree-item:nth-child(11n+4) { --rainbow-folder-color: var(--ctp-peach); } .nav-folder-children > .nav-folder:nth-child(11n+5), +.nav-files-container > div > .nav-folder:nth-child(11n+5), [data-type=bookmarks] .tree-item:nth-child(11n+5) { --rainbow-folder-color: var(--ctp-yellow); } .nav-folder-children > .nav-folder:nth-child(11n+6), +.nav-files-container > div > .nav-folder:nth-child(11n+6), [data-type=bookmarks] .tree-item:nth-child(11n+6) { --rainbow-folder-color: var(--ctp-green); } .nav-folder-children > .nav-folder:nth-child(11n+7), +.nav-files-container > div > .nav-folder:nth-child(11n+7), [data-type=bookmarks] .tree-item:nth-child(11n+7) { --rainbow-folder-color: var(--ctp-teal); } .nav-folder-children > .nav-folder:nth-child(11n+8), +.nav-files-container > div > .nav-folder:nth-child(11n+8), [data-type=bookmarks] .tree-item:nth-child(11n+8) { --rainbow-folder-color: var(--ctp-sky); } .nav-folder-children > .nav-folder:nth-child(11n+9), +.nav-files-container > div > .nav-folder:nth-child(11n+9), [data-type=bookmarks] .tree-item:nth-child(11n+9) { --rainbow-folder-color: var(--ctp-sapphire); } .nav-folder-children > .nav-folder:nth-child(11n+10), +.nav-files-container > div > .nav-folder:nth-child(11n+10), [data-type=bookmarks] .tree-item:nth-child(11n+10) { --rainbow-folder-color: var(--ctp-blue); } .nav-folder-children > .nav-folder:nth-child(11n+11), +.nav-files-container > div > .nav-folder:nth-child(11n+11), [data-type=bookmarks] .tree-item:nth-child(11n+11) { --rainbow-folder-color: var(--ctp-lavender); } .nav-folder-children > .nav-folder:nth-child(11n+12), +.nav-files-container > div > .nav-folder:nth-child(11n+12), [data-type=bookmarks] .tree-item:nth-child(11n+12) { --rainbow-folder-color: var(--ctp-mauve); } -.anp-rainbow-subfolder-color-toggle .nav-folder.mod-root .nav-folder.nav-folder .nav-folder, +.anp-rainbow-subfolder-color-toggle .nav-files-container .nav-folder.nav-folder .nav-folder, .anp-rainbow-subfolder-color-toggle [data-type=bookmarks] .tree-item .tree-item { --rainbow-folder-color: inherit; } @@ -6960,30 +6977,30 @@ None of the original code was used and the feature was implemented from scratch. /*--------------------------------------------------------------- * FULL RAINBOW STYLE *---------------------------------------------------------------*/ -.anp-full-rainbow-color-toggle .nav-folder.mod-root > .nav-folder-children > .nav-folder .nav-folder-title, -.anp-full-rainbow-color-toggle .nav-folder.mod-root > .nav-folder-children > .nav-folder .nav-file-title, -.anp-full-rainbow-color-toggle .nav-folder.mod-root .collapse-icon svg.svg-icon, +.anp-full-rainbow-color-toggle .nav-files-container > div > .nav-folder .nav-folder-title, +.anp-full-rainbow-color-toggle .nav-files-container > div > .nav-folder .nav-file-title, +.anp-full-rainbow-color-toggle .nav-files-container .collapse-icon svg.svg-icon, .anp-full-rainbow-color-toggle .tree-item-self .tree-item-icon { color: var(--anp-full-rainbow-text-inverted, var(--background-primary)); } -.anp-full-rainbow-color-toggle.anp-rainbow-file-toggle .nav-folder.mod-root > .nav-folder-children > .nav-file .nav-file-title { +.anp-full-rainbow-color-toggle.anp-rainbow-file-toggle .nav-files-container > div > .nav-folder-children > .nav-file .nav-file-title { color: var(--anp-full-rainbow-text-inverted, var(--background-primary)); } -.anp-full-rainbow-color-toggle.anp-rainbow-file-toggle.theme-dark .nav-folder.mod-root > .nav-folder-children > .nav-file { +.anp-full-rainbow-color-toggle.anp-rainbow-file-toggle.theme-dark .nav-files-container > .nav-folder-children > .nav-file { background-color: rgba(var(--ctp-text), var(--anp-rainbow-folder-bg-opacity)); } -.anp-full-rainbow-color-toggle.anp-rainbow-file-toggle.theme-light .nav-folder.mod-root > .nav-folder-children > .nav-file { +.anp-full-rainbow-color-toggle.anp-rainbow-file-toggle.theme-light .nav-files-container > div > .nav-file { background-color: rgba(var(--ctp-overlay1), var(--anp-rainbow-folder-bg-opacity)); } -.anp-full-rainbow-color-toggle.anp-rainbow-file-toggle .nav-folder.mod-root > .nav-folder-children > .nav-file { +.anp-full-rainbow-color-toggle.anp-rainbow-file-toggle .nav-files-container > div > .nav-file { border-radius: 5px; margin-bottom: 2px; } -.anp-full-rainbow-color-toggle:not(.is-grabbing) .nav-folder.mod-root > .nav-folder-children > .nav-folder .nav-folder-title:hover, -.anp-full-rainbow-color-toggle:not(.is-grabbing) .nav-folder.mod-root > .nav-folder-children .nav-file .nav-file-title:hover { +.anp-full-rainbow-color-toggle:not(.is-grabbing) .nav-files-container > div > .nav-folder .nav-folder-title:hover, +.anp-full-rainbow-color-toggle:not(.is-grabbing) .nav-files-container > div .nav-file .nav-file-title:hover { background-color: rgba(var(--ctp-base), 0.1); } -.anp-full-rainbow-color-toggle:not(.is-grabbing) .nav-folder.mod-root > .nav-folder-children > .nav-folder .nav-file-title.is-active { +.anp-full-rainbow-color-toggle:not(.is-grabbing) .nav-files-container > div > .nav-folder .nav-file-title.is-active { border-color: rgba(var(--ctp-base), 0.2); background-color: rgba(var(--ctp-base), 0.2); } @@ -7003,24 +7020,24 @@ None of the original code was used and the feature was implemented from scratch. .anp-full-rainbow-color-toggle .nav-file-title-content.is-being-renamed::selection { background-color: rgba(var(--ctp-accent), 0.2); } -.anp-full-rainbow-color-toggle .nav-folder.mod-root .nav-folder > .nav-folder-children { +.anp-full-rainbow-color-toggle .nav-files-container .nav-folder > .nav-folder-children { padding: 0 5px 0 5px; } -.anp-full-rainbow-color-toggle .nav-folder.mod-root > .nav-folder-children > .nav-folder { +.anp-full-rainbow-color-toggle .nav-files-container > div > .nav-folder { transition: background-color 0.4s; background-color: rgba(var(--rainbow-folder-color), var(--anp-rainbow-folder-bg-opacity)); margin-bottom: 2px; border-radius: 5px; } -.anp-full-rainbow-color-toggle .nav-folder.mod-root > .nav-folder-children > .nav-folder .nav-folder-children { +.anp-full-rainbow-color-toggle .nav-files-container > div > .nav-folder .nav-folder-children { border-color: rgba(var(--ctp-crust), 0.4); } -.anp-full-rainbow-color-toggle .nav-folder.mod-root > .nav-folder-children > .nav-file.has-focus { +.anp-full-rainbow-color-toggle .nav-files-container > div > .nav-file.has-focus { background-color: rgba(var(--ctp-text), var(--anp-rainbow-folder-bg-opacity)); border-left: none; border-color: rgb(var(--ctp-accent)); } -.anp-full-rainbow-color-toggle .nav-folder.mod-root > .nav-folder-children > .nav-file > .nav-file-title, .anp-full-rainbow-color-toggle .nav-folder.mod-root > .nav-folder-children > .nav-file.has-focus > .nav-file-title { +.anp-full-rainbow-color-toggle .nav-files-container > div > .nav-file > .nav-file-title, .anp-full-rainbow-color-toggle .nav-files-container > div > .nav-file.has-focus > .nav-file-title { margin-bottom: 0; } .anp-full-rainbow-color-toggle .workspace-leaf.mod-active .nav-folder.has-focus > .nav-file-title, .anp-full-rainbow-color-toggle .workspace-leaf.mod-active .nav-folder.has-focus > .nav-file-title:focus-within, @@ -7040,7 +7057,7 @@ None of the original code was used and the feature was implemented from scratch. /*--------------------------------------------------------------- * SIMPLE RAINBOW STYLE *---------------------------------------------------------------*/ -.anp-simple-rainbow-color-toggle.anp-simple-rainbow-title-toggle .nav-folder.mod-root > .nav-folder-children > .nav-folder .nav-folder-title, +.anp-simple-rainbow-color-toggle.anp-simple-rainbow-title-toggle .nav-files-container > div > .nav-folder .nav-folder-title, .anp-simple-rainbow-color-toggle.anp-simple-rainbow-title-toggle [data-type=bookmarks] .tree-item .tree-item-inner { transition: color 0.4s; color: rgba(var(--rainbow-folder-color), var(--anp-simple-rainbow-opacity, 1)); @@ -7050,7 +7067,7 @@ None of the original code was used and the feature was implemented from scratch. .anp-simple-rainbow-color-toggle.anp-simple-rainbow-title-toggle .nav-folder.is-being-dragged-over { background-color: rgba(var(--rainbow-folder-color), 0.1); } -.anp-simple-rainbow-color-toggle.anp-simple-rainbow-icon-toggle .nav-folder.mod-root > .nav-folder-children > .nav-folder .nav-folder-title:after, +.anp-simple-rainbow-color-toggle.anp-simple-rainbow-icon-toggle .nav-files-container > div > .nav-folder .nav-folder-title:after, .anp-simple-rainbow-color-toggle.anp-simple-rainbow-icon-toggle [data-type=bookmarks] .tree-item .tree-item-inner:after { transition: color 0.4s; color: rgba(var(--rainbow-folder-color), var(--anp-simple-rainbow-opacity, 1)); @@ -7067,7 +7084,7 @@ None of the original code was used and the feature was implemented from scratch. flex-grow: 1; justify-content: space-between; } -.anp-simple-rainbow-color-toggle.anp-simple-rainbow-indentation-toggle .nav-folder.mod-root .nav-folder > .nav-folder-children, +.anp-simple-rainbow-color-toggle.anp-simple-rainbow-indentation-toggle .nav-files-container .nav-folder > .nav-folder-children, .anp-simple-rainbow-color-toggle.anp-simple-rainbow-indentation-toggle [data-type=bookmarks] .tree-item .tree-item-children { transition: color 0.4s; border-color: rgba(var(--rainbow-folder-color), 0.5); diff --git a/versions.json b/versions.json index c677b6e..99b0152 100644 --- a/versions.json +++ b/versions.json @@ -5,5 +5,6 @@ "1.4.2": "1.1.9", "1.4.3": "1.1.9", "1.4.4": "1.1.9", - "1.4.5": "1.1.9" + "1.4.5": "1.1.9", + "1.5.0": "1.6.0" }