obsidian-tabs
obsidian-tabs copied to clipboard
[RESOURCE] CSS stuff I've managed with this plugin
This is just to make it easier to implement "hide until hover" and stuff like that that's being requested.
/* display headers on hover ONLY WITH TABS (initially based on chrisgrieser/shimmering-focus) */
.plugin-tabs .workspace-leaf {
border-top: 0 !important;
}
.plugin-tabs .mod-right-split .workspace-tab-header-container,
.plugin-tabs .mod-right-split .workspace-tab-header-container * {
background-color: var(--background-secondary) !important;
height: calc(var(--headerheight) + 2px) !important;
}
.plugin-tabs .mod-right-split .view-content {
border-top: 2px solid var(--interactive-accent);
margin-top: 1px;
}
.plugin-tabs .workspace-leaf {
border: 0px !important;
border-radius: 0px !important;
}
.plugin-tabs .mod-root.workspace-split .workspace-split>div.workspace-leaf:not(.mod-active),
.plugin-tabs .mod-root.workspace-split>div.workspace-leaf:not(.mod-active) {
border-radius: 0 !important;
border-right: 0 !important;
border-left: 0 !important;
--w2: max(20%, 100%);
}
.plugin-tabs .view-content {
height: 100% !important;
}
.plugin-tabs .workspace-leaf.mod-active .view-actions {
padding-right: 2px !important;
}
.plugin-tabs .workspace-leaf:not(.mod-active) .view-header {
border-bottom: 2px solid var(--interactive-accent) !important;
}
.plugin-tabs .workspace-leaf .view-header {
transition: .2s;
text-align: left !important;
border-left: 0 !important;
}
.plugin-tabs .workspace-split.mod-horizontal .view-header {
height: var(--headerheight) !important;
}
.plugin-tabs .workspace-leaf:only-of-type .view-header {
background-color: var(--background-secondary)!important;
border-bottom: 2px solid var(--interactive-accent)!important;
}
.plugin-tabs .workspace-leaf:only-of-type .view-header:hover,
.plugin-tabs .workspace-leaf:only-of-type .view-header:focus-within {
background-color: var(--background-primary)!important;
}
.plugin-tabs .workspace-leaf.mod-active .view-header:hover,
.plugin-tabs .workspace-leaf.mod-active .view-header:focus-within {
border-bottom: 2px solid var(--interactive-accent) !important;
transition: .2s !important;
height: var(--headerheight) !important;
border-radius: 0px !important;
}
.plugin-tabs .workspace-leaf.mod-active .view-header {
transition: .2s !important;
border: none;
background-color: var(--background-primary);
display: hidden;
height: calc(var(--headerheight)/2) !important;
}
.plugin-tabs .workspace-leaf:not(.mod-active) .view-header-title {
opacity: 1 !important;
}
.plugin-tabs .view-header-icon,
.plugin-tabs .view-action svg,
.plugin-tabs .mod-active .view-header-title {
opacity: 0;
}
.plugin-tabs .view-header .view-action {
margin-right: 2px !important;
margin-left: 6px !important;
height: calc(var(--headerheight)/2) !important;
width: 25px !important;
}
.plugin-tabs .view-header:hover .view-header-icon,
.plugin-tabs .view-header:hover .view-action svg,
.plugin-tabs .view-header:hover .view-header-title,
.plugin-tabs .view-header:focus-within .view-header-title,
.plugin-tabs .workspace-split.mod-vertical.mod-root .workspace-split.mod-horizontal .workspace-leaf.mod-active .view-header {
opacity: 1;
transition: .2s !important;
}
This is all I've applied and it's not clean, so before using it you'll have to have a proper read, but I've done quite a bit and avoided !importants where reasonable.
Great work!