Basculer la recherche
Basculer le menu
60
1,9 k
12
5,6 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.

« Modèle:Accueil/shared/styles.css » : différence entre les versions

De Nefald
Autres actions
Navigation interactive dans l’historique
← Modification précédente
Hiob (discussion | contributions)
owner
4 047 modifications
m gap + clean
Balise : Révoqué
Hiob (discussion | contributions)
owner
4 047 modifications
Annulation des modifications 4484 de Hiob (discussion)
Balise : Annulation
 
Ligne 8 : Ligne 8 :
   5. NAVIGATION CARDS
   5. NAVIGATION CARDS
   6. LAYOUT PRINCIPAL
   6. LAYOUT PRINCIPAL
   6b. CADRES (Ce sera ici que nous ajusterons le gap des grilles)
   6b. CADRES
   7. FEATURED ARTICLES
   7. FEATURED ARTICLES
   8. UPDATES
   8. UPDATES
Ligne 26 : Ligne 26 :
     --color-primary: #87bfdb;
     --color-primary: #87bfdb;
     --color-secondary: #eea529;
     --color-secondary: #eea529;
     --color-surface-0: #202122; /* Couleur de fond principale sombre */
     --color-surface-0: #202122;
     --color-surface-1: #27292a; /* Couleur de fond carte */
     --color-surface-1: #27292a;
     --color-surface-2: #2e3031; /* Couleur de fond carte image */
     --color-surface-2: #2e3031;
     --color-base: #eaecf0; /* Texte principal clair */
     --color-base: #eaecf0;
     --color-subtle: #a2a9b1; /* Texte secondaire clair */
     --color-subtle: #a2a9b1;
     --border-color-base: #3f4142; /* Bordure sombre */
     --border-color-base: #3f4142;
    --border-color-subtle: rgba(255, 255, 255, 0.1); /* Bordure très subtile pour mode nuit */
 
     --space-xs: 0.25rem;
     --space-xs: 0.25rem;
     --space-sm: 0.5rem;
     --space-sm: 0.5rem;
Ligne 40 : Ligne 38 :
     --space-xl: 2rem;
     --space-xl: 2rem;
     --space-2xl: 3rem;
     --space-2xl: 3rem;
     --radius-sm: 4px;
     --radius-sm: 4px;
     --radius-md: 8px;
     --radius-md: 8px;
     --radius-lg: 12px;
     --radius-lg: 12px;
     --radius-xl: 16px;
     --radius-xl: 16px;
}
/* Dark mode overrides */
.skin-theme-clientpref-night {
    --color-surface-0: #202122;
    --color-surface-1: #27292a;
    --color-surface-2: #2e3031;
    --color-base: #eaecf0;
    --color-subtle: #a2a9b1;
    --border-color-base: #3f4142;
}
}


Ligne 70 : Ligne 57 :
     padding: 3rem 1.5rem;
     padding: 3rem 1.5rem;
     background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 100%);
     background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 100%);
     border-radius: var(--radius-xl);
     border-radius: 16px;
     overflow: hidden;
     overflow: hidden;
     margin-bottom: var(--space-2xl);
     margin-bottom: 2rem;
}
}


Ligne 99 : Ligne 86 :
     max-width: 400px;
     max-width: 400px;
     height: auto;
     height: auto;
     margin-bottom: var(--space-lg);
     margin-bottom: 1.5rem;
     filter: drop-shadow(0 4px 20px rgba(135, 191, 219, 0.3));
     filter: drop-shadow(0 4px 20px rgba(135, 191, 219, 0.3));
}
}
Ligne 106 : Ligne 93 :
     font-size: 2.5rem;
     font-size: 2.5rem;
     font-weight: 800;
     font-weight: 800;
     margin-bottom: var(--space-md);
     margin-bottom: 1rem;
     color: var(--color-base);
     color: var(--color-base);
     text-shadow: 0 2px 20px rgba(135, 191, 219, 0.4);
     text-shadow: 0 2px 20px rgba(135, 191, 219, 0.4);
Ligne 126 : Ligne 113 :
     margin-left: auto;
     margin-left: auto;
     margin-right: auto;
     margin-right: auto;
     margin-bottom: var(--space-2xl);
     margin-bottom: 2rem;
     padding: var(--space-md) var(--space-lg);
     padding: 1rem 1.5rem;
     background: var(--color-surface-0);
     background: var(--color-surface-0);
     border: 2px solid var(--border-color-base);
     border: 2px solid var(--border-color-base);
