/* ------------------------------------------------------------------------------------------ Cores dos alertas, num arquivo à parte do site.css porque valem também nas telas do layout `clean` e `auth` (aceite da AF pelo fornecedor, login, portal do fornecedor), que carregam o AuthAsset e não o AppAsset: ver AlertaAsset. ------------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------------------------------------ Alerta claro: alert-light-{cor} Classe do Metronic 7 que o tema atual (8) não tem: as telas que a usam saíam sem fundo, só o texto solto. Fundo na cor clara do tema e texto no tom escuro da mesma cor (o claro no tema escuro), porque a cor pura do tema sobre o fundo claro não se lê (o amarelo fica em 1,6:1). Seletor duplo: este arquivo carrega antes do style.bundle.css, e o `.alert` do tema, que zera o fundo, venceria no empate. ------------------------------------------------------------------------------------------ */ .alert.alert-light-primary { --bs-alert-bg: var(--bs-primary-light); --bs-alert-color: var(--bs-primary-text-emphasis); --bs-alert-link-color: var(--bs-primary-text-emphasis); --bs-alert-border-color: transparent; } .alert.alert-light-info { --bs-alert-bg: var(--bs-info-light); --bs-alert-color: var(--bs-info-text-emphasis); --bs-alert-link-color: var(--bs-info-text-emphasis); --bs-alert-border-color: transparent; } .alert.alert-light-success { --bs-alert-bg: var(--bs-success-light); --bs-alert-color: var(--bs-success-text-emphasis); --bs-alert-link-color: var(--bs-success-text-emphasis); --bs-alert-border-color: transparent; } .alert.alert-light-warning { --bs-alert-bg: var(--bs-warning-light); --bs-alert-color: var(--bs-warning-text-emphasis); --bs-alert-link-color: var(--bs-warning-text-emphasis); --bs-alert-border-color: transparent; } .alert.alert-light-danger { --bs-alert-bg: var(--bs-danger-light); --bs-alert-color: var(--bs-danger-text-emphasis); --bs-alert-link-color: var(--bs-danger-text-emphasis); --bs-alert-border-color: transparent; } /* ------------------------------------------------------------------------------------------ Texto do alerta colorido: alert-{cor} O tema pinta o texto de `.alert-{cor}` na cor pura sobre o fundo claro da mesma cor, e no tema claro o amarelo fica em 1,6:1, o verde em 2,1:1, o azul em 3,2:1, o vermelho em 3,5:1 e o cinza do `secondary` some (1,04:1); texto pede 4,5:1. O tom escuro da cor (o claro no tema escuro) passa de 5,5:1 nos dois temas; fundo, borda e ícones `text-{cor}` seguem como o tema define. Seletor duplo pelo mesmo motivo do bloco acima: o `.alert-{cor}` do tema carrega depois. ------------------------------------------------------------------------------------------ */ .alert.alert-primary { color: var(--bs-primary-text-emphasis); } .alert.alert-success { color: var(--bs-success-text-emphasis); } .alert.alert-info { color: var(--bs-info-text-emphasis); } .alert.alert-warning { color: var(--bs-warning-text-emphasis); } .alert.alert-danger { color: var(--bs-danger-text-emphasis); } .alert.alert-secondary { color: var(--bs-secondary-text-emphasis); } /* ------------------------------------------------------------------------------------------ Título colorido dentro do alerta:

Muitas telas pintam o título do alerta com o utilitário `text-{cor}`, que tem !important e escapa da regra acima. Com o html em 13px, o h4 tem 16,25px e não conta como texto grande: a cor pura reprova como o corpo. O !important aqui é o único jeito de vencer o do utilitário. ------------------------------------------------------------------------------------------ */ .alert.alert-primary :is(h1, h2, h3, h4, h5, h6).text-primary { color: var(--bs-primary-text-emphasis) !important; } .alert.alert-success :is(h1, h2, h3, h4, h5, h6).text-success { color: var(--bs-success-text-emphasis) !important; } .alert.alert-info :is(h1, h2, h3, h4, h5, h6).text-info { color: var(--bs-info-text-emphasis) !important; } .alert.alert-warning :is(h1, h2, h3, h4, h5, h6).text-warning { color: var(--bs-warning-text-emphasis) !important; } .alert.alert-danger :is(h1, h2, h3, h4, h5, h6).text-danger { color: var(--bs-danger-text-emphasis) !important; } .alert.alert-secondary :is(h1, h2, h3, h4, h5, h6).text-secondary { color: var(--bs-secondary-text-emphasis) !important; } /* ------------------------------------------------------------------------------------------ Toast: toastr-{tipo} O tema escreve em branco sobre a cor pura e deixa o toast translúcido (0,8): sucesso 2,3:1, aviso 1,7:1 e erro 3,9:1 no tema claro, pior ainda com a página por baixo. O toast passa a ter o desenho do alerta: fundo claro da cor, texto no tom escuro (o claro no tema escuro) e uma faixa na cor pura à esquerda. O ícone do toastr é uma imagem branca e sumiria no fundo claro: a mesma imagem (copiada do tema) vira máscara de um ::before pintado na cor pura, e a imagem de fundo sai. O #toastr-container dá a especificidade (a regra do tema carrega depois, no plugins.bundle.css), e o !important vence o do tema na borda. A imagem de fundo sai na regra de cada tipo: o tema a põe em #toastr-container>.toastr-{tipo} com !important, e só o seletor com as duas classes passa à frente dele. ------------------------------------------------------------------------------------------ */ #toastr-container > .toastr { opacity: 1; border-left: 4px solid !important; } #toastr-container > .toastr::before { content: ""; position: absolute; left: 1.25rem; top: 50%; width: 24px; height: 24px; transform: translateY(-50%); -webkit-mask: var(--toastr-icone) center / contain no-repeat; mask: var(--toastr-icone) center / contain no-repeat; } #toastr-container > .toastr.toastr-success { background-color: var(--bs-success-light); color: var(--bs-success-text-emphasis); border-left-color: var(--bs-success) !important; background-image: none !important; } #toastr-container > .toastr.toastr-warning { background-color: var(--bs-warning-light); color: var(--bs-warning-text-emphasis); border-left-color: var(--bs-warning) !important; background-image: none !important; } #toastr-container > .toastr.toastr-error { background-color: var(--bs-danger-light); color: var(--bs-danger-text-emphasis); border-left-color: var(--bs-danger) !important; background-image: none !important; } #toastr-container > .toastr.toastr-info { background-color: var(--bs-info-light); color: var(--bs-info-text-emphasis); border-left-color: var(--bs-info) !important; background-image: none !important; } #toastr-container > .toastr.toastr-success .toastr-close-button { background-color: var(--bs-success-text-emphasis); } #toastr-container > .toastr.toastr-warning .toastr-close-button { background-color: var(--bs-warning-text-emphasis); } #toastr-container > .toastr.toastr-error .toastr-close-button { background-color: var(--bs-danger-text-emphasis); } #toastr-container > .toastr.toastr-info .toastr-close-button { background-color: var(--bs-info-text-emphasis); } #toastr-container > .toastr.toastr-success::before { --toastr-icone: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==); background-color: var(--bs-success); } #toastr-container > .toastr.toastr-warning::before { --toastr-icone: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=); background-color: var(--bs-warning); } #toastr-container > .toastr.toastr-error::before { --toastr-icone: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=); background-color: var(--bs-danger); } #toastr-container > .toastr.toastr-info::before { --toastr-icone: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=); background-color: var(--bs-info); }