Ei kuvausta

login.css 6.9KB

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