Tab styles for Obsidian Minimal theme. Designed for use with Style Settings plugin. See demo in the comments below. Learn more about snippets: https://minimal.guide/Extras/CSS+snippets
-
-
Save kepano/7fc1cd9433b5506ce45b44cfa3734fa0 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
.tab-style-2 .workspace-tab-header-container .workspace-tab-header { | |
flex-grow:1; | |
height:var(--header-height); | |
} | |
.tab-style-2 .workspace-tab-container-inner { | |
padding:0; | |
} | |
.tab-style-2 .workspace-tab-header-container .workspace-tab-header .workspace-tab-header-inner { | |
justify-content:center; | |
align-items:center; | |
border-bottom:1px solid var(--ui1); | |
border-radius:0; | |
transition:none; | |
} | |
.tab-style-2 .workspace-tab-header-container .workspace-tab-header .workspace-tab-header-inner:hover { | |
background-color:var(--bg3); | |
} | |
.tab-style-2 .workspace-tab-header-container .workspace-tab-header.is-active .workspace-tab-header-inner { | |
border-bottom:2px solid var(--ax3); | |
padding-top:1px; | |
color:var(--ax3); | |
} | |
.tab-style-2 .workspace-tab-header-inner-icon:hover { | |
background-color:transparent; | |
} | |
.tab-style-3 .workspace-sidedock-empty-state+.workspace-tabs .workspace-tab-header-container, | |
.tab-style-3 .mod-right-split .workspace-sidedock-empty-state + .workspace-tabs .workspace-tab-header-container { | |
border-bottom:none; | |
} | |
.tab-style-3 .workspace-tab-header-container { | |
padding-left:10px; | |
padding-right:10px; | |
border:none; | |
} | |
.tab-style-3 .workspace-tab-header-container .workspace-tab-header { | |
flex-grow:1; | |
} | |
.tab-style-3 .workspace-tab-container-inner { | |
padding:3px; | |
background:var(--bg3); | |
border-radius:6px; | |
} | |
.tab-style-3 .workspace-tab-header-container .workspace-tab-header .workspace-tab-header-inner { | |
justify-content:center; | |
align-items:center; | |
transition:none; | |
border:1px solid transparent; | |
} | |
.tab-style-3 .workspace-tab-header-container .workspace-tab-header .workspace-tab-header-inner:hover { | |
background-color:transparent; | |
} | |
.tab-style-3:not(.minimal-dark-tonal) .mod-left-split .workspace-tab-header-container .workspace-tab-header.is-active .workspace-tab-header-inner { | |
background:var(--bg2); | |
} | |
.tab-style-3 .workspace-tab-header-container .workspace-tab-header.is-active .workspace-tab-header-inner { | |
background:var(--bg1); | |
box-shadow:0px 1px 1px 0 rgba(0,0,0,0.1); | |
border-radius:4px; | |
} | |
.tab-style-3 .workspace-tab-header-inner-icon { | |
height:20px; | |
padding:1px 0 0 0; | |
} | |
.tab-style-3 .workspace-tab-header-inner-icon:hover { | |
background-color:transparent; | |
} | |
/* | |
.nav-header .nav-buttons-container { | |
padding-left:0; | |
padding-right:0; | |
border-bottom:1px solid var(--ui1); | |
} | |
.nav-header .nav-buttons-container .nav-action-button { | |
flex-grow:1; | |
background-color:var(--bg3); | |
border-radius:0; | |
background-color:transparent; | |
}*/ | |
/* @settings | |
name: Minimal Tabs | |
id: minimal-tabs | |
settings: | |
- | |
id: tab-style | |
title: Tab style | |
type: class-select | |
allowEmpty: false | |
default: tab-style-1 | |
options: | |
- | |
label: Compact | |
value: tab-style-1 | |
- | |
label: Wide | |
value: tab-style-3 | |
- | |
label: Underlined | |
value: tab-style-2 | |
*/ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
For use with Style Settings plugin, as seen below