/* * Tema do módulo Implantação — ativo quando tem a classe * `implantacao-mode` (aplicada por Scripts/eam/implantacao/shared/services/ * implantacao-context.run.js sincronizado com window.location.pathname). * * Aproxima visualmente o SmartAdmin Dark do antigo Treetech.Implantacao.WebUI: * - Aside fixo à esquerda (fundo quase-preto #333) com user-info e menu * aninhado (Administrativo + Implantação, Relatórios em sub-grupo). * - Header próprio escuro (#31343C) substituindo o #aam-menu do EAM. * - Ribbon com breadcrumb. * - Conteúdo em fundo claro cinza. * - Tipografia Open Sans (mesma fonte Google usada pelo SmartAdmin original). * * Fora do modo implantacao, os componentes eam.implantacao.* ficam * escondidos — comportamento padrão via `html:not(.implantacao-mode)`. */ /* ------------------------------------------------------------------ */ /* 1. Esconder UI do EAM dentro do modo implantacao */ /* ------------------------------------------------------------------ */ /* O navbar principal do EAM (#aam-menu) é completamente substituído pelo header próprio da Implantação. Isto remove logo AAM, search, notificações, user dropdown e logout do EAM. */ html.implantacao-mode #aam-menu { display: none !important; } /* Faixa roxa de título do EAM — sumir pro header próprio ser o único anúncio do contexto. */ html.implantacao-mode .sistema-interna { display: none !important; } /* Footer do EAM (_NavBottom — "EAM - Enterprise Asset Management vN.N.N"). */ html.implantacao-mode .navbar-fixed-bottom { display: none !important; } /* Reset de padding do body (bootstrap aplica pra acomodar a navbar fixa) + pinta o fundo com a mesma cor do conteúdo da Implantação pra que nenhum branco residual apareça à direita ou abaixo do .implantacao-content, independente do tamanho da viewport e do estado (minified ou não) do aside. */ html.implantacao-mode, html.implantacao-mode body { padding-top: 0 !important; padding-bottom: 0 !important; margin: 0; background: #f4f5f9; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; overflow: hidden; height: 100vh; } /* Cadeia inteira de wrappers pintada — qualquer gap de flow fica invisível (mesma cor do conteúdo). #aam-main em si mantém seu padding (pra dar espaço ao header/aside fixos), mas os wrappers internos (.container + divs aninhados) zeram qualquer margem/ padding/width injetados pelo Bootstrap. */ html.implantacao-mode #aam-main { background: #f4f5f9 !important; } html.implantacao-mode #aam-main > .container, html.implantacao-mode #aam-main > .container > div, html.implantacao-mode #aam-main > .container > div > div { background: #f4f5f9 !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } /* Imagens não podem empurrar o conteúdo além do viewport — isto elimina o scroll horizontal quando o logo da home (936px) entra em viewport mais estreito. */ html.implantacao-mode .implantacao-content img { max-width: 100%; height: auto; } /* ------------------------------------------------------------------ */ /* 2. Componentes IMP só aparecem em implantacao-mode */ /* ------------------------------------------------------------------ */ html:not(.implantacao-mode) eam\.implantacao\.aside, html:not(.implantacao-mode) eam\.implantacao\.header, html:not(.implantacao-mode) eam\.implantacao\.ribbon { display: none !important; } html.implantacao-mode eam\.implantacao\.aside, html.implantacao-mode eam\.implantacao\.header, html.implantacao-mode eam\.implantacao\.ribbon { display: block; } /* ------------------------------------------------------------------ */ /* 3. Header próprio (substitui #aam-menu) — réplica do #header do */ /* SmartAdmin antigo. Mesma estrutura (header > #logo-group + */ /* #top-right > .btn-header), mesmas cores, mesmas proporções. */ /* ------------------------------------------------------------------ */ html.implantacao-mode #header { position: fixed; top: 0; left: 0; right: 0; height: 49px; background: #f3f3f3; border-bottom: 1px solid #dcdcdc; z-index: 1030; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; } html.implantacao-mode #header:after { /* Limpa os floats dos filhos (#logo-group à esquerda, #top-right à direita) sem precisar de wrapper extra — mesma técnica do SmartAdmin. */ content: ''; display: block; clear: both; } html.implantacao-mode #logo-group { float: left; width: 220px; height: 49px; line-height: 49px; padding: 0 0 0 11px; background: #f3f3f3; overflow: hidden; white-space: nowrap; } html.implantacao-mode #logo { display: inline-block; height: 49px; line-height: 49px; color: #3a3633; font-size: 14px; font-weight: 400; vertical-align: middle; text-decoration: none; } html.implantacao-mode #logo > img { width: 32px; height: 32px; margin-right: 5px; vertical-align: middle; display: inline-block; } html.implantacao-mode #top-right { display: block; float: right; height: 49px; } /* Container .pull-right dentro de #top-right — segura os botões na direita e nivela a altura. */ html.implantacao-mode #top-right > .pull-right { height: 49px; } /* Botões da direita (hide-menu + logout) — .btn-header é o nome usado pelo SmartAdmin em
. */ html.implantacao-mode .btn-header { float: right; height: 49px; position: relative; } html.implantacao-mode .btn-header > span { display: block; height: 49px; width: 49px; } html.implantacao-mode .btn-header > span > a { display: flex; align-items: center; justify-content: center; width: 49px; height: 49px; color: #5a5a5a; background: transparent; border-left: 1px solid #dcdcdc; font-size: 18px; text-decoration: none; transition: background 0.15s, color 0.15s; } html.implantacao-mode .btn-header > span > a:hover, html.implantacao-mode .btn-header > span > a:focus { background: #e6e6e6; color: #222; text-decoration: none; } /* .btn-header.transparent (logout) — no SmartAdmin, essa variante remove o fundo extra pra ficar mais sóbria. */ html.implantacao-mode .btn-header.transparent > span > a { background: transparent; } html.implantacao-mode #logout > span > a:hover { background: #a90329; color: #ffffff; } /* ------------------------------------------------------------------ */ /* 4. Aside fixo à esquerda — valores copiados do SmartAdmin original */ /* (smartadmin-production.min.css do antigo IMP). */ /* ------------------------------------------------------------------ */ html.implantacao-mode #left-panel { position: fixed; top: 49px; /* altura do #header próprio */ left: 0; bottom: 0; width: 220px; background: #3a3633; overflow-y: auto; overflow-x: hidden; z-index: 1020; padding: 0; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; } html.implantacao-mode #left-panel::-webkit-scrollbar { width: 6px; } html.implantacao-mode #left-panel::-webkit-scrollbar-thumb { background: #555; border-radius: 3px; } /* .login-info — replica do
do SmartAdmin. */ html.implantacao-mode #left-panel .login-info { display: block; position: relative; font-size: 12px; height: 39px; color: #fff; width: 100%; margin: 0; border-bottom: 1px solid #525151; padding: 0 4px; } html.implantacao-mode #left-panel .login-info a { text-decoration: none; color: #c0bbb7; display: inline-block; margin-top: 6px; } html.implantacao-mode #left-panel .login-info a:hover { color: #fff; text-decoration: none; } html.implantacao-mode #left-panel .login-info a span { text-transform: capitalize; font-size: 14px; display: inline-block; vertical-align: middle; max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: transparent; padding: 0; } html.implantacao-mode #left-panel .login-info a i.fa-user { vertical-align: middle; margin-right: 4px; } /* nav ul — lista principal. */ html.implantacao-mode #left-panel nav { display: block; } html.implantacao-mode #left-panel nav ul { width: 100%; padding: 0; margin: 0; font-size: 13px; list-style: none; position: relative; } html.implantacao-mode #left-panel nav ul li { position: relative; list-style: none; margin: 0; padding: 0; } html.implantacao-mode #left-panel nav ul li a { line-height: normal; font-size: 14px; padding: 10px 10px 10px 11px; color: #c0bbb7; display: block; font-weight: 400; text-decoration: none; position: relative; background: transparent; cursor: pointer; } html.implantacao-mode #left-panel nav ul li a:hover, html.implantacao-mode #left-panel nav ul li a:focus { color: #fff; text-decoration: none; } html.implantacao-mode #left-panel nav ul li a:active { background: #616161; } html.implantacao-mode #left-panel nav ul li.open > a, html.implantacao-mode #left-panel nav ul li.open > a b { color: #fff; } /* — seta +/- no canto direito. */ html.implantacao-mode #left-panel nav ul b { float: right; font-size: 11px; margin-top: 2px; background: transparent; color: inherit; padding: 0; } html.implantacao-mode #left-panel nav > ul > li > a b { position: absolute; right: 10px; top: 10px; } /* Ícone à esquerda do label — gap entre ícone e texto via margin-right. */ html.implantacao-mode #left-panel nav > ul > li > a > i { margin-right: 10px; width: 15px; display: inline-block; text-align: center; position: relative; } html.implantacao-mode #left-panel nav ul span.menu-item-parent { display: inline-block; margin: 0; padding: 0; background: transparent; color: inherit; font-size: 14px; } /* Submenu (nível 2 — itens dentro de Administrativo/Implantação). */ html.implantacao-mode #left-panel nav ul ul { margin: 0; background: rgba(69, 69, 69, 0.6); padding: 7px 0; } html.implantacao-mode #left-panel nav ul ul li > a { padding: 7px 10px 7px 42px; font-size: 14px; font-weight: 400; color: #c0bbb7; } html.implantacao-mode #left-panel nav ul ul li > a:hover { background-color: rgba(69, 69, 69, 0.8); color: #fff; } html.implantacao-mode #left-panel nav ul ul li.active > a { background-color: rgba(69, 69, 69, 0.9); color: #fff; } /* Sub-submenu (nível 3 — itens dentro de Relatórios). */ html.implantacao-mode #left-panel nav ul ul ul { background: transparent; padding: 0; } html.implantacao-mode #left-panel nav ul ul ul li a { color: #bfbfbf; padding: 8px 10px 8px 60px; font-size: 14px; } html.implantacao-mode #left-panel nav ul ul ul li a:hover { color: #fff; } html.implantacao-mode #left-panel nav ul ul ul li.active > a { color: #fff; } /* Linha vertical conectora no submenu (::before do SmartAdmin). */ html.implantacao-mode #left-panel nav > ul > li > ul { position: relative; } html.implantacao-mode #left-panel nav > ul > li > ul::before { content: ""; display: block; position: absolute; z-index: 1; left: 23px; top: 0; bottom: 0; border-left: 1px solid #7a7a7a; } /* Botão minifyme — do SmartAdmin. */ html.implantacao-mode #left-panel .minifyme { border-bottom: 1px solid #302f2f; background: #454545; color: #a8a8a8; text-align: center; padding: 0; width: 36px; height: 28px; display: block; position: absolute; right: 0; border-radius: 5px 0 0 5px; cursor: pointer; margin-top: 7px; font-size: 19px; line-height: 28px; transition: all 0.1s linear 0s; text-decoration: none; } html.implantacao-mode #left-panel .minifyme:hover { background: #646464; color: #E4E4E4; width: 40px; padding-right: 5px; } /* ------------------------------------------------------------------ */ /* 5. Ribbon (breadcrumb) e conteúdo principal */ /* ------------------------------------------------------------------ */ /* Valores copiados do #ribbon do SmartAdmin antigo pra bater 1:1 (smartadmin-production.min.css default skin). */ .implantacao-ribbon { min-height: 40px; background: #474544; padding: 0 13px; position: relative; } .implantacao-ribbon .breadcrumb { display: inline-block; margin: 0; padding: 11px 34px 11px 0 !important; background: transparent; border-radius: 0; vertical-align: top; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal !important; text-shadow: none; } .implantacao-ribbon .breadcrumb, .implantacao-ribbon .breadcrumb a { color: #BBB !important; text-decoration: none !important; font-weight: normal !important; } .implantacao-ribbon .breadcrumb > li { display: inline-block; font-weight: normal !important; } /* Separador "/" — mesmo do bootstrap.min.css que o IMP antigo carregava. */ .implantacao-ribbon .breadcrumb > li + li:before { content: "/\00a0"; padding: 0 5px; color: #ccc; font-weight: normal !important; } .implantacao-ribbon .breadcrumb > li:last-child, .implantacao-ribbon .breadcrumb > li.active, .implantacao-ribbon .breadcrumb > .active { color: #E4E4E4 !important; font-weight: normal !important; } /* Shell e conteúdo preenchem EXATAMENTE a altura disponível da viewport sem gerar scroll global no body/html. Scroll vertical, se necessário, acontece dentro do .implantacao-content. */ .implantacao-shell { height: calc(100vh - 49px); /* viewport menos header fixo */ background: #f4f5f9; display: flex; flex-direction: column; } .implantacao-main { display: flex; flex-direction: column; flex: 1; min-height: 0; /* permite flex child scroll internamente */ background: #f4f5f9; } .implantacao-content { flex: 1; min-height: 0; padding: 10px 14px 20px 14px; background: #f4f5f9; overflow-y: auto; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; } /* Shift o layout principal do SAM.WebUI pra acomodar o aside fixo (à esquerda) e o header fixo (no topo). */ html.implantacao-mode #aam-main { padding-left: 220px; padding-top: 49px; } /* Regra duplicada da sessão anterior — as regras com !important acima (logo após o reset do body) já cobrem .container e seus filhos. */ /* ------------------------------------------------------------------ */ /* 6. Estados minified e hidden (SmartAdmin toggleMenu / minifyMenu) */ /* ------------------------------------------------------------------ */ /* Minified: aside encolhe pra 45px de largura, ícones visíveis, texto some. Equivale ao body.minified do SmartAdmin. */ html.implantacao-minified #left-panel { width: 45px; } html.implantacao-minified.implantacao-mode #aam-main { padding-left: 45px; } /* Esconde labels, collapse-sign e submenus inteiros. */ html.implantacao-minified #left-panel .login-info a span, html.implantacao-minified #left-panel nav > ul > li > a > .menu-item-parent, html.implantacao-minified #left-panel nav > ul > li > a > b, html.implantacao-minified #left-panel nav > ul > li > ul { display: none; } html.implantacao-minified #left-panel .login-info { padding: 0; text-align: center; } html.implantacao-minified #left-panel .login-info a { margin-top: 6px; display: inline-block; } html.implantacao-minified #left-panel .login-info a i.fa-user { margin-right: 0; } html.implantacao-minified #left-panel nav > ul { text-align: center; } html.implantacao-minified #left-panel nav > ul > li > a { padding: 10px 0; text-align: center; display: block; } /* Ícone vira inline-block (em vez do width:15 do SmartAdmin base) pra que o text-align: center do realmente o centralize na barra de 45 px. */ html.implantacao-minified #left-panel nav > ul > li > a > i { margin: 0; display: inline-block; width: auto; text-align: center; float: none; } html.implantacao-minified #left-panel .minifyme { position: relative; width: 100%; border-radius: 0; margin: 0; height: 34px; font-size: 23px; line-height: 34px; color: #a8a8a8; background: #454545; } /* Logo-group também encolhe quando aside está minified. */ html.implantacao-minified #logo-group { width: 45px; padding: 0; text-align: center; } html.implantacao-minified #logo { font-size: 0; } html.implantacao-minified #logo > img { margin-right: 0; } /* Em viewports pequenos, colapsa o aside pra não sobrepor conteúdo. */ @media (max-width: 768px) { html.implantacao-mode #left-panel { position: static; width: 100%; top: auto; height: auto; border-right: none; border-bottom: 1px solid #1c1f25; } html.implantacao-mode #aam-main { padding-left: 0; } html.implantacao-mode #logo-group { width: auto; } }