« Modèle:Accueil/search/styles.css » : différence entre les versions
De Nefald
Autres actions
Page créée avec « .accueil-search-wrapper { max-width: 1000px; margin: 0 auto 2rem; padding: 0 1rem; } .accueil-search-bar { display: flex; align-items: center; gap: 12px; padding: 14px 20px; background: var(--color-surface-1, #1a1a1a); border: 1px solid var(--color-surface-3, #2d2d2d); border-radius: 8px; cursor: pointer; transition: all 0.2s ease; position: relative; } .accueil-search-bar:hover { background: var(--color-surface-2, #232323); border... » |
m citizen default css for command palette search |
||
| Ligne 1 : | Ligne 1 : | ||
.accueil-search- | /* Container principal aligné avec Citizen */ | ||
.accueil-search-container { | |||
max-width: 1000px; | max-width: 1000px; | ||
margin: 0 auto 2rem; | margin: 0 auto 2rem; | ||
| Ligne 5 : | Ligne 6 : | ||
} | } | ||
.accueil-search- | /* Barre de recherche utilisant les styles Citizen */ | ||
.accueil-search-container .citizen-command-palette__search { | |||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
gap: 12px; | gap: 12px; | ||
padding: 14px | padding: 14px 16px; | ||
font-size: 0.95rem; | |||
line-height: 1.5; | |||
cursor: pointer; | |||
border-radius: 8px; | border-radius: 8px; | ||
background: var(--color-surface-1); | |||
transition: | border: 1px solid var(--border-color-base); | ||
transition: background 0.2s ease, border-color 0.2s ease, transform 0.1s ease; | |||
} | } | ||
.accueil-search- | /* États interactifs */ | ||
background: var(--color-surface-2 | .accueil-search-container .citizen-command-palette__search:hover { | ||
border-color: var(--color- | background: var(--color-surface-2); | ||
border-color: var(--color-progressive); | |||
} | } | ||
.accueil-search- | .accueil-search-container .citizen-command-palette__search:active { | ||
transform: scale(0.995); | transform: scale(0.995); | ||
} | } | ||
/* Icône de recherche */ | |||
.accueil-search-icon { | .accueil-search-icon { | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
justify-content: center; | justify-content: center; | ||
width: 20px; | |||
height: 20px; | |||
flex-shrink: 0; | flex-shrink: 0; | ||
position: relative; | |||
opacity: 0.87; | |||
} | |||
/* Loupe en CSS */ | |||
.accueil-search-icon::before { | |||
content: ''; | |||
position: absolute; | |||
width: 10px; | |||
height: 10px; | |||
border: 2px solid var(--color-subtle); | |||
border-radius: 50%; | |||
top: 2px; | |||
left: 2px; | |||
} | |||
.accueil-search-icon::after { | |||
content: ''; | |||
position: absolute; | |||
width: 2px; | |||
height: 6px; | |||
background: var(--color-subtle); | |||
transform: rotate(45deg); | |||
bottom: 2px; | |||
right: 2px; | |||
} | } | ||
/* Texte placeholder */ | |||
.accueil-search-text { | .accueil-search-text { | ||
color: var(--color-subtle | color: var(--color-subtle); | ||
user-select: none; | user-select: none; | ||
flex: 1; | |||
} | } | ||
/* Responsive */ | /* Responsive - adaptation mobile */ | ||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||
.accueil-search- | .accueil-search-container { | ||
padding: 0 0.5rem; | padding: 0 0.5rem; | ||
margin-bottom: 1.5rem; | margin-bottom: 1.5rem; | ||
} | } | ||
.accueil-search- | .accueil-search-container .citizen-command-palette__search { | ||
padding: 12px | padding: 12px 14px; | ||
font-size: 0.9rem; | font-size: 0.9rem; | ||
} | } | ||
} | } | ||