.latest-activity.beside-download { grid-column: 7 / -1; grid-row: 2; } .latest-activity.full-row { grid-column: 1 / -1; } .latest-activity .latest-activity-trigger { display: grid; gap: .6rem; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; box-shadow: none; text-transform: none; } .latest-activity-trigger:focus-visible { outline: 2px solid var(--ops-accent, #83d7f7); outline-offset: 6px; } .latest-activity-heading { display: flex; align-items: center; justify-content: space-between; gap: .75rem; } .latest-activity-message { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-size: .875rem; line-height: 1.5; font-weight: 400; } .latest-activity-more { color: var(--ops-accent, #83d7f7); font-size: .75rem; } .latest-activity-badge { font-size: .7rem; font-weight: 500; color: var(--ops-muted, #bbb); } .latest-activity-badge.is-error { color: #ff9b9b; } .latest-activity-badge.is-complete { color: #55dec0; } .activity-dialog { position: fixed; inset: 0; margin: auto; width: min(720px, calc(100vw - 32px)); max-width: none; max-height: min(760px, calc(100dvh - 40px)); padding: 0; border: 1px solid var(--ops-border, #444); border-radius: 16px; color: var(--ops-text, #eee); background: var(--ops-surface, #1c1c1e); overflow: auto; box-shadow: 0 24px 80px #0008; } .activity-dialog::backdrop { background: #000a; backdrop-filter: blur(5px); } .activity-dialog-content { padding: 1.25rem; } .activity-dialog header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .activity-dialog h2 { font-size: 1.2rem; margin: .4rem 0; } .activity-dialog small { color: var(--ops-muted, #bbb); } .activity-dialog footer { display: flex; justify-content: flex-end; margin-top: 1rem; } @media (max-width: 720px) { .latest-activity.beside-download { grid-column: 1 / -1; grid-row: auto; } } .activity-current { padding: 1rem 0 .25rem; } .activity-current-step { font-size: 1.05rem; font-weight: 600; margin: 0 0 1rem; } .activity-next-step { color: var(--ops-muted, #bbb); font-size: .875rem; line-height: 1.6; margin: 1rem 0 0; } .activity-process { height: 6px; width: 100%; overflow: hidden; border-radius: 999px; background: #ffffff14; } .activity-process > span { display: block; height: 100%; width: 100%; border-radius: inherit; background: #55dec0; } .activity-process.is-working > span { width: 35%; background: var(--ops-accent, #83d7f7); animation: activity-process-slide 1.6s ease-in-out infinite alternate; } .activity-process.is-error > span { background: #e6b86c; } @keyframes activity-process-slide { from { transform: translateX(0); } to { transform: translateX(185%); } } @media (prefers-reduced-motion: reduce) { .activity-process.is-working > span { animation: none; width: 100%; opacity: .65; } } .activity-spinner { display: inline-block; width: 28px; height: 28px; flex: 0 0 28px; border: 3px solid #ffffff26; border-top-color: var(--ops-accent, #83d7f7); border-right-color: var(--ops-accent, #83d7f7); border-radius: 50%; animation: activity-spinner-turn .8s linear infinite; } .activity-current-step, .latest-activity .latest-activity-message { display: flex; align-items: center; gap: 12px; } @keyframes activity-spinner-turn { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .activity-spinner { animation: none; } }