MediaWiki:Vector.css
MediaWiki interface page
More actions
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.
/*
* Wizards & Warlords Vector skin overrides.
*
* This file controls the Vector skin layout, dark theme, top tabs, sidebar,
* page title, footer, and the custom homepage blocks.
*/
/* ==========================================================================
Theme And Layout Variables
--------------------------------------------------------------------------
Change these first when adjusting the overall site width, sidebar width,
colours, background image, content padding, or logo size.
========================================================================== */
:root {
--wiz-page-width: 1360px;
--wiz-sidebar-width: 210px;
--wiz-sidebar-left-inset: 8px;
--wiz-sidebar-right-inset: 8px;
--wiz-logo-size: 150px;
--wiz-logo-edge-space: calc((var(--wiz-sidebar-width) - var(--wiz-sidebar-left-inset) - var(--wiz-sidebar-right-inset) - var(--wiz-logo-size)) / 2);
--wiz-sidebar-content-gap: 0px;
--wiz-page-gutter: 24px;
--wiz-content-width: calc(var(--wiz-page-width) - var(--wiz-sidebar-width) - var(--wiz-page-gutter));
--wiz-content-padding: 20px;
--wiz-content-background: #222;
--wiz-panel-solid-background: #0f0f0f;
--wiz-panel-background: rgba(15, 15, 15, 0.82);
--wiz-page-background: #111;
--wiz-background-image: url("/mywiki/index.php/Special:Redirect/file/background_circle.jpeg");
--wiz-content-border: #ff942d;
--wiz-text: #d2d2d2;
--wiz-link: #ff942d;
--wiz-heading: #e7e1d4;
}
/* ==========================================================================
Full Page Background
--------------------------------------------------------------------------
The background image is attached to the whole browser viewport. The image
keeps its aspect ratio and crops instead of stretching or skewing.
========================================================================== */
html {
min-height: 100%;
background-color: var(--wiz-page-background);
background-image: var(--wiz-background-image);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
/* ==========================================================================
Centered Wiki Shell And Panel Tint
--------------------------------------------------------------------------
The body is the centered 1360px wiki shell. The body::before layer paints
the transparent sidebar, right gutter, and header tint without stacking
multiple semi-transparent Vector wrappers on top of each other.
========================================================================== */
body {
position: relative;
z-index: 0;
width: min(100%, var(--wiz-page-width));
min-height: 100vh;
margin: 0 auto;
background: transparent;
color: var(--wiz-text);
}
body::before {
content: "";
position: fixed;
z-index: -1;
top: 0;
left: 50%;
width: min(100%, var(--wiz-page-width));
height: 79px;
transform: translateX(-50%);
pointer-events: none;
background: linear-gradient(
to right,
var(--wiz-panel-background) 0,
var(--wiz-panel-background) calc(var(--wiz-sidebar-width) + var(--wiz-sidebar-content-gap)),
var(--wiz-panel-background) calc(100% - var(--wiz-page-gutter)),
var(--wiz-panel-background) calc(100% - var(--wiz-page-gutter)),
var(--wiz-panel-background) 100%
);
}
/* ==========================================================================
Vector Wrapper Cleanup
--------------------------------------------------------------------------
Vector has several overlapping header/sidebar wrappers. These rules remove
their default backgrounds, gradients, shadows, and borders so our single
body::before tint layer is the only panel background.
========================================================================== */
#mw-page-base {
background: transparent;
}
#mw-head-base,
#mw-navigation,
#mw-head {
background: transparent;
background-image: none;
}
#mw-panel {
background: var(--wiz-panel-background);
background-image: none;
}
#mw-head {
border-bottom: 0;
background-image: none;
}
#mw-head-base {
border-bottom: 0;
box-shadow: none;
outline: 0;
opacity: 1;
}
#mw-head-base::before,
#mw-head-base::after {
content: none;
display: none;
}
/* ==========================================================================
Header Navigation Alignment
--------------------------------------------------------------------------
These align the left page tabs, right action tabs, login links, and search
box with the content area and right gutter.
========================================================================== */
#right-navigation {
border-bottom: 0;
margin-right: var(--wiz-page-gutter);
}
#left-navigation {
border-bottom: 0;
margin-left: calc(var(--wiz-sidebar-width) + var(--wiz-sidebar-content-gap));
}
#p-personal {
right: var(--wiz-page-gutter);
}
#p-search {
margin-right: 0;
}
/* ==========================================================================
Sidebar And Logo
--------------------------------------------------------------------------
The sidebar panel is 210px wide. The logo is centered inside the usable
sidebar area after accounting for the small left/right inset.
========================================================================== */
#mw-panel {
width: var(--wiz-sidebar-width);
background: transparent;
color: var(--wiz-text);
}
#p-logo {
top: 0;
left: var(--wiz-sidebar-left-inset);
width: calc(var(--wiz-sidebar-width) - var(--wiz-sidebar-left-inset) - var(--wiz-sidebar-right-inset));
height: calc(var(--wiz-logo-size) + var(--wiz-sidebar-left-inset) + var(--wiz-logo-edge-space));
margin: 0;
}
#p-logo a {
display: block;
width: 100%;
height: 100%;
background-position: center calc(var(--wiz-sidebar-left-inset) + var(--wiz-logo-edge-space));
background-size: var(--wiz-logo-size) var(--wiz-logo-size);
}
#mw-panel .portal,
#mw-panel .vector-menu-portal {
margin-right: 12px;
}
/* ==========================================================================
Content And Footer Shell
--------------------------------------------------------------------------
The content and footer share the same width and left/right alignment. The
content gets the solid dark background; the footer uses the transparent
panel tint.
========================================================================== */
#content.mw-body {
box-sizing: border-box;
width: var(--wiz-content-width);
margin-left: calc(var(--wiz-sidebar-width) + var(--wiz-sidebar-content-gap));
margin-right: var(--wiz-page-gutter);
padding: var(--wiz-content-padding);
border: 1px solid var(--wiz-content-border);
background: var(--wiz-content-background);
color: var(--wiz-text);
box-shadow:
calc(-1 * (var(--wiz-sidebar-width) + var(--wiz-sidebar-content-gap))) 0 0 0 var(--wiz-panel-background),
var(--wiz-page-gutter) 0 0 0 var(--wiz-panel-background);
}
#footer {
position: relative;
box-sizing: border-box;
width: var(--wiz-content-width);
margin-left: calc(var(--wiz-sidebar-width) + var(--wiz-sidebar-content-gap));
margin-right: var(--wiz-page-gutter);
min-height: 112px;
padding-top: 24px;
padding-bottom: 24px;
background: var(--wiz-panel-background);
color: var(--wiz-text);
box-shadow:
calc(-1 * (var(--wiz-sidebar-width) + var(--wiz-sidebar-content-gap))) 0 0 0 var(--wiz-panel-background),
var(--wiz-page-gutter) 0 0 0 var(--wiz-panel-background);
}
#footer-icons {
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
/* ==========================================================================
Link Colours
--------------------------------------------------------------------------
Global link colour rules for content, sidebar, header, and footer.
========================================================================== */
a,
a:visited,
#mw-panel a,
#mw-head a,
#footer a {
color: var(--wiz-link);
}
a:hover,
#mw-panel a:hover,
#mw-head a:hover,
#footer a:hover {
color: #ffd37a;
}
#left-navigation a,
#right-navigation a,
#p-personal a {
color: var(--wiz-link);
}
/* ==========================================================================
Top Tabs And Vector Menu Resets
--------------------------------------------------------------------------
These rules restyle the Vector page/action tabs. Inactive tabs are
transparent so they blend into the header. Selected tabs match the content
background and use a small cover strip to hide the bottom border cleanly.
========================================================================== */
#left-navigation li,
#right-navigation li,
.vectorTabs li,
.vectorMenu h3 {
background: transparent;
background-image: none;
border: 0;
}
#p-namespaces .vector-menu-content,
#p-namespaces .vector-menu-content-list {
margin-left: 0;
padding-left: 0;
}
#p-namespaces {
padding-left: 0;
}
#left-navigation li::before,
#left-navigation li::after,
#right-navigation li::before,
#right-navigation li::after,
.vectorTabs li::before,
.vectorTabs li::after,
.vectorMenu h3::before,
.vectorMenu h3::after {
background: none;
background-image: none;
border: 0;
box-shadow: none;
content: none;
}
#left-navigation li a,
#right-navigation li a,
.vectorTabs li a,
.vectorMenu h3 {
background: transparent;
background-image: none;
border: 0;
border-left: 1px solid var(--wiz-content-border);
border-bottom: 1px solid var(--wiz-content-border);
color: var(--wiz-link);
}
#left-navigation li a span,
#right-navigation li a span,
.vectorTabs li a span,
.vectorMenu h3 span {
background: transparent;
background-image: none;
}
#left-navigation .vectorTabs,
#right-navigation .vectorTabs,
#left-navigation .vector-menu-tabs,
#right-navigation .vector-menu-tabs,
#left-navigation .vector-menu-tabs-legacy,
#right-navigation .vector-menu-tabs-legacy,
#left-navigation .vectorTabs ul,
#right-navigation .vectorTabs ul,
#left-navigation .vector-menu-tabs ul,
#right-navigation .vector-menu-tabs ul,
#left-navigation .vectorTabs span,
#right-navigation .vectorTabs span,
#left-navigation .vector-menu-tabs span,
#right-navigation .vector-menu-tabs span,
#left-navigation .vectorTabs li,
#right-navigation .vectorTabs li,
#left-navigation .vector-menu-tabs li,
#right-navigation .vector-menu-tabs li,
#left-navigation .vectorTabs li a,
#right-navigation .vectorTabs li a,
#left-navigation .vector-menu-tabs li a,
#right-navigation .vector-menu-tabs li a,
#right-navigation .vectorMenu,
#right-navigation .vectorMenu h3,
#right-navigation .vectorMenu h3 span,
#right-navigation .vector-menu-heading,
#right-navigation .vector-menu-heading span,
#right-navigation .vector-menu-heading-label,
#p-cactions-label,
#p-cactions-label span {
background-image: none !important;
background: transparent;
box-shadow: none;
}
#left-navigation li:last-child a,
#right-navigation li:last-child a {
border-right: 1px solid var(--wiz-content-border);
}
/* The watch/unwatch star has different Vector sizing, so it is normalised here. */
#ca-watch a,
#ca-unwatch a {
box-sizing: border-box;
width: 32px;
height: 40px;
padding-top: 16.25px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
background-position: center center;
line-height: 18px;
}
#ca-watch,
#ca-unwatch {
height: 40px;
line-height: 18px;
}
#right-navigation li.mw-watchlink.icon {
top: auto;
margin: 0;
padding: 0;
line-height: inherit;
}
#right-navigation li.mw-watchlink.icon a {
margin: 0;
line-height: inherit;
}
#ca-watch a span,
#ca-unwatch a span {
position: absolute;
overflow: hidden;
width: 1px;
height: 1px;
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
}
/* Selected tabs visually open into the content area below. */
#left-navigation li.selected a,
#right-navigation li.selected a,
.vectorTabs li.selected a {
position: relative;
z-index: 2;
background: var(--wiz-content-background);
background-image: none;
border-bottom: 1px solid var(--wiz-content-border);
color: var(--wiz-heading);
}
#left-navigation li.selected a::after,
#right-navigation li.selected a::after,
.vectorTabs li.selected a::after {
content: "";
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 1px;
background: var(--wiz-content-background);
pointer-events: none;
}
/* Shared border colour for the tab row. */
#left-navigation li,
#right-navigation li,
#p-search,
.vectorTabs,
.vectorMenu {
border-color: var(--wiz-content-border);
}
#searchInput {
background: rgba(0, 0, 0, 0.3);
border-color: var(--wiz-race-table-border-colour, #4d4d4d);
color: var(--wiz-text);
}
#searchInput::placeholder {
color: #b9b3a8;
}
/* ==========================================================================
Page Title And Body Content
--------------------------------------------------------------------------
The first heading sits inside the content area with its own spacing. On the
main page only, "Main Page" is visually replaced with the wiki title.
========================================================================== */
#firstHeading.firstHeading.mw-first-heading {
box-sizing: border-box;
display: block !important;
height: 40px;
margin: 12px 0 8px;
padding: 0;
border-bottom: 1px solid var(--wiz-content-border);
color: var(--wiz-heading);
font-size: 32px;
font-weight: normal;
line-height: 40px;
}
body.page-Main_Page #firstHeading.firstHeading.mw-first-heading {
font-size: 0;
}
body.page-Main_Page #firstHeading.firstHeading.mw-first-heading::before {
content: "Wizards and Warlords Wiki";
font-size: 32px;
}
#bodyContent {
clear: both;
display: block;
margin: 0;
padding: 0;
border: 0;
font-size: 14px;
line-height: 1.6;
}
/* Normal article lists generated by * and # wikitext. */
#content.mw-body #bodyContent .mw-parser-output > ul,
#content.mw-body #bodyContent .mw-parser-output > ol,
#content.mw-body #bodyContent .toc-page > ul,
#content.mw-body #bodyContent .toc-page > ol {
margin: 8px 0 12px 28px;
padding-left: 20px;
text-align: left;
}
#content.mw-body #bodyContent .mw-parser-output > ul,
#content.mw-body #bodyContent .toc-page > ul {
list-style: disc outside;
}
#content.mw-body #bodyContent .mw-parser-output ul ul,
#content.mw-body #bodyContent .toc-page > ul ul {
margin: 4px 0 6px 22px;
padding-left: 18px;
list-style: disc outside;
}
#content.mw-body #bodyContent .mw-parser-output > ol,
#content.mw-body #bodyContent .toc-page > ol {
list-style: decimal outside;
}
#content.mw-body #bodyContent .mw-parser-output > ul > li,
#content.mw-body #bodyContent .mw-parser-output > ol > li,
#content.mw-body #bodyContent .toc-page > ul > li,
#content.mw-body #bodyContent .toc-page > ol > li {
display: list-item;
margin-bottom: 4px;
}
#content.mw-body #bodyContent .mw-parser-output ul ul > li,
#content.mw-body #bodyContent .toc-page > ul ul > li {
display: list-item;
margin-bottom: 3px;
list-style: disc outside;
}
#content.mw-body #bodyContent .mw-parser-output li::marker {
color: var(--wiz-text);
}
/* The generated TOC sits inside .mw-parser-output, so undo article list rules there. */
#content.mw-body #bodyContent .toc-page #toc ul,
#content.mw-body #bodyContent .toc-page .toc ul {
margin: 0;
padding: 0;
list-style: none;
}
#content.mw-body #bodyContent .toc-page #toc li,
#content.mw-body #bodyContent .toc-page .toc li {
display: block;
list-style: none;
}
#content.mw-body #bodyContent .toc-page #toc li::marker,
#content.mw-body #bodyContent .toc-page .toc li::marker {
content: "";
}
#content.mw-body #bodyContent .toc-page #toc li ul,
#content.mw-body #bodyContent .toc-page .toc li ul {
margin-left: 12px;
padding-left: 10px;
}
#content.mw-body #bodyContent .toc-page #toc li li,
#content.mw-body #bodyContent .toc-page .toc li li {
margin-left: 0;
padding: 2px 0;
}
#content.mw-body #bodyContent .toc-page #toc .toclevel-3,
#content.mw-body #bodyContent .toc-page #toc .toclevel-4,
#content.mw-body #bodyContent .toc-page #toc .toclevel-5,
#content.mw-body #bodyContent .toc-page #toc .toclevel-6,
#content.mw-body #bodyContent .toc-page .toc .toclevel-3,
#content.mw-body #bodyContent .toc-page .toc .toclevel-4,
#content.mw-body #bodyContent .toc-page .toc .toclevel-5,
#content.mw-body #bodyContent .toc-page .toc .toclevel-6 {
display: none !important;
}
/* Article section headings generated by == through ====== wikitext. */
#content.mw-body #bodyContent .mw-heading {
box-sizing: border-box;
margin: 20px 0 10px;
padding: 0;
border-bottom: 0;
color: var(--wiz-heading);
text-align: left;
text-decoration: none;
}
#content.mw-body #bodyContent .mw-heading2 {
height: 30px;
margin-top: 21px;
margin-bottom: 5px;
border-bottom: 1px solid var(--wiz-content-border);
}
#content.mw-body #bodyContent .mw-heading3 {
height: 28px;
margin-top: 5px;
margin-bottom: 10px;
padding-top: 8px;
}
#content.mw-body #bodyContent .mw-heading4 {
height: 23px;
margin-top: 4px;
margin-bottom: 10px;
padding-top: 7px;
}
#content.mw-body #bodyContent .mw-heading h2,
#content.mw-body #bodyContent .mw-heading h3,
#content.mw-body #bodyContent .mw-heading h4,
#content.mw-body #bodyContent .mw-heading h5,
#content.mw-body #bodyContent .mw-heading h6 {
margin: 0;
padding: 0;
border-bottom: 0;
color: var(--wiz-heading);
text-align: left;
text-decoration: none;
}
#content.mw-body #bodyContent .mw-heading h2 {
font-weight: normal;
}
#content.mw-body #bodyContent .mw-heading h3,
#content.mw-body #bodyContent .mw-heading h4,
#content.mw-body #bodyContent .mw-heading h5,
#content.mw-body #bodyContent .mw-heading h6 {
font-weight: bold;
}
#content.mw-body #bodyContent > h2:not(.center),
#content.mw-body #bodyContent .toc-page > h2:not(.center) {
box-sizing: border-box;
height: 30px;
margin: 21px 0 5px;
padding: 0;
border-bottom: 1px solid var(--wiz-content-border);
color: var(--wiz-heading);
font-weight: normal;
text-align: left;
text-decoration: none;
}
#content.mw-body #bodyContent > h3:not(.center),
#content.mw-body #bodyContent > h4:not(.center),
#content.mw-body #bodyContent > h5:not(.center),
#content.mw-body #bodyContent > h6:not(.center),
#content.mw-body #bodyContent .toc-page > h3:not(.center),
#content.mw-body #bodyContent .toc-page > h4:not(.center),
#content.mw-body #bodyContent .toc-page > h5:not(.center),
#content.mw-body #bodyContent .toc-page > h6:not(.center) {
box-sizing: border-box;
margin: 20px 0 10px;
padding: 0;
border-bottom: 0;
color: var(--wiz-heading);
font-weight: bold;
text-align: left;
text-decoration: none;
}
#content.mw-body #bodyContent > h3:not(.center),
#content.mw-body #bodyContent .toc-page > h3:not(.center) {
height: 28px;
margin-top: 5px;
padding-top: 8px;
}
#content.mw-body #bodyContent > h4:not(.center),
#content.mw-body #bodyContent .toc-page > h4:not(.center) {
height: 23px;
margin-top: 4px;
padding-top: 7px;
}
#content.mw-body #bodyContent .mw-heading h2,
#content.mw-body #bodyContent > h2:not(.center),
#content.mw-body #bodyContent .toc-page > h2:not(.center) {
font-size: 24px;
line-height: 30px;
}
#content.mw-body #bodyContent .mw-heading h3,
#content.mw-body #bodyContent > h3:not(.center),
#content.mw-body #bodyContent .toc-page > h3:not(.center) {
font-size: 18px;
line-height: 24px;
}
#content.mw-body #bodyContent .mw-heading h4,
#content.mw-body #bodyContent > h4:not(.center),
#content.mw-body #bodyContent .toc-page > h4:not(.center) {
font-size: 14px;
line-height: 1.6;
}
#content.mw-body #bodyContent .mw-heading h5,
#content.mw-body #bodyContent .mw-heading h6,
#content.mw-body #bodyContent > h5:not(.center),
#content.mw-body #bodyContent > h6:not(.center),
#content.mw-body #bodyContent .toc-page > h5:not(.center),
#content.mw-body #bodyContent .toc-page > h6:not(.center) {
font-size: 15px;
line-height: 21px;
}
#content.mw-body #bodyContent .mw-heading .mw-headline,
#content.mw-body #bodyContent > h2:not(.center) .mw-headline,
#content.mw-body #bodyContent > h3:not(.center) .mw-headline,
#content.mw-body #bodyContent > h4:not(.center) .mw-headline,
#content.mw-body #bodyContent > h5:not(.center) .mw-headline,
#content.mw-body #bodyContent > h6:not(.center) .mw-headline,
#content.mw-body #bodyContent .toc-page > h2:not(.center) .mw-headline,
#content.mw-body #bodyContent .toc-page > h3:not(.center) .mw-headline,
#content.mw-body #bodyContent .toc-page > h4:not(.center) .mw-headline,
#content.mw-body #bodyContent .toc-page > h5:not(.center) .mw-headline,
#content.mw-body #bodyContent .toc-page > h6:not(.center) .mw-headline,
#content.mw-body #bodyContent .mw-heading a,
#content.mw-body #bodyContent > h2:not(.center) a,
#content.mw-body #bodyContent > h3:not(.center) a,
#content.mw-body #bodyContent > h4:not(.center) a,
#content.mw-body #bodyContent > h5:not(.center) a,
#content.mw-body #bodyContent > h6:not(.center) a,
#content.mw-body #bodyContent .toc-page > h2:not(.center) a,
#content.mw-body #bodyContent .toc-page > h3:not(.center) a,
#content.mw-body #bodyContent .toc-page > h4:not(.center) a,
#content.mw-body #bodyContent .toc-page > h5:not(.center) a,
#content.mw-body #bodyContent .toc-page > h6:not(.center) a {
border-bottom: 0;
color: var(--wiz-heading);
text-decoration: none;
}
#content.mw-body #bodyContent .mw-heading .mw-editsection {
color: var(--wiz-link);
font-size: 12px;
line-height: 1;
text-decoration: none;
}
#content.mw-body #bodyContent .mw-heading .mw-editsection a {
color: var(--wiz-link);
text-decoration: none;
}
/* ==========================================================================
Homepage Two-Column Layout
--------------------------------------------------------------------------
Homepage sections are arranged as:
left block, right block, clear; then repeat for each row.
========================================================================== */
.wizlords-mainpage-left {
box-sizing: border-box;
float: left;
width: calc(50% - 7.5px);
padding-left: 15px;
padding-right: 15px;
}
.wizlords-mainpage-right {
box-sizing: border-box;
float: right;
width: calc(50% - 7.5px);
padding-left: 15px;
padding-right: 15px;
}
.wizlords-mainpage-clear {
clear: both;
}
/* Homepage section headings. */
.wizlords-mainpage-left > h2.center,
.wizlords-mainpage-right > h2.center {
margin: 20px 0 10px;
padding: 0;
border-bottom: 1px solid var(--wiz-content-border);
color: var(--wiz-heading);
font-size: 24px;
font-weight: normal;
line-height: 30px;
text-align: center;
}
.wizlords-mainpage-left > h2.center .mw-headline,
.wizlords-mainpage-right > h2.center .mw-headline {
text-decoration: none;
}
.wizlords-mainpage-left > h2.center a,
.wizlords-mainpage-right > h2.center a {
border-bottom: 0;
text-decoration: none;
}
.wizlords-mainpage-left > .center,
.wizlords-mainpage-right > .center,
.wizlords-mainpage-items {
text-align: center;
}
.wizlords-mainpage-left > .center > p,
.wizlords-mainpage-right > .center > p {
margin: 0 0 10px;
}
/* Normal text lists inside homepage blocks. */
.wizlords-mainpage-left > ul,
.wizlords-mainpage-right > ul,
.wizlords-mainpage-left > .center > ul,
.wizlords-mainpage-right > .center > ul {
margin: 8px 0 0 20px;
padding-left: 20px;
list-style: disc inside;
text-align: left;
}
.wizlords-mainpage-left > ol,
.wizlords-mainpage-right > ol,
.wizlords-mainpage-left > .center > ol,
.wizlords-mainpage-right > .center > ol {
margin: 8px 0 0 20px;
padding-left: 20px;
list-style: decimal inside;
text-align: left;
}
.wizlords-mainpage-left li,
.wizlords-mainpage-right li {
display: list-item;
margin-bottom: 6px;
}
.wizlords-mainpage-left li::marker,
.wizlords-mainpage-right li::marker {
color: var(--wiz-text);
}
/* ==========================================================================
Homepage Square Image Links
--------------------------------------------------------------------------
Used for 100x100 icon links with a fixed-height text label underneath.
========================================================================== */
.wizlords-imagetext {
display: inline-block;
box-sizing: border-box;
width: 100px;
min-height: 122px;
margin: 5px;
vertical-align: top;
text-align: center;
}
.wizlords-imagetext-image {
width: 100px;
height: 100px;
}
.wizlords-imagetext-image img {
display: block;
width: 100px;
height: 100px;
object-fit: contain;
border: 0;
background: transparent;
}
.wizlords-imagetext-text {
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 40px;
font-size: 14px;
line-height: 1.3;
text-align: center;
}
/* ==========================================================================
Homepage Wide Image Links
--------------------------------------------------------------------------
Used for 200x100 banner-style image links, such as Weekly Battle Games,
World Lore, and Events.
========================================================================== */
.wizlords-wideimagetext {
display: inline-block;
box-sizing: border-box;
width: 200px;
margin: 10px 12px;
vertical-align: top;
text-align: center;
}
.wizlords-wideimagetext-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px 24px;
}
.wizlords-wideimagetext-grid .wizlords-wideimagetext {
margin: 0;
}
.wizlords-wideimagetext-image {
width: 200px;
height: 100px;
}
.wizlords-wideimagetext-image img {
display: block;
width: 200px;
height: 100px;
object-fit: cover;
border: 0;
background: transparent;
}
.wizlords-wideimagetext-text {
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 40px;
font-size: 14px;
line-height: 1.3;
text-align: center;
}
/* ==========================================================================
Useful Links List
--------------------------------------------------------------------------
Specific list styling for the external/useful links block.
========================================================================== */
.wizlords-useful-links {
margin: 8px 0 0 20px;
padding-left: 20px;
list-style: disc inside;
text-align: left;
}
.wizlords-useful-links li {
margin-bottom: 6px;
display: list-item;
list-style: disc inside;
}
.wizlords-useful-links li::marker {
color: var(--wiz-text);
}
/* ==========================================================================
Mobile Layout
--------------------------------------------------------------------------
On small screens, the sidebar collapses and homepage columns stack.
========================================================================== */
@media (max-width: 700px) {
:root {
--wiz-sidebar-width: 0px;
--wiz-sidebar-content-gap: 0px;
--wiz-content-width: 100%;
--wiz-page-gutter: 12px;
--wiz-content-padding: 14px;
}
.wizlords-mainpage-left,
.wizlords-mainpage-right {
float: none;
width: 100%;
padding-left: 0;
padding-right: 0;
}
}