(RvmLineChart) normaliza o comprimento para 1, e e
o que permite desenhar o traco sem JavaScript: sem ele so o navegador sabe quanto mede o caminho.
⚠️ O `stroke-dasharray: 1` fica PERMANENTE: com pathLength 1 ele e um traco do tamanho exato do
caminho seguido de um vao que nunca aparece — ou seja, uma linha solida. Precisa ficar porque
`dasharray: none` nao interpola com um dasharray, e a animacao saltaria na metade. */
:where(.rvm-chart--linha) .rvm-chart__curva {
stroke-dasharray: 1;
animation: rvm-desenha-traco var(--rvm-motion-duration) var(--rvm-motion-ease) both;
}
@keyframes rvm-desenha-traco {
from { stroke-dashoffset: 1; }
to { stroke-dashoffset: 0; }
}
/* A FATIA abre do centro do circulo. view-box aqui, ao contrario da barra: a ancora e o centro do
DESENHO, nao o da fatia — uma fatia de 10% tem o proprio centro la na borda, e crescer a partir
dele faria o pedaco brotar de fora para dentro. */
/* ⚠️ A TRILHA entra junto com as fatias aqui, e NAO entra no medidor. Nao e inconsistencia: no
anel a trilha e a fatia ocupam o MESMO circulo, e crescer uma sem a outra le como desalinhamento,
nao como movimento (visto na tela, a fatia aparecia por dentro da borda cinza). No medidor as duas
ficam LADO A LADO, e e justamente a trilha parada que faz a barra parecer encher. */
:where(.rvm-chart--rosca) .rvm-chart__fatia,
:where(.rvm-chart--rosca) .rvm-chart__trilha,
:where(.rvm-chart--pizza) .rvm-chart__fatia,
:where(.rvm-chart--pizza) .rvm-chart__trilha,
:where(.rvm-chart--radar) .rvm-chart__area-serie {
transform-box: view-box;
transform-origin: 50% 50%;
animation: rvm-abre-do-centro var(--rvm-motion-duration) var(--rvm-motion-ease) both;
}
/* A meia rosca e recortada na altura (o viewBox tem metade do lado), entao o centro do circulo cai
na BORDA DE BAIXO do quadro, nao no meio dele. */
:where(.rvm-chart--rosca.rvm-chart--meia) .rvm-chart__fatia,
:where(.rvm-chart--rosca.rvm-chart--meia) .rvm-chart__trilha { transform-origin: 50% 100%; }
/* O MEDIDOR corre da esquerda da barra inteira — view-box, e nao fill-box, porque cada segmento
comeca onde o anterior acabou: se cada um crescesse do proprio canto, eles se separariam durante
a animacao e a barra apareceria furada. */
:where(.rvm-chart--medidor) .rvm-chart__fatia {
transform-box: view-box;
transform-origin: 0 50%;
animation: rvm-cresce-da-esquerda var(--rvm-motion-duration) var(--rvm-motion-ease) both;
}
/* A BOLHA estufa do proprio centro: aqui cada uma e uma ilha, e a ancora de verdade e ela mesma. */
:where(.rvm-chart--bolha) .rvm-chart__fatia {
transform-box: fill-box;
transform-origin: 50% 50%;
animation: rvm-estufa var(--rvm-motion-duration) var(--rvm-motion-ease) both;
}
/* O numero ESCRITO POR CIMA de uma forma (o rotulo do medidor e da bolha, e o valor no meio da
rosca) entra junto com ela. Sem isto, a porcentagem do medidor
fica um segundo inteiro flutuando sobre uma barra vazia e o grafico parece quebrado.
⚠️ So o rotulo interno. O eixo e a categoria NAO entram: eles sao a moldura, nao o dado, e apagar
a moldura por um segundo e que deixaria o grafico ilegivel enquanto anima.
⚠️ E entra na SEGUNDA METADE, nao no comeco: o rotulo fica parado na posicao final enquanto o
segmento desliza por baixo, entao nascendo junto ele aparece sobre a trilha vazia, longe do pedaco
que descreve. Visto na tela do medidor: o "25%" legivel sobre cinza. A conta fecha em 1s. */
.rvm-chart__rotulo-interno,
.rvm-chart__centro {
animation: rvm-surge calc(var(--rvm-motion-duration) / 2) var(--rvm-motion-ease)
calc(var(--rvm-motion-duration) / 2) both;
}
/* A TROCA DE DADO. Propriedades de geometria do SVG2: e o que o Blazor reescreve quando o valor
muda, e nao tem intersecao nenhuma com o que a entrada anima.
⚠️ `points` do poligono (radar) NAO e propriedade de CSS e nao ha o que transicionar la: o radar
troca de valor em salto, nos tres navegadores. Nao ha caminho sem JavaScript para isso. */
.rvm-chart__barra,
.rvm-chart__fatia,
.rvm-chart__curva,
.rvm-chart__trilha {
transition:
x var(--rvm-motion-duration) var(--rvm-motion-ease),
y var(--rvm-motion-duration) var(--rvm-motion-ease),
width var(--rvm-motion-duration) var(--rvm-motion-ease),
height var(--rvm-motion-duration) var(--rvm-motion-ease),
cx var(--rvm-motion-duration) var(--rvm-motion-ease),
cy var(--rvm-motion-duration) var(--rvm-motion-ease),
r var(--rvm-motion-duration) var(--rvm-motion-ease),
d var(--rvm-motion-duration) var(--rvm-motion-ease);
}
/* 🔴 A TRAVA DE ACESSIBILIDADE. Nao e opcional e nao se negocia: movimento na tela provoca enjoo e
desorientacao em quem tem disturbio vestibular (WCAG 2.3.3). Quem liga "reduzir movimento" no
sistema ve o grafico PRONTO — nao uma versao mais lenta dele.
⚠️ `animation: none` e `transition: none`, e nao uma duracao de 0s: o estado final tem de ser o
unico estado que existe, e isso da para provar DE FORA (E2E com reducedMotion: 'reduce'), que e o
que o card exige. O dasharray da curva tambem sai, senao ficaria um traco calculado a toa. */
@media (prefers-reduced-motion: reduce) {
.rvm-chart__barra,
.rvm-chart__barra--desce,
.rvm-chart__fatia,
.rvm-chart__curva,
.rvm-chart__trilha,
.rvm-chart__area-serie,
.rvm-chart__rotulo-interno,
.rvm-chart__centro {
animation: none;
transition: none;
stroke-dasharray: none;
}
}
/* O desligamento por aplicativo (Animated="false"). Mesmo efeito da preferencia do sistema, por
escolha de quem monta a tela — um grafico decorativo dentro de um cartao que ja diz o numero, por
exemplo, nao ganha nada em animar. */
.rvm-chart--sem-animacao .rvm-chart__barra,
.rvm-chart--sem-animacao .rvm-chart__barra--desce,
.rvm-chart--sem-animacao .rvm-chart__fatia,
.rvm-chart--sem-animacao .rvm-chart__curva,
.rvm-chart--sem-animacao .rvm-chart__trilha,
.rvm-chart--sem-animacao .rvm-chart__area-serie,
.rvm-chart--sem-animacao .rvm-chart__rotulo-interno,
.rvm-chart--sem-animacao .rvm-chart__centro {
animation: none;
transition: none;
stroke-dasharray: none;
}
/* ─── Agenda de eventos (💠 Calendar, onda 6) ──────────────────────────────────────────────────
Medidas: purple-full-width-calendar.json (quadro raio 20, borda Grey-100; cabecalho 96 com
padding 24 e vao 12; faixa de dias 56, texto text-l/600 Grey-700) e event-month.json (celula
160x186, padding 16, vao 8; o numero num alvo redondo de 34 com borda Grey-100).
⚠️ A LINHA NAO E FIXA em 186: aqui ela e altura MINIMA e o dia cheio a faz crescer. Agenda real
tem dia lotado, e cortar compromisso em silencio e pior do que a linha ficar mais alta. */
.rvm-event-calendar {
background: var(--rvm-white);
border: 1px solid var(--rvm-neutral-100);
border-radius: 20px;
overflow: hidden;
}
.rvm-event-calendar__cabecalho {
display: flex;
align-items: center;
gap: var(--rvm-space-12);
padding: var(--rvm-space-24);
border-bottom: 1px solid var(--rvm-neutral-100);
}
/* O bloco do mes fica no meio e as acoes na direita: o botao de hoje e o unico a esquerda. */
.rvm-event-calendar__mes {
display: flex;
align-items: center;
gap: var(--rvm-space-24);
margin-inline: auto;
}
.rvm-event-calendar__titulo { white-space: nowrap; }
.rvm-event-calendar__acoes {
display: flex;
align-items: center;
gap: var(--rvm-space-12);
}
/* table-layout fixo: sem ele um titulo longo alarga a coluna dele e a semana deixa de ter sete
colunas iguais. */
.rvm-event-calendar__grade {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
/* ⚠️ A cor sai do TOKEN DE ESQUEMA, nao do Grey-700 literal do kit: #868686 sobre branco da 3,5:1
e reprova AA em texto de 16px (o axe pegou). No esquema acessivel ele escurece para #686868
(5,7:1); no esquema do kit volta ao Grey-700 exato. Vale para os tres textos da moldura. */
.rvm-event-calendar__grade th {
box-sizing: border-box;
height: 56px;
padding: var(--rvm-space-16);
text-align: start;
border: 1px solid var(--rvm-neutral-100);
color: var(--rvm-s-text-secondary);
font-size: var(--rvm-text-l-size);
line-height: var(--rvm-text-l-line-height);
font-weight: var(--rvm-font-weight-semibold);
}
/* Altura no | vale como minimo: a celula cresce com o conteudo sem quebrar a tabela.
⚠️ border-box: sem ele o padding de 16+16 se soma e a linha sai com 218 em vez dos 186 do kit.
Foi o lado a lado que pegou — os testes conferem classe, e a medida certa nao estava em nenhum. */
.rvm-event-calendar__dia {
box-sizing: border-box;
height: 186px;
padding: var(--rvm-space-16);
vertical-align: top;
border: 1px solid var(--rvm-neutral-100);
}
/* O empilhamento vive numa camada interna: | com display:flex perde o alinhamento das colunas. */
.rvm-event-calendar__conteudo {
display: flex;
flex-direction: column;
gap: var(--rvm-space-8);
}
/* Dia fora do mes: o kit hachura a celula com 17 retangulos de 240x8 girados 25 graus dentro de um
quadro girado -90, empilhados de 20,68 em 20,68 (medido no .fig). Aqui a mesma trama sai de uma
regra so — o gradiente repetido desenha igual sem os 17 nos.
⚠️ 20,68 e o passo ao longo do EIXO EMPILHADO, que esta girado em relacao a perpendicular das
faixas; o periodo que o gradiente quer e o perpendicular: 20,68 x cos(25) = 18,74. Pintar 20,68
deixa a trama 11% mais rala que a do kit — diferenca que o lado a lado mediu (18,6 contra 20,8). */
.rvm-event-calendar__dia--fora {
background: repeating-linear-gradient(
-65deg,
var(--rvm-neutral-50) 0 8px,
transparent 8px 18.74px);
}
.rvm-event-calendar__numero {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 34px;
block-size: 34px;
border: 1px solid var(--rvm-neutral-100);
border-radius: 100px;
/* O alvo fica no MEIO da celula (Container com alinhamento CENTER na medida), e nao encostado a
esquerda como as pilulas. */
align-self: center;
flex: none;
color: var(--rvm-s-text-secondary);
font-size: var(--rvm-text-m-size);
line-height: var(--rvm-text-m-line-height);
font-weight: var(--rvm-font-weight-semibold);
}
.rvm-event-calendar__dia--fora .rvm-event-calendar__numero { color: var(--rvm-s-text-muted); }
/* Hoje: o kit pinta o alvo com o destaque. A cor por cima vem do mesmo token que o resto da
biblioteca usa sobre o degrau 500 — e e ele que faz o destaque preto inverter sozinho. */
.rvm-event-calendar__dia--hoje .rvm-event-calendar__numero {
background: var(--rvm-accent-500);
border-color: var(--rvm-accent-500);
color: var(--rvm-s-on-accent-500);
}
/* ─── Semana e dia: a grade de horas ───────────────────────────────────────────────────────────
Medidas (purple-full-width-calendar.json, Type=Week): coluna de hora 100 de largura; colunas de
dia 147; faixa do cabecalho 100 e linha de hora 96, ambas com padding 16. O texto do dia e da
hora sai em text-l/600 Grey-700, centrado.
⚠️ No dia a celula estica para 1028: a largura e consequencia de haver UMA coluna, nao medida. */
/* ⚠️ table-layout FIXO tambem aqui: com "auto", a coluna que tem um compromisso de titulo longo
rouba largura das vizinhas e a semana deixa de ter sete colunas iguais — o kit desenha 147 em
todas. Fixo, a coluna de hora fica com os 100 pedidos e o resto se divide por igual. */
.rvm-event-calendar__canto,
.rvm-event-calendar__hora {
/* Os 100 do kit sao a largura TOTAL da coluna: sem border-box o padding se soma e ela sai com 132. */
box-sizing: border-box;
inline-size: 100px;
padding: var(--rvm-space-16);
text-align: center;
vertical-align: top;
border: 1px solid var(--rvm-neutral-100);
color: var(--rvm-s-text-secondary);
font-size: var(--rvm-text-l-size);
line-height: var(--rvm-text-l-line-height);
font-weight: var(--rvm-font-weight-semibold);
white-space: nowrap;
}
/* O cabecalho do dia empilha o alvo e o nome, centrados (vao 10 na medida). */
.rvm-event-calendar__conteudo--dia {
align-items: center;
gap: 10px;
}
.rvm-event-calendar__nome-do-dia {
color: var(--rvm-s-text-secondary);
font-size: var(--rvm-text-l-size);
line-height: var(--rvm-text-l-line-height);
font-weight: var(--rvm-font-weight-semibold);
}
.rvm-event-calendar__celula-hora {
box-sizing: border-box;
height: 96px;
padding: var(--rvm-space-16);
}
.rvm-event-calendar__celula-hora .rvm-event-calendar__conteudo { gap: var(--rvm-space-12); }
/* A marca do "agora": o kit desenha um ponto de 5x10 colado numa linha, os dois em Red-500. Ela
atravessa a celula inteira, entao sai do fluxo — empurrar os compromissos para baixo mudaria a
altura da linha so porque deu a hora. */
.rvm-event-calendar__dia--agora { position: relative; }
.rvm-event-calendar__agora {
position: absolute;
inset-inline: 0;
/* A altura vem do MINUTO, calculado em C#: as 10h30 caem na metade da linha das 10. Fixar 50%
poria a marca no meio da hora qualquer que fosse o relogio. */
inset-block-start: var(--rvm-calendar-agora, 50%);
block-size: 10px;
margin-block-start: -5px;
pointer-events: none;
/* O ponto e um circulo de 5 na ponta esquerda; a linha e 1px no meio da altura. */
background:
radial-gradient(circle 2.5px at 2.5px 5px, var(--rvm-danger-500) 0 100%, transparent 100%),
linear-gradient(var(--rvm-danger-500), var(--rvm-danger-500)) no-repeat 0 4.5px / 100% 1px;
}
/* ─── Pilula de compromisso (conjunto "Event") ─────────────────────────────────────────────────
event.json: altura 32, raio 8, vao 4, padding 6/8; com foto a esquerda cai para 6. */
.rvm-event-pill {
display: flex;
align-items: center;
gap: var(--rvm-space-4);
inline-size: 100%;
block-size: 32px;
padding: var(--rvm-space-6) var(--rvm-space-8);
border: 0;
border-radius: 8px;
background: var(--rvm-c-fill);
color: var(--rvm-c-on-fill);
font-size: var(--rvm-text-s-size);
line-height: var(--rvm-text-s-line-height);
font-weight: var(--rvm-font-weight-semibold);
font-family: inherit;
text-align: start;
}
.rvm-event-pill:has(.rvm-event-pill__foto) { padding-inline-start: var(--rvm-space-6); }
button.rvm-event-pill { cursor: pointer; }
/* O "State=On" do kit e o degrau 700 — o mesmo que ja serve de hover em toda a biblioteca. */
button.rvm-event-pill:hover,
.rvm-event-pill--selected { background: var(--rvm-c-fill-hover); }
button.rvm-event-pill:focus-visible {
outline: 2px solid var(--rvm-accent-500);
outline-offset: 2px;
}
.rvm-event-pill__foto {
inline-size: 20px;
block-size: 20px;
border-radius: 100px;
object-fit: cover;
flex: none;
}
/* Corta com reticencias: em 32px o titulo nunca quebra em duas linhas, e o nome inteiro continua
no DOM para quem usa leitor de tela. */
.rvm-event-pill__titulo {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ─── Cartao de compromisso (💠 Calendar, conjunto "Event Card") ────────────────────────────────
Medidas (event-card.json): 304x90 com faixa e 304x82 sem; raio 12, borda Grey-100; corpo com
padding 16 e vao 6; titulo text-m/600; detalhe com vao 8, horario em text-s/500. */
.rvm-event-card {
display: flex;
flex-direction: column;
inline-size: 100%;
border: 1px solid var(--rvm-neutral-100);
border-radius: 12px;
background: var(--rvm-white);
overflow: hidden;
text-align: start;
font-family: inherit;
padding: 0;
}
button.rvm-event-card { cursor: pointer; }
button.rvm-event-card:hover { border-color: var(--rvm-neutral-200); }
button.rvm-event-card:focus-visible {
outline: 2px solid var(--rvm-accent-500);
outline-offset: 2px;
}
.rvm-event-card__corpo {
display: flex;
flex-direction: column;
gap: var(--rvm-space-6);
padding: var(--rvm-space-16);
}
.rvm-event-card__titulo {
margin: 0;
color: var(--rvm-ink-500);
font-size: var(--rvm-text-m-size);
line-height: var(--rvm-text-m-line-height);
font-weight: var(--rvm-font-weight-semibold);
}
/* O horario fica a esquerda e o grupo de pessoas empurrado para a direita: e o arranjo do kit,
que no .fig e um espaco elastico entre os dois. */
.rvm-event-card__detalhes {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--rvm-space-8);
}
.rvm-event-card__horario {
display: inline-flex;
align-items: center;
gap: var(--rvm-space-4);
color: var(--rvm-s-text-secondary);
font-size: var(--rvm-text-s-size);
line-height: var(--rvm-text-s-line-height);
font-weight: var(--rvm-font-weight-medium);
}
.rvm-event-card__pessoas { flex: none; }
/* A faixa do rodape: 8px na cor do papel. E o unico lugar colorido do cartao. */
.rvm-event-card__faixa {
display: block;
block-size: 8px;
background: var(--rvm-c-fill);
}
/* ─── Chat (💠 Chat, onda 6) ───────────────────────────────────────────────────────────────────
Medidas: casca 588x908 raio 20 borda Grey-100; cabecalho e rodape de 80 com padding 20 e vao 16;
area de mensagens em Grey-50 com padding 20 e vao 20. */
.rvm-chat {
display: flex;
flex-direction: column;
block-size: 908px;
max-block-size: 100%;
border: 1px solid var(--rvm-neutral-100);
border-radius: 20px;
background: var(--rvm-white);
overflow: hidden;
}
.rvm-chat__cabecalho {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--rvm-space-16);
padding: var(--rvm-space-20);
border-bottom: 1px solid var(--rvm-neutral-100);
flex: none;
}
.rvm-chat__quem {
display: flex;
align-items: center;
gap: var(--rvm-space-12);
min-inline-size: 0;
}
.rvm-chat__titulos { min-inline-size: 0; }
.rvm-chat__titulo {
margin: 0;
color: var(--rvm-ink-500);
font-size: var(--rvm-text-m-size);
line-height: var(--rvm-text-m-line-height);
font-weight: var(--rvm-font-weight-semibold);
}
.rvm-chat__subtitulo {
margin: 0;
color: var(--rvm-s-text-secondary);
font-size: var(--rvm-text-s-size);
line-height: var(--rvm-text-s-line-height);
}
.rvm-chat__acoes {
display: flex;
align-items: center;
gap: var(--rvm-space-8);
flex: none;
}
/* justify-content flex-end e o alinhamento MAX do kit: a conversa cresce de baixo para cima, e com
poucas mensagens elas ficam coladas no rodape em vez de flutuando no topo. */
.rvm-chat__mensagens {
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: var(--rvm-space-20);
padding: var(--rvm-space-20);
background: var(--rvm-neutral-50);
overflow-y: auto;
flex: 1;
}
.rvm-chat__rodape {
display: flex;
align-items: center;
gap: var(--rvm-space-16);
padding: var(--rvm-space-16);
border-top: 1px solid var(--rvm-neutral-100);
flex: none;
}
/* ─── Grupo de mensagens ─────────────────────────────────────────────────────────────────────── */
.rvm-chat-group {
display: flex;
flex-direction: column;
gap: var(--rvm-space-8);
}
/* O avatar fica alinhado ao RODAPE do grupo — encosta no ultimo balao, como o kit desenha. */
.rvm-chat-group__linha {
display: flex;
align-items: flex-end;
gap: var(--rvm-space-12);
}
.rvm-chat-group__avatar { flex: none; }
.rvm-chat-group__baloes {
display: flex;
flex-direction: column;
gap: var(--rvm-space-8);
min-inline-size: 0;
/* Os 120 do kit: mensagem que atravessa a largura inteira fica ilegivel. */
max-inline-size: calc(100% - 120px);
}
/* O horario nasce alinhado com os baloes: 52 = o avatar de 40 mais o vao de 12. */
.rvm-chat-group__horario {
margin: 0;
color: var(--rvm-s-text-secondary);
font-size: var(--rvm-text-s-size);
line-height: var(--rvm-text-s-line-height);
}
.rvm-chat-group--esquerda .rvm-chat-group__horario { padding-inline-start: 52px; }
.rvm-chat-group--direita .rvm-chat-group__linha { flex-direction: row-reverse; }
.rvm-chat-group--direita .rvm-chat-group__baloes { align-items: flex-end; }
.rvm-chat-group--direita .rvm-chat-group__horario {
padding-inline-end: 52px;
text-align: end;
}
/* ─── Baloes ───────────────────────────────────────────────────────────────────────────────────
O raio e ASSIMETRICO e e o que da o rabinho: o canto de baixo do lado de quem escreveu fica reto.
A cor vem do lado, como no kit — nao ha parametro de cor. */
.rvm-chat-bubble {
display: flex;
align-items: center;
gap: var(--rvm-space-8);
padding: var(--rvm-space-12);
inline-size: fit-content;
max-inline-size: 100%;
}
.rvm-chat-bubble--esquerda {
border-radius: 12px 12px 12px 0;
background: var(--rvm-white);
color: var(--rvm-ink-500);
}
.rvm-chat-bubble--direita {
border-radius: 12px 12px 0 12px;
background: var(--rvm-accent-500);
color: var(--rvm-s-on-accent-500);
}
.rvm-chat-bubble--texto {
font-size: var(--rvm-text-m-size);
line-height: var(--rvm-text-m-line-height);
/* A mensagem quebra onde precisar: uma URL longa nao pode esticar o balao alem da conversa. */
overflow-wrap: anywhere;
}
/* ─── Balao de audio ─────────────────────────────────────────────────────────────────────────── */
.rvm-chat-bubble--voz { gap: var(--rvm-space-12); }
.rvm-chat-voz__botao { flex: none; }
.rvm-chat-voz__onda {
display: flex;
align-items: center;
gap: 6px;
block-size: 32px;
}
/* As barras que faltam ouvir ficam no degrau 300; as tocadas, na cor por cima do balao. */
.rvm-chat-voz__barra {
inline-size: 2px;
block-size: var(--rvm-chat-barra, 16px);
border-radius: 10px;
background: var(--rvm-accent-300);
flex: none;
}
.rvm-chat-bubble--esquerda .rvm-chat-voz__barra { background: var(--rvm-neutral-300); }
.rvm-chat-voz__barra--tocada { background: var(--rvm-s-on-accent-500); }
.rvm-chat-bubble--esquerda .rvm-chat-voz__barra--tocada { background: var(--rvm-accent-500); }
.rvm-chat-voz__duracao {
flex: none;
font-size: var(--rvm-text-s-size);
line-height: var(--rvm-text-s-line-height);
font-weight: var(--rvm-font-weight-medium);
color: var(--rvm-s-text-secondary);
}
.rvm-chat-bubble--direita .rvm-chat-voz__duracao,
.rvm-chat-bubble--direita .rvm-chat-arquivo__tamanho { color: var(--rvm-s-on-accent-muted); }
/* ─── Balao de arquivo ───────────────────────────────────────────────────────────────────────── */
.rvm-chat-bubble--arquivo { gap: var(--rvm-space-16); }
.rvm-chat-arquivo__texto {
display: flex;
flex-direction: column;
gap: 2px;
min-inline-size: 0;
}
.rvm-chat-arquivo__nome {
font-size: var(--rvm-text-m-size);
line-height: var(--rvm-text-m-line-height);
font-weight: var(--rvm-font-weight-semibold);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rvm-chat-arquivo__tamanho {
font-size: var(--rvm-text-s-size);
line-height: var(--rvm-text-s-line-height);
font-weight: var(--rvm-font-weight-medium);
color: var(--rvm-s-text-secondary);
}
/* ─── Contato na lista ─────────────────────────────────────────────────────────────────────────
264x76 por fora, miolo de 248x68 com raio 12, padding 14/12 e vao 12. */
.rvm-chat-contact {
display: block;
inline-size: 100%;
padding: var(--rvm-space-4) var(--rvm-space-8);
border: 0;
background: none;
cursor: pointer;
font-family: inherit;
text-align: start;
}
.rvm-chat-contact__miolo {
display: flex;
align-items: center;
gap: var(--rvm-space-12);
padding: var(--rvm-space-14) var(--rvm-space-12);
border-radius: 12px;
}
.rvm-chat-contact:hover .rvm-chat-contact__miolo { background: var(--rvm-neutral-50); }
.rvm-chat-contact--selecionado .rvm-chat-contact__miolo {
background: var(--rvm-accent-500);
color: var(--rvm-s-on-accent-500);
}
.rvm-chat-contact:focus-visible {
outline: 2px solid var(--rvm-accent-500);
outline-offset: -2px;
border-radius: 12px;
}
.rvm-chat-contact__avatar {
position: relative;
flex: none;
display: inline-flex;
}
/* A bolinha de online tem uma borda de 2 na cor do fundo, para nao encostar no retrato. */
.rvm-chat-contact__online {
position: absolute;
inset-block-end: 0;
inset-inline-end: 0;
inline-size: 10px;
block-size: 10px;
border-radius: 100px;
background: var(--rvm-success-500);
box-shadow: 0 0 0 2px var(--rvm-white);
}
.rvm-chat-contact--selecionado .rvm-chat-contact__online { box-shadow: 0 0 0 2px var(--rvm-accent-500); }
.rvm-chat-contact__texto {
display: flex;
flex-direction: column;
gap: 2px;
min-inline-size: 0;
flex: 1;
}
.rvm-chat-contact__nome,
.rvm-chat-contact__previa {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rvm-chat-contact__nome {
color: var(--rvm-ink-500);
font-size: var(--rvm-text-m-size);
line-height: var(--rvm-text-m-line-height);
font-weight: var(--rvm-font-weight-semibold);
}
.rvm-chat-contact__previa {
color: var(--rvm-s-text-secondary);
font-size: var(--rvm-text-s-size);
line-height: var(--rvm-text-s-line-height);
}
/* Selecionado, o miolo inteiro e o destaque: nome e previa herdam a cor por cima. */
.rvm-chat-contact--selecionado .rvm-chat-contact__nome,
.rvm-chat-contact--selecionado .rvm-chat-contact__previa,
.rvm-chat-contact--selecionado .rvm-chat-contact__horario { color: inherit; }
.rvm-chat-contact__horario,
.rvm-chat-contact__badge { flex: none; }
.rvm-chat-contact__horario {
color: var(--rvm-s-text-secondary);
font-size: var(--rvm-text-s-size);
line-height: var(--rvm-text-s-line-height);
}
/* ─── Quadro de tarefas (📋 Project, onda 6) ───────────────────────────────────────────────────
Medidas (project-project-details-tas-drag-drop-task.json): colunas de 266 com vao 16 entre elas
e entre os cartoes; titulo de 40 com vao 5; area de soltar 266x244 em Violet-50, com borda
Violet-500 TRACEJADA 6/6 e raio 16. */
.rvm-kanban {
display: flex;
align-items: flex-start;
gap: var(--rvm-space-16);
overflow-x: auto;
padding-block-end: var(--rvm-space-8);
}
.rvm-kanban__coluna {
display: flex;
flex-direction: column;
gap: var(--rvm-space-16);
inline-size: 266px;
flex: none;
border-radius: 16px;
}
/* A coluna sob o cursor se acende junto com a area de soltar: sem isso, quem arrasta com a mao
sobre o cartao nao ve onde vai cair. */
.rvm-kanban__coluna--alvo { outline: 2px dashed var(--rvm-accent-500); outline-offset: 8px; }
.rvm-kanban__titulo {
display: flex;
align-items: center;
justify-content: space-between;
gap: 5px;
block-size: 40px;
}
.rvm-kanban__nome {
margin: 0;
color: var(--rvm-ink-500);
font-size: var(--rvm-text-xl-size);
line-height: var(--rvm-text-xl-line-height);
font-weight: var(--rvm-font-weight-semibold);
}
.rvm-kanban__contagem {
color: var(--rvm-s-text-secondary);
font-weight: var(--rvm-font-weight-medium);
}
.rvm-kanban__cartoes {
display: flex;
flex-direction: column;
gap: var(--rvm-space-16);
margin: 0;
padding: 0;
list-style: none;
}
/* O cartao e a area de arrastar inteira. O menu de mover fica por cima, no canto. */
.rvm-kanban__cartao {
position: relative;
cursor: grab;
}
.rvm-kanban__cartao:active { cursor: grabbing; }
/* A area de soltar do kit: Violet-50 por dentro, e o tracejado 6/6 desenhado em SVG por cima — o
`dashed` do CSS deixaria o traco a cargo do navegador. A cor do traco vem do currentColor. */
.rvm-kanban__area {
display: block;
inline-size: 100%;
block-size: 244px;
border-radius: 16px;
background: var(--rvm-accent-50);
color: var(--rvm-accent-500);
}
@media (prefers-reduced-motion: reduce) {
.rvm-kanban__coluna--alvo { outline-style: solid; }
}
/* ─── Cartao de mapa (💠 Map, onda 6) ──────────────────────────────────────────────────────────
Medidas (purple-map.json): quadro raio 20 com borda Grey-100; cabecalho com padding 24 e vao 12;
o desenho tem 260 de altura sobre Grey-50; a lista vem abaixo com padding 24 e vao 20. */
.rvm-map {
display: flex;
flex-direction: column;
border: 1px solid var(--rvm-neutral-100);
border-radius: 20px;
background: var(--rvm-white);
overflow: hidden;
}
.rvm-map__cabecalho {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--rvm-space-12);
padding: var(--rvm-space-24);
}
.rvm-map__titulos {
display: flex;
flex-direction: column;
gap: var(--rvm-space-8);
min-inline-size: 0;
}
.rvm-map__acoes { flex: none; }
/* O desenho e os marcadores ficam empilhados na MESMA caixa: e o que faz a projecao valer, porque
os dois compartilham o sistema de coordenadas do viewBox. */
.rvm-map__desenho {
position: relative;
background: var(--rvm-neutral-50);
padding-block: var(--rvm-space-24);
}
.rvm-map__mundo,
.rvm-map__marcadores {
display: block;
inline-size: 100%;
block-size: auto;
/* A proporcao do desenho gerado do kit: 407 por 172. */
aspect-ratio: 407 / 172;
}
/* ⚠️ O desenho entra como MASCARA, e nao como imagem pintada. Um SVG carregado por ![]() e um
documento isolado: o `currentColor` dele nao enxerga o host e cai no preto — foi exatamente o que
a tela mostrou, um mapa-mundi todo preto. Como mascara, quem pinta e o `background`, e a cor
volta a sair do token, como manda o projeto. */
.rvm-map__mundo {
background: var(--rvm-neutral-300);
mask: url("mapa/mundo.svg") no-repeat center / contain;
-webkit-mask: url("mapa/mundo.svg") no-repeat center / contain;
}
.rvm-map__marcadores {
position: absolute;
inset-block-start: var(--rvm-space-24);
inset-inline: 0;
}
.rvm-map__ponto {
fill: var(--rvm-c-fill);
stroke: var(--rvm-white);
stroke-width: 1.5;
}
.rvm-map__lista { padding: 0 var(--rvm-space-24) var(--rvm-space-24); }
/* O aviso de marcador fora do desenho: o kit corta os extremos norte e sul, e sumir com o dado em
silencio faria o aplicativo achar que mostrou algo que nunca apareceu. */
.rvm-map__aviso {
margin: 0;
padding: 0 var(--rvm-space-24) var(--rvm-space-24);
color: var(--rvm-s-text-secondary);
font-size: var(--rvm-text-s-size);
line-height: var(--rvm-text-s-line-height);
}
|