MediaWiki:Common.css

/* CSS placed here will be applied to all skins */
@import url('https://fonts.googleapis.com/css2?family=Micro+5&display=swap');

.micro-5-regular {
  font-family: "Micro 5", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* Infoboxes */
.infobox {
	border: 1px solid #a2a9b1;
    background-color:
	color: black;
	padding: 0.2em;
	font-size: 88%;
	line-height: 1.5em;
	border-spacing: 3px;
}

@media screen {
	.infobox {
		background-color: #f8f9fa;
    }
}

@media (max-width: 640px) {
	.infobox {
		width: 100%;
	}
    
	.infobox .nowrap {
		white-space: normal;
	}
}

@media (min-width: 640px) {
	.infobox {
		/* @noflip */
		margin: 0.5em 0 0.5em 1em;
		/* @noflip */
		float: right;
		/* @noflip */
		clear: right;
		width: 22em;
	}
}

.infobox-header,
.infobox-label,
.infobox-above,
.infobox-full-data,
.infobox-data,
.infobox-below,
.infobox-subheader,
.infobox-image,
.infobox-navbar,
/* Remove element selector when every .infobox thing is using the standard module/templates  */
.infobox th,
.infobox td {
	vertical-align: top;
}

.infobox-label,
.infobox-data,
/* Remove element selector when every .infobox thing is using the standard module/templates  */
.infobox th,
.infobox td {
	/* @noflip */
	text-align: left;
}

/* Remove .infobox when element selectors above are removed */
.infobox .infobox-above,
.infobox .infobox-title,
/* Remove element selector when every .infobox thing is using the standard module/templates  */
.infobox caption {
	font-size: 125%;
	font-weight: bold;
	text-align: center;
}

.infobox-title,
/* Remove element selector when every .infobox thing is using the standard module/templates  */
.infobox caption {
	padding: 0.2em;
    color: #FFFFFF
}

/* Remove .infobox when element selectors above are removed */
.infobox .infobox-header,
.infobox .infobox-subheader,
.infobox .infobox-image,
.infobox .infobox-full-data,
.infobox .infobox-below {
	text-align: center;
}

/* Remove .infobox when element selectors above are removed */
.infobox .infobox-navbar {
	/* @noflip */
	text-align: right;
}

/* Normal font styling for wikitable row headers with scope="row" tag */
.wikitable.plainrowheaders th[scope=row],
.wikitable.plainrowheaders th[scope=rowgroup] {
	font-weight: normal;
	/* @noflip */
	text-align: left;
}

/* Remove underlines from certain links */
.nounderlines a,
.IPA a:link,
.IPA a:visited {
	text-decoration: none !important;
}

/* Prevent line breaks in silly places where desired (nowrap)
   and links when we don't want them to (nowraplinks a) */
.nowrap,
.nowraplinks a {
	white-space: nowrap;
}

/* But allow wrapping where desired: */
.wrap,
.wraplinks a {
	white-space: normal;
}

/* texhtml class for inline math (based on generic times-serif class) */
/* remove spans when this is TemplateStyled */
span.texhtml {
	font-family: "Nimbus Roman No9 L", "Times New Roman", Times, serif;
	font-size: 118%;
	line-height: 1;
	/* Force tabular and lining display for texhtml */
	font-variant-numeric: lining-nums tabular-nums;
	font-kerning: none;
}

span.texhtml span.texhtml {
	font-size: 100%;
}

@media (min-width: 640px) {
	span.texhtml {
		white-space: nowrap;
	}
}

/* Prevent flags in tables from collapsing: Fix for T116318
 * TODO: Remove when [[phab:T368469]] merges [[phab:T367463]] for the other skins
 */
@media (max-width: 640px) {
	.flagicon a > img,
	.flagicon noscript > img {
		max-width: none !important;
	}
}

@media screen {
	.nochecker .gallerybox .thumb img {
		background-image: none;
	}
}
/* */

.test-margin {
  margin-bottom: var(--space-md);
}

/* Citizen Infoboxes */
.infobox {
	margin-bottom: var(--space-md);
	width: 100%;
	max-width: 400px;
	border: 1px solid var(--border-color-base);
	border-radius: var(--border-radius-medium);
	background-color: transparent;
	font-size: var(--font-size-small);
	line-height: var(--line-height-xx-small);
	box-sizing: content-box;
}

.infobox[open] {
	background-color: var(--color-surface-1);
}

.infobox__content {
	position: relative;
}

.infobox__image {
	position: relative;
	margin-bottom: -2rem;
}

.infobox__image::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 50%;
	background-image: linear-gradient(
		to bottom,
		transparent,
		var(--color-surface-1) 100%
	);
	pointer-events: none;
}

