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         overflow: auto;
 205 }
 206
 207 .dropzone:not(textarea) {
 208         border: 1px solid rgba(0, 0, 0, 0.3);
 209         padding: 0px 0px 5px 0px;
 210         color: #999;
 211 }
 212 .dropzone.dz-clickable {
 213         cursor: pointer;
 214         border-radius: 4px;
 215         background-color: $background_color;
 216         margin-bottom: 10px;
 217 }
 218 .dropzone.dz-clickable * {
 219         cursor: default;
 220 }
 221 .dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {
 222         cursor: pointer;
 223 }
 224 .dropzone.dz-started .dz-message {
 225         display: none;
 226 }
 227 .dropzone.dz-drag-hover {
 228         border-style: solid;
 229 }
 230 .dropzone.dz-drag-hover .dz-message {
 231         opacity: 0.5;
 232 }
 233 .dropzone .dz-message {
 234         text-align: center;
 235 }
 236 .dropzone .dz-message .dz-button {
 237         background: none;
 238         color: inherit;
 239         border: none;
 240         padding: 0;
 241         font: inherit;
 242         cursor: pointer;
 243         outline: inherit;
 244 }
 245 .dropzone .dz-preview {
 246         position: relative;
 247         display: inline-block;
 248         vertical-align: top;
 249         margin: 16px;
 250         min-height: 100px;
 251 }
 252 .dropzone .dz-preview:hover {
 253         z-index: 1000;
 254 }
 255 .dropzone .dz-preview:hover .dz-details {
 256         opacity: 1;
 257 }
 258 .dropzone .dz-preview.dz-file-preview .dz-image {
 259         border-radius: 20px;
 260         background: #999;
 261         background: linear-gradient(to bottom, #eee, #ddd);
 262 }
 263 .dropzone .dz-preview.dz-file-preview .dz-details {
 264         opacity: 1;
 265 }
 266 .dropzone .dz-preview.dz-image-preview {
 267         background: white;
 268 }
 269 .dropzone .dz-preview.dz-image-preview .dz-details {
 270         -webkit-transition: opacity 0.2s linear;
 271         -moz-transition: opacity 0.2s linear;
 272         -ms-transition: opacity 0.2s linear;
 273         -o-transition: opacity 0.2s linear;
 274         transition: opacity 0.2s linear;
 275 }
 276 .dropzone .dz-preview .dz-remove {
 277         font-size: 14px;
 278         text-align: center;
 279         display: block;
 280         cursor: pointer;
 281         border: none;
 282 }
 283 .dropzone .dz-preview .dz-remove:hover {
 284         text-decoration: underline;
 285 }
 286 .dropzone .dz-preview:hover .dz-details {
 287         opacity: 1;
 288 }
 289 .dropzone .dz-preview .dz-details {
 290         z-index: 20;
 291         position: absolute;
 292         top: 0;
 293         left: 0;
 294         opacity: 0;
 295         font-size: 13px;
 296         min-width: 100%;
 297         max-width: 100%;
 298         padding: 2em 1em;
 299         text-align: center;
 300         color: rgba(0, 0, 0, 0.9);
 301         line-height: 150%;
 302 }
 303 .dropzone .dz-preview .dz-details .dz-size {
 304         margin-bottom: 1em;
 305         font-size: 16px;
 306 }
 307 .dropzone .dz-preview .dz-details .dz-filename {
 308         white-space: nowrap;
 309 }
 310 .dropzone .dz-preview .dz-details .dz-filename:hover span {
 311         border: 1px solid rgba(200, 200, 200, 0.8);
 312         background-color: rgba(255, 255, 255, 0.8);
 313 }
 314 .dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
 315         overflow: hidden;
 316         text-overflow: ellipsis;
 317 }
 318 .dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
 319         border: 1px solid transparent;
 320 }
 321 .dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {
 322         background-color: rgba(255, 255, 255, 0.4);
 323         padding: 0 0.4em;
 324         border-radius: 3px;
 325 }
 326 .dropzone .dz-preview:hover .dz-image img {
 327         -webkit-transform: scale(1.05, 1.05);
 328         -moz-transform: scale(1.05, 1.05);
 329         -ms-transform: scale(1.05, 1.05);
 330         -o-transform: scale(1.05, 1.05);
 331         transform: scale(1.05, 1.05);
 332         -webkit-filter: blur(8px);
 333         filter: blur(8px);
 334 }
 335 .dropzone .dz-preview .dz-image {
 336         border-radius: 20px;
 337         overflow: hidden;
 338         width: 120px;
 339         height: 120px;
 340         position: relative;
 341         display: block;
 342         z-index: 10;
 343 }
 344 .dropzone .dz-preview .dz-image img {
 345         display: block;
 346 }
 347 .dropzone .dz-preview.dz-success .dz-success-mark {
 348         -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
 349         -moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
 350         -ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
 351         -o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
 352         animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
 353 }
 354 .dropzone .dz-preview.dz-error .dz-error-mark {
 355         opacity: 1;
 356         -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
 357         -moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
 358         -ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
 359         -o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
 360         animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
 361 }
 362 .dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {
 363         pointer-events: none;
 364         opacity: 0;
 365         z-index: 500;
 366         position: absolute;
 367         display: block;
 368         top: 50%;
 369         left: 50%;
 370         margin-left: -27px;
 371         margin-top: -27px;
 372 }
 373 .dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg {
 374         display: block;
 375         width: 54px;
 376         height: 54px;
 377 }
 378 .dropzone .dz-preview.dz-processing .dz-progress {
 379         opacity: 1;
 380         -webkit-transition: all 0.2s linear;
 381         -moz-transition: all 0.2s linear;
 382         -ms-transition: all 0.2s linear;
 383         -o-transition: all 0.2s linear;
 384         transition: all 0.2s linear;
 385 }
 386 .dropzone .dz-preview.dz-complete .dz-progress {
 387         opacity: 0;
 388         -webkit-transition: opacity 0.4s ease-in;
 389         -moz-transition: opacity 0.4s ease-in;
 390         -ms-transition: opacity 0.4s ease-in;
 391         -o-transition: opacity 0.4s ease-in;
 392         transition: opacity 0.4s ease-in;
 393 }
 394 .dropzone .dz-preview:not(.dz-processing) .dz-progress {
 395         -webkit-animation: pulse 6s ease infinite;
 396         -moz-animation: pulse 6s ease infinite;
 397         -ms-animation: pulse 6s ease infinite;
 398         -o-animation: pulse 6s ease infinite;
 399         animation: pulse 6s ease infinite;
 400 }
 401 .dropzone .dz-preview .dz-progress {
 402         opacity: 1;
 403         z-index: 1000;
 404         pointer-events: none;
 405         position: absolute;
 406         height: 16px;
 407         left: 50%;
 408         top: 50%;
 409         margin-top: -8px;
 410         width: 80px;
 411         margin-left: -40px;
 412         background: rgba(255, 255, 255, 0.9);
 413         -webkit-transform: scale(1);
 414         border-radius: 8px;
 415         overflow: hidden;
 416 }
 417 .dropzone .dz-preview .dz-progress .dz-upload {
 418         background: #333;
 419         background: linear-gradient(to bottom, #666, #444);
 420         position: absolute;
 421         top: 0;
 422         left: 0;
 423         bottom: 0;
 424         width: 0;
 425         -webkit-transition: width 300ms ease-in-out;
 426         -moz-transition: width 300ms ease-in-out;
 427         -ms-transition: width 300ms ease-in-out;
 428         -o-transition: width 300ms ease-in-out;
 429         transition: width 300ms ease-in-out;
 430 }
 431 .dropzone .dz-preview.dz-error .dz-error-message {
 432         display: block;
 433 }
 434 .dropzone .dz-preview.dz-error:hover .dz-error-message {
 435         opacity: 1;
 436         pointer-events: auto;
 437 }
 438 .dropzone .dz-preview .dz-error-message {
 439         pointer-events: none;
 440         z-index: 1000;
 441         position: absolute;
 442         display: block;
 443         display: none;
 444         opacity: 0;
 445         -webkit-transition: opacity 0.3s ease;
 446         -moz-transition: opacity 0.3s ease;
 447         -ms-transition: opacity 0.3s ease;
 448         -o-transition: opacity 0.3s ease;
 449         transition: opacity 0.3s ease;
 450         border-radius: 8px;
 451         font-size: 13px;
 452         top: 130px;
 453         left: -10px;
 454         width: 140px;
 455         background: #be2626;
 456         background: linear-gradient(to bottom, #be2626, #a92222);
 457         padding: 0.5em 1.2em;
 458         color: white;
 459 }
 460 .dropzone .dz-preview .dz-error-message:after {
 461         content: "";
 462         position: absolute;
 463         top: -6px;
 464         left: 64px;
 465         width: 0;
 466         height: 0;
 467         border-left: 6px solid transparent;
 468         border-right: 6px solid transparent;
 469         border-bottom: 6px solid #be2626;
 470 }