/* * Folha de estilo própria do ContratoTec. * * A paleta institucional e o CSS crítico ficam inline nos layouts — a landing * precisa renderizar com identidade mesmo antes de qualquer CSS externo chegar * (LAND-21). Aqui vive apenas o que não é crítico para a primeira pintura. */ /* * Cores por ESCOPO de badge (backlog #49). * * O problema que resolvem: um badge escrito "CPF" no meio de uma minuta não * diz de quem é o CPF — da empresa, do cliente ou um campo do contrato. A cor * responde isso sem ocupar espaço no texto. * * ⚠️ Estas variáveis são a ÚNICA definição das cores no lado do servidor; o * `content_style` do editor (dentro do iframe do TinyMCE, que não enxerga esta * folha) repete os mesmos valores no `editor_modelo_controller.js`. Mexer aqui * sem mexer lá faz a paleta e o texto discordarem, que é exatamente o que este * item veio corrigir. */ :root { --ct-escopo-empresa: #1D6FB8; --ct-escopo-cliente: #0F766E; --ct-escopo-contrato: #B45309; --ct-escopo-orfao: #C53030; /* Escopo desconhecido: neutro. Melhor sem cor que com a cor errada. */ --ct-escopo-neutro: #6B7280; } /* Badges de shortcode dentro do editor e nas telas de contrato (AD-008). */ .badge-sc { background: var(--ct-escopo-neutro); color: #fff; border-radius: 4px; padding: 1px 6px; font-size: .9em; white-space: nowrap; cursor: default; } /* * A cor sai do PREFIXO do próprio `data-sc`, não de uma classe. * * Uma classe teria de ser gravada no HTML, sobreviver ao HTMLPurifier e ser * retroaplicada a todo modelo já existente. O seletor de atributo não tem * nenhum desses três problemas e funciona sobre o conteúdo que já está gravado. */ .badge-sc[data-sc^="empresa."] { background: var(--ct-escopo-empresa); } .badge-sc[data-sc^="cliente."] { background: var(--ct-escopo-cliente); } .badge-sc[data-sc^="contrato."] { background: var(--ct-escopo-contrato); } /* MOD-15: badge cujo shortcode não existe mais no catálogo. Depois das cores de escopo, para vencê-las: saber que o badge está quebrado importa mais do que saber de que escopo ele era. */ .badge-orfao, .badge-sc.badge-orfao[data-sc] { background: var(--ct-escopo-orfao); } /* --- Barra lateral de badges: o mesmo código de cor (backlog #49) --- */ /* Faixa lateral em vez de fundo cheio: a lista tem rótulo E descrição, e um fundo saturado atrás de duas linhas de texto pequeno arruína a leitura. */ .badge-item[data-escopo] { border-left-width: 4px !important; } .badge-item[data-escopo="empresa"] { border-left-color: var(--ct-escopo-empresa) !important; } .badge-item[data-escopo="cliente"] { border-left-color: var(--ct-escopo-cliente) !important; } .badge-item[data-escopo="contrato"] { border-left-color: var(--ct-escopo-contrato) !important; } .ct-ponto-escopo { display: inline-block; width: .6rem; height: .6rem; border-radius: 2px; margin-right: .25rem; vertical-align: baseline; background: var(--ct-escopo-neutro); } .ct-ponto-escopo[data-escopo="empresa"] { background: var(--ct-escopo-empresa); } .ct-ponto-escopo[data-escopo="cliente"] { background: var(--ct-escopo-cliente); } .ct-ponto-escopo[data-escopo="contrato"] { background: var(--ct-escopo-contrato); } /* --- Caixa de descrição do badge, sobre o editor (backlog #49) --- Vive no e não dentro do iframe do TinyMCE: lá dentro ela seria recortada pela borda da área de texto justamente nos badges perto do rodapé, que são os que mais precisam de explicação. Ver `editor_modelo_controller.js::instalarDescricaoNoIframe`. */ .ct-desc-badge { position: fixed; z-index: 1080; /* acima da barra fixa do TinyMCE */ display: none; max-width: 22rem; padding: .5rem .65rem; border-radius: .35rem; background: #1B1F24; color: #F1F3F5; font-size: .8rem; line-height: 1.35; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .25); pointer-events: none; /* nunca rouba o rato de quem está a escrever */ } .ct-desc-badge .ct-desc-chave { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; color: #9CA3AF; margin-top: .1rem; } .ct-desc-badge .ct-desc-texto { margin-top: .3rem; color: #D1D5DB; } .ct-desc-badge.ct-desc-orfao { background: #7F1D1D; }