X-Git-Url: https://scripts.mit.edu/gitweb/autoinstalls/wordpress.git/blobdiff_plain/41578db67d72562346e4dbb2a14889b23d522813..53f4633144ed68c8b8fb5861f992b5489894a940:/wp-includes/css/editor.css?ds=sidebyside diff --git a/wp-includes/css/editor.css b/wp-includes/css/editor.css index ab572352..b89e9390 100644 --- a/wp-includes/css/editor.css +++ b/wp-includes/css/editor.css @@ -13,9 +13,12 @@ } /* TinyMCE windows */ -#mce-modal-block.mce-in { +#mce-modal-block, +#mce-modal-block.mce-fade { opacity: 0.7; filter: alpha(opacity=70); + -webkit-transition: none; + transition: none; } .mce-window { @@ -24,6 +27,8 @@ -webkit-box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.3 ); box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.3 ); -webkit-font-smoothing: subpixel-antialiased; + -webkit-transition: none; + transition: none; } .mce-window .mce-container-body.mce-abs-layout { @@ -66,7 +71,7 @@ } .mce-window .mce-window-head .mce-close:hover:before { - color: #2ea2cc; + color: #00a0d2; } .mce-window .mce-window-head .mce-dragh { @@ -74,29 +79,97 @@ width: calc( 100% - 36px ); } -.mce-wp-help .mce-window-head { - border-bottom: none; +.mce-window .mce-foot { + border-top: 1px solid #dfdfdf; } .mce-textbox, -.mce-checkbox i.mce-i-checkbox { +.mce-checkbox i.mce-i-checkbox, +#wp-link .query-results { border: 1px solid #ddd; -webkit-border-radius: 0; 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: .05s border-color ease-in-out; - transition: .05s border-color ease-in-out; + -webkit-transition: .05s all ease-in-out; + transition: .05s all ease-in-out; } .mce-textbox:focus, .mce-textbox.mce-focus, -.mce-checkbox:focus i.mce-i-checkbox { +.mce-checkbox:focus i.mce-i-checkbox, +#wp-link .query-results:focus { border-color: #5b9dd9; -webkit-box-shadow: 0 0 2px rgba(30,140,190,0.8); box-shadow: 0 0 2px rgba(30,140,190,0.8); } +.mce-window .mce-wp-help { + height: 360px; + width: 460px; + overflow: auto; +} + +.mce-window .mce-wp-help * { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.mce-window .mce-wp-help > .mce-container-body { + width: auto !important; +} + +.mce-window .wp-editor-help { + padding: 10px 10px 0 20px; +} + +.mce-window .wp-editor-help h2, +.mce-window .wp-editor-help p { + margin: 8px 0; + white-space: normal; + font-size: 14px; + font-weight: normal; +} + +.mce-window .wp-editor-help table { + width: 100%; + margin-bottom: 20px; +} + +.mce-window .wp-editor-help td, +.mce-window .wp-editor-help th { + font-size: 13px; + padding: 5px; + vertical-align: middle; + word-wrap: break-word; + white-space: normal; +} + +.mce-window .wp-editor-help th { + font-weight: bold; + padding-bottom: 0; +} + +.mce-window .wp-editor-help kbd { + font-family: monospace; + padding: 2px 7px 3px; + font-weight: bold; + margin: 0; + background: #eaeaea; + background: rgba(0,0,0,0.08); +} + +.mce-window .wp-help-header td { + font-weight: bold; + padding: 0 5px; +} + +.mce-window .wp-help-th-center td:nth-child(odd), +.mce-window .wp-help-th-center th:nth-child(odd) { + text-align: center; +} + /* TinyMCE menus */ .mce-menu, .mce-floatpanel.mce-popover { @@ -107,6 +180,7 @@ box-shadow: 0 3px 5px rgba( 0, 0, 0, 0.2 ); } +.mce-menu, .mce-floatpanel.mce-popover.mce-bottom { margin-top: 2px; } @@ -132,8 +206,6 @@ div.mce-panel { border: 0; background: #fff; - -webkit-filter: none; - filter: none; } .mce-panel.mce-menu { @@ -148,10 +220,117 @@ div.mce-tab { div.mce-toolbar-grp { border-bottom: 1px solid #dedede; background: #f5f5f5; - padding: 3px; + padding: 0; position: relative; } +div.mce-inline-toolbar-grp { + border: 1px solid #a0a5aa; + -webkit-border-radius: 2px; + border-radius: 2px; + -webkit-box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.15 ); + box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.15 ); + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + margin-bottom: 8px; + position: absolute; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; + max-width: 98%; + z-index: 100100; /* Same as the other TinyMCE "panels" */ +} + +div.mce-inline-toolbar-grp > div.mce-stack-layout { + padding: 1px; +} + +div.mce-inline-toolbar-grp.mce-arrow-up { + margin-bottom: 0; + margin-top: 8px; +} + +div.mce-inline-toolbar-grp:before, +div.mce-inline-toolbar-grp:after { + position: absolute; + left: 50%; + display: block; + width: 0; + height: 0; + border-style: solid; + border-color: transparent; + content: ''; +} + +div.mce-inline-toolbar-grp.mce-arrow-up:before { + top: -9px; + border-bottom-color: #a0a5aa; + border-width: 0 9px 9px; + margin-left: -9px; +} + +div.mce-inline-toolbar-grp.mce-arrow-down:before { + bottom: -9px; + border-top-color: #a0a5aa; + border-width: 9px 9px 0; + margin-left: -9px; +} + +div.mce-inline-toolbar-grp.mce-arrow-up:after { + top: -8px; + border-bottom-color: #f5f5f5; + border-width: 0 8px 8px; + margin-left: -8px; +} + +div.mce-inline-toolbar-grp.mce-arrow-down:after { + bottom: -8px; + border-top-color: #f5f5f5; + border-width: 8px 8px 0; + margin-left: -8px; +} + +div.mce-inline-toolbar-grp.mce-arrow-left:before, +div.mce-inline-toolbar-grp.mce-arrow-left:after { + margin: 0; +} + +div.mce-inline-toolbar-grp.mce-arrow-left:before { + left: 20px; +} +div.mce-inline-toolbar-grp.mce-arrow-left:after { + left: 21px; +} + +div.mce-inline-toolbar-grp.mce-arrow-right:before, +div.mce-inline-toolbar-grp.mce-arrow-right:after { + left: auto; + margin: 0; +} + +div.mce-inline-toolbar-grp.mce-arrow-right:before { + right: 20px; +} + +div.mce-inline-toolbar-grp.mce-arrow-right:after { + right: 21px; +} + +div.mce-inline-toolbar-grp.mce-arrow-full { + right: 0; +} + +div.mce-inline-toolbar-grp.mce-arrow-full > div { + width: 100%; + overflow-x: auto; +} + +div.mce-toolbar-grp > div { + padding: 3px; +} + .has-dfw div.mce-toolbar-grp .mce-toolbar.mce-first { padding-right: 32px; } @@ -161,16 +340,22 @@ div.mce-toolbar-grp { } div.mce-statusbar { - border-top: 1px solid #eee; + border-top: 1px solid #e5e5e5; } div.mce-path { - padding: 0 8px 2px; + padding: 2px 10px; margin: 0; } +.mce-path, +.mce-path-item, +.mce-path .mce-divider { + font-size: 12px; +} + .mce-toolbar .mce-btn, -.qt-fullscreen { +.qt-dfw { border-color: transparent; background: transparent; -webkit-box-shadow: none; @@ -179,35 +364,29 @@ div.mce-path { cursor: pointer; } -#wp-fullscreen-buttons .mce-btn, .mce-toolbar .mce-btn-group .mce-btn, -.qt-fullscreen { +.qt-dfw { border: 1px solid transparent; margin: 2px; - background-image: none; -webkit-border-radius: 2px; border-radius: 2px; - -webkit-filter: none; - filter: none; } -#wp-fullscreen-buttons .mce-btn:hover, .mce-toolbar .mce-btn-group .mce-btn:hover, -#wp-fullscreen-buttons .mce-btn:focus, .mce-toolbar .mce-btn-group .mce-btn:focus, -.qt-fullscreen:hover, -.qt-fullscreen:focus { +.qt-dfw:hover, +.qt-dfw:focus { background: #fafafa; border-color: #999; - color: #222; + color: #23282d; -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 ); box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 ); + outline: none; } .mce-toolbar .mce-btn-group .mce-btn.mce-active, -#wp-fullscreen-buttons .mce-btn.mce-active, .mce-toolbar .mce-btn-group .mce-btn:active, -#wp-fullscreen-buttons .mce-btn:active { +.qt-dfw.active { background: #ebebeb; border-color: #999; -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.3 ); @@ -223,10 +402,8 @@ div.mce-path { } .mce-toolbar .mce-btn-group .mce-btn.mce-disabled:hover, -#wp-fullscreen-buttons .mce-btn.mce-disabled:hover, -.mce-toolbar .mce-btn-group .mce-btn.mce-disabled:focus, -#wp-fullscreen-buttons .mce-btn.mce-disabled:focus { - color: #aaa; +.mce-toolbar .mce-btn-group .mce-btn.mce-disabled:focus { + color: #a0a5aa; background: none; border-color: #ddd; text-shadow: 0 1px 0 #fff; @@ -240,11 +417,18 @@ div.mce-path { } .mce-toolbar .mce-btn button, -.qt-fullscreen { +.qt-dfw { padding: 2px 3px; line-height: normal; } +.mce-toolbar .mce-listbox button { + font-size: 13px; + line-height: 20px; + padding-left: 6px; + padding-right: 20px; +} + .mce-toolbar .mce-btn i { text-shadow: none; } @@ -258,9 +442,13 @@ div.mce-path { } .mce-toolbar .mce-colorbutton .mce-preview { - margin-left: -17px; + margin: 0; padding: 0; - width: 18px; + top: auto; + bottom: 2px; + left: 3px; + height: 3px; + width: 20px; } /* mce listbox */ @@ -275,8 +463,7 @@ div.mce-path { } .mce-toolbar .mce-btn-group .mce-btn.mce-listbox:hover { - background-image: none; - border-color: #bbb; + border-color: #b4b9be; } .mce-panel .mce-btn i.mce-caret { @@ -286,22 +473,16 @@ div.mce-path { } .mce-listbox i.mce-caret { - right: 6px; -} - -.mce-panel .mce-btn button.mce-open i.mce-caret, -.mce-panel .mce-btn.mce-listbox i.mce-caret { - margin-left: 0; - margin-right: 0; + right: 4px; } .mce-panel .mce-btn:hover i.mce-caret { - border-top-color: #333; + border-top-color: #32373c; } .mce-panel .mce-active i.mce-caret { border-top: 0; - border-bottom: 6px solid #333; + border-bottom: 6px solid #32373c; margin-top: 7px; } @@ -313,48 +494,68 @@ div.mce-path { border-right-color: transparent; } -.mce-toolbar .mce-splitbtn .mce-open.mce-active{ - -webkit-box-shadow: none; - box-shadow: none; -} - -.mce-menu .mce-menu-item-normal.mce-active { - background-color: #e5e5e5; - -webkit-filter: none; - filter: none; +.mce-toolbar .mce-splitbtn .mce-open.mce-active { + background: transparent; + outline: none; } .mce-menu .mce-menu-item:hover, .mce-menu .mce-menu-item.mce-selected, -.mce-menu .mce-menu-item:focus { - color: #000; - background-color: #bbb; - background-image: none; - -webkit-filter: none; - filter: none; -} - -.mce-menu .mce-menu-item:hover .mce-ico, -.mce-menu .mce-menu-item.mce-selected .mce-ico, -.mce-menu .mce-menu-item:focus .mce-ico, -.mce-menu .mce-menu-item:hover .mce-text, -.mce-menu .mce-menu-item.mce-active:hover .mce-text, -.mce-menu .mce-menu-item.mce-selected .mce-text { - color: #000; +.mce-menu .mce-menu-item:focus, +.mce-menu .mce-menu-item-normal.mce-active, +.mce-menu .mce-menu-item-preview.mce-active { + background: #0073aa; /* See color scheme. */ +} + +.mce-menu .mce-menu-item-preview.mce-active { + border-left: none; +} + +.mce-menu .mce-menu-item-preview.mce-active .mce-text { + color: #fff; +} + +.mce-menu .mce-menu-item.mce-disabled { + cursor: default; +} + +.mce-menu .mce-menu-item.mce-disabled:hover { + background: #ccc; } /* Menubar */ .mce-menubar { border-color: #e5e5e5; + background: #fff; + border-width: 0px 0px 1px; +} + +.mce-menubar .mce-menubtn { + margin: 2px; +} + +.mce-menubar .mce-menubtn:hover, +.mce-menubar .mce-menubtn.mce-active, +.mce-menubar .mce-menubtn:focus { + border-color: transparent; + background: transparent; } -.mce-menubar .mce-btn:focus { - outline: 0; +.mce-menubar .mce-menubtn:focus { + color: #124964; + -webkit-box-shadow: + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba(30, 140, 190, .8); + box-shadow: + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba(30, 140, 190, .8); } div.mce-menu .mce-menu-item-sep, .mce-menu-item-sep:hover { - margin: 5px 0 4px; + border-bottom: 1px solid #ddd; + height: 0px; + margin: 5px 0; } .mce-menubtn span { @@ -391,9 +592,8 @@ div.mce-menu .mce-menu-item-sep, -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; + -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 ); + box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 ); } /* Remove the dotted border on :focus and the extra padding in Firefox */ @@ -404,28 +604,34 @@ div.mce-menu .mce-menu-item-sep, padding: 0; } -.mce-window .mce-btn:hover { +.mce-window .mce-btn:hover, +.mce-window .mce-btn:focus { background: #fafafa; border-color: #999; - color: #222; + color: #23282d; } .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); + -webkit-box-shadow: + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba( 30, 140, 190, 0.8 ); + box-shadow: + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba( 30, 140, 190, 0.8 ); } .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 ); + color: #32373c; + -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; + color: #a0a5aa; border-color: #ddd; + background: #f7f7f7; -webkit-box-shadow: none; box-shadow: none; text-shadow: 0 1px 0 #fff; @@ -433,46 +639,58 @@ div.mce-menu .mce-menu-item-sep, } .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); + background: #00a0d2; + border-color: #0073aa; + -webkit-box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5), 0 1px 0 rgba( 0, 0, 0, 0.15 ); + box-shadow: inset 0 1px 0 rgba( 120, 200, 230, 0.5 ), 0 1px 0 rgba( 0, 0, 0, 0.15 ); color: #fff; text-decoration: none; } -.mce-window .mce-btn.mce-primary:hover { +.mce-window .mce-btn.mce-primary:hover, +.mce-window .mce-btn.mce-primary:focus { 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); + border-color: #0073aa; + -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); + -webkit-box-shadow: + inset 0 1px 0 rgba( 120, 200, 230, 0.6 ), + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba( 30, 140, 190, 0.8 ); + box-shadow: + inset 0 1px 0 rgba( 120, 200, 230, 0.6 ), + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba( 30, 140, 190, 0.8 ); } .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); + 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 ); + vertical-align: top; } .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); + -webkit-box-shadow: none; + box-shadow: none; + text-shadow: 0 -1px 0 rgba( 0, 0, 0, 0.1 ); + cursor: default; } -.mce-menubtn.mce-fixed-width button span { - max-width: 80px; - padding-right: 16px; +.mce-menubtn.mce-fixed-width button { + overflow-x: hidden; + text-overflow: ellipsis; + width: 110px; } /* Charmap modal */ @@ -502,6 +720,8 @@ div.mce-menu .mce-menu-item-sep, } .mce-tooltip-inner { + -webkit-border-radius: 3px; + border-radius: 3px; -webkit-box-shadow: 0 3px 5px rgba( 0, 0, 0, 0.2 ); box-shadow: 0 3px 5px rgba( 0, 0, 0, 0.2 ); color: #fff; @@ -528,7 +748,7 @@ div.mce-menu .mce-menu-item-sep, padding: 0; } -.qt-fullscreen { +.qt-dfw { color: #777; line-height: 20px; width: 28px; @@ -562,10 +782,12 @@ i.mce-i-strikethrough, i.mce-i-spellchecker, i.mce-i-fullscreen, i.mce-i-wp_fullscreen, +i.mce-i-dfw, i.mce-i-wp_adv, i.mce-i-underline, i.mce-i-alignjustify, i.mce-i-forecolor, +i.mce-i-backcolor, i.mce-i-pastetext, i.mce-i-pasteword, i.mce-i-removeformat, @@ -580,6 +802,8 @@ i.mce-i-wp-media-library, i.mce-i-ltr, i.mce-i-wp_page, i.mce-i-hr, +i.mce-i-wp_code, +i.mce-i-dashicon, .mce-close { font: normal 20px/1 'dashicons'; padding: 0; @@ -591,7 +815,7 @@ i.mce-i-hr, padding-right: 2px; } -.qt-fullscreen { +.qt-dfw { font: normal 20px/1 'dashicons'; vertical-align: top; speak: none; @@ -653,7 +877,8 @@ i.mce-i-spellchecker:before { i.mce-i-fullscreen:before, i.mce-i-wp_fullscreen:before, -.qt-fullscreen:before { +i.mce-i-dfw:before, +.qt-dfw:before { content: '\f211'; } @@ -669,7 +894,8 @@ i.mce-i-alignjustify:before { content: '\f214'; } -i.mce-i-forecolor:before { +i.mce-i-forecolor:before, +i.mce-i-backcolor:before { content: '\f215'; } @@ -726,8 +952,17 @@ i.mce-i-hr:before { content: '\f158'; } -.mce-i-wp_code:before { - content: '\e017'; +i.mce-i-wp_code:before { + content: '\f475'; +} + +/* RTL button icons */ +.rtl i.mce-i-outdent:before { + content: '\f222'; +} + +.rtl i.mce-i-indent:before { + content: '\f221'; } /* Editors */ @@ -740,6 +975,12 @@ i.mce-i-hr:before { z-index: 1; } +.wp-editor-tools:after { + clear: both; + content: ''; + display: table; +} + .wp-editor-container { clear: both; } @@ -759,8 +1000,12 @@ i.mce-i-hr:before { box-sizing: border-box; } -.wp-editor-tools { - padding: 0; +.rtl .wp-editor-area { + font-family: Tahoma, Monaco, monospace; +} + +.locale-he-il .wp-editor-area { + font-family: Arial, Monaco, monospace; } .wp-editor-container textarea.wp-editor-area { @@ -775,26 +1020,44 @@ i.mce-i-hr:before { } .wp-switch-editor { + float: left; + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; + position: relative; + top: 1px; background: #ebebeb; - border: 1px solid #dedede; color: #777; cursor: pointer; - float: right; font: 13px/19px "Open Sans", sans-serif; - height: 19px; + height: 20px; margin: 5px 0 0 5px; padding: 3px 8px 4px; - position: relative; - top: 1px; + border: 1px solid #e5e5e5; } -.wp-switch-editor:active { - background-color: #f1f1f1; +.wp-switch-editor:focus { + -webkit-box-shadow: + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba(30, 140, 190, .8); + box-shadow: + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba(30, 140, 190, .8); + outline: none; + color: #23282d; } -.wp-switch-editor:hover { - text-decoration: none !important; - background: #fff; +.wp-switch-editor:active, +.html-active .switch-html:focus, +.tmce-active .switch-tmce:focus { + -webkit-box-shadow: none; + box-shadow: none; +} + +.wp-switch-editor:active { + background-color: #f5f5f5; + -webkit-box-shadow: none; + box-shadow: none; } .js .tmce-active .wp-editor-area { @@ -809,8 +1072,7 @@ i.mce-i-hr:before { .html-active .switch-html { background: #f5f5f5; color: #555; - height: 20px; - border-bottom: none; + border-bottom-color: #f5f5f5; } .wp-media-buttons { @@ -875,6 +1137,7 @@ i.mce-i-hr:before { position: relative; border-bottom: 1px solid #dedede; background: #f5f5f5; + min-height: 30px; } .has-dfw .quicktags-toolbar { @@ -901,37 +1164,50 @@ i.mce-i-hr:before { font-weight: bold; } -.mce-toolbar .mce-btn-group .mce-btn.mce-wp-fullscreen, -.qt-fullscreen { +.mce-toolbar .mce-btn-group .mce-btn.mce-wp-dfw, +.qt-dfw { position: absolute; top: 0; right: 0; - margin-top: 5px; - margin-right: 5px; + margin: 5px 5px 0 0; +} + +.qt-fullscreen { + position: static; + margin: 2px; } @media screen and ( max-width: 782px ) { .mce-toolbar .mce-btn button, - .qt-fullscreen { - padding: 7px 8px; + .qt-dfw { + padding: 6px 7px; + } + + .mce-toolbar .mce-btn-group .mce-btn { + margin: 1px; } - .qt-fullscreen { - width: 38px; + .qt-dfw { + width: 36px; height: 34px; } + .mce-toolbar .mce-btn-group .mce-btn.mce-wp-dfw { + margin: 4px 4px 0 0; + } + .mce-toolbar .mce-colorbutton .mce-preview { - margin-left: -21px; + left: 8px; + bottom: 6px; } .mce-window .mce-btn { padding: 2px 0; } - div.mce-toolbar-grp, - .quicktags-toolbar { - padding-right: 46px; + .has-dfw div.mce-toolbar-grp .mce-toolbar.mce-first, + .has-dfw .quicktags-toolbar { + padding-right: 40px; } } @@ -984,7 +1260,6 @@ i.mce-i-hr:before { -webkit-box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.3 ); box-shadow: 0 3px 6px rgba( 0, 0, 0, 0.3 ); width: 500px; - height: 250px; overflow: hidden; margin-left: -250px; margin-top: -125px; @@ -1020,6 +1295,14 @@ i.mce-i-hr:before { margin-top: -250px; } +#wp-link-wrap .wp-link-text-field { + display: none; +} + +#wp-link-wrap.has-text-field .wp-link-text-field { + display: block; +} + #link-modal-title { background: #fcfcfc; border-bottom: 1px solid #dfdfdf; @@ -1035,7 +1318,6 @@ i.mce-i-hr:before { #wp-link-close { color: #666; - cursor: pointer; padding: 0; position: absolute; top: 0; @@ -1043,6 +1325,9 @@ i.mce-i-hr:before { width: 36px; height: 36px; text-align: center; + background: none; + border: none; + cursor: pointer; } #wp-link-close:before { @@ -1058,7 +1343,17 @@ i.mce-i-hr:before { #wp-link-close:hover, #wp-link-close:focus { - color: #2ea2cc; + color: #00a0d2; +} + +#wp-link-close:focus { + outline: none; + -webkit-box-shadow: + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba(30, 140, 190, .8); + box-shadow: + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba(30, 140, 190, .8); } #link-selector { @@ -1066,6 +1361,7 @@ i.mce-i-hr:before { } #wp-link-wrap.search-panel-visible #link-selector { + -webkit-overflow-scrolling: touch; padding: 0 16px; position: absolute; top: 36px; @@ -1081,7 +1377,8 @@ i.mce-i-hr:before { padding: 0; } -#wp-link-search-toggle::after { +#wp-link-search-toggle:after { + display: inline-block; font: normal 20px/1 'dashicons'; vertical-align: top; speak: none; @@ -1090,7 +1387,7 @@ i.mce-i-hr:before { content: '\f140'; } -.search-panel-visible #wp-link-search-toggle::after { +.search-panel-visible #wp-link-search-toggle:after { content: '\f142'; } @@ -1108,6 +1405,11 @@ i.mce-i-hr:before { margin: 3px 0; } +#wp-link p.howto a { + text-decoration: none; + color: inherit; +} + #wp-link-search-toggle { cursor: pointer; } @@ -1124,6 +1426,8 @@ i.mce-i-hr:before { text-align: right; padding-right: 5px; max-width: 24%; + vertical-align: middle; + word-wrap: break-word; } #wp-link .link-search-field { @@ -1144,8 +1448,7 @@ i.mce-i-hr:before { } #wp-link .link-search-wrapper .spinner { - display: none; - vertical-align: text-bottom; + margin-top: 5px; } #wp-link .link-target { @@ -1168,20 +1471,53 @@ i.mce-i-hr:before { left: 16px; right: 16px; bottom: 16px; + top: 172px; +} + +.has-text-field #wp-link .query-results { top: 205px; } -#wp-link li, -#wp-link .query-notice { +#wp-link li { clear: both; margin-bottom: 0; border-bottom: 1px solid #f1f1f1; - color: #333; - padding: 4px 6px; + color: #32373c; + padding: 4px 6px 4px 10px; cursor: pointer; position: relative; } +#wp-link .query-notice { + padding: 0; + border-bottom: 1px solid #dfdfdf; + background-color: #f7fcfe; + color: #000; +} + +#wp-link .query-notice .query-notice-default, +#wp-link .query-notice .query-notice-hint { + display: block; + padding: 6px; + border-left: 4px solid #00a0d2; +} + +#wp-link .unselectable.no-matches-found { + padding: 0; + border-bottom: 1px solid #dfdfdf; + background-color: #fef7f1; +} + +#wp-link .no-matches-found .item-title { + display: block; + padding: 6px; + border-left: 4px solid #d54e21; +} + +#wp-link .query-results em { + font-style: normal; +} + #wp-link li:hover { background: #eaf2fa; color: #151515; @@ -1194,12 +1530,12 @@ i.mce-i-hr:before { #wp-link li.unselectable:hover { background: #fff; cursor: auto; - color: #333; + color: #32373c; } #wp-link li.selected { background: #ddd; - color: #333; + color: #32373c; } #wp-link li.selected .item-title { @@ -1215,6 +1551,7 @@ i.mce-i-hr:before { width: 80%; width: -webkit-calc(100% - 68px); width: calc(100% - 68px); + word-wrap: break-word; } #wp-link .item-info { @@ -1240,12 +1577,6 @@ i.mce-i-hr:before { padding: 10px 0; } -#wp-link .river-waiting .spinner { - margin: 0 auto; - display: block; - float: none; -} - #wp-link .submitbox { padding: 8px 16px; background: #fcfcfc; @@ -1258,6 +1589,7 @@ i.mce-i-hr:before { #wp-link-cancel { line-height: 25px; + float: left; } #wp-link-update { @@ -1272,11 +1604,14 @@ i.mce-i-hr:before { @media screen and ( max-width: 782px ) { #wp-link-wrap { - height: 280px; margin-top: -140px; } #wp-link-wrap.search-panel-visible .query-results { + top: 195px; + } + + #wp-link-wrap.search-panel-visible.has-text-field .query-results { top: 235px; } @@ -1345,509 +1680,42 @@ i.mce-i-hr:before { } } -/* Old TinyMCE 3.x modal */ -/* -.clearlooks2 .mceTop { - border-bottom: 1px solid #ccc; -} - -.clearlooks2 .mceTop span { - font: 13px/24px "Open Sans", sans-serif; - color: #e5e5e5; -} - -.clearlooks2 .mceTop .mceLeft { - background: #444444; - border-color: transparent; -} - -.clearlooks2 .mceTop .mceRight { - background: #444444; - border-color: transparent; -} - -.clearlooks2 .mceMiddle { - clip: rect(24px auto auto auto); -} - -.clearlooks2 .mceMiddle .mceLeft { - background: #f1f1f1; - border-color: transparent; -} - -.clearlooks2 .mceMiddle .mceRight { - background: #f1f1f1; - border-color: transparent; -} - -.clearlooks2 .mceBottom { - background: #f1f1f1; - border-color: transparent; -} - -.clearlooks2 .mceBottom .mceLeft { - background: #f1f1f1; - border-color: transparent; -} - -.clearlooks2 .mceBottom .mceCenter { - background: #f1f1f1; - border-color: transparent; -} - -.clearlooks2 .mceBottom .mceRight { - background: #f1f1f1; - border-color: transparent; -} - -.clearlooks2 .mceClose, -.clearlooks2 .mceFocus .mceClose, -.clearlooks2 .mceFocus .mceClose:hover { - background-image: none; -} -.clearlooks2 .mceClose:before { - content: '\f158'; - font: normal 20px/1 'dashicons'; - speak: none; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - color: #999; - padding-left: 12px; -} - -/* from colors.css -.clearlooks2 { - box-shadow: 0 5px 15px rgba(0,0,0,0.7); -} - -.clearlooks2 .mceMiddle span, -.clearlooks2 .mceMiddle .mceLeft, -.clearlooks2 .mceMiddle .mceRight, -.clearlooks2 .mceBottom, -.clearlooks2 .mceBottom .mceLeft, -.clearlooks2 .mceBottom .mceCenter, -.clearlooks2 .mceBottom .mceRight { - background-color: #fcfcfc; -} - -.clearlooks2 .mceTop span, -.clearlooks2 .mceFocus .mceTop span { - color: #222; -} - -.clearlooks2 .mceClose:before { - color: #999; -} - -.clearlooks2 .mceClose:hover:before { - color: #2ea2cc; -} -*/ -/* Distraction Free Writing mode - * =Overlay Styles --------------------------------------------------------------- */ -.fullscreen-overlay { - z-index: 100005; - display: none; - position: fixed; - top: 0; - bottom: 0; - left: 0; - right: 0; - -webkit-filter: inherit; - filter: inherit; -} - -.wp-fullscreen-active .fullscreen-overlay, -.wp-fullscreen-active #wp-fullscreen-body { - display: block; +div.wp-link-preview { + float: left; + margin: 5px; + max-width: 694px; + overflow: hidden; + text-overflow: ellipsis; } -.fullscreen-fader { - z-index: 200000; +div.wp-link-preview a { + color: #0073aa; + text-decoration: underline; + -webkit-transition-property: border, background, color; + transition-property: border, background, color; + -webkit-transition-duration: .05s; + transition-duration: .05s; + -webkit-transition-timing-function: ease-in-out; + transition-timing-function: ease-in-out; + cursor: pointer; } -.wp-fullscreen-active .fullscreen-fader, -.wp-core-ui.wp-fullscreen-active .postbox-container { - display: none; +@media screen and ( max-width: 782px ) { + div.wp-link-preview { + margin: 8px 0 8px 5px; + max-width: 70%; + max-width: -webkit-calc(100% - 86px); + max-width: calc(100% - 86px); + } } /* =Overlay Body -------------------------------------------------------------- */ -#wp-fullscreen-body, .mce-fullscreen { z-index: 100010; } -#wp-fullscreen-body { - display: none; -} - -.wp-fullscreen-wrap { - margin: 0; - padding: 0; - position: absolute; - left: 0; - right: 0; - bottom: 30px; - top: 60px; - z-index: 100015; -} - -.wp-fullscreen-wrap .wp-editor-container, -.wp-fullscreen-title, -#wp-fullscreen-central-toolbar { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - max-width: 100%; -} - -.wp-fullscreen-active .wp-editor-tools, -.wp-fullscreen-active .quicktags-toolbar, -.wp-fullscreen-active .mce-toolbar-grp, -.wp-fullscreen-active .mce-statusbar { - display: none; -} - -#wp-fullscreen-statusbar { - position: fixed; - left: 0; - right: 0; - bottom: 0; - height: 30px; - z-index: 100020; - background: #fff; - -webkit-transition: height 0.2s; - transition: height 0.2s; -} - -#wp-fullscreen-status { - margin: 0 auto; - padding: 0; -} - -.wp-fullscreen-active .wp-fullscreen-title, -.wp-fullscreen-active .wp-fullscreen-title:focus, -.wp-fullscreen-active .wp-editor-container { - -webkit-border-radius: 0; - border-radius: 0; - border: 1px dashed transparent; - background: transparent; - -webkit-box-shadow: none; - box-shadow: none; - -webkit-transition: border-color 0.4s; - transition: border-color 0.4s; -} - -.wp-fullscreen-active .wp-editor-container { - margin: 0 auto 40px; -} - -.wp-fullscreen-active .wp-fullscreen-title { - font-size: 1.7em; - line-height: 100%; - outline: medium none; - padding: 3px 7px; - margin: 10px auto 30px; - display: block; -} - -#wp-fullscreen-tagline { - color: #888; - font-size: 18px; - float: right; - padding: 4px 0 0; -} - -/* =Top bar --------------------------------------------------------------- */ -#fullscreen-topbar { - background: #f5f5f5; - border-bottom: 1px solid #dedede; - height: 45px; - position: fixed; - left: 0; - right: 0; - top: 0; - width: 100%; - z-index: 100020; - -webkit-transition: opacity 0.4s; - transition: opacity 0.4s; -} - -#wp-fullscreen-toolbar { - padding: 6px 10px 0; - clear: both; - max-width: 1100px; - margin: 0 auto; -} - -#wp-fullscreen-mode-bar, -#wp-fullscreen-button-bar, -#wp-fullscreen-close { - float: left; -} - -#wp-fullscreen-count, -#wp-fullscreen-tagline { - display: inline-block; -} - -#wp-fullscreen-button-bar { - margin-top: 2px; -} - -#wp-fullscreen-save { - float: right; - padding: 2px 0 0; - min-width: 95px; -} - -#wp-fullscreen-count, -#wp-fullscreen-close { - padding: 5px 0 0; -} - -#wp-fullscreen-central-toolbar { - margin: auto; - padding: 0; - min-width: 620px; -} - -#wp-fullscreen-buttons > div { - float: left; -} - -#wp-fullscreen-mode-bar { - padding: 3px 14px 0 0; -} - -#wp-fullscreen-buttons .hidden { - display: none; -} - -#wp-fullscreen-buttons .disabled { - opacity: 0.5; -} - -#wp-fullscreen-buttons .mce-btn button { - margin: 0; - outline: 0 none; - border: 0 none; - white-space: nowrap; - width: auto; - background: none; - color: #333333; - cursor: pointer; - font-size: 18px; - line-height: 20px; - overflow: visible; - text-align: center; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -.wp-html-mode #wp-fullscreen-buttons div { - display: none; -} - -.wp-html-mode #wp-fullscreen-buttons div.wp-fullscreen-both { - display: block; -} - -#wp-fullscreen-save img { - vertical-align: middle; -} - -#wp-fullscreen-save span { - display: none; - margin: 5px 6px 0; - float: left; -} - -/* =Thickbox Adjustments --------------------------------------------------------------- */ -.wp-fullscreen-active #TB_overlay { - z-index: 100050; -} - -.wp-fullscreen-active #TB_window { - z-index: 100051; -} - -/* Colors */ -.fullscreen-overlay { - background: #fff; -} - -/* =CSS 3 transitions --------------------------------------------------------------- */ - -.wp-fullscreen-active #fullscreen-topbar { - -webkit-transition-duration: 0.8s; - transition-duration: 0.8s; - opacity: 0; - filter: alpha(opacity=0); -} - -.wp-fullscreen-active #wp-fullscreen-statusbar { - height: 0; -} - -.wp-fullscreen-active.wp-dfw-show-ui #fullscreen-topbar { - -webkit-transition-duration: 0.4s; - transition-duration: 0.4s; - opacity: 1; - filter: alpha(opacity=100); -} - -.wp-fullscreen-active.wp-dfw-show-ui #wp-fullscreen-statusbar { - height: 29px; - background: #f8f8f8; - border-top: 1px solid #eee; -} - -.wp-fullscreen-active .wp-fullscreen-title, -.wp-fullscreen-active .wp-editor-container { - -webkit-transition-duration: 0.8s; - transition-duration: 0.8s; - border-color: transparent; -} - -.wp-fullscreen-active.wp-dfw-show-ui .wp-fullscreen-title, -.wp-fullscreen-active.wp-dfw-show-ui .wp-editor-container { - -webkit-transition-duration: 0.4s; - transition-duration: 0.4s; - border-color: #ccc; -} - -.fade-1000, -.fade-600, -.fade-400, -.fade-300 { - opacity: 0; - -webkit-transition-property: opacity; - transition-property: opacity; -} - -.fade-1000 { - -webkit-transition-duration: 1s; - transition-duration: 1s; -} - -.fade-600 { - -webkit-transition-duration: 0.6s; - transition-duration: 0.6s; -} - -.fade-400 { - -webkit-transition-duration: 0.4s; - transition-duration: 0.4s; -} - -.fade-300 { - -webkit-transition-duration: 0.3s; - transition-duration: 0.3s; -} - -.fade-trigger { - opacity: 1; -} - -/* DFW on touch screen devices */ -.wp-dfw-touch #fullscreen-topbar { - position: absolute; - opacity: 1; -} - -.wp-dfw-touch .wp-fullscreen-wrap .wp-editor-container, -.wp-dfw-touch .wp-fullscreen-title { - max-width: 700px; -} - -.wp-fullscreen-active.wp-dfw-touch .wp-fullscreen-title, -.wp-fullscreen-active.wp-dfw-touch .wp-editor-container { - border-color: #ccc; -} - -.wp-dfw-touch #wp-fullscreen-statusbar { - height: 30px; -} - -@media screen and ( max-width: 782px ) { - #wp-fullscreen-close, - #wp-fullscreen-central-toolbar, - #wp-fullscreen-mode-bar, - #wp-fullscreen-button-bar, - #wp-fullscreen-save { - display: inline-block; - } - - #fullscreen-topbar { - height: 85px; - } - - #wp-fullscreen-central-toolbar { - width: auto !important; - min-width: 0; - } - - #wp-fullscreen-close { - line-height: 30px; - vertical-align: top; - padding: 0 12px; - } - - #wp-fullscreen-button-bar { - position: absolute; - top: 45px; - left: 0; - } - - .wp-fullscreen-wrap { - top: 95px; - } - - #wp-fullscreen-save { - position: absolute; - right: 10px; - } -} - -@media screen and ( max-width: 480px ) { - #wp_fs_help { - display: none; - } - - .wp-fullscreen-wrap .wp-editor-container, - .wp-fullscreen-title { - width: 480px !important; - } - - body.wp-fullscreen-active { - width: 480px; - overflow: auto; - } - - #fullscreen-topbar, - .wp-fullscreen-wrap { - width: 480px; - } - - #fullscreen-topbar { - position: absolute; - } - - #wp-fullscreen-status { - width: auto !important; - max-width: 100%; - padding: 0 10px; - } -} - /* =Localization -------------------------------------------------------------- */ .rtl .wp-switch-editor, @@ -1855,12 +1723,12 @@ i.mce-i-hr:before { font-family: Tahoma, sans-serif; } -/* @noflip */ +/* rtl:ignore */ .mce-rtl .mce-flow-layout .mce-flow-layout-item > div { direction: rtl; } -/* @noflip */ +/* rtl:ignore */ .mce-rtl .mce-listbox i.mce-caret { left: 6px; } @@ -1872,13 +1740,9 @@ html:lang(he-il) .rtl .quicktags-toolbar input { /* HiDPI */ @media print, - (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { - .wp-media-buttons .add_media span.wp-media-buttons-icon, - #wp-fullscreen-buttons #wp_fs_image span.mce_image { + .wp-media-buttons .add_media span.wp-media-buttons-icon { background: none; } } - -/* TODO: DFW responsive */