MediaWiki:Common.css: Difference between revisions

Revision as of 09:32, 28 January 2026

/* CSS placed here will be applied to all skins */

:root {
  color-scheme: light dark;
  --color-base: light-dark(#202122, #eaecf0);
  --color-base--hover: light-dark(#404244, #f8f9fa);
  --color-emphasized: light-dark(#101418, #f8f9fa);
  --color-subtle: light-dark(#54595d, #a2a9b1);
  --color-inverted: light-dark(#fff, #101418);
  --color-progressive: light-dark(#36c, #88a3e8);
  --color-progressive--hover: light-dark(#4b77d6, #b0c1f0);
  --color-progressive--active: light-dark(#233566, #cbd6f6);
  --color-destructive: light-dark(#d73333, #fd7865);
  --color-destructive--hover: light-dark(#fc493b, #fea898);
  --color-destructive--active: light-dark(#9f3526, #ffc8bd);
  --color-visited: light-dark(#6a60b0, #a799cd);
  --color-destructive--visited: light-dark(#9f5555, #c99391);
  --color-error: light-dark(#d73333, #fd7865);
  --color-warning: light-dark(#eeb533, #fecc44);
  --color-success: light-dark(#177860, #2cb491);
  --color-notice: light-dark(#202122, #f8f9fa);
  --color-content-added: light-dark(#006400, #80cdb3);
  --color-content-removed: light-dark(#8b0000, #fd7865);
  --color-base--subtle: light-dark(#54595d, #a2a9b1);
  --color-base-fixed: #202122;
  --color-placeholder: #72777d;
  --color-disabled: #72777d;
  --color-inverted-fixed: #fff;
  --filter-invert-icon: 0;
  --filter-invert-primary-button-icon: 1;
  --background-color-base: light-dark(#fff, #101418);
  --background-color-neutral: light-dark(#eaecf0, #27292d);
  --background-color-neutral-subtle: light-dark(#f8f9fa, #202122);
  --background-color-interactive: light-dark(#eaecf0, #27292d);
  --background-color-interactive-subtle: light-dark(#f8f9fa, #202122);
  --background-color-disabled: light-dark(#c8ccd1, #54595d);
  --background-color-disabled-subtle: light-dark(#eaecf0, #404244);
  --background-color-inverted: light-dark(#101418, #f8f9fa);
  --background-color-progressive-subtle: light-dark(#f1f4fd, #233566);
  --background-color-destructive-subtle: light-dark(#ffe9e5, #612419);
  --background-color-error-subtle: light-dark(#ffe9e5, #612419);
  --background-color-warning-subtle: light-dark(#fdf2d5, #453217);
  --background-color-success-subtle: light-dark(#dff2eb, #153d31);
  --background-color-notice-subtle: light-dark(#eaecf0, #27292d);
  --background-color-content-added: light-dark(#a3d3ff, #233566);
  --background-color-content-removed: light-dark(#ffe49c, #453217);
  --background-color-backdrop-light: light-dark(rgba(255,255,255,0.65), rgba(0,0,0,0.65));
  --background-color-backdrop-dark: light-dark(rgba(0,0,0,0.65), rgba(255,255,255,0.65));
  --border-color-base: light-dark(#a2a9b1, #72777d);
  --border-color-subtle: light-dark(#c8ccd1, #54595d);
  --border-color-muted: light-dark(#dadde3, #404244);
  --border-color-interactive: light-dark(#72777d, #a2a9b1);
  --border-color-disabled: light-dark(#c8ccd1, #54595d);
  --border-color-inverted: light-dark(#fff, #101418);
  --border-color-error: light-dark(#9f3526, #fc493b);
  --border-color-warning: light-dark(#987027, #fecc44);
  --border-color-success: light-dark(#196551, #2cb491);
  --border-color-notice: light-dark(#54595d, #c8ccd1);
  --border-color-content-added: light-dark(#a3d3ff, #233566);
  --border-color-content-removed: light-dark(#ffe49c, #987027);
  --box-shadow-color-base: light-dark(#000, #fff);
  --box-shadow-color-inverted: light-dark(#fff, #000);
  --background-color-base-fixed: #fff;
  --background-color-transparent: transparent;
  --border-color-transparent: transparent;
  --border-color-divider: #a2a9b1;
  --opacity-icon-base: 0.87;
  --opacity-icon-base--hover: 0.74;
  --opacity-icon-base--selected: 1;
  --opacity-icon-base--disabled: 0.51;
  --opacity-icon-placeholder: 0.51;
  --opacity-icon-subtle: 0.67;
  --notice-background-verdant: light-dark(#ccffcc,#002900);
  --notice-background-scarlet: light-dark(#ffe5e5,#330000);
  --notice-background: light-dark(#f0f9ff,#0c1b40);
  --notice-border-verdant: light-dark(#99ff99,#005200);
  --notice-border-scarlet: light-dark(#ff9999,#800000);
  --notice-border: light-dark(#bce1fa,#2551c0);
  --pi-border-color: transparent;
}

*:has(.skin-vector-legacy, .skin-modern, .skin-timeless, .skin-cologneblue, .skin-monobook) {
    color-scheme: only light;
}

.client-js .cloptions, :is(h3, h4, h5, h6) .mw-headline + .mw-editsection {
	display: none;
}

.MBW-infobox, .MBW-notice, .MBW-sandbox {
    border: medium solid var(--notice-border);
    background: var(--notice-background);
    border-radius: .5em;
}

.MBW-notices {
    justify-content: center;
    flex-flow: wrap;
    display: flex;
    gap: .5em;
    .MBW-notice {
    	margin: 0 auto .75em auto;
        grid-template: "a b";
        align-items: center;
        border-radius: .5em;
        width: fit-content;
        line-height: 1;
        padding: .5em;
        display: grid;
        gap: inherit;
        &.scarlet {
            background: var(--notice-background-scarlet);
            border-color: var(--notice-border-scarlet);
        }
        &.verdant {
            background: var(--notice-background-verdant);
            border-color: var(--notice-border-verdant);
        }
        .MBW-header {
            font-weight: bold;
            font-size: 125%;
        }
        & + &, &:has(+&) {
            margin: 0;
        }
    }
}

.MBW-infobox {
	text-align: center;
    line-height: 1.5;
    overflow: auto;
    float: right;
    &, .MBW-section, .MBW-separator {
        place-items: center;
        display: grid;
        gap: .5em;
    }
    &, .MBW-separator, .MBW-label, .MBW-value {
        width: 300px;
    }
    .MBW-image, span > a > img {
        height: 100%;
        width: 100%;
    }
    .MBW-label {
        text-transform: uppercase;
        font-weight: bold;
    }
    .MBW-separator {
        font-size: 14px;
        display: flex;
    }
}

.MBW-sandbox {
    text-align: center;
    font-size: 125%;
    padding: .5em;
}

@media screen and (max-width: 720px) {
	.MBW-infobox {
		margin-left: 0;
		width: initial;
		float: none;
	}
}

/* Minecraft tooltips (see MediaWiki:Common.js) */
/* From the BTA! Wiki */
.tooltip {
	image-rendering: optimizeQuality;
	image-rendering: pixelated;
 	z-index: 10;
}

.follow-cursor {
 	position: fixed;
 	z-index: 11;
}

.hidden {
	display: none !important;
}

.animated .animated-hidden {
	display: none !important;
}

.navbox {                     /* Navbox container style */
	box-sizing: border-box;
	border: 1px solid var(--border-color-base,#a2a9b1);
	width: 100%;
	clear: both;
	font-size: 88%;
	text-align: center;
	padding: 1px;
	margin: 1em auto 0;       /* Prevent preceding content from clinging to navboxes */
}
.navbox .navbox {
	margin-top: 0;            /* No top margin for nested navboxes */
}
.navbox + .navbox {
	margin-top: -1px;         /* Single pixel border between adjacent navboxes */
}
.navbox-inner,
.navbox-subgroup {
	width: 100%;
}
.navbox-group,
.navbox-title,
.navbox-abovebelow {
	padding: 0.25em 1em;      /* Title, group and above/below styles */
	line-height: 1.5em;
	text-align: center;
}
th.navbox-group {             /* Group style */
	white-space: nowrap;
	/* @noflip */
	text-align: right;
}
.navbox,
.navbox-subgroup {
	background-color: var(--background-color-base,#fff); /* Background color */
}
.navbox-list {
	line-height: 1.5em;
	border-color: var(--background-color-base,#fff);    /* Must match background color */
}
/* cell spacing for navbox cells */
tr + tr > .navbox-abovebelow,
tr + tr > .navbox-group,
tr + tr > .navbox-image,
tr + tr > .navbox-list {    /* Borders above 2nd, 3rd, etc. rows */
	border-top: 2px solid var(--background-color-base,#fff); /* Must match background color */
}
.navbox th,
.navbox-title {
	background-color: rgba(162,195,255,1);      /* Level 1 color */
}
.navbox-abovebelow,
th.navbox-group,
.navbox-subgroup .navbox-title {
	background-color: rgba(85,85,255,0.2);      /* Level 2 color */
}
.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
	background-color: rgba(85,85,255,0.15);      /* Level 3 color */
}
.navbox-even {
	background-color: var(--background-color-neutral-subtle,#f8f9fa);      /* Even row striping */
}
.navbox-odd {
	background-color: transparent;  /* Odd row striping */
}
.navbox .hlist td dl,
.navbox .hlist td ol,
.navbox .hlist td ul,
.navbox td.hlist dl,
.navbox td.hlist ol,
.navbox td.hlist ul {
	padding: 0.125em 0;       /* Adjust hlist padding in navboxes */
}

/* Default styling for Navbar template */
.navbar {
	display: inline;
	font-size: 88%;
	font-weight: normal;
}
.navbar ul {
	display: inline;
	white-space: nowrap;
}
.mw-body-content .navbar ul {
	line-height: inherit;
}
.navbar li {
	word-spacing: -0.125em;
}
.navbar.mini li abbr[title] {
	font-variant: small-caps;
	border-bottom: none;
	text-decoration: none;
	cursor: inherit;
}
/* Navbar styling when nested in infobox and navbox */
.infobox .navbar {
	font-size: 100%;
}
.navbox .navbar {
	display: block;
	font-size: 100%;
}
.navbox-title .navbar {
	/* @noflip */
	float: left;
	/* @noflip */
	text-align: left;
	/* @noflip */
	margin-right: 0.5em;
}

@media (pointer: coarse), (hover: none) {
    span[title] {
        position: relative;
        display: inline-flex;
        justify-content: center;
    }
    span[title]:focus::after {
        content: attr(title);
        position: absolute;
        top: 90%;
        color: #000;
        background-color: #fff;
        border: 1px solid;
        width: fit-content;
        padding: 3px;
        z-index:999;
        font-size:9pt;
        min-width:105px;
        right:-7px;
    }
}