diff options
Diffstat (limited to 'src/site/assets/styles/dropzone.scss')
| -rw-r--r-- | src/site/assets/styles/dropzone.scss | 575 |
1 files changed, 575 insertions, 0 deletions
diff --git a/src/site/assets/styles/dropzone.scss b/src/site/assets/styles/dropzone.scss new file mode 100644 index 0000000..cff1223 --- /dev/null +++ b/src/site/assets/styles/dropzone.scss @@ -0,0 +1,575 @@ +/* + * The MIT License + * Copyright (c) 2012 Matias Meno <[email protected]> + */ + + @-webkit-keyframes passing-through { + 0% { + opacity: 0; + transform: translateY(40px); + } + 30%, + 70% { + opacity: 1; + transform: translateY(0px); + } + 100% { + opacity: 0; + transform: translateY(-40px); + } +} +@-moz-keyframes passing-through { + 0% { + opacity: 0; + transform: translateY(40px); + } + 30%, + 70% { + opacity: 1; + transform: translateY(0px); + } + 100% { + opacity: 0; + transform: translateY(-40px); + } +} +@keyframes passing-through { + 0% { + opacity: 0; + transform: translateY(40px); + } + 30%, + 70% { + opacity: 1; + transform: translateY(0px); + } + 100% { + opacity: 0; + transform: translateY(-40px); + } +} +@-webkit-keyframes slide-in { + 0% { + opacity: 0; + transform: translateY(40px); + } + 30% { + opacity: 1; + transform: translateY(0px); + } +} +@-moz-keyframes slide-in { + 0% { + opacity: 0; + transform: translateY(40px); + } + 30% { + opacity: 1; + transform: translateY(0px); + } +} +@keyframes slide-in { + 0% { + opacity: 0; + transform: translateY(40px); + } + 30% { + opacity: 1; + transform: translateY(0px); + } +} +@-webkit-keyframes pulse { + 0% { + transform: scale(1); + } + 10% { + transform: scale(1.1); + } + 20% { + transform: scale(1); + } +} +@-moz-keyframes pulse { + 0% { + transform: scale(1); + } + 10% { + transform: scale(1.1); + } + 20% { + transform: scale(1); + } +} +@keyframes pulse { + 0% { + transform: scale(1); + } + 10% { + transform: scale(1.1); + } + 20% { + transform: scale(1); + } +} +.dropzone, +.dropzone * { + box-sizing: border-box; +} +.dropzone { + min-height: 75px; + border: 1px solid #00000061; + background: rgba(0, 0, 0, 0.15); + border-radius: .3em; +} +.dropzone.dz-clickable { + cursor: pointer; +} +.dropzone.dz-clickable * { + cursor: default; +} +.dropzone.dz-clickable .dz-message, +.dropzone.dz-clickable .dz-message * { + cursor: pointer; +} +.dropzone.dz-started .dz-message { + display: none; +} +.dropzone.dz-drag-hover { + border-style: solid; +} +.dropzone.dz-drag-hover .dz-message { + opacity: 0.5; +} +.dropzone .dz-message { + text-align: center; + margin: 2em 0; + font-size: .875em; + font-weight: 400; + line-height: 1.5; +} +.dropzone .dz-preview { + position: relative; + display: inline-block; + vertical-align: top; + min-height: 40px; + margin: 1em; + margin-bottom: 0.5em; + width: calc(100% - 2em); + background: #808080; + border-radius: .3em; +} + +.dropzone .dz-preview:not(:nth-child(2)) { + margin-top: 0px; +} + +.dropzone .dz-preview:last-child { + margin-bottom: 1em; +} +.dropzone .dz-preview:hover { + z-index: 1000; +} +.dropzone .dz-preview:hover .dz-details { + opacity: 1; +} +.dropzone .dz-preview.dz-file-preview .dz-image { + border-radius: 20px; + background: #999; + background: linear-gradient(to bottom, #eee, #ddd); +} +.dropzone .dz-preview.dz-file-preview .dz-details { + opacity: 1; +} +.dropzone .dz-preview.dz-image-preview { + background: white; +} +.dropzone .dz-preview.dz-image-preview .dz-details { + transition: opacity 0.2s linear; +} +.dropzone .dz-preview .dz-remove { + font-size: 14px; + text-align: center; + display: block; + cursor: pointer; + border: none; +} +.dropzone .dz-preview .dz-remove:hover { + text-decoration: underline; +} +.dropzone .dz-preview:hover .dz-details { + opacity: 1; +} +.dropzone .dz-preview .dz-details { + z-index: 20; + position: absolute; + top: 0; + left: 0; + opacity: 0; + font-size: 13px; + min-width: 100%; + max-width: 100%; + // padding: 2em 1em; + text-align: center; + color: rgba(0, 0, 0, 0.9); + line-height: 150%; +} +.dropzone .dz-preview .dz-details .dz-size { + // margin-bottom: 1em; + font-size: 12px !important; + transform: translateY(-5px); +} +.dropzone .dz-preview .dz-details .dz-filename { + white-space: nowrap; + font-size: .75em; + line-height: 1.5; + width: 225px; + margin-top: 3px; +} +.dropzone .dz-preview .dz-details .dz-filename:hover span { + border: 1px solid rgba(200, 200, 200, 0.8); + background-color: rgba(255, 255, 255, 0.8); +} +.dropzone .dz-preview .dz-details .dz-filename:not(:hover) { + overflow: hidden; + text-overflow: ellipsis; +} +.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span { + border: 1px solid transparent; +} +.dropzone .dz-preview .dz-details .dz-filename span, +.dropzone .dz-preview .dz-details .dz-size span { + /* + background-color: rgba(255, 255, 255, 0.4); + padding: 0 0.4em; + border-radius: 3px; + */ +} +.dropzone .dz-preview .result a { + cursor: pointer; + color: white; + text-transform: uppercase; + line-height: 30px; + &:hover { + color: white; + text-decoration: underline;; + } +} +.dropzone .dz-preview:hover .dz-image img { + transform: scale(1.05, 1.05); + filter: blur(8px); +} +.dropzone .dz-preview .dz-image { + border-radius: 20px; + overflow: hidden; + width: 120px; + height: 120px; + position: relative; + display: block; + z-index: 10; +} +.dropzone .dz-preview .dz-image img { + display: block; +} +.dropzone .dz-preview.dz-success .dz-success-mark { + animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); +} +.dropzone .dz-preview.dz-error .dz-error-mark { + opacity: 1; + animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); +} +.dropzone .dz-preview .dz-success-mark, +.dropzone .dz-preview .dz-error-mark { + pointer-events: none; + opacity: 0; + z-index: 500; + position: absolute; + display: block; + top: 50%; + left: 50%; + margin-left: -27px; + margin-top: -27px; +} +.dropzone .dz-preview .dz-success-mark svg, +.dropzone .dz-preview .dz-error-mark svg { + display: block; + width: 54px; + height: 54px; +} +.dropzone .dz-preview.dz-processing .dz-progress { + opacity: 1; + transition: all 0.2s linear; +} +.dropzone .dz-preview.dz-complete .dz-progress { + opacity: 0; + transition: opacity 0.4s ease-in; +} +.dropzone .dz-preview:not(.dz-processing) .dz-progress { + animation: pulse 6s ease infinite; +} +.dropzone .dz-preview .dz-progress { + opacity: 1; + z-index: 1000; + pointer-events: none; + position: absolute; + margin-top: -8px; + width: 80px; + margin-left: -40px; + background: rgba(255, 255, 255, 0.9); + transform: scale(1); + border-radius: 8px; + overflow: hidden; + right: 10px; + left: initial; + margin: 0px; + height: 5px; + top: 17px; +} +.dropzone .dz-preview .dz-progress .dz-upload { + // background: #333; + // background: linear-gradient(to bottom, #666, #444); + background: #0b6312; + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: 0; + transition: width 300ms ease-in-out; +} +.dropzone .dz-preview.dz-error .dz-error-message { + display: block; +} +.dropzone .dz-preview.dz-error:hover .dz-error-message { + opacity: 1; + pointer-events: auto; +} +.dropzone .dz-preview .dz-error-message { + pointer-events: none; + z-index: 1000; + position: absolute; + display: block; + display: none; + opacity: 0; + transition: opacity 0.3s ease; + border-radius: 8px; + font-size: 13px; + top: 130px; + left: -10px; + width: 140px; + background: #be2626; + background: linear-gradient(to bottom, #be2626, #a92222); + padding: 0.5em 1.2em; + color: white; +} +.dropzone .dz-preview .dz-error-message:after { + content: ''; + position: absolute; + top: -6px; + left: 64px; + width: 0; + height: 0; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-bottom: 6px solid #be2626; +} +/* +.vue-dropzone { + border: 2px solid #E5E5E5; + font-family: 'Arial', sans-serif; + letter-spacing: 0.2px; + color: #777; + transition: background-color 0.2s linear; +} +.vue-dropzone:hover { + background-color: #F6F6F6; +} +*/ +.vue-dropzone i { + color: #CCC; +} +.vue-dropzone .dz-preview .dz-image { + border-radius: 0; + width: 100%; + height: 100%; +} +.vue-dropzone .dz-preview .dz-image img:not([src]) { + width: 200px; + height: 200px; +} +.vue-dropzone .dz-preview .dz-image:hover img { + transform: none; + -webkit-filter: none; +} +.vue-dropzone .dz-preview .dz-details { + bottom: 0; + top: 0; + color: white; + background-color: transparent; + // background-color: rgba(33, 150, 243, 0.8); + // transition: opacity .2s linear; + transition: background-color .2s linear; + text-align: left; + border-radius: .3em; + height: 40px; + padding-left: 15px; +} + +.vue-dropzone .dz-preview.dz-success .dz-details { + background-color: #22a061; +} + +.vue-dropzone .dz-preview.dz-error .dz-details { + background-color: #c44e47; +} + +.vue-dropzone .dz-preview .dz-details .dz-filename { + overflow: hidden; +} + +.vue-dropzone .dz-preview .dz-details .dz-filename span { + font-size: 1.25em; +} +.vue-dropzone .dz-preview .dz-details .dz-filename span, +.vue-dropzone .dz-preview .dz-details .dz-size span { + background-color: transparent; + // font-size: .625em; + // opacity: .5; + opacity: 1; + transition: opacity .25s ease-in-out; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif; +} + +.vue-dropzone .dz-preview .dz-details .dz-size span, +.vue-dropzone .dz-preview .dz-details .dz-size span strong { + opacity: .75; + color: white; + font-size: .625em; +} +.vue-dropzone .dz-preview .dz-details .dz-filename:not(:hover) span { + border: none; +} +.vue-dropzone .dz-preview .dz-details .dz-filename:hover span { + background-color: transparent; + border: none; +} +.vue-dropzone .dz-preview .dz-progress .dz-upload { + // background: #cccccc; + background: #8bc34a; +} +.vue-dropzone .dz-preview .dz-remove { + position: absolute; + z-index: 30; + color: white; + margin-left: 15px; + padding: 10px; + top: inherit; + bottom: 15px; + border: 2px white solid; + text-decoration: none; + text-transform: uppercase; + font-size: 0.8rem; + font-weight: 800; + letter-spacing: 1.1px; + opacity: 0; +} +.vue-dropzone .dz-preview:hover .dz-remove { + opacity: 1; +} +.vue-dropzone .dz-preview .dz-success-mark, +.vue-dropzone .dz-preview .dz-error-mark { + margin-left: auto; + margin-top: auto; + width: 100%; + top: 35%; + left: 0; +} +.vue-dropzone .dz-preview .dz-success-mark svg, +.vue-dropzone .dz-preview .dz-error-mark svg { + margin-left: auto; + margin-right: auto; +} +.vue-dropzone .dz-preview .dz-error-message { + top: calc(15%); + margin-left: auto; + margin-right: auto; + left: 0; + width: 100%; +} +.vue-dropzone .dz-preview .dz-error-message:after { + bottom: -6px; + top: initial; + border-top: 6px solid #a92222; + border-bottom: none; +} + +.dz-size span, .dz-size span strong { + font-size: 0.9em !important; +} + +.vue-dropzone .dz-preview .result, +.vue-dropzone .dz-preview .error { + display: none; +} +.vue-dropzone .dz-preview.dz-success .result, +.vue-dropzone .dz-preview.dz-error .error { + display: inline-block; + position: absolute; + z-index: 50; + right: 5px; + top: 6px; + transition: display 0.2s linear; + cursor: pointer; + + > div { + margin-right: 5px; + display: inline-block; + cursor: pointer; + span { + width: 2em; + height: 2em; + color: #fff; + outline: none; + border-radius: 50%; + background-color: rgba(0,0,0,.5); + display: block; + cursor: pointer; + a { cursor: pointer; } + i { + color: white; + position: absolute; + top: 4px; + left: 4px; + cursor: pointer; + } + } + } +} + +.vue-dropzone .dz-preview.dz-error .error { + span.error-message { + display: none; + width: 250px; + background-color: black; + color: #fff; + text-align: center; + padding: 5px 0; + border-radius: 6px; + top: -8px; + height: auto; + left: 60px; + position: absolute; + transition: display 0.2s linear; + } + + > div > span { + position: relative; + &:hover { + span.error-message { + display: inline-table; + } + } + } + i { + top: 3px !important; + left: 5px !important; + } +} |