Toggle search
Toggle menu
41
155
1
1.5K
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 edit
Aurelian (talk | contribs)
Bureaucrats, Interface administrators, Administrators
1,509 edits
No edit summary
No edit summary
 
(24 intermediate revisions by the same user not shown)
Line 2: Line 2:
  * Wizards & Warlords Vector skin overrides.
  * Wizards & Warlords Vector skin overrides.
  *
  *
  * This file controls the Vector skin layout, dark theme, top tabs, sidebar,
  * This file controls the Vector desktop shell, dark theme, top tabs, sidebar,
  * page title, footer, and the custom homepage blocks.
  * page title, footer, and desktop homepage layout.
*
* 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.
  */
  */
/* ==========================================================================
  Responsive Layout Standard
  --------------------------------------------------------------------------
  Phone: 0-599px; tablet / large phone: 600-899px; small desktop /
  landscape tablet: 900-1199px; full desktop: 1200px+.
  Vector remains the desktop skin, but its narrow-window fallback follows the
  same viewport boundaries as the rest of the project.
  ========================================================================== */


/* ==========================================================================
/* ==========================================================================
Line 21: Line 34:
--wiz-sidebar-content-gap: 0px;
--wiz-sidebar-content-gap: 0px;
--wiz-page-gutter: 24px;
--wiz-page-gutter: 24px;
--wiz-content-width: calc(var(--wiz-page-width) - var(--wiz-sidebar-width) - var(--wiz-page-gutter));
--wiz-content-width: calc(100% - var(--wiz-sidebar-width) - var(--wiz-sidebar-content-gap) - var(--wiz-page-gutter));
--wiz-content-padding: 20px;
--wiz-content-padding: 20px;
--wiz-content-background: #222;
--wiz-content-background: #222;
Line 27: Line 40:
--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_circle.jpeg");
--wiz-background-image: url("/index.php/Special:Redirect/file/background_circle.jpeg");
--wiz-content-border: #ff942d;
--wiz-content-border: #ff942d;
--wiz-text: #d2d2d2;
--wiz-text: #d2d2d2;
Line 87: Line 100:
}
}


/* ==========================================================================
/* Vector always uses the wide Main Page banner, including when its desktop
  shell is viewed through a narrow browser window. Citizen retains the
  responsive no-background banner swap defined in its own stylesheet. */
.skin-vector .page-banner {
aspect-ratio: auto;
margin-bottom: 24px;
background-image: none;
}
 
.skin-vector .page-banner-desktop {
display: block !important;
}
 
.skin-vector .page-banner-mobile {
display: none !important;
}
 
/* ==========================================================================  
   Vector Wrapper Cleanup
   Vector Wrapper Cleanup
   --------------------------------------------------------------------------
   --------------------------------------------------------------------------
Line 482: Line 512:
/* Normal article lists generated by * and # wikitext. */
/* Normal article lists generated by * and # wikitext. */
#content.mw-body #bodyContent .mw-parser-output > ul,
#content.mw-body #bodyContent .mw-parser-output > ul,
#content.mw-body #bodyContent .mw-parser-output > ol,
#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;
margin: 8px 0 12px 28px;
padding-left: 20px;
padding-left: 20px;
Line 490: Line 518:
}
}


#content.mw-body #bodyContent .mw-parser-output > ul,
#content.mw-body #bodyContent .mw-parser-output > ul {
#content.mw-body #bodyContent .toc-page > ul {
list-style: disc outside;
}
 
#content.mw-body #bodyContent .toc-page ul {
list-style: disc outside;
list-style: disc outside;
}
}


#content.mw-body #bodyContent .mw-parser-output ul ul,
#content.mw-body #bodyContent .mw-parser-output ul ul {
#content.mw-body #bodyContent .toc-page ul ul {
margin: 4px 0 6px 22px;
margin: 4px 0 6px 22px;
padding-left: 18px;
padding-left: 18px;
Line 506: Line 528:
}
}


#content.mw-body #bodyContent .mw-parser-output > ol,
#content.mw-body #bodyContent .mw-parser-output > ol {
#content.mw-body #bodyContent .toc-page > ol {
list-style: decimal outside;
list-style: decimal outside;
}
}


#content.mw-body #bodyContent .mw-parser-output > ul > li,
#content.mw-body #bodyContent .mw-parser-output > ul > li,
#content.mw-body #bodyContent .mw-parser-output > ol > 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;
display: list-item;
margin-bottom: 4px;
margin-bottom: 4px;
}
}


#content.mw-body #bodyContent .mw-parser-output ul ul > li,
#content.mw-body #bodyContent .mw-parser-output ul ul > li {
#content.mw-body #bodyContent .toc-page ul ul > li {
display: list-item;
display: list-item;
margin-bottom: 3px;
margin-bottom: 3px;
Line 528: Line 546:
#content.mw-body #bodyContent .mw-parser-output li::marker {
#content.mw-body #bodyContent .mw-parser-output li::marker {
color: var(--wiz-text);
color: var(--wiz-text);
}
/* ==========================================================================
  Inline Article Table Of Contents
  --------------------------------------------------------------------------
  Style Vector's generated #toc directly so it retains the established floated
  desktop appearance and allows article content to wrap beside it.
  ========================================================================== */
