MediaWiki:Common.css

/* */ @font-face { font-family: 'IBM Plex Sans'; font-weight: normal; font-style: normal; font-display: swap; src: url('filepath://IBMPlexSans-Regular.woff') format('woff'); }

@font-face { font-family: 'IBM Plex Sans'; font-weight: normal; font-style: italic; font-display: swap; src: url('filepath://IBMPlexSans-Italic.woff') format('woff'); }

@font-face { font-family: 'IBM Plex Sans'; font-weight: bold; font-style: normal; font-display: swap; src: url('filepath://IBMPlexSans-Bold.woff') format('woff'); }

@font-face { font-family: 'IBM Plex Sans'; font-weight: bold; font-style: italic; font-display: swap; src: url('filepath://IBMPlexSans-BoldItalic.woff') format('woff'); }

@font-face { font-family: 'PT Serif'; font-weight: normal; font-style: normal; font-display: swap; src: url('filepath://PT-Serif_Regular.woff') format('woff'); }

@font-face { font-family: 'PT Serif'; font-weight: normal; font-style: italic; font-display: swap; src: url('filepath://PT-Serif_Italic.woff') format('woff'); }

@font-face { font-family: 'PT Serif'; font-weight: bold; font-style: normal; font-display: swap; src: url('filepath://PT-Serif_Bold.woff') format('woff'); }

@font-face { font-family: 'PT Serif'; font-weight: bold; font-style: italic; font-display: swap; src: url('filepath://PT-Serif_Bold-Italic.woff') format('woff'); }