Ligne 133 : Ligne 120 :
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
     gap: var(--space-sm);
     gap: 0.5rem;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
}
Ligne 164 : Ligne 151 :


.home-search__kbd {
.home-search__kbd {
     padding: var(--space-xs) var(--space-sm);
     padding: 0.25rem 0.5rem;
     background: var(--color-surface-2);
     background: var(--color-surface-2);
     border: 1px solid var(--border-color-base);
     border: 1px solid var(--border-color-base);
     border-radius: var(--radius-sm);
     border-radius: 4px;
     font-size: 0.75rem;
     font-size: 0.75rem;
     font-family: monospace;
     font-family: monospace;
Ligne 180 : Ligne 167 :
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
     gap: var(--space-md);
     gap: 1rem;
     padding: var(--space-sm) var(--space-lg);
     padding: 0.75rem 1.5rem;
     background: linear-gradient(135deg, rgba(238, 165, 41, 0.1) 0%, rgba(135, 191, 219, 0.1) 100%);
     background: linear-gradient(135deg, rgba(238, 165, 41, 0.1) 0%, rgba(135, 191, 219, 0.1) 100%);
     border-radius: var(--radius-lg);
    border-left: 4px solid var(--color-secondary);
     margin-bottom: var(--space-2xl);
     border-radius: var(--radius-md);
     margin-bottom: 2rem;
    transition: all 0.3s ease;
}
 
.home-event-bar:hover {
    background: linear-gradient(135deg, rgba(238, 165, 41, 0.15) 0%, rgba(135, 191, 219, 0.15) 100%);
    transform: translateX(4px);
}
}


.home-event-bar__icon {
.home-event-bar__icon {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
}
.home-event-bar__content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.home-event-bar__label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
     color: var(--color-secondary);
     color: var(--color-secondary);
     width: 24px;
     padding: 0.25rem 0.5rem;
     height: 24px;
     background: rgba(238, 165, 41, 0.2);
    border-radius: 4px;
}
}


.home-event-bar__text {
.home-event-bar__title {
     flex: 1;
     font-size: 0.95rem;
    font-weight: 600;
     color: var(--color-base);
     color: var(--color-base);
    font-size: 0.9375rem;
    line-height: 1.6;
}
}


.home-event-bar__link {
.home-event-bar__link {
    font-size: 0.875rem;
    font-weight: 600;
     color: var(--color-primary);
     color: var(--color-primary);
    font-weight: 600;
     text-decoration: none;
     text-decoration: none;
    white-space: nowrap;
     transition: color 0.2s;
     transition: color 0.2s;
}
}


.home-event-bar__link:hover {
.home-event-bar__link:hover {
     color: var(--color-base);
     color: var(--color-secondary);
}
 
@media (max-width: 768px) {
    .home-event-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        padding: 1rem;
    }
   
    .home-event-bar__content {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
   
    .home-event-bar__link {
        align-self: flex-end;
    }
}
}


Ligne 215 : Ligne 247 :
   5. NAVIGATION CARDS
   5. NAVIGATION CARDS
   ==================================== */
   ==================================== */
.home-nav {
    margin-bottom: 2rem;
}


.home-nav-grid {
.home-nav-grid {
     display: grid;
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); /* Adapte le nombre de colonnes */
     grid-template-columns: repeat(6, 1fr);
     gap: var(--space-md);
     gap: 1rem;
    margin-bottom: var(--space-2xl);
}
}


.home-nav-card {
.home-nav-card {
     padding: var(--space-md);
    position: relative;
     background: var(--color-surface-1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
     padding: 1.5rem 1rem;
    background: var(--color-surface-0);
     border: 2px solid var(--border-color-base);
     border-radius: var(--radius-lg);
     border-radius: var(--radius-lg);
     text-align: center;
     text-decoration: none;
     transition: all 0.3s;
    color: var(--color-base);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    min-height: 140px;
}
 
.home-nav-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.15;
     transition: opacity 0.3s, transform 0.3s;
}
}


.home-nav-card:hover {
.home-nav-card:hover {
    background: var(--color-surface-2);
     transform: translateY(-4px);
     transform: translateY(-4px);
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border-color: var(--color-primary);
     box-shadow: 0 8px 24px rgba(135, 191, 219, 0.2);
}
 
.home-nav-card:hover::before {
    opacity: 0.25;
    transform: scale(1.05);
}
}


