096a7d110b
El dev ya trae Telefono (llamadas uno a uno, buzon de voz) y Salas (hasta 50, con video, grabacion y emision). La rama quita su modulo propio de salas y llamadas: modelo, vista, JS de cliente, CSS, rutas, credenciales TURN, pruebas y textos. - el router propio pasa a llamarse fork_routes.js, sin Karvan - el audio, la camara y la emision de Android se enchufan desde main.js con setAudioFactory/setVideoFactory/setStreamFactory, que exporta el propio dev; SSB_server.js vuelve a tener su linea original - Clear-SNH.css y modules_view.js vuelven a ser identicos a los del dev - el workflow acampada y la config de serie cambian Karvan por Telefono y Salas - README y guia: las llamadas son las del dev; antes de hacer un modulo propio, mirar si el dev ya lo tiene
471 lines
33 KiB
CSS
471 lines
33 KiB
CSS
/* Piezas de usabilidad de la rama movil, para los dos skins (Acampada y OasisMobile).
|
|
*
|
|
* Va la ultima, detras del skin. Los colores salen de las variables de
|
|
* Acampada (--a26-*) si el tema las define y, si no, de la paleta oscura con oro
|
|
* de OasisMobile; asi cada pieza nueva se ve bien en los dos sin duplicarla.
|
|
*
|
|
* Letra: Anton (--ux-title) solo para titulos y para el boton principal de cada
|
|
* pantalla; todo lo demas (fichas, botones secundarios, etiquetas) en la letra del
|
|
* sistema en negrita. Antes habia Anton en botones, fichas, cabeceras de tabla y
|
|
* pestañas, y la pantalla parecia un cartel.
|
|
*
|
|
* Espacios: rejilla de 4/8. Zonas tactiles de 44px como minimo. */
|
|
|
|
:root {
|
|
--ux-bg: var(--a26-bg, #121212);
|
|
--ux-fg: var(--a26-fg, #f2f2f2);
|
|
--ux-accent: var(--a26-neon, #ffd700);
|
|
--ux-on-accent: #000;
|
|
--ux-soft: var(--a26-soft, #1e1e1e);
|
|
--ux-muted: var(--a26-muted, #a8a8a8);
|
|
--ux-line: var(--a26-fg, #3a3a3a);
|
|
--ux-radius: var(--a26-radius, 12px);
|
|
--ux-title: var(--a26-tit, inherit);
|
|
--ux-text: var(--a26-txt, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
|
|
--ux-danger: #c4003b;
|
|
--ux-ok: #0a8f3c;
|
|
--ux-warn: #c98a00;
|
|
}
|
|
|
|
/* ---------- letra unificada ---------- */
|
|
/* fichas de filtro, pestañas y botones secundarios: letra del sistema */
|
|
.main-column :is(.tribe-mode-buttons, .mode-buttons, .mode-buttons-row, .filter-group, .filters) .filter-btn:not(.create-button),
|
|
.main-column .filter-box__button, .main-column .doc-export-actions .filter-btn,
|
|
.main-column .update-btn, .main-column .tribe-action-btn, .lang-chip,
|
|
.main-column table th, .card-chips-row > span, .pm-exposition-text {
|
|
font-family: var(--ux-text) !important;
|
|
font-weight: 700 !important;
|
|
letter-spacing: .02em !important;
|
|
}
|
|
.main-column :is(.tribe-mode-buttons, .mode-buttons, .mode-buttons-row, .filter-group, .filters) .filter-btn:not(.create-button) {
|
|
font-size: 15px !important;
|
|
text-transform: uppercase;
|
|
}
|
|
/* los formularios de cada modulo (crear tribu, votacion, sala...): etiquetas como
|
|
texto, no como titulos; el h2 de la pregunta de una votacion era Anton de 28px */
|
|
.main-column .vote-form h2, .main-column form > label:not(.module-switch):not(.vote-kind-option), .main-column form label[for]:not(.module-switch) {
|
|
font-family: var(--ux-text) !important;
|
|
font-size: 15px !important;
|
|
font-weight: 700 !important;
|
|
text-transform: none !important;
|
|
letter-spacing: 0 !important;
|
|
color: var(--ux-fg) !important;
|
|
}
|
|
.form-hint {
|
|
margin: 6px 0 14px !important;
|
|
font-size: 14px !important;
|
|
line-height: 1.4;
|
|
color: var(--ux-muted) !important;
|
|
}
|
|
|
|
/* el boton de enviar de los formularios: a todo lo ancho, abajo, que se vea que es
|
|
el final. Antes unos centrados,
|
|
.main-column form[action$="/tribes/create"][method="post"] > button[type="submit"],
|
|
.main-column form[action*="/tribes/update/"] > button[type="submit"] {
|
|
display: block !important;
|
|
width: 100% !important;
|
|
margin: 8px 0 0 !important;
|
|
}
|
|
|
|
/* ---------- iconos SVG (lanzador, barra, modulos) ---------- */
|
|
.has-svg { display: inline-flex !important; align-items: center; justify-content: center; }
|
|
.has-svg svg { width: 100%; height: 100%; display: block; }
|
|
.ln-ico.has-svg { padding: 15px !important; }
|
|
.ln-ico.has-svg svg { width: 30px; height: 30px; }
|
|
.oasis-bottombar .bb-ico.has-svg {
|
|
width: 56px !important; height: 30px !important; padding: 3px 0 !important;
|
|
border-radius: 16px !important; font-size: 0 !important;
|
|
}
|
|
.oasis-bottombar .bb-ico.has-svg svg { width: 24px; height: 24px; }
|
|
.bb-manage-ico.has-svg, .bb-pick-ico.has-svg { width: 24px; height: 24px; }
|
|
|
|
/* ---------- barra de abajo: la pestaña actual con pastilla, como en Android ---------- */
|
|
.oasis-bottombar a.bb-item.current .bb-ico.has-svg { background: var(--ux-accent) !important; color: var(--ux-on-accent) !important; }
|
|
.oasis-bottombar .bb-lbl { font-family: var(--ux-text) !important; }
|
|
/* con el teclado abierto la ventana encoge: la barra se esconde y el formulario
|
|
recupera ese tercio de pantalla */
|
|
@media (max-height: 520px) {
|
|
.oasis-bottombar { display: none !important; }
|
|
body { padding-bottom: 0 !important; }
|
|
}
|
|
|
|
/* ---------- aviso de bienvenida: una linea, no un bloque ---------- */
|
|
.welcome-banner {
|
|
display: flex !important; align-items: center !important; gap: 10px !important;
|
|
padding: 8px 8px 8px 14px !important; min-height: 0 !important;
|
|
}
|
|
.welcome-banner .update-banner-icon { display: none !important; }
|
|
.welcome-banner .update-banner-text { flex: 1 1 auto; font-size: 15px !important; line-height: 1.3 !important; margin: 0 !important; }
|
|
.welcome-banner .welcome-banner-start {
|
|
flex: 0 0 auto; font-size: 16px !important; min-height: 40px !important;
|
|
padding: 6px 14px !important; margin: 0 !important; width: auto !important;
|
|
}
|
|
.welcome-banner .welcome-banner-close { margin: 0 !important; flex: 0 0 auto; }
|
|
.welcome-banner .welcome-banner-close-btn { min-height: 40px !important; width: 36px !important; margin: 0 !important; }
|
|
|
|
/* ---------- pie de una linea ---------- */
|
|
.oasis-footer.oasis-footer-mobile {
|
|
display: flex !important; flex-direction: column; align-items: center; gap: 4px;
|
|
padding: 14px 16px 18px !important; margin-top: 24px !important; text-align: center;
|
|
font-size: 13px !important;
|
|
}
|
|
.oasis-footer-mobile .footer-sync {
|
|
display: inline-flex; align-items: center; gap: 8px; min-height: 36px;
|
|
font-weight: 700; text-decoration: none !important; color: var(--ux-fg) !important;
|
|
}
|
|
.oasis-footer-mobile .footer-sync-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ux-muted); }
|
|
.oasis-footer-mobile .footer-sync.is-on .footer-sync-dot { background: var(--ux-ok); }
|
|
.oasis-footer-mobile .footer-version { color: var(--ux-muted) !important; }
|
|
|
|
/* ---------- acciones de tarjeta: borrar con confirmacion ---------- */
|
|
.content-action-confirm { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; }
|
|
.content-action-confirm > summary { list-style: none; cursor: pointer; }
|
|
.content-action-confirm > summary::-webkit-details-marker { display: none; }
|
|
.content-action-confirm[open] { flex-basis: 100%; order: 99; }
|
|
.content-action-confirm[open] > summary { background: var(--ux-danger) !important; color: #fff !important; border-color: var(--ux-danger) !important; }
|
|
.content-action-confirm .confirm-bar {
|
|
flex-basis: 100%; display: flex; align-items: center; justify-content: flex-end; gap: 10px;
|
|
margin-top: 8px; padding: 8px 8px 8px 12px; border: 2px solid var(--ux-danger); border-radius: var(--ux-radius);
|
|
}
|
|
.content-action-confirm .confirm-question { flex: 1 1 auto; font-weight: 700; font-size: 15px; text-align: left; }
|
|
.content-action-confirm form { margin: 0 !important; width: auto !important; }
|
|
.main-column .content-action-confirm .confirm-yes, .content-action-confirm .confirm-yes {
|
|
background: var(--ux-danger) !important; color: #fff !important; border-color: var(--ux-danger) !important;
|
|
box-shadow: none !important; min-height: 44px !important; margin: 0 !important; width: auto !important;
|
|
font-family: var(--ux-text) !important; font-weight: 700 !important; font-size: 15px !important;
|
|
}
|
|
|
|
/* ---------- lista de tribus: una fila por tribu ---------- */
|
|
.main-column .tribe-list { display: flex !important; flex-direction: column; gap: 10px; padding: 0 !important; }
|
|
.main-column a.tribe-row {
|
|
display: flex !important; flex-wrap: nowrap !important; align-items: center; gap: 12px; width: auto !important;
|
|
padding: 10px 12px !important; min-height: 72px;
|
|
border: 2px solid var(--ux-line) !important; border-radius: var(--ux-radius) !important;
|
|
background: var(--ux-bg) !important; color: var(--ux-fg) !important; text-decoration: none !important;
|
|
}
|
|
.main-column a.tribe-row:active { background: var(--ux-accent) !important; color: var(--ux-on-accent) !important; }
|
|
.tribe-row .tribe-row-thumb {
|
|
flex: 0 0 52px; width: 52px !important; height: 52px !important; border-radius: 10px !important;
|
|
object-fit: cover; border: 2px solid var(--ux-line) !important; margin: 0 !important;
|
|
}
|
|
.tribe-row .tribe-row-icon { padding: 11px; background: var(--ux-soft); }
|
|
.tribe-row .tribe-row-text { flex: 1 1 0; min-width: 0; overflow: hidden; display: flex; flex-direction: column; gap: 2px; }
|
|
.tribe-row .tribe-row-text > span { display: block; max-width: 100%; margin: 0 !important; padding: 0 !important; line-height: 1.3; }
|
|
.tribe-row .tribe-row-title {
|
|
font-family: var(--ux-title) !important; font-size: 21px; line-height: 1.1; text-transform: uppercase;
|
|
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
|
}
|
|
.tribe-row .tribe-row-facts { font-size: 13px; font-weight: 700; color: var(--ux-muted); }
|
|
.tribe-row .tribe-row-desc { font-size: 14px; color: var(--ux-fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
.tribe-row .tribe-row-go { flex: 0 0 auto; font-size: 28px; line-height: 1; color: var(--ux-muted); }
|
|
|
|
/* ---------- votaciones ---------- */
|
|
.vote-bars { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 4px; }
|
|
.vote-bar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 10px; }
|
|
.vote-bar-label { font-weight: 700; font-size: 15px; }
|
|
.vote-bar-count { font-weight: 700; font-size: 15px; min-width: 2ch; text-align: right; }
|
|
.vote-bar-meter {
|
|
grid-column: 1 / -1; width: 100%; height: 12px; appearance: none; -webkit-appearance: none;
|
|
border: 2px solid var(--ux-line); border-radius: 8px; overflow: hidden; background: var(--ux-soft);
|
|
}
|
|
.vote-bar-meter::-webkit-progress-bar { background: var(--ux-soft); }
|
|
.vote-bar-meter::-webkit-progress-value { background: var(--ux-fg); }
|
|
.vote-bar-meter::-moz-progress-bar { background: var(--ux-fg); }
|
|
.vote-bar-yes .vote-bar-meter::-webkit-progress-value, .vote-bar-green .vote-bar-meter::-webkit-progress-value { background: var(--ux-ok); }
|
|
.vote-bar-no .vote-bar-meter::-webkit-progress-value, .vote-bar-red .vote-bar-meter::-webkit-progress-value { background: var(--ux-danger); }
|
|
.vote-bar-yellow .vote-bar-meter::-webkit-progress-value { background: var(--ux-warn); }
|
|
.vote-own-note {
|
|
padding: 12px 14px !important; border-left: 4px solid var(--ux-accent) !important;
|
|
background: var(--ux-soft) !important; border-radius: 0 10px 10px 0; font-size: 15px !important;
|
|
}
|
|
/* botones de votar: rejilla de dos columnas, cada opcion un boton grande */
|
|
.main-column .vote-buttons-row-single { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px !important; }
|
|
.main-column .vote-buttons-row-single form { margin: 0 !important; width: 100% !important; }
|
|
.main-column .vote-buttons-row-single button {
|
|
width: 100% !important; min-height: 52px !important; margin: 0 !important;
|
|
font-family: var(--ux-text) !important; font-weight: 700 !important; font-size: 16px !important;
|
|
}
|
|
.main-column .vote-buttons-row-single button[value="YES"], .main-column .vote-buttons-row-single button[value="GREEN"] { border-color: var(--ux-ok) !important; box-shadow: 0 4px 0 var(--ux-ok) !important; }
|
|
.main-column .vote-buttons-row-single button[value="NO"], .main-column .vote-buttons-row-single button[value="RED"] { border-color: var(--ux-danger) !important; box-shadow: 0 4px 0 var(--ux-danger) !important; }
|
|
.main-column .vote-buttons-row-single button[value="YELLOW"] { border-color: var(--ux-warn) !important; box-shadow: 0 4px 0 var(--ux-warn) !important; }
|
|
/* tipo de votacion: tarjetas de radio */
|
|
.vote-kind { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 18px; }
|
|
.vote-kind-title { font-weight: 700; font-size: 15px; }
|
|
.vote-kind-option {
|
|
display: grid !important; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center;
|
|
padding: 12px 14px; border: 2px solid var(--ux-line); border-radius: var(--ux-radius); cursor: pointer;
|
|
}
|
|
.main-column .vote-kind-option input[type="radio"] { grid-row: 1 / span 2; width: 22px !important; height: 22px !important; min-height: 0 !important; margin: 0 !important; accent-color: var(--ux-fg); }
|
|
.vote-kind-option:has(input:checked) { background: var(--ux-accent); color: var(--ux-on-accent); }
|
|
.vote-kind-option:has(input:checked) .vote-kind-hint { color: var(--ux-on-accent); }
|
|
.vote-kind-name { font-weight: 700; font-size: 17px; }
|
|
.vote-kind-hint { font-size: 14px; color: var(--ux-muted); }
|
|
|
|
/* ---------- modulos: interruptores agrupados ---------- */
|
|
.module-switches { display: flex; flex-direction: column; gap: 22px; padding-bottom: 8px; }
|
|
.module-group { display: flex; flex-direction: column; gap: 8px; }
|
|
.module-group-title {
|
|
font-family: var(--ux-title) !important; font-weight: 400 !important; font-size: 20px !important;
|
|
text-transform: uppercase; margin: 0 0 4px !important; padding-bottom: 4px; border-bottom: 3px solid var(--ux-line);
|
|
}
|
|
.main-column label.module-switch {
|
|
display: grid !important; grid-template-columns: 40px minmax(0, 1fr) 52px; align-items: center; gap: 12px;
|
|
padding: 10px 12px; min-height: 64px; cursor: pointer;
|
|
border: 2px solid var(--ux-line); border-radius: var(--ux-radius);
|
|
font-family: var(--ux-text) !important; text-transform: none !important; letter-spacing: 0 !important;
|
|
}
|
|
.module-switch-ico { width: 40px; height: 40px; padding: 8px; border-radius: 10px; background: var(--ux-soft); color: var(--ux-fg); }
|
|
.module-switch-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
|
|
.module-switch-name { font-weight: 700; font-size: 17px; }
|
|
.module-switch-desc { font-size: 13px; color: var(--ux-muted); line-height: 1.3; }
|
|
.module-switch:has(.switch-input:checked) { border-color: var(--ux-fg); }
|
|
/* el interruptor: la casilla de siempre con forma de pastilla */
|
|
.main-column label.module-switch input.switch-input[type="checkbox"] {
|
|
appearance: none; -webkit-appearance: none; flex: 0 0 auto;
|
|
width: 52px !important; height: 30px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important;
|
|
border: 2px solid var(--ux-line) !important; border-radius: 16px !important; background: var(--ux-soft) !important;
|
|
position: relative; cursor: pointer; transition: background .15s ease-out;
|
|
}
|
|
.main-column label.module-switch input.switch-input[type="checkbox"]::after {
|
|
content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
|
|
background: var(--ux-muted); transition: transform .15s ease-out, background .15s ease-out;
|
|
}
|
|
.main-column label.module-switch input.switch-input[type="checkbox"]:checked { background: var(--ux-accent) !important; }
|
|
.main-column label.module-switch input.switch-input[type="checkbox"]:checked::after { transform: translateX(22px); background: var(--ux-on-accent); }
|
|
/* Guardar siempre a la vista, encima de la barra de abajo */
|
|
.module-save-bar {
|
|
position: sticky; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 5;
|
|
padding: 10px 0; background: var(--ux-bg);
|
|
}
|
|
.module-save-bar .create-button { width: 100% !important; margin: 0 !important; }
|
|
.module-saved {
|
|
padding: 10px 14px !important; margin: 0 0 14px !important; font-weight: 700;
|
|
border-left: 4px solid var(--ux-ok) !important; background: var(--ux-soft) !important; border-radius: 0 10px 10px 0;
|
|
}
|
|
/* la seccion apagada a la que se queria entrar */
|
|
.main-column div.module-blocked {
|
|
display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center;
|
|
padding: 14px; margin: 0 0 20px; border: 3px solid var(--ux-line); border-radius: var(--ux-radius); background: var(--ux-soft);
|
|
}
|
|
.module-blocked-ico { width: 48px; height: 48px; padding: 10px; border-radius: 12px; background: var(--ux-bg); }
|
|
.module-blocked-text { margin: 0 !important; font-weight: 700; font-size: 17px; }
|
|
.module-blocked form { grid-column: 1 / -1; margin: 0 !important; }
|
|
.module-blocked .create-button { width: 100% !important; margin: 0 !important; }
|
|
|
|
/* ---------- Ajustes: idiomas como fichas de un toque ---------- */
|
|
.lang-pick { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
|
|
.main-column .lang-pick .lang-chip, .lang-pick .lang-chip {
|
|
width: 100% !important; min-height: 48px !important; margin: 0 !important; padding: 6px 10px !important;
|
|
font-size: 16px !important; text-transform: none !important; box-shadow: none !important;
|
|
border: 2px solid var(--ux-line) !important; background: var(--ux-bg) !important; color: var(--ux-fg) !important;
|
|
}
|
|
.main-column .lang-pick .lang-chip.is-current, .lang-pick .lang-chip.is-current { background: var(--ux-accent) !important; color: var(--ux-on-accent) !important; }
|
|
|
|
/* ---------- foco visible para teclado y lectores ---------- */
|
|
a:focus-visible, button:focus-visible, summary:focus-visible, label.module-switch:focus-within {
|
|
outline: 3px solid var(--ux-accent) !important; outline-offset: 2px;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.main-column label.module-switch input.switch-input[type="checkbox"], .main-column label.module-switch input.switch-input[type="checkbox"]::after { transition: none; }
|
|
}
|
|
|
|
/* ---------- buscador de cada modulo: campo y lupa en la misma linea ---------- */
|
|
/* solo cuando el unico control es el boton: los de Transferencias llevan rangos y
|
|
desplegables y siguen en columna */
|
|
.main-column form.filter-box:not(:has(.filter-box__select, .filter-box__number, .transfer-range)) {
|
|
display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
|
|
align-items: stretch !important; gap: 8px !important; width: 100% !important; margin: 0 0 12px !important;
|
|
}
|
|
.main-column form.filter-box:not(:has(.filter-box__select, .filter-box__number, .transfer-range)) .filter-box__input {
|
|
flex: 1 1 auto !important; min-width: 0 !important; width: 0 !important; height: 48px !important; margin: 0 !important;
|
|
}
|
|
.main-column form.filter-box:not(:has(.filter-box__select, .filter-box__number, .transfer-range)) .filter-box__controls {
|
|
flex: 0 0 auto !important; width: auto !important; margin: 0 !important;
|
|
}
|
|
.main-column form.filter-box .filter-box__button { min-height: 48px !important; margin: 0 !important; }
|
|
/* el recuento (TOTAL: 12 · PUBLICA: 12) como una linea discreta, no un bloque */
|
|
.main-column .activity-toolbar-row { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 6px !important; }
|
|
.main-column [class*="module-stats"] { font-size: 13px !important; color: var(--ux-muted) !important; text-align: left !important; margin: 0 !important; }
|
|
|
|
/* el boton de crear de cada modulo a todo lo ancho, tambien cuando va solo en su
|
|
formulario (en Votaciones salia estrecho y en Tribus entero) */
|
|
.main-column .filters > form:has(.create-button), .main-column .mode-buttons > form:has(.create-button) { width: 100% !important; }
|
|
|
|
/* jerga fuera del movil: la tasa ECO (microgramos de CO2) no se entendia y su ficha
|
|
salia ilegible; sigue en Estadisticas */
|
|
.main-column .eco-tax-chip, .main-column [class*="eco-tax-chip"] { display: none !important; }
|
|
/* etiquetas (#asamblea) sin caja negra detras */
|
|
.main-column .card-tags, .main-column .tribe-side .card-tags { background: transparent !important; padding: 0 !important; margin: 8px 0 !important; }
|
|
|
|
/* acciones secundarias de una ficha (actualizar, PDF, compartir): una rejilla de
|
|
dos columnas, sin los huecos de 80px que dejaban los formularios sueltos */
|
|
.main-column :is(.tribe-side-actions, .doc-export-actions) {
|
|
display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; margin: 12px 0 !important; padding: 0 !important;
|
|
}
|
|
.main-column :is(.tribe-side-actions, .doc-export-actions) form { margin: 0 !important; width: 100% !important; padding: 0 !important; }
|
|
.main-column :is(.tribe-side-actions, .doc-export-actions) :is(button, .filter-btn, a) {
|
|
width: 100% !important; min-height: 44px !important; margin: 0 !important; padding: 6px 8px !important;
|
|
font-family: var(--ux-text) !important; font-weight: 700 !important; font-size: 14px !important; box-shadow: none !important;
|
|
}
|
|
.main-column .tribe-side-actions + .doc-export-actions { margin-top: 0 !important; }
|
|
/* resultado de la votacion: ficha de color legible en los dos skins */
|
|
.main-column .vote-outcome {
|
|
display: inline-block; padding: 2px 10px !important; border-radius: 8px;
|
|
font-family: var(--ux-text) !important; font-size: 15px !important; font-weight: 700 !important;
|
|
background: var(--ux-soft) !important; color: var(--ux-fg) !important; vertical-align: middle;
|
|
}
|
|
.main-column .vote-outcome-yes { background: var(--ux-ok) !important; color: #fff !important; }
|
|
.main-column .vote-outcome-no { background: var(--ux-danger) !important; color: #fff !important; }
|
|
.main-column .job-section-title:has(.vote-outcome) { display: flex !important; align-items: center; gap: 8px; flex-wrap: wrap; }
|
|
|
|
/* ---------- margenes: uno solo, de 14px ---------- */
|
|
/* se sumaban capa a capa (contenido 20 + columna 10 + ficha 24 + lateral 20 = 74px
|
|
por lado) y el texto de una votacion o una tribu se quedaba en 264 de 412px */
|
|
body .main-content { padding-left: 14px !important; padding-right: 14px !important; }
|
|
body .main-content > .main-column { padding-left: 0 !important; padding-right: 0 !important; }
|
|
.main-column :is(.tribe-details, .tribe-side, .tribe-main, .job-section, .vote-form, .tribe-content) {
|
|
padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important;
|
|
width: 100% !important; max-width: 100% !important; box-sizing: border-box;
|
|
}
|
|
.main-column .tribe-details { display: flex !important; flex-direction: column !important; gap: 18px; }
|
|
/* dentro de una ficha, un solo ritmo: 10px entre bloques (antes hueco de 16 + los
|
|
margenes de cada bloque + 20 de relleno, unos 70px entre secciones) */
|
|
.main-column .tribe-side { gap: 10px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
|
|
.main-column .tribe-side > *, .main-column .tribe-main > * { margin-top: 0 !important; margin-bottom: 0 !important; }
|
|
.main-column .tribe-main { display: flex !important; flex-direction: column; gap: 14px !important; }
|
|
.main-column .tribe-card-members { text-align: left !important; padding: 0 !important; font-weight: 700; }
|
|
.main-column :is(.tribe-side-actions, .doc-export-actions) > :only-child { grid-column: 1 / -1; }
|
|
/* la imagen generica de tribu no aporta nada y ocupaba 300px: solo se ve la propia */
|
|
.main-column img[src*="default-tribe"] { display: none !important; }
|
|
/* etiquetas del lanzador largas (Configuracion): se parten con guion */
|
|
.ln-lbl { hyphens: auto; -webkit-hyphens: auto; font-size: 12.5px !important; }
|
|
|
|
/* ---------- secciones de una tribu: tira de fichas deslizable + "Mas" ---------- */
|
|
.main-column .tribe-tabs { margin: 4px 0 12px !important; }
|
|
.tribe-tabs-strip {
|
|
display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
|
|
margin: 0; padding: 4px 0 8px; scroll-snap-type: x proximity;
|
|
}
|
|
.tribe-tabs-strip::-webkit-scrollbar { display: none; }
|
|
.main-column a.tribe-tab, .tribe-tabs-more > summary {
|
|
flex: 0 0 auto; scroll-snap-align: start; display: inline-flex; align-items: center; justify-content: center;
|
|
min-height: 40px; padding: 4px 14px; border: 2px solid var(--ux-line) !important; border-radius: 20px !important;
|
|
background: var(--ux-bg) !important; color: var(--ux-fg) !important; text-decoration: none !important;
|
|
font-family: var(--ux-text) !important; font-weight: 700 !important; font-size: 14px !important; white-space: nowrap;
|
|
text-transform: uppercase; letter-spacing: .02em;
|
|
}
|
|
.main-column a.tribe-tab.is-current { background: var(--ux-accent) !important; color: var(--ux-on-accent) !important; }
|
|
.tribe-tabs-more > summary { list-style: none; cursor: pointer; margin-top: 2px; }
|
|
.tribe-tabs-more > summary::-webkit-details-marker { display: none; }
|
|
.tribe-tabs-more > summary::after { content: " ▾"; }
|
|
.tribe-tabs-more[open] > summary::after { content: " ▴"; }
|
|
.tribe-tabs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
|
|
.tribe-tabs-grid .tribe-tab { width: 100%; }
|
|
/* filas etiqueta / valor de las fichas (plazo, estado, creado el): en dos columnas */
|
|
.main-column table.tribe-info-table tr { display: grid !important; grid-template-columns: minmax(96px, 38%) 1fr; align-items: center; }
|
|
.main-column table.tribe-info-table td { display: block !important; border: 0 !important; padding: 8px 10px !important; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
|
|
.main-column table.tribe-info-table tr + tr { border-top: 1px solid #ccc !important; }
|
|
|
|
/* bienvenida: "Ahora no" al final, como enlace discreto */
|
|
.main-column .welcome-skip-end { text-align: center; margin: 8px 0 0 !important; }
|
|
.main-column .welcome-skip-end .welcome-skip-btn {
|
|
background: transparent !important; border: 0 !important; box-shadow: none !important;
|
|
font-family: var(--ux-text) !important; font-weight: 700 !important; font-size: 15px !important;
|
|
text-transform: none !important; text-decoration: underline; color: var(--ux-muted) !important; width: auto !important;
|
|
}
|
|
/* buzon y otros: los botones de filtro sueltos (Mas recientes, Marcar como leido)
|
|
en la letra de texto, como el resto de fichas */
|
|
.main-column [class*="inbox"] .filter-btn:not(.create-button),
|
|
.main-column form[action^="/inbox"] button:not(.create-button) {
|
|
font-family: var(--ux-text) !important; font-weight: 700 !important; font-size: 15px !important; letter-spacing: .02em !important;
|
|
}
|
|
|
|
/* ---------- regla general de letra para botones ---------- */
|
|
/* todo boton en letra del sistema; Anton solo en el principal de cada pantalla
|
|
(el negro, .create-button) y en las tarjetas de aspecto */
|
|
.main-column :is(button, input[type="submit"], input[type="button"], .filter-btn, a.filter-btn):not(.create-button):not(.welcome-banner-start):not(.skin-card):not(.workflow-card):not(.btn-singleview) {
|
|
font-family: var(--ux-text) !important;
|
|
font-weight: 700 !important;
|
|
letter-spacing: .02em !important;
|
|
}
|
|
.main-column form.welcome-skip-end { display: flex !important; justify-content: center !important; }
|
|
/* la barra de confirmar borrado con su marco rojo (Acampada quita el borde a los div) */
|
|
.main-column div.confirm-bar { border: 2px solid var(--ux-danger) !important; }
|
|
.main-column .content-action-confirm[open] > summary { opacity: 1 !important; }
|
|
|
|
/* ---------- boton principal de cada modulo: el mismo en todos ---------- */
|
|
/* en Chats y Pads salia entero, en Foros estrecho y en Feed con otra letra (lleva
|
|
tambien .filter-btn y le tocaban las reglas de las fichas) */
|
|
.main-column :is(.tribe-mode-buttons, .mode-buttons, .mode-buttons-row, .filters, .forum-create-col) :is(form, div):has(> .create-button),
|
|
.main-column .forum-create-col { width: 100% !important; flex: 1 1 100% !important; }
|
|
.main-column :is(.tribe-mode-buttons, .mode-buttons, .mode-buttons-row, .filters, .forum-create-col) .create-button.create-button {
|
|
width: 100% !important; min-height: 52px !important; margin: 4px 0 0 !important; padding: 8px 16px !important;
|
|
font-family: var(--ux-title) !important; font-weight: 400 !important; font-size: 20px !important;
|
|
letter-spacing: .02em !important; text-transform: uppercase;
|
|
}
|
|
|
|
/* ---------- estados vacios: icono, texto centrado, sin cajas ---------- */
|
|
.main-column :is(.no-content, .no-results, .no-content-box),
|
|
.main-column .tribe-grid > p:only-child {
|
|
display: flex !important; flex-direction: column; align-items: center; gap: 12px;
|
|
margin: 24px 0 !important; padding: 28px 16px !important; text-align: center !important;
|
|
border: 2px dashed var(--ux-muted) !important; border-radius: var(--ux-radius) !important;
|
|
color: var(--ux-muted) !important; font-size: 16px !important; font-weight: 700; background: transparent !important;
|
|
}
|
|
.main-column :is(.no-content, .no-results, .no-content-box)::before,
|
|
.main-column .tribe-grid > p:only-child::before {
|
|
content: ""; width: 44px; height: 44px; background: var(--ux-muted);
|
|
-webkit-mask: url("../images/ux-empty.svg") center / contain no-repeat; mask: url("../images/ux-empty.svg") center / contain no-repeat;
|
|
}
|
|
.main-column .no-content-box p { margin: 0 !important; color: inherit !important; }
|
|
|
|
/* ---------- el pie abajo del todo aunque la pagina sea corta ---------- */
|
|
body .main-content { min-height: calc(100dvh - 300px); }
|
|
.main-column .tribe-grid:has(> p:only-child), .main-column .filters, .main-column .tribe-mode-buttons { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
|
|
.main-column :is(.tribe-mode-buttons, .mode-buttons, .mode-buttons-row, .filters, .forum-create-col) .create-button.create-button { box-shadow: 0 5px 0 var(--ux-accent) !important; }
|
|
|
|
/* ---------- buzon: cada mensaje en pocas lineas ---------- */
|
|
/* era una tabla de seis filas (De, Fecha, Para, Asunto, Tasa ECO, Cifrado) dentro de
|
|
dos cajas: un aviso ocupaba una pantalla. Para es siempre una misma, el asunto ya
|
|
es el titulo, la tasa ECO no se entiende y el cifrado es igual en todos */
|
|
.main-column .pm-thread { border: 0 !important; padding: 0 !important; margin: 0 0 10px !important; background: transparent !important; }
|
|
.main-column div.pm-card { padding: 12px !important; margin: 0 !important; border: 2px solid var(--ux-line) !important; border-radius: var(--ux-radius) !important; }
|
|
.main-column .pm-card .pm-info-table { display: flex !important; flex-wrap: wrap; align-items: center; gap: 4px 10px; border: 0 !important; margin: 0 0 6px !important; width: 100%; }
|
|
.main-column .pm-card .pm-info-table tbody { display: contents !important; }
|
|
.main-column .pm-card .pm-info-table tr { display: none !important; }
|
|
.main-column .pm-card .pm-info-table tr:nth-child(1), .main-column .pm-card .pm-info-table tr:nth-child(2),
|
|
.main-column .pm-card .pm-info-table tr:has(.pm-unread-chip) { display: flex !important; align-items: center; border: 0 !important; }
|
|
.main-column .pm-card .pm-info-table td { display: block !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
|
|
.main-column .pm-card .pm-info-table td.card-label { display: none !important; }
|
|
.main-column .pm-card .pm-info-table tr:nth-child(1) { flex: 1 1 60%; min-width: 0; }
|
|
.main-column .pm-card .pm-info-table tr:nth-child(1) a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px !important; }
|
|
.main-column .pm-card .pm-info-table tr:nth-child(2) td { font-size: 13px !important; color: var(--ux-muted) !important; }
|
|
.main-column .pm-card .pm-subject-cell > span:not(.pm-unread-chip) { display: none !important; }
|
|
.main-column .pm-card h2.pm-title { font-family: var(--ux-text) !important; font-weight: 700 !important; font-size: 17px !important; text-transform: none !important; line-height: 1.3 !important; margin: 0 0 6px !important; }
|
|
.main-column .pm-card .message-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; }
|
|
|
|
/* ---------- busqueda: primero el campo de buscar, los filtros despues ---------- */
|
|
.main-column .search-filters-row { display: flex !important; flex-direction: column-reverse !important; gap: 12px; }
|
|
.main-column table.search-filters-table, .main-column table.search-filters-table tbody { display: block !important; border: 0 !important; width: 100% !important; }
|
|
.main-column table.search-filters-table tr { display: block !important; border: 0 !important; margin: 0 0 10px; }
|
|
.main-column table.search-filters-table td { display: block !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
|
|
.main-column table.search-filters-table td.card-label { margin-bottom: 4px; }
|
|
.main-column .search-submit-row button { width: 100% !important; }
|
|
|
|
/* ---------- nodos: acciones en rejilla ---------- */
|
|
.main-column .peers-conn-actions.filter-box { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
|
|
.main-column .peers-conn-actions form { margin: 0 !important; width: 100% !important; }
|
|
.main-column .peers-conn-actions button { width: 100% !important; margin: 0 !important; font-size: 15px !important; }
|
|
.main-column .message-list { padding: 0 !important; }
|
|
.main-column .pm-card .pm-info-table tr { width: auto !important; flex: 0 1 auto; }
|
|
.main-column .pm-card .pm-info-table tr:nth-child(1) { flex: 1 1 0 !important; }
|
|
.main-column .pm-card .pm-info-table tr:has(.pm-unread-chip) { order: 3; flex-basis: 100% !important; }
|
|
.main-column .pm-card .pm-actions { display: inline-flex !important; width: auto !important; margin: 8px 8px 0 0 !important; }
|
|
.main-column .pm-card .pm-actions button { min-height: 40px !important; padding: 4px 14px !important; font-size: 14px !important; box-shadow: none !important; width: auto !important; }
|
|
.main-column table.search-filters-table { height: auto !important; min-height: 0 !important; margin: 0 !important; }
|
|
.main-column .peers-conn-actions > form:last-child:nth-child(odd) { grid-column: 1 / -1; }
|
|
.main-column .search-filters-row { height: auto !important; }
|
|
.main-column .search-filters-row > table.search-filters-table { flex: 0 0 auto !important; }
|
|
.main-column .pm-card div.pm-actions.pm-actions { width: auto !important; max-width: max-content; display: inline-flex !important; vertical-align: top; }
|
|
.main-column .pm-card .pm-info-table tr:nth-child(1) td, .main-column .pm-card .pm-info-table tr:nth-child(1) a { white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 100%; text-align: left !important; }
|