MediaWiki:Common.css/src/interface/mainBox/navBar/tabs/tab.scss

From Terraria Wiki
Jump to navigation Jump to search

This page is one of the SCSS pages which are the basis for MediaWiki:Common.css. After you edit this page, you will need to recompile them for your changes to take effect. See Terraria Wiki:CSS to learn more.

Ancestors: / src / interface / mainBox / navBar / tabs / tab.scss

Siblings:dropdown.scsstab.scsswatch.scss

Children: (none)

@use "../../../../lib";
/* tab */
#mw-head{
	--theme-tab-border-radius: var(--theme-widget-border-radius);
	--theme-tab-border-style: solid;
	--theme-tab-border-left-width: 1px;
	--theme-tab-border-right-width: 1px;
	--theme-tab-border-top-width: 1px;
	--theme-tab-border-bottom-width: 1px;
	--theme-tab-border-width: var(--theme-tab-border-top-width) var(--theme-tab-border-right-width) var(--theme-tab-border-bottom-width) var(--theme-tab-border-left-width);
	--theme-tab-border-bottom-color: var(--theme-border-bottom-color);
	--theme-tab-border-bottom: var(--theme-tab-border-style) var(--theme-tab-border-bottom-width) var(--theme-tab-border-bottom-color);
	--theme-tab-border-bottom-selected: var(--theme-tab-border-style) var(--theme-tab-border-bottom-width) transparent;
	.vector-menu-tabs .mw-list-item,
	.vector-menu-dropdown{
		/* outer box */
		height: auto;
		border-bottom: var(--theme-tab-border-bottom);
		position: relative;
		padding-right: var(--layout-gap); /* make space for gap */
		&::after{
			/* inset shadow */
			@include lib.pseudo-block;
			width: 100%;
			height: 100%;
			background: var(--theme-background-shadow);
			position: absolute;
			right: 0;
			bottom: 0;
		}
		&.icon{
			display: flex;
		}
	}
	.vector-menu-tabs .mw-list-item a,
	.vector-menu-dropdown .vector-menu-heading {
		/* inner box */
		height: auto;
		margin: 0;
		padding: var(--tab-padding-y) var(--tab-padding-x);
		background: var(--theme-tab-background);
		border-width: var(--theme-tab-border-width);
		border-style: var(--theme-tab-border-style);
		border-color: var(--theme-tab-border-color);
		border-bottom: 0;
		border-radius: var(--theme-tab-border-radius);
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		color: var(--theme-link-color);
		&:hover{
			color: var(--theme-link-color-hover);
		}
		&.new{
			color: var(--theme-link-color-redlink);
		}
	}
	.vector-menu-tabs .mw-list-item.selected{
		/* outer box: selected */
		background: var(--theme-tab-background-selected);
		border-width: var(--theme-tab-border-width);
		border-style: var(--theme-tab-border-style);
		border-color: var(--theme-tab-border-color-selected);
		border-radius: var(--theme-tab-border-radius);
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		border-bottom: 0;
		padding-right: 0;
		margin-right: var(--layout-gap); /* make space for gap */
		&::after{
			/* gap */
			width: var(--layout-gap);
			right: auto;
			left: 100%;
			margin: 0 0 0 var(--theme-tab-border-left-width);/*<< left offset */
			border-bottom: var(--theme-tab-border-bottom);
		}
		a{
			/* inner box: selected */
			border: 0;
			border-bottom: var(--theme-tab-border-bottom-selected);
			background: none;
			color: var(--theme-text-color);
		}
	}
}