/* ========================================================================= App shell — barra superior + menu lateral colapsável (padrão de apps novos) Namespace próprio (.app-*) para NÃO colidir com o .sidebar do ambiente de curso (academia/treinamento), que vive em sidebar.css. Cores herdadas das variáveis de tema (theme.css) → reage aos 4 temas. ========================================================================= */ :root { --sidebar-width: 248px; --sidebar-rail: 60px; --topbar-h: 56px; } /* Anti-FOUC: esconde elementos com bindings {{ }} até o AngularJS compilar. Fica aqui (CSS do , render-blocking) p/ valer já no 1º paint, antes do angular.js carregar (os ~530 scripts vêm no fim da página). */ [ng-cloak], [data-ng-cloak], .ng-cloak { display: none !important; } /* largura da "zona da marca" (acoplada à largura da sidebar: expandida ou rail) */ :root { --chrome-split: var(--sidebar-width); } body.sidebar-rail { --chrome-split: var(--sidebar-rail); } /* ---------- Top bar (fixa no topo, largura total) ---------- */ .app-topbar { position: fixed; top: 0; left: 0; right: 0; height: var(--topbar-h); display: flex; align-items: center; gap: 8px; padding: 0; background: var(--navbar-bg); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); z-index: 1031; } /* zona da marca: alinhada à sidebar (mesma largura), segue o tema do menu */ .app-topbar__brandzone { flex: 0 0 var(--chrome-split); align-self: stretch; display: flex; align-items: center; gap: 8px; padding: 0 16px; overflow: hidden; transition: flex-basis .2s ease; } .app-topbar__burger { border: 0; background: transparent; color: var(--text); font-size: 20px; line-height: 1; width: 40px; height: 40px; border-radius: var(--radius-sm); cursor: pointer; flex: 0 0 auto; } .app-topbar__burger:hover { background: var(--surface-2); color: var(--accent); } .app-topbar__brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; text-decoration: none; white-space: nowrap; } .app-topbar__brand:hover, .app-topbar__brand:focus { color: var(--text); text-decoration: none; } .app-topbar__brand img { max-height: 24px; } .app-topbar__spacer { flex: 1 1 auto; } /* área de ações à direita (notificações, tema, usuário) */ .app-topbar__actions { list-style: none; margin: 0; padding: 0 20px 0 0; display: flex; align-items: center; gap: 2px; flex: 0 0 auto; } /* Com a busca presente (interno), as margens auto da busca já centralizam e empurram as ações p/ a direita. Sem busca (cliente externo), as ações precisam do margin-left:auto p/ ir à direita. */ body.app-external .app-topbar__actions { margin-left: auto; } .app-topbar__actions > li { position: relative; } .app-topbar__actions > li > a, .app-topbar__actions > li > .app-topbar__btn { display: flex; align-items: center; gap: 6px; padding: 8px 10px; color: var(--text); text-decoration: none; border-radius: var(--radius-sm); cursor: pointer; border: 0; background: transparent; white-space: nowrap; } .app-topbar__actions > li > a:hover, .app-topbar__actions > li.open > a, .app-topbar__actions > li > .app-topbar__btn:hover { background: var(--surface-2); color: var(--accent); } .app-topbar__actions .badge-notification { margin-left: 2px; } /* dropdowns da top bar herdam o tema (regras de .dropdown-menu já em theme.css) */ .app-topbar__actions .dropdown-menu { right: 0; left: auto; } /* swatch do seletor de tema */ .app-theme-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--border); vertical-align: middle; margin-right: 6px; } /* menu de tema: largura suficiente p/ "Padrão do sistema" + o check numa única linha */ .app-theme-menu { min-width: 210px; } .app-theme-menu > li > a { white-space: nowrap; } /* ---------- Busca de menu (top bar, cross-módulo, Ctrl+K) ---------- */ .app-search { position: relative; flex: 0 1 480px; max-width: 480px; margin: 0 auto; } .app-search__icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; opacity: .55; pointer-events: none; } .app-search__input { width: 100%; height: 36px; padding: 0 58px 0 34px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); outline: none; } .app-search__input::placeholder { color: var(--text-muted); } .app-search__input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .app-search__kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: 10px; font-weight: 600; letter-spacing: .03em; color: var(--text-muted); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; background: var(--surface-2); pointer-events: none; } .app-search__results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1035; list-style: none; margin: 0; padding: 6px; max-height: 64vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .app-search__item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm); color: var(--text); text-decoration: none; } .app-search__item:hover, .app-search__item:focus { text-decoration: none; } .app-search__item-icon { width: 18px; text-align: center; color: var(--text-muted); flex: 0 0 auto; } .app-search__item-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-search__item-mod { flex: 0 0 auto; font-size: .78em; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 1px 8px; white-space: nowrap; } .app-search__results li.app-search__item--active .app-search__item, .app-search__item:hover { background: var(--accent-soft); color: var(--accent); } .app-search__results li.app-search__item--active .app-search__item-icon, .app-search__item:hover .app-search__item-icon { color: var(--accent); } /* mobile: a busca vai p/ uma 2ª linha full-width (a top bar cresce); some o atalho. O conteúdo ganha padding-top extra p/ não ficar atrás da top bar de 2 linhas. */ @media (max-width: 768px) { .app-topbar { flex-wrap: wrap; height: auto; min-height: var(--topbar-h); padding-bottom: 8px; } .app-search { order: 10; flex: 1 1 100%; max-width: none; margin: 2px 0 0; } .app-search__kbd { display: none; } body.app-authenticated:not(.app-no-chrome) .app-content { padding-top: 46px; } } /* ---------- Sidebar (fixa à esquerda, abaixo da top bar) ---------- */ .app-sidebar { position: fixed; top: var(--topbar-h-real, var(--topbar-h)); left: 0; bottom: 0; width: var(--sidebar-width); overflow-y: auto; overflow-x: hidden; background: var(--surface); border-right: 1px solid var(--border); z-index: 1029; transition: width .2s ease, transform .2s ease; } .app-nav { list-style: none; margin: 0; padding: 8px 0; } .app-nav__group { position: relative; } .app-nav__item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; color: var(--text); text-decoration: none; cursor: pointer; border-left: 3px solid transparent; } .app-nav__item:hover, .app-nav__item:focus { background: var(--surface-2); color: var(--accent); text-decoration: none; } .app-nav__icon { flex: 0 0 auto; width: 20px; text-align: center; font-size: 16px; } .app-nav__label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-nav__caret { flex: 0 0 auto; transition: transform .15s ease; opacity: .6; } .app-nav__caret--open { transform: rotate(180deg); } /* submenu (accordion inline) */ .app-nav__submenu { list-style: none; margin: 0; padding: 2px 0 6px; background: var(--surface-2); } .app-nav__subitem { display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 42px; color: var(--text-muted); text-decoration: none; font-size: .95em; } .app-nav__subitem:hover, .app-nav__subitem:focus { background: var(--surface); color: var(--accent); text-decoration: none; } .app-nav__subitem .glyphicons { width: 18px; text-align: center; } /* divisor entre grupos */ .app-nav__divider { height: 1px; margin: 6px 12px; background: var(--border); } /* ---------- Switcher de módulo (topo da sidebar) ---------- */ .app-module { position: relative; border-bottom: 1px solid var(--border); } .app-module__current { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: var(--text); cursor: pointer; font-weight: 600; text-decoration: none; } .app-module__current:hover, .app-module__current:focus { background: var(--surface-2); color: var(--text); text-decoration: none; } .app-module__text { display: flex; flex-direction: column; line-height: 1.2; flex: 1 1 auto; min-width: 0; } .app-module__text .app-nav__label { font-size: 1.02em; } .app-module__eyebrow { font-size: .68em; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; opacity: .6; } /* backdrop transparente: fecha o painel ao clicar fora */ .app-module__backdrop { position: fixed; inset: 0; z-index: 1032; } /* lista de módulos: painel sobreposto (não empurra os menus; fecha ao escolher) */ .app-module__list { position: absolute; top: 100%; left: 0; width: 100%; z-index: 1033; background: var(--surface); border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); box-shadow: var(--shadow); max-height: 72vh; overflow-y: auto; padding: 6px 0; list-style: none; margin: 0; } .app-module__item { display: flex; align-items: center; gap: 10px; padding: 9px 16px; color: var(--text); text-decoration: none; } .app-module__item:hover, .app-module__item:focus { background: var(--surface-2); color: var(--accent); text-decoration: none; } .app-module__item .glyphicons { width: 18px; text-align: center; } .app-module__divider { height: 1px; margin: 6px 12px; background: var(--border); } /* no rail: só o ícone do módulo; a lista vira flyout à direita */ body.sidebar-rail .app-module__current { justify-content: center; gap: 0; padding: 12px 0; } body.sidebar-rail .app-module__text, body.sidebar-rail .app-module__current .app-nav__caret { display: none; } body.sidebar-rail .app-module__list { left: var(--sidebar-rail); top: 0; width: 248px; border-top: 1px solid var(--border); border-radius: 0 var(--radius) var(--radius) 0; } /* ---------- Conteúdo (deslocado pela sidebar) ---------- */ /* O deslocamento fica no .app-content (NÃO no body). Se ficasse no body, popups anexados ao body que se posicionam por offset (bootstrap-datepicker) calculam left negativo (= -margin) e abrem fora da tela. O body fica com margem 0. O body já tem padding-top ~60px (bodyStyle) reservado para a top bar. */ body.app-authenticated:not(.app-no-chrome) .app-content { margin-left: var(--sidebar-width); transition: margin-left .2s ease; } /* ---------- Estado: mini-rail (desktop) ---------- */ /* overflow visible no rail p/ os flyouts (submenu/módulo) escaparem da faixa estreita sem serem cortados (no rail há poucos ícones, então a rolagem vertical não é necessária). */ body.sidebar-rail .app-sidebar { width: var(--sidebar-rail); overflow: visible; } /* no rail a zona da marca encolhe (só o hambúrguer; o logo some p/ não cortar) */ body.sidebar-rail .app-topbar__brandzone { padding: 0; justify-content: center; } body.sidebar-rail .app-topbar__brand { display: none; } body.app-authenticated.sidebar-rail:not(.app-no-chrome) .app-content { margin-left: var(--sidebar-rail); } body.sidebar-rail .app-nav__label, body.sidebar-rail .app-nav__caret { display: none; } body.sidebar-rail .app-nav__item { justify-content: center; gap: 0; padding: 12px 0; } body.sidebar-rail .app-nav__icon { width: auto; font-size: 18px; } /* no rail, o submenu vira flyout ao passar o mouse no grupo */ body.sidebar-rail .app-nav__submenu { display: none !important; } body.sidebar-rail .app-nav__group:hover > .app-nav__submenu { display: block !important; position: absolute; left: var(--sidebar-rail); top: 0; min-width: 220px; padding: 6px 0; background: var(--surface); border: 1px solid var(--border); border-radius: 0 var(--radius) var(--radius) 0; box-shadow: var(--shadow); z-index: 1032; } body.sidebar-rail .app-nav__group:hover > .app-nav__submenu .app-nav__subitem { padding-left: 16px; } /* ---------- Backdrop (apenas mobile) ---------- */ .app-sidebar__backdrop { display: none; } /* ---------- Largura do conteúdo ---------- O conteúdo usa .container (largura fixa do Bootstrap, centralizado) que não considera a sidebar → sobra margem enorme à esquerda/direita. Dentro do shell o container vira fluido e preenche o espaço ao lado da sidebar. */ .app-content .container, .app-content .container-fluid { width: 100%; max-width: 100%; padding-left: 20px; padding-right: 20px; margin-left: 0; margin-right: 0; } /* ---------- Cabeçalho de seção com ações à direita ---------- Usado nos homes dos módulos: o título "Notificações" (box-subtitle) com botões leves de ação (Atualizar/Limpar) alinhados à direita, no lugar dos cards grandes da antiga seção "Opções". */ .app-section-head { position: relative; } .app-section-actions { position: absolute; top: -2px; right: 0; display: inline-flex; gap: 8px; flex-wrap: wrap; } .app-section-actions .btn { font-weight: 500; } /* botão só-ícone (Atualizar/Limpar): compacto e quadrado */ .app-icon-btn { padding: 5px 9px; line-height: 1; } .app-icon-btn .glyphicon { top: 0; font-size: 14px; } @media (max-width: 600px) { /* em telas estreitas, as ações descem abaixo do título */ .app-section-actions { position: static; margin-bottom: 8px; } } /* ---------- Breadcrumb (Módulo › Página) ---------- */ .app-breadcrumb { display: flex; align-items: center; gap: 8px; padding: 14px 24px 20px; font-size: .92em; color: var(--text-muted); } .app-breadcrumb__home { color: var(--text-muted); display: inline-flex; } .app-breadcrumb__home:hover { color: var(--accent); } .app-breadcrumb__sep { color: var(--text-muted); opacity: .6; } .app-breadcrumb__item { color: var(--text-muted); } .app-breadcrumb__current { color: var(--text); font-weight: 600; } /* ---------- Footer slim/clean (faixa única, no fim do conteúdo) ---------- O footer legado era position:absolute width:100% (=100vw) → estourava a largura por causa da margem da sidebar (barra de rolagem horizontal) e era "gordo". Aqui vira uma faixa fina em fluxo: nome à esquerda, redes no centro, © à direita. */ .app-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-top: 24px; padding: 10px 20px; background: var(--surface-2); border-top: 1px solid var(--border); font-size: .9em; color: var(--text-muted); } .app-footer__brand { color: var(--text-muted); } /* versão de build / "Development" — sem negrito */ .app-footer__copy { color: var(--text-muted); } /* ---------- Responsivo: off-canvas no mobile ---------- */ @media (max-width: 768px) { /* sidebar desliza por cima do conteúdo */ .app-sidebar { width: var(--sidebar-width); transform: translateX(-100%); box-shadow: var(--shadow); } body.sidebar-mobile-open .app-sidebar { transform: translateX(0); } /* no mobile o conteúdo nunca desloca (sidebar é overlay) */ body.app-authenticated:not(.app-no-chrome) .app-content, body.app-authenticated.sidebar-rail:not(.app-no-chrome) .app-content { margin-left: 0; } /* no mobile ignora o rail: mostra rótulos/submenus normais */ body.sidebar-rail .app-nav__label, body.sidebar-rail .app-nav__caret { display: block; } body.sidebar-rail .app-nav__item { justify-content: flex-start; gap: 12px; padding: 10px 16px; } body.sidebar-rail .app-nav__submenu { display: block !important; position: static; box-shadow: none; border: 0; } /* backdrop escurece o conteúdo quando a sidebar está aberta */ body.sidebar-mobile-open .app-sidebar__backdrop { display: block; position: fixed; top: var(--topbar-h-real, var(--topbar-h)); left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .45); z-index: 1028; } /* esconde rótulo do brand em telas estreitas, mantém o ícone */ .app-topbar__brand span { display: none; } /* no mobile a zona da marca não tem largura fixa (sidebar é off-canvas) */ .app-topbar__brandzone { flex: 0 0 auto; padding: 0 8px; } }