From 381e3f142d96edfa441afc16de5641d90e4aa10b Mon Sep 17 00:00:00 2001 From: OnkarRuikar <87750369+OnkarRuikar@users.noreply.github.com> Date: Sun, 31 Aug 2025 12:01:44 +0530 Subject: [PATCH 1/9] feat(tools): add CSS color mixer tool --- .../color-mix/color-mixer-tool/index.md | 17 +++++++++++++++++ files/sidebars/cssref.yaml | 4 ++++ 2 files changed, 21 insertions(+) create mode 100644 files/en-us/web/css/color_value/color-mix/color-mixer-tool/index.md diff --git a/files/en-us/web/css/color_value/color-mix/color-mixer-tool/index.md b/files/en-us/web/css/color_value/color-mix/color-mixer-tool/index.md new file mode 100644 index 000000000000000..807149779269698 --- /dev/null +++ b/files/en-us/web/css/color_value/color-mix/color-mixer-tool/index.md @@ -0,0 +1,17 @@ +--- +title: Color mixer tool +slug: Web/CSS/color_value/color-mix/color-mixer-tool +page-type: guide +sidebar: cssref +--- + +This tool lets you mix two colors, `color-one` and `color-two`, using the [`color-mix()`](/en-US/docs/Web/CSS/color_value/color-mix) function. The source colors are shown on the outside, and the mixed color is shown in the middle. You can change colors by clicking on them and choosing a new color using the resulting color picker. You can also change the percentage of each color included in the mix using the sliders, and the color space using the drop-down menu. + +{{EmbedGHLiveSample("css-examples/tools/color-mixer/", '100%', 400)}} + +## See also + +- {{CSSXref("<color>")}} +- {{CSSXref("<color-interpolation-method>")}} +- {{cssxref("<hue>")}} +- [CSS relative colors](/en-US/docs/Web/CSS/CSS_colors/Relative_colors) diff --git a/files/sidebars/cssref.yaml b/files/sidebars/cssref.yaml index bd5e749259383f0..4b102eece677634 100644 --- a/files/sidebars/cssref.yaml +++ b/files/sidebars/cssref.yaml @@ -29,6 +29,9 @@ sidebar: - /Learn_web_development/Core/Styling_basics/Images_media_forms - /Learn_web_development/Core/Styling_basics/Tables - /Learn_web_development/Core/Styling_basics/Debugging_CSS + - /Learn_web_development/Core/Styling_basics/Fundamental_CSS_comprehension + - /Learn_web_development/Core/Styling_basics/Fancy_letterheaded_paper + - /Learn_web_development/Core/Styling_basics - link: /Learn_web_development/Core/Text_styling title: CSS_text_styling details: closed @@ -351,6 +354,7 @@ sidebar: - /Web/CSS/CSS_backgrounds_and_borders/Border-image_generator - /Web/CSS/CSS_backgrounds_and_borders/Border-radius_generator - /Web/CSS/CSS_shapes/Shape_generator + - /Web/CSS/color_value/color-mix/color-mixer-tool l10n: de: Beginners: Einsteiger-Tutorials From 2262fb371af86a0e83e50747dba6f7fc10f79d48 Mon Sep 17 00:00:00 2001 From: OnkarRuikar <87750369+OnkarRuikar@users.noreply.github.com> Date: Mon, 1 Sep 2025 09:19:40 +0530 Subject: [PATCH 2/9] rename, move, and convert to livesample --- .prettierignore | 2 + .vscode/cspell.json | 4 +- .../color-mix/color-mixer-tool/index.md | 17 - .../color_mixer_tool/classic.min.css | 2 + .../css/color_value/color_mixer_tool/index.md | 385 ++++++++++++++++++ .../color_mixer_tool/pickr.es5.min.js | 2 + files/sidebars/cssref.yaml | 2 +- 7 files changed, 395 insertions(+), 19 deletions(-) delete mode 100644 files/en-us/web/css/color_value/color-mix/color-mixer-tool/index.md create mode 100644 files/en-us/web/css/color_value/color_mixer_tool/classic.min.css create mode 100644 files/en-us/web/css/color_value/color_mixer_tool/index.md create mode 100644 files/en-us/web/css/color_value/color_mixer_tool/pickr.es5.min.js diff --git a/.prettierignore b/.prettierignore index 0bf23d58760f9b0..b527cefbfce2d04 100644 --- a/.prettierignore +++ b/.prettierignore @@ -4,6 +4,8 @@ build/ /files/en-us/_githistory.json /tests/front-matter_test_files +/files/en-us/web/css/color_value/color_mixer_tool/classic.min.css +/files/en-us/web/css/color_value/color_mixer_tool/pickr.es5.min.js # XXX Ignored until https://github.com/prettier/prettier/issues/15032 is fixed /files/en-us/web/javascript/reference/operators/exponentiation/index.md diff --git a/.vscode/cspell.json b/.vscode/cspell.json index e3a8f5785c0c40d..cdf7431fd275c3f 100644 --- a/.vscode/cspell.json +++ b/.vscode/cspell.json @@ -28,7 +28,9 @@ "ignorePaths": [ ".vscode/cspell.json", ".vscode/extensions.json", - ".markdownlint-cli2.jsonc" + ".markdownlint-cli2.jsonc", + "/files/en-us/web/css/color_value/color_mixer_tool/classic.min.css", + "/files/en-us/web/css/color_value/color_mixer_tool/pickr.es5.min.js" ], "ignoreRegExpList": [ // macros diff --git a/files/en-us/web/css/color_value/color-mix/color-mixer-tool/index.md b/files/en-us/web/css/color_value/color-mix/color-mixer-tool/index.md deleted file mode 100644 index 807149779269698..000000000000000 --- a/files/en-us/web/css/color_value/color-mix/color-mixer-tool/index.md +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Color mixer tool -slug: Web/CSS/color_value/color-mix/color-mixer-tool -page-type: guide -sidebar: cssref ---- - -This tool lets you mix two colors, `color-one` and `color-two`, using the [`color-mix()`](/en-US/docs/Web/CSS/color_value/color-mix) function. The source colors are shown on the outside, and the mixed color is shown in the middle. You can change colors by clicking on them and choosing a new color using the resulting color picker. You can also change the percentage of each color included in the mix using the sliders, and the color space using the drop-down menu. - -{{EmbedGHLiveSample("css-examples/tools/color-mixer/", '100%', 400)}} - -## See also - -- {{CSSXref("<color>")}} -- {{CSSXref("<color-interpolation-method>")}} -- {{cssxref("<hue>")}} -- [CSS relative colors](/en-US/docs/Web/CSS/CSS_colors/Relative_colors) diff --git a/files/en-us/web/css/color_value/color_mixer_tool/classic.min.css b/files/en-us/web/css/color_value/color_mixer_tool/classic.min.css new file mode 100644 index 000000000000000..43ee029a5a73776 --- /dev/null +++ b/files/en-us/web/css/color_value/color_mixer_tool/classic.min.css @@ -0,0 +1,2 @@ +/*! Pickr 1.9.1 MIT | https://github.com/Simonwep/pickr */ +.pickr{position:relative;overflow:visible;transform:translateY(0)}.pickr *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}.pickr .pcr-button{position:relative;height:2em;width:2em;padding:.5em;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;border-radius:.15em;background:url("data:image/svg+xml;utf8, ") no-repeat center;background-size:0;transition:all .3s}.pickr .pcr-button::before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url("data:image/svg+xml;utf8, ");background-size:.5em;border-radius:.15em;z-index:-1}.pickr .pcr-button::before{z-index:initial}.pickr .pcr-button::after{position:absolute;content:"";top:0;left:0;height:100%;width:100%;transition:background .3s;background:var(--pcr-color);border-radius:.15em}.pickr .pcr-button.clear{background-size:70%}.pickr .pcr-button.clear::before{opacity:0}.pickr .pcr-button.clear:focus{box-shadow:0 0 0 1px rgba(255,255,255,.85),0 0 0 3px var(--pcr-color)}.pickr .pcr-button.disabled{cursor:not-allowed}.pickr *,.pcr-app *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}.pickr input:focus,.pickr input.pcr-active,.pickr button:focus,.pickr button.pcr-active,.pcr-app input:focus,.pcr-app input.pcr-active,.pcr-app button:focus,.pcr-app button.pcr-active{box-shadow:0 0 0 1px rgba(255,255,255,.85),0 0 0 3px var(--pcr-color)}.pickr .pcr-palette,.pickr .pcr-slider,.pcr-app .pcr-palette,.pcr-app .pcr-slider{transition:box-shadow .3s}.pickr .pcr-palette:focus,.pickr .pcr-slider:focus,.pcr-app .pcr-palette:focus,.pcr-app .pcr-slider:focus{box-shadow:0 0 0 1px rgba(255,255,255,.85),0 0 0 3px rgba(0,0,0,.25)}.pcr-app{position:fixed;display:flex;flex-direction:column;z-index:10000;border-radius:.1em;background:#fff;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03);left:0;top:0}.pcr-app.visible{transition:opacity .3s;visibility:visible;opacity:1}.pcr-app .pcr-swatches{display:flex;flex-wrap:wrap;margin-top:.75em}.pcr-app .pcr-swatches.pcr-last{margin:0}@supports(display: grid){.pcr-app .pcr-swatches{display:grid;align-items:center;grid-template-columns:repeat(auto-fit, 1.75em)}}.pcr-app .pcr-swatches>button{font-size:1em;position:relative;width:calc(1.75em - 5px);height:calc(1.75em - 5px);border-radius:.15em;cursor:pointer;margin:2.5px;flex-shrink:0;justify-self:center;transition:all .15s;overflow:hidden;background:rgba(0,0,0,0);z-index:1}.pcr-app .pcr-swatches>button::before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url("data:image/svg+xml;utf8, ");background-size:6px;border-radius:.15em;z-index:-1}.pcr-app .pcr-swatches>button::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:var(--pcr-color);border:1px solid rgba(0,0,0,.05);border-radius:.15em;box-sizing:border-box}.pcr-app .pcr-swatches>button:hover{filter:brightness(1.05)}.pcr-app .pcr-swatches>button:not(.pcr-active){box-shadow:none}.pcr-app .pcr-interaction{display:flex;flex-wrap:wrap;align-items:center;margin:0 -0.2em 0 -0.2em}.pcr-app .pcr-interaction>*{margin:0 .2em}.pcr-app .pcr-interaction input{letter-spacing:.07em;font-size:.75em;text-align:center;cursor:pointer;color:#75797e;background:#f1f3f4;border-radius:.15em;transition:all .15s;padding:.45em .5em;margin-top:.75em}.pcr-app .pcr-interaction input:hover{filter:brightness(0.975)}.pcr-app .pcr-interaction input:focus{box-shadow:0 0 0 1px rgba(255,255,255,.85),0 0 0 3px rgba(66,133,244,.75)}.pcr-app .pcr-interaction .pcr-result{color:#75797e;text-align:left;flex:1 1 8em;min-width:8em;transition:all .2s;border-radius:.15em;background:#f1f3f4;cursor:text}.pcr-app .pcr-interaction .pcr-result::-moz-selection{background:#4285f4;color:#fff}.pcr-app .pcr-interaction .pcr-result::selection{background:#4285f4;color:#fff}.pcr-app .pcr-interaction .pcr-type.active{color:#fff;background:#4285f4}.pcr-app .pcr-interaction .pcr-save,.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear{color:#fff;width:auto}.pcr-app .pcr-interaction .pcr-save,.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear{color:#fff}.pcr-app .pcr-interaction .pcr-save:hover,.pcr-app .pcr-interaction .pcr-cancel:hover,.pcr-app .pcr-interaction .pcr-clear:hover{filter:brightness(0.925)}.pcr-app .pcr-interaction .pcr-save{background:#4285f4}.pcr-app .pcr-interaction .pcr-clear,.pcr-app .pcr-interaction .pcr-cancel{background:#f44250}.pcr-app .pcr-interaction .pcr-clear:focus,.pcr-app .pcr-interaction .pcr-cancel:focus{box-shadow:0 0 0 1px rgba(255,255,255,.85),0 0 0 3px rgba(244,66,80,.75)}.pcr-app .pcr-selection .pcr-picker{position:absolute;height:18px;width:18px;border:2px solid #fff;border-radius:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none}.pcr-app .pcr-selection .pcr-color-palette,.pcr-app .pcr-selection .pcr-color-chooser,.pcr-app .pcr-selection .pcr-color-opacity{position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:flex;flex-direction:column;cursor:grab;cursor:-webkit-grab}.pcr-app .pcr-selection .pcr-color-palette:active,.pcr-app .pcr-selection .pcr-color-chooser:active,.pcr-app .pcr-selection .pcr-color-opacity:active{cursor:grabbing;cursor:-webkit-grabbing}.pcr-app[data-theme=classic]{width:28.5em;max-width:95vw;padding:.8em}.pcr-app[data-theme=classic] .pcr-selection{display:flex;justify-content:space-between;flex-grow:1}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview{position:relative;z-index:1;width:2em;display:flex;flex-direction:column;justify-content:space-between;margin-right:.75em}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview::before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url("data:image/svg+xml;utf8, ");background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-last-color{cursor:pointer;border-radius:.15em .15em 0 0;z-index:2}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-current-color{border-radius:0 0 .15em .15em}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-last-color,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-current-color{background:var(--pcr-color);width:100%;height:50%}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette{width:100%;height:8em;z-index:1}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette .pcr-palette{flex-grow:1;border-radius:.15em}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette .pcr-palette::before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url("data:image/svg+xml;utf8, ");background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity{margin-left:.75em}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser .pcr-picker,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity .pcr-picker{left:50%;transform:translateX(-50%)}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser .pcr-slider,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity .pcr-slider{width:8px;flex-grow:1;border-radius:50em}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser .pcr-slider{background:linear-gradient(to bottom, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(0, 100%, 50%))}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity .pcr-slider{background:linear-gradient(to bottom, transparent, black),url("data:image/svg+xml;utf8, ");background-size:100%,50%} \ No newline at end of file diff --git a/files/en-us/web/css/color_value/color_mixer_tool/index.md b/files/en-us/web/css/color_value/color_mixer_tool/index.md new file mode 100644 index 000000000000000..410e2f826c9f2cf --- /dev/null +++ b/files/en-us/web/css/color_value/color_mixer_tool/index.md @@ -0,0 +1,385 @@ +--- +title: Color mixer tool +slug: Web/CSS/color_value/Color_mixer_tool +page-type: guide +sidebar: cssref +--- + +This tool lets you mix two colors, `color-one` and `color-two`, using the [`color-mix()`](/en-US/docs/Web/CSS/color_value/color-mix) function. The source colors are shown on the outside, and the mixed color is shown in the middle. You can change colors by clicking on them and choosing a new color using the resulting color picker. You can also change the percentage of each color included in the mix using the sliders, and the color space using the drop-down menu. + +```html hidden live-sample___color-mixer + + +
+

Color mixer

+

Click on 'color-one' and 'color-two' to select colors.

