Template:Tabs/styles.css

/* New color schemes for [[Template:Tabs]] */

/* Base styles */
.mcBoto,
.mcBotoSel {
	border: 0.15em solid;
	border-radius: 0.5em 0.5em 0 0;
	display: inline-flex;
	align-items: center;
	height: 1.9em;
	box-sizing: border-box;
	min-height: 1.2em;
	line-height: 1.2em !important;
	margin-right: 0.1em;
	padding: 0.2em 0.3em;
	position: relative;
	vertical-align: top;
}

.mcBoto::before,
.mcBotoSel::before {
	content: "";
	display: block;
	width: 0;
	height: 1.2em;
}

.metabox > div:first-child {
	line-height: 1.9em;
}

.mcBoto a,
.mcBoto strong,
.mcBotoSel a {
	font-size: 90%;
	padding: 0 !important;
	text-decoration: none !important;
}

.mcBoto a:hover,
.mcBoto strong:hover {
	text-decoration: underline !important;
}

.mcBotoSel a {
	font-weight: bold;
}

.mcContingut {
	border: 0.2em solid;
	border-radius: 0 0 0.5em 0.5em;
	padding: 1em;
}

.mcPestanya {
	width: 100%;
	/* Progressive enhancement */
	display: block;
	visibility: visible;
}

