-
-
Save GitMurf/22efc95dee40c5c4567659c506c77e10 to your computer and use it in GitHub Desktop.
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
body { | |
/* Fit 2 per screen = 930px ... 3 = 620px */ | |
--masonry-split-widths: 930px; | |
--tab-stacked-pane-width: var(--masonry-split-widths); | |
} | |
div.workspace-split.mod-root { | |
overflow: auto; | |
} | |
/* Need this for any panes scrolled off screen to be able to drag tabs properly */ | |
div.workspace-split.mod-root>div.workspace-split.mod-vertical { | |
width: unset; | |
} | |
div.workspace-split.mod-root>div.workspace-tabs, | |
div.workspace-split.mod-root>div.workspace-split.mod-vertical>div.workspace-tabs, | |
div.workspace-split.mod-root>div.workspace-split.mod-vertical>div.workspace-split.mod-vertical, | |
div.workspace-split.mod-root>div.workspace-split.mod-vertical>div.workspace-split.mod-horizontal, | |
div.workspace-split.mod-root>div.workspace-split.mod-horizontal, | |
div.workspace-split.mod-root>div.workspace-split.mod-horizontal>div.workspace-split.mod-vertical, | |
div.workspace-split.mod-root>div:only-of-type.workspace-split.mod-horizontal>div.workspace-split.mod-vertical>div.workspace-tabs, | |
div.workspace-split.mod-root>div.workspace-split.mod-horizontal>div.workspace-split.mod-vertical>div.workspace-split.mod-horizontal { | |
min-width: var(--masonry-split-widths); | |
} | |
div.workspace.is-right-sidedock-open div.sidebar-toggle-button.mod-right, | |
div.workspace:not(.is-right-sidedock-open) div.sidebar-toggle-button.mod-right { | |
position: fixed; | |
right: var(--frame-right-space); | |
background-color: var(--background-secondary-alt); | |
border-bottom: var(--divider-width) solid var(--divider-color); | |
z-index: 1; | |
padding: 0px; | |
height: 40px; | |
} | |
div.workspace.is-right-sidedock-open div.sidebar-toggle-button.mod-right>div.clickable-icon, | |
div.workspace:not(.is-right-sidedock-open) div.sidebar-toggle-button.mod-right>div.clickable-icon { | |
padding: 0px 12px 0px 12px; | |
border-radius: 0px; | |
} | |
body>div.titlebar>div.titlebar-inner>div.titlebar-button-container.mod-right { | |
background-color: var(--background-secondary-alt); | |
border-bottom: var(--divider-width) solid var(--divider-color); | |
height: 40px; | |
} | |
body:not(.is-focused)>div.titlebar>div.titlebar-inner>div.titlebar-button-container.mod-right, | |
body:not(.is-focused) div.workspace.is-right-sidedock-open div.sidebar-toggle-button.mod-right, | |
body:not(.is-focused) div.workspace:not(.is-right-sidedock-open) div.sidebar-toggle-button.mod-right { | |
background-color: var(--tab-container-background); | |
} | |
.is-hidden-frameless:not(.is-fullscreen) .workspace-tabs.mod-top-right-space .workspace-tab-header-container:after { | |
position: fixed; | |
width: calc(var(--frame-right-space) + 42px); | |
} | |
.is-hidden-frameless:not(.is-fullscreen) .workspace-tabs.mod-top-right-space .workspace-tab-header-container { | |
padding-right: calc(var(--frame-right-space) + 42px); | |
} | |
body:not(.is-popout-window):not(.is-grabbing):not(.is-fullscreen) .workspace-tabs.mod-top .workspace-tab-header-spacer { | |
-webkit-app-region: no-drag; | |
} | |
body:not(.is-popout-window) div.side-dock-actions:before { | |
content: "\2723"; | |
font-size: 30px; | |
-webkit-app-region: drag; | |
text-align: center; | |
margin-left: 1px; | |
} | |
/* COMMENT OUT BELOW IF YOU DO NOT WANT THE BACK/FORWARD BUTTONS ADDED TO THE LEFT RIBBON */ | |
body.is-hidden-frameless:not(.is-popout-window) .titlebar .titlebar-button.mod-forward, | |
body.is-hidden-frameless:not(.is-popout-window) .titlebar .titlebar-button.mod-back { | |
display: inline; | |
position: fixed; | |
left: 0; | |
width: 43px; | |
padding: 0; | |
margin: 0; | |
text-align: center; | |
height: 26px; | |
} | |
body.is-hidden-frameless:not(.is-popout-window) .titlebar .titlebar-button.mod-forward { | |
bottom: 105px; | |
} | |
body.is-hidden-frameless:not(.is-popout-window) .titlebar .titlebar-button.mod-back { | |
bottom: 140px; | |
} | |
body.is-hidden-frameless:not(.is-popout-window) .titlebar .titlebar-button.mod-forward>span.history-counter, | |
body.is-hidden-frameless:not(.is-popout-window) .titlebar .titlebar-button.mod-back>span.history-counter { | |
display: none; | |
} | |
body.is-hidden-frameless:not(.is-popout-window) .titlebar .titlebar-button.mod-forward>svg, | |
body.is-hidden-frameless:not(.is-popout-window) .titlebar .titlebar-button.mod-back>svg { | |
vertical-align: middle; | |
width: 20px; | |
} |
@trainbuffer unfortunately I do not have a Mac to test on :( May need to find an experienced CSS person to test on a Mac and see if they can troubleshoot. I am happy to update this gist if someone can provide the fix necessary for Macs :)
I played around for a while but couldn't figure it out. If I hear anything, I'll let you know. Not your fault, of course, but the first obsidian snippet I've come across that behaves differently on Windows and macOS. lol
For the time being on the mac, I used Commander to add forward/back buttons to the ribbon. I'd rather them down above the vault picker (like your snippet) but that's for another day. Anyway, thanks again.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Obsidian 0.16.2 (Installer 0.15.9) on both OSes.
Works great on Windows 11!
macOS 12.5.1: Sliding panes work and the dragging button is visible, but can't see the back/forward buttons. :(
Tried:
Willing to take screenshots or poke around. Just let me know.
Cheers!