mise à niveau de tout le site
This commit is contained in:
lrdlg
@@ -0,0 +1,184 @@
|
||||
/* ==================================================================
|
||||
Composants du moteur d'exercices de la 2e commune.
|
||||
Chargé après assets/theme.css, dont il reprend toutes les couleurs.
|
||||
================================================================== */
|
||||
|
||||
/* ---------- bandeau de score ---------- */
|
||||
|
||||
.score {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 5;
|
||||
background: var(--blanc);
|
||||
border: 1px solid var(--trait);
|
||||
border-radius: .5rem;
|
||||
padding: .8rem 1.1rem 1rem;
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
.score__txt { font-size: .95rem; }
|
||||
.score strong { color: var(--accent-encre); }
|
||||
.score .action { margin-top: .7rem; }
|
||||
|
||||
.jauge {
|
||||
height: .7rem;
|
||||
background: var(--accent-fond);
|
||||
border-radius: .35rem;
|
||||
overflow: hidden;
|
||||
margin-top: .5rem;
|
||||
}
|
||||
.jauge span {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
background: var(--juste);
|
||||
transition: width .3s;
|
||||
}
|
||||
|
||||
/* ---------- carte d'exercice ---------- */
|
||||
|
||||
.ex {
|
||||
border: 1px solid var(--trait);
|
||||
border-radius: .5rem;
|
||||
padding: 1.1rem 1.2rem 1.2rem;
|
||||
margin: 1.2rem 0;
|
||||
background: var(--blanc);
|
||||
}
|
||||
.ex .consigne {
|
||||
font-family: var(--police-titre);
|
||||
font-weight: 700;
|
||||
font-size: .95rem;
|
||||
color: var(--accent-encre);
|
||||
margin: 0 0 .3rem;
|
||||
max-width: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: .3rem 1rem;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.ex .enonce { margin: 0 0 .9rem; }
|
||||
.ex h4 { margin: 0 0 .5rem; color: var(--encre-douce); font-size: .85rem; }
|
||||
|
||||
.minuteur {
|
||||
font-family: var(--police-titre);
|
||||
font-weight: 700;
|
||||
color: var(--erreur);
|
||||
}
|
||||
|
||||
/* ---------- boutons de réponse ---------- */
|
||||
|
||||
.opt, .jeton, .item {
|
||||
font: inherit;
|
||||
font-size: .97rem;
|
||||
display: inline-block;
|
||||
margin: .25rem .35rem .25rem 0;
|
||||
padding: .5rem .8rem;
|
||||
border: 1px solid var(--trait-fort);
|
||||
border-radius: .4rem;
|
||||
background: var(--blanc);
|
||||
color: var(--encre);
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
.opt { display: block; width: 100%; }
|
||||
.jeton--bloc { display: block; width: 100%; }
|
||||
.jeton--mini { font-size: .8rem; padding: .2rem .55rem; margin-left: .4rem; }
|
||||
|
||||
.opt:hover:not([disabled]),
|
||||
.jeton:hover:not([disabled]),
|
||||
.item:hover:not([disabled]) { border-color: var(--encre); }
|
||||
|
||||
.opt.choisi, .jeton.choisi, .item.choisi {
|
||||
background: var(--encre);
|
||||
color: var(--papier);
|
||||
border-color: var(--encre);
|
||||
}
|
||||
|
||||
.opt.juste, .jeton.juste, .item.juste {
|
||||
background: var(--juste-fond);
|
||||
border-color: var(--juste);
|
||||
}
|
||||
.opt.faux, .jeton.faux, .item.faux {
|
||||
background: var(--erreur-fond);
|
||||
border-color: var(--erreur);
|
||||
}
|
||||
.opt[disabled], .jeton[disabled], .item[disabled] { cursor: default; }
|
||||
|
||||
/* ---------- tri en paniers ---------- */
|
||||
|
||||
.reserve { margin-bottom: .6rem; }
|
||||
|
||||
.paniers {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: .8rem;
|
||||
margin-top: .8rem;
|
||||
}
|
||||
.panier {
|
||||
flex: 1 1 11rem;
|
||||
min-height: 6rem;
|
||||
border: 2px dashed var(--trait-fort);
|
||||
border-radius: .5rem;
|
||||
padding: .6rem;
|
||||
background: var(--papier);
|
||||
cursor: pointer;
|
||||
}
|
||||
.panier:hover { border-color: var(--accent); }
|
||||
.panier.vise { border-color: var(--accent); background: var(--accent-fond); }
|
||||
.panier h4 {
|
||||
margin: 0 0 .4rem;
|
||||
font-family: var(--police-titre);
|
||||
font-size: .85rem;
|
||||
color: var(--accent-encre);
|
||||
}
|
||||
|
||||
/* ---------- association en deux colonnes ---------- */
|
||||
|
||||
.deux-col { display: flex; gap: 1.2rem; flex-wrap: wrap; }
|
||||
.deux-col > div { flex: 1 1 14rem; }
|
||||
|
||||
/* ---------- remise en ordre ---------- */
|
||||
|
||||
.liste-ordre { margin-bottom: .6rem; }
|
||||
.item--bloc { display: block; width: 100%; }
|
||||
|
||||
/* ---------- saisie ---------- */
|
||||
|
||||
.court {
|
||||
font: inherit;
|
||||
padding: .5rem .6rem;
|
||||
border: 1px solid var(--trait-fort);
|
||||
border-radius: .4rem;
|
||||
width: 11rem;
|
||||
}
|
||||
|
||||
/* ---------- schéma à zones cliquables ---------- */
|
||||
|
||||
.schema { margin: .4rem 0 .8rem; }
|
||||
.schema svg { max-width: 100%; height: auto; }
|
||||
svg .zone {
|
||||
fill: transparent;
|
||||
stroke: var(--accent-encre);
|
||||
stroke-width: 2;
|
||||
cursor: pointer;
|
||||
}
|
||||
svg .zone:hover { fill: var(--accent-fond); fill-opacity: .55; }
|
||||
svg .zone.juste { fill: var(--juste); fill-opacity: .3; stroke: var(--juste); }
|
||||
svg .zone.faux { fill: var(--erreur); fill-opacity: .3; stroke: var(--erreur); }
|
||||
svg text { font-family: inherit; font-size: 13px; fill: var(--encre); pointer-events: none; }
|
||||
|
||||
/* ---------- verdict ---------- */
|
||||
|
||||
.retour {
|
||||
margin-top: .8rem;
|
||||
font-size: .93rem;
|
||||
padding: .55rem .7rem;
|
||||
border-radius: .4rem;
|
||||
display: none;
|
||||
}
|
||||
.retour--ok { display: block; background: var(--juste-fond); border: 1px solid var(--juste); }
|
||||
.retour--ko { display: block; background: var(--erreur-fond); border: 1px solid var(--erreur); }
|
||||
|
||||
@media print {
|
||||
.score, .ex .action, .panier { display: none; }
|
||||
}
|
||||
Reference in New Issue
Block a user