TinyMCE: style the modals to match WordPress admin (first-run). Fix couple of IE problems in tiny_mce_popup.js. Props avryl, see #26952, see #24067

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


git-svn-id: http://core.svn.wordpress.org/trunk@27049 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Ozz 2014-02-18 06:32:14 +00:00
parent 03d54a0ac7
commit d7db798635
9 changed files with 730 additions and 169 deletions

View File

@ -2,6 +2,119 @@
TinyMCE and Quicklinks toolbars
------------------------------------------------------------------------------*/
/* 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 16px 0 40px;
}
.mce-window .mce-window-head .mce-close {
color: transparent;
top: 0;
left: 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 */
div.mce-panel {
border: 0;
background: #fff;
@ -9,6 +122,11 @@ div.mce-panel {
filter: none;
}
.mce-panel.mce-menu {
border: 1px solid #ddd;
}
/* TinyMCE toolbars */
div.mce-toolbar-grp {
border-bottom: 1px solid #dedede;
background: #f5f5f5;
@ -75,7 +193,7 @@ div.mce-statusbar {
}
.mce-toolbar .mce-btn i {
text-shadow: 0;
text-shadow: none;
}
.mce-toolbar .mce-btn:focus {
@ -86,32 +204,128 @@ div.mce-statusbar {
white-space: normal;
}
.mce-toolbar .mce-btn-group .mce-btn.mce-listbox {
-webkit-border-radius: 0;
border-radius: 0;
direction: rtl;
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);
}
.mce-toolbar .mce-btn-group .mce-btn.mce-listbox:hover {
background-image: none;
border-color: #bbb;
}
.mce-toolbar .mce-colorbutton .mce-open {
border-left: 0;
}
.mce-toolbar .mce-colorbutton .mce-preview {
margin-right: -16px;
margin-right: -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);
background-image: none;
}
.mce-window .mce-btn:hover {
background: #fafafa;
border-color: #999;
color: #222;
}
.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);
}
.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);
}
/* Charmap modal */
.mce-charmap {
margin: 3px;
}
.mce-charmap td {
padding: 0;
border-color: #dfdfdf;
cursor: pointer;
}
.mce-charmap td:hover {
background: #f3f3f3;
}
.mce-charmap td div {
@ -120,19 +334,40 @@ div.mce-statusbar {
line-height: 22px;
}
/* Icons */
.mce-toolbar .mce-ico {
/* 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 {
color: #777;
line-height: 20px;
width: 20px;
height: 20px;
text-align: center;
text-shadow: none;
}
.mce-toolbar .mce-btn:hover .mce-ico {
.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 {
color: #333;
}
.mce-toolbar .mce-btn.mce-active .mce-open {
border-right-color: #bdbdbd;
}
i.mce-i-bold,
i.mce-i-italic,
i.mce-i-bullist,
@ -164,7 +399,9 @@ i.mce-i-help,
i.mce-i-wp_help,
i.mce-i-wp-media-library,
i.mce-i-ltr,
i.mce-i-wp_page {
i.mce-i-wp_page,
i.mce-caret,
.mce-close {
font: normal 20px/1 'dashicons';
padding: 0;
vertical-align: top;
@ -291,6 +528,55 @@ i.mce-i-wp_page:before {
content: '\f105';
}
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 -5px 0 0;
width: 16px;
}
.mce-menubtn span {
margin-left: 0;
padding-right: 3px;
}
.mce-toolbar .mce-listbox .mce-caret {
margin-top: 0;
padding: 2px 3px;
left: 0;
top: 0;
width: 10px;
}
.mce-toolbar .mce-listbox:hover .mce-caret,
.mce-toolbar .mce-listbox.mce-active .mce-caret {
border-right: 1px solid #bdbdbd;
}
.mce-toolbar .mce-listbox .mce-caret:before {
margin-right: -6px;
}
.mce-toolbar .mce-splitbtn:hover .mce-open {
border-left-color: transparent;
}
.mce-toolbar .mce-splitbtn .mce-open.mce-active{
-webkit-box-shadow: none;
box-shadow: none;
}
/* Editors */
.wp-editor-wrap {
position: relative;
@ -439,10 +725,6 @@ i.mce-i-wp_page:before {
.quicktags-toolbar {
border-bottom-style: solid;
border-bottom-width: 1px;
-webkit-border-top-left-radius: 3px;
border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
border-top-right-radius: 3px;
padding: 2px 8px 0;
min-height: 29px;
}

File diff suppressed because one or more lines are too long

View File

@ -2,6 +2,119 @@
TinyMCE and Quicklinks toolbars
------------------------------------------------------------------------------*/
/* 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 */
div.mce-panel {
border: 0;
background: #fff;
@ -9,6 +122,11 @@ div.mce-panel {
filter: none;
}
.mce-panel.mce-menu {
border: 1px solid #ddd;
}
/* TinyMCE toolbars */
div.mce-toolbar-grp {
border-bottom: 1px solid #dedede;
background: #f5f5f5;
@ -75,7 +193,7 @@ div.mce-statusbar {
}
.mce-toolbar .mce-btn i {
text-shadow: 0;
text-shadow: none;
}
.mce-toolbar .mce-btn:focus {
@ -86,32 +204,128 @@ div.mce-statusbar {
white-space: normal;
}
.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);
}
.mce-toolbar .mce-btn-group .mce-btn.mce-listbox:hover {
background-image: none;
border-color: #bbb;
}
.mce-toolbar .mce-colorbutton .mce-open {
border-right: 0;
}
.mce-toolbar .mce-colorbutton .mce-preview {
margin-left: -16px;
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);
background-image: none;
}
.mce-window .mce-btn:hover {
background: #fafafa;
border-color: #999;
color: #222;
}
.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);
}
.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);
}
/* Charmap modal */
.mce-charmap {
margin: 3px;
}
.mce-charmap td {
padding: 0;
border-color: #dfdfdf;
cursor: pointer;
}
.mce-charmap td:hover {
background: #f3f3f3;
}
.mce-charmap td div {
@ -120,19 +334,40 @@ div.mce-statusbar {
line-height: 22px;
}
/* Icons */
.mce-toolbar .mce-ico {
/* 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 {
color: #777;
line-height: 20px;
width: 20px;
height: 20px;
text-align: center;
text-shadow: none;
}
.mce-toolbar .mce-btn:hover .mce-ico {
.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 {
color: #333;
}
.mce-toolbar .mce-btn.mce-active .mce-open {
border-left-color: #bdbdbd;
}
i.mce-i-bold,
i.mce-i-italic,
i.mce-i-bullist,
@ -164,7 +399,9 @@ i.mce-i-help,
i.mce-i-wp_help,
i.mce-i-wp-media-library,
i.mce-i-ltr,
i.mce-i-wp_page {
i.mce-i-wp_page,
i.mce-caret,
.mce-close {
font: normal 20px/1 'dashicons';
padding: 0;
vertical-align: top;
@ -291,6 +528,55 @@ i.mce-i-wp_page:before {
content: '\f105';
}
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;
}
/* Editors */
.wp-editor-wrap {
position: relative;
@ -439,10 +725,6 @@ i.mce-i-wp_page:before {
.quicktags-toolbar {
border-bottom-style: solid;
border-bottom-width: 1px;
-webkit-border-top-right-radius: 3px;
border-top-right-radius: 3px;
-webkit-border-top-left-radius: 3px;
border-top-left-radius: 3px;
padding: 2px 8px 0;
min-height: 29px;
}

File diff suppressed because one or more lines are too long

View File

@ -10,7 +10,7 @@ tinymce.PluginManager.add( 'wordpress', function( editor ) {
initial = ( state === 'hide' );
if ( editor.theme.panel ) {
toolbars = editor.theme.panel.find('.toolbar');
toolbars = editor.theme.panel.find('.toolbar:not(.menubar)');
}
if ( ! toolbars || toolbars.length < 2 || ( state === 'hide' && ! toolbars[1].visible() ) ) {

File diff suppressed because one or more lines are too long

View File

@ -58,7 +58,7 @@ var tinyMCEPopup = {
proxy: tinyMCEPopup._eventProxy
});
self.dom.bind(window, 'ready', self._onDOMLoaded, self);
self.dom.bind(window, 'load', self._onDOMLoaded, self);
// Enables you to skip loading the default css
if (self.features.popup_css !== false) {
@ -385,11 +385,15 @@ var tinyMCEPopup = {
document.body.style.display = '';
// Restore selection in IE when focus is placed on a non textarea or input element of the type text
if (tinymce.isIE) {
document.attachEvent('onmouseup', tinyMCEPopup._restoreSelection);
if (tinymce.Env.ie) {
if ( tinymce.Env.ie < 11 ) {
document.attachEvent('onmouseup', tinyMCEPopup._restoreSelection);
// Add base target element for it since it would fail with modal dialogs
t.dom.add(t.dom.select('head')[0], 'base', {target : '_self'});
// 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);
}
}
t.restoreSelection();
@ -436,7 +440,11 @@ var tinyMCEPopup = {
document.onkeyup = tinyMCEPopup._closeWinKeyHandler;
t.uiWindow.getEl('head').firstChild.firstChild.data = document.title;
if ( 'textContent' in document ) {
t.uiWindow.getEl('head').firstChild.textContent = document.title;
} else {
t.uiWindow.getEl('head').firstChild.innerText = document.title;
}
},
_accessHandler : function(e) {

View File

@ -15,140 +15,133 @@ header('Content-Type: text/html; charset=' . get_bloginfo('charset'));
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php echo get_option('blog_charset'); ?>" />
<title><?php _e('Rich Editor Help'); ?></title>
<script type="text/javascript" src="tiny_mce_popup.js?ver=358-20121205"></script>
<?php
wp_admin_css( 'wp-admin', true );
?>
<?php wp_admin_css( 'wp-admin', true ); ?>
<style type="text/css">
html {
background: #fcfcfc;
overflow: hidden;
}
body {
min-width: 0;
}
#wphead {
font-size: 80%;
border-top: 0;
color: #555;
background-color: #f1f1f1;
}
#wphead h1 {
font-size: 24px;
color: #555;
margin: 0;
padding: 10px;
#tabs-wrap {
position: absolute;
top: 0;
}
#tabs {
padding: 15px 15px 3px;
background-color: #f1f1f1;
border-bottom: 1px solid #dfdfdf;
box-shadow: 0 3px 5px rgba( 255, 255, 255, 0.2 );
margin: 0;
}
#tabs li {
display: inline;
}
#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;
text-decoration: none;
}
#tabs a:hover {
color: #d54e21;
}
.wrap h2 {
border-bottom-color: #dfdfdf;
color: #555;
margin: 5px 0;
padding: 0;
font-size: 18px;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#user_info {
right: 5%;
top: 5px;
#tabs a {
-webkit-transition: none;
transition: none;
}
h3 {
font-size: 1.1em;
margin-top: 10px;
margin-bottom: 0px;
}
#flipper {
#tabs-wrap #tabs > a {
float: left;
font-size: 14px;
height: 18px;
line-height: 18px;
margin: 0;
padding: 5px 20px 10px;
padding: 7px 10px;
position: relative;
text-decoration: none;
border-right: 1px solid #ddd;
background-color: #eee;
color: inherit;
}
#tabs > a:active,
#tabs > a:focus {
outline: none;
}
#tabs-wrap #tabs .active,
#tabs-wrap #tabs .active:hover {
color: #333;
background: #fff;
border-bottom: 1px solid #fff;
}
#tabs .active:after {
display: none;
}
#flipper {
background-color: #fff;
border-left: 1px solid #dfdfdf;
border-bottom: 1px solid #dfdfdf;
}
* html {
overflow-x: hidden;
overflow-y: scroll;
}
#flipper div p {
margin-top: 0.4em;
margin-bottom: 0.8em;
text-align: justify;
border-top: 1px solid #ddd;
height: 360px;
margin: 0;
margin-top: 32px;
overflow-y: scroll;
padding: 10px 16px;
}
th {
text-align: center;
}
.top th {
text-decoration: underline;
}
.top .key {
text-align: center;
width: 5em;
}
.top .action {
text-align: left;
}
.align {
border-left: 3px double #333;
border-right: 3px double #333;
}
.keys {
border: 0 none;
margin-bottom: 15px;
width: 100%;
border: 0 none;
}
.keys p {
display: inline-block;
margin: 0px;
padding: 0px;
}
.keys .left { text-align: left; }
.keys .center { text-align: center; }
.keys .right { text-align: right; }
td b {
font-family: "Times New Roman" Times serif;
.keys .left {
text-align: left;
}
#buttoncontainer {
.keys .center {
text-align: center;
margin-bottom: 20px;
}
#buttoncontainer a, #buttoncontainer a:hover {
border-bottom: 0px;
.keys .right {
text-align: right;
}
.macos .win,
.windows .mac {
display: none;
}
</style>
<?php if ( is_rtl() ) : ?>
<style type="text/css">
#wphead, #tabs {
padding-left: auto;
padding-right: 15px;
.keys .left {
text-align: right;
}
#flipper {
margin: 5px 0 3px 10px;
.keys .right {
text-align: left;
}
.keys .left, .top, .action { text-align: right; }
.keys .right { text-align: left; }
td b { font-family: Tahoma, "Times New Roman", Times, serif }
</style>
<?php endif; ?>
</head>
@ -158,12 +151,14 @@ if ( tinymce.isMac )
document.body.className = document.body.className.replace(/windows/, 'macos');
</script>
<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>
<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>
<div id="flipper" class="wrap">
@ -172,7 +167,7 @@ if ( tinymce.isMac )
<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>
<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>
<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>
<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>
<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>
</div>
<div id="content2" class="hidden">
@ -189,7 +184,7 @@ if ( tinymce.isMac )
<div id="content3" class="hidden">
<h2><?php _e('Writing at Full Speed'); ?></h2>
<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>
<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>
<table class="keys">
<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>
@ -228,19 +223,13 @@ if ( tinymce.isMac )
<div id="content4" class="hidden">
<h2><?php _e('About TinyMCE'); ?></h2>
<p><?php _e('Version:'); ?> <span id="version"></span> (<span id="date"></span>)</p>
<p><?php _e('Version:'); ?> <span id="version"></span> (<span id="date"></span>)</p>
<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>
<p><?php _e('Copyright &copy; 2003-2014, <a href="http://www.moxiecode.com" target="_blank">Moxiecode Systems AB</a>, All rights reserved.'); ?></p>
<p><?php _e('For more information about this software visit the <a href="http://tinymce.com" target="_blank">TinyMCE website</a>.'); ?></p>
</div>
</div>
<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>
<script type="text/javascript">
function d(id) { return document.getElementById(id); }
@ -252,7 +241,7 @@ if ( tinymce.isMac )
t = d('tab'+i.toString());
if ( n == i ) {
c.className = '';
t.className = 'current';
t.className = 'active';
} else {
c.className = 'hidden';
t.className = '';
@ -260,18 +249,18 @@ if ( tinymce.isMac )
}
}
tinyMCEPopup.onInit.add(function() {
var win = tinyMCEPopup.getWin();
tinyMCEPopup.onInit.add(function() {
var win = tinyMCEPopup.getWin();
d('version').innerHTML = tinymce.majorVersion + "." + tinymce.minorVersion;
d('date').innerHTML = tinymce.releaseDate;
d('date').innerHTML = tinymce.releaseDate;
if ( win.fullscreen && win.fullscreen.settings.visible ) {
d('content1').className = 'hidden';
d('tabs').className = 'hidden';
d('content3').className = 'dfw';
}
});
});
</script>
</body>
</html>