From 4271f35090ddfeb981d30ee25b72ee15c83048fc Mon Sep 17 00:00:00 2001 From: mkb Date: Mon, 15 Aug 2022 14:56:03 -0600 Subject: [PATCH] fix: editing file and folder name now less ugly --- obsidian.css | 33 ++++++++++++++++++++++----------- scss/layouts/_sidebar.scss | 34 +++++++++++++++++++++++----------- 2 files changed, 45 insertions(+), 22 deletions(-) diff --git a/obsidian.css b/obsidian.css index 48a2b0c..f284f14 100644 --- a/obsidian.css +++ b/obsidian.css @@ -1572,7 +1572,6 @@ body:not(.is-grabbing) .nav-folder-title:hover { } /* file or folder is being dragged or selected */ -.nav-folder.mod-root .is-active, body:not(.is-grabbing) .nav-file-title.is-being-dragged, body:not(.is-grabbing) .nav-folder-title.is-being-dragged, .nav-file-title.is-being-dragged, @@ -1582,7 +1581,6 @@ body:not(.is-grabbing) .nav-folder-title.is-being-dragged, color: var(--text-on-accent); border: none; } -.nav-folder.mod-root .is-active:hover, body:not(.is-grabbing) .nav-file-title.is-being-dragged:hover, body:not(.is-grabbing) .nav-folder-title.is-being-dragged:hover, .nav-file-title.is-being-dragged:hover, @@ -1592,11 +1590,12 @@ body:not(.is-grabbing) .nav-folder-title.is-being-dragged:hover, } /* file or folder has active menu */ +.nav-file-title.is-active, .workspace-leaf.mod-active .nav-folder.has-focus .nav-folder-title.has-active-menu, body:not(.is-grabbing) .nav-file-title.has-active-menu, .nav-folder-title.has-active-menu, .nav-folder.mod-root .has-active-menu { - background-color: var(--internal-buttons); + background-color: var(--pink); color: var(--text-on-accent); } @@ -1609,12 +1608,11 @@ body:not(.is-grabbing) .nav-file-title.has-active-menu, /* prevents folder that has been active from remaining highlighted when user goes somewhere else */ -.workspace-leaf.mod-active .nav-folder.has-focus > .nav-folder-title { - background-color: var(--black-2); - border: 0; -} -.workspace-leaf.mod-active .nav-folder.has-focus > .nav-folder-title:hover { - background-color: var(--text-selection-opaque); +.workspace-leaf.mod-active .nav-folder.has-focus > .nav-folder-title, +.workspace-leaf.mod-active .nav-file.has-focus > .nav-file-title { + background-color: var(--pink); + color: var(--text-on-accent); + border: none; } /* Fix for what seems to be uncommon problem where an invisible @@ -1623,17 +1621,30 @@ div will cause unrelated folder to move slightly on open/close */ .nav-folder-title-content.is-being-renamed { border: 0; border-radius: var(--border-radius-small); - background-color: var(--active-interaction); + background-color: var(--pink); color: var(--text-on-accent); } +.nav-file-title-content.is-being-renamed:hover, +.nav-folder-title-content.is-being-renamed:hover { + background-color: var(--pink); +} /* absolute nightmare to wrangle! use nested ::selector to change highlight. #TODO: Fix file type */ .nav-file-folder-content.is-being-renamed[contenteditable=true], .nav-file-title-content.is-being-renamed[contenteditable=true] { - background-color: var(--active-interaction); + background-color: var(--pink); color: var(--text-on-accent); } +.nav-file-folder-content.is-being-renamed[contenteditable=true]::selection, +.nav-file-title-content.is-being-renamed[contenteditable=true]::selection { + background-color: var(--text-normal); +} + +.workspace-leaf.mod-active .nav-folder.has-focus > .nav-folder-title:focus-within, +.workspace-leaf.mod-active .nav-file.has-focus:focus-within { + border: none; +} .backlink-pane, .outgoing-link-pane { diff --git a/scss/layouts/_sidebar.scss b/scss/layouts/_sidebar.scss index 12015cd..1760ebb 100644 --- a/scss/layouts/_sidebar.scss +++ b/scss/layouts/_sidebar.scss @@ -55,7 +55,7 @@ body:not(.is-grabbing) .nav-folder-title:hover { } /* file or folder is being dragged or selected */ -.nav-folder.mod-root .is-active, + body:not(.is-grabbing) .nav-file-title.is-being-dragged, body:not(.is-grabbing) .nav-folder-title.is-being-dragged, .nav-file-title.is-being-dragged, @@ -72,11 +72,12 @@ body:not(.is-grabbing) .nav-folder-title.is-being-dragged, /* file or folder has active menu */ +.nav-file-title.is-active, .workspace-leaf.mod-active .nav-folder.has-focus .nav-folder-title.has-active-menu, body:not(.is-grabbing) .nav-file-title.has-active-menu, .nav-folder-title.has-active-menu, .nav-folder.mod-root .has-active-menu, { - background-color: var(--internal-buttons); + background-color: var(--pink); color: var(--text-on-accent); } @@ -89,13 +90,11 @@ body:not(.is-grabbing) .nav-file-title.has-active-menu, /* prevents folder that has been active from remaining highlighted when user goes somewhere else */ -.workspace-leaf.mod-active .nav-folder.has-focus > .nav-folder-title { - background-color: var(--black-2); - border: 0; - - &:hover { - background-color: var(--text-selection-opaque); - } +.workspace-leaf.mod-active .nav-folder.has-focus > .nav-folder-title, +.workspace-leaf.mod-active .nav-file.has-focus > .nav-file-title { + background-color: var(--pink); + color: var(--text-on-accent); + border: none; } /* Fix for what seems to be uncommon problem where an invisible @@ -108,16 +107,29 @@ div will cause unrelated folder to move slightly on open/close */ .nav-folder-title-content.is-being-renamed { border: 0; border-radius: var(--border-radius-small); - background-color: var(--active-interaction); + background-color: var(--pink); color: var(--text-on-accent); + + &:hover { + background-color: var(--pink); + } } /* absolute nightmare to wrangle! use nested ::selector to change highlight. #TODO: Fix file type */ .nav-file-folder-content.is-being-renamed[contenteditable="true"], .nav-file-title-content.is-being-renamed[contenteditable="true"] { - background-color: var(--active-interaction); + background-color: var(--pink); color: var(--text-on-accent); + + &::selection { + background-color: var(--text-normal); + } +} + +.workspace-leaf.mod-active .nav-folder.has-focus > .nav-folder-title:focus-within, +.workspace-leaf.mod-active .nav-file.has-focus:focus-within { + border: none; } .backlink-pane,