.home-nav-card__icon {
.home-nav-card__icon {
     width: 32px;
     font-size: 2rem;
     height: 32px;
     margin-bottom: 0.75rem;
     margin-bottom: var(--space-sm);
     position: relative;
     color: var(--color-primary);
     z-index: 1;
}
}


.home-nav-card__title {
.home-nav-card__title {
     font-size: 1rem;
     font-size: 1rem;
     font-weight: 700;
     font-weight: 600;
     color: var(--color-base);
     text-align: center;
    position: relative;
    z-index: 1;
}
}


Ligne 256 : Ligne 320 :
.home-container {
.home-container {
     display: grid;
     display: grid;
     grid-template-columns: 2fr 1fr; /* Colonne principale plus large que la sidebar */
     grid-template-columns: 1fr 400px;
     gap: var(--space-xl);
     gap: 2rem;
     margin-bottom: var(--space-2xl);
     margin-bottom: 2rem;
}
}


.home-main-content {
.home-main {
     display: flex;
     display: flex;
     flex-direction: column;
     flex-direction: column;
     gap: var(--space-2xl);
     gap: 2rem;
}
}


.home-sidebar {
.home-sidebar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-content: start;
}
/* ====================================
  6B. CADRES MODULES (Featured, Stats, etc.)
  ==================================== */
.home-featured,
.home-updates,
.home-stats,
.home-social,
.home-links {
    background: var(--color-surface-0);
    border: 1px solid var(--border-color-base);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: border-color 0.3s ease;
}
.home-featured:hover,
.home-updates:hover,
.home-stats:hover,
.home-social:hover,
.home-links:hover {
    border-color: var(--color-primary);
}
/* Titres des sections */
.home-featured__title,
.home-updates__title,
.home-stats__title,
.home-social__title,
.home-links__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-base);
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--border-color-base);
     display: flex;
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: var(--space-2xl);
     gap: 0.5rem;
}
 
.home-featured__title::before {
    content: '⭐';
    font-size: 1.25rem;
}
 
.home-updates__title::before {
    content: '📰';
    font-size: 1.25rem;
}
}


/* ------------------------------------
.home-stats__title::before {
  6b. CADRES (Grids et Cards)
    content: '📊';
  ------------------------------------ */
    font-size: 1.25rem;
}


/* Le 'gap' est défini ici globalement pour tous les conteneurs de grille */
.home-social__title::before {
/* Les règles spécifiques pour le nombre de colonnes se trouvent dans les Media Queries */
     content: '💬';
.home-cards-grid,
     font-size: 1.25rem;
.home-cards-grid-1,
.home-cards-grid-2, /* Ici, la règle par défaut pour la grille de 2 */
.home-cards-grid-3 {
     display: grid;
     gap: var(--space-md); /* Espacement par défaut entre les cartes (1rem / 16px) */
    margin: 0; /* Assure aucun `margin` par défaut qui pourrait interférer */
    width: 100%;
}
}


/* Pour forcer le gap vertical même si d'autres styles essaient de le réduire */
.home-links__title::before {
.home-cards-grid-2 .home-card,
     content: '🔗';
.home-cards-grid-3 .home-card {
     font-size: 1.25rem;
     /* Ce n'est normalement pas nécessaire si le gap fonctionne bien.
      À décommenter et ajuster uniquement en cas de problème persistant. */
     /* margin-bottom: var(--space-md) !important; */
}
}


Ligne 302 : Ligne 409 :


.home-featured {
.home-featured {
     padding: var(--space-lg);
     padding: 1.5rem;
     background: var(--color-surface-0);
     background: var(--color-surface-0);
    border: 2px solid var(--border-color-base);
     border-radius: var(--radius-xl);
     border-radius: var(--radius-xl);
     border: 2px solid var(--border-color-base);
}
 
.home-featured__header {
     display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}
}


.home-featured__title {
.home-featured__title {
     font-size: 1.25rem;
     font-size: 1.5rem;
     font-weight: 700;
     font-weight: 700;
     color: var(--color-base);
     color: var(--color-base);
    margin-bottom: var(--space-md);
}
}


.home-featured__list {
.home-featured__link {
    font-size: 0.875rem;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}
 
.home-featured__link:hover {
    text-decoration: underline;
}
 
.home-featured__grid {
    display: grid;
    gap: 1rem;
}
 
.home-featured-item {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 1rem;
    padding: 1rem;
    background: var(--color-surface-1);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--color-base);
    transition: all 0.3s;
}
 
