Skip to content

Instantly share code, notes, and snippets.

@raisabelatrix
Last active November 4, 2023 07:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save raisabelatrix/857efd2395fdf48378aeaed4b1182603 to your computer and use it in GitHub Desktop.
Save raisabelatrix/857efd2395fdf48378aeaed4b1182603 to your computer and use it in GitHub Desktop.
Keeps the sidebar ribbon out of sight and only shows it upon hover. [Not tested on Obsidian 1.0+]
/*HIDE RIBBON WHEN SIDEBAR IS COLLAPSED*/
.side-dock-ribbon.mod-left.is-collapsed .side-dock-ribbon-action {
opacity: 0;
transition: opacity .3s;
}
.side-dock-ribbon.mod-left.is-collapsed:hover .side-dock-actions:hover .side-dock-ribbon-action,
.side-dock-ribbon.mod-left.is-collapsed:hover .side-dock-settings:hover .side-dock-ribbon-action {
opacity: 1;
}
/*HIDE RIBBON WHEN SIDEBAR IS EXPANDED*/
.side-dock-ribbon.mod-left:not(.is-collapsed) .side-dock-ribbon-action,
.side-dock-ribbon.mod-left:not(.is-collapsed) .workspace-ribbon-collapse-btn svg {
opacity: 0;
}
.side-dock-ribbon.mod-left.is-collapsed .workspace-ribbon-collapse-btn:not(hover) + .side-dock-actions:hover .side-dock-ribbon-action,
.side-dock-ribbon.mod-left:hover:not(.is-collapsed) .side-dock-ribbon-action,
.side-dock-ribbon.mod-left:hover:not(.is-collapsed) .workspace-ribbon-collapse-btn svg {
opacity: 1;
}
.side-dock-ribbon.mod-left:not(.is-collapsed) {
flex: 0 0 5px;
transition: flex .2s;
}
.side-dock-ribbon.mod-left:hover:not(.is-collapsed) {
flex: 0 0 40px;
}
@mawnir
Copy link

mawnir commented Nov 3, 2023

only one problem "Files icon" is behind fullscreen button:
Screen Shot 2023-11-03 at 14 37 58

@raisabelatrix
Copy link
Author

@mawnir aaah I haven’t updated this snippet in a long time. I also never tested it on Mac. Just Windows 10

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment