Better visual focus syling in customizer, theme preview, and attachment details modals.

props celloexpressions.
fixes #29147.

Built from https://develop.svn.wordpress.org/trunk@29608


git-svn-id: http://core.svn.wordpress.org/trunk@29382 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Helen Hou-Sandí 2014-08-25 21:58:17 +00:00
parent 13a49fc018
commit 92ee5b230c
10 changed files with 66 additions and 22 deletions

View File

@ -232,7 +232,9 @@ body {
.customize-controls-close:hover, .customize-controls-close:hover,
.control-panel-back:focus, .control-panel-back:focus,
.control-panel-back:hover { .control-panel-back:hover {
color: #2ea2cc; background: #ddd;
border-color: #ccc;
color: #000;
outline: none; outline: none;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
@ -243,7 +245,7 @@ body {
content: "\f335"; content: "\f335";
position: relative; position: relative;
top: 7px; top: 7px;
right: 12px; right: 13px;
} }
.control-panel-back:before { .control-panel-back:before {

File diff suppressed because one or more lines are too long

View File

@ -232,7 +232,9 @@ body {
.customize-controls-close:hover, .customize-controls-close:hover,
.control-panel-back:focus, .control-panel-back:focus,
.control-panel-back:hover { .control-panel-back:hover {
color: #2ea2cc; background: #ddd;
border-color: #ccc;
color: #000;
outline: none; outline: none;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
@ -243,7 +245,7 @@ body {
content: "\f335"; content: "\f335";
position: relative; position: relative;
top: 7px; top: 7px;
left: 12px; left: 13px;
} }
.control-panel-back:before { .control-panel-back:before {

File diff suppressed because one or more lines are too long

View File

@ -708,11 +708,20 @@ border color while dragging a file over the uploader drop area */
font-weight: 300; font-weight: 300;
} }
.upload-php .media-modal-close:hover,
.upload-php .media-modal-close:focus,
.edit-attachment-frame .edit-media-header .left:hover, .edit-attachment-frame .edit-media-header .left:hover,
.edit-attachment-frame .edit-media-header .right:hover, .edit-attachment-frame .edit-media-header .right:hover,
.edit-attachment-frame .edit-media-header .left:focus, .edit-attachment-frame .edit-media-header .left:focus,
.edit-attachment-frame .edit-media-header .right:focus { .edit-attachment-frame .edit-media-header .right:focus {
color: #2ea2cc; background: #ddd;
border-color: #ccc;
color: #000;
}
.upload-php .media-modal-close:focus .media-modal-icon:before,
.upload-php .media-modal-close:hover .media-modal-icon:before {
color: #000;
} }
.edit-attachment-frame .edit-media-header .left:before, .edit-attachment-frame .edit-media-header .left:before,
@ -732,6 +741,7 @@ border color while dragging a file over the uploader drop area */
color: #ccc; color: #ccc;
background: inherit; background: inherit;
cursor: default; cursor: default;
pointer-events: none;
} }
.edit-attachment-frame .media-frame-content, .edit-attachment-frame .media-frame-content,

View File

@ -708,11 +708,20 @@ border color while dragging a file over the uploader drop area */
font-weight: 300; font-weight: 300;
} }
.upload-php .media-modal-close:hover,
.upload-php .media-modal-close:focus,
.edit-attachment-frame .edit-media-header .left:hover, .edit-attachment-frame .edit-media-header .left:hover,
.edit-attachment-frame .edit-media-header .right:hover, .edit-attachment-frame .edit-media-header .right:hover,
.edit-attachment-frame .edit-media-header .left:focus, .edit-attachment-frame .edit-media-header .left:focus,
.edit-attachment-frame .edit-media-header .right:focus { .edit-attachment-frame .edit-media-header .right:focus {
color: #2ea2cc; background: #ddd;
border-color: #ccc;
color: #000;
}
.upload-php .media-modal-close:focus .media-modal-icon:before,
.upload-php .media-modal-close:hover .media-modal-icon:before {
color: #000;
} }
.edit-attachment-frame .edit-media-header .left:before, .edit-attachment-frame .edit-media-header .left:before,
@ -732,6 +741,7 @@ border color while dragging a file over the uploader drop area */
color: #ccc; color: #ccc;
background: inherit; background: inherit;
cursor: default; cursor: default;
pointer-events: none;
} }
.edit-attachment-frame .media-frame-content, .edit-attachment-frame .media-frame-content,

View File

@ -455,18 +455,25 @@
transition: color .1s ease-in-out, background .1s ease-in-out; transition: color .1s ease-in-out, background .1s ease-in-out;
} }
.theme-overlay .theme-header .close:focus,
.theme-overlay .theme-header .close:hover, .theme-overlay .theme-header .close:hover,
.theme-overlay .theme-header .close:hover:before, .theme-overlay .theme-header .right:focus,
.theme-overlay .theme-header .close:focus:before,
.theme-overlay .theme-header .right:hover, .theme-overlay .theme-header .right:hover,
.theme-overlay .theme-header .left:focus,
.theme-overlay .theme-header .left:hover { .theme-overlay .theme-header .left:hover {
color: #2ea2cc; background: #ddd;
border-color: #ccc;
color: #000;
}
.theme-overlay .theme-header .close:focus:before,
.theme-overlay .theme-header .close:hover:before {
color: #000;
} }
.theme-overlay .theme-header .close:focus, .theme-overlay .theme-header .close:focus,
.theme-overlay .theme-header .right:focus, .theme-overlay .theme-header .right:focus,
.theme-overlay .theme-header .left:focus { .theme-overlay .theme-header .left:focus {
color: #2ea2cc;
-webkit-box-shadow: -webkit-box-shadow:
0 0 0 1px #5b9dd9, 0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, .8); 0 0 2px 1px rgba(30, 140, 190, .8);
@ -1398,7 +1405,9 @@ body.full-overlay-active {
.theme-install-overlay .previous-theme:focus, .theme-install-overlay .previous-theme:focus,
.theme-install-overlay .next-theme:hover, .theme-install-overlay .next-theme:hover,
.theme-install-overlay .next-theme:focus { .theme-install-overlay .next-theme:focus {
color: #2ea2cc; background: #ddd;
border-color: #ccc;
color: #000;
outline: none; outline: none;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
@ -1409,7 +1418,7 @@ body.full-overlay-active {
content: "\f335"; content: "\f335";
position: relative; position: relative;
top: 7px; top: 7px;
right: 12px; right: 13px;
} }
.theme-install-overlay .previous-theme:before { .theme-install-overlay .previous-theme:before {
@ -1437,6 +1446,7 @@ body.full-overlay-active {
color: #bbb; color: #bbb;
background: #eee; background: #eee;
cursor: default; cursor: default;
pointer-events: none;
} }
.rtl .theme-install-overlay .previous-theme:before { .rtl .theme-install-overlay .previous-theme:before {

View File

@ -455,18 +455,25 @@
transition: color .1s ease-in-out, background .1s ease-in-out; transition: color .1s ease-in-out, background .1s ease-in-out;
} }
.theme-overlay .theme-header .close:focus,
.theme-overlay .theme-header .close:hover, .theme-overlay .theme-header .close:hover,
.theme-overlay .theme-header .close:hover:before, .theme-overlay .theme-header .right:focus,
.theme-overlay .theme-header .close:focus:before,
.theme-overlay .theme-header .right:hover, .theme-overlay .theme-header .right:hover,
.theme-overlay .theme-header .left:focus,
.theme-overlay .theme-header .left:hover { .theme-overlay .theme-header .left:hover {
color: #2ea2cc; background: #ddd;
border-color: #ccc;
color: #000;
}
.theme-overlay .theme-header .close:focus:before,
.theme-overlay .theme-header .close:hover:before {
color: #000;
} }
.theme-overlay .theme-header .close:focus, .theme-overlay .theme-header .close:focus,
.theme-overlay .theme-header .right:focus, .theme-overlay .theme-header .right:focus,
.theme-overlay .theme-header .left:focus { .theme-overlay .theme-header .left:focus {
color: #2ea2cc;
-webkit-box-shadow: -webkit-box-shadow:
0 0 0 1px #5b9dd9, 0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, .8); 0 0 2px 1px rgba(30, 140, 190, .8);
@ -1398,7 +1405,9 @@ body.full-overlay-active {
.theme-install-overlay .previous-theme:focus, .theme-install-overlay .previous-theme:focus,
.theme-install-overlay .next-theme:hover, .theme-install-overlay .next-theme:hover,
.theme-install-overlay .next-theme:focus { .theme-install-overlay .next-theme:focus {
color: #2ea2cc; background: #ddd;
border-color: #ccc;
color: #000;
outline: none; outline: none;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
@ -1409,7 +1418,7 @@ body.full-overlay-active {
content: "\f335"; content: "\f335";
position: relative; position: relative;
top: 7px; top: 7px;
left: 12px; left: 13px;
} }
.theme-install-overlay .previous-theme:before { .theme-install-overlay .previous-theme:before {
@ -1437,6 +1446,7 @@ body.full-overlay-active {
color: #bbb; color: #bbb;
background: #eee; background: #eee;
cursor: default; cursor: default;
pointer-events: none;
} }
.rtl .theme-install-overlay .previous-theme:before { .rtl .theme-install-overlay .previous-theme:before {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long