uniform.css 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587
  1. /*
  2. Uniform Theme: Uniform Default
  3. Version: 1.6
  4. By: Josh Pyles
  5. License: MIT License
  6. ---
  7. For use with the Uniform plugin:
  8. http://pixelmatrixdesign.com/uniform/
  9. ---
  10. Generated by Uniform Theme Generator:
  11. http://pixelmatrixdesign.com/uniform/themer.html
  12. */
  13. /* Global Declaration */
  14. div.selector,
  15. div.selector span,
  16. div.checker span,
  17. div.radio span,
  18. div.uploader,
  19. div.uploader span.action,
  20. div.button,
  21. div.button span {
  22. background-image: url(../img/sprite.png);
  23. background-repeat: no-repeat;
  24. -webkit-font-smoothing: antialiased;
  25. }
  26. .selector,
  27. .radio,
  28. .checker,
  29. .uploader,
  30. .button,
  31. .selector *,
  32. .radio *,
  33. .checker *,
  34. .uploader *,
  35. .button *{
  36. margin: 0;
  37. padding: 0;
  38. }
  39. /* INPUT & TEXTAREA */
  40. input.text:focus,
  41. input.email:focus,
  42. input.password:focus,
  43. textarea.uniform:focus {
  44. }
  45. /* SPRITES */
  46. /* Select */
  47. div.selector {
  48. background-position: -483px -130px;
  49. line-height: 26px;
  50. height: 26px;
  51. }
  52. div.selector span {
  53. background-position: right 0px;
  54. height: 26px;
  55. line-height: 26px;
  56. }
  57. div.selector select {
  58. /* change these to adjust positioning of select element */
  59. top: 0px;
  60. left: 0px;
  61. }
  62. div.selector:active,
  63. div.selector.active {
  64. background-position: -483px -156px;
  65. }
  66. div.selector:active span,
  67. div.selector.active span {
  68. background-position: right -26px;
  69. }
  70. div.selector.focus, div.selector.hover, div.selector:hover {
  71. background-position: -483px -182px;
  72. }
  73. div.selector.focus span, div.selector.hover span, div.selector:hover span {
  74. background-position: right -52px;
  75. }
  76. div.selector.focus:active,
  77. div.selector.focus.active,
  78. div.selector:hover:active,
  79. div.selector.active:hover {
  80. background-position: -483px -208px;
  81. }
  82. div.selector.focus:active span,
  83. div.selector:hover:active span,
  84. div.selector.active:hover span,
  85. div.selector.focus.active span {
  86. background-position: right -78px;
  87. }
  88. div.selector.disabled {
  89. background-position: -483px -234px;
  90. }
  91. div.selector.disabled span {
  92. background-position: right -104px;
  93. }
  94. /* Checkbox */
  95. div.checker {
  96. width: 19px;
  97. height: 19px;
  98. }
  99. div.checker input {
  100. width: 19px;
  101. height: 19px;
  102. }
  103. div.checker span {
  104. background-position: 0px -260px;
  105. height: 19px;
  106. width: 19px;
  107. }
  108. div.checker:active span,
  109. div.checker.active span {
  110. background-position: -19px -260px;
  111. }
  112. div.checker.focus span,
  113. div.checker:hover span {
  114. background-position: -38px -260px;
  115. }
  116. div.checker.focus:active span,
  117. div.checker:active:hover span,
  118. div.checker.active:hover span,
  119. div.checker.focus.active span {
  120. background-position: -57px -260px;
  121. }
  122. div.checker span.checked {
  123. background-position: -76px -260px;
  124. }
  125. div.checker:active span.checked,
  126. div.checker.active span.checked {
  127. background-position: -95px -260px;
  128. }
  129. div.checker.focus span.checked,
  130. div.checker:hover span.checked {
  131. background-position: -114px -260px;
  132. }
  133. div.checker.focus:active span.checked,
  134. div.checker:hover:active span.checked,
  135. div.checker.active:hover span.checked,
  136. div.checker.active.focus span.checked {
  137. background-position: -133px -260px;
  138. }
  139. div.checker.disabled span,
  140. div.checker.disabled:active span,
  141. div.checker.disabled.active span {
  142. background-position: -152px -260px;
  143. }
  144. div.checker.disabled span.checked,
  145. div.checker.disabled:active span.checked,
  146. div.checker.disabled.active span.checked {
  147. background-position: -171px -260px;
  148. }
  149. /* Radio */
  150. div.radio {
  151. width: 18px;
  152. height: 18px;
  153. }
  154. div.radio input {
  155. width: 18px;
  156. height: 18px;
  157. }
  158. div.radio span {
  159. height: 18px;
  160. width: 18px;
  161. background-position: 0px -279px;
  162. }
  163. div.radio:active span,
  164. div.radio.active span {
  165. background-position: -18px -279px;
  166. }
  167. div.radio.focus span,
  168. div.radio:hover span {
  169. background-position: -36px -279px;
  170. }
  171. div.radio.focus:active span,
  172. div.radio:active:hover span,
  173. div.radio.active:hover span,
  174. div.radio.active.focus span {
  175. background-position: -54px -279px;
  176. }
  177. div.radio span.checked {
  178. background-position: -72px -279px;
  179. }
  180. div.radio:active span.checked,
  181. div.radio.active span.checked {
  182. background-position: -90px -279px;
  183. }
  184. div.radio.focus span.checked, div.radio:hover span.checked {
  185. background-position: -108px -279px;
  186. }
  187. div.radio.focus:active span.checked,
  188. div.radio:hover:active span.checked,
  189. div.radio.focus.active span.checked,
  190. div.radio.active:hover span.checked {
  191. background-position: -126px -279px;
  192. }
  193. div.radio.disabled span,
  194. div.radio.disabled:active span,
  195. div.radio.disabled.active span {
  196. background-position: -144px -279px;
  197. }
  198. div.radio.disabled span.checked,
  199. div.radio.disabled:active span.checked,
  200. div.radio.disabled.active span.checked {
  201. background-position: -162px -279px;
  202. }
  203. /* Uploader */
  204. div.uploader {
  205. background-position: 0px -297px;
  206. height: 28px;
  207. }
  208. div.uploader span.action {
  209. background-position: right -409px;
  210. height: 24px;
  211. line-height: 24px;
  212. }
  213. div.uploader span.filename {
  214. height: 24px;
  215. /* change this line to adjust positioning of filename area */
  216. margin: 2px 0px 2px 2px;
  217. line-height: 24px;
  218. }
  219. div.uploader.focus,
  220. div.uploader.hover,
  221. div.uploader:hover {
  222. background-position: 0px -353px;
  223. }
  224. div.uploader.focus span.action,
  225. div.uploader.hover span.action,
  226. div.uploader:hover span.action {
  227. background-position: right -437px;
  228. }
  229. div.uploader.active span.action,
  230. div.uploader:active span.action {
  231. background-position: right -465px;
  232. }
  233. div.uploader.focus.active span.action,
  234. div.uploader:focus.active span.action,
  235. div.uploader.focus:active span.action,
  236. div.uploader:focus:active span.action {
  237. background-position: right -493px;
  238. }
  239. div.uploader.disabled {
  240. background-position: 0px -325px;
  241. }
  242. div.uploader.disabled span.action {
  243. background-position: right -381px;
  244. }
  245. div.button {
  246. background-position: 0px -523px;
  247. }
  248. div.button span {
  249. background-position: right -643px;
  250. }
  251. div.button.focus,
  252. div.button:focus,
  253. div.button:hover,
  254. div.button.hover {
  255. background-position: 0px -553px;
  256. }
  257. div.button.focus span,
  258. div.button:focus span,
  259. div.button:hover span,
  260. div.button.hover span {
  261. background-position: right -673px;
  262. }
  263. div.button.active,
  264. div.button:active {
  265. background-position: 0px -583px;
  266. }
  267. div.button.active span,
  268. div.button:active span {
  269. background-position: right -703px;
  270. color: #555;
  271. }
  272. div.button.disabled,
  273. div.button:disabled {
  274. background-position: 0px -613px;
  275. }
  276. div.button.disabled span,
  277. div.button:disabled span {
  278. background-position: right -733px;
  279. color: #bbb;
  280. cursor: default;
  281. }
  282. /* PRESENTATION */
  283. /* Button */
  284. div.button {
  285. height: 30px;
  286. }
  287. div.button span {
  288. margin-left: 13px;
  289. height: 22px;
  290. padding-top: 8px;
  291. font-weight: bold;
  292. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  293. font-size: 12px;
  294. letter-spacing: 1px;
  295. text-transform: uppercase;
  296. padding-left: 2px;
  297. padding-right: 15px;
  298. }
  299. /* Select */
  300. div.selector {
  301. width: 190px;
  302. font-size: 12px;
  303. }
  304. div.selector select {
  305. min-width: 190px;
  306. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  307. font-size: 12px;
  308. border: solid 1px #fff;
  309. }
  310. div.selector span {
  311. padding: 0px 25px 0px 2px;
  312. cursor: pointer;
  313. }
  314. div.selector span {
  315. color: #666;
  316. width: 158px;
  317. text-shadow: 0 1px 0 #fff;
  318. }
  319. div.selector.disabled span {
  320. color: #bbb;
  321. }
  322. /* Checker */
  323. div.checker {
  324. margin-right: 5px;
  325. }
  326. /* Radio */
  327. div.radio {
  328. margin-right: 3px;
  329. }
  330. /* Uploader */
  331. div.uploader {
  332. width: 190px;
  333. cursor: pointer;
  334. }
  335. div.uploader span.action {
  336. width: 85px;
  337. text-align: center;
  338. text-shadow: #fff 0px 1px 0px;
  339. background-color: #fff;
  340. font-size: 11px;
  341. font-weight: bold;
  342. }
  343. div.uploader span.filename {
  344. color: #777;
  345. width: 82px;
  346. border-right: solid 1px #bbb;
  347. font-size: 11px;
  348. }
  349. div.uploader input {
  350. width: 190px;
  351. }
  352. div.uploader.disabled span.action {
  353. color: #aaa;
  354. }
  355. div.uploader.disabled span.filename {
  356. border-color: #ddd;
  357. color: #aaa;
  358. }
  359. /*
  360. CORE FUNCTIONALITY
  361. Not advised to edit stuff below this line
  362. -----------------------------------------------------
  363. */
  364. .selector,
  365. .checker,
  366. .button,
  367. .radio,
  368. .uploader {
  369. display: -moz-inline-box;
  370. display: inline-block;
  371. vertical-align: middle;
  372. zoom: 1;
  373. *display: inline;
  374. }
  375. .selector select:focus, .radio input:focus, .checker input:focus, .uploader input:focus {
  376. outline: 0;
  377. }
  378. /* Button */
  379. div.button a,
  380. div.button button,
  381. div.button input {
  382. position: absolute;
  383. }
  384. div.button {
  385. cursor: pointer;
  386. position: relative;
  387. }
  388. div.button span {
  389. display: -moz-inline-box;
  390. display: inline-block;
  391. line-height: 1;
  392. text-align: center;
  393. }
  394. /* Select */
  395. div.selector {
  396. position: relative;
  397. padding-left: 10px;
  398. overflow: hidden;
  399. }
  400. div.selector span {
  401. display: block;
  402. overflow: hidden;
  403. text-overflow: ellipsis;
  404. white-space: nowrap;
  405. }
  406. div.selector select {
  407. position: absolute;
  408. opacity: 0;
  409. filter: alpha(opacity:0);
  410. height: 25px;
  411. border: none;
  412. background: none;
  413. }
  414. /* Checker */
  415. div.checker {
  416. position: relative;
  417. }
  418. div.checker span {
  419. display: -moz-inline-box;
  420. display: inline-block;
  421. text-align: center;
  422. }
  423. div.checker input {
  424. opacity: 0;
  425. filter: alpha(opacity:0);
  426. display: inline-block;
  427. background: none;
  428. }
  429. /* Radio */
  430. div.radio {
  431. position: relative;
  432. }
  433. div.radio span {
  434. display: -moz-inline-box;
  435. display: inline-block;
  436. text-align: center;
  437. }
  438. div.radio input {
  439. opacity: 0;
  440. filter: alpha(opacity:0);
  441. text-align: center;
  442. display: inline-block;
  443. background: none;
  444. }
  445. /* Uploader */
  446. div.uploader {
  447. position: relative;
  448. overflow: hidden;
  449. cursor: default;
  450. }
  451. div.uploader span.action {
  452. float: left;
  453. display: inline;
  454. padding: 2px 0px;
  455. overflow: hidden;
  456. cursor: pointer;
  457. }
  458. div.uploader span.filename {
  459. padding: 0px 10px;
  460. float: left;
  461. display: block;
  462. overflow: hidden;
  463. text-overflow: ellipsis;
  464. white-space: nowrap;
  465. cursor: default;
  466. position:relative;
  467. }
  468. div.uploader input {
  469. opacity: 0;
  470. filter: alpha(opacity:0);
  471. position: absolute;
  472. top: 0;
  473. right: 0;
  474. bottom: 0;
  475. float: right;
  476. height: 25px;
  477. border: none;
  478. cursor: default;
  479. }