Merge branch '514_content-snapshot-category-admin-page' into 511_content-snapshot-product-admin-page

Author: artKozynets

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_config.less

@@ -46,11 +46,9 @@
     }
 }
 
-
 //
 //  Page Builder full width field
-//   _____________________________________________
-
+//  _____________________________________________
 
 .admin__fieldset {
     > .admin__field.admin__field-wide.admin__field-page-builder[class]:not(.admin__field-option) {

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_page-builder.less

@@ -4,8 +4,8 @@
 //  */
 
 @border-size: 2px;
-@wysiwyg-overlay-background: rgba(0, 120, 249, 0.08);
-@wysiwyg-overlay-border: #4181E4;
+@wysiwyg-overlay-background: #0078f9;
+@wysiwyg-overlay-border: #4181e4;
 
 .pagebuilder-header {
     display: none;
@@ -96,15 +96,15 @@
             }
 
             &.visible {
+                display: block;
                 opacity: 1;
                 visibility: visible;
-                display: block;
             }
         }
 
         .pagebuilder-canvas {
-            padding-top: 30px;
             padding-bottom: 120px;
+            padding-top: 30px;
         }
 
         .pagebuilder-panel-wrapper {
@@ -163,16 +163,16 @@
         border-radius: 2px;
         cursor: pointer;
         display: block;
-        height: calc(~"100% + 2px");
+        height: calc(~'100% + 2px');
         transform: translateY(-2px);
         transition: .175s ease-in-out;
         visibility: visible;
-        width: calc(~"100% + 2px");
+        width: calc(~'100% + 2px');
         z-index: @z-index-2;
     }
 
     &._hover {
-        background-color: @wysiwyg-overlay-background;
+        background-color: fade(@wysiwyg-overlay-background, 8%);
         border-color: @wysiwyg-overlay-border;
         transform: translateY(0);
     }

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/_panel.less

@@ -49,6 +49,7 @@
 .pagebuilder-panel-wrapper {
     -moz-transition: opacity .75s ease-in-out, visibility .75s ease-in-out;
     -webkit-transition: opacity .75s ease-in-out, visibility .75s ease-in-out;
+    display: none;
     float: left;
     opacity: 0;
     position: relative;
@@ -58,16 +59,16 @@
     transition: opacity .75s ease-in-out, visibility .75s ease-in-out;
     visibility: hidden;
     width: 150px;
-    display: none;
 
     &.no-position-sticky {
         top: 0;
     }
 
     &.visible {
+        display: block;
         opacity: 1;
         visibility: visible;
-        display: block;
+        z-index: 1;
 
         &.sticky-top {
             position: fixed;