MediaWiki:Vector.css
Jump to navigation
Jump to search
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* All CSS here will be loaded for users of the Vector skin */
:root {
--page-base-height: calc(72 * var(--pixel-size));
--panel-width: calc(3 * var(--tile-size));
--wikigg-header-height: round(up, 35px, var(--pixel-size));
@supports not (width: round(up, 1px, 1px)) {
--wikigg-header-height: 35px;
}
}
body {
--body-tile-alignment-padding-width: calc(0.5 * mod(100cqw, var(--tile-size)));
@supports not (width: mod(1px, 1px)) {
--body-tile-alignment-padding-width: 0;
}
display: block grid;
grid-template-areas:
"wikigg-header wikigg-header wikigg-header wikigg-header"
". page-base page-base . "
". panel head . "
". panel content . "
". panel data-after . "
". panel footer . "
"wikigg-footer wikigg-footer wikigg-footer wikigg-footer";
grid-template-columns:
var(--body-tile-alignment-padding-width)
var(--panel-width) /* panel */
auto /* content */
var(--body-tile-alignment-padding-width);
grid-template-rows:
var(--wikigg-header-height) /* wikigg header */
var(--page-base-height) /* page base */
auto /* head */
auto /* content */
auto /* data after content */
auto /* footer */
auto; /* wikigg footer */
overflow-x: hidden;
@media screen and (max-width: 64rem) {
grid-template-areas:
"wikigg-header wikigg-header wikigg-header"
". page-base . "
". head . "
". content . "
". data-after . "
". panel . "
". footer . "
"wikigg-footer wikigg-footer wikigg-footer";
grid-template-columns:
var(--body-tile-alignment-padding-width)
auto /* content */
var(--body-tile-alignment-padding-width);
grid-template-rows:
var(--wikigg-header-height) /* wikigg header */
var(--page-base-height) /* page base */
auto /* head */
auto /* content */
auto /* data after content */
auto /* panel */
auto /* footer */
auto; /* wikigg footer */
}
> .suggestions {
font-size: unset !important;
}
}
#mw-page-base {
background: unset;
contain: strict;
container-name: page-base;
container-type: size;
display: block grid;
grid-area: page-base;
grid-template-columns:
1fr
[bunny-start] 0 [bunny-end]
1fr
[logo-start] min-content [logo-end]
1fr
[paquerette-start] 0 [paquerette-end]
1fr;
height: unset;
margin-bottom: calc(2 * var(--pixel-size));
.page-base-bunny-wrapper {
display: contents;
.title-screen-bunny {
align-self: end;
grid-area: bunny;
justify-self: end;
}
}
.page-base-logo-wrapper {
display: contents;
.bunburrows-logo {
align-self: end;
grid-area: logo;
justify-self: center;
pointer-events: none;
.bunburrows-logo__paquerette,
.bunburrows-logo__down,
.bunburrows-logo__the,
.bunburrows-logo__bunburrows {
pointer-events: visiblePainted;
}
.bunburrows-logo__bunny {
pointer-events: visiblePainted;
cursor: default;
}
}
}
.page-base-paquerette-wrapper {
display: contents;
.title-screen-paquerette {
align-self: end;
grid-area: paquerette;
justify-self: start;
}
}
}
#mw-head-base {
grid-area: head;
height: unset;
margin: unset;
}
.content-wrapper {
display: contents;
#mw-navigation {
display: contents;
#mw-head {
column-gap: var(--tile-size);
contain: inline-size layout style paint;
container-name: head;
container-type: inline-size;
display: grid;
float: unset;
grid-area: head;
grid-template-columns: auto auto;
position: unset;
width: unset;
#left-navigation {
display: inline flow-root;
float: unset;
justify-self: left;
margin: unset;
}
#right-navigation {
display: inline flow-root;
float: unset;
justify-self: right;
margin: unset;
}
.vector-menu-tabs {
display: contents;
.vector-menu-content {
display: contents;
.vector-menu-content-list {
display: contents;
.mw-list-item {
background: unset;
display: inline flow-root;
float: unset;
height: var(--tile-size);
position: relative;
vertical-align: top;
width: var(--tile-size);
& a {
background: unset;
height: var(--tile-size);
opacity: 0;
padding: unset;
width: var(--tile-size);
}
.head-icon,
.head-selection-marker {
left: 0;
pointer-events: none;
position: absolute;
top: 0;
}
}
.mw-watchlink a::before {
content: unset;
}
#ca-watch .head-icon-watch__fill {
visibility: hidden;
}
}
}
}
.vector-menu-dropdown {
display: inline flow-root;
float: unset;
height: var(--tile-size);
vertical-align: top;
width: var(--tile-size);
}
#p-cactions {
display: none;
}
.vector-search-box {
display: inline flow-root;
float: unset;
height: var(--tile-size);
margin: unset;
min-width: calc(4 * var(--tile-size));
vertical-align: top;
width: round(down, 35cqw, var(--tile-size));
@supports not (width: round(down, 35cqw, var(--tile-size))) {
width: 30cqw;
}
.vector-search-box-form {
height: calc(12 * var(--pixel-size));
margin-bottom: calc(2 * var(--pixel-size));
margin-left: calc(2 * var(--pixel-size));
margin-right: calc(2 * var(--pixel-size));
margin-top: calc(2 * var(--pixel-size));
.vector-search-box-inner {
max-width: unset;
min-width: unset;
width: 100%;
.input-box-wrapper {
display: contents;
.input-box {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
}
.vector-search-box-input {
background: unset;
border: unset;
box-shadow: unset;
color: unset;
font-family: "Super Mario Bros. 2";
font-size: calc(8 * var(--pixel-size));
height: 100%;
padding-bottom: calc(2 * var(--pixel-size));
padding-left: calc(2 * var(--pixel-size));
padding-right: calc(10 * var(--pixel-size));
padding-top: calc(2 * var(--pixel-size));
&::placeholder {
opacity: 0;
}
}
.searchButton {
background: unset;
bottom: unset;
left: unset;
min-width: unset;
right: calc(2 * var(--pixel-size));
top: calc(2 * var(--pixel-size));
width: calc(8 * var(--pixel-size));
}
.search-icon-wrapper {
display: contents;
.search-button-icon {
position: absolute;
right: calc(2 * var(--pixel-size));
top: calc(2 * var(--pixel-size));
}
}
}
}
}
.emptyPortlet {
display: none;
}
}
#mw-panel {
column-gap: calc(4 * var(--pixel-size));
contain: strict;
container-name: panel;
container-type: size;
display: grid;
grid-area: panel;
grid-auto-flow: row;
grid-auto-rows: min-content;
height: 100%;
padding-left: calc(2 * var(--pixel-size));
padding-right: calc(2 * var(--pixel-size));
row-gap: calc(4 * var(--pixel-size));
width: unset;
@media screen and (max-width: 64rem) {
contain: inline-size layout style paint;
container-type: inline-size;
grid-template-columns: 1fr 1fr;
padding-bottom: calc(2 * var(--pixel-size));
padding-top: calc(2 * var(--pixel-size));
}
#p-logo {
display: none;
}
.vector-menu-portal {
margin: unset;
padding: calc(3 * var(--pixel-size));
position: relative;
.portal-background-wrapper {
display: contents;
.ui-box {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
}
.vector-menu-heading {
background: unset;
color: var(--style-colour-dark);
font-size: calc(4 * var(--pixel-size));
margin-left: unset;
text-align: center;
}
.vector-menu-content {
& li a {
color: var(--style-colour-medium);
&:hover {
color: var(--style-colour-dark);
}
}
}
}
}
}
#content {
contain: inline-size layout style;
container-name: content;
container-type: inline-size;
background-color: var(--style-colour-off-white);
border: unset;
grid-area: content;
margin: unset;
padding: calc(10 * var(--pixel-size));
position: relative;
.content-background-wrapper {
display: contents;
.dialogue-box-background {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
}
.content-body {
contain: inline-size layout style;
& main {
--pixel-size: calc(0.5 * var(--root-pixel-size));
contain: inline-size layout style;
container-type: inline-size;
container-name: main;
image-rendering: crisp-edges;
@supports not (image-rendering: crisp-edges) {
image-rendering: pixelated;
}
}
}
}
}
#mw-data-after-content {
grid-area: data-after;
}
#footer {
contain: inline-size layout style paint;
container-name: footer;
container-type: inline-size;
grid-area: footer;
margin: unset;
padding: unset;
}
#wikigg-footer {
grid-area: wikigg-footer;
}
ol {
counter-reset: list-item -1;
}
ul {
list-style-image: none;
list-style-type: "• ";
}
/* Default styling for all themes */
.theme-dynamic,
.theme-pink,
.theme-aquatic,
.theme-hay,
.theme-ghostly,
.theme-purple,
.theme-temple,
.theme-hell,
.theme-void,
.theme-computer,
.theme-dynamic .style-pink,
.theme-dynamic .style-aquatic,
.theme-dynamic .style-hay,
.theme-dynamic .style-ghostly,
.theme-dynamic .style-purple,
.theme-dynamic .style-temple,
.theme-dynamic .style-hell,
.theme-dynamic .style-void,
.theme-dynamic .style-computer,
.theme-dynamic .style-opheline,
.theme-dynamic .style-robot,
.theme-dynamic .style-gold {
& body {
background-color: var(--style-colour-light);
}
#mw-head {
background-color: var(--style-colour-dark);
}
}