72 lines
3.3 KiB
CSS
72 lines
3.3 KiB
CSS
/* Canvas file upload placeholder: a local component owns its visual state. */
|
|
.canvas-file-upload {
|
|
--upload-glow-blue: color-mix(in srgb, var(--status-loading) 22%, transparent);
|
|
--upload-glow-mint: color-mix(in srgb, var(--status-success) 14%, transparent);
|
|
--upload-glow-warm: color-mix(in srgb, var(--status-warning) 12%, transparent);
|
|
position: relative;
|
|
isolation: isolate;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
background: var(--upload-surface);
|
|
color: var(--upload-text);
|
|
}
|
|
|
|
.canvas-file-upload-glow {
|
|
transition: opacity 180ms ease-out;
|
|
position: absolute;
|
|
inset: -45%;
|
|
background: radial-gradient(ellipse at 28% 32%, var(--upload-glow-blue), transparent 48%), radial-gradient(ellipse at 75% 64%, var(--upload-glow-mint), transparent 46%), radial-gradient(ellipse at 55% 78%, var(--upload-glow-warm), transparent 42%);
|
|
animation: canvas-file-upload-drift 5s ease-in-out infinite alternate;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.canvas-file-upload-frost {
|
|
transition: opacity 180ms ease-out;
|
|
position: absolute;
|
|
inset: 0;
|
|
background: color-mix(in srgb, var(--upload-surface) 24%, transparent);
|
|
backdrop-filter: blur(20px) saturate(0.8);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.canvas-file-upload-frost::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: -60%;
|
|
background: linear-gradient(110deg, transparent 35%, color-mix(in srgb, var(--upload-text) 4%, transparent) 47%, color-mix(in srgb, var(--upload-surface) 40%, transparent) 51%, transparent 65%);
|
|
animation: canvas-file-upload-sheen 4s ease-in-out infinite;
|
|
}
|
|
|
|
.canvas-file-upload-copy {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: var(--space-2);
|
|
height: 100%;
|
|
padding: var(--space-5);
|
|
text-align: center;
|
|
}
|
|
|
|
.canvas-file-upload-copy > svg { color: var(--upload-muted); }
|
|
.canvas-file-upload-label { font-size: var(--fs-caption); font-weight: 500; }
|
|
.canvas-file-upload-detail { max-width: 100%; font-size: var(--fs-tiny); color: var(--upload-muted); overflow-wrap: anywhere; }
|
|
.canvas-file-upload-retry { margin-top: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--r-md); background: color-mix(in srgb, var(--upload-text) 8%, transparent); font-size: var(--fs-caption); cursor: pointer; }
|
|
.canvas-file-upload-retry:hover { background: color-mix(in srgb, var(--upload-text) 12%, transparent); }
|
|
.canvas-file-upload-retry:focus-visible { outline: 2px solid var(--control-focus-ring); outline-offset: 2px; }
|
|
|
|
@keyframes canvas-file-upload-drift { from { transform: translate(-8%, -4%) rotate(-8deg); } to { transform: translate(8%, 4%) rotate(12deg); } }
|
|
@keyframes canvas-file-upload-sheen { from { transform: translateX(-35%); } to { transform: translateX(35%); } }
|
|
|
|
.canvas-file-upload[data-static] .canvas-file-upload-glow,
|
|
.canvas-file-upload[data-static] .canvas-file-upload-frost::after { animation: none; }
|
|
.canvas-file-upload[data-static] .canvas-file-upload-glow,
|
|
.canvas-file-upload[data-static] .canvas-file-upload-frost { transition: none; }
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.canvas-file-upload-glow, .canvas-file-upload-frost::after { animation: none; }
|
|
.canvas-file-upload-glow, .canvas-file-upload-frost { transition: none; }
|
|
}
|