From de97c3496539e05e05616367bd847ad4559c081d Mon Sep 17 00:00:00 2001 From: Sergio Date: Sun, 24 May 2026 02:44:06 +0000 Subject: [PATCH] portada: reticula 3px #777, z-index 30, canvas z-index -1, hover via reticula-lit --- crates/apps/gioser-web/index.html | 14 ++++----- crates/apps/gioser-web/styles.css | 49 +++++++++++++------------------ 2 files changed, 28 insertions(+), 35 deletions(-) diff --git a/crates/apps/gioser-web/index.html b/crates/apps/gioser-web/index.html index 30cf3a7..5a78eed 100644 --- a/crates/apps/gioser-web/index.html +++ b/crates/apps/gioser-web/index.html @@ -9,7 +9,7 @@ - +
@@ -159,14 +159,14 @@ // Hover en cuadrantes ilumina retícula document.querySelectorAll('.cuadrante').forEach(q => { q.addEventListener('mouseenter', () => { - reticulaV.classList.add('brighter'); - reticulaH.classList.add('brighter'); - reticulaC.classList.add('brighter'); + reticulaV.classList.add('reticula-lit'); + reticulaH.classList.add('reticula-lit'); + reticulaC.classList.add('reticula-lit'); }); q.addEventListener('mouseleave', () => { - reticulaV.classList.remove('brighter'); - reticulaH.classList.remove('brighter'); - reticulaC.classList.remove('brighter'); + reticulaV.classList.remove('reticula-lit'); + reticulaH.classList.remove('reticula-lit'); + reticulaC.classList.remove('reticula-lit'); }); q.addEventListener('click', function(e) { const hex = this.dataset.q; diff --git a/crates/apps/gioser-web/styles.css b/crates/apps/gioser-web/styles.css index 1462739..24aaf3f 100644 --- a/crates/apps/gioser-web/styles.css +++ b/crates/apps/gioser-web/styles.css @@ -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; } /* ===================================================