login.css 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440
  1. /* clear float */
  2. .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
  3. .clearfix { display: block; }
  4. /* common */
  5. html { overflow:hidden; background-color: #000;}
  6. body { overflow:hidden;background-position: center;background-size: cover;}
  7. .login #login_error, .login .message {
  8. /*position: absolute;
  9. top: -70px;*/
  10. left: 0;
  11. top: 0;
  12. position: fixed;
  13. margin-bottom: 0 !important;
  14. background: rgba(255, 255, 255, 0.45);
  15. }
  16. #login h1 a {
  17. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  18. font-weight:bold;
  19. text-indent:0px;
  20. font-size:0px;
  21. height:60px;
  22. width: 100%;
  23. line-height:88px;
  24. line-height:180%;
  25. text-align:center; color:#FFF;
  26. /*text-shadow:1px 1px 0px #000;*/
  27. margin-bottom:10px;
  28. margin-top: 25px;
  29. background-position: center bottom !important;
  30. background-size: contain;
  31. padding-top: 20px;
  32. box-shadow: none;
  33. }
  34. input:-webkit-autofill {
  35. -webkit-box-shadow: 0 0 0px 1000px rgba(0, 0, 0, 0) inset;
  36. box-shadow: 0 0 0px 1000px rgba(0, 0, 0, 0) inset;
  37. color: #676767 !important
  38. }
  39. #login {
  40. font:14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  41. position:absolute;
  42. background: #FFF9;
  43. border-radius: 12px;
  44. top:47%;
  45. left:50%;
  46. width:350px;
  47. padding:0px !important;
  48. margin:-235px 0px 0px -175px !important;
  49. background-position: center 48%;
  50. backdrop-filter: blur(5px);
  51. -webkit-backdrop-filter: blur(5px);
  52. }
  53. #login form {
  54. padding:10px 0px;
  55. background: none;
  56. box-shadow: none;
  57. margin-top: 10px;
  58. border: none;
  59. }
  60. #login form p,#login form .user-pass-wrap {
  61. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  62. position:relative;
  63. padding:0px 35px;
  64. }
  65. #login a {
  66. /*text-shadow:1px 1px 0px #000;*/
  67. color:#000 !important;
  68. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  69. }
  70. #login_error a {
  71. color:#000 !important;
  72. /*text-shadow:1px 1px 0px #FFF;*/
  73. }
  74. #login form label {
  75. color:#333;
  76. color: #585858;
  77. }
  78. #login form .input {
  79. border:1px solid #EAEAEA;
  80. border-radius:0px;
  81. background:none;
  82. padding:5px 15px;
  83. color:#444;
  84. font-weight:normal;
  85. font-size:16px;
  86. background:#FFF;
  87. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  88. box-shadow: 0 0 0px 1000px white inset;
  89. height: 46px;
  90. border-radius: 12px;
  91. margin-top: 10px;
  92. }
  93. #login form .input:active {
  94. box-shadow:0 0 0px 1000px white inset;
  95. color: #676767 !important;
  96. }
  97. #login form .input:focus {
  98. box-shadow:0 0 0px 1000px white inset;
  99. color: #676767 !important;
  100. border: 1px solid #FF5656;
  101. }
  102. .login .button.wp-hide-pw{
  103. height: 46px;
  104. outline: none;
  105. box-shadow: none;
  106. border: none;
  107. opacity: .8;
  108. }
  109. .login .button.wp-hide-pw .dashicons{
  110. right: 1rem;
  111. top: 0.2rem;
  112. }
  113. #login .form-send .bot {
  114. width:100%;
  115. border-bottom:1px solid #ccc;
  116. }
  117. #login form .forgetmenot {
  118. float:none;
  119. }
  120. #login form p.submit {
  121. padding:0px 35px !important;
  122. }
  123. #login .submit .button {
  124. width:50%;
  125. margin-top: 10%;
  126. margin-bottom: 5%;
  127. margin-left: 25%;
  128. margin-right: 25%;
  129. border:none;
  130. float:none;
  131. border-radius:12px;
  132. height:45px;
  133. font-size:16px;
  134. text-align:center;
  135. color:#FFF;
  136. /*background:#505050;*/
  137. font-weight:normal;
  138. cursor:pointer;
  139. box-shadow: none;
  140. text-shadow: none;
  141. }
  142. .login #nav , #backtoblog {
  143. /*display:none*/
  144. color: #585858 !important;
  145. }
  146. .login #backtoblog {
  147. display:none
  148. }
  149. .login #nav {
  150. margin: 0;
  151. margin-bottom: 15px;
  152. margin-left: 2.5%;
  153. text-align: center;
  154. }
  155. .login .ds-login{
  156. margin-left: 38px;
  157. }
  158. .login form input[type=checkbox] {
  159. background: #FFFFFF;
  160. box-shadow: none;
  161. width:20px;
  162. height:20px;
  163. border-radius: 2px;
  164. }
  165. input[type=checkbox]:checked:before {
  166. margin: -2px 0 0 -2px;
  167. }
  168. /* loading */
  169. .loading { position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:99; overflow:hidden; background:#000; }
  170. .loading img { position:absolute; top:50%; left:50%; width:58px; height:10px; margin:-5px 0px 0px -29px; }
  171. /* auto hide */
  172. .login #login_error {
  173. position: absolute;
  174. border-radius: 6px;
  175. width: 322px
  176. }
  177. .login .message {
  178. border-radius: 6px;
  179. -moz-animation: cssAnimation 0s ease-in 5s forwards;
  180. /* Firefox */
  181. -webkit-animation: cssAnimation 0s ease-in 5s forwards;
  182. /* Safari and Chrome */
  183. -o-animation: cssAnimation 0s ease-in 5s forwards;
  184. /* Opera */
  185. animation: cssAnimation 0s ease-in 5s forwards;
  186. -webkit-animation-fill-mode: forwards;
  187. animation-fill-mode: forwards;
  188. }
  189. @keyframes cssAnimation {
  190. to {
  191. padding: 0;
  192. width:0;
  193. height:0;
  194. overflow:hidden;
  195. }
  196. }
  197. @-webkit-keyframes cssAnimation {
  198. to {
  199. padding: 0;
  200. width:0;
  201. height:0;
  202. visibility:hidden;
  203. }
  204. }
  205. /*reset password page*/
  206. .password-input-wrapper {
  207. width: 100%;
  208. margin-top: 10px;
  209. }
  210. .password-input {
  211. margin-top: 0 !important;
  212. }
  213. .button-secondary {
  214. padding-top: 10px !important;
  215. padding-left: 40px !important;
  216. }
  217. /*验证*/
  218. #slider {
  219. margin: 0 auto;
  220. /*width: 300px;*/
  221. height: 46px;
  222. position: relative;
  223. border-radius: 3px;
  224. background-color: #eee;
  225. overflow: hidden;
  226. text-align: center;
  227. border-radius: 12px;
  228. user-select: none;
  229. -moz-user-select: none;
  230. -webkit-user-select: none;
  231. }
  232. #slider_bg {
  233. position: absolute;
  234. left: 0;
  235. top: 0;
  236. height: 100%;
  237. /*background-color: #444;*/
  238. z-index: 1;
  239. border-radius: 3px 0 0 3px;
  240. background: #FF5656; /* fallback for old browsers */
  241. background: -webkit-linear-gradient(to left, #FFC371, #FF5656); /* Chrome 10-25, Safari 5.1-6 */
  242. background: linear-gradient(to left, #FFC371, #FF5656); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  243. }
  244. #label {
  245. width: 50px;
  246. position: absolute;
  247. left: 0;
  248. top: 0;
  249. height: 44px;
  250. line-height: 35px;
  251. border: 1px solid #f1f1f1;
  252. background: #fff;
  253. z-index: 3;
  254. cursor: move;
  255. /*color: #505050;*/
  256. font-size: 38px;
  257. font-weight: 900;
  258. border-radius: 12px;
  259. }
  260. #labelTip {
  261. position: absolute;
  262. left: 0;
  263. width: 100%;
  264. height: 100%;
  265. font-size: 13px;
  266. font-family: 'Microsoft Yahei', serif;
  267. font-style: oblique;
  268. color: #FFF;
  269. border-radius: 12px;
  270. /*background-color: #505050;*/
  271. line-height: 46px;
  272. text-align: center;
  273. z-index: 2;
  274. }
  275. #verification-slider{
  276. margin: 1em;
  277. padding: 0px 21px;
  278. }
  279. #verification-ok{
  280. color: #777 !important;
  281. margin: auto;
  282. margin-top: 0 !important;
  283. text-align: center;
  284. }
  285. .clear {
  286. display:none
  287. }
  288. .login form .forgetmenot label {
  289. font-size: 14px !important;
  290. }
  291. #rememberme {
  292. float: right;
  293. margin-top: 0px;
  294. }
  295. .forgetmenot input[type=checkbox] {
  296. height: 0;
  297. width: 0;
  298. visibility: hidden;
  299. }
  300. .forgetmenot label {
  301. cursor: pointer;
  302. text-indent: -999.9px;
  303. width: 21.0px;
  304. height: 11.0px;
  305. background: grey;
  306. display: block;
  307. border-radius: 10.0px;
  308. position: relative;
  309. }
  310. .forgetmenot label:after {
  311. content: '';
  312. position: absolute;
  313. top: 1px;
  314. left: 1px;
  315. width: 9.0px;
  316. height: 9.0px;
  317. background: #fff;
  318. border-radius: 9.0px;
  319. transition: 0.3s;
  320. }
  321. /*.forgetmenot input:checked + label {
  322. background: #505050;
  323. }*/
  324. .forgetmenot input:checked + label:after {
  325. left: calc(100% - 1px);
  326. transform: translateX(-100%);
  327. }
  328. .forgetmenot label:active:after {
  329. width: 13.0px;
  330. }
  331. .pw-weak {
  332. text-align: center
  333. }
  334. .login .privacy-policy-page-link {
  335. margin: 1em 0 1em !important;
  336. }
  337. .login label {
  338. font-size: 14px;
  339. font-weight: 600;
  340. line-height: 1.5;
  341. display: inline-block;
  342. margin-bottom: 3px;
  343. }
  344. .vaptchaContainer{
  345. width: 280px;
  346. height: 46px;
  347. margin: auto;
  348. margin-bottom: 16px;
  349. }
  350. .vaptcha-init-main {
  351. display: table;
  352. width: 100%;
  353. height: 100%;
  354. background-color: #eeeeee;
  355. border-radius: 20px;
  356. }
  357. .vaptcha-init-loading {
  358. display: table-cell;
  359. vertical-align: middle;
  360. text-align: center;
  361. }
  362. .vaptcha-init-loading > a {
  363. display: inline-block;
  364. width: 18px;
  365. height: 18px;
  366. border: none;
  367. }
  368. .vaptcha-init-loading .vaptcha-text {
  369. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  370. font-size: 12px;
  371. color: #cccccc;
  372. vertical-align: middle;
  373. }
  374. .vp-basic-btn {
  375. border-radius: 12px !important;
  376. }
  377. .aiowps-captcha-equation.hide-when-displaying-tfa-input {
  378. padding: 0 35px;
  379. }
  380. .aiowps-captcha-answer {
  381. font-size: 16px;
  382. font-family: "Microsoft Yahei";
  383. height: 46px;
  384. border-radius: 12px;
  385. margin-top: 5px;
  386. min-height: 40px;
  387. max-height: none;
  388. text-indent: 8px;
  389. }