From bd7ae6218033b436fa39771d75d54acceb9de5ca Mon Sep 17 00:00:00 2001 From: Orangerot Date: Tue, 10 Dec 2024 01:05:05 +0100 Subject: feat: added fontawesome icons --- lib/bulma-slider.css | 256 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 256 insertions(+) create mode 100644 lib/bulma-slider.css (limited to 'lib/bulma-slider.css') diff --git a/lib/bulma-slider.css b/lib/bulma-slider.css new file mode 100644 index 0000000..cafa942 --- /dev/null +++ b/lib/bulma-slider.css @@ -0,0 +1,256 @@ +input[type=range].slider { + height: 25px; + -webkit-appearance: none; + margin: 10px 0; + background-color: inherit; +} + +input[type=range].slider.is-fullwidth { + display: block; + width: 100%; +} +input[type=range].slider:focus { + outline: none; +} + +input[type=range].slider.has-output + output { + width: 4rem; + background-color: #4a4a4a; + border-radius: 4px; + padding: .4rem .8rem; + font-size: .75rem; + line-height: .75rem; + text-align: center; + text-overflow: ellipsis; + white-space: nowrap; + color: #fff; + overflow: hidden; + pointer-events: none; + z-index:200; +} + +input[type=range].slider.has-output { + display: inline-block; + vertical-align: middle; +} + +input[type=range].slider.is-fullwidth.has-output { + width: calc(100% - 5.2rem); +} + +input[type=range].slider.has-output + output { + display: inline-block; + margin-left: .75rem; + vertical-align: middle; +} + +input[type=range].slider::-webkit-slider-runnable-track { + width: 100%; + height: 5px; + cursor: pointer; + animate: 0.2s; + box-shadow: 0px 0px 0px #000000; + background-color: #dbdbdb; + border-radius: 4px; + border: 0px solid #000000; +} +input[type=range].slider::-webkit-slider-thumb { + box-shadow: 0px 0px 0px #000000; + border: 1px solid #b5b5b5; + height: 18px; + width: 18px; + border-radius: 25px; + background-color: #ffffff; + cursor: pointer; + -webkit-appearance: none; + margin-top: -7px; +} +input[type=range].slider:focus::-webkit-slider-runnable-track { + background-color: #dbdbdb; +} + +input[type=range].slider::-moz-range-track { + width: 100%; + height: 5px; + cursor: pointer; + animate: 0.2s; + box-shadow: 0px 0px 0px #000000; + background-color: #dbdbdb; + border-radius: 4px; + border: 0px solid #000000; +} +input[type=range].slider::-moz-range-thumb { + box-shadow: 0px 0px 0px #000000; + border: 1px solid #b5b5b5; + height: 18px; + width: 18px; + border-radius: 25px; + background-color: #ffffff; + cursor: pointer; +} + +input[type=range].slider::-ms-track { + width: 100%; + height: 5px; + cursor: pointer; + animate: 0.2s; + background-color: transparent; + border-color: transparent; + color: transparent; +} +input[type=range].slider::-ms-fill-lower { + background-color: #dbdbdb; + border: 0px solid #000000; + border-radius: 8px; + box-shadow: 0px 0px 0px #000000; +} +input[type=range].slider::-ms-fill-upper { + background-color: #dbdbdb; + border: 0px solid #000000; + border-radius: 4px; + box-shadow: 0px 0px 0px #000000; +} +input[type=range].slider::-ms-thumb { + margin-top: 1px; + box-shadow: 0px 0px 0px #000000; + border: 1px solid #b5b5b5; + height: 18px; + width: 18px; + border-radius: 25px; + background-color: #ffffff; + cursor: pointer; +} +input[type=range].slider:focus::-ms-fill-lower { + background-color: #dbdbdb; +} +input[type=range].slider:focus::-ms-fill-upper { + background-color: #dbdbdb; +} + +input[type=range].slider.is-primary::-webkit-slider-runnable-track { + background-color: #00d1b2 !important; +} +input[type=range].slider.is-primary::-moz-range-track { + background-color: #00d1b2 !important; +} +input[type=range].slider.is-primary::-ms-fill-lower { + background-color: #00d1b2 !important; +} +input[type=range].slider.is-primary::-ms-fill-upper { + background-color: #00d1b2 !important; +} + +input[type=range].slider.is-link::-webkit-slider-runnable-track { + background-color: #3273dc !important; +} +input[type=range].slider.is-link::-moz-range-track { + background-color: #3273dc !important; +} +input[type=range].slider.is-link::-ms-fill-lower { + background-color: #3273dc !important; +} +input[type=range].slider.is-link::-ms-fill-upper { + background-color: #3273dc !important; +} + +input[type=range].slider.is-info::-webkit-slider-runnable-track { + background-color: #209cee !important; +} +input[type=range].slider.is-info::-moz-range-track { + background-color: #209cee !important; +} +input[type=range].slider.is-info::-ms-fill-lower { + background-color: #209cee !important; +} +input[type=range].slider.is-info::-ms-fill-upper { + background-color: #209cee !important; +} + +input[type=range].slider.is-success::-webkit-slider-runnable-track { + background-color: #23d160 !important; +} +input[type=range].slider.is-success::-moz-range-track { + background-color: #23d160 !important; +} +input[type=range].slider.is-success::-ms-fill-lower { + background-color: #23d160 !important; +} +input[type=range].slider.is-success::-ms-fill-upper { + background-color: #23d160 !important; +} + +input[type=range].slider.is-warning::-webkit-slider-runnable-track { + background-color: #ffdd57 !important; +} +input[type=range].slider.is-warning::-moz-range-track { + background-color: #ffdd57 !important; +} +input[type=range].slider.is-warning::-ms-fill-lower { + background-color: #ffdd57 !important; +} +input[type=range].slider.is-warning::-ms-fill-upper { + background-color: #ffdd57 !important; +} + +input[type=range].slider.is-danger::-webkit-slider-runnable-track { + background-color: #ff3860 !important; +} +input[type=range].slider.is-danger::-moz-range-track { + background-color: #ff3860 !important; +} +input[type=range].slider.is-danger::-ms-fill-lower { + background-color: #ff3860 !important; +} +input[type=range].slider.is-danger::-ms-fill-upper { + background-color: #ff3860 !important; +} + +input[type=range].slider.is-white.has-output + output { + background-color: #fff; + color: #0a0a0a; +} + +input[type=range].slider.is-black.has-output + output { + background-color: #0a0a0a; + color: #ffffff; +} + +input[type=range].slider.is-light.has-output + output { + background-color: #f5f5f5; + color: #363636; +} + +input[type=range].slider.is-dark.has-output + output { + background-color: #363636; + color: #f5f5f5; +} + +input[type=range].slider.is-primary.has-output + output { + background-color: #00d1b2; + color: #ffffff; +} + +input[type=range].slider.is-link.has-output + output { + background-color: #3273dc; + color: #ffffff; +} + +input[type=range].slider.is-info.has-output + output { + background-color: #209cee; + color: #ffffff; +} + +input[type=range].slider.is-success.has-output + output { + background-color: #23d160; + color: #ffffff; +} + +input[type=range].slider.is-warning.has-output + output { + background-color: #ffdd57; + color: rgba(0, 0, 0, .7); +} + +input[type=range].slider.is-danger.has-output + output { + background-color: #ff3860; + color: #ffffff; +} -- cgit v1.2.3