fix: cursor border conflicts with grid edges (Issue 2)
Problem: Cursor's border was conflicting with 3x3 box separators - Cells already have borders for grid structure - Cursor border overlapped/clipped at edges Solution: Use outline instead of border - outline: 3px solid (sits above borders) - outline-offset: -3px (draws inside cell) - z-index: 10 + position: relative (layers above grid) Benefits: - Outline doesn't affect layout - Doesn't conflict with existing borders - Clean appearance at all grid edges - Consistent thickness throughout
This commit is contained in:
+4
-1
@@ -258,5 +258,8 @@
|
|||||||
/* Cursor highlight */
|
/* Cursor highlight */
|
||||||
.sudoku-cell.cursor {
|
.sudoku-cell.cursor {
|
||||||
background-color: rgba(59, 130, 246, 0.3);
|
background-color: rgba(59, 130, 246, 0.3);
|
||||||
border: 2px solid rgb(59, 130, 246);
|
outline: 3px solid rgb(59, 130, 246);
|
||||||
|
outline-offset: -3px;
|
||||||
|
z-index: 10;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user