/* ========================================================================== Thème clair de recordpy.fr — règles communes aux pages « graphiques » (indicateur thermique, nuits tropicales, sécheresse). Activé par la classe `theme-light` sur , posée par theme_clair.js. Deux familles de règles : 1. les classes du gabarit commun (fond, hero, footer, panneaux .rpi-*, .nt-*) ; 2. les couleurs posées EN LIGNE dans le HTML (style="color:#b8b6ac"), qu'une classe ne peut pas surcharger : on les attrape par sélecteur d'attribut, valeur par valeur, avec !important. C'est brut mais sans risque : chaque règle ne touche qu'une teinte précise, remplacée par son équivalent clair. La barre de navigation reste sombre dans les deux modes. ========================================================================== */ /* ---- bouton de bascule (injecté par le script) ---- */ .theme-bascule { position: absolute; right: 18px; top: 74px; z-index: 5; display: inline-flex; align-items: center; gap: 6px; background: rgba(30,30,36,0.7); border: 1px solid #3a3a44; border-radius: 999px; color: #b8b6ac; font: 600 11.5px -apple-system, system-ui, sans-serif; padding: 6px 12px 6px 9px; cursor: pointer; } .theme-bascule:hover { color: #f0ede6; border-color: #4c4b58; } .theme-bascule .theme-ico { font-size: 13px; line-height: 1; } #main-content { position: relative; } html.embed-mode .theme-bascule { display: none !important; } @media (max-width: 640px) { .theme-bascule { top: 70px; right: 10px; padding: 5px 9px; } .theme-bascule .theme-lib { display: none; } } .rnav-right .theme-bascule { position: static; margin-right: 10px; background: rgba(255,255,255,.04); } @media (max-width: 640px) { .rnav-right .theme-bascule { margin-right: 8px; } } html.theme-light .theme-bascule { background: #fff; border-color: #cfcfd8; color: #55555f; } html.theme-light .rnav-right .theme-bascule { background: rgba(255,255,255,.12); border-color: #4c4b58; color: #e8e6df; } /* ---- 1. gabarit commun ---- */ html.theme-light body { background: #f3f3f6; } html.theme-light .hero-title { color: #1c1c22; } html.theme-light .hero-subtitle { color: #4d4d57; } html.theme-light footer { background: #e4e4ea !important; color: #55555f !important; } html.theme-light footer a { color: #55555f !important; } html.theme-light hr { border-top-color: #dcdce2 !important; } /* pages « cartes » (radar, foudre, nuages, satellite, vigilance) : titre et chapeau */ html.theme-light .page-title { color: #1c1c22; } html.theme-light .eum-lede { color: #4d4d57; } html.theme-light .eum-lede b, html.theme-light .eum-lede strong { color: #1c1c22; } /* panneaux « résumé » (accueil, nuits tropicales, sécheresse) */ html.theme-light .rpi-big { background: #fafafc; border-color: #e6e6ec; } html.theme-light .rpi-summary { background: #fff; border-color: #dcdce2; } html.theme-light .rpi-summary-head { background: #fafafc; border-bottom-color: #e6e6ec; } html.theme-light .rpi-summary-date { color: #55555f; } html.theme-light .rpi-summary-date b { color: #1c1c22; } html.theme-light .rpi-big-label { color: #7a7a86; } html.theme-light .rpi-big-val { color: #1c1c22; } html.theme-light .rpi-big-val.hot, html.theme-light .rpi-big-label.hot { color: #c8551f; } html.theme-light .rpi-big-val.cold, html.theme-light .rpi-big-label.cold { color: #2b6fb3; } html.theme-light .rpi-big-sub, html.theme-light .rpi-headline { color: #55555f; } html.theme-light .rpi-detail, html.theme-light .rpi-detail-body { color: #4d4d57; } html.theme-light .rpi-detail-header { color: #1c1c22; } /* dépliants d'aide et graphiques SVG du gabarit */ html.theme-light .nt-more summary { color: #2b6fb3; } html.theme-light .nt-more { border-color: #dcdce2; } html.theme-light .nt-more p, html.theme-light .nt-more span { color: #4d4d57; } html.theme-light .nt-credit, html.theme-light .swi-credit, html.theme-light .itn-credit { color: #6c6c78; } html.theme-light .nt-dl, html.theme-light .swi-dl { color: #2b6fb3; border-color: #cfcfd8; background: #fff; } html.theme-light #stripes-svg, html.theme-light #bars-svg, html.theme-light #heatmap-svg { border-color: #dcdce2 !important; } html.theme-light #bars-svg, html.theme-light #heatmap-svg { background: #fff !important; } /* sélecteur de station (nuits tropicales) */ html.theme-light #station-input { background: #fff !important; color: #1c1c22 !important; border-color: #cfcfd8 !important; } html.theme-light #station-suggest button, html.theme-light #station-suggest div { background: #fff !important; color: #1c1c22 !important; } /* ---- 2. couleurs posées en ligne, teinte par teinte ---- */ html.theme-light [style*="color:#b8b6ac"] { color: #55555f !important; } html.theme-light [style*="color:#d0cec8"] { color: #1c1c22 !important; } html.theme-light [style*="color:#c9c7bd"] { color: #1c1c22 !important; } html.theme-light [style*="color:#e8e8ee"] { color: #1c1c22 !important; } html.theme-light [style*="color:#e3e8ee"] { color: #1c1c22 !important; } html.theme-light [style*="color:#9fb8d6"] { color: #2b6fb3 !important; } html.theme-light [style*="color:#7fb0e0"] { color: #2b6fb3 !important; } html.theme-light [style*="color:#8fb8e6"] { color: #2b6fb3 !important; } html.theme-light [style*="color:#d8785a"] { color: #c8551f !important; } html.theme-light [style*="color:#6a6a76"] { color: #9a9aa8 !important; } html.theme-light [style*="color:#8a8a8a"] { color: #6c6c78 !important; } html.theme-light [style*="color:#8a8a93"] { color: #6c6c78 !important; } html.theme-light [style*="color:#9a9a9a"] { color: #6c6c78 !important; } html.theme-light [style*="color:#9a9aa8"] { color: #6c6c78 !important; } html.theme-light [style*="color:#a9a7a0"] { color: #6c6c78 !important; } html.theme-light [style*="color:#7a7a86"] { color: #6c6c78 !important; } html.theme-light [style*="color:#9898a8"] { color: #55555f !important; } html.theme-light [style*="border:1px solid #3a3a44"] { border-color: #cfcfd8 !important; } html.theme-light [style*="border:1px solid #32323e"] { border-color: #dcdce2 !important; } html.theme-light [style*="border-top:1px solid #32323e"] { border-top-color: #dcdce2 !important; } html.theme-light [style*="border-top:1px solid #2f2f38"] { border-top-color: #dcdce2 !important; } html.theme-light [style*="background:rgba(255,255,255,0.035)"] { background: #fff !important; } html.theme-light [style*="background:rgba(30,30,36,0.62)"] { background: #fff !important; } html.theme-light [style*="background:#23232e"] { background: #fff !important; } html.theme-light [style*="background:#d0cec8"] { background: #2b2b33 !important; color: #fff !important; } html.theme-light [style*="color:#12121a"] { color: #fff !important; } /* mêmes teintes, mais sérialisées par le navigateur quand le JS les pose (el.style.color = …) */ html.theme-light [style*="color: rgb(184, 182, 172)"] { color: #55555f !important; } html.theme-light [style*="color: rgb(18, 18, 26)"] { color: #fff !important; } html.theme-light [style*="background: rgb(208, 206, 200)"] { background: #2b2b33 !important; } html.theme-light [style*="background: rgba(30, 30, 36, 0.62)"] { background: #fff !important; } /* ---- 3. variables du gabarit et fonds/textes posés en ligne sur les pages « records » (accueil, nuits tropicales, tableaux et réglages générés par le script) ---- */ html.theme-light { --text: #1c1c22; --text-muted: #6c6c78; --border: #dcdce2; } html.theme-light .palp-toggle-track { background: #cfcfd8; } html.theme-light .palp-toggle-thumb { background: #fff; } html.theme-light .palp-select, html.theme-light .palp-radio-group { background: #fff; color: #1c1c22; border-color: #cfcfd8; } html.theme-light .breve-card, html.theme-light .stat-card { background: #fff; border-color: #dcdce2; } html.theme-light #classe-tooltip { background: #fff; border-color: #dcdce2; color: #1c1c22; } html.theme-light table { color: #3a3a44; } /* fonds sombres -> clairs */ html.theme-light [style*="background:#23232e"], html.theme-light [style*="background: #23232e"], html.theme-light [style*="background:rgba(30,30,36,0.86)"], html.theme-light [style*="background:rgba(255,255,255,0.07)"], html.theme-light [style*="background:rgba(255,255,255,0.03)"], html.theme-light [style*="background:rgba(255,255,255,.03)"] { background: #fff !important; } html.theme-light [style*="background:#2a2a34"], html.theme-light [style*="background:#26262f"], html.theme-light [style*="background:#2e2e3a"], html.theme-light [style*="background:#2c2c38"], html.theme-light [style*="background:#252530"] { background: #f4f4f7 !important; } html.theme-light [style*="background:#1e1e24"], html.theme-light [style*="background:#1e1e28"], html.theme-light [style*="background:#19191a"], html.theme-light [style*="background:#1b2430"] { background: #f3f3f6 !important; } html.theme-light [style*="background:#3a3a48"], html.theme-light [style*="background:#4a4a5a"] { background: #e6e6ec !important; } html.theme-light [style*="linear-gradient(transparent, #1e1e24)"] { background: linear-gradient(transparent, #f3f3f6) !important; } /* textes clairs -> sombres */ html.theme-light [style*="color:#fff"], html.theme-light [style*="color:#ffffff"], html.theme-light [style*="color:#eee"], html.theme-light [style*="color:#eeeef2"], html.theme-light [style*="color:#e0e0e6"], html.theme-light [style*="color:#e2e0d8"], html.theme-light [style*="color:#f3eee3"], html.theme-light [style*="color:#ddd"], html.theme-light [style*="color:#ccc"], html.theme-light [style*="color:#c8c8d2"], html.theme-light [style*="color:#c0c0c6"], html.theme-light [style*="color:#c0c0cc"], html.theme-light [style*="color:#c2c0b6"], html.theme-light [style*="color:#c0beb8"] { color: #1c1c22 !important; } html.theme-light [style*="color:#9898a8"], html.theme-light [style*="color:#7a7a9a"], html.theme-light [style*="color:#777"], html.theme-light [style*="color:#6b6b7a"], html.theme-light [style*="color:#b0b0bc"], html.theme-light [style*="color:#b0aea8"], html.theme-light [style*="color:#666"] { color: #6c6c78 !important; } html.theme-light [style*="color:#7a7aaa"], html.theme-light [style*="color:#a0a0c8"], html.theme-light [style*="color:#a7cbec"], html.theme-light [style*="color:#90CAF9"] { color: #2b6fb3 !important; } html.theme-light [style*="color:#ffb347"], html.theme-light [style*="color:#e8c896"] { color: #b8701e !important; } html.theme-light [style*="color:#ef95c2"] { color: #b03a7a !important; } /* bordures */ html.theme-light [style*="border-bottom:1px solid #44445a"] { border-bottom-color: #e6e6ec !important; } html.theme-light [style*="border:1px solid #6a6a88"], html.theme-light [style*="border:1px solid #3a3a48"], html.theme-light [style*="border:1px solid #555"], html.theme-light [style*="border:1px solid #44445a"] { border-color: #dcdce2 !important; } /* les boutons qui restent sombres une fois sélectionnés gardent leur texte clair */ html.theme-light [style*="background:#a0a0c8"] { color: #1a1a20 !important; } /* réglages « pour aller plus loin » (classes .palp-*) */ html.theme-light .palp-toggle-label, html.theme-light .palp-title, html.theme-light .palp-select-label, html.theme-light .palp-radio.on, html.theme-light .palp-chips-clear-all:hover { color: #1c1c22; } html.theme-light .palp-group-header, html.theme-light .palp-toggle-sub, html.theme-light .palp-chevron, html.theme-light .palp-chips-label, html.theme-light .palp-radio, html.theme-light .palp-reset, html.theme-light .palp-chips-clear-all { color: #6c6c78; } html.theme-light .palp-reset { border-color: #cfcfd8; } html.theme-light .palp-chips-zone { background: #fff; border-color: #cfcfd8; } html.theme-light .palp-info { background: #e6e6ec; color: #3a3a44; } html.theme-light .filter-chip { background: #fff; color: #3a3a44; border-color: #cfcfd8; } html.theme-light .legend, html.theme-light .legend-item { color: #3a3a44; } html.theme-light .legend-overlay { background: rgba(255,255,255,.92); color: #3a3a44; border-color: #dcdce2; } /* mêmes teintes en notation rgb(), telle que le navigateur la sérialise quand un script pose la couleur (el.style.background = '#2a2a34' devient « background: rgb(42, 42, 52) » dans l'attribut) */ html.theme-light [style*="background: rgb(35, 35, 46)"], html.theme-light [style*="background-color: rgb(35, 35, 46)"] { background: #fff !important; } html.theme-light [style*="background: rgb(42, 42, 52)"], html.theme-light [style*="background-color: rgb(42, 42, 52)"], html.theme-light [style*="background: rgb(38, 38, 47)"], html.theme-light [style*="background: rgb(37, 37, 48)"] { background: #f4f4f7 !important; } html.theme-light [style*="background: rgb(30, 30, 36)"], html.theme-light [style*="background-color: rgb(30, 30, 36)"] { background: #f3f3f6 !important; } html.theme-light [style*="background: rgb(58, 58, 72)"], html.theme-light [style*="background: rgb(74, 74, 90)"] { background: #e6e6ec !important; } html.theme-light [style*="color: rgb(255, 255, 255)"], html.theme-light [style*="color: rgb(224, 224, 230)"], html.theme-light [style*="color: rgb(192, 192, 198)"], html.theme-light [style*="color: rgb(238, 238, 242)"] { color: #1c1c22 !important; } html.theme-light [style*="color: rgb(152, 152, 168)"], html.theme-light [style*="color: rgb(122, 122, 154)"], html.theme-light [style*="color: rgb(119, 119, 119)"] { color: #6c6c78 !important; } html.theme-light [style*="color: rgb(255, 179, 71)"] { color: #b8701e !important; } html.theme-light [style*="color: rgb(160, 160, 200)"], html.theme-light [style*="color: rgb(122, 122, 170)"], html.theme-light [style*="color: rgb(144, 202, 249)"] { color: #2b6fb3 !important; } html.theme-light [style*="border: 1px solid rgb(58, 58, 72)"], html.theme-light [style*="border-color: rgb(58, 58, 72)"] { border-color: #dcdce2 !important; } html.theme-light [style*="color:#e6e6ec"], html.theme-light [style*="color: rgb(230, 230, 236)"] { color: #1c1c22 !important; } html.theme-light [style*="border:1px solid #3d3550"] { border-color: #d9cbe8 !important; } html.theme-light [style*="background:rgba(176,125,224,0.10)"] { background: #f4eefb !important; }