You are here

plupload.css in IMCE Uploader 7

/*---------------------------------------------------
    LESS Prefixer
  ---------------------------------------------------

    All of the CSS3 fun, none of the prefixes!

    As a rule, you can use the CSS properties you
    would expect just by adding a '.':

    box-shadow => .box-shadow(@args)

    Also, when shorthand is available, arguments are
    not parameterized. Learn CSS, not LESS Prefixer.

    -------------------------------------------------
    TABLE OF CONTENTS
    (*) denotes a syntax-sugar helper
    -------------------------------------------------

        .animation(@args)
            .animation-delay(@delay)
            .animation-direction(@direction)
            .animation-duration(@duration)
            .animation-iteration-count(@count)
            .animation-name(@name)
            .animation-play-state(@state)
            .animation-timing-function(@function)
        .background-size(@args)
        .border-radius(@args)
        .box-shadow(@args)
            .inner-shadow(@args) *
        .box-sizing(@args)
            .border-box() *
            .content-box() *
        .columns(@args)
            .column-count(@count)
            .column-gap(@gap)
            .column-rule(@args)
            .column-width(@width)
        .gradient(@default,@start,@stop) *
            .linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,[@color3,@stop3,@color4,@stop4])*
            .linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,[@color3,@stop3,@color4,@stop4])*
        .opacity(@factor)
        .transform(@args)
            .rotate(@deg)
            .scale(@factor)
            .translate(@x,@y)
            .translate3d(@x,@y,@z)
            .translateHardware(@x,@y) *
        .text-shadow(@args)
        .transition(@args)
            .transition-delay(@delay)
            .transition-duration(@duration)
            .transition-property(@property)
            .transition-timing-function(@function)



    Credit to LESS Elements for the motivation and
    to CSS3Please.com for implementation.

    Copyright (c) 2012 Joel Sutherland
    MIT Licensed:
    http://www.opensource.org/licenses/mit-license.php

-----------------------------------------------------*/
/* Animation */
/* Background Size */
/* Border Radius */
/* Box Shadows */
/* Box Sizing */
/* Columns */
/* Gradients */
/* Opacity */
/* Text Shadow */
/* Transforms */
/* Transitions */
.ie-7 #edit-imce {
  width: 430px;
}
.ie-7 #imce-content .form-type-plupload .plupload_filelist .plupload_file_name {
  width: 200px;
}
#imce-content .form-item-thumbnails {
  margin: 10px 0;
}
#imce-content .form-type-plupload .plupload_header,
#imce-content .form-type-plupload .plupload_progress,
#imce-content .form-type-plupload .plupload_upload_status,
#imce-content .form-type-plupload .plupload_button.plupload_start {
  display: none;
}
#imce-content .form-type-plupload .plupload_filelist_header,
#imce-content .form-type-plupload .plupload_filelist_footer {
  color: #0e1f43;
  padding: 6px 8px;
  border: 1px solid #a8b9ce;
  background-color: #d1d7e7;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dee2ed), color-stop(100% #d1d7e7));
  background-image: -webkit-linear-gradient(top, #dee2ed 0%, #d1d7e7 100%);
  background-image: -moz-linear-gradient(top, #dee2ed 0%, #d1d7e7 100%);
  background-image: -ms-linear-gradient(top, #dee2ed 0%, #d1d7e7 100%);
  background-image: -o-linear-gradient(top, #dee2ed 0%, #d1d7e7 100%);
  background-image: linear-gradient(top, #dee2ed 0%, #d1d7e7 100%);
}
#imce-content .form-type-plupload .plupload_filelist_header .plupload_file_name,
#imce-content .form-type-plupload .plupload_filelist_header .plupload_file_size,
#imce-content .form-type-plupload .plupload_filelist_header .plupload_file_status,
#imce-content .form-type-plupload .plupload_filelist_header .plupload_file_action,
#imce-content .form-type-plupload .plupload_filelist_header .plupload_file_name span,
#imce-content .form-type-plupload .plupload_filelist_header .plupload_file_size span,
#imce-content .form-type-plupload .plupload_filelist_header .plupload_file_status span,
#imce-content .form-type-plupload .plupload_filelist_header .plupload_file_action span {
  font-weight: bold;
}
#imce-content .form-type-plupload .plupload_filelist_footer {
  line-height: 20px;
  vertical-align: middle;
}
#imce-content .form-type-plupload .plupload_filelist_footer .plupload_file_size,
#imce-content .form-type-plupload .plupload_filelist_footer .plupload_file_status,
#imce-content .form-type-plupload .plupload_filelist_footer .plupload_file_action,
#imce-content .form-type-plupload .plupload_filelist_footer .plupload_upload_status,
#imce-content .form-type-plupload .plupload_filelist_footer .plupload_file_size span,
#imce-content .form-type-plupload .plupload_filelist_footer .plupload_file_status span,
#imce-content .form-type-plupload .plupload_filelist_footer .plupload_file_action span,
#imce-content .form-type-plupload .plupload_filelist_footer .plupload_upload_status span {
  line-height: 22px;
  vertical-align: middle;
}
#imce-content .form-type-plupload .plupload_file_name {
  float: left;
  overflow: hidden;
}
#imce-content .form-type-plupload .plupload_file_action {
  float: right;
  height: 16px;
  margin-left: 15px;
  width: 16px;
}
#imce-content .form-type-plupload .plupload_file_action * {
  display: none;
  height: 16px;
  width: 16px;
}
#imce-content .form-type-plupload .plupload_file_status {
  color: #777;
}
#imce-content .form-type-plupload .plupload_file_status span {
  color: #42454a;
}
#imce-content .form-type-plupload .plupload_file_size,
#imce-content .form-type-plupload .plupload_file_status,
#imce-content .form-type-plupload .plupload_progress {
  float: right;
  width: 80px;
}
#imce-content .form-type-plupload .plupload_file_size,
#imce-content .form-type-plupload .plupload_file_status,
#imce-content .form-type-plupload .plupload_file_action {
  text-align: right;
}
#imce-content .form-type-plupload .plupload_container {
  background: url('../images/transp50.png');
}
#imce-content .form-type-plupload .plupload_container input {
  border: 1px solid #ddd;
  font: normal 11px "Lucida Grande", Verdana, sans-serif;
  width: 98%;
}
#imce-content .form-type-plupload .plupload_filelist {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #e0e3e5;
  border-top: 0;
  border-bottom: 0;
}
#imce-content .form-type-plupload .plupload_filelist .plupload_file_name {
  width: 205px;
}
#imce-content .form-type-plupload .plupload_filelist li {
  background: #f5f5f5 url(../images/backgrounds.gif) repeat-x 0 -156px;
  border-bottom: 1px solid #ddd;
  padding: 10px 8px;
}
#imce-content .form-type-plupload .plupload_filelist li.plupload_droptext {
  background: transparent;
  border: 0;
  line-height: 127px;
  list-style-type: none;
  text-align: center;
  vertical-align: middle;
}
#imce-content .form-type-plupload .plupload_filelist li.plupload_delete a {
  background: url(../images/delete.gif);
}
#imce-content .form-type-plupload .plupload_filelist li.plupload_failed a {
  background: url(../images/error.gif);
  cursor: default;
}
#imce-content .form-type-plupload .plupload_filelist li.plupload_done a {
  background: url(../images/done.gif);
  cursor: default;
}
#imce-content .form-type-plupload .plupload_filelist li.plupload_uploading {
  background: #ecf3dc url(../images/backgrounds.gif) repeat-x 0 -238px;
}
#imce-content .form-type-plupload .plupload_filelist li.plupload_done {
  color: #aaa;
}
#imce-content .form-type-plupload .plupload_button {
  background: none;
  border: none;
  color: #42454a;
  font: bold 11px/18px "Lucida Grande", Verdana, sans-serif;
  margin-right: 4px;
  outline: 0;
  padding: 2px 8px 2px 23px;
  vertical-align: middle;
  text-decoration: none;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
  display: inline-block;
  zoom: 1;
  *display: block;
}
#imce-content .form-type-plupload .plupload_button.plupload_add {
  background: url(../images/add.png) no-repeat 8px 50%;
}
#imce-content .form-type-plupload .plupload_button.plupload_add:hover {
  background-color: #e9ecef;
}
#imce-content .form-type-plupload .plupload_button.plupload_start {
  background: url(../images/up_arrow.png) no-repeat 8px 50%;
}
#imce-content .form-type-plupload .plupload_button.plupload_start:hover {
  background-color: #e9ecef;
}
#imce-content .form-type-plupload .plupload_button.plupload_start.plupload_disabled {
  background: url(../images/up_arrow_disabled.png) no-repeat 8px 50%;
}
#imce-content .form-type-plupload .plupload_button.plupload_disabled {
  cursor: default;
  color: #737373;
}
#imce-content .form-type-plupload .plupload_button.plupload_disabled:hover {
  background-color: transparent;
}
#imce-content .form-type-plupload .plupload_scroll .plupload_filelist_header .plupload_file_action,
#imce-content .form-type-plupload .plupload_scroll .plupload_filelist_footer .plupload_file_action {
  margin-right: 17px;
}
#imce-content .form-type-plupload .plupload_scroll .plupload_filelist {
  background: none;
  height: 147px;
  overflow-y: scroll;
}
#imce-content .form-type-plupload .plupload_progress_container {
  background: #fff;
  border: 1px solid #ccc;
  margin-top: 3px;
  padding: 1px;
}
#imce-content .form-type-plupload .plupload_progress_bar {
  background: #cdeb8b;
  height: 7px;
  width: 0;
}
#imce-content .form-type-plupload .plupload_clear,
#imce-content .form-type-plupload .plupload_clearer {
  clear: both;
}
#imce-content .form-type-plupload .plupload_clearer,
#imce-content .form-type-plupload .plupload_progress_bar {
  display: block;
  font-size: 0;
  line-height: 0;
}

