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)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* ==========================================================
NPC / named-mob / merchant layout
========================================================== */
/* Stable two-column loot layout on desktop.
Grid prevents tooltip activation from rebalancing entries. */
body.skin-eqlimmersive .eql-mobpage-hero-loot > ul {
columns: initial;
column-count: initial;
column-width: initial;
display: grid;
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
column-gap: 1.5rem;
row-gap: 0.2rem;
margin: 0;
padding-left: 1.25rem;
}
/* Keep each loot entry confined to its grid cell. */
body.skin-eqlimmersive .eql-mobpage-hero-loot > ul > li {
min-width: 0;
max-width: 100%;
}
/*
* Dedicated mobile layout.
*
* max-width handles normal responsive viewports.
* max-device-width temporarily covers phones receiving the skin's
* fixed-width viewport.
*/
@media screen and ( max-width: 900px ),
screen and ( max-device-width: 900px ) {
/* Stack the three hero sections vertically. */
body.skin-eqlimmersive .eql-mobpage-hero {
display: grid !important;
grid-template-columns: minmax( 0, 1fr ) !important;
grid-template-rows: auto auto auto !important;
grid-template-areas:
"media"
"stats"
"loot" !important;
grid-auto-columns: minmax( 0, 1fr ) !important;
grid-auto-rows: auto !important;
width: 100% !important;
max-width: 100% !important;
gap: 1rem !important;
}
/* Image/media section. */
body.skin-eqlimmersive .eql-mobpage-media {
grid-area: media !important;
min-width: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
/* Stat block. */
body.skin-eqlimmersive .eql-mobpage-stats {
grid-area: stats !important;
min-width: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
/* Known/unique loot section. */
body.skin-eqlimmersive .eql-mobpage-hero-loot {
grid-area: loot !important;
min-width: 0 !important;
width: 100% !important;
max-width: 100% !important;
overflow-x: auto;
}
/* Prevent any hero child from creating an oversized grid track. */
body.skin-eqlimmersive .eql-mobpage-hero > * {
box-sizing: border-box;
min-width: 0 !important;
max-width: 100% !important;
}
/* Keep NPC images within the mobile viewport. */
body.skin-eqlimmersive .eql-mobpage-media img,
body.skin-eqlimmersive .eql-mobpage-image img,
body.skin-eqlimmersive .eql-mobpage-secondary-image img {
display: block;
width: auto !important;
height: auto !important;
max-width: 100% !important;
margin-left: auto;
margin-right: auto;
}
/* Collapse the loot list from two columns to one. */
body.skin-eqlimmersive .eql-mobpage-hero-loot > ul {
grid-template-columns: minmax( 0, 1fr );
column-gap: 0;
}
}
/* ==========================================================
Main Page mobile width correction
========================================================== */
@media screen and ( max-width: 900px ),
screen and ( max-device-width: 900px ) {
/*
* Reduce the skin's horizontal content padding on the Main Page.
*/
body.skin-eqlimmersive.page-Main_Page .mw-body {
padding-left: 0.75rem !important;
padding-right: 0.75rem !important;
}
/*
* Allow the Main Page wrapper to use the available width.
*/
body.skin-eqlimmersive.page-Main_Page .eql-home {
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box;
}
/*
* Override the inline 85% width on the Announcements panel.
*/
body.skin-eqlimmersive.page-Main_Page .eql-announcements {
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box;
}
/*
* Use one full-width card per row.
*/
body.skin-eqlimmersive.page-Main_Page .eql-immersive-card-grid {
display: grid !important;
grid-template-columns: minmax( 0, 1fr ) !important;
width: 100% !important;
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
gap: 1rem !important;
box-sizing: border-box;
}
body.skin-eqlimmersive.page-Main_Page .eql-immersive-card {
display: grid !important;
grid-template-columns:
clamp( 95px, 28%, 150px )
minmax( 0, 1fr ) !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box;
}
/*
* Prevent the artwork column from consuming excessive space.
*/
body.skin-eqlimmersive.page-Main_Page .eql-card-art {
width: 100% !important;
min-width: 0 !important;
max-width: 150px !important;
}
body.skin-eqlimmersive.page-Main_Page .eql-card-art img {
display: block;
width: 100% !important;
height: auto !important;
max-width: 100% !important;
}
/*
* Let the title and links use all remaining card width.
*/
body.skin-eqlimmersive.page-Main_Page .eql-card-copy {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
box-sizing: border-box;
}
body.skin-eqlimmersive.page-Main_Page .eql-card-link-columns {
display: grid !important;
grid-template-columns:
repeat( 2, minmax( 0, 1fr ) ) !important;
column-gap: 0.75rem !important;
width: 100% !important;
min-width: 0 !important;
}
body.skin-eqlimmersive.page-Main_Page .eql-card-link-col,
body.skin-eqlimmersive.page-Main_Page .eql-card-link {
min-width: 0 !important;
}
}
/* ==========================================================
Main Page mobile full-width diagnostic/fix
Must remain at the bottom of MediaWiki:Common.css.
========================================================== */
@media screen and ( max-width: 900px ),
screen and ( hover: none ) and ( pointer: coarse ) {
/*
* A full-viewport child cannot escape a narrow parent when these
* ancestors use overflow-x: hidden.
*/
body.skin-eqlimmersive.page-Main_Page .mw-page-container,
body.skin-eqlimmersive.page-Main_Page .mw-page-container-inner,
body.skin-eqlimmersive.page-Main_Page .mw-content-container,
body.skin-eqlimmersive.page-Main_Page .mw-body,
body.skin-eqlimmersive.page-Main_Page .vector-body,
body.skin-eqlimmersive.page-Main_Page .mw-body-content,
body.skin-eqlimmersive.page-Main_Page .mw-parser-output {
min-width: 0 !important;
max-width: none !important;
overflow-x: visible !important;
}
/*
* Reduce the ordinary article padding. The homepage supplies its
* own card padding.
*/
body.skin-eqlimmersive.page-Main_Page .mw-body {
padding-left: 0 !important;
padding-right: 0 !important;
}
/*
* Full-bleed homepage container.
*
* This centers the container on the viewport rather than allowing
* its width to remain constrained by the article content column.
*/
body.skin-eqlimmersive.page-Main_Page .eql-home {
position: relative !important;
width: calc( 100vw - 16px ) !important;
max-width: none !important;
min-width: 0 !important;
margin-left: calc( 50% - 50vw + 8px ) !important;
margin-right: calc( 50% - 50vw + 8px ) !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
body.skin-eqlimmersive.page-Main_Page .eql-announcements,
body.skin-eqlimmersive.page-Main_Page .eql-immersive-card-grid,
body.skin-eqlimmersive.page-Main_Page .eql-immersive-card {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
body.skin-eqlimmersive.page-Main_Page .eql-immersive-card-grid {
display: grid !important;
grid-template-columns: minmax( 0, 1fr ) !important;
gap: 0.85rem !important;
}
/*
* Remove the permanent full-height artwork column.
*/
body.skin-eqlimmersive.page-Main_Page .eql-immersive-card {
position: relative !important;
display: block !important;
padding: 0.85rem 0.9rem 1rem !important;
overflow: hidden !important;
text-align: left !important;
}
body.skin-eqlimmersive.page-Main_Page .eql-card-copy {
display: block !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
}
/*
* Category art occupies only the upper-right heading area.
*/
body.skin-eqlimmersive.page-Main_Page .eql-card-art {
position: absolute !important;
top: 0.65rem !important;
right: 0.75rem !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 4rem !important;
height: 4rem !important;
min-width: 0 !important;
max-width: 4rem !important;
margin: 0 !important;
padding: 0 !important;
}
body.skin-eqlimmersive.page-Main_Page .eql-card-art a,
body.skin-eqlimmersive.page-Main_Page .eql-card-art span[typeof="mw:File"] {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
height: 100% !important;
}
body.skin-eqlimmersive.page-Main_Page .eql-card-art img,
body.skin-eqlimmersive.page-Main_Page .eql-card-art .mw-file-element {
display: block !important;
width: 3.75rem !important;
height: 3.75rem !important;
max-width: 3.75rem !important;
max-height: 3.75rem !important;
object-fit: contain !important;
}
body.skin-eqlimmersive.page-Main_Page .eql-card-title {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
min-height: 3.8rem !important;
margin: 0 0 0.45rem !important;
padding: 0.3rem 4.75rem 0.35rem 0 !important;
box-sizing: border-box !important;
white-space: normal !important;
overflow-wrap: normal !important;
word-break: normal !important;
hyphens: none !important;
}
/*
* The source element has both classes:
*
* .eql-card-links.eql-card-link-columns
*
* This should be the only two-column grid inside the card.
*/
body.skin-eqlimmersive.page-Main_Page
.eql-card-links.eql-card-link-columns {
display: grid !important;
grid-template-columns:
repeat( 2, minmax( 0, 1fr ) ) !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
column-gap: 1rem !important;
row-gap: 0.12rem !important;
box-sizing: border-box !important;
}
body.skin-eqlimmersive.page-Main_Page .eql-card-link-col {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
body.skin-eqlimmersive.page-Main_Page .eql-card-link,
body.skin-eqlimmersive.page-Main_Page .eql-card-link a {
white-space: normal !important;
overflow-wrap: normal !important;
word-break: normal !important;
hyphens: none !important;
}
}
/* ==========================================================
EQL Immersive performance test
Removes expensive fixed/composited effects while retaining
the existing layout, menus, footer, and dark appearance.
========================================================== */
/* Remove the viewport-sized fixed vignette layer. */
body.skin-eqlimmersive::before {
content: none !important;
display: none !important;
}
/* Use solid headers instead of live backdrop blurring. */
body.skin-eqlimmersive .vector-header-container,
body.skin-eqlimmersive .mw-header,
body.skin-eqlimmersive .vector-sticky-header,
body.skin-eqlimmersive .vector-sticky-header-container {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
background: #080e1c !important;
}
/* Preserve the fixed footer, but remove its expensive live blur. */
body.skin-eqlimmersive .mw-footer-container {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
background: #080c12 !important;
box-shadow:
0 -2px 8px rgba( 0, 0, 0, 0.28 ) !important;
}
/* Reduce the unusually large content-panel shadow. */
body.skin-eqlimmersive .mw-body {
box-shadow:
0 6px 20px rgba( 0, 0, 0, 0.30 ) !important;
}
/* The verification notice does not need a composited shadow. */
body.skin-eqlimmersive #verificationBanner {
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
box-shadow: none !important;
}
/* =========================================================
* Ornate Page Titles
* ========================================================= */
body.skin-eqlimmersive:not(.page-Main_Page) #firstHeading {
position: relative;
display: flex !important;
align-items: center;
gap: 0.8rem;
box-sizing: border-box;
width: 100% !important;
min-width: 0;
margin: 0.15rem 0 1rem !important;
padding: 0.65rem 1.2rem 0.75rem !important;
overflow: visible;
color: #f4d77c !important;
border: 0 !important;
border-left: 4px solid var(--eql-gold, #d8b75c) !important;
background:
linear-gradient(
90deg,
rgba(216, 183, 92, 0.15) 0%,
rgba(216, 183, 92, 0.055) 44%,
transparent 88%
);
box-shadow:
inset 0 1px rgba(255, 242, 194, 0.07),
inset 0 -1px rgba(216, 183, 92, 0.18);
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(2.1rem, 3.5vw, 3.1rem) !important;
font-weight: 800 !important;
letter-spacing: 0.025em;
line-height: 1.08 !important;
text-align: left !important;
text-shadow:
0 2px 1px rgba(0, 0, 0, 0.95),
0 4px 12px rgba(0, 0, 0, 0.75),
0 0 10px rgba(216, 183, 92, 0.14);
}
/* Gold diamond before the title */
body.skin-eqlimmersive:not(.page-Main_Page) #firstHeading::before {
content: "◆";
flex: 0 0 auto;
color: var(--eql-gold, #d8b75c);
font-size: 0.48em;
line-height: 1;
text-shadow:
0 1px 1px rgba(0, 0, 0, 0.95),
0 0 9px rgba(216, 183, 92, 0.42);
}
/* Ornamental line extending after the title */
body.skin-eqlimmersive:not(.page-Main_Page) #firstHeading::after {
content: "";
flex: 1 1 auto;
min-width: 2.5rem;
height: 8px;
background:
linear-gradient(
90deg,
rgba(216, 183, 92, 0.95),
rgba(216, 183, 92, 0.42) 72%,
transparent
)
center / 100% 2px no-repeat;
clip-path: polygon(
0 38%,
82% 38%,
85% 0,
88% 38%,
94% 38%,
96% 20%,
100% 50%,
96% 80%,
94% 62%,
88% 62%,
85% 100%,
82% 62%,
0 62%
);
filter: drop-shadow(0 0 4px rgba(216, 183, 92, 0.24));
}
/* Ensure title text inherits the upgraded treatment */
body.skin-eqlimmersive:not(.page-Main_Page)
#firstHeading
.mw-page-title-main {
color: inherit !important;
font: inherit;
letter-spacing: inherit;
text-shadow: inherit;
}
/* =========================================================
* Raid View variation
* Automatically activated by Common.js
* ========================================================= */
html.eql-raid-view
body.skin-eqlimmersive:not(.page-Main_Page)
#firstHeading {
color: #ffe2dc !important;
border-left-color: #a85651 !important;
background:
linear-gradient(
90deg,
rgba(143, 71, 71, 0.3) 0%,
rgba(104, 48, 57, 0.14) 48%,
transparent 90%
);
box-shadow:
inset 0 1px rgba(255, 226, 220, 0.09),
inset 0 -1px rgba(224, 96, 80, 0.24);
letter-spacing: 0.04em;
text-shadow:
0 2px 1px rgba(0, 0, 0, 0.98),
0 4px 14px rgba(0, 0, 0, 0.82),
0 0 13px rgba(255, 122, 109, 0.25);
}
/* Sharper rose-gold raid ornament */
html.eql-raid-view
body.skin-eqlimmersive:not(.page-Main_Page)
#firstHeading::before {
content: "✦";
color: #f3c1bd;
font-size: 0.62em;
text-shadow:
0 1px 1px rgba(0, 0, 0, 0.95),
0 0 11px rgba(255, 122, 109, 0.55);
}
/* Spikier rose-gold title line in Raid View */
html.eql-raid-view
body.skin-eqlimmersive:not(.page-Main_Page)
#firstHeading::after {
height: 12px;
background:
linear-gradient(
90deg,
#e0bd9f 0%,
#a85651 55%,
rgba(120, 59, 64, 0.3) 86%,
transparent 100%
)
center / 100% 3px no-repeat;
clip-path: polygon(
0 40%,
72% 40%,
75% 0,
78% 40%,
83% 40%,
86% 12%,
89% 40%,
94% 40%,
97% 18%,
100% 50%,
97% 82%,
94% 60%,
89% 60%,
86% 88%,
83% 60%,
78% 60%,
75% 100%,
72% 60%,
0 60%
);
filter:
drop-shadow(0 0 4px rgba(224, 189, 159, 0.32))
drop-shadow(0 0 7px rgba(168, 86, 81, 0.22));
}
/* =========================================================
* Mobile adjustments
* ========================================================= */
@media (max-width: 720px) {
body.skin-eqlimmersive:not(.page-Main_Page) #firstHeading {
gap: 0.55rem;
padding: 0.55rem 0.75rem 0.65rem !important;
border-left-width: 3px !important;
font-size: clamp(1.8rem, 8vw, 2.35rem) !important;
}
body.skin-eqlimmersive:not(.page-Main_Page) #firstHeading::after {
min-width: 1.25rem;
}
}
/* =========================================================
* Make tables on the All Spells page behave exactly like they do on Class pages (autowrap fix)
* ========================================================= */
.eql-spell-lazy-section table td,
.eql-spell-lazy-section table th {
white-space: normal !important;
}
/* =========================================================
* Global hover tooltip overflow fix
*
* Desktop: tables and common content wrappers must not clip
* item/spell hover windows.
*
* Mobile: individual responsive components may opt back into
* horizontal scrolling where required.
* ========================================================= */
@media (hover: hover) and (pointer: fine) {
/*
* Tables themselves should never clip hover windows.
*/
body.skin-eqlimmersive .mw-parser-output table,
body.skin-eqlimmersive .mw-parser-output .wikitable {
overflow: visible !important;
}
/*
* Common table/content wrappers containing hover links.
*/
body.skin-eqlimmersive .mw-parser-output .eql-gear-set-table-wrap,
body.skin-eqlimmersive .mw-parser-output .eql-mobpage-hero-loot,
body.skin-eqlimmersive .mw-parser-output .eql-spell-lazy-section {
overflow: visible !important;
}
/*
* Keep hover windows above the surrounding table/content.
*/
body.skin-eqlimmersive .mw-parser-output .hbdiv .hb,
body.skin-eqlimmersive .mw-parser-output .magelohb .hb {
z-index: 100000 !important;
}
}
/* ==========================================================
Cross-document page transitions
Keep the outgoing page visible until the new page is ready.
Unsupported browsers simply ignore this.
========================================================== */
@view-transition {
navigation: auto;
}
/*
* Do not animate the old page away.
* Once the new document is ready, replace it immediately.
*/
::view-transition-old(root),
::view-transition-new(root) {
animation: none;
}
/* =========================================================
* Plane of Sky - persistent reward number
* ========================================================= */
.eql-sky-reward-wrap {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
}
.eql-sky-reward-content {
min-width: 0;
flex: 1 1 auto;
}
.eql-sky-reward-number {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
gap: 2px;
padding: 3px 5px;
border: 1px solid rgba(190, 158, 93, 0.45);
border-radius: 4px;
background: rgba(20, 16, 11, 0.55);
}
.eql-sky-reward-plus {
font-weight: bold;
color: #d5b66f;
line-height: 1;
}
.eql-sky-reward-input {
box-sizing: border-box;
width: 48px;
min-width: 48px;
padding: 2px 3px;
border: 0;
outline: 0;
background: transparent;
color: inherit;
font: inherit;
font-weight: bold;
text-align: center;
}
.eql-sky-reward-input:focus {
background: rgba(255, 255, 255, 0.06);
outline: 1px solid rgba(213, 182, 111, 0.55);
}
/* Hide the browser's number-field spinner buttons. */
.eql-sky-reward-input::-webkit-inner-spin-button,
.eql-sky-reward-input::-webkit-outer-spin-button {
margin: 0;
-webkit-appearance: none;
}
.eql-sky-reward-input {
-moz-appearance: textfield;
}
/* EQL_PLAYER_LIST_HEADER_BUTTON_PADDING_BEGIN */
#mw-content-text .eql-player-list .eql-pl-table th button {
display: inline-flex;
align-items: center;
min-height: 40px;
padding: 10px 14px !important;
border: 0 !important;
border-radius: 4px;
background: transparent !important;
box-shadow: none !important;
line-height: 1.35;
}
#mw-content-text .eql-player-list .eql-pl-table th button:hover {
background: rgba(232, 207, 140, 0.08) !important;
}
#mw-content-text .eql-player-list .eql-pl-table th button:focus-visible {
outline: 2px solid #e5cb83;
outline-offset: 2px;
}
/* EQL_PLAYER_LIST_HEADER_BUTTON_PADDING_END */