sergiotarxz
/
Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Align and unify (most) modal and customizer icons. fixes #29147. 

git-svn-id: https://develop.svn.wordpress.org/trunk@29542 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Helen Hou-Sandi 2014-08-19 20:37:46 +00:00
parent 197b2c6cdc
commit 9eaf6cda94
4 changed files with 77 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/wp-admin/css/colors/_admin.scss
View File

@ -400,7 +400,13 @@ ul#adminmenu > li.current > a.current:after {
} }
/* Media Uploader */ /* Media */
.media-modal-close:hover .media-modal-icon:before,
.edit-attachment-frame .edit-media-header .right:hover,
.edit-attachment-frame .edit-media-header .left:hover {
color: $link-focus;
}
.media-item .bar, .media-item .bar,
.media-progress-bar div { .media-progress-bar div {
@ -431,7 +437,7 @@ ul#adminmenu > li.current > a.current:after {
.theme-overlay .theme-header .close:hover, .theme-overlay .theme-header .close:hover,
.theme-overlay .theme-header .right:hover, .theme-overlay .theme-header .right:hover,
.theme-overlay .theme-header .left:hover { .theme-overlay .theme-header .left:hover {
background: $highlight-color; color: $link-focus;
} }
.theme-section.current, .theme-section.current,
@ -465,8 +471,7 @@ body.more-filters-opened .more-filters:focus:before {
.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 {
background-color: $menu-highlight-background; color: $link-focus;
color: $menu-highlight-text;
} }
/* Widgets */ /* Widgets */
@ -492,8 +497,7 @@ body.more-filters-opened .more-filters:focus:before {
.customize-controls-close:hover, .customize-controls-close:hover,
.control-panel-back:focus, .control-panel-back:focus,
.control-panel-back:hover { .control-panel-back:hover {
background-color: $menu-highlight-background; color: $link-focus;
color: $menu-highlight-text;
} }
/* jQuery UI Slider */ /* jQuery UI Slider */

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

@ -232,27 +232,26 @@ 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 {
background-color: #0074a2; color: #2ea2cc;
color: #fff;
outline: none; outline: none;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
.customize-controls-close:before { .customize-controls-close:before {
font: normal 32px/1 dashicons; font: normal 22px/1 dashicons;
content: "\f335"; content: "\f335";
position: relative; position: relative;
top: 8px; top: 7px;
left: 8px; left: 12px;
} }
.control-panel-back:before { .control-panel-back:before {
font: normal 29px/1 dashicons; font: normal 20px/1 dashicons;
content: "\f340"; content: "\f341";
position: relative; position: relative;
top: 9px; top: 13px;
left: 9px; left: 13px;
} }
.rtl .control-panel-back:before { .rtl .control-panel-back:before {

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

@ -431,13 +431,8 @@
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:hover:before,
.theme-overlay .theme-header .close:focus:before {
color: #fff;
}
.theme-overlay .theme-header .close:before { .theme-overlay .theme-header .close:before {
font: normal 30px/50px 'dashicons' !important; font: normal 22px/50px 'dashicons' !important;
color: #777; color: #777;
display: inline-block; display: inline-block;
content: '\f335'; content: '\f335';
@ -461,16 +456,23 @@
} }
.theme-overlay .theme-header .close:hover, .theme-overlay .theme-header .close:hover,
.theme-overlay .theme-header .close:hover:before,
.theme-overlay .theme-header .close:focus:before,
.theme-overlay .theme-header .right:hover, .theme-overlay .theme-header .right:hover,
.theme-overlay .theme-header .left:hover, .theme-overlay .theme-header .left:hover {
color: #2ea2cc;
}
.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 {
background: #0074a2; color: #2ea2cc;
color: #fff; -webkit-box-shadow:
outline: none; 0 0 0 1px #5b9dd9,
-webkit-box-shadow: none; 0 0 2px 1px rgba(30, 140, 190, .8);
box-shadow: none; box-shadow:
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, .8);
} }
.theme-overlay .theme-header .left.disabled, .theme-overlay .theme-header .left.disabled,
@ -489,21 +491,17 @@
font-weight: 300; font-weight: 300;
} }
.theme-overlay .theme-header .left:before { .theme-overlay .theme-header .left:before,
content: '\f340'; .rtl .theme-overlay .theme-header .right:before {
} content: '\f341';
.theme-overlay .theme-header .right:before {
content: '\f344';
} }
.theme-overlay .theme-header .right:before,
.rtl .theme-overlay .theme-header .left:before { .rtl .theme-overlay .theme-header .left:before {
content: '\f345'; content: '\f345';
} }
.rtl .theme-overlay .theme-header .right:before {
content: '\f341';
}
.theme-overlay .theme-wrap { .theme-overlay .theme-wrap {
clear: both; clear: both;
@ -1400,24 +1398,23 @@ 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 {
background-color: #0074a2; color: #2ea2cc;
color: #fff;
outline: none; outline: none;
-webkit-box-shadow: none; -webkit-box-shadow: none;
box-shadow: none; box-shadow: none;
} }
.theme-install-overlay .close-full-overlay:before { .theme-install-overlay .close-full-overlay:before {
font: normal 30px/1 dashicons; font: normal 22px/1 dashicons;
content: "\f335"; content: "\f335";
position: relative; position: relative;
top: 9px; top: 7px;
left: 9px; left: 12px;
} }
.theme-install-overlay .previous-theme:before { .theme-install-overlay .previous-theme:before {
font: normal 20px/1 dashicons; font: normal 20px/1 dashicons;
content: "\f340"; content: "\f341";
position: relative; position: relative;
top: 6px; top: 6px;
left: 14px; left: 14px;
@ -1425,7 +1422,7 @@ body.full-overlay-active {
.theme-install-overlay .next-theme:before { .theme-install-overlay .next-theme:before {
font: normal 20px/1 dashicons; font: normal 20px/1 dashicons;
content: "\f344"; content: "\f345";
position: relative; position: relative;
top: 6px; top: 6px;
left: 13px; left: 13px;
@ -1443,11 +1440,11 @@ body.full-overlay-active {
} }
.rtl .theme-install-overlay .previous-theme:before { .rtl .theme-install-overlay .previous-theme:before {
content: "\f344"; content: "\f345";
} }
.rtl .theme-install-overlay .next-theme:before { .rtl .theme-install-overlay .next-theme:before {
content: "\f340"; content: "\f341";
} }
/* Collapse Button */ /* Collapse Button */

73
src/wp-includes/css/media-views.css
View File

@ -140,7 +140,7 @@
.media-modal-close { .media-modal-close {
position: absolute; position: absolute;
text-decoration: none; text-decoration: none;
top: 5px; top: 10px;
right: 10px; right: 10px;
width: 30px; width: 30px;
height: 30px; height: 30px;
@ -149,12 +149,17 @@
transition: color .1s ease-in-out, background .1s ease-in-out; transition: color .1s ease-in-out, background .1s ease-in-out;
} }
.media-modal-close:active {
box-shadow: none;
}
.media-modal-close span.media-modal-icon { .media-modal-close span.media-modal-icon {
display: block; display: block;
margin: 8px auto 0; margin-top: 5px;
width: 15px; width: 30px;
height: 15px; height: 15px;
background-image: none; background-image: none;
text-align: center;
} }
.media-modal-close .media-modal-icon:before { .media-modal-close .media-modal-icon:before {
@ -494,7 +499,7 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
margin: 0; margin: 0;
padding: 16px 0; padding: 10px 0;
background: #f3f3f3; background: #f3f3f3;
border-right-width: 1px; border-right-width: 1px;
border-right-style: solid; border-right-style: solid;
@ -619,13 +624,13 @@
top: 0; top: 0;
left: 200px; left: 200px;
right: 0; right: 0;
height: 56px; height: 50px;
z-index: 200; z-index: 200;
} }
.media-frame-router { .media-frame-router {
position: absolute; position: absolute;
top: 56px; top: 50px;
left: 200px; left: 200px;
right: 0; right: 0;
height: 36px; height: 36px;
@ -634,7 +639,7 @@
.media-frame-content { .media-frame-content {
position: absolute; position: absolute;
top: 90px; top: 84px;
left: 200px; left: 200px;
right: 0; right: 0;
bottom: 61px; bottom: 61px;
@ -676,7 +681,7 @@
} }
.media-frame.hide-router .media-frame-content { .media-frame.hide-router .media-frame-content {
top: 56px; top: 50px;
} }
.media-frame.hide-router .media-frame-router { .media-frame.hide-router .media-frame-router {
@ -696,7 +701,7 @@
.media-frame-title h1 { .media-frame-title h1 {
padding: 0 16px; padding: 0 16px;
font-size: 22px; font-size: 22px;
line-height: 60px; line-height: 50px;
margin: 0; margin: 0;
} }
@ -2287,7 +2292,7 @@
.media-frame .media-frame-title .dashicons { .media-frame .media-frame-title .dashicons {
display: inline-block; display: inline-block;
line-height: 56px; line-height: 50px;
} }
.media-frame .media-frame-title h1 { .media-frame .media-frame-title h1 {
@ -2717,18 +2722,12 @@
.upload-php .media-modal-close .media-modal-icon:before { .upload-php .media-modal-close .media-modal-icon:before {
content: '\f335'; content: '\f335';
font-size: 30px; font-size: 22px;
}
.upload-php .media-modal-close:hover .media-modal-icon:before,
.upload-php .media-modal-close:focus .media-modal-icon:before {
color: #fff;
} }
.upload-php .media-modal-close .media-modal-icon { .upload-php .media-modal-close .media-modal-icon {
margin-top: 13px; margin: 14px;
width: 30px; width: 22px;
height: 30px;
} }
.upload-php .media-modal-close, .upload-php .media-modal-close,
@ -2737,8 +2736,8 @@
cursor: pointer; cursor: pointer;
color: #777; color: #777;
background-color: transparent; background-color: transparent;
height: 56px; height: 50px;
width: 56px; width: 50px;
padding: 0; padding: 0;
position: absolute; position: absolute;
text-align: center; text-align: center;
@ -2754,16 +2753,16 @@
} }
.edit-attachment-frame .edit-media-header .left { .edit-attachment-frame .edit-media-header .left {
right: 112px; right: 102px;
} }
.edit-attachment-frame .edit-media-header .right { .edit-attachment-frame .edit-media-header .right {
right: 56px; right: 51px;
} }
.edit-attachment-frame .media-frame-title { .edit-attachment-frame .media-frame-title {
left: 0; left: 0;
right: 170px; /* leave space for prev/next/close */ right: 150px; /* leave space for prev/next/close */
} }
.edit-attachment-frame .edit-media-header .right:before, .edit-attachment-frame .edit-media-header .right:before,
@ -2773,14 +2772,19 @@
font-weight: 300; font-weight: 300;
} }
.edit-attachment-frame .edit-media-header .right:hover,
.edit-attachment-frame .edit-media-header .left:hover {
color: #2ea2cc;
}
.edit-attachment-frame .edit-media-header .left:before, .edit-attachment-frame .edit-media-header .left:before,
.rtl .edit-attachment-frame .edit-media-header .right:before { .rtl .edit-attachment-frame .edit-media-header .right:before {
content: '\f340'; content: '\f341';
} }
.edit-attachment-frame .edit-media-header .right:before, .edit-attachment-frame .edit-media-header .right:before,
.rtl .edit-attachment-frame .edit-media-header .left:before { .rtl .edit-attachment-frame .edit-media-header .left:before {
content: '\f344'; content: '\f345';
} }
.edit-attachment-frame .edit-media-header .left.disabled, .edit-attachment-frame .edit-media-header .left.disabled,
@ -2789,20 +2793,7 @@
.edit-attachment-frame .edit-media-header .right.disabled:hover { .edit-attachment-frame .edit-media-header .right.disabled:hover {
color: #ccc; color: #ccc;
background: inherit; background: inherit;
cursor: inherit; cursor: default;
}
.upload-php .media-modal-close:hover,
.edit-attachment-frame .edit-media-header .right:hover,
.edit-attachment-frame .edit-media-header .left:hover,
.upload-php .media-modal-close:focus,
.edit-attachment-frame .edit-media-header .right:focus,
.edit-attachment-frame .edit-media-header .left:focus {
background: #0074a2;
color: #fff;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
} }
.edit-attachment-frame .media-frame-content, .edit-attachment-frame .media-frame-content,
@ -2813,7 +2804,7 @@
.edit-attachment-frame .media-frame-content { .edit-attachment-frame .media-frame-content {
border-bottom: none; border-bottom: none;
bottom: 0; bottom: 0;
top: 56px; top: 50px;
} }
.edit-attachment-frame .attachment-details { .edit-attachment-frame .attachment-details {