Ticket #49237: image-widget-bg.49237.diff

src/wp-admin/css/widgets.css

@@ -110 +110 @@
         background-color: #fbfbfc;
         border-style: solid;
         border-color: #5b9dd9;
-        box-shadow: 0 0 3px rgba( 0, 115, 170, .8 );
+        box-shadow: 0 0 3px rgba(0, 115, 170, 0.8);
         /* Only visible in Windows High Contrast mode */
         outline: 2px solid transparent;
         outline-offset: -2px;
@@ -133 +133 @@
 .media-widget-control .media-widget-preview img {
         max-width: 100%;
         vertical-align: middle;
+        background-image: linear-gradient(
+                        45deg,
+                        #c4c4c4 25%,
+                        transparent 25%,
+                        transparent 75%,
+                        #c4c4c4 75%,
+                        #c4c4c4
+                ),
+                linear-gradient(
+                        45deg,
+                        #c4c4c4 25%,
+                        transparent 25%,
+                        transparent 75%,
+                        #c4c4c4 75%,
+                        #c4c4c4
+                );
+        background-position: 0 0, 10px 10px;
+        background-size: 20px 20px;
+        width: 100%;
 }
 .media-widget-control .media-widget-preview .wp-video-shortcode {
         background: #000;
@@ -163 +182 @@
 }
 
 .media-widget-video-link .dashicons {
-        font: normal 60px/1 'dashicons';
+        font: normal 60px/1 "dashicons";
         position: relative;
         width: 100%;
         top: -90px;
@@ -217 +236 @@
  * 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 {
+.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%;
 }
 
@@ -252 +277 @@
         color: white;
 }
 
-
 /* Widget Dragging Helpers */
 .widget.ui-draggable-dragging {
         min-width: 100%;
@@ -327 +351 @@
 }
 
 .sidebar-name .handlediv:focus .toggle-indicator:before {
-        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);
 }
 
 .sidebar-name h2,
@@ -539 +561 @@
 .widget-control-edit {
         display: block;
         color: #666;
-        background: #EEE;
+        background: #eee;
         padding: 0 15px;
-        line-height: 3.30769230;
-        border-left: 1px solid #DDD;
+        line-height: 3.3076923;
+        border-left: 1px solid #ddd;
 }
 
 #widgets-left .widget-control-edit:hover,
@@ -634 +656 @@
         cursor: default;
 }
 
-
 /* Widgets Area Chooser */
 .widget-liquid-left #widgets-left.chooser #available-widgets .widget,
 .widget-liquid-left #widgets-left.chooser .inactive-sidebar {
@@ -648 +669 @@
         pointer-events: none;
 }
 
-.widget-liquid-left #widgets-left.chooser #available-widgets .widget-in-question {
+.widget-liquid-left
+        #widgets-left.chooser
+        #available-widgets
+        .widget-in-question {
         /* -webkit-filter: none; */
         opacity: 1;
         pointer-events: auto;
@@ -769 +793 @@
 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 {
+.widget-control-actions
+        .custom-html-widget-save-button.button.validation-blocked {
         cursor: not-allowed;
 }