@media screen {
	/* Default configuration in lilac
	   Tones used: 1 - 7050a0; 2 - 9070c0; 3 - b090e0; 4 - d0b0ff; 5 - f0d0ff; 6 - f8f8ff */
	.mcBoto {
		background-color: #d0b0ff; /* 4 */
		border-color: #f0d0ff #b090e0 #9070c0 #f0d0ff; /* 5 3 2 5 */
		cursor: pointer;
	}

	.mcBoto a,
	.mcBoto strong {
		color: #7050a0 !important; /* 1 */
		font-weight: bold;
	}

	.mcBoto a:hover,
	.mcBoto strong:hover {
		color: var(--color-base, #202122) !important;
	}

	.mcBotoSel {
		background-color: #9070c0; /* 2 */
		color: var(--color-inverted-fixed, white);
		border-color: #b090e0 #7050a0 #9070c0 #b090e0; /* 3 1 2 3 */
		cursor: default;
	}

	.mcBotoSel a {
		color: var(--color-inverted-fixed, white) !important;
		cursor: default;
	}

	.mcContingut {
		background-color: #f8f8ff; /* 6 */
		border-color: #9070c0 #7050a0 #7050a0 #9070c0 ; /* 2 1 1 2 */
	}

	.mcPestanya {
		background-color: #f8f8ff; /* 6 */
	}

	/* Configuration for green: 1 - 60b030; 2 - 75c045; 3 - 90d060; 4 - a5e085; 5 - c0f090; 6 - f5fffa; */
	.mcVerd .mcBoto {
		background-color: #a5e085; /* 4 */
		border-color: #c0f090 #90d060 #75c045 #c0f090; /* 5 3 2 5 */
	}

	.mcVerd .mcBoto a,
	.mcVerd .mcBoto strong {
		color: #60b030 !important; /* 1 */
	}

	.mcVerd .mcBoto a:hover,
	.mcVerd .mcBoto strong:hover {
		color: var(--color-base, #202122) !important;
	}

	.mcVerd .mcBotoSel {
		background-color: #75c045; /* 2 */
		border-color: #90d060 #60b030 #75c045 #90d060;  /* 3 1 2 3 */
	}

	.mcVerd .mcContingut {
		background-color: #f5fffa; /* 6 */
		border-color: #75c045 #60b030 #60b030 #75c045 ; /* 2 1 1 2 */
	}

	.mcVerd .mcPestanya {
		background-color: #f5fffa; /* 6 */
	}

	/* Configuration for red: 1 - cc0000; 2 - ff0000; 3 - ff8888; 4 - ffaaaa; 5 - ffcccc; 6 - fffafa; */
	.mcVermell .mcBoto {
		background-color: #ffaaaa; /* 4 */
		border-color: #ffcccc #ff8888 #ff0000 #ffcccc; /* 5 3 2 5 */
	}

	.mcVermell .mcBoto a,
	.mcVermell .mcBoto strong {
		color: #cc0000 !important; /* 1 */
	}

	.mcVermell .mcBoto a:hover,
	.mcVermell .mcBoto strong:hover {
		color: var(--color-base, #202122) !important;
	}

	.mcVermell .mcBotoSel {
		background-color: #ff0000; /* 2 */
		border-color: #ff8888 #cc0000 #ff0000 #ff8888; /* 3 1 2 3 */
	}

	.mcVermell .mcContingut {
		background-color: #fffafa; /* 6 */
		border-color: #ff0000 #cc0000 #cc0000 #ff0000; /* 2 1 1 2 */
	}

	.mcVermell .mcPestanya {
		background-color: #fffafa; /* 6 */
	}

	/* Configuration for blue: 1 - 3379de; 2 - 5b8dd6; 3 - 88abde; 4 - a7c1e6; 5 - c8d6e9; 6 - f0f8ff */
	.mcBlau .mcBoto {
		background-color: #a7c1e6; /* 4 */
		border-color: #c8d6e9 #88abde #5b8dd6 #c8d6e9; /* 5 3 2 5 */
	}

	.mcBlau .mcBoto a,
	.mcBlau .mcBoto strong {
		color: #3379de !important; /* 1 */
	}

	.mcBlau .mcBoto a:hover,
	.mcBlau .mcBoto strong:hover {
		color: var(--color-base, #202122) !important;
	}

	.mcBlau .mcBotoSel {
		background-color: #5b8dd6; /* 2 */
		border-color: #88abde #3379de #5b8dd6 #88abde; /* 3 1 2 3 */
	}

	.mcBlau .mcContingut {
		background-color: #f0f8ff; /* 6 */
		border-color: #5b8dd6 #3379de #3379de #5b8dd6 ; /* 2 1 1 2 */
	}

	.mcBlau .mcPestanya {
		background-color: #f0f8ff; /* 6 */
	}
	
	/* Configuration for yellow: 1 - ffd813; 2 - ffe147; 3 - ffe977; 4 - fff1a4; 5 - fef4bc; 6 - fffce8 */
	.mcGroc .mcBoto {
		background-color: #fff1a4; /* 4 */
		border-color: #fef4bc #ffe977 #ffe147 #fef4bc; /* 5 3 2 5 */
	}

	.mcGroc .mcBoto a,
	.mcGroc .mcBoto strong {
		color: #ffd813 !important; /* 1 */
	}

	.mcGroc .mcBoto a:hover,
	.mcGroc .mcBoto strong:hover {
		color: var(--color-base, #202122) !important;
	}

	.mcGroc .mcBotoSel {
		background-color: #ffe147; /* 2 */
		border-color: #ffe977 #ffd813 #ffe147 #ffe977; /* 3 1 2 3 */
	}

	.mcGroc .mcContingut {
		background-color: #fffce8; /* 6 */
		border-color: #ffe147 #ffd813 #ffd813 #ffe147 ; /* 2 1 1 2 */
	}

	.mcGroc .mcPestanya {
		background-color: #fffce8; /* 6 */
	}

	/* Configuration for orange: 1 - ff820e; 2 - ff9d42; 3 - ffac5d; 4 - ffbd7f; 5 - ffd0a4; 6 - ffeedd */
	.mcTaronja .mcBoto {
		background-color: #ffbd7f; /* 4 */
		border-color: #ffd0a4 #ffac5d #ff9d42 #ffd0a4; /* 5 3 2 5 */
	}

	.mcTaronja .mcBoto a,
	.mcTaronja .mcBoto strong {
		color: #ff820e !important; /* 1 */
	}

	.mcTaronja .mcBoto a:hover,
	.mcTaronja .mcBoto strong:hover {
		color: var(--color-base, #202122) !important;
	}

	.mcTaronja .mcBotoSel {
		background-color: #ff9d42; /* 2 */
		border-color: #ffac5d #ff820e #ff9d42 #ffac5d; /* 3 1 2 3 */
	}

	.mcTaronja .mcContingut {
		background-color: #ffeedd; /* 6 */
		border-color: #ff9d42 #ff820e #ff820e #ff9d42 ; /* 2 1 1 2 */
	}

	.mcTaronja .mcPestanya {
		background-color: #ffeedd; /* 6 */
	}

	/* Dark mode schemes */
	html.skin-theme-clientpref-night .mcBoto,
	html.skin-theme-clientpref-night .mcBotoSel,
	html.skin-theme-clientpref-night .mcContingut,
	html.skin-theme-clientpref-night .mcPestanya {
		background-color: var(--background-color-neutral-subtle, #202122) !important;
	}

	html.skin-theme-clientpref-night .mcBoto,
	html.skin-theme-clientpref-night .mcBotoSel {
		border-bottom: none;
	}

	html.skin-theme-clientpref-night .mcBoto {
		/* switch with var(--border-color-muted) when supported. */
		border-color: #404244 !important;
	}

	html.skin-theme-clientpref-night .mcBotoSel,
	html.skin-theme-clientpref-night .mcContingut {
		border-color: white !important;
	}

	html.skin-theme-clientpref-night .mcBoto a,
	html.skin-theme-clientpref-night .mcBoto strong {
		color: var(--color-inverted-fixed, white) !important;
		font-weight: normal;
	}
}

@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .mcBoto,
	html.skin-theme-clientpref-os .mcBotoSel,
	html.skin-theme-clientpref-os .mcContingut,
	html.skin-theme-clientpref-os .mcPestanya {
		background-color: var(--background-color-neutral-subtle, #202122) !important;
	}

	html.skin-theme-clientpref-os .mcBoto,
	html.skin-theme-clientpref-os .mcBotoSel {
		border-bottom: none;
	}

	html.skin-theme-clientpref-os .mcBoto {
		/* switch with var(--border-color-muted) when supported. */
		border-color: #404244 !important;
	}

	html.skin-theme-clientpref-os .mcBotoSel,
	html.skin-theme-clientpref-os .mcContingut {
		border-color: white !important;
	}

	html.skin-theme-clientpref-os .mcBoto a,
	html.skin-theme-clientpref-os .mcBoto strong {
		color: var(--color-inverted-fixed, white) !important;
		font-weight: normal;
	}
}

/* Remove bottom border when print, as well as in dark */
@media print {
	.mcBoto,
	.mcBotoSel {
		border-bottom: none;
	}
}