/* ============================================================================= Transição entre páginas (client area inteira) — x99-transitions.js View Transitions entre documentos: a página atual fica na tela até a próxima estar pronta (sem tela branca) e só o conteúdo anima. Sidebar, rodapé e fundo ficam parados. Voltar (histórico ou link "Voltar") anima no sentido contrário. Sem suporte do navegador, a troca é a de sempre. ============================================================================= */ @view-transition { navigation: auto; } /* Só o conteúdo tem nome: sidebar, rodapé e fundo fazem parte do root, que troca na hora (sem imagem própria da sidebar, que mostrava a borda). O fundo do é o do tema: nenhuma margem aparece branca durante a troca. */ html { background-color: var(--c-bg-base); } /* Controles nativos, barras de rolagem e o canvas entre documentos no tema da página (com "normal" o navegador pintava tudo claro no tema escuro) */ :root { color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } .main-body { view-transition-name: x99-main; } ::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root), ::view-transition-group(x99-main) { animation: none; } ::view-transition-old(x99-main) { animation: x99VtOut var(--dur-fast) cubic-bezier(0.4, 0, 1, 1) both; } ::view-transition-new(x99-main) { animation: x99VtIn var(--dur-med) var(--ease-out) both; } html:active-view-transition-type(x99-back)::view-transition-old(x99-main) { animation-name: x99VtOutBack; } html:active-view-transition-type(x99-back)::view-transition-new(x99-main) { animation-name: x99VtInBack; } @keyframes x99VtOut { to { opacity: 0; transform: translateX(-12px); } } @keyframes x99VtIn { from { opacity: 0; transform: translateX(16px); } } @keyframes x99VtOutBack { to { opacity: 0; transform: translateX(12px); } } @keyframes x99VtInBack { from { opacity: 0; transform: translateX(-16px); } } /* --- Skeleton enquanto a próxima página carrega ---------------------------- */ .main-body > .container { position: relative; } .x99-page-skel { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; gap: 24px; padding-top: 8px; opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out); } html.x99-navigating .main-body > .container > :not(.x99-page-skel) { opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-out); } html.x99-navigating .x99-page-skel { opacity: 1; } /* Skeleton capturado: cópia da estrutura da página de destino (cards, wells, pills e linhas de texto nas posições reais, larguras proporcionais) */ .x99-page-skel.is-captured { display: block; padding: 0; } .x99-page-skel.is-captured > span { position: absolute; display: block; } /* Com geometria do destino: coordenadas da janela (independe da sidebar e do contêiner da página atual); a sidebar continua por cima */ .x99-page-skel.is-captured.is-fixed > span { position: fixed; } .x99-page-skel__box { border-radius: var(--r-xl); background: var(--glass-2-bg); } .x99-page-skel__well { border-radius: var(--r-md); background: var(--glass-well); } .x99-page-skel__pill, .x99-page-skel__text, .x99-page-skel__line { border-radius: var(--r-full); background: linear-gradient(90deg, var(--sh-shimmer-base) 0%, var(--sh-shimmer-peak) 50%, var(--sh-shimmer-base) 100%); background-size: 200% 100%; animation: x99PageSkel 1.5s ease-in-out infinite; } .x99-page-skel__pill { background-color: rgba(var(--text-rgb), 0.04); } /* Modelos por rota (primeira visita) */ .x99-page-skel__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; } .x99-page-skel__pills { display: flex; flex-wrap: wrap; gap: 8px; } .x99-page-skel__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .x99-page-skel__grid.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .x99-page-skel__grid.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .x99-page-skel__cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: stretch; } .x99-page-skel__cols.is-console { flex: 1 1 auto; min-height: calc(100vh - 220px); } .x99-page-skel__cols.is-order { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } .x99-page-skel__head.is-center { flex-direction: column; justify-content: center; gap: 12px; } .x99-page-skel__main, .x99-page-skel__side { display: flex; flex-direction: column; gap: 24px; min-width: 0; } .x99-page-skel__card { display: flex; flex-direction: column; gap: 14px; min-height: 112px; padding: 24px; border-radius: var(--r-xl); background: var(--glass-2-bg); } .x99-page-skel__card.is-mid { min-height: 220px; } .x99-page-skel__card.is-tall { min-height: 280px; } .x99-page-skel__card.is-grow { flex: 1 1 auto; min-height: 240px; } .x99-page-skel__card.is-display { min-height: 100%; padding: 8px; } .x99-page-skel__card.is-list { gap: 0; padding: 8px 24px; } .x99-page-skel__row { display: flex; align-items: center; gap: 16px; min-height: 64px; } .x99-page-skel__line { display: block; height: 12px; } .x99-page-skel__line.is-title { width: 32%; height: 28px; border-radius: var(--r-md); } .x99-page-skel__line.is-pill { width: 112px; height: 36px; } .x99-page-skel__line.is-pill.is-sm { width: 88px; height: 28px; } .x99-page-skel__line.is-pill.is-wide { width: 100%; height: 40px; margin-top: auto; } .x99-page-skel__line.is-label { width: 36%; height: 10px; } .x99-page-skel__line.is-value { width: 62%; height: 20px; border-radius: var(--r-md); } .x99-page-skel__line.is-well { width: 100%; height: 56px; border-radius: var(--r-md); } .x99-page-skel__line.is-chips { width: 100%; height: 28px; } .x99-page-skel__line.is-ring-row { width: 100%; height: 120px; border-radius: var(--r-md); } .x99-page-skel__line.is-dot { flex: 0 0 8px; width: 8px; height: 8px; } .x99-page-skel__line.is-row-main { flex: 0 1 32%; height: 14px; } .x99-page-skel__line.is-row-meta { flex: 0 1 24%; height: 10px; margin-right: auto; } .x99-page-skel__line.is-short { width: 44%; } .x99-page-skel__line.is-long { width: 88%; } .x99-page-skel__line.is-stepper { align-self: center; width: min(440px, 100%); height: 40px; } @keyframes x99PageSkel { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } /* --- Botões e links de voltar --------------------------------------------- */ :is(.x99-bmcc-back, .x99-upg-back, .x99-vi-back-link, .x99-order-back-link, .x99-order-configure-back, .ticket-success-back, .support-chat-back, .triage-btn-back, [data-x99-back]) :is(.x99-icon, svg, i):first-child { transition: transform var(--dur-base) var(--ease-out); } :is(.x99-bmcc-back, .x99-upg-back, .x99-vi-back-link, .x99-order-back-link, .x99-order-configure-back, .ticket-success-back, .support-chat-back, .triage-btn-back, [data-x99-back]):is(:hover, :focus-visible) :is(.x99-icon, svg, i):first-child { transform: translateX(-3px); } :is(.x99-bmcc-back, .x99-upg-back, .x99-vi-back-link, .x99-order-back-link, .x99-order-configure-back, .ticket-success-back, .support-chat-back, .triage-btn-back, [data-x99-back]).is-leaving :is(.x99-icon, svg, i):first-child { transform: translateX(-8px); transition-duration: var(--dur-fast); } @media (max-width: 991px) { .x99-page-skel__grid, .x99-page-skel__grid.is-4, .x99-page-skel__grid.is-2, .x99-page-skel__cols, .x99-page-skel__cols.is-order { grid-template-columns: minmax(0, 1fr); } .x99-page-skel__grid > :nth-child(n + 3) { display: none; } } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } .x99-page-skel__line, .x99-page-skel__pill, .x99-page-skel__text { animation: none; } }