From 0408e473c1e022edef3cc6c66cf546b03a7f1465 Mon Sep 17 00:00:00 2001 From: jorge-vitrubio Date: Wed, 30 Nov 2022 17:11:46 +0100 Subject: [PATCH] customizing login --- assets/css/style-login.css | 235 ++++++++++++++++++++++++++++ functions.php | 4 + inc/login-functions.php | 39 +++++ inc/template-functions.php | 3 + sass/components/_components.scss | 1 + sass/components/content/_login.scss | 0 style.css.map | 3 +- 7 files changed, 284 insertions(+), 1 deletion(-) create mode 100644 assets/css/style-login.css create mode 100644 inc/login-functions.php create mode 100644 sass/components/content/_login.scss diff --git a/assets/css/style-login.css b/assets/css/style-login.css new file mode 100644 index 0000000..c0660d1 --- /dev/null +++ b/assets/css/style-login.css @@ -0,0 +1,235 @@ +body { + background:#fff; + min-width:0; + color:#111; + font-family:"din-light",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; + font-size:0.9em; + line-height:1.4; +} +a { + color:#444; + font-family:"din-light",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; + transition-property:border,background,color; + transition-duration:.05s; + transition-timing-function:ease-in-out +} +a:active, +a:hover { + color:#111; +} +a:focus { + color:#222; + box-shadow: none; +} +p { + line-height:1.5; +} +.login #login_error, +.login .message, +.login .success { + border-left:4px solid #333; + padding:12px; + margin-left:0; + margin-bottom:20px; + background-color:#fff; + box-shadow:none; +} +.login .success { + border-left-color:#69ed82; +} +.login #login_error { + border-left-color:#ff686e; +} +#loginform p.submit, +.login-action-lostpassword p.submit { + border:none; +} +.login * { +} +.login .input::-ms-clear { +} +.login .pw-weak { +} +.login .button.wp-hide-pw { +} +.login .button.wp-hide-pw:hover { +} +.login .button.wp-hide-pw:focus { + border-color:#333; + box-shadow:none; + outline:none; +} +.login .button.wp-hide-pw:active { +} +.login .button.wp-hide-pw .dashicons { +} +.login .wp-pwd { +} +.no-js .hide-if-no-js { +} +.login form { + background:#fff; + border:none; + box-shadow: none; +} +.login form.shake { +} +@keyframes shake { +} +@media (prefers-reduced-motion:reduce) { + .login form.shake { + animation:none; + transform:none + } +} +.login-action-confirm_admin_email #login { +} +@media screen and (max-width:782px) { + .login-action-confirm_admin_email #login { + } +} +.login form .forgetmenot { +} +.login .button-primary { +} +.login .reset-pass-submit { +} +.login .reset-pass-submit .button { +} +.login .admin-email-confirm-form .submit { +} +.admin-email__later { +} +.login form p.admin-email__details { +} +.login h1.admin-email__heading { + border-bottom: none; + color:#333; +} +.admin-email__actions div { +} +.login .admin-email__actions .button-primary { +} +#login form p { +} +#login form p.submit { +} +.login label { +} +.login .forgetmenot label, +.login .pw-weak label { +} +.login h1 { +} +.login h1 a { + background-size:84px; + background-position:center top; + background-repeat:no-repeat; + color:#3c434a; + height:84px; + font-size:20px; + font-weight:400; + line-height:1.3; + margin:0 auto 25px; + padding:0; + text-decoration:none; + width:84px; + text-indent:-9999px; + outline:0; + overflow:hidden; + display:block +} +#login { +} +.login #backtoblog, +.login #nav { +} +.login #nav { +} +#backtoblog { +} +.login #backtoblog a, +.login #nav a { + color:#333; +} +.login #backtoblog a:hover, +.login #nav a:hover, +.login h1 a:hover { + color:#111; +} +.login #backtoblog a:focus, +.login #nav a:focus, +.login h1 a:focus { + color:#222; +} +.login .privacy-policy-page-link { +} +.login form .input, +.login input[type=password], +.login input[type=text] { +} +.login input.password-input { + font-family:Consolas,Monaco,monospace +} +.js.login input.password-input, +.js.login-action-rp form .input, +.js.login-action-rp input[type=text] { +} +.login form .input, +.login form input[type=checkbox], +.login input[type=text] { + background:#fff; +} +.js.login-action-rp input[type=password], +.js.login-action-rp input[type=text] { +} +.login #pass-strength-result { +} +body.interim-login { +} +.interim-login #login { +} +.interim-login.login h1 a { +} +.interim-login #login_error, +.interim-login.login .message { +} +.interim-login.login form { +} +.screen-reader-text, +.screen-reader-text span { +} +input::-ms-reveal { +} +#language-switcher { +} +#language-switcher select { +} +.language-switcher { +} +.language-switcher label { +} +.language-switcher label .dashicons { +} +.login .language-switcher .button-primary { +} +@media screen and (max-height:550px) { + #login { + } + #language-switcher { + } +} +@media screen and (max-width:782px) { + .interim-login input[type=checkbox] { + } + .interim-login input[type=checkbox]:checked:before { + } + #language-switcher label, + #language-switcher select { + } +} +@media screen and (max-width:400px) { + .login .language-switcher .button-primary { + } +} + diff --git a/functions.php b/functions.php index fdb52c3..e33053e 100644 --- a/functions.php +++ b/functions.php @@ -177,3 +177,7 @@ if ( defined( 'JETPACK__VERSION' ) ) { require get_template_directory() . '/inc/jetpack.php'; } +/** + * Functions to personalize login screen + */ +require get_template_directory() . '/inc/login-functions.php'; diff --git a/inc/login-functions.php b/inc/login-functions.php new file mode 100644 index 0000000..86d8817 --- /dev/null +++ b/inc/login-functions.php @@ -0,0 +1,39 @@ + + +