#content.mw-body #bodyContent #toc {
float: right;
clear: right;
box-sizing: border-box;
width: max-content;
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;
padding: 12px 16px;
}
#content.mw-body #bodyContent #toc .toctitle {
margin: 0 0 10px;
color: var(--wiz-text);
text-align: center;
}
#content.mw-body
#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);
text-decoration: none;
}
#content.mw-body #bodyContent #toc ul {
margin: 0;
padding: 0;
list-style: none;
}
#content.mw-body #bodyContent #toc li {
display: block;
margin: 0;
padding: 0;
list-style: none;
line-height: 1.35;
}
#content.mw-body #bodyContent #toc > ul > li {
padding: 2px 0;
}
#content.mw-body #bodyContent #toc li ul {
margin: 0 0 0 12px;
padding: 0 0 0 10px;
border-left: 1px dotted var(--wiz-content-border);
}
#content.mw-body #bodyContent #toc li li {
margin: 0;
padding: 2px 0;
border-left: 0;
}
#content.mw-body #bodyContent #toc li::marker {
content: "";
}
#content.mw-body #bodyContent #toc .tocnumber {
display: none;
}
#content.mw-body #bodyContent #toc a {
color: var(--wiz-link);
text-decoration: none;
overflow-wrap: anywhere;
}
#content.mw-body #bodyContent #toc a:hover {
color: #ffd37a;
text-decoration: none;
}
#content.mw-body #bodyContent #toc .toclevel-3,
#content.mw-body #bodyContent #toc .toclevel-4,
#content.mw-body #bodyContent #toc .toclevel-5,
#content.mw-body #bodyContent #toc .toclevel-6 {
display: none !important;
}
}


Line 586: Line 723:
}
}


#content.mw-body #bodyContent > h2:not(.center),
#content.mw-body #bodyContent > h2:not(.center) {
#content.mw-body #bodyContent .toc-page > h2:not(.center) {
box-sizing: border-box;
box-sizing: border-box;
height: 30px;
height: 30px;
Line 602: Line 738:
#content.mw-body #bodyContent > h4:not(.center),
#content.mw-body #bodyContent > h4:not(.center),
#content.mw-body #bodyContent > h5:not(.center),
#content.mw-body #bodyContent > h5:not(.center),
#content.mw-body #bodyContent > h6: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;
box-sizing: border-box;
margin: 20px 0 10px;
margin: 20px 0 10px;
Line 617: Line 749:
}
}


#content.mw-body #bodyContent > h3:not(.center),
#content.mw-body #bodyContent > h3:not(.center) {
#content.mw-body #bodyContent .toc-page > h3:not(.center) {
height: 28px;
height: 28px;
margin-top: 5px;
margin-top: 5px;
Line 624: Line 755:
}
}


#content.mw-body #bodyContent > h4:not(.center),
#content.mw-body #bodyContent > h4:not(.center) {
#content.mw-body #bodyContent .toc-page > h4:not(.center) {
height: 23px;
height: 23px;
margin-top: 4px;
margin-top: 4px;
Line 632: Line 762:


#content.mw-body #bodyContent .mw-heading h2,
#content.mw-body #bodyContent .mw-heading h2,
#content.mw-body #bodyContent > h2:not(.center),
#content.mw-body #bodyContent > h2:not(.center) {
#content.mw-body #bodyContent .toc-page > h2:not(.center) {
font-size: 24px;
font-size: 24px;
line-height: 30px;
line-height: 30px;
Line 639: Line 768:


#content.mw-body #bodyContent .mw-heading h3,
#content.mw-body #bodyContent .mw-heading h3,
#content.mw-body #bodyContent > h3:not(.center),
#content.mw-body #bodyContent > h3:not(.center) {
#content.mw-body #bodyContent .toc-page > h3:not(.center) {
font-size: 18px;
font-size: 18px;
line-height: 24px;
line-height: 24px;
Line 646: Line 774:


