/* ============================================================ ORGANIZACHATS - Tema claro/escuro v1 Local: public/assets/css/tema.css Como funciona: - As páginas usam variáveis (--oc-*) no lugar das cores fixas (a troca foi feita pelo script ferramentas/aplicar_tema.php) - :root → tema ESCURO (padrão) = exatamente as cores antigas - [data-tema=claro] → tema CLARO - O atributo data-tema é colocado no pelo tema.js ============================================================ */ /* ------------------------------------------------------------ TEMA ESCURO (padrão) — valores idênticos aos originais ------------------------------------------------------------ */ :root { color-scheme: dark; /* campos de data, scrollbar e selects nativos escuros */ /* Overlay branco usado em bordas/hover sutis: rgba(var(--oc-ov), 0.06) */ --oc-ov: 255, 255, 255; /* Fundos */ --oc-bg0: #0a0f1a; /* fundo mais profundo */ --oc-bg1: #0f172a; /* fundo da página */ --oc-bg1b: #111827; /* fundo alternativo */ --oc-bg2: #1e293b; /* cartões, painéis */ --oc-bg3: #334155; /* campos, itens elevados */ --oc-bg4: #475569; /* hover forte */ /* Bordas */ --oc-bd0: #0f172a; --oc-bd1: #1e293b; --oc-bd2: #334155; --oc-bd3: #475569; --oc-bd4: #64748b; /* Textos */ --oc-tx0: #ffffff; /* títulos / texto forte */ --oc-tx1: #f1f5f9; /* texto principal */ --oc-tx1b: #e2e8f0; --oc-tx2: #cbd5e1; --oc-tx3: #94a3b8; /* texto secundário */ --oc-tx4: #64748b; /* texto apagado */ --oc-tx5: #475569; /* texto bem apagado */ /* Textos de status (claros, feitos para fundo escuro) */ --oc-txr: #fca5a5; /* vermelho */ --oc-txg: #86efac; /* verde */ --oc-txy: #fde047; /* amarelo */ --oc-txb: #93c5fd; /* azul */ --oc-txb2: #60a5fa; /* azul forte */ --oc-txi: #a5b4fc; /* índigo */ --oc-txa: #f59e0b; /* âmbar */ /* Verde da marca usado como TEXTO */ --oc-txbrand: #25d366; --oc-txbrand2: #128c7e; } /* ------------------------------------------------------------ TEMA CLARO ------------------------------------------------------------ */ :root[data-tema="claro"] { color-scheme: light; --oc-ov: 15, 23, 42; /* overlay vira escuro sobre fundo claro */ /* Fundos */ --oc-bg0: #eef2f7; --oc-bg1: #f8fafc; --oc-bg1b: #f8fafc; --oc-bg2: #ffffff; --oc-bg3: #e2e8f0; --oc-bg4: #cbd5e1; /* Bordas */ --oc-bd0: #e2e8f0; --oc-bd1: #e2e8f0; --oc-bd2: #cbd5e1; --oc-bd3: #94a3b8; --oc-bd4: #94a3b8; /* Textos */ --oc-tx0: #0f172a; --oc-tx1: #0f172a; --oc-tx1b: #1e293b; --oc-tx2: #334155; --oc-tx3: #475569; --oc-tx4: #64748b; --oc-tx5: #94a3b8; /* Textos de status (escurecidos para ter contraste no branco) */ --oc-txr: #b91c1c; --oc-txg: #15803d; --oc-txy: #a16207; --oc-txb: #1d4ed8; --oc-txb2: #2563eb; --oc-txi: #4338ca; --oc-txa: #b45309; /* Verde da marca como texto: o #25d366 some no branco, usa o tom escuro */ --oc-txbrand: #128c7e; --oc-txbrand2: #0f766e; } /* ------------------------------------------------------------ BOTÃO ALTERNADOR (criado pelo tema.js em todas as páginas) ------------------------------------------------------------ */ .oc-tema-btn { position: fixed; right: 16px; bottom: 16px; z-index: 99999; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(var(--oc-ov), 0.12); background: var(--oc-bg2); color: var(--oc-tx1); font-size: 19px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); transition: transform 0.15s ease, background 0.2s ease; } .oc-tema-btn:hover { transform: scale(1.08); } .oc-tema-btn:focus-visible { outline: 2px solid #25d366; outline-offset: 2px; } /* No Inbox o rodapé tem a caixa de mensagem → botão vai para o topo */ .oc-tema-btn.oc-tema-topo { top: 12px; bottom: auto; } /* Transição suave só no momento da troca (a classe dura 300ms) */ html.oc-tema-trocando, html.oc-tema-trocando * { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease !important; }