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.

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

De Nefald
Autres actions
Navigation interactive dans l’historique
← Modification précédenteModification suivante →
Hiob (discussion | contributions)
owner
4 144 modifications
Aucun résumé des modifications
Hiob (discussion | contributions)
owner
4 144 modifications
m gap + clean
Balise : Révoqué
Ligne 8 : Ligne 8 :
   5. NAVIGATION CARDS
   5. NAVIGATION CARDS
   6. LAYOUT PRINCIPAL
   6. LAYOUT PRINCIPAL
   6b. CADRES
   6b. CADRES (Ce sera ici que nous ajusterons le gap des grilles)
   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;
     --color-surface-0: #202122; /* Couleur de fond principale sombre */
     --color-surface-1: #27292a;
     --color-surface-1: #27292a; /* Couleur de fond carte */
     --color-surface-2: #2e3031;
     --color-surface-2: #2e3031; /* Couleur de fond carte image */
     --color-base: #eaecf0;
     --color-base: #eaecf0; /* Texte principal clair */
     --color-subtle: #a2a9b1;
     --color-subtle: #a2a9b1; /* Texte secondaire clair */
     --border-color-base: #3f4142;
     --border-color-base: #3f4142; /* Bordure sombre */
    --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 38 : Ligne 40 :
     --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 57 : Ligne 70 :
     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: 16px;
     border-radius: var(--radius-xl);
     overflow: hidden;
     overflow: hidden;
     margin-bottom: 2rem;
     margin-bottom: var(--space-2xl);
}
}


Ligne 86 : Ligne 99 :
     max-width: 400px;
     max-width: 400px;
     height: auto;
     height: auto;
     margin-bottom: 1.5rem;
     margin-bottom: var(--space-lg);
     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 93 : Ligne 106 :
     font-size: 2.5rem;
     font-size: 2.5rem;
     font-weight: 800;
     font-weight: 800;
     margin-bottom: 1rem;
     margin-bottom: var(--space-md);
     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 113 : Ligne 126 :
     margin-left: auto;
     margin-left: auto;
     margin-right: auto;
     margin-right: auto;
     margin-bottom: 2rem;
     margin-bottom: var(--space-2xl);
     padding: 1rem 1.5rem;
     padding: var(--space-md) var(--space-lg);
     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 120 : Ligne 133 :
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
     gap: 0.5rem;
     gap: var(--space-sm);
     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 151 : Ligne 164 :


.home-search__kbd {
.home-search__kbd {
     padding: 0.25rem 0.5rem;
     padding: var(--space-xs) var(--space-sm);
     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: 4px;
     border-radius: var(--radius-sm);
     font-size: 0.75rem;
     font-size: 0.75rem;
     font-family: monospace;
     font-family: monospace;
Ligne 167 : Ligne 180 :
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
     gap: 1rem;
     gap: var(--space-md);
     padding: 0.75rem 1.5rem;
     padding: var(--space-sm) var(--space-lg);
     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-left: 4px solid var(--color-secondary);
     border-radius: var(--radius-lg);
     border-radius: var(--radius-md);
     margin-bottom: var(--space-2xl);
     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;
     color: var(--color-secondary);
     line-height: 1;
     width: 24px;
     flex-shrink: 0;
     height: 24px;
}
}


.home-event-bar__content {
.home-event-bar__text {
     flex: 1;
     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);
    padding: 0.25rem 0.5rem;
    background: rgba(238, 165, 41, 0.2);
    border-radius: 4px;
}
.home-event-bar__title {
    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;
     color: var(--color-primary);
     font-weight: 600;
     font-weight: 600;
    color: var(--color-primary);
     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-secondary);
     color: var(--color-base);
}
 
@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 247 : Ligne 215 :
   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(6, 1fr);
     grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); /* Adapte le nombre de colonnes */
     gap: 1rem;
     gap: var(--space-md);
    margin-bottom: var(--space-2xl);
}
}


.home-nav-card {
.home-nav-card {
    position: relative;
     padding: var(--space-md);
    display: flex;
     background: var(--color-surface-1);
    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-decoration: none;
     text-align: center;
    color: var(--color-base);
     transition: all 0.3s;
     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);
    border-color: var(--color-primary);
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
     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 {
     font-size: 2rem;
     width: 32px;
     margin-bottom: 0.75rem;
    height: 32px;
     position: relative;
     margin-bottom: var(--space-sm);
    z-index: 1;
     color: var(--color-primary);
}
}


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


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


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


.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;
     align-items: center;
     flex-direction: column;
     gap: 0.5rem;
     gap: var(--space-2xl);
}
}


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


.home-updates__title::before {
/* Le 'gap' est défini ici globalement pour tous les conteneurs de grille */
    content: '📰';
/* Les règles spécifiques pour le nombre de colonnes se trouvent dans les Media Queries */
    font-size: 1.25rem;
.home-cards-grid,
}
.home-cards-grid-1,
 
