From 73486aa3febbca5f64df19dfcfe9d7dd1d35b3b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jonathan=20David=20Florez=20Salom=C3=B3n?= Date: Sun, 20 Sep 2026 15:20:30 -0500 Subject: [PATCH] =?UTF-8?q?La=20esquina=20de=20la=20pesta=C3=B1a=20activa?= =?UTF-8?q?=20deja=20de=20romperse,=20y=20las=20que=20esperan=20se=20hunde?= =?UTF-8?q?n?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit DOS COSAS EN LA BARRA DE PESTAÑAS. 1) LA ESQUINA. La activa llevaba dos pseudo-elementos de 8px a los lados con un degradado radial: la curva cóncava de Chrome. El truco funciona en Chrome porque allí NO hay línea bajo la barra; aquí sí la hay, y esas dos piezas blancas la partían en dos justo a los costados de la pestaña — la fluctuación que se veía en la esquina. Se retiran: la activa ya se funde con el contenido por su propio fondo, que tapa la línea exactamente por su ancho, y sin las piezas no asoma nada. 2) LA PROFUNDIDAD. La inactiva no era nada: texto suelto sobre la franja, al mismo plano que la activa, separado por un filete de 1px. Ahora se HUNDE —velo muy tenue y sombra interior— y al pasar el ratón el gesto se invierte: la sombra sale hacia fuera y el fondo tira hacia el blanco de la activa, así que la pestaña sube hacia ti. Es sombra y no relleno sólido a propósito: un bloque gris pesa tanto como la activa y acaba compitiendo con ella. La activa gana su propia sombra, HACIA ARRIBA: abajo está fundida con el contenido y una sombra ahí dibujaría una línea donde no debe haberla. Con fondo propio el separador vertical sobra y se retira. `--sep` se queda: lo sigue usando el aro del favicon mientras carga. Sin cambio de versión: queda listo para la próxima que se saque. Co-Authored-By: Claude Opus 5 --- dist/index.html | 92 ++++++++++++++++++++++++++++--------------------- 1 file changed, 53 insertions(+), 39 deletions(-) diff --git a/dist/index.html b/dist/index.html index 9f16905..dafa111 100644 --- a/dist/index.html +++ b/dist/index.html @@ -35,7 +35,16 @@ /* Sobre una franja casi blanca, un hover blanco no se vería: aquí oscurece. */ --hover: rgba(0, 0, 0, 0.06); --btn-hover: rgba(0, 0, 0, 0.08); - --sep: rgba(0, 0, 0, 0.22); /* separador fino entre pestañas inactivas */ + --sep: rgba(0, 0, 0, 0.22); /* aro del favicon mientras carga */ + /* PROFUNDIDAD. La inactiva no lleva un relleno gris —un bloque sólido pesa y compite + con la activa— sino un velo casi imperceptible y una sombra INTERIOR: parece estar un + plano por debajo. Al pasar el ratón cambia de signo, la sombra sale hacia fuera y la + pestaña sube: por eso el hover va hacia el BLANCO de la activa y no hacia el gris. */ + --tab-atras: rgba(0, 0, 0, 0.035); + --tab-atras-sombra: inset 0 1px 1.5px rgba(0, 0, 0, 0.055); + --tab-hover-bg: rgba(255, 255, 255, 0.85); + --tab-hover-sombra: 0 1px 3px rgba(0, 0, 0, 0.10); + --tab-activa-sombra: 0 -1px 4px rgba(0, 0, 0, 0.07); } /* ── Quién decide el tema ── La APP, no Windows: la web elige su modo con su propio botón (clase `dark` en su @@ -57,6 +66,13 @@ --hover: rgba(255, 255, 255, 0.08); --btn-hover: rgba(255, 255, 255, 0.1); --sep: rgba(255, 255, 255, 0.25); + /* En oscuro el movimiento es el mismo pero con luz: la inactiva se hunde con un velo + blanco muy tenue y una sombra negra dentro; al pasar el ratón sube hacia la luz. */ + --tab-atras: rgba(255, 255, 255, 0.035); + --tab-atras-sombra: inset 0 1px 1.5px rgba(0, 0, 0, 0.35); + --tab-hover-bg: rgba(255, 255, 255, 0.10); + --tab-hover-sombra: 0 1px 3px rgba(0, 0, 0, 0.45); + --tab-activa-sombra: 0 -1px 4px rgba(0, 0, 0, 0.35); } } :root.oscuro { @@ -69,6 +85,13 @@ --hover: rgba(255, 255, 255, 0.08); --btn-hover: rgba(255, 255, 255, 0.1); --sep: rgba(255, 255, 255, 0.25); + /* En oscuro el movimiento es el mismo pero con luz: la inactiva se hunde con un velo + blanco muy tenue y una sombra negra dentro; al pasar el ratón sube hacia la luz. */ + --tab-atras: rgba(255, 255, 255, 0.035); + --tab-atras-sombra: inset 0 1px 1.5px rgba(0, 0, 0, 0.35); + --tab-hover-bg: rgba(255, 255, 255, 0.10); + --tab-hover-sombra: 0 1px 3px rgba(0, 0, 0, 0.45); + --tab-activa-sombra: 0 -1px 4px rgba(0, 0, 0, 0.35); } * { box-sizing: border-box; } html, body { @@ -119,53 +142,46 @@ height: 30px; margin-bottom: 5px; padding: 0 6px 0 10px; - border-radius: 9px; /* inactiva: píldora redondeada (hover) */ + border-radius: 9px; /* inactiva: píldora redondeada */ position: relative; - overflow: visible; /* deja asomar las curvas de la base de la activa */ + overflow: visible; /* las sombras viven fuera de la caja */ + transition: background 140ms ease, box-shadow 140ms ease, color 140ms ease; } - .tab:not(.active):hover { background: var(--hover); } - /* Separador fino a la IZQUIERDA de cada inactiva; se oculta pegado a la activa, - al hover y en la primera (igual que Chrome). */ - .tab:not(.active)::before { - content: ""; - position: absolute; - left: -1px; - top: 50%; - transform: translateY(-50%); - width: 1px; - height: 16px; - background: var(--sep); + /* ── PROFUNDIDAD: las que no mandan están detrás ────────────────────────────────── + Antes la inactiva no era nada: texto suelto sobre la franja, al mismo plano que la + activa, y lo único que las separaba era un filete de 1px. Ahora la inactiva se HUNDE + —velo tenue y sombra interior— y al pasar el ratón el gesto se invierte: la sombra sale + hacia fuera y el fondo tira hacia el blanco de la activa, así que la pestaña sube hacia + ti. Es sombra y no relleno a propósito: un bloque gris sólido pesa tanto como la activa + y acaba compitiendo con ella. + Con fondo propio el separador vertical entre pestañas sobra —ya se ve dónde acaba cada + una—, así que se retiró. */ + .tab:not(.active) { + background: var(--tab-atras); + box-shadow: var(--tab-atras-sombra); + } + .tab:not(.active):hover { + background: var(--tab-hover-bg); + box-shadow: var(--tab-hover-sombra); + color: var(--tab-active-fg); } - .tab:first-child::before, - .tab:hover::before, - .tab.active + .tab::before, - .tab:hover + .tab::before { display: none; } .tab.active { background: var(--tab-active-bg); color: var(--tab-active-fg); height: 35px; margin-bottom: 0; /* su base cae 1px SOBRE el borde de la barra y lo tapa */ border-radius: 10px 10px 0 0; + /* Levantada, apenas: la sombra va HACIA ARRIBA porque abajo la pestaña está fundida con + el contenido y una sombra ahí dibujaría una línea donde justamente no debe haberla. */ + box-shadow: var(--tab-activa-sombra); z-index: 1; } - /* Curvas cóncavas de Chrome en la base de la pestaña activa: dos piezas de 8px con - un cuarto de círculo transparente que "derrama" el fondo hacia los lados. */ - .tab.active::before, - .tab.active::after { - content: ""; - position: absolute; - bottom: 0; - width: 8px; - height: 8px; - } - .tab.active::before { - left: -8px; - background: radial-gradient(circle at 0 0, transparent 8px, var(--tab-active-bg) 8.5px); - } - .tab.active::after { - right: -8px; - background: radial-gradient(circle at 8px 0, transparent 8px, var(--tab-active-bg) 8.5px); - } + /* AQUÍ ESTABAN LAS CURVAS CÓNCAVAS DE CHROME: dos piezas de 8px a los lados de la activa + con un cuarto de círculo transparente que derramaba su fondo hacia fuera. El truco de + Chrome funciona porque allí NO hay línea bajo la barra; aquí sí la hay, y esas dos + piezas blancas la partían en dos justo a los costados de la pestaña — la «fluctuación» + de la esquina. La activa ya se funde con el contenido por su propio fondo, que tapa la + línea exactamente por su ancho; sin las piezas no asoma nada. */ /* ── Color de pestaña ──────────────────────────────────────────────────────────── Misma idea que los grupos de Chrome: teñir para agrupar de un vistazo («todo lo de este cliente, en verde»). El color se elige con clic derecho sobre la pestaña ▸ Color, @@ -185,8 +201,6 @@ .tab[data-color="naranja"] { --tc: 250, 144, 62; } .tab[data-color]:not(.active) { background: rgba(var(--tc), 0.18); } .tab[data-color]:not(.active):hover { background: rgba(var(--tc), 0.32); } - /* Con fondo propio el separador vertical sobra: ya se ve dónde acaba cada pestaña. */ - .tab[data-color]:not(.active)::before { display: none; } .tab[data-color].active { box-shadow: inset 0 3px 0 rgb(var(--tc)); } @media (prefers-color-scheme: dark) { :root:not(.claro) .tab[data-color]:not(.active) { background: rgba(var(--tc), 0.36); }