« Modèle:Accueil/shared/styles.css » : différence entre les versions
De Nefald
Autres actions
Page créée avec « .home-grid { display: grid; grid: auto-flow dense/repeat( auto-fit, minmax( 9.375rem, 1fr ) ); grid-auto-rows: minmax( 3rem, auto ); grid-gap: var( --space-xs ); } .home-grid--col2 { grid-template-columns: 1fr 1fr; } .home-grid a.external { background-image: none; } .home-badge { display: flex; gap: var(--space-xxs); font-size: var(--font-size-small); padding: var(--space-xxs) var(--space-xs); background: var(--color-surface-2); color:... » |
Aucun résumé des modifications Balise : Révoqué |
||
| Ligne 1 : | Ligne 1 : | ||
.home- | /* Container principal */ | ||
.home-header { | |||
text-align: center; | |||
padding: 3rem 1rem; | |||
max-width: 800px; | |||
margin: 0 auto; | |||
} | } | ||
.home- | /* Prétitre */ | ||
.home-header__pretitle { | |||
font-size: 1.1rem; | |||
color: #72777d; | |||
margin-bottom: 0.5rem; | |||
font-weight: 400; | |||
} | } | ||
.home- | /* Titre principal */ | ||
.home-header__title { | |||
font-size: 3rem; | |||
font-weight: 700; | |||
margin: 0.5rem 0; | |||
line-height: 1.2; | |||
color: #202122; | |||
} | } | ||
.home- | /* Sous-titre */ | ||
.home-header__subtitle { | |||
font-size: 1.1rem; | |||
color: #54595d; | |||
margin-bottom: 2rem; | |||
} | } | ||
.home- | /* Barre de recherche - Style Star Citizen */ | ||
.home-header__search { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
gap: 0.75rem; | |||
/* Fond et bordure */ | |||
background: linear-gradient(135deg, #e8f0fe 0%, #f0f4f9 100%); | |||
border: 2px solid #d1dbe8; | |||
border-radius: 50px; | |||
/* Dimensions */ | |||
max-width: 600px; | |||
margin: 0 auto; | |||
padding: 1rem 2rem; | |||
/* Effet de glow */ | |||
box-shadow: | |||
0 4px 12px rgba(66, 133, 244, 0.08), | |||
0 2px 6px rgba(66, 133, 244, 0.04), | |||
inset 0 1px 0 rgba(255, 255, 255, 0.9); | |||
/* Curseur et transition */ | |||
cursor: pointer; | |||
transition: all 0.3s ease; | |||
} | } | ||
.home- | /* Effet hover */ | ||
.home-header__search:hover { | |||
background: linear-gradient(135deg, #dce9fd 0%, #e6ecf5 100%); | |||
border-color: #4285f4; | |||
box-shadow: | |||
0 6px 16px rgba(66, 133, 244, 0.15), | |||
0 3px 8px rgba(66, 133, 244, 0.08), | |||
inset 0 1px 0 rgba(255, 255, 255, 0.9); | |||
transform: translateY(-1px); | |||
} | } | ||
.home- | /* Effet actif/focus */ | ||
.home-header__search:active { | |||
transform: translateY(0); | |||
box-shadow: | |||
0 2px 8px rgba(66, 133, 244, 0.12), | |||
inset 0 1px 0 rgba(255, 255, 255, 0.9); | |||
} | } | ||
.home- | /* Icône de recherche */ | ||
.home-header__searchIcon { | |||
display: flex; | |||
align-items: center; | |||
opacity: 0.6; | |||
transition: opacity 0.3s ease; | |||
} | } | ||
.home- | .home-header__search:hover .home-header__searchIcon { | ||
opacity: 0.8; | |||
} | } | ||
.home- | /* Texte de recherche */ | ||
.home-header__searchText { | |||
font-size: 1rem; | |||
color: #54595d; | |||
font-weight: 500; | |||
user-select: none; | |||
} | } | ||
/* Effet de glow (optionnel - pour animation avancée) */ | |||
. | .scw-gradient-glow { | ||
position: relative; | |||
overflow: hidden; | |||
} | } | ||
. | .scw-gradient-glow::before { | ||
content: ''; | |||
position: absolute; | |||
top: -50%; | |||
left: -50%; | |||
width: 200%; | |||
height: 200%; | |||
background: radial-gradient( | |||
circle, | |||
rgba(66, 133, 244, 0.1) 0%, | |||
transparent 70% | |||
); | |||
opacity: 0; | |||
transition: opacity 0.3s ease; | |||
} | } | ||
. | .scw-gradient-glow:hover::before { | ||
opacity: 1; | |||
} | } | ||
.home- | /* Responsive - Mobile */ | ||
@media (max-width: 768px) { | |||
.home-header { | |||
padding: 2rem 1rem; | |||
} | |||
.home-header__title { | |||
font-size: 2rem; | |||
} | |||
.home-header__search { | |||
padding: 0.875rem 1.5rem; | |||
gap: 0.5rem; | |||
} | |||
.home-header__searchText { | |||
font-size: 0.95rem; | |||
} | |||
.desktoponly { | |||
display: none; | |||
} | |||
} | } | ||
/* Dark mode (si ton wiki supporte) */ | |||
@media (prefers-color-scheme: dark) { | |||
.home-header__search { | |||
background: linear-gradient(135deg, #1e2838 0%, #252d3d 100%); | |||
border-color: #3d4756; | |||
box-shadow: | |||
0 4px 12px rgba(0, 0, 0, 0.3), | |||
inset 0 1px 0 rgba(255, 255, 255, 0.05); | |||
} | |||
.home- | .home-header__search:hover { | ||
background: linear-gradient(135deg, #252d3d 0%, #2d364a 100%); | |||
border-color: #4285f4; | |||
box-shadow: | |||
0 6px 16px rgba(66, 133, 244, 0.25), | |||
background: linear-gradient( | inset 0 1px 0 rgba(255, 255, 255, 0.08); | ||
} | |||
.home-header__searchText { | |||
color: #c8d1dc; | |||
} | |||
. | |||
. | |||
} | |||
.home- | |||
. | |||
. | |||
} | |||
.home- | |||
} | |||
} | } | ||