Improve visual grid overlay for smaller screens

Adjust CSS for the grid overlay to be active only on mobile devices (max-width: 768px) and increase the opacity of the grid lines.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 946a0075-7e32-454b-b348-9e7f576d7f45
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/60d372ff-2c10-46c7-b01b-10c3435136b0/946a0075-7e32-454b-b348-9e7f576d7f45/JlONw6J
This commit is contained in:
sebastjanartic 2025-09-04 13:03:54 +00:00
parent df50e4d384
commit 4d31e42184

View File

@ -443,8 +443,9 @@ input[data-testid*="search"]::placeholder {
} }
} }
/* Test grid overlay */ /* Test grid overlay - aktivna za mobilne naprave */
body.show-grid::after { @media (max-width: 768px) {
body::after {
content: ''; content: '';
position: fixed; position: fixed;
top: 0; top: 0;
@ -454,7 +455,8 @@ body.show-grid::after {
pointer-events: none; pointer-events: none;
z-index: 9999; z-index: 9999;
background-image: background-image:
linear-gradient(rgba(255, 0, 0, 0.2) 1px, transparent 1px), linear-gradient(rgba(255, 0, 0, 0.3) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 0, 0, 0.2) 1px, transparent 1px); linear-gradient(90deg, rgba(255, 0, 0, 0.3) 1px, transparent 1px);
background-size: 20px 20px; background-size: 20px 20px;
}
} }