Module:Tab/styles.css

/* Common css for all tab styles */
.tab-button-container .tab-button:hover {
    cursor: pointer;
}

/* This hides hidden panels. You probably don't need to change it. */
.tab-panel-hidden {
    display: none;
}

/* Beginning of default tab stylesheet */

.tab-button-container.tab-default-style {
    display: flex;
    flex-wrap: wrap;
}

.tab-button-container.tab-default-style > .tab-button {
    white-space: nowrap;
    margin: 2px 4px 2px 0;
    padding: 0.15em 0.4em;
    color: var(--color-base, #202122);
    background-color: var(--background-color-progressive-subtle, #f1f4fd);
    transition: background-color ease-in-out .2s;
    border-radius: 5px;
    border: 1px solid var(--border-color-progressive, #36c);
}

.tab-button-container.tab-default-style > .tab-button:hover {
    background-color: var(--background-color-progressive--focus, #36c);
    color: var(--color-inverted, #fff);
    transition: background-color ease-in-out .2s;
}

.tab-button-container.tab-default-style > .tab-button.tab-button-selected {
    background-color: var(--background-color-progressive--focus, #36c);
    color: var(--color-inverted, #fff);
    transition: background-color ease-in-out .2s;
}

/* End of default tab stylesheet */

/* Beginning of blue tab stylesheet */
/* This visual style is inspired by zh.moegirl.org.cn/Template:Tabs */

.tab-button-container.tab-blue > .tab-button {
    display: inline-block;
    white-space: nowrap;
    padding: 0.15em 0.4em;
}

.tab-button-container.tab-blue > .tab-button.tab-button-selected {
	color: var(--color-inverted, #fff);
    background-color: var(--background-color-progressive--focus, #36c);
}

.tab-panel-container.tab-blue > .tab-panel {
    border: 1px solid var(--border-color-progressive, #36c);
    background-color: var(--background-color-progressive-subtle, #f1f4fd);
    padding: 0.4em;
}

/* End of blue tab stylesheet */

/* Beginning of vertical tab stylesheet */

.tab-group-container.tab-vertical {
    display: flex;
    flex-wrap: wrap;
}

.tab-button-container.tab-vertical {
    flex: min-content 1;
}

.tab-button-container.tab-vertical > .tab-button {
    padding: 0.15em 0.4em;
    white-space: nowrap;
}

.tab-button-container.tab-vertical > .tab-button.tab-button-selected {
	color: var(--color-inverted, #fff);
    background-color: var(--background-color-progressive--focus, #36c);
}

.tab-panel-container.tab-vertical {
    flex: min-content 10;
}

.tab-panel-container.tab-vertical > .tab-panel {
    border: 1px solid var(--border-color-progressive, #36c);
    background-color: var(--background-color-progressive-subtle, #f1f4fd);
    padding: 0.4em;
}

/* End of vertical tab stylesheet */

/* [[Category:Template stylesheets]] */