urieljarethandClaude Opus 5.5
4fe8f73959
- render.js: botones y cards con urlBloqueada se pintan inertes. - interactivity.js: sinFormato con la misma regla de marcadores que render.js; cita de documento con icono y nombre. - Zoom manual (Ajustar / 100 % / 125 %) en #barra-movil, persistido en localStorage. - Contador «Paso N/M» con estilo en iphone.css en lugar de estilos en línea. - store/editor: campos opcionales tamano y headerTamano; editar la URL retira urlBloqueada; urlValida acepta URLs con forma de dominio; importar avisa de lo recortado. - README y SPEC actualizados. Co-Authored-By: Claude Opus 5.5 <[email protected]>
130 lines
3.5 KiB
CSS
130 lines
3.5 KiB
CSS
/* ==========================================================================
|
|
css/interactividad.css — dueño D (núcleo: js/interactivity.js, js/main.js)
|
|
Piezas que pinta la interactividad sobre el chat: cita de la respuesta
|
|
(quoted reply), botón ya pulsado (.usado), pulsación automática de la demo
|
|
(.wam-pulsando) y controles propios de #barra-movil (velocidad, reiniciar).
|
|
========================================================================== */
|
|
|
|
/* ---------- Cita dentro de la burbuja OUT (lista-respuesta-cita.png) ---------- */
|
|
.wa {
|
|
--wa-cita-fondo: rgba(0, 0, 0, .05);
|
|
--wa-cita-acento: #a0763a; /* barra + nombre, tostado de la captura */
|
|
--wa-cita-texto: rgba(0, 0, 0, .62);
|
|
}
|
|
.wa.oscuro {
|
|
--wa-cita-fondo: rgba(0, 0, 0, .18);
|
|
--wa-cita-acento: #d8a35d;
|
|
--wa-cita-texto: rgba(255, 255, 255, .72);
|
|
}
|
|
|
|
.wa .bubble.wa-con-cita { min-width: min(240px, 100%); }
|
|
.wa .wa-cita {
|
|
display: flex;
|
|
align-items: stretch;
|
|
margin: -2px -5px 5px -3px;
|
|
min-height: 56px;
|
|
border-radius: 8px;
|
|
border-left: 4px solid var(--wa-cita-acento);
|
|
background: var(--wa-cita-fondo);
|
|
overflow: hidden;
|
|
}
|
|
.wa .wa-cita-txt {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
padding: 6px 10px 7px 9px;
|
|
}
|
|
.wa .wa-cita-nombre {
|
|
font-weight: 600;
|
|
font-size: 15px;
|
|
line-height: 1.3;
|
|
color: var(--wa-cita-acento);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.wa .wa-cita-titulo {
|
|
font-weight: 600;
|
|
font-size: 15px;
|
|
line-height: 1.3;
|
|
color: var(--wa-cita-texto);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.wa .wa-cita-extracto {
|
|
font-size: 15px;
|
|
line-height: 1.3;
|
|
color: var(--wa-cita-texto);
|
|
white-space: pre-line;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 3;
|
|
line-clamp: 3;
|
|
overflow: hidden;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.wa .wa-cita-cam {
|
|
display: inline-block;
|
|
vertical-align: -2px;
|
|
margin-right: 4px;
|
|
opacity: .8;
|
|
}
|
|
.wa .wa-cita-doc {
|
|
display: inline-block;
|
|
vertical-align: -2px;
|
|
margin-right: 4px;
|
|
color: var(--wa-text-meta);
|
|
}
|
|
.wa .wa-cita-mini {
|
|
flex: none;
|
|
width: 56px;
|
|
min-height: 56px;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
/* ---------- Botón ya pulsado (botones-respuesta-tras-pulsar.png) ---------- */
|
|
.wa .qr-btn.usado,
|
|
.wa .qr-btn.usado * {
|
|
color: #b0b0b0 !important;
|
|
fill: currentColor;
|
|
}
|
|
.wa .qr-btn.usado { pointer-events: none; cursor: default; }
|
|
.wa.oscuro .qr-btn.usado,
|
|
.wa.oscuro .qr-btn.usado * { color: #6f7b82 !important; }
|
|
|
|
/* ---------- Pulsación automática de la demo (autoPulsar) ---------- */
|
|
.wa .wam-pulsando { background: rgba(0, 0, 0, .10) !important; transition: background-color .08s ease; }
|
|
.wa.oscuro .wam-pulsando { background: rgba(255, 255, 255, .12) !important; }
|
|
|
|
/* ---------- Controles de #barra-movil ---------- */
|
|
#barra-movil .barra-acciones {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
}
|
|
#btn-reiniciar,
|
|
#sel-zoom,
|
|
#sel-velocidad {
|
|
height: 34px;
|
|
padding: 0 12px;
|
|
border: 1px solid var(--wam-borde, rgba(0, 0, 0, .15));
|
|
border-radius: 999px;
|
|
background: var(--wam-panel, #fff);
|
|
color: var(--wam-texto, #111);
|
|
font: inherit;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
#sel-zoom,
|
|
#sel-velocidad { padding: 0 8px; }
|
|
#btn-reiniciar:hover,
|
|
#sel-zoom:hover,
|
|
#sel-velocidad:hover { border-color: var(--wam-acento, #00a884); }
|
|
#btn-reiniciar:focus-visible,
|
|
#sel-zoom:focus-visible,
|
|
#sel-velocidad:focus-visible { outline: 2px solid var(--wam-acento, #00a884); outline-offset: 2px; }
|