TinyMCE: fix styles, add 2x background icons and load buttons.css in the Edit Image modal, remove wp-view styles from content.css, add 2x icons for the popup buttons (for editing image and gallery), fixes #22447, see #21019
git-svn-id: http://core.svn.wordpress.org/trunk@22586 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
parent
29abff2525
commit
dc43ad3ac8
|
@ -5,25 +5,10 @@ html, body {
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
.submit input,
|
||||
.button,
|
||||
.button-primary,
|
||||
.button-secondary,
|
||||
.button-highlighted {
|
||||
font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, sans-serif;
|
||||
text-decoration: none;
|
||||
font-size: 11px !important;
|
||||
line-height: 16px;
|
||||
padding: 2px 8px;
|
||||
cursor: pointer;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
-webkit-border-radius: 11px;
|
||||
border-radius: 11px;
|
||||
-moz-box-sizing: content-box;
|
||||
-webkit-box-sizing: content-box;
|
||||
-khtml-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
font-size: 12px;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
|
||||
a.button {
|
||||
|
@ -33,7 +18,7 @@ a.button {
|
|||
textarea,
|
||||
input,
|
||||
select {
|
||||
font: 13px Verdana, Arial, Helvetica, sans-serif;
|
||||
font: inherit;
|
||||
margin: 1px;
|
||||
padding: 3px;
|
||||
}
|
||||
|
@ -44,10 +29,6 @@ p.help {
|
|||
font-style: italic;
|
||||
}
|
||||
|
||||
body, td {
|
||||
font: 13px "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
abbr.required {
|
||||
color: #FF0000;
|
||||
text-align: left;
|
||||
|
@ -311,6 +292,7 @@ form {
|
|||
padding: 0 0 0 28px;
|
||||
margin: 0 1em 0 0;
|
||||
}
|
||||
|
||||
.image-align-none-label {
|
||||
background: url(../../../../../../wp-admin/images/align-none.png) no-repeat center left;
|
||||
}
|
||||
|
@ -429,3 +411,25 @@ body#media-upload.rtl ul#sidemenu {
|
|||
.rtl #img_size_title {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
|
||||
.image-align-none-label {
|
||||
background: url(../../../../../../wp-admin/images/align-none-2x.png) no-repeat center left;
|
||||
background-size: auto 15px;
|
||||
}
|
||||
|
||||
.image-align-left-label {
|
||||
background: url(../../../../../../wp-admin/images/align-left-2x.png) no-repeat center left;
|
||||
background-size: auto 15px;
|
||||
}
|
||||
|
||||
.image-align-center-label {
|
||||
background: url(../../../../../../wp-admin/images/align-center-2x.png) no-repeat center left;
|
||||
background-size: auto 15px;
|
||||
}
|
||||
|
||||
.image-align-right-label {
|
||||
background: url(../../../../../../wp-admin/images/align-right-2x.png) no-repeat center left;
|
||||
background-size: auto 15px;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -5,6 +5,7 @@
|
|||
<title></title>
|
||||
|
||||
<link rel="stylesheet" href="css/editimage.css?ver=357-20121111" type="text/css" media="all" />
|
||||
<link rel="stylesheet" href="../../../../css/buttons.css?ver=357-20121111" type="text/css" media="all" />
|
||||
<script type="text/javascript" src="js/editimage.min.js?ver=357-20121111"></script>
|
||||
<script type="text/javascript" src="../../utils/form_utils.js?ver=357-20121111"></script>
|
||||
<base target="_self" />
|
||||
|
|
|
@ -199,7 +199,10 @@
|
|||
},
|
||||
|
||||
_createButtons : function() {
|
||||
var t = this, ed = tinyMCE.activeEditor, DOM = tinymce.DOM, editButton, dellButton;
|
||||
var t = this, ed = tinyMCE.activeEditor, DOM = tinymce.DOM, editButton, dellButton, isRetina;
|
||||
|
||||
isRetina = ( window.devicePixelRatio && window.devicePixelRatio > 1 ) || // WebKit, Opera
|
||||
( window.matchMedia && window.matchMedia('(min-resolution:130dpi)').matches ); // Firefox, IE10, Opera
|
||||
|
||||
DOM.remove('wp_editbtns');
|
||||
|
||||
|
@ -209,7 +212,7 @@
|
|||
});
|
||||
|
||||
editButton = DOM.add('wp_editbtns', 'img', {
|
||||
src : t.url+'/img/image.png',
|
||||
src : isRetina ? t.url+'/img/image-2x.png' : t.url+'/img/image.png',
|
||||
id : 'wp_editimgbtn',
|
||||
width : '24',
|
||||
height : '24',
|
||||
|
@ -221,7 +224,7 @@
|
|||
});
|
||||
|
||||
dellButton = DOM.add('wp_editbtns', 'img', {
|
||||
src : t.url+'/img/delete.png',
|
||||
src : isRetina ? t.url+'/img/delete-2x.png' : t.url+'/img/delete.png',
|
||||
id : 'wp_delimgbtn',
|
||||
width : '24',
|
||||
height : '24',
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
After Width: | Height: | Size: 2.6 KiB |
|
@ -69,7 +69,10 @@
|
|||
},
|
||||
|
||||
_createButtons : function() {
|
||||
var t = this, ed = tinyMCE.activeEditor, DOM = tinymce.DOM, editButton, dellButton;
|
||||
var t = this, ed = tinyMCE.activeEditor, DOM = tinymce.DOM, editButton, dellButton, isRetina;
|
||||
|
||||
isRetina = ( window.devicePixelRatio && window.devicePixelRatio > 1 ) || // WebKit, Opera
|
||||
( window.matchMedia && window.matchMedia('(min-resolution:130dpi)').matches ); // Firefox, IE10, Opera
|
||||
|
||||
DOM.remove('wp_gallerybtns');
|
||||
|
||||
|
@ -79,7 +82,7 @@
|
|||
});
|
||||
|
||||
editButton = DOM.add('wp_gallerybtns', 'img', {
|
||||
src : t.url+'/img/edit.png',
|
||||
src : isRetina ? t.url+'/img/edit-2x.png' : t.url+'/img/edit.png',
|
||||
id : 'wp_editgallery',
|
||||
width : '24',
|
||||
height : '24',
|
||||
|
@ -93,7 +96,7 @@
|
|||
});
|
||||
|
||||
dellButton = DOM.add('wp_gallerybtns', 'img', {
|
||||
src : t.url+'/img/delete.png',
|
||||
src : isRetina ? t.url+'/img/delete-2x.png' : t.url+'/img/delete.png',
|
||||
id : 'wp_delgallery',
|
||||
width : '24',
|
||||
height : '24',
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
After Width: | Height: | Size: 4.8 KiB |
|
@ -140,165 +140,3 @@ img.wp-oembed {
|
|||
width: 300px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
/* WordPress TinyMCE Previews */
|
||||
.wp-view-wrap {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.wp-view-wrap * {
|
||||
font-family: sans-serif;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.wp-view-wrap img {
|
||||
display: block;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.wp-view-wrap.alignnone {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wp-view-wrap.aligncenter {
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wp-view-wrap.alignleft {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.wp-view-wrap.alignright {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.wp-view-wrap .overlay {
|
||||
opacity: 0;
|
||||
display: block;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
box-shadow: inset 0 0 45px rgba( 0, 0, 0, 0.3 );
|
||||
/*box-shadow:
|
||||
inset 0 60px 30px -30px rgba( 0, 0, 0, 0.2 ),
|
||||
inset 0 -60px 30px -30px rgba( 0, 0, 0, 0.2 );*/
|
||||
overflow: hidden;
|
||||
|
||||
-webkit-transition: opacity 100ms ease-in-out, background 150ms;
|
||||
-moz-transition: opacity 100ms ease-in-out, background 150ms;
|
||||
-ms-transition: opacity 100ms ease-in-out, background 150ms;
|
||||
-o-transition: opacity 100ms ease-in-out, background 150ms;
|
||||
transition: opacity 100ms ease-in-out, background 150ms;
|
||||
}
|
||||
|
||||
.wp-view-wrap:hover .overlay,
|
||||
.wp-view-wrap.selected .overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
.wp-view-wrap.selected .overlay {
|
||||
background: rgba( 0, 86, 132, 0.3 );
|
||||
}
|
||||
|
||||
.wp-view-wrap .spinner {
|
||||
background: #fff url("../../../../../../../wp-admin/images/wpspin_light.gif") no-repeat center center;
|
||||
}
|
||||
|
||||
.wp-view-wrap .button {
|
||||
position: absolute;
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
color: #464646;
|
||||
|
||||
background: #f3f3f3;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#f4f4f4));
|
||||
background-image: -webkit-linear-gradient(top, #fefefe, #f4f4f4);
|
||||
background-image: -moz-linear-gradient(top, #fefefe, #f4f4f4);
|
||||
background-image: -ms-linear-gradient(top, #fefefe, #f4f4f4);
|
||||
background-image: -o-linear-gradient(top, #fefefe, #f4f4f4);
|
||||
background-image: linear-gradient(to bottom, #fefefe, #f4f4f4);
|
||||
|
||||
box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.2 );
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.wp-view-wrap .button:hover {
|
||||
box-shadow:
|
||||
0 0 0 1px rgba( 0, 0, 0, 0.6 ),
|
||||
0 0 10px rgba( 255, 255, 255, 0.4 );
|
||||
background: #fff;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f3f3f3));
|
||||
background-image: -webkit-linear-gradient(top, #fff, #f3f3f3);
|
||||
background-image: -moz-linear-gradient(top, #fff, #f3f3f3);
|
||||
background-image: -ms-linear-gradient(top, #fff, #f3f3f3);
|
||||
background-image: -o-linear-gradient(top, #fff, #f3f3f3);
|
||||
background-image: linear-gradient(to bottom, #fff, #f3f3f3);
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.wp-view-wrap .close {
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
width: 22px;
|
||||
font-size: 22px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.wp-view-wrap .edit {
|
||||
bottom: 5px;
|
||||
right: 5px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.editor-attachment {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
margin-top: 10px;
|
||||
margin-right: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.editor-attachment,
|
||||
.editor-attachment img {
|
||||
min-height: 100px;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.editor-attachment img,
|
||||
.editor-attachment .overlay {
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
.editor-attachment-preview {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.wp-view-type-gallery {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.editor-gallery {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
min-height: 150px;
|
||||
min-width: 150px;
|
||||
margin: 5px 15px 15px 5px;
|
||||
box-shadow:
|
||||
0 0 0 4px #fff,
|
||||
0 0 0 5px #ccc,
|
||||
5px 5px 0 4px #fff,
|
||||
5px 5px 0 5px #ccc,
|
||||
10px 10px 0 4px #fff,
|
||||
10px 10px 0 5px #ccc;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue