Revisions: Update slider handle styling.

This brings them in line with updated buttons as done in [34948] for #31459. It also gives it secondary action styling as opposed to primary, as restoring is considered the primary action.

props hugobaeta.
fixes #34220.

Built from https://develop.svn.wordpress.org/trunk@34976


git-svn-id: http://core.svn.wordpress.org/trunk@34941 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/colors/_admin.scss

@@ -484,16 +484,6 @@ body.more-filters-opened .more-filters:focus:before {
 	color: $menu-highlight-text;
 }
 
-/* jQuery UI Slider */
-
-.wp-slider .ui-slider-handle,
-.wp-slider .ui-slider-handle.ui-state-hover,
-.wp-slider .ui-slider-handle.focus {
-	background: $button-color;
-	border-color: darken( $button-color, 10% );
-	box-shadow: inset 0 1px 0 lighten( $button-color, 15% ), 0 1px 0 rgba(0,0,0,.15);
-}
-
 /* Responsive Component */
 
 div#wp-responsive-toggle a:before {

wp-admin/css/colors/blue/colors-rtl.css

@@ -516,16 +516,6 @@ body.more-filters-opened .more-filters:focus:before {
   color: #fff;
 }
 
-/* jQuery UI Slider */
-.wp-slider .ui-slider-handle,
-.wp-slider .ui-slider-handle.ui-state-hover,
-.wp-slider .ui-slider-handle.focus {
-  background: #e1a948;
-  border-color: #d39323;
-  -webkit-box-shadow: inset 0 1px 0 #ecc88a, 0 1px 0 rgba(0, 0, 0, 0.15);
-  box-shadow: inset 0 1px 0 #ecc88a, 0 1px 0 rgba(0, 0, 0, 0.15);
-}
-
 /* Responsive Component */
 div#wp-responsive-toggle a:before {
   color: #e5f8ff;

wp-admin/css/colors/blue/colors.css

@@ -516,16 +516,6 @@ body.more-filters-opened .more-filters:focus:before {
   color: #fff;
 }
 
-/* jQuery UI Slider */
-.wp-slider .ui-slider-handle,
-.wp-slider .ui-slider-handle.ui-state-hover,
-.wp-slider .ui-slider-handle.focus {
-  background: #e1a948;
-  border-color: #d39323;
-  -webkit-box-shadow: inset 0 1px 0 #ecc88a, 0 1px 0 rgba(0, 0, 0, 0.15);
-  box-shadow: inset 0 1px 0 #ecc88a, 0 1px 0 rgba(0, 0, 0, 0.15);
-}
-
 /* Responsive Component */
 div#wp-responsive-toggle a:before {
   color: #e5f8ff;

wp-admin/css/colors/coffee/colors-rtl.css

@@ -516,16 +516,6 @@ body.more-filters-opened .more-filters:focus:before {
   color: #fff;
 }
 
-/* jQuery UI Slider */
-.wp-slider .ui-slider-handle,
-.wp-slider .ui-slider-handle.ui-state-hover,
-.wp-slider .ui-slider-handle.focus {
-  background: #c7a589;
-  border-color: #b78b66;
-  -webkit-box-shadow: inset 0 1px 0 #e0cdbd, 0 1px 0 rgba(0, 0, 0, 0.15);
-  box-shadow: inset 0 1px 0 #e0cdbd, 0 1px 0 rgba(0, 0, 0, 0.15);
-}
-
 /* Responsive Component */
 div#wp-responsive-toggle a:before {
   color: #f3f2f1;

wp-admin/css/colors/coffee/colors.css

@@ -516,16 +516,6 @@ body.more-filters-opened .more-filters:focus:before {
   color: #fff;
 }
 
-/* jQuery UI Slider */
-.wp-slider .ui-slider-handle,
-.wp-slider .ui-slider-handle.ui-state-hover,
-.wp-slider .ui-slider-handle.focus {
-  background: #c7a589;
-  border-color: #b78b66;
-  -webkit-box-shadow: inset 0 1px 0 #e0cdbd, 0 1px 0 rgba(0, 0, 0, 0.15);
-  box-shadow: inset 0 1px 0 #e0cdbd, 0 1px 0 rgba(0, 0, 0, 0.15);
-}
-
 /* Responsive Component */
 div#wp-responsive-toggle a:before {
   color: #f3f2f1;

wp-admin/css/colors/ectoplasm/colors-rtl.css

