diff options
1 files changed, 84 insertions, 8 deletions
| -rw-r--r-- | docs/css/spectre-exp.css | 92 |
diff --git a/docs/css/spectre-exp.css b/docs/css/spectre-exp.css index 342c224..1d85409 100644 --- a/docs/css/spectre-exp.css +++ b/docs/css/spectre-exp.css @@ -1,15 +1,67 @@ /*! Spectre.css Experimentals | MIT License | github.com/picturepan2/spectre */ +.meter { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background: #f8f8f8; + border: 0; + display: block; + height: 1.6rem; + width: 100%; +} +.meter::-webkit-meter-inner-element { + display: block; +} +.meter::-webkit-meter-bar, +.meter::-webkit-meter-optimum-value, +.meter::-webkit-meter-suboptimum-value, +.meter::-webkit-meter-even-less-good-value { + border-radius: .2rem; +} +.meter::-webkit-meter-bar { + background: #f8f8f8; +} +.meter::-webkit-meter-optimum-value { + background: #32b643; +} +.meter::-webkit-meter-suboptimum-value { + background: #ffb700; +} +.meter::-webkit-meter-even-less-good-value { + background: #e85600; +} +.meter::-moz-meter-bar, +.meter::-moz-meter-optimum, +.meter::-moz-meter-sub-optimum, +.meter::-moz-meter-sub-sub-optimum { + border-radius: .2rem; +} +.meter::-moz-meter-bar { + background: #f8f8f8; +} +.meter:-moz-meter-optimum { + background: #32b643; +} +.meter:-moz-meter-sub-optimum { + background: #ffb700; +} +.meter:-moz-meter-sub-sub-optimum { + background: #e85600; +} .progress { -webkit-appearance: none; -moz-appearance: none; appearance: none; + background: #efefef; border: 0; + border-radius: .2rem; color: #5764c6; height: .4rem; + position: relative; width: 100%; } .progress::-webkit-progress-bar { - background: #efefef; + background: transparent; border-radius: .2rem; } .progress::-webkit-progress-value { @@ -20,6 +72,30 @@ background: #5764c6; border-radius: .2rem; } +.progress:indeterminate { + -webkit-animation: progress-indeterminate 1.5s linear infinite; + animation: progress-indeterminate 1.5s linear infinite; + background: #efefef linear-gradient(to right, #5764c6 30%, #efefef 30%) top left / 150% 150% no-repeat; +} +.progress:indeterminate::-moz-progress-bar { + background: transparent; +} +@-webkit-keyframes progress-indeterminate { + 0% { + background-position: 200% 0; + } + 100% { + background-position: -200% 0; + } +} +@keyframes progress-indeterminate { + 0% { + background-position: 200% 0; + } + 100% { + background-position: -200% 0; + } +} .slider { -webkit-appearance: none; -moz-appearance: none; @@ -33,32 +109,32 @@ -webkit-appearance: none; background: #5764c6; border-radius: 50%; - height: 1.4rem; - margin-top: -.5rem; + height: 1.2rem; + margin-top: -.4rem; transition: transform .2s ease, -webkit-transform .2s ease; transition: transform .2s ease; transition: -webkit-transform .2s ease; - width: 1.4rem; + width: 1.2rem; } .slider::-moz-range-thumb { background: #5764c6; border: 0; border-radius: 50%; - height: 1.4rem; + height: 1.2rem; transition: transform .2s ease, -webkit-transform .2s ease; transition: transform .2s ease; transition: -webkit-transform .2s ease; - width: 1.4rem; + width: 1.2rem; } .slider::-ms-thumb { background: #5764c6; border: 0; border-radius: 50%; - height: 1.4rem; + height: 1.2rem; transition: transform .2s ease, -webkit-transform .2s ease; transition: transform .2s ease; transition: -webkit-transform .2s ease; - width: 1.4rem; + width: 1.2rem; } .slider:active::-webkit-slider-thumb { -webkit-transform: scale(1.25); |