mirror of
https://github.com/itplr-kosit/validator.git
synced 2026-05-25 16:55:39 +00:00
94 lines
2.5 KiB
CSS
94 lines
2.5 KiB
CSS
:where(.dropzone) {
|
|
--dropzone-color-text: var(--text-faded);
|
|
--dropzone-icon-active: var(--text-accent-2);
|
|
--dropzone-color-background: var(--surface-2);
|
|
--dropzone-color-background-active: var(--surface-accent-0);
|
|
--dropzone-color-border: var(--color-border);
|
|
--dropzone-color-border-active: var(--color-border-accent);
|
|
--dropzone-opacity-hover-preview: 0;
|
|
--dropzone-shadow-opacity: 0;
|
|
--dropzone-border-size: 0.2rem;
|
|
}
|
|
|
|
:where([data-theme="dark"] .dropzone) {
|
|
--dropzone-color-text: var(--text-0);
|
|
--dropzone-icon-active: var(--text-accent-0);
|
|
--dropzone-color-background: transparent;
|
|
--dropzone-color-background-active: var(--surface-accent-5);
|
|
}
|
|
|
|
.dropzone {
|
|
position: relative;
|
|
cursor: pointer;
|
|
width: 100%;
|
|
height: 15em;
|
|
color: var(--dropzone-color-text);
|
|
background: var(--dropzone-color-background);
|
|
border: var(--dropzone-border-size) dashed var(--dropzone-color-border);
|
|
border-radius: var(--border-radius-medium);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: var(--ifm-global-shadow-lw);
|
|
}
|
|
|
|
.dropzone::before {
|
|
content: "";
|
|
position: absolute;
|
|
pointer-events: none;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
box-shadow: var(--ifm-global-shadow-md);
|
|
z-index: -1;
|
|
opacity: var(--dropzone-shadow-opacity);
|
|
transition: opacity 200ms ease;
|
|
}
|
|
|
|
.active {
|
|
--dropzone-opacity-hover-preview: 0.8;
|
|
--dropzone-shadow-opacity: 1;
|
|
}
|
|
|
|
.hasFiles {
|
|
--dropzone-color-background: var(--dropzone-color-background-active);
|
|
--dropzone-color-border: var(--dropzone-color-border-active);
|
|
--dropzone-shadow-opacity: 0.25;
|
|
}
|
|
|
|
.fileHoverPreview {
|
|
--dropzone-color-background: var(--dropzone-color-background-active);
|
|
--dropzone-color-border: var(--dropzone-color-border-active);
|
|
|
|
position: absolute;
|
|
top: calc(-1 * var(--dropzone-border-size));
|
|
right: calc(-1 * var(--dropzone-border-size));
|
|
bottom: calc(-1 * var(--dropzone-border-size));
|
|
left: calc(-1 * var(--dropzone-border-size));
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: var(--dropzone-color-text);
|
|
background: var(--dropzone-color-background);
|
|
border: var(--dropzone-border-size) dashed var(--dropzone-color-border);
|
|
border-radius: var(--border-radius-medium);
|
|
opacity: var(--dropzone-opacity-hover-preview);
|
|
transition: opacity 150ms ease-in-out;
|
|
}
|
|
|
|
.icon {
|
|
font-size: 3rem;
|
|
width: 1em;
|
|
height: 1em;
|
|
}
|
|
|
|
.fileHoverIcon {
|
|
font-size: 5rem;
|
|
color: var(--dropzone-icon-active);
|
|
}
|
|
|
|
.uploadIcon {
|
|
color: var(--dropzone-color-text);
|
|
margin-right: 0.5rem;
|
|
}
|