uniform.default.css 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358
  1. /*
  2. Uniform Theme: Uniform Default
  3. Version: 1.8
  4. By: Josh Pyles
  5. License: MIT License
  6. ---
  7. For use with the Uniform plugin:
  8. http://uniformjs.com/
  9. */
  10. .mg-wrapper {
  11. /* General settings */
  12. /* Input & Textarea */
  13. /* Remove default webkit and possible mozilla .search styles.
  14. * Keeping this as :active to remove browser styles */
  15. /* Select */
  16. /* Checkbox */
  17. /* Radio */
  18. /* Uploader */
  19. /* Buttons */
  20. /* INPUT & TEXTAREA */
  21. /* PRESENTATION */
  22. /* Buttons */
  23. /* Select */
  24. /* Checker */
  25. /* Radio */
  26. /* Uploader */ }
  27. .mg-wrapper div.selector, .mg-wrapper div.selector span, .mg-wrapper div.checker span, .mg-wrapper div.radio span, .mg-wrapper div.uploader, .mg-wrapper div.uploader span.action, .mg-wrapper div.button, .mg-wrapper div.button span {
  28. background-image: url("../images/sprite.png");
  29. background-repeat: no-repeat;
  30. -webkit-font-smoothing: antialiased; }
  31. .mg-wrapper div.selector, .mg-wrapper div.checker, .mg-wrapper div.button, .mg-wrapper div.radio, .mg-wrapper div.uploader {
  32. display: -moz-inline-box;
  33. display: inline-block;
  34. *display: inline;
  35. zoom: 1;
  36. vertical-align: middle;
  37. /* Keeping this as :focus to remove browser styles */ }
  38. .mg-wrapper div.selector:focus, .mg-wrapper div.checker:focus, .mg-wrapper div.button:focus, .mg-wrapper div.radio:focus, .mg-wrapper div.uploader:focus {
  39. outline: 0; }
  40. .mg-wrapper div.selector, .mg-wrapper div.selector *, .mg-wrapper div.radio, .mg-wrapper div.radio *, .mg-wrapper div.checker, .mg-wrapper div.checker *, .mg-wrapper div.uploader, .mg-wrapper div.uploader *, .mg-wrapper div.button, .mg-wrapper div.button * {
  41. margin: 0;
  42. padding: 0; }
  43. .mg-wrapper .highContrastDetect {
  44. background: url("../images/bg-input.png") repeat-x 0 0;
  45. width: 0px;
  46. height: 0px; }
  47. .mg-wrapper input.uniform-input,
  48. .mg-wrapper select.uniform-multiselect,
  49. .mg-wrapper textarea.uniform {
  50. padding: 3px;
  51. background: url("../images/bg-input.png") repeat-x 0 0;
  52. outline: 0; }
  53. .mg-wrapper input.uniform-input.active,
  54. .mg-wrapper select.uniform-multiselect.active,
  55. .mg-wrapper textarea.uniform.active {
  56. background: url("../images/bg-input-focus.png") repeat-x 0 0; }
  57. .mg-wrapper div.checker input,
  58. .mg-wrapper input[type="search"],
  59. .mg-wrapper input[type="search"]:active {
  60. -moz-appearance: none;
  61. -webkit-appearance: none; }
  62. .mg-wrapper div.selector {
  63. background-position: 0 -130px;
  64. line-height: 26px;
  65. height: 26px;
  66. padding: 0 0 0 10px;
  67. position: relative;
  68. overflow: hidden; }
  69. .mg-wrapper div.selector span {
  70. text-overflow: ellipsis;
  71. display: block;
  72. overflow: hidden;
  73. white-space: nowrap;
  74. background-position: right 0;
  75. height: 26px;
  76. line-height: 26px;
  77. padding-right: 25px;
  78. cursor: pointer;
  79. width: 100%;
  80. display: block; }
  81. .mg-wrapper div.selector.fixedWidth {
  82. width: 190px; }
  83. .mg-wrapper div.selector.fixedWidth span {
  84. width: 155px; }
  85. .mg-wrapper div.selector select {
  86. opacity: 0;
  87. filter: alpha(opacity=0);
  88. -moz-opacity: 0;
  89. border: none;
  90. background: none;
  91. position: absolute;
  92. height: 22px;
  93. top: 2px;
  94. left: 0px;
  95. width: 100%; }
  96. .mg-wrapper div.selector.active {
  97. background-position: 0 -156px; }
  98. .mg-wrapper div.selector.active span {
  99. background-position: right -26px; }
  100. .mg-wrapper div.selector.hover, .mg-wrapper div.selector.focus {
  101. background-position: 0 -182px; }
  102. .mg-wrapper div.selector.hover span, .mg-wrapper div.selector.focus span {
  103. background-position: right -52px; }
  104. .mg-wrapper div.selector.hover.active, .mg-wrapper div.selector.focus.active {
  105. background-position: 0 -208px; }
  106. .mg-wrapper div.selector.hover.active span, .mg-wrapper div.selector.focus.active span {
  107. background-position: right -78px; }
  108. .mg-wrapper div.selector.disabled, .mg-wrapper div.selector.disabled.active {
  109. background-position: 0 -234px; }
  110. .mg-wrapper div.selector.disabled span, .mg-wrapper div.selector.disabled.active span {
  111. background-position: right -104px; }
  112. .mg-wrapper div.checker {
  113. position: relative; }
  114. .mg-wrapper div.checker, .mg-wrapper div.checker span, .mg-wrapper div.checker input {
  115. width: 19px;
  116. height: 19px; }
  117. .mg-wrapper div.checker span {
  118. display: -moz-inline-box;
  119. display: inline-block;
  120. *display: inline;
  121. zoom: 1;
  122. text-align: center;
  123. background-position: 0 -260px; }
  124. .mg-wrapper div.checker span.checked {
  125. background-position: -76px -260px; }
  126. .mg-wrapper div.checker input {
  127. opacity: 0;
  128. filter: alpha(opacity=0);
  129. -moz-opacity: 0;
  130. border: none;
  131. background: none;
  132. display: -moz-inline-box;
  133. display: inline-block;
  134. *display: inline;
  135. zoom: 1; }
  136. .mg-wrapper div.checker.active span {
  137. background-position: -19px -260px; }
  138. .mg-wrapper div.checker.active span.checked {
  139. background-position: -95px -260px; }
  140. .mg-wrapper div.checker.hover span, .mg-wrapper div.checker.focus span {
  141. background-position: -38px -260px; }
  142. .mg-wrapper div.checker.hover span.checked, .mg-wrapper div.checker.focus span.checked {
  143. background-position: -114px -260px; }
  144. .mg-wrapper div.checker.hover.active span, .mg-wrapper div.checker.focus.active span {
  145. background-position: -57px -260px; }
  146. .mg-wrapper div.checker.hover.active span.checked, .mg-wrapper div.checker.focus.active span.checked {
  147. background-position: -133px -260px; }
  148. .mg-wrapper div.checker.disabled, .mg-wrapper div.checker.disabled.active {
  149. background-position: -152px -260px; }
  150. .mg-wrapper div.checker.disabled span.checked, .mg-wrapper div.checker.disabled.active span.checked {
  151. background-position: -171px -260px; }
  152. .mg-wrapper div.radio {
  153. display: block;
  154. margin-bottom: 10px;
  155. margin-top: 10px;
  156. position: relative;
  157. }
  158. .mg-wrapper div.radio, .mg-wrapper div.radio span, .mg-wrapper div.radio input {
  159. width: 18px;
  160. height: 18px; }
  161. .mg-wrapper .radio label{
  162. margin-left:20px;
  163. }
  164. .mg-wrapper div.radio span {
  165. display: -moz-inline-box;
  166. display: inline-block;
  167. *display: inline;
  168. zoom: 1;
  169. text-align: center;
  170. background-position: 0 -279px; }
  171. .mg-wrapper div.radio span.checked {
  172. background-position: -72px -279px; }
  173. .mg-wrapper div.radio input {
  174. filter: alpha(opacity=0);
  175. -moz-opacity: 0;
  176. border: none;
  177. background: none;
  178. display: -moz-inline-box;
  179. display: inline-block;
  180. *display: inline;
  181. zoom: 1;
  182. text-align: center; }
  183. .mg-wrapper div.radio.active span {
  184. background-position: -18px -279px; }
  185. .mg-wrapper div.radio.active span.checked {
  186. background-position: -90px -279px; }
  187. .mg-wrapper div.radio.hover span, .mg-wrapper div.radio.focus span {
  188. background-position: -36px -279px; }
  189. .mg-wrapper div.radio.hover span.checked, .mg-wrapper div.radio.focus span.checked {
  190. background-position: -108px -279px; }
  191. .mg-wrapper div.radio.hover.active span, .mg-wrapper div.radio.focus.active span {
  192. background-position: -54px -279px; }
  193. .mg-wrapper div.radio.hover.active span.checked, .mg-wrapper div.radio.focus.active span.checked {
  194. background-position: -126px -279px; }
  195. .mg-wrapper div.radio.disabled span, .mg-wrapper div.radio.disabled.active span {
  196. background-position: -144px -279px; }
  197. .mg-wrapper div.radio.disabled span.checked, .mg-wrapper div.radio.disabled.active span.checked {
  198. background-position: -162px -279px; }
  199. .mg-wrapper div.uploader {
  200. background-position: 0 -297px;
  201. height: 28px;
  202. width: 190px;
  203. cursor: pointer;
  204. position: relative;
  205. overflow: hidden; }
  206. .mg-wrapper div.uploader span.action {
  207. background-position: right -409px;
  208. height: 28px;
  209. line-height: 28px;
  210. width: 82px;
  211. text-align: center;
  212. float: left;
  213. display: inline;
  214. overflow: hidden;
  215. cursor: pointer; }
  216. .mg-wrapper div.uploader span.filename {
  217. text-overflow: ellipsis;
  218. display: block;
  219. overflow: hidden;
  220. white-space: nowrap;
  221. float: left;
  222. cursor: default;
  223. height: 24px;
  224. margin: 2px 0 2px 2px;
  225. line-height: 24px;
  226. width: 85px;
  227. padding: 0 10px; }
  228. .mg-wrapper div.uploader input {
  229. opacity: 0;
  230. filter: alpha(opacity=0);
  231. -moz-opacity: 0;
  232. border: none;
  233. background: none;
  234. position: absolute;
  235. top: 0;
  236. right: 0;
  237. float: right;
  238. cursor: default;
  239. width: 100%;
  240. height: 100%; }
  241. .mg-wrapper div.uploader.active span.action {
  242. background-position: right -465px; }
  243. .mg-wrapper div.uploader.hover, .mg-wrapper div.uploader.focus {
  244. background-position: 0 -353px; }
  245. .mg-wrapper div.uploader.hover span.action, .mg-wrapper div.uploader.focus span.action {
  246. background-position: right -437px; }
  247. .mg-wrapper div.uploader.hover.active span.action, .mg-wrapper div.uploader.focus.active span.action {
  248. background-position: right -493px; }
  249. .mg-wrapper div.uploader.disabled, .mg-wrapper div.uploader.disabled.active {
  250. background-position: 0 -325px; }
  251. .mg-wrapper div.uploader.disabled span.action, .mg-wrapper div.uploader.disabled.active span.action {
  252. background-position: right -381px; }
  253. .mg-wrapper div.button {
  254. background-position: 0 -641px;
  255. height: 30px;
  256. cursor: pointer;
  257. position: relative;
  258. /* Keep buttons barely visible so they can get focus */ }
  259. .mg-wrapper div.button a, .mg-wrapper div.button button, .mg-wrapper div.button input {
  260. opacity: 0.01;
  261. filter: alpha(opacity=1);
  262. -moz-opacity: 0.01;
  263. display: block;
  264. top: 0;
  265. left: 0;
  266. right: 0;
  267. bottom: 0;
  268. position: absolute; }
  269. .mg-wrapper div.button span {
  270. display: -moz-inline-box;
  271. display: inline-block;
  272. *display: inline;
  273. zoom: 1;
  274. line-height: 22px;
  275. text-align: center;
  276. background-position: right -521px;
  277. height: 22px;
  278. margin-left: 13px;
  279. padding: 8px 15px 0 2px; }
  280. .mg-wrapper div.button.active {
  281. background-position: 0 -671px; }
  282. .mg-wrapper div.button.active span {
  283. background-position: right -551px;
  284. cursor: default; }
  285. .mg-wrapper div.button.hover, .mg-wrapper div.button.focus {
  286. background-position: 0 -701px; }
  287. .mg-wrapper div.button.hover span, .mg-wrapper div.button.focus span {
  288. background-position: right -581px; }
  289. .mg-wrapper div.button.disabled, .mg-wrapper div.button.disabled.active {
  290. background-position: 0 -731px; }
  291. .mg-wrapper div.button.disabled span, .mg-wrapper div.button.disabled.active span {
  292. background-position: right -611px;
  293. cursor: default; }
  294. .mg-wrapper input.uniform-input,
  295. .mg-wrapper select.uniform-multiselect,
  296. .mg-wrapper textarea.uniform {
  297. font-size: 12px;
  298. font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  299. font-weight: normal;
  300. color: #777;
  301. border-top: solid 1px #aaa;
  302. border-left: solid 1px #aaa;
  303. border-bottom: solid 1px #ccc;
  304. border-right: solid 1px #ccc;
  305. -webkit-border-radius: 3px;
  306. -moz-border-radius: 3px;
  307. border-radius: 3px; }
  308. .mg-wrapper input.uniform-input.hover, .mg-wrapper input.uniform-input.focus,
  309. .mg-wrapper select.uniform-multiselect.hover,
  310. .mg-wrapper select.uniform-multiselect.focus,
  311. .mg-wrapper textarea.uniform.hover,
  312. .mg-wrapper textarea.uniform.focus {
  313. -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
  314. -moz-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
  315. box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.3);
  316. border-color: #999; }
  317. .mg-wrapper div.button span {
  318. font-weight: bold;
  319. font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  320. font-size: 12px;
  321. letter-spacing: 1px;
  322. text-transform: uppercase; }
  323. .mg-wrapper div.button.hover span, .mg-wrapper div.button.focus span {
  324. color: #555; }
  325. .mg-wrapper div.button.disabled span, .mg-wrapper div.button.disabled.active span {
  326. color: #bbb; }
  327. .mg-wrapper div.selector {
  328. font-size: 12px; }
  329. .mg-wrapper div.selector span {
  330. color: #666;
  331. text-shadow: 0 1px 0 #fff; }
  332. .mg-wrapper div.selector select {
  333. font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  334. font-size: 12px; }
  335. .mg-wrapper div.selector.disabled span, .mg-wrapper div.selector.disabled.active span {
  336. color: #bbb; }
  337. .mg-wrapper div.checker {
  338. margin-right: 5px; }
  339. .mg-wrapper div.radio {
  340. margin-right: 3px; }
  341. .mg-wrapper div.uploader span.action {
  342. text-shadow: #fff 0px 1px 0px;
  343. background-color: #fff;
  344. font-size: 11px;
  345. font-weight: bold; }
  346. .mg-wrapper div.uploader span.filename {
  347. color: #777;
  348. border-right: solid 1px #bbb;
  349. font-size: 11px; }
  350. .mg-wrapper div.uploader.disabled span.action, .mg-wrapper div.uploader.disabled.active span.action {
  351. color: #aaa; }
  352. .mg-wrapper div.uploader.disabled span.filename, .mg-wrapper div.uploader.disabled.active span.filename {
  353. border-color: #ddd;
  354. color: #aaa; }
  355. .mg-wrapper input.uniform-input, .mg-wrapper input.uniform-input:focus {
  356. background-color: #fff; }