readme.md

2022-02-20 Beta

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

minimal-tab-styles

.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

*/

For use with Style Settings plugin, as seen below

Great. Thx for sharing.