/* Vallis · Notas — folha única. Tudo aqui usa os tokens do :root. Nada de style="" no markup nem .style.cssText no JS: o app tem uma superfície só, e ela mora neste arquivo. Mesma família visual do vallis-expenses (mesmos cinzas, mesmos raios, mesma escala de espaçamento), com uma diferença de propósito: lá a cor carrega significado (débito × crédito); aqui não há polaridade nenhuma para representar, então existe um acento só, e ele serve para dizer "é aqui que você está" — nota selecionada, foco, botão principal. */ :root { color-scheme: light dark; --paper: #EFF2F5; --surface: #FFFFFF; --sunken: #F6F8FA; --ink: #16202B; --ink-2: #55677A; --ink-3: #8496A6; --rule: #D8DFE6; --rule-2: #E8EDF1; --acento: #1071A8; --acento-bg: #E8F1F8; --perigo: #B0432B; --perigo-bg: #FBEDE9; /* Realce da busca: âmbar, que não colide com o acento (que significa "selecionado") nem com o perigo (que significa "isto apaga"). */ --marca: #F5D98B; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --r-1: 6px; --r-2: 10px; --r-3: 16px; --dur: 140ms; --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --topo: 52px; --lateral: 300px; } /* Sem escolha explícita, segue o sistema. Assim que alguém escolhe um tema, `data-tema` entra no e ganha por especificidade — inclusive para pedir o tema claro tendo o sistema no escuro. */ @media (prefers-color-scheme: dark) { :root:not([data-tema]) { --paper: #10161C; --surface: #141A21; --sunken: #1A2128; --ink: #E4EAF0; --ink-2: #9AAABA; --ink-3: #6B7E8F; --rule: #253039; --rule-2: #1E262E; --acento: #3E93D0; --acento-bg: #14232F; --perigo: #CF6247; --perigo-bg: #2A1B16; --marca: #6A5524; } } /* Cada tema redefine o conjunto INTEIRO de tokens — nada de herdar metade do outro, que é como se acaba com texto ilegível em um deles. */ :root[data-tema="claro"] { --paper: #EFF2F5; --surface: #FFFFFF; --sunken: #F6F8FA; --ink: #16202B; --ink-2: #55677A; --ink-3: #8496A6; --rule: #D8DFE6; --rule-2: #E8EDF1; --acento: #1071A8; --acento-bg: #E8F1F8; --perigo: #B0432B; --perigo-bg: #FBEDE9; --marca: #F5D98B; } :root[data-tema="escuro"] { --paper: #10161C; --surface: #141A21; --sunken: #1A2128; --ink: #E4EAF0; --ink-2: #9AAABA; --ink-3: #6B7E8F; --rule: #253039; --rule-2: #1E262E; --acento: #3E93D0; --acento-bg: #14232F; --perigo: #CF6247; --perigo-bg: #2A1B16; --marca: #6A5524; } /* O tema escolhido precisa fixar o color-scheme, senão a barra de rolagem e os controles nativos saem no esquema do SISTEMA — barra branca no meio do tema escuro, e vice-versa. */ :root[data-tema="escuro"] { color-scheme: dark; } :root[data-tema="claro"] { color-scheme: light; } * { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; height: 100%; } body { font-family: var(--sans); background: var(--paper); color: var(--ink); height: 100dvh; overflow: hidden; /* quem rola é a lista e o editor, nunca a página */ font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } :focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: var(--r-1); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } [hidden] { display: none !important; } /* ─── Botões ──────────────────────────────────────────────────────────── */ button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } .btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--rule); border-radius: var(--r-1); background: var(--surface); color: var(--ink-2); font-size: 13px; font-weight: 500; white-space: nowrap; transition: background var(--dur), color var(--dur), border-color var(--dur); } .btn:hover { background: var(--sunken); color: var(--ink); } .btn--principal { background: var(--acento); border-color: var(--acento); color: #fff; } .btn--principal:hover { background: var(--acento); color: #fff; filter: brightness(1.08); } .btn--fantasma { border-color: transparent; background: none; } .btn--fantasma:hover { background: var(--sunken); } .btn--perigo:hover { background: var(--perigo-bg); color: var(--perigo); border-color: var(--perigo); } .btn--icone { padding: var(--sp-2); } .btn[aria-pressed="true"] { background: var(--acento-bg); color: var(--acento); border-color: var(--acento); } .icone { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } /* ─── Entrada ─────────────────────────────────────────────────────────── */ .tela-login { height: 100dvh; display: grid; place-items: center; padding: var(--sp-4); background: var(--paper); } .cartao-login { width: min(400px, 100%); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-3); padding: var(--sp-6); text-align: center; } .cartao-login h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; } .cartao-login p { color: var(--ink-2); font-size: 14px; margin-top: var(--sp-2); } .cartao-login .marca-vallis { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; } .caixa-google { display: grid; place-items: center; margin-top: var(--sp-5); min-height: 44px; } .aviso-dominio { margin-top: var(--sp-4); font-size: 12.5px; color: var(--ink-3); } .erro-login { margin-top: var(--sp-4); padding: var(--sp-3); border-radius: var(--r-1); background: var(--perigo-bg); color: var(--perigo); font-size: 13px; text-align: left; } /* ─── Estrutura ───────────────────────────────────────────────────────── */ .app { display: grid; grid-template-rows: var(--topo) 1fr; height: 100dvh; } .topo { display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-4); /* Opaca, nunca translúcida: com backdrop-filter o texto do editor passa por baixo e aparece borrado ao rolar — lê-se como "a tela ficou coberta". */ background: var(--surface); border-bottom: 1px solid var(--rule); z-index: 3; } .topo__marca { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink); white-space: nowrap; } .topo__marca span { color: var(--ink-3); font-weight: 500; } .topo__espaco { flex: 1; } .corpo { display: grid; grid-template-columns: var(--lateral) 1fr; min-height: 0; } /* ─── Barra lateral ───────────────────────────────────────────────────── */ .lateral { display: grid; grid-template-rows: auto auto 1fr; min-height: 0; background: var(--surface); border-right: 1px solid var(--rule); } .lateral__acoes { padding: var(--sp-3); padding-bottom: var(--sp-2); } .lateral__acoes .btn { width: 100%; justify-content: center; } .busca { position: relative; padding: 0 var(--sp-3) var(--sp-3); } .busca__campo { width: 100%; font: inherit; font-size: 13.5px; color: var(--ink); padding: var(--sp-2) var(--sp-3) var(--sp-2) 30px; background: var(--sunken); border: 1px solid var(--rule-2); border-radius: var(--r-1); } .busca__campo::placeholder { color: var(--ink-3); } .busca__lupa { position: absolute; left: calc(var(--sp-3) + 8px); top: 50%; transform: translateY(-50%); margin-top: -6px; color: var(--ink-3); pointer-events: none; } .lista { overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--sp-2) var(--sp-4); min-height: 0; } .nota-item { display: block; width: 100%; text-align: left; padding: var(--sp-3); border-radius: var(--r-2); border: 1px solid transparent; transition: background var(--dur); } .nota-item:hover { background: var(--sunken); } .nota-item[aria-current="true"] { background: var(--acento-bg); border-color: color-mix(in srgb, var(--acento) 28%, transparent); } .nota-item__topo { display: flex; align-items: baseline; gap: var(--sp-2); } .nota-item__titulo { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nota-item[data-vazia="true"] .nota-item__titulo { color: var(--ink-3); font-style: italic; font-weight: 400; } .nota-item__quando { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; } .nota-item__resumo { margin-top: 2px; font-size: 12.5px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nota-item__alfinete { color: var(--acento); } /* O trecho encontrado, destacado na lista: numa busca por conteúdo, ver ONDE bateu é o que distingue a nota certa das outras quatro que citam a palavra. */ .nota-item__trecho { margin-top: var(--sp-1); font-size: 12px; color: var(--ink-2); font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } mark { background: var(--marca); color: var(--ink); border-radius: 2px; padding: 0 2px; } .vazio { padding: var(--sp-6) var(--sp-4); text-align: center; color: var(--ink-3); font-size: 13px; } /* ─── Editor ──────────────────────────────────────────────────────────── */ .editor { display: grid; grid-template-rows: auto 1fr auto; min-height: 0; min-width: 0; background: var(--paper); } .editor__barra { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--rule); background: var(--surface); } .editor__espaco { flex: 1; } .estado { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; } .estado[data-estado="salvando"] { color: var(--acento); } .estado[data-estado="erro"] { color: var(--perigo); font-weight: 500; } .editor__area { width: 100%; height: 100%; resize: none; border: none; outline: none; background: var(--paper); color: var(--ink); padding: var(--sp-5) var(--sp-5) var(--sp-7); font-family: var(--mono); font-size: 14px; line-height: 1.7; tab-size: 2; } /* Alternável para texto corrido. Mono é o padrão porque o uso principal é colar — log, JSON, id, tabela — e ali a largura fixa de dígito preserva o alinhamento que veio junto. Para prosa, ela atrapalha, daí o botão. */ .editor__area[data-fonte="sans"] { font-family: var(--sans); font-size: 15.5px; } .editor__area::placeholder { color: var(--ink-3); } .editor__rodape { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-2) var(--sp-4); border-top: 1px solid var(--rule-2); background: var(--surface); font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; } .editor__rodape .aviso-limite { color: var(--perigo); font-weight: 500; } .sem-nota { display: grid; place-items: center; text-align: center; padding: var(--sp-6); color: var(--ink-3); grid-row: 1 / -1; } .sem-nota h2 { font-size: 16px; font-weight: 500; color: var(--ink-2); margin-bottom: var(--sp-2); } .sem-nota kbd { font-family: var(--mono); font-size: 11.5px; border: 1px solid var(--rule); border-radius: var(--r-1); padding: 1px 5px; background: var(--surface); color: var(--ink-2); } /* ─── Menu ────────────────────────────────────────────────────────────── */ .menu { position: relative; } .menu__painel { position: absolute; right: 0; top: calc(100% + var(--sp-2)); min-width: 210px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-2); box-shadow: 0 8px 24px rgb(0 0 0 / 0.14); padding: var(--sp-2); z-index: 10; } .menu__quem { padding: var(--sp-2) var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--rule-2); margin-bottom: var(--sp-2); } .menu__nome { font-size: 13.5px; font-weight: 500; } .menu__email { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; } .menu__rotulo { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); padding: var(--sp-2) var(--sp-3) var(--sp-1); } .menu__item { display: flex; align-items: center; gap: var(--sp-2); width: 100%; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-1); font-size: 13.5px; text-align: left; color: var(--ink-2); } .menu__item:hover { background: var(--sunken); color: var(--ink); } .menu__item[aria-checked="true"] { color: var(--acento); font-weight: 500; } .menu__item[aria-checked="true"]::after { content: "✓"; margin-left: auto; } .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--acento-bg); color: var(--acento); display: grid; place-items: center; font-size: 12px; font-weight: 600; border: 1px solid var(--rule); } .avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } /* ─── Aviso momentâneo ────────────────────────────────────────────────── */ .aviso { position: fixed; left: 50%; bottom: var(--sp-5); transform: translateX(-50%); background: var(--ink); color: var(--paper); padding: var(--sp-2) var(--sp-4); border-radius: var(--r-3); font-size: 13px; z-index: 20; box-shadow: 0 6px 20px rgb(0 0 0 / 0.2); } .aviso[data-tom="erro"] { background: var(--perigo); color: #fff; } /* ─── Telas estreitas ─────────────────────────────────────────────────── */ /* Num celular não cabem lista e editor lado a lado, e espremer as duas dá uma lista onde não se lê o título e um editor onde não se escreve. Então é uma de cada vez: a lista é a tela inicial e abrir uma nota cobre a tela, com "voltar" na barra. */ @media (max-width: 720px) { .corpo { grid-template-columns: 1fr; } .lateral { border-right: none; } .editor__area { padding: var(--sp-4) var(--sp-4) var(--sp-7); } .app[data-vista="editor"] .lateral { display: none; } .app[data-vista="lista"] .editor { display: none; } .app[data-vista="lista"] .btn-voltar { display: none; } } @media (min-width: 721px) { .btn-voltar { display: none; } }