I like AnuPpuccin’s card layout, but I’m using minimal theme, so I use AI to extract it, however, I am not satisfied with the tab style:
Now:
Need to be(neglect text color):
How can I modify below code?
/*===============================================================
Card Layout Snippet
----------
Based on AnuPpuccin theme for Obsidian
This snippet is extracted from AnuPpuccin theme and allows you to
use the card layout feature with any other theme in Obsidian.
Original theme by AnubisNekhet:
https://github.com/AnubisNekhet/AnuPpuccin
*===============================================================*/
/* @settings
name: Card Layout Snippet
id: card-layout-snippet-settings
settings:
# Card Layout Settings
-
id: anp-layout-card-header
title: Card Layout Settings
description: Configure the appearance of card layout
type: heading
level: 1
collapsed: false
-
id: anp-layout-select
title: Enable Card Layout
type: class-toggle
default: true
addCommand: true
-
id: anp-card-radius
title: Card radius
type: variable-number
default: 16
format: px
-
id: anp-card-layout-padding
title: Card padding
type: variable-number
default: 10
format: px
-
id: anp-card-header-left-padding
title: Tab left padding
type: variable-number
default: 20
format: px
-
id: anp-card-shadows
title: Enable shadows
type: class-toggle
default: true
-
id: anp-card-layout-actions
title: Enable card format for actions
type: class-toggle
default: true
-
id: anp-card-layout-filebrowser
title: Enable card format for file browser
type: class-toggle
default: true
-
id: anp-hide-borders
title: Hide borders
type: class-toggle
default: false
*/
/* Card Layout Variables */
body.anp-layout-select {
--card-background-color: var(--background-secondary);
--card-foreground-color: var(--background-primary);
--divider-color: transparent;
--tab-outline-color: var(--background-modifier-border);
--divider-color-hover: var(--background-modifier-border);
--divider-width: 4px;
--divider-width-hover: 4px;
--tab-container-background: var(--card-background-color);
--file-header-border: var(--border-width) dashed var(--background-modifier-border);
--ribbon-padding: 0;
}
/* Card Layout Base Styles */
body.anp-layout-select.anp-hide-borders {
--tab-outline-color: transparent;
}
body.anp-layout-select.anp-hide-borders .menu {
border: 0px !important;
}
body.anp-layout-select .sidebar-toggle-button,
body.anp-layout-select .workspace-tabs.mod-top {
--tab-container-background: var(--card-background-color);
}
body.anp-layout-select .workspace-tabs.mod-top:has(.obsidian-banner-wrapper) {
--file-header-border: none;
}
body.anp-layout-select.is-focused,
body.anp-layout-select.is-focused .sidebar-toggle-button,
body.anp-layout-select.is-focused .workspace-tabs.mod-top {
--tab-container-background: var(--card-background-color);
}
body.anp-layout-select .mod-left-split .workspace-tabs .workspace-leaf,
body.anp-layout-select .mod-right-split .workspace-tabs .workspace-leaf,
body.anp-layout-select .mod-left-split,
body.anp-layout-select .mod-vertical .workspace-tab-container,
body.anp-layout-select .mod-vertical,
body.anp-layout-select .workspace-split.mod-vertical,
body.anp-layout-select .workspace-fake-target-overlay:not(.is-in-sidebar) .workspace-tabs .workspace-leaf,
body.anp-layout-select .mod-root .workspace-tabs .workspace-leaf,
body.anp-layout-select .workspace-ribbon.mod-left,
body.anp-layout-select .workspace-ribbon.mod-left:before {
background-color: var(--tab-container-background);
}
/* Card Layout Actions */
body.anp-layout-select.anp-card-layout-actions .workspace-ribbon.mod-left {
margin-right: var(--anp-card-layout-padding, 10px);
}
body.anp-layout-select.anp-card-layout-actions .side-dock-actions {
border-radius: 0px var(--anp-card-radius, 16px) var(--anp-card-radius, 16px) 0px;
margin-top: 2px;
border-width: 1px 1px 0px 1px;
border-style: solid;
border-color: var(--tab-outline-color);
background-color: var(--card-foreground-color);
}
body.anp-layout-select .side-dock-actions {
padding: 8px 4px 12px;
}
body.anp-layout-select .workspace-split.mod-left-split .workspace-sidedock-vault-profile {
border: none;
margin: var(--anp-card-layout-padding, 10px);
margin-bottom: 0;
background-color: transparent;
}
/* Card Layout Tabs and Headers */
body.anp-layout-select .workspace-ribbon.mod-left {
margin-top: calc(var(--header-height) - 1px);
}
body.anp-layout-select .workspace-tab-header-container,
body.anp-layout-select .workspace-ribbon.mod-left:before {
border-bottom: none;
}
body.anp-layout-select .mod-vertical .workspace-tabs .workspace-tab-header-container {
padding-left: var(--anp-card-header-left-padding, 20px);
}
body.anp-layout-select .mod-vertical .workspace-tabs .workspace-tab-header-container .workspace-tab-header-container-inner {
margin: 6px -5px calc(var(--tab-outline-width) * -1);
z-index: 1;
}
body.anp-layout-select .mod-left-split .workspace-tab-container,
body.anp-layout-select .mod-right-split .workspace-tab-container {
padding-left: var(--anp-card-layout-padding, 10px);
padding-right: var(--anp-card-layout-padding, 10px);
background-color: var(--tab-container-background);
}
/* Card Layout Content */
body.anp-layout-select .workspace-split .workspace-leaf-content:not([data-type=file-explorer]),
body.anp-layout-select.anp-card-layout-filebrowser .workspace-leaf-content[data-type=file-explorer] {
background-color: var(--card-foreground-color);
border: 1px solid var(--tab-outline-color);
}
body.anp-layout-select.anp-card-shadows .workspace-split .workspace-leaf-content,
body.anp-layout-select.anp-card-shadows.anp-card-layout-actions .side-dock-actions,
body.anp-layout-select.anp-card-shadows.anp-card-layout-filebrowser .workspace-split .workspace-leaf-content[data-type=file-explorer] {
box-shadow: 0 3px 4px 0px rgba(0, 0, 0, 0.05);
}
body.anp-layout-select .workspace-split .mod-stacked .workspace-leaf-content {
border-radius: 0;
border: none;
margin-bottom: 0px;
border-left: none;
}
body.anp-layout-select .workspace-split.mod-horizontal > * {
width: unset;
}
/* Card Layout Stacked Tabs */
body.anp-layout-select .workspace .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header {
border-style: solid;
border-radius: var(--anp-card-radius, 16px) 0px 0px var(--anp-card-radius, 16px);
border-width: var(--tab-outline-width);
border-color: var(--tab-outline-color);
border-right: var(--tab-outline-width) dashed var(--tab-outline-color);
}
body.anp-layout-select .workspace .workspace-tabs.mod-stacked .workspace-leaf {
border-left-width: 0px;
border-top-width: var(--tab-outline-width);
border-bottom-width: var(--tab-outline-width);
border-style: solid;
border-color: var(--tab-outline-color);
border-radius: 0 var(--anp-card-radius, 16px) var(--anp-card-radius, 16px) 0;
}
body.anp-layout-select .workspace .workspace-tabs.mod-stacked .workspace-tab-container {
padding-bottom: var(--anp-card-layout-padding, 10px);
}
body.anp-layout-select .workspace-drop-overlay:before {
width: calc(100% - 6px - var(--anp-card-layout-padding, 0) * 2);
height: calc(100% - 6px - var(--anp-card-layout-padding, 0) * 2);
margin: auto;
}
/* Card Layout Desktop Specific */
body.anp-layout-select:not(.is-phone) .mod-vertical .workspace-tabs {
padding-left: var(--anp-card-layout-padding, 10px);
padding-right: var(--anp-card-layout-padding, 10px);
}
body.anp-layout-select:not(.is-phone) .workspace-split .workspace-leaf-content:not([data-type=file-explorer]),
body.anp-layout-select:not(.is-phone).anp-card-layout-filebrowser .workspace-leaf-content[data-type=file-explorer] {
border-radius: var(--anp-card-radius, 16px);
margin-bottom: var(--anp-card-layout-padding, 10px);
}
/* Remove bottom border from active tabs */
body.anp-layout-select .workspace-tab-header.is-active {
border-bottom: none !important;
}
body.anp-layout-select .workspace-tab-header.is-active::after {
display: none !important;
}
.workspace-tab-header.is-active {
font-weight: 600 !important;
}