.home-featured-item:hover {
    background: var(--color-surface-2);
    transform: translateX(4px);
}
 
.home-featured-item__image {
    width: 120px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--radius-md);
}
 
.home-featured-item__content {
     display: flex;
     display: flex;
     flex-direction: column;
     flex-direction: column;
     gap: var(--space-sm);
     justify-content: center;
}
}


.home-featured__item {
.home-featured-item__title {
     display: flex;
     font-size: 1.125rem;
     align-items: center;
     font-weight: 600;
     gap: var(--space-md);
     margin-bottom: 0.5rem;
     color: var(--color-base);
     color: var(--color-base);
    text-decoration: none;
}
}


.home-featured__item:hover {
.home-featured-item__excerpt {
     color: var(--color-primary);
    font-size: 0.875rem;
}
     color: var(--color-subtle);
 
    line-height: 1.5;
.home-featured__icon {
     overflow: hidden;
    width: 24px;
    height: 24px;
     flex-shrink: 0;
}
}


Ligne 344 : Ligne 493 :


.home-updates {
.home-updates {
     background: var(--color-surface-1);
    padding: 1.5rem;
     padding: var(--space-lg);
     background: var(--color-surface-0);
     border: 2px solid var(--border-color-base);
     border-radius: var(--radius-xl);
     border-radius: var(--radius-xl);
     border: 2px solid var(--border-color-base);
}
 
.home-updates__header {
     display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
 
.home-updates__icon {
    font-size: 1.5rem;
}
}


Ligne 354 : Ligne 514 :
     font-weight: 700;
     font-weight: 700;
     color: var(--color-base);
     color: var(--color-base);
    margin-bottom: var(--space-md);
}
}


Ligne 360 : Ligne 519 :
     display: flex;
     display: flex;
     flex-direction: column;
     flex-direction: column;
     gap: var(--space-md);
     gap: 1rem;
}
}


.home-updates__item {
.home-update-item {
     color: var(--color-subtle);
     display: flex;
     font-size: 0.875rem;
    gap: 1rem;
     line-height: 1.6;
    padding: 1rem;
    background: var(--color-surface-1);
    border-radius: var(--radius-lg);
    border-left: 3px solid var(--color-primary);
}
 
.home-update-item__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
     justify-content: center;
    background: rgba(135, 191, 219, 0.15);
    border-radius: 50%;
     font-size: 1.25rem;
}
 
.home-update-item__content {
    flex: 1;
}
}


.home-updates__item a {
.home-update-item__title {
     color: var(--color-primary);
     font-size: 1rem;
     font-weight: 600;
     font-weight: 600;
     text-decoration: none;
     color: var(--color-base);
    margin-bottom: 0.25rem;
}
}


.home-updates__item a:hover {
.home-update-item__text {
     color: var(--color-base);
    font-size: 0.875rem;
     color: var(--color-subtle);
    line-height: 1.5;
}
}


.home-update-item__meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--color-subtle);
}


/* ====================================
/* ====================================
Ligne 385 : Ligne 574 :


.home-stats {
.home-stats {
     background: var(--color-surface-1);
    padding: 1.5rem;
     padding: var(--space-lg);
     background: var(--color-surface-0);
     border: 2px solid var(--border-color-base);
     border-radius: var(--radius-xl);
     border-radius: var(--radius-xl);
    border: 2px solid var(--border-color-base);
}
}


Ligne 395 : Ligne 584 :
     font-weight: 700;
     font-weight: 700;
     color: var(--color-base);
     color: var(--color-base);
     margin-bottom: var(--space-lg); /* Augmentation de l'espacement */
     margin-bottom: 1.5rem;
}
}


Ligne 401 : Ligne 590 :
     display: grid;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     grid-template-columns: repeat(2, 1fr);
     gap: var(--space-md);
     gap: 1rem;
}
}


.home-stat-item {
.home-stat-item {
     padding: var(--space-md);
     padding: 1rem;
     background: var(--color-surface-0); /* Fond plus sombre pour les items stats */
     background: var(--color-surface-1);
     border-radius: var(--radius-lg);
     border-radius: var(--radius-lg);
     text-align: center;
     text-align: center;
    border: 1px solid var(--border-color-base); /* Bordure subtile */
}
}


