X-Git-Url: https://scripts.mit.edu/gitweb/autoinstalls/wordpress.git/blobdiff_plain/53f4633144ed68c8b8fb5861f992b5489894a940..16e7b37c7914d753890c1a05a9335f3b43751eb8:/wp-includes/css/editor.css diff --git a/wp-includes/css/editor.css b/wp-includes/css/editor.css index b89e9390..e04317ec 100644 --- a/wp-includes/css/editor.css +++ b/wp-includes/css/editor.css @@ -12,6 +12,13 @@ font-family: inherit; } +.mce-container .mce-monospace, +.mce-widget .mce-monospace { + font-family: Consolas, Monaco, monospace; + font-size: 13px; + line-height: 150%; +} + /* TinyMCE windows */ #mce-modal-block, #mce-modal-block.mce-fade { @@ -37,7 +44,7 @@ .mce-window .mce-window-head { background: #fcfcfc; - border-bottom: 1px solid #dfdfdf; + border-bottom: 1px solid #ddd; padding: 0; min-height: 36px; } @@ -51,18 +58,20 @@ padding: 0 36px 0 16px; } -.mce-window .mce-window-head .mce-close { +.mce-window .mce-window-head .mce-close, +.mce-window-head .mce-close .mce-i-remove { color: transparent; top: 0; right: 0; width: 36px; height: 36px; + padding: 0; line-height: 36px; text-align: center; } -.mce-window .mce-window-head .mce-close:before { - font: normal 20px/36px 'dashicons'; +.mce-window-head .mce-close .mce-i-remove:before { + font: normal 20px/36px dashicons; text-align: center; color: #666; width: 36px; @@ -70,17 +79,26 @@ display: block; } -.mce-window .mce-window-head .mce-close:hover:before { +.mce-window-head .mce-close:hover .mce-i-remove:before, +.mce-window-head .mce-close:focus .mce-i-remove:before { color: #00a0d2; } +.mce-window-head .mce-close:focus .mce-i-remove, +div.mce-tab: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); +} + .mce-window .mce-window-head .mce-dragh { width: -webkit-calc( 100% - 36px ); width: calc( 100% - 36px ); } .mce-window .mce-foot { - border-top: 1px solid #dfdfdf; + border-top: 1px solid #ddd; } .mce-textbox, @@ -129,7 +147,7 @@ margin: 8px 0; white-space: normal; font-size: 14px; - font-weight: normal; + font-weight: 400; } .mce-window .wp-editor-help table { @@ -137,6 +155,28 @@ margin-bottom: 20px; } +.mce-window .wp-editor-help table.wp-help-single { + margin: 0 8px 20px; +} + +.mce-window .wp-editor-help table.fixed { + table-layout: fixed; +} + +.mce-window .wp-editor-help table.fixed th:nth-child(odd), +.mce-window .wp-editor-help table.fixed td:nth-child(odd) { + width: 12%; +} + +.mce-window .wp-editor-help table.fixed th:nth-child(even), +.mce-window .wp-editor-help table.fixed td:nth-child(even) { + width: 38%; +} + +.mce-window .wp-editor-help table.fixed th:nth-child(odd) { + padding: 5px 0 0; +} + .mce-window .wp-editor-help td, .mce-window .wp-editor-help th { font-size: 13px; @@ -147,24 +187,19 @@ } .mce-window .wp-editor-help th { - font-weight: bold; + font-weight: 600; padding-bottom: 0; } .mce-window .wp-editor-help kbd { font-family: monospace; padding: 2px 7px 3px; - font-weight: bold; + font-weight: 600; 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; @@ -218,7 +253,7 @@ div.mce-tab { /* TinyMCE toolbars */ div.mce-toolbar-grp { - border-bottom: 1px solid #dedede; + border-bottom: 1px solid #ddd; background: #f5f5f5; padding: 0; position: relative; @@ -261,7 +296,7 @@ div.mce-inline-toolbar-grp:after { height: 0; border-style: solid; border-color: transparent; - content: ''; + content: ""; } div.mce-inline-toolbar-grp.mce-arrow-up:before { @@ -364,6 +399,11 @@ div.mce-path { cursor: pointer; } +.mce-btn .mce-txt { + direction: inherit; + text-align: inherit; +} + .mce-toolbar .mce-btn-group .mce-btn, .qt-dfw { border: 1px solid transparent; @@ -377,7 +417,7 @@ div.mce-path { .qt-dfw:hover, .qt-dfw:focus { background: #fafafa; - border-color: #999; + border-color: #555d66; 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 ); @@ -388,17 +428,14 @@ div.mce-path { .mce-toolbar .mce-btn-group .mce-btn:active, .qt-dfw.active { background: #ebebeb; - border-color: #999; + border-color: #555d66; -webkit-box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.3 ); box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.3 ); } -.mce-toolbar .mce-btn-group .mce-btn.mce-active:hover { - border-color: #555; -} - -.mce-toolbar .mce-btn-group .mce-btn.mce-active:hover i.mce-ico { - color: #555; +.mce-toolbar .mce-btn-group .mce-btn.mce-active:hover, +.mce-toolbar .mce-btn-group .mce-btn.mce-active:focus { + border-color: #23282d; } .mce-toolbar .mce-btn-group .mce-btn.mce-disabled:hover, @@ -411,6 +448,10 @@ div.mce-path { box-shadow: none; } +.mce-toolbar .mce-btn-group .mce-btn.mce-disabled:focus { + border-color: #555d66; +} + .mce-toolbar .mce-btn-group .mce-first, .mce-toolbar .mce-btn-group .mce-last { border-color: transparent; @@ -449,6 +490,46 @@ div.mce-path { left: 3px; height: 3px; width: 20px; + background: #555d66; +} + +.mce-toolbar .mce-btn-group .mce-btn.mce-primary { + min-width: 0; + background: #0085ba; + border-color: #0073aa #006799 #006799; + -webkit-box-shadow: 0 1px 0 #006799; + box-shadow: 0 1px 0 #006799; + color: #fff; + text-decoration: none; + text-shadow: none; +} + +/* Compensate for the extra box shadow at the bottom of .mce-btn.mce-primary */ +.mce-toolbar .mce-btn-group .mce-btn.mce-primary button { + padding: 2px 3px 1px; +} + +.mce-toolbar .mce-btn-group .mce-btn.mce-primary .mce-ico { + color: #fff; +} + +.mce-toolbar .mce-btn-group .mce-btn.mce-primary:hover, +.mce-toolbar .mce-btn-group .mce-btn.mce-primary:focus { + background: #008ec2; + border-color: #006799; + color: #fff; +} + +.mce-toolbar .mce-btn-group .mce-btn.mce-primary:focus { + -webkit-box-shadow: 0 0 1px 1px #33b3db; + box-shadow: 0 0 1px 1px #33b3db; +} + +.mce-toolbar .mce-btn-group .mce-btn.mce-primary:active { + background: #0073aa; + border-color: #006799; + -webkit-box-shadow: inset 0 2px 0 #006799; + box-shadow: inset 0 2px 0 #006799; } /* mce listbox */ @@ -462,12 +543,13 @@ div.mce-path { box-shadow: inset 0 1px 1px -1px rgba(0, 0, 0, .2); } -.mce-toolbar .mce-btn-group .mce-btn.mce-listbox:hover { +.mce-toolbar .mce-btn-group .mce-btn.mce-listbox:hover, +.mce-toolbar .mce-btn-group .mce-btn.mce-listbox:focus { border-color: #b4b9be; } .mce-panel .mce-btn i.mce-caret { - border-top: 6px solid #777; + border-top: 6px solid #555d66; margin-left: 2px; margin-right: 2px; } @@ -476,13 +558,14 @@ div.mce-path { right: 4px; } -.mce-panel .mce-btn:hover i.mce-caret { - border-top-color: #32373c; +.mce-panel .mce-btn:hover i.mce-caret, +.mce-panel .mce-btn:focus i.mce-caret { + border-top-color: #23282d; } .mce-panel .mce-active i.mce-caret { border-top: 0; - border-bottom: 6px solid #32373c; + border-bottom: 6px solid #23282d; margin-top: 7px; } @@ -505,6 +588,7 @@ div.mce-path { .mce-menu .mce-menu-item-normal.mce-active, .mce-menu .mce-menu-item-preview.mce-active { background: #0073aa; /* See color scheme. */ + color: #fff; } .mce-menu .mce-menu-item-preview.mce-active { @@ -567,6 +651,16 @@ div.mce-menu .mce-menu-item-sep, margin-left: -2px; } +/* Keyboard shortcuts position */ +.mce-menu.mce-menu-align .mce-menu-item-normal { + position: relative; +} + +.mce-menu.mce-menu-align .mce-menu-shortcut { + bottom: 0.6em; + font-size: 0.9em; +} + /* Buttons in modals */ .mce-primary button, .mce-primary button i { @@ -587,20 +681,19 @@ div.mce-menu .mce-menu-item-sep, margin: 0; padding: 0; cursor: pointer; - border: 1px solid #ccc; + border: 1px solid #cccccc; -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, 0.08 ); - box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgba( 0, 0, 0, 0.08 ); + -webkit-box-shadow: 0 1px 0 #cccccc; + box-shadow: 0 1px 0 #cccccc; } /* Remove the dotted border on :focus and the extra padding in Firefox */ .mce-window .mce-btn::-moz-focus-inner { - border-width: 1px 0; - border-style: solid none; - border-color: transparent; + border-width: 0; + border-style: none; padding: 0; } @@ -612,78 +705,76 @@ div.mce-menu .mce-menu-item-sep, } .mce-window .mce-btn:focus { - -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 ); + border-color: #5b9dd9; + -webkit-box-shadow: 0 0 3px rgba( 0, 115, 170, .8 ); + box-shadow: 0 0 3px rgba( 0, 115, 170, .8 ); } .mce-window .mce-btn:active { background: #eee; border-color: #999; - 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 ); + -webkit-transform: translateY(1px); + -ms-transform: translateY(1px); + transform: translateY(1px); } .mce-window .mce-btn.mce-disabled { - color: #a0a5aa; - border-color: #ddd; - background: #f7f7f7; - -webkit-box-shadow: none; - box-shadow: none; - text-shadow: 0 1px 0 #fff; + color: #a0a5aa !important; + border-color: #ddd !important; + background: #f7f7f7 !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; + text-shadow: 0 1px 0 #fff !important; cursor: default; + -webkit-transform: none !important; + -ms-transform: none !important; + transform: none !important; } .mce-window .mce-btn.mce-primary { - 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 ); + background: #0085ba; + border-color: #0073aa #006799 #006799; + -webkit-box-shadow: 0 1px 0 #006799; + box-shadow: 0 1px 0 #006799; color: #fff; text-decoration: none; + text-shadow: 0 -1px 1px #006799, + 1px 0 1px #006799, + 0 1px 1px #006799, + -1px 0 1px #006799; } .mce-window .mce-btn.mce-primary:hover, .mce-window .mce-btn.mce-primary:focus { - background: #1e8cbe; - 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 ); + background: #008ec2; + border-color: #006799; 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 ), - 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 ); + -webkit-box-shadow: 0 1px 0 #0073aa, + 0 0 2px 1px #33b3db; + box-shadow: 0 1px 0 #0073aa, + 0 0 2px 1px #33b3db; } .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 ); + background: #0073aa; + border-color: #006799; + -webkit-box-shadow: inset 0 2px 0 #006799; + box-shadow: inset 0 2px 0 #006799; vertical-align: top; } .mce-window .mce-btn.mce-primary.mce-disabled { - color: #94cde7; - background: #298cba; - border-color: #1b607f; - -webkit-box-shadow: none; - box-shadow: none; - text-shadow: 0 -1px 0 rgba( 0, 0, 0, 0.1 ); + color: #66c6e4 !important; + background: #008ec2 !important; + border-color: #007cb2 !important; + -webkit-box-shadow: none !important; + box-shadow: none !important; + text-shadow: 0 -1px 0 rgba( 0, 0, 0, 0.1 ) !important; cursor: default; } @@ -700,7 +791,7 @@ div.mce-menu .mce-menu-item-sep, .mce-charmap td { padding: 0; - border-color: #dfdfdf; + border-color: #ddd; cursor: pointer; } @@ -738,7 +829,7 @@ div.mce-menu .mce-menu-item-sep, } .mce-toolbar .mce-ico { - color: #777; + color: #555d66; line-height: 20px; width: 20px; height: 20px; @@ -749,7 +840,7 @@ div.mce-menu .mce-menu-item-sep, } .qt-dfw { - color: #777; + color: #555d66; line-height: 20px; width: 28px; height: 26px; @@ -764,7 +855,24 @@ div.mce-menu .mce-menu-item-sep, .mce-toolbar .mce-btn:hover .mce-open, .mce-toolbar .mce-btn:focus .mce-open, .mce-toolbar .mce-btn.mce-active .mce-open { - border-left-color: #999; + border-left-color: #23282d; +} + +div.mce-notification { + left: 10% !important; + right: 10%; +} + +.mce-notification button.mce-close { + right: 6px; + top: 3px; + font-weight: 400; + color: #555d66; +} + +.mce-notification button.mce-close:hover, +.mce-notification button.mce-close:focus { + color: #000; } i.mce-i-bold, @@ -804,8 +912,8 @@ 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'; +i.mce-i-remove { + font: normal 20px/1 dashicons; padding: 0; vertical-align: top; speak: none; @@ -816,7 +924,7 @@ i.mce-i-dashicon, } .qt-dfw { - font: normal 20px/1 'dashicons'; + font: normal 20px/1 dashicons; vertical-align: top; speak: none; -webkit-font-smoothing: antialiased; @@ -824,145 +932,145 @@ i.mce-i-dashicon, } i.mce-i-bold:before { - content: '\f200'; + content: "\f200"; } i.mce-i-italic:before { - content: '\f201'; + content: "\f201"; } i.mce-i-bullist:before { - content: '\f203'; + content: "\f203"; } i.mce-i-numlist:before { - content: '\f204'; + content: "\f204"; } i.mce-i-blockquote:before { - content: '\f205'; + content: "\f205"; } i.mce-i-alignleft:before { - content: '\f206'; + content: "\f206"; } i.mce-i-aligncenter:before { - content: '\f207'; + content: "\f207"; } i.mce-i-alignright:before { - content: '\f208'; + content: "\f208"; } i.mce-i-link:before { - content: '\f103'; + content: "\f103"; } i.mce-i-unlink:before { - content: '\f225'; + content: "\f225"; } i.mce-i-wp_more:before { - content: '\f209'; + content: "\f209"; } i.mce-i-strikethrough:before { - content: '\f224'; + content: "\f224"; } i.mce-i-spellchecker:before { - content: '\f210'; + content: "\f210"; } i.mce-i-fullscreen:before, i.mce-i-wp_fullscreen:before, i.mce-i-dfw:before, .qt-dfw:before { - content: '\f211'; + content: "\f211"; } i.mce-i-wp_adv:before { - content: '\f212'; + content: "\f212"; } i.mce-i-underline:before { - content: '\f213'; + content: "\f213"; } i.mce-i-alignjustify:before { - content: '\f214'; + content: "\f214"; } i.mce-i-forecolor:before, i.mce-i-backcolor:before { - content: '\f215'; + content: "\f215"; } i.mce-i-pastetext:before { - content: '\f217'; + content: "\f217"; } i.mce-i-removeformat:before { - content: '\f218'; + content: "\f218"; } i.mce-i-charmap:before { - content: '\f220'; + content: "\f220"; } i.mce-i-outdent:before { - content: '\f221'; + content: "\f221"; } i.mce-i-indent:before { - content: '\f222'; + content: "\f222"; } i.mce-i-undo:before { - content: '\f171'; + content: "\f171"; } i.mce-i-redo:before { - content: '\f172'; + content: "\f172"; } i.mce-i-help:before, i.mce-i-wp_help:before { - content: '\f223'; + content: "\f223"; } i.mce-i-wp-media-library:before { - content: '\f104'; + content: "\f104"; } i.mce-i-ltr:before { - content: '\f320'; + content: "\f320"; } i.mce-i-wp_page:before { - content: '\f105'; + content: "\f105"; } i.mce-i-hr:before { - content: '\f460'; + content: "\f460"; } -.mce-close:before { - content: '\f158'; +i.mce-i-remove:before { + content: "\f158"; } i.mce-i-wp_code:before { - content: '\f475'; + content: "\f475"; } /* RTL button icons */ .rtl i.mce-i-outdent:before { - content: '\f222'; + content: "\f222"; } .rtl i.mce-i-indent:before { - content: '\f221'; + content: "\f221"; } /* Editors */ @@ -977,7 +1085,7 @@ i.mce-i-wp_code:before { .wp-editor-tools:after { clear: both; - content: ''; + content: ""; display: table; } @@ -991,7 +1099,7 @@ i.mce-i-wp_code:before { padding: 10px; margin: 1px 0 0; line-height: 150%; - border: 0 none; + border: 0; outline: none; display: block; resize: vertical; @@ -1027,9 +1135,10 @@ i.mce-i-wp_code:before { position: relative; top: 1px; background: #ebebeb; - color: #777; + color: #666; cursor: pointer; - font: 13px/19px "Open Sans", sans-serif; + font-size: 13px; + line-height: 19px; height: 20px; margin: 5px 0 0 5px; padding: 3px 8px 4px; @@ -1061,7 +1170,7 @@ i.mce-i-wp_code:before { } .js .tmce-active .wp-editor-area { - color: white; + color: #fff; } .tmce-active .quicktags-toolbar { @@ -1099,7 +1208,7 @@ i.mce-i-wp_code:before { .wp-media-buttons a { text-decoration: none; - color: #464646; + color: #444; font-size: 12px; } @@ -1121,21 +1230,21 @@ i.mce-i-wp_code:before { } .wp-media-buttons .add_media span.wp-media-buttons-icon:before { - font: normal 18px/1 'dashicons'; + font: normal 18px/1 dashicons; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .wp-media-buttons .add_media span.wp-media-buttons-icon:before { - content: '\f104'; + content: "\f104"; } /* Quicktags */ .quicktags-toolbar { padding: 3px; position: relative; - border-bottom: 1px solid #dedede; + border-bottom: 1px solid #ddd; background: #f5f5f5; min-height: 30px; } @@ -1161,7 +1270,7 @@ i.mce-i-wp_code:before { } .quicktags-toolbar input[value="b"] { - font-weight: bold; + font-weight: 600; } .mce-toolbar .mce-btn-group .mce-btn.mce-wp-dfw, @@ -1183,6 +1292,11 @@ i.mce-i-wp_code:before { padding: 6px 7px; } + /* Compensate for the extra box shadow at the bottom of .mce-btn.mce-primary */ + .mce-toolbar .mce-btn-group .mce-btn.mce-primary button { + padding: 6px 7px 5px; + } + .mce-toolbar .mce-btn-group .mce-btn { margin: 1px; } @@ -1213,7 +1327,7 @@ i.mce-i-wp_code:before { @media screen and ( min-width: 782px ) { .wp-core-ui .quicktags-toolbar input.button.button-small { - /* .button-small is normaly 11px, but a bit too small for these buttons. */ + /* .button-small is normally 11px, but a bit too small for these buttons. */ font-size: 12px; height: 26px; line-height: 24px; @@ -1290,7 +1404,7 @@ i.mce-i-wp_code:before { height: 100%; } -#wp-link-wrap.search-panel-visible { +#wp-link-wrap { height: 500px; margin-top: -250px; } @@ -1305,15 +1419,13 @@ i.mce-i-wp_code:before { #link-modal-title { background: #fcfcfc; - border-bottom: 1px solid #dfdfdf; + border-bottom: 1px solid #ddd; height: 36px; font-size: 18px; font-weight: 600; line-height: 36px; + margin: 0; padding: 0 36px 0 16px; - top: 0; - right: 0; - left: 0; } #wp-link-close { @@ -1331,14 +1443,14 @@ i.mce-i-wp_code:before { } #wp-link-close:before { - font: normal 20px/36px 'dashicons'; + font: normal 20px/36px dashicons; vertical-align: top; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; width: 36px; height: 36px; - content: '\f158'; + content: "\f158"; } #wp-link-close:hover, @@ -1356,15 +1468,11 @@ i.mce-i-wp_code:before { 0 0 2px 1px rgba(30, 140, 190, .8); } -#link-selector { - padding: 0 16px 50px; -} - -#wp-link-wrap.search-panel-visible #link-selector { +#wp-link-wrap #link-selector { -webkit-overflow-scrolling: touch; padding: 0 16px; position: absolute; - top: 36px; + top: 37px; left: 0; right: 0; bottom: 44px; @@ -1377,20 +1485,6 @@ i.mce-i-wp_code:before { padding: 0; } -#wp-link-search-toggle:after { - display: inline-block; - font: normal 20px/1 'dashicons'; - vertical-align: top; - speak: none; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - content: '\f140'; -} - -.search-panel-visible #wp-link-search-toggle:after { - content: '\f142'; -} - #wp-link input[type="text"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; @@ -1410,10 +1504,6 @@ i.mce-i-wp_code:before { color: inherit; } -#wp-link-search-toggle { - cursor: pointer; -} - #wp-link label input[type="text"] { margin-top: 5px; width: 70%; @@ -1464,18 +1554,18 @@ i.mce-i-wp_code:before { #wp-link .query-results { border: 1px #dfdfdf solid; - margin: 0; + margin: 0 0 12px; background: #fff; overflow: auto; position: absolute; left: 16px; right: 16px; - bottom: 16px; - top: 172px; + bottom: 0; + top: 166px; } .has-text-field #wp-link .query-results { - top: 205px; + top: 200px; } #wp-link li { @@ -1539,7 +1629,7 @@ i.mce-i-wp_code:before { } #wp-link li.selected .item-title { - font-weight: bold; + font-weight: 600; } #wp-link li:last-child { @@ -1563,15 +1653,6 @@ i.mce-i-wp_code:before { top: 5px; } -#wp-link #search-results, -#wp-link #search-panel { - display: none; -} - -#wp-link-wrap.search-panel-visible #search-panel { - display: block; -} - #wp-link .river-waiting { display: none; padding: 10px 0; @@ -1580,7 +1661,7 @@ i.mce-i-wp_code:before { #wp-link .submitbox { padding: 8px 16px; background: #fcfcfc; - border-top: 1px solid #dfdfdf; + border-top: 1px solid #ddd; position: absolute; bottom: 0; left: 0; @@ -1599,7 +1680,6 @@ i.mce-i-wp_code:before { #wp-link-submit { float: right; - margin-bottom: 0; } @media screen and ( max-width: 782px ) { @@ -1607,11 +1687,11 @@ i.mce-i-wp_code:before { margin-top: -140px; } - #wp-link-wrap.search-panel-visible .query-results { + #wp-link-wrap .query-results { top: 195px; } - #wp-link-wrap.search-panel-visible.has-text-field .query-results { + #wp-link-wrap.has-text-field .query-results { top: 235px; } @@ -1619,13 +1699,21 @@ i.mce-i-wp_code:before { padding: 0 16px 60px; } - #wp-link-wrap.search-panel-visible #link-selector { + #wp-link-wrap #link-selector { bottom: 52px; } #wp-link-cancel { line-height: 32px; } + + #wp-link .link-target { + padding-top: 10px; + } + + #wp-link .submitbox .button { + margin-bottom: 0; + } } @media screen and ( max-width: 520px ) { @@ -1642,20 +1730,17 @@ i.mce-i-wp_code:before { #wp-link-wrap { -webkit-transition: none; transition: none; - } - - #wp-link-wrap.search-panel-visible { height: auto; margin-top: 0; top: 10px; bottom: 10px; } - .search-panel-visible #link-selector { + #link-selector { overflow: auto; } - .search-panel-visible #search-panel .query-results { + #search-panel .query-results { position: static; } } @@ -1700,13 +1785,85 @@ div.wp-link-preview a { cursor: pointer; } +div.wp-link-preview a.wplink-url-error { + color: #dc3232; +} + +div.wp-link-input { + float: left; + margin: 2px; + max-width: 694px; +} + +div.wp-link-input input { + width: 300px; + padding: 3px; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.mce-toolbar div.wp-link-preview ~ .mce-btn, +.mce-toolbar div.wp-link-input ~ .mce-btn { + margin: 2px 1px; +} + +.mce-inline-toolbar-grp .mce-btn-group .mce-btn:last-child { + margin-right: 2px; +} + +.ui-autocomplete.wplink-autocomplete { + z-index: 100110; + max-height: 200px; + overflow-y: auto; + padding: 0; + margin: 0; + list-style: none; + position: absolute; + border: 1px solid #5b9dd9; + -webkit-box-shadow: 0 1px 2px rgba( 30, 140, 190, 0.8 ); + box-shadow: 0 1px 2px rgba( 30, 140, 190, 0.8 ); + background-color: #fff; +} + +.ui-autocomplete.wplink-autocomplete li { + margin-bottom: 0; + padding: 4px 10px; + clear: both; + white-space: normal; + text-align: left; +} + +.ui-autocomplete.wplink-autocomplete li .wp-editor-float-right { + float: right; +} + +.ui-autocomplete.wplink-autocomplete li.ui-state-focus { + background-color: #ddd; + cursor: pointer; +} + @media screen and ( max-width: 782px ) { - div.wp-link-preview { - margin: 8px 0 8px 5px; + div.wp-link-preview, + div.wp-link-input { max-width: 70%; max-width: -webkit-calc(100% - 86px); max-width: calc(100% - 86px); } + + div.wp-link-preview { + margin: 8px 0 8px 5px; + } + + div.wp-link-input { + width: 300px; + } + + div.wp-link-input input { + width: 100%; + font-size: 16px; + padding: 5px; + } } /* =Overlay Body