mise à niveau de tout le site
This commit is contained in:
lrdlg
@@ -0,0 +1,304 @@
|
||||
/* ==================================================================
|
||||
Cours de traitement de texte (3e TQ, 4e TQ)
|
||||
Chargé après assets/theme.css, dont il reprend toutes les couleurs.
|
||||
Mise en page « document long » : un sommaire latéral qui suit la
|
||||
lecture, et une feuille de papier au centre.
|
||||
================================================================== */
|
||||
|
||||
/* ---------- gabarit à deux colonnes ---------- */
|
||||
|
||||
.wrap {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: 16rem minmax(0, 1fr);
|
||||
gap: 2rem;
|
||||
max-width: 80rem;
|
||||
margin: 0 auto;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.sommaire-lat {
|
||||
position: sticky;
|
||||
top: 1.5rem;
|
||||
align-self: start;
|
||||
max-height: calc(100vh - 3rem);
|
||||
overflow: auto;
|
||||
}
|
||||
.sommaire-lat h2 {
|
||||
font-family: var(--police-texte);
|
||||
font-size: .78rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: .04em;
|
||||
text-transform: uppercase;
|
||||
color: var(--encre-douce);
|
||||
margin: 1.4rem 0 .4rem;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
.sommaire-lat h2:first-of-type { margin-top: 0; }
|
||||
.sommaire-lat a {
|
||||
display: block;
|
||||
padding: .28rem .55rem;
|
||||
color: var(--encre);
|
||||
text-decoration: none;
|
||||
border-left: 3px solid transparent;
|
||||
font-size: .93rem;
|
||||
}
|
||||
.sommaire-lat a:hover { background: var(--accent-fond); }
|
||||
.sommaire-lat a.on {
|
||||
border-left-color: var(--accent);
|
||||
background: var(--accent-fond);
|
||||
font-weight: 600;
|
||||
}
|
||||
.sommaire-lat .top {
|
||||
font-family: var(--police-titre);
|
||||
font-weight: 700;
|
||||
font-size: .98rem;
|
||||
margin-bottom: .8rem;
|
||||
color: var(--accent-encre);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* ---------- la feuille ---------- */
|
||||
|
||||
.feuille {
|
||||
background: var(--blanc);
|
||||
border: 1px solid var(--trait);
|
||||
border-radius: .3rem;
|
||||
box-shadow: 0 12px 30px -20px rgba(22, 48, 43, .5);
|
||||
}
|
||||
/* Règle graduée, comme en haut de la fenêtre de Writer. */
|
||||
.regle {
|
||||
height: 20px;
|
||||
border-bottom: 1px solid var(--trait);
|
||||
background: var(--papier);
|
||||
background-image: repeating-linear-gradient(to right, var(--trait) 0 1px, transparent 1px 56px);
|
||||
background-position: 24px 0;
|
||||
position: relative;
|
||||
}
|
||||
.regle::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 24px; right: 24px; bottom: 0;
|
||||
height: 5px;
|
||||
background: var(--accent);
|
||||
opacity: .45;
|
||||
}
|
||||
.inner { padding: 2.4rem clamp(1.2rem, 4vw, 3.4rem) 3rem; max-width: 46rem; }
|
||||
|
||||
.module-tag {
|
||||
display: inline-block;
|
||||
font-family: var(--police-titre);
|
||||
font-size: .75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: .04em;
|
||||
text-transform: uppercase;
|
||||
color: var(--papier);
|
||||
background: var(--accent-encre);
|
||||
padding: .1rem .5rem;
|
||||
border-radius: .2rem;
|
||||
margin-bottom: .3rem;
|
||||
}
|
||||
|
||||
/* ---------- blocs de contenu ---------- */
|
||||
|
||||
/* Alias historique de .encadre--cle, conservé pour le contenu existant. */
|
||||
.regle-cle {
|
||||
border-left: .35rem solid var(--cible);
|
||||
background: var(--cible-fond);
|
||||
border-radius: 0 .4rem .4rem 0;
|
||||
padding: .9rem 1.1rem;
|
||||
margin: 1.4rem 0;
|
||||
max-width: var(--lecture);
|
||||
}
|
||||
.regle-cle p { margin: 0; }
|
||||
|
||||
.specimen {
|
||||
font-family: var(--police-doc);
|
||||
font-size: 1rem;
|
||||
line-height: 1.75;
|
||||
background: var(--papier);
|
||||
border: 1px solid var(--trait);
|
||||
border-radius: .3rem;
|
||||
padding: 1rem 1.2rem;
|
||||
}
|
||||
.pil { color: var(--cible); font-weight: 700; }
|
||||
|
||||
details {
|
||||
border-bottom: 1px solid var(--trait);
|
||||
padding: .6rem 0;
|
||||
max-width: var(--lecture);
|
||||
}
|
||||
summary { cursor: pointer; font-weight: 600; }
|
||||
summary::marker { color: var(--accent); }
|
||||
details[open] summary { margin-bottom: .6rem; }
|
||||
|
||||
/* ---------- boutons ---------- */
|
||||
|
||||
button {
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
border: 1px solid var(--accent-encre);
|
||||
background: var(--blanc);
|
||||
color: var(--accent-encre);
|
||||
padding: .4rem .85rem;
|
||||
border-radius: .3rem;
|
||||
}
|
||||
button:hover { background: var(--accent-fond); }
|
||||
button.plein { background: var(--accent-encre); color: var(--papier); }
|
||||
button.plein:hover { background: var(--encre); border-color: var(--encre); }
|
||||
|
||||
/* ---------- démonstration des marques de paragraphe ---------- */
|
||||
|
||||
.demo { border: 1px solid var(--trait); border-radius: .3rem; margin: 1.2rem 0; overflow: hidden; }
|
||||
.demo-barre {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
background: var(--papier);
|
||||
border-bottom: 1px solid var(--trait);
|
||||
padding: .55rem .8rem;
|
||||
font-size: .9rem;
|
||||
}
|
||||
.demo-corps { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
|
||||
.demo-col { padding: .9rem 1rem; font-family: var(--police-doc); line-height: 1.7; overflow: hidden; }
|
||||
.demo-col:first-child { border-right: 1px solid var(--trait); }
|
||||
.demo-col h4 {
|
||||
margin: 0 0 .5rem;
|
||||
font-family: var(--police-texte);
|
||||
font-size: .82rem;
|
||||
color: var(--encre-douce);
|
||||
}
|
||||
.marque { color: var(--cible); font-weight: 700; }
|
||||
.esp { color: var(--trait-fort); }
|
||||
@media (max-width: 640px) {
|
||||
.demo-corps { grid-template-columns: 1fr; }
|
||||
.demo-col:first-child { border-right: 0; border-bottom: 1px solid var(--trait); }
|
||||
}
|
||||
|
||||
/* ---------- zones cliquables de la fenêtre de Writer ---------- */
|
||||
|
||||
.zones { display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0; }
|
||||
.zones button { font-size: .9rem; }
|
||||
.zones button[aria-pressed="true"] { background: var(--accent-encre); color: var(--papier); }
|
||||
#zone-txt {
|
||||
min-height: 3.2rem;
|
||||
background: var(--accent-fond);
|
||||
border-radius: .3rem;
|
||||
padding: .7rem .9rem;
|
||||
font-size: .95rem;
|
||||
max-width: var(--lecture);
|
||||
}
|
||||
|
||||
/* ---------- validateur de nom de fichier ---------- */
|
||||
|
||||
.nomtest input {
|
||||
font: inherit;
|
||||
font-family: ui-monospace, "JetBrains Mono", Consolas, monospace;
|
||||
padding: .45rem .6rem;
|
||||
border: 1px solid var(--trait-fort);
|
||||
border-radius: .3rem;
|
||||
width: min(28rem, 100%);
|
||||
}
|
||||
.check { list-style: none; padding: 0; margin: .8rem 0; font-size: .95rem; }
|
||||
.check li { padding-left: 1.7rem; position: relative; margin-bottom: .3rem; }
|
||||
.check li::before { position: absolute; left: 0; font-weight: 700; }
|
||||
.check li.ok::before { content: "\2713"; color: var(--juste); }
|
||||
.check li.ko::before { content: "\2715"; color: var(--erreur); }
|
||||
|
||||
/* ---------- chasse aux fautes ---------- */
|
||||
|
||||
.chasse {
|
||||
font-family: var(--police-doc);
|
||||
line-height: 2;
|
||||
background: var(--papier);
|
||||
border: 1px solid var(--trait);
|
||||
border-radius: .3rem;
|
||||
padding: 1rem 1.2rem;
|
||||
}
|
||||
.chasse span { cursor: pointer; padding: 0 .1rem; border-bottom: 2px solid transparent; }
|
||||
.chasse span:hover { background: var(--accent-fond); }
|
||||
.chasse span.trouve { background: var(--cible); border-bottom-color: #B8912A; }
|
||||
.chasse span.rate { background: var(--erreur-fond); border-bottom-color: var(--erreur); }
|
||||
.score { font-weight: 600; margin-top: .6rem; }
|
||||
|
||||
/* ---------- quiz ---------- */
|
||||
|
||||
.quiz {
|
||||
border: 1px solid var(--trait);
|
||||
border-radius: .4rem;
|
||||
padding: 1.1rem 1.2rem;
|
||||
margin: 1.2rem 0;
|
||||
background: var(--blanc);
|
||||
}
|
||||
.q { margin-bottom: 1.3rem; }
|
||||
.q p { font-weight: 600; margin-bottom: .5rem; }
|
||||
.q label { display: block; padding: .32rem .5rem; cursor: pointer; border-left: 3px solid transparent; }
|
||||
.q label:hover { background: var(--accent-fond); }
|
||||
.q input { margin-right: .5rem; }
|
||||
.q label.bon { background: var(--juste-fond); border-left-color: var(--juste); }
|
||||
.q label.mauvais { background: var(--erreur-fond); border-left-color: var(--erreur); }
|
||||
.verdict { margin-top: .5rem; font-size: .93rem; color: var(--encre-douce); }
|
||||
|
||||
/* ---------- chronomètre de frappe ---------- */
|
||||
|
||||
.chrono {
|
||||
display: flex;
|
||||
gap: 1.2rem;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
background: var(--papier);
|
||||
border: 1px solid var(--trait);
|
||||
border-radius: .3rem;
|
||||
padding: .9rem 1rem;
|
||||
}
|
||||
.temps {
|
||||
font-family: ui-monospace, "JetBrains Mono", Consolas, monospace;
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
#zone-frappe {
|
||||
width: 100%;
|
||||
min-height: 9rem;
|
||||
font-family: var(--police-doc);
|
||||
font-size: 1rem;
|
||||
line-height: 1.7;
|
||||
padding: .8rem;
|
||||
border: 1px solid var(--trait-fort);
|
||||
border-radius: .3rem;
|
||||
margin-top: .8rem;
|
||||
}
|
||||
|
||||
/* ---------- filtre des raccourcis ---------- */
|
||||
|
||||
#filtre {
|
||||
font: inherit;
|
||||
padding: .45rem .6rem;
|
||||
border: 1px solid var(--trait-fort);
|
||||
border-radius: .3rem;
|
||||
width: min(22rem, 100%);
|
||||
}
|
||||
|
||||
/* ---------- petits écrans ---------- */
|
||||
|
||||
@media (max-width: 880px) {
|
||||
.wrap { grid-template-columns: 1fr; padding: .8rem; }
|
||||
.sommaire-lat {
|
||||
position: static;
|
||||
max-height: none;
|
||||
background: var(--blanc);
|
||||
padding: 1rem;
|
||||
border: 1px solid var(--trait);
|
||||
border-radius: .3rem;
|
||||
}
|
||||
.sommaire-lat a { display: inline-block; border-left: 0; border-bottom: 3px solid transparent; }
|
||||
.sommaire-lat a.on { border-left: 0; border-bottom-color: var(--accent); }
|
||||
}
|
||||
|
||||
@media print {
|
||||
.sommaire-lat, .actions, .chrono, #zone-frappe { display: none; }
|
||||
.feuille { box-shadow: none; border: 0; }
|
||||
.wrap { display: block; padding: 0; }
|
||||
}
|
||||
Reference in New Issue
Block a user