91 lines
2.6 KiB
CSS
91 lines
2.6 KiB
CSS
/* calc-notes — HTML layout for the calc / calc* environments */
|
|
|
|
.calc {
|
|
display: grid;
|
|
/* lhs | rhs | notes */
|
|
grid-template-columns: max-content max-content minmax(8rem, 1fr);
|
|
column-gap: 0.35rem;
|
|
row-gap: 0.6rem;
|
|
align-items: baseline;
|
|
margin: 1rem 0 1.4rem;
|
|
/* allow horizontal scrolling for very wide equations, but never show a
|
|
vertical bar (Firefox computes phantom vertical overflow otherwise) */
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
padding-bottom: 0.4em; /* keep descenders clear of a horizontal bar */
|
|
}
|
|
|
|
.calc-row { display: contents; }
|
|
|
|
.calc-lhs { grid-column: 1; justify-self: end; }
|
|
.calc-rhs { grid-column: 2; justify-self: start; }
|
|
.calc-full { grid-column: 1 / 3; justify-self: start; }
|
|
|
|
/* ---- notes ------------------------------------------------------- */
|
|
|
|
.calc-notes {
|
|
grid-column: 3;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.35rem 0.75rem;
|
|
align-items: baseline;
|
|
min-width: 0;
|
|
padding-left: 0.9rem;
|
|
}
|
|
|
|
.calc-note {
|
|
color: var(--calc-notecolor, #B45309);
|
|
font-size: 0.85em;
|
|
line-height: 1.35;
|
|
}
|
|
|
|
.calc-note > summary {
|
|
cursor: pointer;
|
|
list-style: none; /* remove the default triangle ... */
|
|
user-select: none;
|
|
opacity: 0.7;
|
|
font-style: italic;
|
|
}
|
|
.calc-note > summary::-webkit-details-marker { display: none; }
|
|
.calc-note > summary::before { content: "▸ "; font-style: normal; }
|
|
.calc-note[open] > summary::before { content: "▾ "; }
|
|
.calc-note > summary:hover { opacity: 1; }
|
|
|
|
.calc-note[open] {
|
|
background: color-mix(in srgb, var(--calc-notecolor, #B45309) 8%, transparent);
|
|
border-left: 2px solid var(--calc-notecolor, #B45309);
|
|
border-radius: 0.25rem;
|
|
padding: 0.15rem 0.45rem;
|
|
}
|
|
|
|
.calc-note-body { margin-top: 0.1rem; }
|
|
.calc-note-body p { margin: 0; }
|
|
|
|
/* \mnote: math note (no extra styling needed — body is typeset math) */
|
|
.calc-note-math .calc-note-body { padding: 0.1rem 0; }
|
|
|
|
/* ---- calc*: boxed final result ----------------------------------- */
|
|
|
|
.calc-box {
|
|
display: inline-block;
|
|
border: 1.5px solid currentColor;
|
|
border-radius: 0.3em;
|
|
padding: 0.3em 0.65em;
|
|
margin-top: 0.15em;
|
|
background: color-mix(in srgb, currentColor 4%, transparent);
|
|
}
|
|
|
|
/* ---- printing: show notes unfolded, like the PDF ------------------ */
|
|
|
|
@media print {
|
|
.calc-note > summary { display: none; }
|
|
.calc-note[open] { background: none; border: none; padding: 0; }
|
|
}
|
|
|
|
/* small screens: notes drop under the equation line */
|
|
@media (max-width: 560px) {
|
|
.calc { grid-template-columns: max-content 1fr; }
|
|
.calc-notes { grid-column: 1 / 3; padding-left: 1.5rem; }
|
|
.calc-full { grid-column: 1 / 3; }
|
|
}
|