MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
m (Restore Electric type table backgrounds) |
m (Allow Pokemon Stats to flow beside the infobox) |
||
| Line 636: | Line 636: | ||
body.skin-vector .mw-parser-output img[src*="Structure-"] { | body.skin-vector .mw-parser-output img[src*="Structure-"] { | ||
background: transparent !important; | background: transparent !important; | ||
} | |||
body.skin-vector .mw-parser-output > .px-section[style*="clear:both"] { | |||
clear: none !important; | |||
} | } | ||
/* End Pixelrus compatibility fixes */ | /* End Pixelrus compatibility fixes */ | ||
Revision as of 09:52, 3 August 2026
.hidden-small{
font-size:85%;
font-weight:400;
margin-top:2px; /* small gap under ability name */
}
.pixelated {
image-rendering: crisp-edges; /* Firefox, older browsers */
image-rendering: pixelated; /* Chrome, modern browsers */
}
.tabs-container{
width: fit-content;
}
.tabs{
width: fit-content;
}
/* ─── Pokémon infobox tabs float ───────────────────────── */
.tabs-pkmn {
float: right;
clear: both;
display: inline-block !important; /* shrink-wrap to content */
width: auto !important; /* override any 100% width */
margin: 0 0 1em 1em; /* match your infobox spacing */
}
.px-section { margin: 1.25em 0; }
.px-section-heading {
margin: 0;
padding-bottom: .25em;
border-bottom: 1px solid #a2a9b1; /* same grey as Wikipedia */
font-weight: bold;
cursor: pointer; /* makes it obvious you can tap */
}
/* Pixelrus primary logo */
.mw-logo-icon {
content: url("https://wiki.pixelrus.net/images/thumb/7/71/Pixelrus_Logo2a.png/300px-Pixelrus_Logo2a.png") !important;
width: 50px;
height: 50px;
object-fit: contain;
}
#p-logo a {
background-image: url("https://wiki.pixelrus.net/images/thumb/7/71/Pixelrus_Logo2a.png/300px-Pixelrus_Logo2a.png") !important;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
/* End Pixelrus primary logo */
/* Pixelrus site theme */
:root {
--pixelrus-black: #09000F;
--pixelrus-bg: #100018;
--pixelrus-bg-raised: #180722;
--pixelrus-surface: #210B2E;
--pixelrus-surface-alt: #2B103A;
--pixelrus-ink: #F7EFFB;
--pixelrus-muted: #CDBBD7;
--pixelrus-border: #86599A;
--pixelrus-magenta: #D00080;
--pixelrus-pink: #F05BB9;
--pixelrus-violet: #A000E0;
--pixelrus-link: #73B7FF;
--pixelrus-link-visited: #B69CFF;
--pixelrus-danger: #FF6F9F;
}
html {
background: var(--pixelrus-black);
}
body.skin-vector {
color-scheme: dark;
background:
radial-gradient(circle at 82% 4%, rgba(208, 0, 128, 0.16), transparent 34rem),
linear-gradient(145deg, var(--pixelrus-black), var(--pixelrus-bg) 55%, #190021);
color: var(--pixelrus-ink);
}
body.skin-vector-legacy #mw-page-base {
background: linear-gradient(100deg, #12001D, #260038 54%, #3A0038);
border-top: 5px solid var(--pixelrus-magenta);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.42);
}
body.skin-vector-legacy #mw-head-base {
background: transparent;
border-bottom: 1px solid rgba(240, 91, 185, 0.35);
}
body.skin-vector-legacy #content {
background: rgba(24, 7, 34, 0.98);
color: var(--pixelrus-ink);
border: 1px solid var(--pixelrus-border);
border-top: 3px solid var(--pixelrus-magenta);
border-radius: 14px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.38);
}
body.skin-vector-legacy #mw-panel {
color: var(--pixelrus-ink);
}
body.skin-vector-legacy #p-logo a {
filter: drop-shadow(0 0 8px rgba(208, 0, 128, 0.38));
}
body.skin-vector-legacy #mw-head .vector-menu-tabs,
body.skin-vector-legacy #mw-head .vector-menu-tabs ul,
body.skin-vector-legacy #mw-head .vector-menu-tabs li,
body.skin-vector-legacy #mw-head .vector-menu-tabs a {
background-color: transparent !important;
background-image: none !important;
}
body.skin-vector-legacy #mw-head .vector-menu-tabs li a {
color: var(--pixelrus-pink);
border-left: 1px solid transparent;
border-right: 1px solid transparent;
}
body.skin-vector-legacy #mw-head .vector-menu-tabs li a:hover {
background: rgba(160, 0, 224, 0.2) !important;
color: #FFFFFF;
}
body.skin-vector-legacy #mw-head .vector-menu-tabs li.selected a {
background: var(--pixelrus-bg-raised) !important;
color: #FFFFFF;
border-color: var(--pixelrus-border);
border-bottom-color: var(--pixelrus-bg-raised);
box-shadow: inset 0 3px 0 var(--pixelrus-magenta);
}
body.skin-vector-legacy #p-personal a {
color: var(--pixelrus-link);
}
body.skin-vector-legacy #p-personal a:hover {
color: var(--pixelrus-pink);
}
body.skin-vector-legacy #mw-panel .vector-menu-heading {
color: var(--pixelrus-muted);
border-bottom-color: var(--pixelrus-border);
}
body.skin-vector-legacy #mw-panel .vector-menu-content a {
color: var(--pixelrus-link);
}
body.skin-vector-legacy #mw-panel .vector-menu-content a:visited {
color: var(--pixelrus-link-visited);
}
body.skin-vector-legacy #mw-panel .vector-menu-content a:hover {
color: var(--pixelrus-pink);
text-decoration-color: var(--pixelrus-magenta);
}
body.skin-vector #simpleSearch {
overflow: hidden;
background: #14001E !important;
border: 2px solid var(--pixelrus-violet);
border-radius: 8px;
box-shadow: 0 0 0 1px rgba(240, 91, 185, 0.2), 0 4px 14px rgba(0, 0, 0, 0.45);
}
body.skin-vector #simpleSearch:focus-within {
border-color: var(--pixelrus-pink);
box-shadow: 0 0 0 3px rgba(208, 0, 128, 0.28), 0 4px 14px rgba(0, 0, 0, 0.45);
}
body.skin-vector #searchInput,
body.skin-vector .vector-search-box-input {
background: transparent !important;
color: var(--pixelrus-ink) !important;
}
body.skin-vector #searchInput::placeholder,
body.skin-vector .vector-search-box-input::placeholder {
color: var(--pixelrus-muted);
opacity: 1;
}
body.skin-vector #simpleSearch .searchButton {
background-color: transparent !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='8' cy='8' r='5.5' fill='none' stroke='%23F05BB9' stroke-width='2'/%3E%3Cpath d='M12 12l5 5' fill='none' stroke='%23F05BB9' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: 18px 18px !important;
border: 0 !important;
box-shadow: none !important;
filter: none;
}
body.skin-vector .mw-body,
body.skin-vector .mw-body-content,
body.skin-vector .mw-parser-output,
body.skin-vector .noarticletext {
color: var(--pixelrus-ink);
}
body.skin-vector .mw-body h1,
body.skin-vector .mw-body h2,
body.skin-vector .mw-body h3,
body.skin-vector .mw-body h4,
body.skin-vector .mw-body h5,
body.skin-vector .mw-body h6 {
color: var(--pixelrus-ink);
}
body.skin-vector .mw-body h1 {
padding-bottom: 0.3em;
border-bottom: 3px solid var(--pixelrus-magenta);
text-shadow: 0 0 18px rgba(160, 0, 224, 0.2);
}
body.skin-vector .mw-body h2 {
border-bottom-color: var(--pixelrus-border);
}
body.skin-vector #siteSub,
body.skin-vector #contentSub,
body.skin-vector #contentSub2,
body.skin-vector .mw-body .mw-indicators {
color: var(--pixelrus-muted);
}
body.skin-vector a,
body.skin-vector .mw-body-content a,
body.skin-vector .vector-page-toolbar a,
body.skin-vector .vector-toc a {
color: var(--pixelrus-link);
}
body.skin-vector a:visited,
body.skin-vector .mw-body-content a:visited {
color: var(--pixelrus-link-visited);
}
body.skin-vector a:hover,
body.skin-vector .mw-body-content a:hover,
body.skin-vector .vector-page-toolbar a:hover,
body.skin-vector .vector-toc a:hover {
color: var(--pixelrus-pink);
}
body.skin-vector a.new,
body.skin-vector a.new:visited {
color: var(--pixelrus-danger);
}
body.skin-vector hr,
body.skin-vector .vector-page-toolbar-container {
border-color: var(--pixelrus-border);
}
body.skin-vector .toc,
body.skin-vector .catlinks,
body.skin-vector .mw-message-box,
body.skin-vector fieldset,
body.skin-vector .thumbinner,
body.skin-vector .gallerybox .thumb {
background: var(--pixelrus-surface);
color: var(--pixelrus-ink);
border-color: var(--pixelrus-border);
}
body.skin-vector .tocnumber,
body.skin-vector .toctogglelabel,
body.skin-vector .thumbcaption,
body.skin-vector .gallerytext {
color: var(--pixelrus-muted);
}
body.skin-vector code,
body.skin-vector pre,
body.skin-vector .mw-code {
background: #12001B;
color: #F2C9FF;
border-color: var(--pixelrus-border);
}
body.skin-vector table.wikitable,
body.skin-vector table.infobox {
background: var(--pixelrus-surface);
color: var(--pixelrus-ink);
border-color: var(--pixelrus-border);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}
body.skin-vector .wikitable > tr > td,
body.skin-vector .wikitable > * > tr > td,
body.skin-vector .infobox td {
background: var(--pixelrus-surface-alt);
color: var(--pixelrus-ink);
border-color: var(--pixelrus-border);
}
body.skin-vector .wikitable > tr > th,
body.skin-vector .wikitable > * > tr > th,
body.skin-vector .infobox th {
background: linear-gradient(110deg, #300043, #670055);
color: #FFFFFF;
border-color: var(--pixelrus-border);
}
body.skin-vector input,
body.skin-vector textarea,
body.skin-vector select,
body.skin-vector .oo-ui-inputWidget-input {
background: var(--pixelrus-surface);
color: var(--pixelrus-ink);
border-color: var(--pixelrus-border);
}
body.skin-vector input:focus,
body.skin-vector textarea:focus,
body.skin-vector select:focus,
body.skin-vector .oo-ui-inputWidget-input:focus {
border-color: var(--pixelrus-pink);
box-shadow: 0 0 0 3px rgba(208, 0, 128, 0.25);
outline: none;
}
body.skin-vector button,
body.skin-vector input[type="button"],
body.skin-vector input[type="submit"]:not(.searchButton),
body.skin-vector .mw-ui-button.mw-ui-progressive {
background: linear-gradient(110deg, #A00070, var(--pixelrus-magenta));
color: #FFFFFF;
border-color: #ED4DB0;
}
body.skin-vector button:hover,
body.skin-vector input[type="button"]:hover,
body.skin-vector input[type="submit"]:not(.searchButton):hover,
body.skin-vector .mw-ui-button.mw-ui-progressive:hover {
background: linear-gradient(110deg, var(--pixelrus-magenta), var(--pixelrus-violet));
border-color: #F28ACC;
}
body.skin-vector #footer {
color: var(--pixelrus-muted);
border-top: 3px solid var(--pixelrus-magenta);
}
body.skin-vector #footer a {
color: var(--pixelrus-link);
}
body.skin-vector #footer a:hover {
color: var(--pixelrus-pink);
}
body.skin-vector-2022 .mw-page-container {
background: transparent;
border-top: 5px solid var(--pixelrus-magenta);
}
body.skin-vector-2022 .mw-header {
background: linear-gradient(120deg, #180024, #310043 58%, #66004F);
border-bottom: 3px solid var(--pixelrus-magenta);
box-shadow: 0 5px 18px rgba(0, 0, 0, 0.45);
}
body.skin-vector-2022 .mw-logo-wordmark,
body.skin-vector-2022 .mw-header .vector-user-links a {
color: #FFFFFF;
}
body.skin-vector-2022 #content {
background: var(--pixelrus-bg-raised);
color: var(--pixelrus-ink);
border: 1px solid var(--pixelrus-border);
border-top: 3px solid var(--pixelrus-magenta);
border-radius: 14px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.38);
}
body.skin-vector-2022 .mw-footer-container {
background: linear-gradient(120deg, #180024, #310043);
border-top: 4px solid var(--pixelrus-magenta);
}
body.skin-vector .mw-logo-icon {
filter: drop-shadow(0 0 4px rgba(208, 0, 128, 0.65));
}
body.skin-vector ::selection {
background: var(--pixelrus-magenta);
color: #FFFFFF;
}
@media (max-width: 720px) {
body.skin-vector #content {
padding: 20px 18px;
border-radius: 10px;
}
}
/* Pixelrus generated-content dark overrides */
body.skin-vector .tabs-label {
background: var(--pixelrus-surface-alt) !important;
color: var(--pixelrus-link) !important;
border-color: var(--pixelrus-border) !important;
box-shadow: inset 0 -2px 0 rgba(160, 0, 224, 0.35);
}
body.skin-vector .tabs > .tabs-label:first-of-type {
background: linear-gradient(110deg, #52004C, #310043) !important;
color: #FFFFFF !important;
box-shadow: inset 0 3px 0 var(--pixelrus-magenta);
}
body.skin-vector .tabs-label:hover {
background: #3A124D !important;
color: var(--pixelrus-pink) !important;
}
body.skin-vector .tabs-container,
body.skin-vector .tabs-content {
color: var(--pixelrus-ink);
}
body.skin-vector .pkmn-infobox {
background: var(--pixelrus-surface) !important;
color: var(--pixelrus-ink) !important;
}
body.skin-vector .pkmn-infobox td,
body.skin-vector .pkmn-infobox th {
color: var(--pixelrus-ink);
border-color: var(--pixelrus-border);
}
body.skin-vector .pkmn-infobox th:not([style*="background"]) {
background: var(--pixelrus-surface-alt) !important;
}
body.skin-vector .pkmn-infobox .abil-box,
body.skin-vector .pkmn-infobox .breed-box {
background: var(--pixelrus-surface-alt) !important;
color: var(--pixelrus-ink) !important;
border-color: var(--pixelrus-border) !important;
box-shadow: inset 0 0 0 1px rgba(213, 138, 255, 0.12);
}
body.skin-vector .mw-parser-output table.sortable td[style*="background:#FFFFFF"],
body.skin-vector .mw-parser-output table.sortable td[style*="background: #FFFFFF"],
body.skin-vector .mw-parser-output table.sortable td[style*="background:#FFF"],
body.skin-vector .mw-parser-output table.sortable td[style*="background: #FFF"] {
background: var(--pixelrus-surface-alt) !important;
color: var(--pixelrus-ink) !important;
border-color: var(--pixelrus-border) !important;
}
body.skin-vector .mw-parser-output table[style*="table-layout:fixed"] tr[style*="background:#FFFFFF"],
body.skin-vector .mw-parser-output table[style*="table-layout:fixed"] tr[style*="background: #FFFFFF"],
body.skin-vector .mw-parser-output table[style*="table-layout:fixed"] td[style*="background:#FFFFFF"],
body.skin-vector .mw-parser-output table[style*="table-layout:fixed"] td[style*="background: #FFFFFF"],
body.skin-vector .mw-parser-output table[style*="table-layout:fixed"] td[style*="background:#FFF"],
body.skin-vector .mw-parser-output table[style*="table-layout:fixed"] td[style*="background: #FFF"] {
background: var(--pixelrus-surface-alt) !important;
color: var(--pixelrus-ink) !important;
border-color: var(--pixelrus-border) !important;
}
body.skin-vector .mw-parser-output table.sortable {
color: var(--pixelrus-ink);
border-color: var(--pixelrus-border);
}
body.skin-vector .mw-parser-output table.sortable th {
color: #FFFFFF;
border-color: var(--pixelrus-border) !important;
}
body.skin-vector .statbox table {
background: var(--pixelrus-surface-alt) !important;
color: var(--pixelrus-ink) !important;
border-color: var(--pixelrus-border) !important;
}
body.skin-vector .statbox tr.total {
background: var(--pixelrus-surface-alt) !important;
color: var(--pixelrus-ink) !important;
}
body.skin-vector .statbox .hdr-stat,
body.skin-vector .statbox .hdr-range,
body.skin-vector .statbox .hdr-sub,
body.skin-vector .statbox tr.total td {
color: var(--pixelrus-ink) !important;
}
body.skin-vector .statbox tr.row-hp td,
body.skin-vector .statbox tr.row-atk td,
body.skin-vector .statbox tr.row-def td,
body.skin-vector .statbox tr.row-spa td,
body.skin-vector .statbox tr.row-spd td,
body.skin-vector .statbox tr.row-spe td {
color: #18001F !important;
text-shadow: none !important;
}
/* Pixelrus WCAG contrast overrides */
body.skin-vector .mw-parser-output p a:not(.image) {
text-decoration: underline;
text-decoration-thickness: .08em;
text-underline-offset: .15em;
}
body.skin-vector #footer-info li,
body.skin-vector #footer-info-lastmod {
color: var(--pixelrus-muted) !important;
}
body.skin-vector .type-badge.type-Normal,
body.skin-vector .type-badge.type-Fire,
body.skin-vector .type-badge.type-Water,
body.skin-vector .type-badge.type-Electric,
body.skin-vector .type-badge.type-Grass,
body.skin-vector .type-badge.type-Ice,
body.skin-vector .type-badge.type-Ground,
body.skin-vector .type-badge.type-Flying,
body.skin-vector .type-badge.type-Psychic,
body.skin-vector .type-badge.type-Bug,
body.skin-vector .type-badge.type-Rock,
body.skin-vector .type-badge.type-Steel,
body.skin-vector .type-badge.type-Fairy {
color: #180722 !important;
text-shadow: none !important;
}
body.skin-vector .type-badge.type-Fighting,
body.skin-vector .type-badge.type-Poison,
body.skin-vector .type-badge.type-Ghost,
body.skin-vector .type-badge.type-Dragon,
body.skin-vector .type-badge.type-Dark {
color: #FFFFFF !important;
text-shadow: 0 1px 1px #180722 !important;
}
body.skin-vector .mw-parser-output [style*="background:#F8F9FA"],
body.skin-vector .mw-parser-output [style*="background: #F8F9FA"] {
background: #2B103A !important;
color: #F7EFFB !important;
}
body.skin-vector .mw-parser-output [style*="background:#F08030"],
body.skin-vector .mw-parser-output [style*="background:#A890F0"],
body.skin-vector .mw-parser-output [style*="background:#78C850"],
body.skin-vector .mw-parser-output [style*="background:#FFA500"],
body.skin-vector .mw-parser-output [style*="background:#8C888C"],
body.skin-vector .mw-parser-output [style*="background:#878953"],
body.skin-vector .mw-parser-output [style*="background:#878927"],
body.skin-vector .mw-parser-output [style*="background:#5586C0"],
body.skin-vector .mw-parser-output [style*="background:#68A090"],
body.skin-vector .mw-parser-output [style*="background:#FC4E27"],
body.skin-vector .mw-parser-output [style*="background: #F5AC78"],
body.skin-vector .mw-parser-output [style*="background:#F5AC78"],
body.skin-vector .mw-parser-output [style*="background:#FF0000"] {
color: #180722 !important;
text-shadow: none !important;
}
body.skin-vector .mw-parser-output [style*="background:#C92112"] {
color: #FFFFFF !important;
text-shadow: 0 1px 1px #180722 !important;
}
body.skin-vector .mw-parser-output [style*="background:#F08030"] a,
body.skin-vector .mw-parser-output [style*="background:#A890F0"] a,
body.skin-vector .mw-parser-output [style*="background:#78C850"] a,
body.skin-vector .mw-parser-output [style*="background:#FFA500"] a,
body.skin-vector .mw-parser-output [style*="background:#8C888C"] a,
body.skin-vector .mw-parser-output [style*="background:#878953"] a,
body.skin-vector .mw-parser-output [style*="background:#878927"] a,
body.skin-vector .mw-parser-output [style*="background:#5586C0"] a,
body.skin-vector .mw-parser-output [style*="background:#68A090"] a,
body.skin-vector .mw-parser-output [style*="background:#FC4E27"] a,
body.skin-vector .mw-parser-output [style*="background:#FF0000"] a,
body.skin-vector .mw-parser-output [style*="background:#F08030"] span,
body.skin-vector .mw-parser-output [style*="background:#A890F0"] span,
body.skin-vector .mw-parser-output [style*="background:#78C850"] span,
body.skin-vector .mw-parser-output [style*="background:#FFA500"] span,
body.skin-vector .mw-parser-output [style*="background:#8C888C"] span,
body.skin-vector .mw-parser-output [style*="background:#878953"] span,
body.skin-vector .mw-parser-output [style*="background:#878927"] span,
body.skin-vector .mw-parser-output [style*="background:#5586C0"] span,
body.skin-vector .mw-parser-output [style*="background:#68A090"] span,
body.skin-vector .mw-parser-output [style*="background:#FC4E27"] span,
body.skin-vector .mw-parser-output [style*="background:#FF0000"] span {
color: #180722 !important;
text-shadow: none !important;
}
body.skin-vector .mw-parser-output [style*="background:#C92112"] a,
body.skin-vector .mw-parser-output [style*="background:#C92112"] span {
color: #FFFFFF !important;
}
body.skin-vector .mw-parser-output [style*="background:#009900"] {
color: #180722 !important;
text-shadow: none !important;
}
body.skin-vector .mw-parser-output td[style*="background:#FFFFFF"] > span.explain,
body.skin-vector .mw-parser-output td[style*="background: #FFFFFF"] > span.explain {
color: #F7EFFB !important;
}
/* End Pixelrus WCAG contrast overrides */
/* Pixelrus compatibility fixes */
body.skin-vector .mw-parser-output table.wikitable td.abilityentry-cell[style*="background:#FFFF0A"],
body.skin-vector .mw-parser-output [style*="background:#FFFF0A"] {
background-color: #FFFF0A !important;
background-image: none !important;
color: #180722 !important;
text-shadow: none !important;
}
body.skin-vector .mw-parser-output [style*="background:#FFFF0A"] a,
body.skin-vector .mw-parser-output [style*="background:#FFFF0A"] span {
color: #180722 !important;
text-shadow: none !important;
}
body.skin-vector .mw-parser-output figure.mw-halign-center {
background: var(--pixelrus-surface-alt) !important;
border-color: var(--pixelrus-border) !important;
}
body.skin-vector .mw-parser-output img[src*="Structure-"] {
background: transparent !important;
}
body.skin-vector .mw-parser-output > .px-section[style*="clear:both"] {
clear: none !important;
}
/* End Pixelrus compatibility fixes */
/* End Pixelrus generated-content dark overrides */
/* End Pixelrus site theme */