« Modèle:Accueil/shared/styles.css » : différence entre les versions
De Nefald
Autres actions
m Search bar |
mAucun résumé des modifications |
||
| Ligne 124 : | Ligne 124 : | ||
display: block; | display: block; | ||
} | } | ||
/* ==================================== | /* ==================================== | ||
| Ligne 139 : | Ligne 138 : | ||
padding: 1rem 1.5rem; | padding: 1rem 1.5rem; | ||
/* | /* Fond très subtil */ | ||
background: rgba(255, 255, 255, 0. | background: rgba(255, 255, 255, 0.03); | ||
border: 1px solid rgba(255, 255, 255, 0. | border: 1px solid rgba(255, 255, 255, 0.1); | ||
border-radius: 8px; | border-radius: 8px; | ||
cursor: pointer; | cursor: pointer; | ||
transition: all 0. | transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); | ||
} | } | ||
.home-search:hover { | .home-search:hover { | ||
background: rgba(255, 255, 255, 0. | background: rgba(255, 255, 255, 0.05); | ||
border-color: rgba(255, 255, 255, 0. | border-color: rgba(255, 255, 255, 0.15); | ||
transform: translateY(- | transform: translateY(-2px); | ||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); | |||
} | } | ||
.home-search:active { | .home-search:active { | ||
transform: translateY(0); | transform: translateY(0); | ||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); | |||
} | } | ||
.home-search__icon { | .home-search__icon { | ||
font-size: 1.125rem; | font-size: 1.125rem; | ||
opacity: 0. | opacity: 0.4; | ||
flex-shrink: 0; | flex-shrink: 0; | ||
transition: opacity 0.2s ease; | transition: opacity 0.2s ease; | ||
line-height: 1; | |||
} | } | ||
.home-search:hover .home-search__icon { | .home-search:hover .home-search__icon { | ||
opacity: 0. | opacity: 0.6; | ||
} | } | ||
| Ligne 173 : | Ligne 175 : | ||
font-size: 0.9375rem; | font-size: 0.9375rem; | ||
font-weight: 400; | font-weight: 400; | ||
color: | color: var(--color-base); | ||
opacity: 0.5; | |||
user-select: none; | user-select: none; | ||
text-align: left; | text-align: left; | ||
letter-spacing: 0. | letter-spacing: 0.02em; | ||
transition: | transition: opacity 0.2s ease; | ||
line-height: 1.4; | |||
} | } | ||
.home-search:hover .home-search__text { | .home-search:hover .home-search__text { | ||
opacity: 0.7; | |||
} | } | ||
.home-search__kbd { | .home-search__kbd { | ||
font-family: monospace; | font-family: 'SF Mono', 'Roboto Mono', 'Courier New', monospace; | ||
font-size: 0. | font-size: 0.8125rem; | ||
font-weight: | font-weight: 600; | ||
padding: 0. | padding: 0.3rem 0.6rem; | ||
min-width: 1. | min-width: 1.75rem; | ||
text-align: center; | text-align: center; | ||
line-height: 1; | |||
background: rgba(255, 255, 255, 0. | background: rgba(255, 255, 255, 0.05); | ||
border: 1px solid rgba(255, 255, 255, 0. | border: 1px solid rgba(255, 255, 255, 0.1); | ||
border-radius: 4px; | border-radius: 4px; | ||
color: | color: var(--color-base); | ||
opacity: 0.4; | |||
flex-shrink: 0; | flex-shrink: 0; | ||
transition: all 0.2s ease; | transition: all 0.2s ease; | ||
| Ligne 202 : | Ligne 208 : | ||
.home-search:hover .home-search__kbd { | .home-search:hover .home-search__kbd { | ||
background: rgba(255, 255, 255, 0. | background: rgba(255, 255, 255, 0.08); | ||
border-color: rgba(255, 255, 255, 0. | border-color: rgba(255, 255, 255, 0.15); | ||
opacity: 0.6; | |||
} | |||
/* Responsive */ | |||
@media (max-width: 768px) { | |||
.home-search { | |||
padding: 0.875rem 1.25rem; | |||
border-radius: 6px; | |||
} | |||
.home-search__kbd { | |||
display: none; | |||
} | |||
.home-search__icon { | |||
font-size: 1rem; | |||
} | |||
.home-search__text { | |||
font-size: 0.875rem; | |||
} | |||
} | } | ||
@media (max-width: 480px) { | |||
.home-search { | |||
padding: 0.75rem 1rem; | |||
gap: 0.75rem; | |||
} | |||
} | |||
/* ==================================== | /* ==================================== | ||