a, image a { color: #327ba7; }

a:visited, image a:visited, a:active, image a:active { color: #327ba7; }

a.new, image a.new { color: #ba0000; }

a.new:visited, image a.new:visited { color: #ba0000; }

div.vectorTabs li a, div.vectorMenu li a, div.vectorTabs li a:visited, div.vectorMenu li a:visited, div.vectorTabs li a:active, div.vectorMenu li a:active, color: #327ba7; }
 * 1) mw-panel .portal .body li a,
 * 1) mw-panel .portal .body li a:visited,
 * 1) mw-panel .portal .body li a:active {

div.vectorTabs li.new a, div.vectorMenu li.new a, div.vectorTabs li.new a:visited, div.vectorMenu li.new a:visited, div.vectorTabs li.new a:active, div.vectorMenu li.new a:active, color: #ba0000; }
 * 1) mw-panel .portal .body li.new a,
 * 1) mw-panel .portal .body li.new a:visited,
 * 1) mw-panel .portal .body li.new a:active {

.mw-body-content a.external, .mw-body-content a.extiw { color: #3869bb; }

.mw-body-content a.external:visited, .mw-body-content a.extiw:visited, .mw-body-content a.external:active, .mw-body-content a.extiw:active { color: #3869bb; }

.jsPurgeLink a.external { color: #327ba7; }

html { -webkit-text-size-adjust: 100%; }

body { font-family: 'IBM Plex Sans', 'Helvetica Neue', 'Arial', sans-serif; }

.mw-body { color: #36414f; background-color: #fbfbfb; }

.mw-body-content { font-size: 0.9em; line-height: 1.75; }

.mw-body-content p { margin: 0 0 0.8em; }

h1, h2, h3, h4, h5, h6 { color: #444e5a; border-color: #e4eaee; }

h1 { font-weight: bold; }

h2 { border: none; }

.mw-body h1, .mw-body-content h1, .mw-body-content h2, .mw-body-content h3, .mw-body-content h4, .mw-body-content h5, .mw-body-content h6 { font-family: 'Linux Libertine', 'Georgia', 'Times', serif; margin-bottom: 0.3em; }

body.page-Repair_Wiki .mw-parser-output { max-width: 75em; margin: 0 auto; }

body.page-Repair_Wiki.action-view .catlinks, body.page-Repair_Wiki.action-view #contentSub, body.page-Repair_Wiki.action-view #firstHeading, body.page-Repair_Wiki.action-view #siteNotice { display: none; }

body.page-Repair_Wiki .mw-parser-output { max-width: 75em; margin: 0 auto; }

body.page-Repair_Wiki.action-view .catlinks, body.page-Repair_Wiki.action-view #contentSub, body.page-Repair_Wiki.action-view #firstHeading, body.page-Repair_Wiki.action-view #siteNotice { display: none; }

.mainpage-header { display: flex; margin: 2.6em 1.75em 1.5em; }

.mainpage-header .header-intro { flex: 2; }

.mainpage-header .header-intro h1 { font-size: 1.8em; border: none; margin: 0 0 0.15em; }

.mainpage-header .header-intro p { font-size: 1.1em; line-height: 1.7em; }

.mainpage-header .header-stats { flex: 1; display: flex; justify-content: center; align-items: center; margin-top: -1em; }

.mainpage-header .header-stats ul { list-style: none; }

/* (mp_) For main-page styling - Inspired by MediaWiki's main page */ .mp_row { padding: 0; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; }

.mp_box { padding: 0 10px 10px 10px; margin: 5px; flex: 1; flex-basis: 0; flex-grow: 1; flex-shrink: 1; min-width: 250px; /* Could we use media queries instead? */ border: 1px solid #CCC; box-shadow: 0 0.5em 1em -0.125em rgb(10 10 10 / 10%), 0 0px 0 1px rgb(10 10 10 / 2%); }

.mp_box h2 { padding-right: 0; padding-top: 0; padding-bottom: 0; margin: 0.5em 0; }

.mp_box .content { /* padding-top: 0.5em; */ }

.mp_box img .image-fullwidth { height: auto; width: 100%; }

.mainpage-social { border: none; box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.3); }

.mainpage-social .tile-top { display: flex; align-items: center; padding: 1em 1.5em; }

.mainpage-social .tile-top a { flex: 1; position: relative; text-decoration: none; }

.mainpage-social .tile-top a:hover .arrow { transform: translateX(50%); }

.mainpage-social .tile-bottom { border: none; padding: 1em 1.75em; }

.mainpage-social .tile-bottom p { color: #ffffff; font-weight: bold; font-size: 0.9em; text-align: center; text-transform: uppercase; letter-spacing: 0.03em; margin: 0; }

.mainpage-social .social-icon { margin-right: 0.75em; width: 60px; text-align: center; }

.mainpage-social .social-header { color: #ffffff; font-weight: bold; font-size: 1.15em; margin: 0.5em 0 -0.15em; }

.mainpage-social .social-tagline { color: rgba(255, 255, 255, 0.9); margin-bottom: 0.5em; }

.mainpage-social .arrow { position: absolute; top: calc(50% - .5em); right: 0; height: 1em; width: 0.7em; background-size: 0.7em 1em; transition: 0.3s ease-out; }

.mainpage-social.mainpage-discord .tile-top { background: #7289da; }

.mainpage-social.mainpage-discord .tile-bottom { background: #697ec4; }

.tile-row { display: flex; flex-flow: row wrap; margin-bottom: 1em; }

.tile-halves { display: flex; flex-flow: row wrap; border: 1px solid #e4eaee; background: #ffffff; box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1); }

.tile-halves h2 { font-size: 1.4em; font-weight: bold; border: none; margin: 0 0 0.4em; }

.tile-halves .byline + h2 { margin-top: -0.5em; }

.tile-top { width: 100%; padding: 1.3rem 1.5rem 0.6rem; }

.tile-top.tile-image { display: flex; align-items: center; background-color: #949eaa; overflow: hidden; padding: 0; height: 13vw; max-height: 12em; }

.tile-top.tile-image a { width: 100%; }

.tile-top.tile-image img { width: 100%; height: auto; transition: 0.4s ease-out; }

.tile-bottom { background: #ffffff; border-top: 1px solid #e4eaee; width: 100%; padding: 1rem 1.5rem 0.6rem; }

.tile-bottom.link-button { align-self: flex-end; padding: 0; }

.tile-bottom.link-button a { display: block; text-align: center; padding: 0.75em 1.5em 0.8em; text-decoration: none; }

.tile-bottom.read-more { background: #f9fafa; transition: 0.3s ease-out; }

.tile-bottom.read-more a { color: #949eaa; font-weight: bold; text-align: right; }

.tile-bottom.read-more:hover { background: #f2f4f4; }

.tile-bottom.read-more:hover .arrow { transform: translateX(50%); }

.tile-bottom.read-more .arrow { filter: invert(43%) sepia(50%) hue-rotate(175deg); margin-left: 0.4em; transition: 0.3s ease-out; }

.documentation { background: #ffffff; border: 1px solid #e4eaee; box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1); }

.documentation pre, .documentation code { background-color: #f9fafa; }

.documentation-header { color: #ffffff; background: #949eaa; font-weight: bold; padding: 1em 1.5em; }

.documentation-title { font-size: 1.25em; }

.documentation-subheader { color: #ffffff; background: #808c9a; padding: 0.5em 1.5em; }

.documentation-subheader a, .documentation-subheader .documentation-links a, .documentation-subheader a:visited, .documentation-subheader .documentation-links a:visited, .documentation-subheader a:active, .documentation-subheader .documentation-links a:active { color: #e4eaee; }

.documentation-documentation, .documentation-links { font-size: 0.85em; }

.documentation-content { padding: 1em 1.5em; }

table.wikitable { color: inherit; background: #ffffff; font-size: 0.9em; box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1); border: none; }

table.wikitable > * > tr > th { background-color: #eeeeee; border-color: #dcdcdc; line-height: 1.65em; padding: 0.4em; }

table.wikitable > * > tr > td { border-color: #e6e6e6; padding: 0.25em 0.45em; }

table.wikitable .header-top { background: #448fba; }

table.align-left-1 td:nth-of-type(1), table.align-left-2 td:nth-of-type(2), table.align-left-3 td:nth-of-type(3), table.align-left-4 td:nth-of-type(4), table.align-left-5 td:nth-of-type(5), table.align-left-6 td:nth-of-type(6), table.align-left-7 td:nth-of-type(7), table.align-left-8 td:nth-of-type(8), table.align-left-9 td:nth-of-type(9), table.align-left-10 td:nth-of-type(10), table.align-left-11 td:nth-of-type(11), table.align-left-12 td:nth-of-type(12), table.align-left-13 td:nth-of-type(13) { text-align: left; }

table.align-right-1 td:nth-of-type(1), table.align-right-2 td:nth-of-type(2), table.align-right-3 td:nth-of-type(3), table.align-right-4 td:nth-of-type(4), table.align-right-5 td:nth-of-type(5), table.align-right-6 td:nth-of-type(6), table.align-right-7 td:nth-of-type(7), table.align-right-8 td:nth-of-type(8), table.align-right-9 td:nth-of-type(9), table.align-right-10 td:nth-of-type(10), table.align-right-11 td:nth-of-type(11), table.align-right-12 td:nth-of-type(12), table.align-right-13 td:nth-of-type(13) { text-align: right; }

table.align-center-1 td:nth-of-type(1), table.align-center-2 td:nth-of-type(2), table.align-center-3 td:nth-of-type(3), table.align-center-4 td:nth-of-type(4), table.align-center-5 td:nth-of-type(5), table.align-center-6 td:nth-of-type(6), table.align-center-7 td:nth-of-type(7), table.align-center-8 td:nth-of-type(8), table.align-center-9 td:nth-of-type(9), table.align-center-10 td:nth-of-type(10), table.align-center-11 td:nth-of-type(11), table.align-center-12 td:nth-of-type(12), table.align-center-13 td:nth-of-type(13) { text-align: center; }

table.alternating-rows tr:nth-child(odd), table.alternating-cols td:nth-child(odd) { background: #f9f9f9; }

.table-bg-red, .table-bg-veryrare { background: #fbc0ba; color: #801c13; }

.table-bg-red a:not(.mw-selflink), .table-bg-veryrare a:not(.mw-selflink) { color: #9f261e; text-decoration: underline; }

.table-bg-orange, .table-bg-rare { background: #fbcfa6; color: #7a3f08; }

.table-bg-orange a:not(.mw-selflink), .table-bg-rare a:not(.mw-selflink) { color: #b55e0c; text-decoration: underline; }

.table-bg-yellow, .table-bg-uncommon { background: #fcea94; color: #786300; }

.table-bg-yellow a:not(.mw-selflink), .table-bg-uncommon a:not(.mw-selflink) { color: #a48900; text-decoration: underline; }

.table-bg-green, .table-bg-common { background: #c3e8a3; color: #2e5e05; }

.table-bg-green a:not(.mw-selflink), .table-bg-common a:not(.mw-selflink) { color: #3c780a; text-decoration: underline; }

.table-bg-blue, .table-bg-always { background: #aad9f5; color: #03436b; }

.table-bg-blue a:not(.mw-selflink), .table-bg-always a:not(.mw-selflink) { color: #0b5884; text-decoration: underline; }

.table-bg-purple { background: #cfc0f0; color: #3d276b; }

.table-bg-purple a:not(.mw-selflink) { color: #4f348b; text-decoration: underline; }

.table-bg-pink, .table-bg-random { background: #f5c8ec; color: #6d3662; }

.table-bg-pink a:not(.mw-selflink), .table-bg-random a:not(.mw-selflink) { color: #984c89; text-decoration: underline; }

.table-bg-gray, .table-bg-grey, .table-bg-default { background: #e4eaee; color: #444e5a; }

.table-bg-gray a:not(.mw-selflink), .table-bg-grey a:not(.mw-selflink), .table-bg-default a:not(.mw-selflink) { color: #5d6773; text-decoration: underline; }

tr.store-hist { opacity: 0.6; background: #e4eaee; color: #444e5a; }

tr.store-hist a:not(.mw-selflink) { color: #5d6773; text-decoration: underline; }

.table-na { background: #f9f9f9; color: #aaa; text-align: center !important; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

table.lighttable .highlight-over .table-na { color: rgba(60, 120, 10, 0.4); background: #e1f4d3; }

table.lighttable .highlight-on .table-na { color: rgba(60, 120, 10, 0.55); background: #b6e38f; }

.shortcut { background: #ffffff; border: 1px solid #e4eaee; margin: 0.5em 0 0.5em 1em; padding: 0.5em; text-align: center; font-size: 75%; float: right; }