MediaWiki:Common.css: Difference between revisions
m (update documentation to use background-mw-heading) |
(applied pixelart to multimedia search results) |
||
Line 29: | Line 29: | ||
/* Provide pixel art support, from https://stackoverflow.com/a/8888964/ */ | /* Provide pixel art support, from https://stackoverflow.com/a/8888964/ */ | ||
ul.mw-search-results > li.mw-search-result img, | |||
.gallery .gallerybox div.thumb img, | .gallery .gallerybox div.thumb img, | ||
img.pixelart { | img.pixelart { |
Revision as of 02:59, 1 April 2024
/* CSS placed here will be applied to all skins */
/* pz-theme */
:root {
--color-mw: #eaecf0;
--color-mw-border: #a2a9b1;
--color-red: #68191b;
--color-blue: #185893;
--link-red: #ddd6c1;
--link-blue: #c1d6dd;
--background-mw: #f8f9fa;
--background-mw-even: #f2f2f2;
--background-mw-odd: #f9f9f9;
--background-mw-heading: #e5e5e5;
--background-red: #f4f3eb;
--background-blue: #ebf3f4;
--background-message-error: #fee7e6;
--background-message-warn: #fef6e7;
--background-message-info: #a3caff;
--border-mw: 1px solid #a2a9b1;
--border-red: 1px solid #460c10;
--border-blue: 1px solid #0f304a;
--border-message-error: 1px solid #d33;
--border-message-warn: 1px solid #fc3;
--border-message-info: 1px solid #3366cc;
--border-radius: 0.5em;
--shadow-mw: 0 0 0.5em 0.1em #00000080;
}
/* Provide pixel art support, from https://stackoverflow.com/a/8888964/ */
ul.mw-search-results > li.mw-search-result img,
.gallery .gallerybox div.thumb img,
img.pixelart {
image-rendering: optimizeSpeed; /* Legal fallback */
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast; /* Safari */
image-rendering: optimize-contrast; /* CSS3 Proposed */
image-rendering: pixelated; /* CSS4 Proposed */
image-rendering: crisp-edges; /* CSS4 Proposed */
-ms-interpolation-mode: nearest-neighbor; /* IE8+ */
}
/* Remove text decoration on link */
.no-decoration a:hover {
text-decoration: none;
}
/* TEMPORARY CLASS: change link colour for mw collapsible toggle */
td.mw-collapse-data-color > span > a {
color: #ffffff;
text-decoration: none;
}
/* Clearer background color for wikitable */
table.wikitable > tr > th,
table.wikitable > * > tr > th {
background-color: var(--background-mw-heading);
}
table.wikitable tr:nth-child(even) td{
background-color: var(--background-mw-even);
}
table.wikitable tr:nth-child(odd) td{
background-color: var(--background-mw-odd);
}
/* Custom table styles */
table.wikitable.theme-red > tr > th,
table.wikitable.theme-red > * > tr > th {
background-color: var(--color-red);
color: white;
}
table.wikitable.theme-blue > tr > th,
table.wikitable.theme-blue > * > tr > th {
background-color: var(--color-blue);
color: white;
}
table.wikitable.theme-red > tr > th a,
table.wikitable.theme-red > * > tr > th a {
color: var(--link-red);
}
table.wikitable.theme-blue > tr > th a,
table.wikitable.theme-blue > * > tr > th a {
color: var(--link-blue);
}
table.wikitable.theme-red > tr > th,
table.wikitable.theme-red > tr > td,
table.wikitable.theme-red > * > tr > th,
table.wikitable.theme-red > * > tr > td {
border: var(--border-red);
}
table.wikitable.theme-blue > tr > th,
table.wikitable.theme-blue > tr > td,
table.wikitable.theme-blue > * > tr > th,
table.wikitable.theme-blue > * > tr > td {
border: var(--border-blue);
}
/* Button style */
table.button {
}
table.button td {
background-color: #68191b;
border: 2px solid #000000;
color: #ffffff;
}
table.button td:hover {
background-color: #b22328;
}
td.button a {
display: block;
width: 100%;
height: 100%;
}
.button a {
text-decoration: none;
}
/* Make the list of references smaller */
ol.references {
font-size: 100%;
}
.references-small {
font-size: 90%;
}
/* VALIDATOR NOTICE: the following is correct, but the W3C validator doesn't accept it */
/* -moz-* is a vendor-specific extension (CSS 2.1 4.1.2.1) */
/* column-count is from the CSS3 module "CSS Multi-column Layout" */
/* Please ignore any validator errors caused by these two lines */
.references-2column {
font-size: 90%;
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
/* Highlight clicked reference in blue to help navigation */
ol.references > li:target, sup.reference:target, cite:target {
background-color: #ddeeff;
}
/* Ensure refs in table headers and the like aren't bold or italic */
sup.reference {
font-weight: normal;
font-style: normal;
}
/* Styling for citations */
cite {
font-style: normal;
word-wrap: break-word;
}
/* For linked citation numbers and document IDs, where
the number need not be shown on a screen or a handheld,
but should be included in the printed version */
@media screen,
handheld,
projection {
cite *.printonly {
display: none;
}
}
/* so they need to be the same width. */
/* Infobox template style */
/* TODO: remove after "infobox-old" replaced by "infobox" (new Template:Infobox) */
.infobox-old {
border: 1px solid #aaaaaa;
background-color: #f9f9f9;
color: black;
margin: 0.5em 0 0.5em 1em;
padding: 0.2em;
float: right;
clear: right;
}
.infobox-old td,
.infobox-old th {
vertical-align: top;
}
.infobox-old caption {
font-size: larger;
}
.infobox-old.bordered {
border-collapse: collapse;
}
.infobox-old.bordered td,
.infobox-old.bordered th {
border: 1px solid #aaaaaa;
}
.infobox-old.bordered
.borderless td,
.infobox-old.bordered
.borderless th {
border: 0;
}
.infobox-old.sisterproject {
width: 20em;
font-size: 90%;
}
.infobox-old.standard-talk {
border: 1px solid #c0c090;
background-color: #f8eaba;
}
.infobox-old.standard-talk.bordered td,
.infobox-old.standard-talk.bordered th {
border: 1px solid #c0c090;
}
/* Styles for bordered infobox with merged rows */
.infobox-old.bordered .mergedtoprow td,
.infobox-old.bordered .mergedtoprow th {
border: 0;
border-top: 1px solid #aaaaaa;
border-right: 1px solid #aaaaaa;
}
.infobox-old.bordered .mergedrow td,
.infobox-old.bordered .mergedrow th {
border: 0;
border-right: 1px solid #aaaaaa;
}
/* Styles for geography infoboxes, e.g., countries, country subdivisions, cities, etc.*/
.infobox-old.geography {
text-align: left;
border-collapse: collapse;
line-height: 1.2em;
font-size: 90%;
}
.infobox-old.geography td,
.infobox-old.geography th {
border-top: solid 1px #aaaaaa;
padding: 0.4em 0.6em 0.4em 0.6em;
}
.infobox-old.geography .mergedtoprow td,
.infobox-old.geography
.mergedtoprow th {
border-top: solid 1px #aaaaaa;
padding: 0.4em 0.6em 0.2em 0.6em;
}
.infobox-old.geography
.mergedrow td,
.infobox-old.geography
.mergedrow th {
border: 0;
padding: 0 0.6em 0.2em 0.6em;
}
.infobox-old.geography
.mergedbottomrow td,
.infobox-old.geography
.mergedbottomrow th {
border-top: 0;
border-bottom: solid 1px #aaaaaa;
padding: 0 0.6em 0.4em 0.6em;
}
.infobox-old.geography
.maptable td,
.infobox-old.geography
.maptable th {
border: 0;
padding: 0;
}
/* Style rules for media list templates */
div.medialist {
min-height: 50px;
margin: 1em;
background-position: top left;
background-repeat: no-repeat;
}
div.medialist ul {
list-style-type: none;
list-style-image: none;
margin: 0;
}
div.medialist ul li {
padding-bottom: 0.5em;
}
div.medialist ul li li {
font-size: 91%;
padding-bottom: 0;
}
/* Colored watchlist numbers */
.mw-plusminus-pos {
color: #006400;
}
/* dark green */
.mw-plusminus-neg {
color: #8b0000;
}
/* dark red */
.rellink,
.dablink {
font-style: italic;
padding-left: 2em;
}
.rellink i,
.dablink i {
font-style: normal;
}
/* Style for horizontal UL lists */
.horizontal ul {
padding: 0;
margin: 0;
}
.horizontal li {
padding: 0 0.6em 0 0.4em;
display: inline;
border-right: 1px solid;
}
.horizontal li:last-child {
border-right: none;
padding-right: 0;
}
/* When <div class="nonumtoc"> is used on the table of contents,
the ToC will display without numbers */
.nonumtoc .tocnumber {
display: none;
}
.nonumtoc #toc ul,
.nonumtoc .toc ul {
line-height: 1.5em;
list-style: none;
margin:
.3em 0 0;
padding: 0;
}
.nonumtoc #toc ul ul,
.nonumtoc
.toc ul ul {
margin: 0 0 0 2em;
}
/* Prevent line breaks in silly places:
1) links when we don't want them to
2) HTML formulae
3) Ref tags with group names <ref group="Note"> --> "[Note 1]" */
.nowraplinks a, span.texhtml, sup.reference a {
white-space: nowrap;
}
.thumbinner {
min-width: 100px;
}
/* Inline divs in ImageMaps (code borrowed from de.wiki) */
.imagemap-inline div {
display: inline;
}
/* Increase the height of the image upload box */
#wpUploadDescription {
height: 13em;
}
/* Reduce line-height for <sup> and <sub> */
sup, sub {
line-height: 1em; }
/* Prevent floating boxes from overlapping any category listings,
file histories, edit previews, and edit [Show changes] views */
#mw-subcategories, #mw-pages, #mw-category-media,
#filehistory, #wikiPreview, #wikiDiff {
clear: both;
}
/* Div based "warning" style system messages (system messages). */
div.mw-warning-with-logexcerpt,
div.mw-lag-warn-high,
div.mw-cascadeprotectedwarning {
clear: both;
margin: 0.2em 0;
border: 1px solid #bb7070;
background: #ffdbdb;
padding: 0.25em 0.9em;
}
/* Div based "system" style messages (system messages). */
div.mw-lag-warn-normal,
div.noarticletext,
div.fmbox-system {
clear: both;
margin: 0.2em 0;
border: 1px solid #aaa;
background: #f9f9f9;
padding: 0.25em 0.9em;
}
/* Selectively hide headers in WikiProject banners */
.wpb .wpb-header { display: none; }
.wpbs-inner .wpb .wpb-header { display: block; } /* for IE */
.wpbs-inner .wpb .wpb-header { display: table-row; } /* for real browsers */
.wpbs-inner .wpb-outside { display: none; } /* hide things that should only display outside shells */
/* Allow limiting of which header levels are shown in a TOC;
<div class="toclimit-3">, for instance, will limit to
showing ==headings== and ===headings=== but no further
(as long as there are no =headings= on the page, which
there shouldn't be according to the MoS). */
.toclimit-2 .toclevel-2,
.toclimit-3 .toclevel-3,
.toclimit-4 .toclevel-4,
.toclimit-5 .toclevel-5,
.toclimit-6 .toclevel-6,
.toclimit-7 .toclevel-7 {
display: none;
}
/* Numbered lists (ordered) */
/* Use #, ##, ### wikitext to produce the usual system of numbered lists (1, 2, 3; then a, b, c; then i, ii, iii) */
ol {
list-style-type: decimal;
}
ol li > ol {
list-style-type: lower-alpha;
}
ol li > ol li > ol {
list-style-type: lower-roman;
}
/* Bulleted lists (unordered) */
/* Use *, **, *** wikitext to produce the usual system of bulleted lists (•; then ◦; then ▪) */
ul {
list-style-image: none;
list-style-type: disc;
}
ul li > ul {
list-style-type: circle;
}
ul li > ul li > ul {
list-style-type: square;
}
/* Regional logos
.mw-wiki-logo:lang(en-gb) {
background-image: url(https://pzwiki.net/w/images/3/37/Spiffo_rummage.png) !important;
} */
/* Custom CSS for code */
pre.code {
background-color: #f8f9fa;
border: 1px solid #eaecf0;
color: #000000;
line-height: 1.3;
padding: 1em;
tab-size: 4;
}
pre.code span.comment {
color: #408080;
font-style: italic;
}
pre.code span.function {
color: #0000ff;
}
pre.code span.keyword {
color: #008000;
font-weight: bold;
}
span.obsolete {
color: #ff0000;
}
/* Template:Section */
div.pz-section {
display: flex;
flex-direction: column;
border: var(--border-mw);
border-radius: calc(var(--border-radius) * 2);
box-sizing: border-box;
overflow: hidden;
}
div.pz-section.theme-red {
background-color: var(--background-red);
border: var(--border-red);
}
div.pz-section.theme-blue {
background-color: var(--background-blue);
border: var(--border-blue);
}
div.pz-section > h2 {
text-align: center;
margin: 0;
padding: calc(var(--border-radius) / 2);
}
div.pz-section.theme-red > h2 {
background-color: var(--color-red);
color: white;
}
div.pz-section.theme-blue > h2 {
background-color: var(--color-blue);
color: white;
}
div.pz-section.theme-red > h2 a {
color: var(--link-red);
}
div.pz-section.theme-blue > h2 a {
color: var(--link-blue);
}
div.pz-section > div {
flex-grow: 1;
padding: var(--border-radius);
}
div.pz-section > div h3 {
text-align: center;
border-bottom: var(--border-mw);
}
/* Responsive layout */
/* TODO: remove after "pz-responsive" replaced with "pz-container" */
div.pz-responsive {
width: 100%;
display: flex;
}
div.pz-responsive > div {
display: flex;
flex-direction: column;
}
div.pz-responsive > div:first-child {
flex-basis: 70%;
margin-right: 10px;
}
div.pz-responsive > div:last-child {
flex-basis: 30%;
}
div.pz-responsive > div > div {
margin-bottom: 10px;
}
div.pz-responsive > div > div:last-child {
margin-bottom: 0;
flex-grow: 1;
}
/** Responsive images **/
div.pz-responsive img {
width: 100%;
height: auto;
}
/** Mobile layout **/
@media screen and (max-width: 1280px) {
div.pz-responsive {
flex-direction: column;
}
div.pz-responsive > div:first-child {
margin-right: 0;
margin-bottom: 10px;
}
}
/* Template:Mbox */
div.mbox {
position: relative;
display: flex;
align-items: center;
border: var(--border-mw);
border-radius: var(--border-radius);
background-color: var(--background-mw);
margin-bottom: 0.5em;
padding-left: var(--border-radius);
overflow: hidden;
}
div.mbox > div:first-child {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: var(--border-radius);
background-color: var(--color-mw);
}
div.mbox > div:first-child + div {
flex-shrink: 0;
padding: var(--border-radius);
text-align: center;
border-right: var(--border-mw);
}
div.mbox > div:first-child + div img {
width: 32px;
height: auto;
}
div.mbox > div:last-child {
flex-grow: 1;
padding: calc(var(--border-radius) / 2) var(--border-radius);
}
/* Template:Infobox */
div.infobox {
float: right;
clear: right;
width: 350px;
display: flex;
flex-direction: column;
gap: 2px;
background-color: var(--background-mw);
border: 1px solid var(--color-red);
border-radius: calc(var(--border-radius) * 2);
margin: 0.5em 0 0.5em 1em;
box-shadow: var(--shadow-mw);
overflow: hidden;
}
div.infobox > div:first-child {
text-align: center;
font-size: 1.5em;
font-weight: bold;
padding: calc(var(--border-radius) / 2);
}
div.infobox div.infobox-image {
display: flex;
flex-direction: column;
gap: 4px;
}
div.infobox div.infobox-image > div.infobox-preview {
display: none; /* handled with js */
margin: 0 auto;
}
div.infobox div.infobox-image > div.infobox-preview img {
max-width: 200px;
height: auto;
}
div.infobox div.infobox-image > div.infobox-caption {
text-align: center;
font-style: italic;
}
div.infobox div.infobox-image > div.infobox-gallery {
display: flex;
justify-content: center;
gap: 4px;
padding: 4px;
flex-wrap: wrap;
}
div.infobox div.infobox-image > div.infobox-gallery img {
border: var(--border-mw);
border-radius: var(--border-radius);
padding: 1px;
width: auto;
max-height: 32px;
cursor: pointer;
}
div.infobox div.infobox-image > div.infobox-gallery img:hover {
background: var(--color-mw);
box-shadow: 0 0 0.25em var(--color-mw-border);
}
div.infobox div.infobox-image > div.infobox-gallery img.selected {
background: var(--color-mw);
box-shadow: 0 0 0.25em var(--color-mw-border) inset;
}
div.infobox div.infobox-section {
position: relative;
}
div.infobox div.infobox-section > div:first-child {
text-align: center;
font-size: 1.0em;
font-weight: bold;
padding: calc(var(--border-radius) / 2);
}
div.infobox div.infobox-section > div.mw-collapsible {
display: flex;
flex-direction: column;
gap: 2px;
margin-top: 2px;
}
div.infobox div.infobox-section > div.toggle {
color: white;
}
div.infobox div.infobox-item {
display: flex;
}
div.infobox div.infobox-item > div {
padding: 0 0.5em;
overflow:auto; /* temporary fix for long values (item_id) */
}
div.infobox div.infobox-item > div:first-child {
width: 40%;
font-weight: bold;
display: flex;
justify-content: space-between;
flex-shrink: 0;
background-color: var(--background-mw-even);
}
div.infobox div.infobox-item > div:first-child img {
width: 1.5em;
height: 1.5em;
}
div.infobox div.infobox-item > div:first-child img.auto-size {
width: auto;
height: auto;
}
/* Template:Documentation */
div.documentation {
display: flex;
flex-direction: column;
}
div.documentation > div {
border: var(--border-mw);
padding: var(--border-radius);
}
div.documentation > div:first-child {
background-color: var(--background-mw-heading);
border-radius: var(--border-radius) var(--border-radius) 0 0;
margin-bottom: 0.2em;
text-transform: uppercase;
font-weight: bold;
}
div.documentation > div:first-child img {
max-width: 2em;
max-height: 2em;
}
div.documentation > div:first-child + div {
background-color: var(--background-mw);
margin-bottom: 0.2em;
}
div.documentation > div:last-child {
background-color: var(--background-mw-heading);
border-radius: 0 0 var(--border-radius) var(--border-radius);
text-align: right;
font-style: italic;
}
/* Template:Header */
div.header {
display: flex;
padding: 0.5em 0;
margin-bottom: 0.5em;
border-radius: var(--border-radius);
}
div.header.theme-red {
background-color: var(--color-red);
border: var(--border-red);
color: white;
}
div.header.theme-blue {
background-color: var(--color-blue);
border: var(--border-blue);
color: white;
}
div.header.theme-red a {
color: var(--link-red);
}
div.header.theme-blue a {
color: var(--link-blue);
}
div.header > div:first-child {
font-weight: bold;
padding: 0 0.5em;
}
div.header > div:last-child {
flex-grow: 1;
padding: 0 0.5em;
}
div.header.theme-red > div:first-child {
border-right: 1px solid var(--link-red);
}
div.header.theme-blue > div:first-child {
border-right: 1px solid var(--link-blue);
}
/* Template:Mask */
.mask {
color: black;
background-color: black;
transition: color 0.2s linear;
}
.mask:hover {
color: white;
}
/* Template:Navbox */
div.navbox {
position: relative;
display: flex;
flex-direction: column;
background-color: var(--background-mw);
border: 1px solid var(--color-mw);
border-radius: var(--border-radius);
margin: 0.5em auto;
overflow: hidden;
}
div.navbox.theme-red {
border: var(--border-red);
}
div.navbox.theme-blue {
border: var(--border-blue);
}
div.navbox > div:first-child {
text-align: center;
font-size: 1.2em;
font-weight: bold;
padding: calc(var(--border-radius) / 2) var(--border-radius); /* <!-- */
}
div.navbox.theme-red > div:first-child {
background-color: var(--color-red);
color: white;
}
div.navbox.theme-blue > div:first-child {
background-color: var(--color-blue);
color: white;
}
div.navbox.theme-red > div:first-child a {
color: var(--link-red);
}
div.navbox.theme-blue > div:first-child a {
color: var(--link-blue);
}
/* second-level of navbox */
div.navbox div.navbox > div:first-child {
font-size: 1.0em;
filter: brightness(120%);
}
/* third-level of navbox */
div.navbox div.navbox div.navbox > div:first-child {
font-size: 0.9em;
filter: brightness(150%)
}
div.navbox > div.mw-collapsible {
display: flex;
flex-direction: column;
gap: 2px;
margin-top: 2px;
}
div.navbox.theme-red > div.toggle,
div.navbox.theme-blue > div.toggle {
color: white;
}
div.navbox div.navbox-row {
background-color: var(--color-mw);
text-align: center;
}
div.navbox > div.mw-collapsible .navbox {
border: none;
border-radius: 0;
box-shadow: 0 0;
margin: 0;
}
div.navbox > div.mw-collapsible div.navbox-section {
display: flex;
gap: 2px;
}
div.navbox > div.mw-collapsible div.navbox-section > div:first-child {
display: flex;
flex-direction: column;
gap: 2px;
flex-grow: 1;
}
div.navbox > div.mw-collapsible div.navbox-section > div:first-child + div {
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
}
div.navbox > div.mw-collapsible div.navbox-item {
display: flex;
gap: 2px;
}
div.navbox > div.mw-collapsible div.navbox-item > div:first-child {
width: 20%;
flex-shrink: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--background-mw-even);
font-weight: bold;
text-align: center;
}
div.navbox > div.mw-collapsible div.navbox-item > div:last-child {
flex-grow: 1;
display: flex;
flex-direction: column;
gap: 2px;
}
/* Scale image on hover */
/* Used on main page for quick links */
.scale-image img {
transition: all 0.2s ease-in-out;
}
.scale-image img:hover {
transform: scale(1.05);
}
/* Images should be responsive */
/* Image will resize based on container size, instead of being static. */
.res-img img {
max-width: 100%;
height: auto;
}
/* Template:Togglebox */
div.togglebox {
position: relative;
display: flex;
flex-direction: column;
border-radius: var(--border-radius);
margin: 0.5em auto;
padding: var(--border-radius);
}
div.togglebox.theme-red {
background-color: var(--color-red);
}
div.togglebox.theme-blue {
background-color: var(--color-blue);
}
div.togglebox > div:first-child {
font-size: 1.2em;
font-weight: bold;
padding: 0 var(--border-radius);
}
div.togglebox.theme-red > div:first-child {
color: white;
}
div.togglebox.theme-blue > div:first-child {
color: white;
}
div.togglebox.theme-red > div:first-child a {
color: var(--link-red);
}
div.togglebox.theme-blue > div:first-child a {
color: var(--link-blue);
}
div.togglebox > div.mw-collapsible {
background-color: var(--background-mw);
border-radius: var(--border-radius);
padding: var(--border-radius);
margin-top: 0.5em;
}
div.togglebox.theme-red > div.mw-collapsible { /* ToggleBox content div red */
/* background-color: var(--background-red); */
}
div.togglebox.theme-blue > div.mw-collapsible { /* ToggleBox content div blue */
/* background-color: var(--background-blue); */
}
div.togglebox > div.toggle {
color: white;
}
/* used in Project Zomboid Wiki and PZwiki:Community Portal */
div.pz-container {
width: 100%;
display: flex;
gap: 0.5em;
}
div.pz-container > div {
display: flex;
flex-direction: column;
gap: 0.5em;
}
div.pz-container > div:first-child {
flex-basis: 70%;
}
div.pz-container > div:last-child {
flex-basis: 30%;
}
div.pz-container > div > div:last-child {
flex-grow: 1;
}
div.pz-container img {
width: auto;
height: auto;
}
@media screen and (max-width: 1280px) {
div.pz-container {
flex-direction: column;
}
}
/* Toggle for collapsible templates */
div.toggle::after {
content: "◥";
position: absolute;
top: 0.2em;
right: 0.7em;
font-size: 1.2em;
font-weight: bold;
transition: transform 0.2s linear;
}
div.toggle.small::after {
font-size: 1.1em;
}
div.toggle.large::after {
top: 0.5em;
right: 1em;
}
div.mw-collapsed + div.toggle::after {
transform: rotate(90deg);
}
/* Template:Userbox showcase */
div.userbox-showcase {
min-width: 240px;
float: right;
clear: right;
margin: 0 0 1em 0.5em;
border: var(--border-blue);
border-radius: calc(var(--border-radius) * 2);
overflow: hidden;
}
div.userbox-showcase > div {
padding: var(--border-radius);
}
div.userbox-showcase > div:first-child {
text-align: center;
background-color: var(--color-blue);
color: white;
font-size: 1.2em;
font-weight: bold;
}
div.userbox-showcase > div:first-child a {
color: var(--link-blue);
}
div.userbox-showcase > div:last-child {
display: flex;
flex-direction: column;
gap: var(--border-radius);
background-color: var(--background-blue);
}
/* Template: Userbox */
div.userbox {
display: flex;
min-height: 40px;
max-width: 240px;
border: var(--border-mw);
border-radius: var(--border-radius);
overflow: hidden;
margin: 0.5em;
}
div.userbox > div {
padding: var(--border-radius);
min-height: 32px;
display: flex;
align-items: center;
}
div.userbox > div:first-child {
text-align: center;
font-weight: bold;
flex-basis: 32px;
flex-shrink: 0;
border-right: var(--border-mw);
justify-content: center;
}
div.userbox > div:first-child img {
max-width: 32px;
height: auto;
}
div.userbox > div:last-child {
flex-grow: 1;
font-size: 0.75em;
padding: 0 var(--border-radius);
}
div.userbox.awards {
display: block;
}
div.userbox.awards > div:first-child {
float: left;
}
div.userbox-showcase > div:last-child > div.userbox {
margin: 0;
}
/* for nav bar */
div.navbar {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 0.5em;
padding: var(--border-radius);
border-radius: calc(2 * var(--border-radius));
}
div.navbar > a {
padding: var(--border-radius);
border-radius: var(--border-radius);
border: var(--border-mw);
background-color: var(--color-mw);
transition: all 0.2s linear;
text-decoration: none;
}
div.navbar.theme-red > a {
background-color: var(--color-red);
color: var(--link-red);
border: var(--border-red);
}
div.navbar.theme-blue > a {
background-color: var(--color-blue);
color: var(--link-blue);
border: var(--border-blue);
}
div.navbar > a:first-child {
font-weight: bold;
}
div.navbar > a:hover {
border-radius: calc(var(--border-radius) * 2);
}
div.navbar.theme-red > a:hover {
background-color: #b22328; /* light red */
}
div.navbar.theme-blue > a:hover {
background-color: #2f8cd8; /* light blue */
}
div.navbar > a.mw-selflink {
border-radius: calc(var(--border-radius) * 2);
color: white;
}
div.navbar.theme-red > a.mw-selflink {
background-color: #b22328; /* light red */
}
div.navbar.theme-blue > a.mw-selflink {
background-color: #2f8cd8; /* light blue */
}
/* Don't show In other languages when editing pages on Vector skins, until we find better solution */
#p-lang {
display: none;
}
/* Template:Key */
kbd.keyboard-key {
border: 1px solid #aaaaaa;
border-radius: 0.2em;
box-shadow: 0.1em 0.2em 0.2em #dddddd;
background-image: linear-gradient(to bottom, #eeeeee, #f9f9f9, #eeeeee);
padding: 0.1em 0.3em;
font-family: inherit;
font-size: 0.85em;
}
/* Template:Quote */
.quote {
display: flex;
font-family: 'Georgia', 'Times New Roman', 'Times', serif;
}
.quote .quote-mark {
font-weight: bold;
font-size: 4em;
height: 1em;
}
.quote .quote-text {
margin: 0.5em;
padding-left: 0.5em;
border-left: 1px solid #000000;
font-style: italic;
}
.quote .quote-author {
text-align: right;
}
/* Mediawiki:Sitenotice */
.sitenotice-card {
background-color: #f8f9fa;
color: #000000;
text-align: center;
justify-content: space-between;
margin: 0.75rem 0;
padding: 0.5rem 1rem;
border-bottom: 1px solid #eaecf0;
display: flex;
width: auto;
align-items: center;
}
.sitenotice-card > div {
display: flex;
flex-direction: column;
}
.sitenotice-card .image-container-left {
margin-right: 1rem;
}
.sitenotice-card .image-container-right {
margin-left: 1rem;
}