uniform.default.css 11 KB

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