+ + +
mixed-color
+ + + +
+ + + + +
+ + +
+
+ + +
+ + + + + + +
+``` + +```css hidden live-sample___color-mixer +#color-mixer { + margin: 0.5rem; + font-family: sans-serif; + display: grid; + grid-template-columns: 150px 1fr 1fr 150px; + grid-template-areas: + "header header header header" + "text text text text" + "color-one-text mix-text mix-text color-two-text" + "color-picker-one mix-output mix-output color-picker-two" + "mix-output-text mix-output-text mix-output-text mix-output-text" + "percent-one percent-one percent-two percent-two" + "color-space-label color-space interpolation-label interpolation"; +} + +#color-mixer > * { + padding: 0; + margin: 0 auto; +} + +#color-mixer > :nth-child(1) { + grid-area: header; +} + +#color-mixer > :nth-child(2) { + grid-area: text; + margin-bottom: 2rem; +} + +#color-mixer > :nth-child(3) { + grid-area: color-one-text; +} + +#color-mixer > :nth-child(4) { + grid-area: mix-text; +} + +#color-mixer > :nth-child(5) { + grid-area: color-two-text; +} + +#color-mixer > :nth-child(6) { + grid-area: color-picker-one; + width: 100% !important; + height: 100px !important; + border-radius: 20% 0 0 20%; + cursor: pointer; + border: none; + z-index: 1; + box-shadow: -5px 5px 5px grey; +} + +#color-mixer > :nth-child(7) { + grid-area: mix-output; + width: 100%; + height: 100px; +} + +#color-mixer > :nth-child(8) { + grid-area: color-picker-two; + width: 100%; + height: 100px; + border-radius: 0 20% 20% 0; + cursor: pointer; + border: none; + z-index: 1; + box-shadow: 5px 5px 5px grey; +} + +#color-mixer > :nth-child(9) { + grid-area: mix-output-text; + margin: 1rem auto auto 1rem; + font-weight: bold; + font-size: 0.8rem; + height: 2.5rem; +} + +#color-mixer > :nth-child(10) { + grid-area: percent-one; + width: 100%; + display: flex; +} + +#percentage-one-label, +#percentage-two-label { + width: 2rem; + text-align: end; +} + +#color-mixer > :nth-child(11) { + grid-area: percent-two; + width: 100%; + display: flex; +} + +#color-mixer > :nth-child(12) { + grid-area: color-space-label; + margin: 0.5rem 0 0 auto; +} + +#color-mixer > :nth-child(13) { + grid-area: color-space; + margin: 0.5rem auto 0 1rem; +} + +#color-mixer > :nth-child(14) { + grid-area: interpolation-label; + margin: 0.5rem 0 0 auto; +} + +#color-mixer > :nth-child(15) { + grid-area: interpolation; + margin: 0.5rem auto 0 1rem; +} + +input[type="range"] { + width: 80%; +} + +label { + font-family: monospace; + margin: 1rem; +} + +*:focus { + outline: 2px dashed purple; + outline-offset: 1px; +} +``` + +```js hidden live-sample___color-mixer +const polarColorSpaces = ["hsl", "hwb", "lch", "oklch"]; +const root = document.querySelector(":root"); + +const colorSpace = document.getElementById("color-space"); +const interpolationMethod = document.getElementById("interpolation-method"); +const interpolationMethodLabel = document.getElementById( + "interpolation-method-label", +); + +const colorOne = document.getElementById("color-one"); +const colorTwo = document.getElementById("color-two"); +const mixedColor = document.getElementById("mixed-color"); +const mixedOutputText = document.getElementById("mix-output-text"); + +const colorTextOne = document.getElementById("color-one-text"); +const colorTextTwo = document.getElementById("color-two-text"); + +const percentageOneLabel = document.getElementById("percentage-one-label"); +const percentageTwoLabel = document.getElementById("percentage-two-label"); +const percentageOne = document.getElementById("percentage-one"); +const percentageTwo = document.getElementById("percentage-two"); + +let pickerOne, pickerTwo; + +function init() { + const pickerOptions = { + el: ".color-one", + theme: "classic", + useAsButton: true, + default: "#ff7f50", + position: "bottom-middle", + components: { + preview: true, + opacity: true, + hue: true, + interaction: { + hex: true, + rgba: true, + hsla: true, + input: true, + clear: false, + save: true, + }, + }, + swatches: [ + "rgb(244 67 54)", + "rgb(233 30 99)", + "rgb(156 39 176)", + "rgb(103 58 183)", + "rgb(63 81 181)", + "rgb(33 150 243)", + "rgb(3 169 244)", + "rgb(0 188 212)", + "rgb(0 150 136)", + "rgb(76 175 80)", + "rgb(139 195 74)", + "rgb(205 220 57)", + "rgb(255 235 59)", + "rgb(255 193 7)", + ], + }; + + pickerOne = Pickr.create(pickerOptions); + pickerOne.setColor("#ff7f50"); + colorOne.style.setProperty("background-color", "#ff7f50"); + pickerOne.on("change", (color) => { + colorOne.style.setProperty("background-color", color.toRGBA()); + updateColorMix(); + }); + pickerOne.on("cancel", (instance) => { + colorOne.style.setProperty( + "background-color", + instance.getColor().toRGBA(), + ); + updateColorMix(); + }); + pickerOne.on("show", (_, instance) => { + instance.getRoot().app.querySelector(":is(button, [tabindex])").focus(); + }); + pickerOne.on("hide", (instance) => { + colorOne.focus(); + }); + + pickerOptions.el = ".color-two"; + pickerOptions.default = "#00ffff"; + pickerTwo = Pickr.create(pickerOptions); + pickerTwo.setColor("#00ffff"); + colorTwo.style.setProperty("background-color", "#00ffff"); + pickerTwo.on("change", (color, source, instance) => { + colorTwo.style.setProperty("background-color", color.toRGBA()); + updateColorMix(); + }); + pickerTwo.on("cancel", (instance) => { + colorTwo.style.setProperty( + "background-color", + instance.getColor().toRGBA(), + ); + updateColorMix(); + }); + pickerTwo.on("show", (_, instance) => { + instance.getRoot().app.querySelector(":is(button, [tabindex])").focus(); + }); + pickerTwo.on("hide", (instance) => { + colorTwo.focus(); + }); + + percentageOne.addEventListener("input", (e) => { + percentageOneLabel.innerText = e.target.value + "%"; + updateColorMix(); + }); + percentageTwo.addEventListener("input", (e) => { + percentageTwoLabel.innerText = e.target.value + "%"; + updateColorMix(); + }); + colorSpace.addEventListener("change", (e) => { + if (polarColorSpaces.includes(e.target.value)) { + interpolationMethod.style.visibility = "visible"; + interpolationMethodLabel.style.visibility = "visible"; + } else { + interpolationMethod.style.visibility = "hidden"; + interpolationMethodLabel.style.visibility = "hidden"; + } + updateColorMix(); + }); + interpolationMethod.addEventListener("change", (e) => { + updateColorMix(); + }); + + interpolationMethod.style.visibility = "hidden"; + interpolationMethodLabel.style.visibility = "hidden"; +} + +function updateColorMix() { + let colorMixFunction = "color-mix(in "; + + root.style.setProperty("--color-space", colorSpace.value); + colorMixFunction += colorSpace.value; + + if (polarColorSpaces.includes(colorSpace.value)) { + root.style.setProperty("--interpolation-method", interpolationMethod.value); + colorMixFunction += ` ${interpolationMethod.value}, `; + } else { + root.style.setProperty("--interpolation-method", ""); + colorMixFunction += `, `; + } + root.style.setProperty( + "--color-one", + colorOne.style.getPropertyValue("background-color"), + ); + root.style.setProperty("--percentage-one", percentageOne.value + "%"); + colorMixFunction += `${pickerOne.getColor().toHEXA().toString()} ${ + percentageOne.value + }%, `; + + root.style.setProperty( + "--color-two", + colorTwo.style.getPropertyValue("background-color"), + ); + root.style.setProperty("--percentage-two", percentageTwo.value + "%"); + colorMixFunction += `${pickerTwo.getColor().toHEXA().toString()} ${ + percentageTwo.value + }%)`; + + mixedColor.style.setProperty("background-color", colorMixFunction); + + colorMixFunction += ` = ${ + window.getComputedStyle(mixedColor).backgroundColor + }`; + mixedOutputText.innerText = colorMixFunction; +} + +init(); +updateColorMix(); +``` + +{{EmbedLiveSample("color-mixer", "", 400)}} + +## See also + +- {{CSSXref("<color>")}} +- {{CSSXref("<color-interpolation-method>")}} +- {{cssxref("<hue>")}} +- [CSS relative colors](/en-US/docs/Web/CSS/CSS_colors/Relative_colors) diff --git a/files/en-us/web/css/color_value/color_mixer_tool/pickr.es5.min.js b/files/en-us/web/css/color_value/color_mixer_tool/pickr.es5.min.js new file mode 100644 index 000000000000000..921cf3dce2903b3 --- /dev/null +++ b/files/en-us/web/css/color_value/color_mixer_tool/pickr.es5.min.js @@ -0,0 +1,2 @@ +/*! Pickr 1.9.1 MIT | https://github.com/Simonwep/pickr */ +!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Pickr=e():t.Pickr=e()}(self,(()=>(()=>{"use strict";var t={8280:(t,e,r)=>{var n=r(1435),o=r(7113),i=TypeError;t.exports=function(t){if(n(t))return t;throw new i(o(t)+" is not a function")}},5478:(t,e,r)=>{var n=r(4127),o=r(7113),i=TypeError;t.exports=function(t){if(n(t))return t;throw new i(o(t)+" is not a constructor")}},1420:(t,e,r)=>{var n=r(6143),o=String,i=TypeError;t.exports=function(t){if(n(t))return t;throw new i("Can't set "+o(t)+" as a prototype")}},5127:(t,e,r)=>{var n=r(3633),o=r(8250),i=r(2587).f,a=n("unscopables"),c=Array.prototype;void 0===c[a]&&i(c,a,{configurable:!0,value:o(null)}),t.exports=function(t){c[a][t]=!0}},6691:(t,e,r)=>{var n=r(449).charAt;t.exports=function(t,e,r){return e+(r?n(t,e).length:1)}},3349:(t,e,r)=>{var n=r(3400),o=String,i=TypeError;t.exports=function(t){if(n(t))return t;throw new i(o(t)+" is not an object")}},3833:(t,e,r)=>{var n=r(9603).forEach,o=r(4832)("forEach");t.exports=o?[].forEach:function(t){return n(this,t,arguments.length>1?arguments[1]:void 0)}},7022:(t,e,r)=>{var n=r(3122),o=r(9295),i=r(4683),a=r(325),c=r(9187),u=r(4127),s=r(608),l=r(6558),p=r(4663),f=r(2153),v=Array;t.exports=function(t){var e=i(t),r=u(this),h=arguments.length,d=h>1?arguments[1]:void 0,g=void 0!==d;g&&(d=n(d,h>2?arguments[2]:void 0));var y,b,m,x,w,S,_=f(e),A=0;if(!_||this===v&&c(_))for(y=s(e),b=r?new this(y):v(y);y>A;A++)S=g?d(e[A],A):e[A],l(b,A,S);else for(b=r?new this:[],w=(x=p(e,_)).next;!(m=o(w,x)).done;A++)S=g?a(x,d,[m.value,A],!0):m.value,l(b,A,S);return b.length=A,b}},1675:(t,e,r)=>{var n=r(8799),o=r(3104),i=r(608),a=function(t){return function(e,r,a){var c=n(e),u=i(c);if(0===u)return!t&&-1;var s,l=o(a,u);if(t&&r!=r){for(;u>l;)if((s=c[l++])!=s)return!0}else for(;u>l;l++)if((t||l in c)&&c[l]===r)return t||l||0;return!t&&-1}};t.exports={includes:a(!0),indexOf:a(!1)}},9603:(t,e,r)=>{var n=r(3122),o=r(2538),i=r(6729),a=r(4683),c=r(608),u=r(3159),s=o([].push),l=function(t){var e=1===t,r=2===t,o=3===t,l=4===t,p=6===t,f=7===t,v=5===t||p;return function(h,d,g,y){for(var b,m,x=a(h),w=i(x),S=c(w),_=n(d,g),A=0,O=y||u,E=e?O(h,S):r||f?O(h,0):void 0;S>A;A++)if((v||A in w)&&(m=_(b=w[A],A,x),t))if(e)E[A]=m;else if(m)switch(t){case 3:return!0;case 5:return b;case 6:return A;case 2:s(E,b)}else switch(t){case 4:return!1;case 7:s(E,b)}return p?-1:o||l?l:E}};t.exports={forEach:l(0),map:l(1),filter:l(2),some:l(3),every:l(4),find:l(5),findIndex:l(6),filterReject:l(7)}},9331:(t,e,r)=>{var n=r(3849),o=r(3633),i=r(7722),a=o("species");t.exports=function(t){return i>=51||!n((function(){var e=[];return(e.constructor={})[a]=function(){return{foo:1}},1!==e[t](Boolean).foo}))}},4832:(t,e,r)=>{var n=r(3849);t.exports=function(t,e){var r=[][t];return!!r&&n((function(){r.call(null,e||function(){return 1},1)}))}},4534:(t,e,r)=>{var n=r(1870),o=r(7506),i=TypeError,a=Object.getOwnPropertyDescriptor,c=n&&!function(){if(void 0!==this)return!0;try{Object.defineProperty([],"length",{writable:!1}).length=1}catch(t){return t instanceof TypeError}}();t.exports=c?function(t,e){if(o(t)&&!a(t,"length").writable)throw new i("Cannot set read only .length");return t.length=e}:function(t,e){return t.length=e}},850:(t,e,r)=>{var n=r(2538);t.exports=n([].slice)},6535:(t,e,r)=>{var n=r(7506),o=r(4127),i=r(3400),a=r(3633)("species"),c=Array;t.exports=function(t){var e;return n(t)&&(e=t.constructor,(o(e)&&(e===c||n(e.prototype))||i(e)&&null===(e=e[a]))&&(e=void 0)),void 0===e?c:e}},3159:(t,e,r)=>{var n=r(6535);t.exports=function(t,e){return new(n(t))(0===e?0:e)}},325:(t,e,r)=>{var n=r(3349),o=r(9857);t.exports=function(t,e,r,i){try{return i?e(n(r)[0],r[1]):e(r)}catch(e){o(t,"throw",e)}}},6786:(t,e,r)=>{var n=r(3633)("iterator"),o=!1;try{var i=0,a={next:function(){return{done:!!i++}},return:function(){o=!0}};a[n]=function(){return this},Array.from(a,(function(){throw 2}))}catch(t){}t.exports=function(t,e){try{if(!e&&!o)return!1}catch(t){return!1}var r=!1;try{var i={};i[n]=function(){return{next:function(){return{done:r=!0}}}},t(i)}catch(t){}return r}},2750:(t,e,r)=>{var n=r(2538),o=n({}.toString),i=n("".slice);t.exports=function(t){return i(o(t),8,-1)}},5361:(t,e,r)=>{var n=r(6002),o=r(1435),i=r(2750),a=r(3633)("toStringTag"),c=Object,u="Arguments"===i(function(){return arguments}());t.exports=n?i:function(t){var e,r,n;return void 0===t?"Undefined":null===t?"Null":"string"==typeof(r=function(t,e){try{return t[e]}catch(t){}}(e=c(t),a))?r:u?i(e):"Object"===(n=i(e))&&o(e.callee)?"Arguments":n}},4518:(t,e,r)=>{var n=r(379),o=r(2905),i=r(9697),a=r(2587);t.exports=function(t,e,r){for(var c=o(e),u=a.f,s=i.f,l=0;l{var n=r(3633)("match");t.exports=function(t){var e=/./;try{"/./"[t](e)}catch(r){try{return e[n]=!1,"/./"[t](e)}catch(t){}}return!1}},4737:(t,e,r)=>{var n=r(3849);t.exports=!n((function(){function t(){}return t.prototype.constructor=null,Object.getPrototypeOf(new t)!==t.prototype}))},9055:t=>{t.exports=function(t,e){return{value:t,done:e}}},4477:(t,e,r)=>{var n=r(1870),o=r(2587),i=r(5658);t.exports=n?function(t,e,r){return o.f(t,e,i(1,r))}:function(t,e,r){return t[e]=r,t}},5658:t=>{t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},6558:(t,e,r)=>{var n=r(1870),o=r(2587),i=r(5658);t.exports=function(t,e,r){n?o.f(t,e,i(0,r)):t[e]=r}},7448:(t,e,r)=>{var n=r(2713),o=r(2587);t.exports=function(t,e,r){return r.get&&n(r.get,e,{getter:!0}),r.set&&n(r.set,e,{setter:!0}),o.f(t,e,r)}},2202:(t,e,r)=>{var n=r(1435),o=r(2587),i=r(2713),a=r(3135);t.exports=function(t,e,r,c){c||(c={});var u=c.enumerable,s=void 0!==c.name?c.name:e;if(n(r)&&i(r,s,c),c.global)u?t[e]=r:a(e,r);else{try{c.unsafe?t[e]&&(u=!0):delete t[e]}catch(t){}u?t[e]=r:o.f(t,e,{value:r,enumerable:!1,configurable:!c.nonConfigurable,writable:!c.nonWritable})}return t}},3135:(t,e,r)=>{var n=r(9317),o=Object.defineProperty;t.exports=function(t,e){try{o(n,t,{value:e,configurable:!0,writable:!0})}catch(r){n[t]=e}return e}},60:(t,e,r)=>{var n=r(7113),o=TypeError;t.exports=function(t,e){if(!delete t[e])throw new o("Cannot delete property "+n(e)+" of "+n(t))}},1870:(t,e,r)=>{var n=r(3849);t.exports=!n((function(){return 7!==Object.defineProperty({},1,{get:function(){return 7}})[1]}))},8249:(t,e,r)=>{var n=r(9317),o=r(3400),i=n.document,a=o(i)&&o(i.createElement);t.exports=function(t){return a?i.createElement(t):{}}},2387:t=>{var e=TypeError;t.exports=function(t){if(t>9007199254740991)throw e("Maximum allowed index exceeded");return t}},1530:t=>{t.exports={CSSRuleList:0,CSSStyleDeclaration:0,CSSValueList:0,ClientRectList:0,DOMRectList:0,DOMStringList:0,DOMTokenList:1,DataTransferItemList:0,FileList:0,HTMLAllCollection:0,HTMLCollection:0,HTMLFormElement:0,HTMLSelectElement:0,MediaList:0,MimeTypeArray:0,NamedNodeMap:0,NodeList:1,PaintRequestList:0,Plugin:0,PluginArray:0,SVGLengthList:0,SVGNumberList:0,SVGPathSegList:0,SVGPointList:0,SVGStringList:0,SVGTransformList:0,SourceBufferList:0,StyleSheetList:0,TextTrackCueList:0,TextTrackList:0,TouchList:0}},6334:(t,e,r)=>{var n=r(8249)("span").classList,o=n&&n.constructor&&n.constructor.prototype;t.exports=o===Object.prototype?void 0:o},446:t=>{t.exports="undefined"!=typeof navigator&&String(navigator.userAgent)||""},7722:(t,e,r)=>{var n,o,i=r(9317),a=r(446),c=i.process,u=i.Deno,s=c&&c.versions||u&&u.version,l=s&&s.v8;l&&(o=(n=l.split("."))[0]>0&&n[0]<4?1:+(n[0]+n[1])),!o&&a&&(!(n=a.match(/Edge\/(\d+)/))||n[1]>=74)&&(n=a.match(/Chrome\/(\d+)/))&&(o=+n[1]),t.exports=o},5333:t=>{t.exports=["constructor","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","toLocaleString","toString","valueOf"]},3076:(t,e,r)=>{var n=r(9317),o=r(9697).f,i=r(4477),a=r(2202),c=r(3135),u=r(4518),s=r(9946);t.exports=function(t,e){var r,l,p,f,v,h=t.target,d=t.global,g=t.stat;if(r=d?n:g?n[h]||c(h,{}):n[h]&&n[h].prototype)for(l in e){if(f=e[l],p=t.dontCallGetSet?(v=o(r,l))&&v.value:r[l],!s(d?l:h+(g?".":"#")+l,t.forced)&&void 0!==p){if(typeof f==typeof p)continue;u(f,p)}(t.sham||p&&p.sham)&&i(f,"sham",!0),a(r,l,f,t)}}},3849:t=>{t.exports=function(t){try{return!!t()}catch(t){return!0}}},2670:(t,e,r)=>{r(9981);var n=r(9295),o=r(2202),i=r(1601),a=r(3849),c=r(3633),u=r(4477),s=c("species"),l=RegExp.prototype;t.exports=function(t,e,r,p){var f=c(t),v=!a((function(){var e={};return e[f]=function(){return 7},7!==""[t](e)})),h=v&&!a((function(){var e=!1,r=/a/;return"split"===t&&((r={}).constructor={},r.constructor[s]=function(){return r},r.flags="",r[f]=/./[f]),r.exec=function(){return e=!0,null},r[f](""),!e}));if(!v||!h||r){var d=/./[f],g=e(f,""[t],(function(t,e,r,o,a){var c=e.exec;return c===i||c===l.exec?v&&!a?{done:!0,value:n(d,e,r,o)}:{done:!0,value:n(t,r,e,o)}:{done:!1}}));o(String.prototype,t,g[0]),o(l,f,g[1])}p&&u(l[f],"sham",!0)}},347:(t,e,r)=>{var n=r(3602),o=Function.prototype,i=o.apply,a=o.call;t.exports="object"==typeof Reflect&&Reflect.apply||(n?a.bind(i):function(){return a.apply(i,arguments)})},3122:(t,e,r)=>{var n=r(4890),o=r(8280),i=r(3602),a=n(n.bind);t.exports=function(t,e){return o(t),void 0===e?t:i?a(t,e):function(){return t.apply(e,arguments)}}},3602:(t,e,r)=>{var n=r(3849);t.exports=!n((function(){var t=function(){}.bind();return"function"!=typeof t||t.hasOwnProperty("prototype")}))},9295:(t,e,r)=>{var n=r(3602),o=Function.prototype.call;t.exports=n?o.bind(o):function(){return o.apply(o,arguments)}},8784:(t,e,r)=>{var n=r(1870),o=r(379),i=Function.prototype,a=n&&Object.getOwnPropertyDescriptor,c=o(i,"name"),u=c&&"something"===function(){}.name,s=c&&(!n||n&&a(i,"name").configurable);t.exports={EXISTS:c,PROPER:u,CONFIGURABLE:s}},6632:(t,e,r)=>{var n=r(2538),o=r(8280);t.exports=function(t,e,r){try{return n(o(Object.getOwnPropertyDescriptor(t,e)[r]))}catch(t){}}},4890:(t,e,r)=>{var n=r(2750),o=r(2538);t.exports=function(t){if("Function"===n(t))return o(t)}},2538:(t,e,r)=>{var n=r(3602),o=Function.prototype,i=o.call,a=n&&o.bind.bind(i,i);t.exports=n?a:function(t){return function(){return i.apply(t,arguments)}}},5793:(t,e,r)=>{var n=r(9317),o=r(1435);t.exports=function(t,e){return arguments.length<2?(r=n[t],o(r)?r:void 0):n[t]&&n[t][e];var r}},2153:(t,e,r)=>{var n=r(5361),o=r(2996),i=r(2303),a=r(1575),c=r(3633)("iterator");t.exports=function(t){if(!i(t))return o(t,c)||o(t,"@@iterator")||a[n(t)]}},4663:(t,e,r)=>{var n=r(9295),o=r(8280),i=r(3349),a=r(7113),c=r(2153),u=TypeError;t.exports=function(t,e){var r=arguments.length<2?c(t):e;if(o(r))return i(n(r,t));throw new u(a(t)+" is not iterable")}},9023:(t,e,r)=>{var n=r(2538),o=r(7506),i=r(1435),a=r(2750),c=r(2277),u=n([].push);t.exports=function(t){if(i(t))return t;if(o(t)){for(var e=t.length,r=[],n=0;n{var n=r(8280),o=r(2303);t.exports=function(t,e){var r=t[e];return o(r)?void 0:n(r)}},1748:(t,e,r)=>{var n=r(2538),o=r(4683),i=Math.floor,a=n("".charAt),c=n("".replace),u=n("".slice),s=/\$([$&'`]|\d{1,2}|<[^>]*>)/g,l=/\$([$&'`]|\d{1,2})/g;t.exports=function(t,e,r,n,p,f){var v=r+t.length,h=n.length,d=l;return void 0!==p&&(p=o(p),d=s),c(f,d,(function(o,c){var s;switch(a(c,0)){case"$":return"$";case"&":return t;case"`":return u(e,0,r);case"'":return u(e,v);case"<":s=p[u(c,1,-1)];break;default:var l=+c;if(0===l)return o;if(l>h){var f=i(l/10);return 0===f?o:f<=h?void 0===n[f-1]?a(c,1):n[f-1]+a(c,1):o}s=n[l-1]}return void 0===s?"":s}))}},9317:function(t,e,r){var n=function(t){return t&&t.Math===Math&&t};t.exports=n("object"==typeof globalThis&&globalThis)||n("object"==typeof window&&window)||n("object"==typeof self&&self)||n("object"==typeof r.g&&r.g)||n("object"==typeof this&&this)||function(){return this}()||Function("return this")()},379:(t,e,r)=>{var n=r(2538),o=r(4683),i=n({}.hasOwnProperty);t.exports=Object.hasOwn||function(t,e){return i(o(t),e)}},147:t=>{t.exports={}},651:(t,e,r)=>{var n=r(5793);t.exports=n("document","documentElement")},7527:(t,e,r)=>{var n=r(1870),o=r(3849),i=r(8249);t.exports=!n&&!o((function(){return 7!==Object.defineProperty(i("div"),"a",{get:function(){return 7}}).a}))},6729:(t,e,r)=>{var n=r(2538),o=r(3849),i=r(2750),a=Object,c=n("".split);t.exports=o((function(){return!a("z").propertyIsEnumerable(0)}))?function(t){return"String"===i(t)?c(t,""):a(t)}:a},8285:(t,e,r)=>{var n=r(1435),o=r(3400),i=r(3425);t.exports=function(t,e,r){var a,c;return i&&n(a=e.constructor)&&a!==r&&o(c=a.prototype)&&c!==r.prototype&&i(t,c),t}},5188:(t,e,r)=>{var n=r(2538),o=r(1435),i=r(1511),a=n(Function.toString);o(i.inspectSource)||(i.inspectSource=function(t){return a(t)}),t.exports=i.inspectSource},5043:(t,e,r)=>{var n,o,i,a=r(740),c=r(9317),u=r(3400),s=r(4477),l=r(379),p=r(1511),f=r(6769),v=r(147),h="Object already initialized",d=c.TypeError,g=c.WeakMap;if(a||p.state){var y=p.state||(p.state=new g);y.get=y.get,y.has=y.has,y.set=y.set,n=function(t,e){if(y.has(t))throw new d(h);return e.facade=t,y.set(t,e),e},o=function(t){return y.get(t)||{}},i=function(t){return y.has(t)}}else{var b=f("state");v[b]=!0,n=function(t,e){if(l(t,b))throw new d(h);return e.facade=t,s(t,b,e),e},o=function(t){return l(t,b)?t[b]:{}},i=function(t){return l(t,b)}}t.exports={set:n,get:o,has:i,enforce:function(t){return i(t)?o(t):n(t,{})},getterFor:function(t){return function(e){var r;if(!u(e)||(r=o(e)).type!==t)throw new d("Incompatible receiver, "+t+" required");return r}}}},9187:(t,e,r)=>{var n=r(3633),o=r(1575),i=n("iterator"),a=Array.prototype;t.exports=function(t){return void 0!==t&&(o.Array===t||a[i]===t)}},7506:(t,e,r)=>{var n=r(2750);t.exports=Array.isArray||function(t){return"Array"===n(t)}},1435:t=>{var e="object"==typeof document&&document.all;t.exports=void 0===e&&void 0!==e?function(t){return"function"==typeof t||t===e}:function(t){return"function"==typeof t}},4127:(t,e,r)=>{var n=r(2538),o=r(3849),i=r(1435),a=r(5361),c=r(5793),u=r(5188),s=function(){},l=c("Reflect","construct"),p=/^\s*(?:class|function)\b/,f=n(p.exec),v=!p.test(s),h=function(t){if(!i(t))return!1;try{return l(s,[],t),!0}catch(t){return!1}},d=function(t){if(!i(t))return!1;switch(a(t)){case"AsyncFunction":case"GeneratorFunction":case"AsyncGeneratorFunction":return!1}try{return v||!!f(p,u(t))}catch(t){return!0}};d.sham=!0,t.exports=!l||o((function(){var t;return h(h.call)||!h(Object)||!h((function(){t=!0}))||t}))?d:h},9946:(t,e,r)=>{var n=r(3849),o=r(1435),i=/#|\.prototype\./,a=function(t,e){var r=u[c(t)];return r===l||r!==s&&(o(e)?n(e):!!e)},c=a.normalize=function(t){return String(t).replace(i,".").toLowerCase()},u=a.data={},s=a.NATIVE="N",l=a.POLYFILL="P";t.exports=a},2303:t=>{t.exports=function(t){return null==t}},3400:(t,e,r)=>{var n=r(1435);t.exports=function(t){return"object"==typeof t?null!==t:n(t)}},6143:(t,e,r)=>{var n=r(3400);t.exports=function(t){return n(t)||null===t}},4709:t=>{t.exports=!1},8914:(t,e,r)=>{var n=r(3400),o=r(2750),i=r(3633)("match");t.exports=function(t){var e;return n(t)&&(void 0!==(e=t[i])?!!e:"RegExp"===o(t))}},4975:(t,e,r)=>{var n=r(5793),o=r(1435),i=r(8559),a=r(9470),c=Object;t.exports=a?function(t){return"symbol"==typeof t}:function(t){var e=n("Symbol");return o(e)&&i(e.prototype,c(t))}},9857:(t,e,r)=>{var n=r(9295),o=r(3349),i=r(2996);t.exports=function(t,e,r){var a,c;o(t);try{if(!(a=i(t,"return"))){if("throw"===e)throw r;return r}a=n(a,t)}catch(t){c=!0,a=t}if("throw"===e)throw r;if(c)throw a;return o(a),r}},1104:(t,e,r)=>{var n=r(2603).IteratorPrototype,o=r(8250),i=r(5658),a=r(7621),c=r(1575),u=function(){return this};t.exports=function(t,e,r,s){var l=e+" Iterator";return t.prototype=o(n,{next:i(+!s,r)}),a(t,l,!1,!0),c[l]=u,t}},654:(t,e,r)=>{var n=r(3076),o=r(9295),i=r(4709),a=r(8784),c=r(1435),u=r(1104),s=r(4909),l=r(3425),p=r(7621),f=r(4477),v=r(2202),h=r(3633),d=r(1575),g=r(2603),y=a.PROPER,b=a.CONFIGURABLE,m=g.IteratorPrototype,x=g.BUGGY_SAFARI_ITERATORS,w=h("iterator"),S="keys",_="values",A="entries",O=function(){return this};t.exports=function(t,e,r,a,h,g,E){u(r,e,a);var j,C,k,P=function(t){if(t===h&&F)return F;if(!x&&t&&t in T)return T[t];switch(t){case S:case _:case A:return function(){return new r(this,t)}}return function(){return new r(this)}},I=e+" Iterator",R=!1,T=t.prototype,L=T[w]||T["@@iterator"]||h&&T[h],F=!x&&L||P(h),N="Array"===e&&T.entries||L;if(N&&(j=s(N.call(new t)))!==Object.prototype&&j.next&&(i||s(j)===m||(l?l(j,m):c(j[w])||v(j,w,O)),p(j,I,!0,!0),i&&(d[I]=O)),y&&h===_&&L&&L.name!==_&&(!i&&b?f(T,"name",_):(R=!0,F=function(){return o(L,this)})),h)if(C={values:P(_),keys:g?F:P(S),entries:P(A)},E)for(k in C)(x||R||!(k in T))&&v(T,k,C[k]);else n({target:e,proto:!0,forced:x||R},C);return i&&!E||T[w]===F||v(T,w,F,{name:h}),d[e]=F,C}},2603:(t,e,r)=>{var n,o,i,a=r(3849),c=r(1435),u=r(3400),s=r(8250),l=r(4909),p=r(2202),f=r(3633),v=r(4709),h=f("iterator"),d=!1;[].keys&&("next"in(i=[].keys())?(o=l(l(i)))!==Object.prototype&&(n=o):d=!0),!u(n)||a((function(){var t={};return n[h].call(t)!==t}))?n={}:v&&(n=s(n)),c(n[h])||p(n,h,(function(){return this})),t.exports={IteratorPrototype:n,BUGGY_SAFARI_ITERATORS:d}},1575:t=>{t.exports={}},608:(t,e,r)=>{var n=r(8020);t.exports=function(t){return n(t.length)}},2713:(t,e,r)=>{var n=r(2538),o=r(3849),i=r(1435),a=r(379),c=r(1870),u=r(8784).CONFIGURABLE,s=r(5188),l=r(5043),p=l.enforce,f=l.get,v=String,h=Object.defineProperty,d=n("".slice),g=n("".replace),y=n([].join),b=c&&!o((function(){return 8!==h((function(){}),"length",{value:8}).length})),m=String(String).split("String"),x=t.exports=function(t,e,r){"Symbol("===d(v(e),0,7)&&(e="["+g(v(e),/^Symbol\(([^)]*)\).*$/,"$1")+"]"),r&&r.getter&&(e="get "+e),r&&r.setter&&(e="set "+e),(!a(t,"name")||u&&t.name!==e)&&(c?h(t,"name",{value:e,configurable:!0}):t.name=e),b&&r&&a(r,"arity")&&t.length!==r.arity&&h(t,"length",{value:r.arity});try{r&&a(r,"constructor")&&r.constructor?c&&h(t,"prototype",{writable:!1}):t.prototype&&(t.prototype=void 0)}catch(t){}var n=p(t);return a(n,"source")||(n.source=y(m,"string"==typeof e?e:"")),t};Function.prototype.toString=x((function(){return i(this)&&f(this).source||s(this)}),"toString")},4804:t=>{var e=Math.ceil,r=Math.floor;t.exports=Math.trunc||function(t){var n=+t;return(n>0?r:e)(n)}},3181:(t,e,r)=>{var n=r(8914),o=TypeError;t.exports=function(t){if(n(t))throw new o("The method doesn't accept regular expressions");return t}},5567:(t,e,r)=>{var n=r(1870),o=r(2538),i=r(9295),a=r(3849),c=r(9866),u=r(2059),s=r(6203),l=r(4683),p=r(6729),f=Object.assign,v=Object.defineProperty,h=o([].concat);t.exports=!f||a((function(){if(n&&1!==f({b:1},f(v({},"a",{enumerable:!0,get:function(){v(this,"b",{value:3,enumerable:!1})}}),{b:2})).b)return!0;var t={},e={},r=Symbol("assign detection"),o="abcdefghijklmnopqrst";return t[r]=7,o.split("").forEach((function(t){e[t]=t})),7!==f({},t)[r]||c(f({},e)).join("")!==o}))?function(t,e){for(var r=l(t),o=arguments.length,a=1,f=u.f,v=s.f;o>a;)for(var d,g=p(arguments[a++]),y=f?h(c(g),f(g)):c(g),b=y.length,m=0;b>m;)d=y[m++],n&&!i(v,g,d)||(r[d]=g[d]);return r}:f},8250:(t,e,r)=>{var n,o=r(3349),i=r(4087),a=r(5333),c=r(147),u=r(651),s=r(8249),l=r(6769),p="prototype",f="script",v=l("IE_PROTO"),h=function(){},d=function(t){return"<"+f+">"+t+""},g=function(t){t.write(d("")),t.close();var e=t.parentWindow.Object;return t=null,e},y=function(){try{n=new ActiveXObject("htmlfile")}catch(t){}var t,e,r;y="undefined"!=typeof document?document.domain&&n?g(n):(e=s("iframe"),r="java"+f+":",e.style.display="none",u.appendChild(e),e.src=String(r),(t=e.contentWindow.document).open(),t.write(d("document.F=Object")),t.close(),t.F):g(n);for(var o=a.length;o--;)delete y[p][a[o]];return y()};c[v]=!0,t.exports=Object.create||function(t,e){var r;return null!==t?(h[p]=o(t),r=new h,h[p]=null,r[v]=t):r=y(),void 0===e?r:i.f(r,e)}},4087:(t,e,r)=>{var n=r(1870),o=r(9576),i=r(2587),a=r(3349),c=r(8799),u=r(9866);e.f=n&&!o?Object.defineProperties:function(t,e){a(t);for(var r,n=c(e),o=u(e),s=o.length,l=0;s>l;)i.f(t,r=o[l++],n[r]);return t}},2587:(t,e,r)=>{var n=r(1870),o=r(7527),i=r(9576),a=r(3349),c=r(2423),u=TypeError,s=Object.defineProperty,l=Object.getOwnPropertyDescriptor,p="enumerable",f="configurable",v="writable";e.f=n?i?function(t,e,r){if(a(t),e=c(e),a(r),"function"==typeof t&&"prototype"===e&&"value"in r&&v in r&&!r[v]){var n=l(t,e);n&&n[v]&&(t[e]=r.value,r={configurable:f in r?r[f]:n[f],enumerable:p in r?r[p]:n[p],writable:!1})}return s(t,e,r)}:s:function(t,e,r){if(a(t),e=c(e),a(r),o)try{return s(t,e,r)}catch(t){}if("get"in r||"set"in r)throw new u("Accessors not supported");return"value"in r&&(t[e]=r.value),t}},9697:(t,e,r)=>{var n=r(1870),o=r(9295),i=r(6203),a=r(5658),c=r(8799),u=r(2423),s=r(379),l=r(7527),p=Object.getOwnPropertyDescriptor;e.f=n?p:function(t,e){if(t=c(t),e=u(e),l)try{return p(t,e)}catch(t){}if(s(t,e))return a(!o(i.f,t,e),t[e])}},2260:(t,e,r)=>{var n=r(2750),o=r(8799),i=r(1430).f,a=r(850),c="object"==typeof window&&window&&Object.getOwnPropertyNames?Object.getOwnPropertyNames(window):[];t.exports.f=function(t){return c&&"Window"===n(t)?function(t){try{return i(t)}catch(t){return a(c)}}(t):i(o(t))}},1430:(t,e,r)=>{var n=r(134),o=r(5333).concat("length","prototype");e.f=Object.getOwnPropertyNames||function(t){return n(t,o)}},2059:(t,e)=>{e.f=Object.getOwnPropertySymbols},4909:(t,e,r)=>{var n=r(379),o=r(1435),i=r(4683),a=r(6769),c=r(4737),u=a("IE_PROTO"),s=Object,l=s.prototype;t.exports=c?s.getPrototypeOf:function(t){var e=i(t);if(n(e,u))return e[u];var r=e.constructor;return o(r)&&e instanceof r?r.prototype:e instanceof s?l:null}},8559:(t,e,r)=>{var n=r(2538);t.exports=n({}.isPrototypeOf)},134:(t,e,r)=>{var n=r(2538),o=r(379),i=r(8799),a=r(1675).indexOf,c=r(147),u=n([].push);t.exports=function(t,e){var r,n=i(t),s=0,l=[];for(r in n)!o(c,r)&&o(n,r)&&u(l,r);for(;e.length>s;)o(n,r=e[s++])&&(~a(l,r)||u(l,r));return l}},9866:(t,e,r)=>{var n=r(134),o=r(5333);t.exports=Object.keys||function(t){return n(t,o)}},6203:(t,e)=>{var r={}.propertyIsEnumerable,n=Object.getOwnPropertyDescriptor,o=n&&!r.call({1:2},1);e.f=o?function(t){var e=n(this,t);return!!e&&e.enumerable}:r},3425:(t,e,r)=>{var n=r(6632),o=r(3400),i=r(2112),a=r(1420);t.exports=Object.setPrototypeOf||("__proto__"in{}?function(){var t,e=!1,r={};try{(t=n(Object.prototype,"__proto__","set"))(r,[]),e=r instanceof Array}catch(t){}return function(r,n){return i(r),a(n),o(r)?(e?t(r,n):r.__proto__=n,r):r}}():void 0)},6341:(t,e,r)=>{var n=r(6002),o=r(5361);t.exports=n?{}.toString:function(){return"[object "+o(this)+"]"}},2988:(t,e,r)=>{var n=r(9295),o=r(1435),i=r(3400),a=TypeError;t.exports=function(t,e){var r,c;if("string"===e&&o(r=t.toString)&&!i(c=n(r,t)))return c;if(o(r=t.valueOf)&&!i(c=n(r,t)))return c;if("string"!==e&&o(r=t.toString)&&!i(c=n(r,t)))return c;throw new a("Can't convert object to primitive value")}},2905:(t,e,r)=>{var n=r(5793),o=r(2538),i=r(1430),a=r(2059),c=r(3349),u=o([].concat);t.exports=n("Reflect","ownKeys")||function(t){var e=i.f(c(t)),r=a.f;return r?u(e,r(t)):e}},5869:(t,e,r)=>{var n=r(9317);t.exports=n},5964:(t,e,r)=>{var n=r(9295),o=r(3349),i=r(1435),a=r(2750),c=r(1601),u=TypeError;t.exports=function(t,e){var r=t.exec;if(i(r)){var s=n(r,t,e);return null!==s&&o(s),s}if("RegExp"===a(t))return n(c,t,e);throw new u("RegExp#exec called on incompatible receiver")}},1601:(t,e,r)=>{var n,o,i=r(9295),a=r(2538),c=r(2277),u=r(2061),s=r(4667),l=r(7175),p=r(8250),f=r(5043).get,v=r(6845),h=r(5232),d=l("native-string-replace",String.prototype.replace),g=RegExp.prototype.exec,y=g,b=a("".charAt),m=a("".indexOf),x=a("".replace),w=a("".slice),S=(o=/b*/g,i(g,n=/a/,"a"),i(g,o,"a"),0!==n.lastIndex||0!==o.lastIndex),_=s.BROKEN_CARET,A=void 0!==/()??/.exec("")[1];(S||A||_||v||h)&&(y=function(t){var e,r,n,o,a,s,l,v=this,h=f(v),O=c(t),E=h.raw;if(E)return E.lastIndex=v.lastIndex,e=i(y,E,O),v.lastIndex=E.lastIndex,e;var j=h.groups,C=_&&v.sticky,k=i(u,v),P=v.source,I=0,R=O;if(C&&(k=x(k,"y",""),-1===m(k,"g")&&(k+="g"),R=w(O,v.lastIndex),v.lastIndex>0&&(!v.multiline||v.multiline&&"\n"!==b(O,v.lastIndex-1))&&(P="(?: "+P+")",R=" "+R,I++),r=new RegExp("^(?:"+P+")",k)),A&&(r=new RegExp("^"+P+"$(?!\\s)",k)),S&&(n=v.lastIndex),o=i(g,C?r:v,R),C?o?(o.input=w(o.input,I),o[0]=w(o[0],I),o.index=v.lastIndex,v.lastIndex+=o[0].length):v.lastIndex=0:S&&o&&(v.lastIndex=v.global?o.index+o[0].length:n),A&&o&&o.length>1&&i(d,o[0],r,(function(){for(a=1;a{var n=r(3349);t.exports=function(){var t=n(this),e="";return t.hasIndices&&(e+="d"),t.global&&(e+="g"),t.ignoreCase&&(e+="i"),t.multiline&&(e+="m"),t.dotAll&&(e+="s"),t.unicode&&(e+="u"),t.unicodeSets&&(e+="v"),t.sticky&&(e+="y"),e}},7176:(t,e,r)=>{var n=r(9295),o=r(379),i=r(8559),a=r(2061),c=RegExp.prototype;t.exports=function(t){var e=t.flags;return void 0!==e||"flags"in c||o(t,"flags")||!i(c,t)?e:n(a,t)}},4667:(t,e,r)=>{var n=r(3849),o=r(9317).RegExp,i=n((function(){var t=o("a","y");return t.lastIndex=2,null!==t.exec("abcd")})),a=i||n((function(){return!o("a","y").sticky})),c=i||n((function(){var t=o("^r","gy");return t.lastIndex=2,null!==t.exec("str")}));t.exports={BROKEN_CARET:c,MISSED_STICKY:a,UNSUPPORTED_Y:i}},6845:(t,e,r)=>{var n=r(3849),o=r(9317).RegExp;t.exports=n((function(){var t=o(".","s");return!(t.dotAll&&t.test("\n")&&"s"===t.flags)}))},5232:(t,e,r)=>{var n=r(3849),o=r(9317).RegExp;t.exports=n((function(){var t=o("(?b)","g");return"b"!==t.exec("b").groups.a||"bc"!=="b".replace(t,"$c")}))},2112:(t,e,r)=>{var n=r(2303),o=TypeError;t.exports=function(t){if(n(t))throw new o("Can't call method on "+t);return t}},7621:(t,e,r)=>{var n=r(2587).f,o=r(379),i=r(3633)("toStringTag");t.exports=function(t,e,r){t&&!r&&(t=t.prototype),t&&!o(t,i)&&n(t,i,{configurable:!0,value:e})}},6769:(t,e,r)=>{var n=r(7175),o=r(5434),i=n("keys");t.exports=function(t){return i[t]||(i[t]=o(t))}},1511:(t,e,r)=>{var n=r(4709),o=r(9317),i=r(3135),a="__core-js_shared__",c=t.exports=o[a]||i(a,{});(c.versions||(c.versions=[])).push({version:"3.37.0",mode:n?"pure":"global",copyright:"© 2014-2024 Denis Pushkarev (zloirock.ru)",license:"https://github.com/zloirock/core-js/blob/v3.37.0/LICENSE",source:"https://github.com/zloirock/core-js"})},7175:(t,e,r)=>{var n=r(1511);t.exports=function(t,e){return n[t]||(n[t]=e||{})}},5635:(t,e,r)=>{var n=r(3349),o=r(5478),i=r(2303),a=r(3633)("species");t.exports=function(t,e){var r,c=n(t).constructor;return void 0===c||i(r=n(c)[a])?e:o(r)}},449:(t,e,r)=>{var n=r(2538),o=r(7277),i=r(2277),a=r(2112),c=n("".charAt),u=n("".charCodeAt),s=n("".slice),l=function(t){return function(e,r){var n,l,p=i(a(e)),f=o(r),v=p.length;return f<0||f>=v?t?"":void 0:(n=u(p,f))<55296||n>56319||f+1===v||(l=u(p,f+1))<56320||l>57343?t?c(p,f):n:t?s(p,f,f+2):l-56320+(n-55296<<10)+65536}};t.exports={codeAt:l(!1),charAt:l(!0)}},7285:(t,e,r)=>{var n=r(446);t.exports=/Version\/10(?:\.\d+){1,2}(?: [\w./]+)?(?: Mobile\/\w+)? Safari\//.test(n)},8155:(t,e,r)=>{var n=r(2538),o=r(8020),i=r(2277),a=r(1568),c=r(2112),u=n(a),s=n("".slice),l=Math.ceil,p=function(t){return function(e,r,n){var a,p,f=i(c(e)),v=o(r),h=f.length,d=void 0===n?" ":i(n);return v<=h||""===d?f:((p=u(d,l((a=v-h)/d.length))).length>a&&(p=s(p,0,a)),t?f+p:p+f)}};t.exports={start:p(!1),end:p(!0)}},1568:(t,e,r)=>{var n=r(7277),o=r(2277),i=r(2112),a=RangeError;t.exports=function(t){var e=o(i(this)),r="",c=n(t);if(c<0||c===1/0)throw new a("Wrong number of repetitions");for(;c>0;(c>>>=1)&&(e+=e))1&c&&(r+=e);return r}},4500:(t,e,r)=>{var n=r(8784).PROPER,o=r(3849),i=r(9662);t.exports=function(t){return o((function(){return!!i[t]()||"​…᠎"!=="​…᠎"[t]()||n&&i[t].name!==t}))}},1136:(t,e,r)=>{var n=r(2538),o=r(2112),i=r(2277),a=r(9662),c=n("".replace),u=RegExp("^["+a+"]+"),s=RegExp("(^|[^"+a+"])["+a+"]+$"),l=function(t){return function(e){var r=i(o(e));return 1&t&&(r=c(r,u,"")),2&t&&(r=c(r,s,"$1")),r}};t.exports={start:l(1),end:l(2),trim:l(3)}},2349:(t,e,r)=>{var n=r(7722),o=r(3849),i=r(9317).String;t.exports=!!Object.getOwnPropertySymbols&&!o((function(){var t=Symbol("symbol detection");return!i(t)||!(Object(t)instanceof Symbol)||!Symbol.sham&&n&&n<41}))},3488:(t,e,r)=>{var n=r(9295),o=r(5793),i=r(3633),a=r(2202);t.exports=function(){var t=o("Symbol"),e=t&&t.prototype,r=e&&e.valueOf,c=i("toPrimitive");e&&!e[c]&&a(e,c,(function(t){return n(r,this)}),{arity:1})}},402:(t,e,r)=>{var n=r(2349);t.exports=n&&!!Symbol.for&&!!Symbol.keyFor},366:(t,e,r)=>{var n=r(2538);t.exports=n(1..valueOf)},3104:(t,e,r)=>{var n=r(7277),o=Math.max,i=Math.min;t.exports=function(t,e){var r=n(t);return r<0?o(r+e,0):i(r,e)}},8799:(t,e,r)=>{var n=r(6729),o=r(2112);t.exports=function(t){return n(o(t))}},7277:(t,e,r)=>{var n=r(4804);t.exports=function(t){var e=+t;return e!=e||0===e?0:n(e)}},8020:(t,e,r)=>{var n=r(7277),o=Math.min;t.exports=function(t){var e=n(t);return e>0?o(e,9007199254740991):0}},4683:(t,e,r)=>{var n=r(2112),o=Object;t.exports=function(t){return o(n(t))}},4499:(t,e,r)=>{var n=r(9295),o=r(3400),i=r(4975),a=r(2996),c=r(2988),u=r(3633),s=TypeError,l=u("toPrimitive");t.exports=function(t,e){if(!o(t)||i(t))return t;var r,u=a(t,l);if(u){if(void 0===e&&(e="default"),r=n(u,t,e),!o(r)||i(r))return r;throw new s("Can't convert object to primitive value")}return void 0===e&&(e="number"),c(t,e)}},2423:(t,e,r)=>{var n=r(4499),o=r(4975);t.exports=function(t){var e=n(t,"string");return o(e)?e:e+""}},6002:(t,e,r)=>{var n={};n[r(3633)("toStringTag")]="z",t.exports="[object z]"===String(n)},2277:(t,e,r)=>{var n=r(5361),o=String;t.exports=function(t){if("Symbol"===n(t))throw new TypeError("Cannot convert a Symbol value to a string");return o(t)}},7113:t=>{var e=String;t.exports=function(t){try{return e(t)}catch(t){return"Object"}}},5434:(t,e,r)=>{var n=r(2538),o=0,i=Math.random(),a=n(1..toString);t.exports=function(t){return"Symbol("+(void 0===t?"":t)+")_"+a(++o+i,36)}},9470:(t,e,r)=>{var n=r(2349);t.exports=n&&!Symbol.sham&&"symbol"==typeof Symbol.iterator},9576:(t,e,r)=>{var n=r(1870),o=r(3849);t.exports=n&&o((function(){return 42!==Object.defineProperty((function(){}),"prototype",{value:42,writable:!1}).prototype}))},740:(t,e,r)=>{var n=r(9317),o=r(1435),i=n.WeakMap;t.exports=o(i)&&/native code/.test(String(i))},3497:(t,e,r)=>{var n=r(5869),o=r(379),i=r(8093),a=r(2587).f;t.exports=function(t){var e=n.Symbol||(n.Symbol={});o(e,t)||a(e,t,{value:i.f(t)})}},8093:(t,e,r)=>{var n=r(3633);e.f=n},3633:(t,e,r)=>{var n=r(9317),o=r(7175),i=r(379),a=r(5434),c=r(2349),u=r(9470),s=n.Symbol,l=o("wks"),p=u?s.for||s:s&&s.withoutSetter||a;t.exports=function(t){return i(l,t)||(l[t]=c&&i(s,t)?s[t]:p("Symbol."+t)),l[t]}},9662:t=>{t.exports="\t\n\v\f\r               　\u2028\u2029\ufeff"},8168:(t,e,r)=>{var n=r(3076),o=r(3849),i=r(7506),a=r(3400),c=r(4683),u=r(608),s=r(2387),l=r(6558),p=r(3159),f=r(9331),v=r(3633),h=r(7722),d=v("isConcatSpreadable"),g=h>=51||!o((function(){var t=[];return t[d]=!1,t.concat()[0]!==t})),y=function(t){if(!a(t))return!1;var e=t[d];return void 0!==e?!!e:i(t)};n({target:"Array",proto:!0,arity:1,forced:!g||!f("concat")},{concat:function(t){var e,r,n,o,i,a=c(this),f=p(a,0),v=0;for(e=-1,n=arguments.length;e{var n=r(3076),o=r(9603).find,i=r(5127),a="find",c=!0;a in[]&&Array(1)[a]((function(){c=!1})),n({target:"Array",proto:!0,forced:c},{find:function(t){return o(this,t,arguments.length>1?arguments[1]:void 0)}}),i(a)},9332:(t,e,r)=>{var n=r(3076),o=r(7022);n({target:"Array",stat:!0,forced:!r(6786)((function(t){Array.from(t)}))},{from:o})},1945:(t,e,r)=>{var n=r(3076),o=r(1675).includes,i=r(3849),a=r(5127);n({target:"Array",proto:!0,forced:i((function(){return!Array(1).includes()}))},{includes:function(t){return o(this,t,arguments.length>1?arguments[1]:void 0)}}),a("includes")},8469:(t,e,r)=>{var n=r(8799),o=r(5127),i=r(1575),a=r(5043),c=r(2587).f,u=r(654),s=r(9055),l=r(4709),p=r(1870),f="Array Iterator",v=a.set,h=a.getterFor(f);t.exports=u(Array,"Array",(function(t,e){v(this,{type:f,target:n(t),index:0,kind:e})}),(function(){var t=h(this),e=t.target,r=t.index++;if(!e||r>=e.length)return t.target=void 0,s(void 0,!0);switch(t.kind){case"keys":return s(r,!1);case"values":return s(e[r],!1)}return s([r,e[r]],!1)}),"values");var d=i.Arguments=i.Array;if(o("keys"),o("values"),o("entries"),!l&&p&&"values"!==d.name)try{c(d,"name",{value:"values"})}catch(t){}},7560:(t,e,r)=>{var n=r(3076),o=r(2538),i=r(6729),a=r(8799),c=r(4832),u=o([].join);n({target:"Array",proto:!0,forced:i!==Object||!c("join",",")},{join:function(t){return u(a(this),void 0===t?",":t)}})},4008:(t,e,r)=>{var n=r(3076),o=r(9603).map;n({target:"Array",proto:!0,forced:!r(9331)("map")},{map:function(t){return o(this,t,arguments.length>1?arguments[1]:void 0)}})},1256:(t,e,r)=>{var n=r(3076),o=r(7506),i=r(4127),a=r(3400),c=r(3104),u=r(608),s=r(8799),l=r(6558),p=r(3633),f=r(9331),v=r(850),h=f("slice"),d=p("species"),g=Array,y=Math.max;n({target:"Array",proto:!0,forced:!h},{slice:function(t,e){var r,n,p,f=s(this),h=u(f),b=c(t,h),m=c(void 0===e?h:e,h);if(o(f)&&(r=f.constructor,(i(r)&&(r===g||o(r.prototype))||a(r)&&null===(r=r[d]))&&(r=void 0),r===g||void 0===r))return v(f,b,m);for(n=new(void 0===r?g:r)(y(m-b,0)),p=0;b{var n=r(3076),o=r(4683),i=r(3104),a=r(7277),c=r(608),u=r(4534),s=r(2387),l=r(3159),p=r(6558),f=r(60),v=r(9331)("splice"),h=Math.max,d=Math.min;n({target:"Array",proto:!0,forced:!v},{splice:function(t,e){var r,n,v,g,y,b,m=o(this),x=c(m),w=i(t,x),S=arguments.length;for(0===S?r=n=0:1===S?(r=0,n=x-w):(r=S-2,n=d(h(a(e),0),x-w)),s(x+r-n),v=l(m,n),g=0;gx-n+r;g--)f(m,g-1)}else if(r>n)for(g=x-n;g>w;g--)b=g+r-1,(y=g+n-1)in m?m[b]=m[y]:f(m,b);for(g=0;g{var n=r(1870),o=r(8784).EXISTS,i=r(2538),a=r(7448),c=Function.prototype,u=i(c.toString),s=/function\b(?:\s|\/\*[\S\s]*?\*\/|\/\/[^\n\r]*[\n\r]+)*([^\s(/]*)/,l=i(s.exec);n&&!o&&a(c,"name",{configurable:!0,get:function(){try{return l(s,u(this))[1]}catch(t){return""}}})},2264:(t,e,r)=>{var n=r(3076),o=r(5793),i=r(347),a=r(9295),c=r(2538),u=r(3849),s=r(1435),l=r(4975),p=r(850),f=r(9023),v=r(2349),h=String,d=o("JSON","stringify"),g=c(/./.exec),y=c("".charAt),b=c("".charCodeAt),m=c("".replace),x=c(1..toString),w=/[\uD800-\uDFFF]/g,S=/^[\uD800-\uDBFF]$/,_=/^[\uDC00-\uDFFF]$/,A=!v||u((function(){var t=o("Symbol")("stringify detection");return"[null]"!==d([t])||"{}"!==d({a:t})||"{}"!==d(Object(t))})),O=u((function(){return'"\\udf06\\ud834"'!==d("\udf06\ud834")||'"\\udead"'!==d("\udead")})),E=function(t,e){var r=p(arguments),n=f(e);if(s(n)||void 0!==t&&!l(t))return r[1]=function(t,e){if(s(n)&&(e=a(n,this,h(t),e)),!l(e))return e},i(d,null,r)},j=function(t,e,r){var n=y(r,e-1),o=y(r,e+1);return g(S,t)&&!g(_,o)||g(_,t)&&!g(S,n)?"\\u"+x(b(t,0),16):t};d&&n({target:"JSON",stat:!0,arity:3,forced:A||O},{stringify:function(t,e,r){var n=p(arguments),o=i(A?E:d,null,n);return O&&"string"==typeof o?m(o,w,j):o}})},4318:(t,e,r)=>{var n=r(3076),o=r(4709),i=r(1870),a=r(9317),c=r(5869),u=r(2538),s=r(9946),l=r(379),p=r(8285),f=r(8559),v=r(4975),h=r(4499),d=r(3849),g=r(1430).f,y=r(9697).f,b=r(2587).f,m=r(366),x=r(1136).trim,w="Number",S=a[w],_=c[w],A=S.prototype,O=a.TypeError,E=u("".slice),j=u("".charCodeAt),C=function(t){var e,r,n,o,i,a,c,u,s=h(t,"number");if(v(s))throw new O("Cannot convert a Symbol value to a number");if("string"==typeof s&&s.length>2)if(s=x(s),43===(e=j(s,0))||45===e){if(88===(r=j(s,2))||120===r)return NaN}else if(48===e){switch(j(s,1)){case 66:case 98:n=2,o=49;break;case 79:case 111:n=8,o=55;break;default:return+s}for(a=(i=E(s,2)).length,c=0;co)return NaN;return parseInt(i,n)}return+s},k=s(w,!S(" 0o1")||!S("0b1")||S("+0x1")),P=function(t){var e,r=arguments.length<1?0:S(function(t){var e=h(t,"number");return"bigint"==typeof e?e:C(e)}(t));return f(A,e=this)&&d((function(){m(e)}))?p(Object(r),this,P):r};P.prototype=A,k&&!o&&(A.constructor=P),n({global:!0,constructor:!0,wrap:!0,forced:k},{Number:P});var I=function(t,e){for(var r,n=i?g(e):"MAX_VALUE,MIN_VALUE,NaN,NEGATIVE_INFINITY,POSITIVE_INFINITY,EPSILON,MAX_SAFE_INTEGER,MIN_SAFE_INTEGER,isFinite,isInteger,isNaN,isSafeInteger,parseFloat,parseInt,fromString,range".split(","),o=0;n.length>o;o++)l(e,r=n[o])&&!l(t,r)&&b(t,r,y(e,r))};o&&_&&I(c[w],_),(k||o)&&I(c[w],S)},5746:(t,e,r)=>{var n=r(3076),o=r(2538),i=r(7277),a=r(366),c=r(1568),u=r(3849),s=RangeError,l=String,p=Math.floor,f=o(c),v=o("".slice),h=o(1..toFixed),d=function(t,e,r){return 0===e?r:e%2==1?d(t,e-1,r*t):d(t*t,e/2,r)},g=function(t,e,r){for(var n=-1,o=r;++n<6;)o+=e*t[n],t[n]=o%1e7,o=p(o/1e7)},y=function(t,e){for(var r=6,n=0;--r>=0;)n+=t[r],t[r]=p(n/e),n=n%e*1e7},b=function(t){for(var e=6,r="";--e>=0;)if(""!==r||0===e||0!==t[e]){var n=l(t[e]);r=""===r?n:r+f("0",7-n.length)+n}return r};n({target:"Number",proto:!0,forced:u((function(){return"0.000"!==h(8e-5,3)||"1"!==h(.9,0)||"1.25"!==h(1.255,2)||"1000000000000000128"!==h(0xde0b6b3a7640080,0)}))||!u((function(){h({})}))},{toFixed:function(t){var e,r,n,o,c=a(this),u=i(t),p=[0,0,0,0,0,0],h="",m="0";if(u<0||u>20)throw new s("Incorrect fraction digits");if(c!=c)return"NaN";if(c<=-1e21||c>=1e21)return l(c);if(c<0&&(h="-",c=-c),c>1e-21)if(r=(e=function(t){for(var e=0,r=t;r>=4096;)e+=12,r/=4096;for(;r>=2;)e+=1,r/=2;return e}(c*d(2,69,1))-69)<0?c*d(2,-e,1):c/d(2,e,1),r*=4503599627370496,(e=52-e)>0){for(g(p,0,r),n=u;n>=7;)g(p,1e7,0),n-=7;for(g(p,d(10,n,1),0),n=e-1;n>=23;)y(p,1<<23),n-=23;y(p,1<0?h+((o=m.length)<=u?"0."+f("0",u-o)+m:v(m,0,o-u)+"."+v(m,o-u)):h+m}})},7591:(t,e,r)=>{var n=r(3076),o=r(5567);n({target:"Object",stat:!0,arity:2,forced:Object.assign!==o},{assign:o})},5315:(t,e,r)=>{var n=r(3076),o=r(2349),i=r(3849),a=r(2059),c=r(4683);n({target:"Object",stat:!0,forced:!o||i((function(){a.f(1)}))},{getOwnPropertySymbols:function(t){var e=a.f;return e?e(c(t)):[]}})},7458:(t,e,r)=>{var n=r(3076),o=r(4683),i=r(9866);n({target:"Object",stat:!0,forced:r(3849)((function(){i(1)}))},{keys:function(t){return i(o(t))}})},9645:(t,e,r)=>{var n=r(6002),o=r(2202),i=r(6341);n||o(Object.prototype,"toString",i,{unsafe:!0})},9981:(t,e,r)=>{var n=r(3076),o=r(1601);n({target:"RegExp",proto:!0,forced:/./.exec!==o},{exec:o})},5991:(t,e,r)=>{var n=r(8784).PROPER,o=r(2202),i=r(3349),a=r(2277),c=r(3849),u=r(7176),s="toString",l=RegExp.prototype,p=l[s],f=c((function(){return"/a/b"!==p.call({source:"a",flags:"b"})})),v=n&&p.name!==s;(f||v)&&o(l,s,(function(){var t=i(this);return"/"+a(t.source)+"/"+a(u(t))}),{unsafe:!0})},6490:(t,e,r)=>{var n=r(449).charAt,o=r(2277),i=r(5043),a=r(654),c=r(9055),u="String Iterator",s=i.set,l=i.getterFor(u);a(String,"String",(function(t){s(this,{type:u,string:o(t),index:0})}),(function(){var t,e=l(this),r=e.string,o=e.index;return o>=r.length?c(void 0,!0):(t=n(r,o),e.index+=t.length,c(t,!1))}))},6475:(t,e,r)=>{var n=r(9295),o=r(2670),i=r(3349),a=r(2303),c=r(8020),u=r(2277),s=r(2112),l=r(2996),p=r(6691),f=r(5964);o("match",(function(t,e,r){return[function(e){var r=s(this),o=a(e)?void 0:l(e,t);return o?n(o,e,r):new RegExp(e)[t](u(r))},function(t){var n=i(this),o=u(t),a=r(e,n,o);if(a.done)return a.value;if(!n.global)return f(n,o);var s=n.unicode;n.lastIndex=0;for(var l,v=[],h=0;null!==(l=f(n,o));){var d=u(l[0]);v[h]=d,""===d&&(n.lastIndex=p(o,c(n.lastIndex),s)),h++}return 0===h?null:v}]}))},9666:(t,e,r)=>{var n=r(3076),o=r(8155).start;n({target:"String",proto:!0,forced:r(7285)},{padStart:function(t){return o(this,t,arguments.length>1?arguments[1]:void 0)}})},8171:(t,e,r)=>{r(3076)({target:"String",proto:!0},{repeat:r(1568)})},6230:(t,e,r)=>{var n=r(347),o=r(9295),i=r(2538),a=r(2670),c=r(3849),u=r(3349),s=r(1435),l=r(2303),p=r(7277),f=r(8020),v=r(2277),h=r(2112),d=r(6691),g=r(2996),y=r(1748),b=r(5964),m=r(3633)("replace"),x=Math.max,w=Math.min,S=i([].concat),_=i([].push),A=i("".indexOf),O=i("".slice),E="$0"==="a".replace(/./,"$0"),j=!!/./[m]&&""===/./[m]("a","$0");a("replace",(function(t,e,r){var i=j?"$":"$0";return[function(t,r){var n=h(this),i=l(t)?void 0:g(t,m);return i?o(i,t,n,r):o(e,v(n),t,r)},function(t,o){var a=u(this),c=v(t);if("string"==typeof o&&-1===A(o,i)&&-1===A(o,"$<")){var l=r(e,a,c,o);if(l.done)return l.value}var h=s(o);h||(o=v(o));var g,m=a.global;m&&(g=a.unicode,a.lastIndex=0);for(var E,j=[];null!==(E=b(a,c))&&(_(j,E),m);){""===v(E[0])&&(a.lastIndex=d(c,f(a.lastIndex),g))}for(var C,k="",P=0,I=0;I=P&&(k+=O(c,P,L)+R,P=L+T.length)}return k+O(c,P)}]}),!!c((function(){var t=/./;return t.exec=function(){var t=[];return t.groups={a:"7"},t},"7"!=="".replace(t,"$")}))||!E||j)},8402:(t,e,r)=>{var n=r(9295),o=r(2538),i=r(2670),a=r(3349),c=r(2303),u=r(2112),s=r(5635),l=r(6691),p=r(8020),f=r(2277),v=r(2996),h=r(5964),d=r(4667),g=r(3849),y=d.UNSUPPORTED_Y,b=Math.min,m=o([].push),x=o("".slice),w=!g((function(){var t=/(?:)/,e=t.exec;t.exec=function(){return e.apply(this,arguments)};var r="ab".split(t);return 2!==r.length||"a"!==r[0]||"b"!==r[1]})),S="c"==="abbc".split(/(b)*/)[1]||4!=="test".split(/(?:)/,-1).length||2!=="ab".split(/(?:ab)*/).length||4!==".".split(/(.?)(.?)/).length||".".split(/()()/).length>1||"".split(/.?/).length;i("split",(function(t,e,r){var o="0".split(void 0,0).length?function(t,r){return void 0===t&&0===r?[]:n(e,this,t,r)}:e;return[function(e,r){var i=u(this),a=c(e)?void 0:v(e,t);return a?n(a,e,i,r):n(o,f(i),e,r)},function(t,n){var i=a(this),c=f(t);if(!S){var u=r(o,i,c,n,o!==e);if(u.done)return u.value}var v=s(i,RegExp),d=i.unicode,g=(i.ignoreCase?"i":"")+(i.multiline?"m":"")+(i.unicode?"u":"")+(y?"g":"y"),w=new v(y?"^(?:"+i.source+")":i,g),_=void 0===n?4294967295:n>>>0;if(0===_)return[];if(0===c.length)return null===h(w,c)?[c]:[];for(var A=0,O=0,E=[];O{var n,o=r(3076),i=r(4890),a=r(9697).f,c=r(8020),u=r(2277),s=r(3181),l=r(2112),p=r(5850),f=r(4709),v=i("".slice),h=Math.min,d=p("startsWith");o({target:"String",proto:!0,forced:!!(f||d||(n=a(String.prototype,"startsWith"),!n||n.writable))&&!d},{startsWith:function(t){var e=u(l(this));s(t);var r=c(h(arguments.length>1?arguments[1]:void 0,e.length)),n=u(t);return v(e,r,r+n.length)===n}})},3624:(t,e,r)=>{var n=r(3076),o=r(1136).trim;n({target:"String",proto:!0,forced:r(4500)("trim")},{trim:function(){return o(this)}})},2528:(t,e,r)=>{var n=r(3076),o=r(9317),i=r(9295),a=r(2538),c=r(4709),u=r(1870),s=r(2349),l=r(3849),p=r(379),f=r(8559),v=r(3349),h=r(8799),d=r(2423),g=r(2277),y=r(5658),b=r(8250),m=r(9866),x=r(1430),w=r(2260),S=r(2059),_=r(9697),A=r(2587),O=r(4087),E=r(6203),j=r(2202),C=r(7448),k=r(7175),P=r(6769),I=r(147),R=r(5434),T=r(3633),L=r(8093),F=r(3497),N=r(3488),M=r(7621),D=r(5043),B=r(9603).forEach,$=P("hidden"),H="Symbol",G="prototype",U=D.set,V=D.getterFor(H),W=Object[G],z=o.Symbol,Y=z&&z[G],X=o.RangeError,K=o.TypeError,q=o.QObject,J=_.f,Q=A.f,Z=w.f,tt=E.f,et=a([].push),rt=k("symbols"),nt=k("op-symbols"),ot=k("wks"),it=!q||!q[G]||!q[G].findChild,at=function(t,e,r){var n=J(W,e);n&&delete W[e],Q(t,e,r),n&&t!==W&&Q(W,e,n)},ct=u&&l((function(){return 7!==b(Q({},"a",{get:function(){return Q(this,"a",{value:7}).a}})).a}))?at:Q,ut=function(t,e){var r=rt[t]=b(Y);return U(r,{type:H,tag:t,description:e}),u||(r.description=e),r},st=function(t,e,r){t===W&&st(nt,e,r),v(t);var n=d(e);return v(r),p(rt,n)?(r.enumerable?(p(t,$)&&t[$][n]&&(t[$][n]=!1),r=b(r,{enumerable:y(0,!1)})):(p(t,$)||Q(t,$,y(1,b(null))),t[$][n]=!0),ct(t,n,r)):Q(t,n,r)},lt=function(t,e){v(t);var r=h(e),n=m(r).concat(ht(r));return B(n,(function(e){u&&!i(pt,r,e)||st(t,e,r[e])})),t},pt=function(t){var e=d(t),r=i(tt,this,e);return!(this===W&&p(rt,e)&&!p(nt,e))&&(!(r||!p(this,e)||!p(rt,e)||p(this,$)&&this[$][e])||r)},ft=function(t,e){var r=h(t),n=d(e);if(r!==W||!p(rt,n)||p(nt,n)){var o=J(r,n);return!o||!p(rt,n)||p(r,$)&&r[$][n]||(o.enumerable=!0),o}},vt=function(t){var e=Z(h(t)),r=[];return B(e,(function(t){p(rt,t)||p(I,t)||et(r,t)})),r},ht=function(t){var e=t===W,r=Z(e?nt:h(t)),n=[];return B(r,(function(t){!p(rt,t)||e&&!p(W,t)||et(n,rt[t])})),n};s||(j(Y=(z=function(){if(f(Y,this))throw new K("Symbol is not a constructor");var t=arguments.length&&void 0!==arguments[0]?g(arguments[0]):void 0,e=R(t),r=function(t){var n=void 0===this?o:this;n===W&&i(r,nt,t),p(n,$)&&p(n[$],e)&&(n[$][e]=!1);var a=y(1,t);try{ct(n,e,a)}catch(t){if(!(t instanceof X))throw t;at(n,e,a)}};return u&&it&&ct(W,e,{configurable:!0,set:r}),ut(e,t)})[G],"toString",(function(){return V(this).tag})),j(z,"withoutSetter",(function(t){return ut(R(t),t)})),E.f=pt,A.f=st,O.f=lt,_.f=ft,x.f=w.f=vt,S.f=ht,L.f=function(t){return ut(T(t),t)},u&&(C(Y,"description",{configurable:!0,get:function(){return V(this).description}}),c||j(W,"propertyIsEnumerable",pt,{unsafe:!0}))),n({global:!0,constructor:!0,wrap:!0,forced:!s,sham:!s},{Symbol:z}),B(m(ot),(function(t){F(t)})),n({target:H,stat:!0,forced:!s},{useSetter:function(){it=!0},useSimple:function(){it=!1}}),n({target:"Object",stat:!0,forced:!s,sham:!u},{create:function(t,e){return void 0===e?b(t):lt(b(t),e)},defineProperty:st,defineProperties:lt,getOwnPropertyDescriptor:ft}),n({target:"Object",stat:!0,forced:!s},{getOwnPropertyNames:vt}),N(),M(z,H),I[$]=!0},1725:(t,e,r)=>{var n=r(3076),o=r(1870),i=r(9317),a=r(2538),c=r(379),u=r(1435),s=r(8559),l=r(2277),p=r(7448),f=r(4518),v=i.Symbol,h=v&&v.prototype;if(o&&u(v)&&(!("description"in h)||void 0!==v().description)){var d={},g=function(){var t=arguments.length<1||void 0===arguments[0]?void 0:l(arguments[0]),e=s(h,this)?new v(t):void 0===t?v():v(t);return""===t&&(d[e]=!0),e};f(g,v),g.prototype=h,h.constructor=g;var y="Symbol(description detection)"===String(v("description detection")),b=a(h.valueOf),m=a(h.toString),x=/^Symbol\((.*)\)[^)]+$/,w=a("".replace),S=a("".slice);p(h,"description",{configurable:!0,get:function(){var t=b(this);if(c(d,t))return"";var e=m(t),r=y?S(e,7,-1):w(e,x,"$1");return""===r?void 0:r}}),n({global:!0,constructor:!0,forced:!0},{Symbol:g})}},3028:(t,e,r)=>{var n=r(3076),o=r(5793),i=r(379),a=r(2277),c=r(7175),u=r(402),s=c("string-to-symbol-registry"),l=c("symbol-to-string-registry");n({target:"Symbol",stat:!0,forced:!u},{for:function(t){var e=a(t);if(i(s,e))return s[e];var r=o("Symbol")(e);return s[e]=r,l[r]=e,r}})},8381:(t,e,r)=>{r(3497)("iterator")},905:(t,e,r)=>{r(2528),r(3028),r(38),r(2264),r(5315)},38:(t,e,r)=>{var n=r(3076),o=r(379),i=r(4975),a=r(7113),c=r(7175),u=r(402),s=c("symbol-to-string-registry");n({target:"Symbol",stat:!0,forced:!u},{keyFor:function(t){if(!i(t))throw new TypeError(a(t)+" is not a symbol");if(o(s,t))return s[t]}})},8190:(t,e,r)=>{var n=r(9317),o=r(1530),i=r(6334),a=r(3833),c=r(4477),u=function(t){if(t&&t.forEach!==a)try{c(t,"forEach",a)}catch(e){t.forEach=a}};for(var s in o)o[s]&&u(n[s]&&n[s].prototype);u(i)},4207:(t,e,r)=>{var n=r(9317),o=r(1530),i=r(6334),a=r(8469),c=r(4477),u=r(7621),s=r(3633)("iterator"),l=a.values,p=function(t,e){if(t){if(t[s]!==l)try{c(t,s,l)}catch(e){t[s]=l}if(u(t,e,!0),o[e])for(var r in a)if(t[r]!==a[r])try{c(t,r,a[r])}catch(e){t[r]=a[r]}}};for(var f in o)p(n[f]&&n[f].prototype,f);p(i,"DOMTokenList")}},e={};function r(n){var o=e[n];if(void 0!==o)return o.exports;var i=e[n]={exports:{}};return t[n].call(i.exports,i,i.exports,r),i.exports}r.d=(t,e)=>{for(var n in e)r.o(e,n)&&!r.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(t){if("object"==typeof window)return window}}(),r.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var n={};return(()=>{r.d(n,{default:()=>R});var t={};r.r(t),r.d(t,{adjustableInputNumbers:()=>f,createElementFromString:()=>u,createFromTemplate:()=>s,eventPath:()=>l,off:()=>c,on:()=>a,resolveElement:()=>p});r(8168),r(5367),r(905),r(1725),r(8381),r(9332),r(1945),r(8469),r(5280),r(4318),r(1256),r(3892),r(7591),r(7458),r(9645),r(9981),r(5991),r(6490),r(6475),r(8171),r(4430),r(8190),r(4207),r(6230),r(8402),r(3624);function e(t,e){var r="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(r)return(r=r.call(t)).next.bind(r);if(Array.isArray(t)||(r=function(t,e){if(!t)return;if("string"==typeof t)return o(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return o(t,e)}(t))||e&&t&&"number"==typeof t.length){r&&(t=r);var n=0;return function(){return n>=t.length?{done:!0}:{done:!1,value:t[n++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function o(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r>/g).reduce((function(t,e,r,n){return t=t.querySelector(e),r=i?(i=r,e(Number(t),n,o)):(o++,t)})),t.focus(),t.setSelectionRange(i,i),r.preventDefault(),t.dispatchEvent(new Event("input"))}void 0===e&&(e=function(t){return t}),a(t,"focus",(function(){return a(window,"wheel",r,{passive:!1})})),a(t,"blur",(function(){return c(window,"wheel",r)}))}r(7560),r(4008),r(9666);var v=Math.min,h=Math.max,d=Math.floor,g=Math.round;function y(t,e,r){e/=100,r/=100;var n=d(t=t/360*6),o=t-n,i=r*(1-e),a=r*(1-o*e),c=r*(1-(1-o)*e),u=n%6;return[255*[r,a,i,i,c,r][u],255*[c,r,r,a,i,i][u],255*[i,i,c,r,r,a][u]]}function b(t,e,r){var n,o,i=v(t/=255,e/=255,r/=255),a=h(t,e,r),c=a-i;if(0===c)n=o=0;else{o=c/a;var u=((a-t)/6+c/2)/c,s=((a-e)/6+c/2)/c,l=((a-r)/6+c/2)/c;t===a?n=l-s:e===a?n=1/3+u-l:r===a&&(n=2/3+s-u),n<0?n+=1:n>1&&(n-=1)}return[360*n,100*o,100*a]}function m(t,e,r,n){e/=100,r/=100;var o=255*(1-v(1,(t/=100)*(1-(n/=100))+n)),i=255*(1-v(1,e*(1-n)+n)),a=255*(1-v(1,r*(1-n)+n));return[].concat(b(o,i,a))}function x(t,e,r){e/=100;var n=2*(e*=(r/=100)<.5?r:1-r)/(r+e)*100,o=100*(r+e);return[t,isNaN(n)?0:n,o]}function w(t){return b.apply(void 0,t.match(/.{2}/g).map((function(t){return parseInt(t,16)})))}function S(t){t=t.match(/^[a-zA-Z]+$/)?function(t){if("black"===t.toLowerCase())return"#000";var e=document.createElement("canvas").getContext("2d");return e.fillStyle=t,"#000"===e.fillStyle?null:e.fillStyle}(t):t;var e,r={cmyk:/^cmyk\D+([\d.]+)\D+([\d.]+)\D+([\d.]+)\D+([\d.]+)/i,rgba:/^rgba?\D+([\d.]+)(%?)\D+([\d.]+)(%?)\D+([\d.]+)(%?)\D*?(([\d.]+)(%?)|$)/i,hsla:/^hsla?\D+([\d.]+)\D+([\d.]+)\D+([\d.]+)\D*?(([\d.]+)(%?)|$)/i,hsva:/^hsva?\D+([\d.]+)\D+([\d.]+)\D+([\d.]+)\D*?(([\d.]+)(%?)|$)/i,hexa:/^#?(([\dA-Fa-f]{3,4})|([\dA-Fa-f]{6})|([\dA-Fa-f]{8}))$/i},n=function(t){return t.map((function(t){return/^(|\d+)\.\d+|\d+$/.test(t)?Number(t):void 0}))};t:for(var o in r)if(e=r[o].exec(t))switch(o){case"cmyk":var i=n(e),a=i[1],c=i[2],u=i[3],s=i[4];if(a>100||c>100||u>100||s>100)break t;return{values:m(a,c,u,s),type:o};case"rgba":var l=n(e),p=l[1],f=l[3],v=l[5],h=l[8];if(p="%"===e[2]?p/100*255:p,f="%"===e[4]?f/100*255:f,v="%"===e[6]?v/100*255:v,h="%"===e[9]?h/100:h,p>255||f>255||v>255||h<0||h>1)break t;return{values:[].concat(b(p,f,v),[h]),a:h,type:o};case"hexa":var d=e[1];4!==d.length&&3!==d.length||(d=d.split("").map((function(t){return t+t})).join(""));var g=d.substring(0,6),y=d.substring(6);return y=y?parseInt(y,16)/255:void 0,{values:[].concat(w(g),[y]),a:y,type:o};case"hsla":var S=n(e),_=S[1],A=S[2],O=S[3],E=S[5];if(E="%"===e[6]?E/100:E,_>360||A>100||O>100||E<0||E>1)break t;return{values:[].concat(x(_,A,O),[E]),a:E,type:o};case"hsva":var j=n(e),C=j[1],k=j[2],P=j[3],I=j[5];if(I="%"===e[6]?I/100:I,C>360||k>100||P>100||I<0||I>1)break t;return{values:[C,k,P,I],a:I,type:o}}return{values:null,type:null}}r(5746);function _(t,e,r,n){void 0===t&&(t=0),void 0===e&&(e=0),void 0===r&&(r=0),void 0===n&&(n=1);var o=function(t,e){return function(r){return void 0===r&&(r=-1),e(~r?t.map((function(t){return Number(t.toFixed(r))})):t)}},i={h:t,s:e,v:r,a:n,toHSVA:function(){var t=[i.h,i.s,i.v,i.a];return t.toString=o(t,(function(t){return"hsva("+t[0]+", "+t[1]+"%, "+t[2]+"%, "+i.a+")"})),t},toHSLA:function(){var t=[].concat(function(t,e,r){var n=(2-(e/=100))*(r/=100)/2;return 0!==n&&(e=1===n?0:n<.5?e*r/(2*n):e*r/(2-2*n)),[t,100*e,100*n]}(i.h,i.s,i.v),[i.a]);return t.toString=o(t,(function(t){return"hsla("+t[0]+", "+t[1]+"%, "+t[2]+"%, "+i.a+")"})),t},toRGBA:function(){var t=[].concat(y(i.h,i.s,i.v),[i.a]);return t.toString=o(t,(function(t){return"rgba("+t[0]+", "+t[1]+", "+t[2]+", "+i.a+")"})),t},toCMYK:function(){var t=function(t,e,r){var n=y(t,e,r),o=n[0]/255,i=n[1]/255,a=n[2]/255,c=v(1-o,1-i,1-a);return[100*(1===c?0:(1-o-c)/(1-c)),100*(1===c?0:(1-i-c)/(1-c)),100*(1===c?0:(1-a-c)/(1-c)),100*c]}(i.h,i.s,i.v);return t.toString=o(t,(function(t){return"cmyk("+t[0]+"%, "+t[1]+"%, "+t[2]+"%, "+t[3]+"%)"})),t},toHEXA:function(){var t=function(t,e,r){return y(t,e,r).map((function(t){return g(t).toString(16).padStart(2,"0")}))}(i.h,i.s,i.v),e=i.a>=1?"":Number((255*i.a).toFixed(0)).toString(16).toUpperCase().padStart(2,"0");return e&&t.push(e),t.toString=function(){return"#"+t.join("").toUpperCase()},t},clone:function(){return _(i.h,i.s,i.v,i.a)}};return i}var A=function(t){return Math.max(Math.min(t,1),0)};function O(t){var e={options:Object.assign({lock:null,onchange:function(){return 0},onstop:function(){return 0}},t),_keyboard:function(t){var r=e.options,n=t.type,o=t.key;if(document.activeElement===r.wrapper){var i=e.options.lock,a="ArrowUp"===o,c="ArrowRight"===o,u="ArrowDown"===o,s="ArrowLeft"===o;if("keydown"===n&&(a||c||u||s)){var l=0,p=0;"v"===i?l=a||c?1:-1:"h"===i?l=a||c?-1:1:(p=a?-1:u?1:0,l=s?-1:c?1:0),e.update(A(e.cache.x+.01*l),A(e.cache.y+.01*p)),t.preventDefault()}else o.startsWith("Arrow")&&(e.options.onstop(),t.preventDefault())}},_tapstart:function(t){a(document,["mouseup","touchend","touchcancel"],e._tapstop),a(document,["mousemove","touchmove"],e._tapmove),t.cancelable&&t.preventDefault(),e._tapmove(t)},_tapmove:function(t){var r=e.options,n=e.cache,o=r.lock,i=r.element,a=r.wrapper.getBoundingClientRect(),c=0,u=0;if(t){var s=t&&t.touches&&t.touches[0];c=t?(s||t).clientX:0,u=t?(s||t).clientY:0,ca.left+a.width&&(c=a.left+a.width),ua.top+a.height&&(u=a.top+a.height),c-=a.left,u-=a.top}else n&&(c=n.x*a.width,u=n.y*a.height);"h"!==o&&(i.style.left="calc("+c/a.width*100+"% - "+i.offsetWidth/2+"px)"),"v"!==o&&(i.style.top="calc("+u/a.height*100+"% - "+i.offsetHeight/2+"px)"),e.cache={x:c/a.width,y:u/a.height};var l=A(c/a.width),p=A(u/a.height);switch(o){case"v":return r.onchange(l);case"h":return r.onchange(p);default:return r.onchange(l,p)}},_tapstop:function(){e.options.onstop(),c(document,["mouseup","touchend","touchcancel"],e._tapstop),c(document,["mousemove","touchmove"],e._tapmove)},trigger:function(){e._tapmove()},update:function(t,r){void 0===t&&(t=0),void 0===r&&(r=0);var n=e.options.wrapper.getBoundingClientRect(),o=n.left,i=n.top,a=n.width,c=n.height;"h"===e.options.lock&&(r=t),e._tapmove({clientX:o+a*t,clientY:i+c*r})},destroy:function(){var t=e.options,r=e._tapstart,n=e._keyboard;c(document,["keydown","keyup"],n),c([t.wrapper,t.element],"mousedown",r),c([t.wrapper,t.element],"touchstart",r,{passive:!1})}},r=e.options,n=e._tapstart,o=e._keyboard;return a([r.wrapper,r.element],"mousedown",n),a([r.wrapper,r.element],"touchstart",n,{passive:!1}),a(document,["keydown","keyup"],o),e}function E(e){void 0===e&&(e={}),e=Object.assign({onchange:function(){return 0},className:"",elements:[]},e);var r=a(e.elements,"click",(function(t){e.elements.forEach((function(r){return r.classList[t.target===r?"add":"remove"](e.className)})),e.onchange(t),t.stopPropagation()}));return{destroy:function(){return c.apply(t,r)}}}const j={variantFlipOrder:{start:"sme",middle:"mse",end:"ems"},positionFlipOrder:{top:"tbrl",right:"rltb",bottom:"btrl",left:"lrbt"},position:"bottom",margin:8,padding:0},C=(t,e,r)=>{const n="object"!=typeof t||t instanceof HTMLElement?{reference:t,popper:e,...r}:t;return{update(t=n){const{reference:e,popper:r}=Object.assign(n,t);if(!r||!e)throw new Error("Popper- or reference-element missing.");return((t,e,r)=>{const{container:n,arrow:o,margin:i,padding:a,position:c,variantFlipOrder:u,positionFlipOrder:s}={container:document.documentElement.getBoundingClientRect(),...j,...r},{left:l,top:p}=e.style;e.style.left="0",e.style.top="0";const f=t.getBoundingClientRect(),v=e.getBoundingClientRect(),h={t:f.top-v.height-i,b:f.bottom+i,r:f.right+i,l:f.left-v.width-i},d={vs:f.left,vm:f.left+f.width/2-v.width/2,ve:f.left+f.width-v.width,hs:f.top,hm:f.bottom-f.height/2-v.height/2,he:f.bottom-v.height},[g,y="middle"]=c.split("-"),b=s[g],m=u[y],{top:x,left:w,bottom:S,right:_}=n;for(const t of b){const r="t"===t||"b"===t;let n=h[t];const[i,c]=r?["top","left"]:["left","top"],[u,s]=r?[v.height,v.width]:[v.width,v.height],[l,p]=r?[S,_]:[_,S],[g,y]=r?[x,w]:[w,x];if(!(nl))for(const l of m){let h=d[(r?"v":"h")+l];if(!(hp)){if(h-=v[c],n-=v[i],e.style[c]=`${h}px`,e.style[i]=`${n}px`,o){const e=r?f.width/2:f.height/2,a=s/2,p=e>a,v=h+{s:p?a:e,m:a,e:p?a:s-e}[l],d=n+{t:u,b:0,r:0,l:u}[t];o.style[c]=`${v}px`,o.style[i]=`${d}px`}return t+l}}}return e.style.left=l,e.style.top=p,null})(e,r,n)}}};var k;function P(t,e){var r="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(r)return(r=r.call(t)).next.bind(r);if(Array.isArray(t)||(r=function(t,e){if(!t)return;if("string"==typeof t)return I(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return I(t,e)}(t))||e&&t&&"number"==typeof t.length){r&&(t=r);var n=0;return function(){return n>=t.length?{done:!0}:{done:!1,value:t[n++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function I(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r\n\n '+(n?"":'')+'\n\n
\n
\n
\n \n
\n
\n\n
\n
\n
\n
\n\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n\n
\n \n\n \n \n \n \n \n\n \n \n \n
\n
\n \n '),(v=f.interaction).options.find((function(t){return!t.hidden&&!t.classList.add("active")})),v.type=function(){return v.options.find((function(t){return t.classList.contains("active")}))},f),h.useAsButton&&(this._root.button=h.el),h.container.appendChild(this._root.root)},r._finalBuild=function(){var t=this.options,e=this._root;if(t.container.removeChild(e.root),t.inline){var r=t.el.parentElement;t.el.nextSibling?r.insertBefore(e.app,t.el.nextSibling):r.appendChild(e.app)}else t.container.appendChild(e.app);t.useAsButton?t.inline&&t.el.remove():t.el.parentNode.replaceChild(e.root,t.el),t.disabled&&this.disable(),t.comparison||(e.button.style.transition="none",t.useAsButton||(e.preview.lastColor.style.transition="none")),this.hide()},r._buildComponents=function(){var t=this,e=this,r=this.options.components,n=(e.options.sliders||"v").repeat(2),o=n.match(/^[vh]+$/g)?n:[],i=o[0],a=o[1],c=function(){return t._color||(t._color=t._lastColor.clone())},u={palette:O({element:e._root.palette.picker,wrapper:e._root.palette.palette,onstop:function(){return e._emit("changestop","slider",e)},onchange:function(t,n){if(r.palette){var o=c(),i=e._root,a=e.options,u=i.preview,s=u.lastColor,l=u.currentColor;e._recalc&&(o.s=100*t,o.v=100-100*n,o.v<0&&(o.v=0),e._updateOutput("slider"));var p=o.toRGBA().toString(0);this.element.style.background=p,this.wrapper.style.background="\n linear-gradient(to top, rgba(0, 0, 0, "+o.a+"), transparent),\n linear-gradient(to left, hsla("+o.h+", 100%, 50%, "+o.a+"), rgba(255, 255, 255, "+o.a+"))\n ",a.comparison?a.useAsButton||e._lastColor||s.style.setProperty("--pcr-color",p):(i.button.style.setProperty("--pcr-color",p),i.button.classList.remove("clear"));for(var f,v=o.toHEXA().toString(),h=P(e._swatchColors);!(f=h()).done;){var d=f.value,g=d.el,y=d.color;g.classList[v===y.toHEXA().toString()?"add":"remove"]("pcr-active")}l.style.setProperty("--pcr-color",p)}}}),hue:O({lock:"v"===a?"h":"v",element:e._root.hue.picker,wrapper:e._root.hue.slider,onstop:function(){return e._emit("changestop","slider",e)},onchange:function(t){if(r.hue&&r.palette){var n=c();e._recalc&&(n.h=360*t),this.element.style.backgroundColor="hsl("+n.h+", 100%, 50%)",u.palette.trigger()}}}),opacity:O({lock:"v"===i?"h":"v",element:e._root.opacity.picker,wrapper:e._root.opacity.slider,onstop:function(){return e._emit("changestop","slider",e)},onchange:function(t){if(r.opacity&&r.palette){var n=c();e._recalc&&(n.a=Math.round(100*t)/100),this.element.style.background="rgba(0, 0, 0, "+n.a+")",u.palette.trigger()}}}),selectable:E({elements:e._root.interaction.options,className:"active",onchange:function(t){e._representation=t.target.getAttribute("data-type").toUpperCase(),e._recalc&&e._updateOutput("swatch")}})};this._components=u},r._bindEvents=function(){var t=this,e=this._root,r=this.options,n=[a(e.interaction.clear,"click",(function(){return t._clearColor()})),a([e.interaction.cancel,e.preview.lastColor],"click",(function(){t.setHSVA.apply(t,(t._lastColor||t._color).toHSVA().concat([!0])),t._emit("cancel")})),a(e.interaction.save,"click",(function(){!t.applyColor()&&!r.showAlways&&t.hide()})),a(e.interaction.result,["keyup","input"],(function(e){t.setColor(e.target.value,!0)&&!t._initializingActive&&(t._emit("change",t._color,"input",t),t._emit("changestop","input",t)),e.stopImmediatePropagation()})),a(e.interaction.result,["focus","blur"],(function(e){t._recalc="blur"===e.type,t._recalc&&t._updateOutput(null)})),a([e.palette.palette,e.palette.picker,e.hue.slider,e.hue.picker,e.opacity.slider,e.opacity.picker],["mousedown","touchstart"],(function(){return t._recalc=!0}),{passive:!0})];if(!r.showAlways){var o=r.closeWithKey;n.push(a(e.button,"click",(function(){return t.isOpen()?t.hide():t.show()})),a(document,"keyup",(function(e){return t.isOpen()&&(e.key===o||e.code===o)&&t.hide()})),a(document,["touchstart","mousedown"],(function(r){t.isOpen()&&!l(r).some((function(t){return t===e.app||t===e.button}))&&t.hide()}),{capture:!0}))}if(r.adjustableNumbers){var i={rgba:[255,255,255,1],hsva:[360,100,100,1],hsla:[360,100,100,1],cmyk:[100,100,100,100]};f(e.interaction.result,(function(e,r,n){var o=i[t.getColorRepresentation().toLowerCase()];if(o){var a=o[n],c=e+(a>=100?1e3*r:r);return c<=0?0:Number((c1?r-1:0),o=1;o');return o.swatches.appendChild(c),n.push({el:c,color:i}),this._eventBindings.push(a(c,"click",(function(){e.setHSVA.apply(e,i.toHSVA().concat([!0])),e._emit("swatchselect",i),e._emit("change",i,"swatch",e)}))),!0}return!1},r.removeSwatch=function(t){var e=this._swatchColors[t];if(e){var r=e.el;return this._root.swatches.removeChild(r),this._swatchColors.splice(t,1),!0}return!1},r.applyColor=function(t){void 0===t&&(t=!1);var e=this._root,r=e.preview,n=e.button,o=this._color.toRGBA().toString(0);return r.lastColor.style.setProperty("--pcr-color",o),this.options.useAsButton||n.style.setProperty("--pcr-color",o),n.classList.remove("clear"),this._lastColor=this._color.clone(),this._initializingActive||t||this._emit("save",this._color),this},r.destroy=function(){var e=this;cancelAnimationFrame(this._setupAnimationFrame),this._eventBindings.forEach((function(e){return c.apply(t,e)})),Object.keys(this._components).forEach((function(t){return e._components[t].destroy()}))},r.destroyAndRemove=function(){var t=this;this.destroy();var e=this._root,r=e.root,n=e.app;r.parentElement&&r.parentElement.removeChild(r),n.parentElement.removeChild(n),Object.keys(this).forEach((function(e){return t[e]=null}))},r.hide=function(){return!!this.isOpen()&&(this._root.app.classList.remove("visible"),this._emit("hide"),!0)},r.show=function(){return!this.options.disabled&&!this.isOpen()&&(this._root.app.classList.add("visible"),this._rePositioningPicker(),this._emit("show",this._color),this)},r.isOpen=function(){return this._root.app.classList.contains("visible")},r.setHSVA=function(t,e,r,n,o){void 0===t&&(t=360),void 0===e&&(e=0),void 0===r&&(r=0),void 0===n&&(n=1),void 0===o&&(o=!1);var i=this._recalc;if(this._recalc=!1,t<0||t>360||e<0||e>100||r<0||r>100||n<0||n>1)return!1;this._color=_(t,e,r,n);var a=this._components,c=a.hue,u=a.opacity,s=a.palette;return c.update(t/360),u.update(n),s.update(e/100,1-r/100),o||this.applyColor(),i&&this._updateOutput(),this._recalc=i,!0},r.setColor=function(t,e){if(void 0===e&&(e=!1),null===t)return this._clearColor(e),!0;var r=this._parseLocalColor(t),n=r.values,o=r.type;if(n){var i=o.toUpperCase(),a=this._root.interaction.options,c=a.find((function(t){return t.getAttribute("data-type")===i}));if(c&&!c.hidden)for(var u,s=P(a);!(u=s()).done;){var l=u.value;l.classList[l===c?"add":"remove"]("active")}return!!this.setHSVA.apply(this,n.concat([e]))&&this.setColorRepresentation(i)}return!1},r.setColorRepresentation=function(t){return t=t.toUpperCase(),!!this._root.interaction.options.find((function(e){return e.getAttribute("data-type").startsWith(t)&&!e.click()}))},r.getColorRepresentation=function(){return this._representation},r.getColor=function(){return this._color},r.getSelectedColor=function(){return this._lastColor},r.getRoot=function(){return this._root},r.disable=function(){return this.hide(),this.options.disabled=!0,this._root.button.classList.add("disabled"),this},r.enable=function(){return this.options.disabled=!1,this._root.button.classList.remove("disabled"),this},e}();k=R,R.utils=t,R.version="1.9.1",R.I18N_DEFAULTS={"ui:dialog":"color picker dialog","btn:toggle":"toggle color picker dialog","btn:swatch":"color swatch","btn:last-color":"use previous color","btn:save":"Save","btn:cancel":"Cancel","btn:clear":"Clear","aria:btn:save":"save and close","aria:btn:cancel":"cancel and close","aria:btn:clear":"clear and close","aria:input":"color input field","aria:palette":"color selection area","aria:hue":"hue selection slider","aria:opacity":"selection slider"},R.DEFAULT_OPTIONS={appClass:null,theme:"classic",useAsButton:!1,padding:8,disabled:!1,comparison:!0,closeOnScroll:!1,outputPrecision:0,lockOpacity:!1,autoReposition:!0,container:"body",components:{interaction:{}},i18n:{},swatches:null,inline:!1,sliders:null,default:"#42445a",defaultRepresentation:null,position:"bottom-middle",adjustableNumbers:!0,showAlways:!1,closeWithKey:"Escape"},R.create=function(t){return new k(t)}})(),n=n.default})())); diff --git a/files/sidebars/cssref.yaml b/files/sidebars/cssref.yaml index 4b102eece677634..5ba586550698a7f 100644 --- a/files/sidebars/cssref.yaml +++ b/files/sidebars/cssref.yaml @@ -354,7 +354,7 @@ sidebar: - /Web/CSS/CSS_backgrounds_and_borders/Border-image_generator - /Web/CSS/CSS_backgrounds_and_borders/Border-radius_generator - /Web/CSS/CSS_shapes/Shape_generator - - /Web/CSS/color_value/color-mix/color-mixer-tool + - /Web/CSS/color_value/Color_mixer_tool l10n: de: Beginners: Einsteiger-Tutorials From 7315a1762a356c0aaf0c220e1b6304ed1ef1f871 Mon Sep 17 00:00:00 2001 From: OnkarRuikar <87750369+OnkarRuikar@users.noreply.github.com> Date: Tue, 2 Sep 2025 08:11:02 +0530 Subject: [PATCH 3/9] review comments --- .prettierignore | 4 ++-- .vscode/cspell.json | 4 ++-- files/en-us/_redirects.txt | 3 ++- files/en-us/_wikihistory.json | 2 +- .../what_will_your_website_look_like/index.md | 2 +- files/en-us/web/css/color_value/color/index.md | 2 +- .../web/css/color_value/color_mixer_tool/classic.min.css | 2 -- files/en-us/web/css/color_value/hsl/index.md | 2 +- files/en-us/web/css/color_value/hwb/index.md | 2 +- files/en-us/web/css/color_value/rgb/index.md | 2 +- files/en-us/web/css/css_colors/color_mixer/classic.min.css | 2 ++ .../color_mixer_tool => css_colors/color_mixer}/index.md | 5 +++-- .../color_mixer}/pickr.es5.min.js | 0 .../css_colors/{color_picker_tool => color_picker}/index.md | 4 ++-- files/en-us/web/css/css_colors/color_values/index.md | 2 +- files/en-us/web/css/css_colors/index.md | 2 +- files/sidebars/cssref.yaml | 6 +++--- 17 files changed, 24 insertions(+), 22 deletions(-) delete mode 100644 files/en-us/web/css/color_value/color_mixer_tool/classic.min.css create mode 100644 files/en-us/web/css/css_colors/color_mixer/classic.min.css rename files/en-us/web/css/{color_value/color_mixer_tool => css_colors/color_mixer}/index.md (99%) rename files/en-us/web/css/{color_value/color_mixer_tool => css_colors/color_mixer}/pickr.es5.min.js (100%) rename files/en-us/web/css/css_colors/{color_picker_tool => color_picker}/index.md (96%) diff --git a/.prettierignore b/.prettierignore index b527cefbfce2d04..486156d955c8c88 100644 --- a/.prettierignore +++ b/.prettierignore @@ -4,8 +4,8 @@ build/ /files/en-us/_githistory.json /tests/front-matter_test_files -/files/en-us/web/css/color_value/color_mixer_tool/classic.min.css -/files/en-us/web/css/color_value/color_mixer_tool/pickr.es5.min.js +/files/en-us/web/css/css_colors/color_mixer/classic.min.css +/files/en-us/web/css/css_colors/color_mixer/pickr.es5.min.js # XXX Ignored until https://github.com/prettier/prettier/issues/15032 is fixed /files/en-us/web/javascript/reference/operators/exponentiation/index.md diff --git a/.vscode/cspell.json b/.vscode/cspell.json index cdf7431fd275c3f..42bdfe401852739 100644 --- a/.vscode/cspell.json +++ b/.vscode/cspell.json @@ -29,8 +29,8 @@ ".vscode/cspell.json", ".vscode/extensions.json", ".markdownlint-cli2.jsonc", - "/files/en-us/web/css/color_value/color_mixer_tool/classic.min.css", - "/files/en-us/web/css/color_value/color_mixer_tool/pickr.es5.min.js" + "/files/en-us/web/css/css_colors/color_mixer/classic.min.css", + "/files/en-us/web/css/css_colors/color_mixer/pickr.es5.min.js" ], "ignoreRegExpList": [ // macros diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index 14a78b95871fea8..42721fa05e47c2e 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -12252,6 +12252,7 @@ /en-US/docs/Web/CSS/CSS_cascade/specified_value /en-US/docs/Web/CSS/CSS_cascade/Value_processing#specified_value /en-US/docs/Web/CSS/CSS_cascade/used_value /en-US/docs/Web/CSS/CSS_cascade/Value_processing#used_value /en-US/docs/Web/CSS/CSS_charsets /en-US/docs/Web/CSS/CSS_syntax +/en-US/docs/Web/CSS/CSS_colors/Color_picker_tool /en-US/docs/Web/CSS/CSS_colors/Color_picker /en-US/docs/Web/CSS/CSS_container_queries /en-US/docs/Web/CSS/CSS_containment/Container_queries /en-US/docs/Web/CSS/CSS_descriptor_definition /en-US/docs/Web/CSS /en-US/docs/Web/CSS/CSS_display/flow_layout/Block_and_inline_layout_in_normal_flow /en-US/docs/Web/CSS/CSS_display/Block_and_inline_layout_in_normal_flow @@ -12330,7 +12331,7 @@ /en-US/docs/Web/CSS/Tools/Border-image_generator /en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Border-image_generator /en-US/docs/Web/CSS/Tools/Border-radius_generator /en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Border-radius_generator /en-US/docs/Web/CSS/Tools/Box-shadow_generator /en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Box-shadow_generator -/en-US/docs/Web/CSS/Tools/ColorPicker_Tool /en-US/docs/Web/CSS/CSS_colors/Color_picker_tool +/en-US/docs/Web/CSS/Tools/ColorPicker_Tool /en-US/docs/Web/CSS/CSS_colors/Color_picker /en-US/docs/Web/CSS/Understanding_CSS_z-index /en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index /en-US/docs/Web/CSS/Understanding_CSS_z-index/Adding_z-index /en-US/docs/Web/CSS/CSS_positioned_layout/Using_z-index /en-US/docs/Web/CSS/Understanding_CSS_z-index/Stacking_and_float /en-US/docs/Web/CSS/CSS_positioned_layout/Stacking_floating_elements diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json index c53bd988bebd4b9..d703ccbee67c884 100644 --- a/files/en-us/_wikihistory.json +++ b/files/en-us/_wikihistory.json @@ -75899,7 +75899,7 @@ "chrisdavidmills" ] }, - "Web/CSS/CSS_colors/Color_picker_tool": { + "Web/CSS/CSS_colors/Color_picker": { "modified": "2020-10-30T22:49:32.596Z", "contributors": [ "td2014", diff --git a/files/en-us/learn_web_development/getting_started/your_first_website/what_will_your_website_look_like/index.md b/files/en-us/learn_web_development/getting_started/your_first_website/what_will_your_website_look_like/index.md index d2b7cd0a3bc5fcb..9a85935e63fe8bc 100644 --- a/files/en-us/learn_web_development/getting_started/your_first_website/what_will_your_website_look_like/index.md +++ b/files/en-us/learn_web_development/getting_started/your_first_website/what_will_your_website_look_like/index.md @@ -61,7 +61,7 @@ At this point, it's good to start putting together the content that will eventua Let's choose a background color for your page. -1. Go to [the Color Picker](/en-US/docs/Web/CSS/CSS_colors/Color_picker_tool) and find a color you like. +1. Go to [the Color Picker](/en-US/docs/Web/CSS/CSS_colors/Color_picker) and find a color you like. 2. When you click on a color, you'll see a strange six-character code like `#660066`. That's called a _hex code_ (short for hexadecimal), and represents your color. Copy the code down somewhere safe for now. ![Color-Picker-Tool on MDN Docs website with RGB, HSL, and HEX colors ](color-picker.png) diff --git a/files/en-us/web/css/color_value/color/index.md b/files/en-us/web/css/color_value/color/index.md index 7de55a5436329b4..2e090a9173edc56 100644 --- a/files/en-us/web/css/color_value/color/index.md +++ b/files/en-us/web/css/color_value/color/index.md @@ -383,7 +383,7 @@ The output is as follows: - {{CSSXref("color")}} property - [The `` data type](/en-US/docs/Web/CSS/color_value) for a list of all color notations - [Using relative colors](/en-US/docs/Web/CSS/CSS_colors/Relative_colors) -- [sRGB color picker and conversion tool](/en-US/docs/Web/CSS/CSS_colors/Color_picker_tool) +- [sRGB color picker and conversion tool](/en-US/docs/Web/CSS/CSS_colors/Color_picker) - [CSS colors](/en-US/docs/Web/CSS/CSS_colors) module - [`color-gamut`](/en-US/docs/Web/CSS/@media/color-gamut) media feature - [Wide Gamut Color in CSS with Display-p3](https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/) diff --git a/files/en-us/web/css/color_value/color_mixer_tool/classic.min.css b/files/en-us/web/css/color_value/color_mixer_tool/classic.min.css deleted file mode 100644 index 43ee029a5a73776..000000000000000 --- a/files/en-us/web/css/color_value/color_mixer_tool/classic.min.css +++ /dev/null @@ -1,2 +0,0 @@ -/*! Pickr 1.9.1 MIT | https://github.com/Simonwep/pickr */ -.pickr{position:relative;overflow:visible;transform:translateY(0)}.pickr *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}.pickr .pcr-button{position:relative;height:2em;width:2em;padding:.5em;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;border-radius:.15em;background:url("data:image/svg+xml;utf8, ") no-repeat center;background-size:0;transition:all .3s}.pickr .pcr-button::before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url("data:image/svg+xml;utf8, ");background-size:.5em;border-radius:.15em;z-index:-1}.pickr .pcr-button::before{z-index:initial}.pickr .pcr-button::after{position:absolute;content:"";top:0;left:0;height:100%;width:100%;transition:background .3s;background:var(--pcr-color);border-radius:.15em}.pickr .pcr-button.clear{background-size:70%}.pickr .pcr-button.clear::before{opacity:0}.pickr .pcr-button.clear:focus{box-shadow:0 0 0 1px rgba(255,255,255,.85),0 0 0 3px var(--pcr-color)}.pickr .pcr-button.disabled{cursor:not-allowed}.pickr *,.pcr-app *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}.pickr input:focus,.pickr input.pcr-active,.pickr button:focus,.pickr button.pcr-active,.pcr-app input:focus,.pcr-app input.pcr-active,.pcr-app button:focus,.pcr-app button.pcr-active{box-shadow:0 0 0 1px rgba(255,255,255,.85),0 0 0 3px var(--pcr-color)}.pickr .pcr-palette,.pickr .pcr-slider,.pcr-app .pcr-palette,.pcr-app .pcr-slider{transition:box-shadow .3s}.pickr .pcr-palette:focus,.pickr .pcr-slider:focus,.pcr-app .pcr-palette:focus,.pcr-app .pcr-slider:focus{box-shadow:0 0 0 1px rgba(255,255,255,.85),0 0 0 3px rgba(0,0,0,.25)}.pcr-app{position:fixed;display:flex;flex-direction:column;z-index:10000;border-radius:.1em;background:#fff;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03);left:0;top:0}.pcr-app.visible{transition:opacity .3s;visibility:visible;opacity:1}.pcr-app .pcr-swatches{display:flex;flex-wrap:wrap;margin-top:.75em}.pcr-app .pcr-swatches.pcr-last{margin:0}@supports(display: grid){.pcr-app .pcr-swatches{display:grid;align-items:center;grid-template-columns:repeat(auto-fit, 1.75em)}}.pcr-app .pcr-swatches>button{font-size:1em;position:relative;width:calc(1.75em - 5px);height:calc(1.75em - 5px);border-radius:.15em;cursor:pointer;margin:2.5px;flex-shrink:0;justify-self:center;transition:all .15s;overflow:hidden;background:rgba(0,0,0,0);z-index:1}.pcr-app .pcr-swatches>button::before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url("data:image/svg+xml;utf8, ");background-size:6px;border-radius:.15em;z-index:-1}.pcr-app .pcr-swatches>button::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:var(--pcr-color);border:1px solid rgba(0,0,0,.05);border-radius:.15em;box-sizing:border-box}.pcr-app .pcr-swatches>button:hover{filter:brightness(1.05)}.pcr-app .pcr-swatches>button:not(.pcr-active){box-shadow:none}.pcr-app .pcr-interaction{display:flex;flex-wrap:wrap;align-items:center;margin:0 -0.2em 0 -0.2em}.pcr-app .pcr-interaction>*{margin:0 .2em}.pcr-app .pcr-interaction input{letter-spacing:.07em;font-size:.75em;text-align:center;cursor:pointer;color:#75797e;background:#f1f3f4;border-radius:.15em;transition:all .15s;padding:.45em .5em;margin-top:.75em}.pcr-app .pcr-interaction input:hover{filter:brightness(0.975)}.pcr-app .pcr-interaction input:focus{box-shadow:0 0 0 1px rgba(255,255,255,.85),0 0 0 3px rgba(66,133,244,.75)}.pcr-app .pcr-interaction .pcr-result{color:#75797e;text-align:left;flex:1 1 8em;min-width:8em;transition:all .2s;border-radius:.15em;background:#f1f3f4;cursor:text}.pcr-app .pcr-interaction .pcr-result::-moz-selection{background:#4285f4;color:#fff}.pcr-app .pcr-interaction .pcr-result::selection{background:#4285f4;color:#fff}.pcr-app .pcr-interaction .pcr-type.active{color:#fff;background:#4285f4}.pcr-app .pcr-interaction .pcr-save,.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear{color:#fff;width:auto}.pcr-app .pcr-interaction .pcr-save,.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear{color:#fff}.pcr-app .pcr-interaction .pcr-save:hover,.pcr-app .pcr-interaction .pcr-cancel:hover,.pcr-app .pcr-interaction .pcr-clear:hover{filter:brightness(0.925)}.pcr-app .pcr-interaction .pcr-save{background:#4285f4}.pcr-app .pcr-interaction .pcr-clear,.pcr-app .pcr-interaction .pcr-cancel{background:#f44250}.pcr-app .pcr-interaction .pcr-clear:focus,.pcr-app .pcr-interaction .pcr-cancel:focus{box-shadow:0 0 0 1px rgba(255,255,255,.85),0 0 0 3px rgba(244,66,80,.75)}.pcr-app .pcr-selection .pcr-picker{position:absolute;height:18px;width:18px;border:2px solid #fff;border-radius:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none}.pcr-app .pcr-selection .pcr-color-palette,.pcr-app .pcr-selection .pcr-color-chooser,.pcr-app .pcr-selection .pcr-color-opacity{position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:flex;flex-direction:column;cursor:grab;cursor:-webkit-grab}.pcr-app .pcr-selection .pcr-color-palette:active,.pcr-app .pcr-selection .pcr-color-chooser:active,.pcr-app .pcr-selection .pcr-color-opacity:active{cursor:grabbing;cursor:-webkit-grabbing}.pcr-app[data-theme=classic]{width:28.5em;max-width:95vw;padding:.8em}.pcr-app[data-theme=classic] .pcr-selection{display:flex;justify-content:space-between;flex-grow:1}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview{position:relative;z-index:1;width:2em;display:flex;flex-direction:column;justify-content:space-between;margin-right:.75em}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview::before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url("data:image/svg+xml;utf8, ");background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-last-color{cursor:pointer;border-radius:.15em .15em 0 0;z-index:2}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-current-color{border-radius:0 0 .15em .15em}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-last-color,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-current-color{background:var(--pcr-color);width:100%;height:50%}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette{width:100%;height:8em;z-index:1}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette .pcr-palette{flex-grow:1;border-radius:.15em}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette .pcr-palette::before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url("data:image/svg+xml;utf8, ");background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity{margin-left:.75em}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser .pcr-picker,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity .pcr-picker{left:50%;transform:translateX(-50%)}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser .pcr-slider,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity .pcr-slider{width:8px;flex-grow:1;border-radius:50em}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser .pcr-slider{background:linear-gradient(to bottom, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(0, 100%, 50%))}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity .pcr-slider{background:linear-gradient(to bottom, transparent, black),url("data:image/svg+xml;utf8, ");background-size:100%,50%} \ No newline at end of file diff --git a/files/en-us/web/css/color_value/hsl/index.md b/files/en-us/web/css/color_value/hsl/index.md index 313ed900c7e2e37..938fde36ff51c56 100644 --- a/files/en-us/web/css/color_value/hsl/index.md +++ b/files/en-us/web/css/color_value/hsl/index.md @@ -401,7 +401,7 @@ div.legacyHSLA { - [`lch()`](/en-US/docs/Web/CSS/color_value/lch) and [`hwb()`](/en-US/docs/Web/CSS/color_value/hwb) color functions - [Hue interpolation in `color-mix()`](/en-US/docs/Web/CSS/color_value/color-mix#using_hue_interpolation_in_color-mix) - [List of all color notations](/en-US/docs/Web/CSS/color_value) -- [sRGB color picker and conversion tool](/en-US/docs/Web/CSS/CSS_colors/Color_picker_tool) +- [sRGB color picker and conversion tool](/en-US/docs/Web/CSS/CSS_colors/Color_picker) - [Using relative colors](/en-US/docs/Web/CSS/CSS_colors/Relative_colors) - [CSS colors](/en-US/docs/Web/CSS/CSS_colors) module - [Color picker tool](https://apps.colorjs.io/picker/) by Lea Verou diff --git a/files/en-us/web/css/color_value/hwb/index.md b/files/en-us/web/css/color_value/hwb/index.md index 8e899c0d807880d..68b25090d6b9a70 100644 --- a/files/en-us/web/css/color_value/hwb/index.md +++ b/files/en-us/web/css/color_value/hwb/index.md @@ -275,7 +275,7 @@ The output is as follows: ## See also - {{CSSXref("<color>")}}: For a list of all color notations -- [Color picker and conversion tool](/en-US/docs/Web/CSS/CSS_colors/Color_picker_tool) +- [Color picker and conversion tool](/en-US/docs/Web/CSS/CSS_colors/Color_picker) - [Using relative colors](/en-US/docs/Web/CSS/CSS_colors/Relative_colors) - [CSS colors](/en-US/docs/Web/CSS/CSS_colors) module - {{CSSXref("<hue>")}}: the data type representing a hue angle of a color diff --git a/files/en-us/web/css/color_value/rgb/index.md b/files/en-us/web/css/color_value/rgb/index.md index 20281ddd9d92b34..642685e7a4e550f 100644 --- a/files/en-us/web/css/color_value/rgb/index.md +++ b/files/en-us/web/css/color_value/rgb/index.md @@ -343,6 +343,6 @@ div.comma-separated { ## See also - The {{CSSXref("<color>")}} data type for a list of all color notations -- [sRGB color picker and conversion tool](/en-US/docs/Web/CSS/CSS_colors/Color_picker_tool) +- [sRGB color picker and conversion tool](/en-US/docs/Web/CSS/CSS_colors/Color_picker) - [Using relative colors](/en-US/docs/Web/CSS/CSS_colors/Relative_colors) - [CSS colors](/en-US/docs/Web/CSS/CSS_colors) module diff --git a/files/en-us/web/css/css_colors/color_mixer/classic.min.css b/files/en-us/web/css/css_colors/color_mixer/classic.min.css new file mode 100644 index 000000000000000..1c8a2f239dea562 --- /dev/null +++ b/files/en-us/web/css/css_colors/color_mixer/classic.min.css @@ -0,0 +1,2 @@ +/*! Pickr 1.9.1 MIT | https://github.com/Simonwep/pickr */ +.pickr{position:relative;overflow:visible;transform:translateY(0)}.pickr *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}.pickr .pcr-button{position:relative;height:2em;width:2em;padding:.5em;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;border-radius:.15em;background:url("data:image/svg+xml;utf8, ") no-repeat center;background-size:0;transition:all .3s}.pickr .pcr-button::before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url("data:image/svg+xml;utf8, ");background-size:.5em;border-radius:.15em;z-index:-1}.pickr .pcr-button::before{z-index:initial}.pickr .pcr-button::after{position:absolute;content:"";top:0;left:0;height:100%;width:100%;transition:background .3s;background:var(--pcr-color);border-radius:.15em}.pickr .pcr-button.clear{background-size:70%}.pickr .pcr-button.clear::before{opacity:0}.pickr .pcr-button.clear:focus{box-shadow:0 0 0 1px rgba(255,255,255,.85),0 0 0 3px var(--pcr-color)}.pickr .pcr-button.disabled{cursor:not-allowed}.pickr *,.pcr-app *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}.pickr input:focus,.pickr input.pcr-active,.pickr button:focus,.pickr button.pcr-active,.pcr-app input:focus,.pcr-app input.pcr-active,.pcr-app button:focus,.pcr-app button.pcr-active{box-shadow:0 0 0 1px rgba(255,255,255,.85),0 0 0 3px var(--pcr-color)}.pickr .pcr-palette,.pickr .pcr-slider,.pcr-app .pcr-palette,.pcr-app .pcr-slider{transition:box-shadow .3s}.pickr .pcr-palette:focus,.pickr .pcr-slider:focus,.pcr-app .pcr-palette:focus,.pcr-app .pcr-slider:focus{box-shadow:0 0 0 1px rgba(255,255,255,.85),0 0 0 3px rgba(0,0,0,.25)}.pcr-app{border: 1px solid black;position:fixed;display:flex;flex-direction:column;z-index:10000;border-radius:.1em;background:#fff;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03);left:0;top:0}.pcr-app.visible{transition:opacity .3s;visibility:visible;opacity:1}.pcr-app .pcr-swatches{display:flex;flex-wrap:wrap;margin-top:.75em}.pcr-app .pcr-swatches.pcr-last{margin:0}@supports(display: grid){.pcr-app .pcr-swatches{display:grid;align-items:center;grid-template-columns:repeat(auto-fit, 1.75em)}}.pcr-app .pcr-swatches>button{font-size:1em;position:relative;width:calc(1.75em - 5px);height:calc(1.75em - 5px);border-radius:.15em;cursor:pointer;margin:2.5px;flex-shrink:0;justify-self:center;transition:all .15s;overflow:hidden;background:rgba(0,0,0,0);z-index:1}.pcr-app .pcr-swatches>button::before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url("data:image/svg+xml;utf8, ");background-size:6px;border-radius:.15em;z-index:-1}.pcr-app .pcr-swatches>button::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:var(--pcr-color);border:1px solid rgba(0,0,0,.05);border-radius:.15em;box-sizing:border-box}.pcr-app .pcr-swatches>button:hover{filter:brightness(1.05)}.pcr-app .pcr-swatches>button:not(.pcr-active){box-shadow:none}.pcr-app .pcr-interaction{display:flex;flex-wrap:wrap;align-items:center;margin:0 -0.2em 0 -0.2em}.pcr-app .pcr-interaction>*{margin:0 .2em}.pcr-app .pcr-interaction input{letter-spacing:.07em;font-size:.75em;text-align:center;cursor:pointer;color:#75797e;background:#f1f3f4;border-radius:.15em;transition:all .15s;padding:.45em .5em;margin-top:.75em}.pcr-app .pcr-interaction input:hover{filter:brightness(0.975)}.pcr-app .pcr-interaction input:focus{box-shadow:0 0 0 1px rgba(255,255,255,.85),0 0 0 3px rgba(66,133,244,.75)}.pcr-app .pcr-interaction .pcr-result{color:#75797e;text-align:left;flex:1 1 8em;min-width:8em;transition:all .2s;border-radius:.15em;background:#f1f3f4;cursor:text}.pcr-app .pcr-interaction .pcr-result::-moz-selection{background:#4285f4;color:#fff}.pcr-app .pcr-interaction .pcr-result::selection{background:#4285f4;color:#fff}.pcr-app .pcr-interaction .pcr-type.active{color:#fff;background:#4285f4}.pcr-app .pcr-interaction .pcr-save,.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear{color:#fff;width:auto}.pcr-app .pcr-interaction .pcr-save,.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear{color:#fff}.pcr-app .pcr-interaction .pcr-save:hover,.pcr-app .pcr-interaction .pcr-cancel:hover,.pcr-app .pcr-interaction .pcr-clear:hover{filter:brightness(0.925)}.pcr-app .pcr-interaction .pcr-save{background:#4285f4}.pcr-app .pcr-interaction .pcr-clear,.pcr-app .pcr-interaction .pcr-cancel{background:#f44250}.pcr-app .pcr-interaction .pcr-clear:focus,.pcr-app .pcr-interaction .pcr-cancel:focus{box-shadow:0 0 0 1px rgba(255,255,255,.85),0 0 0 3px rgba(244,66,80,.75)}.pcr-app .pcr-selection .pcr-picker{position:absolute;height:18px;width:18px;border:2px solid #fff;border-radius:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none}.pcr-app .pcr-selection .pcr-color-palette,.pcr-app .pcr-selection .pcr-color-chooser,.pcr-app .pcr-selection .pcr-color-opacity{position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:flex;flex-direction:column;cursor:grab;cursor:-webkit-grab}.pcr-app .pcr-selection .pcr-color-palette:active,.pcr-app .pcr-selection .pcr-color-chooser:active,.pcr-app .pcr-selection .pcr-color-opacity:active{cursor:grabbing;cursor:-webkit-grabbing}.pcr-app[data-theme=classic]{width:28.5em;max-width:95vw;padding:.8em}.pcr-app[data-theme=classic] .pcr-selection{display:flex;justify-content:space-between;flex-grow:1}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview{position:relative;z-index:1;width:2em;display:flex;flex-direction:column;justify-content:space-between;margin-right:.75em}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview::before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url("data:image/svg+xml;utf8, ");background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-last-color{cursor:pointer;border-radius:.15em .15em 0 0;z-index:2}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-current-color{border-radius:0 0 .15em .15em}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-last-color,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-current-color{background:var(--pcr-color);width:100%;height:50%}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette{width:100%;height:8em;z-index:1}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette .pcr-palette{flex-grow:1;border-radius:.15em}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette .pcr-palette::before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url("data:image/svg+xml;utf8, ");background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity{margin-left:.75em}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser .pcr-picker,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity .pcr-picker{left:50%;transform:translateX(-50%)}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser .pcr-slider,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity .pcr-slider{width:8px;flex-grow:1;border-radius:50em}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser .pcr-slider{background:linear-gradient(to bottom, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(0, 100%, 50%))}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity .pcr-slider{background:linear-gradient(to bottom, transparent, black),url("data:image/svg+xml;utf8, ");background-size:100%,50%} diff --git a/files/en-us/web/css/color_value/color_mixer_tool/index.md b/files/en-us/web/css/css_colors/color_mixer/index.md similarity index 99% rename from files/en-us/web/css/color_value/color_mixer_tool/index.md rename to files/en-us/web/css/css_colors/color_mixer/index.md index 410e2f826c9f2cf..143879d94f392eb 100644 --- a/files/en-us/web/css/color_value/color_mixer_tool/index.md +++ b/files/en-us/web/css/css_colors/color_mixer/index.md @@ -1,6 +1,6 @@ --- -title: Color mixer tool -slug: Web/CSS/color_value/Color_mixer_tool +title: Color mixer +slug: Web/CSS/CSS_colors/Color_mixer page-type: guide sidebar: cssref --- @@ -10,6 +10,7 @@ This tool lets you mix two colors, `color-one` and `color-two`, using the [`colo ```html hidden live-sample___color-mixer +

