diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 00000000..afc63ba1 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,15 @@ +# EditorConfig is awesome: https://EditorConfig.org + +# top-most EditorConfig file +root = true + +[*] +indent_style = space +indent_size = 2 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true + +[*.md] +trim_trailing_whitespace = false diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS new file mode 100644 index 00000000..f1b0b948 --- /dev/null +++ b/.github/CODEOWNERS @@ -0,0 +1,9 @@ +# This file is used to request PR reviews from the appropriate team. +# +# Order is important; the last matching pattern takes precedence. +# Each rule is more specific than the previous rules. +# For more information, see: +# https://docs.github.com/en/free-pro-team@latest/github/creating-cloning-and-archiving-repositories/about-code-owners + +# Default +* @mdn/core-yari-content diff --git a/.github/ISSUE_TEMPLATE/bug.yml b/.github/ISSUE_TEMPLATE/bug.yml new file mode 100644 index 00000000..5640bef1 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/bug.yml @@ -0,0 +1,36 @@ +name: "Issue report" +description: Report an unexpected problem or unintended behavior. +labels: ["needs triage"] +body: + - type: markdown + attributes: + value: | + ### Before you start + + **Want to fix the problem yourself?** This project is open source and we welcome fixes and improvements from the community! + + ↩ Check the project [CONTRIBUTING.md](../blob/main/CONTRIBUTING.md) guide to see how to get started. + + --- + - type: textarea + id: problem + attributes: + label: What was incorrect, unhelpful, or incomplete? + validations: + required: true + - type: textarea + id: expected + attributes: + label: What did you expect to see? + validations: + required: true + - type: textarea + id: references + attributes: + label: Do you have any supporting links, references, or citations? + description: Link to information that helps us confirm your issue. + - type: textarea + id: more-info + attributes: + label: Do you have anything more you want to share? + description: For example, steps to reproduce, screenshots, screen recordings, or sample code. diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml new file mode 100644 index 00000000..5cd3f68e --- /dev/null +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -0,0 +1,11 @@ +blank_issues_enabled: false +contact_links: + - name: MDN GitHub Discussions + url: https://github.com/orgs/mdn/discussions + about: Does the issue involve a lot of pages, or are you not sure how it can be split into actionable tasks? Consider starting a discussion first. + - name: MDN Web Docs on Discourse + url: https://discourse.mozilla.org/c/mdn/learn/250 + about: Need help with assessments on MDN Web Docs? We have a support community for this purpose on Discourse. + - name: Help with code + url: https://stackoverflow.com/ + about: If you are stuck and need help with code, StackOverflow is a great resource. diff --git a/.github/PULL_REQUEST_TEMPLATE b/.github/PULL_REQUEST_TEMPLATE new file mode 100644 index 00000000..d85c3d5c --- /dev/null +++ b/.github/PULL_REQUEST_TEMPLATE @@ -0,0 +1,21 @@ + + +**Description:** + + + +**Motivation:** + + + +**Additional details:** + + + +**Related issues and pull requests:** + + + + + + diff --git a/.github/workflows/idle-issues.yml b/.github/workflows/idle-issues.yml new file mode 100644 index 00000000..0daf455a --- /dev/null +++ b/.github/workflows/idle-issues.yml @@ -0,0 +1,10 @@ +name: "Mark issues and pull requests as idle" +on: + schedule: + - cron: "49 11,23 * * *" + +jobs: + idle: + uses: mdn/workflows/.github/workflows/idle.yml@main + with: + target-repo: "mdn/css-examples" diff --git a/.github/workflows/lock-closed.yml b/.github/workflows/lock-closed.yml new file mode 100644 index 00000000..33c6a521 --- /dev/null +++ b/.github/workflows/lock-closed.yml @@ -0,0 +1,10 @@ +name: "Lock old issues and pull requests" +on: + schedule: + - cron: "0 9 1 * *" + +jobs: + lock: + uses: mdn/workflows/.github/workflows/lock-closed.yml@main + with: + target-repo: "mdn/css-examples" diff --git a/.github/workflows/new-issues.yml b/.github/workflows/new-issues.yml new file mode 100644 index 00000000..373f82ca --- /dev/null +++ b/.github/workflows/new-issues.yml @@ -0,0 +1,17 @@ +name: "Mark new issues with needs-triage label" + +on: + issues: + types: + - reopened + - opened + +jobs: + label-new-issues: + runs-on: ubuntu-latest + steps: + - name: initial labelling + uses: andymckay/labeler@master + with: + add-labels: "needs triage" + ignore-if-assigned: true diff --git a/.github/workflows/pr-merge-conflicts.yml b/.github/workflows/pr-merge-conflicts.yml new file mode 100644 index 00000000..f94b9feb --- /dev/null +++ b/.github/workflows/pr-merge-conflicts.yml @@ -0,0 +1,14 @@ +name: "Label PRs with conflicts" + +on: + push: + pull_request_target: + types: [synchronize] + +jobs: + label-merge-conflicts: + uses: mdn/workflows/.github/workflows/pr-rebase-needed.yml@main + with: + target-repo: "mdn/css-examples" + secrets: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/.markdownlint-cli2.jsonc b/.markdownlint-cli2.jsonc new file mode 100644 index 00000000..3395ac2b --- /dev/null +++ b/.markdownlint-cli2.jsonc @@ -0,0 +1,12 @@ +{ + "config": { + "extends": "./.markdownlint.jsonc" + }, + "ignores": [ + "node_modules", + ".git", + ".github", + "tests", + "editable-samples/codemirror" + ] +} diff --git a/.markdownlint.jsonc b/.markdownlint.jsonc new file mode 100644 index 00000000..4431899c --- /dev/null +++ b/.markdownlint.jsonc @@ -0,0 +1,8 @@ +// This file defines our configuration for Markdownlint. See +// https://github.com/DavidAnson/markdownlint/blob/main/doc/Rules.md +// for more details on each rule. + +{ + "first-line-heading": false, + "line-length": false +} diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 00000000..6ca2a321 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,3 @@ +editable-samples/codemirror/**/* +editable-samples-2/js/ +.markdownlint* diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 00000000..9c1044f6 --- /dev/null +++ b/.prettierrc.json @@ -0,0 +1,3 @@ +{ + "bracketSameLine": true +} diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 00000000..f65a45cd --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,60 @@ +# Contribution guide + +This repository accompany various CSS documentation pages on [MDN Web Docs](https://developer.mozilla.org). +This document will help you get started with contributions! + +## Types of contribution + +> [!NOTE] +> You can include an example directly in MDN pages using [`{{EmbedLiveSample()}}` macros](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Page_structures/Macros/Commonly_used_macros#code_samples) or regular Markdown code blocks. +> These methods are simpler to maintain as the code lives beside the rest of the content. +> Only add examples to this repository if your example doesn't easily run on MDN pages for technical or security reasons. + +There are many ways you can help improve this repository! For example: + +- **Write a new example.** If you would like to add a new example, make sure this feature is supported by a stable version of modern browsers. +- **Improve an existing example.** You could make improvements or add some other changes which would make example more helpful to the users. +- **Fix a bug:** we have a list of [issues](https://github.com/mdn/css-examples/issues), or maybe you found your own. + +## Getting started + +You will need to have Git and GitHub set up to be able to contribute. + +### Set up Git and GitHub + +For more information on setting up Git on your machine, [read this article](https://help.github.com/articles/set-up-git/). +With the above dependencies satisfied, [create your new account on GitHub](https://github.com/join). + +Next up, you need to fork and clone the repo to be able to contribute to it. +You can [learn about forking on GitHub](https://help.github.com/articles/fork-a-repo). +Once you have your own fork, [clone it to your local machine](https://help.github.com/articles/cloning-a-repository/). + +### Serving + +You should serve your example locally to see the results before submitting your changes. +There are a few different ways to do this depending on your preferred tooling methods. +See [Running a simple local HTTP server](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server#running_a_simple_local_http_server) for information on setting up a server. + +```bash +cd my-cool-example +python3 -m http.server +``` + +### Open a pull request + +Once you're satisfied, the final step is to [submit your pull request](https://help.github.com/articles/creating-a-pull-request/). +You can find more information about submitting pull requests in our [Community guidelines](https://developer.mozilla.org/en-US/docs/MDN/Community/Pull_requests) docs. + +### Including your example on MDN + +After your pull request is reviewed and merged, you can link to your example from MDN Web Docs. +For example, the demo is referenced in MDN content like so: + +```markdown +See more examples on the [demo page](https://mdn.github.io/css-examples/counter-style-demo/). +``` + +## Thank you + +Thanks a lot for your contribution! +If you'd like to ask questions or get in touch, feel free to drop by in [Discord](https://developer.mozilla.org/discord) or say hello in one of [our communication channels](https://developer.mozilla.org/en-US/docs/MDN/Community/Communication_channels). diff --git a/README.md b/README.md index 6c994e91..fb5301d0 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,11 @@ # css-examples -This repository contains examples of CSS usage. +Code examples that accompany various MDN CSS documentation pages. + +> [!NOTE] +> You can include an example directly in MDN pages using [`{{EmbedLiveSample()}}` macros](https://developer.mozilla.org/en-US/docs/MDN/Writing_guidelines/Page_structures/Macros/Commonly_used_macros#code_samples) or regular Markdown code blocks. +> These methods are simpler to maintain as the code lives beside the rest of the content. +> Only add examples to this repository if your example doesn't easily run on MDN pages for technical or security reasons. The "animation-frames-timing-function" directory contains a simple example that demonstrates the difference between the steps() timing function available for CSS animations and transitions, and the new frames() timing function. [Run the example live](http://mdn.github.io/css-examples/animation-frames-timing-function/). You can also find versions that show the same timing function [used with transitions](http://mdn.github.io/css-examples/animation-frames-timing-function/index-transitions.html), and used with the [Web Animations API](http://mdn.github.io/css-examples/animation-frames-timing-function/index-waa.html). @@ -10,10 +15,24 @@ The "moz-context-properties" directory contains a demo for the [-moz-context-pro The "editable-examples" directory contains CSS examples that are intended to be embedded in MDN pages as live editable samples. -The "object-fit-basics" directory contains a simple page demonstrating typical usage of different object-fit and object-position values. [Run example live](http://mdn.github.io/css-examples/object-fit-basics/). +The "object-fit-basics" directory contains a simple page demonstrating typical usage of different `object-fit` and `object-position` values. [Run example live](http://mdn.github.io/css-examples/object-fit-basics/). -The "object-fit-gallery" directory contains a fun image gallery that uses object-fit to display the images more nicely, both in thumbnail and full size view. [Run the example live](http://mdn.github.io/css-examples/object-fit-gallery/). +The "object-fit-gallery" directory contains a fun image gallery that uses `object-fit` to display the images more nicely, both in thumbnail and full size view. [Run the example live](http://mdn.github.io/css-examples/object-fit-gallery/). -The "overscroll-behavior" directory contains a simple page demonstrating typical usage of different overscroll-behavior values. [Run example live](http://mdn.github.io/css-examples/overscroll-behavior/). +The "overscroll-behavior" directory contains a simple page demonstrating typical usage of different `overscroll-behavior` values. [Run example live](http://mdn.github.io/css-examples/overscroll-behavior/). The "tools" directory contains various tools for working with CSS, including a [color picker](http://mdn.github.io/css-examples/tools/color-picker/) and a [box shadow generator](http://mdn.github.io/css-examples/tools/box-shadow-generator/). + +## Contribute to MDN Web Docs + +You can contribute to MDN Web Docs and be a part of our community through content contributions, engineering, or translation work. +The MDN Web Docs project welcomes contributions from everyone who shares our goals and wants to contribute constructively and respectfully within our community. + +To find out how to get started, see the [CONTRIBUTING.md](CONTRIBUTING.md) document in this repository. +By participating in and contributing to our projects and discussions, you acknowledge that you have read and agree to our [Code of Conduct](CODE_OF_CONDUCT.md). + +## Get in touch + +You can communicate with the MDN Web Docs team and community using the [communication channels][]. + +[communication channels]: https://developer.mozilla.org/en-US/docs/MDN/Community/Communication_channels diff --git a/assets/styles.css b/assets/styles.css index 11945fee..f46d5bc4 100644 --- a/assets/styles.css +++ b/assets/styles.css @@ -1,10 +1,10 @@ /* Some default styling for cookbook examples */ /* -rgb(53,43,34) -rgb(75,70,74) -rgb(95,97,110) -rgb(137,151,188) -rgb(160,178,226) +rgb(53 43 34) +rgb(75 70 74) +rgb(95 97 110) +rgb(137 151 188) +rgb(160 178 226) */ body { background-color: #fff; diff --git a/backdrop/styles.css b/backdrop/styles.css index 11945fee..f46d5bc4 100644 --- a/backdrop/styles.css +++ b/backdrop/styles.css @@ -1,10 +1,10 @@ /* Some default styling for cookbook examples */ /* -rgb(53,43,34) -rgb(75,70,74) -rgb(95,97,110) -rgb(137,151,188) -rgb(160,178,226) +rgb(53 43 34) +rgb(75 70 74) +rgb(95 97 110) +rgb(137 151 188) +rgb(160 178 226) */ body { background-color: #fff; diff --git a/box-alignment/flexbox/auto-margins.html b/box-alignment/flexbox/auto-margins.html index b1d9394a..0f2aca8a 100644 --- a/box-alignment/flexbox/auto-margins.html +++ b/box-alignment/flexbox/auto-margins.html @@ -61,14 +61,14 @@ .box { width: 500px; - border: 2px dotted rgb(96, 139, 168); + border: 2px dotted rgb(96 139 168); } .box > * { padding: 20px; - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); } diff --git a/css-cookbook/columns-flexbox.html b/css-cookbook/columns-flexbox.html index cbcd6c5a..f1921840 100644 --- a/css-cookbook/columns-flexbox.html +++ b/css-cookbook/columns-flexbox.html @@ -11,14 +11,14 @@ diff --git a/css-cookbook/columns-grid--download.html b/css-cookbook/columns-grid--download.html index 91349f2d..be9b851e 100644 --- a/css-cookbook/columns-grid--download.html +++ b/css-cookbook/columns-grid--download.html @@ -21,7 +21,7 @@ } .container { - border: 2px solid rgb(75, 70, 74); + border: 2px solid rgb(75 70 74); border-radius: 0.5em; padding: 20px; width: 500px; @@ -32,7 +32,7 @@ .container > * { padding: 10px; - border: 2px solid rgb(95, 97, 110); + border: 2px solid rgb(95 97 110); border-radius: 0.5em; margin: 0; } diff --git a/css-cookbook/columns-grid.html b/css-cookbook/columns-grid.html index ffbc7af1..75ec4044 100644 --- a/css-cookbook/columns-grid.html +++ b/css-cookbook/columns-grid.html @@ -11,7 +11,7 @@ diff --git a/css-cookbook/columns-multicol.html b/css-cookbook/columns-multicol.html index e8bea1af..b6794a8d 100644 --- a/css-cookbook/columns-multicol.html +++ b/css-cookbook/columns-multicol.html @@ -11,7 +11,7 @@ @@ -51,7 +51,7 @@ diff --git a/css-cookbook/grid-wrapper--download.html b/css-cookbook/grid-wrapper--download.html index 7c5706a0..95dfc3f0 100644 --- a/css-cookbook/grid-wrapper--download.html +++ b/css-cookbook/grid-wrapper--download.html @@ -31,7 +31,7 @@ } .grid > * { - border: 2px solid rgb(95, 97, 110); + border: 2px solid rgb(95 97 110); border-radius: 0.5em; padding: 20px; } diff --git a/css-cookbook/grid-wrapper.html b/css-cookbook/grid-wrapper.html index 166418bb..62802904 100644 --- a/css-cookbook/grid-wrapper.html +++ b/css-cookbook/grid-wrapper.html @@ -17,7 +17,7 @@ } .grid > * { - border: 2px solid rgb(95, 97, 110); + border: 2px solid rgb(95 97 110); border-radius: 0.5em; padding: 20px; } diff --git a/css-cookbook/sticky-footer--download.html b/css-cookbook/sticky-footer--download.html index 0ec88b6a..c4bd3ba7 100644 --- a/css-cookbook/sticky-footer--download.html +++ b/css-cookbook/sticky-footer--download.html @@ -44,7 +44,7 @@ .page-header, .page-footer { - background-color: rgb(75, 70, 74); + background-color: rgb(75 70 74); color: #fff; padding: 20px; } diff --git a/css-cookbook/sticky-footer-flexbox--download.html b/css-cookbook/sticky-footer-flexbox--download.html index 60b1c7bc..8a447013 100644 --- a/css-cookbook/sticky-footer-flexbox--download.html +++ b/css-cookbook/sticky-footer-flexbox--download.html @@ -45,7 +45,7 @@ } .page-header, .page-footer { - background-color: rgb(75, 70, 74); + background-color: rgb(75 70 74); color: #fff; padding: 20px; } diff --git a/css-cookbook/sticky-footer-flexbox.html b/css-cookbook/sticky-footer-flexbox.html index 7d764a60..e460daba 100644 --- a/css-cookbook/sticky-footer-flexbox.html +++ b/css-cookbook/sticky-footer-flexbox.html @@ -23,7 +23,7 @@ .page-header, .page-footer { - background-color: rgb(75, 70, 74); + background-color: rgb(75 70 74); color: #fff; padding: 20px; } diff --git a/css-cookbook/sticky-footer.html b/css-cookbook/sticky-footer.html index 2f238620..eccb73b5 100644 --- a/css-cookbook/sticky-footer.html +++ b/css-cookbook/sticky-footer.html @@ -25,7 +25,7 @@ .page-header, .page-footer { - background-color: rgb(75, 70, 74); + background-color: rgb(75 70 74); color: #fff; padding: 20px; } diff --git a/css-cookbook/styles.css b/css-cookbook/styles.css index 11945fee..f46d5bc4 100644 --- a/css-cookbook/styles.css +++ b/css-cookbook/styles.css @@ -1,10 +1,10 @@ /* Some default styling for cookbook examples */ /* -rgb(53,43,34) -rgb(75,70,74) -rgb(95,97,110) -rgb(137,151,188) -rgb(160,178,226) +rgb(53 43 34) +rgb(75 70 74) +rgb(95 97 110) +rgb(137 151 188) +rgb(160 178 226) */ body { background-color: #fff; diff --git a/css-text/styles.css b/css-text/styles.css index 11945fee..f46d5bc4 100644 --- a/css-text/styles.css +++ b/css-text/styles.css @@ -1,10 +1,10 @@ /* Some default styling for cookbook examples */ /* -rgb(53,43,34) -rgb(75,70,74) -rgb(95,97,110) -rgb(137,151,188) -rgb(160,178,226) +rgb(53 43 34) +rgb(75 70 74) +rgb(95 97 110) +rgb(137 151 188) +rgb(160 178 226) */ body { background-color: #fff; diff --git a/display/multi-keyword/inline-block.html b/display/multi-keyword/inline-block.html index 1f22b167..217de84c 100644 --- a/display/multi-keyword/inline-block.html +++ b/display/multi-keyword/inline-block.html @@ -66,7 +66,7 @@ diff --git a/flexbox/alignment/align-content.html b/flexbox/alignment/align-content.html index 01d44a27..e9ce451c 100644 --- a/flexbox/alignment/align-content.html +++ b/flexbox/alignment/align-content.html @@ -61,14 +61,14 @@ .box { width: 500px; - border: 2px dotted rgb(96, 139, 168); + border: 2px dotted rgb(96 139 168); } .box > * { padding: 20px; - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); flex: 1 1 100px; } diff --git a/flexbox/alignment/align-items.html b/flexbox/alignment/align-items.html index 64bfb2ba..6a13714f 100644 --- a/flexbox/alignment/align-items.html +++ b/flexbox/alignment/align-items.html @@ -61,14 +61,14 @@ .box { width: 500px; - border: 2px dotted rgb(96, 139, 168); + border: 2px dotted rgb(96 139 168); } .box > * { padding: 20px; - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); } diff --git a/flexbox/basics/flex-shorthands.html b/flexbox/basics/flex-shorthands.html index 62e1899c..6566683b 100644 --- a/flexbox/basics/flex-shorthands.html +++ b/flexbox/basics/flex-shorthands.html @@ -60,15 +60,15 @@ } .box > * { - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); } .box { display: flex; width: 500px; - border: 2px dotted rgb(96, 139, 168); + border: 2px dotted rgb(96 139 168); } diff --git a/flexbox/basics/flex-wrap.html b/flexbox/basics/flex-wrap.html index 46f9c041..6de90a3d 100644 --- a/flexbox/basics/flex-wrap.html +++ b/flexbox/basics/flex-wrap.html @@ -60,15 +60,15 @@ } .box > * { - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); width: 200px; } .box { width: 500px; - border: 2px dotted rgb(96, 139, 168); + border: 2px dotted rgb(96 139 168); } diff --git a/flexbox/basics/justify-content.html b/flexbox/basics/justify-content.html index 1d09ba04..aba72e7f 100644 --- a/flexbox/basics/justify-content.html +++ b/flexbox/basics/justify-content.html @@ -61,13 +61,13 @@ .box { width: 500px; - border: 2px dotted rgb(96, 139, 168); + border: 2px dotted rgb(96 139 168); } .box > * { - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); } diff --git a/flexbox/basics/the-flex-container.html b/flexbox/basics/the-flex-container.html index 851c4441..b2b6c122 100644 --- a/flexbox/basics/the-flex-container.html +++ b/flexbox/basics/the-flex-container.html @@ -62,13 +62,13 @@ .box { width: 500px; - border: 2px dotted rgb(96, 139, 168); + border: 2px dotted rgb(96 139 168); } .box > * { - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); } diff --git a/flexbox/ratios/flex-basis.html b/flexbox/ratios/flex-basis.html index b640ead3..6766b04a 100644 --- a/flexbox/ratios/flex-basis.html +++ b/flexbox/ratios/flex-basis.html @@ -41,6 +41,7 @@ text-align: right; width: 90%; max-width: 700px; + min-width: 500px; padding: 5px 10px 5px 26px; font-size: 100%; } @@ -48,6 +49,7 @@ section { width: 90%; max-width: 700px; + min-width: 500px; border: 1px solid #4d4e53; border-radius: 2px; padding: 10px 14px 10px 10px; @@ -60,15 +62,15 @@ } .box > * { - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); } .box { display: flex; width: 500px; - border: 2px dotted rgb(96, 139, 168); + border: 2px dotted rgb(96 139 168); } diff --git a/flexbox/ratios/flex-grow-ratios.html b/flexbox/ratios/flex-grow-ratios.html index 2a9806b2..1392fe59 100644 --- a/flexbox/ratios/flex-grow-ratios.html +++ b/flexbox/ratios/flex-grow-ratios.html @@ -60,15 +60,15 @@ } .box > * { - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); } .box { display: flex; width: 500px; - border: 2px dotted rgb(96, 139, 168); + border: 2px dotted rgb(96 139 168); } diff --git a/flexbox/ratios/flex-grow.html b/flexbox/ratios/flex-grow.html index ed49c954..60815ad8 100644 --- a/flexbox/ratios/flex-grow.html +++ b/flexbox/ratios/flex-grow.html @@ -41,6 +41,7 @@ text-align: right; width: 90%; max-width: 700px; + min-width: 500px; padding: 5px 10px 5px 26px; font-size: 100%; } @@ -48,6 +49,7 @@ section { width: 90%; max-width: 700px; + min-width: 500px; border: 1px solid #4d4e53; border-radius: 2px; padding: 10px 14px 10px 10px; @@ -60,15 +62,15 @@ } .box > * { - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); } .box { display: flex; width: 500px; - border: 2px dotted rgb(96, 139, 168); + border: 2px dotted rgb(96 139 168); } diff --git a/flexbox/ratios/flex-shrink-min-content.html b/flexbox/ratios/flex-shrink-min-content.html index 3bcf056d..2c7171e8 100644 --- a/flexbox/ratios/flex-shrink-min-content.html +++ b/flexbox/ratios/flex-shrink-min-content.html @@ -41,6 +41,7 @@ text-align: right; width: 90%; max-width: 700px; + min-width: 500px; padding: 5px 10px 5px 26px; font-size: 100%; } @@ -48,6 +49,7 @@ section { width: 90%; max-width: 700px; + min-width: 500px; border: 1px solid #4d4e53; border-radius: 2px; padding: 10px 14px 10px 10px; @@ -60,14 +62,14 @@ } .box > * { - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); } .box { display: flex; - border: 2px dotted rgb(96, 139, 168); + border: 2px dotted rgb(96 139 168); } diff --git a/flexbox/ratios/flex-shrink-ratios.html b/flexbox/ratios/flex-shrink-ratios.html index f66ec25c..f1a9e00e 100644 --- a/flexbox/ratios/flex-shrink-ratios.html +++ b/flexbox/ratios/flex-shrink-ratios.html @@ -41,6 +41,7 @@ text-align: right; width: 90%; max-width: 700px; + min-width: 500px; padding: 5px 10px 5px 26px; font-size: 100%; } @@ -48,6 +49,7 @@ section { width: 90%; max-width: 700px; + min-width: 500px; border: 1px solid #4d4e53; border-radius: 2px; padding: 10px 14px 10px 10px; @@ -60,15 +62,15 @@ } .box > * { - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); } .box { display: flex; width: 500px; - border: 2px dotted rgb(96, 139, 168); + border: 2px dotted rgb(96 139 168); } diff --git a/flexbox/ratios/flex-shrink.html b/flexbox/ratios/flex-shrink.html index 17d4d03b..f76189ff 100644 --- a/flexbox/ratios/flex-shrink.html +++ b/flexbox/ratios/flex-shrink.html @@ -41,6 +41,7 @@ text-align: right; width: 90%; max-width: 700px; + min-width: 500px; padding: 5px 10px 5px 26px; font-size: 100%; } @@ -48,6 +49,7 @@ section { width: 90%; max-width: 700px; + min-width: 500px; border: 1px solid #4d4e53; border-radius: 2px; padding: 10px 14px 10px 10px; @@ -60,15 +62,15 @@ } .box > * { - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); } .box { display: flex; width: 500px; - border: 2px dotted rgb(96, 139, 168); + border: 2px dotted rgb(96 139 168); } diff --git a/flexbox/ratios/min-max-content.html b/flexbox/ratios/min-max-content.html index 758f1dcf..cb18b334 100644 --- a/flexbox/ratios/min-max-content.html +++ b/flexbox/ratios/min-max-content.html @@ -63,11 +63,11 @@ @@ -86,11 +86,11 @@ -

Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”

