124 lines
5.1 KiB
CSS
124 lines
5.1 KiB
CSS
@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; }
|
|
}
|