« Modèle:Accueil/search/styles.css » : différence entre les versions
De Nefald
Autres actions
< Modèle:Accueil | search
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... » |
mAucun résumé des modifications |
||
| (7 versions intermédiaires par le même utilisateur non affichées) | |||
| Ligne 1 : | Ligne 1 : | ||
.accueil-search- | /* Container positionné comme la command palette */ | ||
max-width: | .accueil-search-container { | ||
margin: | position: fixed; | ||
top: var(--space-xxl); | |||
right: var(--space-xs); | |||
left: var(--space-xs); | |||
z-index: 100; | |||
max-width: 56rem; | |||
margin-inline: auto; | |||
pointer-events: none; | |||
} | } | ||
/* Barre de recherche avec effet glass identique */ | |||
.accueil-search-bar { | .accueil-search-bar { | ||
display: flex; | display: flex; | ||
align-items: center; | align-items: center; | ||
padding: var(--space-xs) var(--space-md); /* Plus compacte */ | |||
overflow: hidden; | |||
border: var(--border-base); | |||
border-radius: var(--border-radius-medium); | |||
box-shadow: var(--box-shadow-drop-xx-large); | |||
backdrop-filter: var(--backdrop-filter-frosted-glass); | |||
font-size: var(--font-size-small); | |||
line-height: var(--line-height-small); | |||
cursor: pointer; | cursor: pointer; | ||
transition: | pointer-events: auto; | ||
transition-property: background-color, border-color, box-shadow; | |||
transition-duration: 0.2s; | |||
transition-timing-function: ease; | |||
} | } | ||
/* États interactifs */ | |||
.accueil-search-bar:hover { | .accueil-search-bar:hover { | ||
border-color: var(--color-progressive); | |||
box-shadow: var(--box-shadow-drop-xx-large), 0 0 0 1px var(--color-progressive); | |||
} | } | ||
.accueil-search-bar:active { | .accueil-search-bar:active { | ||
transform: | transform: translateY(1px); | ||
} | } | ||
/* Icône - wrapper inline de l'image */ | |||
.accueil-search-icon { | .accueil-search-icon { | ||
display: flex; | display: inline-flex; | ||
align-items: center; | align-items: center; | ||
margin-right: var(--space-xs); | |||
line-height: 0; | |||
opacity: var(--opacity-icon-base); | |||
} | |||
/* Cibler l'image MediaWiki générée */ | |||
.accueil-search-icon img { | |||
vertical-align: middle; | |||
} | } | ||
/* Texte placeholder - typographie identique à command palette */ | |||
.accueil-search-text { | .accueil-search-text { | ||
color: var(--color- | color: var(--color-base); | ||
font- | font-weight: var(--font-weight-normal); | ||
flex: 1 1 auto; | |||
white-space: nowrap; | |||
overflow: hidden; | |||
text-overflow: ellipsis; | |||
} | |||
/* Masquer sur scroll pour éviter les conflits */ | |||
.accueil-search-container.hidden { | |||
display: none; | |||
} | |||
/* Responsive - adaptation tablette */ | |||
@media (max-width: 1000px) { | |||
.accueil-search-container { | |||
right: var(--space-xxs); | |||
left: var(--space-xxs); | |||
} | |||
} | } | ||
/* Responsive */ | /* Responsive - adaptation mobile */ | ||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||
.accueil-search- | .accueil-search-container { | ||
padding: | position: sticky; | ||
top: 0; | |||
padding: var(--space-xxs); | |||
margin-bottom: 1.5rem; | margin-bottom: 1.5rem; | ||
pointer-events: auto; | |||
} | } | ||
.accueil-search-bar { | .accueil-search-bar { | ||
padding: | padding: var(--space-xs) var(--space-sm); | ||
} | } | ||
.accueil-search- | .accueil-search-icon { | ||
margin-right: var(--space-xxs); | |||
} | } | ||
} | } | ||
Dernière version du 3 novembre 2025 à 12:04
/* Container positionné comme la command palette */
.accueil-search-container {
position: fixed;
top: var(--space-xxl);
right: var(--space-xs);
left: var(--space-xs);
z-index: 100;
max-width: 56rem;
margin-inline: auto;
pointer-events: none;
}
/* Barre de recherche avec effet glass identique */
.accueil-search-bar {
display: flex;
align-items: center;
padding: var(--space-xs) var(--space-md); /* Plus compacte */
overflow: hidden;
border: var(--border-base);
border-radius: var(--border-radius-medium);
box-shadow: var(--box-shadow-drop-xx-large);
backdrop-filter: var(--backdrop-filter-frosted-glass);
font-size: var(--font-size-small);
line-height: var(--line-height-small);
cursor: pointer;
pointer-events: auto;
transition-property: background-color, border-color, box-shadow;
transition-duration: 0.2s;
transition-timing-function: ease;
}
/* États interactifs */
.accueil-search-bar:hover {
border-color: var(--color-progressive);
box-shadow: var(--box-shadow-drop-xx-large), 0 0 0 1px var(--color-progressive);
}
.accueil-search-bar:active {
transform: translateY(1px);
}
/* Icône - wrapper inline de l'image */
.accueil-search-icon {
display: inline-flex;
align-items: center;
margin-right: var(--space-xs);
line-height: 0;
opacity: var(--opacity-icon-base);
}
/* Cibler l'image MediaWiki générée */
.accueil-search-icon img {
vertical-align: middle;
}
/* Texte placeholder - typographie identique à command palette */
.accueil-search-text {
color: var(--color-base);
font-weight: var(--font-weight-normal);
flex: 1 1 auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Masquer sur scroll pour éviter les conflits */
.accueil-search-container.hidden {
display: none;
}
/* Responsive - adaptation tablette */
@media (max-width: 1000px) {
.accueil-search-container {
right: var(--space-xxs);
left: var(--space-xxs);
}
}
/* Responsive - adaptation mobile */
@media (max-width: 768px) {
.accueil-search-container {
position: sticky;
top: 0;
padding: var(--space-xxs);
margin-bottom: 1.5rem;
pointer-events: auto;
}
.accueil-search-bar {
padding: var(--space-xs) var(--space-sm);
}
.accueil-search-icon {
margin-right: var(--space-xxs);
}
}