@keyframes upload-row-loading { 0% { background-color: #ffffff; } 100% { background-color: #e6e6e6; } } @keyframes quota-warning-breathe { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.08); } } @keyframes row-warning-breathe { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.12); } } @keyframes dropzone-attention { 0%, 100% { filter: brightness(1); transform: translateY(0); } 50% { filter: brightness(1.07); transform: translateY(-1px); } } @keyframes share-ready-pulse { 50% { filter: brightness(1.08); box-shadow: 0 0 0 2px #000078; } } @keyframes start-ready-rainbow-breathe { 0%, 100% { transform: rotate(-.35deg) scale(1); } 50% { transform: rotate(.35deg) scale(1.016); } } @keyframes start-border-rainbow-slide { from { background-position: 0% 50%; } to { background-position: 100% 50%; } } @keyframes progress-impact-bar { 0% { filter: brightness(1); } 35% { filter: brightness(1.75); } 100% { filter: brightness(1); } } @keyframes progress-impact-spark { 0% { opacity: 0; transform: translateY(-50%) scale(.7); } 30% { opacity: 1; transform: translateY(-50%) scale(1.18); } 100% { opacity: 0; transform: translateY(-50%) scale(.7); } } @keyframes terminal-cursor { 50% { opacity: 0; } } @keyframes popup-open-v10 { from { transform: translate(-50%, -48%) scale(.97); opacity: .35; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } } @keyframes toast-in { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes toast-buzz { 0%, 100% { margin-right: 0; } 25% { margin-right: 2px; } 50% { margin-right: -2px; } } @keyframes api-key-scan { to { background-position: 32px 0; } } @media (max-width: 1320px) { body { height: auto; min-height: 100vh; overflow-y: auto; } .upload-main { height: auto; min-height: 100vh; place-items: start center; overflow: visible; } .desktop-wrap { --window-height: 680px; grid-template-columns: minmax(0, 820px); grid-template-rows: var(--window-height) auto; width: min(820px, 100%); max-width: 820px; height: auto; max-height: none; overflow: visible; } .side-stack { width: 100%; min-width: 0; max-width: none; height: auto; grid-template-columns: 1fr; grid-template-rows: 350px 210px 132px; overflow: visible; } .side-panel, .helper-window { width: 100%; min-width: 0; max-width: none; } } @media (min-width: 1440px) { .desktop-wrap { --window-height: 780px; } .side-stack { grid-template-rows: 372px 230px 1fr; } } @media (max-width: 760px) { .upload-main { height: auto; min-height: 100dvh; place-items: stretch; align-items: stretch; padding: 0; overflow: visible; } .desktop-wrap { width: 100%; max-width: none; height: auto; max-height: none; min-height: 100dvh; gap: 10px; grid-template-columns: 1fr; grid-template-rows: auto auto; overflow: visible; } .upload-window { min-height: 100dvh; height: auto; width: 100vw; border-left: 0; border-right: 0; box-shadow: none; } .side-stack { grid-template-rows: auto auto auto; padding: 0 6px 12px; } .side-panel:first-child { min-height: 360px; } .side-panel:nth-child(2) { min-height: 210px; } .helper-window { min-height: 128px; } .upload-header { grid-template-columns: 1fr; } .upload-panel { margin: 0 6px 8px; padding: 10px; } .upload-dropzone { min-height: 118px; padding: 14px 10px; } .upload-primary { font-size: 16px; } .upload-details { flex-wrap: wrap; gap: 4px; } .upload-file-count { margin-left: 0; width: 100%; } .upload-file-row { grid-template-columns: 22px minmax(0, 1fr) 58px 28px; padding: 4px 5px; font-size: 12px; } .upload-result { grid-template-columns: 1fr 72px; } .upload-result-label { grid-column: 1 / 3; } .upload-actions { justify-content: stretch; } .upload-actions .win98-button { flex: 1; min-width: 0; } .menu-bar { overflow-x: auto; } .menu-popup { position: fixed; left: 6px; right: 6px; top: 50px; min-width: 0; } .popup-window { left: 0; top: 0; transform: none; width: 100vw; height: 100dvh; max-height: none; border: 0; box-shadow: none; } .popup-window .win98-titlebar { height: 32px; } .popup-close { width: 28px; height: 24px; font-size: 18px; font-weight: bold; } .popup-body { max-height: calc(100dvh - 40px); } .popup-window.is-visible { animation: popup-open-mobile-v10 160ms steps(5, end); } @keyframes popup-open-mobile-v10 { from { transform: translateY(10px); opacity: .35; } to { transform: translateY(0); opacity: 1; } } } @media (max-width: 420px) { :root { --base-font-size: 13px; } .win98-titlebar h1 { font-size: 13px; } .upload-file-size { display: none; } .upload-file-row { grid-template-columns: 22px minmax(0, 1fr) 28px; } .upload-file-remove { grid-column: 3; } .upload-progress { grid-column: 2 / 3; } }