view/theme/frio/css/dropzone.frio.css

   1 @-webkit-keyframes passing-through {
   2         0% {
   3           opacity: 0;
   4           -webkit-transform: translateY(40px);
   5           -moz-transform: translateY(40px);
   6           -ms-transform: translateY(40px);
   7           -o-transform: translateY(40px);
   8           transform: translateY(40px);
   9         }
  10         30%, 70% {
  11           opacity: 1;
  12           -webkit-transform: translateY(0px);
  13           -moz-transform: translateY(0px);
  14           -ms-transform: translateY(0px);
  15           -o-transform: translateY(0px);
  16           transform: translateY(0px);
  17         }
  18         100% {
  19           opacity: 0;
  20           -webkit-transform: translateY(-40px);
  21           -moz-transform: translateY(-40px);
  22           -ms-transform: translateY(-40px);
  23           -o-transform: translateY(-40px);
  24           transform: translateY(-40px);
  25         }
  26 }
  27 @-moz-keyframes passing-through {
  28         0% {
  29           opacity: 0;
  30           -webkit-transform: translateY(40px);
  31           -moz-transform: translateY(40px);
  32           -ms-transform: translateY(40px);
  33           -o-transform: translateY(40px);
  34           transform: translateY(40px);
  35         }
  36         30%, 70% {
  37           opacity: 1;
  38           -webkit-transform: translateY(0px);
  39           -moz-transform: translateY(0px);
  40           -ms-transform: translateY(0px);
  41           -o-transform: translateY(0px);
  42           transform: translateY(0px);
  43         }
  44         100% {
  45           opacity: 0;
  46           -webkit-transform: translateY(-40px);
  47           -moz-transform: translateY(-40px);
  48           -ms-transform: translateY(-40px);
  49           -o-transform: translateY(-40px);
  50           transform: translateY(-40px);
  51         }
  52 }
  53 @keyframes passing-through {
  54         0% {
  55           opacity: 0;
  56           -webkit-transform: translateY(40px);
  57           -moz-transform: translateY(40px);
  58           -ms-transform: translateY(40px);
  59           -o-transform: translateY(40px);
  60           transform: translateY(40px);
  61         }
  62         30%, 70% {
  63           opacity: 1;
  64           -webkit-transform: translateY(0px);
  65           -moz-transform: translateY(0px);
  66           -ms-transform: translateY(0px);
  67           -o-transform: translateY(0px);
  68           transform: translateY(0px);
  69         }
  70         100% {
  71           opacity: 0;
  72           -webkit-transform: translateY(-40px);
  73           -moz-transform: translateY(-40px);
  74           -ms-transform: translateY(-40px);
  75           -o-transform: translateY(-40px);
  76           transform: translateY(-40px);
  77         }
  78 }
  79 @-webkit-keyframes slide-in {
  80         0% {
  81           opacity: 0;
  82           -webkit-transform: translateY(40px);
  83           -moz-transform: translateY(40px);
  84           -ms-transform: translateY(40px);
  85           -o-transform: translateY(40px);
  86           transform: translateY(40px);
  87         }
  88         30% {
  89           opacity: 1;
  90           -webkit-transform: translateY(0px);
  91           -moz-transform: translateY(0px);
  92           -ms-transform: translateY(0px);
  93           -o-transform: translateY(0px);
  94           transform: translateY(0px);
  95         }
  96 }
  97 @-moz-keyframes slide-in {
  98         0% {
  99           opacity: 0;
 100           -webkit-transform: translateY(40px);
 101           -moz-transform: translateY(40px);
 102           -ms-transform: translateY(40px);
 103           -o-transform: translateY(40px);
 104           transform: translateY(40px);
 105         }
 106         30% {
 107           opacity: 1;
 108           -webkit-transform: translateY(0px);
 109           -moz-transform: translateY(0px);
 110           -ms-transform: translateY(0px);
 111           -o-transform: translateY(0px);
 112           transform: translateY(0px);
 113         }
 114 }
 115 @keyframes slide-in {
 116         0% {
 117           opacity: 0;
 118           -webkit-transform: translateY(40px);
 119           -moz-transform: translateY(40px);
 120           -ms-transform: translateY(40px);
 121           -o-transform: translateY(40px);
 122           transform: translateY(40px);
 123         }
 124         30% {
 125           opacity: 1;
 126           -webkit-transform: translateY(0px);
 127           -moz-transform: translateY(0px);
 128           -ms-transform: translateY(0px);
 129           -o-transform: translateY(0px);
 130           transform: translateY(0px);
 131         }
 132 }
 133 @-webkit-keyframes pulse {
 134         0% {
 135           -webkit-transform: scale(1);
 136           -moz-transform: scale(1);
 137           -ms-transform: scale(1);
 138           -o-transform: scale(1);
 139           transform: scale(1);
 140         }
 141         10% {
 142           -webkit-transform: scale(1.1);
 143           -moz-transform: scale(1.1);
 144           -ms-transform: scale(1.1);
 145           -o-transform: scale(1.1);
 146           transform: scale(1.1);
 147         }
 148         20% {
 149           -webkit-transform: scale(1);
 150           -moz-transform: scale(1);
 151           -ms-transform: scale(1);
 152           -o-transform: scale(1);
 153           transform: scale(1);
 154         }
 155 }
 156 @-moz-keyframes pulse {
 157         0% {
 158           -webkit-transform: scale(1);
 159           -moz-transform: scale(1);
 160           -ms-transform: scale(1);
 161           -o-transform: scale(1);
 162           transform: scale(1);
 163         }
 164         10% {
 165           -webkit-transform: scale(1.1);
 166           -moz-transform: scale(1.1);
 167           -ms-transform: scale(1.1);
 168           -o-transform: scale(1.1);
 169           transform: scale(1.1);
 170         }
 171         20% {
 172           -webkit-transform: scale(1);
 173           -moz-transform: scale(1);
 174           -ms-transform: scale(1);
 175           -o-transform: scale(1);
 176           transform: scale(1);
 177         }
 178 }
 179 @keyframes pulse {
 180         0% {
 181           -webkit-transform: scale(1);
 182           -moz-transform: scale(1);
 183           -ms-transform: scale(1);
 184           -o-transform: scale(1);
 185           transform: scale(1);
 186         }
 187         10% {
 188           -webkit-transform: scale(1.1);
 189           -moz-transform: scale(1.1);
 190           -ms-transform: scale(1.1);
 191           -o-transform: scale(1.1);
 192           transform: scale(1.1);
 193         }
 194         20% {
 195           -webkit-transform: scale(1);
 196           -moz-transform: scale(1);
 197           -ms-transform: scale(1);
 198           -o-transform: scale(1);
 199           transform: scale(1);
 200         }
 201 }
 202 .dropzone, .dropzone * {
 203         box-sizing: border-box;
 204 }
 205
 206 .dropzone {
 207         min-height: 150px;
 208         border: 1px solid rgba(0, 0, 0, 0.3);
 209         padding: 2px 2px;
 210 }
 211 .dropzone.dz-clickable {
 212         cursor: pointer;
 213 }
 214 .dropzone.dz-clickable * {
 215         cursor: default;
 216 }
 217 .dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
 218         cursor: pointer;
 219 }
 220 .dropzone.dz-started .dz-message {
 221         display: none;
 222 }
 223 .dropzone.dz-drag-hover {
 224         border-style: solid;
 225 }
 226 .dropzone.dz-drag-hover .dz-message {
 227         opacity: 0.5;
 228 }
 229 .dropzone .dz-message {
 230         text-align: center;
 231 }
 232 .dropzone .dz-message .dz-button {
 233         background: none;
 234         color: inherit;
 235         border: none;
 236         padding: 0;
 237         font: inherit;
 238         cursor: pointer;
 239         outline: inherit;
 240 }
 241 .dropzone .dz-preview {
 242         position: relative;
 243         display: inline-block;
 244         vertical-align: top;
 245         margin: 16px;
 246         min-height: 100px;
 247 }
 248 .dropzone .dz-preview:hover {
 249         z-index: 1000;
 250 }
 251 .dropzone .dz-preview:hover .dz-details {
 252         opacity: 1;
 253 }
 254 .dropzone .dz-preview.dz-file-preview .dz-image {
 255         border-radius: 20px;
 256         background: #999;
 257         background: linear-gradient(to bottom, #eee, #ddd);
 258 }
 259 .dropzone .dz-preview.dz-file-preview .dz-details {
 260         opacity: 1;
 261 }
 262 .dropzone .dz-preview.dz-image-preview {
 263         background: white;
 264 }
 265 .dropzone .dz-preview.dz-image-preview .dz-details {
 266         -webkit-transition: opacity 0.2s linear;
 267         -moz-transition: opacity 0.2s linear;
 268         -ms-transition: opacity 0.2s linear;
 269         -o-transition: opacity 0.2s linear;
 270         transition: opacity 0.2s linear;
 271 }
 272 .dropzone .dz-preview .dz-remove {
 273         font-size: 14px;
 274         text-align: center;
 275         display: block;
 276         cursor: pointer;
 277         border: none;
 278 }
 279 .dropzone .dz-preview .dz-remove:hover {
 280         text-decoration: underline;
 281 }
 282 .dropzone .dz-preview:hover .dz-details {
 283         opacity: 1;
 284 }
 285 .dropzone .dz-preview .dz-details {
 286         z-index: 20;
 287         position: absolute;
 288         top: 0;
 289         left: 0;
 290         opacity: 0;
 291         font-size: 13px;
 292         min-width: 100%;
 293         max-width: 100%;
 294         padding: 2em 1em;
 295         text-align: center;
 296         color: rgba(0, 0, 0, 0.9);
 297         line-height: 150%;
 298 }
 299 .dropzone .dz-preview .dz-details .dz-size {
 300         margin-bottom: 1em;
 301         font-size: 16px;
 302 }
 303 .dropzone .dz-preview .dz-details .dz-filename {
 304         white-space: nowrap;
 305 }
 306 .dropzone .dz-preview .dz-details .dz-filename:hover span {
 307         border: 1px solid rgba(200, 200, 200, 0.8);
 308         background-color: rgba(255, 255, 255, 0.8);
 309 }
 310 .dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
 311         overflow: hidden;
 312         text-overflow: ellipsis;
 313 }
 314 .dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
 315         border: 1px solid transparent;
 316 }
 317 .dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
 318         background-color: rgba(255, 255, 255, 0.4);
 319         padding: 0 0.4em;
 320         border-radius: 3px;
 321 }
 322 .dropzone .dz-preview:hover .dz-image img {
 323         -webkit-transform: scale(1.05, 1.05);
 324         -moz-transform: scale(1.05, 1.05);
 325         -ms-transform: scale(1.05, 1.05);
 326         -o-transform: scale(1.05, 1.05);
 327         transform: scale(1.05, 1.05);
 328         -webkit-filter: blur(8px);
 329         filter: blur(8px);
 330 }
 331 .dropzone .dz-preview .dz-image {
 332         border-radius: 20px;
 333         overflow: hidden;
 334         width: 120px;
 335         height: 120px;
 336         position: relative;
 337         display: block;
 338         z-index: 10;
 339 }
 340 .dropzone .dz-preview .dz-image img {
 341         display: block;
 342 }
 343 .dropzone .dz-preview.dz-success .dz-success-mark {
 344         -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
 345         -moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
 346         -ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
 347         -o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
 348         animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
 349 }
 350 .dropzone .dz-preview.dz-error .dz-error-mark {
 351         opacity: 1;
 352         -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
 353         -moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
 354         -ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
 355         -o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
 356         animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
 357 }
 358 .dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
 359         pointer-events: none;
 360         opacity: 0;
 361         z-index: 500;
 362         position: absolute;
 363         display: block;
 364         top: 50%;
 365         left: 50%;
 366         margin-left: -27px;
 367         margin-top: -27px;
 368 }
 369 .dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg {
 370         display: block;
 371         width: 54px;
 372         height: 54px;
 373 }
 374 .dropzone .dz-preview.dz-processing .dz-progress {
 375         opacity: 1;
 376         -webkit-transition: all 0.2s linear;
 377         -moz-transition: all 0.2s linear;
 378         -ms-transition: all 0.2s linear;
 379         -o-transition: all 0.2s linear;
 380         transition: all 0.2s linear;
 381 }
 382 .dropzone .dz-preview.dz-complete .dz-progress {
 383         opacity: 0;
 384         -webkit-transition: opacity 0.4s ease-in;
 385         -moz-transition: opacity 0.4s ease-in;
 386         -ms-transition: opacity 0.4s ease-in;
 387         -o-transition: opacity 0.4s ease-in;
 388         transition: opacity 0.4s ease-in;
 389 }
 390 .dropzone .dz-preview:not(.dz-processing) .dz-progress {
 391         -webkit-animation: pulse 6s ease infinite;
 392         -moz-animation: pulse 6s ease infinite;
 393         -ms-animation: pulse 6s ease infinite;
 394         -o-animation: pulse 6s ease infinite;
 395         animation: pulse 6s ease infinite;
 396 }
 397 .dropzone .dz-preview .dz-progress {
 398         opacity: 1;
 399         z-index: 1000;
 400         pointer-events: none;
 401         position: absolute;
 402         height: 16px;
 403         left: 50%;
 404         top: 50%;
 405         margin-top: -8px;
 406         width: 80px;
 407         margin-left: -40px;
 408         background: rgba(255, 255, 255, 0.9);
 409         -webkit-transform: scale(1);
 410         border-radius: 8px;
 411         overflow: hidden;
 412 }
 413 .dropzone .dz-preview .dz-progress .dz-upload {
 414         background: #333;
 415         background: linear-gradient(to bottom, #666, #444);
 416         position: absolute;
 417         top: 0;
 418         left: 0;
 419         bottom: 0;
 420         width: 0;
 421         -webkit-transition: width 300ms ease-in-out;
 422         -moz-transition: width 300ms ease-in-out;
 423         -ms-transition: width 300ms ease-in-out;
 424         -o-transition: width 300ms ease-in-out;
 425         transition: width 300ms ease-in-out;
 426 }
 427 .dropzone .dz-preview.dz-error .dz-error-message {
 428         display: block;
 429 }
 430 .dropzone .dz-preview.dz-error:hover .dz-error-message {
 431         opacity: 1;
 432         pointer-events: auto;
 433 }
 434 .dropzone .dz-preview .dz-error-message {
 435         pointer-events: none;
 436         z-index: 1000;
 437         position: absolute;
 438         display: block;
 439         display: none;
 440         opacity: 0;
 441         -webkit-transition: opacity 0.3s ease;
 442         -moz-transition: opacity 0.3s ease;
 443         -ms-transition: opacity 0.3s ease;
 444         -o-transition: opacity 0.3s ease;
 445         transition: opacity 0.3s ease;
 446         border-radius: 8px;
 447         font-size: 13px;
 448         top: 130px;
 449         left: -10px;
 450         width: 140px;
 451         background: #be2626;
 452         background: linear-gradient(to bottom, #be2626, #a92222);
 453         padding: 0.5em 1.2em;
 454         color: white;
 455 }
 456 .dropzone .dz-preview .dz-error-message:after {
 457         content: "";
 458         position: absolute;
 459         top: -6px;
 460         left: 64px;
 461         width: 0;
 462         height: 0;
 463         border-left: 6px solid transparent;
 464         border-right: 6px solid transparent;
 465         border-bottom: 6px solid #be2626;
 466 }