/* * Shared motion language. * * Entrances are one-shot and use opacity/transform so the browser can composite * them without relayout. Cross-document view transitions are progressive * enhancement: browsers without support keep the local entrance animation. */ :root { --sre-motion-fast: 140ms; --sre-motion-standard: 240ms; --sre-motion-menu: 360ms; --sre-motion-enter: 420ms; --sre-motion-ease: cubic-bezier(0.2, 0.7, 0.2, 1); --sre-motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --sre-motion-ease-in: cubic-bezier(0.4, 0, 1, 1); } /* Native cross-page continuity for supported same-origin browsers. */ @view-transition { navigation: auto; } .sre-sidebar { view-transition-name: sre-sidebar; } .sre-topbar { view-transition-name: sre-topbar; } .sre-main { view-transition-name: sre-main-content; } /* Reserve the active marker's final footprint; state changes animate with transform instead of changing navigation text alignment. */ .sre-nav-marker { width: 0.4375rem; height: 0.4375rem; transform: scale(0.86); transform-origin: center; } .sre-nav-link.is-active .sre-nav-marker { transform: scale(1); } @keyframes sre-page-enter { from { opacity: 0.48; transform: translate3d(0, 1.1rem, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes sre-surface-enter { from { opacity: 0.58; transform: translate3d(0, 0.65rem, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes sre-message-enter { from { opacity: 0.42; transform: translate3d(0, 0.5rem, 0) scale(0.99); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @keyframes sre-dialog-enter { from { opacity: 0; transform: translate3d(0, 1rem, 0) scale(0.96); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @keyframes sre-backdrop-enter { from { opacity: 0; } to { opacity: 1; } } @keyframes sre-alert-enter { from { opacity: 0.62; transform: translate3d(-0.35rem, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes sre-marker-settle { 0% { transform: scale(0.65); } 70% { transform: scale(1.18); } 100% { transform: scale(1); } } @keyframes sre-live-highlight { 0% { background-color: rgba(111, 60, 207, 0.13); box-shadow: inset 0 0 0 1px rgba(111, 60, 207, 0.28); } 55% { background-color: rgba(111, 60, 207, 0.06); box-shadow: inset 0 0 0 1px rgba(111, 60, 207, 0.14); } 100% { background-color: transparent; box-shadow: inset 0 0 0 1px transparent; } } @keyframes sre-view-old-main { to { opacity: 0; transform: translate3d(0, -0.25rem, 0); } } @keyframes sre-view-new-main { from { opacity: 0; transform: translate3d(0, 0.65rem, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } /* The stylesheet is render-blocking and the resolved motion preference is set in , so the first composited frame never flashes finished content. */ html.sre-motion-enabled.js .sre-main > :not(script) { animation: sre-page-enter var(--sre-motion-enter) var(--sre-motion-ease-out) 45ms backwards; } /* Stagger repeated cards inside the common page archetypes. Limiting the stagger to six slots keeps dense dashboards responsive rather than "cascading". */ html.sre-motion-enabled.js :where( .rm-hero-stats, .rm-pr-summary-strip, .rm-anomaly-status-grid, .rm-anomaly-region-grid, .rm-metric-chart-grid, .rm-progress-list, .rm-compare-list, .rm-code-fix-grid, .ia-kpi-grid, .ia-chart-grid, .ob-session-grid, .ob-overview-grid, .ob-three-column, .ob-repo-grid, .rm-security-score-grid, .rm-security-chart-grid, .qa-summary-grid, .qa-major-grid, .qa-usecase-grid ) > :nth-child(-n + 6) { animation: sre-surface-enter var(--sre-motion-enter) var(--sre-motion-ease-out) backwards; } html.js :where( .rm-hero-stats, .rm-pr-summary-strip, .rm-anomaly-status-grid, .rm-anomaly-region-grid, .rm-metric-chart-grid, .rm-progress-list, .rm-compare-list, .rm-code-fix-grid, .ia-kpi-grid, .ia-chart-grid, .ob-session-grid, .ob-overview-grid, .ob-three-column, .ob-repo-grid, .rm-security-score-grid, .rm-security-chart-grid, .qa-summary-grid, .qa-major-grid, .qa-usecase-grid ) > :nth-child(1) { animation-delay: 90ms; } html.js :where( .rm-hero-stats, .rm-pr-summary-strip, .rm-anomaly-status-grid, .rm-anomaly-region-grid, .rm-metric-chart-grid, .rm-progress-list, .rm-compare-list, .rm-code-fix-grid, .ia-kpi-grid, .ia-chart-grid, .ob-session-grid, .ob-overview-grid, .ob-three-column, .ob-repo-grid, .rm-security-score-grid, .rm-security-chart-grid, .qa-summary-grid, .qa-major-grid, .qa-usecase-grid ) > :nth-child(2) { animation-delay: 135ms; } html.js :where( .rm-hero-stats, .rm-pr-summary-strip, .rm-anomaly-status-grid, .rm-anomaly-region-grid, .rm-metric-chart-grid, .rm-progress-list, .rm-compare-list, .rm-code-fix-grid, .ia-kpi-grid, .ia-chart-grid, .ob-session-grid, .ob-overview-grid, .ob-three-column, .ob-repo-grid, .rm-security-score-grid, .rm-security-chart-grid, .qa-summary-grid, .qa-major-grid, .qa-usecase-grid ) > :nth-child(3) { animation-delay: 180ms; } html.js :where( .rm-hero-stats, .rm-pr-summary-strip, .rm-anomaly-status-grid, .rm-anomaly-region-grid, .rm-metric-chart-grid, .rm-progress-list, .rm-compare-list, .rm-code-fix-grid, .ia-kpi-grid, .ia-chart-grid, .ob-session-grid, .ob-overview-grid, .ob-three-column, .ob-repo-grid, .rm-security-score-grid, .rm-security-chart-grid, .qa-summary-grid, .qa-major-grid, .qa-usecase-grid ) > :nth-child(4) { animation-delay: 225ms; } html.js :where( .rm-hero-stats, .rm-pr-summary-strip, .rm-anomaly-status-grid, .rm-anomaly-region-grid, .rm-metric-chart-grid, .rm-progress-list, .rm-compare-list, .rm-code-fix-grid, .ia-kpi-grid, .ia-chart-grid, .ob-session-grid, .ob-overview-grid, .ob-three-column, .ob-repo-grid, .rm-security-score-grid, .rm-security-chart-grid, .qa-summary-grid, .qa-major-grid, .qa-usecase-grid ) > :nth-child(5) { animation-delay: 270ms; } html.js :where( .rm-hero-stats, .rm-pr-summary-strip, .rm-anomaly-status-grid, .rm-anomaly-region-grid, .rm-metric-chart-grid, .rm-progress-list, .rm-compare-list, .rm-code-fix-grid, .ia-kpi-grid, .ia-chart-grid, .ob-session-grid, .ob-overview-grid, .ob-three-column, .ob-repo-grid, .rm-security-score-grid, .rm-security-chart-grid, .qa-summary-grid, .qa-major-grid, .qa-usecase-grid ) > :nth-child(6) { animation-delay: 315ms; } html.js .ob-page > :where(.ob-hero, .ob-session-hero, .ob-section), html.js .rm-security-dashboard-page > :where(.rm-security-dashboard-header, .rm-security-chart-card), html.js .qa-signoff-page > :where(.qa-hero, .qa-card, .qa-panel) { animation: sre-surface-enter var(--sre-motion-enter) var(--sre-motion-ease-out) backwards; } html.js .ob-page > :nth-child(1), html.js .rm-security-dashboard-page > :nth-child(1), html.js .qa-signoff-page > :nth-child(1) { animation-delay: 80ms; } html.js .ob-page > :nth-child(2), html.js .rm-security-dashboard-page > :nth-child(2), html.js .qa-signoff-page > :nth-child(2) { animation-delay: 130ms; } html.js .ob-page > :nth-child(3), html.js .rm-security-dashboard-page > :nth-child(3), html.js .qa-signoff-page > :nth-child(3) { animation-delay: 180ms; } html.js .sre-main :where(.rm-banner, .rm-alert, .rm-notice, .qa-form-warning, .qa-search-message) { animation: sre-alert-enter 280ms var(--sre-motion-ease-out) 120ms backwards; } html.js :where(.rm-deep-chat-message, .rm-deep-chat-history-row, .rm-chat-message, .qa-event-row) { animation: sre-message-enter 280ms var(--sre-motion-ease-out) backwards; } html.js :where(.rm-kc-tab-panel, .qa-tab-panel):not([hidden]) { animation: sre-surface-enter 280ms var(--sre-motion-ease-out) backwards; } dialog[open], .rm-modal-shell:not([hidden]) .rm-modal-card, .qa-dialog:not([hidden]) .qa-dialog-card { animation: sre-dialog-enter var(--sre-motion-standard) var(--sre-motion-ease-out) backwards; } dialog[open]::backdrop, .rm-modal-shell:not([hidden]) .rm-modal-backdrop, .qa-dialog:not([hidden])::before, .sre-drawer-backdrop:not([hidden]) { animation: sre-backdrop-enter var(--sre-motion-standard) ease-out backwards; } html.sre-motion-enabled details.ui-details-motion[open] > :not(summary) { opacity: 0; transform: translate3d(0, -1rem, 0) scale(0.96); transform-origin: top center; transition: opacity var(--sre-motion-menu) ease-out, transform var(--sre-motion-menu) var(--sre-motion-ease-out); will-change: opacity, transform; } html.sre-motion-enabled details.ui-details-motion.ui-details-open[open] > :not(summary) { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } html.sre-motion-enabled details.ui-details-motion.ui-details-closing[open] > :not(summary) { pointer-events: none; } [data-ui-live-slot].ui-live-updated { animation: sre-live-highlight 720ms ease-out; } .sre-nav-link.is-active .sre-nav-marker { animation: sre-marker-settle 320ms var(--sre-motion-ease-out) backwards; } :is( [data-row-href], [data-href], .rm-quick-action, .rm-deep-chat-history-row, .ob-session-card, .rm-heading-tabs a, .rm-kc-tab, .qa-tab, .sre-nav-link, .rm-button, .button, .rm-auth-link, .rm-icon-button, .rm-pager-link, .sre-drawer-toggle, .sre-drawer-close, .ui-live-action, details > summary ) { transition: background-color var(--sre-motion-fast) ease, border-color var(--sre-motion-fast) ease, box-shadow var(--sre-motion-standard) ease, color var(--sre-motion-fast) ease, opacity var(--sre-motion-fast) ease, transform var(--sre-motion-standard) var(--sre-motion-ease-out); } :is(.sre-nav-marker, .sre-brand-mark, .sre-presence-dot) { transition: background-color var(--sre-motion-fast) ease, box-shadow var(--sre-motion-standard) ease, transform var(--sre-motion-standard) var(--sre-motion-ease-out); } .sre-preference-menu > summary::after { transition: transform var(--sre-motion-standard) var(--sre-motion-ease-out); } .sre-preference-menu.ui-details-closing > summary::after { transform: translateY(-0.1rem) rotate(45deg); } :is(.rm-filter-dropdown, .rm-resource-picker) > summary::after { transition: transform var(--sre-motion-menu) var(--sre-motion-ease-out); transform-origin: center; } .rm-filter-dropdown.ui-details-open > summary::after { transform: rotate(180deg); } .rm-filter-dropdown.ui-details-closing > summary::after { transform: rotate(0deg); } :is( .rm-field input, .rm-field select, .rm-field textarea, .ia-filter-field input, .ia-filter-field select, .rm-resource-select, .rm-resource-notes, .rm-resource-picker-search, .rm-page-size-form select, .rm-page-size-form input, .rm-incident-search-form input, .rm-catalog-search-form input ) { transition: background-color var(--sre-motion-fast) ease, border-color var(--sre-motion-fast) ease, box-shadow var(--sre-motion-standard) ease; } :is(.rm-progress-bar, .rm-metric-chart-bar, .qa-progress-bar) { transition: width 600ms var(--sre-motion-ease-out), background-color var(--sre-motion-standard) ease; } :is(.rm-table tbody tr, .qa-report-row, .qa-job-row, .rm-security-repo-risk-row) { transition: background-color var(--sre-motion-fast) ease, box-shadow var(--sre-motion-fast) ease; } @media (hover: hover) and (pointer: fine) { :is([data-row-href], [data-href], .rm-quick-action, .ob-session-card, .rm-deep-chat-history-row):hover { transform: translate3d(0, -2px, 0); } :is(.rm-button, .button, .rm-auth-link, .rm-icon-button, .rm-pager-link, .ui-live-action):hover:not(:disabled) { transform: translate3d(0, -2px, 0); } .sre-nav-link:hover .sre-nav-marker { transform: scale(1.18); } :is(.rm-table tbody tr, .qa-report-row, .qa-job-row, .rm-security-repo-risk-row):hover { box-shadow: inset 3px 0 0 rgba(111, 60, 207, 0.32); } } :is( .rm-button, .button, .rm-auth-link, .rm-icon-button, .rm-pager-link, .sre-drawer-toggle, .sre-drawer-close, .ui-live-action, details > summary ):active:not(:disabled) { transform: translate3d(0, 1px, 0) scale(0.985); transition-duration: 70ms; } ::view-transition-old(sre-main-content) { animation: sre-view-old-main 120ms var(--sre-motion-ease-in) both; } ::view-transition-new(sre-main-content) { animation: sre-view-new-main 300ms var(--sre-motion-ease-out) both; } ::view-transition-group(sre-sidebar), ::view-transition-group(sre-topbar) { animation-duration: var(--sre-motion-standard); animation-timing-function: var(--sre-motion-ease); } /* Keep final states immediate for people who request less motion, including legacy feature CSS that predates this shared layer. */ html:not(.sre-motion-enabled) .sre-app-shell, html:not(.sre-motion-enabled) .sre-app-shell *, html:not(.sre-motion-enabled) .sre-app-shell *::before, html:not(.sre-motion-enabled) .sre-app-shell *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; } :root:not(.sre-motion-enabled)::view-transition-old(root), :root:not(.sre-motion-enabled)::view-transition-new(root), :root:not(.sre-motion-enabled)::view-transition-old(sre-main-content), :root:not(.sre-motion-enabled)::view-transition-new(sre-main-content), :root:not(.sre-motion-enabled)::view-transition-group(sre-sidebar), :root:not(.sre-motion-enabled)::view-transition-group(sre-topbar) { animation: none !important; }