Render: chat pegado abajo, hojas sin desfase, separadores y fidelidad iOS
- scrollAbajo instantáneo + ResizeObserver 'pegado abajo' (imágenes tardías, pestaña oculta) - Hoja de opciones busca la fila viva; re-render de su mensaje cierra la hoja - Separadores de filas de la hoja, proporciones de lista, un solo separador entre grupos - Home indicator sobre la hoja, composer oscuro #232626 con hairline, padding 7/12/6 - URLs sin puntuación final, www. -> https://, negrita/cursiva/tachado con reglas de WhatsApp - Documento: 'tamaño • ext' o 'PDF'; transición de color al cambiar tema - Presentación sin toolbar en escritorio (Esc para salir), hooks de zoom, móvil sin marco Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
urieljareth
co-authored by
Claude Opus 5.5
Claude Opus 5.5
parent
9a5f21badf
commit
50a64f21e3
+69
-2
@@ -43,6 +43,42 @@
|
||||
que el teléfono crezca (en 1280×720 pasa de .67 a ~.73). */
|
||||
body.presentacion #barra-movil { display: none; }
|
||||
|
||||
/* Presentación en escritorio (ratón + teclado): captura limpia, sin toolbar.
|
||||
Se sale con Esc o P (js/ux.js); una pista flotante lo recuerda. */
|
||||
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
|
||||
body.presentacion #toolbar { display: none; }
|
||||
body.presentacion #panel-movil { position: relative; }
|
||||
body.presentacion #panel-movil::before {
|
||||
content: "Esc para salir";
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 16px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 999px;
|
||||
background: rgba(11, 20, 26, .55);
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
pointer-events: none;
|
||||
opacity: .75;
|
||||
z-index: 5;
|
||||
}
|
||||
@supports (scale: calc(1vh / 1px)) {
|
||||
body.presentacion {
|
||||
--wam-escala: max(.3, min(1, (100vh - 32px) / 852px, (100vw - 64px) / 393px));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Zoom manual (lo fija js/ux.js con body[data-wam-zoom]; sin atributo =
|
||||
"Ajustar", el cálculo automático). Con zoom fijo el panel hace scroll. */
|
||||
html body[data-wam-zoom="100"] { --wam-escala: 1; }
|
||||
html body[data-wam-zoom="125"] { --wam-escala: 1.25; }
|
||||
body[data-wam-zoom="100"] #panel-movil,
|
||||
body[data-wam-zoom="125"] #panel-movil { overflow: auto; }
|
||||
body[data-wam-zoom="100"] .iphone-escena,
|
||||
body[data-wam-zoom="125"] .iphone-escena { margin: 0 auto; }
|
||||
|
||||
/* --- Columna de vista previa (#panel-movil) ---------------------------- */
|
||||
#panel-movil {
|
||||
min-width: 0;
|
||||
@@ -185,7 +221,7 @@ body.presentacion #barra-movil { display: none; }
|
||||
height: 5px;
|
||||
border-radius: 3px;
|
||||
background: #fff; /* en oscuro */
|
||||
z-index: 45;
|
||||
z-index: 70; /* encima de la hoja inferior (.sheet z 60), como en iOS */
|
||||
pointer-events: none;
|
||||
}
|
||||
#pantalla:not(.oscuro) .home-indicator { background: #000; } /* en claro, negro */
|
||||
@@ -202,7 +238,7 @@ body.presentacion #barra-movil { display: none; }
|
||||
overflow-x: hidden;
|
||||
list-style: none;
|
||||
padding: 8px 0 14px;
|
||||
scroll-behavior: smooth;
|
||||
scroll-behavior: auto; /* el suave solo en enfocarEnChat (behavior explícito) */
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
|
||||
@@ -241,6 +277,37 @@ body.presentacion #barra-movil { display: none; }
|
||||
/* --- Modo presentación: el iPhone se centra y respira más --------------- */
|
||||
body.presentacion #panel-movil { padding: 14px 20px 22px; }
|
||||
|
||||
/* --- Móvil real (≤ 520 px): sin marco ----------------------------------
|
||||
En el propio teléfono del consultor sobra el iPhone dibujado: la pantalla
|
||||
ocupa el ancho y el alto disponibles a escala 1 (sin isla, status bar ni
|
||||
indicador home duplicados). body.con-marco lo desactiva. */
|
||||
@media (max-width: 520px) {
|
||||
html body:not(.con-marco) { --wam-escala: 1; }
|
||||
body:not(.con-marco) #panel-movil { padding-left: 0; padding-right: 0; }
|
||||
body:not(.con-marco) #barra-movil { padding: 0 16px; margin-bottom: 8px; }
|
||||
body:not(.con-marco) .iphone-escena {
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
min-height: 420px;
|
||||
margin: 0;
|
||||
}
|
||||
body:not(.con-marco) .iphone {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
}
|
||||
body:not(.con-marco) .pantalla { border-radius: 0; padding-top: 0; }
|
||||
body:not(.con-marco) .island,
|
||||
body:not(.con-marco) .statusbar,
|
||||
body:not(.con-marco) .home-indicator { display: none; }
|
||||
body:not(.con-marco) .wa #composer { padding-bottom: 8px; }
|
||||
body:not(.con-marco) .wa .sheet-panel { padding-bottom: 12px; }
|
||||
}
|
||||
|
||||
/* --- Accesibilidad: menos movimiento ------------------------------------- */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
#btn-reproducir { transition: none; }
|
||||
|
||||
+27
-14
@@ -69,7 +69,7 @@
|
||||
--wa-chrome: #121313;
|
||||
--wa-chrome-text: #ffffff;
|
||||
--wa-header-icon: #ffffff;
|
||||
--wa-compose-bar: #121313;
|
||||
--wa-compose-bar: #232626; /* barra [medido]; el header sí es #121313 */
|
||||
--wa-compose-field: #393c3c; /* [medido] */
|
||||
--wa-compose-border: transparent;
|
||||
--wa-separator: rgba(255, 255, 255, .10);
|
||||
@@ -106,7 +106,6 @@
|
||||
|
||||
/* Reset de <button> dentro del chat (botones de flujo accesibles) */
|
||||
.wa button.qr-btn,
|
||||
.wa button.sheet-fila,
|
||||
.wa button.sheet-cerrar,
|
||||
.wa button.contact-accion {
|
||||
font: inherit;
|
||||
@@ -116,6 +115,16 @@
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
/* Las filas de la hoja conservan su separador (lista-hoja-inferior.png) */
|
||||
.wa button.sheet-fila {
|
||||
font: inherit;
|
||||
letter-spacing: inherit;
|
||||
border: 0;
|
||||
border-bottom: .5px solid var(--wa-sheet-sep);
|
||||
background: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
/* ---------- 4. Header del chat (iOS: chevron negro, avatar 36, iconos de línea) ---------- */
|
||||
.wa #chat-header {
|
||||
@@ -127,7 +136,7 @@
|
||||
background: var(--wa-chrome);
|
||||
color: var(--wa-chrome-text);
|
||||
border-bottom: .5px solid var(--wa-separator);
|
||||
transition: background-color .2s ease;
|
||||
transition: background-color .2s ease, color .2s ease;
|
||||
}
|
||||
.wa .wa-back { width: 22px; flex: none; display: flex; color: var(--wa-chrome-text); padding-left: 4px; }
|
||||
.wa .wa-avatar,
|
||||
@@ -139,6 +148,7 @@
|
||||
flex: none;
|
||||
background: var(--wa-separator);
|
||||
}
|
||||
.wa #chat-avatar { position: relative; z-index: 1; }
|
||||
.wa .wa-header-tit { flex: 1; min-width: 0; }
|
||||
.wa .header-title {
|
||||
font-size: 17px;
|
||||
@@ -199,14 +209,14 @@
|
||||
position: relative;
|
||||
z-index: 0; /* contexto: la cola queda bajo el contenido */
|
||||
max-width: 78%;
|
||||
padding: 6px 12px 7px;
|
||||
padding: 7px 12px 6px; /* 7 arriba / 6 abajo [medido, README §2.2] */
|
||||
border-radius: 18px;
|
||||
background: var(--wa-bubble-in);
|
||||
font-size: 17px;
|
||||
line-height: 22px;
|
||||
overflow-wrap: break-word;
|
||||
word-break: break-word;
|
||||
transition: background-color .2s ease;
|
||||
transition: background-color .2s ease, color .2s ease;
|
||||
}
|
||||
.wa .out .bubble { background: var(--wa-bubble-out); }
|
||||
|
||||
@@ -615,7 +625,7 @@
|
||||
background: var(--wa-bubble-in);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: background-color .2s ease;
|
||||
transition: background-color .2s ease, color .2s ease;
|
||||
}
|
||||
.wa .card-media {
|
||||
display: block;
|
||||
@@ -737,15 +747,17 @@
|
||||
margin-left: 16px;
|
||||
padding-left: 0;
|
||||
}
|
||||
.wa .sheet-opciones > .sheet-seccion:first-child { padding-top: 12px; }
|
||||
.wa .sheet-opciones > .sheet-seccion:first-child { padding-top: 30px; }
|
||||
.wa .sheet-grupo { margin: 0; }
|
||||
.wa .sheet-grupo + .sheet-grupo { margin-top: 18px; border-top: .5px solid var(--wa-sheet-sep); }
|
||||
/* "Todas las opciones": un único separador (con sangría) entre grupos */
|
||||
.wa .sheet-grupo + .sheet-grupo { margin: 0 0 0 16px; border-top: .5px solid var(--wa-sheet-sep); }
|
||||
.wa .sheet-grupo + .sheet-grupo > .sheet-fila { margin-left: 0; width: 100%; }
|
||||
.wa .sheet-fila {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
min-height: 52px;
|
||||
padding: 12px 16px 12px 0;
|
||||
padding: 17px 16px 17px 0;
|
||||
margin: 0 0 0 16px;
|
||||
width: calc(100% - 16px);
|
||||
border-bottom: .5px solid var(--wa-sheet-sep);
|
||||
@@ -757,10 +769,11 @@
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
.wa .sheet-fila:active { background: rgba(0, 0, 0, .05); }
|
||||
.wa .sheet-fila-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
|
||||
.wa .sheet-fila-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; }
|
||||
.wa .sheet-fila-titulo { font-size: 17px; line-height: 22px; }
|
||||
.wa .sheet-fila-desc { font-size: 15px; line-height: 20px; letter-spacing: 0; color: var(--wa-sheet-sub); }
|
||||
.wa .sheet-fila-btn { color: var(--wa-action); min-height: 48px; }
|
||||
.wa .sheet-fila-desc { font-size: 15px; line-height: 18px; letter-spacing: 0; color: var(--wa-sheet-sub); }
|
||||
.wa .sheet-fila-btn,
|
||||
.wa button.sheet-fila-btn { color: var(--wa-action); min-height: 48px; padding-top: 12px; padding-bottom: 12px; border-bottom: 0; }
|
||||
.wa .sheet-fila-btn .sheet-fila-titulo { color: var(--wa-action); }
|
||||
.wa .sheet-fila .qr-ico { flex: none; display: flex; color: var(--wa-action); }
|
||||
.wa .sheet-pie {
|
||||
@@ -780,8 +793,8 @@
|
||||
gap: 12px;
|
||||
padding: 6px 12px 34px 10px; /* 34 pt de safe area bajo el home indicator */
|
||||
background: var(--wa-compose-bar);
|
||||
border-top: 0;
|
||||
transition: background-color .2s ease;
|
||||
border-top: .5px solid var(--wa-separator); /* hairline como el del header */
|
||||
transition: background-color .2s ease, color .2s ease;
|
||||
}
|
||||
.wa #composer .attach,
|
||||
.wa #composer .cmp-icono {
|
||||
|
||||
Reference in New Issue
Block a user