mirror of
https://github.com/GoogleChrome/chrome-extensions-samples.git
synced 2026-04-01 14:20:01 +07:00
0cb5580bcd
* mv3 updated fontSettings sample * Added mv3 sample for fontSettings * Implemented simplified font settings sample * Update popup.js
114 lines
2.9 KiB
CSS
114 lines
2.9 KiB
CSS
/* Copyright 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);
|
|
}
|