/* ===================================================================== themes.css - Calque de thème pour les aide-mémoire Python (420-SN1-RE) --------------------------------------------------------------------- Chaque aide-mémoire garde son CSS sombre d'origine (intégré dans la page). Ce fichier ajoute PAR-DESSUS un calque « colorblock » (clair et coloré), activé par défaut via la classe html.theme-colorblock . - Mode coloré : html.theme-colorblock -> ces règles s'appliquent - Mode sombre : html.theme-sombre -> aucune règle ici, on retrouve le style d'origine de la page. Le bouton de bascule (bascule-theme.js) écrit la classe sur et mémorise le choix. Les règles colorblock ont une spécificité plus forte (html.theme-colorblock ...) : elles gagnent quel que soit l'ordre. ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Bungee&family=Lilita+One&family=Nunito:wght@400;700;800&display=swap'); /* --------------------------------------------------------------------- 1) Le bouton de bascule (présent dans les DEUX modes) --------------------------------------------------------------------- */ #actionBasculeTheme{ position:fixed; top:14px; right:14px; z-index:2000; font-family:'Lilita One','Segoe UI',sans-serif; font-size:.95rem; cursor:pointer; padding:9px 16px; border-radius:30px; border:3px solid #111; background:#FFCC00; color:#111; box-shadow:4px 4px 0 #111; transition:transform .08s ease; } #actionBasculeTheme:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 #111; } html.theme-sombre #actionBasculeTheme{ background:#1b2046; color:#ffcf5c; border-color:#ffcf5c; box-shadow:4px 4px 0 #0a0c1c; } @media print{ #actionBasculeTheme{ display:none; } } /* ===================================================================== 2) CALQUE COLORBLOCK (clair) - s'applique par défaut ===================================================================== */ /* Palette : on redéfinit les variables communes des aide-mémoire. Beaucoup de composants utilisent var(--couleur-*) : on les bascule d'un coup. */ html.theme-colorblock{ --couleur-fond:#FFFDF5; --couleur-boite:#ffffff; --couleur-trait:#111111; --couleur-texte:#111111; --couleur-faible:#5b5b6b; --couleur-accent:#FF9500; --rayon:14px; --ombre:7px 7px 0 #111111; } /* Fond de page : les pages ont un dégradé sombre codé en dur -> on l'écrase. */ html.theme-colorblock body{ font-family:'Nunito',system-ui,sans-serif; color:#111; background:#FFCC00; background-image: radial-gradient(circle at 12% 6%, rgba(255,255,255,.55) 0, rgba(255,255,255,0) 30%), radial-gradient(circle at 88% 4%, rgba(255,45,146,.16) 0, rgba(255,45,146,0) 24%); } /* En-tête : carte noire signature (comme l'aide-mémoire Markdown), titre Bungee jaune, ombre portée violette. */ html.theme-colorblock body:not(.aide-markdown) #entete{ background:#111; border:4px solid #111; border-radius:18px; box-shadow:7px 7px 0 #6B4B8A; padding:22px 26px; margin:0 auto 30px; } html.theme-colorblock #entete-titre{ font-family:'Bungee',cursive; color:#FFCC00; text-shadow:none; } html.theme-colorblock #entete-sous-titre{ color:#ffffff; opacity:.9; } /* Légende (page variables) */ html.theme-colorblock .legende{ color:#333; } html.theme-colorblock .legende-pastille{ border:2px solid #111; } /* Grandes sections encadrées */ html.theme-colorblock .section{ background:#ffffff; border:4px solid #111; border-radius:16px; box-shadow:7px 7px 0 #111; } html.theme-colorblock .section-titre{ font-family:'Lilita One',cursive; color:#111; border-bottom:4px solid #111; padding-bottom:8px; margin-bottom:14px; } html.theme-colorblock .section-intro{ color:#4a4a4a; } /* Cartes internes (.type) */ html.theme-colorblock .type{ background:#ffffff; border:3px solid #111; box-shadow:4px 4px 0 #111; } html.theme-colorblock .type-titre{ color:#111; } html.theme-colorblock .type-mot{ color:#6a5acd; font-weight:700; } html.theme-colorblock .type-note{ color:#4a4a4a; } /* Blocs de code : on les garde sombres (lisibles), mais encadrés colorblock. */ html.theme-colorblock .type-code{ background:#0E1A12; border:3px solid #111; color:#dfe4ff; box-shadow:3px 3px 0 #111; } /* Code EN LIGNE (balise ) : en colorblock --couleur-texte devient noir, donc sans cette regle le serait noir sur fond sombre (illisible). On lui donne un fond clair, comme pour le pied de page. */ html.theme-colorblock code{ background:#fff; border:2px solid #111; border-radius:5px; padding:1px 6px; color:#111; } /* Étiquette de variable (le « nom » qui pointe vers une valeur) */ html.theme-colorblock .etiquette-variable{ background:#fff; border:2px dashed #111; color:#111; } /* Cellules de valeurs (déjà colorées) : on ajoute le cadre noir colorblock. */ html.theme-colorblock .cellule{ border:3px solid #111; box-shadow:3px 3px 0 rgba(0,0,0,.35); } html.theme-colorblock .case-tableau{ border:3px solid #111; } html.theme-colorblock .dictionnaire{ border:3px solid #111; box-shadow:5px 5px 0 #111; } html.theme-colorblock .case-np{ border:2px solid #111; } /* Pied de page */ html.theme-colorblock #pied{ color:#3a3a3a; } html.theme-colorblock #pied code{ background:#fff; border:2px solid #111; border-radius:5px; padding:1px 6px; color:#111; } /* --------------------------------------------------------------------- Index des aide-mémoire (la grille de cartes-liens) --------------------------------------------------------------------- */ html.theme-colorblock .aide-memoire{ background:#ffffff; border:4px solid #111; box-shadow:7px 7px 0 #111; color:#111; } html.theme-colorblock .aide-memoire-titre{ font-family:'Lilita One',cursive; } html.theme-colorblock .aide-memoire-detail{ color:#5b5b6b; } html.theme-colorblock .aide-memoire:hover{ transform:translate(-2px,-2px); border-color:#111; box-shadow:9px 9px 0 var(--couleur-accent); } /* Lien de retour : bouton vert colorblock (comme les boutons du Markdown) */ html.theme-colorblock #retour a{ display:inline-block; font-family:'Lilita One',cursive; text-decoration:none; color:#111; background:#34C759; border:4px solid #111; border-radius:40px; box-shadow:5px 5px 0 #111; padding:10px 24px; margin-top:8px; } html.theme-colorblock #retour a:active{ transform:translate(2px,2px); box-shadow:3px 3px 0 #111; } /* ===================================================================== 3) Finitions colorblock des composants spécifiques aux pages --------------------------------------------------------------------- */ /* Blocs « sortie / console » : on garde le fond sombre (lisible, cohérent avec les blocs de code), mais texte clair et cadre colorblock. */ html.theme-colorblock .type-sortie{ color:#cfe0ff; border-left:3px solid #111; } /* En-têtes de tables de vérité : bandeau noir, texte clair. */ html.theme-colorblock table.verite th{ background:#111; color:#fff; border-color:#111; } html.theme-colorblock table.verite td{ border-color:#111; } /* Boîtes encadrées spécifiques : cadre épais + ombre dure. */ html.theme-colorblock .table-verite, html.theme-colorblock .structure, html.theme-colorblock .piege{ border:3px solid #111; box-shadow:4px 4px 0 #111; } html.theme-colorblock .piege{ border-left:7px solid var(--couleur-faux,#FF3B30); } html.theme-colorblock .schema-note{ color:#4a4a4a; } /* Comparaison « bon / mauvais » : on épaissit le cadre des en-têtes. */ html.theme-colorblock .compare-titre{ border-width:2px !important; } /* Boutons-liens vers les diapos : look colorblock. */ html.theme-colorblock .lien-diapo{ color:#111; border:3px solid #111; box-shadow:4px 4px 0 #111; } html.theme-colorblock .lien-diapo:active{ transform:translate(2px,2px); box-shadow:2px 2px 0 #111; } /* Visualisateur de listes : cases cerclées de noir. */ html.theme-colorblock .ruban .case{ border:2px solid #111; } /* ===================================================================== 4) MODE SOMBRE de l'aide-mémoire Markdown --------------------------------------------------------------------- */ /* Le Markdown est colorblock par nature (son CSS intégré). En mode sombre, on rhabille ses composants en bleu nuit, comme les autres aide-mémoire. Ciblage par body.aide-markdown : n'affecte que cette page. */ html.theme-sombre body.aide-markdown{ background:#0f1226; background-image:radial-gradient(circle at 20% 0%, #1a1f4a 0%, #0f1226 55%); color:#e9ecff; } html.theme-sombre .aide-markdown #mode-emploi-boite{ background:#1b2046; border-color:#2e3570; box-shadow:5px 5px 0 #0a0c1c; color:#e9ecff; } html.theme-sombre .aide-markdown .carte{ background:#1b2046; border-color:#2e3570; box-shadow:6px 6px 0 #0a0c1c; } html.theme-sombre .aide-markdown .je-vois{ background:#11142e; border-color:#2e3570; color:#e9ecff; } html.theme-sombre .aide-markdown .je-vois h1, html.theme-sombre .aide-markdown .je-vois h2, html.theme-sombre .aide-markdown .je-vois h3, html.theme-sombre .aide-markdown .je-vois p, html.theme-sombre .aide-markdown .je-vois li, html.theme-sombre .aide-markdown .je-vois strong{ color:#e9ecff; } html.theme-sombre .aide-markdown .je-vois .case{ border-color:#9aa3d8; } html.theme-sombre .aide-markdown .je-vois .rendu-image{ background:#0c0f24; border-color:#3a4080; } html.theme-sombre .aide-markdown .note{ color:#9aa3d8; } html.theme-sombre .aide-markdown .note b{ color:#c79bff; } html.theme-sombre .aide-markdown .volet-etiquette{ color:#9aa3d8; opacity:.8; } html.theme-sombre .aide-markdown .separateur-volet{ color:#9aa3d8; } html.theme-sombre .aide-markdown #pied{ color:#9aa3d8; } html.theme-sombre .aide-markdown #pied code{ background:#1b2046; border-color:#2e3570; color:#e9ecff; }