#content.mw-body #bodyContent .mw-heading h4,
#content.mw-body #bodyContent .mw-heading h4,
#content.mw-body #bodyContent > h4:not(.center),
#content.mw-body #bodyContent > h4:not(.center) {
#content.mw-body #bodyContent .toc-page > h4:not(.center) {
font-size: 14px;
font-size: 14px;
line-height: 1.6;
line-height: 1.6;
Line 655: Line 782:
#content.mw-body #bodyContent .mw-heading h6,
#content.mw-body #bodyContent .mw-heading h6,
#content.mw-body #bodyContent > h5:not(.center),
#content.mw-body #bodyContent > h5:not(.center),
#content.mw-body #bodyContent > h6: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;
font-size: 15px;
line-height: 21px;
line-height: 21px;
Line 668: Line 793:
#content.mw-body #bodyContent > h5: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 > 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 .mw-heading a,
#content.mw-body #bodyContent > h2:not(.center) a,
#content.mw-body #bodyContent > h2:not(.center) a,
Line 678: Line 798:
#content.mw-body #bodyContent > h4:not(.center) a,
#content.mw-body #bodyContent > h4:not(.center) a,
#content.mw-body #bodyContent > h5:not(.center) a,
#content.mw-body #bodyContent > h5:not(.center) a,
#content.mw-body #bodyContent > h6: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;
border-bottom: 0;
color: var(--wiz-heading);
color: var(--wiz-heading);
Line 890: Line 1,005:
   Specific list styling for the external/useful links block.
   Specific list styling for the external/useful links block.
   ========================================================================== */
   ========================================================================== */
.wizlords-useful-links {
.wizlords-useful-links,
.wizlords-mainpage-link-list,
.wizlords-mainpage-whatislarp-list {
margin: 8px 0 0 20px;
margin: 8px 0 0 20px;
padding-left: 20px;
padding-left: 20px;
Line 897: Line 1,014:
}
}


.wizlords-useful-links li {
.wizlords-useful-links li,
.wizlords-mainpage-link-list li,
.wizlords-mainpage-whatislarp-list li {
margin-bottom: 6px;
margin-bottom: 6px;
display: list-item;
display: list-item;
Line 903: Line 1,022:
}
}


.wizlords-useful-links li::marker {
.wizlords-useful-links li::marker,
.wizlords-mainpage-link-list li::marker,
.wizlords-mainpage-whatislarp-list li::marker {
color: var(--wiz-text);
color: var(--wiz-text);
}
/* What is LARP includes longer explanatory list items. Align its bullet edge
  with the paragraph above instead of using the narrower Useful Links inset. */
#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
#bodyContent
.mw-parser-output
.wizlords-mainpage-whatislarp-list
> li {
margin-left: 0;
list-style: disc outside;
}
/* Vector assigns separate colours to external and visited links. Keep the
  shared homepage navigation-list component consistently orange. */
#content.mw-body .wizlords-mainpage-link-list a,
#content.mw-body .wizlords-mainpage-link-list a:visited,
#content.mw-body .wizlords-mainpage-link-list a.external,
#content.mw-body .wizlords-mainpage-whatislarp-list a,
#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,
#content.mw-body .wizlords-mainpage-link-list a.external:hover,
#content.mw-body .wizlords-mainpage-whatislarp-list a:hover,
#content.mw-body .wizlords-mainpage-whatislarp-list a.external:hover {
color: #ffd37a;
text-decoration: none;
}
/* Vector's external-link indicator is a separate blue background SVG, so it
  must be recoloured independently from the anchor text. */
#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,
#content.mw-body .wizlords-mainpage-whatislarp-list a.external:hover {
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");
}
}


/* ==========================================================================
/* ==========================================================================
   Mobile Layout
   Narrow Vector Fallback
   --------------------------------------------------------------------------
   --------------------------------------------------------------------------
   On small screens, the sidebar collapses and homepage columns stack.
   When Vector is manually used below the small-desktop range, remove its
  desktop sidebar, reclaim that space, and stack the homepage columns.
   ========================================================================== */
   ========================================================================== */
@media (max-width: 700px) {
@media (max-width: 899px) {
:root {
:root {
--wiz-sidebar-width: 0px;
--wiz-sidebar-width: 0px;
--wiz-sidebar-content-gap: 0px;
--wiz-sidebar-content-gap: 0px;
--wiz-content-width: 100%;
--wiz-content-width: calc(100% - var(--wiz-page-gutter) - var(--wiz-page-gutter));
--wiz-page-gutter: 12px;
--wiz-page-gutter: 12px;
--wiz-content-padding: 14px;
--wiz-content-padding: 14px;
}
#mw-panel,
#p-logo {
display: none !important;
}
#content.mw-body,
#footer {
margin-inline: var(--wiz-page-gutter);
box-shadow:
calc(-1 * var(--wiz-page-gutter)) 0 0 0 var(--wiz-panel-background),
var(--wiz-page-gutter) 0 0 0 var(--wiz-panel-background);
}
#left-navigation {
margin-left: var(--wiz-page-gutter);
}
}


Line 929: Line 1,130:
}
}


}
/* ==========================================================================
  Final What Is LARP List Alignment
  --------------------------------------------------------------------------
  Vector and shared article styles both assign margins and padding to direct
  article lists. This final component-scoped reset guarantees that the What
  is LARP bullet edge aligns with the paragraph above, regardless of which
  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 {
margin-left: 0 !important;
padding-left: 0 !important;
list-style: disc outside !important;
}
}
Retrieved from "https://wizlords.wiki/MediaWiki:Vector.css"