cours/.obsidian/snippets/[ui] Floating Tab Header.css
Oscar Plaisant 602a41e7f8 update
2024-12-25 22:30:24 +01:00

62 lines
1.7 KiB
CSS

/*
Floating Tab Header
With inline title enabled, it seems a waste to take up vertical space of the 'view header'
especially if you don't use the back/forward buttons or the breadcrumb, so this minifies
that interface into a float right toolbar.
https://github.com/replete/obsidian-minimal-theme-css-snippets
*/
/* Floating tab header styles */
.view-header {
background:transparent !important;
border:none;
position:fixed;
top:8px;
right:10px;
right: calc(var(--scrollbar-size) + 8px);
padding: 5px 5px;
justify-content:end;
border-radius: 8px;
/* border:1px solid hsla(var(--base-h), var(--base-s), var(--base-l), 1); */
border:1px solid transparent;
height:auto;
z-index:500; /* Fixes in excalidraw */
}
.view-header:hover,
.view-header:focus-within {
border:1px solid var(--divider-color);
box-shadow: -2px 2px 6px -2px var(--divider-color);
background-color: var(--background-primary) !important;
}
/* Show/hide nav + breadcrumb interaction */
.view-header-nav-buttons,
.view-header-title-container,
.view-header .cmdr-adder {
opacity:0;
display:none;
}
.view-header:hover :is(.view-header-nav-buttons, .view-header-title-container),
.view-header:focus-within :is(.view-header-nav-buttons, .view-header-title-container){
opacity:1;
display:flex
}
/* Tweak commander '+' icon */
.view-header:hover .cmdr-adder,
.view-header:focus-within .cmdr-adder {
opacity:0.4;
display:flex;
}
/* Excalidraw fix */
[data-type="excalidraw"] .view-header .clickable-icon:not(:last-of-type){
display:none;
opacity:0;
}
[data-type="excalidraw"] .view-header:hover .clickable-icon:not(.view-header-icon) {
display:flex;
opacity:1;
}