Toggle search
Toggle menu
47
115
5
1.9K
Wizards and Warlords
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Vector.css: Difference between revisions

MediaWiki interface page
More actions
← Older editNewer edit →
Aurelian (talk | contribs)
Bureaucrats, Interface administrators, Administrators
1,876 edits
No edit summary
No edit summary
Line 1: Line 1:
/*
/*
  * Wizards & Warlords Vector skin overrides.
  * Wizards & Warlords Vector skin overrides.
  * Fresh base: center the wiki and align the content body with the top search.
  *
* 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 {
:root {
--wiz-page-width: 1360px;
--wiz-page-width: 1360px;
Line 18: Line 26:
--wiz-panel-background: rgba(15, 15, 15, 0.82);
--wiz-panel-background: rgba(15, 15, 15, 0.82);
--wiz-page-background: #111;
--wiz-page-background: #111;
--wiz-background-image: url("/mywiki/index.php/Special:Redirect/file/background_ruins2.jpeg");
--wiz-background-image: url("/mywiki/index.php/Special:Redirect/file/background_circle.jpeg");
--wiz-content-border: #ff942d;
--wiz-content-border: #ff942d;
--wiz-text: #d2d2d2;
--wiz-text: #d2d2d2;
Line 25: Line 33:
}
}


/* ==========================================================================
  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 {
html {
min-height: 100%;
min-height: 100%;
Line 35: Line 49:
}
}


/* ==========================================================================
  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 {
body {
position: relative;
position: relative;
Line 76: Line 97:
}
}


/* ==========================================================================
  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 {
#mw-page-base {
background: transparent;
background: transparent;
Line 106: Line 134:
}
}


/* ==========================================================================
  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 {
#right-navigation {
border-bottom: 0;
border-bottom: 0;
Line 124: Line 158:
}
}


/* ==========================================================================
  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 {
#mw-panel {
width: var(--wiz-sidebar-width);
width: var(--wiz-sidebar-width);
Line 151: Line 191:
}
}


/* ==========================================================================
  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 {
#content.mw-body {
box-sizing: border-box;
box-sizing: border-box;
Line 184: Line 231:
}
}


/* ==========================================================================
  Link Colours
  --------------------------------------------------------------------------
  Global link colour rules for content, sidebar, header, and footer.
  ========================================================================== */
a,
a,
a:visited,
a:visited,
Line 205: Line 257:
}
}


/* ==========================================================================
  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,
#left-navigation li,
#right-navigation li,
#right-navigation li,
Line 299: Line 358:
}
}


/* The watch/unwatch star has different Vector sizing, so it is normalised here. */
#ca-watch a,
#ca-watch a,
#ca-unwatch a {
#ca-unwatch a {
Line 340: Line 400:
}
}


/* Selected tabs visually open into the content area below. */
#left-navigation li.selected a,
#left-navigation li.selected a,
#right-navigation li.selected a,
#right-navigation li.selected a,
Line 364: Line 425:
}
}


/* Shared border colour for the tab row and search controls. */
#left-navigation li,
#left-navigation li,
#right-navigation li,
#right-navigation li,
Line 382: Line 444:
}
}


/* ==========================================================================
  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 {
#firstHeading.firstHeading.mw-first-heading {
box-sizing: border-box;
box-sizing: border-box;
Line 412: Line 480:
}
}


/* ==========================================================================
  Homepage Two-Column Layout
  --------------------------------------------------------------------------
  Homepage sections are arranged as:
  left block, right block, clear; then repeat for each row.
  ========================================================================== */
.wizlords-mainpage-left {
.wizlords-mainpage-left {
box-sizing: border-box;
box-sizing: border-box;
Line 432: Line 506:
}
}


/* Homepage section headings. */
.wizlords-mainpage-left > h2.center,
.wizlords-mainpage-left > h2.center,
.wizlords-mainpage-right > h2.center {
.wizlords-mainpage-right > h2.center {
Line 466: Line 541:
}
}


/* Normal text lists inside homepage blocks. */
.wizlords-mainpage-left > ul,
.wizlords-mainpage-left > ul,
.wizlords-mainpage-right > ul,
.wizlords-mainpage-right > ul,
Line 497: Line 573:
}
}


/* ==========================================================================
  Homepage Square Image Links
  --------------------------------------------------------------------------
  Used for 100x100 icon links with a fixed-height text label underneath.
  ========================================================================== */
.wizlords-imagetext {
.wizlords-imagetext {
display: inline-block;
display: inline-block;
Line 532: Line 613:
}
}


/* ==========================================================================
  Homepage Wide Image Links
  --------------------------------------------------------------------------
  Used for 200x100 banner-style image links, such as Weekly Battle Games,
  World Lore, and Events.
  ========================================================================== */
.wizlords-wideimagetext {
.wizlords-wideimagetext {
display: inline-block;
display: inline-block;
Line 577: Line 664:
}
}


/* ==========================================================================
  Useful Links List
  --------------------------------------------------------------------------
  Specific list styling for the external/useful links block.
  ========================================================================== */
.wizlords-useful-links {
.wizlords-useful-links {
margin: 8px 0 0 20px;
margin: 8px 0 0 20px;
Line 594: Line 686:
}
}


/* ==========================================================================
  Mobile Layout
  --------------------------------------------------------------------------
  On small screens, the sidebar collapses and homepage columns stack.
  ========================================================================== */
@media (max-width: 700px) {
@media (max-width: 700px) {
:root {
:root {
Retrieved from "https://wizlords.wiki/MediaWiki:Vector.css"