/* ============================================================ TEMA COPA - overlay sazonal do H2 / ZDesk ------------------------------------------------------------ Carregado por ULTIMO, depois de icons.min.css, app.min.css e app-dark.min.css. Reage apenas ao atributo do : (base clara / "dia de jogo") (base escura / "noite de jogo") Sem esse atributo este arquivo NAO tem efeito algum -> o tema normal (Light/Dark do Hyper) continua intacto. Espelha Tokens.CopaLight.xaml / Tokens.CopaDark.xaml da v4.5 WPF. Cores funcionais (erro, sucesso, status de chamado, badges de prioridade) NAO sao tocadas - este overlay so mexe em accent, gradiente, fundos/surfaces e decoracao. ============================================================ */ /* ---------------- Paleta compartilhada (bandeira) --------------- */ html[data-tema^="copa"]{ --copa-green:#009C3B; /* verde-bandeira - accent principal */ --copa-green-dark:#006B28; /* verde escuro - hover/bordas */ --copa-yellow:#FFDF00; /* amarelo vivo - fundo escuro */ --copa-yellow-light:#FFE94D; --copa-gold:#C79100; /* amarelo-ouro - fundo claro */ --copa-blue:#002776; /* azul-bandeira - texto sobre accent */ --copa-accent:var(--copa-green); --copa-on-accent:var(--copa-blue); --copa-gradient:linear-gradient(135deg,#009C3B 0%,#FFDF00 100%); /* tambem alimenta o Bootstrap caso algo use a variavel */ --bs-primary:#009C3B; --bs-primary-rgb:0,156,59; --bs-link-color:#009C3B; --bs-link-hover-color:#006B28; } /* ---------------- Variante DARK ("noite de jogo") -------------- */ html[data-tema="copa-dark"]{ --copa-bg:#0B1B0F; /* verde quase-preto */ --copa-surface:#142718; --copa-surface2:#1C3324; --copa-star:#FFDF00; /* estrelas amarelo vivo */ --copa-hexa-color:rgba(255,223,0,.85); --copa-card-border:rgba(255,223,0,.22); --copa-backdrop-grad:linear-gradient(135deg, rgba(0,156,59,.20) 0%, transparent 50%, rgba(255,223,0,.10) 100%); --copa-stars:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='580' height='880'%3E%3Cpath d='M65.0,89.5 66.2,93.3 70.2,93.3 67.0,95.6 68.2,99.4 65.0,97.1 61.8,99.4 63.0,95.6 59.8,93.3 63.8,93.3Z' fill='%23FFDF00' fill-opacity='0.073'/%3E%3Cpath d='M438.0,129.2 440.0,135.3 446.4,135.3 441.2,139.0 443.2,145.1 438.0,141.4 432.8,145.1 434.8,139.0 429.6,135.3 436.0,135.3Z' fill='%23FFDF00' fill-opacity='0.092'/%3E%3Cpath d='M205.5,209.4 206.9,213.6 211.3,213.6 207.7,216.2 209.1,220.4 205.5,217.8 201.9,220.4 203.3,216.2 199.7,213.6 204.1,213.6Z' fill='%23FFDF00' fill-opacity='0.066'/%3E%3Cpath d='M524.0,259.6 525.0,262.6 528.2,262.6 525.6,264.5 526.6,267.6 524.0,265.7 521.4,267.6 522.4,264.5 519.8,262.6 523.0,262.6Z' fill='%23FFDF00' fill-opacity='0.059'/%3E%3Cpath d='M101.5,359.4 103.1,364.3 108.3,364.3 104.1,367.3 105.7,372.3 101.5,369.2 97.3,372.3 98.9,367.3 94.7,364.3 99.9,364.3Z' fill='%23FFDF00' fill-opacity='0.079'/%3E%3Cpath d='M315.0,409.5 316.2,413.3 320.2,413.3 317.0,415.6 318.2,419.4 315.0,417.1 311.8,419.4 313.0,415.6 309.8,413.3 313.8,413.3Z' fill='%23FFDF00' fill-opacity='0.066'/%3E%3Cpath d='M496.0,469.4 497.5,474.0 502.3,474.0 498.4,476.8 499.9,481.3 496.0,478.5 492.1,481.3 493.6,476.8 489.7,474.0 494.5,474.0Z' fill='%23FFDF00' fill-opacity='0.073'/%3E%3Cpath d='M164.5,539.5 165.6,543.0 169.2,543.0 166.3,545.1 167.4,548.5 164.5,546.4 161.6,548.5 162.7,545.1 159.8,543.0 163.4,543.0Z' fill='%23FFDF00' fill-opacity='0.059'/%3E%3Cpath d='M397.0,609.3 398.7,614.6 404.3,614.6 399.8,617.9 401.5,623.2 397.0,619.9 392.5,623.2 394.2,617.9 389.7,614.6 395.3,614.6Z' fill='%23FFDF00' fill-opacity='0.083'/%3E%3Cpath d='M74.0,679.6 75.0,682.6 78.2,682.6 75.6,684.5 76.6,687.6 74.0,685.7 71.4,687.6 72.4,684.5 69.8,682.6 73.0,682.6Z' fill='%23FFDF00' fill-opacity='0.059'/%3E%3Cpath d='M265.5,739.5 266.9,743.6 271.3,743.6 267.7,746.2 269.1,750.4 265.5,747.8 261.9,750.4 263.3,746.2 259.7,743.6 264.1,743.6Z' fill='%23FFDF00' fill-opacity='0.066'/%3E%3Cpath d='M525.0,819.5 526.2,823.3 530.2,823.3 527.0,825.6 528.2,829.4 525.0,827.1 521.8,829.4 523.0,825.6 519.8,823.3 523.8,823.3Z' fill='%23FFDF00' fill-opacity='0.066'/%3E%3Cpath d='M144.5,199.6 145.6,203.0 149.2,203.0 146.3,205.1 147.4,208.5 144.5,206.4 141.6,208.5 142.7,205.1 139.8,203.0 143.4,203.0Z' fill='%23FFDF00' fill-opacity='0.059'/%3E%3Cpath d='M426.0,319.4 427.5,324.0 432.3,324.0 428.4,326.8 429.9,331.3 426.0,328.5 422.1,331.3 423.6,326.8 419.7,324.0 424.5,324.0Z' fill='%23FFDF00' fill-opacity='0.073'/%3E%3Cpath d='M35.0,499.5 36.2,503.3 40.2,503.3 37.0,505.6 38.2,509.4 35.0,507.1 31.8,509.4 33.0,505.6 29.8,503.3 33.8,503.3Z' fill='%23FFDF00' fill-opacity='0.059'/%3E%3Cpath d='M355.5,699.5 356.9,703.6 361.3,703.6 357.7,706.2 359.1,710.4 355.5,707.8 351.9,710.4 353.3,706.2 349.7,703.6 354.1,703.6Z' fill='%23FFDF00' fill-opacity='0.066'/%3E%3Cpath d='M244.5,59.5 245.6,63.0 249.2,63.0 246.3,65.1 247.4,68.5 244.5,66.4 241.6,68.5 242.7,65.1 239.8,63.0 243.4,63.0Z' fill='%23FFDF00' fill-opacity='0.059'/%3E%3C/svg%3E"); } /* ---------------- Variante LIGHT ("dia de jogo") -------------- */ html[data-tema="copa-light"]{ --copa-bg:#F7FBEC; /* creme claro */ --copa-surface:#FFFFFF; --copa-surface2:#EFF5DD; --copa-star:#C79100; /* estrelas amarelo-ouro */ --copa-hexa-color:#006B28; --copa-card-border:rgba(0,156,59,.30); --copa-backdrop-grad:linear-gradient(135deg, rgba(0,156,59,.22) 0%, transparent 50%, rgba(255,223,0,.30) 100%); --copa-stars:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='580' height='880'%3E%3Cpath d='M65.0,89.5 66.2,93.3 70.2,93.3 67.0,95.6 68.2,99.4 65.0,97.1 61.8,99.4 63.0,95.6 59.8,93.3 63.8,93.3Z' fill='%23C79100' fill-opacity='0.220'/%3E%3Cpath d='M438.0,129.2 440.0,135.3 446.4,135.3 441.2,139.0 443.2,145.1 438.0,141.4 432.8,145.1 434.8,139.0 429.6,135.3 436.0,135.3Z' fill='%23C79100' fill-opacity='0.280'/%3E%3Cpath d='M205.5,209.4 206.9,213.6 211.3,213.6 207.7,216.2 209.1,220.4 205.5,217.8 201.9,220.4 203.3,216.2 199.7,213.6 204.1,213.6Z' fill='%23C79100' fill-opacity='0.200'/%3E%3Cpath d='M524.0,259.6 525.0,262.6 528.2,262.6 525.6,264.5 526.6,267.6 524.0,265.7 521.4,267.6 522.4,264.5 519.8,262.6 523.0,262.6Z' fill='%23C79100' fill-opacity='0.180'/%3E%3Cpath d='M101.5,359.4 103.1,364.3 108.3,364.3 104.1,367.3 105.7,372.3 101.5,369.2 97.3,372.3 98.9,367.3 94.7,364.3 99.9,364.3Z' fill='%23C79100' fill-opacity='0.240'/%3E%3Cpath d='M315.0,409.5 316.2,413.3 320.2,413.3 317.0,415.6 318.2,419.4 315.0,417.1 311.8,419.4 313.0,415.6 309.8,413.3 313.8,413.3Z' fill='%23C79100' fill-opacity='0.200'/%3E%3Cpath d='M496.0,469.4 497.5,474.0 502.3,474.0 498.4,476.8 499.9,481.3 496.0,478.5 492.1,481.3 493.6,476.8 489.7,474.0 494.5,474.0Z' fill='%23C79100' fill-opacity='0.220'/%3E%3Cpath d='M164.5,539.5 165.6,543.0 169.2,543.0 166.3,545.1 167.4,548.5 164.5,546.4 161.6,548.5 162.7,545.1 159.8,543.0 163.4,543.0Z' fill='%23C79100' fill-opacity='0.180'/%3E%3Cpath d='M397.0,609.3 398.7,614.6 404.3,614.6 399.8,617.9 401.5,623.2 397.0,619.9 392.5,623.2 394.2,617.9 389.7,614.6 395.3,614.6Z' fill='%23C79100' fill-opacity='0.250'/%3E%3Cpath d='M74.0,679.6 75.0,682.6 78.2,682.6 75.6,684.5 76.6,687.6 74.0,685.7 71.4,687.6 72.4,684.5 69.8,682.6 73.0,682.6Z' fill='%23C79100' fill-opacity='0.180'/%3E%3Cpath d='M265.5,739.5 266.9,743.6 271.3,743.6 267.7,746.2 269.1,750.4 265.5,747.8 261.9,750.4 263.3,746.2 259.7,743.6 264.1,743.6Z' fill='%23C79100' fill-opacity='0.200'/%3E%3Cpath d='M525.0,819.5 526.2,823.3 530.2,823.3 527.0,825.6 528.2,829.4 525.0,827.1 521.8,829.4 523.0,825.6 519.8,823.3 523.8,823.3Z' fill='%23C79100' fill-opacity='0.200'/%3E%3Cpath d='M144.5,199.6 145.6,203.0 149.2,203.0 146.3,205.1 147.4,208.5 144.5,206.4 141.6,208.5 142.7,205.1 139.8,203.0 143.4,203.0Z' fill='%23C79100' fill-opacity='0.180'/%3E%3Cpath d='M426.0,319.4 427.5,324.0 432.3,324.0 428.4,326.8 429.9,331.3 426.0,328.5 422.1,331.3 423.6,326.8 419.7,324.0 424.5,324.0Z' fill='%23C79100' fill-opacity='0.220'/%3E%3Cpath d='M35.0,499.5 36.2,503.3 40.2,503.3 37.0,505.6 38.2,509.4 35.0,507.1 31.8,509.4 33.0,505.6 29.8,503.3 33.8,503.3Z' fill='%23C79100' fill-opacity='0.180'/%3E%3Cpath d='M355.5,699.5 356.9,703.6 361.3,703.6 357.7,706.2 359.1,710.4 355.5,707.8 351.9,710.4 353.3,706.2 349.7,703.6 354.1,703.6Z' fill='%23C79100' fill-opacity='0.200'/%3E%3Cpath d='M244.5,59.5 245.6,63.0 249.2,63.0 246.3,65.1 247.4,68.5 244.5,66.4 241.6,68.5 242.7,65.1 239.8,63.0 243.4,63.0Z' fill='%23C79100' fill-opacity='0.180'/%3E%3C/svg%3E"); } /* ============================================================ 1. FUNDO DA PAGINA + BACKDROP DECORATIVO ============================================================ */ html[data-tema^="copa"] body{ background-color:var(--copa-bg) !important; } /* deixa os containers de conteudo transparentes p/ o backdrop vazar */ html[data-tema^="copa"] .wrapper, html[data-tema^="copa"] .content-page, html[data-tema^="copa"] .content, html[data-tema^="copa"] .container-fluid, html[data-tema^="copa"] .auth-fluid{ background-color:transparent !important; } /* IMPORTANTE: o .wrapper NAO recebe position/z-index. Criar um stacking context aqui prenderia os modais do Bootstrap (que sao descendentes do .wrapper) abaixo do .modal-backdrop (z-index 1050, inserido no ) — o modal abriria atras do overlay escuro e ficaria sem como fechar. Em vez disso o backdrop vai para z-index:-1 (atras do conteudo, na frente do bg do body), sem precisar elevar o conteudo. */ /* camada de fundo: gradiente diagonal + estrelas espalhadas (wallpaper) */ #copa-backdrop, #copa-stripe{ display:none; } html[data-tema^="copa"] #copa-backdrop{ display:block; position:fixed; inset:0; pointer-events:none; z-index:-1; background-image:var(--copa-backdrop-grad), var(--copa-stars); background-repeat:no-repeat, repeat; background-size:cover, 580px 880px; background-position:center, top left; } /* faixa fina no topo: verde-amarelo-azul-amarelo-verde (assinatura do tema) */ html[data-tema^="copa"] #copa-stripe{ display:block; position:fixed; top:0; left:0; right:0; height:4px; z-index:2000; pointer-events:none; background:linear-gradient(90deg, #009C3B 0%, #FFDF00 25%, #002776 50%, #FFDF00 75%, #009C3B 100%); } /* ============================================================ 2. SURFACES (cards / paineis) ============================================================ */ html[data-tema^="copa"] .card{ border:1px solid var(--copa-card-border) !important; } html[data-tema="copa-dark"] .card, html[data-tema="copa-dark"] .modal-content, html[data-tema="copa-dark"] .dropdown-menu{ background-color:var(--copa-surface) !important; } /* ============================================================ 3. ACCENT -> verde-bandeira Substitui o indigo #727cf5 do template Hyper. So accent; cores semanticas (success/danger/warning/info) ficam intactas. ============================================================ */ /* links de conteudo (preserva sidebar, menus, utilitarios) */ html[data-tema^="copa"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.side-nav-link):not(.text-muted):not(.text-dark):not(.text-white):not(.page-link){ color:var(--copa-green); } html[data-tema^="copa"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.side-nav-link):not(.text-muted):not(.text-dark):not(.text-white):not(.page-link):hover{ color:var(--copa-green-dark); } /* utilitarios de cor */ html[data-tema^="copa"] .text-primary{ color:var(--copa-green) !important; } html[data-tema^="copa"] .bg-primary{ background-color:var(--copa-green) !important; } html[data-tema^="copa"] .border-primary{ border-color:var(--copa-green) !important; } html[data-tema^="copa"] .bg-soft-primary{ background-color:rgba(0,156,59,.18) !important; } html[data-tema^="copa"] .link-primary{ color:var(--copa-green) !important; } html[data-tema^="copa"] .link-primary:hover{ color:var(--copa-green-dark) !important; } /* --- Botao primario: gradiente verde->amarelo, texto AZUL --- */ html[data-tema^="copa"] .btn-primary{ background-image:var(--copa-gradient) !important; background-color:var(--copa-green) !important; border-color:var(--copa-green) !important; color:var(--copa-blue) !important; font-weight:600; } html[data-tema^="copa"] .btn-primary:hover{ filter:brightness(1.07); } html[data-tema^="copa"] .btn-primary:focus, html[data-tema^="copa"] .btn-primary.focus, html[data-tema^="copa"] .btn-primary:active, html[data-tema^="copa"] .btn-primary.active, html[data-tema^="copa"] .btn-check:checked+.btn-primary, html[data-tema^="copa"] .show>.btn-primary.dropdown-toggle{ background-image:var(--copa-gradient) !important; background-color:var(--copa-green) !important; border-color:var(--copa-green) !important; color:var(--copa-blue) !important; box-shadow:0 0 0 .15rem rgba(0,156,59,.35) !important; } /* --- Botao outline / link / soft --- */ html[data-tema^="copa"] .btn-outline-primary{ color:var(--copa-green) !important; border-color:var(--copa-green) !important; } html[data-tema^="copa"] .btn-outline-primary:hover, html[data-tema^="copa"] .btn-outline-primary:active, html[data-tema^="copa"] .btn-outline-primary.active, html[data-tema^="copa"] .btn-check:checked+.btn-outline-primary{ color:#fff !important; background-color:var(--copa-green) !important; border-color:var(--copa-green) !important; } html[data-tema^="copa"] .btn-link{ color:var(--copa-green) !important; } html[data-tema^="copa"] .btn-soft-primary{ color:var(--copa-green-dark) !important; background-color:rgba(0,156,59,.18) !important; border-color:transparent !important; } html[data-tema^="copa"] .btn-soft-primary:hover{ color:#fff !important; background-color:var(--copa-green) !important; } /* --- Formularios: checkbox / radio / switch / foco --- */ html[data-tema^="copa"] .form-check-input:checked, html[data-tema^="copa"] .form-check-input[type=checkbox]:indeterminate, html[data-tema^="copa"] .form-checkbox-primary .form-check-input:checked, html[data-tema^="copa"] .form-radio-primary .form-check-input:checked{ background-color:var(--copa-green) !important; border-color:var(--copa-green) !important; } html[data-tema^="copa"] .form-check-input:focus{ border-color:var(--copa-green) !important; box-shadow:0 0 0 .15rem rgba(0,156,59,.25) !important; } html[data-tema^="copa"] input[data-switch]:checked+label, html[data-tema^="copa"] input[data-switch=primary]:checked+label{ background-color:var(--copa-green) !important; } html[data-tema^="copa"] .form-control:focus, html[data-tema^="copa"] .form-select:focus{ border-color:var(--copa-green) !important; box-shadow:0 0 0 .15rem rgba(0,156,59,.20) !important; } /* --- Navegacao: tabs / pills / paginacao --- */ html[data-tema^="copa"] .nav-pills .nav-link.active, html[data-tema^="copa"] .nav-pills .show>.nav-link{ background-color:var(--copa-green) !important; color:#fff !important; } html[data-tema^="copa"] .nav-tabs.nav-bordered li a.active{ border-bottom-color:var(--copa-green) !important; color:var(--copa-green) !important; } html[data-tema^="copa"] .page-item.active .page-link{ background-color:var(--copa-green) !important; border-color:var(--copa-green) !important; color:#fff !important; } html[data-tema^="copa"] .page-link{ color:var(--copa-green) !important; } /* --- Progress / list-group / datatables --- */ html[data-tema^="copa"] .progress-bar{ background-color:var(--copa-green) !important; } html[data-tema^="copa"] .list-group-item.active{ background-color:var(--copa-green) !important; border-color:var(--copa-green) !important; } html[data-tema^="copa"] table.dataTable tbody>tr.selected, html[data-tema^="copa"] table.dataTable tbody>tr>.selected{ background-color:var(--copa-green) !important; } /* --- Badges (de marca - prioridade/status NAO entram aqui) --- */ html[data-tema^="copa"] .badge.bg-primary{ background-color:var(--copa-green) !important; } html[data-tema^="copa"] .badge-outline-primary{ color:var(--copa-green) !important; border-color:var(--copa-green) !important; } html[data-tema^="copa"] .badge-primary-lighten{ color:var(--copa-green-dark) !important; background-color:rgba(0,156,59,.18) !important; } /* --- Avatares / widgets / ribbons / loader --- */ html[data-tema^="copa"] .avatar-title{ background-color:var(--copa-green) !important; } html[data-tema^="copa"] .widget-icon{ background-color:var(--copa-green) !important; color:#fff !important; } html[data-tema^="copa"] .ribbon-box .ribbon-primary, html[data-tema^="copa"] .ribbon-box .ribbon-two-primary span{ background-color:var(--copa-green) !important; } html[data-tema^="copa"] .bouncing-loader>div{ background-color:var(--copa-green) !important; } /* --- Select2 --- */ html[data-tema^="copa"] .select2-container--default .select2-results__option--highlighted[aria-selected]{ background-color:var(--copa-green) !important; } html[data-tema^="copa"] .select2-container--default .select2-selection--multiple .select2-selection__choice{ background-color:var(--copa-green) !important; } /* --- Sidebar (item ativo) - amarelo p/ contraste no fundo escuro --- */ html[data-tema^="copa"] .side-nav .menuitem-active>a, html[data-tema^="copa"] .side-nav .side-nav-link.active, html[data-tema^="copa"] .side-nav .side-nav-second-level li.active>a, html[data-tema^="copa"] .side-nav .side-nav-second-level li.mm-active>a{ color:var(--copa-yellow) !important; } /* ============================================================ 4. DECORACAO - estrelas 5+1 + "em busca do hexa" Componente reutilizavel (inc/utils/CopaEstrelas.inc.asp). Visivel somente quando o tema e Copa. ============================================================ */ .copa-estrelas{ display:none; } html[data-tema^="copa"] .copa-estrelas{ display:flex; flex-direction:column; align-items:center; gap:5px; margin:12px auto 6px; } html[data-tema^="copa"] .copa-estrelas-row{ display:flex; align-items:center; gap:4px; } html[data-tema^="copa"] .copa-estrelas svg{ width:16px; height:16px; display:block; } html[data-tema^="copa"] .copa-star-fill{ fill:var(--copa-star); } html[data-tema^="copa"] .copa-star-outline{ fill:none; stroke:var(--copa-star); stroke-width:1.6; opacity:.5; } html[data-tema^="copa"] .copa-hexa{ font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:lowercase; color:var(--copa-hexa-color); text-align:center; line-height:1; } /* esconde a decoracao quando a sidebar esta condensada (so icones) */ body[data-leftbar-compact-mode=condensed] .copa-estrelas{ display:none !important; } /* ============================================================ 5. SELETOR DE TEMA (rightBar) - amostras de cor ============================================================ */ .copa-swatch{ display:inline-block; width:14px; height:14px; border-radius:3px; vertical-align:-2px; margin-right:6px; border:1px solid rgba(0,0,0,.15); } .copa-swatch-light{ background:linear-gradient(135deg,#009C3B 50%,#F7FBEC 50%); } .copa-swatch-dark{ background:linear-gradient(135deg,#009C3B 50%,#0B1B0F 50%); }