Basculer la recherche
Basculer le menu
67
1,9 k
13
5,7 k
Nefald
Changer de menu des préférences
Basculer le menu personnel
Non connecté(e)
Votre adresse IP sera visible au public si vous faites des modifications.

« MediaWiki:Citizen.css » : différence entre les versions

Page de l’interface de MediaWiki
Autres actions
Navigation interactive dans l’historique
← Modification précédenteModification suivante →
Hiob (discussion | contributions)
owner
4 144 modifications
RelatedArticles
Balise : Révoqué
Hiob (discussion | contributions)
owner
4 144 modifications
mAucun résumé des modifications
Balise : Révoqué
Ligne 186 : Ligne 186 :
/*
/*
  * ========================================
  * ========================================
  * RELATED ARTICLES - Configuration d'affichage
  * ARTICLES LIÉS - Style capsules simple
  * ========================================
  * ========================================
  */
  */


/* Conteneur principal des articles liés */
/* Conteneur principal - invisible, juste l'espace */
.read-more-container {
.read-more-container {
     display: block !important;
     display: block !important;
     visibility: visible !important;
     visibility: visible !important;
    opacity: 1 !important;
     margin: var(--space-xl) 0;
     margin-top: var(--space-xl);
     background: transparent;
    margin-bottom: var(--space-xl);
     border: none;
    padding: var(--space-lg);
     padding: 0;
    border-top: var(--border-base);
     background: var(--color-surface-2);
     border-radius: var(--border-radius-base);
     position: relative;
}
}


/* Titre de la section */
/* Titre simple */
.read-more-container h2,
.read-more-container h2 {
.read-more-container .read-more-heading {
     font-size: var(--font-size-large);
     font-size: var(--font-size-large);
     font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-normal);
     color: var(--color-base);
     color: var(--color-base);
     margin-bottom: var(--space-md);
     margin: 0 0 var(--space-lg) 0;
     border-bottom: 1px solid var(--border-color-base);
     background: transparent;
     padding-bottom: var(--space-sm);
     border: none;
     text-align: left;
     padding: 0;
}
}


/* Liste des articles liés */
/* Liste en ligne horizontale */
.read-more-container ul,
.read-more-container ul {
.related-articles ul {
     display: flex;
     display: grid;
     flex-wrap: wrap;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: var(--space-md);
     gap: var(--space-md);
     list-style: none;
     list-style: none;
     padding: 0;
     padding: 0;
     margin: 0;
     margin: 0;
    align-items: center;
}
}


/* Cartes individuelles d'articles */
/* Capsules simples */
.read-more-container li,
.read-more-container li {
.related-articles li {
     background: var(--color-surface-2);
     background: var(--color-surface-0);
     border-radius: 24px;
     border: var(--border-base);
     padding: var(--space-sm) var(--space-md);
     border-radius: var(--border-radius-base);
     transition: all 0.2s ease;
    padding: var(--space-md);
    border: none;
     transition: var(--transition-hover);
     box-shadow: none;
     position: relative;
     min-height: auto;
     overflow: hidden;
}
}


.read-more-container li:hover,
.read-more-container li:hover {
.related-articles li:hover {
     background: var(--color-progressive);
     background: var(--color-surface-1);
     transform: none;
     transform: translateY(-2px);
     box-shadow: none;
     box-shadow: var(--box-shadow-dialog);
    border-color: var(--color-progressive);
}
}


/* Liens des articles liés */
/* Liens dans les capsules */
.read-more-container a,
.read-more-container a {
.related-articles a {
    color: var(--color-base);
    text-decoration: none;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-normal);
     display: block;
     display: block;
    text-decoration: none;
     margin: 0;
    color: var(--color-progressive);
     line-height: 1.3;
    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,
.read-more-container li:hover a {
.related-articles a:hover {
     color: var(--color-base--inverted);
     color: var(--color-progressive--hover);
    text-decoration: underline;
}
}


/* Extraits de texte */
/* Masquer les extraits - on veut juste le titre */
.read-more-container .related-article-extract,
.read-more-container .related-article-extract,
.related-articles .extract {
.related-articles .extract {
    font-size: var(--font-size-small);
     display: none;
    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 */
/* Force l'affichage */
.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,
.mw-body-content .read-more-container,
.citizen-body .read-more-container,
.citizen-body .read-more-container,
#bodyContent .read-more-container,
#bodyContent .read-more-container {
.mw-content-container .read-more-container {
     display: block !important;
     display: block !important;
     visibility: visible !important;
     visibility: visible !important;
}
}


/* Effet de chargement */
/* Debug simple */
.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 {
.read-more-container:empty::before {
     content: "🔍 Articles liés (en cours de chargement...)";
     content: "📖 Articles liés (en cours de chargement...)";
     display: block;
     display: block;
     padding: var(--space-md);
     padding: var(--space-sm);
     background: var(--color-warning-subtle);
     color: var(--color-subtle);
    border: 2px dashed var(--color-warning);
    color: var(--color-warning--hover);
    border-radius: var(--border-radius-base);
     font-size: var(--font-size-small);
     font-size: var(--font-size-small);
     text-align: center;
     font-style: italic;
}
}


/* Responsive design */
/* Responsive */
@media (max-width: 768px) {
@media (max-width: 768px) {
     .read-more-container {
     .read-more-container ul {
        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);
         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 {
     .read-more-container li {
         background: var(--color-surface-0);
         padding: var(--space-xs) var(--space-sm);
     }
     }
      
      
     .read-more-container li:hover {
     .read-more-container a {
         background: var(--color-surface-2);
         font-size: var(--font-size-x-small);
     }
     }
}
}
Récupérée de "https://wiki.nefald.fr/MediaWiki:Citizen.css"
Les témoins (''cookies'') nous aident à fournir nos services. En utilisant nos services, vous acceptez notre utilisation de témoins.