fix(web): explicit top/left on .slot and .recycle-label
Without top:0;left:0, Firefox and other non-Chrome engines place absolute elements at the content edge (padding offset = 20px) before the JS transform is applied, shifting slots 20px below/right of cards. Cards already had explicit top:0;left:0; slots now match. .recycle-label also had top:50%;left:50% which combined with the JS inline transform would place the ↺ symbol halfway across the board. Changed to top:0;left:0 so JS transform is the sole position source. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -106,6 +106,7 @@ main {
|
|||||||
/* Empty-pile slot markers */
|
/* Empty-pile slot markers */
|
||||||
.slot {
|
.slot {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
top: 0; left: 0; /* explicit insets — without these some browsers offset by padding */
|
||||||
width: var(--card-w);
|
width: var(--card-w);
|
||||||
height: var(--card-h);
|
height: var(--card-h);
|
||||||
border: 2px dashed rgba(255,255,255,0.15);
|
border: 2px dashed rgba(255,255,255,0.15);
|
||||||
@@ -187,11 +188,10 @@ main {
|
|||||||
box-shadow: 0 0 0 2px var(--accent), 0 4px 12px rgba(0,0,0,0.5);
|
box-shadow: 0 0 0 2px var(--accent), 0 4px 12px rgba(0,0,0,0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Recycle indicator on empty stock */
|
/* Recycle indicator on empty stock — JS sets transform to position it */
|
||||||
.recycle-label {
|
.recycle-label {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 50%; left: 50%;
|
top: 0; left: 0;
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
font-size: 26px;
|
font-size: 26px;
|
||||||
color: rgba(255,255,255,0.3);
|
color: rgba(255,255,255,0.3);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|||||||
Reference in New Issue
Block a user