Jump to content

MediaWiki:Common.css: Difference between revisions

From SideQuest Wiki
Initial sourced wiki foundation for private review
 
Align the visible artwork in main-page icons.
 
(9 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* SideQuest branding through supported site CSS, without changing MediaWiki core. */
/* Keep Vector's typography, navigation, light/dark colors, and article layout. */
.mw-body-content { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.7; }
.sq-wiki-index { margin: .5em 0 1.5em; }
.sq-hero { padding: 2rem; border-radius: 12px; background: #211630; color: #f8fafc; border-top: 4px solid #a855f7; margin: 0 0 1.25rem; }
.sq-index-row { display: grid; grid-template-columns: 3.5em 10em minmax(0, 1fr); align-items: center; gap: .75em; padding: .8em .5em; border-bottom: 1px solid var(--border-color-subtle, #c8ccd1); }
.sq-eyebrow { color: #e0b8ff; letter-spacing: .12em; font-size: .75rem; font-weight: 700; }
.sq-index-row p { margin: 0; }
.sq-title { font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 750; line-height: 1.2; margin: .6rem 0 1rem; }
.sq-index-icon { text-align: center; line-height: 1; }
.sq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.sq-index-icon img, .sq-inline-icon img { image-rendering: pixelated; }
.sq-card { padding: 1.2rem 1.4rem; border: 1px solid var(--border-color-base, #a2a9b1); border-radius: 9px; border-top: 3px solid #9333ea; }
/* Main-page artwork: align visible pixels, including padded pet frames. */
.sq-card h2 { font-family: inherit; font-size: 1.15rem; margin-top: 0; }
.sq-home-icon { position: relative; width: 44px; height: 44px; justify-self: center; overflow: hidden; }
.sq-review { border-left: 4px solid #a66b00; padding: .8rem 1rem; margin: 1rem 0; background: var(--background-color-warning-subtle, #fff4cc); color: var(--color-base, #202122); font-size: .92rem; }
.sq-home-icon img { position: absolute; max-width: none; margin: 0; }
.sq-fact { border-left: 3px solid #9333ea; padding: .5rem 1rem; margin: 1rem 0; }
.sq-home-book img { width: 45.7143px; height: 45.7143px; left: -2.2857px; top: -0.8571px; }
.sq-table-scroll { overflow-x: auto; max-width: 100%; margin: 1rem 0; }
.sq-home-chest img { width: 45.7143px; height: 45.7143px; left: -0.8571px; top: -6.5714px; }
.sq-bonus-table { width: 100%; margin: 0; font-size: .94rem; }
.sq-home-dog img { width: 70.5882px; height: 70.5882px; left: -9.7647px; top: -26.8235px; }
.sq-bonus-table th, .sq-bonus-table td { padding: .65rem .75rem; vertical-align: top; }
.sq-home-warrior img { width: 46.6667px; height: 46.6667px; left: -1.3333px; top: -1.8889px; }
.sq-home-chalice img { width: 40.0000px; height: 40.0000px; left: 2.0000px; top: 2.0000px; }
.sq-home-achievements img { width: 51.4286px; height: 42.8571px; left: -3.7143px; top: -0.8571px; }
.sq-home-hammer img { width: 40.0000px; height: 40.0000px; left: 2.0000px; top: 0.7500px; }
.sq-index-title { font-weight: bold; }
.sq-review { border: 1px solid var(--border-color-subtle, #c8ccd1); background: var(--background-color-neutral-subtle, #f8f9fa); color: var(--color-subtle, #54595d); padding: .45em .75em; margin: 1em 0; font-size: .875em; }
.sq-fact { margin: 1em 0; padding: .5em .75em; border-left: 2px solid var(--border-color-base, #a2a9b1); }
.sq-table-scroll { overflow-x: auto; max-width: 100%; margin: 1em 0; }
.sq-bonus-table { width: 100%; min-width: 42em; margin: 0; }
.sq-table-hint { display: none; }
.sq-bonus-table th, .sq-bonus-table td { padding: .35em .5em; vertical-align: top; }
.sq-bonus-table td:nth-child(n+3) { white-space: nowrap; }
.sq-bonus-table td:nth-child(n+3) { white-space: nowrap; }
.sq-bonus-table caption { text-align: left; font-weight: 600; padding: .5rem 0; }
.sq-bonus-table caption { text-align: left; font-weight: bold; padding: .35em 0; }
.sq-infobox { width: 100%; max-width: 34rem; }
.sq-infobox { float: right; clear: right; width: 19em; max-width: 100%; margin: 0 0 1em 1em; font-size: .875em; }
@media (max-width: 640px) { .sq-grid { grid-template-columns: 1fr; } .sq-hero { padding: 1.3rem; } .sq-card { padding: 1rem; } }
.sq-infobox th, .sq-infobox td { padding: .4em .6em; }
.sq-infobox th { width: 38%; }
.sq-infobox caption { font-size: 1.15em; font-weight: bold; padding: .4em; }
.sq-item-infobox { width: 20em; }
.sq-item-article table.wikitable { display: table; max-width: 100%; }
.sq-item-infobox .sq-item-image { text-align: center; padding: 1em; background: var(--background-color-neutral-subtle, #f8f9fa); }
.sq-item-image img, .sq-item-link img { image-rendering: pixelated; }
.sq-item-link img { vertical-align: middle; }
.sq-item-clear { clear: both; }
.sq-gear-list, .sq-gear-nearby, .sq-chest-contents { min-width: 34em; }
.sq-examine { margin: .75em 0 1em; padding: .1em 1em; border-left: 2px solid var(--border-color-base, #a2a9b1); }
.sq-examine p { margin: .5em 0; }
.sq-item-navigation { border-top: 1px solid var(--border-color-subtle, #c8ccd1); padding-top: .75em; margin: 1.5em 0 1em; font-size: .875em; }
.sq-item-list { width: 100%; }
.sq-table-scroll > table.sq-pet-index { display: table; margin: 0; }
.sq-expedition-image { text-align: center; }
.sq-expedition-image img { max-width: 100%; height: auto; image-rendering: pixelated; }
.sq-expedition-article table.wikitable { display: table; max-width: 100%; }
.sq-expedition-discoveries { min-width: 32em; }
.sq-item-list th, .sq-item-list td { padding: .5em; vertical-align: top; }
@media (max-width: 640px) {
  .sq-table-hint { display: block; font-size: .875em; color: var(--color-subtle, #54595d); margin: .5em 0; }
  .sq-index-row { grid-template-columns: 2.75em minmax(0, 1fr); gap: .25em .6em; padding: .7em 0; }
  .sq-index-icon { grid-row: span 2; }
  .sq-index-links { grid-column: 2; }
  .sq-infobox { float: none; margin: 1em 0; width: 100%; }
  .sq-item-list { font-size: .875em; }
  .sq-item-list th, .sq-item-list td { padding: .35em; }
}

Latest revision as of 11:51, 5 November 2026

/* Keep Vector's typography, navigation, light/dark colors, and article layout. */
.sq-wiki-index { margin: .5em 0 1.5em; }
.sq-index-row { display: grid; grid-template-columns: 3.5em 10em minmax(0, 1fr); align-items: center; gap: .75em; padding: .8em .5em; border-bottom: 1px solid var(--border-color-subtle, #c8ccd1); }
.sq-index-row p { margin: 0; }
.sq-index-icon { text-align: center; line-height: 1; }
.sq-index-icon img, .sq-inline-icon img { image-rendering: pixelated; }
/* Main-page artwork: align visible pixels, including padded pet frames. */
.sq-home-icon { position: relative; width: 44px; height: 44px; justify-self: center; overflow: hidden; }
.sq-home-icon img { position: absolute; max-width: none; margin: 0; }
.sq-home-book img { width: 45.7143px; height: 45.7143px; left: -2.2857px; top: -0.8571px; }
.sq-home-chest img { width: 45.7143px; height: 45.7143px; left: -0.8571px; top: -6.5714px; }
.sq-home-dog img { width: 70.5882px; height: 70.5882px; left: -9.7647px; top: -26.8235px; }
.sq-home-warrior img { width: 46.6667px; height: 46.6667px; left: -1.3333px; top: -1.8889px; }
.sq-home-chalice img { width: 40.0000px; height: 40.0000px; left: 2.0000px; top: 2.0000px; }
.sq-home-achievements img { width: 51.4286px; height: 42.8571px; left: -3.7143px; top: -0.8571px; }
.sq-home-hammer img { width: 40.0000px; height: 40.0000px; left: 2.0000px; top: 0.7500px; }
.sq-index-title { font-weight: bold; }
.sq-review { border: 1px solid var(--border-color-subtle, #c8ccd1); background: var(--background-color-neutral-subtle, #f8f9fa); color: var(--color-subtle, #54595d); padding: .45em .75em; margin: 1em 0; font-size: .875em; }
.sq-fact { margin: 1em 0; padding: .5em .75em; border-left: 2px solid var(--border-color-base, #a2a9b1); }
.sq-table-scroll { overflow-x: auto; max-width: 100%; margin: 1em 0; }
.sq-bonus-table { width: 100%; min-width: 42em; margin: 0; }
.sq-table-hint { display: none; }
.sq-bonus-table th, .sq-bonus-table td { padding: .35em .5em; vertical-align: top; }
.sq-bonus-table td:nth-child(n+3) { white-space: nowrap; }
.sq-bonus-table caption { text-align: left; font-weight: bold; padding: .35em 0; }
.sq-infobox { float: right; clear: right; width: 19em; max-width: 100%; margin: 0 0 1em 1em; font-size: .875em; }
.sq-infobox th, .sq-infobox td { padding: .4em .6em; }
.sq-infobox th { width: 38%; }
.sq-infobox caption { font-size: 1.15em; font-weight: bold; padding: .4em; }
.sq-item-infobox { width: 20em; }
.sq-item-article table.wikitable { display: table; max-width: 100%; }
.sq-item-infobox .sq-item-image { text-align: center; padding: 1em; background: var(--background-color-neutral-subtle, #f8f9fa); }
.sq-item-image img, .sq-item-link img { image-rendering: pixelated; }
.sq-item-link img { vertical-align: middle; }
.sq-item-clear { clear: both; }
.sq-gear-list, .sq-gear-nearby, .sq-chest-contents { min-width: 34em; }
.sq-examine { margin: .75em 0 1em; padding: .1em 1em; border-left: 2px solid var(--border-color-base, #a2a9b1); }
.sq-examine p { margin: .5em 0; }
.sq-item-navigation { border-top: 1px solid var(--border-color-subtle, #c8ccd1); padding-top: .75em; margin: 1.5em 0 1em; font-size: .875em; }
.sq-item-list { width: 100%; }
.sq-table-scroll > table.sq-pet-index { display: table; margin: 0; }
.sq-expedition-image { text-align: center; }
.sq-expedition-image img { max-width: 100%; height: auto; image-rendering: pixelated; }
.sq-expedition-article table.wikitable { display: table; max-width: 100%; }
.sq-expedition-discoveries { min-width: 32em; }
.sq-item-list th, .sq-item-list td { padding: .5em; vertical-align: top; }
@media (max-width: 640px) {
  .sq-table-hint { display: block; font-size: .875em; color: var(--color-subtle, #54595d); margin: .5em 0; }
  .sq-index-row { grid-template-columns: 2.75em minmax(0, 1fr); gap: .25em .6em; padding: .7em 0; }
  .sq-index-icon { grid-row: span 2; }
  .sq-index-links { grid-column: 2; }
  .sq-infobox { float: none; margin: 1em 0; width: 100%; }
  .sq-item-list { font-size: .875em; }
  .sq-item-list th, .sq-item-list td { padding: .35em; }
}