221 lines
5.1 KiB
CSS
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;
|
|
}
|
|
|