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