57 lines
1.0 KiB
CSS
57 lines
1.0 KiB
CSS
|
div.input-file {
|
||
|
|
cursor: pointer;
|
||
|
|
box-sizing: border-box;
|
||
|
|
border: var(--border-thickness) solid var(--background-primary);
|
||
|
|
background-color: var(--background-tertiary);
|
||
|
|
aspect-ratio: 21 / 9;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.input-file input[type='file'] {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.input-file div.prompt {
|
||
|
|
display: grid;
|
||
|
|
align-content: center;
|
||
|
|
justify-items: center;
|
||
|
|
gap: 8px;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.input-file div.prompt img.icon {
|
||
|
|
margin: 16px;
|
||
|
|
width: 32px;
|
||
|
|
height: 32px;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.input-file div.prompt span.hint {
|
||
|
|
font-size: large;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.input-file div.prompt span.header {
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.input-file div.prompt span.subheader {
|
||
|
|
color: var(--font-color-secondary);
|
||
|
|
font-size: small;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.input-file div.preview {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.input-file div.preview img,
|
||
|
|
div.input-file div.preview video {
|
||
|
|
max-width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
object-fit: contain;
|
||
|
|
}
|