/* ===================================================== */ /* TEMA DS5 CASHBACK */ /* Variáveis de cor, sombra e raio usadas por todas as */ /* telas. Troque aqui, não em cada componente. */ /* Os valores do tema escuro ficam em */ /* Views/Shared/_TemaEscuro.cshtml (CSS inline no )*/ /* ===================================================== */ :root { /* Superfícies */ --ds5-pagina: #fff; --ds5-superficie: #fff; --ds5-fundo-suave: #f9fafb; --ds5-rodape: #f8fafc; --ds5-campo-fundo: #fff; --ds5-fundo-login: #f8f9fa; /* Texto */ --ds5-texto: #111827; --ds5-texto-2: #4b5563; --ds5-texto-3: #6b7280; --ds5-rotulo: #5b6478; --ds5-icone-apagado: #c3c7cf; /* Linhas */ --ds5-borda: #e5e7eb; --ds5-grade: #eef0f3; /* Marca: marinho da sidebar, azul das ações e verde do logo (só onde tem significado). */ --ds5-marinho: #10182e; --ds5-escuro: #10182e; --ds5-marinho-texto: #10182e; --ds5-marinho-suave: #f3f5fa; --ds5-marinho-linha: #e3e7f0; --ds5-ativo-fundo: #10182e; --ds5-ativo-texto: #fff; --ds5-azul: #0d6efd; --ds5-azul-hover: #0b5ed7; --ds5-azul-texto: #175cd3; --ds5-azul-borda: rgba(13, 110, 253, .45); --ds5-azul-suave: #f0f6ff; --ds5-azul-foco: rgba(13, 110, 253, .18); --ds5-verde: #28a850; --ds5-verde-texto: #067647; --ds5-verde-suave: #effaf2; --ds5-laranja-texto: #b4461b; /* Estados (texto / fundo) */ --ds5-ok: #067647; --ds5-ok-fundo: #ecfdf3; --ds5-alerta: #b54708; --ds5-alerta-fundo: #fffaeb; --ds5-perigo: #b42318; --ds5-perigo-fundo: #fef3f2; --ds5-info: #175cd3; --ds5-info-fundo: #eff8ff; --ds5-roxo: #5925dc; --ds5-roxo-fundo: #f4f3ff; --ds5-neutro: #475467; --ds5-neutro-fundo: #f2f4f7; --ds5-aviso-borda: #fedf89; --ds5-aviso-texto: #7a2e0e; --ds5-perigo-borda: #fda29b; --ds5-perigo-texto: #7a271a; /* Campos */ --campo-borda: #d0d5dd; --campo-borda-hover: #aab2c0; --campo-sombra: 0 1px 2px rgba(16, 24, 40, .05); --campo-placeholder: #98a2b3; --campo-desabilitado: #f2f4f7; --campo-complemento: #f9fafb; --campo-interruptor: #c3c9d4; --campo-erro: #d92d20; --campo-erro-anel: rgba(217, 45, 32, .14); /* Botões de ação das listagens (borda contornada / cor cheia no hover) */ --acao-borda-azul: #b2ccff; --acao-borda-ambar: #fcd58a; --acao-borda-vermelho: #fda29b; --acao-borda-verde: #a6e3b9; --acao-borda-marinho: #c5cde0; --acao-ambar: #dc8a06; --acao-vermelho: #d92d20; --acao-verde: #079455; /* Gráficos (lidos também pelo js/home/dashboard.js) */ --graf-gerado: #2a78d6; --graf-resgatado: #eb6834; --graf-grade: #eef0f3; --graf-eixo: #d1d5db; --graf-texto: #6b7280; --graf-cursor: #c3c7cf; --graf-ponto-borda: #fff; --graf-tooltip: #10182e; --graf-tooltip-texto: #fff; --graf-tooltip-borda: #10182e; --graf-trilho: #eef3fb; /* Ícones dos indicadores */ --kpi-gerado-fundo: #e8f1fc; --kpi-gerado: #1c5cab; --kpi-resgatado-fundo: #fdefe8; --kpi-resgatado: #b4461b; --kpi-taxa-fundo: #eef0f3; --kpi-taxa: #10182e; --kpi-saldo-fundo: #e7f6ee; --kpi-saldo: #067647; /* Sidebar e topo */ --sidebar-fundo: linear-gradient(180deg, #10182e 0%, #0b1020 35%, #06080f 100%); --sidebar-borda: transparent; --nav-texto: #fff; --nav-hover: #0d6efd; --nav-hover-texto: #fff; --nav-ativo-fundo: #0d6efd; --nav-ativo-texto: #fff; --nav-ativo-anel: transparent; --nav-saldo-fundo: rgba(25, 135, 84, .25); --nav-saldo-texto: #fff; --topo-fundo: #fff; --topo-filtro: none; --topo-hover: #f1f3f5; /* Acabamento (no claro ficam neutros; o escuro liga luz, vidro e brilho) */ --realce: 0 0 #0000; --etiqueta-anel: 0%; --foco-brilho: 0 0 #0000; --erro-brilho: 0 0 #0000; --btn-primario-sombra: 0 0 #0000; --btn-primario-sombra-hover: 0 0 #0000; --vidro-fundo: #fff; --vidro-filtro: none; --overlay: rgba(255, 255, 255, .86); --overlay-suave: rgba(255, 255, 255, .7); --overlay-filtro: none; --rodape-fixo: rgba(248, 250, 252, .96); --barra-pendente: #0f172a; --barra-pendente-borda: transparent; /* Prévia de mensagens (visual do WhatsApp) */ --wa-fundo: #efeae2; --wa-pontos: rgba(0, 0, 0, .035); --wa-borda: #d1d7db; --wa-topo: #008069; --wa-marca: #008069; --wa-marca-fundo: rgba(0, 128, 105, .1); --wa-balao: #fff; --wa-balao-texto: #111b21; --wa-hora: #667781; --wa-separador-texto: #54656f; --wa-sombra: rgba(11, 20, 26, .13); --wa-aviso: #fff3cd; --wa-aviso-texto: #664d03; --wa-destaque: rgba(0, 128, 105, .09); --wa-codigo: rgba(15, 23, 42, .07); --wa-citacao: #94a3b8; --wa-citacao-texto: #475569; /* Sombras */ --ds5-sombra-suave: 0 1px 2px rgba(16, 24, 46, .05); --ds5-sombra-cartao: 0 2px 4px rgba(13, 110, 253, .05), 0 8px 24px rgba(16, 24, 46, .07); --ds5-sombra-pop: 0 14px 30px rgba(16, 24, 46, .16); /* Raios */ --ds5-raio-botao: 8px; --ds5-raio-campo: 9px; --ds5-raio: 10px; --ds5-raio-cartao: 14px; --ds5-raio-modal: 16px; } /* ===================================================== */ /* Componentes do Bootstrap ligados às variáveis DS5. */ /* No claro o resultado é o mesmo de antes (tudo #fff); */ /* no escuro cada superfície ganha o seu tom. */ /* ===================================================== */ .card { --bs-card-bg: var(--ds5-superficie); --bs-card-border-color: var(--ds5-borda); } .modal { --bs-modal-bg: var(--ds5-superficie); } .dropdown-menu { --bs-dropdown-bg: var(--ds5-superficie); --bs-dropdown-link-hover-bg: var(--ds5-fundo-suave); } .popover { --bs-popover-bg: var(--ds5-superficie); } .offcanvas { --bs-offcanvas-bg: var(--ds5-superficie); } .list-group { --bs-list-group-bg: var(--ds5-superficie); } .table { --bs-table-bg: transparent; } .form-control, .form-select { background-color: var(--ds5-campo-fundo); } .form-control::placeholder { color: var(--campo-placeholder); } /* Utilitários de superfície (no lugar de bg-white/bg-light, que não mudam com o tema). */ .bg-superficie { background-color: var(--ds5-superficie) !important; } .bg-suave { background-color: var(--ds5-fundo-suave) !important; } .bg-campo { background-color: var(--ds5-campo-fundo) !important; } /* Botão neutro (antes btn-light + border). */ .btn-neutro { --bs-btn-color: var(--ds5-texto-2); --bs-btn-bg: var(--ds5-fundo-suave); --bs-btn-border-color: var(--campo-borda); --bs-btn-hover-color: var(--ds5-texto); --bs-btn-hover-bg: var(--ds5-marinho-suave); --bs-btn-hover-border-color: var(--campo-borda-hover); --bs-btn-active-color: var(--ds5-texto); --bs-btn-active-bg: var(--ds5-marinho-suave); --bs-btn-active-border-color: var(--campo-borda-hover); } /* Telas de acesso (login, seleção de organização). */ body.tela-acesso { background-color: var(--ds5-fundo-login); } .tela-acesso .card { box-shadow: var(--realce), var(--ds5-sombra-pop) !important; } .acesso-cabecalho { background: var(--sidebar-fundo); border-bottom: 1px solid var(--sidebar-borda); } /* Botão principal: sombra de profundidade (neutra no claro). */ .btn-primary { box-shadow: var(--btn-primario-sombra); } .btn-primary:hover { box-shadow: var(--btn-primario-sombra-hover); } /* Seletor de tema (Claro / Escuro / Sistema), no topo e na tela de acesso. */ .seletor-tema-botao { width: 38px; height: 38px; display: inline-grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--ds5-texto-2); font-size: 1.05rem; cursor: pointer; transition: background-color .15s, color .15s; } .seletor-tema-botao:hover, .seletor-tema-botao[aria-expanded="true"] { background: var(--topo-hover); color: var(--ds5-texto); } .seletor-tema-botao:focus-visible { outline: 2px solid var(--ds5-azul-texto); outline-offset: 2px; } .seletor-tema-menu { --bs-dropdown-min-width: 11rem; --bs-dropdown-padding-y: .375rem; --bs-dropdown-border-color: var(--ds5-borda); --bs-dropdown-border-radius: var(--ds5-raio); --bs-dropdown-link-color: var(--ds5-texto-2); --bs-dropdown-link-hover-color: var(--ds5-texto); --bs-dropdown-link-active-color: var(--ds5-texto); --bs-dropdown-link-active-bg: var(--ds5-fundo-suave); padding-inline: .375rem; background: var(--vidro-fundo); -webkit-backdrop-filter: var(--vidro-filtro); backdrop-filter: var(--vidro-filtro); box-shadow: var(--realce), var(--ds5-sombra-pop); font-size: .875rem; } .seletor-tema-titulo { padding: .25rem .625rem .375rem; font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ds5-rotulo); } .seletor-tema-menu .dropdown-item { display: flex; align-items: center; gap: .625rem; padding: .45rem .625rem; border-radius: 7px; } .seletor-tema-marca { margin-left: auto; visibility: hidden; color: var(--ds5-azul-texto); } .seletor-tema-menu .dropdown-item[aria-checked="true"] { color: var(--ds5-texto); font-weight: 600; } .seletor-tema-menu .dropdown-item[aria-checked="true"] .seletor-tema-marca { visibility: visible; } .tela-acesso-tema { position: fixed; top: 12px; right: 12px; z-index: 10; } /* Troca de tema com a página aberta (js/core/tema.js): o novo tema se revela em círculo a partir do seletor (--tema-x/--tema-y) ou, quando quem muda é o sistema, do canto superior direito. Sem suporte a View Transitions, só as cores fazem a transição. */ ::view-transition-old(root) { animation: none; } ::view-transition-new(root) { animation: ds5-revelar-tema .8s cubic-bezier(.7, 0, .3, 1) both; } @keyframes ds5-revelar-tema { from { clip-path: circle(0 at var(--tema-x, calc(100% - 48px)) var(--tema-y, 28px)); } to { clip-path: circle(150vmax at var(--tema-x, calc(100% - 48px)) var(--tema-y, 28px)); } } html.tema-trocando, html.tema-trocando *, html.tema-trocando *::before, html.tema-trocando *::after { transition: background-color .45s ease, color .45s ease, border-color .45s ease, box-shadow .45s ease, fill .45s ease !important; } @media (prefers-reduced-motion: reduce) { ::view-transition-new(root) { animation: none; } }