/* SPDX-License-Identifier: AGPL-3.0-or-later */ .container { display: flex; width: 100%; min-width: 0; align-items: center; gap: 0.75rem; overflow: hidden; border-radius: 0.5rem; border: 0.0625rem solid var(--background-modifier-accent); background-color: var(--background-secondary); padding: 0.75rem; box-shadow: 0 0.0625rem 0.125rem 0 rgb(0 0 0 / 0.05); } .iconContainer { display: flex; height: 3rem; width: 3rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 0.5rem; background-color: var(--background-tertiary); color: var(--text-tertiary); } .content { min-width: 0; flex: 1; overflow: hidden; } .fileName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 0.875rem; color: var(--text-primary); } .fileSize { color: var(--text-tertiary); font-size: 0.75rem; } .progressContainer { margin-top: 0.375rem; height: 0.25rem; width: 100%; overflow: hidden; border-radius: 624.9375rem; background-color: var(--background-tertiary); } .progressBarIndeterminate { height: 100%; width: 100%; border-radius: 624.9375rem; background-color: var(--brand-primary-light); opacity: 0.5; animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .progressBar { height: 100%; border-radius: 624.9375rem; transition: width 150ms, background-color 150ms; } .progressBarNormal { background-color: var(--brand-primary-light); } .progressBarFailed { background-color: rgb(239 68 68); } .cancelButton { display: flex; height: 2.5rem; width: 2.5rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 0.5rem; background-color: var(--background-tertiary); color: var(--text-tertiary); cursor: pointer; } .cancelButton:hover { background-color: rgb(239 68 68); color: white; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } :global(.theme-light) .progressBarIndeterminate, :global(.theme-light) .progressBarNormal { background-color: var(--brand-primary); }