« MediaWiki:Citizen.css » : différence entre les versions
Page de l’interface de MediaWiki
Autres actions
Aucun résumé des modifications |
RelatedArticles Balise : Révoqué |
||
| 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 40 : | Ligne 39 : | ||
/* 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 85 : | Ligne 84 : | ||
/* 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 160 : | Ligne 158 : | ||
*/ | */ | ||
#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 178 : | Ligne 176 : | ||
#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; | |||
} | |||
/* | |||
* ======================================== | |||
* RELATED ARTICLES - Configuration d'affichage | |||
* ======================================== | |||
*/ | |||
/* Conteneur principal des articles liés */ | |||
.read-more-container { | |||
display: block !important; | |||
visibility: visible !important; | |||
opacity: 1 !important; | |||
margin-top: var(--space-xl); | |||
margin-bottom: var(--space-xl); | |||
padding: var(--space-lg); | |||
border-top: var(--border-base); | |||
background: var(--color-surface-2); | |||
border-radius: var(--border-radius-base); | |||
position: relative; | |||
} | |||
/* Titre de la section */ | |||
.read-more-container h2, | |||
.read-more-container .read-more-heading { | |||
font-size: var(--font-size-large); | |||
font-weight: var(--font-weight-medium); | |||
color: var(--color-base); | |||
margin-bottom: var(--space-md); | |||
border-bottom: 1px solid var(--border-color-base); | |||
padding-bottom: var(--space-sm); | |||
text-align: left; | |||
} | |||
/* Liste des articles liés */ | |||
.read-more-container ul, | |||
.related-articles ul { | |||
display: grid; | |||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |||
gap: var(--space-md); | |||
list-style: none; | |||
padding: 0; | |||
margin: 0; | |||
} | |||
/* Cartes individuelles d'articles */ | |||
.read-more-container li, | |||
.related-articles li { | |||
background: var(--color-surface-0); | |||
border: var(--border-base); | |||
border-radius: var(--border-radius-base); | |||
padding: var(--space-md); | |||
transition: var(--transition-hover); | |||
position: relative; | |||
overflow: hidden; | |||
} | |||
.read-more-container li:hover, | |||
.related-articles li:hover { | |||
background: var(--color-surface-1); | |||
transform: translateY(-2px); | |||
box-shadow: var(--box-shadow-dialog); | |||
border-color: var(--color-progressive); | |||
} | |||
/* Liens des articles liés */ | |||
.read-more-container a, | |||
.related-articles a { | |||
display: block; | |||
text-decoration: none; | |||
color: var(--color-progressive); | |||
font-weight: var(--font-weight-medium); | |||
margin-bottom: var(--space-xs); | |||
font-size: var(--font-size-medium); | |||
line-height: 1.4; | |||
} | |||
.read-more-container a:hover, | |||
.related-articles a:hover { | |||
color: var(--color-progressive--hover); | |||
text-decoration: underline; | |||
} | |||
/* Extraits de texte */ | |||
.read-more-container .related-article-extract, | |||
.related-articles .extract { | |||
font-size: var(--font-size-small); | |||
color: var(--color-subtle); | |||
line-height: 1.5; | |||
margin-top: var(--space-xs); | |||
display: -webkit-box; | |||
-webkit-line-clamp: 3; | |||
-webkit-box-orient: vertical; | |||
overflow: hidden; | |||
} | |||
/* Positionnement dans le footer */ | |||
.citizen-footer .read-more-container { | |||
margin-top: 0; | |||
margin-bottom: var(--space-xl); | |||
order: -1; /* Afficher avant les autres éléments du footer */ | |||
} | |||
/* Force l'affichage même si masqué */ | |||
.mw-body-content .read-more-container, | |||
.citizen-body .read-more-container, | |||
#bodyContent .read-more-container, | |||
.mw-content-container .read-more-container { | |||
display: block !important; | |||
visibility: visible !important; | |||
} | |||
/* Effet de chargement */ | |||
.read-more-container[data-loading="true"] { | |||
opacity: 0.7; | |||
pointer-events: none; | |||
} | |||
.read-more-container[data-loading="true"]::after { | |||
content: ""; | |||
position: absolute; | |||
top: 50%; | |||
left: 50%; | |||
width: 20px; | |||
height: 20px; | |||
margin: -10px 0 0 -10px; | |||
border: 2px solid var(--color-progressive); | |||
border-radius: 50%; | |||
border-top-color: transparent; | |||
animation: spin 1s linear infinite; | |||
} | |||
@keyframes spin { | |||
to { | |||
transform: rotate(360deg); | |||
} | |||
} | |||
/* Debug : bordure rouge temporaire pour voir les conteneurs vides */ | |||
.read-more-container:empty::before { | |||
content: "🔍 Articles liés (en cours de chargement...)"; | |||
display: block; | |||
padding: var(--space-md); | |||
background: var(--color-warning-subtle); | |||
border: 2px dashed var(--color-warning); | |||
color: var(--color-warning--hover); | |||
border-radius: var(--border-radius-base); | |||
font-size: var(--font-size-small); | |||
text-align: center; | |||
} | |||
/* Responsive design */ | |||
@media (max-width: 768px) { | |||
.read-more-container { | |||
margin-inline: calc(var(--space-md) * -1); | |||
border-radius: 0; | |||
padding: var(--space-md); | |||
} | |||
.read-more-container ul, | |||
.related-articles ul { | |||
grid-template-columns: 1fr; | |||
gap: var(--space-sm); | |||
} | |||
.read-more-container li, | |||
.related-articles li { | |||
padding: var(--space-sm); | |||
} | |||
.read-more-container h2, | |||
.read-more-container .read-more-heading { | |||
font-size: var(--font-size-medium); | |||
margin-bottom: var(--space-sm); | |||
} | |||
} | |||
@media (max-width: 480px) { | |||
.read-more-container { | |||
margin-top: var(--space-lg); | |||
margin-bottom: var(--space-lg); | |||
padding: var(--space-sm); | |||
} | |||
.read-more-container .related-article-extract, | |||
.related-articles .extract { | |||
-webkit-line-clamp: 2; | |||
} | |||
} | |||
/* Intégration spécifique au thème Citizen */ | |||
.citizen-page-container .read-more-container { | |||
max-width: none; | |||
width: 100%; | |||
} | |||
/* Style pour les thèmes sombres */ | |||
@media (prefers-color-scheme: dark) { | |||
.read-more-container { | |||
background: var(--color-surface-1); | |||
border-color: var(--border-color-base); | |||
} | |||
.read-more-container li { | |||
background: var(--color-surface-0); | |||
} | |||
.read-more-container li:hover { | |||
background: var(--color-surface-2); | |||
} | |||
} | } | ||