passa a um cartao e cada a uma linha de duas colunas:
a' esquerda o rotulo (que vem do data-rotulo escrito pelo componente), a'
direita o valor. O cabecalho da tabela deixa de ser preciso e esconde-se,
mas fica no HTML, para os leitores de ecra continuarem a ler a tabela
como tabela.
Nao ha' JavaScript nenhum nisto.
-------------------------------------------------------------------------- */
@media (max-width: 640px) {
.tabela-cartoes {
overflow: visible; /* ja' nao ha' nada para deslizar */
border: 0; background: transparent; border-radius: 0;
}
.tabela-cartoes table.dados { display: block; }
.tabela-cartoes table.dados caption { padding: 0 0 10px; }
/* O cabecalho sai do ecra mas continua a existir para quem ouve a pagina. */
.tabela-cartoes thead {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.tabela-cartoes tbody, .tabela-cartoes tfoot { display: block; }
.tabela-cartoes tbody tr, .tabela-cartoes tfoot tr {
display: block;
background: var(--papel);
border: 1px solid var(--linha);
border-radius: var(--raio);
box-shadow: var(--sombra);
margin: 0 0 12px;
overflow: hidden;
}
.tabela-cartoes tbody tr:last-child { margin-bottom: 0; }
.tabela-cartoes tbody tr:hover { background: var(--papel); }
.tabela-cartoes tbody tr.seleccionada { background: var(--azul-claro); border-color: var(--azul); }
.tabela-cartoes table.dados td {
display: grid;
grid-template-columns: minmax(5.5em, 38%) 1fr;
gap: 10px; align-items: start;
padding: 10px 14px;
text-align: left;
border-bottom: 1px solid var(--linha);
}
.tabela-cartoes table.dados tr td:last-child { border-bottom: 0; }
.tabela-cartoes table.dados td::before {
content: attr(data-rotulo);
font-size: .72rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .04em;
color: var(--tinta-suave);
padding-top: 2px;
word-break: break-word;
}
/* Uma celula sem rotulo (a primeira da linha de totais, por exemplo)
nao gasta a coluna da esquerda. */
.tabela-cartoes table.dados td[data-rotulo=""] { grid-template-columns: 1fr; }
.tabela-cartoes table.dados td[data-rotulo=""]::before { content: none; }
/* O alinhamento a' direita das colunas de numeros nao faz sentido no
cartao: aqui o valor fica logo a seguir ao rotulo. */
.tabela-cartoes table.dados td.num,
.tabela-cartoes table.dados td.meio { text-align: left; }
/* Colunas marcadas como secundarias saem do cartao. */
.tabela-cartoes .so-largo { display: none !important; }
.tabela-cartoes tfoot tr { border-color: var(--linha-forte); }
.tabela-cartoes tfoot td { border-top: 0; background: #FAFBFD; }
}
/* ==========================================================================
9. DIALOGO MODAL
--------------------------------------------------------------------------
ERRO REAL: um dialogo sem largura maxima ocupa o ecra de ponta a ponta e
o texto fica numa linha so'. A largura esta' aqui, e nao numa framework
que pode nao estar carregada.
========================================================================== */
.modal {
position: fixed; top: 0; right: 0; bottom: 0; left: 0;
z-index: 200;
display: flex; align-items: center; justify-content: center;
padding: 16px;
}
/* Sem isto o display:flex acima ganhava ao atributo hidden e o dialogo
aparecia sempre. */
.modal[hidden] { display: none !important; }
.modal-fundo {
position: absolute; top: 0; right: 0; bottom: 0; left: 0;
background: rgba(16,24,40,.55);
}
.modal-caixa {
position: relative;
width: 100%;
max-width: 440px; /* a regra que faltava */
margin: auto;
max-height: calc(100vh - 32px);
overflow-y: auto;
background: var(--papel);
border-radius: var(--raio);
box-shadow: var(--sombra-m);
animation: surgir 180ms cubic-bezier(.4,0,.2,1) both;
}
.modal-cabeca {
display: flex; align-items: flex-start; gap: 12px;
padding: 18px 20px 0;
}
.modal-cabeca h2 { margin: 0; font-size: 1.1rem; }
.modal-fechar {
margin-left: auto; flex: 0 0 auto;
width: 36px; height: 36px; margin-top: -4px; margin-right: -6px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent; border: 0; border-radius: var(--raio-p);
color: var(--tinta-suave); cursor: pointer;
}
.modal-fechar:hover { background: var(--fundo); color: var(--tinta); }
.modal-corpo { padding: 14px 20px 18px; font-size: .95rem; line-height: 1.6; }
.modal-pe {
padding: 14px 20px; border-top: 1px solid var(--linha);
background: #FAFBFD;
border-radius: 0 0 var(--raio) var(--raio);
}
/* Enquanto o dialogo esta' aberto a pagina de tras nao desliza. */
body.tem-modal { overflow: hidden; }
/* ==========================================================================
10. TELEMOVEL
--------------------------------------------------------------------------
Regras que valem para todos os componentes.
Os campos ficam a 16px (1rem) - vem de estilo.css e nao se muda: com
menos de 16px o iOS faz zoom sozinho quando se carrega no campo e a
pagina fica torta, com deslize horizontal que ja' nao sai de la'.
========================================================================== */
@media (max-width: 560px) {
.pagina { padding: 16px 12px 40px; }
.pagina-centrada .pagina { padding-top: 16px; }
.cartao-cabeca { padding: 16px; }
.cartao-corpo { padding: 16px; }
.cartao-pe { padding: 14px 16px; }
.cartao-cabeca h1 { font-size: 1.25rem; }
.cartao-corpo > .tabela-envolve:only-child { margin: -16px; }
/* O botao principal ocupa a largura toda: e' mais facil acertar com o
polegar e fica claro qual e' o passo seguinte. Os outros acompanham,
para a coluna ficar direita. */
.botoes { display: flex; flex-direction: column; align-items: stretch; }
.botoes .botao { width: 100%; }
.botoes .empurra { margin-left: 0; }
.cartao-pe { flex-direction: column; align-items: stretch; }
.cartao-pe .botao { width: 100%; }
/* Ordem visual: o principal em cima. */
.botoes .botao-principal { order: -1; }
.aviso { padding: 14px; gap: 10px; }
.aviso .accoes { display: flex; flex-direction: column; align-items: stretch; }
.aviso .accoes .botao { width: 100%; }
.modal { padding: 12px; align-items: flex-end; }
.modal-caixa { max-width: none; margin: 0; }
.seccao-accoes { margin-left: 0; width: 100%; }
.seccao-accoes .botao { flex: 1; }
.passos { gap: 4px; font-size: .8rem; }
.passos li + li::before { width: 10px; margin-right: 4px; }
.regras { padding: 12px 14px; }
.simbolos li { width: 32px; height: 32px; font-size: 1rem; }
.campo-passe input { padding-right: 84px; }
.ver-passe { font-size: .8rem; padding: 0 8px; }
.servicos { grid-template-columns: 1fr; }
.topo-interior { padding: 10px 12px; gap: 10px; }
.topo-utilizador { width: 100%; margin-left: 0; }
}
/* 320px e' o ecra mais estreito que ainda ha' em servico. Nada pode
transbordar aqui. */
@media (max-width: 360px) {
.topo-marca .nome { font-size: .95rem; }
.topo-marca .sub { font-size: .72rem; }
.simbolos li { width: 30px; height: 30px; }
.conjuntos li { font-size: .74rem; padding: 3px 8px; }
.passos { font-size: .75rem; }
.tabela-cartoes table.dados td { grid-template-columns: minmax(4.5em, 40%) 1fr; gap: 8px; }
}
/* ==========================================================================
11. IMPRESSAO
========================================================================== */
@media print {
.modal, .ver-passe, .painel-passe, .seccao-accoes { display: none !important; }
.tabela-envolve { overflow: visible; border: 0; }
.lista-icones .marca { border: 1px solid #999; }
}
/* ------------------------------------------------------------ botoes --- */
/* O .botoes e' so' a fila (flex + gap): nao traz margem, para poder viver
dentro do .cartao-pe, que ja' tem o seu proprio padding. Mas uma fila de
botoes emitida no meio do conteudo - o ui_formulario_fecha() faz isso -
ficava colada ao campo ou ao texto de cima. Estas duas regras dao-lhe o
ar que lhe falta, sem tocar no caso do pe' do cartao. */
.ui-form > .botoes { margin-top: 20px; }
.cartao-corpo > .botoes { margin-top: 18px; }
.cartao-corpo > .botoes:first-child { margin-top: 0; }
/* ------------------------------------------------------------ rodape --- */
/* O rodape seguia o conteudo: numa pagina curta subia com ele e ficava
ecra vazio por baixo. Com o body em coluna e o conteudo a crescer, o
rodape assenta sempre no fundo da janela, e numa pagina longa continua
onde sempre esteve - a seguir ao conteudo.
Porque nao se mexe no estilo.css: e' copia da folha do SIVAM. Tudo o
que e' novo vive aqui.
O .saltar nao entra na conta: e' position:absolute, fora do fluxo. */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > .pagina, body > .disposicao { flex: 1 0 auto; }
/* Com o body em coluna flexivel, um item com margin:0 auto deixa de esticar
e passa a ter a largura do conteudo (era o .pagina a encolher para 744px
em vez dos 1120 do cabecalho). A largura explicita devolve-lhe o tamanho,
e o margin:auto volta a centra-lo. */
body > .pagina, body > .disposicao { width: 100%; }
/* ------------------------------------------------- alinhar a' esquerda --- */
/* ui_pagina_abre(array('alinhamento' => 'esquerda')).
Por omissao o cabecalho, o conteudo e o rodape sao tres caixas de 1120px
centradas. Numa aplicacao de gestao, com menu lateral, isso deixa uma
faixa vazia grande a' esquerda e empurra o trabalho para o meio do ecra.
Com esta classe as tres zonas passam a ocupar a largura toda e a comecar
no mesmo x, junto a' margem. */
.pagina-esquerda .topo-interior,
.pagina-esquerda .rodape-interior,
.pagina-esquerda > .pagina,
.pagina-esquerda > .disposicao {
max-width: none;
margin-left: 0;
margin-right: 0;
padding-left: 24px;
padding-right: 24px;
}
@media (max-width: 560px) {
.pagina-esquerda .topo-interior,
.pagina-esquerda .rodape-interior,
.pagina-esquerda > .pagina,
.pagina-esquerda > .disposicao { padding-left: 12px; padding-right: 12px; }
}
/* O .rodape exterior tem padding lateral de 20px; com o conteudo encostado
a 24px, o rodape ficava 4px fora do alinhamento. Zera-se o de fora e
deixa-se o interior mandar, que e' quem leva os 24px acima. */
.pagina-esquerda .rodape { padding-left: 0; padding-right: 0; }
/* ----------------------------------------------- gerar a password --- */
/* O botao que mete uma password nova no campo, por baixo dele. E' o
.botao discreto da casa, so' que mais pequeno: e' um auxiliar, nao pode
competir com o botao principal do formulario. */
.gerar-passe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.gerar-passe .botao {
min-height: 36px; padding: 6px 14px; font-size: .85rem;
}
/* --------------------------------------------------------- progresso --- */
/* A lista de passos enquanto se espera. O indicador e' o mesmo .roda dos
botoes; aqui vive fora deles, por isso repete-se o tamanho e a cor. */
.passos-espera {
background: var(--papel); border: 1px solid var(--linha);
border-radius: var(--raio); box-shadow: var(--sombra); padding: 22px;
}
.passos-titulo { margin: 0 0 14px; font-weight: 700; font-size: 1.05rem; }
.passos-nota { margin: 14px 0 0; font-size: .875rem; color: var(--tinta-suave); }
.passos-espera ul { list-style: none; margin: 0; padding: 0; }
.passos-espera li {
display: flex; align-items: center; gap: 10px;
padding: 8px 0; color: var(--tinta-suave); font-size: .95rem;
}
.passos-espera .roda {
width: 16px; height: 16px; flex: 0 0 auto;
border: 2px solid var(--azul); border-right-color: transparent;
border-radius: 50%; animation: rodar .7s linear infinite;
}
/* Quem tem o movimento reduzido ligado nao leva com a roda a girar: fica
um circulo parado, que continua a dizer "este passo esta' a espera". */
@media (prefers-reduced-motion: reduce) {
.passos-espera .roda { animation: none; border-right-color: var(--linha); }
}
/* ---------------------------------------------------------- resposta --- */
/* O texto em bruto que outra maquina devolveu, mostrado tal e qual (num
, dentro de um cartao ou de um bloco de ajuda).
Um nao quebra linhas: uma resposta com uma linha comprida - e sao
quase todas, porque vem com o caminho de ficheiros e o endereco - saltava
para fora do cartao. Aqui quebra-se, inclusive dentro de palavras longas,
e o que sobrar desliza dentro da propria caixa, nunca no documento. */
.resposta {
margin: 0;
padding: 14px 16px;
background: var(--fundo);
border: 1px solid var(--linha);
border-radius: var(--raio-p);
font-family: Consolas, "DejaVu Sans Mono", monospace;
font-size: .82rem;
line-height: 1.5;
color: var(--tinta-suave);
white-space: pre-wrap;
word-break: break-word;
overflow-x: auto;
max-height: 420px;
overflow-y: auto;
}
/* ------------------------------------------------ espaco entre blocos --- */
/* O ".cartao + .cartao" do estilo.css so' olha para cartoes. Um painel de
espera ou uma dobra de ajuda logo a seguir a um cartao ficava colado a
ele; leva a mesma distancia que os cartoes usam entre si. */
.cartao + .passos-espera,
.cartao + .ajuda-dobra { margin-top: 16px; }
/* A REGRA GERAL, em vez de mais remendos.
As regras de cima tratam casos um a um (a seguir a um cartao, dentro do
corpo de um cartao, no fim de um ui-form). Cada caso que faltava dava um
bloco colado ao de cima - apanhado varias vezes: uma fila de botoes logo
a seguir a uma tabela, uma dobra de ajuda a seguir a um formulario
escrito a' mao.
Aqui a regra e' uma so': uma fila de botoes, uma dobra de ajuda ou o que
vier depois de uma tabela leva espaco SEMPRE que tem alguma coisa antes.
E' seguro por uma razao: as margens verticais entre blocos nao se somam,
sobrepoem-se - onde ja' havia espaco fica o maior dos dois, nunca o
dobro. As regras mais especificas de cima (os 20px do ui-form, os 18px
do cartao) continuam a ganhar onde se aplicam. */
* + .botoes,
* + .ajuda-dobra,
.tabela-envolve + * { margin-top: 16px; }
/* Excepcao: um formulario que e' so' um botao (hidden + botoes), como o
de "Voltar a ser eu" ou o do pe' de um cartao. O hidden nao se ve', e o
botao nao deve ganhar espaco por causa dele. */
input[type="hidden"] + .botoes { margin-top: 0; }
/* Titulo de coluna com explicacao ('dica' em ui_tabela_html): sublinhado
ponteado e cursor em "?", para quem le' saber que pode passar o rato por
cima e esperar. Sem isto a explicacao existia mas ninguem a encontrava. */
table.dados th.tem-dica {
cursor: help;
text-decoration: underline dotted;
text-underline-offset: 3px;
}
|