jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

css: clean up file upload widget css.

Browse Source 
* Standardize the upload widget background colors (light green for success,
  light red for error).
* Move the progress bar to the bottom of the upload widget.
* Change the progress bar color to blue.
* Hide the "drag and drop a file here" message after a file has
  already been uploaded.
This commit is contained in:
evazion
2019-09-17 00:28:41 -05:00
parent e3406d1bc7
commit 852c1cbb7c
3 changed files with 20 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
app/javascript/src/styles/specific/dropzone.scss
View File

@@ -1,41 +1,39 @@
#filedropzone {
border: var(--uploads-dropzone-border);
background: var(--uploads-dropzone-background);
padding: 0;
min-height: 100px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
cursor: pointer;
position: relative;
.placeholder {
font-style: italic;
color: var(--uploads-dropzone-place-holder-color);
height: 100%;
&.dz-started .placeholder {
display: none;
}
&.error {
border-color: var(--uploads-dropzone-error-border-color);
background-color: var(--uploads-dropzone-error-background-color);
background: var(--error-background-color);
}
&.success {
border-color: var(--uploads-dropzone-success-border-color);
background-color: var(--uploads-dropzone-success-background-color);
background: var(--success-background-color);
}
}
.dz-preview {
margin-bottom: 1em;
}
.dz-progress {
height: 20px;
width: 300px;
background-color: var(--uploads-dropzone-progress-border);
position: absolute;
width: 100%;
bottom: 0;
left: 0;
height: 5px;
background-color: var(--uploads-dropzone-progress-bar-background-color);
.dz-upload {
background-color: var(--uploads-dropzone-progress-background-color);
background-color: var(--uploads-dropzone-progress-bar-foreground-color);
display: block;
height: 20px;
height: 5px;
}
}