Skip to content

CSS Custom Properties: Login #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ryelle merged 6 commits into from
Aug 26, 2021
Merged

CSS Custom Properties: Login #4

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
35165a8
First pass at CSS custom props for wp-login.php
Jul 23, 2021
b934b47
Update src/wp-admin/css/login.css
0aveRyan Jul 30, 2021
046a8f7
swap anchor for link in property name
Aug 12, 2021
ccbc3f8
double-dash parent loc and property loc
Aug 12, 2021
0c59897
Resolve merge conflicts in custom-properties.css
Aug 12, 2021
a4bd1d8
Merge branch 'try/custom-properties' into try/custom-properties-login
ryelle Aug 26, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 23 additions & 23 deletions src/wp-admin/css/login.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,16 @@ body {
}

body {
background: #f0f0f1;
background: var(--wp-admin--page--background, #f0f0f1);
min-width: 0;
color: #3c434a;
color: var(--wp-admin--text--color, #3c434a);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
font-size: 13px;
line-height: 1.4;
}

a {
color: #2271b1;
color: var(--wp-admin--theme--primary, #2271b1);
transition-property: border, background, color;
transition-duration: .05s;
transition-timing-function: ease-in-out;
Expand All @@ -27,14 +27,14 @@ a {

a:hover,
a:active {
color: #135e96;
color: var(--wp-admin--login-anchor--color--hover, #135e96);
}

a:focus {
color: #043959;
color: var(--wp-admin--login-anchor--color--focus, #043959);
box-shadow:
0 0 0 1px #4f94d4,
0 0 2px 1px rgba(79, 148, 212, 0.8);
0 0 0 1px var(--wp-admin--login-anchor--box-shadow-from--focus, #4f94d4),
0 0 2px 1px var(--wp-admin--login-anchor--box-shadow-to--focus, rgba(79, 148, 212, 0.8));
}

p {
Expand All @@ -44,20 +44,20 @@ p {
.login .message,
.login .success,
.login #login_error {
border-left: 4px solid #72aee6;
border-left: 4px solid var(--wp-admin--notice-info--border, #72aee6);
padding: 12px;
margin-left: 0;
margin-bottom: 20px;
background-color: #fff;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 1px 0 var(--wp-admin--login--box-shadow, rgba(0, 0, 0, 0.1));
}

.login .success {
border-left-color: #00a32a;
border-left-color: var(--wp-admin--notice-success--border, #00a32a);
}

.login #login_error {
border-left-color: #d63638;
border-left-color: var(--wp-admin--notice-error--border, #d63638);
}

#loginform p.submit,
Expand Down Expand Up @@ -102,8 +102,8 @@ p {

.login .button.wp-hide-pw:focus {
background: transparent;
border-color: #3582c4;
box-shadow: 0 0 0 1px #3582c4;
border-color: var(--wp-admin--login-button--border-color, #3582c4);
box-shadow: 0 0 0 1px var(--wp-admin--login-form--box-shadow,#3582c4);
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
}
Expand Down Expand Up @@ -134,9 +134,9 @@ p {
padding: 26px 24px 34px;
font-weight: 400;
overflow: hidden;
background: #fff;
border: 1px solid #c3c4c7;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
background: var(--wp-admin--surface--background, #fff);
border: 1px solid var(--wp-admin--surface--border, #c3c4c7);
box-shadow: 0 1px 3px var(--wp-admin--login-form--box-shadow, rgba(0, 0, 0, 0.04));
}

.login form.shake {
Expand Down Expand Up @@ -215,8 +215,8 @@ p {
}

.login h1.admin-email__heading {
border-bottom: 1px #f0f0f1 solid;
color: #50575e;
border-bottom: 1px var(--wp-admin--surface--border-alternate, #f0f0f1) solid;
color: var(--wp-admin--heading-secondary--color, #50575e);
font-weight: normal;
padding-bottom: 0.5em;
text-align: left;
Expand Down Expand Up @@ -264,7 +264,7 @@ p {
background-size: 84px;
background-position: center top;
background-repeat: no-repeat;
color: #3c434a;
color: var(--wp-admin--text--color, #3c434a);
height: 84px;
font-size: 20px;
font-weight: 400;
Expand Down Expand Up @@ -303,19 +303,19 @@ p {
.login #nav a,
.login #backtoblog a {
text-decoration: none;
color: #50575e;
color: var(--wp-admin--heading-secondary--color, #50575e);
}

.login #nav a:hover,
.login #backtoblog a:hover,
.login h1 a:hover {
color: #135e96;
color: var(--wp-admin--login-anchor--color--hover, #135e96);
}

.login #nav a:focus,
.login #backtoblog a:focus,
.login h1 a:focus {
color: #043959;
color: var(--wp-admin--login-anchor--color--focus, #043959);
}

.login .privacy-policy-page-link {
Expand Down Expand Up @@ -350,7 +350,7 @@ p {
.login form .input,
.login input[type="text"],
.login form input[type="checkbox"] {
background: #fff;
background: var(--wp-admin--surface--background, #fff);
}

.js.login-action-rp input[type="text"],
Expand Down
9 changes: 9 additions & 0 deletions src/wp-includes/css/custom-properties.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,15 @@ body {
--wp-admin--slider-handle--color--hover: #1d2327;

--wp-admin--site-icon--background-color: #000;

--wp-admin--login--link--color--hover: #135e96;
--wp-admin--login--link--color--focus: #043959;
--wp-admin--login--link--box-shadow-from--focus: #4f94d4;
--wp-admin--login--link--box-shadow-to--focus: rgba(79, 148, 212, 0.8);
--wp-admin--login--box-shadow: rgba(0, 0, 0, 0.1);
--wp-admin--login--button--border-color: #3582c4;
--wp-admin--login--button--box-shadow: var(--wp-admin--login-button--border-color);
--wp-admin--login--form--box-shadow: rgba(0, 0, 0, 0.04);
}

body.admin-color-ectoplasm {
Expand Down
2 changes: 1 addition & 1 deletion src/wp-includes/script-loader.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1454,7 +1454,7 @@ function wp_default_styles( $styles ) {

$styles->add( 'wp-admin', false, array( 'dashicons', 'common', 'forms', 'admin-menu', 'dashboard', 'list-tables', 'edit', 'revisions', 'media', 'themes', 'about', 'nav-menus', 'widgets', 'site-icon', 'l10n' ) );

$styles->add( 'login', "/wp-admin/css/login$suffix.css", array( 'dashicons', 'buttons', 'forms', 'l10n' ) );
$styles->add( 'login', "/wp-admin/css/login$suffix.css", array( 'dashicons', 'buttons', 'forms', 'l10n', 'colors' ) );
$styles->add( 'install', "/wp-admin/css/install$suffix.css", array( 'dashicons', 'buttons', 'forms', 'l10n' ) );
$styles->add( 'wp-color-picker', "/wp-admin/css/color-picker$suffix.css" );
$styles->add( 'customize-controls', "/wp-admin/css/customize-controls$suffix.css", array( 'wp-admin', 'colors', 'imgareaselect' ) );
Expand Down