Просмотр файла delta_framework-main/admin/styles/css/dropzone.css

Автопокупка рекламы
Размер файла: 10.72Kb 
  1. /* The MIT License */
  2. .dropzone,
  3. .dropzone *,
  4. .dropzone-previews,
  5. .dropzone-previews * {
  6.   -webkit-box-sizing: border-box;
  7.   -moz-box-sizing: border-box;
  8.   box-sizing: border-box;
  9. }
  10. .dropzone {
  11.   position: relative;
  12.   border: 1px #ccc;
  13.   background: #E4E7EA;
  14.   padding: 1em;
  15. }
  16. .dropzone.dz-clickable {
  17.   cursor: pointer;
  18. }
  19. .dropzone.dz-clickable .dz-message,
  20. .dropzone.dz-clickable .dz-message span {
  21.   cursor: pointer;
  22. }
  23. .dropzone.dz-clickable * {
  24.   cursor: default;
  25. }
  26. .dropzone .dz-message {
  27.   opacity: 1;
  28.   -ms-filter: none;
  29.   filter: none;
  30. }
  31. .dropzone.dz-drag-hover {
  32.   border: 2px dashed #ccc;
  33.   background-color: #e9ecef;
  34. }
  35. .dropzone.dz-started .dz-message {
  36.   display: none;
  37. }
  38. .dropzone .dz-preview,
  39. .dropzone-previews .dz-preview {
  40.   background: rgba(255,255,255,0.8);
  41.   position: relative;
  42.   display: inline-block;
  43.   margin: 17px;
  44.   vertical-align: top;
  45.   border: 1px solid #ccc;
  46.   padding: 6px 6px 6px 6px;
  47. }
  48. .dropzone .dz-preview.dz-file-preview [data-dz-thumbnail],
  49. .dropzone-previews .dz-preview.dz-file-preview [data-dz-thumbnail] {
  50.   display: none;
  51. }
  52. .dropzone .dz-preview .dz-details,
  53. .dropzone-previews .dz-preview .dz-details {
  54.   width: 100px;
  55.   height: 100px;
  56.   position: relative;
  57.   background: #ebebeb;
  58.   padding: 5px;
  59.   margin-bottom: 22px;
  60. }
  61. .dropzone .dz-preview .dz-details .dz-filename,
  62. .dropzone-previews .dz-preview .dz-details .dz-filename {
  63.   overflow: hidden;
  64.   height: 100%;
  65. }
  66. .dropzone .dz-preview .dz-details img,
  67. .dropzone-previews .dz-preview .dz-details img {
  68.   position: absolute;
  69.   top: 0;
  70.   left: 0;
  71.   width: 100px;
  72.   height: 100px;
  73. }
  74. .dropzone .dz-preview .dz-details .dz-size,
  75. .dropzone-previews .dz-preview .dz-details .dz-size {
  76.   position: absolute;
  77.   bottom: -28px;
  78.   left: 3px;
  79.   height: 28px;
  80.   line-height: 28px;
  81. }
  82. .dropzone .dz-preview.dz-error .dz-error-mark,
  83. .dropzone-previews .dz-preview.dz-error .dz-error-mark {
  84.   display: block;
  85. }
  86. .dropzone .dz-preview.dz-success .dz-success-mark,
  87. .dropzone-previews .dz-preview.dz-success .dz-success-mark {
  88.   display: block;
  89. }
  90. .dropzone .dz-preview:hover .dz-details img,
  91. .dropzone-previews .dz-preview:hover .dz-details img {
  92.   display: none;
  93. }
  94. .dropzone .dz-preview .dz-success-mark,
  95. .dropzone-previews .dz-preview .dz-success-mark,
  96. .dropzone .dz-preview .dz-error-mark,
  97. .dropzone-previews .dz-preview .dz-error-mark {
  98.   display: none;
  99.   position: absolute;
  100.   width: 40px;
  101.   height: 40px;
  102.   font-size: 30px;
  103.   text-align: center;
  104.   right: -10px;
  105.   top: -10px;
  106. }
  107. .dropzone .dz-preview .dz-success-mark,
  108. .dropzone-previews .dz-preview .dz-success-mark {
  109.   color: #8cc657;
  110. }
  111. .dropzone .dz-preview .dz-error-mark,
  112. .dropzone-previews .dz-preview .dz-error-mark {
  113.   color: #ee162d;
  114. }
  115. .dropzone .dz-preview .dz-progress,
  116. .dropzone-previews .dz-preview .dz-progress {
  117.   position: absolute;
  118.   top: 100px;
  119.   left: 6px;
  120.   right: 6px;
  121.   height: 6px;
  122.   background: #d7d7d7;
  123.   display: none;
  124. }
  125. .dropzone .dz-preview .dz-progress .dz-upload,
  126. .dropzone-previews .dz-preview .dz-progress .dz-upload {
  127.   position: absolute;
  128.   top: 0;
  129.   bottom: 0;
  130.   left: 0;
  131.   width: 0%;
  132.   background-color: #8cc657;
  133. }
  134. .dropzone .dz-preview.dz-processing .dz-progress,
  135. .dropzone-previews .dz-preview.dz-processing .dz-progress {
  136.   display: block;
  137. }
  138. .dropzone .dz-preview .dz-error-message,
  139. .dropzone-previews .dz-preview .dz-error-message {
  140.   display: none;
  141.   position: absolute;
  142.   top: -5px;
  143.   left: -20px;
  144.   background: rgba(245,245,245,0.8);
  145.   padding: 8px 10px;
  146.   color: #800;
  147.   min-width: 140px;
  148.   max-width: 500px;
  149.   z-index: 500;
  150. }
  151. .dropzone .dz-preview:hover.dz-error .dz-error-message,
  152. .dropzone-previews .dz-preview:hover.dz-error .dz-error-message {
  153.   display: block;
  154. }
  155. .dropzone {
  156.   border: 1px solid #ccc;
  157.   min-height: 360px;
  158.   -moz-border-radius: 2px;
  159.   -webkit-border-radius: 2px;
  160.   border-radius: 2px;
  161.   background: #E4E7EA;
  162.   padding: 23px;
  163. }
  164. .dropzone .dz-default.dz-message {
  165.   opacity: 1;
  166.   -ms-filter: none;
  167.   filter: none;
  168.   -webkit-transition: opacity 0.3s ease-in-out;
  169.   -moz-transition: opacity 0.3s ease-in-out;
  170.   -o-transition: opacity 0.3s ease-in-out;
  171.   -ms-transition: opacity 0.3s ease-in-out;
  172.   transition: opacity 0.3s ease-in-out;
  173.   background-image: url("../images/uploadfile.png");
  174.   background-repeat: no-repeat;
  175.   background-position: 0 0;
  176.   position: absolute;
  177.   width: 256px;
  178.   height: 256px;
  179.   margin-left: -128px;
  180.   margin-top: -128px;
  181.   top: 50%;
  182.   left: 50%;
  183. }
  184. .dropzone .dz-default.dz-message span {
  185.   display: none;
  186. }
  187. .dropzone.dz-square .dz-default.dz-message {
  188.   background-position: 0 -123px;
  189.   width: 268px;
  190.   margin-left: -134px;
  191.   height: 174px;
  192.   margin-top: -87px;
  193. }
  194. .dropzone.dz-drag-hover .dz-message {
  195.   opacity: 0.15;
  196.   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
  197.   filter: alpha(opacity=15);
  198. }
  199. .dropzone.dz-started .dz-message {
  200.   display: block;
  201.   opacity: 0;
  202.   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  203.   filter: alpha(opacity=0);
  204. }
  205. .dropzone .dz-preview,
  206. .dropzone-previews .dz-preview {
  207.   font-size: 14px;
  208. }
  209. .dropzone .dz-preview.dz-image-preview:hover .dz-details img,
  210. .dropzone-previews .dz-preview.dz-image-preview:hover .dz-details img {
  211.   display: block;
  212.   opacity: 0.1;
  213.   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
  214.   filter: alpha(opacity=10);
  215. }
  216. .dropzone .dz-preview.dz-success .dz-success-mark,
  217. .dropzone-previews .dz-preview.dz-success .dz-success-mark {
  218.   opacity: 1;
  219.   -ms-filter: none;
  220.   filter: none;
  221. }
  222. .dropzone .dz-preview.dz-error .dz-error-mark,
  223. .dropzone-previews .dz-preview.dz-error .dz-error-mark {
  224.   opacity: 1;
  225.   -ms-filter: none;
  226.   filter: none;
  227. }
  228. .dropzone .dz-preview.dz-error .dz-progress .dz-upload,
  229. .dropzone-previews .dz-preview.dz-error .dz-progress .dz-upload {
  230.   background: #ee1e2d;
  231. }
  232. .dropzone .dz-preview .dz-error-mark,
  233. .dropzone-previews .dz-preview .dz-error-mark,
  234. .dropzone .dz-preview .dz-success-mark,
  235. .dropzone-previews .dz-preview .dz-success-mark {
  236.   display: block;
  237.   opacity: 0;
  238.   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  239.   filter: alpha(opacity=0);
  240.   -webkit-transition: opacity 0.4s ease-in-out;
  241.   -moz-transition: opacity 0.4s ease-in-out;
  242.   -o-transition: opacity 0.4s ease-in-out;
  243.   -ms-transition: opacity 0.4s ease-in-out;
  244.   transition: opacity 0.4s ease-in-out;
  245.   background-image: url("../images/spritemap.png");
  246.   background-repeat: no-repeat;
  247. }
  248. @media all and (-webkit-min-device-pixel-ratio:1.5),(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:1.5/1),(min-device-pixel-ratio:1.5),(min-resolution:138dpi),(min-resolution:1.5dppx) {
  249.   .dropzone .dz-preview .dz-error-mark,
  250.   .dropzone-previews .dz-preview .dz-error-mark,
  251.   .dropzone .dz-preview .dz-success-mark,
  252.   .dropzone-previews .dz-preview .dz-success-mark {
  253.     background-image: url("../images/spritemap@2x.png");
  254.     -webkit-background-size: 428px 406px;
  255.     -moz-background-size: 428px 406px;
  256.     background-size: 428px 406px;
  257.   }
  258. }
  259. .dropzone .dz-preview .dz-error-mark span,
  260. .dropzone-previews .dz-preview .dz-error-mark span,
  261. .dropzone .dz-preview .dz-success-mark span,
  262. .dropzone-previews .dz-preview .dz-success-mark span {
  263.   display: none;
  264. }
  265. .dropzone .dz-preview .dz-error-mark,
  266. .dropzone-previews .dz-preview .dz-error-mark {
  267.   background-position: -268px -123px;
  268. }
  269. .dropzone .dz-preview .dz-success-mark,
  270. .dropzone-previews .dz-preview .dz-success-mark {
  271.   background-position: -268px -163px;
  272. }
  273. .dropzone .dz-preview .dz-progress .dz-upload,
  274. .dropzone-previews .dz-preview .dz-progress .dz-upload {
  275.   -webkit-animation: loading 0.4s linear infinite;
  276.   -moz-animation: loading 0.4s linear infinite;
  277.   -o-animation: loading 0.4s linear infinite;
  278.   -ms-animation: loading 0.4s linear infinite;
  279.   animation: loading 0.4s linear infinite;
  280.   -webkit-transition: width 0.3s ease-in-out;
  281.   -moz-transition: width 0.3s ease-in-out;
  282.   -o-transition: width 0.3s ease-in-out;
  283.   -ms-transition: width 0.3s ease-in-out;
  284.   transition: width 0.3s ease-in-out;
  285.   -webkit-border-radius: 2px;
  286.   border-radius: 2px;
  287.   position: absolute;
  288.   top: 0;
  289.   left: 0;
  290.   width: 0%;
  291.   height: 100%;
  292.   background-image: url("../images/spritemap.png");
  293.   background-repeat: repeat-x;
  294.   background-position: 0px -400px;
  295. }
  296. @media all and (-webkit-min-device-pixel-ratio:1.5),(min--moz-device-pixel-ratio:1.5),(-o-min-device-pixel-ratio:1.5/1),(min-device-pixel-ratio:1.5),(min-resolution:138dpi),(min-resolution:1.5dppx) {
  297.   .dropzone .dz-preview .dz-progress .dz-upload,
  298.   .dropzone-previews .dz-preview .dz-progress .dz-upload {
  299.     background-image: url("../images/spritemap@2x.png");
  300.     -webkit-background-size: 428px 406px;
  301.     -moz-background-size: 428px 406px;
  302.     background-size: 428px 406px;
  303.   }
  304. }
  305. .dropzone .dz-preview.dz-success .dz-progress,
  306. .dropzone-previews .dz-preview.dz-success .dz-progress {
  307.   display: block;
  308.   opacity: 0;
  309.   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  310.   filter: alpha(opacity=0);
  311.   -webkit-transition: opacity 0.4s ease-in-out;
  312.   -moz-transition: opacity 0.4s ease-in-out;
  313.   -o-transition: opacity 0.4s ease-in-out;
  314.   -ms-transition: opacity 0.4s ease-in-out;
  315.   transition: opacity 0.4s ease-in-out;
  316. }
  317. .dropzone .dz-preview .dz-error-message,
  318. .dropzone-previews .dz-preview .dz-error-message {
  319.   display: block;
  320.   opacity: 0;
  321.   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  322.   filter: alpha(opacity=0);
  323.   -webkit-transition: opacity 0.3s ease-in-out;
  324.   -moz-transition: opacity 0.3s ease-in-out;
  325.   -o-transition: opacity 0.3s ease-in-out;
  326.   -ms-transition: opacity 0.3s ease-in-out;
  327.   transition: opacity 0.3s ease-in-out;
  328. }
  329. .dropzone .dz-preview:hover.dz-error .dz-error-message,
  330. .dropzone-previews .dz-preview:hover.dz-error .dz-error-message {
  331.   opacity: 1;
  332.   -ms-filter: none;
  333.   filter: none;
  334. }
  335. .dropzone a.dz-remove,
  336. .dropzone-previews a.dz-remove {
  337.   background-image: -webkit-linear-gradient(top, #fafafa, #eee);
  338.   background-image: -moz-linear-gradient(top, #fafafa, #eee);
  339.   background-image: -o-linear-gradient(top, #fafafa, #eee);
  340.   background-image: -ms-linear-gradient(top, #fafafa, #eee);
  341.   background-image: linear-gradient(to bottom, #fafafa, #eee);
  342.   -webkit-border-radius: 2px;
  343.   border-radius: 2px;
  344.   border: 1px solid #eee;
  345.   text-decoration: none;
  346.   display: block;
  347.   padding: 4px 5px;
  348.   text-align: center;
  349.   color: #aaa;
  350.   margin-top: 26px;
  351. }
  352. .dropzone a.dz-remove:hover,
  353. .dropzone-previews a.dz-remove:hover {
  354.   color: #666;
  355. }
  356. @-moz-keyframes loading {
  357.   0% {
  358.     background-position: 0 -400px;
  359.   }
  360.  
  361.   100% {
  362.     background-position: -7px -400px;
  363.   }
  364. }
  365. @-webkit-keyframes loading {
  366.   0% {
  367.     background-position: 0 -400px;
  368.   }
  369.  
  370.   100% {
  371.     background-position: -7px -400px;
  372.   }
  373. }
  374. @-o-keyframes loading {
  375.   0% {
  376.     background-position: 0 -400px;
  377.   }
  378.  
  379.   100% {
  380.     background-position: -7px -400px;
  381.   }
  382. }
  383. @-ms-keyframes loading {
  384.   0% {
  385.     background-position: 0 -400px;
  386.   }
  387.  
  388.   100% {
  389.     background-position: -7px -400px;
  390.   }
  391. }
  392. @keyframes loading {
  393.   0% {
  394.     background-position: 0 -400px;
  395.   }
  396.  
  397.   100% {
  398.     background-position: -7px -400px;
  399.   }
  400. }