MediaWiki:Citizen.css: Difference between revisions

MediaWiki interface page
mNo edit summary
(Fix for citizen-header not being completely visible for mobile on some pages)
 
(31 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* All CSS here will be loaded for users of the Citizen skin */
/* All CSS here will be loaded for users of the Citizen skin */
:root {
:root {
--width-layout: 1280px; /* Slightly wider content */
/* Light theme specific color variables */
/* Light theme specific color variables */
--background-color-dp-01: #f0f0f0;
--color-surface-0: hsl(var(--color-primary__h), 0%, 100%);
--background-color-dp-03: #e0e0e0;
--color-surface-1: hsl(var(--color-primary__h), 0%, 96%);
--background-color-dp-04: #e0e0e0;
--color-surface-2: hsl(var(--color-primary__h), 0%, 94%);
}
}
.center {
.center {
width: 100%;
width: 100%;
text-align: center;
text-align: center;
}
}
/* Prevent Imbox images from being crushed */
/* Prevent Imbox images from being crushed */
a.image {
a.image {
max-width: max-content;
max-width: max-content;
}
}
/* Center aligned image thumbnails for galleries */
.citizen-body a.image,
.mw-body-content a.image {
display: inline;
}
/* Disable hover animations for images */
.citizen-body a.image > img {
transition: unset;
}
.citizen-body a.image:hover:not(.lazy):not(.new) > img {
transform: unset;
}
.news-box {
.news-box {
border-color: var(--background-color-dp-04);
border-color: var(--color-surface-4);
background-color: var(--background-color-dp-01);
background-color: var(--color-surface-1);
}
}
.tooltip {
.tooltip {
border-bottom: 2px ridge var(--color-primary);
border-bottom: 2px ridge var(--color-primary);
}
}
.tooltiptext {
.tooltiptext {
background-color: var(--background-color-dp-00);
background-color: var(--color-surface-0);
}
}
/* Visible tooltip horizontal rules */
/* Visible tooltip horizontal rules */
.tooltiptext hr {
.tooltiptext hr {
Line 31: Line 50:
border: none;
border: none;
}
}
.tooltiptext hr::after {
.tooltiptext hr::after {
background: var(--border-color-base--darker);
background: var(--border-color-base--darker);
}
}
.extiw {
 
padding-right: 13px;
.extiw::after {
background-image: url(/skins/Citizen/resources/skins.citizen.styles/images/external-link-ltr-icon.svg);
display: inline-block;
background-position: center right;
width: 0.75em;
background-repeat: no-repeat;
height: 0.75em;
margin-left: 0.25em;
background-color: currentcolor;
content: "";
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E external link %3C/title%3E %3Cpath d=%22M17 17H3V3h5V1H3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5h-2z%22/%3E %3Cpath d=%22m11 1 3.29 3.29-5.73 5.73 1.42 1.42 5.73-5.73L19 9V1z%22/%3E %3C/svg%3E")
no-repeat 50% 50%;
mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E external link %3C/title%3E %3Cpath d=%22M17 17H3V3h5V1H3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5h-2z%22/%3E %3Cpath d=%22m11 1 3.29 3.29-5.73 5.73 1.42 1.42 5.73-5.73L19 9V1z%22/%3E %3C/svg%3E")
no-repeat 50% 50%;
-webkit-mask-size: contain;
mask-size: contain;
}
}
/* Infoboxes */
/* Infoboxes */
.outcell {
.outcell {
border: 1px solid var(--background-color-dp-01); /* #23272f; */
border: 1px solid var(--color-surface-1);
/* #23272f; */
}
}
.infobox {
.infobox {
background: var(--background-color-dp-01); /* #23272f; */
background: var(--color-surface-1);
/* #23272f; */
}
}
.infobox th {
.infobox th {
background-color: var(--background-color-dp-03);
background-color: var(--color-surface-3);
}
}
.infobox.vcard.outcell { /* Prevents character infoboxes from colliding with article text */
 
margin: 0.5em 0 0.5em 1em;
.infobox hr {
}
/* Horizontal rules for infoboxes to separate multiple lines */
.infobox hr { /* Horizontal rules for infoboxes to separate multiple lines */
display: block;
display: block;
margin: 0;
margin: 0;
border: 1px solid var(--background-color-dp-24);
border: 1px solid var(--color-surface-4);
margin-bottom: 5px;
margin-bottom: 5px;
}
}
.fullImageLink {
.fullImageLink {
margin: 0 0px;
margin: 0 0px;
}
}
@media screen and (max-width:500px) { /* Expands to fill screen for mobile */
 
@media screen and (max-width: 500px) {
/* Expands to fill screen for mobile */
.infobox.vcard.outcell {
.infobox.vcard.outcell {
width: 100%;
width: 100%;
Line 68: Line 104:
}
}
}
}
@media screen and (max-width: 1119px) {
.subpagelist {
/* Conflicts with citizen-header on mobile */
display: none;
}
}
/* Tables */
/* Tables */
table.wikitable {
table.wikitable {
background: var(--background-color-dp-01); /* #23272f; */
background: var(--color-surface-1);
/* #23272f; */
border: 1px solid var(--border-color-base);
border: 1px solid var(--border-color-base);
}
}
table.wikitable tr th {
table.wikitable tr th {
padding: 5px 10px 5px 10px;
padding: 5px 10px 5px 10px;
Line 78: Line 124:
vertical-align: middle;
vertical-align: middle;
}
}
table.wikitable tr td {
table.wikitable tr td {
padding: 5px 10px 5px 10px;
padding: 5px 10px 5px 10px;
Line 83: Line 130:
vertical-align: middle;
vertical-align: middle;
}
}
/* Cargo Tables */
/* Cargo Tables */
table.cargoTable {
table.cargoTable {
background-color: var(--background-color-dp-04);
background-color: var(--color-surface-2);
border: 1px solid var(--border-color-base);
border: 1px solid var(--border-color-base);
}
}


table.cargoTable.noMerge tr:nth-child(2n+1),
table.cargoTable.noMerge tr:nth-child(2n + 1),
table.cargoTable.mergeSimilarCells td.odd {
table.cargoTable.mergeSimilarCells td.odd {
background-color: var(--background-color-dp-04);
background-color: var(--color-surface-3);
}
}
table.cargoTable.noMerge tr:nth-child(2n),
table.cargoTable.noMerge tr:nth-child(2n),
table.cargoTable.mergeSimilarCells td.even {
table.cargoTable.mergeSimilarCells td.even {
background-color: var(--background-color-dp-08);
background-color: var(--color-surface-4);
}
}
table.cargoTable td {
table.cargoTable td {
border: 1px solid var(--border-color-base);
border: 1px solid var(--border-color-base);
Line 102: Line 152:


/* Grids */
/* Grids */
.wikigrid { /* match .wikitable styling */
.wikigrid {
    background-color: var(--background-color-dp-01);
/* match .wikitable styling */
background-color: var(--color-surface-1);
}
}
.wikigrid > div {
.wikigrid > div {
    border-bottom-color: var(--border-color-base);
border-bottom-color: var(--border-color-base);
}
}
.wikigrid > div:hover {
.wikigrid > div:hover {
    background-color: var(--background-color-quiet--active);
background-color: var(--background-color-quiet--active);
}
}
.wikigrid > .wg-hdr {
.wikigrid > .wg-hdr {
    background-color: transparent;
background-color: transparent;
    color: var(--color-base--subtle);
color: var(--color-base--subtle);
}
}


/* Fix for displaying gameplay elements for BBDW characters - Too general? */
/* Fix for displaying gameplay elements for BBDW characters - Too general? */
.mw-body-content a.image {
.mw-body-content a.image {
    display: inline;
display: inline;
}
}
/* BBDW character art containers */
/* BBDW character art containers */
#tabs-bbdw-char {
#tabs-bbdw-char {
background-color: var(--background-color-dp-01);
background-color: var(--color-surface-1);
border-left: 1px solid var(--border-color-base);
border-left: 1px solid var(--border-color-base);
border-right: 1px solid var(--border-color-base);
border-right: 1px solid var(--border-color-base);
}
}
/* Image message boxes */
/* Image message boxes */
table.imbox {
table.imbox {
border: 3px solid var(--border-color-base);
border: 3px solid var(--border-color-base);
background: var(--background-color-dp-01);
background: var(--color-surface-1);
}
}
table.imbox-notice {
table.imbox-notice {
border: 3px solid var(--border-color-base);
border: 3px solid var(--border-color-base);
}
}
/* Forms */
/* Forms */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
.select2-container--default
background-color: var(--background-color-dp-12);
.select2-selection--multiple
.select2-selection__choice {
background-color: var(--color-surface-4);
border: 1px solid var(--border-color-base);
border: 1px solid var(--border-color-base);
}
}
#pfForm .createboxInput, #pfForm .mandatoryField, #pfForm textarea {
 