.infobox__image,
.infobox__image::after,
.infobox__indicators {
	transition-timing-function: var(--transition-timing-function-ease);
	transition-duration: var(--transition-duration-medium);
}

.infobox__image {
	transition-property: margin-bottom;
}

.infobox__image::after {
	transition-property: opacity, transform;
}

.infobox__image:hover {
	margin-bottom: 0;
}

.infobox__image:hover::after {
	opacity: 0;
	transform: translateY(2rem);
}

.infobox__image:hover ~ .infobox__indicators {
	opacity: 0;
	transform: translateY(-2rem);
}

.infobox__image img {
	/* Prevent overflow */
	max-width: 100%;
	height: auto;
}

/* Provide background color for transparent SVGs */
.infobox__image img[src$='.svg'] {
	background: #eaecf0;
}

.infobox__image-upload {
	position: absolute;
	bottom: var(--space-md);
	left: 0;
	right: 0;
	z-index: 1;
}

.infobox__image-upload > a {
	display: flex;
	margin: var(--space-md);
	padding: var(--space-xs) var(--space-sm);
	border-radius: var(--border-radius-base);
	background: var(--color-surface-3);
	color: var(--color-emphasized);
	font-weight: var(--font-weight-medium);
	text-decoration: none;
	justify-content: center;
	align-items: center;
	gap: var(--space-xs);
}

.infobox__image-upload > a .citizen-ui-icon {
	width: 1rem;
	height: 1rem;
}

.infobox__image-upload > a:hover {
	background: var(--color-surface-2--hover);
}

.infobox__image-upload > a:active {
	background: var(--color-surface-2--active);
}

.infobox__header {
	/* Needed to stay on top of image fade */
	position: relative;
}

.infobox__snippet,
.infobox__header,
.infobox__sectionHeader,
.infobox__sectionContent {
	padding-left: var(--space-md);
	padding-right: var(--space-md);
}

.infobox__snippet {
	position: relative;
	z-index: 1;
	padding-top: var(--space-sm);
	padding-bottom: var(--space-sm);
	display: flex;
	gap: var(--space-xs);
	align-items: center;
	white-space: nowrap;
	cursor: pointer;
	/* So that clicking the infobox summary won't highlight the text */
	user-select: none;
}

.infobox__snippet:hover {
	background-color: var(--background-color-button-quiet--hover);
}

/* Might as well steal from skin */
.infobox__snippet .mw-ui-icon-wikimedia-collapse {
	--transform-rotate-collapse: rotate3d(1, 0, 0, 180deg);
	--size-icon: var(--font-size-small);
	width: var(--font-size-small);
	height: var(--font-size-small);
	flex-shrink: 0;
	transition: var(--transition-hover);
	transition-property: transform;
	transform: var(--transform-rotate-collapse);
}

.infobox[open] .infobox__snippet .mw-ui-icon-wikimedia-collapse {
	transform: none;
}

.infobox__snippet .infobox__desc {
	max-width: 100%;
	text-overflow: ellipsis;
	overflow: hidden;
	font-size: var(--font-size-small);
}

.infobox__indicators {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	justify-content: flex-end;
	padding: var(--space-xs);
	gap: var(--space-xxs);
	transition-property: opacity, transform;
}

.infobox__indicator {
	padding: var(--space-xxs) var(--space-xs);
	background: var(--color-surface-2);
	color: var(--color-base);
	border-radius: var(--border-radius-base);
	line-height: var(--line-height-xxx-small);
}

