diff --git a/src/wp-admin/css/colors/_admin.scss b/src/wp-admin/css/colors/_admin.scss index 6e396428f6..9d7a3fe270 100644 --- a/src/wp-admin/css/colors/_admin.scss +++ b/src/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 { diff --git a/src/wp-admin/css/revisions.css b/src/wp-admin/css/revisions.css index 9d2503b5f4..d3ebecc3ff 100644 --- a/src/wp-admin/css/revisions.css +++ b/src/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; - border: 1px solid #0073aa; - -webkit-box-shadow: inset 0 1px 0 #78c8e6, 0 1px 0 rgba(0,0,0,.15); - box-shadow: inset 0 1px 0 #78c8e6, 0 1px 0 rgba(0,0,0,.15); + background: #f7f7f7; + border: 1px solid #ccc; + -webkit-box-shadow: 0 1px 0 #cccccc; + 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; - left: 0; - color: #fff; + top: 2px; + left: 2px; + 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;