« MediaWiki:Citizen.css » : différence entre les versions
Page de l’interface de MediaWiki
Autres actions
Page créée avec « →La totalité du CSS placé ici s’appliquera aux utilisateurs de l’habillage Citizen. : →Mode Clair (par défaut) : .citizen-header__logo { color: #000000; →Couleur noire pour le mode clair : } →Mode Sombre : .skin-citizen-dark .citizen-header__logo { color: #ffffff; →Couleur blanche pour le mode sombre : } » |
Aucun résumé des modifications |
||
| Ligne 8 : | Ligne 8 : | ||
.skin-citizen-dark .citizen-header__logo { | .skin-citizen-dark .citizen-header__logo { | ||
color: #ffffff; /* Couleur blanche pour le mode sombre */ | color: #ffffff; /* Couleur blanche pour le mode sombre */ | ||
} | |||
/* Le CSS placé ici sera appliqué à tous les habillages. */ | |||
/* Main Logo */ | |||
.citizen-header__logo { | |||
filter: var(--filter-invert); | |||
} | |||
/* | |||
* Menu | |||
* Rich format menu to have more hierarchy | |||
*/ | |||
/* Remove bottom spacing as it is handled in footer portlet */ | |||
.citizen-drawer__menu { | |||
margin-bottom: 0; | |||
padding-bottom: 0; | |||
} | |||
.mw-portlet-External { | |||
position: sticky; | |||
bottom: 0; | |||
margin-top: var( --space-md ); | |||
margin-inline: calc( var( --space-xs ) * -1 ); | |||
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 { | |||
display: none; | |||
} | |||
.mw-portlet-External ul { | |||
display: flex; | |||
overflow: auto; | |||
} | |||
.mw-portlet-External .mw-list-item a { | |||
gap: 0; | |||
} | |||
/* Label */ | |||
.citizen-drawer__menu [id^="n-sidebar-label-"] a { | |||
pointer-events: none; | |||
margin-left: var( --space-xs ); | |||
padding-left: var( --space-md ); | |||
padding-right: var( --space-xs ); | |||
border-left: 1px solid var( --border-color-base ); | |||
border-radius: 0; | |||
letter-spacing: 0.05em; | |||
font-weight: var( --font-weight-normal ); | |||
color: var( --color-subtle ) !important; | |||
} | |||
/* Icons */ | |||
.citizen-drawer__menu [id^="n-sidebar-icon-"] a { | |||
font-size: 0; | |||
content-visibility: auto; | |||
} | |||
.citizen-drawer__menu [id^="n-sidebar-icon-"] a:before { | |||
display: block; | |||
content: ""; | |||
width: var( --size-icon ); | |||
height: var( --size-icon ); | |||
background-color: currentColor; | |||
mask-size: contain; | |||
mask-repeat: no-repeat; | |||
mask-position: center; | |||
} | |||
#n-sidebar-icon-discord a:before { | |||
mask-image: url( https://media.starcitizen.tools/7/77/Discord_-_Simple_Icons.svg ); | |||
} | |||
#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 { | |||
mask-image: url( https://media.starcitizen.tools/d/de/Mastodon_-_Simple_Icons.svg ); | |||
} | |||
#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 { | |||
mask-image: url( https://media.starcitizen.tools/8/8b/Bluesky_-_Simple_Icons.svg ); | |||
} | |||
#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 { | |||
mask-image: url( https://media.starcitizen.tools/4/48/Kofi_-_Simple_Icons.svg ); | |||
} | |||
#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 { | |||
mask-image: url( https://media.starcitizen.tools/e/e8/Reddit_-_Simple_Icons.svg ); | |||
} | |||
/* 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; | |||
} | } | ||