.infobox__indicator .infobox__data {
	font-size: var(--font-size-x-small);
	font-weight: var(--font-weight-medium);
}

/* TODO: Add support for multiple badges */
.infobox__indicator.infobox__indicator--nopadding {
	padding: 0;
}

.infobox__indicator.infobox__indicator--red {
	background-color: var(--background-color-destructive-subtle);
	color: var(--color-destructive);
}

.infobox__indicator.infobox__indicator--yellow {
	background-color: var(--background-color-warning-subtle);
	color: var(--color-warning);
}

.infobox__indicator.infobox__indicator--green {
	background-color: var(--background-color-success-subtle);
	color: var(--color-success);
}

.infobox__header,
.infobox__sectionHeader {
	line-height: var(--line-height-xxx-small);
}

.infobox__header {
	margin-top: var(--space-md);
	margin-bottom: var(--space-lg);
	display: flex;
	gap: var(--space-sm);
}

.infobox__section,
.infobox__sectionHeader,
.infobox__sectionContent {
	margin-top: var(--space-md);
}

.infobox__title,
.infobox__sectionTitle {
	color: var(--color-emphasized);
	font-weight: var(--font-weight-medium);
}

.infobox__title {
	font-size: var(--font-size-x-large);
}

.infobox__sectionSubtitle {
	margin-top: 2px;
}

.infobox__section + .infobox__section {
	margin-top: var(--space-xl);
}

/* Use padding to prevent margin collapse when there is no footer */
.infobox__content > .infobox__section:last-child {
	margin-bottom: 0;
	padding-bottom: var(--space-md);
}

.infobox__sectionTitle {
	font-size: var(--font-size-medium);
	display: flex;
	align-items: center;
	gap: var(--space-md);
}

.infobox__sectionTitle:after {
	content: '';
	height: 1px;
	flex-grow: 1;
	background: var(--border-color-base);
}

.infobox__sectionSubtitle {
	color: var(--color-subtle);
}

.infobox__sectionContent {
	display: grid;
	gap: var(--space-sm);
	grid-template-columns: repeat(var(--infobox-grid-cols), minmax(0, 1fr));
}

.infobox__sectionContent--has-cells {
	gap: var(--space-xxs);
}

.infobox__item {
	display: grid;
	gap: 2px var(--space-xs);
	grid-auto-rows: max-content;
}

.infobox__item--is-cell {
	display: grid;
	padding: var(--space-xs);
	border: var(--border-base);
	border-radius: var(--border-radius-base);
}

.infobox__item--is-cell.infobox__item--has-tooltip:hover {
	background-color: var(--background-color-button-quiet--hover);
}

.infobox__item--is-cell.infobox__item--positive {
	background-color: var(--background-color-success-subtle);
	color: var(--color-success);
}

.infobox__item--is-cell.infobox__item--negative {
	background-color: var(--background-color-destructive-subtle);
	color: var(--color-destructive);
}

.infobox__item--is-cell.infobox__item--null {
	border-color: var(--border-color-subtle);
	color: var(--color-subtle);
}

.infobox__item--is-range {
	justify-content: space-between;
	grid-template-areas:
		'label data'
		'bar   bar ';
	gap: var(--space-xs);
	grid-column: -1 / 1;
}

.infobox__item--is-range .infobox__label {
	grid-area: label;
}

.infobox__item--is-range .infobox__data {
	grid-area: data;
}

.infobox__item--is-range .infobox__bar {
	grid-area: bar;
}

.infobox__item--hasIcon {
	display: flex;
	align-items: center;
	column-gap: var(--space-sm);
}

.infobox__bar {
	height: 4px;
	border-radius: var(--border-radius-pill);
	background-color: var(--color-surface-3);
}

