91 lines
4.2 KiB
CSS
91 lines
4.2 KiB
CSS
/* Recherche partout (fusion #68) — classes préfixées .rp- pour éviter
|
|
* toute collision avec les styles de l'hôte. Couleurs neutres héritées
|
|
* autant que possible : la page reste lisible en thème clair et sombre. */
|
|
.rp-page { max-width: 880px; margin: 0 auto; padding: 24px 16px 64px; }
|
|
.rp-page h1 { font-size: 1.4rem; margin: 0 0 4px; }
|
|
.rp-hint { opacity: .7; margin: 0 0 16px; font-size: .9rem; }
|
|
.rp-form { display: flex; gap: 8px; margin-bottom: 24px; }
|
|
.rp-input {
|
|
flex: 1; font: inherit; font-size: 1.05rem; padding: 10px 12px;
|
|
border: 1px solid #888; border-radius: 8px; background: inherit; color: inherit;
|
|
}
|
|
.rp-input:focus { outline: 2px solid #3b82f6; outline-offset: 1px; }
|
|
.rp-section { margin-bottom: 28px; }
|
|
.rp-head {
|
|
display: flex; align-items: baseline; gap: 10px;
|
|
border-bottom: 1px solid #888; padding-bottom: 6px; margin-bottom: 8px;
|
|
}
|
|
.rp-head h2 { font-size: 1.05rem; margin: 0; }
|
|
.rp-count {
|
|
font-size: .8rem; font-weight: 700; background: #3b82f6; color: #fff;
|
|
border-radius: 999px; padding: 1px 8px; min-width: 1.2em; text-align: center;
|
|
}
|
|
.rp-count:empty { display: none; }
|
|
.rp-all { margin-left: auto; font-size: .85rem; white-space: nowrap; }
|
|
.rp-state { opacity: .75; margin: 8px 0; }
|
|
.rp-error { opacity: 1; }
|
|
.rp-item {
|
|
display: block; padding: 8px 10px; border-radius: 8px;
|
|
text-decoration: none; color: inherit;
|
|
}
|
|
.rp-item:hover, .rp-item:focus { background: rgba(127, 127, 127, .15); outline: none; }
|
|
.rp-item:focus-visible { outline: 2px solid #3b82f6; }
|
|
.rp-title { display: block; font-weight: 600; }
|
|
.rp-context { display: block; font-size: .8rem; opacity: .65; }
|
|
.rp-snippet { display: block; font-size: .88rem; opacity: .85; margin-top: 2px; }
|
|
|
|
/* ---- Onglets (chantier 2+3) : mêmes onglets sur les 4 hôtes. ---- */
|
|
.rp-tabs {
|
|
display: flex; gap: 4px; flex-wrap: wrap;
|
|
border-bottom: 1px solid #888; margin-bottom: 20px;
|
|
}
|
|
.rp-tab {
|
|
background: none; border: none; border-bottom: 2px solid transparent;
|
|
padding: 8px 10px; margin-bottom: -1px; font: inherit; cursor: pointer;
|
|
color: inherit; opacity: .7; white-space: nowrap;
|
|
}
|
|
.rp-tab:hover { opacity: 1; }
|
|
.rp-tab.active { opacity: 1; border-bottom-color: #3b82f6; font-weight: 700; }
|
|
.rp-tab:focus-visible { outline: 2px solid #3b82f6; outline-offset: 2px; }
|
|
.rp-tab-count {
|
|
font-size: .8rem; font-weight: 700; background: rgba(127, 127, 127, .25);
|
|
border-radius: 999px; padding: 1px 7px; margin-left: 2px;
|
|
}
|
|
.rp-tab-count:empty { display: none; }
|
|
.rp-section[hidden] { display: none; }
|
|
.rp-all[hidden] { display: none; }
|
|
|
|
/* ---- TikTak : la page sort de la colonne sidebar (chantier 2+3).
|
|
* Cause : recherche.html étend base.html sans layout_class, donc
|
|
* .rp-page (enfant direct de .layout) tombait en auto-placement dans
|
|
* la 2e colonne de la grille (largeur sidebar). La règle ci-dessous,
|
|
* gardée par l'ancêtre .layout (TikTak seul), l'étend de la colonne 2
|
|
* à la fin de la grille — juste à droite du rail d'icônes — sur toute
|
|
* la largeur disponible, sans toucher aux autres pages (elles ne
|
|
* portent pas .rp-page). En mobile (≤760 px, point de bascule TikTak),
|
|
* la grille n'a qu'une colonne : la page la prend entièrement. */
|
|
.layout > .rp-page {
|
|
grid-column: 2 / -1; max-width: none; min-width: 0; overflow-y: auto;
|
|
}
|
|
@media (max-width: 760px) {
|
|
.layout > .rp-page { grid-column: 1 / -1; }
|
|
}
|
|
|
|
/* ---- ObsiGate : navigation statique de la page autonome (chantier
|
|
* 2+3). La page /recherche est servie hors SPA (route avant le
|
|
* catch-all) : elle reprend les classes de l'app (style.css :
|
|
* .app-container, .header, .main-body, .sidebar, .content-wrapper,
|
|
* .content-area) et cette navigation, calée sur les variables de
|
|
* l'app, en guise de sidebar. Les vaults dynamiques restent dans
|
|
* la SPA (voir le commentaire dans recherche.html). */
|
|
.rp-og-nav { display: flex; flex-direction: column; gap: 4px; padding: 12px; }
|
|
.rp-og-nav a {
|
|
display: block; padding: 8px 10px; border-radius: 8px;
|
|
text-decoration: none; color: inherit;
|
|
}
|
|
.rp-og-nav a:hover { background: rgba(127, 127, 127, .15); }
|
|
.rp-og-nav a[aria-current="page"] {
|
|
background: rgba(127, 127, 127, .18); font-weight: 700;
|
|
}
|
|
.rp-og-note { opacity: .65; font-size: .85rem; padding: 8px 10px; margin: 8px 0 0; }
|