/* Design system for the app shell — ported from the Sistema.dc.html design doc. The slide artwork under templates/slides/ has its own styling and is not affected by anything here: that CSS ends up inside the exported PNG. */ /* ---------- Tipografia ---------- Seis tamanhos, três pesos, duas entrelinhas -- nada escrito à mão. 12 xs rótulo, legenda, selo, cabeçalho de tabela 13 sm texto secundário, ajuda, botão pequeno 14 md texto base, campo, linha de tabela, botão 16 lg título de cartão 20 xl título de página 28 2xl número grande, título de tela de entrada Peso: 400 texto, 600 realce (nome, rótulo, botão), 700 título. Entrelinha: justa (títulos, uma linha) e normal (parágrafo). */ :root { --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 28px; --lh-tight: 1.25; --lh-base: 1.5; } /* ---------- Espaço, raio e sombra ---------- Espaço (gap, padding, margin) em seis passos, o número é o px: 4 entre ícone e texto, 8 entre itens juntos, 12 dentro de um controle, 16 entre blocos e dentro de cartão, 24 entre seções, 32 em volta de uma tela. Raio: 6 (selo), 8 (controle pequeno, chip), 12 (cartão, campo, botão, modal) e o redondo. Sombra: leve (cartão no hover, botão) e flutuante (menu, aviso, modal); --ring marca o que está escolhido. */ :root { --s-4: 4px; --s-8: 8px; --s-12: 12px; --s-16: 16px; --s-24: 24px; --s-32: 32px; --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-full: 999px; --shadow-sm: 0 6px 20px -12px rgba(14, 14, 17, .25); --shadow-lg: 0 24px 60px -12px rgba(14, 14, 17, .3); --ring: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); } [data-theme="dark"] { --shadow-sm: 0 6px 20px -12px rgba(0, 0, 0, .6); --shadow-lg: 0 24px 60px -12px rgba(0, 0, 0, .7); } /* ---------- Cores ---------- A paleta inteira: neutros (texto, fundo, linha), a marca e quatro estados. Cada cor de estado vem em trio -- a cor, -ink (texto sobre o -wash, mais escuro para ler bem) e -wash (fundo clarinho) -- e é só disso que selos, alertas e chips são feitos. Canais (--ch-*) são as únicas outras cores, e só para o logo de cada um. Cor nova? Primeiro veja se uma destas serve. */ :root { /* Texto: principal, secundário e apagado. */ --ink: #0E0E11; --muted: #6B6B7B; --faint: #A5A5B3; /* Fundos: página, cartões e campos, e o cinza das áreas recuadas. */ --bg: #F7F7FA; --surface: #FBFBFD; --canvas: #EFEFF4; /* Linhas: toda borda e divisória; a forte para hover e destaque. */ --line: #DEDEE6; --line-strong: #C2C2CE; /* "Botão preto": preto no claro, branco no escuro (trocam de lugar). */ --ink-invert: #0E0E11; --ink-invert-fg: #fff; /* Laranja Lobot. The logo's own orange is #F24B1F; the UI one is a shade deeper so white text on it (buttons) and it as text on the page both pass 4.5:1. */ --brand: #D03D17; --brand-ink: #A8300C; --brand-wash: #FDF0EB; /* Estados. info é neutro de propósito: aviso que não pede ação não precisa de mais uma cor na tela. */ --ok: #16A34A; --ok-ink: #116B36; --ok-wash: #E9F8EF; --warn: #B4650E; --warn-ink: #8A4D06; --warn-wash: #FEF3E7; --danger: #DC2626; --danger-ink: #991B1B; --danger-wash: #FDECEC; --info: #52525E; --info-ink: #0E0E11; --info-wash: #F0F0F5; /* Destaque: menção (@você) e IA. */ --pink: #E8318A; --pink-wash: #FDECF4; /* Canais: a cor do logo de cada um (o WhatsApp oficial usa a mesma do WhatsApp -- o ícone é que os diferencia). */ --ch-whatsapp: #128C4A; --ch-whatsapp-wash: #E4F6EA; --ch-telegram: #1786BC; --ch-telegram-wash: #E5F3FB; --ch-instagram: #D62976; --ch-instagram-wash: #FCE7F0; --ig-gradient: linear-gradient(93deg, #F0913B, #E8318A 48%, #7B3FE4); } /* Tema escuro -- pedido ao vivo, toggle no menu de conta (accountMenu, layout.templ) em cima de "Sair". [data-theme=dark] fica no (ver themeToggleScript/ShellCustomTopbar), mesmo seletor que o próprio Tucano já usa (tucano.min.css já tem [data-theme=dark] pronto) -- então os dois viram juntos com UM atributo só. Tudo aqui é a versão escura do mesmo token do :root -- --ink-invert/-fg literalmente TROCAM de lugar (ver o comentário deles acima), o resto só ajusta o tom. */ [data-theme="dark"] { --ink: #F2F2F5; --muted: #9494A3; --faint: #6C6C78; --bg: #101014; --surface: #1A1A20; --canvas: #16161B; --line: #2F2F39; --line-strong: #45454F; --ink-invert: #FFFFFF; --ink-invert-fg: #0E0E11; --brand: #F05A2E; --brand-ink: #FF9A78; --brand-wash: #331A12; --ok: #4ADE80; --ok-ink: #7BE8A4; --ok-wash: #123420; --warn: #FBBF24; --warn-ink: #FCD34D; --warn-wash: #3A2A0E; --danger: #F87171; --danger-ink: #FCA5A5; --danger-wash: #3A1616; --info: #A1A1AE; --info-ink: #F2F2F5; --info-wash: #232329; --pink: #F472B6; --pink-wash: #3A1830; --ch-whatsapp: #34D399; --ch-whatsapp-wash: #10301F; --ch-telegram: #5AC0EE; --ch-telegram-wash: #16303D; --ch-instagram: #F472B6; --ch-instagram-wash: #3A1830; } /* Punhado de cores soltas (não passam por um token do :root) comuns o bastante pra valer a pena uma versão escura própria -- o resto de cor solta que sobrar (~20 casos raros, tipo um gradiente específico) fica pra um ajuste fino depois, se aparecer torto na prática. */ /* color-scheme diz pro navegador usar widgets nativos escuros (scrollbar, stays the source of truth. */ .cp { position: fixed; z-index: 200; width: 236px; display: flex; flex-direction: column; gap: var(--s-12); padding: var(--s-12); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg); } .cp[hidden] { display: none; } .cp-presets { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-8); } /* ---------- Narrow screens ---------- The design is drawn at 1440x900. Below that the shell keeps working: the sidebar collapses to icons and the widest grids drop to fewer columns. */ @media (max-width: 1080px) { .split { grid-template-columns: 1fr !important; } } @media (max-width: 860px) { /* Off-canvas: escondido fora da tela à esquerda por padrão, desliza por cima do conteúdo quando .is-open (sidebar-toggle-btn, layout.templ) -- pedido explícito do usuário ("faz ele como o off-canvas", com um ícone de menu do lado oposto ao avatar da conta). position:fixed tira o sidebar do fluxo do .shell (flex), então .main já ocupa a largura toda sozinho sem precisar de nenhum ajuste nele -- e como é um overlay com espaço de sobra, mostra os rótulos por extenso de novo em vez do rail só-ícone que tinha antes aqui. */ .sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: 264px; z-index: 200; transform: translateX(-100%); transition: transform .22s cubic-bezier(.16, 1, .3, 1); box-shadow: 0 0 0 1px var(--line); } .sidebar.is-open { transform: translateX(0); } .sidebar-toggle-btn { display: inline-flex; } .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 190; background: rgba(14, 14, 17, .4); opacity: 0; pointer-events: none; transition: opacity .22s ease; } .sidebar-backdrop.is-open { opacity: 1; pointer-events: auto; } .topbar { padding: 0 var(--s-16); } .content { padding: var(--s-16) var(--s-16); } } /* Celular de verdade (~360-430px), não só "janela estreita": o rail de 72px do sidebar já sobra pouco espaço pro conteúdo (~280-320px numa tela de 390px). .flow-grid/.conn-grid/.channel-grid (flows.css) têm o mesmo problema e a mesma solução, mas moram lá -- juntar as duas media queries aqui não funcionaria: flows.css carrega DEPOIS deste arquivo (seu fica dentro do
, não no ), então uma regra daqui perderia pra base delas por ordem, não por especificidade (achei isso ao vivo). */ @media (max-width: 640px) { /* Hambúrguer + título + avatar da conta ficam numa linha só (o spacer do título, flex:1, sozinho já empurra o avatar pra ponta -- não precisa de justify-content pra isso). O botão "Novo X" (flows/boards/campaigns/ templates -- sempre filho direto de .topbar, do lado do spacer) ganha sua PRÓPRIA linha cheia embaixo dessa -- pedido ao vivo com print, comparando com o corte que tinha antes ("Novo fluxo" saindo da tela). order:10 tira ele do fluxo natural do DOM (ele vem ANTES do avatar no HTML) pra ele sempre desenhar depois do resto da primeira linha, e flex-basis:100% obriga a própria linha por ocupar 100% da largura sozinho -- ninguém mais cabe do lado de um item que pede 100%. */ .topbar { height: auto; min-height: 72px; flex-wrap: wrap; row-gap: var(--s-8); padding: var(--s-16) var(--s-16); } /* .is-dark aqui de propósito, não .tuc-btn sozinho -- o editor de fluxo (flowsEditorTopbar) também põe vários tuc-btn direto no topbar (Editar fluxo/Ver execuções/Excluir/Publicar, todos is-outline ou is-danger/is-ok, nenhum is-dark) e essa regra pegava eles também, empilhando cada um numa linha cheia própria (achei ao vivo testando o editor -- só o botão "Novo X" das listas é is-dark, então isso já basta pra separar os dois casos). O tamanho padrão do Tucano (~46px, 1rem) pesa muito esticado 100% da largura -- lado a lado com o resto da tela (cards com título de 15px, tipo "Trabalhos") ele lia grande demais (pedido ao vivo, comparando print). Mesma altura do is-md (a variante própria do app pra isso, ver "Tucano button size: md" mais abaixo) e fonte reduzida pra 15px, igualando o peso visual do resto da tela em vez do 1rem base. */ .topbar > .tuc-btn.is-dark { order: 10; flex-basis: 100%; width: 100%; justify-content: center; height: 2.5rem; font-size: var(--fs-lg); } } /* ---------- Auth (login) split-screen -- ported from publicapost's account/base.html inline styles ---------- */ body { margin: 0; } /* Fixed to the viewport, not min-height: each column scrolls on its own when its content is taller than the screen, instead of the whole page scrolling and dragging the decorative right panel along with it. */ .auth-shell { display: grid; grid-template-columns: 1fr 1fr; height: 100vh; background: var(--surface); } /* One centered block, not three independently-positioned pieces: the logo, the form and the legal footer all live inside .auth-inner and share its width, so they share its edges too. .auth-left just centers that block, both axes — on both a tall screen and a very wide one, it reads as one composed unit instead of bits pinned to different edges. */ .auth-left { height: 100%; overflow-y: auto; display: flex; align-items: center; justify-content: center; padding: 48px var(--s-24); } /* The "transition between screens": since these are full page loads, not an SPA, this plays on every load instead — only on the inputs side, never on the decorative right panel. */ @keyframes authSlideUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } .auth-inner { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: var(--s-32); animation: authSlideUp .5s cubic-bezier(.16, 1, .3, 1); } .auth-brand { display: flex; align-items: center; gap: var(--s-8); color: var(--ink); } .auth-brand .brand-logo { height: 28px; } .auth-form-wrap { display: flex; flex-direction: column; gap: var(--s-32); } .auth-form-wrap h1 { margin: 0; font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -.035em; color: var(--ink); line-height: 1.1; } .auth-form-wrap .sub { margin: 0; font-size: var(--fs-lg); color: var(--muted); line-height: var(--lh-base); } {{/* These used to be bare `form`/`form button[type=submit]` selectors with no scope at all -- copied from a Django/allauth project (see the comments below) where the only forms on the page happened to be auth forms, so it never mattered there. In this app EVERY page's forms matched them too: found live when the flow editor's Publicar/Pausar button (a