.home-stats__number {
.home-stats__number {
     font-size: 1.75rem; /* Taille plus grande pour le nombre */
     font-size: 1.5rem;
     font-weight: 700;
     font-weight: 700;
     color: var(--color-primary);
     color: var(--color-primary);
     margin-bottom: var(--space-xs);
     margin-bottom: 0.25rem;
}
}


Ligne 449 : Ligne 637 :


.home-links {
.home-links {
     padding: var(--space-lg);
     padding: 1.5rem;
     background: var(--color-surface-0);
     background: var(--color-surface-0);
     border: 2px solid var(--border-color-base);
     border: 2px solid var(--border-color-base);
Ligne 459 : Ligne 647 :
     font-weight: 700;
     font-weight: 700;
     color: var(--color-base);
     color: var(--color-base);
     margin-bottom: var(--space-md);
     margin-bottom: 1rem;
}
}


Ligne 465 : Ligne 653 :
     display: flex;
     display: flex;
     flex-direction: column;
     flex-direction: column;
     gap: var(--space-sm);
     gap: 0.5rem;
}
}


Ligne 471 : Ligne 659 :
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
     gap: var(--space-md);
     gap: 0.5rem;
     padding: var(--space-sm) var(--space-md);
     padding: 0.75rem;
     background: var(--color-surface-1);
     background: var(--color-surface-1);
     border-radius: var(--radius-md);
     border-radius: var(--radius-md);
Ligne 526 : Ligne 714 :
@media (max-width: 1024px) {
@media (max-width: 1024px) {
     .home-container {
     .home-container {
         grid-template-columns: 1fr; /* Layout principal passe en 1 colonne */
         grid-template-columns: 1fr;
     }
     }
      
      
     .home-sidebar {
     .home-sidebar {
         grid-template-columns: 1fr 1fr; /* Sidebar en 2 colonnes sur tablette */
         grid-template-columns: 1fr 1fr;
     }
     }
      
      
Ligne 542 : Ligne 730 :
      
      
     .home-nav-grid {
     .home-nav-grid {
         grid-template-columns: repeat(4, 1fr); /* Navigation 4 colonnes */
         grid-template-columns: repeat(4, 1fr);
     }
     }
}
}
Ligne 567 : Ligne 755 :
      
      
     .home-nav-grid {
     .home-nav-grid {
         grid-template-columns: repeat(3, 1fr); /* Navigation 3 colonnes */
         grid-template-columns: repeat(3, 1fr);
     }
     }
      
      
     .home-sidebar {
     .home-sidebar {
         grid-template-columns: 1fr; /* Sidebar repasse en 1 colonne */
         grid-template-columns: 1fr;
    }
   
    /* --- CORRECTION GRILLE --- */
    /* L'ensemble des grilles passe en 1 colonne, y compris celles qui étaient à 2 */
    .home-cards-grid,
    .home-cards-grid-2,
    .home-cards-grid-3 {
        grid-template-columns: 1fr; /* Force à 1 colonne pour les petits écrans */
        gap: var(--space-md); /* Maintient le gap vertical par défaut */
    }
   
    /* Si vous avez une disposition spécifique pour la sidebar et le contenu principal */
    .home-layout-with-sidebar,
    .home-main-content,
    .home-sidebar {
        gap: var(--space-md);
     }
     }
}
}
Ligne 597 : Ligne 769 :
      
      
     .home-nav-grid {
     .home-nav-grid {
         grid-template-columns: repeat(2, 1fr); /* Navigation 2 colonnes */
         grid-template-columns: repeat(2, 1fr);
     }
     }
      
      
Ligne 605 : Ligne 777 :
      
      
     .home-stats__grid {
     .home-stats__grid {
         grid-template-columns: 1fr; /* Stats en 1 colonne */
         grid-template-columns: 1fr;
     }
     }
      
      
     .home-stats__number {
     .home-stats__number {
         font-size: 2rem;
         font-size: 2rem;
    }
    /* --- CORRECTION GRILLE --- */
    /* Réduction du gap pour les très petits écrans */
    .home-cards-grid,
    .home-cards-grid-1,
    .home-cards-grid-2,
    .home-cards-grid-3 {
        gap: var(--space-sm); /* Réduit le gap */
    }
   
    .home-layout-with-sidebar,
    .home-main-content,
    .home-sidebar {
        gap: var(--space-sm);
     }
     }
}
}
Récupérée de "https://wiki.nefald.fr/Modèle:Accueil/shared/styles.css"
Les témoins (''cookies'') nous aident à fournir nos services. En utilisant nos services, vous acceptez notre utilisation de témoins.