cours/.obsidian/snippets/omts-[ui] Compact File Explorer.css
Oscar Plaisant 29453462f9 [nb] Commit
2024-12-26 16:09:08 +01:00

221 lines
5.1 KiB
CSS

/*
Compact File Explorer
I prefer a condensed view with the chevron on the right.
NOTE: Fix padding bug on startup
--------------------------------
Obsidian calculates paddings via JS and there is a bug sometimes
with the wrong indents appearing on startup.
The fix for this is to turn dummy.css snippet on and off.
To automate this fix (KLUDGE incoming):
- Install 'Snippet Commands' by death_au from Community Plugins
- Install 'Templater' plugin
- Create a new startup script in your vault containing this code:
<%* app.commands.executeCommandById('snippet-commands-obsidian:snippet-command-dummy'); %>
Now, the padding will be reset on startup. Even with this fix, sometimes
large folders have incorrect padding offsets further down.
https://github.com/replete/obsidian-minimal-theme-css-snippets
*/
/* Workspace: Sidebar navigation */
[data-type=file-explorer] {
.nav-header {
padding-left:14px;
padding-bottom:3px;
padding-top: 6px;
.nav-buttons-container {
opacity:0.7;
transition: .2s opacity ease-in;
&:hover {
opacity:1;
}
}
.clickable-icon {
padding-left:4px;
}
}
.nav-files-container {
padding-left: 9px;
padding-right: 9px;
}
.collapse-icon {
position:relative !important;
margin-left:0 !important;
order:4;
padding-left:3px;
svg {
stroke:var(--text-faint);
margin-top:1px;
}
}
/* Fix Folder Note Count display */
.nav-folder-title-content {
flex-grow:0 !important;
}
/* Fix flashing color */
.is-flashing {
background-color: var(--tx3)
}
/* We're fighting obsidians JS on calculated paddings here, fix left margin */
.tree-item-self[style] {
padding-left:8px !important;
}
/* Disable sliding animation */
* {
transition: none !important;
}
/* tree trunk */
.tree-item-children {
border-inline-start:none;
position:relative;
&::before {
content:'';
position:absolute;
top:0;
left:-1px;
bottom:12px;
width:1px;
background:var(--nav-indentation-guide-color);
}
}
/* tree branches */
.nav-file,
.nav-folder {
position:relative;
z-index:1;
}
.nav-folder-children .nav-file-title::before,
.nav-folder-children .nav-folder-title::before {
content:'';
display:block;
width:8px;
height:1px;
background-color: var(--nav-indentation-guide-color);
position:absolute;
margin-left:-13px;
z-index:-1;
}
.nav-folder.mod-root .nav-folder > .nav-folder-children {
margin-left:8px;
position:relative;
padding-left:7px;
}
.nav-folder.mod-root .nav-file:hover .nav-file-title::before,
.nav-folder.mod-root .nav-file-title.is-active::before {
width:8px;
}
/* overflowing title alignment fix */
.nav-file-title,
.nav-folder-title {
padding-right:4px;
z-index:2;
}
/* .nav-folder.mod-root .nav-folder > .nav-folder-children {
margin-left:13px !important;
outline:1px solid red;
} */
/* .nav-folder.mod-root .nav-folder > .nav-folder-children:has([class*=nav-])::after {
background-color:var(--bg2, var(--background-primary));
} */
/* Fix Folder Note Count display */
.nav-folder-title-content {
flex-grow:0 !important;
}
/* Folder Count plugin alignment */
.nav-folder-title[data-count]::after {
color: var(--tx3, var(--text-faint));
position:absolute;
right:0;
transform: translate(0, 1px);
opacity:0;
transition: .2s opacity ease-in;
padding-right:3px;
}
.nav-files-container:hover .nav-folder-title[data-count]::after {
opacity:1;
}
/* Make attachment folders less visible */
.nav-files-container [data-path*=attachments],
.nav-files-container [data-path*=Assets] {
opacity:0.6;
}
/* style file tag */
.nav-file-tag {
/* Here be dragons! */
margin-left:0;
margin-right:3px;
text-shadow: 0.5px 0 0 black;
text-indent:-5px;
overflow:visible;
font-weight:bold;
line-height:10px;
width:13px;
height:13px;
font-size: 11px;
letter-spacing:-0.5px;
vertical-align:middle;
text-rendering: geometricPrecision;
/* font-family: "JetBrains Mono", monospace; */
font-family: "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
border-radius:0;
/* suffix file tag styling */
.nav-file-title-content + & {
margin-left: .5rem;
letter-spacing: 0;
}
}
/* Hide file tag when an icon is set */
.nav-file:has(.nav-file-tag):has(.iconize-icon) {
.nav-file-tag {display:none}
}
/* Fix weird indent on root vault files */
.nav-files-container .nav-folder.mod-root > .nav-folder-children > .tree-item.nav-file {
.nav-file-title.is-active::before {
/* fix indent on active file in root */
display:none;
}
&:hover .nav-file-title::before {
/* fix indent on hovered file in root */
display:none !important;
}
}
}
/* Align vault title */
body:not(.is-mobile) .nav-folder.mod-root>.nav-folder-title .nav-folder-title-content {
margin-left:-3px;
}