#pfForm .createboxInput,
#pfForm .mandatoryField,
#pfForm textarea {
max-width: 95%;
max-width: 95%;
background-color: var(--background-color-dp-00);
background-color: var(--color-surface-0);
border: 1px solid var(--background-color-dp-00);
border: 1px solid var(--color-surface-0);
}
}
.select2-results__option, .select2-results__options, .select2-dropdown {
 
background-color: var(--background-color-dp-04);
.select2-results__option,
.select2-results__options,
.select2-dropdown {
background-color: var(--color-surface-4);
}
}
/* Navbox */
/* Navbox */
table.navbox {
table.navbox {
background: var(--background-color-dp-01); /* #23272f; */
background: var(--color-surface-1);
/* #23272f; */
}
}
.navbox-title, table.navbox th {
 
background: var(--background-color-dp-08);
.navbox-title,
table.navbox th {
background: var(--color-surface-4);
}
}
.subpagelist {
.subpagelist {
background: var(--background-color-dp-03);
background: var(--color-surface-3);
}
}
.subpagelist a {
.subpagelist a {
color: var(--color-primary--hover);
color: var(--color-primary--hover);
}
}
/* Infobox Tabs */
/* Infobox Tabs */
.tabs-label {
.tabs-label {
    background-color: var(--color-primary--active);
background-color: var(--color-primary--active);
    border-color: var(--color-primary--active);
border-color: var(--color-primary--active);
    color: rgba(255,255,255,0.87); /* --color-base--emphasized but not! */
color: rgba(255, 255, 255, 0.87);
/* --color-base--emphasized but not! */
}
}
.tabs-label:active, .tabs-label:focus {
 
    background-color: var(--color-primary);
.tabs-label:active,
    border-color: var(--color-primary);
.tabs-label:focus {
background-color: var(--color-primary);
border-color: var(--color-primary);
}
}
.tabs-label:hover {
.tabs-label:hover {
    background-color: var(--color-primary--hover);
background-color: var(--color-primary--hover);
    border-color: var(--color-primary--hover);
border-color: var(--color-primary--hover);
}
}
.tabs-plain > .tabs-label {
.tabs-plain > .tabs-label {
border-color: var(--color-primary--active);
border-color: var(--color-primary--active);
}
}
.tabs-tabbox > .tabs-input:checked + .tabs-label {
.tabs-tabbox > .tabs-input:checked + .tabs-label {
    background-color: var(--color-primary);
background-color: var(--color-primary);
    border-color: var(--color-primary);
border-color: var(--color-primary);
}
}
.tabs-input-0:checked + .tabs-input-1 + .tabs-label {
.tabs-input-0:checked + .tabs-input-1 + .tabs-label {
    background-color: var(--color-primary);
background-color: var(--color-primary);
    border-color: var(--color-primary);
border-color: var(--color-primary);
}
}
.tabs-container {
.tabs-container {
background-color: var(--background-color-dp-01);
background-color: var(--color-surface-1);
border: 1px solid var(--background-color-dp-24);
border: 1px solid var(--color-surface-4);
}
}
div.tabdiv > ul > li {
div.tabdiv > ul > li {
background-color: var(--color-primary--active);
background-color: var(--color-primary--active);
    border-color: var(--color-primary--active);
border-color: var(--color-primary--active);
}
}
div.tabdiv > ul > li:hover {
div.tabdiv > ul > li:hover {
background-color: var(--color-primary--hover);
background-color: var(--color-primary--hover);
    border-color: var(--color-primary--hover);
border-color: var(--color-primary--hover);
}
}
div.tabdiv > ul > li.active {
div.tabdiv > ul > li.active {
background-color: var(--color-primary);
background-color: var(--color-primary);
border-color: var(--color-primary);
border-color: var(--color-primary);
}
}
div.tabdiv > ul > li a {
div.tabdiv > ul > li a {
  color: rgba(255,255,255,0.87);
color: rgba(255, 255, 255, 0.87);
}
}
li.gallerybox div.thumb {
li.gallerybox div.thumb {
border-color: var(--background-color-dp-24);
border-color: var(--color-surface-4);
background-color: var(--background-color-framed);
background-color: var(--background-color-framed);
}
}
#content .gallerybox div.thumb {
#content .gallerybox div.thumb {
border-color: var(--background-color-dp-24);
border-color: var(--color-surface-4);
background-color: var(--background-color-framed);
background-color: var(--background-color-framed);
}
}
/* Code Editor */
/* Code Editor */
.codeEditor-status {
.codeEditor-status {
Line 220: Line 308:
display: table;
display: table;
}
}
.codeEditor-status-message {
.codeEditor-status-message {
border-color: var(--border-color-base);
border-color: var(--border-color-base);
}
/* Popups */
.mwe-popups .mwe-popups-container {
background-color: var(--color-surface-2);
color: var(--color-base);
}
.mwe-popups:hover {
background-color: var(--color-surface-2);
}
.mwe-popups .mwe-popups-extract[dir="ltr"]::after {
background-image: linear-gradient(
to right,
transparent,
var(--color-surface-2) 50%
);
}
/* Popup pointers */
.mwe-popups.mwe-popups-no-image-pointer:after {
border-bottom: 11px solid var(--color-surface-4);
}
.mwe-popups.mwe-popups-image-pointer:after {
border-bottom: 12px solid var(--color-surface-4);
}
.mwe-popups.mwe-popups-image-pointer.flipped-x:after {
border-bottom: 12px solid var(--color-surface-4);
}
.mwe-popups.flipped-x-y:after {
border-top: 12px solid var(--color-surface-4);
}
.mwe-popups.flipped-x-y.mwe-popups-is-tall:after {
border-top: 12px solid var(--color-surface-4);
}
.mwe-popups.flipped-y:after {
border-top: 11px solid var(--color-surface-4);
}
}


