98 lines
2.7 KiB
CSS
98 lines
2.7 KiB
CSS
.bank {
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
gap: var(--space-3);
|
|
}
|
|
|
|
/* The field takes the row, the toggle is pinned to the panel edge — otherwise it floats in the
|
|
emptiness between them. */
|
|
.search {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.toolbar {
|
|
display: flex;
|
|
gap: var(--space-3);
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
/* The source side is one step larger: a hanzi at the same size reads smaller than Cyrillic, and
|
|
in the pair "term → translation" it lost weight to what is derived from it. */
|
|
.src {
|
|
overflow: hidden;
|
|
flex: 0 1 auto;
|
|
min-width: 0;
|
|
color: var(--color-text);
|
|
font-size: var(--font-size-source);
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.dst {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* The window is a suffix, not a column — almost no row has one. It shrinks FIRST: the term
|
|
matters more than the note attached to it. */
|
|
.window {
|
|
overflow: hidden;
|
|
margin-left: var(--space-2);
|
|
flex: 0 100 auto;
|
|
min-width: 0;
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--font-size-small);
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.quiet,
|
|
.absent {
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* Revealed, it is ordinary text that ellipsizes. Nothing fades: a darkening tail reads as damage. */
|
|
.sense {
|
|
display: block;
|
|
overflow: hidden;
|
|
min-width: 0;
|
|
color: var(--color-text-secondary);
|
|
text-overflow: ellipsis;
|
|
transition: filter 140ms ease;
|
|
}
|
|
|
|
/* A plain blur and nothing else — two rules were learned the hard way here:
|
|
- NOTHING may clip it. A blur mixes in what lies outside the ink, so a box ending at the glyphs
|
|
ends the blur with a straight edge. That rules out `text-shadow` (own ink, cut by own
|
|
`overflow`) and a mask (works over the box, and a blur reaches past it on all four sides).
|
|
- The RADIUS decides whether this reads as blurred text or as grey bricks: at 5px words of this
|
|
size fuse into slabs, at 3px their shapes survive and nothing is legible.
|
|
`user-select` closes the plainest way round a spoiler — selecting the column copied every
|
|
description at once. Find-in-page still reaches it; nothing that keeps text in the document can
|
|
stop that. */
|
|
.senseCell .sense {
|
|
overflow: visible;
|
|
filter: blur(3px);
|
|
user-select: none;
|
|
}
|
|
|
|
/* Two deliberate ways to reveal: hovering the cell (mouse) and the toggle, which opens the whole
|
|
column (keyboard and screen reader — only it drops `aria-hidden`). */
|
|
.senseCell:hover .sense {
|
|
filter: none;
|
|
user-select: auto;
|
|
}
|
|
|
|
.state {
|
|
display: flex;
|
|
gap: var(--space-5);
|
|
flex-wrap: wrap;
|
|
padding-inline: var(--space-4);
|
|
color: var(--color-text-secondary);
|
|
font-size: var(--font-size-small);
|
|
}
|