dennii/Connect-5
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/Connect-5.git synced 2026-04-17 22:46:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

UI: Increase grid line visibility for better accessibility on dark screens

Browse Source
This commit is contained in:
DeNNiiInc
2025-12-23 19:11:23 +11:00
parent 68c9a67dbd
commit 78f16c68b2
1 changed files with 43 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
styles.css
View File

@@ -16,7 +16,7 @@
--border-medium: rgba(255, 255, 255, 0.2);
--success: #10b981;
--danger: #ef4444;
--grid-line: rgba(147, 51, 234, 0.2);
--grid-line: rgba(147, 51, 234, 0.5);
--grid-bg: #0f1420;
--cell-hover: rgba(147, 51, 234, 0.1);
--win-highlight: hsl(270, 70%, 60%);
@@ -342,7 +342,7 @@ body {
height: 4px;
background: var(--grid-line);
border-radius: 50%;
opacity: 0.3;
opacity: 0.6;
}
.cell:hover:not(.occupied) {
@@ -646,7 +646,7 @@ body {
color: var(--text-primary);
font-size: 0.95rem;
font-weight: 600;
font-family: 'Courier New', monospace;
font-family: "Courier New", monospace;
padding: 0.25rem 0.75rem;
background: var(--bg-tertiary);
border-radius: 6px;
@@ -675,7 +675,8 @@ body {
}
@keyframes pulse {
0%, 100% {
0%,
100% {
opacity: 1;
}
50% {
@@ -700,7 +701,8 @@ body {
}
@keyframes pulse-error {
0%, 100% {
0%,
100% {
opacity: 1;
transform: scale(1);
}
@@ -802,11 +804,29 @@ body {
}
/* Responsive Cell Sizes */
.game-board[data-size="15"] .cell { width: 30px; height: 30px; font-size: 1.5rem; }
.game-board[data-size="20"] .cell { width: 25px; height: 25px; font-size: 1.2rem; }
.game-board[data-size="25"] .cell { width: 20px; height: 20px; font-size: 0.9rem; }
.game-board[data-size="50"] .cell { width: 12px; height: 12px; font-size: 0.6rem; }
.game-board[data-size="50"] .cell::after { font-size: 0.6rem !important; } /* Adjust ghost size for tiny cells */
.game-board[data-size="15"] .cell {
width: 30px;
height: 30px;
font-size: 1.5rem;
}
.game-board[data-size="20"] .cell {
width: 25px;
height: 25px;
font-size: 1.2rem;
}
.game-board[data-size="25"] .cell {
width: 20px;
height: 20px;
font-size: 0.9rem;
}
.game-board[data-size="50"] .cell {
width: 12px;
height: 12px;
font-size: 0.6rem;
}
.game-board[data-size="50"] .cell::after {
font-size: 0.6rem !important;
} /* Adjust ghost size for tiny cells */
/* Responsive Design */
@media (max-width: 1200px) {
@@ -1040,7 +1060,7 @@ body {
.db-detail-value {
color: var(--text-primary);
font-weight: 600;
font-family: 'Courier New', monospace;
font-family: "Courier New", monospace;
font-size: 0.95rem;
}
@@ -1074,7 +1094,7 @@ body {
padding: 0.5rem 0.75rem;
margin-bottom: 0.5rem;
border-radius: 6px;
font-family: 'Courier New', monospace;
font-family: "Courier New", monospace;
font-size: 0.85rem;
line-height: 1.4;
border-left: 3px solid transparent;
@@ -1125,7 +1145,11 @@ body {
/* SQL Error Banner (Testing Phase) */
.sql-error-banner {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(245, 158, 11, 0.1));
background: linear-gradient(
135deg,
rgba(239, 68, 68, 0.1),
rgba(245, 158, 11, 0.1)
);
border: 2px solid #ef4444;
border-radius: 12px;
margin: 1rem 0;
@@ -1135,7 +1159,8 @@ body {
}
@keyframes errorPulse {
0%, 100% {
0%,
100% {
box-shadow: 0 4px 20px rgba(239, 68, 68, 0.3);
}
50% {
@@ -1158,7 +1183,8 @@ body {
}
@keyframes shake {
0%, 100% {
0%,
100% {
transform: translateX(0);
}
25% {
@@ -1190,7 +1216,7 @@ body {
background: rgba(239, 68, 68, 0.1);
border-radius: 8px;
border-left: 4px solid #ef4444;
font-family: 'Courier New', monospace;
font-family: "Courier New", monospace;
}
.sql-error-details {
@@ -1214,4 +1240,3 @@ body {
grid-template-columns: 1fr;
}
}