Color mixer

Click on 'color-one' and 'color-two' to select colors.

diff --git a/files/en-us/web/css/color_value/color_mixer_tool/pickr.es5.min.js b/files/en-us/web/css/css_colors/color_mixer/pickr.es5.min.js similarity index 100% rename from files/en-us/web/css/color_value/color_mixer_tool/pickr.es5.min.js rename to files/en-us/web/css/css_colors/color_mixer/pickr.es5.min.js diff --git a/files/en-us/web/css/css_colors/color_picker_tool/index.md b/files/en-us/web/css/css_colors/color_picker/index.md similarity index 96% rename from files/en-us/web/css/css_colors/color_picker_tool/index.md rename to files/en-us/web/css/css_colors/color_picker/index.md index c084b4ff45b2ce6..8ae597b1a74574e 100644 --- a/files/en-us/web/css/css_colors/color_picker_tool/index.md +++ b/files/en-us/web/css/css_colors/color_picker/index.md @@ -1,6 +1,6 @@ --- -title: Color picker tool -slug: Web/CSS/CSS_colors/Color_picker_tool +title: Color picker +slug: Web/CSS/CSS_colors/Color_picker page-type: guide sidebar: cssref --- diff --git a/files/en-us/web/css/css_colors/color_values/index.md b/files/en-us/web/css/css_colors/color_values/index.md index fefb91f2a3dae28..ab3a5ef6081f5c0 100644 --- a/files/en-us/web/css/css_colors/color_values/index.md +++ b/files/en-us/web/css/css_colors/color_values/index.md @@ -526,7 +526,7 @@ For example, if you wanted to show the `display-p3 0 0 1` color, which is outsid Understanding `color()` is important when it comes to relative colors, discussed next. The older sRGB color notations discussed above — `hsl()`, `hwb()`, and `rgb()`— do not express the full spectrum of visible colors, while the `color()` function supports a much wider color gamut. As a result, when using the older functions types to define relative colors, the output color returned by querying {{domxref("HTMLElement.style")}} property or the {{domxref("CSSStyleDeclaration.getPropertyValue()")}} method will be a `color(srgb ...)` value. -To see an example of converting the `hsl()`, `hwb()`, and `rgb()` color functions to `color()` in the `srgb` color space, check out our [color picker tool](/en-US/docs/Web/CSS/CSS_colors/Color_picker_tool). +To see an example of converting the `hsl()`, `hwb()`, and `rgb()` color functions to `color()` in the `srgb` color space, check out our [color picker tool](/en-US/docs/Web/CSS/CSS_colors/Color_picker). ### Relative colors diff --git a/files/en-us/web/css/css_colors/index.md b/files/en-us/web/css/css_colors/index.md index 573f8885d127f36..1f6e208f347296e 100644 --- a/files/en-us/web/css/css_colors/index.md +++ b/files/en-us/web/css/css_colors/index.md @@ -83,7 +83,7 @@ The CSS color module also introduces the `CSSColorProfileRule` interface. Curren - : Color theory and resources, including finding the right colors to create an accessible color palette, contrast, and printing in color. - [Using relative colors](/en-US/docs/Web/CSS/CSS_colors/Relative_colors) - : This article explains relative CSS color syntax, shows what the different options are, and looks at some illustrative examples. -- [Color picker tool](/en-US/docs/Web/CSS/CSS_colors/Color_picker_tool) +- [Color picker](/en-US/docs/Web/CSS/CSS_colors/Color_picker) - : A tool that lets you pick a color in the sRGB color space and converts it between various CSS color formats, helping you understand the syntax of the different color notations. - [Understanding color and luminance](/en-US/docs/Web/Accessibility/Guides/Colors_and_Luminance) - : Color perception and using colors with color insensitive (color blind) users, reduced vision users and users with vestibular disorders or other neurological disorders in mind. diff --git a/files/sidebars/cssref.yaml b/files/sidebars/cssref.yaml index 5ba586550698a7f..7c78cad99204dcb 100644 --- a/files/sidebars/cssref.yaml +++ b/files/sidebars/cssref.yaml @@ -349,12 +349,12 @@ sidebar: - type: section title: Tools - children: - - /Web/CSS/CSS_colors/Color_picker_tool - - /Web/CSS/CSS_backgrounds_and_borders/Box-shadow_generator - /Web/CSS/CSS_backgrounds_and_borders/Border-image_generator - /Web/CSS/CSS_backgrounds_and_borders/Border-radius_generator + - /Web/CSS/CSS_backgrounds_and_borders/Box-shadow_generator + - /Web/CSS/CSS_colors/Color_mixer + - /Web/CSS/CSS_colors/Color_picker - /Web/CSS/CSS_shapes/Shape_generator - - /Web/CSS/color_value/Color_mixer_tool l10n: de: Beginners: Einsteiger-Tutorials From c338b7425cd5b43a364d2569d04fa3298ba874e9 Mon Sep 17 00:00:00 2001 From: OnkarRuikar <87750369+OnkarRuikar@users.noreply.github.com> Date: Sun, 14 Sep 2025 13:22:34 +0530 Subject: [PATCH 4/9] output in all color spaces, no external libs, and more --- .vscode/dictionaries/code-entities.txt | 1 + .vscode/dictionaries/ignore-list.txt | 3 + .../css_colors/color_mixer/classic.min.css | 2 - .../web/css/css_colors/color_mixer/index.md | 822 ++++++++++++++---- .../css_colors/color_mixer/pickr.es5.min.js | 2 - 5 files changed, 636 insertions(+), 194 deletions(-) delete mode 100644 files/en-us/web/css/css_colors/color_mixer/classic.min.css delete mode 100644 files/en-us/web/css/css_colors/color_mixer/pickr.es5.min.js diff --git a/.vscode/dictionaries/code-entities.txt b/.vscode/dictionaries/code-entities.txt index 372a2c8ce370fd7..aeaed2ab3fd0c50 100644 --- a/.vscode/dictionaries/code-entities.txt +++ b/.vscode/dictionaries/code-entities.txt @@ -384,6 +384,7 @@ longtask lowdelay lowp lquote +LRGB ltrh makemigrations mathbb diff --git a/.vscode/dictionaries/ignore-list.txt b/.vscode/dictionaries/ignore-list.txt index c917ff7a69435db..b9874c637d256a7 100644 --- a/.vscode/dictionaries/ignore-list.txt +++ b/.vscode/dictionaries/ignore-list.txt @@ -161,9 +161,11 @@ Graece gubergren harborside hellonode +HEXA HEXDIG howtoplay HUD5767ghtyfyr4536dh45dg45dg3 +HWBA idbkeyrange IHdhcyBncmVhdCE innerht.ml @@ -323,6 +325,7 @@ Whereami Whereshire wisi Wookie +XYZD xyzzy YOUREXT YsAIAAAA-QG4G6kCMAMBAAAAAAAoK diff --git a/files/en-us/web/css/css_colors/color_mixer/classic.min.css b/files/en-us/web/css/css_colors/color_mixer/classic.min.css deleted file mode 100644 index 1c8a2f239dea562..000000000000000 --- a/files/en-us/web/css/css_colors/color_mixer/classic.min.css +++ /dev/null @@ -1,2 +0,0 @@ -/*! Pickr 1.9.1 MIT | https://github.com/Simonwep/pickr */ -.pickr{position:relative;overflow:visible;transform:translateY(0)}.pickr *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}.pickr .pcr-button{position:relative;height:2em;width:2em;padding:.5em;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;border-radius:.15em;background:url("data:image/svg+xml;utf8, ") no-repeat center;background-size:0;transition:all .3s}.pickr .pcr-button::before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url("data:image/svg+xml;utf8, ");background-size:.5em;border-radius:.15em;z-index:-1}.pickr .pcr-button::before{z-index:initial}.pickr .pcr-button::after{position:absolute;content:"";top:0;left:0;height:100%;width:100%;transition:background .3s;background:var(--pcr-color);border-radius:.15em}.pickr .pcr-button.clear{background-size:70%}.pickr .pcr-button.clear::before{opacity:0}.pickr .pcr-button.clear:focus{box-shadow:0 0 0 1px rgba(255,255,255,.85),0 0 0 3px var(--pcr-color)}.pickr .pcr-button.disabled{cursor:not-allowed}.pickr *,.pcr-app *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}.pickr input:focus,.pickr input.pcr-active,.pickr button:focus,.pickr button.pcr-active,.pcr-app input:focus,.pcr-app input.pcr-active,.pcr-app button:focus,.pcr-app button.pcr-active{box-shadow:0 0 0 1px rgba(255,255,255,.85),0 0 0 3px var(--pcr-color)}.pickr .pcr-palette,.pickr .pcr-slider,.pcr-app .pcr-palette,.pcr-app .pcr-slider{transition:box-shadow .3s}.pickr .pcr-palette:focus,.pickr .pcr-slider:focus,.pcr-app .pcr-palette:focus,.pcr-app .pcr-slider:focus{box-shadow:0 0 0 1px rgba(255,255,255,.85),0 0 0 3px rgba(0,0,0,.25)}.pcr-app{border: 1px solid black;position:fixed;display:flex;flex-direction:column;z-index:10000;border-radius:.1em;background:#fff;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Helvetica Neue",Arial,sans-serif;box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03);left:0;top:0}.pcr-app.visible{transition:opacity .3s;visibility:visible;opacity:1}.pcr-app .pcr-swatches{display:flex;flex-wrap:wrap;margin-top:.75em}.pcr-app .pcr-swatches.pcr-last{margin:0}@supports(display: grid){.pcr-app .pcr-swatches{display:grid;align-items:center;grid-template-columns:repeat(auto-fit, 1.75em)}}.pcr-app .pcr-swatches>button{font-size:1em;position:relative;width:calc(1.75em - 5px);height:calc(1.75em - 5px);border-radius:.15em;cursor:pointer;margin:2.5px;flex-shrink:0;justify-self:center;transition:all .15s;overflow:hidden;background:rgba(0,0,0,0);z-index:1}.pcr-app .pcr-swatches>button::before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url("data:image/svg+xml;utf8, ");background-size:6px;border-radius:.15em;z-index:-1}.pcr-app .pcr-swatches>button::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:var(--pcr-color);border:1px solid rgba(0,0,0,.05);border-radius:.15em;box-sizing:border-box}.pcr-app .pcr-swatches>button:hover{filter:brightness(1.05)}.pcr-app .pcr-swatches>button:not(.pcr-active){box-shadow:none}.pcr-app .pcr-interaction{display:flex;flex-wrap:wrap;align-items:center;margin:0 -0.2em 0 -0.2em}.pcr-app .pcr-interaction>*{margin:0 .2em}.pcr-app .pcr-interaction input{letter-spacing:.07em;font-size:.75em;text-align:center;cursor:pointer;color:#75797e;background:#f1f3f4;border-radius:.15em;transition:all .15s;padding:.45em .5em;margin-top:.75em}.pcr-app .pcr-interaction input:hover{filter:brightness(0.975)}.pcr-app .pcr-interaction input:focus{box-shadow:0 0 0 1px rgba(255,255,255,.85),0 0 0 3px rgba(66,133,244,.75)}.pcr-app .pcr-interaction .pcr-result{color:#75797e;text-align:left;flex:1 1 8em;min-width:8em;transition:all .2s;border-radius:.15em;background:#f1f3f4;cursor:text}.pcr-app .pcr-interaction .pcr-result::-moz-selection{background:#4285f4;color:#fff}.pcr-app .pcr-interaction .pcr-result::selection{background:#4285f4;color:#fff}.pcr-app .pcr-interaction .pcr-type.active{color:#fff;background:#4285f4}.pcr-app .pcr-interaction .pcr-save,.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear{color:#fff;width:auto}.pcr-app .pcr-interaction .pcr-save,.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear{color:#fff}.pcr-app .pcr-interaction .pcr-save:hover,.pcr-app .pcr-interaction .pcr-cancel:hover,.pcr-app .pcr-interaction .pcr-clear:hover{filter:brightness(0.925)}.pcr-app .pcr-interaction .pcr-save{background:#4285f4}.pcr-app .pcr-interaction .pcr-clear,.pcr-app .pcr-interaction .pcr-cancel{background:#f44250}.pcr-app .pcr-interaction .pcr-clear:focus,.pcr-app .pcr-interaction .pcr-cancel:focus{box-shadow:0 0 0 1px rgba(255,255,255,.85),0 0 0 3px rgba(244,66,80,.75)}.pcr-app .pcr-selection .pcr-picker{position:absolute;height:18px;width:18px;border:2px solid #fff;border-radius:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none}.pcr-app .pcr-selection .pcr-color-palette,.pcr-app .pcr-selection .pcr-color-chooser,.pcr-app .pcr-selection .pcr-color-opacity{position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:flex;flex-direction:column;cursor:grab;cursor:-webkit-grab}.pcr-app .pcr-selection .pcr-color-palette:active,.pcr-app .pcr-selection .pcr-color-chooser:active,.pcr-app .pcr-selection .pcr-color-opacity:active{cursor:grabbing;cursor:-webkit-grabbing}.pcr-app[data-theme=classic]{width:28.5em;max-width:95vw;padding:.8em}.pcr-app[data-theme=classic] .pcr-selection{display:flex;justify-content:space-between;flex-grow:1}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview{position:relative;z-index:1;width:2em;display:flex;flex-direction:column;justify-content:space-between;margin-right:.75em}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview::before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url("data:image/svg+xml;utf8, ");background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-last-color{cursor:pointer;border-radius:.15em .15em 0 0;z-index:2}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-current-color{border-radius:0 0 .15em .15em}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-last-color,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-preview .pcr-current-color{background:var(--pcr-color);width:100%;height:50%}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette{width:100%;height:8em;z-index:1}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette .pcr-palette{flex-grow:1;border-radius:.15em}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-palette .pcr-palette::before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url("data:image/svg+xml;utf8, ");background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity{margin-left:.75em}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser .pcr-picker,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity .pcr-picker{left:50%;transform:translateX(-50%)}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser .pcr-slider,.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity .pcr-slider{width:8px;flex-grow:1;border-radius:50em}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-chooser .pcr-slider{background:linear-gradient(to bottom, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(0, 100%, 50%))}.pcr-app[data-theme=classic] .pcr-selection .pcr-color-opacity .pcr-slider{background:linear-gradient(to bottom, transparent, black),url("data:image/svg+xml;utf8, ");background-size:100%,50%} diff --git a/files/en-us/web/css/css_colors/color_mixer/index.md b/files/en-us/web/css/css_colors/color_mixer/index.md index 143879d94f392eb..d7a3adebabe5be7 100644 --- a/files/en-us/web/css/css_colors/color_mixer/index.md +++ b/files/en-us/web/css/css_colors/color_mixer/index.md @@ -8,31 +8,27 @@ sidebar: cssref This tool lets you mix two colors, `color-one` and `color-two`, using the [`color-mix()`](/en-US/docs/Web/CSS/color_value/color-mix) function. The source colors are shown on the outside, and the mixed color is shown in the middle. You can change colors by clicking on them and choosing a new color using the resulting color picker. You can also change the percentage of each color included in the mix using the sliders, and the color space using the drop-down menu. ```html hidden live-sample___color-mixer - - -

