diff -r 490d5cc509ed -r cf61fcea0001 wp/wp-admin/css/customize-widgets-rtl.css --- a/wp/wp-admin/css/customize-widgets-rtl.css Tue Jun 09 11:14:17 2015 +0000 +++ b/wp/wp-admin/css/customize-widgets-rtl.css Mon Oct 14 17:39:30 2019 +0200 @@ -14,11 +14,25 @@ display: none; } +.control-section.control-section-sidebar .accordion-section-content.ui-sortable { + overflow: visible; +} + +/* Note: widget-tops are more compact when (max-height: 700px) and (min-width: 981px). */ .customize-control-widget_form .widget-top { - -webkit-transition: opacity 0.5s; + background: #fff; transition: opacity 0.5s; } +.customize-control .widget-action { + color: #72777c; +} + +.customize-control .widget-top:hover .widget-action, +.customize-control .widget-action:focus { + color: #23282d; +} + .customize-control-widget_form:not(.widget-rendered) .widget-top { opacity: 0.5; } @@ -61,7 +75,6 @@ } .customize-control-widget_form.wide-widget-control .widget-top { - -webkit-transition: background-color 0.4s; transition: background-color 0.4s; } .customize-control-widget_form.wide-widget-control.expanding .widget-top, @@ -75,19 +88,15 @@ line-height: 16px; } -.widget-top { - cursor: move; -} - -.customize-control-widget_form.expanded a.widget-action:after { +.customize-control-widget_form.expanded .widget-action .toggle-indicator:before { content: "\f142"; } -.customize-control-widget_form.wide-widget-control a.widget-action:after { +.customize-control-widget_form.wide-widget-control .widget-action .toggle-indicator:before { content: "\f141"; } -.customize-control-widget_form.wide-widget-control.expanded a.widget-action:after { +.customize-control-widget_form.wide-widget-control.expanded .widget-action .toggle-indicator:before { content: "\f139"; } @@ -95,6 +104,7 @@ cursor: pointer; } +.widget-top, .customize-control-widget_form .widget .customize-control-title { cursor: move; } @@ -102,7 +112,6 @@ .control-section.accordion-section.highlighted > .accordion-section-title, .customize-control-widget_form.highlighted { outline: none; - -webkit-box-shadow: 0 0 2px rgba(30,140,190,0.8); box-shadow: 0 0 2px rgba(30,140,190,0.8); position: relative; z-index: 1; @@ -113,39 +122,8 @@ } /** -* Widget reordering styles -**/ - -.reorder-toggle { - float: left; - padding: 5px 8px; - text-decoration: none; - cursor: pointer; - outline: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} -.reorder-toggle:focus { - outline: 1px dotted; -} - -.reorder-done, -.reordering .reorder { - display: none; -} - -.reordering .reorder-done { - display: block; - color: #aa0000; -} - -#customize-theme-controls .reordering .add-new-widget { - opacity: 0.2; - pointer-events: none; - cursor: not-allowed; -} + * Widget reordering styles + */ #customize-theme-controls .widget-reorder-nav { display: none; @@ -153,61 +131,14 @@ background-color: #fafafa; } -.widget-reorder-nav span { - position: relative; - overflow: hidden; - float: right; - display: block; - width: 33px; /* was 42px for mobile */ - height: 43px; - color: #82878c; - text-indent: -9999px; - cursor: pointer; - outline: none; -} - -.widget-reorder-nav span:before { - display: inline-block; - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - font: normal 20px/43px 'dashicons'; - text-align: center; - text-indent: 0; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; +.move-widget:before { + content: "\f504"; } -.widget-reorder-nav span:hover, -.widget-reorder-nav span:focus { - color: #444; - background: #eee; -} - -.move-widget:before { - content: '\f504'; -} - -.move-widget-down:before { - content: '\f347'; -} - -.move-widget-up:before { - content: '\f343'; -} - -#customize-theme-controls .first-widget .move-widget-up, -#customize-theme-controls .last-widget .move-widget-down { - color: #d5d5d5; - cursor: default; -} - -#customize-theme-controls .move-widget-area { +#customize-theme-controls .move-widget-area { display: none; background: #fff; - border: 1px solid #dedede; + border: 1px solid #ddd; border-top: none; cursor: auto; } @@ -243,11 +174,11 @@ #customize-theme-controls .widget-area-select li:before { display: none; - content: '\f147'; + content: "\f147"; position: absolute; top: 12px; right: 10px; - font: normal 20px/1 'dashicons'; + font: normal 20px/1 dashicons; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @@ -279,146 +210,64 @@ display: block; } +/* Text Widget */ +.wp-customizer div.mce-inline-toolbar-grp, +.wp-customizer div.mce-tooltip { + z-index: 500100 !important; +} +.wp-customizer .ui-autocomplete.wplink-autocomplete { + z-index: 500110; /* originally 100110, but z-index of .wp-full-overlay is 500000 */ +} +.wp-customizer #wp-link-backdrop { + z-index: 500100; /* originally 100100, but z-index of .wp-full-overlay is 500000 */ +} +.wp-customizer #wp-link-wrap { + z-index: 500105; /* originally 100105, but z-index of .wp-full-overlay is 500000 */ +} /** * Styles for new widget addition panel */ -.wp-full-overlay-main { - left: auto; /* this overrides a right: 0; which causes the preview to resize, I'd rather have it go off screen at the normal size. */ - width: 100%; -} -#customize-theme-controls .add-new-widget { - cursor: pointer; - float: left; - margin-right: 10px; - -webkit-transition: all 0.2s; - transition: all 0.2s; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - outline: none; -} - -.add-new-widget:before { - content: "\f132"; - display: inline-block; - position: relative; - right: -2px; - top: -1px; - font: normal 20px/1 'dashicons'; - vertical-align: middle; - -webkit-transition: all 0.2s; - transition: all 0.2s; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -body.adding-widget .add-new-widget, -body.adding-widget .add-new-widget:hover { - 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); -} -body.adding-widget .add-new-widget:before { - -webkit-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); - transform: rotate(-45deg); -} - -#available-widgets .widget { - position: static; -} - -/* override widgets admin page rules in wp-admin/css/wp-admin.css */ +/* override widgets admin page rules in wp-admin/css/widgets.css */ #widgets-left #available-widgets .widget { float: none !important; width: auto !important; } -#available-widgets { - position: absolute; - overflow: auto; - top: 0; - bottom: 0; - right: -301px; - width: 300px; - margin: 0; - z-index: 1; - background: #fff !important; - -webkit-transition: all 0.2s; - transition: all 0.2s; - border-left: 1px solid #dddddd; -} - -#available-widgets-list { - top: 46px; - position: absolute; - overflow: auto; - bottom: 0; - width: 100%; -} - -#available-widgets-filter { - position: fixed; - top: 0; - z-index: 1; - width: 300px; - height: 46px; - padding: 8px 13px 7px 17px; - background: #eee; - border-bottom: 1px solid #e4e4e4; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; -} - -#available-widgets-filter input { - padding: 5px 10px 2px 10px; - width: 100%; -} - -#available-widgets .widget-tpl { - position: relative; - padding: 20px 60px 20px 15px; - border-bottom: 1px solid #e4e4e4; - cursor: pointer; - display: none; +.ios #available-widgets { + transition: right 0s; } #available-widgets .widget-tpl:hover, #available-widgets .widget-tpl.selected { - background: #fafafa; + background: #f3f3f5; + border-bottom-color: #ccc; + color: #0073aa; + border-right: 4px solid #0073aa; } -#available-widgets .widget-top, -#available-widgets .widget-top:hover { - border: none; - background: transparent; - -webkit-box-shadow: none; - box-shadow: none; +#customize-controls .widget-title h3 { + font-size: 1em; } -#available-widgets .widget-title h4 { +#available-widgets .widget-title h3 { padding: 0 0 5px; font-size: 14px; } #available-widgets .widget .widget-description { padding: 0; - color: #777; + color: #72777c; } #customize-preview { - -webkit-transition: all 0.2s; transition: all 0.2s; } body.adding-widget #available-widgets { right: 0; + visibility: visible; } body.adding-widget .wp-full-overlay-main { @@ -434,7 +283,8 @@ * Widget Icon styling * No plurals in naming. * Ordered from lowest to highest specificity. - **/ + */ + #available-widgets .widget-title { position: relative; } @@ -448,10 +298,8 @@ width: 20px; height: 20px; color: #32373c; - font: normal 20px/1 'dashicons'; + font: normal 20px/1 dashicons; text-align: center; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @@ -583,54 +431,48 @@ #available-widgets [class*="tweet"] .widget-title:before, #available-widgets [class*="twitter"] .widget-title:before { content: "\f301"; } - @media screen and (max-height: 700px) and (min-width: 981px) { - .customize-control { + /* Compact widget-tops on smaller laptops, but not tablets. See ticket #27112#comment:4 */ + .customize-control-widget_form { margin-bottom: 0; } + .widget-top { - -webkit-box-shadow: none; box-shadow: none; margin-top: -1px; } + .widget-top:hover { position: relative; z-index: 1; } + .last-widget { margin-bottom: 15px; } - .widget-title h4 { + + .widget-title h3 { padding: 13px 15px; } - .widget-top a.widget-action:after { - padding-top: 9px; + + .widget-top .widget-action { + padding: 8px 10px; } + .widget-reorder-nav span { height: 39px; } + .widget-reorder-nav span:before { line-height: 39px; } + + /* Compact the move widget areas. */ #customize-theme-controls .widget-area-select li { padding: 9px 42px 11px 15px; } + #customize-theme-controls .widget-area-select li:before { top: 8px; } } - -@media screen and ( max-width: 640px ) { - body.adding-widget div#available-widgets { - top: 46px; - right: 0; - z-index: 10; - width: 100%; - } - - #available-widgets-filter { - position: static; - width: 100%; - height: auto; - } -}