.infobox__bar-item {
	--infobox-bar-item-clip-path: polygon(
		var(--infobox-bar-item-range-start) 0,
		var(--infobox-bar-item-range-end) 0,
		var(--infobox-bar-item-range-end) 100%,
		var(--infobox-bar-item-range-start) 100%
	);

	height: 100%;
	border-radius: var(--border-radius-pill);
	background: linear-gradient(to right, transparent, var(--color-success));
	clip-path: var(--infobox-bar-item-clip-path);
}

/* Should not be here, but it's a quick fix */
.infobox__item--is-range--temperature .infobox__bar-item {
	background: linear-gradient(
		to right,
		var(--color-destructive),
		var(--color-progressive)
	);
}

.infobox__badge {
	place-content: center;
	text-align: center;
	box-shadow: inset 0 0 0 1px var(--border-color-base);
	border-radius: var(--border-radius-medium);
	padding: var(--space-xs) var(--space-sm);
	font-weight: var(--font-weight-medium);
	background-color: var(--color-surface-1);
}

.infobox__desc,
.infobox__label {
	color: var(--color-subtle);
	font-size: var(--font-size-x-small);
}

.infobox__label {
	font-weight: var(--font-weight-medium);
}

.infobox__grid--row .infobox__label,
.infobox__grid--row .infobox__desc {
	font-size: var(--font-size-small);
}

.infobox__data {
	font-weight: var(--font-weight-medium);
}

.infobox__icon img {
	filter: var(--filter-invert);
	opacity: var(--opacity-icon-base);
}

.infobox__itemButton {
	position: relative;
	padding: var(--space-sm) var(--space-md);
	line-height: var(--line-height-xx-small);
	gap: 0;
}

.infobox__itemButton:hover {
	background-color: var(--background-color-button-quiet--hover);
}

.infobox__itemButton:hover .infobox__itemButtonArrow {
	transform: rotate(90deg) translateY(-4px);
}

.infobox__itemButton:active {
	background-color: var(--background-color-button-quiet--active);
}

.infobox__itemButton .infobox__text {
	flex-grow: 1;
}

.infobox__itemButton .infobox__data {
	color: var(--color-emphasized);
}

.infobox__itemButtonLink a {
	position: absolute;
	inset: 0;
	opacity: 0;
}

.infobox__itemButton .infobox__icon {
	margin-right: var(--space-sm);
}

.infobox__itemButton .infobox__icon img {
	width: 1.25rem;
	height: 1.25rem;
}

.infobox__itemButtonArrow {
	width: 1rem;
	height: 1rem;
	transition: var(--transition-hover);
	transform: rotate(90deg);
}

.infobox__footer {
	margin-top: var(--space-lg);
	border-top: 1px solid var(--border-color-base);
	background-color: var(--color-surface-1);
	border-bottom-left-radius: var(--border-radius-medium);
	border-bottom-right-radius: var(--border-radius-medium);
}

.infobox__footer > .infobox__section {
	margin: 0;
	padding: var(--space-md);
	display: grid;
	gap: var(--space-xxs);
}

.infobox__button {
	position: relative;
	border-bottom-left-radius: var(--border-radius-medium);
	border-bottom-right-radius: var(--border-radius-medium);
	padding: var(--space-sm) var(--space-md);
	background-color: var(--color-progressive);
	cursor: pointer;
}

.infobox__button:hover {
	background-color: var(--color-progressive--hover);
}

.infobox__buttonLabel {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--space-xs);
	color: #fff;
	font-weight: var(--font-weight-medium);
}

