login-rtl.css 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387
  1. html,
  2. body {
  3. height: 100%;
  4. margin: 0;
  5. padding: 0;
  6. }
  7. body {
  8. background: #f1f1f1;
  9. min-width: 0;
  10. color: #444;
  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: #0073aa;
  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: #00a0d2;
  27. }
  28. a:focus {
  29. color: #124964;
  30. box-shadow:
  31. 0 0 0 1px #5b9dd9,
  32. 0 0 2px 1px rgba(30, 140, 190, 0.8);
  33. }
  34. p {
  35. line-height: 1.5;
  36. }
  37. .login .message,
  38. .login .success,
  39. .login #login_error {
  40. border-right: 4px solid #00a0d2;
  41. padding: 12px;
  42. margin-right: 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-right-color: #46b450;
  49. }
  50. .login #login_error {
  51. border-right-color: #dc3232;
  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. left: 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: #007cba;
  90. box-shadow: 0 0 0 1px #007cba;
  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-right: 0;
  113. padding: 26px 24px 46px;
  114. font-weight: 400;
  115. overflow: hidden;
  116. background: #fff;
  117. border: 1px solid #ccd0d4;
  118. box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  119. }
  120. .login-action-confirm_admin_email #login {
  121. width: 60vw;
  122. margin-top: -2vh;
  123. }
  124. @media screen and (max-width: 782px) {
  125. .login-action-confirm_admin_email #login {
  126. width: 100vw;
  127. }
  128. }
  129. .login form .forgetmenot {
  130. font-weight: 400;
  131. float: right;
  132. margin-bottom: 0;
  133. }
  134. .login .button-primary {
  135. float: left;
  136. }
  137. .login .admin-email-confirm-form .submit {
  138. text-align: center;
  139. }
  140. .admin-email__later {
  141. text-align: right;
  142. }
  143. .login form p.admin-email__details {
  144. margin: 1.1em 0;
  145. }
  146. .login h1.admin-email__heading {
  147. border-bottom: 1px rgb(241, 241, 241) solid;
  148. color: rgb(95, 95, 95);
  149. font-weight: normal;
  150. padding-bottom: 0.5em;
  151. text-align: right;
  152. }
  153. .admin-email__actions div {
  154. padding-top: 1.5em;
  155. }
  156. .login .admin-email__actions .button-primary {
  157. float: none;
  158. margin-right: 0.25em;
  159. margin-left: 0.25em;
  160. }
  161. #login form p {
  162. margin-bottom: 0;
  163. }
  164. #login form p.submit {
  165. margin: 0;
  166. padding: 0;
  167. }
  168. .login label {
  169. font-size: 14px;
  170. line-height: 1.5;
  171. display: inline-block;
  172. margin-bottom: 3px;
  173. }
  174. .login .forgetmenot label,
  175. .login .pw-weak label {
  176. line-height: 1.5;
  177. vertical-align: baseline;
  178. }
  179. .login h1 {
  180. text-align: center;
  181. }
  182. .login h1 a {
  183. background-image: url(../images/w-logo-blue.png?ver=20131202);
  184. background-image: none, url(../images/wordpress-logo.svg?ver=20131107);
  185. background-size: 84px;
  186. background-position: center top;
  187. background-repeat: no-repeat;
  188. color: #444;
  189. height: 84px;
  190. font-size: 20px;
  191. font-weight: 400;
  192. line-height: 1.3;
  193. margin: 0 auto 25px;
  194. padding: 0;
  195. text-decoration: none;
  196. width: 84px;
  197. text-indent: -9999px;
  198. outline: none;
  199. overflow: hidden;
  200. display: block;
  201. }
  202. #login {
  203. width: 320px;
  204. padding: 8% 0 0;
  205. margin: auto;
  206. }
  207. .login #nav,
  208. .login #backtoblog {
  209. font-size: 13px;
  210. padding: 0 24px 0;
  211. }
  212. .login #nav {
  213. margin: 24px 0 0 0;
  214. }
  215. #backtoblog {
  216. margin: 16px 0;
  217. }
  218. .login #nav a,
  219. .login #backtoblog a {
  220. text-decoration: none;
  221. color: #555d66;
  222. }
  223. .login #nav a:hover,
  224. .login #backtoblog a:hover,
  225. .login h1 a:hover {
  226. color: #00a0d2;
  227. }
  228. .login #nav a:focus,
  229. .login #backtoblog a:focus,
  230. .login h1 a:focus {
  231. color: #124964;
  232. }
  233. .login .privacy-policy-page-link {
  234. text-align: center;
  235. width: 100%;
  236. margin: 5em 0 2em;
  237. }
  238. .login form .input,
  239. .login input[type="text"],
  240. .login input[type="password"] {
  241. font-size: 24px;
  242. line-height: 1.33333333; /* 32px */
  243. width: 100%;
  244. border-width: 0.0625rem;
  245. padding: 0.1875rem 0.3125rem; /* 3px 5px */
  246. margin: 0 0 16px 6px;
  247. min-height: 40px;
  248. max-height: none;
  249. }
  250. .js.login input.password-input,
  251. .js.login-action-rp form .input,
  252. .js.login-action-rp input[type="text"] {
  253. padding-left: 2.5rem;
  254. }
  255. .login form .input,
  256. .login input[type="text"],
  257. .login form input[type="checkbox"] {
  258. background: #fbfbfb;
  259. }
  260. .js.login-action-rp input[type="text"],
  261. .js.login-action-rp input[type="password"] {
  262. margin-bottom: 0;
  263. }
  264. .login #pass-strength-result {
  265. font-weight: 600;
  266. margin: -1px 0 16px 5px;
  267. padding: 6px 5px;
  268. text-align: center;
  269. width: 100%;
  270. }
  271. body.interim-login {
  272. height: auto;
  273. }
  274. .interim-login #login {
  275. padding: 0;
  276. margin: 5px auto 20px;
  277. }
  278. .interim-login.login h1 a {
  279. width: auto;
  280. }
  281. .interim-login #login_error,
  282. .interim-login.login .message {
  283. margin: 0 0 16px;
  284. }
  285. .interim-login.login form {
  286. margin: 0;
  287. }
  288. /* Hide visually but not from screen readers */
  289. .screen-reader-text,
  290. .screen-reader-text span {
  291. border: 0;
  292. clip: rect(1px, 1px, 1px, 1px);
  293. -webkit-clip-path: inset(50%);
  294. clip-path: inset(50%);
  295. height: 1px;
  296. margin: -1px;
  297. overflow: hidden;
  298. padding: 0;
  299. position: absolute;
  300. width: 1px;
  301. word-wrap: normal !important; /* many screen reader and browser combinations announce broken words as they would appear visually */
  302. }
  303. /* Hide the Edge "reveal password" native button */
  304. input::-ms-reveal {
  305. display: none;
  306. }
  307. @-ms-viewport {
  308. width: device-width;
  309. }
  310. @media screen and (max-height: 550px) {
  311. #login {
  312. padding: 20px 0;
  313. }
  314. }
  315. @media screen and (max-width: 782px) {
  316. .interim-login input[type=checkbox] {
  317. width: 1rem;
  318. height: 1rem;
  319. }
  320. .interim-login input[type=checkbox]:checked:before {
  321. width: 1.3125rem;
  322. height: 1.3125rem;
  323. margin: -0.1875rem -0.25rem 0 0;
  324. }
  325. }