snapas
/
uploader-extension
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 2 Activity
Official Snap.as browser extension for quickly uploading photos.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
7 Commits
1 Branch
51 KiB
 
 
 
Tree: v1.0.1
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'v1.0.1'
${ noResults }
uploader-extension/dropzone.css

388 lines
12 KiB
Raw Permalink Blame History 

  1. /*

  2.  * The MIT License

  3.  * Copyright (c) 2012 Matias Meno <m@tias.me>

  4.  */

  5. @-webkit-keyframes passing-through {

  6.   0% {

  7.     opacity: 0;

  8.     -webkit-transform: translateY(40px);

  9.     -moz-transform: translateY(40px);

  10.     -ms-transform: translateY(40px);

  11.     -o-transform: translateY(40px);

  12.     transform: translateY(40px); }

  13.   30%, 70% {

  14.     opacity: 1;

  15.     -webkit-transform: translateY(0px);

  16.     -moz-transform: translateY(0px);

  17.     -ms-transform: translateY(0px);

  18.     -o-transform: translateY(0px);

  19.     transform: translateY(0px); }

  20.   100% {

  21.     opacity: 0;

  22.     -webkit-transform: translateY(-40px);

  23.     -moz-transform: translateY(-40px);

  24.     -ms-transform: translateY(-40px);

  25.     -o-transform: translateY(-40px);

  26.     transform: translateY(-40px); } }

  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.   30%, 70% {

  36.     opacity: 1;

  37.     -webkit-transform: translateY(0px);

  38.     -moz-transform: translateY(0px);

  39.     -ms-transform: translateY(0px);

  40.     -o-transform: translateY(0px);

  41.     transform: translateY(0px); }

  42.   100% {

  43.     opacity: 0;

  44.     -webkit-transform: translateY(-40px);

  45.     -moz-transform: translateY(-40px);

  46.     -ms-transform: translateY(-40px);

  47.     -o-transform: translateY(-40px);

  48.     transform: translateY(-40px); } }

  49. @keyframes passing-through {

  50.   0% {

  51.     opacity: 0;

  52.     -webkit-transform: translateY(40px);

  53.     -moz-transform: translateY(40px);

  54.     -ms-transform: translateY(40px);

  55.     -o-transform: translateY(40px);

  56.     transform: translateY(40px); }

  57.   30%, 70% {

  58.     opacity: 1;

  59.     -webkit-transform: translateY(0px);

  60.     -moz-transform: translateY(0px);

  61.     -ms-transform: translateY(0px);

  62.     -o-transform: translateY(0px);

  63.     transform: translateY(0px); }

  64.   100% {

  65.     opacity: 0;

  66.     -webkit-transform: translateY(-40px);

  67.     -moz-transform: translateY(-40px);

  68.     -ms-transform: translateY(-40px);

  69.     -o-transform: translateY(-40px);

  70.     transform: translateY(-40px); } }

  71. @-webkit-keyframes slide-in {

  72.   0% {

  73.     opacity: 0;

  74.     -webkit-transform: translateY(40px);

  75.     -moz-transform: translateY(40px);

  76.     -ms-transform: translateY(40px);

  77.     -o-transform: translateY(40px);

  78.     transform: translateY(40px); }

  79.   30% {

  80.     opacity: 1;

  81.     -webkit-transform: translateY(0px);

  82.     -moz-transform: translateY(0px);

  83.     -ms-transform: translateY(0px);

  84.     -o-transform: translateY(0px);

  85.     transform: translateY(0px); } }

  86. @-moz-keyframes slide-in {

  87.   0% {

  88.     opacity: 0;

  89.     -webkit-transform: translateY(40px);

  90.     -moz-transform: translateY(40px);

  91.     -ms-transform: translateY(40px);

  92.     -o-transform: translateY(40px);

  93.     transform: translateY(40px); }

  94.   30% {

  95.     opacity: 1;

  96.     -webkit-transform: translateY(0px);

  97.     -moz-transform: translateY(0px);

  98.     -ms-transform: translateY(0px);

  99.     -o-transform: translateY(0px);

  100.     transform: translateY(0px); } }

  101. @keyframes slide-in {

  102.   0% {

  103.     opacity: 0;

  104.     -webkit-transform: translateY(40px);

  105.     -moz-transform: translateY(40px);

  106.     -ms-transform: translateY(40px);

  107.     -o-transform: translateY(40px);

  108.     transform: translateY(40px); }

  109.   30% {

  110.     opacity: 1;

  111.     -webkit-transform: translateY(0px);

  112.     -moz-transform: translateY(0px);

  113.     -ms-transform: translateY(0px);

  114.     -o-transform: translateY(0px);

  115.     transform: translateY(0px); } }

  116. @-webkit-keyframes pulse {

  117.   0% {

  118.     -webkit-transform: scale(1);

  119.     -moz-transform: scale(1);

  120.     -ms-transform: scale(1);

  121.     -o-transform: scale(1);

  122.     transform: scale(1); }

  123.   10% {

  124.     -webkit-transform: scale(1.1);

  125.     -moz-transform: scale(1.1);

  126.     -ms-transform: scale(1.1);

  127.     -o-transform: scale(1.1);

  128.     transform: scale(1.1); }

  129.   20% {

  130.     -webkit-transform: scale(1);

  131.     -moz-transform: scale(1);

  132.     -ms-transform: scale(1);

  133.     -o-transform: scale(1);

  134.     transform: scale(1); } }

  135. @-moz-keyframes pulse {

  136.   0% {

  137.     -webkit-transform: scale(1);

  138.     -moz-transform: scale(1);

  139.     -ms-transform: scale(1);

  140.     -o-transform: scale(1);

  141.     transform: scale(1); }

  142.   10% {

  143.     -webkit-transform: scale(1.1);

  144.     -moz-transform: scale(1.1);

  145.     -ms-transform: scale(1.1);

  146.     -o-transform: scale(1.1);

  147.     transform: scale(1.1); }

  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. @keyframes pulse {

  155.   0% {

  156.     -webkit-transform: scale(1);

  157.     -moz-transform: scale(1);

  158.     -ms-transform: scale(1);

  159.     -o-transform: scale(1);

  160.     transform: scale(1); }

  161.   10% {

  162.     -webkit-transform: scale(1.1);

  163.     -moz-transform: scale(1.1);

  164.     -ms-transform: scale(1.1);

  165.     -o-transform: scale(1.1);

  166.     transform: scale(1.1); }

  167.   20% {

  168.     -webkit-transform: scale(1);

  169.     -moz-transform: scale(1);

  170.     -ms-transform: scale(1);

  171.     -o-transform: scale(1);

  172.     transform: scale(1); } }

  173. .dropzone, .dropzone * {

  174.   box-sizing: border-box; }

  175. 

  176. .dropzone {

  177.   min-height: 150px;

  178.   border: 2px solid #ccc;

  179.   background: #f2f2f2;

  180.   padding: 20px 20px; }

  181.   .dropzone.dz-clickable {

  182.     cursor: pointer; }

  183.     .dropzone.dz-clickable * {

  184.       cursor: default; }

  185.     .dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * {

  186.       cursor: pointer; }

  187.   .dropzone.dz-started .dz-message {

  188.     display: none; }

  189.   .dropzone.dz-drag-hover {

  190.     border-style: solid; }

  191.     .dropzone.dz-drag-hover .dz-message {

  192.       opacity: 0.5; }

  193.   .dropzone .dz-message {

  194.     text-align: center;

  195.     margin: 2.75em 0; }

  196.   .dropzone .dz-preview {

  197.     position: relative;

  198.     display: inline-block;

  199.     vertical-align: top;

  200.     margin: 16px;

  201.     min-height: 100px; }

  202.     .dropzone .dz-preview:hover {

  203.       z-index: 1000; }

  204.       .dropzone .dz-preview:hover .dz-details {

  205.         opacity: 1; }

  206.     .dropzone .dz-preview.dz-file-preview .dz-image {

  207.       border-radius: 20px;

  208.       background: #999;

  209.       background: linear-gradient(to bottom, #eee, #ddd); }

  210.     .dropzone .dz-preview.dz-file-preview .dz-details {

  211.       opacity: 1; }

  212.     .dropzone .dz-preview.dz-image-preview {

  213.       background: white; }

  214.       .dropzone .dz-preview.dz-image-preview .dz-details {

  215.         -webkit-transition: opacity 0.2s linear;

  216.         -moz-transition: opacity 0.2s linear;

  217.         -ms-transition: opacity 0.2s linear;

  218.         -o-transition: opacity 0.2s linear;

  219.         transition: opacity 0.2s linear; }

  220.     .dropzone .dz-preview .dz-remove {

  221.       font-size: 14px;

  222.       text-align: center;

  223.       display: block;

  224.       cursor: pointer;

  225.       border: none; }

  226.       .dropzone .dz-preview .dz-remove:hover {

  227.         text-decoration: underline; }

  228.     .dropzone .dz-preview:hover .dz-details {

  229.       opacity: 1; }

  230.     .dropzone .dz-preview .dz-details {

  231.       z-index: 20;

  232.       position: absolute;

  233.       top: 0;

  234.       left: 0;

  235.       opacity: 0;

  236.       font-size: 13px;

  237.       min-width: 100%;

  238.       max-width: 100%;

  239.       padding: 2em 1em;

  240.       text-align: center;

  241.       color: rgba(0, 0, 0, 0.9);

  242.       line-height: 150%; }

  243.       .dropzone .dz-preview .dz-details .dz-size {

  244.         margin-bottom: 1em;

  245.         font-size: 16px; }

  246.       .dropzone .dz-preview .dz-details .dz-filename {

  247.         white-space: nowrap; }

  248.         .dropzone .dz-preview .dz-details .dz-filename:hover span {

  249.           border: 1px solid rgba(200, 200, 200, 0.8);

  250.           background-color: rgba(255, 255, 255, 0.8); }

  251.         .dropzone .dz-preview .dz-details .dz-filename:not(:hover) {

  252.           overflow: hidden;

  253.           text-overflow: ellipsis; }

  254.           .dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {

  255.             border: 1px solid transparent; }

  256.       .dropzone .dz-preview .dz-details .dz-filename span, .dropzone .dz-preview .dz-details .dz-size span {

  257.         background-color: rgba(255, 255, 255, 0.4);

  258.         padding: 0 0.4em;

  259.         border-radius: 3px; }

  260.     .dropzone .dz-preview:hover .dz-image img {

  261.       -webkit-transform: scale(1.05, 1.05);

  262.       -moz-transform: scale(1.05, 1.05);

  263.       -ms-transform: scale(1.05, 1.05);

  264.       -o-transform: scale(1.05, 1.05);

  265.       transform: scale(1.05, 1.05);

  266.       -webkit-filter: blur(8px);

  267.       filter: blur(8px); }

  268.     .dropzone .dz-preview .dz-image {

  269.       overflow: hidden;

  270.       width: 120px;

  271.       height: 120px;

  272.       position: relative;

  273.       display: block;

  274.       z-index: 10; }

  275.       .dropzone .dz-preview .dz-image img {

  276.         display: block; }

  277.     .dropzone .dz-preview.dz-success .dz-success-mark {

  278.       -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);

  279.       -moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);

  280.       -ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);

  281.       -o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);

  282.       animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1); }

  283.     .dropzone .dz-preview.dz-error .dz-error-mark {

  284.       opacity: 1;

  285.       -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);

  286.       -moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);

  287.       -ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);

  288.       -o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);

  289.       animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1); }

  290.     .dropzone .dz-preview .dz-success-mark, .dropzone .dz-preview .dz-error-mark {

  291.       pointer-events: none;

  292.       opacity: 0;

  293.       z-index: 500;

  294.       position: absolute;

  295.       display: block;

  296.       top: 50%;

  297.       left: 50%;

  298.       margin-left: -27px;

  299.       margin-top: -27px; }

  300.       .dropzone .dz-preview .dz-success-mark svg, .dropzone .dz-preview .dz-error-mark svg {

  301.         display: block;

  302.         width: 54px;

  303.         height: 54px; }

  304.     .dropzone .dz-preview.dz-processing .dz-progress {

  305.       opacity: 1;

  306.       -webkit-transition: all 0.2s linear;

  307.       -moz-transition: all 0.2s linear;

  308.       -ms-transition: all 0.2s linear;

  309.       -o-transition: all 0.2s linear;

  310.       transition: all 0.2s linear; }

  311.     .dropzone .dz-preview.dz-complete .dz-progress {

  312.       opacity: 0;

  313.       -webkit-transition: opacity 0.4s ease-in;

  314.       -moz-transition: opacity 0.4s ease-in;

  315.       -ms-transition: opacity 0.4s ease-in;

  316.       -o-transition: opacity 0.4s ease-in;

  317.       transition: opacity 0.4s ease-in; }

  318.     .dropzone .dz-preview:not(.dz-processing) .dz-progress {

  319.       -webkit-animation: pulse 6s ease infinite;

  320.       -moz-animation: pulse 6s ease infinite;

  321.       -ms-animation: pulse 6s ease infinite;

  322.       -o-animation: pulse 6s ease infinite;

  323.       animation: pulse 6s ease infinite; }

  324.     .dropzone .dz-preview .dz-progress {

  325.       opacity: 1;

  326.       z-index: 1000;

  327.       pointer-events: none;

  328.       position: absolute;

  329.       height: 16px;

  330.       left: 50%;

  331.       top: 50%;

  332.       margin-top: -8px;

  333.       width: 80px;

  334.       margin-left: -40px;

  335.       background: rgba(255, 255, 255, 0.9);

  336.       -webkit-transform: scale(1);

  337.       border-radius: 8px;

  338.       overflow: hidden; }

  339.       .dropzone .dz-preview .dz-progress .dz-upload {

  340.         background: #333;

  341.         background: linear-gradient(to bottom, #666, #444);

  342.         position: absolute;

  343.         top: 0;

  344.         left: 0;

  345.         bottom: 0;

  346.         width: 0;

  347.         -webkit-transition: width 300ms ease-in-out;

  348.         -moz-transition: width 300ms ease-in-out;

  349.         -ms-transition: width 300ms ease-in-out;

  350.         -o-transition: width 300ms ease-in-out;

  351.         transition: width 300ms ease-in-out; }

  352.     .dropzone .dz-preview.dz-error .dz-error-message {

  353.       display: block; }

  354.     .dropzone .dz-preview.dz-error:hover .dz-error-message {

  355.       opacity: 1;

  356.       pointer-events: auto; }

  357.     .dropzone .dz-preview .dz-error-message {

  358.       pointer-events: none;

  359.       z-index: 1000;

  360.       position: absolute;

  361.       display: block;

  362.       display: none;

  363.       opacity: 0;

  364.       -webkit-transition: opacity 0.3s ease;

  365.       -moz-transition: opacity 0.3s ease;

  366.       -ms-transition: opacity 0.3s ease;

  367.       -o-transition: opacity 0.3s ease;

  368.       transition: opacity 0.3s ease;

  369.       border-radius: 8px;

  370.       font-size: 13px;

  371.       top: 130px;

  372.       left: -10px;

  373.       width: 140px;

  374.       background: #be2626;

  375.       background: linear-gradient(to bottom, #be2626, #a92222);

  376.       padding: 0.5em 1.2em;

  377.       color: white; }

  378.       .dropzone .dz-preview .dz-error-message:after {

  379.         content: '';

  380.         position: absolute;

  381.         top: -6px;

  382.         left: 64px;

  383.         width: 0;

  384.         height: 0;

  385.         border-left: 6px solid transparent;

  386.         border-right: 6px solid transparent;

  387.         border-bottom: 6px solid #be2626; }