MediaWiki:Common.css: Difference between revisions

Latest revision as of 11:18, 4 March 2025

/* CSS placed here will be applied to all skins */
/* wiki styling */
body {
    font-family: "Helvetica", "Arial", sans-serif;
    background-color: #e3e8eb; /* from title screen */
}

.mw-body h1,.mw-body .mw-heading1,.mw-body-content h1,.mw-body-content .mw-heading1,.mw-body-content h2,.mw-body-content .mw-heading2 {
    font-family: "Helvetica", "Arial", sans-serif;
    line-height: 1.5em; /* to fix icons getting cut off */
    }

#mw-page-base {
	background-image: linear-gradient(to bottom, #eff5f7 /* title screen made brighter */ 50%, #e3e8eb 100%);
}

.mw-body {
	border: 1px solid #aeb6c2; /* from experiment mode background */
}

.mw-body, .parsoid-body {
    background-color: #fafcfd; /* card color */
    padding: 1em;
}

.mw-content-container {
    max-width: 982px; /* trying to fix 2022 vector width */
}

.vector-menu-tabs-legacy, .vector-menu-tabs-legacy a {
     background-image: linear-gradient(to bottom, rgba(167, 215, 249, 0) 0, #aeb6c2 100%);
 }

.vector-menu-tabs-legacy .selected {
    background: #fafcfd;
}

.vector-menu-tabs-legacy li {
    background-image: linear-gradient(to top, #7f8792 /* adjusted to fit with border color */ 0, #e4f5ff /* reactor background but made way brighter*/ 1px, #eff5f7 100%);
}

/* text/icon styles */
/* choices */
.color-choice {
    display: inline-block;
}

.color-choice span {
    display: inline-block;
    animation: bounce 3s infinite;
    transform-origin: bottom;
    color: #555;
}

.color-choice span:nth-child(1) {
    animation-delay: 0s;
}

.color-choice span:nth-child(2) {
    animation-delay: 1s;
}

.color-choice span:nth-child(3) {
    animation-delay: 2s;
}

@keyframes bounce {
    0% {
        transform: translateY(0);
    }

    15% {
        transform: translateY(-2px);
        color: #aaa;
    }

    30% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(0);
    }
}

/* cloaking */
.color-cloaked {
    letter-spacing: 2px;
    animation: cloak 6s linear infinite alternate;
    color: rgba(0, 0, 0, 0);
}

@keyframes cloak {
    0% {
        text-shadow: 0 0 0 #000;
        opacity: 1;
    }

    50% {
        text-shadow: 0 0 0 #000;
        opacity: 1;
    }

    100% {
        text-shadow: 0 0 15px #000;
        opacity: 0;
    }
}

/* alternate universe */
.alt {
    animation: alt 8s linear infinite alternate;
    font-weight: 400;
    letter-spacing: 1px;
}

@keyframes alt {
    0% {
        text-shadow: 3px 0px 0px;
    }

    100% {
        text-shadow: -3px 0px 0px;
    }

}

/* frequency */
.flicker {
    animation: flicker 4s linear infinite;
}

@keyframes flicker {
    0% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    90% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* undefined */
.lore {
    animation: bgColor 3.5s linear infinite;
}

.lore-text {
    animation: textColor 3s linear infinite;
}


@keyframes bgColor {
    0% {
        background-color: rgb(63, 218, 216)
    }

    10% {
        background-color: rgb(47, 201, 226)
    }

    20% {
        background-color: rgb(28, 127, 238)
    }

    30% {
        background-color: rgb(95, 21, 242)
    }

    40% {
        background-color: rgb(186, 12, 248)
    }

    50% {
        background-color: rgb(251, 7, 217)
    }

    60% {
        background-color: rgb(255, 0, 0)
    }

    70% {
        background-color: rgb(255, 0, 0)
    }

    80% {
        background-color: rgb(255, 154, 0)
    }

    90% {
        background-color: rgb(208, 222, 33)
    }

    100% {
        background-color: rgb(79, 220, 74)
    }
}

@keyframes textColor {
    0% {
        color: rgb(63, 218, 216)
    }

    10% {
        color: rgb(47, 201, 226)
    }

    20% {
        color: rgb(28, 127, 238)
    }

    30% {
        color: rgb(95, 21, 242)
    }

    40% {
        color: rgb(186, 12, 248)
    }

    50% {
        color: rgb(251, 7, 217)
    }

    60% {
        color: rgb(255, 0, 0)
    }

    70% {
        color: rgb(255, 0, 0)
    }

    80% {
        color: rgb(255, 154, 0)
    }

    90% {
        color: rgb(208, 222, 33)
    }

    100% {
        color: rgb(79, 220, 74)
    }
}

/* entanglement */
.flipX {
    animation: 14s anim-flipX linear infinite;
}

@keyframes anim-flipX {
    0% {
        transform: rotateX(0.5turn);
    }

    50% {
        transform: rotateX(1turn);
    }

    100% {
        transform: rotateX(0.5turn);
    }
}

/* stun from c-gon */

.color-stun {
    animation: stun 0.2s linear infinite normal;
}

@keyframes stun {
    0% {
        color: #5b1fb5;
    }

    33% {
        color: #c7bf30;
    }

    67% {
        color: #35c730;
    }

    100% {
        color: #c730b5;
    }
}

/* Infoboxes, from en.wikipedia */
.infobox {
	border: 1px solid #a2a9b1;
	color: black;
	padding: 0.2em;
	font-size: 88%;
	line-height: 1.5em;
	border-spacing: 3px;
}

@media screen {
	.infobox {
		background-color: #f8f9fa;
    }
}

@media (max-width: 640px) {
	.infobox {
		width: 100%;
	}
    
	.infobox .nowrap {
		white-space: normal;
	}
}

@media (min-width: 640px) {
	.infobox {
		/* @noflip */
		margin: 0.5em 0 0.5em 1em;
		/* @noflip */
		float: right;
		/* @noflip */
		clear: right;
		width: 22em;
	}
}

.infobox-header,
.infobox-label,
.infobox-above,
.infobox-full-data,
.infobox-data,
.infobox-below,
.infobox-subheader,
.infobox-image,
.infobox-navbar,
/* Remove element selector when every .infobox thing is using the standard module/templates  */
.infobox th,
.infobox td {
	vertical-align: top;
}

.infobox-label,
.infobox-data,
/* Remove element selector when every .infobox thing is using the standard module/templates  */
.infobox th,
.infobox td {
	/* @noflip */
	text-align: left;
}

/* Remove .infobox when element selectors above are removed */
.infobox .infobox-above,
.infobox .infobox-title,
/* Remove element selector when every .infobox thing is using the standard module/templates  */
.infobox caption {
	font-size: 125%;
	font-weight: bold;
	text-align: center;
}

.infobox-title,
/* Remove element selector when every .infobox thing is using the standard module/templates  */
.infobox caption {
	padding: 0.2em;
}

/* Remove .infobox when element selectors above are removed */
.infobox .infobox-header,
.infobox .infobox-subheader,
.infobox .infobox-image,
.infobox .infobox-full-data,
.infobox .infobox-below {
	text-align: center;
}

/* Remove .infobox when element selectors above are removed */
.infobox .infobox-navbar {
	/* @noflip */
	text-align: right;
}