stripe.css 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353
  1. #wp-stripe-wrap {
  2. display:block;
  3. padding:10px;
  4. margin:0px;
  5. width: 400px;
  6. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  7. }
  8. /* Payment Form Link */
  9. #wp-stripe-modal-button {
  10. margin:20px 0;
  11. padding: 8px 15px;
  12. min-width:100px;
  13. display:inline-block;
  14. text-align:center;
  15. font-weight: bold;
  16. font-size: 12px;
  17. background: #1275FF;
  18. border: 1px solid #155FB0;
  19. color: white;
  20. text-decoration: none;
  21. text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  22. background-image: -webkit-gradient(linear, left top, left bottom, from(#77B7FF), to(#017AFF));
  23. background-image: -moz-linear-gradient(top, #77B7FF, #017AFF);
  24. background-image: -o-linear-gradient(top, #77B7FF, #017AFF);
  25. -webkit-box-shadow: inset 0 1px 0 #98c9ff;
  26. -moz-box-shadow: inset 0 1px 0 #98c9ff;
  27. box-shadow: inset 0 1px 0 #98c9ff;
  28. -o-border-radius: 4px;
  29. -moz-border-radius: 4px;
  30. -webkit-border-radius: 4px;
  31. border-radius: 4px;
  32. cursor: pointer; cursor: hand;
  33. }
  34. #wp-stripe-types {
  35. display:block;
  36. width:256px;
  37. height:18px;
  38. background: url('../img/types.png') no-repeat top left;
  39. margin-bottom:20px;
  40. }
  41. /* Payment Form Elements */
  42. form#wp-stripe-payment-form {
  43. display:block;
  44. }
  45. .stripe-row-right,
  46. .stripe-row-left{width:50%;}
  47. form#wp-stripe-payment-form h2.stripe-header {
  48. padding:10px;
  49. color:#fff;
  50. font-size:14px;
  51. font-weight:bold;
  52. text-shadow: 0 -1px 1px rgba(0,0,0,0.3);
  53. border-top:1px solid #268DFC;
  54. border-bottom:1px solid #004EA2;
  55. background:#0068DE;
  56. margin-bottom:10px;
  57. -moz-border-radius-topleft: 5px;
  58. -moz-border-radius-topright: 5px;
  59. -moz-border-radius-bottomright: 0px;
  60. -moz-border-radius-bottomleft: 0px;
  61. -webkit-border-radius: 5px 5px 0px 0px;
  62. border-radius: 5px 5px 0px 0px;
  63. }
  64. form#wp-stripe-payment-form p.stripe-display-comment {
  65. margin:3px 0;
  66. font-size:12px;
  67. color:#777;
  68. }
  69. form#wp-stripe-payment-form label {
  70. letter-spacing:1px;
  71. font-size: 14px;
  72. margin-bottom: 2px;
  73. }
  74. form#wp-stripe-payment-form label.public {
  75. letter-spacing:0px;
  76. font-size: 12px !important;
  77. margin-bottom: 0px !important;
  78. }
  79. form#wp-stripe-payment-form .stripe-row {
  80. overflow:visible;
  81. clear:both;
  82. padding:5px 10px;
  83. }
  84. form#wp-stripe-payment-form .stripe-row-left,
  85. form#wp-stripe-payment-form .stripe-row-right {
  86. float:left;
  87. overflow:auto;
  88. }
  89. form#wp-stripe-payment-form .stripe-submit-button {
  90. position:relative;
  91. margin:10px;
  92. padding: 8px 15px;
  93. display:block;
  94. font-weight: bold;
  95. font-size: 12px;
  96. background: #1275FF;
  97. border: 1px solid #155FB0;
  98. color: white;
  99. text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  100. background-image: -webkit-gradient(linear, left top, left bottom, from(#77B7FF), to(#017AFF));
  101. background-image: -moz-linear-gradient(top, #77B7FF, #017AFF);
  102. background-image: -o-linear-gradient(top, #77B7FF, #017AFF);
  103. -webkit-box-shadow: inset 0 1px 0 #98c9ff;
  104. -moz-box-shadow: inset 0 1px 0 #98c9ff;
  105. box-shadow: inset 0 1px 0 #98c9ff;
  106. -o-border-radius: 4px;
  107. -moz-border-radius: 4px;
  108. -webkit-border-radius: 4px;
  109. border-radius: 4px;
  110. cursor: pointer; cursor: hand;
  111. }
  112. .stripe-spinner {
  113. display:none;
  114. margin:10px;
  115. padding: 8px 15px;
  116. height:15px;
  117. width:70px;
  118. content:" ";
  119. background: url('../img/spinner.gif') no-repeat 50% 50%;
  120. border: 1px solid #afd5ff;
  121. -o-border-radius: 4px;
  122. -moz-border-radius: 4px;
  123. -webkit-border-radius: 4px;
  124. }
  125. .stripe-valid {
  126. color: #638731 !important;
  127. background-color:#d9fba8 !important;
  128. }
  129. .stripe-invalid {
  130. color:#873d31 !important;
  131. background-color:#fbbcb1 !important;
  132. }
  133. .wp-stripe-poweredby {
  134. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  135. color:#777;
  136. font-size:10px;
  137. padding:0 20px;
  138. }
  139. .wp-stripe-poweredby a {
  140. color:#0068DE;
  141. text-decoration: none;
  142. }
  143. /* Response Styling */
  144. .wp-stripe-notification {
  145. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  146. font-size: 12px;
  147. width:360px;
  148. padding:10px;
  149. margin:10px 0 10px 10px;
  150. -webkit-border-radius: 5px;
  151. -moz-border-radius: 5px;
  152. border-radius: 5px;
  153. }
  154. .wp-stripe-currency {
  155. text-transform: uppercase;
  156. }
  157. .wp-stripe-success {
  158. color:#345607;
  159. background-color:#D1F2A5;
  160. text-shadow:0 1px 1px rgba(255,255,255,0.2);
  161. }
  162. .wp-stripe-failure {
  163. color:#4E1E0F;
  164. background-color:#FF9F80;
  165. text-shadow:0 1px 1px rgba(255,255,255,0.1);
  166. }
  167. /* Form Styling */
  168. form#wp-stripe-payment-form .wp-stripe-details label {
  169. color:#777;
  170. }
  171. form#wp-stripe-payment-form .wp-stripe-card label {
  172. color:#0068DE;
  173. }
  174. form#wp-stripe-payment-form .wp-stripe-card input {
  175. -webkit-border-radius: 5px;
  176. -moz-border-radius: 5px;
  177. border-radius: 5px;
  178. }
  179. form#wp-stripe-payment-form .wp-stripe-card input.card-cvc {
  180. width:120px;
  181. }
  182. form#wp-stripe-payment-form label,
  183. form#wp-stripe-payment-form input,
  184. form#wp-stripe-payment-form select,
  185. form#wp-stripe-payment-form textarea {
  186. font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  187. font-size: 14px !important;
  188. font-weight: normal;
  189. line-height: normal;
  190. margin-bottom: 3px !important;
  191. }
  192. form#wp-stripe-payment-form textarea,
  193. form#wp-stripe-payment-form input {
  194. position:relative;
  195. width:338px;
  196. background-color:#fff;
  197. }
  198. input.wp-stripe-name {background: url('../img/h-name.png') no-repeat 8px 8px;}
  199. input.wp-stripe-email {background: url('../img/h-email.png') no-repeat 8px 10px;}
  200. textarea.wp-stripe-comment {background: url('../img/h-comment.png') no-repeat 8px 10px;}
  201. input.wp-stripe-card-amount {background: url('../img/h-amount.png') no-repeat 8px 8px;}
  202. input.card-number {background: url('../img/h-card.png') no-repeat 8px 10px;}
  203. input.card-cvc {background: url('../img/h-cvc.png') no-repeat 8px 10px;}
  204. form#wp-stripe-payment-form select {
  205. cursor: pointer;
  206. }
  207. input[type=checkbox], input[type=radio] {
  208. cursor: pointer;
  209. }
  210. .stripe-expiry {
  211. font-size:12px;
  212. letter-spacing:1px;
  213. color:#bbb;
  214. text-shadow:0 1px 0 #fff;
  215. }
  216. form#wp-stripe-payment-form select {
  217. margin-top:0px !important;
  218. display:block;
  219. -webkit-appearance: none;
  220. -moz-appearance: none;
  221. appearance: none;
  222. padding: 2px 7px 2px 7px !important;
  223. height: auto !important;
  224. text-shadow: 0 1px 0 white;
  225. background-image: -webkit-gradient(linear, left top, left bottom, from(#F9F9F9), to(#E8E8E8));
  226. background-image: -moz-linear-gradient(top, #F9F9F9, #E8E8E8);
  227. background-image: -o-linear-gradient(top, #F9F9F9, #E8E8E8);
  228. -webkit-box-shadow: inset 0 1px 0 white;
  229. -moz-box-shadow: inset 0 1px 0 white;
  230. box-shadow: inset 0 1px 0 white;
  231. }
  232. form#wp-stripe-payment-form select:hover {
  233. background-image: -webkit-gradient(linear, left top, left bottom, from(#E8E8E8), to(#F9F9F9));
  234. background-image: -moz-linear-gradient(top, #E8E8E8, #F9F9F9);
  235. background-image: -o-linear-gradient(top, #E8E8E8, #F9F9F9);
  236. }
  237. form#wp-stripe-payment-form input,
  238. form#wp-stripe-payment-form textarea,
  239. form#wp-stripe-payment-form select,
  240. form#wp-stripe-payment-form .uneditable-input {
  241. display: inline-block;
  242. height: 18px;
  243. padding: 8px 8px 8px 32px;
  244. font-size: 13px;
  245. line-height: 18px;
  246. color: #808080;
  247. border: 1px solid #ccc;
  248. -webkit-border-radius: 3px;
  249. -moz-border-radius: 3px;
  250. border-radius: 3px;
  251. }
  252. form#wp-stripe-payment-form input[type=checkbox], form#wp-stripe-payment-form input[type=radio] {
  253. width: auto;
  254. height: auto;
  255. padding: 0;
  256. margin: 3px 0;
  257. *margin-top: 0;
  258. /* IE6-7 */
  259. line-height: normal;
  260. border: none;
  261. }
  262. form#wp-stripe-payment-form select {
  263. height: 27px;
  264. line-height: 27px;
  265. }
  266. form#wp-stripe-payment-form input[type=button], form#wp-stripe-payment-form input[type=reset], form#wp-stripe-payment-form input[type=submit] {
  267. width: auto;
  268. height: auto;
  269. }
  270. form#wp-stripe-payment-form input[type=checkbox] {
  271. position:relative;
  272. top:2px;
  273. margin-right:5px;
  274. }
  275. form#wp-stripe-payment-form select[multiple] {
  276. height: inherit;
  277. background-color: #ffffff;
  278. }
  279. form#wp-stripe-payment-form textarea {
  280. height: auto;
  281. }
  282. :-moz-placeholder {
  283. color: #bfbfbf;
  284. }
  285. ::-webkit-input-placeholder {
  286. color: #bfbfbf;
  287. }
  288. form#wp-stripe-payment-form input, form#wp-stripe-payment-form textarea {
  289. -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
  290. -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
  291. -ms-transition: border linear 0.2s, box-shadow linear 0.2s;
  292. -o-transition: border linear 0.2s, box-shadow linear 0.2s;
  293. transition: border linear 0.2s, box-shadow linear 0.2s;
  294. -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  295. -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  296. box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  297. }
  298. form#wp-stripe-payment-form input:focus, form#wp-stripe-payment-form textarea:focus {
  299. outline: 0;
  300. border-color: rgba(0, 104, 222, 0.8);
  301. -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(0, 104, 222, 0.6);
  302. -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(0, 104, 222, 0.6);
  303. box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(0, 104, 222, 0.6);
  304. }
  305. input[type=file]:focus, input[type=checkbox]:focus, select:focus {
  306. -webkit-box-shadow: none;
  307. -moz-box-shadow: none;
  308. box-shadow: none;
  309. outline: 1px dotted #666;
  310. }