64 lines
3.1 KiB
CSS
64 lines
3.1 KiB
CSS
.pairs {
|
||
flex: 1;
|
||
min-height: 0;
|
||
overflow: auto;
|
||
}
|
||
|
||
/* Волосяная линия по жёлобу между колонками — ОДИН приём разделения (замечание 9). Нарисована
|
||
на СОДЕРЖИМОМ, а не на скролл-контейнере: у контейнера фон позиционируется по padding-box,
|
||
в который входит полоса прокрутки, и на классических полосах Windows центр уезжал бы от
|
||
границы колонок на половину их ширины. Здесь центр — это центр контента, всегда.
|
||
Ровно 50% сходится потому, что поля блока симметричны (--space-4 плюс прозрачная граница 2px
|
||
с обеих сторон), — см. .pair и .callout.
|
||
|
||
Painted in the SHELL colour: a black groove reads as the same gap that divides the panels,
|
||
rather than as one more grey line inside one. */
|
||
.sheet {
|
||
background-image: linear-gradient(var(--color-shell), var(--color-shell));
|
||
background-position: center top;
|
||
background-size: 1px 100%;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
/* Блок без замечания встаёт по той же сетке, что и выноска: полоска у него прозрачная. */
|
||
.pair {
|
||
border-inline: 2px solid transparent;
|
||
|
||
/* Padding + the transparent border equal the tab inset, so the text sits under the tab label. */
|
||
padding: var(--space-3);
|
||
}
|
||
|
||
/* Жёлоб набирается полями самих колонок, а не gap: тогда линия делит его пополам, а суммарный
|
||
отступ между текстами остаётся прежним — приём ровно один, ширина колонок не поехала. */
|
||
.columns {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 0;
|
||
}
|
||
|
||
.source,
|
||
.target {
|
||
font-size: var(--font-size-content);
|
||
line-height: var(--line-height-content);
|
||
white-space: pre-line;
|
||
}
|
||
|
||
/* Приглушённая колонка оригинала — решение, а не замер: во Fleet на этом месте подсвеченный код.
|
||
Пересмотреть на настоящей читалке (BACKLOG Ф-7).
|
||
Гарнитуру оригиналу НЕ назначаем: подбор по языку делает браузер по `lang` из данных пары
|
||
(`STACK_DECISIONS.md` §2). Любой именованный фейс здесь пар-специфичен — стек SC отрисовал бы
|
||
японские кандзи китайскими начертаниями (унификация Хань), а корейскому и латинице не подошёл
|
||
бы вовсе; `:lang()`-ветка была бы той же пар-спецификой, только записанной в CSS. */
|
||
.source {
|
||
color: var(--color-text-secondary);
|
||
padding-right: var(--space-4);
|
||
}
|
||
|
||
.target {
|
||
color: var(--color-text);
|
||
padding-left: var(--space-4);
|
||
}
|
||
|
||
.missing {
|
||
color: var(--color-text-secondary);
|
||
}
|