MediaWiki:Citizen.css

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)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* All CSS here will be loaded for users of the Citizen skin */

/* Footer changes */
.citizen-footer {
	padding-block: 6rem;
	background-color: transparent;
}

.citizen-footer__siteinfo {
	justify-content: space-between;
}

.citizen-footer__sitetitle .mw-logo-wordmark {
	display: none;
}

/*
 * Footer icons
 * We use custom footer icons so we need to fine tune it
*/
#footer-icons a {
	border: 0;
	padding: 0;
	background: transparent;
	opacity: var(--opacity-icon-base);
	transition: opacity 250ms ease;
}

#footer-icons a:hover {
	opacity: var(--opacity-icon-base--hover);
}

#footer-icons a:active {
	opacity: var(--opacity-icon-base--active);
}

/* More space between icons */
#footer-icons ul,
#footer-icons li {
	column-gap: var(--space-md);
}

#footer-icons img {
	width: auto;
	height: 32px;
}

/* Darken the footer icon in light mode */
.skin-citizen-light #footer-icons a {
	filter: invert(1) hue-rotate(180deg);
}

/* disable Citizen header button hover animations */
@media screen {
    /* logo */
    .citizen-header__logo .citizen-header__button:hover .mw-logo-icon,
    .citizen-header__logo .citizen-header__button:hover .citizen-ui-icon {
        transform: none;
    }

    .citizen-header__logo .citizen-header__button:hover .mw-logo-icon {
        opacity: 1;
    }

    .citizen-header__logo .citizen-header__button:hover .citizen-ui-icon {
        opacity: 0;
    }

    /* search */
    .citizen-search .citizen-dropdown-summary:hover > .citizen-ui-icon > span:first-child {
        height: 0.5rem;
        transform: rotate(-45deg);
    }

    /* drawer */
    .citizen-drawer .citizen-dropdown-summary:hover > .citizen-ui-icon > span:first-child {
        transform: none;
    }
}

@media screen and (hover: hover) {
    /* skin preferences */
    :is(a, button, summary):hover .citizen-ui-icon.mw-ui-icon-wikimedia-configure {
        transform: none;
    }
}