MediaWiki:Common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
• Opera: Press Ctrl-F5.

.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-ink: #200040;
  --pixelrus-deep: #31004F;
  --pixelrus-magenta: #D00080;
  --pixelrus-violet: #A000E0;
  --pixelrus-link: #7A1CB0;
  --pixelrus-slate: #504070;
  --pixelrus-background: #F6F0F9;
  --pixelrus-border: #D8CBE4;
}

body.skin-vector-2022 {
  background: var(--pixelrus-ink);
  color: var(--pixelrus-ink);
}

.mw-page-container {
  background: var(--pixelrus-background);
  border-top: 5px solid var(--pixelrus-magenta);
}

.mw-header {
  box-sizing: border-box;
  min-height: 76px;
  padding: 10px 20px;
  background: linear-gradient(120deg, var(--pixelrus-ink), var(--pixelrus-deep) 58%, #700057);
  border-bottom: 3px solid var(--pixelrus-magenta);
  box-shadow: 0 5px 18px rgba(32, 0, 64, 0.28);
}

.mw-logo-icon {
  box-sizing: border-box;
  padding: 3px;
  background: #FFFFFF;
  border: 2px solid var(--pixelrus-magenta);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(160, 0, 224, 0.24);
}

.mw-logo-wordmark {
  color: #FFFFFF;
  font-size: 1.35rem;
  letter-spacing: 0.03em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}

#mw-sidebar-button::before,
.vector-user-menu .mw-ui-icon::before {
  filter: invert(1);
}

.mw-header .vector-user-links a {
  color: #FFFFFF;
  font-weight: 600;
}

.mw-header .vector-user-links a:hover {
  color: #F4A9D6;
}

#simpleSearch {
  overflow: hidden;
  background: #FFFFFF;
  border: 2px solid #C662E9;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.24);
}

#simpleSearch:focus-within {
  border-color: var(--pixelrus-magenta);
  box-shadow: 0 0 0 3px rgba(208, 0, 128, 0.25);
}

.mw-content-container {
  padding-top: 28px;
  padding-bottom: 32px;
}

#content {
  min-height: 52vh;
  padding: 28px 34px;
  background: #FFFFFF;
  border: 1px solid var(--pixelrus-border);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(32, 0, 64, 0.11);
}

.mw-body h1,
.mw-body h2,
.mw-body h3 {
  color: var(--pixelrus-ink);
}

.mw-body h1 {
  padding-bottom: 0.28em;
  border-bottom: 3px solid var(--pixelrus-magenta);
}

.mw-body h2 {
  border-bottom-color: var(--pixelrus-border);
}

.mw-body-content a,
.vector-page-toolbar a,
.vector-toc a {
  color: var(--pixelrus-link);
}

.mw-body-content a:visited {
  color: #681A83;
}

.mw-body-content a:hover,
.vector-page-toolbar a:hover,
.vector-toc a:hover {
  color: var(--pixelrus-magenta);
}

.vector-page-toolbar-container {
  border-bottom-color: var(--pixelrus-border);
}

.vector-toc-link.active .vector-toc-text,
.mw-list-item.selected > a {
  color: var(--pixelrus-magenta);
}

.wikitable {
  overflow: hidden;
  border-color: var(--pixelrus-border);
  border-radius: 7px;
  box-shadow: 0 3px 10px rgba(32, 0, 64, 0.08);
}

.wikitable > tr > th,
.wikitable > * > tr > th {
  background: linear-gradient(120deg, var(--pixelrus-ink), var(--pixelrus-deep));
  color: #FFFFFF;
  border-color: var(--pixelrus-slate);
}

.mw-ui-button.mw-ui-progressive,
input[type="submit"].mw-ui-progressive {
  background-color: var(--pixelrus-magenta);
  border-color: #A00068;
  color: #FFFFFF;
}

.mw-ui-button.mw-ui-progressive:hover,
input[type="submit"].mw-ui-progressive:hover {
  background-color: var(--pixelrus-violet);
  border-color: #7600A6;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--pixelrus-violet);
  box-shadow: 0 0 0 2px rgba(160, 0, 224, 0.2);
}

.mw-footer-container {
  background: linear-gradient(120deg, var(--pixelrus-ink), var(--pixelrus-deep));
  border-top: 4px solid var(--pixelrus-magenta);
}

#footer,
#footer a {
  color: #FFFFFF;
}

#footer a:hover {
  color: #F4A9D6;
}

::selection {
  background: var(--pixelrus-magenta);
  color: #FFFFFF;
}

@media (max-width: 720px) {
  .mw-header {
    min-height: 64px;
    padding: 7px 10px;
  }

  #content {
    padding: 20px 18px;
    border-radius: 10px;
  }
}
/* End Pixelrus site theme */