64 lines
1.8 KiB
CSS
64 lines
1.8 KiB
CSS
/*
|
|
Floating Tab Header Mini
|
|
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,
|
|
.view-header .clickable-icon:not(:last-child) {
|
|
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),
|
|
.view-header:is(:hover) .clickable-icon:not(.view-header-icon){
|
|
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;
|
|
} |