@@ -516,16 +516,6 @@ body.more-filters-opened .more-filters:focus:before {
   color: #fff;
 }
 
-/* jQuery UI Slider */
-.wp-slider .ui-slider-handle,
-.wp-slider .ui-slider-handle.ui-state-hover,
-.wp-slider .ui-slider-handle.focus {
-  background: #a3b745;
-  border-color: #829237;
-  -webkit-box-shadow: inset 0 1px 0 #bfcd7b, 0 1px 0 rgba(0, 0, 0, 0.15);
-  box-shadow: inset 0 1px 0 #bfcd7b, 0 1px 0 rgba(0, 0, 0, 0.15);
-}
-
 /* Responsive Component */
 div#wp-responsive-toggle a:before {
   color: #ece6f6;

wp-admin/css/colors/ectoplasm/colors.css

@@ -516,16 +516,6 @@ body.more-filters-opened .more-filters:focus:before {
   color: #fff;
 }
 
-/* jQuery UI Slider */
-.wp-slider .ui-slider-handle,
-.wp-slider .ui-slider-handle.ui-state-hover,
-.wp-slider .ui-slider-handle.focus {
-  background: #a3b745;
-  border-color: #829237;
-  -webkit-box-shadow: inset 0 1px 0 #bfcd7b, 0 1px 0 rgba(0, 0, 0, 0.15);
-  box-shadow: inset 0 1px 0 #bfcd7b, 0 1px 0 rgba(0, 0, 0, 0.15);
-}
-
 /* Responsive Component */
 div#wp-responsive-toggle a:before {
   color: #ece6f6;

wp-admin/css/colors/light/colors-rtl.css

@@ -516,16 +516,6 @@ body.more-filters-opened .more-filters:focus:before {
   color: #fff;
 }
 
-/* jQuery UI Slider */
-.wp-slider .ui-slider-handle,
-.wp-slider .ui-slider-handle.ui-state-hover,
-.wp-slider .ui-slider-handle.focus {
-  background: #04a4cc;
-  border-color: #037c9a;
-  -webkit-box-shadow: inset 0 1px 0 #22cffb, 0 1px 0 rgba(0, 0, 0, 0.15);
-  box-shadow: inset 0 1px 0 #22cffb, 0 1px 0 rgba(0, 0, 0, 0.15);
-}
-
 /* Responsive Component */
 div#wp-responsive-toggle a:before {
   color: #999;

wp-admin/css/colors/light/colors.css

@@ -516,16 +516,6 @@ body.more-filters-opened .more-filters:focus:before {
   color: #fff;
 }
 
-/* jQuery UI Slider */
-.wp-slider .ui-slider-handle,
-.wp-slider .ui-slider-handle.ui-state-hover,
-.wp-slider .ui-slider-handle.focus {
-  background: #04a4cc;
-  border-color: #037c9a;
-  -webkit-box-shadow: inset 0 1px 0 #22cffb, 0 1px 0 rgba(0, 0, 0, 0.15);
-  box-shadow: inset 0 1px 0 #22cffb, 0 1px 0 rgba(0, 0, 0, 0.15);
-}
-
 /* Responsive Component */
 div#wp-responsive-toggle a:before {
   color: #999;

wp-admin/css/colors/midnight/colors-rtl.css

@@ -516,16 +516,6 @@ body.more-filters-opened .more-filters:focus:before {
   color: #fff;
 }
 
-/* jQuery UI Slider */
-.wp-slider .ui-slider-handle,
-.wp-slider .ui-slider-handle.ui-state-hover,
-.wp-slider .ui-slider-handle.focus {
-  background: #e14d43;
-  border-color: #d02c21;
-  -webkit-box-shadow: inset 0 1px 0 #ec8b85, 0 1px 0 rgba(0, 0, 0, 0.15);
-  box-shadow: inset 0 1px 0 #ec8b85, 0 1px 0 rgba(0, 0, 0, 0.15);
-}
-
 /* Responsive Component */
 div#wp-responsive-toggle a:before {
   color: #f1f2f3;

wp-admin/css/colors/midnight/colors.css

@@ -516,16 +516,6 @@ body.more-filters-opened .more-filters:focus:before {
   color: #fff;
 }
 