Line 230: Line 362:
td.mw-wikiforum-thread-main,
td.mw-wikiforum-thread-main,
td.mw-wikiforum-thread-main {
td.mw-wikiforum-thread-main {
background: var(--background-color-dp-01);
background: var(--color-surface-1);
}
}
tr.mw-wikiforum-title,
tr.mw-wikiforum-title,
th.mw-wikiforum-thread-top {
th.mw-wikiforum-thread-top,
background: var(--background-color-dp-04);
td.mw-wikiforum-thread-sub {
background: var(--color-surface-4);
}
}
table.mw-wikiforum-frame,
table.mw-wikiforum-frame,
td.mw-wikiforum-innerframe,
td.mw-wikiforum-innerframe,
Line 247: Line 382:
td.mw-wikiforum-lastpost,
td.mw-wikiforum-lastpost,
th.mw-wikiforum-thread-top,
th.mw-wikiforum-thread-top,
td.mw-wikiforum-thread-main {
td.mw-wikiforum-thread-main,
td.mw-wikiforum-thread-sub {
border-color: var(--border-color-base);
}
 
td.mw-wikiforum-thread-main,
td.mw-wikiforum-thread-sub {
word-wrap: normal;
word-break: normal;
}
 
#mw-wikiforum-searchbox-border {
border-color: var(--border-color-base);
border-color: var(--border-color-base);
background: var(--color-surface-3);
}
table.mw-wikiforum-frame,
.mw-wikiforum-frame table {
border-spacing: 0;
margin-top: 0;
}
}

