diff --git a/src/content-handlers/iiif/modules/uv-shared-module/css/range.less b/src/content-handlers/iiif/modules/uv-shared-module/css/range.less index 346c59f7c..eee385831 100644 --- a/src/content-handlers/iiif/modules/uv-shared-module/css/range.less +++ b/src/content-handlers/iiif/modules/uv-shared-module/css/range.less @@ -1,105 +1,107 @@ - -/* WebKit */ - -input[type=range] { - -webkit-appearance: none; -} - -input[type=range]::-webkit-slider-runnable-track { - width: 300px; - height: 5px; - background: @gray-light; - border: none; -} - -input[type=range]::-webkit-slider-thumb { - -webkit-appearance: none; - border: none; - height: 16px; - width: 16px; - border-radius: 50%; - background: @gray; - margin-top: -5px; -} - -input[type=range]:focus { - outline: none; -} - -input[type=range]:focus::-webkit-slider-runnable-track { - background: @gray-light; -} - -/* Firefox */ - -input[type=range] { - /*required for proper track sizing in FF*/ - width: 300px; -} - -input[type=range]::-moz-range-track { - width: 300px; - height: 5px; - background: #ddd; - border: none; -} - -input[type=range]::-moz-range-thumb { - border: none; - height: 16px; - width: 16px; - border-radius: 50%; - background: @gray; -} - -/*hide the outline behind the border*/ -input[type=range]:-moz-focusring { - outline: 1px solid white; - outline-offset: -1px; -} - -input[type=range]:focus::-moz-range-track { - background: #ccc; -} - - -/* IE */ - -input[type=range]::-ms-track { - width: 300px; - height: 5px; - - /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */ - background: transparent; - - /*leave room for the larger thumb to overflow with a transparent border */ - border-color: transparent; - border-width: 6px 0; - - /*remove default tick marks*/ - color: transparent; -} - -input[type=range]::-ms-fill-lower { - background: @gray-light; -} - -input[type=range]::-ms-fill-upper { - background: @gray-light; -} - -input[type=range]::-ms-thumb { - border: none; - height: 16px; - width: 16px; - border-radius: 50%; - background: @gray; -} - -input[type=range]:focus::-ms-fill-lower { - background: @gray-light; -} - -input[type=range]:focus::-ms-fill-upper { - background: @gray-lighter; -} +.uv { + + /* WebKit */ + + input[type=range] { + -webkit-appearance: none; + } + + input[type=range]::-webkit-slider-runnable-track { + width: 300px; + height: 5px; + background: @gray-light; + border: none; + } + + input[type=range]::-webkit-slider-thumb { + -webkit-appearance: none; + border: none; + height: 16px; + width: 16px; + border-radius: 50%; + background: @gray; + margin-top: -5px; + } + + input[type=range]:focus { + outline: none; + } + + input[type=range]:focus::-webkit-slider-runnable-track { + background: @gray-light; + } + + /* Firefox */ + + input[type=range] { + /*required for proper track sizing in FF*/ + width: 300px; + } + + input[type=range]::-moz-range-track { + width: 300px; + height: 5px; + background: #ddd; + border: none; + } + + input[type=range]::-moz-range-thumb { + border: none; + height: 16px; + width: 16px; + border-radius: 50%; + background: @gray; + } + + /*hide the outline behind the border*/ + input[type=range]:-moz-focusring { + outline: 1px solid white; + outline-offset: -1px; + } + + input[type=range]:focus::-moz-range-track { + background: #ccc; + } + + + /* IE */ + + input[type=range]::-ms-track { + width: 300px; + height: 5px; + + /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */ + background: transparent; + + /*leave room for the larger thumb to overflow with a transparent border */ + border-color: transparent; + border-width: 6px 0; + + /*remove default tick marks*/ + color: transparent; + } + + input[type=range]::-ms-fill-lower { + background: @gray-light; + } + + input[type=range]::-ms-fill-upper { + background: @gray-light; + } + + input[type=range]::-ms-thumb { + border: none; + height: 16px; + width: 16px; + border-radius: 50%; + background: @gray; + } + + input[type=range]:focus::-ms-fill-lower { + background: @gray-light; + } + + input[type=range]:focus::-ms-fill-upper { + background: @gray-lighter; + } +} \ No newline at end of file