64 lines
1.8 KiB
CSS
64 lines
1.8 KiB
CSS
.callout {
|
|
/* The transparent border on the right is not decorative: without it the content of the callout
|
|
is shifted by 2px relative to a block without a remark, and the gutter between the columns
|
|
comes off the hairline of the reader. */
|
|
border-inline: 2px solid transparent;
|
|
padding: var(--space-3);
|
|
transition:
|
|
border-left-color 140ms ease,
|
|
color 140ms ease;
|
|
}
|
|
|
|
/* Two steps, not one: the engine has a ratified ladder of verdict importance
|
|
(status.go:150-175), and blending it into a single look means losing the only signal of
|
|
priority. */
|
|
.callout[data-tone='note'] {
|
|
border-left-color: var(--color-note);
|
|
}
|
|
|
|
.callout[data-tone='quiet'] {
|
|
border-left-color: var(--color-separator);
|
|
}
|
|
|
|
/* The caption stands ABOVE the content: below it, it reads as the heading of the next block.
|
|
The mark at the very start of the line is in the same tone as the strip: that way they read as
|
|
one thing rather than as a random line next to grey text. */
|
|
.caption {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
align-items: center;
|
|
margin-bottom: var(--space-2);
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--font-size-small);
|
|
}
|
|
|
|
.mark {
|
|
flex: none;
|
|
color: var(--color-separator);
|
|
}
|
|
|
|
.callout[data-tone='note'] .mark {
|
|
color: var(--color-note);
|
|
}
|
|
|
|
/* Hovering highlights the PAIR "strip ↔ caption": the link between them is seen through action,
|
|
not through an explanation (remark 10). */
|
|
.callout:hover .caption {
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.callout[data-tone='note']:hover {
|
|
border-left-color: var(--color-accent);
|
|
}
|
|
|
|
.callout[data-tone='note']:hover .mark {
|
|
color: var(--color-accent);
|
|
}
|
|
|
|
.callout[data-tone='quiet']:hover {
|
|
border-left-color: var(--color-text-secondary);
|
|
}
|
|
|
|
.callout[data-tone='quiet']:hover .mark {
|
|
color: var(--color-text-secondary);
|
|
}
|