|
|
| Line 1: |
Line 1: |
| /* | | /* |
| * Wizards & Warlords Vector skin overrides. | | * Wizards & Warlords Citizen skin overrides. |
| * | | * |
| * This file controls the Vector desktop shell, dark theme, top tabs, sidebar, | | * Common.css owns article and template styling. This file only supplies the |
| * page title, footer, and desktop homepage layout. | | * Citizen colour palette, Citizen shell adjustments, and mobile layout fixes |
| * | | * for shared components that need a different narrow-screen presentation. |
| * Some article typography remains below as a temporary compatibility copy.
| |
| * Common.css now contains lower-specificity shared equivalents; retaining the
| |
| * existing Vector selectors keeps the desktop cascade visually unchanged.
| |
| */ | | */ |
|
| |
|
| Line 15: |
Line 12: |
| Phone: 0-599px; tablet / large phone: 600-899px; small desktop / | | Phone: 0-599px; tablet / large phone: 600-899px; small desktop / |
| landscape tablet: 900-1199px; full desktop: 1200px+. | | landscape tablet: 900-1199px; full desktop: 1200px+. |
| Vector remains the desktop skin, but its narrow-window fallback follows the | | Citizen is developed directly as the mobile/tablet skin; MobileFrontend is |
| same viewport boundaries as the rest of the project. | | not required or assumed by these rules. |
| ========================================================================== */ | | ========================================================================== */ |
|
| |
|
| /* ========================================================================== | | /* ========================================================================== |
| Theme And Layout Variables | | Citizen Theme And Shared Site Colours |
| --------------------------------------------------------------------------
| |
| 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; | | /* Wizards & Warlords content tokens used by Common.css. */ |
| --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-content-background: #222; |
| --wiz-panel-solid-background: #0f0f0f; | | --wiz-panel-solid-background: #0f0f0f; |
| --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_circle.jpeg");
| |
| --wiz-content-border: #ff942d; | | --wiz-content-border: #ff942d; |
| --wiz-text: #d2d2d2; | | --wiz-text: #d2d2d2; |
| --wiz-link: #ff942d; | | --wiz-link: #ff942d; |
| --wiz-heading: #e7e1d4; | | --wiz-heading: #e7e1d4; |
| | |
| | /* Citizen's native palette. Keep the skin aligned with the existing site. */ |
| | --color-primary__h: 28; |
| | --color-surface-0: #111; |
| | --color-surface-1: #171717; |
| | --color-surface-2: #1f1e1e; |
| | --color-surface-3: #252525; |
| | --color-surface-4: #2c2b2b; |
| | --color-progressive: #ff942d; |
| | --color-progressive--hover: #ffd37a; |
| | --color-progressive--active: #e57d1d; |
| | --color-base: #d2d2d2; |
| | --color-subtle: #b9b3a8; |
| | --color-emphasized: #e7e1d4; |
| | --color-base-oklch__l: 85%; |
| | --color-base-oklch__c: 0; |
| | --color-subtle-oklch__l: 72%; |
| | --color-subtle-oklch__c: 0; |
| | --color-emphasized-oklch__l: 93%; |
| | --color-emphasized-oklch__c: 0; |
| } | | } |
|
| |
|
| /* ========================================================================== | | /* ========================================================================== |
| Full Page Background | | Citizen Page Shell |
| --------------------------------------------------------------------------
| |
| The background image is attached to the whole browser viewport. The image
| |
| keeps its aspect ratio and crops instead of stretching or skewing.
| |
| ========================================================================== */ | | ========================================================================== */ |
| html {
| | .skin-citizen { |
| min-height: 100%;
| |
| background-color: var(--wiz-page-background); | | 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); | | color: var(--wiz-text); |
| } | | } |
|
| |
|
| body::before {
| | .skin-citizen .citizen-page-container { |
| content: "";
| | background-color: var(--wiz-page-background); |
| 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%
| |
| );
| |
| } | | } |
|
| |
|
| /* ==========================================================================
| | .skin-citizen .citizen-header { |
| Vector Wrapper Cleanup
| | background-color: var(--color-surface-1); |
| --------------------------------------------------------------------------
| | border-color: var(--wiz-content-border); |
| 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,
| | .skin-citizen .citizen-page-actions, |
| #mw-navigation,
| | .skin-citizen .citizen-toc { |
| #mw-head {
| | --color-surface-1: #171717; |
| background: transparent; | | --color-surface-2: #1f1e1e; |
| background-image: none; | |
| } | | } |
|
| |
|
| #mw-panel {
| | .skin-citizen .mw-body { |
| background: var(--wiz-panel-background); | | color: var(--wiz-text); |
| background-image: none;
| |
| } | | } |
|
| |
|
| #mw-head {
| | .skin-citizen .mw-first-heading { |
| border-bottom: 0; | | border-bottom: 1px solid var(--wiz-content-border); |
| background-image: none; | | color: var(--wiz-heading); |
| } | | } |
|
| |
|
| #mw-head-base {
| | .skin-citizen .mw-parser-output a:not(.new), |
| border-bottom: 0;
| | .skin-citizen .mw-first-heading a { |
| box-shadow: none;
| | color: var(--wiz-link); |
| outline: 0; | |
| opacity: 1;
| |
| } | | } |
|
| |
|
| #mw-head-base::before,
| | .skin-citizen .mw-parser-output a:not(.new):hover, |
| #mw-head-base::after {
| | .skin-citizen .mw-first-heading a:hover { |
| content: none; | | color: #ffd37a; |
| display: none;
| |
| } | | } |
|
| |
|
| /* ========================================================================== | | /* Citizen applies its own external-link colours after Common.css. Keep links |
| Header Navigation Alignment | | in the shared homepage navigation-list component orange and bold. */ |
| --------------------------------------------------------------------------
| | .skin-citizen .mw-parser-output .wizlords-mainpage-link-list a, |
| These align the left page tabs, right action tabs, login links, and search
| | .skin-citizen .mw-parser-output .wizlords-mainpage-link-list a:visited, |
| box with the content area and right gutter.
| | .skin-citizen .mw-parser-output .wizlords-mainpage-link-list a.external, |
| ========================================================================== */
| | .skin-citizen .mw-parser-output .wizlords-mainpage-whatislarp-list a, |
| #right-navigation {
| | .skin-citizen .mw-parser-output .wizlords-mainpage-whatislarp-list a:visited, |
| border-bottom: 0; | | .skin-citizen .mw-parser-output .wizlords-mainpage-whatislarp-list a.external { |
| margin-right: var(--wiz-page-gutter); | | color: var(--wiz-link); |
| | font-weight: normal; |
| | text-decoration: none; |
| } | | } |
|
| |
|
| #left-navigation {
| | .skin-citizen .mw-parser-output .wizlords-mainpage-link-list a:hover, |
| border-bottom: 0;
| | .skin-citizen .mw-parser-output .wizlords-mainpage-link-list a.external:hover, |
| margin-left: calc(var(--wiz-sidebar-width) + var(--wiz-sidebar-content-gap));
| | .skin-citizen .mw-parser-output .wizlords-mainpage-whatislarp-list a:hover, |
| | .skin-citizen .mw-parser-output .wizlords-mainpage-whatislarp-list a.external:hover { |
| | color: #ffd37a; |
| | text-decoration: none; |
| } | | } |
|
| |
|
| #p-personal {
| | /* Keep the footer close to the article; this site has no advertising area. */ |
| right: var(--wiz-page-gutter); | | .skin-citizen .citizen-footer { |
| | margin-top: 2rem; |
| } | | } |
|
| |
|
| #p-search {
| | .skin-citizen .citizen-footer { |
| margin-right: 0; | | color: var(--color-subtle); |
| } | | } |
|
| |
|
| /* ==========================================================================
| | .skin-citizen .citizen-footer a { |
| Sidebar And Logo
| | color: var(--wiz-link); |
| --------------------------------------------------------------------------
| |
| 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 {
| | .skin-citizen .citizen-footer a:hover { |
| top: 0;
| | color: #ffd37a; |
| 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;
| | Tables And Media |
| | ========================================================================== */ |
| | /* Citizen adds overflow wrappers around wide tables. Let them use the full |
| | article width so existing tables can scroll instead of shrinking the page. */ |
| | .skin-citizen .citizen-overflow-wrapper { |
| width: 100%; | | width: 100%; |
| height: 100%; | | max-width: 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,
| | .skin-citizen .mw-parser-output img { |
| #mw-panel .vector-menu-portal {
| | max-width: 100%; |
| margin-right: 12px; | | height: auto; |
| } | | } |
|
| |
|
| /* ========================================================================== | | /* ========================================================================== |
| Content And Footer Shell | | MobileFrontend Collapsible Article Sections |
| -------------------------------------------------------------------------- | | -------------------------------------------------------------------------- |
| The content and footer share the same width and left/right alignment. The | | MobileFormatter adds .collapsible-heading and .collapsible-block, then |
| content gets the solid dark background; the footer uses the transparent | | toggles .open-block on both elements. Keep collapsed headings visually |
| panel tint. | | quiet and row-like; restore the orange divider only for expanded sections. |
| | This is scoped to Citizen + MobileFrontend and does not affect Vector. |
| ========================================================================== */ | | ========================================================================== */ |
| #content.mw-body {
| | .skin-citizen.mw-mf .collapsible-heading { |
| box-sizing: border-box; | | box-sizing: border-box; |
| width: var(--wiz-content-width);
| | margin-top: 0; |
| margin-left: calc(var(--wiz-sidebar-width) + var(--wiz-sidebar-content-gap)); | | margin-bottom: 6px; |
| margin-right: var(--wiz-page-gutter);
| | padding-top: 12px; |
| padding: var(--wiz-content-padding);
| | padding-bottom: 12px; |
| border: 1px solid var(--wiz-content-border);
| | border-bottom: 0; |
| background: var(--wiz-content-background);
| | background-image: none; |
| 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%);
| |
| } | | } |
|
| |
|
| /* ==========================================================================
| | .skin-citizen.mw-mf .collapsible-heading.open-block { |
| Link Colours
| | margin-bottom: 0; |
| --------------------------------------------------------------------------
| | padding-bottom: 6px; |
| Global link colour rules for content, sidebar, header, and footer.
| | border-bottom: 1px solid var(--wiz-content-border, #ff942d); |
| ========================================================================== */
| |
| a,
| |
| a:visited,
| |
| #mw-panel a,
| |
| #mw-head a,
| |
| #footer a {
| |
| color: var(--wiz-link);
| |
| } | | } |
|
| |
|
| a:hover,
| | .skin-citizen.mw-mf .collapsible-block { |
| #mw-panel a:hover,
| | margin-top: 0; |
| #mw-head a:hover,
| | padding-top: 0; |
| #footer a:hover {
| |
| color: #ffd37a; | |
| } | | } |
|
| |
|
| #left-navigation a,
| | .skin-citizen.mw-mf |
| #right-navigation a,
| | .collapsible-heading.open-block |
| #p-personal a {
| | + .collapsible-block.open-block { |
| color: var(--wiz-link); | | margin-top: 12px; |
| } | | } |
|
| |
|
| /* ========================================================================== | | /* ========================================================================== |
| Top Tabs And Vector Menu Resets | | Citizen Homepage Sections |
| -------------------------------------------------------------------------- | | -------------------------------------------------------------------------- |
| These rules restyle the Vector page/action tabs. Inactive tabs are | | Citizen stacks the desktop left/right homepage blocks. Establish explicit |
| transparent so they blend into the header. Selected tabs match the content | | section spacing so heading margins cannot collapse into large blank bands, |
| background and use a small cover strip to hide the bottom border cleanly. | | centre the introductory copy, and retain the desktop orange divider. |
| ========================================================================== */ | | ========================================================================== */ |
| #left-navigation li,
| | .skin-citizen .wizlords-mainpage-left, |
| #right-navigation li,
| | .skin-citizen .wizlords-mainpage-right { |
| .vectorTabs li, | | display: flow-root; |
| .vectorMenu h3 { | |
| background: transparent; | |
| background-image: none;
| |
| border: 0;
| |
| } | | } |
|
| |
|
| #p-namespaces .vector-menu-content,
| | .skin-citizen .wizlords-mainpage-left > h2.center, |
| #p-namespaces .vector-menu-content-list {
| | .skin-citizen .wizlords-mainpage-right > h2.center, |
| margin-left: 0;
| | .skin-citizen .wizlords-mainpage-left > .mw-heading2, |
| padding-left: 0;
| | .skin-citizen .wizlords-mainpage-right > .mw-heading2 { |
| }
| |
| | |
| #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; | | box-sizing: border-box; |
| width: 32px; | | width: 100%; |
| height: 40px; | | margin: 14px 0 7px; |
| padding-top: 16.25px; | | padding: 0 0 4px; |
| padding-right: 0; | | border-bottom: 0; |
| padding-bottom: 0; | | background-image: linear-gradient( |
| padding-left: 0; | | to right, |
| background-position: center center; | | var(--wiz-content-border), |
| line-height: 18px; | | var(--wiz-content-border) |
| }
| | ); |
| | | background-repeat: no-repeat; |
| #ca-watch,
| | background-position: center bottom; |
| #ca-unwatch {
| | background-size: 65% 1px; |
| height: 40px;
| | color: var(--wiz-heading); |
| line-height: 18px; | | text-align: center; |
| } | | } |
|
| |
|
| #right-navigation li.mw-watchlink.icon {
| | .skin-citizen .wizlords-mainpage-left > .mw-heading2 h2, |
| top: auto;
| | .skin-citizen .wizlords-mainpage-right > .mw-heading2 h2 { |
| margin: 0; | | 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); | | color: var(--wiz-heading); |
| | text-align: center; |
| } | | } |
|
| |
|
| #left-navigation li.selected a::after,
| | .skin-citizen .wizlords-mainpage-left > p, |
| #right-navigation li.selected a::after,
| | .skin-citizen .wizlords-mainpage-right > p, |
| .vectorTabs li.selected a::after { | | .skin-citizen .wizlords-mainpage-left > .center > p, |
| content: ""; | | .skin-citizen .wizlords-mainpage-right > .center > p { |
| position: absolute;
| | max-width: 760px; |
| bottom: -1px;
| | margin: 6px auto 8px; |
| left: 0;
| | text-align: center; |
| width: 100%;
| |
| height: 1px; | |
| background: var(--wiz-content-background);
| |
| pointer-events: none; | |
| } | | } |
|
| |
|
| /* Shared border colour for the tab row. */ | | /* Give introductory copy a little breathing room before wide homepage cards |
| #left-navigation li,
| | without increasing spacing in the square-icon sections. */ |
| #right-navigation li,
| | .skin-citizen |
| #p-search,
| | :is(.wizlords-mainpage-left, .wizlords-mainpage-right) |
| .vectorTabs, | | > .center:has(> .wizlords-wideimagetext-grid) |
| .vectorMenu {
| | > p { |
| border-color: var(--wiz-content-border); | | margin-bottom: 16px; |
| } | | } |
|
| |
|
| #searchInput {
| | /* Separate homepage lists from the introductory paragraph above them. */ |
| background: rgba(0, 0, 0, 0.3);
| | .skin-citizen .wizlords-mainpage-left > ul, |
| border-color: var(--wiz-race-table-border-colour, #4d4d4d);
| | .skin-citizen .wizlords-mainpage-right > ul, |
| color: var(--wiz-text);
| | .skin-citizen .wizlords-mainpage-left > ol, |
| }
| | .skin-citizen .wizlords-mainpage-right > ol, |
| | | .skin-citizen .wizlords-mainpage-left > .center > ul, |
| #searchInput::placeholder {
| | .skin-citizen .wizlords-mainpage-right > .center > ul, |
| color: #b9b3a8; | | .skin-citizen .wizlords-mainpage-left > .center > ol, |
| | .skin-citizen .wizlords-mainpage-right > .center > ol { |
| | margin-top: 14px; |
| } | | } |
|
| |
|
| /* ========================================================================== | | /* ========================================================================== |
| Page Title And Body Content | | Citizen Homepage Square Icon Links |
| -------------------------------------------------------------------------- | | -------------------------------------------------------------------------- |
| The first heading sits inside the content area with its own spacing. On the | | The desktop dimensions live in Vector.css, which Citizen does not load. |
| main page only, "Main Page" is visually replaced with the wiki title. | | Define a compact four-column version here for the square homepage links. |
| | Wide image cards use separate classes and are intentionally unaffected. |
| ========================================================================== */ | | ========================================================================== */ |
| #firstHeading.firstHeading.mw-first-heading {
| | .skin-citizen .wizlords-mainpage-items, |
| box-sizing: border-box;
| | .skin-citizen .wizlords-mainpage-left > .center:has(> .wizlords-imagetext), |
| display: block !important; | | .skin-citizen .wizlords-mainpage-right > .center:has(> .wizlords-imagetext) { |
| height: 40px; | | display: flex; |
| margin: 12px 0 8px; | | flex-wrap: wrap; |
| padding: 0; | | gap: 12px 8px; |
| border-bottom: 1px solid var(--wiz-content-border); | | justify-content: center; |
| color: var(--wiz-heading); | | align-items: start; |
| font-size: 32px; | | width: 100%; |
| font-weight: normal; | | min-width: 0; |
| line-height: 40px; | | margin-right: auto; |
| | margin-left: auto; |
| | text-align: center; |
| } | | } |
|
| |
|
| body.page-Main_Page #firstHeading.firstHeading.mw-first-heading {
| | /* MediaWiki may place introductory text in the same .center wrapper as the |
| font-size: 0; | | icon links. Keep that text above the grid instead of treating it as an icon |
| | cell. */ |
| | .skin-citizen .wizlords-mainpage-left > .center:has(> .wizlords-imagetext) > p, |
| | .skin-citizen .wizlords-mainpage-right > .center:has(> .wizlords-imagetext) > p { |
| | flex: 0 0 100%; |
| | width: 100%; |
| | margin: 0 0 8px; |
| | text-align: center; |
| } | | } |
|
| |
|
| body.page-Main_Page #firstHeading.firstHeading.mw-first-heading::before {
| | /* MediaWiki sometimes wraps the first block-style icon link in a paragraph. |
| content: "Wizards and Warlords Wiki"; | | Flatten only those icon wrappers so every icon participates in the same |
| font-size: 32px;
| | homepage grid/flex row. Plain text paragraphs keep their normal layout. */ |
| | .skin-citizen |
| | :is(.wizlords-mainpage-left, .wizlords-mainpage-right) |
| | > .center |
| | > p:has(.wizlords-imagetext) { |
| | display: contents; |
| } | | } |
|
| |
|
| #bodyContent {
| | .skin-citizen .wizlords-imagetext { |
| clear: both;
| |
| display: block; | | display: block; |
| | flex: 0 0 calc((100% - 24px) / 4); |
| | box-sizing: border-box; |
| | width: calc((100% - 24px) / 4); |
| | max-width: none; |
| | min-width: 0; |
| | min-height: 0; |
| margin: 0; | | margin: 0; |
| padding: 0; | | text-align: center; |
| border: 0;
| |
| font-size: 14px;
| |
| line-height: 1.6;
| |
| } | | } |
|
| |
|
| /* Normal article lists generated by * and # wikitext. */
| | .skin-citizen .wizlords-imagetext-image { |
| #content.mw-body #bodyContent .mw-parser-output > ul,
| | width: 64px; |
| #content.mw-body #bodyContent .mw-parser-output > ol,
| | height: 64px; |
| #content.mw-body #bodyContent .toc-page > ul,
| | margin: 0 auto; |
| #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. */
| | .skin-citizen .wizlords-imagetext-image img { |
| #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; | | display: block; |
| list-style: none; | | width: 64px; |
| | height: 64px; |
| | max-width: 100%; |
| | object-fit: contain; |
| | border: 0; |
| | background: transparent; |
| } | | } |
|
| |
|
| #content.mw-body #bodyContent .toc-page #toc li::marker,
| | .skin-citizen .wizlords-imagetext-text { |
| #content.mw-body #bodyContent .toc-page .toc li::marker {
| | display: flex; |
| content: ""; | | align-items: flex-start; |
| }
| | justify-content: center; |
| | |
| #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;
| |
| }
| |
| | |
| /* ==========================================================================
| |
| Inline Article Table Of Contents
| |
| --------------------------------------------------------------------------
| |
| Articles no longer need a .toc-page wrapper because that wrapper prevents
| |
| MobileFormatter from splitting headings into mobile collapsible sections.
| |
| Style Vector's generated #toc directly so it retains the previous floated
| |
| desktop appearance and allows article content to wrap beside it.
| |
| ========================================================================== */
| |
| #content.mw-body #bodyContent #toc {
| |
| float: right;
| |
| clear: right;
| |
| box-sizing: border-box; | | box-sizing: border-box; |
| width: max-content; | | width: 100%; |
| min-width: 220px;
| |
| max-width: 320px;
| |
| margin: 0 0 16px 24px;
| |
| padding: 16px 24px;
| |
| border: 1px solid var(--wiz-content-border);
| |
| background: var(--wiz-panel-solid-background);
| |
| color: var(--wiz-text);
| |
| font-size: 0.95em;
| |
| }
| |
| | |
| #content.mw-body #bodyContent #toc:has(.toctogglecheckbox:checked) {
| |
| width: fit-content;
| |
| min-width: 0; | | min-width: 0; |
| padding: 12px 16px; | | min-height: 34px; |
| }
| | height: auto; |
| | | margin-top: 4px; |
| #content.mw-body #bodyContent #toc .toctitle {
| | color: var(--wiz-link); |
| margin: 0 0 10px; | | font-size: 12px; |
| color: var(--wiz-text); | | line-height: 1.2; |
| text-align: center; | | text-align: center; |
| | overflow-wrap: anywhere; |
| } | | } |
|
| |
|
| #content.mw-body
| | .skin-citizen .wizlords-imagetext-text a { |
| #bodyContent
| |
| #toc:has(.toctogglecheckbox:checked)
| |
| .toctitle {
| |
| margin: 0;
| |
| line-height: 1.4;
| |
| }
| |
| | |
| #content.mw-body #bodyContent #toc .toctitle h2 {
| |
| display: inline;
| |
| margin: 0;
| |
| padding: 0;
| |
| border: 0;
| |
| color: var(--wiz-text);
| |
| font-family: inherit;
| |
| font-size: 14px;
| |
| font-weight: bold;
| |
| line-height: 1.4;
| |
| }
| |
| | |
| #content.mw-body #bodyContent #toc .toctoggle {
| |
| color: var(--wiz-text);
| |
| font-size: 12px;
| |
| }
| |
| | |
| #content.mw-body #bodyContent #toc .toctoggle a {
| |
| color: var(--wiz-link); | | color: var(--wiz-link); |
| text-decoration: none; | | text-decoration: none; |
| } | | } |
|
| |
|
| #content.mw-body #bodyContent #toc ul {
| | .skin-citizen .wizlords-imagetext-text a:hover { |
| margin: 0; | | color: #ffd37a; |
| padding: 0;
| |
| list-style: none;
| |
| } | | } |
|
| |
|
| #content.mw-body #bodyContent #toc li {
| | /* MediaWiki can insert paragraph wrappers around block-style homepage cards. |
| display: block;
| | Flatten wrappers that contain a wide card so the card itself participates |
| margin: 0;
| | in the responsive flex layout. */ |
| padding: 0;
| | .skin-citizen |
| list-style: none;
| | :is(.wizlords-mainpage-left, .wizlords-mainpage-right) |
| line-height: 1.35; | | > .center |
| | > p:has(.wizlords-wideimagetext) { |
| | display: contents; |
| } | | } |
|
| |
|
| #content.mw-body #bodyContent #toc > ul > li {
| | /* Small-desktop / landscape-tablet Citizen keeps the desktop-style four-slot |
| padding: 2px 0;
| | rhythm, but uses larger icons so the wider mobile/tablet skin does not feel |
| } | | sparse before the full desktop Vector layout takes over. */ |
| | @media screen and (min-width: 900px) and (max-width: 1199px) { |
| | .skin-citizen .wizlords-mainpage-items, |
| | .skin-citizen .wizlords-mainpage-left > .center:has(> .wizlords-imagetext), |
| | .skin-citizen .wizlords-mainpage-right > .center:has(> .wizlords-imagetext) { |
| | gap: 20px 16px; |
| | } |
|
| |
|
| #content.mw-body #bodyContent #toc li ul {
| | .skin-citizen .wizlords-imagetext { |
| margin: 0 0 0 12px;
| | flex-basis: calc((100% - 48px) / 4); |
| padding: 0 0 0 10px;
| | width: calc((100% - 48px) / 4); |
| border-left: 1px dotted var(--wiz-content-border);
| | } |
| } | |
|
| |
|
| #content.mw-body #bodyContent #toc li li {
| | .skin-citizen .wizlords-imagetext-image, |
| margin: 0;
| | .skin-citizen .wizlords-imagetext-image img { |
| padding: 2px 0;
| | width: clamp(92px, 10vw, 108px); |
| border-left: 0; | | height: clamp(92px, 10vw, 108px); |
| } | | } |
|
| |
|
| #content.mw-body #bodyContent #toc li::marker {
| | .skin-citizen .wizlords-imagetext-text { |
| content: "";
| | font-size: 13px; |
| | } |
| } | | } |
|
| |
|
| #content.mw-body #bodyContent #toc .tocnumber {
| | /* Full-width Citizen fallback. Normal desktop visitors use Vector, but this |
| display: none;
| | keeps Citizen tidy if it is tested manually on a wide screen. */ |
| } | | @media screen and (min-width: 1200px) { |
| | .skin-citizen .wizlords-mainpage-items, |
| | .skin-citizen .wizlords-mainpage-left > .center:has(> .wizlords-imagetext), |
| | .skin-citizen .wizlords-mainpage-right > .center:has(> .wizlords-imagetext) { |
| | gap: 16px 12px; |
| | } |
|
| |
|
| #content.mw-body #bodyContent #toc a {
| | .skin-citizen .wizlords-imagetext { |
| color: var(--wiz-link);
| | flex-basis: calc((100% - 36px) / 4); |
| text-decoration: none;
| | width: calc((100% - 36px) / 4); |
| overflow-wrap: anywhere; | | } |
| } | |
|
| |
|
| #content.mw-body #bodyContent #toc a:hover {
| | .skin-citizen .wizlords-imagetext-image, |
| color: #ffd37a;
| | .skin-citizen .wizlords-imagetext-image img { |
| text-decoration: none;
| | width: 82px; |
| } | | height: 82px; |
| | } |
|
| |
|
| #content.mw-body #bodyContent #toc .toclevel-3,
| | .skin-citizen .wizlords-imagetext-text { |
| #content.mw-body #bodyContent #toc .toclevel-4,
| | font-size: 13px; |
| #content.mw-body #bodyContent #toc .toclevel-5,
| | } |
| #content.mw-body #bodyContent #toc .toclevel-6 {
| |
| display: none !important; | |
| } | | } |
|
| |
|
| /* Article section headings generated by == through ====== wikitext. */ | | /* Phone-only wide-card fallback. Tablet receives the four-slot treatment in |
| #content.mw-body #bodyContent .mw-heading {
| | the dedicated tablet section below. */ |
| box-sizing: border-box; | | @media screen and (max-width: 599px) { |
| margin: 20px 0 10px;
| | /* Let each phone label use its natural one- or two-line height. Reserving |
| padding: 0;
| | two lines for every label creates visible empty space in sections whose |
| border-bottom: 0;
| | first-row labels all fit on one line, such as Character Creation. */ |
| color: var(--wiz-heading); | | .skin-citizen .wizlords-imagetext-text { |
| text-align: left;
| | min-height: 0; |
| text-decoration: none; | | } |
| } | |
|
| |
|
| #content.mw-body #bodyContent .mw-heading2 {
| | /* Homepage navigation lists use a centred readable block while individual |
| height: 30px;
| | bullets remain conventionally left-aligned. */ |
| margin-top: 21px;
| | .skin-citizen .wizlords-mainpage-link-list, |
| margin-bottom: 5px;
| | .skin-citizen .wizlords-useful-links, |
| border-bottom: 1px solid var(--wiz-content-border);
| | .skin-citizen .wizlords-mainpage-whatislarp-list { |
| } | | box-sizing: border-box; |
| | width: 100%; |
| | max-width: 320px; |
| | margin-right: auto; |
| | margin-left: auto; |
| | padding-left: 24px; |
| | list-style: disc outside; |
| | text-align: left; |
| | } |
|
| |
|
| #content.mw-body #bodyContent .mw-heading3 {
| | /* Match the What is LARP list to the paragraph's phone-width text column. |
| height: 28px;
| | The padding creates a normal hanging bullet while keeping the bullet |
| margin-top: 5px;
| | edge aligned with the paragraph above. */ |
| margin-bottom: 10px;
| | .skin-citizen .wizlords-mainpage-whatislarp-list { |
| padding-top: 8px;
| | max-width: 100%; |
| } | | margin-right: 0; |
| | margin-left: 0; |
| | padding-left: 24px; |
| | } |
|
| |
|
| #content.mw-body #bodyContent .mw-heading4 {
| | .skin-citizen .wizlords-wideimagetext { |
| height: 23px;
| | max-width: 100%; |
| margin-top: 4px;
| | } |
| margin-bottom: 10px; | |
| padding-top: 7px;
| |
| } | |
|
| |
|
| #content.mw-body #bodyContent .mw-heading h2,
| | .skin-citizen .wizlords-wideimagetext-grid, |
| #content.mw-body #bodyContent .mw-heading h3,
| | .skin-citizen .wizlords-mainpage-left > .center:has(> .wizlords-wideimagetext), |
| #content.mw-body #bodyContent .mw-heading h4,
| | .skin-citizen .wizlords-mainpage-right > .center:has(> .wizlords-wideimagetext) { |
| #content.mw-body #bodyContent .mw-heading h5,
| | display: flex; |
| #content.mw-body #bodyContent .mw-heading h6 {
| | flex-wrap: wrap; |
| margin: 0;
| | justify-content: center; |
| padding: 0;
| | gap: 12px 10px; |
| border-bottom: 0;
| | width: 100%; |
| color: var(--wiz-heading);
| | } |
| text-align: left;
| |
| text-decoration: none; | |
| } | |
|
| |
|
| #content.mw-body #bodyContent .mw-heading h2 {
| | .skin-citizen .wizlords-wideimagetext-grid .wizlords-wideimagetext, |
| font-weight: normal;
| | .skin-citizen .wizlords-mainpage-left > .center .wizlords-wideimagetext, |
| } | | .skin-citizen .wizlords-mainpage-right > .center .wizlords-wideimagetext { |
| | flex: 0 0 calc((100% - 10px) / 2); |
| | box-sizing: border-box; |
| | width: calc((100% - 10px) / 2); |
| | max-width: none; |
| | margin: 0; |
| | text-align: center; |
| | } |
|
| |
|
| #content.mw-body #bodyContent .mw-heading h3,
| | .skin-citizen .wizlords-mainpage-left > .center:has(> .wizlords-wideimagetext) > p, |
| #content.mw-body #bodyContent .mw-heading h4,
| | .skin-citizen .wizlords-mainpage-right > .center:has(> .wizlords-wideimagetext) > p { |
| #content.mw-body #bodyContent .mw-heading h5,
| | flex: 0 0 100%; |
| #content.mw-body #bodyContent .mw-heading h6 {
| | width: 100%; |
| font-weight: bold;
| | margin: 0 0 6px; |
| } | | } |
|
| |
|
| #content.mw-body #bodyContent > h2:not(.center),
| | .skin-citizen .wizlords-wideimagetext-image, |
| #content.mw-body #bodyContent .toc-page > h2:not(.center) {
| | .skin-citizen .wizlords-wideimagetext-image img { |
| box-sizing: border-box;
| | display: block; |
| height: 30px;
| | width: 100%; |
| margin: 21px 0 5px;
| | height: auto; |
| padding: 0;
| | aspect-ratio: 2 / 1; |
| border-bottom: 1px solid var(--wiz-content-border);
| | object-fit: cover; |
| color: var(--wiz-heading);
| | border: 0; |
| font-weight: normal;
| | background: transparent; |
| text-align: left; | | } |
| text-decoration: none;
| |
| } | |
|
| |
|
| #content.mw-body #bodyContent > h3:not(.center),
| | .skin-citizen .wizlords-wideimagetext-text { |
| #content.mw-body #bodyContent > h4:not(.center),
| | display: flex; |
| #content.mw-body #bodyContent > h5:not(.center),
| | align-items: flex-start; |
| #content.mw-body #bodyContent > h6:not(.center),
| | justify-content: center; |
| #content.mw-body #bodyContent .toc-page > h3:not(.center),
| | width: 100%; |
| #content.mw-body #bodyContent .toc-page > h4:not(.center),
| | min-height: 34px; |
| #content.mw-body #bodyContent .toc-page > h5:not(.center),
| | height: auto; |
| #content.mw-body #bodyContent .toc-page > h6:not(.center) {
| | margin-top: 4px; |
| box-sizing: border-box;
| | font-size: 12px; |
| margin: 20px 0 10px;
| | line-height: 1.2; |
| padding: 0;
| | text-align: center; |
| border-bottom: 0;
| | overflow-wrap: anywhere; |
| 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) {
| | Citizen Tablet Homepage |
| height: 28px; | | -------------------------------------------------------------------------- |
| margin-top: 5px;
| | At 600-899px the homepage uses the available width as one broad content |
| padding-top: 8px;
| | column. The square icon groups need one component-specific split inside the |
| } | | tablet range: 600-799px keeps the stable four-column rhythm, while 800-899px |
| | has enough room for compact single-row groups. This avoids ugly orphan rows |
| | such as 5+2 or 6+1. |
| | ========================================================================== */ |
| | @media screen and (min-width: 600px) and (max-width: 899px) { |
| | .skin-citizen .wizlords-mainpage-left, |
| | .skin-citizen .wizlords-mainpage-right { |
| | max-width: 760px; |
| | margin-right: auto; |
| | margin-left: auto; |
| | } |
|
| |
|
| #content.mw-body #bodyContent > h4:not(.center),
| | /* Keep tablet landing-page copy in a readable centred column while the |
| #content.mw-body #bodyContent .toc-page > h4:not(.center) {
| | icon and card grids continue using the full 760px section width. */ |
| height: 23px;
| | .skin-citizen .wizlords-mainpage-left > p, |
| margin-top: 4px;
| | .skin-citizen .wizlords-mainpage-right > p, |
| padding-top: 7px;
| | .skin-citizen .wizlords-mainpage-left > .center > p, |
| } | | .skin-citizen .wizlords-mainpage-right > .center > p { |
| | max-width: 620px; |
| | margin-right: auto; |
| | margin-left: auto; |
| | text-align: center; |
| | } |
|
| |
|
| #content.mw-body #bodyContent .mw-heading h2,
| | .skin-citizen .wizlords-mainpage-link-list, |
| #content.mw-body #bodyContent > h2:not(.center),
| | .skin-citizen .wizlords-useful-links, |
| #content.mw-body #bodyContent .toc-page > h2:not(.center) {
| | .skin-citizen .wizlords-mainpage-whatislarp-list { |
| font-size: 24px;
| | box-sizing: border-box; |
| line-height: 30px;
| | width: 100%; |
| } | | max-width: 500px; |
| | margin-right: auto; |
| | margin-left: auto; |
| | padding-left: 32px; |
| | list-style: disc outside; |
| | text-align: left; |
| | } |
|
| |
|
| #content.mw-body #bodyContent .mw-heading h3,
| | /* Use the same 620px reading column as the What is LARP paragraph. */ |
| #content.mw-body #bodyContent > h3:not(.center),
| | .skin-citizen .wizlords-mainpage-whatislarp-list { |
| #content.mw-body #bodyContent .toc-page > h3:not(.center) {
| | max-width: 620px; |
| font-size: 18px;
| | padding-left: 24px; |
| line-height: 24px;
| | } |
| } | |
|
| |
|
| #content.mw-body #bodyContent .mw-heading h4,
| | .skin-citizen .wizlords-mainpage-left > h2.center, |
| #content.mw-body #bodyContent > h4:not(.center),
| | .skin-citizen .wizlords-mainpage-right > h2.center { |
| #content.mw-body #bodyContent .toc-page > h4:not(.center) {
| | margin-top: 14px; |
| font-size: 14px;
| | margin-bottom: 6px; |
| line-height: 1.6;
| | } |
| } | |
|
| |
|
| #content.mw-body #bodyContent .mw-heading h5,
| | .skin-citizen .wizlords-mainpage-left > p, |
| #content.mw-body #bodyContent .mw-heading h6,
| | .skin-citizen .wizlords-mainpage-right > p { |
| #content.mw-body #bodyContent > h5:not(.center),
| | margin-top: 6px; |
| #content.mw-body #bodyContent > h6:not(.center),
| | margin-bottom: 8px; |
| #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,
| | .skin-citizen .wizlords-mainpage-items, |
| #content.mw-body #bodyContent > h2:not(.center) .mw-headline,
| | .skin-citizen .wizlords-mainpage-left > .center:has(> .wizlords-imagetext), |
| #content.mw-body #bodyContent > h3:not(.center) .mw-headline,
| | .skin-citizen .wizlords-mainpage-right > .center:has(> .wizlords-imagetext) { |
| #content.mw-body #bodyContent > h4:not(.center) .mw-headline,
| | display: grid; |
| #content.mw-body #bodyContent > h5:not(.center) .mw-headline,
| | grid-template-columns: repeat(4, minmax(0, 78px)); |
| #content.mw-body #bodyContent > h6:not(.center) .mw-headline,
| | gap: 12px 16px; |
| #content.mw-body #bodyContent .toc-page > h2:not(.center) .mw-headline,
| | justify-content: center; |
| #content.mw-body #bodyContent .toc-page > h3:not(.center) .mw-headline,
| | justify-items: center; |
| #content.mw-body #bodyContent .toc-page > h4:not(.center) .mw-headline,
| | align-items: start; |
| #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 {
| | .skin-citizen .wizlords-mainpage-left > .center:has(> .wizlords-imagetext) > p, |
| color: var(--wiz-link); | | .skin-citizen .wizlords-mainpage-right > .center:has(> .wizlords-imagetext) > p { |
| font-size: 12px;
| | grid-column: 1 / -1; |
| line-height: 1;
| | width: 100%; |
| text-decoration: none;
| | margin-bottom: 4px; |
| } | | } |
|
| |
|
| #content.mw-body #bodyContent .mw-heading .mw-editsection a {
| | .skin-citizen .wizlords-imagetext { |
| color: var(--wiz-link);
| | width: 78px; |
| text-decoration: none;
| | max-width: none; |
| } | | } |
|
| |
|
| /* ==========================================================================
| | .skin-citizen .wizlords-imagetext-image, |
| Homepage Two-Column Layout
| | .skin-citizen .wizlords-imagetext-image img { |
| --------------------------------------------------------------------------
| | width: clamp(52px, 7.5vw, 64px); |
| Homepage sections are arranged as:
| | height: clamp(52px, 7.5vw, 64px); |
| 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 { | | .skin-citizen .wizlords-imagetext-text { |
| box-sizing: border-box;
| | min-height: 30px; |
| float: right;
| | margin-top: 3px; |
| width: calc(50% - 7.5px);
| | font-size: 12px; |
| padding-left: 15px;
| | line-height: 1.15; |
| padding-right: 15px; | | } |
| } | |
|
| |
|
| .wizlords-mainpage-clear { | | /* Upper tablet widths can cleanly fit seven or eight compact icons in one |
| clear: both;
| | row. Use flex here rather than auto-fit grid: auto-fit can create an |
| } | | empty eighth track for seven-item groups once there is enough width, |
| | while flex only lays out real icon items. */ |
| | @media screen and (min-width: 800px) { |
| | .skin-citizen .wizlords-mainpage-items, |
| | .skin-citizen .wizlords-mainpage-left > .center:has(> .wizlords-imagetext), |
| | .skin-citizen .wizlords-mainpage-right > .center:has(> .wizlords-imagetext) { |
| | display: flex; |
| | flex-wrap: wrap; |
| | gap: 10px 14px; |
| | justify-content: center; |
| | align-items: flex-start; |
| | } |
|
| |
|
| /* Homepage section headings. */
| | .skin-citizen .wizlords-mainpage-left > .center:has(> .wizlords-imagetext) > p, |
| .wizlords-mainpage-left > h2.center, | | .skin-citizen .wizlords-mainpage-right > .center:has(> .wizlords-imagetext) > p { |
| .wizlords-mainpage-right > h2.center { | | flex: 0 0 100%; |
| margin: 20px 0 10px;
| | width: 100%; |
| 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, | | .skin-citizen .wizlords-imagetext { |
| .wizlords-mainpage-right > h2.center .mw-headline { | | flex: 0 0 78px; |
| text-decoration: none;
| | } |
| } | | } |
|
| |
|
| .wizlords-mainpage-left > h2.center a, | | /* The homepage markup splits each four-card group into two nested |
| .wizlords-mainpage-right > h2.center a { | | two-card grids. On tablet, flatten those inner grids into their shared |
| border-bottom: 0;
| | parent so all four cards can occupy one row. Phone keeps the two grids, |
| text-decoration: none;
| | producing the intended 2x2 layout. */ |
| } | | .skin-citizen |
| | :is(.wizlords-mainpage-left, .wizlords-mainpage-right) |
| | > .center:has(> .wizlords-wideimagetext-grid) { |
| | display: flex; |
| | flex-wrap: wrap; |
| | justify-content: center; |
| | gap: 10px 12px; |
| | width: 100%; |
| | } |
|
| |
|
| .wizlords-mainpage-left > .center, | | .skin-citizen |
| .wizlords-mainpage-right > .center, | | :is(.wizlords-mainpage-left, .wizlords-mainpage-right) |
| .wizlords-mainpage-items { | | > .center:has(> .wizlords-wideimagetext-grid) |
| text-align: center;
| | > p { |
| } | | flex: 0 0 100%; |
| | width: 100%; |
| | margin: 0 0 16px; |
| | } |
|
| |
|
| .wizlords-mainpage-left > .center > p, | | .skin-citizen |
| .wizlords-mainpage-right > .center > p { | | :is(.wizlords-mainpage-left, .wizlords-mainpage-right) |
| margin: 0 0 10px;
| | > .center |
| } | | > .wizlords-wideimagetext-grid { |
| | display: contents; |
| | } |
|
| |
|
| /* Normal text lists inside homepage blocks. */
| | .skin-citizen |
| .wizlords-mainpage-left > ul, | | :is(.wizlords-mainpage-left, .wizlords-mainpage-right) |
| .wizlords-mainpage-right > ul, | | > .center |
| .wizlords-mainpage-left > .center > ul,
| | > .wizlords-wideimagetext-grid |
| .wizlords-mainpage-right > .center > ul { | | > .wizlords-wideimagetext { |
| margin: 8px 0 0 20px;
| | flex: 0 0 calc((100% - 36px) / 4); |
| padding-left: 20px;
| | box-sizing: border-box; |
| list-style: disc inside;
| | width: calc((100% - 36px) / 4); |
| text-align: left;
| | max-width: none; |
| } | | margin: 0; |
| | text-align: center; |
| | } |
|
| |
|
| .wizlords-mainpage-left > ol, | | .skin-citizen .wizlords-wideimagetext-image, |
| .wizlords-mainpage-right > ol, | | .skin-citizen .wizlords-wideimagetext-image img { |
| .wizlords-mainpage-left > .center > ol, | | display: block; |
| .wizlords-mainpage-right > .center > ol { | | width: 100%; |
| margin: 8px 0 0 20px;
| | height: auto; |
| padding-left: 20px;
| | aspect-ratio: 2 / 1; |
| list-style: decimal inside;
| | object-fit: cover; |
| text-align: left;
| | border: 0; |
| } | | background: transparent; |
| | } |
|
| |
|
| .wizlords-mainpage-left li, | | .skin-citizen .wizlords-wideimagetext-text { |
| .wizlords-mainpage-right li { | | display: flex; |
| display: list-item;
| | align-items: flex-start; |
| margin-bottom: 6px;
| | justify-content: center; |
| }
| | width: 100%; |
| | | min-height: 34px; |
| .wizlords-mainpage-left li::marker,
| | height: auto; |
| .wizlords-mainpage-right li::marker {
| | margin-top: 4px; |
| color: var(--wiz-text);
| | font-size: 12px; |
| | line-height: 1.2; |
| | text-align: center; |
| | overflow-wrap: anywhere; |
| | } |
| } | | } |
|
| |
|
| /* ========================================================================== | | /* ========================================================================== |
| Homepage Square Image Links | | Phone And Tablet Table Of Contents |
| --------------------------------------------------------------------------
| |
| Used for 100x100 icon links with a fixed-height text label underneath.
| |
| ========================================================================== */ | | ========================================================================== */ |
| .wizlords-imagetext {
| | @media screen and (max-width: 899px) { |
| display: inline-block; | | .skin-citizen .citizen-page-container { |
| box-sizing: border-box;
| | padding-right: max(var(--padding-page, 16px), env(safe-area-inset-right)); |
| width: 100px;
| | padding-left: max(var(--padding-page, 16px), env(safe-area-inset-left)); |
| min-height: 122px;
| | } |
| margin: 5px;
| |
| vertical-align: top;
| |
| text-align: center; | |
| } | |
|
| |
|
| .wizlords-imagetext-image { | | .skin-citizen .toc-page #toc, |
| width: 100px; | | .skin-citizen .toc-page .toc { |
| height: 100px;
| | float: none; |
| }
| | width: 100%; |
| | | min-width: 0; |
| .wizlords-imagetext-image img { | | max-width: none; |
| display: block;
| | margin: 0 0 18px; |
| width: 100px;
| | padding: 14px 16px; |
| 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 | | Phone And Tablet Shared Component Adjustments |
| --------------------------------------------------------------------------
| |
| Used for 200x100 banner-style image links, such as Weekly Battle Games,
| |
| World Lore, and Events.
| |
| ========================================================================== */ | | ========================================================================== */ |
| .wizlords-wideimagetext { | | @media screen and (max-width: 899px) { |
| display: inline-block;
| | .skin-citizen .wizlords-mainpage-left, |
| box-sizing: border-box;
| | .skin-citizen .wizlords-mainpage-right { |
| width: 200px;
| | float: none; |
| margin: 10px 12px;
| | box-sizing: border-box; |
| vertical-align: top;
| | width: 100%; |
| text-align: center;
| | margin-top: 0; |
| } | | margin-bottom: 0; |
| | padding-right: 0; |
| | padding-left: 0; |
| | } |
|
| |
|
| .wizlords-wideimagetext-grid { | | .skin-citizen .wizlords-mainpage-clear { |
| display: flex;
| | clear: both; |
| flex-wrap: wrap; | | } |
| justify-content: center;
| |
| gap: 10px 24px;
| |
| } | |
|
| |
|
| .wizlords-wideimagetext-grid .wizlords-wideimagetext { | | .skin-citizen .wizlords-race-intro, |
| margin: 0;
| | .skin-citizen .wizlords-magic-intro { |
| } | | align-items: flex-start; |
| | gap: 16px; |
| | } |
|
| |
|
| .wizlords-wideimagetext-image { | | .skin-citizen .wizlords-race-quote { |
| width: 200px;
| | padding-right: 20px; |
| height: 100px; | | } |
| } | |
|
| |
|
| .wizlords-wideimagetext-image img { | | .skin-citizen .wizlords-culture-grid { |
| display: block;
| | grid-template-columns: 1fr; |
| width: 200px;
| | } |
| height: 100px;
| |
| object-fit: cover;
| |
| border: 0;
| |
| background: transparent; | |
| } | |
|
| |
|
| .wizlords-wideimagetext-text { | | .skin-citizen .wizlords-culture-grid .wizlords-culture-card { |
| display: flex;
| | grid-column: auto; |
| align-items: center;
| | } |
| justify-content: center;
| |
| width: 200px;
| |
| height: 40px;
| |
| font-size: 14px;
| |
| line-height: 1.3; | |
| text-align: center;
| |
| } | |
|
| |
|
| /* ==========================================================================
| | .skin-citizen .wizlords-culture-row-feature { |
| Useful Links List
| | grid-template-columns: 1fr; |
| --------------------------------------------------------------------------
| | gap: 14px; |
| Specific list styling for the external/useful links block.
| | } |
| ========================================================================== */
| |
| .wizlords-useful-links, | |
| .wizlords-mainpage-link-list, | |
| .wizlords-mainpage-whatislarp-list {
| |
| margin: 8px 0 0 20px;
| |
| padding-left: 20px;
| |
| list-style: disc inside;
| |
| text-align: left; | |
| } | |
|
| |
|
| .wizlords-useful-links li, | | .skin-citizen .wizlords-culture-row-icon img { |
| .wizlords-mainpage-link-list li, | | margin: 0 auto; |
| .wizlords-mainpage-whatislarp-list li {
| | } |
| margin-bottom: 6px;
| |
| display: list-item;
| |
| list-style: disc inside; | |
| } | |
|
| |
|
| .wizlords-useful-links li::marker, | | .skin-citizen .wizlords-culture-row-divider { |
| .wizlords-mainpage-link-list li::marker, | | width: 80%; |
| .wizlords-mainpage-whatislarp-list li::marker {
| | height: 1px; |
| color: var(--wiz-text);
| | margin: 0 auto; |
| } | | } |
|
| |
|
| /* What is LARP includes longer explanatory list items. Align its bullet edge
| | .skin-citizen .wizlords-culture-appearance { |
| with the paragraph above instead of using the narrower Useful Links inset. */
| | width: 100%; |
| #content.mw-body
| | } |
| #bodyContent
| |
| .mw-parser-output
| |
| .wizlords-mainpage-right | |
| > ul.wizlords-mainpage-whatislarp-list,
| |
| #content.mw-body
| |
| #bodyContent
| |
| .mw-parser-output
| |
| .wizlords-mainpage-left
| |
| > ul.wizlords-mainpage-whatislarp-list {
| |
| box-sizing: border-box;
| |
| width: 100%;
| |
| margin: 8px 0 0; | |
| padding-left: 18px;
| |
| list-style: disc outside;
| |
| text-align: left;
| |
| } | |
|
| |
|
| #content.mw-body
| | .skin-citizen .wizlords-culture-appearance img { |
| #bodyContent
| | width: 100%; |
| .mw-parser-output | | height: auto; |
| .wizlords-mainpage-whatislarp-list | | aspect-ratio: 300 / 138; |
| > li {
| | } |
| margin-left: 0;
| |
| list-style: disc outside;
| |
| } | |
|
| |
|
| /* Vector assigns separate colours to external and visited links. Keep the
| | .skin-citizen .wizlords-shared-classes { |
| shared homepage navigation-list component consistently orange. */
| | box-sizing: border-box; |
| #content.mw-body .wizlords-mainpage-link-list a,
| | width: 100%; |
| #content.mw-body .wizlords-mainpage-link-list a:visited,
| | min-width: 0; |
| #content.mw-body .wizlords-mainpage-link-list a.external,
| | padding-right: 18px; |
| #content.mw-body .wizlords-mainpage-whatislarp-list a,
| | padding-left: 18px; |
| #content.mw-body .wizlords-mainpage-whatislarp-list a:visited,
| | } |
| #content.mw-body .wizlords-mainpage-whatislarp-list a.external {
| |
| color: var(--wiz-link);
| |
| font-weight: normal;
| |
| text-decoration: none;
| |
| } | |
|
| |
|
| #content.mw-body .wizlords-mainpage-link-list a:hover,
| | .skin-citizen .wizlords-shared-classes ul { |
| #content.mw-body .wizlords-mainpage-link-list a.external:hover,
| | grid-auto-flow: row; |
| #content.mw-body .wizlords-mainpage-whatislarp-list a:hover,
| | grid-template-rows: none; |
| #content.mw-body .wizlords-mainpage-whatislarp-list a.external:hover {
| | grid-template-columns: 1fr; |
| color: #ffd37a;
| | width: auto; |
| text-decoration: none; | | } |
| } | |
|
| |
|
| /* Vector's external-link indicator is a separate blue background SVG, so it
| | .skin-citizen .wizlords-class-compare { |
| must be recoloured independently from the anchor text. */
| | flex-direction: column; |
| #content.mw-body .wizlords-mainpage-link-list a.external,
| | } |
| #content.mw-body .wizlords-mainpage-whatislarp-list a.external {
| |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23ff942d' d='M6 1h3v3H8V2.71L4.35 6.35l-.7-.7L7.29 2H6V1z'/%3E%3Cpath fill='%23ff942d' d='M2 2h3v1H3v4h4V5h1v3H2V2z'/%3E%3C/svg%3E");
| |
| } | |
|
| |
|
| #content.mw-body .wizlords-mainpage-link-list a.external:hover,
| | .skin-citizen .wizlords-class-category-table, |
| #content.mw-body .wizlords-mainpage-whatislarp-list a.external:hover {
| | .skin-citizen .wizlords-magic-table { |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23ffd37a' d='M6 1h3v3H8V2.71L4.35 6.35l-.7-.7L7.29 2H6V1z'/%3E%3Cpath fill='%23ffd37a' d='M2 2h3v1H3v4h4V5h1v3H2V2z'/%3E%3C/svg%3E");
| | min-width: 0; |
| } | | max-width: 100%; |
| | } |
|
| |
|
| /* ==========================================================================
| | .skin-citizen .wizlords-reputation-table.mw-collapsed { |
| Narrow Vector Fallback
| | width: 100%; |
| --------------------------------------------------------------------------
| | min-width: 0; |
| When Vector is manually used below the small-desktop range, collapse its
| |
| desktop sidebar dimensions and stack the homepage columns.
| |
| ========================================================================== */
| |
| @media (max-width: 899px) {
| |
| :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, | | .skin-citizen .wizlords-page-image.right, |
| .wizlords-mainpage-right { | | .skin-citizen .wizlords-page-image.left { |
| float: none; | | float: none; |
| width: 100%; | | width: 100%; |
| padding-left: 0; | | margin: 0 0 18px; |
| padding-right: 0;
| |
| } | | } |
|
| |
|
| } | | .skin-citizen .ww-navbox-row { |
| | display: block; |
| | } |
|
| |
|
| /* ==========================================================================
| | .skin-citizen .ww-navbox-group { |
| Final What Is LARP List Alignment
| | width: 100%; |
| --------------------------------------------------------------------------
| | padding: 5px 10px; |
| Vector and shared article styles both assign margins and padding to direct
| | border-right: 0; |
| article lists. This final component-scoped reset guarantees that the What
| | border-bottom: 1px solid var(--wiz-content-background); |
| is LARP bullet edge aligns with the paragraph above, regardless of which
| | text-align: center; |
| MediaWiki wrapper is present.
| | } |
| ========================================================================== */
| |
| #content.mw-body #bodyContent ul.wizlords-mainpage-whatislarp-list {
| |
| box-sizing: border-box !important;
| |
| width: 100% !important;
| |
| max-width: none !important;
| |
| margin: 8px 0 0 !important;
| |
| padding-left: 1.15em !important;
| |
| list-style: disc outside !important;
| |
| text-align: left !important;
| |
| } | |
|
| |
|
| #content.mw-body #bodyContent ul.wizlords-mainpage-whatislarp-list > li {
| | .skin-citizen .ww-navbox-list { |
| margin-left: 0 !important;
| | padding: 6px 10px; |
| padding-left: 0 !important;
| | text-align: center; |
| list-style: disc outside !important; | | } |
| } | | } |