Color mixer

Click on 'color-one' and 'color-two' to select colors.

- +
color-one
mixed-color
- - - -
- - - - +
color-two
+ +
+ +
+ +
@@ -44,21 +40,20 @@ This tool lets you mix two colors, `color-one` and `color-two`, using the [`colo -
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Following is the output color in various color spaces: +
Hexadecimal
RGB
color(srgb)
HSL
HWB
Lab
Oklab
LCH
OkLCh
XYZ D50
XYZ D65
``` ```css hidden live-sample___color-mixer +#picker-dialog[open] { + position: fixed; + top: 30%; + z-index: 100; + padding: 1rem; + width: 70vw; + background: #ddd; + display: flex; + flex-flow: column; + align-items: center; +} + +#picker-dialog #color-opacity { + width: 200px; +} + +#picker-dialog > div:first-child { + font-weight: bold; + margin-bottom: 1rem; +} + +#picker-dialog > div { + width: max-content; + margin: 0.4rem auto; + white-space: nowrap; +} + +#picker-dialog #color-text { + width: 200px; +} + +#picker-dialog label { + margin: 1rem 0; +} + +#picker-dialog button { + width: 100px; + margin-top: 1rem; +} + +dialog#picker-dialog table { + width: fit-content; +} + #color-mixer { margin: 0.5rem; font-family: sans-serif; display: grid; grid-template-columns: 150px 1fr 1fr 150px; grid-template-areas: - "header header header header" - "text text text text" - "color-one-text mix-text mix-text color-two-text" - "color-picker-one mix-output mix-output color-picker-two" - "mix-output-text mix-output-text mix-output-text mix-output-text" - "percent-one percent-one percent-two percent-two" - "color-space-label color-space interpolation-label interpolation"; + "header header header header" + "text text text text" + "color-one-label mix-label mix-label color-two-label" + "color-background color-background color-background color-background" + "percent-one percent-one percent-two percent-two" + "color-space-label color-space interpolation-label interpolation" + "mix-output-text mix-output-text mix-output-text mix-output-text"; } #color-mixer > * { @@ -100,54 +218,71 @@ This tool lets you mix two colors, `color-one` and `color-two`, using the [`colo } #color-mixer > :nth-child(3) { - grid-area: color-one-text; + grid-area: color-one-label; } #color-mixer > :nth-child(4) { - grid-area: mix-text; + grid-area: mix-label; } #color-mixer > :nth-child(5) { - grid-area: color-two-text; + grid-area: color-two-label; } #color-mixer > :nth-child(6) { - grid-area: color-picker-one; - width: 100% !important; - height: 100px !important; + grid-area: color-background; + background: + linear-gradient( + 0deg, + transparent 0 38%, + 47%, + rgb(0 0 0 / 0.7) 50%, + white 50% 100% + ), + conic-gradient( + black 0 90deg, + transparent 90deg 180deg, + black 180deg 270deg, + transparent 270deg 360deg + ); + background-size: + 100% 100%, + 20px 20px; + display: flex; + align-items: center; + margin: 0; + padding: 0; + border-radius: 10% 10% 10% 10%; +} + +#color-one { + height: 100px; + flex: 1 1 100%; border-radius: 20% 0 0 20%; cursor: pointer; border: none; z-index: 1; box-shadow: -5px 5px 5px grey; + background-color: #ff7f50; } -#color-mixer > :nth-child(7) { - grid-area: mix-output; - width: 100%; +#mixed-color { + flex: 2 0.7 100%; height: 100px; } -#color-mixer > :nth-child(8) { - grid-area: color-picker-two; - width: 100%; +#color-two { height: 100px; + flex: 1 1 100%; border-radius: 0 20% 20% 0; cursor: pointer; border: none; z-index: 1; box-shadow: 5px 5px 5px grey; + background-color: #00ffff; } -#color-mixer > :nth-child(9) { - grid-area: mix-output-text; - margin: 1rem auto auto 1rem; - font-weight: bold; - font-size: 0.8rem; - height: 2.5rem; -} - -#color-mixer > :nth-child(10) { +#color-mixer > :nth-child(7) { grid-area: percent-one; width: 100%; display: flex; @@ -159,32 +294,40 @@ This tool lets you mix two colors, `color-one` and `color-two`, using the [`colo text-align: end; } -#color-mixer > :nth-child(11) { +#color-mixer > :nth-child(8) { grid-area: percent-two; width: 100%; display: flex; } -#color-mixer > :nth-child(12) { +#color-mixer > :nth-child(9) { grid-area: color-space-label; margin: 0.5rem 0 0 auto; } -#color-mixer > :nth-child(13) { +#color-mixer > :nth-child(10) { grid-area: color-space; margin: 0.5rem auto 0 1rem; } -#color-mixer > :nth-child(14) { +#color-mixer > :nth-child(11) { grid-area: interpolation-label; margin: 0.5rem 0 0 auto; } -#color-mixer > :nth-child(15) { +#color-mixer > :nth-child(12) { grid-area: interpolation; margin: 0.5rem auto 0 1rem; } +#color-mixer > :nth-child(13) { + grid-area: mix-output-text; + margin: 1rem auto auto 1rem; + font-weight: bold; + font-size: 0.8rem; + height: 2.5rem; +} + input[type="range"] { width: 80%; } @@ -198,10 +341,34 @@ label { outline: 2px dashed purple; outline-offset: 1px; } + +table { + width: 100%; +} +td, +th { + padding: 3px 15px; +} +th { + background-color: #ededed; +} +td { + background-color: #dedede; + font-family: monospace; + padding: 0; +} + +#output-colors th { + padding-right: 0; + width: 20%; +} + +#output-colors td button { + margin-right: 0.4rem; +} ``` ```js hidden live-sample___color-mixer -const polarColorSpaces = ["hsl", "hwb", "lch", "oklch"]; const root = document.querySelector(":root"); const colorSpace = document.getElementById("color-space"); @@ -210,127 +377,272 @@ const interpolationMethodLabel = document.getElementById( "interpolation-method-label", ); -const colorOne = document.getElementById("color-one"); -const colorTwo = document.getElementById("color-two"); -const mixedColor = document.getElementById("mixed-color"); +const colorOneButton = document.getElementById("color-one"); +const colorTwoButton = document.getElementById("color-two"); +const mixedColorDiv = document.getElementById("mixed-color"); const mixedOutputText = document.getElementById("mix-output-text"); -const colorTextOne = document.getElementById("color-one-text"); -const colorTextTwo = document.getElementById("color-two-text"); - const percentageOneLabel = document.getElementById("percentage-one-label"); const percentageTwoLabel = document.getElementById("percentage-two-label"); -const percentageOne = document.getElementById("percentage-one"); -const percentageTwo = document.getElementById("percentage-two"); +const percentageOneSlider = document.getElementById("percentage-one"); +const percentageTwoSlider = document.getElementById("percentage-two"); + +// pop up dialog elements +const pickerDialog = document.getElementById("picker-dialog"); +const colorTextInput = document.getElementById("color-text"); +const colorInput = document.getElementById("color-input"); +const colorOpacitySlider = document.getElementById("color-opacity"); +const pickerOkButton = document.getElementById("picker-ok-button"); + +// color output spans +const hexOutput = document.querySelector("#hex td > span"); +const colorFunctionOutput = document.querySelector("#color-function td > span"); +const rgbFunctionOutput = document.querySelector("#rgb-function td > span"); +const hslFunctionOutput = document.querySelector("#hsl-function td > span"); +const hwbFunctionOutput = document.querySelector("#hwb-function td > span"); +const labFunctionOutput = document.querySelector("#lab-function td > span"); +const oklabFunctionOutput = document.querySelector("#oklab-function td > span"); +const lchFunctionOutput = document.querySelector("#lch-function td > span"); +const oklchFunctionOutput = document.querySelector("#oklch-function td > span"); +const xyzD50FunctionOutput = document.querySelector( + "#xyz-d50-function td > span", +); +const xyzD65FunctionOutput = document.querySelector( + "#xyz-d65-function td > span", +); -let pickerOne, pickerTwo; +const LRGB_LMS_MATRIX = [ + [0.4122214708, 0.5363325363, 0.0514459929], + [0.2119034982, 0.6806995451, 0.1073969566], + [0.0883024619, 0.2817188376, 0.6299787005], +]; + +const LMS_LAB_MATRIX = [ + [+0.2104542553, +0.793617785, -0.0040720468], + [+1.9779984951, -2.428592205, +0.4505937099], + [+0.0259040371, +0.7827717662, -0.808675766], +]; + +// srgb-linear to xyz-d50 +// matrix taken from http://www.brucelindbloom.com/index.html?Eqn_RGB_to_XYZ.html +const LRGB_XYZ_D50_MATRIX = [ + [0.4360747, 0.3850649, 0.1430804], + [0.2225045, 0.7168786, 0.0606169], + [0.0139322, 0.0971045, 0.7141733], +]; + +// srgb-linear to xyz-d65 +// matrix taken from http://www.brucelindbloom.com/index.html?Eqn_RGB_to_XYZ.html +const LRGB_XYZ_D65_MATRIX = [ + [0.4124564, 0.3575761, 0.1804375], + [0.2126729, 0.7151522, 0.072175], + [0.0193339, 0.119192, 0.9503041], +]; -function init() { - const pickerOptions = { - el: ".color-one", - theme: "classic", - useAsButton: true, - default: "#ff7f50", - position: "bottom-middle", - components: { - preview: true, - opacity: true, - hue: true, - interaction: { - hex: true, - rgba: true, - hsla: true, - input: true, - clear: false, - save: true, - }, - }, - swatches: [ - "rgb(244 67 54)", - "rgb(233 30 99)", - "rgb(156 39 176)", - "rgb(103 58 183)", - "rgb(63 81 181)", - "rgb(33 150 243)", - "rgb(3 169 244)", - "rgb(0 188 212)", - "rgb(0 150 136)", - "rgb(76 175 80)", - "rgb(139 195 74)", - "rgb(205 220 57)", - "rgb(255 235 59)", - "rgb(255 193 7)", - ], +const polarColorSpaces = ["hsl", "hwb", "lch", "oklch"]; +const colorOne = { r: 255, g: 127, b: 80, alpha: 1.0 }; +const colorTwo = { r: 0, g: 255, b: 255, alpha: 1.0 }; +let currentColor = null; + +function rgbToLinear(c) { + return c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4); +} + +function intToHex(i) { + return Math.floor(i).toString(16).padStart(2, "0").toUpperCase(); +} + +function rgbToHEXText(c) { + return `#${intToHex(c.r)}${intToHex(c.g)}${intToHex(c.b)}`; +} + +function colorToRGBA(c) { + const ctx = new OffscreenCanvas(1, 1).getContext("2d"); + ctx.fillStyle = c; + ctx.fillRect(0, 0, 1, 1); + const data = ctx.getImageData(0, 0, 1, 1).data; + return { + r: data[0], + g: data[1], + b: data[2], + alpha: data[3] / 255, }; +} - pickerOne = Pickr.create(pickerOptions); - pickerOne.setColor("#ff7f50"); - colorOne.style.setProperty("background-color", "#ff7f50"); - pickerOne.on("change", (color) => { - colorOne.style.setProperty("background-color", color.toRGBA()); - updateColorMix(); - }); - pickerOne.on("cancel", (instance) => { - colorOne.style.setProperty( - "background-color", - instance.getColor().toRGBA(), - ); - updateColorMix(); - }); - pickerOne.on("show", (_, instance) => { - instance.getRoot().app.querySelector(":is(button, [tabindex])").focus(); - }); - pickerOne.on("hide", (instance) => { - colorOne.focus(); - }); +function multiplyByMatrix(matrix, tuple) { + let i = [0, 0, 0]; + let j = matrix.length; + let k = matrix[0].length; + for (let l = 0; l < j; l++) + for (let m = 0; m < k; m++) i[l] += matrix[l][m] * tuple[m]; + return i; +} - pickerOptions.el = ".color-two"; - pickerOptions.default = "#00ffff"; - pickerTwo = Pickr.create(pickerOptions); - pickerTwo.setColor("#00ffff"); - colorTwo.style.setProperty("background-color", "#00ffff"); - pickerTwo.on("change", (color, source, instance) => { - colorTwo.style.setProperty("background-color", color.toRGBA()); - updateColorMix(); - }); - pickerTwo.on("cancel", (instance) => { - colorTwo.style.setProperty( - "background-color", - instance.getColor().toRGBA(), - ); - updateColorMix(); - }); - pickerTwo.on("show", (_, instance) => { - instance.getRoot().app.querySelector(":is(button, [tabindex])").focus(); - }); - pickerTwo.on("hide", (instance) => { - colorTwo.focus(); - }); +function rgbaToHEXAText(color) { + const hexText = rgbToHEXText(color); + if (color.alpha === 1.0) { + return hexText; + } + const alpha = intToHex(color.alpha * 255); + return `${hexText}${alpha}`; +} - percentageOne.addEventListener("input", (e) => { - percentageOneLabel.innerText = e.target.value + "%"; - updateColorMix(); - }); - percentageTwo.addEventListener("input", (e) => { - percentageTwoLabel.innerText = e.target.value + "%"; - updateColorMix(); - }); - colorSpace.addEventListener("change", (e) => { - if (polarColorSpaces.includes(e.target.value)) { - interpolationMethod.style.visibility = "visible"; - interpolationMethodLabel.style.visibility = "visible"; - } else { - interpolationMethod.style.visibility = "hidden"; - interpolationMethodLabel.style.visibility = "hidden"; - } - updateColorMix(); - }); - interpolationMethod.addEventListener("change", (e) => { - updateColorMix(); +function rgbaToHSLA(color) { + let { r, g, b, a: alpha } = color; + // Let's have r, g, b in the range [0, 1] + r = r / 255; + g = g / 255; + b = b / 255; + const min = Math.min(r, g, b); + const max = Math.max(r, g, b); + const delta = max - min; + let h, s, l; + + if (delta === 0) { + h = 0; + } else if (max === r) { + h = ((g - b) / delta) % 6; + } else if (max === g) { + h = (b - r) / delta + 2; + } else h = (r - g) / delta + 4; + h = Math.round(h * 60); + + // We want an angle between 0 and 360° + if (h < 0) { + h += 360; + } + + l = (max + min) / 2; + s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1)); + s = Number((s * 100).toFixed(1)); + l = Number((l * 100).toFixed(1)); + + return { h, s, l, alpha }; +} + +function toHSLAText(color) { + const { h, s, l, alpha } = rgbaToHSLA(color); + return `hsl(${h.toFixed(0)} ${s.toFixed(0)}% ${l.toFixed(0)}%${ + alpha < 1.0 ? ` / ${alpha.toFixed(3)}` : "" + })`; +} + +function rgbaToHWBAText(color) { + let { h, s, l, alpha } = rgbaToHSLA(color); + const chroma = s * (1 - Math.abs(l / 50 - 1)); + let W = (l - chroma / 2).toFixed(0); + let B = (100 - l - chroma / 2).toFixed(0); + return `hwb(${h} ${W}% ${B}%${alpha < 1.0 ? ` / ${alpha.toFixed(3)}` : ""})`; +} + +function rgbaToXYZD50(color) { + let { r, g, b, alpha } = color; + r = rgbToLinear(r / 255) * 255; + g = rgbToLinear(g / 255) * 255; + b = rgbToLinear(b / 255) * 255; + + const xyz = multiplyByMatrix(LRGB_XYZ_D50_MATRIX, [r, g, b]); + return { x: xyz[0] / 255, y: xyz[1] / 255, z: xyz[2] / 255, a: alpha }; +} + +function rgbaToXYZD50Text(color) { + let { alpha } = color; + const xyz = rgbaToXYZD50(color); + return `color(xyz-d50 ${xyz.x.toFixed(5)} ${xyz.y.toFixed(5)} ${xyz.z.toFixed( + 5, + )}${alpha < 1.0 ? ` / ${alpha.toFixed(3)}` : ""})`; +} + +function rgbaToXYZD65(color) { + let { r, g, b, alpha } = color; + r = rgbToLinear(r / 255) * 255; + g = rgbToLinear(g / 255) * 255; + b = rgbToLinear(b / 255) * 255; + + const xyz = multiplyByMatrix(LRGB_XYZ_D65_MATRIX, [r, g, b]); + return { x: xyz[0] / 255, y: xyz[1] / 255, z: xyz[2] / 255, a: alpha }; +} + +function rgbaToXYZD65Text(color) { + let { alpha } = color; + const xyz = rgbaToXYZD65(color); + return `color(xyz-d65 ${xyz.x.toFixed(5)} ${xyz.y.toFixed(5)} ${xyz.z.toFixed( + 5, + )}${alpha < 1.0 ? ` / ${alpha.toFixed(3)}` : ""})`; +} + +const D65 = [0.3457 / 0.3585, 1, 0.2958 / 0.3585]; +function xyzToLab(color) { + let { x, y, z, alpha } = color; + [x, y, z] = [x, y, z].map((v, i) => { + v = v / D65[i]; + return v > 0.0088564516 ? Math.cbrt(v) : v * 903.2962962962963 + 16 / 116; }); + return { l: 116 * y - 16, a: 500 * (x - y), b: 200 * (y - z), alpha }; +} - interpolationMethod.style.visibility = "hidden"; - interpolationMethodLabel.style.visibility = "hidden"; +function rgbaToLabText(color) { + let { alpha } = color; + const xyz = rgbaToXYZD50(color); + const lab = xyzToLab(xyz); + return `lab(${lab.l.toFixed(3)} ${lab.a.toFixed(3)} ${lab.b.toFixed(3)}${ + alpha < 1.0 ? ` / ${alpha.toFixed(3)}` : "" + })`; +} + +function rgbToOklab(color) { + let { r, g, b, alpha } = color; + r = rgbToLinear(r / 255); + g = rgbToLinear(g / 255); + b = rgbToLinear(b / 255); + const lms = multiplyByMatrix(LRGB_LMS_MATRIX, [r, g, b]).map((v) => + Math.cbrt(v), + ); + + const oklab = multiplyByMatrix(LMS_LAB_MATRIX, lms); + return { l: oklab[0], a: oklab[1], b: oklab[2], a: alpha }; +} + +function toOkLabText(color) { + let { alpha } = color; + const oklab = rgbToOklab(color); + return `oklab(${oklab.l.toFixed(5)} ${oklab.a.toFixed(5)} ${oklab.b.toFixed( + 5, + )}${alpha < 1.0 ? ` / ${alpha.toFixed(3)}` : ""})`; +} + +function labToLCH(color) { + const { l, a, b, alpha } = color; + const c = Math.sqrt(a * a + b * b); + let h = Math.atan2(b, a) * (180 / Math.PI); + if (h < 0) { + h += 360; + } + return { l, c, h, alpha }; +} + +function toLCHText(color) { + let { alpha } = color; + const xyz = rgbaToXYZD50(color); + const lab = xyzToLab(xyz); + const lch = labToLCH(lab); + return `lch(${lch.l.toFixed(3)} ${lch.c.toFixed(3)} ${lch.h.toFixed(3)}${ + alpha < 1.0 ? ` / ${alpha.toFixed(3)}` : "" + })`; +} + +function rgbaToOkLCh(color) { + const lab = rgbToOklab(color); + const oklch = labToLCH(lab); + return { l: oklch.l, c: oklch.c, h: oklch.h, alpha: color.alpha }; +} + +function toOkLChText(color) { + let { alpha } = color; + const oklch = rgbaToOkLCh(color); + return `oklch(${oklch.l.toFixed(5)} ${oklch.c.toFixed(5)} ${oklch.h.toFixed( + 5, + )}${alpha < 1.0 ? ` / ${alpha.toFixed(3)}` : ""})`; } function updateColorMix() { @@ -348,35 +660,165 @@ function updateColorMix() { } root.style.setProperty( "--color-one", - colorOne.style.getPropertyValue("background-color"), + colorOneButton.style.getPropertyValue("background-color"), ); - root.style.setProperty("--percentage-one", percentageOne.value + "%"); - colorMixFunction += `${pickerOne.getColor().toHEXA().toString()} ${ - percentageOne.value + root.style.setProperty("--percentage-one", percentageOneSlider.value + "%"); + colorMixFunction += `${rgbaToHEXAText(colorOne)} ${ + percentageOneSlider.value }%, `; root.style.setProperty( "--color-two", - colorTwo.style.getPropertyValue("background-color"), + colorTwoButton.style.getPropertyValue("background-color"), ); - root.style.setProperty("--percentage-two", percentageTwo.value + "%"); - colorMixFunction += `${pickerTwo.getColor().toHEXA().toString()} ${ - percentageTwo.value + root.style.setProperty("--percentage-two", percentageTwoSlider.value + "%"); + colorMixFunction += `${rgbaToHEXAText(colorTwo)} ${ + percentageTwoSlider.value }%)`; - mixedColor.style.setProperty("background-color", colorMixFunction); + mixedColorDiv.style.setProperty("background-color", colorMixFunction); - colorMixFunction += ` = ${ - window.getComputedStyle(mixedColor).backgroundColor - }`; + const mixedColorText = window.getComputedStyle(mixedColorDiv).backgroundColor; + colorMixFunction += ` = ${mixedColorText}`; mixedOutputText.innerText = colorMixFunction; + displayOutputColors(mixedColorText); +} + +function displayOutputColors(color) { + let rgbaColor = colorToRGBA(color); + + hexOutput.innerText = rgbaToHEXAText(rgbaColor); + + rgbFunctionOutput.innerText = `rgb(${Math.round(rgbaColor.r)} ${Math.round( + rgbaColor.g, + )} ${Math.round(rgbaColor.b)}`; + if (rgbaColor.alpha && rgbaColor.alpha < 1.0) { + rgbFunctionOutput.innerText += ` / ${rgbaColor.alpha.toFixed(3)}`; + } + rgbFunctionOutput.innerText += `)`; + + colorFunctionOutput.innerText = `color(srgb ${(rgbaColor.r / 255).toFixed( + 3, + )} ${(rgbaColor.g / 255).toFixed(3)} ${(rgbaColor.b / 255).toFixed(3)}`; + if (rgbaColor.alpha && rgbaColor.alpha < 1.0) { + colorFunctionOutput.innerText += ` / ${rgbaColor.alpha.toFixed(3)}`; + } + colorFunctionOutput.innerText += `)`; + + hslFunctionOutput.innerText = toHSLAText(rgbaColor); + + hwbFunctionOutput.innerText = rgbaToHWBAText(rgbaColor); + labFunctionOutput.innerText = rgbaToLabText(rgbaColor); + xyzD50FunctionOutput.innerText = rgbaToXYZD50Text(rgbaColor); + xyzD65FunctionOutput.innerText = rgbaToXYZD65Text(rgbaColor); + lchFunctionOutput.innerText = toLCHText(rgbaColor); + oklabFunctionOutput.innerText = toOkLabText(rgbaColor); + oklchFunctionOutput.innerText = toOkLChText(rgbaColor); +} + +function setColorToDialog() { + colorTextInput.value = rgbaToHEXAText(currentColor); + colorInput.value = rgbToHEXText(currentColor); + colorOpacitySlider.value = currentColor.alpha; +} + +function init() { + percentageOneSlider.addEventListener("input", (e) => { + percentageOneLabel.innerText = e.target.value + "%"; + updateColorMix(); + }); + + percentageTwoSlider.addEventListener("input", (e) => { + percentageTwoLabel.innerText = e.target.value + "%"; + updateColorMix(); + }); + + colorSpace.addEventListener("change", (e) => { + if (polarColorSpaces.includes(e.target.value)) { + interpolationMethod.style.visibility = "visible"; + interpolationMethodLabel.style.visibility = "visible"; + } else { + interpolationMethod.style.visibility = "hidden"; + interpolationMethodLabel.style.visibility = "hidden"; + } + updateColorMix(); + }); + + interpolationMethod.addEventListener("change", () => { + updateColorMix(); + }); + + interpolationMethod.style.visibility = "hidden"; + interpolationMethodLabel.style.visibility = "hidden"; + + colorOneButton.addEventListener("click", () => { + currentColor = colorOne; + setColorToDialog(); + pickerDialog.showModal(); + }); + + colorTwoButton.addEventListener("click", () => { + currentColor = colorTwo; + setColorToDialog(); + pickerDialog.showModal(); + }); + + colorTextInput.addEventListener("input", (e) => { + const color = colorToRGBA(e.target.value); + Object.assign(currentColor, color); + colorInput.value = rgbToHEXText(currentColor); + colorOpacitySlider.value = currentColor.alpha; + }); + + colorInput.addEventListener("input", (e) => { + const text = e.target.value; + currentColor.r = parseInt(text.slice(1, 3), 16); + currentColor.g = parseInt(text.slice(3, 5), 16); + currentColor.b = parseInt(text.slice(5, 7), 16); + colorTextInput.value = rgbaToHEXAText(currentColor); + colorOpacitySlider.value = 1.0; + }); + + colorOpacitySlider.addEventListener("input", (e) => { + const value = parseFloat(e.target.value); + if (value >= 0 && value <= 1) { + currentColor.alpha = value; + colorTextInput.value = rgbaToHEXAText(currentColor); + } + }); + + pickerOkButton.addEventListener("click", () => { + colorOneButton.style.setProperty( + "background-color", + rgbaToHEXAText(colorOne), + ); + colorTwoButton.style.setProperty( + "background-color", + rgbaToHEXAText(colorTwo), + ); + pickerDialog.close(); + updateColorMix(); + }); + + document.querySelectorAll("#output-colors button").forEach((button) => { + button.addEventListener("click", (e) => { + // get parent element + const text = e.target.nextElementSibling.innerText; + navigator.clipboard.writeText(text); + e.target.innerText = "Copied!"; + setTimeout(() => { + e.target.innerText = "Copy"; + }, 1000); + }); + }); + + updateColorMix(); } init(); -updateColorMix(); ``` -{{EmbedLiveSample("color-mixer", "", 400)}} +{{EmbedLiveSample("color-mixer", "", 750, "", "", "", "clipboard-write")}} ## See also diff --git a/files/en-us/web/css/css_colors/color_mixer/pickr.es5.min.js b/files/en-us/web/css/css_colors/color_mixer/pickr.es5.min.js deleted file mode 100644 index 921cf3dce2903b3..000000000000000 --- a/files/en-us/web/css/css_colors/color_mixer/pickr.es5.min.js +++ /dev/null @@ -1,2 +0,0 @@ -/*! Pickr 1.9.1 MIT | https://github.com/Simonwep/pickr */ -!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Pickr=e():t.Pickr=e()}(self,(()=>(()=>{"use strict";var t={8280:(t,e,r)=>{var n=r(1435),o=r(7113),i=TypeError;t.exports=function(t){if(n(t))return t;throw new i(o(t)+" is not a function")}},5478:(t,e,r)=>{var n=r(4127),o=r(7113),i=TypeError;t.exports=function(t){if(n(t))return t;throw new i(o(t)+" is not a constructor")}},1420:(t,e,r)=>{var n=r(6143),o=String,i=TypeError;t.exports=function(t){if(n(t))return t;throw new i("Can't set "+o(t)+" as a prototype")}},5127:(t,e,r)=>{var n=r(3633),o=r(8250),i=r(2587).f,a=n("unscopables"),c=Array.prototype;void 0===c[a]&&i(c,a,{configurable:!0,value:o(null)}),t.exports=function(t){c[a][t]=!0}},6691:(t,e,r)=>{var n=r(449).charAt;t.exports=function(t,e,r){return e+(r?n(t,e).length:1)}},3349:(t,e,r)=>{var n=r(3400),o=String,i=TypeError;t.exports=function(t){if(n(t))return t;throw new i(o(t)+" is not an object")}},3833:(t,e,r)=>{var n=r(9603).forEach,o=r(4832)("forEach");t.exports=o?[].forEach:function(t){return n(this,t,arguments.length>1?arguments[1]:void 0)}},7022:(t,e,r)=>{var n=r(3122),o=r(9295),i=r(4683),a=r(325),c=r(9187),u=r(4127),s=r(608),l=r(6558),p=r(4663),f=r(2153),v=Array;t.exports=function(t){var e=i(t),r=u(this),h=arguments.length,d=h>1?arguments[1]:void 0,g=void 0!==d;g&&(d=n(d,h>2?arguments[2]:void 0));var y,b,m,x,w,S,_=f(e),A=0;if(!_||this===v&&c(_))for(y=s(e),b=r?new this(y):v(y);y>A;A++)S=g?d(e[A],A):e[A],l(b,A,S);else for(b=r?new this:[],w=(x=p(e,_)).next;!(m=o(w,x)).done;A++)S=g?a(x,d,[m.value,A],!0):m.value,l(b,A,S);return b.length=A,b}},1675:(t,e,r)=>{var n=r(8799),o=r(3104),i=r(608),a=function(t){return function(e,r,a){var c=n(e),u=i(c);if(0===u)return!t&&-1;var s,l=o(a,u);if(t&&r!=r){for(;u>l;)if((s=c[l++])!=s)return!0}else for(;u>l;l++)if((t||l in c)&&c[l]===r)return t||l||0;return!t&&-1}};t.exports={includes:a(!0),indexOf:a(!1)}},9603:(t,e,r)=>{var n=r(3122),o=r(2538),i=r(6729),a=r(4683),c=r(608),u=r(3159),s=o([].push),l=function(t){var e=1===t,r=2===t,o=3===t,l=4===t,p=6===t,f=7===t,v=5===t||p;return function(h,d,g,y){for(var b,m,x=a(h),w=i(x),S=c(w),_=n(d,g),A=0,O=y||u,E=e?O(h,S):r||f?O(h,0):void 0;S>A;A++)if((v||A in w)&&(m=_(b=w[A],A,x),t))if(e)E[A]=m;else if(m)switch(t){case 3:return!0;case 5:return b;case 6:return A;case 2:s(E,b)}else switch(t){case 4:return!1;case 7:s(E,b)}return p?-1:o||l?l:E}};t.exports={forEach:l(0),map:l(1),filter:l(2),some:l(3),every:l(4),find:l(5),findIndex:l(6),filterReject:l(7)}},9331:(t,e,r)=>{var n=r(3849),o=r(3633),i=r(7722),a=o("species");t.exports=function(t){return i>=51||!n((function(){var e=[];return(e.constructor={})[a]=function(){return{foo:1}},1!==e[t](Boolean).foo}))}},4832:(t,e,r)=>{var n=r(3849);t.exports=function(t,e){var r=[][t];return!!r&&n((function(){r.call(null,e||function(){return 1},1)}))}},4534:(t,e,r)=>{var n=r(1870),o=r(7506),i=TypeError,a=Object.getOwnPropertyDescriptor,c=n&&!function(){if(void 0!==this)return!0;try{Object.defineProperty([],"length",{writable:!1}).length=1}catch(t){return t instanceof TypeError}}();t.exports=c?function(t,e){if(o(t)&&!a(t,"length").writable)throw new i("Cannot set read only .length");return t.length=e}:function(t,e){return t.length=e}},850:(t,e,r)=>{var n=r(2538);t.exports=n([].slice)},6535:(t,e,r)=>{var n=r(7506),o=r(4127),i=r(3400),a=r(3633)("species"),c=Array;t.exports=function(t){var e;return n(t)&&(e=t.constructor,(o(e)&&(e===c||n(e.prototype))||i(e)&&null===(e=e[a]))&&(e=void 0)),void 0===e?c:e}},3159:(t,e,r)=>{var n=r(6535);t.exports=function(t,e){return new(n(t))(0===e?0:e)}},325:(t,e,r)=>{var n=r(3349),o=r(9857);t.exports=function(t,e,r,i){try{return i?e(n(r)[0],r[1]):e(r)}catch(e){o(t,"throw",e)}}},6786:(t,e,r)=>{var n=r(3633)("iterator"),o=!1;try{var i=0,a={next:function(){return{done:!!i++}},return:function(){o=!0}};a[n]=function(){return this},Array.from(a,(function(){throw 2}))}catch(t){}t.exports=function(t,e){try{if(!e&&!o)return!1}catch(t){return!1}var r=!1;try{var i={};i[n]=function(){return{next:function(){return{done:r=!0}}}},t(i)}catch(t){}return r}},2750:(t,e,r)=>{var n=r(2538),o=n({}.toString),i=n("".slice);t.exports=function(t){return i(o(t),8,-1)}},5361:(t,e,r)=>{var n=r(6002),o=r(1435),i=r(2750),a=r(3633)("toStringTag"),c=Object,u="Arguments"===i(function(){return arguments}());t.exports=n?i:function(t){var e,r,n;return void 0===t?"Undefined":null===t?"Null":"string"==typeof(r=function(t,e){try{return t[e]}catch(t){}}(e=c(t),a))?r:u?i(e):"Object"===(n=i(e))&&o(e.callee)?"Arguments":n}},4518:(t,e,r)=>{var n=r(379),o=r(2905),i=r(9697),a=r(2587);t.exports=function(t,e,r){for(var c=o(e),u=a.f,s=i.f,l=0;l{var n=r(3633)("match");t.exports=function(t){var e=/./;try{"/./"[t](e)}catch(r){try{return e[n]=!1,"/./"[t](e)}catch(t){}}return!1}},4737:(t,e,r)=>{var n=r(3849);t.exports=!n((function(){function t(){}return t.prototype.constructor=null,Object.getPrototypeOf(new t)!==t.prototype}))},9055:t=>{t.exports=function(t,e){return{value:t,done:e}}},4477:(t,e,r)=>{var n=r(1870),o=r(2587),i=r(5658);t.exports=n?function(t,e,r){return o.f(t,e,i(1,r))}:function(t,e,r){return t[e]=r,t}},5658:t=>{t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},6558:(t,e,r)=>{var n=r(1870),o=r(2587),i=r(5658);t.exports=function(t,e,r){n?o.f(t,e,i(0,r)):t[e]=r}},7448:(t,e,r)=>{var n=r(2713),o=r(2587);t.exports=function(t,e,r){return r.get&&n(r.get,e,{getter:!0}),r.set&&n(r.set,e,{setter:!0}),o.f(t,e,r)}},2202:(t,e,r)=>{var n=r(1435),o=r(2587),i=r(2713),a=r(3135);t.exports=function(t,e,r,c){c||(c={});var u=c.enumerable,s=void 0!==c.name?c.name:e;if(n(r)&&i(r,s,c),c.global)u?t[e]=r:a(e,r);else{try{c.unsafe?t[e]&&(u=!0):delete t[e]}catch(t){}u?t[e]=r:o.f(t,e,{value:r,enumerable:!1,configurable:!c.nonConfigurable,writable:!c.nonWritable})}return t}},3135:(t,e,r)=>{var n=r(9317),o=Object.defineProperty;t.exports=function(t,e){try{o(n,t,{value:e,configurable:!0,writable:!0})}catch(r){n[t]=e}return e}},60:(t,e,r)=>{var n=r(7113),o=TypeError;t.exports=function(t,e){if(!delete t[e])throw new o("Cannot delete property "+n(e)+" of "+n(t))}},1870:(t,e,r)=>{var n=r(3849);t.exports=!n((function(){return 7!==Object.defineProperty({},1,{get:function(){return 7}})[1]}))},8249:(t,e,r)=>{var n=r(9317),o=r(3400),i=n.document,a=o(i)&&o(i.createElement);t.exports=function(t){return a?i.createElement(t):{}}},2387:t=>{var e=TypeError;t.exports=function(t){if(t>9007199254740991)throw e("Maximum allowed index exceeded");return t}},1530:t=>{t.exports={CSSRuleList:0,CSSStyleDeclaration:0,CSSValueList:0,ClientRectList:0,DOMRectList:0,DOMStringList:0,DOMTokenList:1,DataTransferItemList:0,FileList:0,HTMLAllCollection:0,HTMLCollection:0,HTMLFormElement:0,HTMLSelectElement:0,MediaList:0,MimeTypeArray:0,NamedNodeMap:0,NodeList:1,PaintRequestList:0,Plugin:0,PluginArray:0,SVGLengthList:0,SVGNumberList:0,SVGPathSegList:0,SVGPointList:0,SVGStringList:0,SVGTransformList:0,SourceBufferList:0,StyleSheetList:0,TextTrackCueList:0,TextTrackList:0,TouchList:0}},6334:(t,e,r)=>{var n=r(8249)("span").classList,o=n&&n.constructor&&n.constructor.prototype;t.exports=o===Object.prototype?void 0:o},446:t=>{t.exports="undefined"!=typeof navigator&&String(navigator.userAgent)||""},7722:(t,e,r)=>{var n,o,i=r(9317),a=r(446),c=i.process,u=i.Deno,s=c&&c.versions||u&&u.version,l=s&&s.v8;l&&(o=(n=l.split("."))[0]>0&&n[0]<4?1:+(n[0]+n[1])),!o&&a&&(!(n=a.match(/Edge\/(\d+)/))||n[1]>=74)&&(n=a.match(/Chrome\/(\d+)/))&&(o=+n[1]),t.exports=o},5333:t=>{t.exports=["constructor","hasOwnProperty","isPrototypeOf","propertyIsEnumerable","toLocaleString","toString","valueOf"]},3076:(t,e,r)=>{var n=r(9317),o=r(9697).f,i=r(4477),a=r(2202),c=r(3135),u=r(4518),s=r(9946);t.exports=function(t,e){var r,l,p,f,v,h=t.target,d=t.global,g=t.stat;if(r=d?n:g?n[h]||c(h,{}):n[h]&&n[h].prototype)for(l in e){if(f=e[l],p=t.dontCallGetSet?(v=o(r,l))&&v.value:r[l],!s(d?l:h+(g?".":"#")+l,t.forced)&&void 0!==p){if(typeof f==typeof p)continue;u(f,p)}(t.sham||p&&p.sham)&&i(f,"sham",!0),a(r,l,f,t)}}},3849:t=>{t.exports=function(t){try{return!!t()}catch(t){return!0}}},2670:(t,e,r)=>{r(9981);var n=r(9295),o=r(2202),i=r(1601),a=r(3849),c=r(3633),u=r(4477),s=c("species"),l=RegExp.prototype;t.exports=function(t,e,r,p){var f=c(t),v=!a((function(){var e={};return e[f]=function(){return 7},7!==""[t](e)})),h=v&&!a((function(){var e=!1,r=/a/;return"split"===t&&((r={}).constructor={},r.constructor[s]=function(){return r},r.flags="",r[f]=/./[f]),r.exec=function(){return e=!0,null},r[f](""),!e}));if(!v||!h||r){var d=/./[f],g=e(f,""[t],(function(t,e,r,o,a){var c=e.exec;return c===i||c===l.exec?v&&!a?{done:!0,value:n(d,e,r,o)}:{done:!0,value:n(t,r,e,o)}:{done:!1}}));o(String.prototype,t,g[0]),o(l,f,g[1])}p&&u(l[f],"sham",!0)}},347:(t,e,r)=>{var n=r(3602),o=Function.prototype,i=o.apply,a=o.call;t.exports="object"==typeof Reflect&&Reflect.apply||(n?a.bind(i):function(){return a.apply(i,arguments)})},3122:(t,e,r)=>{var n=r(4890),o=r(8280),i=r(3602),a=n(n.bind);t.exports=function(t,e){return o(t),void 0===e?t:i?a(t,e):function(){return t.apply(e,arguments)}}},3602:(t,e,r)=>{var n=r(3849);t.exports=!n((function(){var t=function(){}.bind();return"function"!=typeof t||t.hasOwnProperty("prototype")}))},9295:(t,e,r)=>{var n=r(3602),o=Function.prototype.call;t.exports=n?o.bind(o):function(){return o.apply(o,arguments)}},8784:(t,e,r)=>{var n=r(1870),o=r(379),i=Function.prototype,a=n&&Object.getOwnPropertyDescriptor,c=o(i,"name"),u=c&&"something"===function(){}.name,s=c&&(!n||n&&a(i,"name").configurable);t.exports={EXISTS:c,PROPER:u,CONFIGURABLE:s}},6632:(t,e,r)=>{var n=r(2538),o=r(8280);t.exports=function(t,e,r){try{return n(o(Object.getOwnPropertyDescriptor(t,e)[r]))}catch(t){}}},4890:(t,e,r)=>{var n=r(2750),o=r(2538);t.exports=function(t){if("Function"===n(t))return o(t)}},2538:(t,e,r)=>{var n=r(3602),o=Function.prototype,i=o.call,a=n&&o.bind.bind(i,i);t.exports=n?a:function(t){return function(){return i.apply(t,arguments)}}},5793:(t,e,r)=>{var n=r(9317),o=r(1435);t.exports=function(t,e){return arguments.length<2?(r=n[t],o(r)?r:void 0):n[t]&&n[t][e];var r}},2153:(t,e,r)=>{var n=r(5361),o=r(2996),i=r(2303),a=r(1575),c=r(3633)("iterator");t.exports=function(t){if(!i(t))return o(t,c)||o(t,"@@iterator")||a[n(t)]}},4663:(t,e,r)=>{var n=r(9295),o=r(8280),i=r(3349),a=r(7113),c=r(2153),u=TypeError;t.exports=function(t,e){var r=arguments.length<2?c(t):e;if(o(r))return i(n(r,t));throw new u(a(t)+" is not iterable")}},9023:(t,e,r)=>{var n=r(2538),o=r(7506),i=r(1435),a=r(2750),c=r(2277),u=n([].push);t.exports=function(t){if(i(t))return t;if(o(t)){for(var e=t.length,r=[],n=0;n{var n=r(8280),o=r(2303);t.exports=function(t,e){var r=t[e];return o(r)?void 0:n(r)}},1748:(t,e,r)=>{var n=r(2538),o=r(4683),i=Math.floor,a=n("".charAt),c=n("".replace),u=n("".slice),s=/\$([$&'`]|\d{1,2}|<[^>]*>)/g,l=/\$([$&'`]|\d{1,2})/g;t.exports=function(t,e,r,n,p,f){var v=r+t.length,h=n.length,d=l;return void 0!==p&&(p=o(p),d=s),c(f,d,(function(o,c){var s;switch(a(c,0)){case"$":return"$";case"&":return t;case"`":return u(e,0,r);case"'":return u(e,v);case"<":s=p[u(c,1,-1)];break;default:var l=+c;if(0===l)return o;if(l>h){var f=i(l/10);return 0===f?o:f<=h?void 0===n[f-1]?a(c,1):n[f-1]+a(c,1):o}s=n[l-1]}return void 0===s?"":s}))}},9317:function(t,e,r){var n=function(t){return t&&t.Math===Math&&t};t.exports=n("object"==typeof globalThis&&globalThis)||n("object"==typeof window&&window)||n("object"==typeof self&&self)||n("object"==typeof r.g&&r.g)||n("object"==typeof this&&this)||function(){return this}()||Function("return this")()},379:(t,e,r)=>{var n=r(2538),o=r(4683),i=n({}.hasOwnProperty);t.exports=Object.hasOwn||function(t,e){return i(o(t),e)}},147:t=>{t.exports={}},651:(t,e,r)=>{var n=r(5793);t.exports=n("document","documentElement")},7527:(t,e,r)=>{var n=r(1870),o=r(3849),i=r(8249);t.exports=!n&&!o((function(){return 7!==Object.defineProperty(i("div"),"a",{get:function(){return 7}}).a}))},6729:(t,e,r)=>{var n=r(2538),o=r(3849),i=r(2750),a=Object,c=n("".split);t.exports=o((function(){return!a("z").propertyIsEnumerable(0)}))?function(t){return"String"===i(t)?c(t,""):a(t)}:a},8285:(t,e,r)=>{var n=r(1435),o=r(3400),i=r(3425);t.exports=function(t,e,r){var a,c;return i&&n(a=e.constructor)&&a!==r&&o(c=a.prototype)&&c!==r.prototype&&i(t,c),t}},5188:(t,e,r)=>{var n=r(2538),o=r(1435),i=r(1511),a=n(Function.toString);o(i.inspectSource)||(i.inspectSource=function(t){return a(t)}),t.exports=i.inspectSource},5043:(t,e,r)=>{var n,o,i,a=r(740),c=r(9317),u=r(3400),s=r(4477),l=r(379),p=r(1511),f=r(6769),v=r(147),h="Object already initialized",d=c.TypeError,g=c.WeakMap;if(a||p.state){var y=p.state||(p.state=new g);y.get=y.get,y.has=y.has,y.set=y.set,n=function(t,e){if(y.has(t))throw new d(h);return e.facade=t,y.set(t,e),e},o=function(t){return y.get(t)||{}},i=function(t){return y.has(t)}}else{var b=f("state");v[b]=!0,n=function(t,e){if(l(t,b))throw new d(h);return e.facade=t,s(t,b,e),e},o=function(t){return l(t,b)?t[b]:{}},i=function(t){return l(t,b)}}t.exports={set:n,get:o,has:i,enforce:function(t){return i(t)?o(t):n(t,{})},getterFor:function(t){return function(e){var r;if(!u(e)||(r=o(e)).type!==t)throw new d("Incompatible receiver, "+t+" required");return r}}}},9187:(t,e,r)=>{var n=r(3633),o=r(1575),i=n("iterator"),a=Array.prototype;t.exports=function(t){return void 0!==t&&(o.Array===t||a[i]===t)}},7506:(t,e,r)=>{var n=r(2750);t.exports=Array.isArray||function(t){return"Array"===n(t)}},1435:t=>{var e="object"==typeof document&&document.all;t.exports=void 0===e&&void 0!==e?function(t){return"function"==typeof t||t===e}:function(t){return"function"==typeof t}},4127:(t,e,r)=>{var n=r(2538),o=r(3849),i=r(1435),a=r(5361),c=r(5793),u=r(5188),s=function(){},l=c("Reflect","construct"),p=/^\s*(?:class|function)\b/,f=n(p.exec),v=!p.test(s),h=function(t){if(!i(t))return!1;try{return l(s,[],t),!0}catch(t){return!1}},d=function(t){if(!i(t))return!1;switch(a(t)){case"AsyncFunction":case"GeneratorFunction":case"AsyncGeneratorFunction":return!1}try{return v||!!f(p,u(t))}catch(t){return!0}};d.sham=!0,t.exports=!l||o((function(){var t;return h(h.call)||!h(Object)||!h((function(){t=!0}))||t}))?d:h},9946:(t,e,r)=>{var n=r(3849),o=r(1435),i=/#|\.prototype\./,a=function(t,e){var r=u[c(t)];return r===l||r!==s&&(o(e)?n(e):!!e)},c=a.normalize=function(t){return String(t).replace(i,".").toLowerCase()},u=a.data={},s=a.NATIVE="N",l=a.POLYFILL="P";t.exports=a},2303:t=>{t.exports=function(t){return null==t}},3400:(t,e,r)=>{var n=r(1435);t.exports=function(t){return"object"==typeof t?null!==t:n(t)}},6143:(t,e,r)=>{var n=r(3400);t.exports=function(t){return n(t)||null===t}},4709:t=>{t.exports=!1},8914:(t,e,r)=>{var n=r(3400),o=r(2750),i=r(3633)("match");t.exports=function(t){var e;return n(t)&&(void 0!==(e=t[i])?!!e:"RegExp"===o(t))}},4975:(t,e,r)=>{var n=r(5793),o=r(1435),i=r(8559),a=r(9470),c=Object;t.exports=a?function(t){return"symbol"==typeof t}:function(t){var e=n("Symbol");return o(e)&&i(e.prototype,c(t))}},9857:(t,e,r)=>{var n=r(9295),o=r(3349),i=r(2996);t.exports=function(t,e,r){var a,c;o(t);try{if(!(a=i(t,"return"))){if("throw"===e)throw r;return r}a=n(a,t)}catch(t){c=!0,a=t}if("throw"===e)throw r;if(c)throw a;return o(a),r}},1104:(t,e,r)=>{var n=r(2603).IteratorPrototype,o=r(8250),i=r(5658),a=r(7621),c=r(1575),u=function(){return this};t.exports=function(t,e,r,s){var l=e+" Iterator";return t.prototype=o(n,{next:i(+!s,r)}),a(t,l,!1,!0),c[l]=u,t}},654:(t,e,r)=>{var n=r(3076),o=r(9295),i=r(4709),a=r(8784),c=r(1435),u=r(1104),s=r(4909),l=r(3425),p=r(7621),f=r(4477),v=r(2202),h=r(3633),d=r(1575),g=r(2603),y=a.PROPER,b=a.CONFIGURABLE,m=g.IteratorPrototype,x=g.BUGGY_SAFARI_ITERATORS,w=h("iterator"),S="keys",_="values",A="entries",O=function(){return this};t.exports=function(t,e,r,a,h,g,E){u(r,e,a);var j,C,k,P=function(t){if(t===h&&F)return F;if(!x&&t&&t in T)return T[t];switch(t){case S:case _:case A:return function(){return new r(this,t)}}return function(){return new r(this)}},I=e+" Iterator",R=!1,T=t.prototype,L=T[w]||T["@@iterator"]||h&&T[h],F=!x&&L||P(h),N="Array"===e&&T.entries||L;if(N&&(j=s(N.call(new t)))!==Object.prototype&&j.next&&(i||s(j)===m||(l?l(j,m):c(j[w])||v(j,w,O)),p(j,I,!0,!0),i&&(d[I]=O)),y&&h===_&&L&&L.name!==_&&(!i&&b?f(T,"name",_):(R=!0,F=function(){return o(L,this)})),h)if(C={values:P(_),keys:g?F:P(S),entries:P(A)},E)for(k in C)(x||R||!(k in T))&&v(T,k,C[k]);else n({target:e,proto:!0,forced:x||R},C);return i&&!E||T[w]===F||v(T,w,F,{name:h}),d[e]=F,C}},2603:(t,e,r)=>{var n,o,i,a=r(3849),c=r(1435),u=r(3400),s=r(8250),l=r(4909),p=r(2202),f=r(3633),v=r(4709),h=f("iterator"),d=!1;[].keys&&("next"in(i=[].keys())?(o=l(l(i)))!==Object.prototype&&(n=o):d=!0),!u(n)||a((function(){var t={};return n[h].call(t)!==t}))?n={}:v&&(n=s(n)),c(n[h])||p(n,h,(function(){return this})),t.exports={IteratorPrototype:n,BUGGY_SAFARI_ITERATORS:d}},1575:t=>{t.exports={}},608:(t,e,r)=>{var n=r(8020);t.exports=function(t){return n(t.length)}},2713:(t,e,r)=>{var n=r(2538),o=r(3849),i=r(1435),a=r(379),c=r(1870),u=r(8784).CONFIGURABLE,s=r(5188),l=r(5043),p=l.enforce,f=l.get,v=String,h=Object.defineProperty,d=n("".slice),g=n("".replace),y=n([].join),b=c&&!o((function(){return 8!==h((function(){}),"length",{value:8}).length})),m=String(String).split("String"),x=t.exports=function(t,e,r){"Symbol("===d(v(e),0,7)&&(e="["+g(v(e),/^Symbol\(([^)]*)\).*$/,"$1")+"]"),r&&r.getter&&(e="get "+e),r&&r.setter&&(e="set "+e),(!a(t,"name")||u&&t.name!==e)&&(c?h(t,"name",{value:e,configurable:!0}):t.name=e),b&&r&&a(r,"arity")&&t.length!==r.arity&&h(t,"length",{value:r.arity});try{r&&a(r,"constructor")&&r.constructor?c&&h(t,"prototype",{writable:!1}):t.prototype&&(t.prototype=void 0)}catch(t){}var n=p(t);return a(n,"source")||(n.source=y(m,"string"==typeof e?e:"")),t};Function.prototype.toString=x((function(){return i(this)&&f(this).source||s(this)}),"toString")},4804:t=>{var e=Math.ceil,r=Math.floor;t.exports=Math.trunc||function(t){var n=+t;return(n>0?r:e)(n)}},3181:(t,e,r)=>{var n=r(8914),o=TypeError;t.exports=function(t){if(n(t))throw new o("The method doesn't accept regular expressions");return t}},5567:(t,e,r)=>{var n=r(1870),o=r(2538),i=r(9295),a=r(3849),c=r(9866),u=r(2059),s=r(6203),l=r(4683),p=r(6729),f=Object.assign,v=Object.defineProperty,h=o([].concat);t.exports=!f||a((function(){if(n&&1!==f({b:1},f(v({},"a",{enumerable:!0,get:function(){v(this,"b",{value:3,enumerable:!1})}}),{b:2})).b)return!0;var t={},e={},r=Symbol("assign detection"),o="abcdefghijklmnopqrst";return t[r]=7,o.split("").forEach((function(t){e[t]=t})),7!==f({},t)[r]||c(f({},e)).join("")!==o}))?function(t,e){for(var r=l(t),o=arguments.length,a=1,f=u.f,v=s.f;o>a;)for(var d,g=p(arguments[a++]),y=f?h(c(g),f(g)):c(g),b=y.length,m=0;b>m;)d=y[m++],n&&!i(v,g,d)||(r[d]=g[d]);return r}:f},8250:(t,e,r)=>{var n,o=r(3349),i=r(4087),a=r(5333),c=r(147),u=r(651),s=r(8249),l=r(6769),p="prototype",f="script",v=l("IE_PROTO"),h=function(){},d=function(t){return"<"+f+">"+t+""},g=function(t){t.write(d("")),t.close();var e=t.parentWindow.Object;return t=null,e},y=function(){try{n=new ActiveXObject("htmlfile")}catch(t){}var t,e,r;y="undefined"!=typeof document?document.domain&&n?g(n):(e=s("iframe"),r="java"+f+":",e.style.display="none",u.appendChild(e),e.src=String(r),(t=e.contentWindow.document).open(),t.write(d("document.F=Object")),t.close(),t.F):g(n);for(var o=a.length;o--;)delete y[p][a[o]];return y()};c[v]=!0,t.exports=Object.create||function(t,e){var r;return null!==t?(h[p]=o(t),r=new h,h[p]=null,r[v]=t):r=y(),void 0===e?r:i.f(r,e)}},4087:(t,e,r)=>{var n=r(1870),o=r(9576),i=r(2587),a=r(3349),c=r(8799),u=r(9866);e.f=n&&!o?Object.defineProperties:function(t,e){a(t);for(var r,n=c(e),o=u(e),s=o.length,l=0;s>l;)i.f(t,r=o[l++],n[r]);return t}},2587:(t,e,r)=>{var n=r(1870),o=r(7527),i=r(9576),a=r(3349),c=r(2423),u=TypeError,s=Object.defineProperty,l=Object.getOwnPropertyDescriptor,p="enumerable",f="configurable",v="writable";e.f=n?i?function(t,e,r){if(a(t),e=c(e),a(r),"function"==typeof t&&"prototype"===e&&"value"in r&&v in r&&!r[v]){var n=l(t,e);n&&n[v]&&(t[e]=r.value,r={configurable:f in r?r[f]:n[f],enumerable:p in r?r[p]:n[p],writable:!1})}return s(t,e,r)}:s:function(t,e,r){if(a(t),e=c(e),a(r),o)try{return s(t,e,r)}catch(t){}if("get"in r||"set"in r)throw new u("Accessors not supported");return"value"in r&&(t[e]=r.value),t}},9697:(t,e,r)=>{var n=r(1870),o=r(9295),i=r(6203),a=r(5658),c=r(8799),u=r(2423),s=r(379),l=r(7527),p=Object.getOwnPropertyDescriptor;e.f=n?p:function(t,e){if(t=c(t),e=u(e),l)try{return p(t,e)}catch(t){}if(s(t,e))return a(!o(i.f,t,e),t[e])}},2260:(t,e,r)=>{var n=r(2750),o=r(8799),i=r(1430).f,a=r(850),c="object"==typeof window&&window&&Object.getOwnPropertyNames?Object.getOwnPropertyNames(window):[];t.exports.f=function(t){return c&&"Window"===n(t)?function(t){try{return i(t)}catch(t){return a(c)}}(t):i(o(t))}},1430:(t,e,r)=>{var n=r(134),o=r(5333).concat("length","prototype");e.f=Object.getOwnPropertyNames||function(t){return n(t,o)}},2059:(t,e)=>{e.f=Object.getOwnPropertySymbols},4909:(t,e,r)=>{var n=r(379),o=r(1435),i=r(4683),a=r(6769),c=r(4737),u=a("IE_PROTO"),s=Object,l=s.prototype;t.exports=c?s.getPrototypeOf:function(t){var e=i(t);if(n(e,u))return e[u];var r=e.constructor;return o(r)&&e instanceof r?r.prototype:e instanceof s?l:null}},8559:(t,e,r)=>{var n=r(2538);t.exports=n({}.isPrototypeOf)},134:(t,e,r)=>{var n=r(2538),o=r(379),i=r(8799),a=r(1675).indexOf,c=r(147),u=n([].push);t.exports=function(t,e){var r,n=i(t),s=0,l=[];for(r in n)!o(c,r)&&o(n,r)&&u(l,r);for(;e.length>s;)o(n,r=e[s++])&&(~a(l,r)||u(l,r));return l}},9866:(t,e,r)=>{var n=r(134),o=r(5333);t.exports=Object.keys||function(t){return n(t,o)}},6203:(t,e)=>{var r={}.propertyIsEnumerable,n=Object.getOwnPropertyDescriptor,o=n&&!r.call({1:2},1);e.f=o?function(t){var e=n(this,t);return!!e&&e.enumerable}:r},3425:(t,e,r)=>{var n=r(6632),o=r(3400),i=r(2112),a=r(1420);t.exports=Object.setPrototypeOf||("__proto__"in{}?function(){var t,e=!1,r={};try{(t=n(Object.prototype,"__proto__","set"))(r,[]),e=r instanceof Array}catch(t){}return function(r,n){return i(r),a(n),o(r)?(e?t(r,n):r.__proto__=n,r):r}}():void 0)},6341:(t,e,r)=>{var n=r(6002),o=r(5361);t.exports=n?{}.toString:function(){return"[object "+o(this)+"]"}},2988:(t,e,r)=>{var n=r(9295),o=r(1435),i=r(3400),a=TypeError;t.exports=function(t,e){var r,c;if("string"===e&&o(r=t.toString)&&!i(c=n(r,t)))return c;if(o(r=t.valueOf)&&!i(c=n(r,t)))return c;if("string"!==e&&o(r=t.toString)&&!i(c=n(r,t)))return c;throw new a("Can't convert object to primitive value")}},2905:(t,e,r)=>{var n=r(5793),o=r(2538),i=r(1430),a=r(2059),c=r(3349),u=o([].concat);t.exports=n("Reflect","ownKeys")||function(t){var e=i.f(c(t)),r=a.f;return r?u(e,r(t)):e}},5869:(t,e,r)=>{var n=r(9317);t.exports=n},5964:(t,e,r)=>{var n=r(9295),o=r(3349),i=r(1435),a=r(2750),c=r(1601),u=TypeError;t.exports=function(t,e){var r=t.exec;if(i(r)){var s=n(r,t,e);return null!==s&&o(s),s}if("RegExp"===a(t))return n(c,t,e);throw new u("RegExp#exec called on incompatible receiver")}},1601:(t,e,r)=>{var n,o,i=r(9295),a=r(2538),c=r(2277),u=r(2061),s=r(4667),l=r(7175),p=r(8250),f=r(5043).get,v=r(6845),h=r(5232),d=l("native-string-replace",String.prototype.replace),g=RegExp.prototype.exec,y=g,b=a("".charAt),m=a("".indexOf),x=a("".replace),w=a("".slice),S=(o=/b*/g,i(g,n=/a/,"a"),i(g,o,"a"),0!==n.lastIndex||0!==o.lastIndex),_=s.BROKEN_CARET,A=void 0!==/()??/.exec("")[1];(S||A||_||v||h)&&(y=function(t){var e,r,n,o,a,s,l,v=this,h=f(v),O=c(t),E=h.raw;if(E)return E.lastIndex=v.lastIndex,e=i(y,E,O),v.lastIndex=E.lastIndex,e;var j=h.groups,C=_&&v.sticky,k=i(u,v),P=v.source,I=0,R=O;if(C&&(k=x(k,"y",""),-1===m(k,"g")&&(k+="g"),R=w(O,v.lastIndex),v.lastIndex>0&&(!v.multiline||v.multiline&&"\n"!==b(O,v.lastIndex-1))&&(P="(?: "+P+")",R=" "+R,I++),r=new RegExp("^(?:"+P+")",k)),A&&(r=new RegExp("^"+P+"$(?!\\s)",k)),S&&(n=v.lastIndex),o=i(g,C?r:v,R),C?o?(o.input=w(o.input,I),o[0]=w(o[0],I),o.index=v.lastIndex,v.lastIndex+=o[0].length):v.lastIndex=0:S&&o&&(v.lastIndex=v.global?o.index+o[0].length:n),A&&o&&o.length>1&&i(d,o[0],r,(function(){for(a=1;a{var n=r(3349);t.exports=function(){var t=n(this),e="";return t.hasIndices&&(e+="d"),t.global&&(e+="g"),t.ignoreCase&&(e+="i"),t.multiline&&(e+="m"),t.dotAll&&(e+="s"),t.unicode&&(e+="u"),t.unicodeSets&&(e+="v"),t.sticky&&(e+="y"),e}},7176:(t,e,r)=>{var n=r(9295),o=r(379),i=r(8559),a=r(2061),c=RegExp.prototype;t.exports=function(t){var e=t.flags;return void 0!==e||"flags"in c||o(t,"flags")||!i(c,t)?e:n(a,t)}},4667:(t,e,r)=>{var n=r(3849),o=r(9317).RegExp,i=n((function(){var t=o("a","y");return t.lastIndex=2,null!==t.exec("abcd")})),a=i||n((function(){return!o("a","y").sticky})),c=i||n((function(){var t=o("^r","gy");return t.lastIndex=2,null!==t.exec("str")}));t.exports={BROKEN_CARET:c,MISSED_STICKY:a,UNSUPPORTED_Y:i}},6845:(t,e,r)=>{var n=r(3849),o=r(9317).RegExp;t.exports=n((function(){var t=o(".","s");return!(t.dotAll&&t.test("\n")&&"s"===t.flags)}))},5232:(t,e,r)=>{var n=r(3849),o=r(9317).RegExp;t.exports=n((function(){var t=o("(?b)","g");return"b"!==t.exec("b").groups.a||"bc"!=="b".replace(t,"$c")}))},2112:(t,e,r)=>{var n=r(2303),o=TypeError;t.exports=function(t){if(n(t))throw new o("Can't call method on "+t);return t}},7621:(t,e,r)=>{var n=r(2587).f,o=r(379),i=r(3633)("toStringTag");t.exports=function(t,e,r){t&&!r&&(t=t.prototype),t&&!o(t,i)&&n(t,i,{configurable:!0,value:e})}},6769:(t,e,r)=>{var n=r(7175),o=r(5434),i=n("keys");t.exports=function(t){return i[t]||(i[t]=o(t))}},1511:(t,e,r)=>{var n=r(4709),o=r(9317),i=r(3135),a="__core-js_shared__",c=t.exports=o[a]||i(a,{});(c.versions||(c.versions=[])).push({version:"3.37.0",mode:n?"pure":"global",copyright:"© 2014-2024 Denis Pushkarev (zloirock.ru)",license:"https://github.com/zloirock/core-js/blob/v3.37.0/LICENSE",source:"https://github.com/zloirock/core-js"})},7175:(t,e,r)=>{var n=r(1511);t.exports=function(t,e){return n[t]||(n[t]=e||{})}},5635:(t,e,r)=>{var n=r(3349),o=r(5478),i=r(2303),a=r(3633)("species");t.exports=function(t,e){var r,c=n(t).constructor;return void 0===c||i(r=n(c)[a])?e:o(r)}},449:(t,e,r)=>{var n=r(2538),o=r(7277),i=r(2277),a=r(2112),c=n("".charAt),u=n("".charCodeAt),s=n("".slice),l=function(t){return function(e,r){var n,l,p=i(a(e)),f=o(r),v=p.length;return f<0||f>=v?t?"":void 0:(n=u(p,f))<55296||n>56319||f+1===v||(l=u(p,f+1))<56320||l>57343?t?c(p,f):n:t?s(p,f,f+2):l-56320+(n-55296<<10)+65536}};t.exports={codeAt:l(!1),charAt:l(!0)}},7285:(t,e,r)=>{var n=r(446);t.exports=/Version\/10(?:\.\d+){1,2}(?: [\w./]+)?(?: Mobile\/\w+)? Safari\//.test(n)},8155:(t,e,r)=>{var n=r(2538),o=r(8020),i=r(2277),a=r(1568),c=r(2112),u=n(a),s=n("".slice),l=Math.ceil,p=function(t){return function(e,r,n){var a,p,f=i(c(e)),v=o(r),h=f.length,d=void 0===n?" ":i(n);return v<=h||""===d?f:((p=u(d,l((a=v-h)/d.length))).length>a&&(p=s(p,0,a)),t?f+p:p+f)}};t.exports={start:p(!1),end:p(!0)}},1568:(t,e,r)=>{var n=r(7277),o=r(2277),i=r(2112),a=RangeError;t.exports=function(t){var e=o(i(this)),r="",c=n(t);if(c<0||c===1/0)throw new a("Wrong number of repetitions");for(;c>0;(c>>>=1)&&(e+=e))1&c&&(r+=e);return r}},4500:(t,e,r)=>{var n=r(8784).PROPER,o=r(3849),i=r(9662);t.exports=function(t){return o((function(){return!!i[t]()||"​…᠎"!=="​…᠎"[t]()||n&&i[t].name!==t}))}},1136:(t,e,r)=>{var n=r(2538),o=r(2112),i=r(2277),a=r(9662),c=n("".replace),u=RegExp("^["+a+"]+"),s=RegExp("(^|[^"+a+"])["+a+"]+$"),l=function(t){return function(e){var r=i(o(e));return 1&t&&(r=c(r,u,"")),2&t&&(r=c(r,s,"$1")),r}};t.exports={start:l(1),end:l(2),trim:l(3)}},2349:(t,e,r)=>{var n=r(7722),o=r(3849),i=r(9317).String;t.exports=!!Object.getOwnPropertySymbols&&!o((function(){var t=Symbol("symbol detection");return!i(t)||!(Object(t)instanceof Symbol)||!Symbol.sham&&n&&n<41}))},3488:(t,e,r)=>{var n=r(9295),o=r(5793),i=r(3633),a=r(2202);t.exports=function(){var t=o("Symbol"),e=t&&t.prototype,r=e&&e.valueOf,c=i("toPrimitive");e&&!e[c]&&a(e,c,(function(t){return n(r,this)}),{arity:1})}},402:(t,e,r)=>{var n=r(2349);t.exports=n&&!!Symbol.for&&!!Symbol.keyFor},366:(t,e,r)=>{var n=r(2538);t.exports=n(1..valueOf)},3104:(t,e,r)=>{var n=r(7277),o=Math.max,i=Math.min;t.exports=function(t,e){var r=n(t);return r<0?o(r+e,0):i(r,e)}},8799:(t,e,r)=>{var n=r(6729),o=r(2112);t.exports=function(t){return n(o(t))}},7277:(t,e,r)=>{var n=r(4804);t.exports=function(t){var e=+t;return e!=e||0===e?0:n(e)}},8020:(t,e,r)=>{var n=r(7277),o=Math.min;t.exports=function(t){var e=n(t);return e>0?o(e,9007199254740991):0}},4683:(t,e,r)=>{var n=r(2112),o=Object;t.exports=function(t){return o(n(t))}},4499:(t,e,r)=>{var n=r(9295),o=r(3400),i=r(4975),a=r(2996),c=r(2988),u=r(3633),s=TypeError,l=u("toPrimitive");t.exports=function(t,e){if(!o(t)||i(t))return t;var r,u=a(t,l);if(u){if(void 0===e&&(e="default"),r=n(u,t,e),!o(r)||i(r))return r;throw new s("Can't convert object to primitive value")}return void 0===e&&(e="number"),c(t,e)}},2423:(t,e,r)=>{var n=r(4499),o=r(4975);t.exports=function(t){var e=n(t,"string");return o(e)?e:e+""}},6002:(t,e,r)=>{var n={};n[r(3633)("toStringTag")]="z",t.exports="[object z]"===String(n)},2277:(t,e,r)=>{var n=r(5361),o=String;t.exports=function(t){if("Symbol"===n(t))throw new TypeError("Cannot convert a Symbol value to a string");return o(t)}},7113:t=>{var e=String;t.exports=function(t){try{return e(t)}catch(t){return"Object"}}},5434:(t,e,r)=>{var n=r(2538),o=0,i=Math.random(),a=n(1..toString);t.exports=function(t){return"Symbol("+(void 0===t?"":t)+")_"+a(++o+i,36)}},9470:(t,e,r)=>{var n=r(2349);t.exports=n&&!Symbol.sham&&"symbol"==typeof Symbol.iterator},9576:(t,e,r)=>{var n=r(1870),o=r(3849);t.exports=n&&o((function(){return 42!==Object.defineProperty((function(){}),"prototype",{value:42,writable:!1}).prototype}))},740:(t,e,r)=>{var n=r(9317),o=r(1435),i=n.WeakMap;t.exports=o(i)&&/native code/.test(String(i))},3497:(t,e,r)=>{var n=r(5869),o=r(379),i=r(8093),a=r(2587).f;t.exports=function(t){var e=n.Symbol||(n.Symbol={});o(e,t)||a(e,t,{value:i.f(t)})}},8093:(t,e,r)=>{var n=r(3633);e.f=n},3633:(t,e,r)=>{var n=r(9317),o=r(7175),i=r(379),a=r(5434),c=r(2349),u=r(9470),s=n.Symbol,l=o("wks"),p=u?s.for||s:s&&s.withoutSetter||a;t.exports=function(t){return i(l,t)||(l[t]=c&&i(s,t)?s[t]:p("Symbol."+t)),l[t]}},9662:t=>{t.exports="\t\n\v\f\r               　\u2028\u2029\ufeff"},8168:(t,e,r)=>{var n=r(3076),o=r(3849),i=r(7506),a=r(3400),c=r(4683),u=r(608),s=r(2387),l=r(6558),p=r(3159),f=r(9331),v=r(3633),h=r(7722),d=v("isConcatSpreadable"),g=h>=51||!o((function(){var t=[];return t[d]=!1,t.concat()[0]!==t})),y=function(t){if(!a(t))return!1;var e=t[d];return void 0!==e?!!e:i(t)};n({target:"Array",proto:!0,arity:1,forced:!g||!f("concat")},{concat:function(t){var e,r,n,o,i,a=c(this),f=p(a,0),v=0;for(e=-1,n=arguments.length;e{var n=r(3076),o=r(9603).find,i=r(5127),a="find",c=!0;a in[]&&Array(1)[a]((function(){c=!1})),n({target:"Array",proto:!0,forced:c},{find:function(t){return o(this,t,arguments.length>1?arguments[1]:void 0)}}),i(a)},9332:(t,e,r)=>{var n=r(3076),o=r(7022);n({target:"Array",stat:!0,forced:!r(6786)((function(t){Array.from(t)}))},{from:o})},1945:(t,e,r)=>{var n=r(3076),o=r(1675).includes,i=r(3849),a=r(5127);n({target:"Array",proto:!0,forced:i((function(){return!Array(1).includes()}))},{includes:function(t){return o(this,t,arguments.length>1?arguments[1]:void 0)}}),a("includes")},8469:(t,e,r)=>{var n=r(8799),o=r(5127),i=r(1575),a=r(5043),c=r(2587).f,u=r(654),s=r(9055),l=r(4709),p=r(1870),f="Array Iterator",v=a.set,h=a.getterFor(f);t.exports=u(Array,"Array",(function(t,e){v(this,{type:f,target:n(t),index:0,kind:e})}),(function(){var t=h(this),e=t.target,r=t.index++;if(!e||r>=e.length)return t.target=void 0,s(void 0,!0);switch(t.kind){case"keys":return s(r,!1);case"values":return s(e[r],!1)}return s([r,e[r]],!1)}),"values");var d=i.Arguments=i.Array;if(o("keys"),o("values"),o("entries"),!l&&p&&"values"!==d.name)try{c(d,"name",{value:"values"})}catch(t){}},7560:(t,e,r)=>{var n=r(3076),o=r(2538),i=r(6729),a=r(8799),c=r(4832),u=o([].join);n({target:"Array",proto:!0,forced:i!==Object||!c("join",",")},{join:function(t){return u(a(this),void 0===t?",":t)}})},4008:(t,e,r)=>{var n=r(3076),o=r(9603).map;n({target:"Array",proto:!0,forced:!r(9331)("map")},{map:function(t){return o(this,t,arguments.length>1?arguments[1]:void 0)}})},1256:(t,e,r)=>{var n=r(3076),o=r(7506),i=r(4127),a=r(3400),c=r(3104),u=r(608),s=r(8799),l=r(6558),p=r(3633),f=r(9331),v=r(850),h=f("slice"),d=p("species"),g=Array,y=Math.max;n({target:"Array",proto:!0,forced:!h},{slice:function(t,e){var r,n,p,f=s(this),h=u(f),b=c(t,h),m=c(void 0===e?h:e,h);if(o(f)&&(r=f.constructor,(i(r)&&(r===g||o(r.prototype))||a(r)&&null===(r=r[d]))&&(r=void 0),r===g||void 0===r))return v(f,b,m);for(n=new(void 0===r?g:r)(y(m-b,0)),p=0;b{var n=r(3076),o=r(4683),i=r(3104),a=r(7277),c=r(608),u=r(4534),s=r(2387),l=r(3159),p=r(6558),f=r(60),v=r(9331)("splice"),h=Math.max,d=Math.min;n({target:"Array",proto:!0,forced:!v},{splice:function(t,e){var r,n,v,g,y,b,m=o(this),x=c(m),w=i(t,x),S=arguments.length;for(0===S?r=n=0:1===S?(r=0,n=x-w):(r=S-2,n=d(h(a(e),0),x-w)),s(x+r-n),v=l(m,n),g=0;gx-n+r;g--)f(m,g-1)}else if(r>n)for(g=x-n;g>w;g--)b=g+r-1,(y=g+n-1)in m?m[b]=m[y]:f(m,b);for(g=0;g{var n=r(1870),o=r(8784).EXISTS,i=r(2538),a=r(7448),c=Function.prototype,u=i(c.toString),s=/function\b(?:\s|\/\*[\S\s]*?\*\/|\/\/[^\n\r]*[\n\r]+)*([^\s(/]*)/,l=i(s.exec);n&&!o&&a(c,"name",{configurable:!0,get:function(){try{return l(s,u(this))[1]}catch(t){return""}}})},2264:(t,e,r)=>{var n=r(3076),o=r(5793),i=r(347),a=r(9295),c=r(2538),u=r(3849),s=r(1435),l=r(4975),p=r(850),f=r(9023),v=r(2349),h=String,d=o("JSON","stringify"),g=c(/./.exec),y=c("".charAt),b=c("".charCodeAt),m=c("".replace),x=c(1..toString),w=/[\uD800-\uDFFF]/g,S=/^[\uD800-\uDBFF]$/,_=/^[\uDC00-\uDFFF]$/,A=!v||u((function(){var t=o("Symbol")("stringify detection");return"[null]"!==d([t])||"{}"!==d({a:t})||"{}"!==d(Object(t))})),O=u((function(){return'"\\udf06\\ud834"'!==d("\udf06\ud834")||'"\\udead"'!==d("\udead")})),E=function(t,e){var r=p(arguments),n=f(e);if(s(n)||void 0!==t&&!l(t))return r[1]=function(t,e){if(s(n)&&(e=a(n,this,h(t),e)),!l(e))return e},i(d,null,r)},j=function(t,e,r){var n=y(r,e-1),o=y(r,e+1);return g(S,t)&&!g(_,o)||g(_,t)&&!g(S,n)?"\\u"+x(b(t,0),16):t};d&&n({target:"JSON",stat:!0,arity:3,forced:A||O},{stringify:function(t,e,r){var n=p(arguments),o=i(A?E:d,null,n);return O&&"string"==typeof o?m(o,w,j):o}})},4318:(t,e,r)=>{var n=r(3076),o=r(4709),i=r(1870),a=r(9317),c=r(5869),u=r(2538),s=r(9946),l=r(379),p=r(8285),f=r(8559),v=r(4975),h=r(4499),d=r(3849),g=r(1430).f,y=r(9697).f,b=r(2587).f,m=r(366),x=r(1136).trim,w="Number",S=a[w],_=c[w],A=S.prototype,O=a.TypeError,E=u("".slice),j=u("".charCodeAt),C=function(t){var e,r,n,o,i,a,c,u,s=h(t,"number");if(v(s))throw new O("Cannot convert a Symbol value to a number");if("string"==typeof s&&s.length>2)if(s=x(s),43===(e=j(s,0))||45===e){if(88===(r=j(s,2))||120===r)return NaN}else if(48===e){switch(j(s,1)){case 66:case 98:n=2,o=49;break;case 79:case 111:n=8,o=55;break;default:return+s}for(a=(i=E(s,2)).length,c=0;co)return NaN;return parseInt(i,n)}return+s},k=s(w,!S(" 0o1")||!S("0b1")||S("+0x1")),P=function(t){var e,r=arguments.length<1?0:S(function(t){var e=h(t,"number");return"bigint"==typeof e?e:C(e)}(t));return f(A,e=this)&&d((function(){m(e)}))?p(Object(r),this,P):r};P.prototype=A,k&&!o&&(A.constructor=P),n({global:!0,constructor:!0,wrap:!0,forced:k},{Number:P});var I=function(t,e){for(var r,n=i?g(e):"MAX_VALUE,MIN_VALUE,NaN,NEGATIVE_INFINITY,POSITIVE_INFINITY,EPSILON,MAX_SAFE_INTEGER,MIN_SAFE_INTEGER,isFinite,isInteger,isNaN,isSafeInteger,parseFloat,parseInt,fromString,range".split(","),o=0;n.length>o;o++)l(e,r=n[o])&&!l(t,r)&&b(t,r,y(e,r))};o&&_&&I(c[w],_),(k||o)&&I(c[w],S)},5746:(t,e,r)=>{var n=r(3076),o=r(2538),i=r(7277),a=r(366),c=r(1568),u=r(3849),s=RangeError,l=String,p=Math.floor,f=o(c),v=o("".slice),h=o(1..toFixed),d=function(t,e,r){return 0===e?r:e%2==1?d(t,e-1,r*t):d(t*t,e/2,r)},g=function(t,e,r){for(var n=-1,o=r;++n<6;)o+=e*t[n],t[n]=o%1e7,o=p(o/1e7)},y=function(t,e){for(var r=6,n=0;--r>=0;)n+=t[r],t[r]=p(n/e),n=n%e*1e7},b=function(t){for(var e=6,r="";--e>=0;)if(""!==r||0===e||0!==t[e]){var n=l(t[e]);r=""===r?n:r+f("0",7-n.length)+n}return r};n({target:"Number",proto:!0,forced:u((function(){return"0.000"!==h(8e-5,3)||"1"!==h(.9,0)||"1.25"!==h(1.255,2)||"1000000000000000128"!==h(0xde0b6b3a7640080,0)}))||!u((function(){h({})}))},{toFixed:function(t){var e,r,n,o,c=a(this),u=i(t),p=[0,0,0,0,0,0],h="",m="0";if(u<0||u>20)throw new s("Incorrect fraction digits");if(c!=c)return"NaN";if(c<=-1e21||c>=1e21)return l(c);if(c<0&&(h="-",c=-c),c>1e-21)if(r=(e=function(t){for(var e=0,r=t;r>=4096;)e+=12,r/=4096;for(;r>=2;)e+=1,r/=2;return e}(c*d(2,69,1))-69)<0?c*d(2,-e,1):c/d(2,e,1),r*=4503599627370496,(e=52-e)>0){for(g(p,0,r),n=u;n>=7;)g(p,1e7,0),n-=7;for(g(p,d(10,n,1),0),n=e-1;n>=23;)y(p,1<<23),n-=23;y(p,1<0?h+((o=m.length)<=u?"0."+f("0",u-o)+m:v(m,0,o-u)+"."+v(m,o-u)):h+m}})},7591:(t,e,r)=>{var n=r(3076),o=r(5567);n({target:"Object",stat:!0,arity:2,forced:Object.assign!==o},{assign:o})},5315:(t,e,r)=>{var n=r(3076),o=r(2349),i=r(3849),a=r(2059),c=r(4683);n({target:"Object",stat:!0,forced:!o||i((function(){a.f(1)}))},{getOwnPropertySymbols:function(t){var e=a.f;return e?e(c(t)):[]}})},7458:(t,e,r)=>{var n=r(3076),o=r(4683),i=r(9866);n({target:"Object",stat:!0,forced:r(3849)((function(){i(1)}))},{keys:function(t){return i(o(t))}})},9645:(t,e,r)=>{var n=r(6002),o=r(2202),i=r(6341);n||o(Object.prototype,"toString",i,{unsafe:!0})},9981:(t,e,r)=>{var n=r(3076),o=r(1601);n({target:"RegExp",proto:!0,forced:/./.exec!==o},{exec:o})},5991:(t,e,r)=>{var n=r(8784).PROPER,o=r(2202),i=r(3349),a=r(2277),c=r(3849),u=r(7176),s="toString",l=RegExp.prototype,p=l[s],f=c((function(){return"/a/b"!==p.call({source:"a",flags:"b"})})),v=n&&p.name!==s;(f||v)&&o(l,s,(function(){var t=i(this);return"/"+a(t.source)+"/"+a(u(t))}),{unsafe:!0})},6490:(t,e,r)=>{var n=r(449).charAt,o=r(2277),i=r(5043),a=r(654),c=r(9055),u="String Iterator",s=i.set,l=i.getterFor(u);a(String,"String",(function(t){s(this,{type:u,string:o(t),index:0})}),(function(){var t,e=l(this),r=e.string,o=e.index;return o>=r.length?c(void 0,!0):(t=n(r,o),e.index+=t.length,c(t,!1))}))},6475:(t,e,r)=>{var n=r(9295),o=r(2670),i=r(3349),a=r(2303),c=r(8020),u=r(2277),s=r(2112),l=r(2996),p=r(6691),f=r(5964);o("match",(function(t,e,r){return[function(e){var r=s(this),o=a(e)?void 0:l(e,t);return o?n(o,e,r):new RegExp(e)[t](u(r))},function(t){var n=i(this),o=u(t),a=r(e,n,o);if(a.done)return a.value;if(!n.global)return f(n,o);var s=n.unicode;n.lastIndex=0;for(var l,v=[],h=0;null!==(l=f(n,o));){var d=u(l[0]);v[h]=d,""===d&&(n.lastIndex=p(o,c(n.lastIndex),s)),h++}return 0===h?null:v}]}))},9666:(t,e,r)=>{var n=r(3076),o=r(8155).start;n({target:"String",proto:!0,forced:r(7285)},{padStart:function(t){return o(this,t,arguments.length>1?arguments[1]:void 0)}})},8171:(t,e,r)=>{r(3076)({target:"String",proto:!0},{repeat:r(1568)})},6230:(t,e,r)=>{var n=r(347),o=r(9295),i=r(2538),a=r(2670),c=r(3849),u=r(3349),s=r(1435),l=r(2303),p=r(7277),f=r(8020),v=r(2277),h=r(2112),d=r(6691),g=r(2996),y=r(1748),b=r(5964),m=r(3633)("replace"),x=Math.max,w=Math.min,S=i([].concat),_=i([].push),A=i("".indexOf),O=i("".slice),E="$0"==="a".replace(/./,"$0"),j=!!/./[m]&&""===/./[m]("a","$0");a("replace",(function(t,e,r){var i=j?"$":"$0";return[function(t,r){var n=h(this),i=l(t)?void 0:g(t,m);return i?o(i,t,n,r):o(e,v(n),t,r)},function(t,o){var a=u(this),c=v(t);if("string"==typeof o&&-1===A(o,i)&&-1===A(o,"$<")){var l=r(e,a,c,o);if(l.done)return l.value}var h=s(o);h||(o=v(o));var g,m=a.global;m&&(g=a.unicode,a.lastIndex=0);for(var E,j=[];null!==(E=b(a,c))&&(_(j,E),m);){""===v(E[0])&&(a.lastIndex=d(c,f(a.lastIndex),g))}for(var C,k="",P=0,I=0;I=P&&(k+=O(c,P,L)+R,P=L+T.length)}return k+O(c,P)}]}),!!c((function(){var t=/./;return t.exec=function(){var t=[];return t.groups={a:"7"},t},"7"!=="".replace(t,"$")}))||!E||j)},8402:(t,e,r)=>{var n=r(9295),o=r(2538),i=r(2670),a=r(3349),c=r(2303),u=r(2112),s=r(5635),l=r(6691),p=r(8020),f=r(2277),v=r(2996),h=r(5964),d=r(4667),g=r(3849),y=d.UNSUPPORTED_Y,b=Math.min,m=o([].push),x=o("".slice),w=!g((function(){var t=/(?:)/,e=t.exec;t.exec=function(){return e.apply(this,arguments)};var r="ab".split(t);return 2!==r.length||"a"!==r[0]||"b"!==r[1]})),S="c"==="abbc".split(/(b)*/)[1]||4!=="test".split(/(?:)/,-1).length||2!=="ab".split(/(?:ab)*/).length||4!==".".split(/(.?)(.?)/).length||".".split(/()()/).length>1||"".split(/.?/).length;i("split",(function(t,e,r){var o="0".split(void 0,0).length?function(t,r){return void 0===t&&0===r?[]:n(e,this,t,r)}:e;return[function(e,r){var i=u(this),a=c(e)?void 0:v(e,t);return a?n(a,e,i,r):n(o,f(i),e,r)},function(t,n){var i=a(this),c=f(t);if(!S){var u=r(o,i,c,n,o!==e);if(u.done)return u.value}var v=s(i,RegExp),d=i.unicode,g=(i.ignoreCase?"i":"")+(i.multiline?"m":"")+(i.unicode?"u":"")+(y?"g":"y"),w=new v(y?"^(?:"+i.source+")":i,g),_=void 0===n?4294967295:n>>>0;if(0===_)return[];if(0===c.length)return null===h(w,c)?[c]:[];for(var A=0,O=0,E=[];O{var n,o=r(3076),i=r(4890),a=r(9697).f,c=r(8020),u=r(2277),s=r(3181),l=r(2112),p=r(5850),f=r(4709),v=i("".slice),h=Math.min,d=p("startsWith");o({target:"String",proto:!0,forced:!!(f||d||(n=a(String.prototype,"startsWith"),!n||n.writable))&&!d},{startsWith:function(t){var e=u(l(this));s(t);var r=c(h(arguments.length>1?arguments[1]:void 0,e.length)),n=u(t);return v(e,r,r+n.length)===n}})},3624:(t,e,r)=>{var n=r(3076),o=r(1136).trim;n({target:"String",proto:!0,forced:r(4500)("trim")},{trim:function(){return o(this)}})},2528:(t,e,r)=>{var n=r(3076),o=r(9317),i=r(9295),a=r(2538),c=r(4709),u=r(1870),s=r(2349),l=r(3849),p=r(379),f=r(8559),v=r(3349),h=r(8799),d=r(2423),g=r(2277),y=r(5658),b=r(8250),m=r(9866),x=r(1430),w=r(2260),S=r(2059),_=r(9697),A=r(2587),O=r(4087),E=r(6203),j=r(2202),C=r(7448),k=r(7175),P=r(6769),I=r(147),R=r(5434),T=r(3633),L=r(8093),F=r(3497),N=r(3488),M=r(7621),D=r(5043),B=r(9603).forEach,$=P("hidden"),H="Symbol",G="prototype",U=D.set,V=D.getterFor(H),W=Object[G],z=o.Symbol,Y=z&&z[G],X=o.RangeError,K=o.TypeError,q=o.QObject,J=_.f,Q=A.f,Z=w.f,tt=E.f,et=a([].push),rt=k("symbols"),nt=k("op-symbols"),ot=k("wks"),it=!q||!q[G]||!q[G].findChild,at=function(t,e,r){var n=J(W,e);n&&delete W[e],Q(t,e,r),n&&t!==W&&Q(W,e,n)},ct=u&&l((function(){return 7!==b(Q({},"a",{get:function(){return Q(this,"a",{value:7}).a}})).a}))?at:Q,ut=function(t,e){var r=rt[t]=b(Y);return U(r,{type:H,tag:t,description:e}),u||(r.description=e),r},st=function(t,e,r){t===W&&st(nt,e,r),v(t);var n=d(e);return v(r),p(rt,n)?(r.enumerable?(p(t,$)&&t[$][n]&&(t[$][n]=!1),r=b(r,{enumerable:y(0,!1)})):(p(t,$)||Q(t,$,y(1,b(null))),t[$][n]=!0),ct(t,n,r)):Q(t,n,r)},lt=function(t,e){v(t);var r=h(e),n=m(r).concat(ht(r));return B(n,(function(e){u&&!i(pt,r,e)||st(t,e,r[e])})),t},pt=function(t){var e=d(t),r=i(tt,this,e);return!(this===W&&p(rt,e)&&!p(nt,e))&&(!(r||!p(this,e)||!p(rt,e)||p(this,$)&&this[$][e])||r)},ft=function(t,e){var r=h(t),n=d(e);if(r!==W||!p(rt,n)||p(nt,n)){var o=J(r,n);return!o||!p(rt,n)||p(r,$)&&r[$][n]||(o.enumerable=!0),o}},vt=function(t){var e=Z(h(t)),r=[];return B(e,(function(t){p(rt,t)||p(I,t)||et(r,t)})),r},ht=function(t){var e=t===W,r=Z(e?nt:h(t)),n=[];return B(r,(function(t){!p(rt,t)||e&&!p(W,t)||et(n,rt[t])})),n};s||(j(Y=(z=function(){if(f(Y,this))throw new K("Symbol is not a constructor");var t=arguments.length&&void 0!==arguments[0]?g(arguments[0]):void 0,e=R(t),r=function(t){var n=void 0===this?o:this;n===W&&i(r,nt,t),p(n,$)&&p(n[$],e)&&(n[$][e]=!1);var a=y(1,t);try{ct(n,e,a)}catch(t){if(!(t instanceof X))throw t;at(n,e,a)}};return u&&it&&ct(W,e,{configurable:!0,set:r}),ut(e,t)})[G],"toString",(function(){return V(this).tag})),j(z,"withoutSetter",(function(t){return ut(R(t),t)})),E.f=pt,A.f=st,O.f=lt,_.f=ft,x.f=w.f=vt,S.f=ht,L.f=function(t){return ut(T(t),t)},u&&(C(Y,"description",{configurable:!0,get:function(){return V(this).description}}),c||j(W,"propertyIsEnumerable",pt,{unsafe:!0}))),n({global:!0,constructor:!0,wrap:!0,forced:!s,sham:!s},{Symbol:z}),B(m(ot),(function(t){F(t)})),n({target:H,stat:!0,forced:!s},{useSetter:function(){it=!0},useSimple:function(){it=!1}}),n({target:"Object",stat:!0,forced:!s,sham:!u},{create:function(t,e){return void 0===e?b(t):lt(b(t),e)},defineProperty:st,defineProperties:lt,getOwnPropertyDescriptor:ft}),n({target:"Object",stat:!0,forced:!s},{getOwnPropertyNames:vt}),N(),M(z,H),I[$]=!0},1725:(t,e,r)=>{var n=r(3076),o=r(1870),i=r(9317),a=r(2538),c=r(379),u=r(1435),s=r(8559),l=r(2277),p=r(7448),f=r(4518),v=i.Symbol,h=v&&v.prototype;if(o&&u(v)&&(!("description"in h)||void 0!==v().description)){var d={},g=function(){var t=arguments.length<1||void 0===arguments[0]?void 0:l(arguments[0]),e=s(h,this)?new v(t):void 0===t?v():v(t);return""===t&&(d[e]=!0),e};f(g,v),g.prototype=h,h.constructor=g;var y="Symbol(description detection)"===String(v("description detection")),b=a(h.valueOf),m=a(h.toString),x=/^Symbol\((.*)\)[^)]+$/,w=a("".replace),S=a("".slice);p(h,"description",{configurable:!0,get:function(){var t=b(this);if(c(d,t))return"";var e=m(t),r=y?S(e,7,-1):w(e,x,"$1");return""===r?void 0:r}}),n({global:!0,constructor:!0,forced:!0},{Symbol:g})}},3028:(t,e,r)=>{var n=r(3076),o=r(5793),i=r(379),a=r(2277),c=r(7175),u=r(402),s=c("string-to-symbol-registry"),l=c("symbol-to-string-registry");n({target:"Symbol",stat:!0,forced:!u},{for:function(t){var e=a(t);if(i(s,e))return s[e];var r=o("Symbol")(e);return s[e]=r,l[r]=e,r}})},8381:(t,e,r)=>{r(3497)("iterator")},905:(t,e,r)=>{r(2528),r(3028),r(38),r(2264),r(5315)},38:(t,e,r)=>{var n=r(3076),o=r(379),i=r(4975),a=r(7113),c=r(7175),u=r(402),s=c("symbol-to-string-registry");n({target:"Symbol",stat:!0,forced:!u},{keyFor:function(t){if(!i(t))throw new TypeError(a(t)+" is not a symbol");if(o(s,t))return s[t]}})},8190:(t,e,r)=>{var n=r(9317),o=r(1530),i=r(6334),a=r(3833),c=r(4477),u=function(t){if(t&&t.forEach!==a)try{c(t,"forEach",a)}catch(e){t.forEach=a}};for(var s in o)o[s]&&u(n[s]&&n[s].prototype);u(i)},4207:(t,e,r)=>{var n=r(9317),o=r(1530),i=r(6334),a=r(8469),c=r(4477),u=r(7621),s=r(3633)("iterator"),l=a.values,p=function(t,e){if(t){if(t[s]!==l)try{c(t,s,l)}catch(e){t[s]=l}if(u(t,e,!0),o[e])for(var r in a)if(t[r]!==a[r])try{c(t,r,a[r])}catch(e){t[r]=a[r]}}};for(var f in o)p(n[f]&&n[f].prototype,f);p(i,"DOMTokenList")}},e={};function r(n){var o=e[n];if(void 0!==o)return o.exports;var i=e[n]={exports:{}};return t[n].call(i.exports,i,i.exports,r),i.exports}r.d=(t,e)=>{for(var n in e)r.o(e,n)&&!r.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(t){if("object"==typeof window)return window}}(),r.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r.r=t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})};var n={};return(()=>{r.d(n,{default:()=>R});var t={};r.r(t),r.d(t,{adjustableInputNumbers:()=>f,createElementFromString:()=>u,createFromTemplate:()=>s,eventPath:()=>l,off:()=>c,on:()=>a,resolveElement:()=>p});r(8168),r(5367),r(905),r(1725),r(8381),r(9332),r(1945),r(8469),r(5280),r(4318),r(1256),r(3892),r(7591),r(7458),r(9645),r(9981),r(5991),r(6490),r(6475),r(8171),r(4430),r(8190),r(4207),r(6230),r(8402),r(3624);function e(t,e){var r="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(r)return(r=r.call(t)).next.bind(r);if(Array.isArray(t)||(r=function(t,e){if(!t)return;if("string"==typeof t)return o(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return o(t,e)}(t))||e&&t&&"number"==typeof t.length){r&&(t=r);var n=0;return function(){return n>=t.length?{done:!0}:{done:!1,value:t[n++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function o(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r>/g).reduce((function(t,e,r,n){return t=t.querySelector(e),r=i?(i=r,e(Number(t),n,o)):(o++,t)})),t.focus(),t.setSelectionRange(i,i),r.preventDefault(),t.dispatchEvent(new Event("input"))}void 0===e&&(e=function(t){return t}),a(t,"focus",(function(){return a(window,"wheel",r,{passive:!1})})),a(t,"blur",(function(){return c(window,"wheel",r)}))}r(7560),r(4008),r(9666);var v=Math.min,h=Math.max,d=Math.floor,g=Math.round;function y(t,e,r){e/=100,r/=100;var n=d(t=t/360*6),o=t-n,i=r*(1-e),a=r*(1-o*e),c=r*(1-(1-o)*e),u=n%6;return[255*[r,a,i,i,c,r][u],255*[c,r,r,a,i,i][u],255*[i,i,c,r,r,a][u]]}function b(t,e,r){var n,o,i=v(t/=255,e/=255,r/=255),a=h(t,e,r),c=a-i;if(0===c)n=o=0;else{o=c/a;var u=((a-t)/6+c/2)/c,s=((a-e)/6+c/2)/c,l=((a-r)/6+c/2)/c;t===a?n=l-s:e===a?n=1/3+u-l:r===a&&(n=2/3+s-u),n<0?n+=1:n>1&&(n-=1)}return[360*n,100*o,100*a]}function m(t,e,r,n){e/=100,r/=100;var o=255*(1-v(1,(t/=100)*(1-(n/=100))+n)),i=255*(1-v(1,e*(1-n)+n)),a=255*(1-v(1,r*(1-n)+n));return[].concat(b(o,i,a))}function x(t,e,r){e/=100;var n=2*(e*=(r/=100)<.5?r:1-r)/(r+e)*100,o=100*(r+e);return[t,isNaN(n)?0:n,o]}function w(t){return b.apply(void 0,t.match(/.{2}/g).map((function(t){return parseInt(t,16)})))}function S(t){t=t.match(/^[a-zA-Z]+$/)?function(t){if("black"===t.toLowerCase())return"#000";var e=document.createElement("canvas").getContext("2d");return e.fillStyle=t,"#000"===e.fillStyle?null:e.fillStyle}(t):t;var e,r={cmyk:/^cmyk\D+([\d.]+)\D+([\d.]+)\D+([\d.]+)\D+([\d.]+)/i,rgba:/^rgba?\D+([\d.]+)(%?)\D+([\d.]+)(%?)\D+([\d.]+)(%?)\D*?(([\d.]+)(%?)|$)/i,hsla:/^hsla?\D+([\d.]+)\D+([\d.]+)\D+([\d.]+)\D*?(([\d.]+)(%?)|$)/i,hsva:/^hsva?\D+([\d.]+)\D+([\d.]+)\D+([\d.]+)\D*?(([\d.]+)(%?)|$)/i,hexa:/^#?(([\dA-Fa-f]{3,4})|([\dA-Fa-f]{6})|([\dA-Fa-f]{8}))$/i},n=function(t){return t.map((function(t){return/^(|\d+)\.\d+|\d+$/.test(t)?Number(t):void 0}))};t:for(var o in r)if(e=r[o].exec(t))switch(o){case"cmyk":var i=n(e),a=i[1],c=i[2],u=i[3],s=i[4];if(a>100||c>100||u>100||s>100)break t;return{values:m(a,c,u,s),type:o};case"rgba":var l=n(e),p=l[1],f=l[3],v=l[5],h=l[8];if(p="%"===e[2]?p/100*255:p,f="%"===e[4]?f/100*255:f,v="%"===e[6]?v/100*255:v,h="%"===e[9]?h/100:h,p>255||f>255||v>255||h<0||h>1)break t;return{values:[].concat(b(p,f,v),[h]),a:h,type:o};case"hexa":var d=e[1];4!==d.length&&3!==d.length||(d=d.split("").map((function(t){return t+t})).join(""));var g=d.substring(0,6),y=d.substring(6);return y=y?parseInt(y,16)/255:void 0,{values:[].concat(w(g),[y]),a:y,type:o};case"hsla":var S=n(e),_=S[1],A=S[2],O=S[3],E=S[5];if(E="%"===e[6]?E/100:E,_>360||A>100||O>100||E<0||E>1)break t;return{values:[].concat(x(_,A,O),[E]),a:E,type:o};case"hsva":var j=n(e),C=j[1],k=j[2],P=j[3],I=j[5];if(I="%"===e[6]?I/100:I,C>360||k>100||P>100||I<0||I>1)break t;return{values:[C,k,P,I],a:I,type:o}}return{values:null,type:null}}r(5746);function _(t,e,r,n){void 0===t&&(t=0),void 0===e&&(e=0),void 0===r&&(r=0),void 0===n&&(n=1);var o=function(t,e){return function(r){return void 0===r&&(r=-1),e(~r?t.map((function(t){return Number(t.toFixed(r))})):t)}},i={h:t,s:e,v:r,a:n,toHSVA:function(){var t=[i.h,i.s,i.v,i.a];return t.toString=o(t,(function(t){return"hsva("+t[0]+", "+t[1]+"%, "+t[2]+"%, "+i.a+")"})),t},toHSLA:function(){var t=[].concat(function(t,e,r){var n=(2-(e/=100))*(r/=100)/2;return 0!==n&&(e=1===n?0:n<.5?e*r/(2*n):e*r/(2-2*n)),[t,100*e,100*n]}(i.h,i.s,i.v),[i.a]);return t.toString=o(t,(function(t){return"hsla("+t[0]+", "+t[1]+"%, "+t[2]+"%, "+i.a+")"})),t},toRGBA:function(){var t=[].concat(y(i.h,i.s,i.v),[i.a]);return t.toString=o(t,(function(t){return"rgba("+t[0]+", "+t[1]+", "+t[2]+", "+i.a+")"})),t},toCMYK:function(){var t=function(t,e,r){var n=y(t,e,r),o=n[0]/255,i=n[1]/255,a=n[2]/255,c=v(1-o,1-i,1-a);return[100*(1===c?0:(1-o-c)/(1-c)),100*(1===c?0:(1-i-c)/(1-c)),100*(1===c?0:(1-a-c)/(1-c)),100*c]}(i.h,i.s,i.v);return t.toString=o(t,(function(t){return"cmyk("+t[0]+"%, "+t[1]+"%, "+t[2]+"%, "+t[3]+"%)"})),t},toHEXA:function(){var t=function(t,e,r){return y(t,e,r).map((function(t){return g(t).toString(16).padStart(2,"0")}))}(i.h,i.s,i.v),e=i.a>=1?"":Number((255*i.a).toFixed(0)).toString(16).toUpperCase().padStart(2,"0");return e&&t.push(e),t.toString=function(){return"#"+t.join("").toUpperCase()},t},clone:function(){return _(i.h,i.s,i.v,i.a)}};return i}var A=function(t){return Math.max(Math.min(t,1),0)};function O(t){var e={options:Object.assign({lock:null,onchange:function(){return 0},onstop:function(){return 0}},t),_keyboard:function(t){var r=e.options,n=t.type,o=t.key;if(document.activeElement===r.wrapper){var i=e.options.lock,a="ArrowUp"===o,c="ArrowRight"===o,u="ArrowDown"===o,s="ArrowLeft"===o;if("keydown"===n&&(a||c||u||s)){var l=0,p=0;"v"===i?l=a||c?1:-1:"h"===i?l=a||c?-1:1:(p=a?-1:u?1:0,l=s?-1:c?1:0),e.update(A(e.cache.x+.01*l),A(e.cache.y+.01*p)),t.preventDefault()}else o.startsWith("Arrow")&&(e.options.onstop(),t.preventDefault())}},_tapstart:function(t){a(document,["mouseup","touchend","touchcancel"],e._tapstop),a(document,["mousemove","touchmove"],e._tapmove),t.cancelable&&t.preventDefault(),e._tapmove(t)},_tapmove:function(t){var r=e.options,n=e.cache,o=r.lock,i=r.element,a=r.wrapper.getBoundingClientRect(),c=0,u=0;if(t){var s=t&&t.touches&&t.touches[0];c=t?(s||t).clientX:0,u=t?(s||t).clientY:0,ca.left+a.width&&(c=a.left+a.width),ua.top+a.height&&(u=a.top+a.height),c-=a.left,u-=a.top}else n&&(c=n.x*a.width,u=n.y*a.height);"h"!==o&&(i.style.left="calc("+c/a.width*100+"% - "+i.offsetWidth/2+"px)"),"v"!==o&&(i.style.top="calc("+u/a.height*100+"% - "+i.offsetHeight/2+"px)"),e.cache={x:c/a.width,y:u/a.height};var l=A(c/a.width),p=A(u/a.height);switch(o){case"v":return r.onchange(l);case"h":return r.onchange(p);default:return r.onchange(l,p)}},_tapstop:function(){e.options.onstop(),c(document,["mouseup","touchend","touchcancel"],e._tapstop),c(document,["mousemove","touchmove"],e._tapmove)},trigger:function(){e._tapmove()},update:function(t,r){void 0===t&&(t=0),void 0===r&&(r=0);var n=e.options.wrapper.getBoundingClientRect(),o=n.left,i=n.top,a=n.width,c=n.height;"h"===e.options.lock&&(r=t),e._tapmove({clientX:o+a*t,clientY:i+c*r})},destroy:function(){var t=e.options,r=e._tapstart,n=e._keyboard;c(document,["keydown","keyup"],n),c([t.wrapper,t.element],"mousedown",r),c([t.wrapper,t.element],"touchstart",r,{passive:!1})}},r=e.options,n=e._tapstart,o=e._keyboard;return a([r.wrapper,r.element],"mousedown",n),a([r.wrapper,r.element],"touchstart",n,{passive:!1}),a(document,["keydown","keyup"],o),e}function E(e){void 0===e&&(e={}),e=Object.assign({onchange:function(){return 0},className:"",elements:[]},e);var r=a(e.elements,"click",(function(t){e.elements.forEach((function(r){return r.classList[t.target===r?"add":"remove"](e.className)})),e.onchange(t),t.stopPropagation()}));return{destroy:function(){return c.apply(t,r)}}}const j={variantFlipOrder:{start:"sme",middle:"mse",end:"ems"},positionFlipOrder:{top:"tbrl",right:"rltb",bottom:"btrl",left:"lrbt"},position:"bottom",margin:8,padding:0},C=(t,e,r)=>{const n="object"!=typeof t||t instanceof HTMLElement?{reference:t,popper:e,...r}:t;return{update(t=n){const{reference:e,popper:r}=Object.assign(n,t);if(!r||!e)throw new Error("Popper- or reference-element missing.");return((t,e,r)=>{const{container:n,arrow:o,margin:i,padding:a,position:c,variantFlipOrder:u,positionFlipOrder:s}={container:document.documentElement.getBoundingClientRect(),...j,...r},{left:l,top:p}=e.style;e.style.left="0",e.style.top="0";const f=t.getBoundingClientRect(),v=e.getBoundingClientRect(),h={t:f.top-v.height-i,b:f.bottom+i,r:f.right+i,l:f.left-v.width-i},d={vs:f.left,vm:f.left+f.width/2-v.width/2,ve:f.left+f.width-v.width,hs:f.top,hm:f.bottom-f.height/2-v.height/2,he:f.bottom-v.height},[g,y="middle"]=c.split("-"),b=s[g],m=u[y],{top:x,left:w,bottom:S,right:_}=n;for(const t of b){const r="t"===t||"b"===t;let n=h[t];const[i,c]=r?["top","left"]:["left","top"],[u,s]=r?[v.height,v.width]:[v.width,v.height],[l,p]=r?[S,_]:[_,S],[g,y]=r?[x,w]:[w,x];if(!(nl))for(const l of m){let h=d[(r?"v":"h")+l];if(!(hp)){if(h-=v[c],n-=v[i],e.style[c]=`${h}px`,e.style[i]=`${n}px`,o){const e=r?f.width/2:f.height/2,a=s/2,p=e>a,v=h+{s:p?a:e,m:a,e:p?a:s-e}[l],d=n+{t:u,b:0,r:0,l:u}[t];o.style[c]=`${v}px`,o.style[i]=`${d}px`}return t+l}}}return e.style.left=l,e.style.top=p,null})(e,r,n)}}};var k;function P(t,e){var r="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(r)return(r=r.call(t)).next.bind(r);if(Array.isArray(t)||(r=function(t,e){if(!t)return;if("string"==typeof t)return I(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return I(t,e)}(t))||e&&t&&"number"==typeof t.length){r&&(t=r);var n=0;return function(){return n>=t.length?{done:!0}:{done:!1,value:t[n++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function I(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r\n\n '+(n?"":'')+'\n\n
\n
\n
\n \n
\n
\n\n
\n
\n
\n
\n\n
\n
\n
\n
\n\n
\n
\n
\n
\n
\n\n
\n\n
\n \n\n \n \n \n \n \n\n \n \n \n
\n
\n
\n '),(v=f.interaction).options.find((function(t){return!t.hidden&&!t.classList.add("active")})),v.type=function(){return v.options.find((function(t){return t.classList.contains("active")}))},f),h.useAsButton&&(this._root.button=h.el),h.container.appendChild(this._root.root)},r._finalBuild=function(){var t=this.options,e=this._root;if(t.container.removeChild(e.root),t.inline){var r=t.el.parentElement;t.el.nextSibling?r.insertBefore(e.app,t.el.nextSibling):r.appendChild(e.app)}else t.container.appendChild(e.app);t.useAsButton?t.inline&&t.el.remove():t.el.parentNode.replaceChild(e.root,t.el),t.disabled&&this.disable(),t.comparison||(e.button.style.transition="none",t.useAsButton||(e.preview.lastColor.style.transition="none")),this.hide()},r._buildComponents=function(){var t=this,e=this,r=this.options.components,n=(e.options.sliders||"v").repeat(2),o=n.match(/^[vh]+$/g)?n:[],i=o[0],a=o[1],c=function(){return t._color||(t._color=t._lastColor.clone())},u={palette:O({element:e._root.palette.picker,wrapper:e._root.palette.palette,onstop:function(){return e._emit("changestop","slider",e)},onchange:function(t,n){if(r.palette){var o=c(),i=e._root,a=e.options,u=i.preview,s=u.lastColor,l=u.currentColor;e._recalc&&(o.s=100*t,o.v=100-100*n,o.v<0&&(o.v=0),e._updateOutput("slider"));var p=o.toRGBA().toString(0);this.element.style.background=p,this.wrapper.style.background="\n linear-gradient(to top, rgba(0, 0, 0, "+o.a+"), transparent),\n linear-gradient(to left, hsla("+o.h+", 100%, 50%, "+o.a+"), rgba(255, 255, 255, "+o.a+"))\n ",a.comparison?a.useAsButton||e._lastColor||s.style.setProperty("--pcr-color",p):(i.button.style.setProperty("--pcr-color",p),i.button.classList.remove("clear"));for(var f,v=o.toHEXA().toString(),h=P(e._swatchColors);!(f=h()).done;){var d=f.value,g=d.el,y=d.color;g.classList[v===y.toHEXA().toString()?"add":"remove"]("pcr-active")}l.style.setProperty("--pcr-color",p)}}}),hue:O({lock:"v"===a?"h":"v",element:e._root.hue.picker,wrapper:e._root.hue.slider,onstop:function(){return e._emit("changestop","slider",e)},onchange:function(t){if(r.hue&&r.palette){var n=c();e._recalc&&(n.h=360*t),this.element.style.backgroundColor="hsl("+n.h+", 100%, 50%)",u.palette.trigger()}}}),opacity:O({lock:"v"===i?"h":"v",element:e._root.opacity.picker,wrapper:e._root.opacity.slider,onstop:function(){return e._emit("changestop","slider",e)},onchange:function(t){if(r.opacity&&r.palette){var n=c();e._recalc&&(n.a=Math.round(100*t)/100),this.element.style.background="rgba(0, 0, 0, "+n.a+")",u.palette.trigger()}}}),selectable:E({elements:e._root.interaction.options,className:"active",onchange:function(t){e._representation=t.target.getAttribute("data-type").toUpperCase(),e._recalc&&e._updateOutput("swatch")}})};this._components=u},r._bindEvents=function(){var t=this,e=this._root,r=this.options,n=[a(e.interaction.clear,"click",(function(){return t._clearColor()})),a([e.interaction.cancel,e.preview.lastColor],"click",(function(){t.setHSVA.apply(t,(t._lastColor||t._color).toHSVA().concat([!0])),t._emit("cancel")})),a(e.interaction.save,"click",(function(){!t.applyColor()&&!r.showAlways&&t.hide()})),a(e.interaction.result,["keyup","input"],(function(e){t.setColor(e.target.value,!0)&&!t._initializingActive&&(t._emit("change",t._color,"input",t),t._emit("changestop","input",t)),e.stopImmediatePropagation()})),a(e.interaction.result,["focus","blur"],(function(e){t._recalc="blur"===e.type,t._recalc&&t._updateOutput(null)})),a([e.palette.palette,e.palette.picker,e.hue.slider,e.hue.picker,e.opacity.slider,e.opacity.picker],["mousedown","touchstart"],(function(){return t._recalc=!0}),{passive:!0})];if(!r.showAlways){var o=r.closeWithKey;n.push(a(e.button,"click",(function(){return t.isOpen()?t.hide():t.show()})),a(document,"keyup",(function(e){return t.isOpen()&&(e.key===o||e.code===o)&&t.hide()})),a(document,["touchstart","mousedown"],(function(r){t.isOpen()&&!l(r).some((function(t){return t===e.app||t===e.button}))&&t.hide()}),{capture:!0}))}if(r.adjustableNumbers){var i={rgba:[255,255,255,1],hsva:[360,100,100,1],hsla:[360,100,100,1],cmyk:[100,100,100,100]};f(e.interaction.result,(function(e,r,n){var o=i[t.getColorRepresentation().toLowerCase()];if(o){var a=o[n],c=e+(a>=100?1e3*r:r);return c<=0?0:Number((c1?r-1:0),o=1;o');return o.swatches.appendChild(c),n.push({el:c,color:i}),this._eventBindings.push(a(c,"click",(function(){e.setHSVA.apply(e,i.toHSVA().concat([!0])),e._emit("swatchselect",i),e._emit("change",i,"swatch",e)}))),!0}return!1},r.removeSwatch=function(t){var e=this._swatchColors[t];if(e){var r=e.el;return this._root.swatches.removeChild(r),this._swatchColors.splice(t,1),!0}return!1},r.applyColor=function(t){void 0===t&&(t=!1);var e=this._root,r=e.preview,n=e.button,o=this._color.toRGBA().toString(0);return r.lastColor.style.setProperty("--pcr-color",o),this.options.useAsButton||n.style.setProperty("--pcr-color",o),n.classList.remove("clear"),this._lastColor=this._color.clone(),this._initializingActive||t||this._emit("save",this._color),this},r.destroy=function(){var e=this;cancelAnimationFrame(this._setupAnimationFrame),this._eventBindings.forEach((function(e){return c.apply(t,e)})),Object.keys(this._components).forEach((function(t){return e._components[t].destroy()}))},r.destroyAndRemove=function(){var t=this;this.destroy();var e=this._root,r=e.root,n=e.app;r.parentElement&&r.parentElement.removeChild(r),n.parentElement.removeChild(n),Object.keys(this).forEach((function(e){return t[e]=null}))},r.hide=function(){return!!this.isOpen()&&(this._root.app.classList.remove("visible"),this._emit("hide"),!0)},r.show=function(){return!this.options.disabled&&!this.isOpen()&&(this._root.app.classList.add("visible"),this._rePositioningPicker(),this._emit("show",this._color),this)},r.isOpen=function(){return this._root.app.classList.contains("visible")},r.setHSVA=function(t,e,r,n,o){void 0===t&&(t=360),void 0===e&&(e=0),void 0===r&&(r=0),void 0===n&&(n=1),void 0===o&&(o=!1);var i=this._recalc;if(this._recalc=!1,t<0||t>360||e<0||e>100||r<0||r>100||n<0||n>1)return!1;this._color=_(t,e,r,n);var a=this._components,c=a.hue,u=a.opacity,s=a.palette;return c.update(t/360),u.update(n),s.update(e/100,1-r/100),o||this.applyColor(),i&&this._updateOutput(),this._recalc=i,!0},r.setColor=function(t,e){if(void 0===e&&(e=!1),null===t)return this._clearColor(e),!0;var r=this._parseLocalColor(t),n=r.values,o=r.type;if(n){var i=o.toUpperCase(),a=this._root.interaction.options,c=a.find((function(t){return t.getAttribute("data-type")===i}));if(c&&!c.hidden)for(var u,s=P(a);!(u=s()).done;){var l=u.value;l.classList[l===c?"add":"remove"]("active")}return!!this.setHSVA.apply(this,n.concat([e]))&&this.setColorRepresentation(i)}return!1},r.setColorRepresentation=function(t){return t=t.toUpperCase(),!!this._root.interaction.options.find((function(e){return e.getAttribute("data-type").startsWith(t)&&!e.click()}))},r.getColorRepresentation=function(){return this._representation},r.getColor=function(){return this._color},r.getSelectedColor=function(){return this._lastColor},r.getRoot=function(){return this._root},r.disable=function(){return this.hide(),this.options.disabled=!0,this._root.button.classList.add("disabled"),this},r.enable=function(){return this.options.disabled=!1,this._root.button.classList.remove("disabled"),this},e}();k=R,R.utils=t,R.version="1.9.1",R.I18N_DEFAULTS={"ui:dialog":"color picker dialog","btn:toggle":"toggle color picker dialog","btn:swatch":"color swatch","btn:last-color":"use previous color","btn:save":"Save","btn:cancel":"Cancel","btn:clear":"Clear","aria:btn:save":"save and close","aria:btn:cancel":"cancel and close","aria:btn:clear":"clear and close","aria:input":"color input field","aria:palette":"color selection area","aria:hue":"hue selection slider","aria:opacity":"selection slider"},R.DEFAULT_OPTIONS={appClass:null,theme:"classic",useAsButton:!1,padding:8,disabled:!1,comparison:!0,closeOnScroll:!1,outputPrecision:0,lockOpacity:!1,autoReposition:!0,container:"body",components:{interaction:{}},i18n:{},swatches:null,inline:!1,sliders:null,default:"#42445a",defaultRepresentation:null,position:"bottom-middle",adjustableNumbers:!0,showAlways:!1,closeWithKey:"Escape"},R.create=function(t){return new k(t)}})(),n=n.default})())); From eb5498ea3a6e2947d5555f0f2e5fe7d852295a78 Mon Sep 17 00:00:00 2001 From: OnkarRuikar <87750369+OnkarRuikar@users.noreply.github.com> Date: Sun, 14 Sep 2025 13:25:38 +0530 Subject: [PATCH 5/9] remove external lib traces --- .prettierignore | 2 -- .vscode/cspell.json | 4 +--- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/.prettierignore b/.prettierignore index 486156d955c8c88..0bf23d58760f9b0 100644 --- a/.prettierignore +++ b/.prettierignore @@ -4,8 +4,6 @@ build/ /files/en-us/_githistory.json /tests/front-matter_test_files -/files/en-us/web/css/css_colors/color_mixer/classic.min.css -/files/en-us/web/css/css_colors/color_mixer/pickr.es5.min.js # XXX Ignored until https://github.com/prettier/prettier/issues/15032 is fixed /files/en-us/web/javascript/reference/operators/exponentiation/index.md diff --git a/.vscode/cspell.json b/.vscode/cspell.json index 42bdfe401852739..e3a8f5785c0c40d 100644 --- a/.vscode/cspell.json +++ b/.vscode/cspell.json @@ -28,9 +28,7 @@ "ignorePaths": [ ".vscode/cspell.json", ".vscode/extensions.json", - ".markdownlint-cli2.jsonc", - "/files/en-us/web/css/css_colors/color_mixer/classic.min.css", - "/files/en-us/web/css/css_colors/color_mixer/pickr.es5.min.js" + ".markdownlint-cli2.jsonc" ], "ignoreRegExpList": [ // macros From 1bcba704e3140812a821a6b3631a67ecae845dfc Mon Sep 17 00:00:00 2001 From: Onkar Khadangale <87750369+OnkarRuikar@users.noreply.github.com> Date: Tue, 16 Sep 2025 07:32:41 +0530 Subject: [PATCH 6/9] Apply suggestions from code review Co-authored-by: Estelle Weyl --- .../web/css/css_colors/color_mixer/index.md | 35 +++++++++---------- 1 file changed, 17 insertions(+), 18 deletions(-) diff --git a/files/en-us/web/css/css_colors/color_mixer/index.md b/files/en-us/web/css/css_colors/color_mixer/index.md index d7a3adebabe5be7..18c7399ec9359ec 100644 --- a/files/en-us/web/css/css_colors/color_mixer/index.md +++ b/files/en-us/web/css/css_colors/color_mixer/index.md @@ -5,12 +5,12 @@ page-type: guide sidebar: cssref --- -This tool lets you mix two colors, `color-one` and `color-two`, using the [`color-mix()`](/en-US/docs/Web/CSS/color_value/color-mix) function. The source colors are shown on the outside, and the mixed color is shown in the middle. You can change colors by clicking on them and choosing a new color using the resulting color picker. You can also change the percentage of each color included in the mix using the sliders, and the color space using the drop-down menu. +This tool lets you mix two colors in any color space using the {{cssxref("color-mix")}} function and copy the resulting color in any CSS color format. The two input colors, `color-one` and `color-two`, are shown on the outside, and the mixed color returned by the function is shown in the middle. Click on the outer swatches to select new colors to mix. Use the sliders to change the percentages of each input color included in the mix. Use the drop-down menu to change the color space of the function's output. CSS color values for the resulting color are selectable below the color widget. ```html hidden live-sample___color-mixer

