diff -r 490d5cc509ed -r cf61fcea0001 wp/wp-admin/css/widgets-rtl.css --- a/wp/wp-admin/css/widgets-rtl.css Tue Jun 09 11:14:17 2015 +0000 +++ b/wp/wp-admin/css/widgets-rtl.css Mon Oct 14 17:39:30 2019 +0200 @@ -3,8 +3,6 @@ .widget { margin: 0 auto 10px; position: relative; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; box-sizing: border-box; } @@ -14,17 +12,20 @@ background: #f7f7f7; } -.widget-top a.widget-action, -.widget-top a.widget-action:hover { - -webkit-box-shadow: none; - box-shadow: none; +.widget-top .widget-action { + border: 0; + margin: 0; + padding: 10px; + background: none; + cursor: pointer; outline: none; - text-decoration: none; } +.widget-title h3, .widget-title h4 { margin: 0; padding: 15px; + font-size: 1em; line-height: 1; overflow: hidden; white-space: nowrap; @@ -41,6 +42,10 @@ line-height: 16px; } +.widget.widget-dirty .widget-control-close-wrapper { + display: none; +} + .in-widget-title, #widgets-right a.widget-control-edit, #available-widgets .widget-description { @@ -48,10 +53,190 @@ } .deleting .widget-title, -.deleting .widget-top a.widget-action:after { +.deleting .widget-top .widget-action .toggle-indicator:before { color: #a0a5aa; } +/* Media Widgets */ +.wp-core-ui .media-widget-control.selected .placeholder, +.wp-core-ui .media-widget-control.selected .not-selected, +.wp-core-ui .media-widget-control .selected { + display: none; +} + +.media-widget-control.selected .selected { + display: inline-block; +} + +.media-widget-buttons { + text-align: right; + margin-top: 0; +} + +.media-widget-control .media-widget-buttons .button { + width: auto; + height: auto; + margin-top: 12px; + white-space: normal; +} + +.media-widget-buttons .button:first-child { + margin-left: 8px; +} + +.media-widget-control .placeholder { + border: 1px dashed #b4b9be; + box-sizing: border-box; + cursor: pointer; + line-height: 20px; + padding: 9px 0; + position: relative; + text-align: center; + width: 100%; +} + +.media-widget-control .media-widget-preview { + background: transparent; + text-align: center; +} +.media-widget-control .media-widget-preview .notice { + text-align: initial; +} +.media-frame .media-widget-embed-notice p code, +.media-widget-control .notice p code { + padding: 0 0 0 3px; +} +.media-frame .media-widget-embed-notice { + margin-top: 16px; +} +.media-widget-control .media-widget-preview img { + max-width: 100%; + vertical-align: middle; +} +.media-widget-control .media-widget-preview .wp-video-shortcode { + background: #000; +} + +.media-frame.media-widget .media-toolbar-secondary { + min-width: 300px; +} + +.media-frame.media-widget .image-details .embed-media-settings .setting.align, +.media-frame.media-widget .attachment-display-settings .setting.align, +.media-frame.media-widget .embed-media-settings .setting.align, +.media-frame.media-widget .embed-link-settings .setting.link-text, +.media-frame.media-widget .replace-attachment, +.media-frame.media-widget .checkbox-setting.autoplay { + display: none; +} + +.media-widget-video-preview { + width: 100%; +} + +.media-widget-video-link { + display: inline-block; + min-height: 132px; + width: 100%; + background: black; +} + +.media-widget-video-link .dashicons { + font: normal 60px/1 'dashicons'; + position: relative; + width: 100%; + top: -90px; + color: white; + text-decoration: none; +} + +.media-widget-video-link.no-poster .dashicons { + top: 30px; +} + +.media-frame #embed-url-field.invalid, +.media-widget-image-link > .link:invalid { + border: 1px solid #dc3232; +} + +.media-widget-image-link { + margin: 1em 0; +} + +.media-widget-gallery-preview { + display: -webkit-box; + display: flex; + -webkit-box-pack: start; + justify-content: flex-start; + flex-wrap: wrap; + margin: -1.79104477%; +} + +.media-widget-preview.media_gallery, +.media-widget-preview.media_image { + cursor: pointer; +} + +.media-widget-preview .placeholder { + background: #f1f1f1; +} + +.media-widget-gallery-preview .gallery-item { + box-sizing: border-box; + width: 50%; + margin: 0; + background: transparent; +} + +.media-widget-gallery-preview .gallery-item .gallery-icon { + margin: 4.5%; +} + +/* + * Use targeted nth-last-child selectors to control the size of each image + * based on how many gallery items are present in the grid. + * See: https://alistapart.com/article/quantity-queries-for-css + */ +.media-widget-gallery-preview .gallery-item:nth-last-child(3):first-child, +.media-widget-gallery-preview .gallery-item:nth-last-child(3):first-child ~ .gallery-item, +.media-widget-gallery-preview .gallery-item:nth-last-child(n+5), +.media-widget-gallery-preview .gallery-item:nth-last-child(n+5) ~ .gallery-item, +.media-widget-gallery-preview .gallery-item:nth-last-child(n+6), +.media-widget-gallery-preview .gallery-item:nth-last-child(n+6) ~ .gallery-item { + max-width: 33.33%; +} + +.media-widget-gallery-preview .gallery-item img { + height: auto; + vertical-align: bottom; +} + +.media-widget-gallery-preview .gallery-icon { + position: relative; +} + +.media-widget-gallery-preview .gallery-icon-placeholder { + position: absolute; + top: 0; + bottom: 0; + width: 100%; + box-sizing: border-box; + display: -webkit-box; + display: flex; + -webkit-box-align: center; + align-items: center; + -webkit-box-pack: center; + justify-content: center; + background-color: rgba( 0, 0, 0, .5 ); +} + +.media-widget-gallery-preview .gallery-icon-placeholder-text { + font-weight: 600; + font-size: 2em; + color: white; +} + + /* Widget Dragging Helpers */ .widget.ui-draggable-dragging { min-width: 100%; @@ -66,8 +251,6 @@ margin: 0 auto 10px; height: 45px; width: 100%; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; box-sizing: border-box; } @@ -84,22 +267,56 @@ /* Widget Sidebars */ .sidebar-name { position: relative; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; box-sizing: border-box; } -.sidebar-name-arrow { - position: absolute; - top: 0; - left: 0; - bottom: 0; -} - .js .sidebar-name { cursor: pointer; } +.sidebar-name .handlediv { + float: left; + width: 38px; + height: 38px; + border: 0; + margin: 0; + padding: 8px; + background: none; + cursor: pointer; + outline: none; +} + +#widgets-right .sidebar-name .handlediv { + margin: 5px 0 0 3px; +} + +.sidebar-name .handlediv:focus { + box-shadow: none; + outline: none; +} + +#widgets-left .sidebar-name .toggle-indicator { + display: none; +} + +#widgets-left .widgets-holder-wrap.closed .sidebar-name .toggle-indicator, +#widgets-left .sidebar-name:hover .toggle-indicator, +#widgets-left .sidebar-name .handlediv:focus .toggle-indicator { + display: block; +} + +.sidebar-name .toggle-indicator:before { + padding: 1px 0 1px 2px; + border-radius: 50%; +} + +.sidebar-name .handlediv:focus .toggle-indicator:before { + box-shadow: + 0 0 0 1px #5b9dd9, + 0 0 2px 1px rgba(30, 140, 190, .8); +} + +.sidebar-name h2, .sidebar-name h3 { margin: 0; padding: 8px 10px; @@ -111,7 +328,12 @@ padding: 0 0 15px; margin: 0; font-style: normal; - color: #777; + color: #72777c; +} + +.widget-holder .description, +.inactive-sidebar .description { + color: #555d66; } #widgets-right .widgets-holder-wrap .description { @@ -142,18 +364,13 @@ margin-bottom: 10px; } +div#widgets-left .sidebar-name h2, div#widgets-left .sidebar-name h3 { padding: 10px 0; margin: 0 0 0 10px; } -div#widgets-left .sidebar-name .sidebar-name-arrow:before { - left: 0; - top: 4px; - padding: 4px 4px 4px 6px; -} - -#widgets-left #available-widgets, +#widgets-left .widgets-holder-wrap, div#widgets-left .widget-holder { background: transparent; border: none; @@ -161,7 +378,6 @@ #widgets-left .widgets-holder-wrap { border: none; - -webkit-box-shadow: none; box-shadow: none; } @@ -181,6 +397,13 @@ display: block; padding: 10px 15px; font-size: 12px; + overflow-wrap: break-word; + word-wrap: break-word; + -ms-word-break: break-all; + word-break: break-word; + -ms-hyphens: auto; + -webkit-hyphens: auto; + hyphens: auto; } #available-widgets #widget-list { @@ -195,7 +418,6 @@ padding: 0; margin: 0 0 20px 0; border: none; - -webkit-box-shadow: none; box-shadow: none; } @@ -223,14 +445,6 @@ /* Widgets Right */ -div#widgets-right:after { - content: "."; - display: block; - height: 0; - clear: both; - visibility: hidden; -} - div#widgets-right .sidebars-column-1, div#widgets-right .sidebars-column-2 { max-width: 450px; @@ -245,15 +459,11 @@ margin-top: -5px; } +div#widgets-right .sidebar-name h2, div#widgets-right .sidebar-name h3 { padding: 15px 7px; } -div#widgets-right .sidebar-name .sidebar-name-arrow:before { - left: 0; - top: 4px; -} - div#widgets-right .widget-top { padding: 0; } @@ -270,7 +480,8 @@ margin-bottom: 0; } -.sidebar-name .spinner { +.sidebar-name .spinner, +.remove-inactive-widgets .spinner { float: none; position: relative; top: -2px; @@ -279,8 +490,7 @@ /* Dragging a widget over a closed sidebar */ #widgets-right .widgets-holder-wrap.widget-hover { - border-color: #777; - -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.3); + border-color: #72777c; box-shadow: 0 1px 2px rgba(0,0,0,0.3); } @@ -346,10 +556,16 @@ .js .widgets-holder-wrap.closed .widget, .js .widgets-holder-wrap.closed .sidebar-description, +.js .widgets-holder-wrap.closed .remove-inactive-widgets, +.js .widgets-holder-wrap.closed .description, .js .closed br.clear { display: none; } +.js .widgets-holder-wrap.closed .widget.ui-sortable-helper { + display: block; +} + /* Hide Widget Settings by Default */ .widget-inside, .widget-description { @@ -363,7 +579,7 @@ /* Dragging widgets over the available widget area show's a "Deactivate" message */ #removing-widget { display: none; - font-weight: normal; + font-weight: 400; padding-right: 15px; font-size: 12px; line-height: 1; @@ -377,7 +593,7 @@ .widget-control-noform, #access-off, .widgets_access .widget-action, -.widgets_access .sidebar-name-arrow, +.widgets_access .handlediv, .widgets_access #access-on, .widgets_access .widget-holder .description, .no-js .widget-holder .description { @@ -402,7 +618,6 @@ /* Widgets Area Chooser */ .widget-liquid-left #widgets-left.chooser #available-widgets .widget, .widget-liquid-left #widgets-left.chooser .inactive-sidebar { - -webkit-transition: opacity 0.1s linear; transition: opacity 0.1s linear; } @@ -425,7 +640,6 @@ div#widgets-right .widget-top:hover, #widgets-left .widget-top:hover { 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); } @@ -452,21 +666,21 @@ cursor: pointer; outline: none; position: relative; - -webkit-transition: background 0.2s ease-in-out; transition: background 0.2s ease-in-out; } + /* @todo looks like these hover/focus states are overridden by .widgets-chooser-selected */ .widgets-chooser li:hover, .widgets-chooser li:focus { background: rgba(255,255,255,0.7); } .widgets-chooser li:focus:before { - content: '\f147'; + content: "\f147"; display: block; -webkit-font-smoothing: antialiased; - font: normal 26px/1 'dashicons'; - color: #999; + font: normal 26px/1 dashicons; + color: #555d66; position: absolute; top: 7px; right: 5px; @@ -483,10 +697,10 @@ .widgets-chooser li.widgets-chooser-selected:before, .widgets-chooser li.widgets-chooser-selected:focus:before { - content: '\f147'; + content: "\f147"; display: block; -webkit-font-smoothing: antialiased; - font: normal 26px/1 'dashicons'; + font: normal 26px/1 dashicons; color: #fff; position: absolute; top: 7px; @@ -506,6 +720,47 @@ cursor: pointer; } +#available-widgets .widget.ui-draggable-dragging .widget-top { + cursor: move; +} + +/* =Specific widget styling +-------------------------------------------------------------- */ +.text-widget-fields { + position: relative; +} +.text-widget-fields [hidden] { + display: none; +} +.text-widget-fields .wp-pointer.wp-pointer-top { + position: absolute; + z-index: 3; + top: 100px; + left: 10px; + right: 10px; +} +.text-widget-fields .wp-pointer .wp-pointer-arrow { + right: auto; + left: 15px; +} +.text-widget-fields .wp-pointer .wp-pointer-buttons { + line-height: 1.4em; +} + +.custom-html-widget-fields > p > .CodeMirror { + border: 1px solid #e5e5e5; +} +.custom-html-widget-fields code { + padding-top: 1px; + padding-bottom: 1px; +} +ul.CodeMirror-hints { + z-index: 101; /* Due to z-index 100 set on .widget.open */ +} +.widget-control-actions .custom-html-widget-save-button.button.validation-blocked { + cursor: not-allowed; +} + /* =Media Queries -------------------------------------------------------------- */ @@ -535,7 +790,7 @@ } div.widget { - margin: 0 auto 10px !important; + margin: 0 auto !important; max-width: 480px; } }