(Created page with "→All CSS here will be loaded for users of the Citizen skin: :root { --color-primary__h: 205; } :root.skin-citizen-dark { --color-primary__l: 56%; } →Align icon opacity with skin default: .mw-logo-icon { opacity: var( --opacity-icon-base ); } →Footer icons: #footer-icons a { opacity: var( --opacity-icon-base ); transition: opacity 250ms ease; } #footer-icons a:hover { opacity: var( --opacity-icon-base--hover ); } #footer-icons a:active { opacity: v...") |
No edit summary |
||
(6 intermediate revisions by the same user not shown) | |||
Line 6: | Line 6: | ||
:root.skin-citizen-dark { | :root.skin-citizen-dark { | ||
--color-primary__l: 56%; | --color-primary__l: 56%; | ||
} | } | ||
Line 30: | Line 25: | ||
#footer-icons ul { | #footer-icons ul { | ||
gap: var( --space-md ); | gap: var( --space-md ); | ||
} | } | ||
/* Darken the footer icon in light mode */ | /* Darken the footer icon in light mode */ | ||
.skin-citizen-light #footer-icons a { | .skin-citizen-light #footer-icons a { | ||
filter: invert( 1 ) hue-rotate( 180deg ); | filter: invert( 1 ) hue-rotate( 180deg ); | ||
} | } | ||
Line 52: | Line 37: | ||
/* Hide main page header */ | /* Hide main page header */ | ||
.page- | .page-Main_Page .mw-body-header { | ||
display: none; | display: none; | ||
} | } | ||
Latest revision as of 23:38, 12 February 2023
/* All CSS here will be loaded for users of the Citizen skin */ :root { --color-primary__h: 205; } :root.skin-citizen-dark { --color-primary__l: 56%; } /* Footer icons */ #footer-icons a { 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 { gap: var( --space-md ); } /* Darken the footer icon in light mode */ .skin-citizen-light #footer-icons a { filter: invert( 1 ) hue-rotate( 180deg ); } .mw-empty-elt { display: none; } /* Hide main page header */ .page-Main_Page .mw-body-header { display: none; }