MediaWiki:Common.css: Difference between revisions

Revision as of 08:44, 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: #59306A;
  --pixelrus-magenta: #D00080;
  --pixelrus-pink: #F05BB9;
  --pixelrus-violet: #A000E0;
  --pixelrus-link: #D58AFF;
  --pixelrus-link-visited: #F17BC8;
  --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 {
  filter: invert(1) saturate(0) brightness(1.7);
}

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;
  }
}
/* End Pixelrus site theme */