File manager - Edit - /home/monara/public_html/Hotel_Sapphire/wp-content/plugins/wp-whatsapp/assets/libs/ui-range.css
Back
.range { --primaryColor: #5cb85c; --value-active-color: white; --value-background: white; --value-font: 700 12px/1 Arial; --progress-color: #aedcae; --progress-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1) inset; --fill-color: var(--primaryColor); --thumb-size: 16px; --track-height: calc(var(--thumb-size) / 2); --thumb-shadow: 0 0 3px rgba(0, 0, 0, 0.2); --ticks-thickness: 1px; --ticks-height: 5px; --ticks-color: silver; --step: 1; --ticks-count: (var(--max) - var(--min)) / var(--step); --maxTicksAllowed: 30; --too-many-ticks: Min(1, Max(var(--ticks-count) - var(--maxTicksAllowed), 0)); --x-step: Max(var(--step), var(--too-many-ticks) * (var(--max) - var(--min))); --tickInterval: 100/ ((var(--max) - var(--min)) / var(--step)) * var(--tickEvery, 1); --tickIntervalPerc: calc( (100% - var(--thumb-size)) / ((var(--max) - var(--min)) / var(--x-step)) * var(--tickEvery, 1) ); --completed: calc( (var(--value) - var(--min)) / (var(--max) - var(--min)) * 100 ); --LTR: 1; display: inline-block; width: 25em; margin-top: 10px; height: Max(var(--track-height), var(--thumb-size)); background: linear-gradient( to right, var(--ticks-color) var(--ticks-thickness), transparent 1px ) repeat-x; background-size: var(--tickIntervalPerc) var(--ticks-height); background-position-x: calc(var(--thumb-size) / 2); background-position-y: var(--flip-y, bottom); position: relative; z-index: 1; padding-bottom: var(--flip-y, var(--ticks-height)); padding-top: calc(var(--flip-y) * var(--ticks-height)); margin-bottom: 20px; } [dir="rtl"] .range { --LTR: -1; } .range[data-ticks-position="top"] { --flip-y: 1; } .range::before, .range::after { --offset: calc(var(--thumb-size) / 2); content: counter(x); display: var(--show-min-max, block); font: 12px Arial; position: absolute; bottom: var(--flip-y, -2.5ch); top: calc(-2.5ch * var(--flip-y)); opacity: var(--min-max-opacity, 0.5); pointer-events: none; } .range::before { counter-reset: x var(--min); left: var(--offset); transform: translateX(calc(-50% * var(--LTR))); } [dir="rtl"] .range::before { left: auto; right: var(--offset); } .range::after { counter-reset: x var(--max); right: var(--offset); transform: translateX(calc(50% * var(--LTR))); } [dir="rtl"] .range::after { right: auto; left: var(--offset); } .range__progress { position: absolute; left: 0; top: calc(50% - var(--ticks-height) / 2); transform: var(--flip-y, translateY(-50%) translateZ(0)); width: 100%; height: calc(var(--track-height)); pointer-events: none; z-index: -1; /* box-shadow: var(--progress-shadow); */ border-radius: 20px; background: var(--fill-color, white); } .range__progress::after { content: ""; display: block; margin-left: auto; margin-right: -1px; width: calc( (100% - var(--completed) * 1%) + (var(--completed) / 100) * var(--thumb-size) / 2 ); height: 100%; background: var(--progress-color, #eee); box-shadow: inherit; border-radius: 0 20px 20px 0; } [dir="rtl"] .range__progress::after { margin-right: auto; margin-left: -1px; border-radius: 20px 0 0 20px; } .range > input { -webkit-appearance: none; width: 100%; height: var(--thumb-size); margin: 0; cursor: -webkit-grab; cursor: grab; outline: none; background: none; } .range > input::-webkit-slider-thumb { appearance: none; height: var(--thumb-size); width: var(--thumb-size); border-radius: 50%; background: var(--thumb-color, white); border: 1px solid silver; box-shadow: var(--inner-shadow, 0 0), var(--thumb-shadow); } .range > input::-moz-slider-thumb { appearance: none; height: var(--thumb-size); width: var(--thumb-size); border-radius: 50%; background: var(--thumb-color, white); border: 1px solid silver; box-shadow: var(--inner-shadow, 0 0), var(--thumb-shadow); } .range > input::-ms-thumb { appearance: none; height: var(--thumb-size); width: var(--thumb-size); border-radius: 50%; background: var(--thumb-color, white); border: 1px solid silver; box-shadow: var(--inner-shadow, 0 0), var(--thumb-shadow); } .range > input:active { cursor: grabbing; --thumb-color: var(--fill-color); --inner-shadow: 0 0 0 calc(var(--thumb-size) / 4) inset white; } .range > input:active + output { transition: 0s; } .range > input:hover + output { --value-background: var(--primaryColor); color: var(--value-active-color); transform: translate(var(--x-offset), 0); box-shadow: 0 0 0 3px var(--value-background); } .range > output { --x-offset: calc(var(--completed) * -1% * var(--LTR)); --pos: calc(((var(--value) - var(--min)) / (var(--max) - var(--min))) * 100%); pointer-events: none; position: absolute; z-index: 5; background: var(--value-background); border-radius: 10px; padding: 0 4px; /* top: -3ch; */ top: 2.5ch; left: var(--pos); transform: translate(var(--x-offset), 6px); transition: all 0.12s ease-out, left 0s, top 0s; } [dir="rtl"] .range > output { left: auto; right: var(--pos); } .range > output::after { content: var(--text-value); font: var(--value-font); } .range.title-size, .range.description-size, .range.account-name-size, .range.regular-text-size { --step: 10; }
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0 |
proxy
|
phpinfo
|
Settings