Latest revision as of 01:23, 28 March 2024

/* All CSS here will be loaded for users of the Citizen skin */
:root {
	/* Light theme specific color variables */
	--color-surface-0: hsl(var(--color-primary__h), 0%, 100%);
	--color-surface-1: hsl(var(--color-primary__h), 0%, 96%);
	--color-surface-2: hsl(var(--color-primary__h), 0%, 94%);
}

.center {
	width: 100%;
	text-align: center;
}

/* Prevent Imbox images from being crushed */
a.image {
	max-width: max-content;
}

/* Center aligned image thumbnails for galleries */
.citizen-body a.image,
.mw-body-content a.image {
	display: inline;
}

/* Disable hover animations for images */
.citizen-body a.image > img {
	transition: unset;
}

.citizen-body a.image:hover:not(.lazy):not(.new) > img {
	transform: unset;
}

.news-box {
	border-color: var(--color-surface-4);
	background-color: var(--color-surface-1);
}

.tooltip {
	border-bottom: 2px ridge var(--color-primary);
}

.tooltiptext {
	background-color: var(--color-surface-0);
}

/* Visible tooltip horizontal rules */
.tooltiptext hr {
	display: block;
	border: none;
}

.tooltiptext hr::after {
	background: var(--border-color-base--darker);
}

