<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[27190] trunk/src/wp-includes: TinyMCE: style the modals to match WordPress admin (first-run).</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://core.trac.wordpress.org/changeset/27190">27190</a></dd>
<dt>Author</dt> <dd>azaozz</dd>
<dt>Date</dt> <dd>2014-02-18 06:31:30 +0000 (Tue, 18 Feb 2014)</dd>
</dl>
<h3>Log Message</h3>
<pre>TinyMCE: style the modals to match WordPress admin (first-run). Fix couple of IE problems in tiny_mce_popup.js. Props avryl, see <a href="http://core.trac.wordpress.org/ticket/26952">#26952</a>, see <a href="http://core.trac.wordpress.org/ticket/24067">#24067</a></pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpincludescsseditorcss">trunk/src/wp-includes/css/editor.css</a></li>
<li><a href="#trunksrcwpincludesjstinymcepluginswordpresspluginjs">trunk/src/wp-includes/js/tinymce/plugins/wordpress/plugin.js</a></li>
<li><a href="#trunksrcwpincludesjstinymcetiny_mce_popupjs">trunk/src/wp-includes/js/tinymce/tiny_mce_popup.js</a></li>
<li><a href="#trunksrcwpincludesjstinymcewpmcehelpphp">trunk/src/wp-includes/js/tinymce/wp-mce-help.php</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpincludescsseditorcss"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-includes/css/editor.css (27189 => 27190)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-includes/css/editor.css 2014-02-17 22:45:52 UTC (rev 27189)
+++ trunk/src/wp-includes/css/editor.css 2014-02-18 06:31:30 UTC (rev 27190)
</span><span class="lines">@@ -2,6 +2,119 @@
</span><span class="cx"> TinyMCE and Quicklinks toolbars
</span><span class="cx"> ------------------------------------------------------------------------------*/
</span><span class="cx">
</span><ins>+/* TinyMCE widgets/containers */
+
+.mce-container,
+.mce-widget {
+ color: inherit;
+ font-family: inherit;
+}
+
+/* TinyMCE windows */
+#mce-modal-block.mce-in {
+ opacity: 0.7;
+ z-index: 159900 !important; /* Overwrite inline style added by TinyMCE. */
+}
+
+.mce-window {
+ border-radius: 0;
+ box-shadow: 0 5px 15px rgba(0,0,0,0.7);
+ z-index: 160000 !important; /* Overwrite inline style added by TinyMCE. */
+ -webkit-font-smoothing: subpixel-antialiased;
+}
+
+.mce-window .mce-container-body.mce-abs-layout {
+ overflow: visible;
+}
+
+.mce-window .mce-window-head {
+ background: #fcfcfc;
+ border-bottom: 1px solid #dfdfdf;
+ padding: 0;
+ min-height: 40px;
+}
+
+.mce-window .mce-window-head .mce-title {
+ font-size: 22px;
+ font-weight: 600;
+ line-height: 40px;
+ margin: 0;
+ padding: 0 40px 0 16px;
+}
+
+.mce-window .mce-window-head .mce-close {
+ color: transparent;
+ top: 0;
+ right: 0;
+ width: 40px;
+ height: 40px;
+ line-height: 40px;
+ text-align: center;
+}
+
+.mce-window .mce-window-head .mce-close:before {
+ font: normal 20px/2 'dashicons';
+ text-align: center;
+ color: #888;
+ width: 40px;
+ height: 40px;
+ display: block;
+}
+
+.mce-window .mce-window-head .mce-close:hover:before {
+ color: #555;
+}
+
+.mce-window .mce-window-head .mce-dragh {
+ width: calc( 100% - 40px );
+}
+
+.mce-textbox {
+ border: 1px solid #ddd;
+ border-radius: 0;
+ -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.07);
+ box-shadow: inset 0 1px 2px rgba(0,0,0,0.07);
+ -webkit-transition: none;
+ transition: none;
+}
+
+.mce-textbox:focus,
+.mce-textbox.mce-focus {
+ border-color: #999;
+ -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+ box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+}
+
+/* TinyMCE menus */
+.mce-menu,
+.mce-floatpanel.mce-popover {
+ border-color: rgba(0,0,0,0.15);
+ border-radius: 0;
+ box-shadow: 0 3px 5px rgba( 0, 0, 0, 0.2 );
+}
+
+.mce-floatpanel.mce-popover.mce-bottom {
+ margin-top: 2px;
+}
+
+.mce-floatpanel .mce-arrow {
+ display: none;
+}
+
+.mce-menu .mce-container-body {
+ min-width: 160px;
+}
+
+.mce-menu-item {
+ border: none;
+ margin-bottom: 2px;
+}
+
+.mce-menu-has-icons i.mce-ico {
+ line-height: 16px;
+}
+
+/* TinyMCE panel */
</ins><span class="cx"> div.mce-panel {
</span><span class="cx"> border: 0;
</span><span class="cx"> background: #fff;
</span><span class="lines">@@ -9,6 +122,11 @@
</span><span class="cx"> filter: none;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.mce-panel.mce-menu {
+ border: 1px solid #ddd;
+}
+
+/* TinyMCE toolbars */
</ins><span class="cx"> div.mce-toolbar-grp {
</span><span class="cx"> border-bottom: 1px solid #dedede;
</span><span class="cx"> background: #f5f5f5;
</span><span class="lines">@@ -75,7 +193,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .mce-toolbar .mce-btn i {
</span><del>- text-shadow: 0;
</del><ins>+ text-shadow: none;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .mce-toolbar .mce-btn:focus {
</span><span class="lines">@@ -86,53 +204,170 @@
</span><span class="cx"> white-space: normal;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.mce-toolbar .mce-btn-group .mce-btn.mce-listbox {
- -webkit-border-radius: 0;
- border-radius: 0;
- direction: ltr;
- background: #fff;
- border: 1px solid #ddd;
- -webkit-box-shadow: inset 0 1px 1px -1px rgba(0, 0, 0, .2);
- box-shadow: inset 0 1px 1px -1px rgba(0, 0, 0, .2);
</del><ins>+.mce-toolbar .mce-colorbutton .mce-open {
+ border-right: 0;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-.mce-toolbar .mce-btn-group .mce-btn.mce-listbox:hover {
</del><ins>+.mce-toolbar .mce-colorbutton .mce-preview {
+ margin-left: -18px;
+ padding: 0;
+ width: 18px;
+}
+
+.mce-menubar {
+ border-color: #e5e5e5;
+}
+
+.mce-menubar .mce-btn:focus {
+ outline: 0;
+}
+
+div.mce-menu .mce-menu-item-sep,
+.mce-menu-item-sep:hover {
+ margin: 5px 0 4px;
+}
+
+/* Buttons in modals */
+.mce-window .mce-btn {
+ color: #555;
+ background: #f7f7f7;
+ text-decoration: none;
+ font-size: 13px;
+ line-height: 26px;
+ height: 28px;
+ margin: 0;
+ padding: 0;
+ cursor: pointer;
+ border: 1px solid #ccc;
+ -webkit-appearance: none;
+ -webkit-border-radius: 3px;
+ border-radius: 3px;
+ white-space: nowrap;
+ -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(0,0,0,.08);
+ box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba(0,0,0,.08);
</ins><span class="cx"> background-image: none;
</span><del>- border-color: #bbb;
</del><span class="cx"> }
</span><span class="cx">
</span><del>-.mce-toolbar .mce-colorbutton .mce-open {
- border-right: 0;
</del><ins>+.mce-window .mce-btn:hover {
+ background: #fafafa;
+ border-color: #999;
+ color: #222;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-.mce-toolbar .mce-colorbutton .mce-preview {
- margin-left: -16px;
</del><ins>+.mce-window .mce-btn:focus {
+ -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.2);
+ box-shadow: 1px 1px 1px rgba(0,0,0,.2);
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+.mce-window .mce-btn:active {
+ background: #eee;
+ border-color: #999;
+ color: #333;
+ -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
+ box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 );
+}
+
+.mce-window .mce-btn.mce-disabled {
+ color: #aaa;
+ border-color: #ddd;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ text-shadow: 0 1px 0 #fff;
+ cursor: default;
+}
+
+.mce-window .mce-btn.mce-primary {
+ background: #2ea2cc;
+ border-color: #0074a2;
+ -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.5), 0 1px 0 rgba(0,0,0,.15);
+ box-shadow: inset 0 1px 0 rgba(120,200,230,0.5), 0 1px 0 rgba(0,0,0,.15);
+ color: #fff;
+}
+
+.mce-window .mce-btn.mce-primary:hover {
+ background: #1e8cbe;
+ border-color: #0074a2;
+ -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
+ box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
+ color: #fff;
+}
+
+.mce-window .mce-btn.mce-primary:focus {
+ border-color: #0e3950;
+ -webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,0.4);
+ box-shadow: inset 0 1px 0 rgba(120,200,230,0.6), 1px 1px 2px rgba(0,0,0,0.4);
+}
+
+.mce-window .mce-btn.mce-primary:active {
+ background: #1b7aa6;
+ border-color: #005684;
+ color: rgba(255,255,255,0.95);
+ -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
+ box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
+}
+
+.mce-window .mce-btn.mce-primary.mce-disabled {
+ color: #94cde7;
+ background: #298cba;
+ border-color: #1b607f;
+ text-shadow: 0 -1px 0 rgba(0,0,0,0.1);
+}
+
</ins><span class="cx"> /* Charmap modal */
</span><ins>+.mce-charmap {
+ margin: 3px;
+}
+
</ins><span class="cx"> .mce-charmap td {
</span><span class="cx"> padding: 0;
</span><ins>+ border-color: #dfdfdf;
+ cursor: pointer;
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+.mce-charmap td:hover {
+ background: #f3f3f3;
+}
+
</ins><span class="cx"> .mce-charmap td div {
</span><span class="cx"> width: 18px;
</span><span class="cx"> height: 22px;
</span><span class="cx"> line-height: 22px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-/* Icons */
-.mce-toolbar .mce-ico {
</del><ins>+/* TinyMCE tooltips */
+
+.mce-tooltip {
+ margin-top: 2px;
+}
+
+.mce-tooltip-inner {
+ box-shadow: 0 3px 5px rgba( 0, 0, 0, 0.2 );
+ color: #fff;
+ font-size: 12px;
+}
+
+/* TinyMCE icons */
+.mce-toolbar .mce-ico,
+.mce-toolbar .mce-caret {
</ins><span class="cx"> color: #777;
</span><span class="cx"> line-height: 20px;
</span><span class="cx"> width: 20px;
</span><span class="cx"> height: 20px;
</span><span class="cx"> text-align: center;
</span><ins>+ text-shadow: none;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-.mce-toolbar .mce-btn:hover .mce-ico {
</del><ins>+.mce-toolbar .mce-btn:hover .mce-ico,
+.mce-toolbar .mce-btn.mce-active .mce-ico,
+.mce-toolbar .mce-btn:hover .mce-caret,
+.mce-toolbar .mce-btn.mce-active .mce-caret {
</ins><span class="cx"> color: #333;
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.mce-toolbar .mce-btn.mce-active .mce-open {
+ border-left-color: #bdbdbd;
+}
+
</ins><span class="cx"> i.mce-i-bold,
</span><span class="cx"> i.mce-i-italic,
</span><span class="cx"> i.mce-i-bullist,
</span><span class="lines">@@ -164,7 +399,9 @@
</span><span class="cx"> i.mce-i-wp_help,
</span><span class="cx"> i.mce-i-wp-media-library,
</span><span class="cx"> i.mce-i-ltr,
</span><del>-i.mce-i-wp_page {
</del><ins>+i.mce-i-wp_page,
+i.mce-caret,
+.mce-close {
</ins><span class="cx"> font: normal 20px/1 'dashicons';
</span><span class="cx"> padding: 0;
</span><span class="cx"> vertical-align: top;
</span><span class="lines">@@ -291,6 +528,55 @@
</span><span class="cx"> content: '\f105';
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+i.mce-caret:before {
+ content: '\f140';
+}
+
+.mce-active i.mce-caret:before {
+ content: '\f142';
+}
+
+.mce-close:before {
+ content: '\f158';
+}
+
+.mce-toolbar .mce-btn .mce-caret {
+ border: none;
+ margin: 0 0 0 -5px;
+ width: 16px;
+}
+
+.mce-menubtn span {
+ margin-right: 0;
+ padding-left: 3px;
+}
+
+.mce-toolbar .mce-listbox .mce-caret {
+ margin-top: 0;
+ padding: 2px 3px;
+ right: 0;
+ top: 0;
+ width: 10px;
+}
+
+.mce-toolbar .mce-listbox:hover .mce-caret,
+.mce-toolbar .mce-listbox.mce-active .mce-caret {
+ border-left: 1px solid #bdbdbd;
+}
+
+.mce-toolbar .mce-listbox .mce-caret:before {
+ margin-left: -6px;
+}
+
+.mce-toolbar .mce-splitbtn:hover .mce-open {
+ border-right-color: transparent;
+}
+
+.mce-toolbar .mce-splitbtn .mce-open.mce-active{
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+
</ins><span class="cx"> /* Editors */
</span><span class="cx"> .wp-editor-wrap {
</span><span class="cx"> position: relative;
</span><span class="lines">@@ -439,10 +725,6 @@
</span><span class="cx"> .quicktags-toolbar {
</span><span class="cx"> border-bottom-style: solid;
</span><span class="cx"> border-bottom-width: 1px;
</span><del>- -webkit-border-top-right-radius: 3px;
- border-top-right-radius: 3px;
- -webkit-border-top-left-radius: 3px;
- border-top-left-radius: 3px;
</del><span class="cx"> padding: 2px 8px 0;
</span><span class="cx"> min-height: 29px;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunksrcwpincludesjstinymcepluginswordpresspluginjs"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-includes/js/tinymce/plugins/wordpress/plugin.js (27189 => 27190)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-includes/js/tinymce/plugins/wordpress/plugin.js 2014-02-17 22:45:52 UTC (rev 27189)
+++ trunk/src/wp-includes/js/tinymce/plugins/wordpress/plugin.js 2014-02-18 06:31:30 UTC (rev 27190)
</span><span class="lines">@@ -10,7 +10,7 @@
</span><span class="cx"> initial = ( state === 'hide' );
</span><span class="cx">
</span><span class="cx"> if ( editor.theme.panel ) {
</span><del>- toolbars = editor.theme.panel.find('.toolbar');
</del><ins>+ toolbars = editor.theme.panel.find('.toolbar:not(.menubar)');
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> if ( ! toolbars || toolbars.length < 2 || ( state === 'hide' && ! toolbars[1].visible() ) ) {
</span></span></pre></div>
<a id="trunksrcwpincludesjstinymcetiny_mce_popupjs"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-includes/js/tinymce/tiny_mce_popup.js (27189 => 27190)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-includes/js/tinymce/tiny_mce_popup.js 2014-02-17 22:45:52 UTC (rev 27189)
+++ trunk/src/wp-includes/js/tinymce/tiny_mce_popup.js 2014-02-18 06:31:30 UTC (rev 27190)
</span><span class="lines">@@ -58,7 +58,7 @@
</span><span class="cx"> proxy: tinyMCEPopup._eventProxy
</span><span class="cx"> });
</span><span class="cx">
</span><del>- self.dom.bind(window, 'ready', self._onDOMLoaded, self);
</del><ins>+ self.dom.bind(window, 'load', self._onDOMLoaded, self);
</ins><span class="cx">
</span><span class="cx"> // Enables you to skip loading the default css
</span><span class="cx"> if (self.features.popup_css !== false) {
</span><span class="lines">@@ -385,11 +385,15 @@
</span><span class="cx"> document.body.style.display = '';
</span><span class="cx">
</span><span class="cx"> // Restore selection in IE when focus is placed on a non textarea or input element of the type text
</span><del>- if (tinymce.isIE) {
- document.attachEvent('onmouseup', tinyMCEPopup._restoreSelection);
</del><ins>+ if (tinymce.Env.ie) {
+ if ( tinymce.Env.ie < 11 ) {
+ document.attachEvent('onmouseup', tinyMCEPopup._restoreSelection);
</ins><span class="cx">
</span><del>- // Add base target element for it since it would fail with modal dialogs
- t.dom.add(t.dom.select('head')[0], 'base', {target : '_self'});
</del><ins>+ // Add base target element for it since it would fail with modal dialogs
+ t.dom.add(t.dom.select('head')[0], 'base', {target : '_self'});
+ } else {
+ document.addEventListener('mouseup', tinyMCEPopup._restoreSelection, false);
+ }
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> t.restoreSelection();
</span><span class="lines">@@ -436,7 +440,11 @@
</span><span class="cx">
</span><span class="cx"> document.onkeyup = tinyMCEPopup._closeWinKeyHandler;
</span><span class="cx">
</span><del>- t.uiWindow.getEl('head').firstChild.firstChild.data = document.title;
</del><ins>+ if ( 'textContent' in document ) {
+ t.uiWindow.getEl('head').firstChild.textContent = document.title;
+ } else {
+ t.uiWindow.getEl('head').firstChild.innerText = document.title;
+ }
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> _accessHandler : function(e) {
</span></span></pre></div>
<a id="trunksrcwpincludesjstinymcewpmcehelpphp"></a>
<div class="modfile"><h4>Modified: trunk/src/wp-includes/js/tinymce/wp-mce-help.php (27189 => 27190)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/src/wp-includes/js/tinymce/wp-mce-help.php 2014-02-17 22:45:52 UTC (rev 27189)
+++ trunk/src/wp-includes/js/tinymce/wp-mce-help.php 2014-02-18 06:31:30 UTC (rev 27190)
</span><span class="lines">@@ -15,140 +15,133 @@
</span><span class="cx"> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php echo get_option('blog_charset'); ?>" />
</span><span class="cx"> <title><?php _e('Rich Editor Help'); ?></title>
</span><span class="cx"> <script type="text/javascript" src="tiny_mce_popup.js?ver=358-20121205"></script>
</span><del>-<?php
-wp_admin_css( 'wp-admin', true );
-?>
</del><ins>+<?php wp_admin_css( 'wp-admin', true ); ?>
</ins><span class="cx"> <style type="text/css">
</span><ins>+
+ html {
+ background: #fcfcfc;
+ overflow: hidden;
+ }
+
</ins><span class="cx"> body {
</span><span class="cx"> min-width: 0;
</span><span class="cx"> }
</span><del>- #wphead {
- font-size: 80%;
- border-top: 0;
- color: #555;
- background-color: #f1f1f1;
</del><ins>+
+ #tabs-wrap {
+ position: absolute;
+ top: 0;
</ins><span class="cx"> }
</span><del>- #wphead h1 {
- font-size: 24px;
- color: #555;
- margin: 0;
- padding: 10px;
- }
</del><ins>+
</ins><span class="cx"> #tabs {
</span><del>- padding: 15px 15px 3px;
- background-color: #f1f1f1;
- border-bottom: 1px solid #dfdfdf;
</del><ins>+ box-shadow: 0 3px 5px rgba( 255, 255, 255, 0.2 );
</ins><span class="cx"> margin: 0;
</span><ins>+ padding: 0;
+ position: relative;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
</ins><span class="cx"> }
</span><del>- #tabs li {
- display: inline;
</del><ins>+
+ #tabs a {
+ -webkit-transition: none;
+ transition: none;
</ins><span class="cx"> }
</span><del>- #tabs a.current {
- background-color: #fff;
- border-color: #dfdfdf;
- border-bottom-color: #fff;
- color: #d54e21;
- }
- #tabs a {
- color: #2583AD;
- padding: 6px;
- border-width: 1px 1px 0;
- border-style: solid solid none;
- border-color: #f1f1f1;
</del><ins>+
+ #tabs-wrap #tabs > a {
+ float: left;
+ font-size: 14px;
+ height: 18px;
+ line-height: 18px;
+ margin: 0;
+ padding: 7px 10px;
+ position: relative;
</ins><span class="cx"> text-decoration: none;
</span><ins>+ border-right: 1px solid #ddd;
+ background-color: #eee;
+ color: inherit;
</ins><span class="cx"> }
</span><del>- #tabs a:hover {
- color: #d54e21;
</del><ins>+
+ #tabs > a:active,
+ #tabs > a:focus {
+ outline: none;
</ins><span class="cx"> }
</span><del>- .wrap h2 {
- border-bottom-color: #dfdfdf;
- color: #555;
- margin: 5px 0;
- padding: 0;
- font-size: 18px;
</del><ins>+
+ #tabs-wrap #tabs .active,
+ #tabs-wrap #tabs .active:hover {
+ color: #333;
+ background: #fff;
+ border-bottom: 1px solid #fff;
</ins><span class="cx"> }
</span><del>- #user_info {
- right: 5%;
- top: 5px;
</del><ins>+
+ #tabs .active:after {
+ display: none;
</ins><span class="cx"> }
</span><del>- h3 {
- font-size: 1.1em;
- margin-top: 10px;
- margin-bottom: 0px;
- }
</del><ins>+
</ins><span class="cx"> #flipper {
</span><ins>+ background-color: #fff;
+ border-top: 1px solid #ddd;
+ height: 360px;
</ins><span class="cx"> margin: 0;
</span><del>- padding: 5px 20px 10px;
- background-color: #fff;
- border-left: 1px solid #dfdfdf;
- border-bottom: 1px solid #dfdfdf;
</del><ins>+ margin-top: 32px;
+ overflow-y: scroll;
+ padding: 10px 16px;
</ins><span class="cx"> }
</span><del>- * html {
- overflow-x: hidden;
- overflow-y: scroll;
- }
- #flipper div p {
- margin-top: 0.4em;
- margin-bottom: 0.8em;
- text-align: justify;
- }
</del><ins>+
</ins><span class="cx"> th {
</span><span class="cx"> text-align: center;
</span><span class="cx"> }
</span><ins>+
</ins><span class="cx"> .top th {
</span><span class="cx"> text-decoration: underline;
</span><span class="cx"> }
</span><ins>+
</ins><span class="cx"> .top .key {
</span><span class="cx"> text-align: center;
</span><span class="cx"> width: 5em;
</span><span class="cx"> }
</span><del>- .top .action {
- text-align: left;
- }
- .align {
- border-left: 3px double #333;
- border-right: 3px double #333;
- }
</del><ins>+
</ins><span class="cx"> .keys {
</span><ins>+ border: 0 none;
</ins><span class="cx"> margin-bottom: 15px;
</span><span class="cx"> width: 100%;
</span><del>- border: 0 none;
</del><span class="cx"> }
</span><ins>+
</ins><span class="cx"> .keys p {
</span><span class="cx"> display: inline-block;
</span><span class="cx"> margin: 0px;
</span><span class="cx"> padding: 0px;
</span><span class="cx"> }
</span><del>- .keys .left { text-align: left; }
- .keys .center { text-align: center; }
- .keys .right { text-align: right; }
- td b {
- font-family: "Times New Roman" Times serif;
</del><ins>+
+ .keys .left {
+ text-align: left;
</ins><span class="cx"> }
</span><del>- #buttoncontainer {
</del><ins>+
+ .keys .center {
</ins><span class="cx"> text-align: center;
</span><del>- margin-bottom: 20px;
</del><span class="cx"> }
</span><del>- #buttoncontainer a, #buttoncontainer a:hover {
- border-bottom: 0px;
</del><ins>+
+ .keys .right {
+ text-align: right;
</ins><span class="cx"> }
</span><ins>+
</ins><span class="cx"> .macos .win,
</span><span class="cx"> .windows .mac {
</span><span class="cx"> display: none;
</span><span class="cx"> }
</span><ins>+
</ins><span class="cx"> </style>
</span><span class="cx"> <?php if ( is_rtl() ) : ?>
</span><span class="cx"> <style type="text/css">
</span><del>- #wphead, #tabs {
- padding-left: auto;
- padding-right: 15px;
</del><ins>+
+ .keys .left {
+ text-align: right;
</ins><span class="cx"> }
</span><del>- #flipper {
- margin: 5px 0 3px 10px;
</del><ins>+
+ .keys .right {
+ text-align: left;
</ins><span class="cx"> }
</span><del>- .keys .left, .top, .action { text-align: right; }
- .keys .right { text-align: left; }
- td b { font-family: Tahoma, "Times New Roman", Times, serif }
</del><ins>+
</ins><span class="cx"> </style>
</span><span class="cx"> <?php endif; ?>
</span><span class="cx"> </head>
</span><span class="lines">@@ -158,12 +151,14 @@
</span><span class="cx"> document.body.className = document.body.className.replace(/windows/, 'macos');
</span><span class="cx"> </script>
</span><span class="cx">
</span><del>-<ul id="tabs">
- <li><a id="tab1" href="javascript:flipTab(1)" title="<?php esc_attr_e('Basics of Rich Editing'); ?>" accesskey="1" class="current"><?php _e('Basics'); ?></a></li>
- <li><a id="tab2" href="javascript:flipTab(2)" title="<?php esc_attr_e('Advanced use of the Rich Editor'); ?>" accesskey="2"><?php _e('Advanced'); ?></a></li>
- <li><a id="tab3" href="javascript:flipTab(3)" title="<?php esc_attr_e('Hotkeys'); ?>" accesskey="3"><?php _e('Hotkeys'); ?></a></li>
- <li><a id="tab4" href="javascript:flipTab(4)" title="<?php esc_attr_e('About the software'); ?>" accesskey="4"><?php _e('About'); ?></a></li>
-</ul>
</del><ins>+<div id="tabs-wrap">
+ <div id="tabs">
+ <a id="tab1" href="javascript:flipTab(1)" title="<?php esc_attr_e('Basics of Rich Editing'); ?>" accesskey="1" class="active"><?php _e('Basics'); ?></a>
+ <a id="tab2" href="javascript:flipTab(2)" title="<?php esc_attr_e('Advanced use of the Rich Editor'); ?>" accesskey="2"><?php _e('Advanced'); ?></a>
+ <a id="tab3" href="javascript:flipTab(3)" title="<?php esc_attr_e('Hotkeys'); ?>" accesskey="3"><?php _e('Hotkeys'); ?></a>
+ <a id="tab4" href="javascript:flipTab(4)" title="<?php esc_attr_e('About the software'); ?>" accesskey="4"><?php _e('About'); ?></a>
+ </div>
+</div>
</ins><span class="cx">
</span><span class="cx"> <div id="flipper" class="wrap">
</span><span class="cx">
</span><span class="lines">@@ -172,7 +167,7 @@
</span><span class="cx"> <p><?php _e('<em>Rich editing</em>, also called WYSIWYG for What You See Is What You Get, means your text is formatted as you type. The rich editor creates HTML code behind the scenes while you concentrate on writing. Font styles, links and images all appear approximately as they will on the internet.'); ?></p>
</span><span class="cx"> <p><?php _e('WordPress includes a rich HTML editor that works well in all major web browsers used today. However editing HTML is not the same as typing text. Each web page has two major components: the structure, which is the actual HTML code and is produced by the editor as you type, and the display, that is applied to it by the currently selected WordPress theme and is defined in style.css. WordPress is producing valid XHTML 1.0 which means that inserting multiple line breaks (BR tags) after a paragraph would not produce white space on the web page. The BR tags will be removed as invalid by the internal HTML correcting functions.'); ?></p>
</span><span class="cx"> <p><?php _e('While using the editor, most basic keyboard shortcuts work like in any other text editor. For example: Shift+Enter inserts line break, Ctrl+C = copy, Ctrl+X = cut, Ctrl+Z = undo, Ctrl+Y = redo, Ctrl+A = select all, etc. (on Mac use the Command key instead of Ctrl). See the Hotkeys tab for all available keyboard shortcuts.'); ?></p>
</span><del>- <p><?php _e('If you do not like the way the rich editor works, you may turn it off from Your Profile submenu, under Users in the admin menu.'); ?></p>
</del><ins>+ <p><?php _e('If you do not like the way the rich editor works, you may turn it off from Your Profile submenu, under Users in the admin menu.'); ?></p>
</ins><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> <div id="content2" class="hidden">
</span><span class="lines">@@ -189,7 +184,7 @@
</span><span class="cx">
</span><span class="cx"> <div id="content3" class="hidden">
</span><span class="cx"> <h2><?php _e('Writing at Full Speed'); ?></h2>
</span><del>- <p><?php _e('Rather than reaching for your mouse to click on the toolbar, use these access keys. Windows and Linux use Ctrl + letter. Macintosh uses Command + letter.'); ?></p>
</del><ins>+ <p><?php _e('Rather than reaching for your mouse to click on the toolbar, use these access keys. Windows and Linux use Ctrl + letter. Macintosh uses Command + letter.'); ?></p>
</ins><span class="cx">
</span><span class="cx"> <table class="keys">
</span><span class="cx"> <tr class="top"><th class="key center"><?php _e('Letter'); ?></th><th class="left"><?php _e('Action'); ?></th><th class="key center"><?php _e('Letter'); ?></th><th class="left"><?php _e('Action'); ?></th></tr>
</span><span class="lines">@@ -228,19 +223,13 @@
</span><span class="cx"> <div id="content4" class="hidden">
</span><span class="cx"> <h2><?php _e('About TinyMCE'); ?></h2>
</span><span class="cx">
</span><del>- <p><?php _e('Version:'); ?> <span id="version"></span> (<span id="date"></span>)</p>
</del><ins>+ <p><?php _e('Version:'); ?> <span id="version"></span> (<span id="date"></span>)</p>
</ins><span class="cx"> <p><?php printf(__('TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor released as Open Source under %sLGPL</a> by Moxiecode Systems AB. It has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances.'), '<a href="'.home_url('/wp-includes/js/tinymce/license.txt').'" target="_blank" title="'.esc_attr__('GNU Library General Public License').'">'); ?></p>
</span><span class="cx"> <p><?php _e('Copyright © 2003-2014, <a href="http://www.moxiecode.com" target="_blank">Moxiecode Systems AB</a>, All rights reserved.'); ?></p>
</span><span class="cx"> <p><?php _e('For more information about this software visit the <a href="http://tinymce.com" target="_blank">TinyMCE website</a>.'); ?></p>
</span><span class="cx"> </div>
</span><span class="cx">
</span><span class="cx"> </div>
</span><del>-
-<div class="mceActionPanel">
- <div style="margin: 8px auto; text-align: center;padding-bottom: 10px;">
- <input type="button" id="cancel" name="cancel" value="<?php esc_attr_e('Close'); ?>" title="<?php esc_attr_e('Close'); ?>" onclick="tinyMCEPopup.close();" />
- </div>
-</div>
</del><span class="cx"> <script type="text/javascript">
</span><span class="cx"> function d(id) { return document.getElementById(id); }
</span><span class="cx">
</span><span class="lines">@@ -252,7 +241,7 @@
</span><span class="cx"> t = d('tab'+i.toString());
</span><span class="cx"> if ( n == i ) {
</span><span class="cx"> c.className = '';
</span><del>- t.className = 'current';
</del><ins>+ t.className = 'active';
</ins><span class="cx"> } else {
</span><span class="cx"> c.className = 'hidden';
</span><span class="cx"> t.className = '';
</span><span class="lines">@@ -260,18 +249,18 @@
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><del>- tinyMCEPopup.onInit.add(function() {
- var win = tinyMCEPopup.getWin();
</del><ins>+ tinyMCEPopup.onInit.add(function() {
+ var win = tinyMCEPopup.getWin();
</ins><span class="cx">
</span><span class="cx"> d('version').innerHTML = tinymce.majorVersion + "." + tinymce.minorVersion;
</span><del>- d('date').innerHTML = tinymce.releaseDate;
</del><ins>+ d('date').innerHTML = tinymce.releaseDate;
</ins><span class="cx">
</span><span class="cx"> if ( win.fullscreen && win.fullscreen.settings.visible ) {
</span><span class="cx"> d('content1').className = 'hidden';
</span><span class="cx"> d('tabs').className = 'hidden';
</span><span class="cx"> d('content3').className = 'dfw';
</span><span class="cx"> }
</span><del>- });
</del><ins>+ });
</ins><span class="cx"> </script>
</span><span class="cx"> </body>
</span><span class="cx"> </html>
</span></span></pre>
</div>
</div>
</body>
</html>