mediawiki-skins-Citizen/skinStyles/extensions/TabberNeue/ext.tabberNeue.less

/*
 * Citizen
 *
 * SkinStyles for Extension:TabberNeue
 * Module: ext.tabberNeue
 * Version: 2.0.0
 *
 * Date: 2024-05-25
*/

.tabber {
	&__tab {
		font-weight: var( --font-weight-medium );
		color: var( --color-base );

		&:visited {
			color: var( --color-base );
		}

		&[ aria-selected='true' ],
		&[ aria-selected='true' ]:visited {
			color: var( --color-primary );
		}
	}

	&__panel {
		&--loading {
			.tabber__transclusion {
				a,
				&::before,
				&::after {
					background: linear-gradient( to right, var( --color-base ) 8%, var( --color-base--subtle ) 18%, var( --color-base ) 33% );
				}
			}
		}
	}

	&__indicator {
		background: var( --color-primary );
	}

	&__header {
		box-shadow: inset 0 -1px 0 0 var( --border-color-interactive );

		&__prev,
		&__next {
			&::after {
				opacity: var( --opacity-icon-base );
			}
		}
	}
}

@media ( hover: hover ) {
	.tabber {
		&__tab {
			&:hover {
				color: var( --color-primary--hover );
			}

			&:active {
				color: var( --color-primary--active );
			}
		}

		&__header {
			&__prev,
			&__next {
				&:hover {
					background-color: var( --background-color-quiet--hover );

					&::after {
						opacity: var( --opacity-icon-base--hover );
					}
				}

				&:active {
					background-color: var( --background-color-quiet--active );

					&::after {
						opacity: var( --opacity-icon-base--active );
					}
				}

				&::after {
					filter: var( --filter-invert );
				}
			}
		}
	}
}