Estado inicial del mockup
This commit is contained in:
urieljareth
+210
@@ -0,0 +1,210 @@
|
||||
/* =====================================================================
|
||||
WhatsApp Cloud API Mockup — css/base.css (Módulo A · shell)
|
||||
Reset, variables --wam-*, layout grid de #app y barra superior (.toolbar).
|
||||
El tema del shell se conmuta con body[data-tema] (lo fija WAM.setTema).
|
||||
Sin dependencias externas.
|
||||
===================================================================== */
|
||||
|
||||
/* --- Reset ----------------------------------------------------------- */
|
||||
*, *::before, *::after { box-sizing: border-box; }
|
||||
html, body { margin: 0; padding: 0; height: 100%; }
|
||||
body { overflow: hidden; }
|
||||
button, input, select, textarea { font: inherit; color: inherit; }
|
||||
img { max-width: 100%; }
|
||||
h1, h2, p { margin: 0; }
|
||||
ul, ol { margin: 0; padding: 0; }
|
||||
[hidden] { display: none !important; } /* respeta #importar-archivo y stubs estáticos (#sheet) */
|
||||
|
||||
/* --- Variables del shell (--wam-*) ------------------------------------ */
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--wam-fondo: #e7ebee;
|
||||
--wam-panel: #ffffff;
|
||||
--wam-panel-alt: #f3f6f8;
|
||||
--wam-texto: #1c2b33;
|
||||
--wam-texto-suave: #5d6f7a;
|
||||
--wam-borde: rgba(11, 20, 26, .14);
|
||||
--wam-acento: #00a884;
|
||||
--wam-acento-hover: #008069;
|
||||
--wam-acento-contraste: #ffffff;
|
||||
--wam-peligro: #c94a3d;
|
||||
--wam-sombra: 0 10px 30px rgba(11, 20, 26, .14);
|
||||
--wam-radio: 12px;
|
||||
}
|
||||
|
||||
body[data-tema="oscuro"] {
|
||||
color-scheme: dark;
|
||||
--wam-fondo: #0a1116;
|
||||
--wam-panel: #111b21;
|
||||
--wam-panel-alt: #1c272f;
|
||||
--wam-texto: #e9edef;
|
||||
--wam-texto-suave: #8696a0;
|
||||
--wam-borde: rgba(233, 237, 239, .15);
|
||||
--wam-acento: #00a884;
|
||||
--wam-acento-hover: #008069;
|
||||
--wam-acento-contraste: #ffffff;
|
||||
--wam-peligro: #e57164;
|
||||
--wam-sombra: 0 10px 30px rgba(0, 0, 0, .5);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
|
||||
"Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
background: var(--wam-fondo);
|
||||
color: var(--wam-texto);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
:focus-visible { outline: 2px solid var(--wam-acento); outline-offset: 2px; }
|
||||
|
||||
/* --- Layout: grid de dos columnas de #app ----------------------------- */
|
||||
#app {
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
display: grid;
|
||||
grid-template-columns: clamp(320px, 34vw, 470px) minmax(0, 1fr);
|
||||
grid-template-rows: auto minmax(0, 1fr);
|
||||
grid-template-areas:
|
||||
"toolbar toolbar"
|
||||
"editor movil";
|
||||
}
|
||||
#toolbar { grid-area: toolbar; }
|
||||
#panel-editor { grid-area: editor; }
|
||||
#panel-movil { grid-area: movil; }
|
||||
|
||||
/* --- Barra superior de la app (.toolbar) ------------------------------- */
|
||||
.toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
padding: 10px 18px;
|
||||
background: var(--wam-panel);
|
||||
border-bottom: 1px solid var(--wam-borde);
|
||||
}
|
||||
.toolbar-marca { display: flex; align-items: center; gap: 11px; min-width: 0; }
|
||||
.toolbar-logo {
|
||||
flex: none;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 10px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #00a884, #008069);
|
||||
color: #fff;
|
||||
}
|
||||
.toolbar-titulos { display: flex; flex-direction: column; gap: 1px; line-height: 1.15; min-width: 0; }
|
||||
.toolbar h1 {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
letter-spacing: .1px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.toolbar-subtitulo { font-size: 11.5px; color: var(--wam-texto-suave); white-space: nowrap; }
|
||||
|
||||
.toolbar-acciones { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
|
||||
.tb-separador { width: 1px; height: 22px; background: var(--wam-borde); margin: 0 2px; }
|
||||
.tb-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
padding: 7px 12px;
|
||||
border: 1px solid var(--wam-borde);
|
||||
border-radius: 10px;
|
||||
background: var(--wam-panel);
|
||||
color: var(--wam-texto);
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
|
||||
}
|
||||
.tb-btn svg { flex: none; }
|
||||
.tb-btn:hover { background: var(--wam-panel-alt); border-color: var(--wam-texto-suave); }
|
||||
.tb-btn:active { transform: translateY(1px); }
|
||||
#btn-reset:hover { color: var(--wam-peligro); border-color: var(--wam-peligro); }
|
||||
|
||||
/* --- Editor (columna izquierda · solo el cascarón; contenido: módulo C) */
|
||||
#panel-editor {
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
background: var(--wam-panel);
|
||||
border-right: 1px solid var(--wam-borde);
|
||||
}
|
||||
.wam-bloque { padding: 16px 18px 20px; border-bottom: 1px solid var(--wam-borde); }
|
||||
.wam-bloque:last-child { border-bottom: 0; }
|
||||
.wam-bloque-titulo {
|
||||
margin-bottom: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
letter-spacing: .12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--wam-texto-suave);
|
||||
}
|
||||
.wam-alta { display: flex; gap: 8px; margin-bottom: 14px; }
|
||||
.wam-alta select {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 36px;
|
||||
padding: 0 10px;
|
||||
border: 1px solid var(--wam-borde);
|
||||
border-radius: 10px;
|
||||
background: var(--wam-panel-alt);
|
||||
color: var(--wam-texto);
|
||||
cursor: pointer;
|
||||
}
|
||||
.wam-btn-anadir {
|
||||
flex: none;
|
||||
height: 36px;
|
||||
padding: 0 14px;
|
||||
border: 0;
|
||||
border-radius: 10px;
|
||||
background: var(--wam-acento);
|
||||
color: var(--wam-acento-contraste);
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: background-color .15s ease;
|
||||
}
|
||||
.wam-btn-anadir:hover { background: var(--wam-acento-hover); }
|
||||
|
||||
/* --- Modo presentación (lo activa D con body.presentacion) ------------- */
|
||||
body.presentacion #panel-editor { display: none; }
|
||||
body.presentacion #app {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
grid-template-areas:
|
||||
"toolbar"
|
||||
"movil";
|
||||
}
|
||||
|
||||
/* --- Noscript ----------------------------------------------------------- */
|
||||
.wam-noscript {
|
||||
position: fixed;
|
||||
left: 16px;
|
||||
right: 16px;
|
||||
bottom: 16px;
|
||||
z-index: 99;
|
||||
padding: 12px 16px;
|
||||
border-radius: 10px;
|
||||
background: #b3261e;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* --- Ajustes de ventana estrecha --------------------------------------- */
|
||||
@media (max-width: 860px) {
|
||||
.toolbar { flex-wrap: wrap; }
|
||||
.tb-btn { padding: 7px 9px; }
|
||||
.tb-btn span { display: none; } /* solo iconos cuando escasea el ancho */
|
||||
}
|
||||
|
||||
/* --- Accesibilidad: menos movimiento ------------------------------------ */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
#chat-cuerpo { scroll-behavior: auto; }
|
||||
.tb-btn, .wam-btn-anadir { transition: none; }
|
||||
}
|
||||
Reference in New Issue
Block a user