/* ========================================================================== LG-Forms — Frontend Embed Stylesheet Usado por: shortcode [lg_form] e bloco Gutenberg lg-forms/form Carregado via wp_enqueue_style / register_block_type editor_style + style NOTA: As regras globais de body/label/input para a página standalone (page.php com ) ficam inline nesse ficheiro — nunca aqui, para não afectar o editor Gutenberg nem temas WordPress. ========================================================================== */ /* ── Shortcode embed / bloco Gutenberg ────────────────────────────────────── Todos os seletores prefixados com .lgf-embed para não conflituar com o tema do site nem com os estilos do editor. */ .lgf-embed { width: 100%; margin-top: 0; box-sizing: border-box; text-align: center; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .lgf-embed .lgf-img-topo { max-width:100%; height:auto; margin-bottom:25px; } .lgf-embed .f-g { margin-bottom:20px; text-align:left; } /* Heading do formulário — sem !important para permitir que o tema/página sobrescreva */ .lgf-embed h2 { text-align: left; font-size: 1.2em; font-weight: 600; margin: 0 0 20px; letter-spacing: normal; text-transform: none; } /* Cores adaptativas: o texto do formulário herda a cor do tema (funciona em fundos claros E escuros, out-of-the-box); os inputs são cartões brancos auto-contidos com texto escuro, legíveis sobre qualquer fundo. */ .lgf-embed label { display: block; font-weight: 700; margin-bottom: 8px; color: inherit; } .lgf-embed input:not([type=checkbox]), .lgf-embed select, .lgf-embed textarea { width: 100%; padding: 15px; border: 2px solid #ddd; border-radius: 10px; font-size: 16px; box-sizing: border-box; font-family: inherit; background: #fff; color: #111; } .lgf-embed textarea { resize: vertical; } .lgf-embed .btn { width: 100%; padding: 18px; background: #0073aa; color: #fff; border: none; border-radius: 10px; font-weight: 700; font-size: 18px; cursor: pointer; } .lgf-embed .msg-ok { background:#d4edda; color:#155724; padding:15px; border-radius:8px; margin-bottom:20px; } .lgf-embed .msg-col { background:#fff3cd; color:#664d03; padding:15px; border-radius:8px; margin-bottom:20px; } .lgf-embed .msg-err { background:#f8d7da; color:#721c24; padding:15px; border-radius:8px; margin-bottom:20px; } .lgf-embed .msg-inativo { background: #fff8f0; color: #7a4f00; border: 1px solid #f5c842; padding: 20px 18px; border-radius: 12px; margin: 20px 0; line-height: 1.6; font-size: 15px; } /* ── lg-forms/responses block (LG-Forms - List) ─────────────────────────────*/ .lgfb-responses-wrap { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 14px; } /* Aparência configurável no editor (painel Aparência do bloco): cada var() é escrita como estilo inline no contentor por lg_f_bloco_estilo_style(); a omissão de cada uma tem de funcionar em temas claros E escuros — por isso as omissões são semi-transparentes (aclaram/escurecem o fundo do tema, em vez de o tapar) e o texto herda a cor do tema. Escolhas no painel continuam a ganhar, como sempre. */ /* Uma só cor manda na moldura: a borda exterior E os separadores (linhas e cabeçalho) derivam de --lgfb-frame-color. Antes eram independentes, e pintar a borda deixava por dentro traços cinzentos que pareciam sujidade. Quem quiser separadores de outra cor continua a poder, definindo --lgfb-sep-color. */ .lgfb-responses-wrap, .lgfb-item { --lgfb-sep-color: var(--lgfb-frame-color, rgba(128,128,128,.35)); } /* NENHUMA borda na nossa tabela — nem nossa, nem do tema. No iframe do editor os estilos do tema entram prefixados por .editor-styles-wrapper e ganhavam às nossas classes, desenhando linhas entre os registos mesmo com os separadores desligados. Aqui zera-se tudo à força e a moldura e os separadores passam a ser box-shadow (abaixo), que nenhuma regra de border consegue repor. */ .lgfb-responses-wrap table.lgfb-responses-table, .lgfb-responses-wrap table.lgfb-responses-table > thead > tr, .lgfb-responses-wrap table.lgfb-responses-table > thead > tr > th, .lgfb-responses-wrap table.lgfb-responses-table > tbody > tr, .lgfb-responses-wrap table.lgfb-responses-table > tbody > tr > td { border: 0 !important; } /* Moldura por box-shadow: acompanha o border-radius e é imune ao border do tema. Vai no DIV que rola, nunca na tabela: `overflow-x` recorta o que os filhos pintam para fora da caixa, e uma sombra de 1px na tabela — que ocupa a largura toda do div — era comida inteira, sobrando só os arcos dos cantos (o "contorno partido"). No div, a moldura fica completa e quieta enquanto a tabela desliza. O mesmo overflow é o que recorta as células aos cantos redondos, por isso não é preciso arredondar as 4 células dos extremos (e assim, com deslize, também não aparecem cantos redondos a meio do conteúdo). */ .lgfb-table-scroll { overflow-x: auto; box-shadow: 0 0 0 1px var(--lgfb-frame-color, rgba(128,128,128,.35)); border-radius: var(--lgfb-radius, 8px); } .lgfb-responses-wrap table.lgfb-responses-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--lgfb-cell-size, 13px); } /* Cabeçalho: por omissão, tinta derivada da COR DO TEXTO do tema (currentColor) — escurece em temas claros, aclara em temas escuros — bem mais forte (20%) do que a zebra (5%), para se destacar sempre. A 1.ª declaração é o recurso para browsers sem color-mix. O traço títulos→dados NÃO obedece a --lgfb-sep-shadow: é estrutural, o par exato da divisória rótulos/valores do Item (mesma cor, mesmos 2px, e essa também nunca desliga). "Separadores entre linhas" é o que separa REGISTOS, e desligá-lo não pode fazer o cabeçalho colar-se aos dados. */ .lgfb-responses-wrap table.lgfb-responses-table > thead > tr > th { padding: 10px 12px; background: var(--lgfb-head-bg, rgba(128,128,128,.25)); background: var(--lgfb-head-bg, color-mix(in srgb, currentColor 20%, transparent)); font-size: var(--lgfb-head-size, 11px); font-weight: var(--lgfb-head-weight, 600); color: var(--lgfb-head-color, #999); text-decoration: var(--lgfb-head-deco, none); text-transform: uppercase; letter-spacing: .7px; box-shadow: inset 0 -2px 0 var(--lgfb-sep-color); text-align: left; white-space: nowrap; } .lgfb-responses-wrap table.lgfb-responses-table > tbody > tr > td { padding: 6px 12px; box-shadow: var(--lgfb-sep-shadow, inset 0 -1px 0 var(--lgfb-sep-color)); color: var(--lgfb-cell-color, inherit); font-weight: var(--lgfb-cell-weight, 400); text-decoration: var(--lgfb-cell-deco, none); } .lgfb-responses-wrap table.lgfb-responses-table > tbody > tr:last-child > td { box-shadow: none; } /* Zebra: as ímpares deixam passar o fundo do tema e as pares levam uma tinta leve. Antes ambas eram translúcidas (branco .05 / preto .05) e escolher UMA das cores quase não se via, porque a outra continuava a tingir. */ .lgfb-responses-table tbody tr:nth-child(odd) { background: var(--lgfb-row-odd-bg, transparent); } .lgfb-responses-table tbody tr:nth-child(even) { background: var(--lgfb-row-even-bg, rgba(128,128,128,.07)); } /* Letra por paridade: cor e peso próprios das ímpares e das pares. Sem escolha, cada uma cai no que estiver definido para o texto das linhas. */ .lgfb-responses-wrap table.lgfb-responses-table > tbody > tr:nth-child(odd) > td { color: var(--lgfb-row-odd-color, var(--lgfb-cell-color, inherit)); font-weight: var(--lgfb-row-odd-weight, var(--lgfb-cell-weight, 400)); } .lgfb-responses-wrap table.lgfb-responses-table > tbody > tr:nth-child(even) > td { color: var(--lgfb-row-even-color, var(--lgfb-cell-color, inherit)); font-weight: var(--lgfb-row-even-weight, var(--lgfb-cell-weight, 400)); } /* Coluna marcada como detalhe: liga à página com o bloco Item. .lgfb-open-detail era a classe do antigo modal — mantida por retrocompatibilidade com conteúdo já publicado que ainda a use. A cor NÃO se declara: é a cor de link do tema que manda. Como há temas em que essa cor mal se distingue do texto, o underline é permanente — é ele que garante que se percebe que é um link, em qualquer tema. */ .lgfb-detail-link, .lgfb-open-detail { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; cursor: pointer; } .lgfb-detail-link:hover, .lgfb-open-detail:hover { text-decoration-thickness: 2px; } .lgfb-file-link { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; white-space: nowrap; } .lgfb-file-link:hover { text-decoration-thickness: 2px; } /* O ícone tem de ficar na mesma linha do nome do ficheiro. Temas de blocos usam com frequência `img, svg { display: block }` (é o caso do lg-systems-theme), o que punha o clip numa linha e o nome noutra — mesmo com espaço de sobra e white-space:nowrap. */ .lgfb-file-link svg { display: inline-block; vertical-align: -2px; } .lgfb-empty { color: #999; font-size: 13px; } /* Só no editor: marcador que dá corpo ao bloco quando no site ele não aparece (sem registos e sem mensagem), para continuar a poder ser selecionado. */ .lgfb-empty-preview { border: 1px dashed rgba(128,128,128,.5); border-radius: 6px; padding: 12px 14px; margin: 0; } .lgfb-no-results { color: #999; font-size: 13px; text-align: center; padding: 16px 0; } .lgfb-search-wrap { margin-bottom: 10px; } .lgfb-search-input { width: 100%; max-width: 360px; padding: 7px 10px; border: 1px solid rgba(128,128,128,.35); border-radius: 6px; font-size: 13px; box-sizing: border-box; background: transparent; color: inherit; } .lgfb-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 100000; align-items: center; justify-content: center; } .lgfb-modal-inner { background: #fff; border-radius: 10px; overflow: hidden; max-width: 560px; width: 92%; max-height: 80vh; display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(0,0,0,.25); } .lgfb-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #eee; flex-shrink: 0; font-size: 13px; color: #1d2327; } .lgfb-modal-close { background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: #aaa; padding: 0; } .lgfb-modal-body { overflow-y: auto; flex: 1; padding: 16px; } .lgfb-modal-scroll { border: 1px solid #ddd; border-radius: 8px; overflow: hidden; } .lgfb-detail-table { width: 100%; border-collapse: collapse; font-size: 13px; } .lgfb-pagination { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; flex-wrap: wrap; } /* Botões de página: só o ícone (primeira / anterior / seguinte / última), no quadrado da borda; a cor vem do tema via currentColor. */ .lgfb-page-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 1px solid rgba(128,128,128,.35); border-radius: 4px; background: transparent; text-decoration: none; color: inherit; } .lgfb-page-btn:hover { background: rgba(128,128,128,.12); } /* Sempre visíveis: os que não se aplicam (extremos da lista, ou o editor, onde não há URL de visitante para onde navegar) ficam apagados e sem hover. */ .lgfb-page-btn.is-disabled { opacity: .35; cursor: default; } .lgfb-page-btn.is-disabled:hover { background: transparent; } .lgfb-page-info { margin: 0 4px; } .lgfb-page-info { color: inherit; opacity: .7; } /* ── Bloco LG-Forms - Item — detalhe de um registo ─────────────────────────── Lista de pares rótulo/valor. Em ecrãs estreitos passa a uma coluna, para o valor não ficar espremido. */ .lgfb-item { display: flex; flex-direction: column; border: 0 !important; box-shadow: 0 0 0 1px var(--lgfb-frame-color, rgba(128,128,128,.35)); border-radius: var(--lgfb-radius, 8px); overflow: hidden; } /* Separadores por border-top (e não gap+fundo): as linhas podem ser translúcidas e o fundo do tema mantém-se visível. */ /* A largura da coluna dos rótulos escolhe-se na Aparência do bloco; em branco fica o minmax(120px, 24%) de sempre — nunca mais estreita que 120px e nunca mais que um quarto da caixa. */ .lgfb-item-row { display: grid; grid-template-columns: var(--lgfb-label-w, minmax(120px, 24%)) 1fr; gap: 0; background: var(--lgfb-row-odd-bg, transparent); } /* Separador entre linhas IGUAL ao das linhas da tabela List (cor e espessura); quem o torna legível sobre a coluna dos rótulos é a tinta leve (10%) dela. */ .lgfb-item-row + .lgfb-item-row { border: 0 !important; box-shadow: var(--lgfb-sep-shadow, inset 0 1px 0 var(--lgfb-sep-color)); } .lgfb-item-row:nth-child(even) { background: var(--lgfb-row-even-bg, var(--lgfb-row-odd-bg, rgba(128,128,128,.07))); } .lgfb-item-row:nth-child(odd) .lgfb-item-value { color: var(--lgfb-row-odd-color, var(--lgfb-cell-color, inherit)); font-weight: var(--lgfb-row-odd-weight, var(--lgfb-cell-weight, 400)); } .lgfb-item-row:nth-child(even) .lgfb-item-value { color: var(--lgfb-row-even-color, var(--lgfb-cell-color, inherit)); font-weight: var(--lgfb-row-even-weight, var(--lgfb-cell-weight, 400)); } /* Rótulo (11px) e valor (14px) têm alturas de linha diferentes — sem isto o rótulo não fica centrado verticalmente em relação ao valor. */ .lgfb-item-label, .lgfb-item-value { display: flex; align-items: center; } /* A divisória vertical rótulos/valores usa a MESMA linha que separa os títulos das linhas na tabela List (2px, mesma cor). */ .lgfb-item-label { padding: 10px 14px; font-size: var(--lgfb-head-size, 11px); font-weight: var(--lgfb-head-weight, 600); color: var(--lgfb-head-color, #999); text-decoration: var(--lgfb-head-deco, none); text-transform: uppercase; letter-spacing: .8px; background: var(--lgfb-head-bg, rgba(128,128,128,.15)); background: var(--lgfb-head-bg, color-mix(in srgb, currentColor 10%, transparent)); box-shadow: inset -2px 0 0 var(--lgfb-sep-color); } .lgfb-item-value { padding: 10px 14px; font-size: var(--lgfb-cell-size, 14px); color: var(--lgfb-cell-color, inherit); font-weight: var(--lgfb-cell-weight, 400); text-decoration: var(--lgfb-cell-deco, none); word-break: break-word; } /* ── Ausência de registos — IGUAL no List e no Item ────────────────────────── Uma caixa com a moldura do bloco (cor e cantos escolhidos na Aparência), texto centrado e esbatido. Antes eram dois aspetos diferentes: o Item numa caixa e o List em texto solto, lado a lado na mesma página. Nota: o tracejado que aqui esteve nunca chegou a ver-se — o .lgfb-item leva `border: 0 !important` e anulava-o; o que se via era o box-shadow do .lgfb-item. Por isso a moldura é box-shadow, como no resto dos dois blocos. A caixa NÃO é o mesmo que a lista desaparecer: sem "Sem registos, mostrar" preenchido, o List continua a não render nada no site (ver block-responses.php). */ .lgfb-vazio { padding: 16px; border: 0 !important; box-shadow: 0 0 0 1px var(--lgfb-frame-color, rgba(128,128,128,.35)); border-radius: var(--lgfb-radius, 8px); color: inherit; opacity: .75; font-size: var(--lgfb-cell-size, 14px); text-align: center; margin: 0; } @media (max-width: 600px) { .lgfb-item-row { grid-template-columns: 1fr; } /* Empilhado, a divisória vertical deixa de fazer sentido. */ .lgfb-item-label { padding-bottom: 2px; border-right: none; } .lgfb-item-value { padding-top: 2px; } }