.home-cards-grid-2, /* Ici, la règle par défaut pour la grille de 2 */
.home-stats__title::before {
.home-cards-grid-3 {
     content: '📊';
     display: grid;
     font-size: 1.25rem;
     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%;
.home-social__title::before {
     content: '💬';
     font-size: 1.25rem;
}
}


.home-links__title::before {
/* Pour forcer le gap vertical même si d'autres styles essaient de le réduire */
     content: '🔗';
.home-cards-grid-2 .home-card,
     font-size: 1.25rem;
.home-cards-grid-3 .home-card {
     /* 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 409 : Ligne 302 :


.home-featured {
.home-featured {
     padding: 1.5rem;
     padding: var(--space-lg);
     background: var(--color-surface-0);
     background: var(--color-surface-0);
    border-radius: var(--radius-xl);
     border: 2px solid var(--border-color-base);
     border: 2px solid var(--border-color-base);
    border-radius: var(--radius-xl);
}
.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.5rem;
     font-size: 1.25rem;
     font-weight: 700;
     font-weight: 700;
     color: var(--color-base);
     color: var(--color-base);
    margin-bottom: var(--space-md);
}
}


.home-featured__link {
.home-featured__list {
     font-size: 0.875rem;
     display: flex;
     color: var(--color-primary);
    flex-direction: column;
    text-decoration: none;
     gap: var(--space-sm);
    font-weight: 600;
}
}


.home-featured__link:hover {
.home-featured__item {
    text-decoration: underline;
     display: flex;
}
     align-items: center;
 
     gap: var(--space-md);
.home-featured__grid {
     color: var(--color-base);
     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;
     text-decoration: none;
    color: var(--color-base);
    transition: all 0.3s;
}
}


.home-featured-item:hover {
.home-featured__item:hover {
     background: var(--color-surface-2);
     color: var(--color-primary);
    transform: translateX(4px);
}
}


.home-featured-item__image {
.home-featured__icon {
     width: 120px;
     width: 24px;
     height: 80px;
     height: 24px;
    object-fit: cover;
     flex-shrink: 0;
    border-radius: var(--radius-md);
}
 
.home-featured-item__content {
    display: flex;
     flex-direction: column;
    justify-content: center;
}
 
.home-featured-item__title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--color-base);
}
 
.home-featured-item__excerpt {
    font-size: 0.875rem;
    color: var(--color-subtle);
    line-height: 1.5;
    overflow: hidden;
}
}


Ligne 493 : Ligne 344 :


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


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


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


.home-update-item {
.home-updates__item {
     display: flex;
     color: var(--color-subtle);
    gap: 1rem;
     font-size: 0.875rem;
    padding: 1rem;
     line-height: 1.6;
    background: var(--color-surface-1);
     border-radius: var(--radius-lg);
     border-left: 3px solid var(--color-primary);
}
}


.home-update-item__icon {
.home-updates__item a {
     flex-shrink: 0;
     color: var(--color-primary);
    width: 40px;
     font-weight: 600;
    height: 40px;
     text-decoration: none;
    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-update-item__title {
.home-updates__item a:hover {
    font-size: 1rem;
    font-weight: 600;
     color: var(--color-base);
     color: var(--color-base);
    margin-bottom: 0.25rem;
}
.home-update-item__text {
    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 574 : Ligne 385 :


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


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


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


.home-stat-item {
.home-stat-item {
     padding: 1rem;
     padding: var(--space-md);
     background: var(--color-surface-1);
     background: var(--color-surface-0); /* Fond plus sombre pour les items stats */
     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.5rem;
     font-size: 1.75rem; /* Taille plus grande pour le nombre */
     font-weight: 700;
     font-weight: 700;
     color: var(--color-primary);
     color: var(--color-primary);
     margin-bottom: 0.25rem;
     margin-bottom: var(--space-xs);
}
}


Ligne 637 : Ligne 449 :


.home-links {
.home-links {
     padding: 1.5rem;
     padding: var(--space-lg);
     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 647 : Ligne 459 :
     font-weight: 700;
     font-weight: 700;
     color: var(--color-base);
     color: var(--color-base);
     margin-bottom: 1rem;
     margin-bottom: var(--space-md);
}
}


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


Ligne 659 : Ligne 471 :
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
     gap: 0.5rem;
     gap: var(--space-md);
     padding: 0.75rem;
     padding: var(--space-sm) var(--space-md);
     background: var(--color-surface-1);
     background: var(--color-surface-1);
     border-radius: var(--radius-md);
     border-radius: var(--radius-md);
Ligne 714 : Ligne 526 :
@media (max-width: 1024px) {
@media (max-width: 1024px) {
     .home-container {
     .home-container {
         grid-template-columns: 1fr;
         grid-template-columns: 1fr; /* Layout principal passe en 1 colonne */
     }
     }
      
      
     .home-sidebar {
     .home-sidebar {
         grid-template-columns: 1fr 1fr;
         grid-template-columns: 1fr 1fr; /* Sidebar en 2 colonnes sur tablette */
     }
     }
      
      
Ligne 730 : Ligne 542 :
      
      
     .home-nav-grid {
     .home-nav-grid {
         grid-template-columns: repeat(4, 1fr);
         grid-template-columns: repeat(4, 1fr); /* Navigation 4 colonnes */
     }
     }
}
}
Ligne 755 : Ligne 567 :
      
      
     .home-nav-grid {
     .home-nav-grid {
         grid-template-columns: repeat(3, 1fr);
         grid-template-columns: repeat(3, 1fr); /* Navigation 3 colonnes */
     }
     }
      
      
     .home-sidebar {
     .home-sidebar {
         grid-template-columns: 1fr;
         grid-template-columns: 1fr; /* Sidebar repasse en 1 colonne */
    }
   
    /* --- 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 769 : Ligne 597 :
      
      
     .home-nav-grid {
     .home-nav-grid {
         grid-template-columns: repeat(2, 1fr);
         grid-template-columns: repeat(2, 1fr); /* Navigation 2 colonnes */
     }
     }
      
      
Ligne 777 : Ligne 605 :
      
      
     .home-stats__grid {
     .home-stats__grid {
         grid-template-columns: 1fr;
         grid-template-columns: 1fr; /* Stats en 1 colonne */
     }
     }
      
      
     .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.