portada: reticula 3px #777, z-index 30, canvas z-index -1, hover via reticula-lit
This commit is contained in:
@@ -57,18 +57,12 @@ html, body {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 2px;
|
||||
width: 3px;
|
||||
height: 100%;
|
||||
background: #444;
|
||||
background: #777;
|
||||
z-index: 30;
|
||||
pointer-events: none;
|
||||
transition: background 0.4s ease, box-shadow 0.4s ease;
|
||||
transform: translateX(-0.5px);
|
||||
}
|
||||
|
||||
.reticula-v.brighter {
|
||||
background: rgba(192, 192, 192, 0.35);
|
||||
box-shadow: -2px 0 8px rgba(192, 192, 192, 0.18), 2px 0 8px rgba(192, 192, 192, 0.18);
|
||||
transform: translateX(-1.5px);
|
||||
}
|
||||
|
||||
.reticula-h {
|
||||
@@ -76,37 +70,36 @@ html, body {
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: #444;
|
||||
height: 3px;
|
||||
background: #777;
|
||||
z-index: 30;
|
||||
pointer-events: none;
|
||||
transition: background 0.4s ease, box-shadow 0.4s ease;
|
||||
transform: translateY(-0.5px);
|
||||
}
|
||||
|
||||
.reticula-h.brighter {
|
||||
background: rgba(192, 192, 192, 0.35);
|
||||
box-shadow: 0 -2px 8px rgba(192, 192, 192, 0.18), 0 2px 8px rgba(192, 192, 192, 0.18);
|
||||
transform: translateY(-1.5px);
|
||||
}
|
||||
|
||||
.reticula-center {
|
||||
position: absolute;
|
||||
top: calc(50% - 14px);
|
||||
left: calc(50% - 14px);
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 2px solid #444;
|
||||
top: calc(50% - 16px);
|
||||
left: calc(50% - 16px);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 3px solid #777;
|
||||
border-radius: 50%;
|
||||
z-index: 30;
|
||||
pointer-events: none;
|
||||
transition: border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.reticula-center.brighter {
|
||||
border-color: rgba(192, 192, 192, 0.35);
|
||||
box-shadow: 0 0 10px rgba(192, 192, 192, 0.2);
|
||||
background: rgba(192, 192, 192, 0.04);
|
||||
/* Iluminación en hover via JS */
|
||||
.reticula-lit {
|
||||
background: rgba(200, 200, 200, 0.5) !important;
|
||||
box-shadow: 0 0 12px rgba(200, 200, 200, 0.3) !important;
|
||||
}
|
||||
|
||||
.reticula-center.reticula-lit {
|
||||
border-color: rgba(200, 200, 200, 0.6) !important;
|
||||
box-shadow: 0 0 14px rgba(200, 200, 200, 0.35) !important;
|
||||
background: rgba(200, 200, 200, 0.06) !important;
|
||||
}
|
||||
|
||||
/* ===================================================
|
||||
|
||||
Reference in New Issue
Block a user