/* ================================================================== PPR — casca da aplicacao (barra superior, menu lateral, conteudo) ------------------------------------------------------------------ Layout em grid fixo: a barra superior ocupa a largura toda, o menu lateral rola de forma independente do conteudo. Antes o layout era uma `row` do Bootstrap dentro de um `vh-100`, o que fazia o menu rolar junto com a pagina e obrigava a inventar alturas com calc(). ================================================================== */ /* ── Reset da casca ───────────────────────────────────────────── */ html, body { height: 100%; } body { margin: 0; font-family: var(--g-font); font-size: 14px; color: var(--g-text); background: var(--g-bg); -webkit-font-smoothing: antialiased; } .ppr-shell { display: grid; grid-template-rows: var(--g-topbar-h) 1fr; grid-template-columns: var(--g-sidebar-w) 1fr; grid-template-areas: 'topbar topbar' 'sidebar main'; height: 100vh; overflow: hidden; transition: grid-template-columns .18s ease; } /* Menu recolhido: vira uma faixa de icones. O estado mora no (classe) e e persistido em localStorage pelo app-shell.js. */ body.ppr-sidebar-collapsed .ppr-shell { grid-template-columns: var(--g-sidebar-rail) 1fr; } /* Sem menu (login, telas anonimas) */ .ppr-shell.ppr-shell--bare { grid-template-columns: 1fr; grid-template-areas: 'topbar' 'main'; } /* ── Barra superior ───────────────────────────────────────────── */ .ppr-topbar { grid-area: topbar; display: flex; align-items: center; gap: 14px; padding: 0 18px; background: var(--g-bar); color: var(--g-bar-fg); box-shadow: var(--g-shadow); z-index: 30; } .ppr-topbar__logo img { height: 30px; width: auto; display: block; } /* Marca do cliente, ao lado da marca Gradus. Vem de ferramentas/ambientes.py e so existe fora do ambiente padrao. */ .ppr-topbar__cliente img { height: 22px; width: auto; display: block; } .ppr-topbar__sep { width: 1px; height: 30px; background: var(--g-bar-line); flex-shrink: 0; } .ppr-topbar__title { font-size: 14px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; } .ppr-topbar__title small { display: block; font-size: 11px; font-weight: 400; color: var(--g-bar-fg-dim); letter-spacing: .04em; text-transform: uppercase; } .ppr-topbar__spacer { flex: 1; } .ppr-topbar__right { display: flex; align-items: center; gap: 8px; } .ppr-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid transparent; border-radius: var(--g-r-sm); background: transparent; color: inherit; cursor: pointer; transition: background .12s ease, border-color .12s ease; } .ppr-topbar .ppr-iconbtn { color: var(--g-bar-fg-dim); } .ppr-topbar .ppr-iconbtn:hover, .ppr-topbar .ppr-iconbtn:focus-visible { background: var(--g-bar-hover); color: var(--g-bar-fg); outline: none; } .ppr-user { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--g-bar-fg-dim); max-width: 260px; } .ppr-user__avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--g-bar-chip); color: var(--g-bar-chip-fg); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .ppr-user__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ppr-btn-logout { border: 1px solid var(--g-bar-borda); background: transparent; color: var(--g-bar-fg); border-radius: var(--g-r-sm); font-size: 12px; padding: 5px 12px; cursor: pointer; transition: background .12s ease; } .ppr-btn-logout:hover { background: var(--g-bar-hover); } /* ── Seletor de ambiente (so staff) ───────────────────────────────── Fica colado no bloco do usuario porque e uma propriedade de quem esta olhando, nao da pagina. O rotulo some em tela estreita; o e pintado pelo sistema, nao pela barra: sem isto, num ambiente de barra clara as opcoes saem branco sobre branco. */ .ppr-amb__select option { color: var(--g-text-strong); background: var(--g-surface); } .ppr-amb__select:focus-visible { outline: 2px solid var(--g-bar-fg); outline-offset: 1px; } @media (max-width: 1200px) { .ppr-amb__label { display: none; } } @media (max-width: 900px) { .ppr-amb { display: none; } } /* ── Menu lateral ─────────────────────────────────────────────── */ .ppr-sidebar { grid-area: sidebar; display: flex; flex-direction: column; min-height: 0; background: var(--g-surface); border-right: 1px solid var(--g-border); overflow: hidden; } .ppr-sidebar__search { padding: 12px 12px 10px; border-bottom: 1px solid var(--g-border); flex-shrink: 0; } .ppr-search { position: relative; } .ppr-search input { width: 100%; height: 34px; padding: 0 30px 0 30px; font-size: 13px; font-family: inherit; color: var(--g-text-strong); background: var(--g-surface-2); border: 1px solid transparent; border-radius: var(--g-r); transition: border-color .12s ease, background .12s ease; } .ppr-search input:focus { outline: none; background: #fff; border-color: var(--g-blue); box-shadow: 0 0 0 3px rgba(41, 109, 183, .14); } .ppr-search input::placeholder { color: var(--g-text-faint); } .ppr-search__icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--g-text-faint); font-size: 12px; pointer-events: none; } .ppr-search__clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border: none; background: transparent; color: var(--g-text-faint); cursor: pointer; border-radius: 50%; display: none; } .ppr-search__clear:hover { background: var(--g-surface-2); color: var(--g-text); } .ppr-search.is-filled .ppr-search__clear { display: block; } .ppr-sidebar__nav { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 8px 20px; } .ppr-sidebar__nav::-webkit-scrollbar { width: 8px; } .ppr-sidebar__nav::-webkit-scrollbar-thumb { background: var(--g-border-2); border-radius: 4px; } /* Categoria (o agrupamento novo, definido em codigo) */ .ppr-cat { margin-bottom: 2px; } .ppr-cat__head { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 9px; border: none; background: transparent; color: var(--g-text-strong); font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; text-align: left; border-radius: var(--g-r-sm); cursor: pointer; } .ppr-cat__head:hover { background: var(--g-surface-2); } .ppr-cat__icon { width: 16px; text-align: center; color: var(--g-blue); font-size: 13px; flex-shrink: 0; } .ppr-cat__label { flex: 1; } .ppr-cat__count { font-size: 11px; font-weight: 600; color: var(--g-text-faint); background: var(--g-surface-2); border-radius: 9px; padding: 1px 7px; } .ppr-cat__chevron { font-size: 10px; color: var(--g-text-faint); transition: transform .15s ease; } .ppr-cat.is-open .ppr-cat__chevron { transform: rotate(90deg); } .ppr-cat__body { display: none; padding: 2px 0 6px; } .ppr-cat.is-open .ppr-cat__body { display: block; } /* Subgrupo = o GrupoFerramenta do banco, preservado como esta */ .ppr-group__label { padding: 6px 10px 3px 34px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--g-text-faint); } .ppr-tool { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 34px; font-size: 13px; color: var(--g-text); text-decoration: none; border-radius: var(--g-r-sm); border-left: 3px solid transparent; position: relative; } .ppr-tool:hover { background: var(--g-blue-soft); color: var(--g-text-strong); text-decoration: none; } .ppr-tool.is-active { background: var(--g-accent-soft); border-left-color: var(--g-accent); color: var(--g-text-strong); font-weight: 600; } .ppr-tool__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ppr-tool__tag { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 1px 5px; border-radius: 3px; background: var(--g-surface-2); color: var(--g-text-faint); flex-shrink: 0; } .ppr-tool__tag--dev { background: #FDF3E3; color: #8A5A0B; } /* ── Favoritar ────────────────────────────────────────────────────── No menu, cada ferramenta e uma linha com o link e a estrela lado a lado. A estrela so aparece no hover (ou quando ja esta ligada), senao o menu vira um paredao de icones. ------------------------------------------------------------------ */ .ppr-tool-row { display: flex; align-items: center; } .ppr-tool-row .ppr-tool { flex: 1; min-width: 0; } /* O fundo do hover pertence a linha inteira: sem isto, passar o mouse na estrela apagava o realce do link ao lado. */ .ppr-tool-row:hover .ppr-tool { background: var(--g-blue-soft); color: var(--g-text-strong); } .ppr-tool-row:hover .ppr-tool.is-active { background: var(--g-accent-soft); } .ppr-fav { display: inline-flex; align-items: center; gap: 6px; padding: 4px; border: 0; background: transparent; color: var(--g-text-faint); cursor: pointer; border-radius: var(--g-r-sm); line-height: 0; flex-shrink: 0; } .ppr-fav__estrela { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; transition: fill .12s ease, stroke .12s ease, transform .12s ease; } .ppr-fav:hover { color: var(--g-accent-ink); background: var(--g-accent-soft); } .ppr-fav:hover .ppr-fav__estrela { transform: scale(1.12); } .ppr-fav.is-on { color: var(--g-accent-ink); } .ppr-fav.is-on .ppr-fav__estrela { fill: currentColor; } .ppr-fav:focus-visible { outline: 2px solid var(--g-blue); outline-offset: 1px; } /* Piscada vermelha quando o servidor recusa — o estado nao muda, e o usuario precisa perceber que nao mudou. */ .ppr-fav.is-erro { color: var(--g-bordo); } /* No menu: some quando a linha nao esta sob o mouse e a ferramenta nao e favorita. `:focus-within` mantem o caminho pelo teclado. */ .ppr-fav--menu { margin-right: 4px; opacity: 0; transition: opacity .12s ease; } .ppr-tool-row:hover .ppr-fav--menu, .ppr-tool-row:focus-within .ppr-fav--menu, .ppr-fav--menu.is-on { opacity: 1; } /* Na pagina da ferramenta a estrela vem com rotulo, como botao de verdade. */ .ppr-fav--pagina { padding: 6px 12px; border: 1px solid var(--g-border); background: var(--g-surface); font-size: 13px; font-weight: 600; line-height: 1.2; } .ppr-fav--pagina .ppr-fav__estrela { width: 16px; height: 16px; } .ppr-fav--pagina.is-on { border-color: var(--g-accent); background: var(--g-accent-soft); } .ppr-fav--pagina .ppr-fav__rotulo { line-height: 1.2; } /* Itens de servico no rodape do menu (solicitar ferramenta, admin...) */ .ppr-sidebar__footer { border-top: 1px solid var(--g-border); padding: 8px; flex-shrink: 0; background: var(--g-surface); } .ppr-link { display: flex; align-items: center; gap: 10px; padding: 7px 10px; font-size: 13px; color: var(--g-text); text-decoration: none; border-radius: var(--g-r-sm); } .ppr-link:hover { background: var(--g-surface-2); color: var(--g-text-strong); text-decoration: none; } .ppr-link i { width: 16px; text-align: center; color: var(--g-text-faint); } /* Resultado vazio da busca */ .ppr-empty { padding: 24px 14px; text-align: center; font-size: 13px; color: var(--g-text-faint); } /* ── Menu recolhido ───────────────────────────────────────────── */ body.ppr-sidebar-collapsed .ppr-sidebar__search, body.ppr-sidebar-collapsed .ppr-cat__label, body.ppr-sidebar-collapsed .ppr-cat__count, body.ppr-sidebar-collapsed .ppr-cat__chevron, body.ppr-sidebar-collapsed .ppr-cat__body, body.ppr-sidebar-collapsed .ppr-group__label, body.ppr-sidebar-collapsed .ppr-link span { display: none !important; } body.ppr-sidebar-collapsed .ppr-cat__head, body.ppr-sidebar-collapsed .ppr-link { justify-content: center; padding-left: 0; padding-right: 0; } body.ppr-sidebar-collapsed .ppr-sidebar__nav { padding: 8px 4px; } /* ── Area de conteudo ─────────────────────────────────────────── */ .ppr-main { grid-area: main; min-width: 0; min-height: 0; overflow-y: auto; background: var(--g-bg); } .ppr-page { padding: 22px 26px 60px; max-width: 1400px; } .ppr-page h1, .ppr-page h2 { color: var(--g-text-strong); font-weight: 700; letter-spacing: -.01em; } .ppr-page h2 { font-size: 22px; } .ppr-card { background: var(--g-surface); border: 1px solid var(--g-border); border-radius: var(--g-r-lg); box-shadow: var(--g-shadow); padding: 22px 24px; } /* Linha de accent no topo dos cards, navy -> azul de marca */ .ppr-card--accent { position: relative; overflow: hidden; } .ppr-card--accent::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--g-bar), var(--g-blue), var(--g-accent)); } /* ── Modo foco / tela cheia ───────────────────────────────────── */ /* Esconde barra superior e menu. Vale para qualquer pagina, nao so para as ferramentas freeform. */ body.ppr-fullscreen .ppr-topbar, body.ppr-fullscreen .ppr-sidebar { display: none !important; } body.ppr-fullscreen .ppr-shell { grid-template-rows: 1fr; grid-template-columns: 1fr; grid-template-areas: 'main'; } /* Aviso discreto de como sair */ .ppr-fs-hint { position: fixed; top: 10px; right: 14px; z-index: 2000; display: none; padding: 5px 11px; font-size: 11.5px; border-radius: 20px; background: rgba(0, 32, 96, .82); color: #fff; pointer-events: none; transition: opacity .4s ease; } body.ppr-fullscreen .ppr-fs-hint { display: block; } /* ── Responsivo ───────────────────────────────────────────────── */ @media (max-width: 900px) { .ppr-shell { grid-template-columns: 1fr; grid-template-areas: 'topbar' 'main'; } .ppr-sidebar { position: fixed; top: var(--g-topbar-h); bottom: 0; left: 0; width: var(--g-sidebar-w); z-index: 40; transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--g-shadow-lg); } body.ppr-sidebar-open .ppr-sidebar { transform: translateX(0); } body.ppr-sidebar-collapsed .ppr-sidebar { transform: translateX(-100%); } .ppr-page { padding: 16px 14px 48px; } }