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