MediaWiki:Common.css: Difference between revisions

Revision as of 02:40, 16 February 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;
    }

#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)
    }
}

/* skin circle because it gets rather funky with <span>s */
.circle-grid-skin {
    width: 1.25em;
    height: 1.25em;
    border-radius: 50%;
    display: inline-block;
    background-color: #fff;
    opacity: 0.8;
    border: 0.08em solid #222;
    position: absolute;
    top: -0.05em;
    left: 0em;
}

.circle-grid-skin-eye {
    width: 0.18em;
    height: 0.18em;
    border-radius: 50%;
    display: inline-block;
    background-color: #fff;
    border: 0.08em solid #222;
    position: absolute;
    top: 0.45em;
    left: 0.9em;
}