/* ---------------------------------------- */ /* FIX */ /* ---------------------------------------- */ /* Algum script est� colocando overflow-hidden no html */ html { overflow: visible !important; } /* ---------------------------------------- */ /* ZOOM */ /* ---------------------------------------- */ /* A fonte padr�o do websupport � 13px, por�m atualmente prefere-se 16px (1em). */ /* Como forma de parcialmente compensar, aumentamos um pouco as fontes. */ html { font-size: 14px; } .wmenu .submenu table a { font-size: 11pt; } .wmenu .submenu table td.separador { font-size: 10pt; } .wmenu .submenu table .disabled { font-size: 11pt; } #ajaxError span { font-size: 14px !important; } #rodape { font-size: 13px; } .ui-widget, .ui-widget .ui-widget, table { font-size: 14px !important; } /* Em monitores com largura acima de 1600px, aplica um zoom */ @media (min-width: 1601px) { /* zoom causou problema no alinhamento do menu de contexto do Prime */ /* html { zoom: 1.15; } */ } /* ---------------------------------------- */ /* NOVO LAYOUT ERP */ /* ---------------------------------------- */ /* - Largura flexivel sem limite dos 980px */ /* - Menu principal integrado no topo, */ /* - Css flexbox */ /* - Logo escal�vel svg */ /* - Fonte oficial Helvetica */ /* - Flat */ /* - Anima��es */ /* - Menu ERP flutuante */ /* ---------------------------------------- */ /* Variaveis */ :root { /* Cor da Caesb */ /* --azul-caesb: #2C61A0; */ --azul-caesb: #0B5AA5; --azul-caesb-claro: #85BBE3; /* Menu ERP */ --erp-menu-popover-width: 940px; --erp-menu-popover-maxheight: calc(100vh - 4.5rem - 1rem); --erp-menu-popover-height: 440px; } /* Page size */ #page { min-width:980px; min-width: calc(952px + 2rem); } /* 980 = 952 + 2*14px (1rem = 14px) */ #page { display: flex; flex-direction: column; align-items: stretch; } /* Cabecalho */ #cabecalhoWrapper { box-sizing: border-box; padding: 0.5rem 1rem; min-height: 4.5rem; z-index: 104; } #cabecalhoWrapper { background: var(--azul-caesb); box-shadow: 0 5px 10px rgba(100,100,100,0.4); border-bottom: 1px solid #e8e8e8; } #cabecalhoWrapper { display: flex; justify-content: center; align-items: center; } #cabecalho { box-sizing: border-box; position: relative; min-width: 952px; width: 100%; } #cabecalho { flex-grow: 1; display: flex; align-items: center; justify-content: space-between; } #cabecalhoStart { display: flex; align-items: center; gap: .4rem; } #cabecalhoEnd { display: flex; align-items: center; } #cabecalho .erp-menu { cursor: pointer; margin-right: 1rem; } #cabecalho .erp-menu { transform: scale(1) translateZ(0) rotateZ(0); } /* translateZ/rotateZ enables GPU and avoids flickering */ #cabecalho .erp-menu { transition: transform .4s cubic-bezier(.32, .08, .24, 1); } #cabecalho .erp-menu:hover { transform: scale(1.3) translateZ(0) rotateZ(0); } /* translateZ/rotateZ enables GPU and avoids flickering */ #cabecalho .logo-img { } #cabecalho .logo-img path { fill: var(--azul-caesb-claro); } #cabecalho .logo-text { margin-top: -.2rem; color: var(--azul-caesb-claro); } #cabecalho .logo-text { font-family: 'Helvetica LT Narrow', sans-serif; font-weight: 700; font-style: italic; font-size: 1.6rem; } #cabecalho .erp-modulo { margin-top: -.2rem; margin-right: 1rem; color: var(--azul-caesb-claro); text-decoration: none; } #cabecalho .erp-modulo { font-family: 'Helvetica LT Narrow', sans-serif; font-weight: 700; font-style: italic; font-size: 1.6rem; } #cabecalho .erp-modulo { transition: color .4s cubic-bezier(.32, .08, .24, 1); } #cabecalho .erp-modulo:hover { color: white; } #cabecalho #ajaxSpin { margin-left: 1.625rem; } /* Barra de contexto */ #contextoWrapper { box-sizing: border-box; padding: 0 1rem; height: 3.2rem; position: relative; } #contextoWrapper { background: #eee; border-bottom: 1px solid #ccc; } #contextoWrapper { display: flex; justify-content: center; align-items: center; } #contexto { box-sizing: border-box; position: relative; width: 100%; min-width: 952px; } #contexto { flex-grow: 1; display: flex; align-items: center; justify-content: space-between; } #contextoStart { display: flex; align-items: center; } #contextoStart h1 { font-size: 1.3rem; padding: 0; margin: 0; } #contextoEnd { display: flex; align-items: center; gap: .5rem; } #contextoEnd .ui-button, #contextoEnd button, #contextoEnd input, #contextoEnd select { margin-bottom: 0; margin-top: 0; } /* Conteudo */ #conteudoWrapper { min-width: 980px; box-sizing: border-box; padding: 0 1rem; position: relative; padding-top: 1rem; } #conteudo { min-width: 952px; width: 100%; margin-top: 0; } #conteudo.limitado { max-width: 1372px; max-width: calc(1400px - 2rem); } /* 1400 - paddings = 1400 - (14px * 2) = 1372 */ /* Rodape */ #rodapeWrapper { min-width: 980px; box-sizing: border-box; padding: 0 1rem; position: relative; } #rodape { min-width: 952px; width: 100%; padding: 3rem 0; text-align: center; } /* Faixas de ambiente */ .desenv { display: block; margin: 0; padding: 0.5rem; font-size: 1rem; height: auto; border-bottom: 1px solid #ccc; } .homolog { display: block; margin: 0; padding: 0.5rem; font-size: 1rem; height: auto; border-bottom: 1px solid #ccc; } .treinamento { display: block; margin: 0; padding: 0.5rem; font-size: 1rem; height: auto; border-bottom: 1px solid #ccc; } /* .desenv:before { content: "VOC� EST� NO AMBIENTE DE "; } */ /* .homolog:before { content: "VOC� EST� NO AMBIENTE DE "; } */ /* .treinamento:before { content: "VOC� EST� NO AMBIENTE DE "; } */ /* Ajuste do menu principal sobre o cabecalho */ .wmenu { height: auto; } .wmenu table { height: auto; } .wmenu table a { line-height: 38px; color: white; border-radius: 1rem; } .wmenu table a { transition: background .4s cubic-bezier(.32, .08, .24, 1); } .wmenu table a:hover, .wmenu table a.hover { background-color: rgba(255,255,255,0.3) !important; color: white; } /* !important devido ao css antigo do wmenu */ .wmenu .submenuWrapper { height: auto; } .wmenu .submenu { box-shadow: 0 18px 16px rgba(0,0,0,0.3); top: 36px; } .wmenu .submenu { padding: .5rem; border-radius: 1rem; } .wmenu .submenu table a { line-height: 30px; color: #444; border-radius: .5rem; } .wmenu .submenu table a:hover, .wmenu .submenu table a.hover { background-color: #ddd !important; color: #444; } /* !important devido ao css antigo do wmenu */ .wmenu .submenu table td.separador { line-height: 30px; } /* Ajuste do menu principal (quebra de linha caso existam muitos itens para a largura do site) */ #menuPrincipal.wmenu>div>table>tbody>tr { display: flex; flex-wrap: wrap; } /* Ajuste do menu administracao (mesmos moldes do principal) */ #menuAdministracao.wmenu { height: auto; } #menuAdministracao.wmenu table { height: auto; } #menuAdministracao.wmenu table a { line-height: 38px; color: white; border-radius: 1rem; } #menuAdministracao.wmenu table a { transition: background .4s cubic-bezier(.32, .08, .24, 1); } #menuAdministracao.wmenu table a:hover, #menuAdministracao.wmenu table a.hover { background-color: rgba(255,255,255,0.3) !important; color: white; } /* !important devido ao css antigo do wmenu */ #menuAdministracao.wmenu .submenuWrapper { height: auto; } #menuAdministracao.wmenu .submenu { box-shadow: 0 18px 16px rgba(0,0,0,0.3); top: 36px; } #menuAdministracao.wmenu .submenu { padding: .5; border-radius: 1rem; } #menuAdministracao.wmenu .submenu table a { line-height: 30px; color: #444; border-radius: .5rem; } #menuAdministracao.wmenu .submenu table a:hover, #menuAdministracao.wmenu .submenu table a.hover { background-color: #ddd !important; color: #444; } /* !important devido ao css antigo do wmenu */ #menuAdministracao.wmenu .submenu table td.separador { line-height: 30px; } /* Ajuste do menu administracao (novo icone do usuario) */ #menuAdministracao.wmenu .submenuWrapper>a>span.icon { display: none; } #menuAdministracao.wmenu .submenuWrapper>a>span.label { display: flex; justify-content: center; align-items: center; } #menuAdministracao.wmenu .submenuWrapper>a>span::after { content: "\f007"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 1.2rem; -webkit-font-smoothing: antialiased; } #menuAdministracao.wmenu .submenuWrapper>a>span::after { border-radius: 100%; border: 1px solid #fff; color: white; margin-left: 1rem; } #menuAdministracao.wmenu .submenuWrapper>a>span::after { text-rendering: auto; font-style: normal; font-variant: normal; display: inline-block; } #menuAdministracao.wmenu .submenuWrapper>a>span::after { width: 2.2rem; height: 2.2rem; line-height: 2.2rem; } #menuAdministracao.wmenu .submenuWrapper>a.hover>span::after, #menuAdministracao.wmenu .submenuWrapper>a:hover>span::after { border: 1px solid transparent; } /* Ajuste do menu administracao (sem icones internos) */ #menuAdministracao.wmenu .submenu .icon { display: none; } /* Ajuste do menu administracao (removac�o do link "Ir para Painel de sistemas") */ #menuAdministracao.wmenu .submenu a[href$="../seguranca"] { display: none; } /* Menu flutuante do ERP */ .erp-menu-popover { background: var(--azul-caesb); top: 4.5rem; left: 0; position: absolute; z-index: 201; } .erp-menu-popover { opacity: 0; width: 0; height: 0; overflow: hidden; } .erp-menu-popover { box-shadow: 10px 10px 30px rgba(10,10,10,.3); max-height: var(--erp-menu-popover-maxheight); } .erp-menu-popover { transform: scale(1) translateZ(0) rotateZ(0); } /* translateZ/rotateZ enables GPU and avoids flickering */ .erp-menu-popover.show { width: var(--erp-menu-popover-width); height: var(--erp-menu-popover-height); overflow: visible; opacity: 0; } .erp-menu-popover.show { animation: erp-popover-show .3s cubic-bezier(.32, .08, .24, 1) forwards; transform-origin: left top; } .erp-menu-popover.hide { width: var(--erp-menu-popover-width); height: var(--erp-menu-popover-height); overflow: visible; } .erp-menu-popover.hide { animation: erp-popover-hide .3s cubic-bezier(.32, .08, .24, 1) forwards; transform-origin: left top; } @-webkit-keyframes erp-popover-show { 0% { opacity: 0; transform: scale(0.3) translateZ(0) rotateZ(0); } 100% { opacity: 1; transform: scale(1) translateZ(0) rotateZ(0); } } @-webkit-keyframes erp-popover-hide { 0% { opacity: 1; transform: scale(1) translateZ(0) rotateZ(0); } 99% { opacity: 0; transform: scale(0.3) translateZ(0) rotateZ(0); width: var(--erp-menu-popover-width); height: var(--erp-menu-popover-height); overflow: visible; } 100% { opacity: 0; transform: scale(0.3) translateZ(0) rotateZ(0); width: 0; height: 0; overflow: hidden; } } /* Menu flutuante do ERP - Overflay */ .erp-menu-popover-overlay { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 200; display: none; } .erp-menu-popover-overlay.visible { display: block; } /* Menu flutuante do ERP - Efeito no background ao abrir o menu */ #conteudoWrapper { transform: scale(1) translateZ(0) rotateZ(0); opacity: 1; } #conteudoWrapper { transition: opacity .4s cubic-bezier(.32, .08, .24, 1), transform .4s cubic-bezier(.32, .08, .24, 1); } #conteudoWrapper.fade { opacity: .4; transform: scale(.95) translateZ(0) rotateZ(0); } /* ---------------------------------------- */ /* PRIMEFACES MAIS FLAT */ /* ---------------------------------------- */ /* Prime: mais flat */ .ui-widget, .ui-widget-header, .ui-state-default { background-image: none !important; } /* Prime: tom mais claro (sobre o css original do prime) */ .ui-widget-header { background: #eee; } .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { background: #f1f1f1; } .ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus { background: #0b61a4; } .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { background: #ffffff; } /* Prime: tom mais claro (sobre o css do websupport) */ .ui-tabs-nav.ui-widget-header .ui-state-active { background: #f4f4f4; } .ui-tabs-nav.ui-widget-header .ui-state-hover { background: #0b61a4; } .ui-tabs-nav.ui-widget-header .ui-state-active.ui-state-hover { background: #f4f4f4; }