Last active
February 28, 2024 17:04
-
-
Save ricafolio/4574838acffcc275fc1d8ef1e32abd78 to your computer and use it in GitHub Desktop.
Obsidian dual pane file explorer CSS Snippet for File Tree Alternative plugin
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Folder panel root container */ | |
.oz-folders-tree-wrapper { | |
padding-left: 0; | |
} | |
.view-content { | |
padding-top: 5px !important; | |
padding-right: 13px !important; | |
} | |
/* Hide resize icon on bottom right */ | |
.oz-folder-pane-horizontal, | |
.oz-folder-pane { | |
resize: none; | |
} | |
/* Line divider */ | |
#file-tree-divider-horizontal { | |
width: 1px; | |
border-right: 1px solid rgba(128, 128, 128, 0.4); | |
} | |
#file-tree-divider { | |
height: 1px; | |
border-bottom: 1px solid rgba(128, 128, 128, 0.4); | |
margin-bottom: 1rem; | |
} | |
/* ---- ACTION CONTAINER ---- */ | |
/* Hide action container */ | |
.oz-folders-action-items { | |
display: none; | |
} | |
.oz-folders-action-items, | |
.oz-flex-container { | |
background: transparent !important; | |
backdrop-filter: none; | |
border: none; | |
margin-bottom: 0; | |
padding: 0; | |
} | |
.oz-nav-action-button { | |
display: none; | |
} | |
.oz-explorer-container { | |
position: relative; | |
padding-left: 8px !important; | |
} | |
/* Keep add note button */ | |
.oz-flex-container>div.oz-nav-buttons-right-block>div:nth-child(3) { | |
display: block; | |
position: absolute; | |
right: 0; | |
top: 2.8px; | |
cursor: pointer; | |
opacity: 0.2; | |
} | |
.oz-flex-container>div.oz-nav-buttons-right-block>div:nth-child(3):hover { | |
opacity: 0.5; | |
} | |
/* ---- ACTION CONTAINER END ---- */ | |
/* ---- FOLDER ---- */ | |
.oz-folders-tree-wrapper { | |
padding-right: 0.5rem; | |
} | |
.oz-folders-tree-wrapper .treeview { | |
padding: 2px 0; | |
} | |
.oz-folder-element { | |
display: flex; | |
align-items: center; | |
border-radius: var(--radius-s); | |
font-weight: var(--nav-item-weight); | |
line-height: var(--line-height-tight); | |
padding: 4px 8px 4px 4px; | |
margin-bottom: 0; | |
} | |
.oz-folder-block { | |
padding-top: 0; | |
} | |
.oz-folder-name { | |
color: var(--nav-item-color) !important; | |
font-size: var(--nav-item-size); | |
} | |
.oz-folder-name.is-folder-active { | |
font-weight: normal; | |
} | |
.drag-entered, | |
.oz-folder-element:hover, | |
.oz-nav-file:hover { | |
color: var(--nav-item-color-hover); | |
background-color: var(--nav-item-background-hover); | |
border-radius: 4px; | |
} | |
/* Folder tree */ | |
.oz-folder-contents { | |
border: none; | |
padding-left: 0; | |
margin-left: 0 !important; | |
} | |
.oz-folders-tree-wrapper>.treeview .oz-icon-div { | |
display: none !important; | |
} | |
.oz-folders-tree-wrapper>.treeview .oz-folder-name { | |
font-size: 13px !important; | |
color: white !important; | |
font-weight: bold; | |
} | |
.oz-folders-tree-wrapper>.treeview .oz-folder-element { | |
padding-left: 2px !important; | |
} | |
.oz-folders-tree-wrapper>.treeview .oz-folder-element:hover { | |
background-color: transparent !important; | |
} | |
/* Alternative icon to folder */ | |
.oz-icon-div svg { | |
display: none; | |
} | |
.oz-icon-div::before { | |
content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzg4ODg4OCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIGQ9Ik0yMCAyMGEyIDIgMCAwIDAgMi0yVjhhMiAyIDAgMCAwLTItMmgtNy45YTIgMiAwIDAgMS0xLjY5LS45TDkuNiAzLjlBMiAyIDAgMCAwIDcuOTMgM0g0YTIgMiAwIDAgMC0yIDJ2MTNhMiAyIDAgMCAwIDIgMloiLz48L3N2Zz4="); | |
opacity: 0.5; | |
margin-right: 8px; | |
margin-top: 4px; | |
} | |
.oz-icon-div, | |
.oz-folder-block { | |
display: flex; | |
align-items: center; | |
} | |
/* ---- FOLDER END ---- */ | |
/* ---- FILE ---- */ | |
.file-tree-header-fixed { | |
padding: 8px 8px 8px 2px; | |
} | |
.oz-file-tree-header { | |
font-size: 13px; | |
text-align: left; | |
background-color: transparent; | |
margin-top: 0; | |
margin-bottom: 0; | |
padding: 0; | |
} | |
.oz-nav-file { | |
padding: 0.4rem 0.6rem; | |
} | |
div.oz-nav-file.is-active, | |
div.oz-nav-file.is-active div.oz-nav-file-title, | |
div.oz-nav-file.is-active div.oz-nav-file-title-content { | |
background-color: var(--nav-item-background-active); | |
font-weight: normal; | |
border-radius: 4px; | |
} | |
.oz-nav-file-title { | |
font-size: 13px !important; | |
cursor: default; | |
} | |
.oz-file-tree-files { | |
padding-top: 0 !important; | |
} | |
.oz-file-tree-files .LazyLoad { | |
height: auto !important; | |
margin-bottom: 4px; | |
} | |
/* ---- FILE END ---- */ | |
/* ---- MODAL ---- */ | |
.modal-content button { | |
cursor: pointer; | |
} | |
.modal-content>button:nth-of-type(1) { | |
background-color: var(--nav-item-background-active); | |
} | |
.modal-content>button:nth-of-type(1):hover { | |
background-color: var(--interactive-accent-hover); | |
} | |
.modal-content input { | |
background-color: transparent; | |
border: 1px solid var(--background-modifier-border); | |
border-radius: 3px; | |
padding: 4px 8px; | |
} | |
/* ---- MODAL END ---- */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Use Horizontal Evernote View