From 6facc3c8ed901d441e45bc052eadd6bbd2c668f5 Mon Sep 17 00:00:00 2001 From: Sergio Date: Sun, 24 May 2026 02:48:56 +0000 Subject: [PATCH] portada: reticula via pseudoelemento ::before con gradientes, circulo y lineas 3px --- crates/apps/gioser-web/index.html | 15 +---- crates/apps/gioser-web/styles.css | 99 +++++++++++-------------------- 2 files changed, 39 insertions(+), 75 deletions(-) diff --git a/crates/apps/gioser-web/index.html b/crates/apps/gioser-web/index.html index de33b7a..1fe1ce0 100644 --- a/crates/apps/gioser-web/index.html +++ b/crates/apps/gioser-web/index.html @@ -85,11 +85,6 @@ - - - - - @@ -156,17 +151,13 @@ const reticulaH = document.querySelector('.reticula-h'); const reticulaC = document.querySelector('.reticula-center'); - // Hover en cuadrantes ilumina retícula + // Hover en cuadrantes ilumina portada document.querySelectorAll('.cuadrante').forEach(q => { q.addEventListener('mouseenter', () => { - reticulaV.classList.add('reticula-lit'); - reticulaH.classList.add('reticula-lit'); - reticulaC.classList.add('reticula-lit'); + portada.classList.add('portada-hover'); }); q.addEventListener('mouseleave', () => { - reticulaV.classList.remove('reticula-lit'); - reticulaH.classList.remove('reticula-lit'); - reticulaC.classList.remove('reticula-lit'); + portada.classList.remove('portada-hover'); }); 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 24aaf3f..16bffaf 100644 --- a/crates/apps/gioser-web/styles.css +++ b/crates/apps/gioser-web/styles.css @@ -17,11 +17,6 @@ --fg-dim: #666; --fg-bright: #e0e0e0; --accent: #a0a0a0; - --accent-glow: #c0c0c0; - --reticula: #3a3a3a; - --reticula-hover: rgba(192, 192, 192, 0.15); - --border: #333; - --border-hover: #666; --font: 'SF Mono', 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; --font-ui: -apple-system, 'Inter', 'Segoe UI', sans-serif; } @@ -39,7 +34,7 @@ html, body { } /* =================================================== - PORTADA — retícula 2×2 + PORTADA — grid 2×2 =================================================== */ .portada { @@ -52,54 +47,32 @@ html, body { background: var(--bg); } -/* Líneas de retícula — sobre todo */ -.reticula-v { +/* =================================================== + RETÍCULA — pseudoelemento con líneas + círculo + =================================================== */ + +.portada::before { + content: ''; position: absolute; - top: 0; - left: 50%; - width: 3px; - height: 100%; - background: #777; + top: 0; left: 0; right: 0; bottom: 0; z-index: 30; pointer-events: none; - transform: translateX(-1.5px); + transition: all 0.35s ease; + background: + /* línea vertical */ + linear-gradient(90deg, transparent calc(50% - 1.5px), #666 calc(50% - 1.5px), #777 calc(50% + 1.5px), transparent calc(50% + 1.5px)), + /* línea horizontal */ + linear-gradient(0deg, transparent calc(50% - 1.5px), #666 calc(50% - 1.5px), #777 calc(50% + 1.5px), transparent calc(50% + 1.5px)), + /* círculo centro */ + radial-gradient(circle at 50% 50%, transparent calc(14px), #888 calc(14px), #888 calc(17px), transparent calc(17px)); } -.reticula-h { - position: absolute; - top: 50%; - left: 0; - width: 100%; - height: 3px; - background: #777; - z-index: 30; - pointer-events: none; - transform: translateY(-1.5px); -} - -.reticula-center { - position: absolute; - 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; - background: transparent; -} - -/* 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; +.portada-hover::before { + background: + linear-gradient(90deg, transparent calc(50% - 1.5px), rgba(200,200,200,0.5) calc(50% - 1.5px), rgba(200,200,200,0.5) calc(50% + 1.5px), transparent calc(50% + 1.5px)), + linear-gradient(0deg, transparent calc(50% - 1.5px), rgba(200,200,200,0.5) calc(50% - 1.5px), rgba(200,200,200,0.5) calc(50% + 1.5px), transparent calc(50% + 1.5px)), + radial-gradient(circle at 50% 50%, transparent calc(14px), rgba(200,200,200,0.6) calc(14px), rgba(200,200,200,0.6) calc(17px), transparent calc(17px)), + radial-gradient(circle at 50% 50%, rgba(200,200,200,0.06) 40%, transparent 70%); } /* =================================================== @@ -121,7 +94,7 @@ html, body { } .cuadrante:hover { - background: var(--reticula-hover); + background: rgba(192, 192, 192, 0.15); } /* Borde iluminado en hover */ @@ -134,7 +107,7 @@ html, body { } .cuadrante:hover .cuadrante-border { - border-color: var(--border-hover); + border-color: #666; } /* Contenido */ @@ -149,6 +122,10 @@ html, body { transition: opacity 0.3s ease; } +.cuadrante:hover .cuadrante-content { + opacity: 1; +} + /* Alineación: izquierda mira a la derecha, derecha mira a la izquierda */ .cuadrante-01 .cuadrante-content, .cuadrante-02 .cuadrante-content { @@ -166,10 +143,6 @@ html, body { padding-right: 20px; } -.cuadrante:hover .cuadrante-content { - opacity: 1; -} - .cuadrante-hex { font-size: 11px; font-weight: 600; @@ -230,14 +203,14 @@ html, body { color: var(--accent); font-family: var(--font); letter-spacing: 0.05em; - border: 1px solid var(--border); + border: 1px solid #333; padding: 2px 8px; border-radius: 2px; transition: border-color 0.3s ease, color 0.3s ease; } .cuadrante:hover .meta-cta { - border-color: var(--accent-glow); + border-color: var(--fg-bright); color: var(--fg-bright); } @@ -340,7 +313,7 @@ html, body { width: 32px; height: 32px; background: rgba(255,255,255,0.04); - border: 1px solid var(--border); + border: 1px solid #333; border-radius: 4px; color: var(--fg); cursor: pointer; @@ -352,7 +325,7 @@ html, body { .page-control-btn:hover { background: rgba(255,255,255,0.08); - border-color: var(--border-hover); + border-color: #666; } .page-close { @@ -372,7 +345,7 @@ html, body { right: 0; height: 40px; background: rgba(12, 12, 12, 0.92); - border-top: 1px solid var(--border); + border-top: 1px solid #333; display: flex; align-items: center; gap: 6px; @@ -419,7 +392,7 @@ html, body { .taskbar-divider { width: 1px; height: 20px; - background: var(--border); + background: #333; margin: 0 4px; } @@ -475,10 +448,10 @@ html, body { } ::-webkit-scrollbar-thumb { - background: var(--border); + background: #333; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { - background: var(--border-hover); + background: #666; }