UI refresh of Advanced Font Settings Extension

chrome/common/extensions/docs/examples/api/fontSettings/slider.css

+/* Copyright (c) 2013 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+/* Customize the standard input[type='range']. */
+.slider > input[type='range'] {
+  -webkit-appearance: none !important;  /* Hide the default thumb icon. */
+  background: transparent;  /* Hide the standard slider bar */
+  height: 100%;
+  left: -2px;  /* Required to align the input element with the parent. */
+  position: absolute;
+  top: -2px;
+  width: 100%;
+}
+
+/* Custom thumb icon. */
+.slider > input[type='range']::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  background-position: center center;
+  background-repeat: no-repeat;
+  height: 24px;
+  position: relative;
+  z-index: 2;
+}
+
+/* Custom slider bar (we hide the standard one). */
+.slider > .bar {
+  /* In order to match the horizontal position of the standard slider bar
+     left and right must be equal to 1/2 of the thumb icon width. */
+  left: 8px;
+  right: 8px;
+  bottom: 10px;
+  pointer-events: none;  /* Mouse events pass through to the standard input. */
+  position: absolute;
+  top: 10px;
+  background-image: url(../images/slider/slide_bar_center.png);
+  height: 4px;
+}
+
+.slider > .bar > .filled,
+.slider > .bar > .cap {
+  position: absolute;
+}
+
+/* The filled portion of the slider bar to the left of the thumb. */
+.slider > .bar > .filled {
+  border-left-style: none;
+  border-right-style: none;
+  left: 0;
+  width: 0; /* The element style.width is manipulated from the code. */
+}
+
+.slider > .bar > .cap.right {
+  background-image: url(../images/slider/slider_bar_right.png);
+  height: 4px;
+  width: 4px;
+  left: 100%;
+}
+
+.slider > .bar > .filled {
+  background-image: url(../images/slider/slide_bar_fill_center.png);
+  height: 4px;
+}
+
+.slider > .bar > .cap.left {
+  background-image: url(../images/slider/slide_bar_fill_left.png);
+  height: 4px;
+  width: 4px;
+  right: 100%;
+}
+
+.slider.disabled  > .bar {
+  background-image: url(../images/slider/slide_bar_disabled_center.png);
+}
+
+.slider.disabled  > .bar > .filled {
+  background-image: url(../images/slider/slide_bar_disabled_center.png);
+}
+
+.slider.disabled  > .bar > .cap.left {
+  background-image: url(../images/slider/slide_bar_disabled_left.png);
+}
+
+.slider.disabled  > .bar > .cap.right {
+  background-image: url(../images/slider/slide_bar_disabled_right.png);
+}
+
+.slider.disabled,
+.slider.readonly {
+  pointer-events: none;
+}
+
+.slider {
+  -webkit-box-flex: 1;
+}
+
+.slider > input[type='range']::-webkit-slider-thumb {
+  background-image: url(../images/slider/slider_thumb.png);
+  width: 16px;
+}
+
+.slider > input[type='range']::-webkit-slider-thumb:hover {
+  background-image: url(../images/slider/slider_thumb_hover.png);
+}
+
+.slider > input[type='range']::-webkit-slider-thumb:active {
+  background-image: url(../images/slider/slider_thumb_down.png);
+}
+
+.slider.disabled > input[type='range']::-webkit-slider-thumb {
+  background-image: url(../images/slider/slider_thumb_disabled.png);
+}