MediaWiki:Common.css: Difference between revisions

From Pixelrus
Jump to navigation Jump to search
m (Fix Electric type and structure render dark styles)
m (Restore Electric type table backgrounds)
Line 615: Line 615:


/* Pixelrus compatibility fixes */
/* 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"] {
body.skin-vector .mw-parser-output [style*="background:#FFFF0A"] {
   background: #FFFF0A !important;
   background-color: #FFFF0A !important;
  background-image: none !important;
   color: #180722 !important;
   color: #180722 !important;
   text-shadow: none !important;
   text-shadow: none !important;

Revision as of 09:32, 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;
}
/* End Pixelrus compatibility fixes */

/* End Pixelrus generated-content dark overrides */
/* End Pixelrus site theme */
Retrieved from "https://wiki.pixelrus.net/index.php?title=MediaWiki:Common.css&oldid=126836"