MediaWiki:Common.css/src/interface/mainBox/navBar.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.

@use '../../lib';
/****** #mw-head (navbar) ******/
/* reset */
#mw-head * {
	float: unset;
	font-size: unset;
	line-height: unset;
	box-sizing: border-box;
}
/* tabs layout */
#mw-head{
	--layout-padding: 12px;
	--layout-gap: 6px;
	--layout-content-size-toggle-gap-left: 4px;
	--layout-content-size-toggle-gap-right: 5px;
	--tab-padding-x: 12px;
	--tab-padding-y: 4px;
	--icon-size: 1em;
	--icon-margin: 3px;
	top: unset; /* reset for under 720/960px */
	box-sizing: border-box;
	padding: var(--layout-padding) 0 0 0;
	background: var(--theme-background);
	border-radius: var(--theme-widget-border-radius) var(--theme-widget-border-radius) 0 0;
	border-width: 1px 1px 0;
	border-style: solid;
	border-color: var(--theme-widget-border-color);
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	#left-navigation, #right-navigation {
		float: none;
		flex: 1 1 auto;
		margin: 0;
		display: flex;
		align-items: stretch;
		&::before, &::after {
			content: '';
			display: block;
			border-bottom: 1px solid var(--theme-border-bottom-color);
			background: var(--theme-background-shadow);
		}
	}
	#nav-content-size-toggle{
		flex: 0 0 auto;
	}
	#left-navigation {
		justify-content: flex-start;
	}
	#right-navigation {
		justify-content: flex-end;
	}
	#left-navigation::before{
		flex: 0 0 calc(var(--layout-content-size-toggle-gap-left) + 22px + var(--layout-content-size-toggle-gap-right)); /*<< for sidebar toggle button */
	}
	#right-navigation::after{
		flex: 0 0 calc(var(--layout-padding) - var(--layout-gap));/*<< last item of #right-navigation has margin-right:var(--layout-gap) */
	}
	#left-navigation::after, #right-navigation::before{
		flex: 1 1 auto;
	}
}

/* @import interface/mainBox/navBar/tabs.css */

/* @import interface/mainBox/navBar/search.css */

/* @import interface/mainBox/navBar/sidebarToggle.css */