/* Fake button with link element */
.infobox__buttonLink {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

.infobox__buttonLink a {
	display: block;
	height: 100%;
	font-size: 0;
}

.infobox__buttonCard {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: -1;
	border: 1px solid var(--border-color-base);
	background-color: var(--color-surface-1);
	border-radius: var(--border-radius-medium);
	box-shadow: var(--box-shadow-drop-xx-large);
	opacity: 0;
	transition: var(--transition-menu);
	transition-property: opacity, transform;
	visibility: hidden;
	transform: translateY(-20px);
}

.infobox__button:hover > .infobox__buttonCard {
	z-index: 10;
	opacity: 1;
	visibility: visible;
	transform: none;
	cursor: auto;
}

.infobox__linkButton a {
	padding: var(--space-xxs) var(--space-xs);
	display: block;
	border-radius: var(--border-radius-base);
	text-decoration: none !important;
}

/* Hide external URL icon */
.infobox__linkButton a:after {
	content: none;
}

.infobox__linkButton a:hover {
	background-color: var(--background-color-button-quiet--hover);
}

.infobox__linkButton a:active {
	background-color: var(--background-color-button-quiet--active);
}

.infobox__section--linkButtons > .infobox__sectionContent {
	margin-bottom: var(--space-md);
}

.infobox__section--linkButtons .infobox__data {
	margin-top: var(--space-xxs);
	margin-left: -8px; /* negative space-xs */
	margin-right: -8px; /* negative space-xs */
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
}

.infobox__buttonLabel img[src$='.svg'] {
	filter: invert(1);
}

@media only screen and (max-width: 639px) {
	.infobox {
		margin-right: auto;
		margin-left: auto;
	}
}

.infobox__section--actions .infobox__sectionContent {
	padding-left: 0;
	padding-right: 0;
}

/* TODO: Remove when footer is removed */
.infobox__section--hasBackground + .infobox__section--hasBackground,
.infobox__section--hasBackground + .infobox__footer {
	margin-top: 0;
}

.infobox__section--hasBackground .infobox__sectionContent {
	margin: 0;
}

.infobox__section--metadata .infobox__sectionContent {
	padding: var(--space-md);
	background: var(--color-surface-2);
	line-height: var(--line-height-xxx-small);
	gap: var(--space-xxs);
}

.infobox__section--metadata .infobox__label,
.infobox__section--metadata .infobox__data {
	font-size: var(--font-size-x-small);
}

.infobox__section--metadata .infobox__data {
	word-break: break-word;
	font-family: var(--font-family-monospace);
}

/* CSS grid utility classes */
.infobox__grid--row {
	--infobox-grid-cols: 1;
	grid-auto-flow: column;
}

.infobox__grid--cols-2 {
	--infobox-grid-cols: 2;
}

.infobox__grid--cols-3 {
	--infobox-grid-cols: 3;
}

.infobox__grid--cols-4 {
	--infobox-grid-cols: 4;
}

.infobox__grid--cols-5 {
	--infobox-grid-cols: 5;
}

.infobox__grid--cols-6 {
	--infobox-grid-cols: 6;
}

.infobox__grid--col-span-2 {
	grid-column: span 2;
}

.infobox__grid--col-span-3 {
	grid-column: span 3;
}

.infobox__grid--col-span-4 {
	grid-column: span 4;
}

.infobox__grid--col-span-5 {
	grid-column: span 5;
}

.infobox__grid--col-span-6 {
	grid-column: span 6;
}

.infobox__grid--space-between {
	justify-content: space-between;
}

/* FloatingUI styles */
.infobox__indicator--nopadding .ext-floatingui-reference {
	padding: var(--space-xxs) var(--space-xs);
}

/* Tabber styles */
.infobox__section--tabber > .infobox__sectionHeader {
	margin-bottom: var(--space-xxs);
}

.infobox__section--tabber > .infobox__sectionContent {
	padding-left: 0;
	padding-right: 0;
}

/* Spacing is handled by tabber */
.infobox__section--tabber .infobox__sectionContent {
	margin-top: 0;
	margin-bottom: 0;
}

.infobox__section--tabber .tabber .infobox__section {
	margin-top: var(--space-sm);
	margin-bottom: 0;
}

/* Increase top margin for nested tabber section */
.infobox__section--tabber .infobox__section.infobox__section--tabber {
	margin-top: var(--space-xl);
}

.infobox__section--tabber .tabber__header {
	margin-left: var(--space-xs);
	margin-right: var(--space-xs);
	box-shadow: none;
}

/* Match padding in the rest of the infobox */
.infobox__section--tabber .tabber__tab {
	margin-left: var(--space-xs);
	margin-right: var(--space-xs);
	padding-left: 0;
	padding-right: 0;
}
/* */