File size: 1,151 Bytes
3aca7f0 2af15f4 3aca7f0 2af15f4 3aca7f0 2af15f4 3aca7f0 2af15f4 3aca7f0 2af15f4 3aca7f0 2af15f4 3aca7f0 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 | :root {
--control-width: 22rem;
}
.upscale-page {
display: grid;
gap: 2rem;
grid-template-columns: minmax(16rem, var(--control-width)) 1fr;
margin: 2rem auto;
width: var(--width);
}
.controls,
.images,
label {
display: grid;
gap: var(--gap);
}
.controls {
align-content: start;
}
label {
color: var(--muted);
gap: .4rem;
}
select,
input,
#upscale {
background: var(--panel);
border: 1px solid var(--border);
border-radius: 0;
color: var(--text);
font: inherit;
min-width: 0;
padding: .65rem .8rem;
width: 100%;
}
#upload {
padding: 0;
}
#upload::file-selector-button {
background: var(--panel);
border: 0;
border-right: 1px solid var(--border);
color: var(--text);
cursor: pointer;
font: inherit;
margin-right: var(--gap);
padding: .65rem .8rem;
}
.images {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.images img {
background: var(--panel);
max-height: 80vh;
object-fit: contain;
width: 100%;
}
@media (max-width: 800px) {
.upscale-page,
.images {
grid-template-columns: 1fr;
}
}
|