login.css 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480
  1. html,
  2. body {
  3. height: 100%;
  4. margin: 0;
  5. padding: 0;
  6. }
  7. body {
  8. background: #f0f0f1;
  9. min-width: 0;
  10. color: #3c434a;
  11. font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  12. font-size: 13px;
  13. line-height: 1.4;
  14. }
  15. a {
  16. color: #2271b1;
  17. transition-property: border, background, color;
  18. transition-duration: .05s;
  19. transition-timing-function: ease-in-out;
  20. }
  21. a {
  22. outline: 0;
  23. }
  24. a:hover,
  25. a:active {
  26. color: #135e96;
  27. }
  28. a:focus {
  29. color: #043959;
  30. box-shadow:
  31. 0 0 0 1px #4f94d4,
  32. 0 0 2px 1px rgba(79, 148, 212, 0.8);
  33. }
  34. p {
  35. line-height: 1.5;
  36. }
  37. .login .message,
  38. .login .success,
  39. .login #login_error {
  40. border-left: 4px solid #72aee6;
  41. padding: 12px;
  42. margin-left: 0;
  43. margin-bottom: 20px;
  44. background-color: #fff;
  45. box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
  46. word-wrap: break-word;
  47. }
  48. .login .success {
  49. border-left-color: #00a32a;
  50. }
  51. .login #login_error {
  52. border-left-color: #d63638;
  53. }
  54. #loginform p.submit,
  55. .login-action-lostpassword p.submit {
  56. border: none;
  57. margin: -10px 0 20px; /* May want to revisit this */
  58. }
  59. .login * {
  60. margin: 0;
  61. padding: 0;
  62. }
  63. .login .input::-ms-clear {
  64. display: none;
  65. }
  66. .login .pw-weak {
  67. margin-bottom: 15px;
  68. }
  69. .login .button.wp-hide-pw {
  70. background: transparent;
  71. border: 1px solid transparent;
  72. box-shadow: none;
  73. font-size: 14px;
  74. line-height: 2;
  75. width: 2.5rem;
  76. height: 2.5rem;
  77. min-width: 40px;
  78. min-height: 40px;
  79. margin: 0;
  80. padding: 5px 9px;
  81. position: absolute;
  82. right: 0;
  83. top: 0;
  84. }
  85. .login .button.wp-hide-pw:hover {
  86. background: transparent;
  87. }
  88. .login .button.wp-hide-pw:focus {
  89. background: transparent;
  90. border-color: #3582c4;
  91. box-shadow: 0 0 0 1px #3582c4;
  92. /* Only visible in Windows High Contrast mode */
  93. outline: 2px solid transparent;
  94. }
  95. .login .button.wp-hide-pw:active {
  96. background: transparent;
  97. box-shadow: none;
  98. transform: none;
  99. }
  100. .login .button.wp-hide-pw .dashicons {
  101. width: 1.25rem;
  102. height: 1.25rem;
  103. top: 0.25rem;
  104. }
  105. .login .wp-pwd {
  106. position: relative;
  107. }
  108. .no-js .hide-if-no-js {
  109. display: none;
  110. }
  111. .login form {
  112. margin-top: 20px;
  113. margin-left: 0;
  114. padding: 26px 24px 34px;
  115. font-weight: 400;
  116. overflow: hidden;
  117. background: #fff;
  118. border: 1px solid #c3c4c7;
  119. box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  120. }
  121. .login form.shake {
  122. animation: shake 0.2s cubic-bezier(.19,.49,.38,.79) both;
  123. animation-iteration-count: 3;
  124. transform: translateX(0);
  125. }
  126. @keyframes shake {
  127. 25% {
  128. transform: translateX(-20px);
  129. }
  130. 75% {
  131. transform: translateX(20px);
  132. }
  133. 100% {
  134. transform: translateX(0);
  135. }
  136. }
  137. @media (prefers-reduced-motion: reduce) {
  138. .login form.shake {
  139. animation: none;
  140. transform: none;
  141. }
  142. }
  143. .login-action-confirm_admin_email #login {
  144. width: 60vw;
  145. max-width: 650px;
  146. margin-top: -2vh;
  147. }
  148. @media screen and (max-width: 782px) {
  149. .login-action-confirm_admin_email #login {
  150. box-sizing: border-box;
  151. margin-top: 0;
  152. padding-left: 4vw;
  153. padding-right: 4vw;
  154. width: 100vw;
  155. }
  156. }
  157. .login form .forgetmenot {
  158. font-weight: 400;
  159. float: left;
  160. margin-bottom: 0;
  161. }
  162. .login .button-primary {
  163. float: right;
  164. }
  165. .login .reset-pass-submit {
  166. display: flex;
  167. flex-flow: row wrap;
  168. justify-content: space-between;
  169. }
  170. .login .reset-pass-submit .button {
  171. display: inline-block;
  172. float: none;
  173. margin-bottom: 6px;
  174. }
  175. .login .admin-email-confirm-form .submit {
  176. text-align: center;
  177. }
  178. .admin-email__later {
  179. text-align: left;
  180. }
  181. .login form p.admin-email__details {
  182. margin: 1.1em 0;
  183. }
  184. .login h1.admin-email__heading {
  185. border-bottom: 1px #f0f0f1 solid;
  186. color: #50575e;
  187. font-weight: normal;
  188. padding-bottom: 0.5em;
  189. text-align: left;
  190. }
  191. .admin-email__actions div {
  192. padding-top: 1.5em;
  193. }
  194. .login .admin-email__actions .button-primary {
  195. float: none;
  196. margin-left: 0.25em;
  197. margin-right: 0.25em;
  198. }
  199. #login form p {
  200. margin-bottom: 0;
  201. }
  202. #login form p.submit {
  203. margin: 0;
  204. padding: 0;
  205. }
  206. .login label {
  207. font-size: 14px;
  208. line-height: 1.5;
  209. display: inline-block;
  210. margin-bottom: 3px;
  211. }
  212. .login .forgetmenot label,
  213. .login .pw-weak label {
  214. line-height: 1.5;
  215. vertical-align: baseline;
  216. }
  217. .login h1 {
  218. text-align: center;
  219. }
  220. .login h1 a {
  221. background-image: url(../images/w-logo-blue.png?ver=20131202);
  222. background-image: none, url(../images/wordpress-logo.svg?ver=20131107);
  223. background-size: 84px;
  224. background-position: center top;
  225. background-repeat: no-repeat;
  226. color: #3c434a;
  227. height: 84px;
  228. font-size: 20px;
  229. font-weight: 400;
  230. line-height: 1.3;
  231. margin: 0 auto 25px;
  232. padding: 0;
  233. text-decoration: none;
  234. width: 84px;
  235. text-indent: -9999px;
  236. outline: none;
  237. overflow: hidden;
  238. display: block;
  239. }
  240. #login {
  241. width: 320px;
  242. padding: 5% 0 0;
  243. margin: auto;
  244. }
  245. .login #nav,
  246. .login #backtoblog {
  247. font-size: 13px;
  248. padding: 0 24px;
  249. }
  250. .login #nav {
  251. margin: 24px 0 0;
  252. }
  253. #backtoblog {
  254. margin: 16px 0;
  255. word-wrap: break-word;
  256. }
  257. .login #nav a,
  258. .login #backtoblog a {
  259. text-decoration: none;
  260. color: #50575e;
  261. }
  262. .login #nav a:hover,
  263. .login #backtoblog a:hover,
  264. .login h1 a:hover {
  265. color: #135e96;
  266. }
  267. .login #nav a:focus,
  268. .login #backtoblog a:focus,
  269. .login h1 a:focus {
  270. color: #043959;
  271. }
  272. .login .privacy-policy-page-link {
  273. text-align: center;
  274. width: 100%;
  275. margin: 3em 0 2em;
  276. }
  277. .login form .input,
  278. .login input[type="text"],
  279. .login input[type="password"] {
  280. font-size: 24px;
  281. line-height: 1.33333333; /* 32px */
  282. width: 100%;
  283. border-width: 0.0625rem;
  284. padding: 0.1875rem 0.3125rem; /* 3px 5px */
  285. margin: 0 6px 16px 0;
  286. min-height: 40px;
  287. max-height: none;
  288. }
  289. .login input.password-input {
  290. font-family: Consolas, Monaco, monospace;
  291. }
  292. .js.login input.password-input,
  293. .js.login-action-rp form .input,
  294. .js.login-action-rp input[type="text"] {
  295. padding-right: 2.5rem;
  296. }
  297. .login form .input,
  298. .login input[type="text"],
  299. .login form input[type="checkbox"] {
  300. background: #fff;
  301. }
  302. .js.login-action-rp input[type="text"],
  303. .js.login-action-rp input[type="password"] {
  304. margin-bottom: 0;
  305. }
  306. .login #pass-strength-result {
  307. font-weight: 600;
  308. margin: -1px 5px 16px 0;
  309. padding: 6px 5px;
  310. text-align: center;
  311. width: 100%;
  312. }
  313. body.interim-login {
  314. height: auto;
  315. }
  316. .interim-login #login {
  317. padding: 0;
  318. margin: 5px auto 20px;
  319. }
  320. .interim-login.login h1 a {
  321. width: auto;
  322. }
  323. .interim-login #login_error,
  324. .interim-login.login .message {
  325. margin: 0 0 16px;
  326. }
  327. .interim-login.login form {
  328. margin: 0;
  329. }
  330. /* Hide visually but not from screen readers */
  331. .screen-reader-text,
  332. .screen-reader-text span {
  333. border: 0;
  334. clip: rect(1px, 1px, 1px, 1px);
  335. -webkit-clip-path: inset(50%);
  336. clip-path: inset(50%);
  337. height: 1px;
  338. margin: -1px;
  339. overflow: hidden;
  340. padding: 0;
  341. position: absolute;
  342. width: 1px;
  343. word-wrap: normal !important; /* many screen reader and browser combinations announce broken words as they would appear visually */
  344. }
  345. /* Hide the Edge "reveal password" native button */
  346. input::-ms-reveal {
  347. display: none;
  348. }
  349. #language-switcher {
  350. padding: 0;
  351. overflow: visible;
  352. background: none;
  353. border: none;
  354. box-shadow: none;
  355. }
  356. #language-switcher select {
  357. margin-right: 0.25em;
  358. }
  359. .language-switcher {
  360. margin: 0 auto;
  361. padding: 0 0 24px;
  362. text-align: center;
  363. }
  364. .language-switcher label {
  365. margin-right: 0.25em;
  366. }
  367. .language-switcher label .dashicons {
  368. width: auto;
  369. height: auto;
  370. }
  371. .login .language-switcher .button-primary {
  372. float: none;
  373. margin-bottom: 0;
  374. }
  375. @media screen and (max-height: 550px) {
  376. #login {
  377. padding: 20px 0;
  378. }
  379. #language-switcher {
  380. margin-top: 0;
  381. }
  382. }
  383. @media screen and (max-width: 782px) {
  384. .interim-login input[type=checkbox] {
  385. width: 1rem;
  386. height: 1rem;
  387. }
  388. .interim-login input[type=checkbox]:checked:before {
  389. width: 1.3125rem;
  390. height: 1.3125rem;
  391. margin: -0.1875rem 0 0 -0.25rem;
  392. }
  393. #language-switcher label,
  394. #language-switcher select {
  395. margin-right: 0;
  396. }
  397. }
  398. @media screen and (max-width: 400px) {
  399. .login .language-switcher .button-primary {
  400. display: block;
  401. margin: 5px auto 0;
  402. }
  403. }