« Modèle:Accueil/shared/styles.css » : différence entre les versions
De Nefald
Autres actions
mAucun résumé des modifications |
Aucun résumé des modifications |
||
| Ligne 125 : | Ligne 125 : | ||
display: block; | display: block; | ||
} | } | ||
/* ==================================== | |||
2. BARRE DE RECHERCHE - STYLE STAR CITIZEN | |||
==================================== */ | |||
/* ==================================== | /* ==================================== | ||
| Ligne 131 : | Ligne 135 : | ||
.home-search { | .home-search { | ||
/* Layout */ | |||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
| Ligne 139 : | Ligne 144 : | ||
margin-left: auto; | margin-left: auto; | ||
margin-right: auto; | margin-right: auto; | ||
padding: | padding: 1rem 1.5rem; | ||
/* | /* Style avec cadre */ | ||
background: | background-color: rgba(255, 255, 255, 0.03); | ||
border: | border: 1px solid rgba(135, 191, 219, 0.3); | ||
border-radius: | border-radius: 50px; | ||
font-size: | /* Typography */ | ||
font-weight: | font-size: 0.9375rem; | ||
font-weight: 500; | |||
/* Interaction */ | |||
cursor: pointer; | cursor: pointer; | ||
transition: | transition: all 0.3s ease; | ||
box-shadow: 0 0 20px rgba(135, 191, 219, 0.1); | |||
} | } | ||
.home-search:hover { | .home-search:hover { | ||
background: | background-color: rgba(255, 255, 255, 0.05); | ||
border-color: rgba(238, 165, 41, 0.5); | |||
box-shadow: 0 0 30px rgba(238, 165, 41, 0.2); | |||
); | |||
} | } | ||
.home-search__icon { | .home-search__icon { | ||
font-size: | font-size: 1.125rem; | ||
opacity: 0. | opacity: 0.6; | ||
flex-shrink: 0; | flex-shrink: 0; | ||
line-height: 1; | |||
transition: opacity 0.2s; | transition: opacity 0.2s; | ||
} | } | ||
.home-search:hover .home-search__icon { | .home-search:hover .home-search__icon { | ||
opacity: 0. | opacity: 0.9; | ||
} | } | ||
| Ligne 176 : | Ligne 182 : | ||
flex: 1; | flex: 1; | ||
color: var(--color-base); | color: var(--color-base); | ||
opacity: 0. | opacity: 0.7; | ||
user-select: none; | user-select: none; | ||
text-align: left; | text-align: left; | ||
line-height: 1.4; | |||
transition: opacity 0.2s; | transition: opacity 0.2s; | ||
} | } | ||
.home-search:hover .home-search__text { | .home-search:hover .home-search__text { | ||
opacity: | opacity: 1; | ||
} | } | ||
.home-search__kbd-wrapper { | .home-search__kbd-wrapper { | ||
margin-left: var(--space-xs); | margin-left: var(--space-xs); | ||
flex-shrink: 0; | |||
} | } | ||
.home-search__kbd { | .home-search__kbd { | ||
display: inline- | display: inline-flex; | ||
align-items: center; | |||
justify-content: center; | |||
min-width: 1.5rem; | |||
height: 1.5rem; | |||
padding: 0 0.4rem; | |||
font-family: monospace; | font-family: monospace; | ||
font-size: 0.75rem; | font-size: 0.75rem; | ||
font-weight: 700; | |||
background: rgba( | background: rgba(135, 191, 219, 0.2); | ||
border: 1px solid rgba( | border: 1px solid rgba(135, 191, 219, 0.3); | ||
border-radius: | border-radius: 4px; | ||
color: var(--color- | color: var(--color-base); | ||
opacity: 0. | opacity: 0.6; | ||
transition: | transition: all 0.2s; | ||
} | } | ||
.home-search:hover .home-search__kbd { | .home-search:hover .home-search__kbd { | ||
opacity: 0. | background: rgba(238, 165, 41, 0.2); | ||
border-color: rgba(238, 165, 41, 0.4); | |||
opacity: 0.9; | |||
} | |||
/* Responsive */ | |||
@media (max-width: 768px) { | |||
.home-search { | |||
margin-left: 1rem; | |||
margin-right: 1rem; | |||
padding: 0.875rem 1.25rem; | |||
} | |||
.home-search__kbd-wrapper { | |||
display: none; | |||
} | |||
} | |||
@media (max-width: 480px) { | |||
.home-search { | |||
padding: 0.75rem 1rem; | |||
gap: 0.75rem; | |||
} | |||
.home-search__icon { | |||
font-size: 1rem; | |||
} | |||
.home-search__text { | |||
font-size: 0.875rem; | |||
} | |||
} | |||
@media (hover: none) { | |||
.home-search__kbd-wrapper { | |||
display: none; | |||
} | |||
} | } | ||