diff options
Diffstat (limited to 'public/css')
| -rw-r--r-- | public/css/style.css | 121 |
1 files changed, 121 insertions, 0 deletions
diff --git a/public/css/style.css b/public/css/style.css new file mode 100644 index 0000000..993811e --- /dev/null +++ b/public/css/style.css @@ -0,0 +1,121 @@ +section#home { + user-select: none; +} + +section#home .link { + user-select: all; +} + +/* ------------------ + HOME +------------------ */ + +section#home #b { + -webkit-animation-delay: 0.5s; + animation-delay: 0.5s; + -webkit-animation-duration: 1.5s; + animation-duration: 1.5s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; + -webkit-animation-name: floatUp; + animation-name: floatUp; + -webkit-animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1); + animation-timing-function: cubic-bezier(0, 0.71, 0.29, 1); + border-radius: 24px; + display: inline-block; + height: 240px; + margin-bottom: 40px; + position: relative; + vertical-align: top; + width: 240px; + box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2); +} + +section#home div#dropzone { + border: 1px solid #dbdbdb; + background-color: rgba(0, 0, 0, 0); + border-color: #ff3860; + color: #ff3860; + display: none; + width: 100%; + border-radius: 3px; + box-shadow: none; + height: 2.5em; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + user-select: none; + justify-content: center; + padding-left: .75em; + padding-right: .75em; + text-align: center; + cursor: pointer; +} + +section#home div#uploads, section#home p#tokenContainer, section#home a#panel { display: none; } +section#home div#dropzone:hover { background-color: #ff3860; border-color: #ff3860; color: #fff; } +section#home h3#maxFileSize { font-size: 14px; } +section#home h3#links span { padding-left: 5px; padding-right: 5px; } +section#home img.logo { height: 200px; margin-top: 20px; } +section#home .dz-preview .dz-details { display: flex; } +section#home .dz-preview .dz-details .dz-size, section#home .dz-preview .dz-details .dz-filename { flex: 1; } +section#home .dz-preview img, section#home .dz-preview .dz-success-mark, section#home .dz-preview .dz-error-mark { display: none; } +section#home div#uploads { margin-bottom: 25px; } + +@keyframes floatUp { + 0% { + opacity: 0; + box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0), 0 0 0 rgba(10, 10, 10, 0); + -webkit-transform: scale(0.86); + transform: scale(0.86); + } + 25% { opacity: 100; } + 67% { + box-shadow: 0 0 0 rgba(10, 10, 10, 0), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2); + -webkit-transform: scale(1); + transform: scale(1); + } + 100% { + box-shadow: 0 20px 60px rgba(10, 10, 10, 0.05), 0 5px 10px rgba(10, 10, 10, 0.1), 0 1px 1px rgba(10, 10, 10, 0.2); + -webkit-transform: scale(1); + transform: scale(1); + } +} + +/* ------------------ + PANEL +------------------ */ + +section#login input, section#login p.control a.button { + border-left: 0px; + border-top: 0px; + border-right: 0px; + border-radius: 0px; + box-shadow: 0 0 0; +} + +section#login p.control a.button { margin-left: 10px; } +section#login p.control a#loginBtn { border-right: 0px; } +section#login p.control a#registerBtn { border-left: 0px; } + + +section#auth, section#dashboard { display: none } +section#auth input { background: rgba(0, 0, 0, 0); } +section#auth input, section#auth a { + border-left: 0px; + border-top: 0px; + border-right: 0px; + border-radius: 0px; + box-shadow: 0 0 0; +} + +section#dashboard .table { font-size: 12px } +section#dashboard div#table div.column { display:flex; width: 200px; height: 220px; margin: 9px; background: #f9f9f9; overflow: hidden; flex-wrap: wrap; align-items: center; } +section#dashboard div#table div.column a { width: 100%; } +section#dashboard div#table div.column a:first-child { height: 180px; } +section#dashboard div#table div.column a img { width:200px; } + +.select-wrapper { + text-align: center; + margin-bottom: 10px; +} |