Color mixer

-

Click on 'color-one' and 'color-two' to select colors.

+

Click on 'color-one' and 'color-two' to change the input colors.

color-one
mixed-color
@@ -21,24 +21,24 @@ This tool lets you mix two colors, `color-one` and `color-two`, using the [`colo id="color-one" type="button" class="color-one" - aria-label="toggle color picker dialog"> + aria-label="Open the color one picker dialog">
+ aria-label="Open the color two picker dialog">
- +
- +
- +
- +
From f579261e8c33b05cfa0a4ea20c53f0ff07a98980 Mon Sep 17 00:00:00 2001 From: OnkarRuikar <87750369+OnkarRuikar@users.noreply.github.com> Date: Tue, 16 Sep 2025 07:54:43 +0530 Subject: [PATCH 8/9] few tweaks --- files/en-us/web/css/css_colors/color_mixer/index.md | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/files/en-us/web/css/css_colors/color_mixer/index.md b/files/en-us/web/css/css_colors/color_mixer/index.md index 69b0fb50982889e..36201790abe908c 100644 --- a/files/en-us/web/css/css_colors/color_mixer/index.md +++ b/files/en-us/web/css/css_colors/color_mixer/index.md @@ -5,7 +5,7 @@ page-type: guide sidebar: cssref --- -This tool lets you mix two colors in any color space using the {{cssxref("color-mix")}} function and copy the resulting color in any CSS color format. The two input colors, `color-one` and `color-two`, are shown on the outside, and the mixed color returned by the function is shown in the middle. Click on the outer swatches to select new colors to mix. Use the sliders to change the percentages of each input color included in the mix. Use the drop-down menu to change the color space of the function's output. CSS color values for the resulting color are selectable below the color widget. +This tool lets you mix two colors in any color space using the {{cssxref("color_value/color-mix")}} function and copy the resulting color in any CSS color format. The two input colors, `color-one` and `color-two`, are shown on the outside, and the mixed color returned by the function is shown in the middle. Click on the outer swatches to select new colors to mix. Use the sliders to change the percentages of each input color included in the mix. Use the drop-down menu to change the color space of the function's output. CSS color values for the resulting color are selectable below the color widget. ```html hidden live-sample___color-mixer
@@ -333,9 +333,9 @@ dialog#picker-dialog table { #color-mixer > :nth-child(13) { grid-area: mix-output-text; margin: 1rem 0; + padding: 1rem 0; text-align: center; - height: 2.5rem; - background-color: #ededed; + background-color: #dfdfde; font-family: monospace; } @@ -688,9 +688,8 @@ function updateColorMix() { mixedColorDiv.style.setProperty("background-color", colorMixFunction); - const mixedColorText = window.getComputedStyle(mixedColorDiv).backgroundColor; mixedOutputText.innerText = colorMixFunction; - displayOutputColors(mixedColorText); + displayOutputColors(window.getComputedStyle(mixedColorDiv).backgroundColor); } function displayOutputColors(color) { @@ -827,7 +826,7 @@ function init() { init(); ``` -{{EmbedLiveSample("color-mixer", "", 750, "", "", "", "clipboard-write")}} +{{EmbedLiveSample("color-mixer", "", 800, "", "", "", "clipboard-write")}} ## See also From 3d4314bfb550ff33574ccff7c1f08a88cb885012 Mon Sep 17 00:00:00 2001 From: OnkarRuikar <87750369+OnkarRuikar@users.noreply.github.com> Date: Tue, 16 Sep 2025 07:57:30 +0530 Subject: [PATCH 9/9] Firefox needs more height --- files/en-us/web/css/css_colors/color_mixer/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/css_colors/color_mixer/index.md b/files/en-us/web/css/css_colors/color_mixer/index.md index 36201790abe908c..95de8ee864c8154 100644 --- a/files/en-us/web/css/css_colors/color_mixer/index.md +++ b/files/en-us/web/css/css_colors/color_mixer/index.md @@ -826,7 +826,7 @@ function init() { init(); ``` -{{EmbedLiveSample("color-mixer", "", 800, "", "", "", "clipboard-write")}} +{{EmbedLiveSample("color-mixer", "", 850, "", "", "", "clipboard-write")}} ## See also