MediaWiki:Common.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.
/* CSS placed here will be applied to all skins */
@import url("/wiki/MediaWiki:Common.css/Adjacent level list.css?action=raw&ctype=text/css");
@import url("/wiki/MediaWiki:Common.css/Bunburrows logo.css?action=raw&ctype=text/css");
@import url("/wiki/MediaWiki:Common.css/Dialogue.css?action=raw&ctype=text/css");
@import url("/wiki/MediaWiki:Common.css/Dialogue box background.css?action=raw&ctype=text/css");
@import url("/wiki/MediaWiki:Common.css/Dialogue box name background.css?action=raw&ctype=text/css");
@import url("/wiki/MediaWiki:Common.css/Head icon.css?action=raw&ctype=text/css");
@import url("/wiki/MediaWiki:Common.css/Head selection marker.css?action=raw&ctype=text/css");
@import url("/wiki/MediaWiki:Common.css/Highlight.css?action=raw&ctype=text/css");
@import url("/wiki/MediaWiki:Common.css/Icon.css?action=raw&ctype=text/css");
@import url("/wiki/MediaWiki:Common.css/Infobox.css?action=raw&ctype=text/css");
@import url("/wiki/MediaWiki:Common.css/Input box.css?action=raw&ctype=text/css");
@import url("/wiki/MediaWiki:Common.css/Item list.css?action=raw&ctype=text/css");
@import url("/wiki/MediaWiki:Common.css/Message box.css?action=raw&ctype=text/css");
@import url("/wiki/MediaWiki:Common.css/Search button icon.css?action=raw&ctype=text/css");
@import url("/wiki/MediaWiki:Common.css/Special box background.css?action=raw&ctype=text/css");
@import url("/wiki/MediaWiki:Common.css/Style.css?action=raw&ctype=text/css");
@import url("/wiki/MediaWiki:Common.css/SMB2 font.css?action=raw&ctype=text/css");
@import url("/wiki/MediaWiki:Common.css/Title screen bunny.css?action=raw&ctype=text/css");
@import url("/wiki/MediaWiki:Common.css/Title screen paquerette.css?action=raw&ctype=text/css");
@import url("/wiki/MediaWiki:Common.css/Tooltip.css?action=raw&ctype=text/css");
@import url("/wiki/MediaWiki:Common.css/UI box.css?action=raw&ctype=text/css");
@import url("/wiki/MediaWiki:Common.css/UI select box.css?action=raw&ctype=text/css");
:root {
--root-pixel-size: 0.25rem;
--pixel-size: var(--root-pixel-size);
--tile-size: calc(16 * var(--pixel-size));
}
.pixellated {
font-family: "Super Mario Bros. 2", sans-serif;
font-size: calc(8 * var(--pixel-size));
line-height: 1.875;
}
/* 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 {
/* The colour palette for the style */
--style-colour-black: black; /* Black */
--style-colour-dark: black; /* A dark colour with a biome-dependent hue */
--style-colour-light: black; /* A light colour with a biome-dependent hue */
--style-colour-medium: black; /* A colour with a biome-dependent hue */
--style-colour-off-white: black; /* An off-white colour */
--style-colour-white: black; /* White */
--style-colour-yellow: black; /* The colour of pâquerette's flower's disc florets */
accent-color: var(--style-colour-light);
scrollbar-color: var(--style-colour-dark) var(--style-colour-off-white);
::selection {
background-color: var(--style-colour-medium);
color: var(--style-colour-off-white);
}
& a,
& a .biome-highlight {
color: var(--style-colour-medium);
&:hover,
&:hover .biome-highlight {
color: var(--style-colour-dark);
}
}
& a.new,
& a.new .biome-highlight {
color: red;
}
.adjacent-level-list {
.adjacent-level-list-key {
color: var(--style-colour-dark);
user-select: none;
}
}
.ascend-text-icon {
.ascend-text-icon__dark {
stroke: var(--style-colour-dark);
}
.ascend-text-icon__medium {
stroke: var(--style-colour-medium);
}
.ascend-text-icon__white {
stroke: var(--style-colour-white);
}
}
.biome-highlight {
color: var(--style-colour-light);
}
.bunburrows-logo {
.bunburrows-logo__black {
stroke: var(--style-colour-black);
}
.bunburrows-logo__dark {
stroke: var(--style-colour-dark);
}
.bunburrows-logo__medium {
stroke: var(--style-colour-medium);
}
.bunburrows-logo__light {
stroke: var(--style-colour-light);
}
.bunburrows-logo__off-white {
stroke: var(--style-colour-off-white);
}
.bunburrows-logo__white {
stroke: var(--style-colour-white);
}
.bunburrows-logo__yellow {
stroke: var(--style-colour-yellow);
}
}
.bunny-text-icon {
.bunny-text-icon__outline {
stroke: var(--style-colour-black);
}
.bunny-text-icon__fill {
stroke: var(--style-colour-light);
}
}
.bunny-text-icon-wrapper-white {
.bunny-text-icon__outline {
stroke: var(--style-colour-white);
}
}
.carrot-text-icon {
.carrot-text-icon__medium {
stroke: var(--style-colour-medium);
}
.carrot-text-icon__light {
stroke: var(--style-colour-light);
}
.carrot-text-icon__off-white {
stroke: var(--style-colour-off-white);
}
}
.descend-text-icon {
.descend-text-icon__dark {
stroke: var(--style-colour-dark);
}
.descend-text-icon__medium {
stroke: var(--style-colour-medium);
}
.descend-text-icon__white {
stroke: var(--style-colour-white);
}
}
.dialogue {
.dialogue-line-extra__content {
color: var(--style-colour-light);
}
.dialogue-line__headshot__name {
color: var(--style-colour-light);
}
.dialogue-line__content__text {
color: var(--style-colour-black);
}
}
/* The background of dialogue boxes and various other menus */
.dialogue-box-background {
.dialogue-box-background__border-black {
fill: var(--style-colour-black)
}
.dialogue-box-background__background-light,
.dialogue-box-background__corner-light,
.dialogue-box-background__border-light {
fill: var(--style-colour-light);
}
.dialogue-box-background__border-off-white,
.dialogue-box-background__interior-off-white {
fill: var(--style-colour-off-white);
}
.dialogue-box-background__corner-white {
fill: var(--style-colour-white)
}
}
/* The background of names in dialogue boxes */
.dialogue-box-name-background {
.dialogue-box-background__border-black {
fill: var(--style-colour-black);
}
.dialogue-box-name-background__background-light {
fill: var(--style-colour-light);
}
.dialogue-box-name-background__interior-off-white {
fill: var(--style-colour-off-white);
}
}
.head-icon {
.head-icon__medium {
stroke: var(--style-colour-medium);
}
.head-icon__light {
stroke: var(--style-colour-light);
}
.head-icon__off-white {
stroke: var(--style-colour-off-white);
}
}
/* Headshots within dialogue boxes */
.headshot {
.headshot__black {
stroke: var(--style-colour-black);
}
.headshot__dark {
stroke: var(--style-colour-dark);
}
.headshot__medium {
stroke: var(--style-colour-medium);
}
.headshot__light {
stroke: var(--style-colour-light);
}
.headshot__off-white {
stroke: var(--style-colour-off-white);
}
.headshot__yellow {
stroke: var(--style-colour-yellow);
}
}
.infobox {
color: var(--style-colour-black);
.infobox-heading {
color: var(--style-colour-dark);
}
}
.input-box {
.input-box__border-black {
stroke: var(--style-colour-black);
}
.input-box__interior-white {
stroke: var(--style-colour-white);
}
}
.message-box {
color: var(--style-colour-off-white);
::selection {
background-color: var(--style-colour-light);
}
}
.pickaxe-text-icon {
.pickaxe-text-icon__medium {
stroke: var(--style-colour-medium);
}
.pickaxe-text-icon__light {
stroke: var(--style-colour-light);
}
.pickaxe-text-icon__white {
stroke: var(--style-colour-white);
}
}
.shovel {
.shovel__medium {
stroke: var(--style-colour-medium);
}
.shovel__light {
stroke: var(--style-colour-light);
}
.shovel__off-white {
stroke: var(--style-colour-off-white);
}
}
.shovel-text-icon {
.shovel-text-icon__medium {
stroke: var(--style-colour-medium);
}
.shovel-text-icon__light {
stroke: var(--style-colour-light);
}
.shovel-text-icon__off-white {
stroke: var(--style-colour-off-white);
}
}
/* The background used for the game's icon and some special content on the wiki */
.special-box-background {
.special-box-background__border-black {
fill: var(--style-colour-black)
}
.special-box-background__border-medium,
.special-box-background__interior-medium {
fill: var(--style-colour-medium);
}
.special-box-background__border-light {
fill: var(--style-colour-light);
}
}
.talk-text-icon {
.talk-text-icon__light {
stroke: var(--style-colour-light);
}
.talk-text-icon__white {
stroke: var(--style-colour-white);
}
}
.title-screen-bunny {
.title-screen-bunny__black {
stroke: var(--style-colour-black);
}
.title-screen-bunny__medium {
stroke: var(--style-colour-medium);
}
.title-screen-bunny__light {
stroke: var(--style-colour-light);
}
.title-screen-bunny__off-white {
stroke: var(--style-colour-off-white);
}
}
.title-screen-paquerette {
.title-screen-paquerette__black {
stroke: var(--style-colour-black);
}
.title-screen-paquerette__medium {
stroke: var(--style-colour-medium);
}
.title-screen-paquerette__medium {
stroke: var(--style-colour-medium);
}
.title-screen-paquerette__light {
stroke: var(--style-colour-light);
}
.title-screen-paquerette__off-white {
stroke: var(--style-colour-off-white);
}
.title-screen-paquerette__yellow {
stroke: var(--style-colour-yellow);
}
}
.tooltip {
&:hover,
&:focus {
color: var(--style-colour-light);
&::selection,
::selection {
background-color: var(--style-colour-light);
}
}
.tooltip__underline {
.tooltip-underline {
& line {
stroke: currentColor;
}
}
}
.tooltip__popup-top {
color: var(--style-colour-off-white);
& a:not(.new) {
color: var(--style-colour-light);
}
}
}
.trap-text-icon {
.trap-text-icon__dark {
stroke: var(--style-colour-dark);
}
.trap-text-icon__light {
stroke: var(--style-colour-light);
}
.trap-text-icon__white {
stroke: var(--style-colour-white);
}
}
.ui-box {
.ui-box__border-off-white,
.ui-box__interior-off-white {
fill: var(--style-colour-off-white);
}
.ui-box__border-light {
fill: var(--style-colour-light);
}
}
.ui-select-box {
.ui-select-box__border-medium,
.ui-select-box__interior-medium {
fill: var(--style-colour-medium);
}
.ui-select-box__border-light {
fill: var(--style-colour-light);
}
}
}
/* Dynamic theme defaults for content without a specific biome */
.theme-dynamic {
--style-colour-black: #000000;
--style-colour-dark: #401028;
--style-colour-light: #e981a6;
--style-colour-medium: #9c446e;
--style-colour-off-white: #f8eff0;
--style-colour-white: #ffffff;
--style-colour-yellow: #f6d051;
}
.theme-pink,
.theme-dynamic .style-pink {
--style-colour-black: #000000;
--style-colour-dark: #401028;
--style-colour-light: #e981a6;
--style-colour-medium: #9c446e;
--style-colour-off-white: #f8eff0;
--style-colour-white: #ffffff;
--style-colour-yellow: #f6d051;
}
.theme-aquatic,
.theme-dynamic .style-aquatic {
--style-colour-black: #000000;
--style-colour-dark: #0d2e54;
--style-colour-light: #5594c1;
--style-colour-medium: #295a7d;
--style-colour-off-white: #f8eff0;
--style-colour-white: #ffffff;
--style-colour-yellow: #deb07e;
}
.theme-hay,
.theme-dynamic .style-hay {
--style-colour-black: #000000;
--style-colour-dark: #4c332b;
--style-colour-light: #fdd370;
--style-colour-medium: #c16842;
--style-colour-off-white: #ffffff;
--style-colour-white: #ffffff;
--style-colour-yellow: #fdd370;
.biome-highlight {
color: var(--style-colour-medium);
}
.bunburrows-logo {
.bunburrows-logo__down,
.bunburrows-logo__the {
.bunburrows-logo__medium {
stroke: var(--style-colour-light);
}
.bunburrows-logo__dark {
stroke: var(--style-colour-medium);
}
}
.bunburrows-logo__bunburrows {
.bunburrows-logo__medium {
stroke: var(--style-colour-dark);
}
.bunburrows-logo__light {
stroke: var(--style-colour-medium);
}
}
.bunburrows-logo__bunny {
.bunburrows-logo__medium {
stroke: var(--style-colour-dark);
}
.bunburrows-logo__light {
stroke: var(--style-colour-medium);
}
}
}
.bunny-text-icon {
.bunny-text-icon__fill {
stroke: var(--style-colour-medium);
}
}
.dialogue {
.dialogue-line-extra__content {
color: var(--style-colour-medium);
}
.dialogue-line__headshot__name {
color: var(--style-colour-medium);
}
}
.dialogue-box-background {
.dialogue-box-background__background-light,
.dialogue-box-background__corner-light,
.dialogue-box-background__border-light {
fill: var(--style-colour-medium);
}
}
.dialogue-box-name-background {
.dialogue-box-name-background__background-light {
fill: var(--style-colour-medium);
}
}
.headshot {
.headshot__light {
stroke: var(--style-colour-medium);
}
}
.message-box {
.biome-highlight {
color: var(--style-colour-light);
}
}
.title-screen-bunny {
.title-screen-bunny__light {
stroke: var(--style-colour-medium);
}
}
.title-screen-paquerette {
.title-screen-paquerette__light {
stroke: var(--style-colour-medium);
}
}
.tooltip {
&:hover,
&:focus {
.biome-highlight {
color: var(--style-colour-light);
}
}
}
.ui-box {
.ui-box__border-light {
fill: var(--style-colour-medium);
}
}
}
.theme-ghostly,
.theme-dynamic .style-ghostly {
--style-colour-black: #000000;
--style-colour-dark: #0f413f;
--style-colour-light: #7fdfeb;
--style-colour-medium: #429d9c;
--style-colour-off-white: #eff5f8;
--style-colour-white: #ffffff;
--style-colour-yellow: #f6d051;
}
.theme-purple,
.theme-dynamic .style-purple {
--style-colour-black: #000000;
--style-colour-dark: #11263b;
--style-colour-light: #b98af4;
--style-colour-medium: #5a5b89;
--style-colour-off-white: #f3ecff;
--style-colour-white: #ffffff;
--style-colour-yellow: #cab5be;
}
.theme-temple,
.theme-dynamic .style-temple {
--style-colour-black: #000000;
--style-colour-dark: #404143;
--style-colour-light: #bdbfc0;
--style-colour-medium: #808283;
--style-colour-off-white: #ffffff;
--style-colour-white: #ffffff;
--style-colour-yellow: #67b049;
.opheline-headshot {
.headshot__light {
stroke: var(--style-colour-medium);
}
.headshot__medium {
stroke: var(--style-colour-yellow);
}
.headshot__yellow {
stroke: var(--style-colour-light);
}
}
}
.theme-hell,
.theme-dynamic .style-hell {
--style-colour-black: #000000;
--style-colour-dark: #510a20;
--style-colour-light: #cb2514;
--style-colour-medium: #930d0d;
--style-colour-off-white: #f7edeb;
--style-colour-white: #ffffff;
--style-colour-yellow: #f5c55e;
}
.theme-void,
.theme-dynamic .style-void {
}
.theme-computer,
.theme-dynamic .style-computer {
--style-colour-black: #000000;
--style-colour-dark: #325219;
--style-colour-light: #7dc544;
--style-colour-medium: #648649;
--style-colour-off-white: #ffffff;
--style-colour-white: #ffffff;
--style-colour-yellow: #7dc544;
}
.theme-dynamic .style-opheline {
}
.theme-dynamic .style-robot {
}
.theme-dynamic .style-gold {
}