captcha.css 30 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037
  1. .captcha.captcha--light.captcha--error.captcha--maxerror .captcha_tips .captcha_tips_icon,
  2. .captcha.captcha--light.captcha--error.captcha--point .captcha_tips .captcha_tips_icon,
  3. .captcha.captcha--light.captcha--error.captcha--sms .captcha_tips .captcha_tips_icon,
  4. .captcha.captcha--light.captcha--success.captcha--point .captcha_tips .captcha_tips_icon,
  5. .captcha.captcha--light.captcha--success.captcha--sms .captcha_tips .captcha_tips_icon,
  6. .captcha.captcha--light .captcha_loadbox .captcha_loadbox_inner, .captcha.captcha--light .captcha_loadbox .captcha_loadbox_inner .captcha_loadicon,
  7. .captcha_intellisense--light .captcha_intelli-icon,
  8. .captcha_intellisense--light .captcha_tips_icon, .captcha_popup.captcha_popup--light .captcha_modal,
  9. .captcha_popup.captcha_popup--light .captcha_modal_close .captcha_icon-close {
  10. display: inline-block;
  11. *display: inline;
  12. zoom: 1;
  13. vertical-align: top
  14. }
  15. #captcha_bg {
  16. background-image: url("../img/captcha/blank.png");
  17. background-repeat: no-repeat;
  18. background-attachment: scroll;
  19. background-position: 0px 0px;
  20. /*background-size: 348px 196px;*/
  21. background-color: transparent;
  22. width: 315px;
  23. /*height: 196px;*/
  24. border-style: none;
  25. border-width: 0;
  26. }
  27. #captcha_fragment {
  28. background-image: url("../img/captcha/blank.png");
  29. background-repeat: no-repeat;
  30. background-attachment: scroll;
  31. background-position: -315px 0px;
  32. /*background-size: 348px 196px;*/
  33. background-color: transparent;
  34. width: 33px;
  35. /*height: 196px;*/
  36. border-style: none;
  37. border-width: 0;
  38. }
  39. .captcha, .captcha_pop {
  40. -webkit-tap-highlight-color: transparent
  41. }
  42. .captcha *, .captcha_pop * {
  43. box-sizing: border-box
  44. }
  45. .panel_ease_top-enter, .panel_ease_top-leave-active {
  46. opacity: 0;
  47. transform: translateY(20px)
  48. }
  49. .panel_ease_bottom-enter, .panel_ease_bottom-leave-active {
  50. opacity: 0;
  51. transform: translateY(-20px)
  52. }
  53. .panel_ease_bottom-enter-active, .panel_ease_bottom-leave-active,
  54. .panel_ease_top-enter-active, .panel_ease_top-leave-active {
  55. transition: all .2s linear;
  56. pointer-events: none
  57. }
  58. .popup_scale-enter, .popup_scale-leave-active {
  59. opacity: 0;
  60. transform: scale(0)
  61. }
  62. .popup_scale-enter-active {
  63. transition: all .3s cubic-bezier(.76, .01, .35, 1.56)
  64. }
  65. .popup_scale-leave-active {
  66. transition: all .2s ease-out
  67. }
  68. .popup_ease-enter {
  69. opacity: 0;
  70. transform: translateY(-20px)
  71. }
  72. .popup_ease-enter-active {
  73. transition: opacity .3s linear, transform .3s linear
  74. }
  75. .popup_ease-leave-active {
  76. opacity: 0;
  77. transform: translateY(-20px);
  78. transition: all .2s ease-out
  79. }
  80. @keyframes loading { 0%
  81. {
  82. transform: rotate(0deg)
  83. }
  84. to {
  85. transform: rotate(1turn)
  86. }
  87. }
  88. @keyframes ball-scale-multiple {
  89. 0% {
  90. transform: scale(.22);
  91. opacity: 0
  92. }
  93. 5% {
  94. opacity: 1
  95. }
  96. to {
  97. transform: scale(1);
  98. opacity: 0
  99. }
  100. }
  101. .captcha_cover-frame {
  102. position: absolute;
  103. top: 0;
  104. left: 0;
  105. width: 100%;
  106. height: 100%;
  107. border: 0;
  108. opacity: 0;
  109. filter: alpha(opacity=0)
  110. }
  111. .captcha.captcha--light {
  112. position: relative;
  113. font-size: 14px
  114. }
  115. .captcha.captcha--light .captcha_fragment, .captcha.captcha--light .captcha_slide_indicator,
  116. .captcha.captcha--light .captcha_slider {
  117. display: none
  118. }
  119. .captcha.captcha--light.captcha--fragment .captcha_fragment, .captcha.captcha--light.captcha--fragment .captcha_slide_indicator,
  120. .captcha.captcha--light.captcha--fragment .captcha_slider {
  121. display: block
  122. }
  123. .captcha.captcha--light .captcha_fragment {
  124. position: absolute;
  125. left: 0;
  126. top: 0;
  127. width: auto;
  128. height: 100%
  129. }
  130. .captcha.captcha--light .captcha_icon-point {
  131. position: absolute;
  132. width: 26px;
  133. height: 33px;
  134. cursor: pointer;
  135. background-repeat: no-repeat
  136. }
  137. .captcha.captcha--light .captcha_icon-point.captcha_point-1 {
  138. background-image: url(../img/captcha/icon.png);
  139. background-position: 0 -364px;
  140. background-size: 34px 471px
  141. }
  142. @media only screen and (-webkit-min-device-pixel-ratio: 2) , only screen
  143. and (min-device-pixel-ratio: 2) {
  144. .captcha.captcha--light .captcha_icon-point.captcha_point-1 {
  145. background-image: url(../img/captcha/icon.png);
  146. background-position: 0 -364px;
  147. background-size: 34px 471px
  148. }
  149. }
  150. .captcha.captcha--light .captcha_icon-point.captcha_point-2 {
  151. background-image: url(../img/captcha/icon.png);;
  152. background-position: 0 -220px;
  153. background-size: 34px 471px
  154. }
  155. @media only screen and (-webkit-min-device-pixel-ratio: 2) , only screen
  156. and (min-device-pixel-ratio: 2) {
  157. .captcha.captcha--light .captcha_icon-point.captcha_point-2 {
  158. background-image: url(../img/captcha/icon.png);
  159. background-position: 0 -220px;
  160. background-size: 34px 471px
  161. }
  162. }
  163. .captcha.captcha--light .captcha_icon-point.captcha_point-3 {
  164. background-image: url(../img/captcha/icon.png);
  165. background-position: 0 -328px;
  166. background-size: 34px 471px
  167. }
  168. @media only screen and (-webkit-min-device-pixel-ratio: 2) , only screen
  169. and (min-device-pixel-ratio: 2) {
  170. .captcha.captcha--light .captcha_icon-point.captcha_point-3 {
  171. background-image: url(../img/captcha/icon.png);
  172. background-position: 0 -328px;
  173. background-size: 34px 471px
  174. }
  175. }
  176. .captcha.captcha--light .captcha_icon-point.captcha_point-4 {
  177. background-image: url(../img/captcha/icon.png);;
  178. background-position: 0 -292px;
  179. background-size: 34px 471px
  180. }
  181. @media only screen and (-webkit-min-device-pixel-ratio: 2) , only screen
  182. and (min-device-pixel-ratio: 2) {
  183. .captcha.captcha--light .captcha_icon-point.captcha_point-4 {
  184. background-image: url(../img/captcha/icon.png);
  185. background-position: 0 -292px;
  186. background-size: 34px 471px
  187. }
  188. }
  189. .captcha.captcha--light .captcha_icon-point.captcha_point-5 {
  190. background-image: url(../img/captcha/icon.png);;
  191. background-position: 0 -256px;
  192. background-size: 34px 471px
  193. }
  194. @media only screen and (-webkit-min-device-pixel-ratio: 2) , only screen
  195. and (min-device-pixel-ratio: 2) {
  196. .captcha.captcha--light .captcha_icon-point.captcha_point-5 {
  197. background-image: url(../img/captcha/icon.png);
  198. background-position: 0 -256px;
  199. background-size: 34px 471px
  200. }
  201. }
  202. .captcha.captcha--light.captcha--maxerror .captcha_icon-point {
  203. cursor: default
  204. }
  205. .captcha.captcha--light.captcha--float .captcha_panel {
  206. display: none;
  207. position: absolute;
  208. left: 0;
  209. width: 100%;
  210. z-index: 999
  211. }
  212. .captcha.captcha--light .captcha_panel {
  213. -webkit-user-select: none;
  214. -moz-user-select: none;
  215. -ms-user-select: none;
  216. user-select: none
  217. }
  218. .captcha.captcha--light .captcha_panel-placeholder {
  219. position: relative;
  220. padding-top: 50%
  221. }
  222. .captcha.captcha--light .captcha_bgimg {
  223. position: absolute;
  224. top: 0;
  225. left: 0;
  226. width: 100%;
  227. height: 100%
  228. }
  229. .captcha.captcha--light .captcha_bgimg .captcha_bg-img {
  230. vertical-align: top;
  231. width: 100%
  232. }
  233. .captcha.captcha--light .captcha_loadbox {
  234. display: none;
  235. position: absolute;
  236. top: 0;
  237. left: 0;
  238. width: 100%;
  239. height: 100%;
  240. text-align: center;
  241. background-image: url(../img/captcha/icon.png);
  242. background-color: #f7f9fa;
  243. background-position: 50%;
  244. background-size: cover
  245. }
  246. @media only screen and (-webkit-min-device-pixel-ratio: 2) , only screen
  247. and (min-device-pixel-ratio: 2) {
  248. .captcha.captcha--light .captcha_loadbox {
  249. background-image: url("http://cstaticdun.126.net//2.7.1/images/tipBg@2x.c7a9593.png")
  250. }
  251. }
  252. .captcha.captcha--light .captcha_loadbox .captcha_loadbox_inner {
  253. position: relative;
  254. top: 50%;
  255. margin-top: -25px
  256. }
  257. .captcha.captcha--light .captcha_loadbox .captcha_loadbox_inner .captcha_loadicon {
  258. width: 32px;
  259. height: 32px;
  260. background-repeat: no-repeat
  261. }
  262. .captcha.captcha--light .captcha_loadbox .captcha_loadbox_inner .captcha_loadtext {
  263. display: block;
  264. line-height: 20px;
  265. color: #45494c
  266. }
  267. .captcha.captcha--light .captcha_refresh {
  268. position: absolute;
  269. right: 0;
  270. top: 0;
  271. width: 34px;
  272. height: 34px;
  273. cursor: pointer;
  274. background-image: url(../img/captcha/icon.png);;
  275. background-position: 0 -437px;
  276. background-size: 34px 471px
  277. }
  278. @media only screen and (-webkit-min-device-pixel-ratio: 2) , only screen
  279. and (min-device-pixel-ratio: 2) {
  280. .captcha.captcha--light .captcha_refresh {
  281. background-image: url(../img/captcha/icon.png);
  282. background-position: 0 -437px;
  283. background-size: 34px 471px
  284. }
  285. }
  286. .captcha.captcha--light .captcha_refresh:hover {
  287. background-image: url(../img/captcha/icon.png);;
  288. background-position: 0 -400px;
  289. background-size: 34px 471px
  290. }
  291. @media only screen and (-webkit-min-device-pixel-ratio: 2) , only screen
  292. and (min-device-pixel-ratio: 2) {
  293. .captcha.captcha--light .captcha_refresh:hover {
  294. background-image: url(../img/captcha/icon.png);
  295. background-position: 0 -400px;
  296. background-size: 34px 471px
  297. }
  298. }
  299. .captcha.captcha--light.captcha--maxerror .captcha_refresh {
  300. cursor: not-allowed
  301. }
  302. .captcha.captcha--light.captcha--maxerror .captcha_refresh:hover {
  303. background-image: url(../img/captcha/icon.png);;
  304. background-position: 0 -437px;
  305. background-size: 34px 471px
  306. }
  307. @media only screen and (-webkit-min-device-pixel-ratio: 2) , only screen
  308. and (min-device-pixel-ratio: 2) {
  309. .captcha.captcha--light.captcha--maxerror .captcha_refresh:hover {
  310. background-image: url(../img/captcha/icon.png);
  311. background-position: 0 -437px;
  312. background-size: 34px 471px
  313. }
  314. }
  315. .captcha.captcha--light .captcha_control {
  316. position: relative;
  317. border: 1px solid #e4e7eb;
  318. background-color: #f7f9fa
  319. }
  320. .captcha.captcha--light .captcha_control.captcha_control--moving .captcha_slide_indicator {
  321. border-color: #1991fa;
  322. background-color: #d1e9fe
  323. }
  324. .captcha.captcha--light .captcha_control.captcha_control--moving .captcha_slider {
  325. background-color: #1991fa
  326. }
  327. .captcha.captcha--light .captcha_control.captcha_control--moving .captcha_slider .captcha_slider_icon {
  328. background-image: url(../img/captcha/icon.png);;
  329. background-position: 0 -13px;
  330. background-size: 34px 471px
  331. }
  332. @media only screen and (-webkit-min-device-pixel-ratio: 2) , only screen
  333. and (min-device-pixel-ratio: 2) {
  334. .captcha.captcha--light .captcha_control.captcha_control--moving .captcha_slider .captcha_slider_icon {
  335. background-image: url(../img/captcha/icon.png);
  336. background-position: 0 -13px;
  337. background-size: 34px 471px
  338. }
  339. }
  340. .captcha.captcha--light .captcha_slide_indicator {
  341. position: absolute;
  342. top: -1px;
  343. left: -1px;
  344. width: 0;
  345. border: 1px solid transparent
  346. }
  347. .captcha.captcha--light .captcha_slider {
  348. position: absolute;
  349. top: 0;
  350. left: 0;
  351. height: 100%;
  352. background-color: #fff;
  353. box-shadow: 0 0 3px rgba(0, 0, 0, .3);
  354. cursor: pointer;
  355. transition: background .2s linear
  356. }
  357. .captcha.captcha--light .captcha_slider:hover {
  358. background-color: #1991fa
  359. }
  360. .verification-result-slip{
  361. text-align: center;
  362. }
  363. .slip-success {
  364. background: url(../img/captcha/success.png) no-repeat center center;
  365. width: 40px;
  366. height: 40px;
  367. }
  368. .slip-failed {
  369. background: url(../img/captcha/failed.png) no-repeat center center;
  370. width: 40px;
  371. height: 40px;
  372. }
  373. .captcha.captcha--light .captcha_slider:hover .captcha_slider_icon {
  374. background-image: url(../img/captcha/icon.png);;
  375. background-position: 0 -13px;
  376. background-size: 34px 471px
  377. }
  378. @media only screen and (-webkit-min-device-pixel-ratio: 2) , only screen
  379. and (min-device-pixel-ratio: 2) {
  380. .captcha.captcha--light .captcha_slider:hover .captcha_slider_icon {
  381. background-image: url(../img/captcha/icon.png);
  382. background-position: 0 -13px;
  383. background-size: 34px 471px
  384. }
  385. }
  386. .captcha.captcha--light .captcha_slider .captcha_slider_icon {
  387. position: absolute;
  388. top: 50%;
  389. margin-top: -6px;
  390. left: 50%;
  391. margin-left: -6px;
  392. width: 14px;
  393. height: 10px;
  394. background-image: url(../img/captcha/icon.png);;
  395. background-position: 0 -26px;
  396. background-size: 34px 471px
  397. }
  398. @media only screen and (-webkit-min-device-pixel-ratio: 2) , only screen
  399. and (min-device-pixel-ratio: 2) {
  400. .captcha.captcha--light .captcha_slider .captcha_slider_icon {
  401. background-image: url(../img/captcha/icon.png);
  402. background-position: 0 -26px;
  403. background-size: 34px 471px
  404. }
  405. }
  406. .captcha.captcha--light .captcha_tips {
  407. text-align: center;
  408. color: #45494c
  409. }
  410. .captcha.captcha--light .captcha_tips .captcha_sms-counter {
  411. color: #1991fa
  412. }
  413. .captcha.captcha--light.captcha--loadfail .captcha_bgimg, .captcha.captcha--light.captcha--loading .captcha_bgimg {
  414. display: none
  415. }
  416. .captcha.captcha--light.captcha--loadfail .captcha_loadbox, .captcha.captcha--light.captcha--loading .captcha_loadbox {
  417. display: block
  418. }
  419. .captcha.captcha--light.captcha--loading .captcha_loadicon {
  420. background-image: url(../img/captcha/icon.png);;
  421. background-position: 0 -185px;
  422. background-size: 34px 471px;
  423. animation: loading .8s linear infinite
  424. }
  425. @media only screen and (-webkit-min-device-pixel-ratio: 2) , only screen
  426. and (min-device-pixel-ratio: 2) {
  427. .captcha.captcha--light.captcha--loading .captcha_loadicon {
  428. background-image: url(../img/captcha/icon.png);
  429. background-position: 0 -185px;
  430. background-size: 34px 471px
  431. }
  432. }
  433. .captcha.captcha--light.captcha--loading .captcha_refresh {
  434. display: none
  435. }
  436. .captcha.captcha--light.captcha--loading .captcha_slider {
  437. cursor: not-allowed
  438. }
  439. .captcha.captcha--light.captcha--loading .captcha_slider:hover {
  440. background-color: #fff
  441. }
  442. .captcha.captcha--light.captcha--loading .captcha_slider:hover .captcha_slider_icon {
  443. background-image: url(../img/captcha/icon.png);;
  444. background-position: 0 -26px;
  445. background-size: 34px 471px
  446. }
  447. @media only screen and (-webkit-min-device-pixel-ratio: 2) , only screen
  448. and (min-device-pixel-ratio: 2) {
  449. .captcha.captcha--light.captcha--loading .captcha_slider:hover .captcha_slider_icon {
  450. background-image: url(../img/captcha/icon.png);
  451. background-position: 0 -26px;
  452. background-size: 34px 471px
  453. }
  454. }
  455. .captcha.captcha--light.captcha--loadfail .captcha_loadicon {
  456. background-image: url(../img/captcha/icon.png);;
  457. background-position: 0 -152px;
  458. background-size: 34px 471px
  459. }
  460. @media only screen and (-webkit-min-device-pixel-ratio: 2) , only screen
  461. and (min-device-pixel-ratio: 2) {
  462. .captcha.captcha--light.captcha--loadfail .captcha_loadicon {
  463. background-image: url(../img/captcha/icon.png);
  464. background-position: 0 -152px;
  465. background-size: 34px 471px
  466. }
  467. }
  468. .captcha.captcha--light.captcha--success .captcha_tips {
  469. color: #52ccba
  470. }
  471. .captcha.captcha--light.captcha--success .captcha_refresh {
  472. display: none
  473. }
  474. .captcha.captcha--light.captcha--success.captcha--fragment .captcha_slide_indicator {
  475. border-color: #52ccba;
  476. background-color: #d2f4ef
  477. }
  478. .captcha.captcha--light.captcha--success.captcha--fragment .captcha_slider {
  479. background-color: #52ccba
  480. }
  481. .captcha.captcha--light.captcha--success.captcha--fragment .captcha_slider .captcha_slider_icon {
  482. background-image: url(../img/captcha/icon.png);;
  483. background-position: 0 0;
  484. background-size: 34px 471px
  485. }
  486. @media only screen and (-webkit-min-device-pixel-ratio: 2) , only screen
  487. and (min-device-pixel-ratio: 2) {
  488. .captcha.captcha--light.captcha--success.captcha--fragment .captcha_slider .captcha_slider_icon {
  489. background-image: url(../img/captcha/icon.png);
  490. background-position: 0 0;
  491. background-size: 34px 471px
  492. }
  493. }
  494. .captcha.captcha--light.captcha--success.captcha--point .captcha_control, .captcha.captcha--light.captcha--success.captcha--sms .captcha_control {
  495. border-color: #52ccba;
  496. background-color: #d2f4ef
  497. }
  498. .captcha.captcha--light.captcha--success.captcha--point .captcha_tips .captcha_tips_icon,
  499. .captcha.captcha--light.captcha--success.captcha--sms .captcha_tips .captcha_tips_icon {
  500. margin-right: 5px;
  501. width: 17px;
  502. height: 12px;
  503. vertical-align: middle;
  504. background-image: url(../img/captcha/icon.png);;
  505. background-position: 0 -67px;
  506. background-size: 34px 471px
  507. }
  508. @media only screen and (-webkit-min-device-pixel-ratio: 2) , only screen
  509. and (min-device-pixel-ratio: 2) {
  510. .captcha.captcha--light.captcha--success.captcha--point .captcha_tips .captcha_tips_icon,
  511. .captcha.captcha--light.captcha--success.captcha--sms .captcha_tips .captcha_tips_icon {
  512. background-image: url(../img/captcha/icon.png);
  513. background-position: 0 -67px;
  514. background-size: 34px 471px
  515. }
  516. }
  517. .captcha.captcha--light.captcha--error .captcha_tips {
  518. color: #f57a7a
  519. }
  520. .captcha.captcha--light.captcha--error.captcha--fragment.captcha--maxerror .captcha_slide_indicator,
  521. .captcha.captcha--light.captcha--error.captcha--fragment.captcha--maxerror .captcha_slider {
  522. display: none
  523. }
  524. .captcha.captcha--light.captcha--error.captcha--fragment .captcha_slide_indicator {
  525. border-color: #f57a7a;
  526. background-color: #fce1e1
  527. }
  528. .captcha.captcha--light.captcha--error.captcha--fragment .captcha_slider {
  529. background-color: #f57a7a
  530. }
  531. .captcha.captcha--light.captcha--error.captcha--fragment .captcha_slider .captcha_slider_icon {
  532. width: 12px;
  533. height: 12px;
  534. background-image: url(../img/captcha/icon.png);;
  535. background-position: 0 -82px;
  536. background-size: 34px 471px
  537. }
  538. @media only screen and (-webkit-min-device-pixel-ratio: 2) , only screen
  539. and (min-device-pixel-ratio: 2) {
  540. .captcha.captcha--light.captcha--error.captcha--fragment .captcha_slider .captcha_slider_icon {
  541. background-image: url(../img/captcha/icon.png);
  542. background-position: 0 -82px;
  543. background-size: 34px 471px
  544. }
  545. }
  546. .captcha.captcha--light.captcha--error.captcha--maxerror .captcha_control, .captcha.captcha--light.captcha--error.captcha--point .captcha_control,
  547. .captcha.captcha--light.captcha--error.captcha--sms .captcha_control {
  548. border-color: #f57a7a;
  549. background-color: #fce1e1
  550. }
  551. .captcha.captcha--light.captcha--error.captcha--maxerror .captcha_tips .captcha_tips_icon,
  552. .captcha.captcha--light.captcha--error.captcha--point .captcha_tips .captcha_tips_icon,
  553. .captcha.captcha--light.captcha--error.captcha--sms .captcha_tips .captcha_tips_icon {
  554. margin-right: 5px;
  555. width: 12px;
  556. height: 12px;
  557. vertical-align: middle;
  558. background-image: url(../img/captcha/icon.png);;
  559. background-position: 0 -97px;
  560. background-size: 34px 471px
  561. }
  562. @media only screen and (-webkit-min-device-pixel-ratio: 2) , only screen
  563. and (min-device-pixel-ratio: 2) {
  564. .captcha.captcha--light.captcha--error.captcha--maxerror .captcha_tips .captcha_tips_icon,
  565. .captcha.captcha--light.captcha--error.captcha--point .captcha_tips .captcha_tips_icon,
  566. .captcha.captcha--light.captcha--error.captcha--sms .captcha_tips .captcha_tips_icon {
  567. background-image: url(../img/captcha/icon.png);
  568. background-position: 0 -97px;
  569. background-size: 34px 471px
  570. }
  571. }
  572. .captcha.captcha--light.captcha--error.captcha--maxerror .captcha_tips_text:hover {
  573. cursor: pointer;
  574. text-decoration: underline
  575. }
  576. .captcha_popup.captcha_popup--light {
  577. position: fixed;
  578. top: 0;
  579. left: 0;
  580. width: 100%;
  581. height: 100%;
  582. z-index: 9999;
  583. text-align: center
  584. }
  585. .captcha_popup.captcha_popup--light .captcha_popup_mask {
  586. position: absolute;
  587. top: 0;
  588. left: 0;
  589. width: 100%;
  590. height: 100%;
  591. background-color: #000;
  592. filter: alpha(opacity=30);
  593. opacity: .3;
  594. transition: opacity .3s linear;
  595. will-change: opacity
  596. }
  597. .captcha_popup.captcha_popup--light .captcha_modal {
  598. position: relative;
  599. top: 20%;
  600. border-radius: 2px;
  601. border: 1px solid #e4e7eb;
  602. background-color: #fff;
  603. box-shadow: 0 0 10px rgba(0, 0, 0, .3)
  604. }
  605. .captcha_popup.captcha_popup--light .captcha_modal_title {
  606. padding: 0 15px;
  607. height: 50px;
  608. line-height: 50px;
  609. text-align: left;
  610. font-size: 16px;
  611. color: #45494c;
  612. border-bottom: 1px solid #e4e7eb
  613. }
  614. .captcha_popup.captcha_popup--light .captcha_modal_close {
  615. position: absolute;
  616. top: 13px;
  617. right: 9px;
  618. width: 24px;
  619. height: 24px;
  620. text-align: center;
  621. cursor: pointer
  622. }
  623. .captcha_popup.captcha_popup--light .captcha_modal_close .captcha_icon-close {
  624. margin-top: 6px;
  625. width: 11px;
  626. height: 11px;
  627. vertical-align: top;
  628. background-image: url(../img/captcha/icon.png);;
  629. background-position: 0 -53px;
  630. background-size: 34px 471px
  631. }
  632. @media only screen and (-webkit-min-device-pixel-ratio: 2) , only screen
  633. and (min-device-pixel-ratio: 2) {
  634. .captcha_popup.captcha_popup--light .captcha_modal_close .captcha_icon-close {
  635. background-image: url(../img/captcha/icon.png);
  636. background-position: 0 -53px;
  637. background-size: 34px 471px
  638. }
  639. }
  640. .captcha_popup.captcha_popup--light .captcha_modal_close:hover .captcha_icon-close {
  641. background-image: url(../img/captcha/icon.png);;
  642. background-position: 0 -39px;
  643. background-size: 34px 471px
  644. }
  645. @media only screen and (-webkit-min-device-pixel-ratio: 2) , only screen
  646. and (min-device-pixel-ratio: 2) {
  647. .captcha_popup.captcha_popup--light .captcha_modal_close:hover .captcha_icon-close {
  648. background-image: url(../img/captcha/icon.png);
  649. background-position: 0 -39px;
  650. background-size: 34px 471px
  651. }
  652. }
  653. .captcha_popup.captcha_popup--light .captcha_modal_body {
  654. padding: 15px
  655. }
  656. .captcha_intellisense--light {
  657. position: relative
  658. }
  659. .captcha_intellisense--light * {
  660. box-sizing: border-box
  661. }
  662. .captcha_intellisense--light.captcha_intellisense--checking .captcha_intelli-control,
  663. .captcha_intellisense--light.captcha_intellisense--loadfail .captcha_intelli-control,
  664. .captcha_intellisense--light.captcha_intellisense--loading .captcha_intelli-control,
  665. .captcha_intellisense--light.captcha_intellisense--success .captcha_intelli-control {
  666. cursor: default
  667. }
  668. .captcha_intellisense--light .captcha_intelli-control {
  669. position: relative;
  670. height: 40px;
  671. font-size: 14px;
  672. cursor: pointer;
  673. border-radius: 2px;
  674. border: 1px solid #e4e7eb;
  675. background-color: #f7f9fa;
  676. overflow: hidden
  677. }
  678. .captcha_intellisense--light .captcha_intelli-tips {
  679. text-align: center;
  680. color: #45494c
  681. }
  682. .captcha_intellisense--light .captcha_intelli-tips:hover .captcha_intelli-icon {
  683. background-color: #1991fa;
  684. box-shadow: 0 2px 6px 1px rgba(25, 145, 250, .5)
  685. }
  686. .captcha_intellisense--light .captcha_intelli-tips:hover .captcha_intelli-icon .captcha_logo {
  687. background-image: url(../img/captcha/icon.png);;
  688. background-position: 0 -112px;
  689. background-size: 34px 471px
  690. }
  691. @media only screen and (-webkit-min-device-pixel-ratio: 2) , only screen
  692. and (min-device-pixel-ratio: 2) {
  693. .captcha_intellisense--light .captcha_intelli-tips:hover .captcha_intelli-icon .captcha_logo {
  694. background-image: url(../img/captcha/icon.png);
  695. background-position: 0 -112px;
  696. background-size: 34px 471px
  697. }
  698. }
  699. .captcha_intellisense--light .captcha_intelli-tips:hover .captcha_intelli-text {
  700. color: #1991fa
  701. }
  702. .captcha_intellisense--light .captcha_intelli-icon {
  703. position: relative;
  704. margin-right: 5px;
  705. width: 28px;
  706. height: 28px;
  707. vertical-align: middle;
  708. border-radius: 50%;
  709. background-color: #fff;
  710. box-shadow: 0 2px 8px 1px rgba(188, 196, 204, .5);
  711. transition: all .2s linear
  712. }
  713. .captcha_intellisense--light .captcha_intelli-icon .captcha_logo {
  714. position: absolute;
  715. top: 50%;
  716. left: 50%;
  717. margin-top: -8px;
  718. margin-left: -8px;
  719. width: 15px;
  720. height: 17px;
  721. background-image: url(../img/captcha/icon.png);;
  722. background-position: 0 -132px;
  723. background-size: 34px 471px
  724. }
  725. @media only screen and (-webkit-min-device-pixel-ratio: 2) , only screen
  726. and (min-device-pixel-ratio: 2) {
  727. .captcha_intellisense--light .captcha_intelli-icon .captcha_logo {
  728. background-image: url(../img/captcha/icon.png);
  729. background-position: 0 -132px;
  730. background-size: 34px 471px
  731. }
  732. }
  733. .captcha_intellisense--light .captcha_intelli-text {
  734. line-height: 38px;
  735. vertical-align: middle;
  736. transition: all .2s linear
  737. }
  738. .captcha_intellisense--light .captcha_classic-tips {
  739. display: none;
  740. text-align: center
  741. }
  742. .captcha_intellisense--light .captcha_tips_icon {
  743. margin-right: 5px;
  744. width: 12px;
  745. height: 12px;
  746. vertical-align: middle
  747. }
  748. .captcha_intellisense--light .captcha_tips_text {
  749. line-height: 38px;
  750. vertical-align: middle
  751. }
  752. .captcha_intellisense--light .captcha_classic-container {
  753. position: absolute;
  754. bottom: 0;
  755. left: 0;
  756. width: 100%;
  757. z-index: 1000
  758. }
  759. .captcha_intellisense--light .captcha_classic-wrapper {
  760. display: none;
  761. padding: 9px;
  762. border: 1px solid #e4e7eb;
  763. border-radius: 2px;
  764. background-color: #fff
  765. }
  766. .captcha_intellisense--light.captcha_intellisense--checking .captcha_intelli-icon,
  767. .captcha_intellisense--light.captcha_intellisense--loading .captcha_intelli-icon {
  768. background-color: #1991fa
  769. }
  770. .captcha_intellisense--light.captcha_intellisense--checking .captcha_intelli-icon .captcha_logo,
  771. .captcha_intellisense--light.captcha_intellisense--loading .captcha_intelli-icon .captcha_logo {
  772. background-image: url(../img/captcha/icon.png);;
  773. background-position: 0 -112px;
  774. background-size: 34px 471px
  775. }
  776. @media only screen and (-webkit-min-device-pixel-ratio: 2) , only screen
  777. and (min-device-pixel-ratio: 2) {
  778. .captcha_intellisense--light.captcha_intellisense--checking .captcha_intelli-icon .captcha_logo,
  779. .captcha_intellisense--light.captcha_intellisense--loading .captcha_intelli-icon .captcha_logo {
  780. background-image: url(../img/captcha/icon.png);
  781. background-position: 0 -112px;
  782. background-size: 34px 471px
  783. }
  784. }
  785. .captcha_intellisense--light.captcha_intellisense--checking .captcha_intelli-text,
  786. .captcha_intellisense--light.captcha_intellisense--loading .captcha_intelli-text {
  787. color: #1991fa
  788. }
  789. .captcha_intellisense--light.captcha_intellisense--checking .captcha_ball-scale-multiple {
  790. position: absolute;
  791. top: 50%;
  792. left: 50%;
  793. transform: translateY(-80px)
  794. }
  795. .captcha_intellisense--light.captcha_intellisense--checking .captcha_ball-scale-multiple > div:nth-child(2) {
  796. animation-delay: -1.2s
  797. }
  798. .captcha_intellisense--light.captcha_intellisense--checking .captcha_ball-scale-multiple > div:nth-child(3) {
  799. animation-delay: -.6s
  800. }
  801. .captcha_intellisense--light.captcha_intellisense--checking .captcha_ball-scale-multiple > div {
  802. position: absolute;
  803. box-shadow: inset 0 0 40px rgba(25, 145, 250, .5);
  804. border-radius: 100%;
  805. animation-fill-mode: both;
  806. left: -80px;
  807. top: 0;
  808. opacity: 0;
  809. width: 160px;
  810. height: 160px;
  811. animation: ball-scale-multiple 1.8s 0s linear infinite
  812. }
  813. .captcha_intellisense--light.captcha_intellisense--loading .captcha_logo {
  814. display: none
  815. }
  816. .captcha_intellisense--light.captcha_intellisense--loading .captcha_intelli-loading {
  817. position: absolute;
  818. top: 50%;
  819. left: 50%;
  820. margin-top: -8px;
  821. margin-left: -8px;
  822. width: 16px;
  823. height: 16px;
  824. border-radius: 50%;
  825. border-width: 2px;
  826. border-style: solid;
  827. border-color: #fff #fff transparent;
  828. animation: loading .75s linear infinite;
  829. background-position: 0 0
  830. }
  831. .captcha_intellisense--light.captcha_intellisense--error .captcha_intelli-tips,
  832. .captcha_intellisense--light.captcha_intellisense--loadfail .captcha_intelli-tips,
  833. .captcha_intellisense--light.captcha_intellisense--success .captcha_intelli-tips {
  834. display: none
  835. }
  836. .captcha_intellisense--light.captcha_intellisense--error .captcha_classic-tips,
  837. .captcha_intellisense--light.captcha_intellisense--loadfail .captcha_classic-tips,
  838. .captcha_intellisense--light.captcha_intellisense--success .captcha_classic-tips {
  839. display: block
  840. }
  841. .captcha_intellisense--light.captcha_intellisense--success .captcha_intelli-control {
  842. border-color: #52ccba;
  843. background-color: #d2f4ef
  844. }
  845. .captcha_intellisense--light.captcha_intellisense--success .captcha_classic-tips {
  846. color: #52ccba
  847. }
  848. .captcha_intellisense--light.captcha_intellisense--success .captcha_tips_icon {
  849. width: 17px;
  850. background-image: url(../img/captcha/icon.png);;
  851. background-position: 0 -67px;
  852. background-size: 34px 471px
  853. }
  854. @media only screen and (-webkit-min-device-pixel-ratio: 2) , only screen
  855. and (min-device-pixel-ratio: 2) {
  856. .captcha_intellisense--light.captcha_intellisense--success .captcha_tips_icon {
  857. background-image: url(../img/captcha/icon.png);
  858. background-position: 0 -67px;
  859. background-size: 34px 471px
  860. }
  861. }
  862. .captcha_intellisense--light.captcha_intellisense--error .captcha_intelli-control,
  863. .captcha_intellisense--light.captcha_intellisense--loadfail .captcha_intelli-control {
  864. border-color: #f57a7a;
  865. background-color: #fce1e1
  866. }
  867. .captcha_intellisense--light.captcha_intellisense--error .captcha_classic-tips,
  868. .captcha_intellisense--light.captcha_intellisense--loadfail .captcha_classic-tips {
  869. color: #f57a7a
  870. }
  871. .captcha_intellisense--light.captcha_intellisense--error .captcha_tips_icon,
  872. .captcha_intellisense--light.captcha_intellisense--loadfail .captcha_tips_icon {
  873. background-image: url(../img/captcha/icon.png);;
  874. background-position: 0 -97px;
  875. background-size: 34px 471px
  876. }
  877. @media only screen and (-webkit-min-device-pixel-ratio: 2) , only screen
  878. and (min-device-pixel-ratio: 2) {
  879. .captcha_intellisense--light.captcha_intellisense--error .captcha_tips_icon,
  880. .captcha_intellisense--light.captcha_intellisense--loadfail .captcha_tips_icon {
  881. background-image: url(../img/captcha/icon.png);
  882. background-position: 0 -97px;
  883. background-size: 34px 471px
  884. }
  885. }
  886. .captcha_intellisense--light.captcha_intellisense--maxerror .captcha_intelli-control .captcha_tips_text:hover {
  887. cursor: pointer;
  888. text-decoration: underline
  889. }