« Modèle:Header/styles.css » : différence entre les versions
De Nefald
Autres actions
Aucun résumé des modifications |
Aucun résumé des modifications |
||
| Ligne 3 : | Ligne 3 : | ||
============================================================================= */ | ============================================================================= */ | ||
.home-header { | .home-header { | ||
/* Layout - PLEINE LARGEUR */ | /* Layout - PLEINE LARGEUR */ | ||
| Ligne 22 : | Ligne 21 : | ||
} | } | ||
.home-header-- | .home-header--has-link { | ||
cursor: pointer; | cursor: pointer; | ||
} | } | ||
.home-header-- | .home-header--has-link:hover { | ||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); | ||
transform: translateY(-1px); | transform: translateY(-1px); | ||
} | } | ||
/* Dark mode */ | /* Dark mode */ | ||
| Ligne 38 : | Ligne 36 : | ||
} | } | ||
.skin-theme-clientpref-night .home-header-- | .skin-theme-clientpref-night .home-header--has-link:hover { | ||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); | ||
} | } | ||
| Ligne 51 : | Ligne 49 : | ||
gap: 16px; | gap: 16px; | ||
width: 100%; | width: 100%; | ||
padding: 16px 20px; | padding: 16px 20px; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
} | } | ||
| Ligne 61 : | Ligne 59 : | ||
/* Badge */ | /* Badge */ | ||
.home-header__badge { | .home-header__badge { | ||
display: inline- | display: inline-block; | ||
padding: 4px 12px; | |||
padding: | |||
font-size: 0.75rem; | font-size: 0.75rem; | ||
font-weight: 600; | font-weight: 600; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
letter-spacing: 0.5px; | letter-spacing: 0.5px; | ||
color: var(--color-emphasized, #fff); | |||
background: var(--color-progressive, #36c); | |||
border-radius: 4px; | |||
white-space: nowrap; | white-space: nowrap; | ||
flex-shrink: 0; | flex-shrink: 0; | ||
} | |||
.skin-theme-clientpref-night .home-header__badge { | |||
background: var(--color-progressive, #4d90fe); | |||
color: var(--color-emphasized, #000); | |||
} | } | ||
/* Title */ | /* Title */ | ||
.home-header__title { | .home-header__title { | ||
font-size: 1.1rem; | |||
font-size: 1. | |||
font-weight: 600; | font-weight: 600; | ||
line-height: 1. | line-height: 1.3; | ||
color: var(--color-base, #202122); | color: var(--color-base, #202122); | ||
flex-shrink: 0; | flex-shrink: 0; | ||
| Ligne 92 : | Ligne 92 : | ||
/* Subtitle */ | /* Subtitle */ | ||
.home-header__subtitle { | .home-header__subtitle { | ||
font-size: 0.9rem; | font-size: 0.9rem; | ||
line-height: 1.4; | line-height: 1.4; | ||
color: var(--color-subtle, #54595d); | color: var(--color-subtle, #54595d); | ||
flex-grow: 1; | |||
} | } | ||
| Ligne 105 : | Ligne 104 : | ||
/* Text */ | /* Text */ | ||
.home-header__text { | .home-header__text { | ||
font-size: 0.9rem; | font-size: 0.9rem; | ||
line-height: 1.5; | line-height: 1.5; | ||
| Ligne 116 : | Ligne 113 : | ||
} | } | ||
/* Link */ | /* Link wrapper et link */ | ||
.home-header__link-wrapper { | |||
display: inline-flex; | |||
align-items: center; | |||
margin-left: auto; | |||
flex-shrink: 0; | |||
} | |||
.home-header__link-wrapper a { | |||
text-decoration: none !important; | |||
} | |||
.home-header__link { | .home-header__link { | ||
display: inline-flex; | display: inline-flex; | ||
align-items: center; | align-items: center; | ||
font-size: 0.9rem; | font-size: 0.9rem; | ||
color: var(--color-progressive, #36c); | color: var(--color-progressive, #36c) !important; | ||
font-weight: 500; | font-weight: 500; | ||
white-space: nowrap; | white-space: nowrap; | ||
transition: color 0.2s ease; | transition: color 0.2s ease; | ||
} | } | ||
.home-header-- | .home-header__link-wrapper:hover .home-header__link, | ||
color: var(--color-progressive-hover, #2a9); | .home-header--has-link:hover .home-header__link { | ||
color: var(--color-progressive-hover, #2a9) !important; | |||
} | } | ||
.skin-theme-clientpref-night .home-header__link { | .skin-theme-clientpref-night .home-header__link { | ||
color: var(--color-progressive, #4d90fe); | color: var(--color-progressive, #4d90fe) !important; | ||
} | } | ||
.skin-theme-clientpref-night .home-header-- | .skin-theme-clientpref-night .home-header__link-wrapper:hover .home-header__link, | ||
color: var(--color-progressive-hover, #3d8dfe); | .skin-theme-clientpref-night .home-header--has-link:hover .home-header__link { | ||
color: var(--color-progressive-hover, #3d8dfe) !important; | |||
} | } | ||
| Ligne 194 : | Ligne 202 : | ||
} | } | ||
.home-header__link { | .home-header__link-wrapper { | ||
margin-left: 0; | margin-left: 0; | ||
flex-basis: 100%; | flex-basis: 100%; | ||
justify-content: flex-end; | justify-content: flex-end; | ||
} | |||
.home-header__link { | |||
font-size: 0.85rem; | font-size: 0.85rem; | ||
} | } | ||
} | } | ||