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:
parent
df50e4d384
commit
4d31e42184
@ -443,18 +443,20 @@ input[data-testid*="search"]::placeholder {
|
||||
}
|
||||
}
|
||||
|
||||
/* Test grid overlay */
|
||||
body.show-grid::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
background-image:
|
||||
linear-gradient(rgba(255, 0, 0, 0.2) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255, 0, 0, 0.2) 1px, transparent 1px);
|
||||
background-size: 20px 20px;
|
||||
/* Test grid overlay - aktivna za mobilne naprave */
|
||||
@media (max-width: 768px) {
|
||||
body::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
background-image:
|
||||
linear-gradient(rgba(255, 0, 0, 0.3) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255, 0, 0, 0.3) 1px, transparent 1px);
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user