MediaWiki:Vector.css: Difference between revisions
MediaWiki interface page
More actions
No edit summary |
No edit summary |
||
| (8 intermediate revisions by the same user not shown) | |||
| Line 34: | 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- | --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 40: | 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(" | --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 100: | 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 495: | 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 | #content.mw-body #bodyContent .mw-parser-output > ol { | ||
margin: 8px 0 12px 28px; | margin: 8px 0 12px 28px; | ||
padding-left: 20px; | padding-left: 20px; | ||
| Line 503: | Line 518: | ||
} | } | ||
#content.mw-body #bodyContent .mw-parser-output | #content.mw-body #bodyContent .mw-parser-output > ul { | ||
list-style: disc outside; | list-style: disc outside; | ||
} | } | ||
#content.mw-body #bodyContent .mw-parser-output | #content.mw-body #bodyContent .mw-parser-output ul ul { | ||
margin: 4px 0 6px 22px; | margin: 4px 0 6px 22px; | ||
padding-left: 18px; | padding-left: 18px; | ||
| Line 515: | Line 528: | ||
} | } | ||
#content.mw-body #bodyContent .mw-parser-output | #content.mw-body #bodyContent .mw-parser-output > 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 | #content.mw-body #bodyContent .mw-parser-output > ol > li { | ||
display: list-item; | display: list-item; | ||
margin-bottom: 4px; | margin-bottom: 4px; | ||
} | } | ||
#content.mw-body #bodyContent .mw-parser-output | #content.mw-body #bodyContent .mw-parser-output ul ul > li { | ||
display: list-item; | display: list-item; | ||
margin-bottom: 3px; | margin-bottom: 3px; | ||
| Line 537: | 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); | ||
} | } | ||
| Line 584: | Line 551: | ||
Inline Article Table Of Contents | Inline Article Table Of Contents | ||
-------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ||
Style Vector's generated #toc directly so it retains the established floated | |||
Style Vector's generated #toc directly so it retains the | |||
desktop appearance and allows article content to wrap beside it. | desktop appearance and allows article content to wrap beside it. | ||
========================================================================== */ | ========================================================================== */ | ||
| Line 758: | Line 723: | ||
} | } | ||
#content.mw-body #bodyContent | #content.mw-body #bodyContent > h2:not(.center) { | ||
box-sizing: border-box; | box-sizing: border-box; | ||
height: 30px; | height: 30px; | ||
| Line 774: | 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 | #content.mw-body #bodyContent > h6:not(.center) { | ||
box-sizing: border-box; | box-sizing: border-box; | ||
margin: 20px 0 10px; | margin: 20px 0 10px; | ||
| Line 789: | Line 749: | ||
} | } | ||
#content.mw-body #bodyContent | #content.mw-body #bodyContent > h3:not(.center) { | ||
height: 28px; | height: 28px; | ||
margin-top: 5px; | margin-top: 5px; | ||
| Line 796: | Line 755: | ||
} | } | ||
#content.mw-body #bodyContent | #content.mw-body #bodyContent > h4:not(.center) { | ||
height: 23px; | height: 23px; | ||
margin-top: 4px; | margin-top: 4px; | ||
| Line 804: | Line 762: | ||
#content.mw-body #bodyContent .mw-heading h2, | #content.mw-body #bodyContent .mw-heading h2, | ||
#content.mw-body #bodyContent | #content.mw-body #bodyContent > h2:not(.center) { | ||
font-size: 24px; | font-size: 24px; | ||
line-height: 30px; | line-height: 30px; | ||
| Line 811: | Line 768: | ||
#content.mw-body #bodyContent .mw-heading h3, | #content.mw-body #bodyContent .mw-heading h3, | ||
#content.mw-body #bodyContent | #content.mw-body #bodyContent > h3:not(.center) { | ||
font-size: 18px; | font-size: 18px; | ||
line-height: 24px; | line-height: 24px; | ||
| Line 818: | Line 774: | ||
#content.mw-body #bodyContent .mw-heading h4, | #content.mw-body #bodyContent .mw-heading h4, | ||
#content.mw-body #bodyContent | #content.mw-body #bodyContent > h4:not(.center) { | ||
font-size: 14px; | font-size: 14px; | ||
line-height: 1.6; | line-height: 1.6; | ||
| Line 827: | 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 | #content.mw-body #bodyContent > h6:not(.center) { | ||
font-size: 15px; | font-size: 15px; | ||
line-height: 21px; | line-height: 21px; | ||
| Line 840: | 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 .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 850: | 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 | #content.mw-body #bodyContent > h6:not(.center) a { | ||
border-bottom: 0; | border-bottom: 0; | ||
color: var(--wiz-heading); | color: var(--wiz-heading); | ||
| Line 1,150: | Line 1,093: | ||
Narrow Vector Fallback | Narrow Vector Fallback | ||
-------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ||
When Vector is manually used below the small-desktop range, | When Vector is manually used below the small-desktop range, remove its | ||
desktop sidebar | desktop sidebar, reclaim that space, and stack the homepage columns. | ||
========================================================================== */ | ========================================================================== */ | ||
@media (max-width: 899px) { | @media (max-width: 899px) { | ||
| Line 1,157: | Line 1,100: | ||
--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); | |||
} | } | ||