.extiw::after {
	display: inline-block;
	width: 0.75em;
	height: 0.75em;
	margin-left: 0.25em;
	background-color: currentcolor;
	content: "";
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E external link %3C/title%3E %3Cpath d=%22M17 17H3V3h5V1H3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5h-2z%22/%3E %3Cpath d=%22m11 1 3.29 3.29-5.73 5.73 1.42 1.42 5.73-5.73L19 9V1z%22/%3E %3C/svg%3E")
		no-repeat 50% 50%;
	mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E external link %3C/title%3E %3Cpath d=%22M17 17H3V3h5V1H3a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5h-2z%22/%3E %3Cpath d=%22m11 1 3.29 3.29-5.73 5.73 1.42 1.42 5.73-5.73L19 9V1z%22/%3E %3C/svg%3E")
		no-repeat 50% 50%;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Infoboxes */
.outcell {
	border: 1px solid var(--color-surface-1);
	/* #23272f; */
}

.infobox {
	background: var(--color-surface-1);
	/* #23272f; */
}

.infobox th {
	background-color: var(--color-surface-3);
}

.infobox hr {
	/* Horizontal rules for infoboxes to separate multiple lines */
	display: block;
	margin: 0;
	border: 1px solid var(--color-surface-4);
	margin-bottom: 5px;
}

.fullImageLink {
	margin: 0 0px;
}

@media screen and (max-width: 500px) {
	/* Expands to fill screen for mobile */
	.infobox.vcard.outcell {
		width: 100%;
		display: table;
	}
}

@media screen and (max-width: 1119px) {
	.subpagelist {
		/* Conflicts with citizen-header on mobile */
		display: none;
	}
}

/* Tables */
table.wikitable {
	background: var(--color-surface-1);
	/* #23272f; */
	border: 1px solid var(--border-color-base);
}

table.wikitable tr th {
	padding: 5px 10px 5px 10px;
	text-align: center;
	vertical-align: middle;
}

table.wikitable tr td {
	padding: 5px 10px 5px 10px;
	text-align: center;
	vertical-align: middle;
}

/* Cargo Tables */
table.cargoTable {
	background-color: var(--color-surface-2);
	border: 1px solid var(--border-color-base);
}

table.cargoTable.noMerge tr:nth-child(2n + 1),
table.cargoTable.mergeSimilarCells td.odd {
	background-color: var(--color-surface-3);
}

table.cargoTable.noMerge tr:nth-child(2n),
table.cargoTable.mergeSimilarCells td.even {
	background-color: var(--color-surface-4);
}

table.cargoTable td {
	border: 1px solid var(--border-color-base);
}

/* Grids */
.wikigrid {
	/* match .wikitable styling */
	background-color: var(--color-surface-1);
}

.wikigrid > div {
	border-bottom-color: var(--border-color-base);
}

.wikigrid > div:hover {
	background-color: var(--background-color-quiet--active);
}

.wikigrid > .wg-hdr {
	background-color: transparent;
	color: var(--color-base--subtle);
}

/* Fix for displaying gameplay elements for BBDW characters - Too general? */
.mw-body-content a.image {
	display: inline;
}

/* BBDW character art containers */
#tabs-bbdw-char {
	background-color: var(--color-surface-1);
	border-left: 1px solid var(--border-color-base);
	border-right: 1px solid var(--border-color-base);
}

/* Image message boxes */
table.imbox {
	border: 3px solid var(--border-color-base);
	background: var(--color-surface-1);
}

table.imbox-notice {
	border: 3px solid var(--border-color-base);
}

/* Forms */
.select2-container--default
	.select2-selection--multiple
	.select2-selection__choice {
	background-color: var(--color-surface-4);
	border: 1px solid var(--border-color-base);
}

#pfForm .createboxInput,
#pfForm .mandatoryField,
#pfForm textarea {
	max-width: 95%;
	background-color: var(--color-surface-0);
	border: 1px solid var(--color-surface-0);
}

.select2-results__option,
.select2-results__options,
.select2-dropdown {
	background-color: var(--color-surface-4);
}

/* Navbox */
table.navbox {
	background: var(--color-surface-1);
	/* #23272f; */
}

.navbox-title,
table.navbox th {
	background: var(--color-surface-4);
}

