MC-5701: Slide Dots Are Hard To See Against Certain Backgrounds On Storefront

- Resolved less file static failures

Author: Hwashiang Yu

app/code/Magento/PageBuilder/view/adminhtml/web/css/source/content-type/slider/_default.less

@@ -3,7 +3,6 @@
 //  * See COPYING.txt for license details.
 //  */
 
-@ccc: #ccc;
 @b3: #b3b3b3;
 
 //

app/code/Magento/PageBuilder/view/frontend/web/css/source/slick/_slick.less

@@ -1,17 +1,26 @@
-/* Slider */
+// /**
+//  * Copyright © Magento, Inc. All rights reserved.
+//  * See COPYING.txt for license details.
+//  */
+
+@b3: #b3b3b3;
+
+//
+//  Slick slider styles
+//  _____________________________________________
 
 .slick-slider {
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-touch-action: pan-y;
+    -ms-user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
     box-sizing: border-box;
     display: block;
     position: relative;
-    -webkit-tap-highlight-color: transparent;
-    -ms-touch-action: pan-y;
     touch-action: pan-y;
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
     user-select: none;
 }
 .slick-list {
@@ -89,10 +98,10 @@
 
 .slick-slider .slick-track,
 .slick-slider .slick-list {
-    -webkit-transform: translate3d(0, 0, 0);
     -moz-transform: translate3d(0, 0, 0);
     -ms-transform: translate3d(0, 0, 0);
     -o-transform: translate3d(0, 0, 0);
+    -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
 }
 
@@ -118,6 +127,8 @@
 
 .slick-prev,
 .slick-next {
+    -ms-transform: translate(0, -50%);
+    -webkit-transform: translate(0, -50%);
     background: rgba(252, 252, 252, .6);
     border: none;
     border-radius: 0;
@@ -131,8 +142,6 @@
     padding: 0;
     position: absolute;
     top: 50%;
-    -webkit-transform: translate(0, -50%);
-    -ms-transform: translate(0, -50%);
     transform: translate(0, -50%);
     width: 60px;
     z-index: 101;
@@ -161,7 +170,6 @@
         opacity: 1;
     }
 
-    // Reset luma styles applied to all buttons
     &:active,
     &:focus,
     &:not(.primary) {
@@ -195,7 +203,7 @@
         width: 14px;
         button {
             background: @color-white;
-            border: 1px solid #ccc;
+            border: 1px solid @color-gray80;
             border-radius: 10px;
             box-shadow: none;
             cursor: pointer;
@@ -207,7 +215,7 @@
             width: 14px;
 
             &:hover {
-                border: 1px solid #b3b3b3;
+                border: 1px solid @b3;
             }
 
             &:active,
@@ -219,7 +227,7 @@
 
         &.slick-active {
             button {
-                background: #1c1918;
+                background: @color-pagebuilder-darkest-gray;
             }
         }
     }