demo/validator
1
0
Fork 0
mirror of https://github.com/itplr-kosit/validator.git synced 2026-05-25 16:55:39 +00:00
Code Issues Projects Releases Packages Wiki Activity

Resolve https://projekte.kosit.org/kosit/validator/-/issues/97 "Replace docsify from UI"

Browse source
This commit is contained in:
Andreas Penski 2022-11-18 07:21:56 +00:00
parent a10cc14d06
commit 219aeaa1b7
100 changed files with 27369 additions and 1072 deletions
Download patch file Download diff file Expand all files Collapse all files

94
server/ui/src/components/Dropzone/Dropzone.module.css Normal file
View file

@ -0,0 +1,94 @@
: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;
}