[CSS Snippet] 탭 스타일 변경하기

옵시디언의 탭 스타일을 변경하는 CSS Snippet입니다.

예시

CSS 코드

/*
    Commpact Tabs
    Cleaner, smaller tabs with hidden buttons
    https://github.com/replete/obsidian-minimal-theme-css-snippets
*/

.workspace .mod-root .workspace-tab-header-container-inner {
    padding:0px 0 0px 5px;
    margin: 5px 0 2px -2px;
}
.workspace .mod-root .workspace-tab-header.is-active {
    background: none;
    box-shadow: none;
}
.workspace .mod-root .workspace-tab-header.is-active::before, 
.workspace .mod-root .workspace-tab-header.is-active::after {
    display:none;
}

.workspace .mod-root .workspace-tab-header.is-active .workspace-tab-header-inner {
    background: var(--background-modifier-hover);
}

/* Hide tab separator bar */
.workspace .mod-root .workspace-tab-header-inner::after {
    display:none;
}

/* Hide buttons until hover */
.workspace .mod-root .workspace-tab-header:not(.is-active) .workspace-tab-header-inner-close-button,
.workspace .mod-root .workspace-tab-header:not(.is-active) .workspace-tab-header-status-icon {
    opacity:0;
}
.workspace .mod-root .workspace-tab-header:not(.is-active):hover .workspace-tab-header-inner-close-button,
.workspace .mod-root .workspace-tab-header:not(.is-active):hover .workspace-tab-header-status-icon {
    opacity:1;
}

/* Less prominent pinned icon */
.workspace .mod-root .workspace-tab-header.is-active .workspace-tab-header-status-icon {
    opacity:0.6 !important;
}


/* Fade graphic to make hover close button look less harsh */
.workspace .mod-root .workspace-tab-header:not(.is-active):hover .workspace-tab-header-inner-close-button::before {
    content:'';
    display:block;
    position:absolute;
    background:linear-gradient(to right, transparent, var(--bg2)) !important;
    right:100%;
    height:1em;
    width: 1em;
    pointer-events:none;
}

/* Smaller buttons */
.workspace .mod-root .workspace-tab-header-inner-close-button,
.workspace .mod-root .workspace-tab-header-status-icon {
    transform:scale(0.9) translate(2px,1px);
    transform-origin:center;
}

/* Smaller new tab button */
.workspace .mod-root  .workspace-tab-header-new-tab {
    margin-left:4px;
}
.workspace .mod-root .workspace-tab-header-new-tab .clickable-icon {
    transform:scale(0.8) translate(0,1px);
}

.workspace .mod-root .workspace-tab-header {
    /* width:auto;
    flex: none;
    flex-shrink: 1;
    max-width:25% */
}

---