File

plugins/plupload/css/plupload.css
View source
  1. /*---------------------------------------------------
  2. LESS Prefixer
  3. ---------------------------------------------------
  4. All of the CSS3 fun, none of the prefixes!
  5. As a rule, you can use the CSS properties you
  6. would expect just by adding a '.':
  7. box-shadow => .box-shadow(@args)
  8. Also, when shorthand is available, arguments are
  9. not parameterized. Learn CSS, not LESS Prefixer.
  10. -------------------------------------------------
  11. TABLE OF CONTENTS
  12. (*) denotes a syntax-sugar helper
  13. -------------------------------------------------
  14. .animation(@args)
  15. .animation-delay(@delay)
  16. .animation-direction(@direction)
  17. .animation-duration(@duration)
  18. .animation-iteration-count(@count)
  19. .animation-name(@name)
  20. .animation-play-state(@state)
  21. .animation-timing-function(@function)
  22. .background-size(@args)
  23. .border-radius(@args)
  24. .box-shadow(@args)
  25. .inner-shadow(@args) *
  26. .box-sizing(@args)
  27. .border-box() *
  28. .content-box() *
  29. .columns(@args)
  30. .column-count(@count)
  31. .column-gap(@gap)
  32. .column-rule(@args)
  33. .column-width(@width)
  34. .gradient(@default,@start,@stop) *
  35. .linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,[@color3,@stop3,@color4,@stop4])*
  36. .linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,[@color3,@stop3,@color4,@stop4])*
  37. .opacity(@factor)
  38. .transform(@args)
  39. .rotate(@deg)
  40. .scale(@factor)
  41. .translate(@x,@y)
  42. .translate3d(@x,@y,@z)
  43. .translateHardware(@x,@y) *
  44. .text-shadow(@args)
  45. .transition(@args)
  46. .transition-delay(@delay)
  47. .transition-duration(@duration)
  48. .transition-property(@property)
  49. .transition-timing-function(@function)
  50. Credit to LESS Elements for the motivation and
  51. to CSS3Please.com for implementation.
  52. Copyright (c) 2012 Joel Sutherland
  53. MIT Licensed:
  54. http://www.opensource.org/licenses/mit-license.php
  55. -----------------------------------------------------*/
  56. /* Animation */
  57. /* Background Size */
  58. /* Border Radius */
  59. /* Box Shadows */
  60. /* Box Sizing */
  61. /* Columns */
  62. /* Gradients */
  63. /* Opacity */
  64. /* Text Shadow */
  65. /* Transforms */
  66. /* Transitions */
  67. .ie-7 #edit-imce {
  68. width: 430px;
  69. }
  70. .ie-7 #imce-content .form-type-plupload .plupload_filelist .plupload_file_name {
  71. width: 200px;
  72. }
  73. #imce-content .form-item-thumbnails {
  74. margin: 10px 0;
  75. }
  76. #imce-content .form-type-plupload .plupload_header,
  77. #imce-content .form-type-plupload .plupload_progress,
  78. #imce-content .form-type-plupload .plupload_upload_status,
  79. #imce-content .form-type-plupload .plupload_button.plupload_start {
  80. display: none;
  81. }
  82. #imce-content .form-type-plupload .plupload_filelist_header,
  83. #imce-content .form-type-plupload .plupload_filelist_footer {
  84. color: #0e1f43;
  85. padding: 6px 8px;
  86. border: 1px solid #a8b9ce;
  87. background-color: #d1d7e7;
  88. background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dee2ed), color-stop(100% #d1d7e7));
  89. background-image: -webkit-linear-gradient(top, #dee2ed 0%, #d1d7e7 100%);
  90. background-image: -moz-linear-gradient(top, #dee2ed 0%, #d1d7e7 100%);
  91. background-image: -ms-linear-gradient(top, #dee2ed 0%, #d1d7e7 100%);
  92. background-image: -o-linear-gradient(top, #dee2ed 0%, #d1d7e7 100%);
  93. background-image: linear-gradient(top, #dee2ed 0%, #d1d7e7 100%);
  94. }
  95. #imce-content .form-type-plupload .plupload_filelist_header .plupload_file_name,
  96. #imce-content .form-type-plupload .plupload_filelist_header .plupload_file_size,
  97. #imce-content .form-type-plupload .plupload_filelist_header .plupload_file_status,
  98. #imce-content .form-type-plupload .plupload_filelist_header .plupload_file_action,
  99. #imce-content .form-type-plupload .plupload_filelist_header .plupload_file_name span,
  100. #imce-content .form-type-plupload .plupload_filelist_header .plupload_file_size span,
  101. #imce-content .form-type-plupload .plupload_filelist_header .plupload_file_status span,
  102. #imce-content .form-type-plupload .plupload_filelist_header .plupload_file_action span {
  103. font-weight: bold;
  104. }
  105. #imce-content .form-type-plupload .plupload_filelist_footer {
  106. line-height: 20px;
  107. vertical-align: middle;
  108. }
  109. #imce-content .form-type-plupload .plupload_filelist_footer .plupload_file_size,
  110. #imce-content .form-type-plupload .plupload_filelist_footer .plupload_file_status,
  111. #imce-content .form-type-plupload .plupload_filelist_footer .plupload_file_action,
  112. #imce-content .form-type-plupload .plupload_filelist_footer .plupload_upload_status,
  113. #imce-content .form-type-plupload .plupload_filelist_footer .plupload_file_size span,
  114. #imce-content .form-type-plupload .plupload_filelist_footer .plupload_file_status span,
  115. #imce-content .form-type-plupload .plupload_filelist_footer .plupload_file_action span,
  116. #imce-content .form-type-plupload .plupload_filelist_footer .plupload_upload_status span {
  117. line-height: 22px;
  118. vertical-align: middle;
  119. }
  120. #imce-content .form-type-plupload .plupload_file_name {
  121. float: left;
  122. overflow: hidden;
  123. }
  124. #imce-content .form-type-plupload .plupload_file_action {
  125. float: right;
  126. height: 16px;
  127. margin-left: 15px;
  128. width: 16px;
  129. }
  130. #imce-content .form-type-plupload .plupload_file_action * {
  131. display: none;
  132. height: 16px;
  133. width: 16px;
  134. }
  135. #imce-content .form-type-plupload .plupload_file_status {
  136. color: #777;
  137. }
  138. #imce-content .form-type-plupload .plupload_file_status span {
  139. color: #42454a;
  140. }
  141. #imce-content .form-type-plupload .plupload_file_size,
  142. #imce-content .form-type-plupload .plupload_file_status,
  143. #imce-content .form-type-plupload .plupload_progress {
  144. float: right;
  145. width: 80px;
  146. }
  147. #imce-content .form-type-plupload .plupload_file_size,
  148. #imce-content .form-type-plupload .plupload_file_status,
  149. #imce-content .form-type-plupload .plupload_file_action {
  150. text-align: right;
  151. }
  152. #imce-content .form-type-plupload .plupload_container {
  153. background: url('../images/transp50.png');
  154. }
  155. #imce-content .form-type-plupload .plupload_container input {
  156. border: 1px solid #ddd;
  157. font: normal 11px "Lucida Grande", Verdana, sans-serif;
  158. width: 98%;
  159. }
  160. #imce-content .form-type-plupload .plupload_filelist {
  161. list-style: none;
  162. margin: 0;
  163. padding: 0;
  164. border: 1px solid #e0e3e5;
  165. border-top: 0;
  166. border-bottom: 0;
  167. }
  168. #imce-content .form-type-plupload .plupload_filelist .plupload_file_name {
  169. width: 205px;
  170. }
  171. #imce-content .form-type-plupload .plupload_filelist li {
  172. background: #f5f5f5 url(../images/backgrounds.gif) repeat-x 0 -156px;
  173. border-bottom: 1px solid #ddd;
  174. padding: 10px 8px;
  175. }
  176. #imce-content .form-type-plupload .plupload_filelist li.plupload_droptext {
  177. background: transparent;
  178. border: 0;
  179. line-height: 127px;
  180. list-style-type: none;
  181. text-align: center;
  182. vertical-align: middle;
  183. }
  184. #imce-content .form-type-plupload .plupload_filelist li.plupload_delete a {
  185. background: url(../images/delete.gif);
  186. }
  187. #imce-content .form-type-plupload .plupload_filelist li.plupload_failed a {
  188. background: url(../images/error.gif);
  189. cursor: default;
  190. }
  191. #imce-content .form-type-plupload .plupload_filelist li.plupload_done a {
  192. background: url(../images/done.gif);
  193. cursor: default;
  194. }
  195. #imce-content .form-type-plupload .plupload_filelist li.plupload_uploading {
  196. background: #ecf3dc url(../images/backgrounds.gif) repeat-x 0 -238px;
  197. }
  198. #imce-content .form-type-plupload .plupload_filelist li.plupload_done {
  199. color: #aaa;
  200. }
  201. #imce-content .form-type-plupload .plupload_button {
  202. background: none;
  203. border: none;
  204. color: #42454a;
  205. font: bold 11px/18px "Lucida Grande", Verdana, sans-serif;
  206. margin-right: 4px;
  207. outline: 0;
  208. padding: 2px 8px 2px 23px;
  209. vertical-align: middle;
  210. text-decoration: none;
  211. -webkit-border-radius: 4px;
  212. -moz-border-radius: 4px;
  213. border-radius: 4px;
  214. -webkit-background-clip: padding-box;
  215. -moz-background-clip: padding;
  216. background-clip: padding-box;
  217. display: inline-block;
  218. zoom: 1;
  219. *display: block;
  220. }
  221. #imce-content .form-type-plupload .plupload_button.plupload_add {
  222. background: url(../images/add.png) no-repeat 8px 50%;
  223. }
  224. #imce-content .form-type-plupload .plupload_button.plupload_add:hover {
  225. background-color: #e9ecef;
  226. }
  227. #imce-content .form-type-plupload .plupload_button.plupload_start {
  228. background: url(../images/up_arrow.png) no-repeat 8px 50%;
  229. }
  230. #imce-content .form-type-plupload .plupload_button.plupload_start:hover {
  231. background-color: #e9ecef;
  232. }
  233. #imce-content .form-type-plupload .plupload_button.plupload_start.plupload_disabled {
  234. background: url(../images/up_arrow_disabled.png) no-repeat 8px 50%;
  235. }
  236. #imce-content .form-type-plupload .plupload_button.plupload_disabled {
  237. cursor: default;
  238. color: #737373;
  239. }
  240. #imce-content .form-type-plupload .plupload_button.plupload_disabled:hover {
  241. background-color: transparent;
  242. }
  243. #imce-content .form-type-plupload .plupload_scroll .plupload_filelist_header .plupload_file_action,
  244. #imce-content .form-type-plupload .plupload_scroll .plupload_filelist_footer .plupload_file_action {
  245. margin-right: 17px;
  246. }
  247. #imce-content .form-type-plupload .plupload_scroll .plupload_filelist {
  248. background: none;
  249. height: 147px;
  250. overflow-y: scroll;
  251. }
  252. #imce-content .form-type-plupload .plupload_progress_container {
  253. background: #fff;
  254. border: 1px solid #ccc;
  255. margin-top: 3px;
  256. padding: 1px;
  257. }
  258. #imce-content .form-type-plupload .plupload_progress_bar {
  259. background: #cdeb8b;
  260. height: 7px;
  261. width: 0;
  262. }
  263. #imce-content .form-type-plupload .plupload_clear,
  264. #imce-content .form-type-plupload .plupload_clearer {
  265. clear: both;
  266. }
  267. #imce-content .form-type-plupload .plupload_clearer,
  268. #imce-content .form-type-plupload .plupload_progress_bar {
  269. display: block;
  270. font-size: 0;
  271. line-height: 0;
  272. }