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
+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