Conseil du maître : ligne du maître, feuille d'explication, second moteur pour l'analyse
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Pierre MARTIN
co-authored by
Claude Opus 5.5
Claude Opus 5.5
parent
1330ee6df4
commit
5897925b33
+218
@@ -2549,3 +2549,221 @@ html.landscape .position-view.with-board .position-actions {
|
||||
html.landscape .position-view.with-board .position-actions > * {
|
||||
padding-inline: 16px;
|
||||
}
|
||||
|
||||
/* ------------------------------------------- Conseil du maître (1d) */
|
||||
|
||||
/* La ligne du maître : à la place du dernier coup, dans la ligne réservée
|
||||
* de 44 px (elle ne pousse rien). Pictogramme et mot en couleur
|
||||
* d'appréciation, phrase en italique tronquée, chevron. */
|
||||
.advice-line {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
gap: var(--space-2);
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
height: 44px;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
color: var(--text);
|
||||
text-decoration: none;
|
||||
border-radius: 12px;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
.advice-line.appear {
|
||||
animation: fade-in var(--duration-fast) var(--easing-standard);
|
||||
}
|
||||
|
||||
.advice-line .icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.advice-line .icon-chevron {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.advice-text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.advice-word {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
[data-verdict="good"] .icon:not(.icon-chevron),
|
||||
[data-verdict="good"] .advice-word { color: var(--verdict-good); }
|
||||
[data-verdict="doubtful"] .icon:not(.icon-chevron),
|
||||
[data-verdict="doubtful"] .advice-word { color: var(--verdict-doubtful); }
|
||||
[data-verdict="bad"] .icon:not(.icon-chevron),
|
||||
[data-verdict="bad"] .advice-word,
|
||||
[data-verdict="veryBad"] .icon:not(.icon-chevron),
|
||||
[data-verdict="veryBad"] .advice-word { color: var(--verdict-bad); }
|
||||
|
||||
/* Paysage : la pastille du mot, au début de la bande centrale. */
|
||||
.advice-chip-pill {
|
||||
fill: var(--surface);
|
||||
stroke: currentColor;
|
||||
stroke-width: 2;
|
||||
}
|
||||
|
||||
.advice-chip-icon {
|
||||
fill: none;
|
||||
stroke: currentColor;
|
||||
stroke-width: 2px;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
vector-effect: non-scaling-stroke;
|
||||
}
|
||||
|
||||
.advice-chip-text {
|
||||
fill: currentColor;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.advice-chip.verdict-good { color: var(--verdict-good); }
|
||||
.advice-chip.verdict-doubtful { color: var(--verdict-doubtful); }
|
||||
.advice-chip.verdict-bad,
|
||||
.advice-chip.verdict-veryBad { color: var(--verdict-bad); }
|
||||
|
||||
/* La feuille d'explication : elle monte du bas, au-dessus du plateau
|
||||
* voilé. */
|
||||
.explain-sheet {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.explain-verdict {
|
||||
display: inline-flex;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.explain-verdict .icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.explain-verdict[data-verdict="good"] { color: var(--verdict-good); }
|
||||
.explain-verdict[data-verdict="doubtful"] { color: var(--verdict-doubtful); }
|
||||
.explain-verdict[data-verdict="bad"],
|
||||
.explain-verdict[data-verdict="veryBad"] { color: var(--verdict-bad); }
|
||||
|
||||
.explain-title {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.explain-phrase {
|
||||
margin: 0;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.explain-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.explain-body .segment {
|
||||
min-height: 44px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
/* Le coup montré : le vôtre en couleur du texte, celui du maître en
|
||||
* couleur du bon coup (charte 1d). */
|
||||
.explain-board[data-move="mine"] { --last-move: var(--text); }
|
||||
.explain-board[data-move="best"] { --last-move: var(--verdict-good); }
|
||||
|
||||
.explain-legend {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.explain-numbers {
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.explain-numbers summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 44px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.explain-table {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
gap: 4px 12px;
|
||||
font-size: 15px;
|
||||
line-height: 20px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.explain-table .strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.explain-note {
|
||||
margin: var(--space-2) 0 0;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.explain-glossary {
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.explain-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.explain-actions button {
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
/* En paysage : la feuille prend la hauteur de l'écran ; le plateau à
|
||||
* gauche, le texte à droite. */
|
||||
html.landscape .explain-board {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 640 / 520;
|
||||
}
|
||||
|
||||
html.landscape .explain-sheet {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
grid-auto-flow: dense;
|
||||
column-gap: var(--space-4);
|
||||
align-content: start;
|
||||
width: min(100%, 60rem);
|
||||
height: 100%;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
html.landscape .explain-sheet > * {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
||||
html.landscape .explain-sheet > .explain-body {
|
||||
grid-column: 1;
|
||||
grid-row: 1 / span 8;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user