-/* jQuery UI Slider */
-.wp-slider .ui-slider-handle,
-.wp-slider .ui-slider-handle.ui-state-hover,
-.wp-slider .ui-slider-handle.focus {
-  background: #e14d43;
-  border-color: #d02c21;
-  -webkit-box-shadow: inset 0 1px 0 #ec8b85, 0 1px 0 rgba(0, 0, 0, 0.15);
-  box-shadow: inset 0 1px 0 #ec8b85, 0 1px 0 rgba(0, 0, 0, 0.15);
-}
-
 /* Responsive Component */
 div#wp-responsive-toggle a:before {
   color: #f1f2f3;

wp-admin/css/colors/ocean/colors-rtl.css

@@ -516,16 +516,6 @@ body.more-filters-opened .more-filters:focus:before {
   color: #fff;
 }
 
-/* jQuery UI Slider */
-.wp-slider .ui-slider-handle,
-.wp-slider .ui-slider-handle.ui-state-hover,
-.wp-slider .ui-slider-handle.focus {
-  background: #9ebaa0;
-  border-color: #80a583;
-  -webkit-box-shadow: inset 0 1px 0 #cbdacc, 0 1px 0 rgba(0, 0, 0, 0.15);
-  box-shadow: inset 0 1px 0 #cbdacc, 0 1px 0 rgba(0, 0, 0, 0.15);
-}
-
 /* Responsive Component */
 div#wp-responsive-toggle a:before {
   color: #f2fcff;

wp-admin/css/colors/ocean/colors.css

@@ -516,16 +516,6 @@ body.more-filters-opened .more-filters:focus:before {
   color: #fff;
 }
 
-/* jQuery UI Slider */
-.wp-slider .ui-slider-handle,
-.wp-slider .ui-slider-handle.ui-state-hover,
-.wp-slider .ui-slider-handle.focus {
-  background: #9ebaa0;
-  border-color: #80a583;
-  -webkit-box-shadow: inset 0 1px 0 #cbdacc, 0 1px 0 rgba(0, 0, 0, 0.15);
-  box-shadow: inset 0 1px 0 #cbdacc, 0 1px 0 rgba(0, 0, 0, 0.15);
-}
-
 /* Responsive Component */
 div#wp-responsive-toggle a:before {
   color: #f2fcff;

wp-admin/css/colors/sunrise/colors-rtl.css

@@ -516,16 +516,6 @@ body.more-filters-opened .more-filters:focus:before {
   color: #fff;
 }
 
-/* jQuery UI Slider */
-.wp-slider .ui-slider-handle,
-.wp-slider .ui-slider-handle.ui-state-hover,
-.wp-slider .ui-slider-handle.focus {
-  background: #dd823b;
-  border-color: #c36922;
-  -webkit-box-shadow: inset 0 1px 0 #e8ac7c, 0 1px 0 rgba(0, 0, 0, 0.15);
-  box-shadow: inset 0 1px 0 #e8ac7c, 0 1px 0 rgba(0, 0, 0, 0.15);
-}
-
 /* Responsive Component */
 div#wp-responsive-toggle a:before {
   color: #f3f1f1;

wp-admin/css/colors/sunrise/colors.css

@@ -516,16 +516,6 @@ body.more-filters-opened .more-filters:focus:before {
   color: #fff;
 }
 
-/* jQuery UI Slider */
-.wp-slider .ui-slider-handle,
-.wp-slider .ui-slider-handle.ui-state-hover,
-.wp-slider .ui-slider-handle.focus {
-  background: #dd823b;
-  border-color: #c36922;
-  -webkit-box-shadow: inset 0 1px 0 #e8ac7c, 0 1px 0 rgba(0, 0, 0, 0.15);
-  box-shadow: inset 0 1px 0 #e8ac7c, 0 1px 0 rgba(0, 0, 0, 0.15);
-}
-
 /* Responsive Component */
 div#wp-responsive-toggle a:before {
   color: #f3f1f1;

wp-admin/css/revisions-rtl.css