.subpagelist {
	background: var(--color-surface-3);
}

.subpagelist a {
	color: var(--color-primary--hover);
}

/* Infobox Tabs */
.tabs-label {
	background-color: var(--color-primary--active);
	border-color: var(--color-primary--active);
	color: rgba(255, 255, 255, 0.87);
	/* --color-base--emphasized but not! */
}

.tabs-label:active,
.tabs-label:focus {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
}

.tabs-label:hover {
	background-color: var(--color-primary--hover);
	border-color: var(--color-primary--hover);
}

.tabs-plain > .tabs-label {
	border-color: var(--color-primary--active);
}

.tabs-tabbox > .tabs-input:checked + .tabs-label {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
}

.tabs-input-0:checked + .tabs-input-1 + .tabs-label {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
}

.tabs-container {
	background-color: var(--color-surface-1);
	border: 1px solid var(--color-surface-4);
}

div.tabdiv > ul > li {
	background-color: var(--color-primary--active);
	border-color: var(--color-primary--active);
}

div.tabdiv > ul > li:hover {
	background-color: var(--color-primary--hover);
	border-color: var(--color-primary--hover);
}

div.tabdiv > ul > li.active {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
}

div.tabdiv > ul > li a {
	color: rgba(255, 255, 255, 0.87);
}

li.gallerybox div.thumb {
	border-color: var(--color-surface-4);
	background-color: var(--background-color-framed);
}

#content .gallerybox div.thumb {
	border-color: var(--color-surface-4);
	background-color: var(--background-color-framed);
}

/* Code Editor */
.codeEditor-status {
	clear: both;
	width: 100%;
	background-color: var(--background-color-framed);
	border-top: 1px solid var(--border-color-base);
	display: table;
}

.codeEditor-status-message {
	border-color: var(--border-color-base);
}

/* Popups */
.mwe-popups .mwe-popups-container {
	background-color: var(--color-surface-2);
	color: var(--color-base);
}

.mwe-popups:hover {
	background-color: var(--color-surface-2);
}

.mwe-popups .mwe-popups-extract[dir="ltr"]::after {
	background-image: linear-gradient(
		to right,
		transparent,
		var(--color-surface-2) 50%
	);
}

/* Popup pointers */
.mwe-popups.mwe-popups-no-image-pointer:after {
	border-bottom: 11px solid var(--color-surface-4);
}

.mwe-popups.mwe-popups-image-pointer:after {
	border-bottom: 12px solid var(--color-surface-4);
}

.mwe-popups.mwe-popups-image-pointer.flipped-x:after {
	border-bottom: 12px solid var(--color-surface-4);
}

.mwe-popups.flipped-x-y:after {
	border-top: 12px solid var(--color-surface-4);
}

.mwe-popups.flipped-x-y.mwe-popups-is-tall:after {
	border-top: 12px solid var(--color-surface-4);
}

.mwe-popups.flipped-y:after {
	border-top: 11px solid var(--color-surface-4);
}

/* Extension:WikiForum */
table.mw-wikiforum-frame,
tr.mw-wikiforum-normal,
tr.mw-wikiforum-sticky,
td.mw-wikiforum-thread-main,
td.mw-wikiforum-thread-main {
	background: var(--color-surface-1);
}

tr.mw-wikiforum-title,
th.mw-wikiforum-thread-top,
td.mw-wikiforum-thread-sub {
	background: var(--color-surface-4);
}

table.mw-wikiforum-frame,
td.mw-wikiforum-innerframe,
th.mw-wikiforum-title,
td.mw-wikiforum-title,
th.mw-wikiforum-admin,
td.mw-wikiforum-admin,
th.mw-wikiforum-value,
td.mw-wikiforum-value,
th.mw-wikiforum-lastpost,
td.mw-wikiforum-lastpost,
th.mw-wikiforum-thread-top,
td.mw-wikiforum-thread-main,
td.mw-wikiforum-thread-sub {
	border-color: var(--border-color-base);
}

td.mw-wikiforum-thread-main,
td.mw-wikiforum-thread-sub {
	word-wrap: normal;
	word-break: normal;
}

#mw-wikiforum-searchbox-border {
	border-color: var(--border-color-base);
	background: var(--color-surface-3);
}

table.mw-wikiforum-frame,
.mw-wikiforum-frame table {
	border-spacing: 0;
	margin-top: 0;
}