lrdlg/2CInfo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
588c2b0c353c50edcc0a9eca52483b668015ec5f
2CInfo/assets/theme.css
T
lrdlg a489298897 mise à niveau de tout le site
2026-09-21 10:56:04 +02:00

492 lines
14 KiB
CSS
Raw Blame History

/* ==================================================================
Thème commun de la plateforme « Mes cours » — M. Courcelle
------------------------------------------------------------------
Une seule feuille pour toute la plateforme : la page d'aiguillage,
les index de classe et les pages de module partagent ces jetons,
cette typographie et ces composants. Les feuilles spécialisées
(exercices-commune.css, jeux-differenciee.css, atelier-texte.css)
ne redéfinissent jamais une couleur en dur : elles consomment les
variables déclarées ici.
Pour ajouter une classe :
1. un couple --xxx-fond / --xxx-trait / --xxx-encre dans :root ;
2. une règle .classe-xxx plus bas ;
3. les règles de la tuile (.classe--xxx) dans index.html.
================================================================== */
:root {
/* --- encres et papiers ------------------------------------------ */
--encre: #16302B; /* texte principal, vert très sombre */
--encre-douce: #3E5751; /* texte secondaire, AA sur tous les fonds */
--papier: #FBFCFB; /* fond de page */
--blanc: #FFFFFF; /* fond des cartes et des champs */
--trait: #D5DEDA; /* bordures neutres */
--trait-fort: #B3C2BC;
/* --- couleurs par classe ---------------------------------------- */
/* -fond : aplat pâle ; -trait : filet vif, jamais du texte ;
-encre : variante sombre du filet, contraste AA pour du texte. */
--tc-fond: #FBE1E7; --tc-trait: #D6336C; --tc-encre: #B82A59;
--diff-fond: #DDF5EC; --diff-trait: #05BC8A; --diff-encre: #036F51;
--comm-fond: #FDF0CF; --comm-trait: #E0A100; --comm-encre: #7F5B00;
--ts-fond: #DFEAFB; --ts-trait: #2F6FDB; --ts-encre: #215FC2;
--ae-fond: #F1E3F7; --ae-trait: #9B4DCA; --ae-encre: #8840B4;
/* --- couleurs de verdict ---------------------------------------- */
--juste: #1E7A4C;
--juste-fond: #E3F3EA;
--erreur: #B0322A;
--erreur-fond: #F9E5E3;
--cible: #F5C542; /* surlignage, marqueur */
--cible-fond: #FDF6E1;
/* --- accent courant --------------------------------------------- */
/* Neutre par défaut ; chaque page de classe le remplace en posant
une classe .classe-xxx sur <body>. Tout le reste de la plateforme
ne connaît que --accent, --accent-fond et --accent-encre. */
--accent: var(--encre);
--accent-fond: #EDF2F0;
--accent-encre: var(--encre);
/* --- typographie ------------------------------------------------- */
--police-titre: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
--police-texte: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--police-doc: Cambria, Georgia, "Times New Roman", serif; /* specimens de traitement de texte */
/* --- mesures ------------------------------------------------------ */
--lecture: 64ch; /* largeur de confort d'un paragraphe */
--page: 58rem; /* largeur de la colonne de contenu */
--gouttiere: 1.5rem; /* marge latérale, identique partout */
--base: 17px;
}
/* Identité de classe : posée sur <body>. */
.classe-tc { --accent: var(--tc-trait); --accent-fond: var(--tc-fond); --accent-encre: var(--tc-encre); }
.classe-diff { --accent: var(--diff-trait); --accent-fond: var(--diff-fond); --accent-encre: var(--diff-encre); }
.classe-comm { --accent: var(--comm-trait); --accent-fond: var(--comm-fond); --accent-encre: var(--comm-encre); }
.classe-ts { --accent: var(--ts-trait); --accent-fond: var(--ts-fond); --accent-encre: var(--ts-encre); }
.classe-ae { --accent: var(--ae-trait); --accent-fond: var(--ae-fond); --accent-encre: var(--ae-encre); }
/* ==================================================================
Base
================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
font-size: var(--base);
scroll-behavior: smooth;
scroll-padding-top: 1rem;
}
body {
margin: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
background: var(--papier);
color: var(--encre);
font-family: var(--police-texte);
font-size: 1rem;
line-height: 1.55;
-webkit-text-size-adjust: 100%;
}
/* Mode projection : agrandit toute la page d'un coup pour le TBI.
Le jeton doit être posé sur <html> et non sur <body> : c'est <html>
qui porte font-size, et donc la valeur du rem pour toute la page. */
html.projection { --base: 25px; }
p, ul, ol { max-width: var(--lecture); }
p { margin: 0 0 .9rem; }
li { margin-bottom: .35rem; }
a { color: var(--accent-encre); }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 600; }
code, kbd {
font-family: ui-monospace, "JetBrains Mono", Consolas, "Courier New", monospace;
font-size: .92em;
background: var(--accent-fond);
padding: .05rem .3rem;
border-radius: .2rem;
}
:focus-visible {
outline: 3px solid var(--accent-encre);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation: none !important; transition: none !important; }
}
/* ==================================================================
En-tête de page
Fil d'Ariane, titre, sous-titre, et le filet de couleur de la
classe — le même motif que les tuiles de la page d'accueil.
================================================================== */
.entete {
background: var(--blanc);
border-bottom: .5rem solid var(--accent);
}
.entete__interieur {
max-width: calc(var(--page) + 2 * var(--gouttiere));
margin: 0 auto;
padding: 1rem var(--gouttiere) 1.1rem;
}
.ariane {
font-size: .85rem;
color: var(--encre-douce);
margin-bottom: .5rem;
}
.ariane a { color: var(--encre-douce); }
.ariane a:hover { color: var(--accent-encre); }
.ariane span[aria-hidden] { padding: 0 .35rem; color: var(--trait-fort); }
.ariane strong { color: var(--encre); font-weight: 600; }
.entete h1 {
margin: 0;
font-family: var(--police-titre);
font-size: clamp(1.35rem, 3.2vw, 1.9rem);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.15;
}
.entete__meta {
margin: .35rem 0 0;
max-width: none;
color: var(--encre-douce);
font-size: .95rem;
}
/* Outils à droite du titre (bouton « Agrandir », par exemple) */
.entete__barre {
display: flex;
flex-wrap: wrap;
gap: .6rem 1.2rem;
align-items: flex-end;
justify-content: space-between;
}
/* ==================================================================
Corps de page
================================================================== */
.contenu {
flex: 1;
width: 100%;
max-width: calc(var(--page) + 2 * var(--gouttiere));
margin: 0 auto;
padding: 2rem var(--gouttiere) 4rem;
}
.chapeau {
font-size: 1.08rem;
color: var(--encre-douce);
max-width: var(--lecture);
}
h2 {
font-family: var(--police-titre);
font-size: clamp(1.15rem, 2.6vw, 1.45rem);
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.25;
margin: 2.8rem 0 .8rem;
padding-top: .8rem;
border-top: 2px solid var(--accent);
max-width: var(--lecture);
}
.contenu > h2:first-child,
section > h2:first-child,
.inner > h2:first-child {
border-top: 0;
padding-top: 0;
margin-top: .5rem;
}
h3 {
font-family: var(--police-titre);
font-size: 1.02rem;
font-weight: 700;
margin: 1.8rem 0 .5rem;
color: var(--accent-encre);
}
h4 {
font-size: .95rem;
font-weight: 600;
margin: 1.2rem 0 .4rem;
}
/* ==================================================================
Encadrés
.encadre rappel neutre
.encadre--theorie ce qu'il faut savoir avant de jouer
.encadre--cle la règle à retenir
.encadre--attention piège fréquent
================================================================== */
.encadre {
background: var(--accent-fond);
border-left: .4rem solid var(--accent);
border-radius: 0 .4rem .4rem 0;
padding: .9rem 1.1rem;
margin: 1.4rem 0;
max-width: var(--lecture);
}
.encadre > :first-child { margin-top: 0; }
.encadre > :last-child { margin-bottom: 0; }
.encadre h3 { margin-top: 0; color: var(--encre); }
.encadre--theorie { background: var(--accent-fond); }
.encadre--cle { background: var(--cible-fond); border-left-color: var(--cible); }
.encadre--attention { background: var(--erreur-fond); border-left-color: var(--erreur); }
/* ==================================================================
Boutons
================================================================== */
.action {
font: inherit;
font-weight: 600;
font-size: .95rem;
background: var(--encre);
color: var(--papier);
border: 2px solid var(--encre);
border-radius: .4rem;
padding: .5rem 1.05rem;
cursor: pointer;
}
.action:hover { background: var(--accent-encre); border-color: var(--accent-encre); }
.action--secondaire {
background: var(--blanc);
color: var(--encre);
}
.action--secondaire:hover { background: var(--encre); color: var(--papier); border-color: var(--encre); }
.action[disabled] { opacity: .5; cursor: default; }
.action[disabled]:hover { background: var(--encre); border-color: var(--encre); }
.actions {
display: flex;
gap: .5rem;
flex-wrap: wrap;
margin: .9rem 0;
}
/* ==================================================================
Sommaire d'un module (bandeau de blocs / de séances)
================================================================== */
.sommaire {
background: var(--accent-fond);
border-bottom: 1px solid var(--trait);
}
.sommaire__interieur {
max-width: calc(var(--page) + 2 * var(--gouttiere));
margin: 0 auto;
padding: .7rem var(--gouttiere);
display: flex;
flex-wrap: wrap;
gap: .4rem;
}
.sommaire a,
.sommaire button {
font: inherit;
font-size: .9rem;
font-weight: 600;
text-decoration: none;
color: var(--encre);
background: var(--blanc);
border: 1px solid var(--trait-fort);
border-radius: .35rem;
padding: .35rem .8rem;
cursor: pointer;
}
.sommaire a:hover,
.sommaire button:hover { border-color: var(--encre); }
.sommaire a[aria-current="page"],
.sommaire button[aria-current="true"] {
background: var(--encre);
border-color: var(--encre);
color: var(--papier);
}
/* ==================================================================
Index de classe : la liste des modules
Un <li class="module"> par module. Voir le gabarit en commentaire
dans chaque index de classe.
================================================================== */
.modules {
list-style: none;
padding: 0;
margin: 1.2rem 0 0;
max-width: none;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
gap: 1rem;
}
.module { margin: 0; }
.module__lien {
display: flex;
flex-direction: column;
height: 100%;
gap: .3rem;
background: var(--blanc);
border: 1px solid var(--trait);
border-top: .4rem solid var(--accent);
border-radius: .5rem;
padding: 1.1rem 1.2rem 1.2rem;
color: var(--encre);
text-decoration: none;
}
@media (hover: hover) {
.module__lien:hover { border-color: var(--accent); border-top-color: var(--accent); }
.module__lien:hover .module__titre { text-decoration: underline; text-decoration-thickness: 2px; }
}
.module__num {
font-family: var(--police-titre);
font-size: .78rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--accent-encre);
}
.module__titre {
font-family: var(--police-titre);
font-size: 1.12rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: -0.01em;
}
.module__resume {
color: var(--encre-douce);
font-size: .95rem;
margin-top: .2rem;
}
.module__meta {
margin-top: auto;
padding-top: .8rem;
color: var(--encre-douce);
font-size: .85rem;
}
/* Module annoncé mais pas encore en ligne : même carte, sans lien. */
.module--bientot .module__lien {
border-top-color: var(--trait-fort);
background: var(--papier);
color: var(--encre-douce);
cursor: default;
}
.module--bientot .module__num { color: var(--encre-douce); }
/* Classe sans aucun module publié */
.vide {
background: var(--blanc);
border: 2px dashed var(--trait-fort);
border-radius: .5rem;
padding: 2rem 1.5rem;
text-align: center;
color: var(--encre-douce);
max-width: none;
}
/* ==================================================================
Tableaux, figures, captures
================================================================== */
table {
border-collapse: collapse;
width: 100%;
max-width: var(--lecture);
margin: 1.2rem 0;
font-size: .95rem;
}
th, td {
border-bottom: 1px solid var(--trait);
padding: .45rem .6rem;
text-align: left;
vertical-align: top;
}
th {
background: var(--accent-fond);
border-bottom: 2px solid var(--accent);
font-weight: 600;
}
figure {
margin: 1.4rem 0;
max-width: var(--lecture);
}
figure img {
width: 100%;
display: block;
border: 1px solid var(--trait);
border-radius: .3rem;
}
figcaption {
font-size: .86rem;
color: var(--encre-douce);
margin-top: .4rem;
}
/* Capture pas encore déposée : la page reste lisible et dit quoi ajouter. */
.manque {
border: 2px dashed var(--trait-fort);
background: var(--papier);
border-radius: .3rem;
padding: 2rem 1rem;
text-align: center;
color: var(--encre-douce);
font-size: .9rem;
}
/* ==================================================================
Pied de page
================================================================== */
.pied {
border-top: 1px solid var(--trait);
background: var(--blanc);
color: var(--encre-douce);
font-size: .88rem;
}
.pied__interieur {
max-width: calc(var(--page) + 2 * var(--gouttiere));
margin: 0 auto;
padding: 1.2rem var(--gouttiere) 2rem;
}
.pied a { color: var(--encre-douce); }
/* ==================================================================
Impression
================================================================== */
@media print {
body { background: #fff; }
.sommaire, .action, .actions, .entete__barre button { display: none; }
.entete { border-bottom-width: 2px; }
.contenu { max-width: none; padding: 0; }
}
Reference in New Issue View Git Blame Copy Permalink