Basculer la recherche
Basculer le menu
49
1.9K
9
3.9K
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:Header/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
3 144 modifications
Aucun résumé des modifications
Hiob (discussion | contributions)
owner
3 144 modifications
mAucun résumé des modifications
Ligne 1 : Ligne 1 :
/* =============================================================================
/* =============================================================================
   HEADER COMPONENT
   HEADER COMPONENT
  Composant d'en-tête stylisé pour affichage de contenu
  Compatible dark/light mode avec Citizen skin
   ============================================================================= */
   ============================================================================= */


/* -----------------------------------------------------------------------------
/* Lien wrapper - Reset des styles de lien */
  STRUCTURE DE BASE
.home-header-link {
  ----------------------------------------------------------------------------- */
    display: block;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s ease;
}
 
.home-header-link:hover {
    opacity: 0.95;
}


/* Structure de base */
.home-header {
.home-header {
    /* Layout */
     display: flex;
     display: flex;
     width: 100%;
     width: 100%;
     height: 60px;
     height: 60px;
     overflow: hidden;
     overflow: hidden;
    /* Style */
     background: var(--color-surface-1);
     background: var(--color-surface-1);
     border-radius: 0;
     border-radius: 0;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 
     transition: box-shadow 0.2s ease;
    /* Animation */
     transition: transform 0.3s ease, box-shadow 0.3s ease;
}
}


