« MediaWiki:Citizen.css » : différence entre les versions
Page de l’interface de MediaWiki
Autres actions
mAucun résumé des modifications Balise : Révoqué |
revert RlatedArticles Balise : Révocation manuelle |
||
| Ligne 1 : | Ligne 1 : | ||
/* La totalité du CSS placé ici | /* La totalité du CSS placé ici s’appliquera aux utilisateurs de l’habillage Citizen. */ | ||
:root { | :root { | ||
--color-progressive-oklch__h: 230; | |||
--color-progressive-hsl__h: 205; | |||
} | } | ||
| Ligne 14 : | Ligne 14 : | ||
.mw-logo-wordmark, | .mw-logo-wordmark, | ||
.citizen-sticky-header-page-title { | .citizen-sticky-header-page-title { | ||
font-weight: var( --font-weight-medium ); | |||
} | } | ||
| Ligne 20 : | Ligne 20 : | ||
h5, | h5, | ||
h6 { | h6 { | ||
letter-spacing: 0.0125em; | |||
} | } | ||
| Ligne 29 : | Ligne 29 : | ||
.mw-logo-icon { | .mw-logo-icon { | ||
opacity: var( --opacity-icon-base ); | |||
filter: var( --filter-invert ); | |||
} | } | ||
/* | /* | ||
| Ligne 39 : | Ligne 40 : | ||
/* Remove bottom spacing as it is handled in footer portlet */ | /* Remove bottom spacing as it is handled in footer portlet */ | ||
.citizen-drawer__menu { | .citizen-drawer__menu { | ||
margin-bottom: 0; | |||
padding-bottom: 0; | |||
} | } | ||
.mw-portlet-External { | .mw-portlet-External { | ||
position: sticky; | |||
bottom: 0; | |||
margin-top: var( --space-md ); | |||
margin-inline: calc( var( --space-xs ) * -1 ); | |||
padding: var( --space-xs ); | padding: var( --space-xs ); | ||
border-top: var( --border-base ); | |||
backdrop-filter: var( --backdrop-filter-frosted-glass ); | |||
font-size: var( --font-size-x-small ); | |||
grid-column: 1 / -1; | |||
white-space: nowrap; | |||
} | } | ||
.mw-portlet-External .citizen-menu__heading { | .mw-portlet-External .citizen-menu__heading { | ||
display: none; | |||
} | } | ||
.mw-portlet-External ul { | .mw-portlet-External ul { | ||
display: flex; | |||
overflow: auto; | |||
} | } | ||
.mw-portlet-External .mw-list-item a { | .mw-portlet-External .mw-list-item a { | ||
gap: 0; | |||
} | } | ||
/* Label */ | /* Label */ | ||
.citizen-drawer__menu [id^="n-sidebar-label-"] a { | .citizen-drawer__menu [id^="n-sidebar-label-"] a { | ||
pointer-events: none; | |||
margin-left: var( --space-xs ); | margin-left: var( --space-xs ); | ||
padding-left: var( --space-md ); | padding-left: var( --space-md ); | ||
padding-right: var( --space-xs ); | |||
border-left: 1px solid var( --border-color-base ); | |||
border-radius: 0; | border-radius: 0; | ||
letter-spacing: 0.05em; | letter-spacing: 0.05em; | ||
| Ligne 84 : | Ligne 85 : | ||
/* Icons */ | /* Icons */ | ||
.citizen-drawer__menu [id^="n-sidebar-icon-"] a { | .citizen-drawer__menu [id^="n-sidebar-icon-"] a { | ||
font-size: 0; | |||
content-visibility: auto; | content-visibility: auto; | ||
} | } | ||
.citizen-drawer__menu [id^="n-sidebar-icon-"] a:before { | .citizen-drawer__menu [id^="n-sidebar-icon-"] a:before { | ||
display: block; | |||
content: ""; | content: ""; | ||
width: var( --size-icon ); | width: var( --size-icon ); | ||
height: var( --size-icon ); | height: var( --size-icon ); | ||
background-color: currentColor; | background-color: currentColor; | ||
mask-size: contain; | |||
mask-repeat: no-repeat; | |||
mask-position: center; | |||
} | } | ||
#n-sidebar-icon-discord a:before { | #n-sidebar-icon-discord a:before { | ||
mask-image: url( https://wiki.nefald.fr/images/9/9c/Discord_Icons.svg ); | |||
} | } | ||
#n-sidebar-icon-twitter a:before { | #n-sidebar-icon-twitter a:before { | ||
mask-image: url( https://media.starcitizen.tools/6/6a/Twitter_-_Simple_Icons.svg ); | |||
} | } | ||
#n-sidebar-icon-mastodon a:before { | #n-sidebar-icon-mastodon a:before { | ||
mask-image: url( https://media.starcitizen.tools/d/de/Mastodon_-_Simple_Icons.svg ); | |||
} | } | ||
#n-sidebar-icon-threads a:before { | #n-sidebar-icon-threads a:before { | ||
mask-image: url( https://media.starcitizen.tools/9/9b/Threads_-_Simple_Icons.svg ); | |||
} | } | ||
#n-sidebar-icon-bluesky a:before { | #n-sidebar-icon-bluesky a:before { | ||
mask-image: url( https://media.starcitizen.tools/8/8b/Bluesky_-_Simple_Icons.svg ); | |||
} | } | ||
#n-sidebar-icon-patreon a:before { | #n-sidebar-icon-patreon a:before { | ||
mask-image: url( https://media.starcitizen.tools/e/e9/Patreon_-_Simple_Icons.svg ); | |||
} | } | ||
#n-sidebar-icon-kofi a:before { | #n-sidebar-icon-kofi a:before { | ||
mask-image: url( https://media.starcitizen.tools/4/48/Kofi_-_Simple_Icons.svg ); | |||
} | } | ||
#n-sidebar-icon-github a:before { | #n-sidebar-icon-github a:before { | ||
mask-image: url( https://media.starcitizen.tools/8/85/Github_-_Simple_Icons.svg ); | |||
} | } | ||
#n-sidebar-icon-reddit a:before { | #n-sidebar-icon-reddit a:before { | ||
mask-image: url( https://media.starcitizen.tools/e/e8/Reddit_-_Simple_Icons.svg ); | |||
} | } | ||
/* Footer changes */ | /* Footer changes */ | ||
.citizen-footer { | .citizen-footer { | ||
padding-block: 6rem; | |||
background-color: transparent; | |||
} | } | ||
.citizen-footer__siteinfo { | .citizen-footer__siteinfo { | ||
justify-content: space-between; | |||
} | } | ||
.citizen-footer__sitetitle mw-logo-icon { | .citizen-footer__sitetitle mw-logo-icon { | ||
display: none; | |||
} | } | ||
/*.citizen-footer__sitetitle .mw-logo-wordmark { | /*.citizen-footer__sitetitle .mw-logo-wordmark { | ||
display: none; | |||
}*/ | }*/ | ||
| Ligne 158 : | Ligne 160 : | ||
*/ | */ | ||
#footer-icons a { | #footer-icons a { | ||
border: 0; | |||
padding: 0; | |||
background: transparent; | |||
opacity: var( --opacity-icon-base ); | |||
transition: opacity 250ms ease; | |||
} | } | ||
#footer-icons a:hover { | #footer-icons a:hover { | ||
opacity: var( --opacity-icon-base--hover ); | |||
} | } | ||
#footer-icons a:active { | #footer-icons a:active { | ||
opacity: var( --opacity-icon-base--active ); | |||
} | } | ||
| Ligne 176 : | Ligne 178 : | ||
#footer-icons ul, | #footer-icons ul, | ||
#footer-icons li { | #footer-icons li { | ||
column-gap: var( --space-md ); | |||
} | } | ||
#footer-icons img { | #footer-icons img { | ||
width: auto; | |||
height: 32px; | |||
} | } | ||