Stage 7 polish (round 3): zoom magnifies labels, popover edge-anchor, flash x2
- item 5: move container-type to the zoom-scaled .scaler so cqw labels grow WITH the board (magnifying-glass zoom); new e2e measures the font grows ~1.85x - item 8: confirm popovers anchor to the trigger's right edge (no longer run off-screen) - item 9: last-word flash runs 2 cycles then settles to normal (was infinite)
This commit is contained in:
@@ -92,8 +92,7 @@
|
||||
.popover {
|
||||
position: absolute;
|
||||
bottom: calc(100% + 6px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
right: 0;
|
||||
z-index: 19;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -84,7 +84,7 @@
|
||||
class="cell {premClass[premium[r][c]]}"
|
||||
class:filled={!!cell}
|
||||
class:pending={!!p && !cell}
|
||||
class:hl={!!cell && highlight.has(key(r, c))}
|
||||
class:hl={!!cell && highlight.has(key(r, c)) && !flash}
|
||||
class:flash={!!cell && flash && highlight.has(key(r, c))}
|
||||
data-cell
|
||||
data-row={r}
|
||||
@@ -115,14 +115,16 @@
|
||||
overflow: hidden;
|
||||
background: var(--board-bg);
|
||||
border-radius: var(--radius-sm);
|
||||
container-type: inline-size;
|
||||
}
|
||||
.viewport.zoomed {
|
||||
overflow: auto;
|
||||
}
|
||||
/* The query container is the (zoom-scaled) board, so cqw labels scale WITH the board
|
||||
— a magnifying-glass zoom. */
|
||||
.scaler {
|
||||
width: calc(100% * var(--z));
|
||||
transition: width 0.25s ease;
|
||||
container-type: inline-size;
|
||||
}
|
||||
.grid {
|
||||
display: grid;
|
||||
@@ -167,7 +169,8 @@
|
||||
background: var(--tile-recent);
|
||||
}
|
||||
.cell.flash {
|
||||
animation: tileflash 1s ease-in-out infinite;
|
||||
/* Two flashes to draw the eye, then settle back to normal so it does not distract. */
|
||||
animation: tileflash 1s ease-in-out 2;
|
||||
}
|
||||
@keyframes tileflash {
|
||||
0%,
|
||||
|
||||
Reference in New Issue
Block a user