.home-header:hover {
    transform: translateY(0);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
/* Header cliquable */
.home-header--clickable {
.home-header--clickable {
     cursor: pointer;
     cursor: pointer;
Ligne 36 : Ligne 32 :


.home-header--clickable:hover {
.home-header--clickable:hover {
     transform: translateY(-2px);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
 
/* Lien wrapper pour header cliquable */
.home-header--clickable > a {
    display: flex;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}
 
.home-header__wrapper {
    display: flex;
    width: 100%;
    height: 100%;
}
}


/* Dark mode - Header base */
/* Dark mode - Base */
.skin-theme-clientpref-night .home-header {
.skin-theme-clientpref-night .home-header {
     border-color: var(--border-color-subtle, rgba(255, 255, 255, 0.1));
     background: var(--color-surface-1, #1e1e1e);
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
}


.skin-theme-clientpref-night .home-header:hover {
.skin-theme-clientpref-night .home-header--clickable:hover {
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.7);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}
}


/* -----------------------------------------------------------------------------
/* Content container */
  CONTENT - Zone de texte
  ----------------------------------------------------------------------------- */
 
.home-header__content {
.home-header__content {
    /* Layout */
     display: flex;
     display: flex;
     align-items: center;
     align-items: center;
     gap: 16px;
     gap: 16px;
     width: 100%;
     width: 100%;
     padding: 0 24px;
     padding: 0 20px;
}
}


/* -----------------------------------------------------------------------------
/* Badge */
  BADGE - Badge d'information
  ----------------------------------------------------------------------------- */
 
.home-header__badge {
.home-header__badge {
    /* Style */
     display: inline-block;
     display: inline-block;
     background: var(--color-progressive, #36c);
    padding: 4px 12px;
     color: #fff;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 4px 10px;
     color: white;
     border-radius: 4px;
     border-radius: 4px;
    flex-shrink: 0;
     font-size: 0.75rem;
 
    /* Typography */
     font-size: 0.7rem;
     font-weight: 600;
     font-weight: 600;
     text-transform: uppercase;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     letter-spacing: 0.5px;
     line-height: 1.2;
     flex-shrink: 0;
}
}


/* Dark mode - Badge */
/* Title */
.skin-theme-clientpref-night .home-header__badge {
    background: var(--color-progressive, #4d90fe);
}
 
/* -----------------------------------------------------------------------------
  TITLE - Titre principal
  ----------------------------------------------------------------------------- */
 
.home-header__title {
.home-header__title {
     display: inline-block;
     display: inline-block;
Ligne 112 : Ligne 74 :
     font-size: 1.1rem;
     font-size: 1.1rem;
     font-weight: 600;
     font-weight: 600;
    line-height: 1.3;
     color: var(--color-base, #202122);
     color: var(--color-emphasized, #000);
     flex-shrink: 0;
     flex-shrink: 0;
}
}


/* Dark mode - Title */
.skin-theme-clientpref-night .home-header__title {
.skin-theme-clientpref-night .home-header__title {
     color: var(--color-emphasized, #fff);
     color: var(--color-base, #eee);
}
}


/* -----------------------------------------------------------------------------
/* Subtitle */
  SUBTITLE - Sous-titre
  ----------------------------------------------------------------------------- */
 
.home-header__subtitle {
.home-header__subtitle {
     display: inline-block;
     display: inline-block;
     margin: 0;
     margin: 0;
     font-size: 0.85rem;
     font-size: 0.85rem;
    line-height: 1.5;
     color: var(--color-subtle, #54595d);
     color: var(--color-subtle, #666);
}
}


/* Dark mode - Subtitle */
.skin-theme-clientpref-night .home-header__subtitle {
.skin-theme-clientpref-night .home-header__subtitle {
     color: var(--color-subtle, #aaa);
     color: var(--color-subtle, #a2a9b1);
}
}


/* -----------------------------------------------------------------------------
/* Text */
  TEXT - Corps de texte
  ----------------------------------------------------------------------------- */
 
.home-header__text {
.home-header__text {
     display: inline-block;
     display: inline-block;
Ligne 151 : Ligne 103 :
}
}


/* Dark mode - Text */
.skin-theme-clientpref-night .home-header__text {
.skin-theme-clientpref-night .home-header__text {
     color: var(--color-base, #eee);
     color: var(--color-base, #eee);
}
}


/* -----------------------------------------------------------------------------
/* Link */
  LINK - Lien "En savoir plus"
  ----------------------------------------------------------------------------- */
 
.home-header__link {
.home-header__link {
     display: inline-block;
     display: inline-block;
Ligne 165 : Ligne 113 :
     font-size: 0.85rem;
     font-size: 0.85rem;
     color: var(--color-progressive, #36c);
     color: var(--color-progressive, #36c);
     text-decoration: none;
     font-weight: 500;
    transition: color 0.2s ease;
     flex-shrink: 0;
     flex-shrink: 0;
}
}


.home-header--clickable:hover .home-header__link {
.home-header-link:hover .home-header__link {
     color: var(--color-progressive-hover, #2a9);
     color: var(--color-progressive-hover, #2a9);
    text-decoration: underline;
}
}


/* Dark mode - Link */
.skin-theme-clientpref-night .home-header__link {
.skin-theme-clientpref-night .home-header__link {
     color: var(--color-progressive, #4d90fe);
     color: var(--color-progressive, #4d90fe);
}
}


.skin-theme-clientpref-night .home-header--clickable:hover .home-header__link {
.skin-theme-clientpref-night .home-header-link:hover .home-header__link {
     color: var(--color-progressive-hover, #3d8dfe);
     color: var(--color-progressive-hover, #3d8dfe);
}
}


/* =============================================================================
/* Responsive */
  RESPONSIVE - Adaptation mobile
  ============================================================================= */
 
@media (max-width: 768px) {
@media (max-width: 768px) {
     .home-header {
     .home-header {
Ligne 211 : Ligne 153 :
@media (max-width: 480px) {
@media (max-width: 480px) {
     .home-header {
     .home-header {
         height: 100px;
         height: auto;
        min-height: 60px;
     }
     }


Ligne 225 : Ligne 168 :
     }
     }


     .home-header__subtitle,
     .home-header__subtitle {
        flex-basis: 100%;
    }
 
     .home-header__text {
     .home-header__text {
         display: none;
         display: none;
Récupérée de "https://wiki.nefald.fr/Modèle:Header/styles.css"
Les témoins (''cookies'') nous aident à fournir nos services. En utilisant nos services, vous acceptez notre utilisation de témoins.