@@ -462,8 +462,9 @@ div.revisions-controls > .wp-slider > .ui-slider-handle {
 	-webkit-border-radius: 50%;
 	border-radius: 50%;
 	height: 18px;
-	margin-top: -3px;
+	margin-top: -5px;
 	outline: none;
+	padding: 2px;
 	position: absolute;
 	width: 18px;
 	z-index: 2;
@@ -472,20 +473,37 @@ div.revisions-controls > .wp-slider > .ui-slider-handle {
 }
 
 .wp-slider .ui-slider-handle,
-.wp-slider .ui-slider-handle.ui-state-hover,
 .wp-slider .ui-slider-handle.focus {
-	background: #00a0d2;
+	background: #f7f7f7;
-	border: 1px solid #0073aa;
+	border: 1px solid #ccc;
-	-webkit-box-shadow: inset 0 1px 0 #78c8e6, 0 1px 0 rgba(0,0,0,.15);
+	-webkit-box-shadow: 0 1px 0 #cccccc;
-	box-shadow: inset 0 1px 0 #78c8e6, 0 1px 0 rgba(0,0,0,.15);
+	box-shadow: 0 1px 0 #cccccc;
 }
 
+.wp-slider .ui-slider-handle:hover,
+.wp-slider .ui-slider-handle.ui-state-hover {
+	background: #fafafa;
+	border-color: #999;
+}
+
+.wp-slider .ui-slider-handle:active,
+.wp-slider .ui-slider-handle.ui-state-active {
+	background: #eee;
+	border-color: #999;
+ 	-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 );
+ 	-webkit-transform: translateY(1px);
+ 	-ms-transform: translateY(1px);
+ 	transform: translateY(1px);
+}
+
+
 .wp-slider .ui-slider-handle:before {
 	background: none;
 	position: absolute;
-	top: 0;
+	top: 2px;
-	right: 0;
+	right: 2px;
-	color: #fff;
+	color: #555;
 	content: "\f229";
 	font: normal 18px/1 dashicons;
 	speak: none;
@@ -493,6 +511,11 @@ div.revisions-controls > .wp-slider > .ui-slider-handle {
 	-moz-osx-font-smoothing: grayscale;
 }
 
+.wp-slider .ui-slider-handle:hover:before,
+.wp-slider .ui-slider-handle.ui-state-hover:before {
+	color: #23282d;
+}
+
 .wp-slider .ui-slider-handle.from-handle:before,
 .wp-slider .ui-slider-handle.to-handle:before {
 	font-size: 20px !important;

wp-admin/css/revisions.css

@@ -462,8 +462,9 @@ div.revisions-controls > .wp-slider > .ui-slider-handle {
 	-webkit-border-radius: 50%;
 	border-radius: 50%;
 	height: 18px;
-	margin-top: -3px;
+	margin-top: -5px;
 	outline: none;
+	padding: 2px;
 	position: absolute;
 	width: 18px;
 	z-index: 2;
@@ -472,20 +473,37 @@ div.revisions-controls > .wp-slider > .ui-slider-handle {
 }
 
 .wp-slider .ui-slider-handle,
-.wp-slider .ui-slider-handle.ui-state-hover,
 .wp-slider .ui-slider-handle.focus {
-	background: #00a0d2;
+	background: #f7f7f7;
-	border: 1px solid #0073aa;
+	border: 1px solid #ccc;
-	-webkit-box-shadow: inset 0 1px 0 #78c8e6, 0 1px 0 rgba(0,0,0,.15);
+	-webkit-box-shadow: 0 1px 0 #cccccc;
-	box-shadow: inset 0 1px 0 #78c8e6, 0 1px 0 rgba(0,0,0,.15);
+	box-shadow: 0 1px 0 #cccccc;
 }
 
+.wp-slider .ui-slider-handle:hover,
+.wp-slider .ui-slider-handle.ui-state-hover {
+	background: #fafafa;
+	border-color: #999;
+}
+
+.wp-slider .ui-slider-handle:active,
+.wp-slider .ui-slider-handle.ui-state-active {
+	background: #eee;
+	border-color: #999;
+ 	-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 );
+ 	-webkit-transform: translateY(1px);
+ 	-ms-transform: translateY(1px);
+ 	transform: translateY(1px);
+}
+
+
 .wp-slider .ui-slider-handle:before {
 	background: none;
 	position: absolute;
-	top: 0;
+	top: 2px;
-	left: 0;
+	left: 2px;
-	color: #fff;
+	color: #555;
 	content: "\f229";
 	font: normal 18px/1 dashicons;
 	speak: none;
@@ -493,6 +511,11 @@ div.revisions-controls > .wp-slider > .ui-slider-handle {
 	-moz-osx-font-smoothing: grayscale;
 }
 
+.wp-slider .ui-slider-handle:hover:before,
+.wp-slider .ui-slider-handle.ui-state-hover:before {
+	color: #23282d;
+}
+
 .wp-slider .ui-slider-handle.from-handle:before,
 .wp-slider .ui-slider-handle.to-handle:before {
 	font-size: 20px !important;

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.4-alpha-34975';
+$wp_version = '4.4-alpha-34976';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.