vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-07-01 15:50:09 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Administration: Improve control proximity in theme details modal.

Browse Source 
Make the theme details modals in the Customizer and at Appearance > Themes consistent. Change the order of controls so both modals are in the same sequence, center all controls in both desktop and mobile views, and change delete link color to meet color contrast requirements.

Props trishasalas, afercia, melchoyce, karmatosed, cathibosco1, michaelarestad, joedolson, petitphp, mikinc860.
Fixes #59372. See #59371, #40822.

git-svn-id: https://develop.svn.wordpress.org/trunk@56639 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Joe Dolson
2023-09-20 21:01:02 +00:00
parent e40a1180cb
commit 89b97ba137
5 changed files with 26 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/wp-admin/css/customize-controls.css
View File

@@ -2317,7 +2317,7 @@ p.customize-section-description {
.wp-customizer .theme-overlay .theme-actions {
text-align: right; /* Because there're only one or two actions, match the UI pattern of media modals and right-align the action. */
padding: 10px 25px;
padding: 10px 25px 5px;
background: #f0f0f1;
border-top: 1px solid #dcdcde;
}
@@ -2326,13 +2326,6 @@ p.customize-section-description {
margin-left: 8px;
}
.control-panel-themes .theme-actions .delete-theme {
left: 15px; /* these override themes.css on mobile */
right: auto;
bottom: auto;
position: absolute;
}
.modal-open .in-themes-panel #customize-controls .wp-full-overlay-sidebar-content {
overflow: visible; /* Prevent the top-level Customizer controls from becoming visible when elements on the right of the details modal are focused. */
}

19
src/wp-admin/css/themes.css
View File

@@ -506,10 +506,12 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap {
z-index: 30;
box-sizing: border-box;
border-top: 1px solid #f0f0f1;
display: flex;
justify-content: center;
gap: 5px;
}
.theme-overlay .theme-actions a {
margin-right: 5px;
.theme-overlay .theme-actions .button {
margin-bottom: 5px;
}
@@ -521,26 +523,21 @@ body.folded .theme-browser ~ .theme-overlay .theme-wrap {
.broken-themes a.delete-theme,
.theme-overlay .theme-actions .delete-theme {
color: #d63638;
color: #b32d2e;
text-decoration: none;
border-color: transparent;
box-shadow: none;
background: transparent;
}
.theme-overlay .theme-actions .delete-theme {
position: absolute;
right: 10px;
bottom: 5px;
}
.broken-themes a.delete-theme:hover,
.broken-themes a.delete-theme:focus,
.theme-overlay .theme-actions .delete-theme:hover,
.theme-overlay .theme-actions .delete-theme:focus {
background: #d63638;
background: #b32d2e;
color: #fff;
border-color: #d63638;
border-color: #b32d2e;
box-shadow: 0 0 0 1px #b32d2e;
}
.theme-overlay .theme-actions .active-theme,