MediaWiki:Common.css

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

:root {
    --color-primary__h: 180;
    --color-primary__s: 60%;
    --color-primary__l: 40%;
}

.mw-ui-button {
	height: 51.5px;
    border-radius: var(--border-radius--pill);
	border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    margin-top: 3px;
}

.mw-inputbox-createbox:required:invalid ~ .mw-ui-button {
    background-color: #aaaaaa;
    color: #ffffff;
    border-color: #aaaaaa;
    cursor: default;
}

.mw-ui-input:not(:disabled):focus {
    border-color: var(--color-primary);
    box-shadow: inset 0 0 0 1px var(--color-primary);
    outline: 1px solid transparent;
    background-color: var(--background-color-quiet--hover);
}

.mw-ui-input:not(:disabled):hover {
    background-color: var(--background-color-quiet--hover);
}

.mw-ui-input:not(:disabled) {
	background-color: rgba(0,0,0,0);
	padding: var(--space-md);
    margin-top: var(--space-lg);
    margin-bottom: var(--space-md);
    margin-left: auto;
    margin-right: auto;
    border: 1px solid;
    border-color: var(--border-color-base--darker);
    border-radius: var(--border-radius--pill);
	border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    cursor: default;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    text-align: center;
    transition-property: background-color, color, border-color, box-shadow;
    transition-duration: 250ms;
	color: var(--color-base);
    accent-color: var(--color-primary);

}

.hatnote-container.error {
	font-size: var(--font-size-medium);
}

.hatnote-container.error .hatnote.error {
	font-size: var(--font-size-medium);
}

.hatnote-container.error .hatnote-icon img {
    width: var(--font-size-large);
    padding-bottom: .2rem;
    filter: invert(54%) sepia(11%) saturate(2824%) hue-rotate(314deg) brightness(90%) contrast(98%);
}

#footer-icons {
    filter: invert(1);
    opacity: var(--opacity-icon-base);
}

.skin-citizen-dark #footer-icons {
    filter: none;
    opacity: initial;
}

#footer-places {
	flex-grow: 1;
}

#footer-places ul {
    align-items: flex-end;
}