gnoxnahte_obsidian-tab-panels/styles.css

.tab-panel-container {
    display: flex;
    flex-direction: column;
    --padding-dist: 1em;
    --outer-border-radius: 1.5em;
    --inner-border-radius: calc(var(--outer-border-radius) - var(--padding-dist));
    padding: var(--padding-dist);
    
    border: var(--border-width) solid var(--background-modifier-border);
    border-radius: var(--outer-border-radius);
    background-color: var(--background-secondary-alt);
}

.tab-scroll-container {
    overflow-x: auto;
    overflow-y: hidden;

    &::-webkit-scrollbar-track-piece {
        margin-left: 3px;
    }
    
    &::-webkit-scrollbar-track {
        background-color: var(--background-primary) !important;

        border-top-left-radius: 0.5em;
        border-top-right-radius: 0.5em;
        
        border: var(--border-width) solid var(--background-modifier-border);
        border-bottom: none;

        box-shadow: 0 5px 0 -1px var(--background-primary),
                    0 5px var(--background-modifier-border);
    }
}

ul.tab-container {
    /* margin: 0 7px; */
    display: flex;
    list-style: none;
    margin-block: 0;
    margin: 0 15px;
    gap: 0.2em;
    width: fit-content;
}

.tab-panel-container li.tab {
    /* Remove list styling */
    white-space: nowrap;
    margin-inline-start: 0;

    padding: 0.2em 1em 0.6em;

    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;

    &.selected {
        border: var(--border-width) solid var(--background-modifier-border);
        border-bottom: none;
        margin-bottom: -1px;
        background-color: var(--background-primary);

        /* Small curves at the sides of the tabs */
        /* Copied from inspecting Obsidian tabs */
        &::before {
            box-shadow: inset 0 0 0 var(--tab-outline-width) var(--tab-outline-color), 0 0 0 calc(var(--tab-curve) * 4) var(--tab-background-active);
            left: calc(var(--tab-curve) * -2);
            clip-path: inset(50% calc(var(--tab-curve) * -1) 0 50%);
            position: absolute;
            bottom: 1px;
            content: '';
            width: calc(var(--tab-curve) * 2);
            height: calc(var(--tab-curve) * 2);
            border-radius: 100%;
            /* border: 2px solid red; */
        }
        &::after {
            box-shadow: inset 0 0 0 var(--tab-outline-width) var(--tab-outline-color), 0 0 0 calc(var(--tab-curve) * 4) var(--tab-background-active);
            right: calc(var(--tab-curve) * -2);
            clip-path: inset(50% 50% 0 calc(var(--tab-curve) * -1));
            position: absolute;
            bottom: 1px;
            content: '';
            width: calc(var(--tab-curve) * 2);
            height: calc(var(--tab-curve) * 2);
            border-radius: 100%;
        }
    }
}

.highlight-selected-tab-name li.selected.tab {
    color: var(--color-accent);
}

div.content-container {
    background-color: var(--background-primary);
    padding: 1em;
    border-radius: var(--inner-border-radius);
    box-shadow: 0 0 0 var(--border-width) var(--background-modifier-border);
}

.content-container > div {
    &:not(.selected) {
        display: none;
    }

    & p:first-child {
        margin-top: 0 !important;
    }

    & p:last-child {
        margin-bottom: 0 !important;
    }
}