Template:Tech header/styles.css

.tech-header {
	clear: both;
	padding: 1em;
	background-color: #fafafa;
    color: #333;
}
.tech-header-tabs {
	font-weight: bold;
	margin: -0.1em;
	display: flex;
}
.tech-header-tab {
	font-size: 1.5em;
	display: inline-block;
	margin: .1em;
	border-style: solid;
	border-width: .5em 0 0;
	padding: 1em .5em;
}
.tech-header-tab a,
.tech-header-tab a.extiw {
	color: inherit;
}
.tech-header-tab-forum {
	border-color: #d33682;
	color: #d33682;
}
.tech-header-currentpage-forum .tech-header-intro {
	border-color: #d33682;
}
.tech-header-tab-news {
	border-color: #6c71c4;
	color: #6c71c4;
}
.tech-header-currentpage-news .tech-header-intro {
	border-color: #6c71c4;
}
.tech-header-tab-ambassadors {
	border-color: #268bd2;
	color: #268bd2;
}
.tech-header-currentpage-ambassadors .tech-header-intro {
	border-color: #268bd2;
}
.tech-header-tab-wikimedia-tech {
	border-color: #eb2;
	color: #eb2;
}
.tech-header-currentpage-wikimedia-tech .tech-header-intro,
.tech-header-currentpage-related-wikimedia-tech .tech-header-intro {
	border-color: #eb2;
}
.tech-header-tab-wikimedia-prod {
	border-color: #2aa198;
	color: #2aa198;
}
.tech-header-currentpage-wikimedia-prod .tech-header-intro,
.tech-header-currentpage-related-wikimedia-prod .tech-header-intro {
	border-color: #2aa198;
}
.tech-header-tab-mediawiki {
	border-color: #f78154;
	color: #f78154;
}
.tech-header-currentpage-mediawiki .tech-header-intro {
	border-color: #f78154;
}
.tech-header-currentpage-forum .tech-header-tab-forum,
.tech-header-currentpage-news .tech-header-tab-news,
.tech-header-currentpage-ambassadors .tech-header-tab-ambassadors,
.tech-header-currentpage-wikimedia-tech .tech-header-tab-wikimedia-tech,
.tech-header-currentpage-wikimedia-prod .tech-header-tab-wikimedia-prod,
.tech-header-currentpage-mediawiki .tech-header-tab-mediawiki {
	background-color: #efefef;
}
.tech-header-intro {
	font-size: 1.2em;
	background: #efefef;
	border-style: solid;
	border-width: 0 0 1px;
	padding: 1em;
}
@media all and (max-width: 719px) {
	.tech-header-tabs {
		margin: 0;
		display: block;
	}
	.tech-header-tab {
		display: block;
		border-width: 0 0 0 .5em;
		margin: 0;
		padding: .25em .5em;
	}
	/* @noflip */
	.tech-header[dir="ltr"] .tech-header-tab {
		border-width: 0 0 0 .5em;
	}
	/* @noflip */
	.tech-header[dir="rtl"] .tech-header-tab {
		border-width: 0 .5em 0 0;
	}
}

/* NIGHT MODE STYLES */
html.skin-theme-clientpref-night .tech-header-tab {
  background: #333;
}

html.skin-theme-clientpref-night .tech-header-intro,
html.skin-theme-clientpref-night .tech-header-tab,
html.skin-theme-clientpref-night .tech-header {
    color: inherit;
	background: inherit;
}

html.skin-theme-clientpref-night .tech-header-currentpage-forum .tech-header-tab-forum,
html.skin-theme-clientpref-night .tech-header-currentpage-news .tech-header-tab-news,
html.skin-theme-clientpref-night .tech-header-currentpage-ambassadors .tech-header-tab-ambassadors,
html.skin-theme-clientpref-night .tech-header-currentpage-wikimedia-tech .tech-header-tab-wikimedia-tech,
html.skin-theme-clientpref-night .tech-header-currentpage-wikimedia-prod .tech-header-tab-wikimedia-prod,
html.skin-theme-clientpref-night .tech-header-currentpage-mediawiki .tech-header-tab-mediawiki {
	background-color: #333;
    border-bottom: solid 12px;
    border-top-color: transparent;
}

/* This should be a copy of the rules above with replace( /clientpref-(1)/, '2' ) */
@media (prefers-color-scheme: dark) {
  html.skin-theme-clientpref-os .tech-header-tab {
    background: #333;
  }

  html.skin-theme-clientpref-os .tech-header-intro,
  html.skin-theme-clientpref-os .tech-header-tab,
  html.skin-theme-clientpref-os .tech-header {
      color: inherit;
    background: inherit;
  }

  html.skin-theme-clientpref-os .tech-header-currentpage-forum .tech-header-tab-forum,
  html.skin-theme-clientpref-os .tech-header-currentpage-news .tech-header-tab-news,
  html.skin-theme-clientpref-os .tech-header-currentpage-ambassadors .tech-header-tab-ambassadors,
  html.skin-theme-clientpref-os .tech-header-currentpage-wikimedia-tech .tech-header-tab-wikimedia-tech,
  html.skin-theme-clientpref-os .tech-header-currentpage-wikimedia-prod .tech-header-tab-wikimedia-prod,
  html.skin-theme-clientpref-os .tech-header-currentpage-mediawiki .tech-header-tab-mediawiki {
    background-color: #333;
      border-bottom: solid 12px;
      border-top-color: transparent;
  }
}