diff --git a/flow/formatting-contexts/bfc-flow-root.html b/flow/formatting-contexts/bfc-flow-root.html index 9f071012..a1d4f63e 100644 --- a/flow/formatting-contexts/bfc-flow-root.html +++ b/flow/formatting-contexts/bfc-flow-root.html @@ -62,7 +62,7 @@ @@ -49,7 +49,7 @@ } .subitem2 { - background-color: rgba(0, 0, 0, 0.5); + background-color: rgb(0 0 0 / 0.5); grid-column: sub-b / sub-d; grid-row: 1; } @@ -88,7 +88,7 @@ } .subitem2 { - background-color: rgba(0,0,0,.5); + background-color: rgb(0 0 0 / .5); grid-column: sub-b / sub-d; grid-row: 1; } diff --git a/grid/subgrid/columns.html b/grid/subgrid/columns.html index 780a37e1..2c08d63f 100644 --- a/grid/subgrid/columns.html +++ b/grid/subgrid/columns.html @@ -23,7 +23,7 @@ } .subitem { - background-color: rgb(40, 240, 83); + background-color: rgb(40 240 83); } diff --git a/grid/subgrid/gap.html b/grid/subgrid/gap.html index c6e49894..fb3c7b4b 100644 --- a/grid/subgrid/gap.html +++ b/grid/subgrid/gap.html @@ -23,7 +23,7 @@ } .subitem { - background-color: rgb(40, 240, 83); + background-color: rgb(40 240 83); } @@ -49,7 +49,7 @@ } .subitem2 { - background-color: rgba(0, 0, 0, 0.5); + background-color: rgb(0 0 0 / 0.5); grid-column: 2; grid-row: 1; } @@ -89,7 +89,7 @@ } .subitem2 { - background-color: rgba(0,0,0,.5); + background-color: rgb(0 0 0 / .5); grid-column: 2; grid-row: 1; } diff --git a/grid/subgrid/rows.html b/grid/subgrid/rows.html index d3bf2d57..b4553e47 100644 --- a/grid/subgrid/rows.html +++ b/grid/subgrid/rows.html @@ -23,7 +23,7 @@ } .subitem { - background-color: rgb(40, 240, 83); + background-color: rgb(40 240 83); } diff --git a/houdini/css_painting_api/example-boxbg.html b/houdini/css_painting_api/example-boxbg.html index 1adefa9f..3e83579e 100644 --- a/houdini/css_painting_api/example-boxbg.html +++ b/houdini/css_painting_api/example-boxbg.html @@ -7,16 +7,16 @@ diff --git a/howto/box-shadow-button.html b/howto/box-shadow-button.html index 0633fa96..73465746 100644 --- a/howto/box-shadow-button.html +++ b/howto/box-shadow-button.html @@ -26,7 +26,7 @@ @@ -40,7 +40,7 @@ diff --git a/howto/center.html b/howto/center.html index 51bd2cb5..d8c2a34a 100644 --- a/howto/center.html +++ b/howto/center.html @@ -7,7 +7,7 @@ @@ -59,7 +59,7 @@ } .box2 { - background-color: rgba(0,0,0,.5); + background-color: rgb(0 0 0 / .5); color: #fff; } diff --git a/howto/styles.css b/howto/styles.css index 11945fee..f46d5bc4 100644 --- a/howto/styles.css +++ b/howto/styles.css @@ -1,10 +1,10 @@ /* Some default styling for cookbook examples */ /* -rgb(53,43,34) -rgb(75,70,74) -rgb(95,97,110) -rgb(137,151,188) -rgb(160,178,226) +rgb(53 43 34) +rgb(75 70 74) +rgb(95 97 110) +rgb(137 151 188) +rgb(160 178 226) */ body { background-color: #fff; diff --git a/howto/text-shadow.html b/howto/text-shadow.html index f41b61a6..8829e784 100644 --- a/howto/text-shadow.html +++ b/howto/text-shadow.html @@ -21,7 +21,7 @@ @@ -36,7 +36,7 @@

Adding a shadow to text

diff --git a/images/styles.css b/images/styles.css index 11945fee..f46d5bc4 100644 --- a/images/styles.css +++ b/images/styles.css @@ -1,10 +1,10 @@ /* Some default styling for cookbook examples */ /* -rgb(53,43,34) -rgb(75,70,74) -rgb(95,97,110) -rgb(137,151,188) -rgb(160,178,226) +rgb(53 43 34) +rgb(75 70 74) +rgb(95 97 110) +rgb(137 151 188) +rgb(160 178 226) */ body { background-color: #fff; diff --git a/learn/tasks/backgrounds/marking.md b/learn/tasks/backgrounds/marking.md index a0427a5b..fb527687 100644 --- a/learn/tasks/backgrounds/marking.md +++ b/learn/tasks/backgrounds/marking.md @@ -20,7 +20,7 @@ h2 { } ``` -The student could use the individual border longhands however this is unecessarily verbose as all borders are set to the same color, style and size. +The student could use the individual border longhands however this is unnecessarily verbose as all borders are set to the same color, style and size. ## Task 2 @@ -43,7 +43,8 @@ There are also some elements which link back to earlier lessons: h2 { padding: 0 40px; text-align: center; - background: url(star.png) no-repeat left center, + background: + url(star.png) no-repeat left center, url(star.png) repeat-y right center; } ``` diff --git a/learn/tasks/box-model/marking.md b/learn/tasks/box-model/marking.md index 1e4c0701..2802b388 100644 --- a/learn/tasks/box-model/marking.md +++ b/learn/tasks/box-model/marking.md @@ -4,7 +4,7 @@ In this task the student needs to know that when using the alternate box model, the width is the size of the total of content, padding and border. Therefore to make it match the standard box model example they need to set the width to 390px. -``` +```css .alternate { box-sizing: border-box; width: 390px; @@ -15,7 +15,7 @@ In this task the student needs to know that when using the alternate box model, This task involves the student using the margin, border and padding properties correctly. They might choose to use the longhand properties instead however in particular when setting the padding to all sides, the shorthand is probably the better choice. -``` +```css .box { border: 5px dotted black; margin: 20px 1em 40px 2em; @@ -27,7 +27,7 @@ This task involves the student using the margin, border and padding properties c In this task the student needs to know that by using `display: inline-block` the block direction margin, border and padding will cause the other lines to be pushed away from the element. -``` +```css .box span { background-color: pink; border: 5px solid black; diff --git a/learn/tasks/cascade/marking.md b/learn/tasks/cascade/marking.md index c8590d03..e8d21000 100644 --- a/learn/tasks/cascade/marking.md +++ b/learn/tasks/cascade/marking.md @@ -4,7 +4,7 @@ One possible solution is as follows: -``` +```css #outer #inner a { background-color: initial; } @@ -18,8 +18,8 @@ Then the student needs to remember there are special keyword values for all prop One possible solution is as follows: -``` - @layer yellow, green, purple; +```css +@layer yellow, green, purple; ``` There is one thing the student needs to do in this task: change the order of precedence so the declaration for the desired color is in the last declared layer, which is what his solution shows. diff --git a/learn/tasks/flexbox/marking.md b/learn/tasks/flexbox/marking.md index 820a6181..fda6ad97 100644 --- a/learn/tasks/flexbox/marking.md +++ b/learn/tasks/flexbox/marking.md @@ -2,11 +2,11 @@ ## Flex Layout One -The aim of this task is to show understanding of the default behavior of Flexbox, and how you do not need to do a lot of work to acheive many patterns. +The aim of this task is to show understanding of the default behavior of Flexbox, and how you do not need to do a lot of work to achieve many patterns. To solve this task the student needs to use `display: flex` on the parent, and also `justify-content: space-between`. They do not need to use the `flex` property or any of the longhands on the children, as the defaults will cause them to display auto sized and not grow to fill the inline dimension. -``` +```css nav ul { display: flex; justify-content: space-between; @@ -19,7 +19,7 @@ The aim of this task is to demonstrate an understanding of the `flex` property, It would be correct for the student to have used `flex: 1` on the `li` or `flex: 1 0 0`, or `flex: 1 1 0`. The key thing is that they have set the `flex-basis` to `0`. It would also be correct to use the longhands, for example: -``` +```css flex-grow: 1; flex-shrink: 0; flex-basis: 0; @@ -27,7 +27,7 @@ flex-basis: 0; However as the specification advises use of the shorthands, in this scenario `flex: 1` is probably the best answer of all of these, and so the most optimal result would be: -``` +```css ul { display: flex; } @@ -41,7 +41,7 @@ li { The student should add an additional selector that targets the first element and sets `flex: 2;` (or `flex: 2 0 0;` or `flex-grow: 2`): -``` +```css li:first-child { flex: 2; } @@ -53,7 +53,7 @@ Here we use Flexbox to center an item horizontally and vertically. The aim of th On the parent they should use: -``` +```css .parent { display: flex; justify-content: center; @@ -65,7 +65,7 @@ On the parent they should use: This example demonstrates understanding of the `flex-wrap` property to wrap flex lines. In addition, to ensure that they end up with something that looks like the example they need to set `flex: auto` on the child (or `flex: 1 1 auto;`). -``` +```css ul { display: flex; flex-wrap: wrap; diff --git a/learn/tasks/float/marking.md b/learn/tasks/float/marking.md index 014f691a..d60c0c32 100644 --- a/learn/tasks/float/marking.md +++ b/learn/tasks/float/marking.md @@ -6,7 +6,7 @@ The aim of the tasks are to demonstrate an understanding of the properties cover This task covers understanding of the basic float property, and the values `left` and `right`. The following should be all they need to do. -``` +```css .float1 { float: left; } @@ -14,14 +14,13 @@ This task covers understanding of the basic float property, and the values `left .float2 { float: right; } - ``` ## Task 2 In task 2 we check that the student understands how to clear an element from a floated item. They need to flow the item left, then add `clear: left` to the class for the second paragraph. -``` +```css .float { float: left; } @@ -35,7 +34,7 @@ In task 2 we check that the student understands how to clear an element from a f In the final task the student is asked to use the most up-to-date method of clearing the box underneath the floated item. Therefore they should add `display: flow-root` to the class for `.box`. Other methods might be to use `overflow` or a clearfix hack, however the learning materials detail the `flow-root` method as the modern way to achieve this. -``` +```css .box { display: flow-root; } diff --git a/learn/tasks/grid/marking.md b/learn/tasks/grid/marking.md index b4b229de..9ad0fc71 100644 --- a/learn/tasks/grid/marking.md +++ b/learn/tasks/grid/marking.md @@ -4,7 +4,7 @@ The aim of this task is to show understanding of the basics of creating a grid with a gap between the items. -``` +```css .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; @@ -18,15 +18,15 @@ The aim of this task is to demonstrate an understanding of placing an item betwe I have used the shorthands below, however it would be correct for the student to use the longhand `grid-row-start` for example. -``` +```css .item1 { - grid-column: 1 / 4; - grid-row: 1 / 3; + grid-column: 1 / 4; + grid-row: 1 / 3; } .item2 { - grid-column: 2 / 5; - grid-row: 2 / 4; + grid-column: 2 / 5; + grid-row: 2 / 4; } ``` @@ -34,32 +34,33 @@ I have used the shorthands below, however it would be correct for the student to This extra question requires a little bit of research. One way of achieving this would be to use `order`, which we've encountered in the flexbox tutorial. -``` +```css .item1 { - order: 1; + order: 1; } ``` Another valid solution is to use `z-index`: -``` +```css .item1 { - z-index: 1; + z-index: 1; } ``` ## Grid Layout Three -This task requires that the student gives each part of the layout a name using the `grid-area` property, then uses `grid-template-areas` to lay them out. Possible areas of confusion would be not realising they should place a `.` to leave a cell empty, or that they should repeat the name to cause an element to span more than one track. +This task requires that the student gives each part of the layout a name using the `grid-area` property, then uses `grid-template-areas` to lay them out. Possible areas of confusion would be not realizing they should place a `.` to leave a cell empty, or that they should repeat the name to cause an element to span more than one track. -``` +```css .grid { display: grid; gap: 20px; grid-template-columns: 1fr 2fr; - grid-template-areas: "aa aa" - "bb cc" - ". dd"; + grid-template-areas: + "aa aa" + "bb cc" + ". dd"; } .one { @@ -89,7 +90,7 @@ The ul for the tags needs to be a flex container as tags are not lined up in col The student may try to use flexbox on the container and restrict the cards with percentage values. They may also try to make the items into a grid layout in which case you should point out that the items are not aligned in two dimensions so flexbox isn't the best choice. -``` +```css .container { display: grid; gap: 10px; diff --git a/learn/tasks/images/marking.md b/learn/tasks/images/marking.md index 6fdeb461..8c5c5011 100644 --- a/learn/tasks/images/marking.md +++ b/learn/tasks/images/marking.md @@ -4,11 +4,11 @@ The student has been asked to make the image fill the box, retaining aspect ratio. It has been explained that it is ok if some parts of the image are therefore cropped. Using `object-fit: cover` is the correct choice, they also need to set the width and height to 100%; -``` +```css img { - height: 100%; - width: 100%; - object-fit: cover; + height: 100%; + width: 100%; + object-fit: cover; } ``` @@ -22,7 +22,7 @@ The student has been asked to perform various tasks to style a form field and su - Make the button also use the same font size as the rest of the form. - Give the button a purple background, white foreground, no border and rounded corners of 5px. -``` +```css .myform { border: 2px solid #000; padding: 5px; diff --git a/learn/tasks/multicol/marking.md b/learn/tasks/multicol/marking.md index ddbc9eaa..9e30b398 100644 --- a/learn/tasks/multicol/marking.md +++ b/learn/tasks/multicol/marking.md @@ -1,4 +1,4 @@ -# Multicol Marking Guide +# Multi-column Marking Guide The aim of the tasks are to demonstrate an understanding of the properties covered in the [Multiple-column Layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) lesson in Learn Web Development on MDN. @@ -6,7 +6,7 @@ The aim of the tasks are to demonstrate an understanding of the properties cover This task covers understanding of `column-count` and `column-gap`. -``` +```css .container { column-count: 3; column-gap: 50px; @@ -17,7 +17,7 @@ This task covers understanding of `column-count` and `column-gap`. In this task we test for understanding of `column-width`, `column-rule`, and the fact that a rule does not change the size of the gap. -``` +```css .container { column-width: 200px; column-rule: 5px solid #ccc; @@ -37,8 +37,8 @@ In this task we test for understanding of the `column-span` property. All the student needs to do is set the element with a class of `.box` to `column-span: all`. This is mostly a task of checking that they select the right element. -``` +```css .box { - column-span: all; + column-span: all; } ``` diff --git a/learn/tasks/overflow/marking.md b/learn/tasks/overflow/marking.md index 4ac578e4..e05d777e 100644 --- a/learn/tasks/overflow/marking.md +++ b/learn/tasks/overflow/marking.md @@ -6,7 +6,7 @@ The following tasks aim to help students test their knowledge of the `overflow` In this task there is overflowing text content and the student is asked to cause the box to have scrollbars if there is too much content. They should use `overflow: auto` as then the box will only gain scrollbars when the content is too large. -``` +```css .box { overflow: auto; } @@ -16,7 +16,7 @@ In this task there is overflowing text content and the student is asked to cause In this task an image is overflowing and the student is asked to crop all of the image that is outside of the box. They should therefore use `overflow: hidden`. -``` +```css .box { overflow: hidden; } diff --git a/learn/tasks/position/marking.md b/learn/tasks/position/marking.md index 1bc234c5..c344c1c0 100644 --- a/learn/tasks/position/marking.md +++ b/learn/tasks/position/marking.md @@ -6,7 +6,7 @@ The aim of the tasks are to demonstrate an understanding of the properties cover This task covers understanding of `position: relative` and `position: absolute` and how they relate to each other in terms of relative positioning creating a new positioning context. -``` +```css .container { position: relative; } @@ -26,7 +26,7 @@ For the extra task, the student needs to add a negative `z-index` to the target, In task 2 we check understanding of `position: fixed` with a slightly different example to that in the materials using a sidebar. -``` +```css .sidebar { position: fixed; } diff --git a/learn/tasks/rwd/marking.md b/learn/tasks/rwd/marking.md index 1a445e5d..dbd59bfc 100644 --- a/learn/tasks/rwd/marking.md +++ b/learn/tasks/rwd/marking.md @@ -4,9 +4,9 @@ The aim of the tasks are to demonstrate an understanding of the properties cover This task not only asks the student to implement media queries correctly, they will also need to use the things they have learned about CSS Layout. -There is no one right answer however the following code demontrates how simply the task can be achieved, and this is really what we are looking for as it is easy to complicate this task. Using modern layout methods of flexbox and grid means that we only need one media query. +There is no one right answer however the following code demonstrates how simply the task can be achieved, and this is really what we are looking for as it is easy to complicate this task. Using modern layout methods of flexbox and grid means that we only need one media query. -``` +```css @media screen and (min-width: 60em) { header { display: flex; /* separate the nav and title */ @@ -27,10 +27,10 @@ There is no one right answer however the following code demontrates how simply t } main { - display: grid; /* a two column grid layout for the main content and sidebar */ - grid-template-columns: 3fr 1fr; - gap: 20px; - margin-top: 20px; + display: grid; /* a two column grid layout for the main content and sidebar */ + grid-template-columns: 3fr 1fr; + gap: 20px; + margin-top: 20px; } .cards { diff --git a/learn/tasks/selectors/marking.md b/learn/tasks/selectors/marking.md index a8a07b7b..8c7339c0 100644 --- a/learn/tasks/selectors/marking.md +++ b/learn/tasks/selectors/marking.md @@ -1,12 +1,12 @@ # Selectors Marking Guide -This marking guide is for the tasks on the Selectors pages and subpages in the CSS Building Blocks section of Learn. +This marking guide is for the tasks on the Selectors pages and sub-pages in the CSS Building Blocks section of Learn. ## Task 1: Type selectors The student needs to target the h1, h2 and span selectors to change their color or size. -``` +```css h1 { color: blue; } @@ -25,7 +25,7 @@ span { This tests that the student understands the difference between these and also how to target multiple classes on an item. -``` +```css #special { background-color: yellow; } @@ -35,7 +35,7 @@ This tests that the student understands the difference between these and also ho } .alert.stop { - background-color: red; + background-color: red; } .alert.go { @@ -49,7 +49,7 @@ Here we ask the student to apply a pseudo-class (:first-child) and pseudo-elemen We also ask them to style the `:link`, `:visited`, and `:hover` states of the `a` element, and the created striped table rows using the `:nth-child` pseudo-class. -``` +```css .container p:first-child { font-size: 150%; } @@ -80,7 +80,7 @@ tr:nth-child(even) { This task checks that the student understands how to use the different combinators. They are asked to make paragraphs that directly follow an `h2` red, and to remove the list bullets and add a bottom border only for the direct children of the ul with a class of `.list`. -``` +```css h2 + p { color: red; } @@ -97,27 +97,27 @@ The student is asked to target the `` element with a title attribute and make To select elements with a title attribute we can add title inside the square brackets, which will select the second link, which is the only one with a title attribute. -``` +```css a[title] { border-color: pink; } ``` -Target the element with an href attribute which contains the word contact anywhere in its value and make the border orange (border-color: orange). +Target the `` element with an href attribute which contains the word contact anywhere in its value and make the border orange (border-color: orange). There are two things we want to match here, the href value "/contact" and also "../contact". So we need to match the string "contact" anywhere in the value using \*=. This will select the third and fourth links. -``` +```css a[href*="contact"] { border-color: orange; } ``` -Target the element with an href value starting with https and give it a green border (border-color: green). +Target the `` element with an href value starting with https and give it a green border (border-color: green). Here we can look for an href value which starts with "https" and so use ^=, this will only select the first link. -``` +```css a[href^="https"] { border-color: green; } diff --git a/learn/tasks/sizing/marking.md b/learn/tasks/sizing/marking.md index f24d0109..c449952e 100644 --- a/learn/tasks/sizing/marking.md +++ b/learn/tasks/sizing/marking.md @@ -4,7 +4,7 @@ There are two boxes, the first should be given a minimum height, in which case it will expand to take the additional content but if the student removes some content the box will be at least as tall as the min-height. The second is given a fixed height which will cause content to overflow. -``` +```css .box1 { min-height: 100px; } @@ -18,7 +18,7 @@ There are two boxes, the first should be given a minimum height, in which case i The container is 400 pixels wide. The student is asked to make the box 60 percent of the container and to give it 10% of padding on all sides. All elements already have `box-sizing: border-box` to save the student worrying about which width they are using, and this is explained in the task instruction. -``` +```css * { box-sizing: border-box; } @@ -32,8 +32,8 @@ The container is 400 pixels wide. The student is asked to make the box 60 percen The example has an image which is breaking out of the box and one which is smaller than the box, the student needs to use max-width set to 100% to cause the larger image to grow only as large as the box. If they use width: 100% then the small image will stretch. -``` +```css img { - max-width: 100%; + max-width: 100%; } ``` diff --git a/learn/tasks/tables/marking.md b/learn/tasks/tables/marking.md index 756bbfc5..9c049be0 100644 --- a/learn/tasks/tables/marking.md +++ b/learn/tasks/tables/marking.md @@ -1,10 +1,10 @@ # Marking Guide for Tables tasks -The lesson on styling tables takes a plain table and styles it in a garish way. In the task we ask the student to create a far more subtle version of the table using some best practices for table readability from https://alistapart.com/article/web-typography-tables/. +The lesson on styling tables takes a plain table and styles it in a garish way. In the task we ask the student to create a far more subtle version of the table using some best practices for table readability from . The below is a sample of how the end result could be achieved, using similar techniques to the lesson. However there are a number of ways that would be perfectly correct, perhaps slightly more verbose. -``` +```css table { border-top: 1px solid #999; border-bottom: 1px solid #999; @@ -12,9 +12,10 @@ table { table-layout: fixed; } -th, td { +th, +td { vertical-align: top; - padding: .3em; + padding: 0.3em; } tr :nth-child(2), diff --git a/learn/tasks/values/marking.md b/learn/tasks/values/marking.md index 77cb365c..afdfccae 100644 --- a/learn/tasks/values/marking.md +++ b/learn/tasks/values/marking.md @@ -8,7 +8,7 @@ They have a link to [a color conversion tool](https://convertingcolors.com/hex-c ```css .hex { - background-color: #86DEFA; + background-color: #86defa; } .rgb { @@ -30,7 +30,7 @@ The student is asked to use a variety of length units to size some boxes. ```css h1 { - font-size: 50px; + font-size: 50px; } h2 { @@ -38,11 +38,11 @@ h2 { } p { - font-size: 16px; + font-size: 16px; } -h1+p { - font-size: 120%; +h1 + p { + font-size: 120%; } ``` diff --git a/learn/tasks/writing-modes/marking.md b/learn/tasks/writing-modes/marking.md index fe51b96d..b8766f43 100644 --- a/learn/tasks/writing-modes/marking.md +++ b/learn/tasks/writing-modes/marking.md @@ -4,7 +4,7 @@ The student needs to understand to use the `writing-mode` property with a value of `vertical-rl`. Vertical right to left script. -``` +```css .box { border: 5px solid rebeccapurple; background-color: lightgray; @@ -18,7 +18,7 @@ The student needs to understand to use the `writing-mode` property with a value The student needs to apply the `inline-size` and `block-size` properties to replace `width` and `height`. -``` +```css .box { border: 5px solid rebeccapurple; background-color: lightgray; @@ -33,7 +33,7 @@ The student needs to apply the `inline-size` and `block-size` properties to repl This task checks understanding of the logical, flow relative mappings for margin, border and padding physical properties. -``` +```css .box { width: 150px; height: 150px; diff --git a/logical/border-longhands.html b/logical/border-longhands.html index f2f77aaa..20cf6ac8 100644 --- a/logical/border-longhands.html +++ b/logical/border-longhands.html @@ -11,7 +11,7 @@ } .box { border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); margin: 10px; width: 220px; height: 220px; diff --git a/logical/float.html b/logical/float.html index b8327c1b..13abacf3 100644 --- a/logical/float.html +++ b/logical/float.html @@ -11,9 +11,9 @@ } .box { - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); padding: 10px; margin: 10px; width: 100px; diff --git a/logical/intro-feature-queries.html b/logical/intro-feature-queries.html index 9b9cf0e3..c90e0710 100644 --- a/logical/intro-feature-queries.html +++ b/logical/intro-feature-queries.html @@ -10,14 +10,14 @@ display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(100px, auto); - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; } .grid > * { border-radius: 5px; - border: 2px solid rgba(96, 139, 168, 0.4); - background-color: rgba(96, 139, 168, 0.2); + border: 2px solid rgb(96 139 168 / 0.4); + background-color: rgb(96 139 168 / 0.2); padding: 10px; } diff --git a/logical/intro-grid-example.html b/logical/intro-grid-example.html index efaf0fb4..e72e3583 100644 --- a/logical/intro-grid-example.html +++ b/logical/intro-grid-example.html @@ -10,14 +10,14 @@ display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(100px, auto); - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; } .grid > * { border-radius: 5px; - border: 2px solid rgba(96, 139, 168, 0.4); - background-color: rgba(96, 139, 168, 0.2); + border: 2px solid rgb(96 139 168 / 0.4); + background-color: rgb(96 139 168 / 0.2); padding: 10px; } diff --git a/logical/margin-longhands.html b/logical/margin-longhands.html index 99dea384..a766ffd9 100644 --- a/logical/margin-longhands.html +++ b/logical/margin-longhands.html @@ -13,9 +13,9 @@ border: 2px dotted grey; } .box { - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); padding: 10px; width: 220px; height: 220px; diff --git a/logical/padding-longhands.html b/logical/padding-longhands.html index 1c482a96..ae9697ef 100644 --- a/logical/padding-longhands.html +++ b/logical/padding-longhands.html @@ -10,9 +10,9 @@ display: flex; } .box { - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); margin: 10px; width: 220px; height: 220px; diff --git a/logical/positioning-inset.html b/logical/positioning-inset.html index 8d09853c..f531e36f 100644 --- a/logical/positioning-inset.html +++ b/logical/positioning-inset.html @@ -18,9 +18,9 @@ } .box { - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); padding: 10px; width: 100px; height: 100px; diff --git a/logical/size-inline-block.html b/logical/size-inline-block.html index b98315f2..986c419a 100644 --- a/logical/size-inline-block.html +++ b/logical/size-inline-block.html @@ -10,9 +10,9 @@ display: flex; } .box { - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); padding: 10px; margin: 10px; } diff --git a/logical/size-max.html b/logical/size-max.html index fbdd2020..6055778d 100644 --- a/logical/size-max.html +++ b/logical/size-max.html @@ -10,9 +10,9 @@ display: flex; } .box { - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); padding: 10px; margin: 10px; } diff --git a/logical/size-min.html b/logical/size-min.html index 9b2c6955..d87445d0 100644 --- a/logical/size-min.html +++ b/logical/size-min.html @@ -10,9 +10,9 @@ display: flex; } .box { - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); padding: 10px; margin: 10px; } diff --git a/logical/size-resize.html b/logical/size-resize.html index a887d52d..c176b977 100644 --- a/logical/size-resize.html +++ b/logical/size-resize.html @@ -10,9 +10,9 @@ display: flex; } .box { - border: 2px solid rgb(96, 139, 168); + border: 2px solid rgb(96 139 168); border-radius: 5px; - background-color: rgba(96, 139, 168, 0.2); + background-color: rgb(96 139 168 / 0.2); padding: 10px; margin: 10px; overflow: scroll; diff --git a/modules/animation.html b/modules/animation.html index 36611e87..be216cd2 100644 --- a/modules/animation.html +++ b/modules/animation.html @@ -141,7 +141,7 @@ box-shadow: 5px 15px 15px white, -5px 15px 15px white, - 0 20px 20px rgba(125 125 125 / 0.5); + 0 20px 20px rgb(125 125 125 / 0.5); animation: clouds ease 5s alternate infinite 0.2s, wind ease-out 4s alternate infinite; diff --git a/modules/backgrounds.html b/modules/backgrounds.html index 6f9923b0..8e74ac3d 100644 --- a/modules/backgrounds.html +++ b/modules/backgrounds.html @@ -33,10 +33,10 @@ 120px 120px; background-clip: content-box, content-box, padding-box; box-shadow: - inset 5px 5px 5px rgba(0, 0, 0, 0.4), - inset -5px -5px 5px rgba(0, 0, 0, 0.4), - 5px 5px 5px rgba(0, 0, 0, 0.4), - -5px -5px 5px rgba(0, 0, 0, 0.4); + inset 5px 5px 5px rgb(0 0 0 / 0.4), + inset -5px -5px 5px rgb(0 0 0 / 0.4), + 5px 5px 5px rgb(0 0 0 / 0.4), + -5px -5px 5px rgb(0 0 0 / 0.4); } div:first-of-type { border-radius: 0; diff --git a/modules/colors.html b/modules/colors.html index cb106a70..70e1a197 100644 --- a/modules/colors.html +++ b/modules/colors.html @@ -77,6 +77,10 @@ HWB + + color() + + @@ -144,6 +148,19 @@ cell.textContent = `rgb(${R} ${G} ${B} / ${opacity})`; } createHSL(R, G, B, opacity); + createColorFunc(R, G, B, opacity); + } + + function createColorFunc(r, g, b, opacity) { + const cell = document.querySelector("#colorfunc td"); + const R = Number((r / 255).toFixed(2)); + const G = Number((g / 255).toFixed(2)); + const B = Number((b / 255).toFixed(2)); + if (opacity === 1) { + cell.textContent = `color(srgb ${R} ${G} ${B})`; + } else { + cell.textContent = `color(srgb ${R} ${G} ${B} / ${opacity})`; + } } function createHSL(r, g, b, opacity) { diff --git a/modules/compositing.html b/modules/compositing.html index b71a8b3c..d82d7ff9 100644 --- a/modules/compositing.html +++ b/modules/compositing.html @@ -45,7 +45,7 @@ background: radial-gradient( circle, transparent 0 20px, - rgb(255, 200, 200) 20px + rgb(255 200 200) 20px ); background-size: 60px 60px; background-position: center; diff --git a/modules/generated_content.html b/modules/generated_content.html index da599e48..ab2e50b3 100644 --- a/modules/generated_content.html +++ b/modules/generated_content.html @@ -5,83 +5,33 @@ Generated content - - - -
-
- Transform settings - - -
-
- - - - -
-
- - -
-
- - -
-
- - -
-
-
- -
- - - - -
-
- - -
-
- - -
-
- - -
-
-
- -
- - - - -
-
- - -
-
- - -
-
- - -
-
-
- -
- - - - -
-
- - -
-
- - -
-
-
- -
- - - - -
-
- - -
-
- - -
-
- - -
-
-
- -
- - - - -
-
- -
-
-
-
-
-
-
-
-
1
-
2
-
3
-
4
-
5
-
6
-
-
z:0px
-
-
-
-
- - - - \ No newline at end of file + + + + + + + CSS Transforms + + + + +
+
+ Transform settings + + +
+
+ + + + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+ + + + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+ + + + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+ + + + +
+
+ + +
+
+ + +
+
+
+ +
+ + + + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+ + + + +
+
+ +
+
+
+
+
+
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+
z:0px
+
+
+
+
+ + + + diff --git a/overscroll-behavior/overscroll-behavior-x.html b/overscroll-behavior/overscroll-behavior-x.html index 4f504989..b87c70e1 100644 --- a/overscroll-behavior/overscroll-behavior-x.html +++ b/overscroll-behavior/overscroll-behavior-x.html @@ -11,9 +11,9 @@ background-color: magenta; background-image: repeating-linear-gradient( to right, - rgba(0, 0, 0, 0) 0px, - rgba(0, 0, 0, 0) 19px, - rgba(0, 0, 0, 0.5) 20px + rgb(0 0 0 / 0) 0px, + rgb(0 0 0 / 0) 19px, + rgb(0 0 0 / 0.5) 20px ); } @@ -33,15 +33,15 @@ background-color: yellow; background-image: repeating-linear-gradient( to right, - rgba(0, 0, 0, 0) 0px, - rgba(0, 0, 0, 0) 19px, - rgba(0, 0, 0, 0.5) 20px + rgb(0 0 0 / 0) 0px, + rgb(0 0 0 / 0) 19px, + rgb(0 0 0 / 0.5) 20px ); } p { padding: 10px; - background-color: rgba(255, 0, 0, 0.5); + background-color: rgb(255 0 0 / 0.5); margin: 0; width: 300px; position: relative; diff --git a/path/offset-path.html b/path/offset-path.html index 454cf8b8..16e88be8 100644 --- a/path/offset-path.html +++ b/path/offset-path.html @@ -67,7 +67,7 @@ .parent { width: 200px; height: 200px; - border: 4px solid rgba(0, 0, 0, 0.1); + border: 4px solid rgb(0 0 0 / 0.1); border-radius: 50%; margin: 40px; } @@ -96,7 +96,7 @@ .parent { width: 200px; height: 200px; - border: 4px solid rgba(0,0,0,0.1); + border: 4px solid rgb(0 0 0 / 0.1); border-radius: 50%; margin: 40px; } diff --git a/time/styles.css b/time/styles.css index 11945fee..f46d5bc4 100644 --- a/time/styles.css +++ b/time/styles.css @@ -1,10 +1,10 @@ /* Some default styling for cookbook examples */ /* -rgb(53,43,34) -rgb(75,70,74) -rgb(95,97,110) -rgb(137,151,188) -rgb(160,178,226) +rgb(53 43 34) +rgb(75 70 74) +rgb(95 97 110) +rgb(137 151 188) +rgb(160 178 226) */ body { background-color: #fff; diff --git a/tools/border-image-generator/index.html b/tools/border-image-generator/index.html index f61a6610..b682c79c 100644 --- a/tools/border-image-generator/index.html +++ b/tools/border-image-generator/index.html @@ -90,7 +90,7 @@
-
additional-properties
+
Additional properties
repeat-x
-
CSS Code
+
+ CSS Code +
- border-image-slice: - + border-image-slice: + =
border-image-width: - +
- border-image-outset: - + border-image-outset: +
- border-image-repeat: - + border-image-repeat: +
- border-image-source: - + border-image-source: +
- border-style: + border-style: solid;
diff --git a/tools/border-image-generator/script.js b/tools/border-image-generator/script.js index a998df35..e7568ca0 100644 --- a/tools/border-image-generator/script.js +++ b/tools/border-image-generator/script.js @@ -1064,8 +1064,8 @@ var BorderImage = (function BorderImage() { var preview_area; var dropdown_unit_options = [ { "": "--", "%": "%" }, - { px: "px", "%": "%", em: "em" }, - { px: "px", em: "em" }, + { px: "px", "%": "%", em: "em", "": "--", auto: "auto" }, + { px: "px", em: "em", "": "--" }, ]; var border_slice = []; @@ -1109,6 +1109,7 @@ var BorderImage = (function BorderImage() { if (value === true) bimgslice += " fill"; preview.style.borderImageSlice = bimgslice; + setOutputCSS("slice", bimgslice); }; var updateBorderWidth = function updateBorderWidth() { @@ -1224,7 +1225,18 @@ var BorderImage = (function BorderImage() { else InputSliderManager.setMax(topic, 1000); border_width_units[id] = obj.value; - border_width[id] = border_width_values[id] + obj.value; + var thisInput = document.querySelector(".ui-input-slider[data-topic='" + topic + "']"); + if (obj.value === "auto") { + thisInput.querySelector("input").style.visibility = "hidden"; + thisInput.querySelector(".ui-input-slider-left").style.visibility = "hidden"; + thisInput.querySelector(".ui-input-slider-right").style.visibility = "hidden"; + border_width[id] = "auto"; + } else { + thisInput.querySelector("input").style.visibility = "visible"; + thisInput.querySelector(".ui-input-slider-left").style.visibility = "visible"; + thisInput.querySelector(".ui-input-slider-right").style.visibility = "visible"; + border_width[id] = border_width_values[id] + obj.value; + } updateBorderWidth(); }); }; @@ -1266,6 +1278,25 @@ var BorderImage = (function BorderImage() { } }; + var initCodeOutput = function initCodeOutput() { + var copyButton = getElemById("copy-css"); + + var copy = function copy() { + let output = ""; + + for (const property of document.querySelectorAll(".css-property")) { + const name = property.querySelector(".name").innerText; + const value = property.querySelector(".value").innerText; + + output += name + " " + value + "\n"; + } + + navigator.clipboard.writeText(output); + }; + + copyButton.addEventListener("click", copy); + }; + var init = function init() { var gallery = (subject = getElemById("subject")); preview = getElemById("preview"); @@ -1280,6 +1311,7 @@ var BorderImage = (function BorderImage() { initBorderSliceControls(); initBorderWidthControls(); initBorderOutsetControls(); + initCodeOutput(); var elem = document.querySelectorAll(".guideline"); var size = elem.length; diff --git a/tools/border-image-generator/styles.css b/tools/border-image-generator/styles.css index bd0f419e..31e80ba9 100644 --- a/tools/border-image-generator/styles.css +++ b/tools/border-image-generator/styles.css @@ -189,7 +189,6 @@ .ui-dropdown-list { width: 100%; - height: 150px; max-height: 150px; margin: 0; padding: 0 0.3em; @@ -478,7 +477,7 @@ body[data-move="Y"] { #remote-url:focus { box-shadow: 0px 0px 3px -1px #379b4a; /*#68ACE8; */ - border-color: rgba(55, 155, 74, 0.5); + border-color: rgb(55 155 74 / 0.5); width: 450px; } @@ -512,8 +511,8 @@ body[data-move="Y"] { } #subject .guideline { - background-color: rgba(255, 255, 255, 0.7); - border: 1px solid rgba(0, 0, 0, 0.3); + background-color: rgb(255 255 255 / 0.7); + border: 1px solid rgb(0 0 0 / 0.3); position: absolute; } @@ -842,29 +841,10 @@ body[data-move="Y"] { } #controls .border-repeat .ui-dropdown-list { - height: 8.2em; border-width: 1px; text-align: center; } -/* border-image-slice */ - -#border-slice-control .ui-dropdown-list { - height: 4.3em; -} - -/* border-image-width */ - -#border-width-control .ui-dropdown-list { - height: 6.2em; -} - -/* border-image-outset */ - -#border-outset-control .ui-dropdown-list { - height: 4.3em; -} - #additional-properties .property { width: 200px; } @@ -972,6 +952,25 @@ body[data-move="Y"] { color: #aaa; } +#output .title #copy-css { + float: right; + + background-color: unset; + color: inherit; + border: 1px solid #ccc; + border-radius: 3px; + box-shadow: 0 0 3px 0 #bababa; +} + +#controls .category:hover #copy-css:not(:hover) { + color: #aaa; +} + +#output .title #copy-css:hover { + cursor: pointer; + color: #777; +} + #output .css-property { width: 100%; margin: 0; diff --git a/tools/box-shadow-generator/styles.css b/tools/box-shadow-generator/styles.css index 9a77a67e..3cfffa96 100644 --- a/tools/box-shadow-generator/styles.css +++ b/tools/box-shadow-generator/styles.css @@ -671,11 +671,11 @@ body { margin: 5px; background: url("picker_mask_200.png"); background: - -moz-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), - -moz-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); + -moz-linear-gradient(bottom, #000 0%, rgb(0 0 0 / 0) 100%), + -moz-linear-gradient(left, #fff 0%, rgb(255 255 255 / 0) 100%); background: - -webkit-linear-gradient(bottom, #000 0%, rgba(0, 0, 0, 0) 100%), - -webkit-linear-gradient(left, #fff 0%, rgba(255, 255, 255, 0) 100%); + -webkit-linear-gradient(bottom, #000 0%, rgb(0 0 0 / 0) 100%), + -webkit-linear-gradient(left, #fff 0%, rgb(255 255 255 / 0) 100%); background-color: #f00; float: left; } @@ -727,8 +727,8 @@ body { background: url("alpha_mask.png"); background: -moz-linear-gradient( left, - rgba(255, 0, 0, 0) 0%, - rgba(255, 0, 0, 1) 100% + rgb(255 0 0 / 0) 0%, + rgb(255 0 0 / 1) 100% ); } diff --git a/tools/color-mixer/classic.min.css b/tools/color-mixer/classic.min.css new file mode 100644 index 00000000..43ee029a --- /dev/null +++ b/tools/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{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/tools/color-mixer/index.html b/tools/color-mixer/index.html new file mode 100644 index 00000000..aa083eba --- /dev/null +++ b/tools/color-mixer/index.html @@ -0,0 +1,387 @@ + + + + + + Color mixer: Utility to test color-mix() function + + + + +
+

Color mixer

+

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

+ + +
mixed-color
+ + + +
+ + + + +
+ + +
+
+ + +
+ + + + + + +
+ + + + diff --git a/tools/color-mixer/pickr.es5.min.js b/tools/color-mixer/pickr.es5.min.js new file mode 100644 index 00000000..921cf3dc --- /dev/null +++ b/tools/color-mixer/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;c<48||u>o)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<<<-e,0),m=b(p)+f("0",u);return m=u>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&&r+t.length>=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