From b05b9d4bca62f5afd01e0b38a42fde0bee612a4e Mon Sep 17 00:00:00 2001 From: Anjana Vakil Date: Thu, 30 Nov 2023 09:23:16 -0600 Subject: [PATCH] Init --- .eslintrc.json | 12 + .github/workflows/deploy-pages.yml | 51 + .gitignore | 24 + README.md | 9 + assets/fonts.css | 16 + assets/layout.css | 90 + assets/modals.css | 58 + assets/pico.css | 3001 ++++++++++++++++++++++++++++ index.html | 73 + main.js | 81 + meme-me.html | 240 +++ package-lock.json | 1854 +++++++++++++++++ package.json | 18 + public/javascript.svg | 1 + public/vite.svg | 1 + src/camera.js | 45 + src/modal.js | 56 + src/text.js | 33 + src/theme.js | 12 + vite.config.js | 5 + 20 files changed, 5680 insertions(+) create mode 100644 .eslintrc.json create mode 100644 .github/workflows/deploy-pages.yml create mode 100644 .gitignore create mode 100644 README.md create mode 100644 assets/fonts.css create mode 100644 assets/layout.css create mode 100644 assets/modals.css create mode 100644 assets/pico.css create mode 100644 index.html create mode 100644 main.js create mode 100644 meme-me.html create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 public/javascript.svg create mode 100644 public/vite.svg create mode 100644 src/camera.js create mode 100644 src/modal.js create mode 100644 src/text.js create mode 100644 src/theme.js create mode 100644 vite.config.js diff --git a/.eslintrc.json b/.eslintrc.json new file mode 100644 index 0000000..9abecd6 --- /dev/null +++ b/.eslintrc.json @@ -0,0 +1,12 @@ +{ + "env": { + "browser": true, + "es2021": true + }, + "extends": "eslint:recommended", + "parserOptions": { + "ecmaVersion": "latest", + "sourceType": "module" + }, + "rules": {} +} diff --git a/.github/workflows/deploy-pages.yml b/.github/workflows/deploy-pages.yml new file mode 100644 index 0000000..dfcaff1 --- /dev/null +++ b/.github/workflows/deploy-pages.yml @@ -0,0 +1,51 @@ +# Simple workflow for deploying static content to GitHub Pages +name: Deploy static content to Pages + +on: + # Runs on pushes targeting the default branch + push: + branches: ["main"] + + # Allows you to run this workflow manually from the Actions tab + workflow_dispatch: + +# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages +permissions: + contents: read + pages: write + id-token: write + +# Allow one concurrent deployment +concurrency: + group: "pages" + cancel-in-progress: true + +jobs: + # Single deploy job since we're just deploying + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + - name: Set up Node + uses: actions/setup-node@v3 + with: + node-version: 18 + cache: "npm" + - name: Install dependencies + run: npm install + - name: Build + run: npm run build + - name: Setup Pages + uses: actions/configure-pages@v3 + - name: Upload artifact + uses: actions/upload-pages-artifact@v2 + with: + # Upload dist repository + path: "./dist" + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v2 diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..a547bf3 --- /dev/null +++ b/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/README.md b/README.md new file mode 100644 index 0000000..06e5149 --- /dev/null +++ b/README.md @@ -0,0 +1,9 @@ +# MEME ME! + +Make a meme as beautiful as you are! + +A forkable, hackable project built with [Vite](https://vitejs.dev), +[Pico.css](https://picocss.com) & Vanilla JS at +[FrontendMasters](https://frontendmasters.com) + +Demo: [anjana.dev/meme-me](https://anjana.dev/meme-me) diff --git a/assets/fonts.css b/assets/fonts.css new file mode 100644 index 0000000..9614315 --- /dev/null +++ b/assets/fonts.css @@ -0,0 +1,16 @@ +.impact { + font-family: Impact, sans-serif; +} + +.arial { + font-family: Arial, Helvetica, sans-serif; +} + +.comic-sans { + font-family: "Comic Sans MS", sans-serif; +} + +h1 { + font-size: 3em; + text-transform: uppercase; +} diff --git a/assets/layout.css b/assets/layout.css new file mode 100644 index 0000000..6398286 --- /dev/null +++ b/assets/layout.css @@ -0,0 +1,90 @@ +body.grid { + width: 100%; + min-height: 480px; + overflow-y: scroll; + margin: 0px auto; + text-align: center; + grid-template-areas: + "header" + "main" + "nav" + "footer"; + grid-template-columns: 1fr; + grid-template-rows: max-content 2fr 1fr max-content; +} + +@media (min-width: 768px) { + :root { + --header-height: 3em; + --footer-height: 2em; + } + + body.grid { + height: 100vh; + grid-template-areas: + "header main" + "nav main" + "footer main"; + grid-template-columns: minmax(20%, 40%) 1fr; + grid-template-rows: min-content 1fr min-content; + } + + body > header { + text-align: left; + padding-bottom: 0px; + } + + body > main { + margin-top: var(--header-height); + margin-bottom: var(--footer-height); + } + + body > footer { + padding-top: 0px; + } +} + +body > header { + grid-area: header; +} + +header > h1 { + margin-bottom: 0px; +} + +body > nav { + grid-area: nav; + flex-direction: column; +} + +body > main { + grid-area: main; + padding-top: 0px; + padding-bottom: 0px; + align-self: center; + justify-self: center; + min-height: 480px; +} + +body > footer { + grid-area: footer; + width: 100%; +} + +footer > * { + margin-bottom: 0px; +} + +#settings, +#dark-mode { + flex-shrink: 0; + text-align: left; +} + +main > video, +main > canvas, +#meme { + object-fit: contain; + width: 100%; + height: 90%; +} diff --git a/assets/modals.css b/assets/modals.css new file mode 100644 index 0000000..2abfa65 --- /dev/null +++ b/assets/modals.css @@ -0,0 +1,58 @@ +#steps { + height: 100%; + display: flex; + margin-left: 0px; + margin-right: 0px; + padding-left: 0px; + padding-right: 0px; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: left; +} + +#steps > * { + width: 100%; + margin: 0px auto; +} + +.modal-content { + padding-top: 0.5em; + padding-bottom: 1em; +} + +.modal-content > * { + margin-top: 0.25em; + margin-bottom: 0.25em; +} + +dialog form, +dialog article { + margin-top: 0px; + margin-bottom: 0px; +} + +dialog form { + text-align: left; + min-width: 50%; + max-width: 100%; +} + +dialog article { + min-height: fit-content; + max-height: 100vh; + padding-top: 1em; + padding-bottom: 0.5em; +} + +dialog h2 { + margin-bottom: 0.5em; +} + +dialog article main { + display: flex; + gap: 0.5em; + flex-direction: column; + justify-content: center; + align-items: center; +} diff --git a/assets/pico.css b/assets/pico.css new file mode 100644 index 0000000..085668c --- /dev/null +++ b/assets/pico.css @@ -0,0 +1,3001 @@ +@charset "UTF-8"; +/*! + * Pico CSS v1.5.10 (https://picocss.com) + * Copyright 2019-2023 - Licensed under MIT + */ +/** + * Theme: default + */ +:root { + --font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", + "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", + "Segoe UI Symbol", "Noto Color Emoji"; + --line-height: 1.5; + --font-weight: 400; + --font-size: 16px; + --border-radius: 0.25rem; + --border-width: 1px; + --outline-width: 3px; + --spacing: 1rem; + --typography-spacing-vertical: 1.5rem; + --block-spacing-vertical: calc(var(--spacing) * 2); + --block-spacing-horizontal: var(--spacing); + --grid-spacing-vertical: 0; + --grid-spacing-horizontal: var(--spacing); + --form-element-spacing-vertical: 0.75rem; + --form-element-spacing-horizontal: 1rem; + --nav-element-spacing-vertical: 1rem; + --nav-element-spacing-horizontal: 0.5rem; + --nav-link-spacing-vertical: 0.5rem; + --nav-link-spacing-horizontal: 0.5rem; + --form-label-font-weight: var(--font-weight); + --transition: 0.2s ease-in-out; + --modal-overlay-backdrop-filter: blur(0.25rem); +} +@media (min-width: 576px) { + :root { + --font-size: 17px; + } +} +@media (min-width: 768px) { + :root { + --font-size: 18px; + } +} +@media (min-width: 992px) { + :root { + --font-size: 19px; + } +} +@media (min-width: 1200px) { + :root { + --font-size: 20px; + } +} + +@media (min-width: 576px) { + body > header, + body > main, + body > footer, + section { + --block-spacing-vertical: calc(var(--spacing) * 2.5); + } +} +@media (min-width: 768px) { + body > header, + body > main, + body > footer, + section { + --block-spacing-vertical: calc(var(--spacing) * 3); + } +} +@media (min-width: 992px) { + body > header, + body > main, + body > footer, + section { + --block-spacing-vertical: calc(var(--spacing) * 3.5); + } +} +@media (min-width: 1200px) { + body > header, + body > main, + body > footer, + section { + --block-spacing-vertical: calc(var(--spacing) * 4); + } +} + +@media (min-width: 576px) { + article { + --block-spacing-horizontal: calc(var(--spacing) * 1.25); + } +} +@media (min-width: 768px) { + article { + --block-spacing-horizontal: calc(var(--spacing) * 1.5); + } +} +@media (min-width: 992px) { + article { + --block-spacing-horizontal: calc(var(--spacing) * 1.75); + } +} +@media (min-width: 1200px) { + article { + --block-spacing-horizontal: calc(var(--spacing) * 2); + } +} + +dialog > article { + --block-spacing-vertical: calc(var(--spacing) * 2); + --block-spacing-horizontal: var(--spacing); +} +@media (min-width: 576px) { + dialog > article { + --block-spacing-vertical: calc(var(--spacing) * 2.5); + --block-spacing-horizontal: calc(var(--spacing) * 1.25); + } +} +@media (min-width: 768px) { + dialog > article { + --block-spacing-vertical: calc(var(--spacing) * 3); + --block-spacing-horizontal: calc(var(--spacing) * 1.5); + } +} + +a { + --text-decoration: none; +} +a.secondary, +a.contrast { + --text-decoration: underline; +} + +small { + --font-size: 0.875em; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + --font-weight: 700; +} + +h1 { + --font-size: 2rem; + --typography-spacing-vertical: 3rem; +} + +h2 { + --font-size: 1.75rem; + --typography-spacing-vertical: 2.625rem; +} + +h3 { + --font-size: 1.5rem; + --typography-spacing-vertical: 2.25rem; +} + +h4 { + --font-size: 1.25rem; + --typography-spacing-vertical: 1.874rem; +} + +h5 { + --font-size: 1.125rem; + --typography-spacing-vertical: 1.6875rem; +} + +[type="checkbox"], +[type="radio"] { + --border-width: 2px; +} + +[type="checkbox"][role="switch"] { + --border-width: 3px; +} + +thead th, +thead td, +tfoot th, +tfoot td { + --border-width: 3px; +} + +:not(thead, tfoot) > * > td { + --font-size: 0.875em; +} + +pre, +code, +kbd, +samp { + --font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", + "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, + "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; +} + +kbd { + --font-weight: bolder; +} + +[data-theme="light"], +:root:not([data-theme="dark"]) { + --background-color: #fff; + --color: hsl(205, 20%, 32%); + --h1-color: hsl(205, 30%, 15%); + --h2-color: #24333e; + --h3-color: hsl(205, 25%, 23%); + --h4-color: #374956; + --h5-color: hsl(205, 20%, 32%); + --h6-color: #4d606d; + --muted-color: hsl(205, 10%, 50%); + --muted-border-color: hsl(205, 20%, 94%); + --primary: hsl(195, 85%, 41%); + --primary-hover: hsl(195, 90%, 32%); + --primary-focus: rgba(16, 149, 193, 0.125); + --primary-inverse: #fff; + --secondary: hsl(205, 15%, 41%); + --secondary-hover: hsl(205, 20%, 32%); + --secondary-focus: rgba(89, 107, 120, 0.125); + --secondary-inverse: #fff; + --contrast: hsl(205, 30%, 15%); + --contrast-hover: #000; + --contrast-focus: rgba(89, 107, 120, 0.125); + --contrast-inverse: #fff; + --mark-background-color: #fff2ca; + --mark-color: #543a26; + --ins-color: #388e3c; + --del-color: #c62828; + --blockquote-border-color: var(--muted-border-color); + --blockquote-footer-color: var(--muted-color); + --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + --form-element-background-color: transparent; + --form-element-border-color: hsl(205, 14%, 68%); + --form-element-color: var(--color); + --form-element-placeholder-color: var(--muted-color); + --form-element-active-background-color: transparent; + --form-element-active-border-color: var(--primary); + --form-element-focus-color: var(--primary-focus); + --form-element-disabled-background-color: hsl(205, 18%, 86%); + --form-element-disabled-border-color: hsl(205, 14%, 68%); + --form-element-disabled-opacity: 0.5; + --form-element-invalid-border-color: #c62828; + --form-element-invalid-active-border-color: #d32f2f; + --form-element-invalid-focus-color: rgba(211, 47, 47, 0.125); + --form-element-valid-border-color: #388e3c; + --form-element-valid-active-border-color: #43a047; + --form-element-valid-focus-color: rgba(67, 160, 71, 0.125); + --switch-background-color: hsl(205, 16%, 77%); + --switch-color: var(--primary-inverse); + --switch-checked-background-color: var(--primary); + --range-border-color: hsl(205, 18%, 86%); + --range-active-border-color: hsl(205, 16%, 77%); + --range-thumb-border-color: var(--background-color); + --range-thumb-color: var(--secondary); + --range-thumb-hover-color: var(--secondary-hover); + --range-thumb-active-color: var(--primary); + --table-border-color: var(--muted-border-color); + --table-row-stripped-background-color: #f6f8f9; + --code-background-color: hsl(205, 20%, 94%); + --code-color: var(--muted-color); + --code-kbd-background-color: var(--contrast); + --code-kbd-color: var(--contrast-inverse); + --code-tag-color: hsl(330, 40%, 50%); + --code-property-color: hsl(185, 40%, 40%); + --code-value-color: hsl(40, 20%, 50%); + --code-comment-color: hsl(205, 14%, 68%); + --accordion-border-color: var(--muted-border-color); + --accordion-close-summary-color: var(--color); + --accordion-open-summary-color: var(--muted-color); + --card-background-color: var(--background-color); + --card-border-color: var(--muted-border-color); + --card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(27, 40, 50, 0.01698), + 0.0335rem 0.067rem 0.402rem rgba(27, 40, 50, 0.024), + 0.0625rem 0.125rem 0.75rem rgba(27, 40, 50, 0.03), + 0.1125rem 0.225rem 1.35rem rgba(27, 40, 50, 0.036), + 0.2085rem 0.417rem 2.502rem rgba(27, 40, 50, 0.04302), + 0.5rem 1rem 6rem rgba(27, 40, 50, 0.06), + 0 0 0 0.0625rem rgba(27, 40, 50, 0.015); + --card-sectionning-background-color: #fbfbfc; + --dropdown-background-color: #fbfbfc; + --dropdown-border-color: #e1e6eb; + --dropdown-box-shadow: var(--card-box-shadow); + --dropdown-color: var(--color); + --dropdown-hover-background-color: hsl(205, 20%, 94%); + --modal-overlay-background-color: rgba(213, 220, 226, 0.7); + --progress-background-color: hsl(205, 18%, 86%); + --progress-color: var(--primary); + --loading-spinner-opacity: 0.5; + --tooltip-background-color: var(--contrast); + --tooltip-color: var(--contrast-inverse); + --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); + --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); + --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(198, 40, 40)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); + --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); + --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); + --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(65, 84, 98)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(56, 142, 60)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + color-scheme: light; +} + +@media only screen and (prefers-color-scheme: dark) { + :root:not([data-theme]) { + --background-color: #11191f; + --color: hsl(205, 16%, 77%); + --h1-color: hsl(205, 20%, 94%); + --h2-color: #e1e6eb; + --h3-color: hsl(205, 18%, 86%); + --h4-color: #c8d1d8; + --h5-color: hsl(205, 16%, 77%); + --h6-color: #afbbc4; + --muted-color: hsl(205, 10%, 50%); + --muted-border-color: #1f2d38; + --primary: hsl(195, 85%, 41%); + --primary-hover: hsl(195, 80%, 50%); + --primary-focus: rgba(16, 149, 193, 0.25); + --primary-inverse: #fff; + --secondary: hsl(205, 15%, 41%); + --secondary-hover: hsl(205, 10%, 50%); + --secondary-focus: rgba(115, 130, 140, 0.25); + --secondary-inverse: #fff; + --contrast: hsl(205, 20%, 94%); + --contrast-hover: #fff; + --contrast-focus: rgba(115, 130, 140, 0.25); + --contrast-inverse: #000; + --mark-background-color: #d1c284; + --mark-color: #11191f; + --ins-color: #388e3c; + --del-color: #c62828; + --blockquote-border-color: var(--muted-border-color); + --blockquote-footer-color: var(--muted-color); + --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + --form-element-background-color: #11191f; + --form-element-border-color: #374956; + --form-element-color: var(--color); + --form-element-placeholder-color: var(--muted-color); + --form-element-active-background-color: var( + --form-element-background-color + ); + --form-element-active-border-color: var(--primary); + --form-element-focus-color: var(--primary-focus); + --form-element-disabled-background-color: hsl(205, 25%, 23%); + --form-element-disabled-border-color: hsl(205, 20%, 32%); + --form-element-disabled-opacity: 0.5; + --form-element-invalid-border-color: #b71c1c; + --form-element-invalid-active-border-color: #c62828; + --form-element-invalid-focus-color: rgba(198, 40, 40, 0.25); + --form-element-valid-border-color: #2e7d32; + --form-element-valid-active-border-color: #388e3c; + --form-element-valid-focus-color: rgba(56, 142, 60, 0.25); + --switch-background-color: #374956; + --switch-color: var(--primary-inverse); + --switch-checked-background-color: var(--primary); + --range-border-color: #24333e; + --range-active-border-color: hsl(205, 25%, 23%); + --range-thumb-border-color: var(--background-color); + --range-thumb-color: var(--secondary); + --range-thumb-hover-color: var(--secondary-hover); + --range-thumb-active-color: var(--primary); + --table-border-color: var(--muted-border-color); + --table-row-stripped-background-color: rgba(115, 130, 140, 0.05); + --code-background-color: #18232c; + --code-color: var(--muted-color); + --code-kbd-background-color: var(--contrast); + --code-kbd-color: var(--contrast-inverse); + --code-tag-color: hsl(330, 30%, 50%); + --code-property-color: hsl(185, 30%, 50%); + --code-value-color: hsl(40, 10%, 50%); + --code-comment-color: #4d606d; + --accordion-border-color: var(--muted-border-color); + --accordion-active-summary-color: var(--primary); + --accordion-close-summary-color: var(--color); + --accordion-open-summary-color: var(--muted-color); + --card-background-color: #141e26; + --card-border-color: var(--card-background-color); + --card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698), + 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024), + 0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03), + 0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036), + 0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302), + 0.5rem 1rem 6rem rgba(0, 0, 0, 0.06), 0 0 0 0.0625rem rgba(0, 0, 0, 0.015); + --card-sectionning-background-color: #18232c; + --dropdown-background-color: hsl(205, 30%, 15%); + --dropdown-border-color: #24333e; + --dropdown-box-shadow: var(--card-box-shadow); + --dropdown-color: var(--color); + --dropdown-hover-background-color: rgba(36, 51, 62, 0.75); + --modal-overlay-background-color: rgba(36, 51, 62, 0.8); + --progress-background-color: #24333e; + --progress-color: var(--primary); + --loading-spinner-opacity: 0.5; + --tooltip-background-color: var(--contrast); + --tooltip-color: var(--contrast-inverse); + --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); + --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); + --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 28, 28)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); + --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); + --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); + --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(46, 125, 50)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + color-scheme: dark; + } +} +[data-theme="dark"] { + --background-color: #11191f; + --color: hsl(205, 16%, 77%); + --h1-color: hsl(205, 20%, 94%); + --h2-color: #e1e6eb; + --h3-color: hsl(205, 18%, 86%); + --h4-color: #c8d1d8; + --h5-color: hsl(205, 16%, 77%); + --h6-color: #afbbc4; + --muted-color: hsl(205, 10%, 50%); + --muted-border-color: #1f2d38; + --primary: hsl(195, 85%, 41%); + --primary-hover: hsl(195, 80%, 50%); + --primary-focus: rgba(16, 149, 193, 0.25); + --primary-inverse: #fff; + --secondary: hsl(205, 15%, 41%); + --secondary-hover: hsl(205, 10%, 50%); + --secondary-focus: rgba(115, 130, 140, 0.25); + --secondary-inverse: #fff; + --contrast: hsl(205, 20%, 94%); + --contrast-hover: #fff; + --contrast-focus: rgba(115, 130, 140, 0.25); + --contrast-inverse: #000; + --mark-background-color: #d1c284; + --mark-color: #11191f; + --ins-color: #388e3c; + --del-color: #c62828; + --blockquote-border-color: var(--muted-border-color); + --blockquote-footer-color: var(--muted-color); + --button-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + --button-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0); + --form-element-background-color: #11191f; + --form-element-border-color: #374956; + --form-element-color: var(--color); + --form-element-placeholder-color: var(--muted-color); + --form-element-active-background-color: var(--form-element-background-color); + --form-element-active-border-color: var(--primary); + --form-element-focus-color: var(--primary-focus); + --form-element-disabled-background-color: hsl(205, 25%, 23%); + --form-element-disabled-border-color: hsl(205, 20%, 32%); + --form-element-disabled-opacity: 0.5; + --form-element-invalid-border-color: #b71c1c; + --form-element-invalid-active-border-color: #c62828; + --form-element-invalid-focus-color: rgba(198, 40, 40, 0.25); + --form-element-valid-border-color: #2e7d32; + --form-element-valid-active-border-color: #388e3c; + --form-element-valid-focus-color: rgba(56, 142, 60, 0.25); + --switch-background-color: #374956; + --switch-color: var(--primary-inverse); + --switch-checked-background-color: var(--primary); + --range-border-color: #24333e; + --range-active-border-color: hsl(205, 25%, 23%); + --range-thumb-border-color: var(--background-color); + --range-thumb-color: var(--secondary); + --range-thumb-hover-color: var(--secondary-hover); + --range-thumb-active-color: var(--primary); + --table-border-color: var(--muted-border-color); + --table-row-stripped-background-color: rgba(115, 130, 140, 0.05); + --code-background-color: #18232c; + --code-color: var(--muted-color); + --code-kbd-background-color: var(--contrast); + --code-kbd-color: var(--contrast-inverse); + --code-tag-color: hsl(330, 30%, 50%); + --code-property-color: hsl(185, 30%, 50%); + --code-value-color: hsl(40, 10%, 50%); + --code-comment-color: #4d606d; + --accordion-border-color: var(--muted-border-color); + --accordion-active-summary-color: var(--primary); + --accordion-close-summary-color: var(--color); + --accordion-open-summary-color: var(--muted-color); + --card-background-color: #141e26; + --card-border-color: var(--card-background-color); + --card-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(0, 0, 0, 0.01698), + 0.0335rem 0.067rem 0.402rem rgba(0, 0, 0, 0.024), + 0.0625rem 0.125rem 0.75rem rgba(0, 0, 0, 0.03), + 0.1125rem 0.225rem 1.35rem rgba(0, 0, 0, 0.036), + 0.2085rem 0.417rem 2.502rem rgba(0, 0, 0, 0.04302), + 0.5rem 1rem 6rem rgba(0, 0, 0, 0.06), 0 0 0 0.0625rem rgba(0, 0, 0, 0.015); + --card-sectionning-background-color: #18232c; + --dropdown-background-color: hsl(205, 30%, 15%); + --dropdown-border-color: #24333e; + --dropdown-box-shadow: var(--card-box-shadow); + --dropdown-color: var(--color); + --dropdown-hover-background-color: rgba(36, 51, 62, 0.75); + --modal-overlay-background-color: rgba(36, 51, 62, 0.8); + --progress-background-color: #24333e; + --progress-color: var(--primary); + --loading-spinner-opacity: 0.5; + --tooltip-background-color: var(--contrast); + --tooltip-color: var(--contrast-inverse); + --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-chevron-button: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-chevron-button-inverse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(0, 0, 0)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(115, 130, 140)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); + --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); + --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(183, 28, 28)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); + --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); + --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); + --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(162, 175, 185)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); + --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(46, 125, 50)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); + color-scheme: dark; +} + +progress, +[type="checkbox"], +[type="radio"], +[type="range"] { + accent-color: var(--primary); +} + +/** + * Document + * Content-box & Responsive typography + */ +*, +*::before, +*::after { + box-sizing: border-box; + background-repeat: no-repeat; +} + +::before, +::after { + text-decoration: inherit; + vertical-align: inherit; +} + +:where(:root) { + -webkit-tap-highlight-color: transparent; + -webkit-text-size-adjust: 100%; + -moz-text-size-adjust: 100%; + text-size-adjust: 100%; + background-color: var(--background-color); + color: var(--color); + font-weight: var(--font-weight); + font-size: var(--font-size); + line-height: var(--line-height); + font-family: var(--font-family); + text-rendering: optimizeLegibility; + overflow-wrap: break-word; + cursor: default; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; +} + +/** + * Sectioning + * Container and responsive spacings for header, main, footer + */ +main { + display: block; +} + +body { + width: 100%; + margin: 0; +} +body > header, +body > main, +body > footer { + width: 100%; + margin-right: auto; + margin-left: auto; + padding: var(--block-spacing-vertical) 0; +} + +/** +* Container +*/ +.container, +.container-fluid { + width: 100%; + margin-right: auto; + margin-left: auto; + padding-right: var(--spacing); + padding-left: var(--spacing); +} + +@media (min-width: 576px) { + .container { + max-width: 510px; + padding-right: 0; + padding-left: 0; + } +} +@media (min-width: 768px) { + .container { + max-width: 700px; + } +} +@media (min-width: 992px) { + .container { + max-width: 920px; + } +} +@media (min-width: 1200px) { + .container { + max-width: 1130px; + } +} + +/** + * Section + * Responsive spacings for section + */ +section { + margin-bottom: var(--block-spacing-vertical); +} + +/** +* Grid +* Minimal grid system with auto-layout columns +*/ +.grid { + grid-column-gap: var(--grid-spacing-horizontal); + grid-row-gap: var(--grid-spacing-vertical); + display: grid; + grid-template-columns: 1fr; + margin: 0; +} +@media (min-width: 992px) { + .grid { + grid-template-columns: repeat(auto-fit, minmax(0%, 1fr)); + } +} +.grid > * { + min-width: 0; +} + +/** + * Horizontal scroller (
) + */ +figure { + display: block; + margin: 0; + padding: 0; + overflow-x: auto; +} +figure figcaption { + padding: calc(var(--spacing) * 0.5) 0; + color: var(--muted-color); +} + +/** + * Typography + */ +b, +strong { + font-weight: bolder; +} + +sub, +sup { + position: relative; + font-size: 0.75em; + line-height: 0; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +address, +blockquote, +dl, +figure, +form, +ol, +p, +pre, +table, +ul { + margin-top: 0; + margin-bottom: var(--typography-spacing-vertical); + color: var(--color); + font-style: normal; + font-weight: var(--font-weight); + font-size: var(--font-size); +} + +a, +[role="link"] { + --color: var(--primary); + --background-color: transparent; + outline: none; + background-color: var(--background-color); + color: var(--color); + -webkit-text-decoration: var(--text-decoration); + text-decoration: var(--text-decoration); + transition: + background-color var(--transition), + color var(--transition), + box-shadow var(--transition), + -webkit-text-decoration var(--transition); + transition: + background-color var(--transition), + color var(--transition), + text-decoration var(--transition), + box-shadow var(--transition); + transition: + background-color var(--transition), + color var(--transition), + text-decoration var(--transition), + box-shadow var(--transition), + -webkit-text-decoration var(--transition); +} +a:is([aria-current], :hover, :active, :focus), +[role="link"]:is([aria-current], :hover, :active, :focus) { + --color: var(--primary-hover); + --text-decoration: underline; +} +a:focus, +[role="link"]:focus { + --background-color: var(--primary-focus); +} +a.secondary, +[role="link"].secondary { + --color: var(--secondary); +} +a.secondary:is([aria-current], :hover, :active, :focus), +[role="link"].secondary:is([aria-current], :hover, :active, :focus) { + --color: var(--secondary-hover); +} +a.secondary:focus, +[role="link"].secondary:focus { + --background-color: var(--secondary-focus); +} +a.contrast, +[role="link"].contrast { + --color: var(--contrast); +} +a.contrast:is([aria-current], :hover, :active, :focus), +[role="link"].contrast:is([aria-current], :hover, :active, :focus) { + --color: var(--contrast-hover); +} +a.contrast:focus, +[role="link"].contrast:focus { + --background-color: var(--contrast-focus); +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin-top: 0; + margin-bottom: var(--typography-spacing-vertical); + color: var(--color); + font-weight: var(--font-weight); + font-size: var(--font-size); + font-family: var(--font-family); +} + +h1 { + --color: var(--h1-color); +} + +h2 { + --color: var(--h2-color); +} + +h3 { + --color: var(--h3-color); +} + +h4 { + --color: var(--h4-color); +} + +h5 { + --color: var(--h5-color); +} + +h6 { + --color: var(--h6-color); +} + +:where(address, blockquote, dl, figure, form, ol, p, pre, table, ul) + ~ :is(h1, h2, h3, h4, h5, h6) { + margin-top: var(--typography-spacing-vertical); +} + +hgroup, +.headings { + margin-bottom: var(--typography-spacing-vertical); +} +hgroup > *, +.headings > * { + margin-bottom: 0; +} +hgroup > *:last-child, +.headings > *:last-child { + --color: var(--muted-color); + --font-weight: unset; + font-size: 1rem; + font-family: unset; +} + +p { + margin-bottom: var(--typography-spacing-vertical); +} + +small { + font-size: var(--font-size); +} + +:where(dl, ol, ul) { + padding-right: 0; + padding-left: var(--spacing); + -webkit-padding-start: var(--spacing); + padding-inline-start: var(--spacing); + -webkit-padding-end: 0; + padding-inline-end: 0; +} +:where(dl, ol, ul) li { + margin-bottom: calc(var(--typography-spacing-vertical) * 0.25); +} + +:where(dl, ol, ul) :is(dl, ol, ul) { + margin: 0; + margin-top: calc(var(--typography-spacing-vertical) * 0.25); +} + +ul li { + list-style: square; +} + +mark { + padding: 0.125rem 0.25rem; + background-color: var(--mark-background-color); + color: var(--mark-color); + vertical-align: baseline; +} + +blockquote { + display: block; + margin: var(--typography-spacing-vertical) 0; + padding: var(--spacing); + border-right: none; + border-left: 0.25rem solid var(--blockquote-border-color); + -webkit-border-start: 0.25rem solid var(--blockquote-border-color); + border-inline-start: 0.25rem solid var(--blockquote-border-color); + -webkit-border-end: none; + border-inline-end: none; +} +blockquote footer { + margin-top: calc(var(--typography-spacing-vertical) * 0.5); + color: var(--blockquote-footer-color); +} + +abbr[title] { + border-bottom: 1px dotted; + text-decoration: none; + cursor: help; +} + +ins { + color: var(--ins-color); + text-decoration: none; +} + +del { + color: var(--del-color); +} + +::-moz-selection { + background-color: var(--primary-focus); +} + +::selection { + background-color: var(--primary-focus); +} + +/** + * Embedded content + */ +:where(audio, canvas, iframe, img, svg, video) { + vertical-align: middle; +} + +audio, +video { + display: inline-block; +} + +audio:not([controls]) { + display: none; + height: 0; +} + +:where(iframe) { + border-style: none; +} + +img { + max-width: 100%; + height: auto; + border-style: none; +} + +:where(svg:not([fill])) { + fill: currentColor; +} + +svg:not(:root) { + overflow: hidden; +} + +/** + * Button + */ +button { + margin: 0; + overflow: visible; + font-family: inherit; + text-transform: none; +} + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +button { + display: block; + width: 100%; + margin-bottom: var(--spacing); +} + +[role="button"] { + display: inline-block; + text-decoration: none; +} + +button, +input[type="submit"], +input[type="button"], +input[type="reset"], +[role="button"] { + --background-color: var(--primary); + --border-color: var(--primary); + --color: var(--primary-inverse); + --box-shadow: var(--button-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); + padding: var(--form-element-spacing-vertical) + var(--form-element-spacing-horizontal); + border: var(--border-width) solid var(--border-color); + border-radius: var(--border-radius); + outline: none; + background-color: var(--background-color); + box-shadow: var(--box-shadow); + color: var(--color); + font-weight: var(--font-weight); + font-size: 1rem; + line-height: var(--line-height); + text-align: center; + cursor: pointer; + transition: + background-color var(--transition), + border-color var(--transition), + color var(--transition), + box-shadow var(--transition); +} +button:is([aria-current], :hover, :active, :focus), +input[type="submit"]:is([aria-current], :hover, :active, :focus), +input[type="button"]:is([aria-current], :hover, :active, :focus), +input[type="reset"]:is([aria-current], :hover, :active, :focus), +[role="button"]:is([aria-current], :hover, :active, :focus) { + --background-color: var(--primary-hover); + --border-color: var(--primary-hover); + --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)); + --color: var(--primary-inverse); +} +button:focus, +input[type="submit"]:focus, +input[type="button"]:focus, +input[type="reset"]:focus, +[role="button"]:focus { + --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), + 0 0 0 var(--outline-width) var(--primary-focus); +} + +:is( + button, + input[type="submit"], + input[type="button"], + [role="button"] + ).secondary, +input[type="reset"] { + --background-color: var(--secondary); + --border-color: var(--secondary); + --color: var(--secondary-inverse); + cursor: pointer; +} +:is( + button, + input[type="submit"], + input[type="button"], + [role="button"] + ).secondary:is([aria-current], :hover, :active, :focus), +input[type="reset"]:is([aria-current], :hover, :active, :focus) { + --background-color: var(--secondary-hover); + --border-color: var(--secondary-hover); + --color: var(--secondary-inverse); +} +:is( + button, + input[type="submit"], + input[type="button"], + [role="button"] + ).secondary:focus, +input[type="reset"]:focus { + --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), + 0 0 0 var(--outline-width) var(--secondary-focus); +} + +:is( + button, + input[type="submit"], + input[type="button"], + [role="button"] + ).contrast { + --background-color: var(--contrast); + --border-color: var(--contrast); + --color: var(--contrast-inverse); +} +:is( + button, + input[type="submit"], + input[type="button"], + [role="button"] + ).contrast:is([aria-current], :hover, :active, :focus) { + --background-color: var(--contrast-hover); + --border-color: var(--contrast-hover); + --color: var(--contrast-inverse); +} +:is( + button, + input[type="submit"], + input[type="button"], + [role="button"] + ).contrast:focus { + --box-shadow: var(--button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), + 0 0 0 var(--outline-width) var(--contrast-focus); +} + +:is( + button, + input[type="submit"], + input[type="button"], + [role="button"] + ).outline, +input[type="reset"].outline { + --background-color: transparent; + --color: var(--primary); +} +:is( + button, + input[type="submit"], + input[type="button"], + [role="button"] + ).outline:is([aria-current], :hover, :active, :focus), +input[type="reset"].outline:is([aria-current], :hover, :active, :focus) { + --background-color: transparent; + --color: var(--primary-hover); +} + +:is( + button, + input[type="submit"], + input[type="button"], + [role="button"] + ).outline.secondary, +input[type="reset"].outline { + --color: var(--secondary); +} +:is( + button, + input[type="submit"], + input[type="button"], + [role="button"] + ).outline.secondary:is([aria-current], :hover, :active, :focus), +input[type="reset"].outline:is([aria-current], :hover, :active, :focus) { + --color: var(--secondary-hover); +} + +:is( + button, + input[type="submit"], + input[type="button"], + [role="button"] + ).outline.contrast { + --color: var(--contrast); +} +:is( + button, + input[type="submit"], + input[type="button"], + [role="button"] + ).outline.contrast:is([aria-current], :hover, :active, :focus) { + --color: var(--contrast-hover); +} + +:where( + button, + [type="submit"], + [type="button"], + [type="reset"], + [role="button"] + )[disabled], +:where(fieldset[disabled]) + :is( + button, + [type="submit"], + [type="button"], + [type="reset"], + [role="button"] + ), +a[role="button"]:not([href]) { + opacity: 0.5; + pointer-events: none; +} + +/** + * Form elements + */ +input, +optgroup, +select, +textarea { + margin: 0; + font-size: 1rem; + line-height: var(--line-height); + font-family: inherit; + letter-spacing: inherit; +} + +input { + overflow: visible; +} + +select { + text-transform: none; +} + +legend { + max-width: 100%; + padding: 0; + color: inherit; + white-space: normal; +} + +textarea { + overflow: auto; +} + +[type="checkbox"], +[type="radio"] { + padding: 0; +} + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +[type="search"] { + -webkit-appearance: textfield; + outline-offset: -2px; +} + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; +} + +::-moz-focus-inner { + padding: 0; + border-style: none; +} + +:-moz-focusring { + outline: none; +} + +:-moz-ui-invalid { + box-shadow: none; +} + +::-ms-expand { + display: none; +} + +[type="file"], +[type="range"] { + padding: 0; + border-width: 0; +} + +input:not([type="checkbox"], [type="radio"], [type="range"]) { + height: calc( + 1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + + var(--border-width) * 2 + ); +} + +fieldset { + margin: 0; + margin-bottom: var(--spacing); + padding: 0; + border: 0; +} + +label, +fieldset legend { + display: block; + margin-bottom: calc(var(--spacing) * 0.25); + font-weight: var(--form-label-font-weight, var(--font-weight)); +} + +input:not([type="checkbox"], [type="radio"]), +select, +textarea { + width: 100%; +} + +input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), +select, +textarea { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + padding: var(--form-element-spacing-vertical) + var(--form-element-spacing-horizontal); +} + +input, +select, +textarea { + --background-color: var(--form-element-background-color); + --border-color: var(--form-element-border-color); + --color: var(--form-element-color); + --box-shadow: none; + border: var(--border-width) solid var(--border-color); + border-radius: var(--border-radius); + outline: none; + background-color: var(--background-color); + box-shadow: var(--box-shadow); + color: var(--color); + font-weight: var(--font-weight); + transition: + background-color var(--transition), + border-color var(--transition), + color var(--transition), + box-shadow var(--transition); +} + +input:not( + [type="submit"], + [type="button"], + [type="reset"], + [type="checkbox"], + [type="radio"], + [readonly] + ):is(:active, :focus), +:where(select, textarea):is(:active, :focus) { + --background-color: var(--form-element-active-background-color); +} + +input:not( + [type="submit"], + [type="button"], + [type="reset"], + [role="switch"], + [readonly] + ):is(:active, :focus), +:where(select, textarea):is(:active, :focus) { + --border-color: var(--form-element-active-border-color); +} + +input:not( + [type="submit"], + [type="button"], + [type="reset"], + [type="range"], + [type="file"], + [readonly] + ):focus, +select:focus, +textarea:focus { + --box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color); +} + +input:not([type="submit"], [type="button"], [type="reset"])[disabled], +select[disabled], +textarea[disabled], +:where(fieldset[disabled]) + :is( + input:not([type="submit"], [type="button"], [type="reset"]), + select, + textarea + ) { + --background-color: var(--form-element-disabled-background-color); + --border-color: var(--form-element-disabled-border-color); + opacity: var(--form-element-disabled-opacity); + pointer-events: none; +} + +:where(input, select, textarea):not( + [type="checkbox"], + [type="radio"], + [type="date"], + [type="datetime-local"], + [type="month"], + [type="time"], + [type="week"] + )[aria-invalid] { + padding-right: calc( + var(--form-element-spacing-horizontal) + 1.5rem + ) !important; + padding-left: var(--form-element-spacing-horizontal); + -webkit-padding-start: var(--form-element-spacing-horizontal) !important; + padding-inline-start: var(--form-element-spacing-horizontal) !important; + -webkit-padding-end: calc( + var(--form-element-spacing-horizontal) + 1.5rem + ) !important; + padding-inline-end: calc( + var(--form-element-spacing-horizontal) + 1.5rem + ) !important; + background-position: center right 0.75rem; + background-size: 1rem auto; + background-repeat: no-repeat; +} +:where(input, select, textarea):not( + [type="checkbox"], + [type="radio"], + [type="date"], + [type="datetime-local"], + [type="month"], + [type="time"], + [type="week"] + )[aria-invalid="false"] { + background-image: var(--icon-valid); +} +:where(input, select, textarea):not( + [type="checkbox"], + [type="radio"], + [type="date"], + [type="datetime-local"], + [type="month"], + [type="time"], + [type="week"] + )[aria-invalid="true"] { + background-image: var(--icon-invalid); +} +:where(input, select, textarea)[aria-invalid="false"] { + --border-color: var(--form-element-valid-border-color); +} +:where(input, select, textarea)[aria-invalid="false"]:is(:active, :focus) { + --border-color: var(--form-element-valid-active-border-color) !important; + --box-shadow: 0 0 0 var(--outline-width) var(--form-element-valid-focus-color) !important; +} +:where(input, select, textarea)[aria-invalid="true"] { + --border-color: var(--form-element-invalid-border-color); +} +:where(input, select, textarea)[aria-invalid="true"]:is(:active, :focus) { + --border-color: var(--form-element-invalid-active-border-color) !important; + --box-shadow: 0 0 0 var(--outline-width) + var(--form-element-invalid-focus-color) !important; +} + +[dir="rtl"] + :where(input, select, textarea):not([type="checkbox"], [type="radio"]):is( + [aria-invalid], + [aria-invalid="true"], + [aria-invalid="false"] + ) { + background-position: center left 0.75rem; +} + +input::placeholder, +input::-webkit-input-placeholder, +textarea::placeholder, +textarea::-webkit-input-placeholder, +select:invalid { + color: var(--form-element-placeholder-color); + opacity: 1; +} + +input:not([type="checkbox"], [type="radio"]), +select, +textarea { + margin-bottom: var(--spacing); +} + +select::-ms-expand { + border: 0; + background-color: transparent; +} +select:not([multiple], [size]) { + padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem); + padding-left: var(--form-element-spacing-horizontal); + -webkit-padding-start: var(--form-element-spacing-horizontal); + padding-inline-start: var(--form-element-spacing-horizontal); + -webkit-padding-end: calc(var(--form-element-spacing-horizontal) + 1.5rem); + padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem); + background-image: var(--icon-chevron); + background-position: center right 0.75rem; + background-size: 1rem auto; + background-repeat: no-repeat; +} + +[dir="rtl"] select:not([multiple], [size]) { + background-position: center left 0.75rem; +} + +:where(input, select, textarea, .grid) + small { + display: block; + width: 100%; + margin-top: calc(var(--spacing) * -0.75); + margin-bottom: var(--spacing); + color: var(--muted-color); +} + +label > :where(input, select, textarea) { + margin-top: calc(var(--spacing) * 0.25); +} + +/** + * Form elements + * Checkboxes & Radios + */ +[type="checkbox"], +[type="radio"] { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + width: 1.25em; + height: 1.25em; + margin-top: -0.125em; + margin-right: 0.375em; + margin-left: 0; + -webkit-margin-start: 0; + margin-inline-start: 0; + -webkit-margin-end: 0.375em; + margin-inline-end: 0.375em; + border-width: var(--border-width); + font-size: inherit; + vertical-align: middle; + cursor: pointer; +} +[type="checkbox"]::-ms-check, +[type="radio"]::-ms-check { + display: none; +} +[type="checkbox"]:checked, +[type="checkbox"]:checked:active, +[type="checkbox"]:checked:focus, +[type="radio"]:checked, +[type="radio"]:checked:active, +[type="radio"]:checked:focus { + --background-color: var(--primary); + --border-color: var(--primary); + background-image: var(--icon-checkbox); + background-position: center; + background-size: 0.75em auto; + background-repeat: no-repeat; +} +[type="checkbox"] ~ label, +[type="radio"] ~ label { + display: inline-block; + margin-right: 0.375em; + margin-bottom: 0; + cursor: pointer; +} + +[type="checkbox"]:indeterminate { + --background-color: var(--primary); + --border-color: var(--primary); + background-image: var(--icon-minus); + background-position: center; + background-size: 0.75em auto; + background-repeat: no-repeat; +} + +[type="radio"] { + border-radius: 50%; +} +[type="radio"]:checked, +[type="radio"]:checked:active, +[type="radio"]:checked:focus { + --background-color: var(--primary-inverse); + border-width: 0.35em; + background-image: none; +} + +[type="checkbox"][role="switch"] { + --background-color: var(--switch-background-color); + --border-color: var(--switch-background-color); + --color: var(--switch-color); + width: 2.25em; + height: 1.25em; + border: var(--border-width) solid var(--border-color); + border-radius: 1.25em; + background-color: var(--background-color); + line-height: 1.25em; +} +[type="checkbox"][role="switch"]:focus { + --background-color: var(--switch-background-color); + --border-color: var(--switch-background-color); +} +[type="checkbox"][role="switch"]:checked { + --background-color: var(--switch-checked-background-color); + --border-color: var(--switch-checked-background-color); +} +[type="checkbox"][role="switch"]:before { + display: block; + width: calc(1.25em - (var(--border-width) * 2)); + height: 100%; + border-radius: 50%; + background-color: var(--color); + content: ""; + transition: margin 0.1s ease-in-out; +} +[type="checkbox"][role="switch"]:checked { + background-image: none; +} +[type="checkbox"][role="switch"]:checked::before { + margin-left: calc(1.125em - var(--border-width)); + -webkit-margin-start: calc(1.125em - var(--border-width)); + margin-inline-start: calc(1.125em - var(--border-width)); +} + +[type="checkbox"][aria-invalid="false"], +[type="checkbox"]:checked[aria-invalid="false"], +[type="radio"][aria-invalid="false"], +[type="radio"]:checked[aria-invalid="false"], +[type="checkbox"][role="switch"][aria-invalid="false"], +[type="checkbox"][role="switch"]:checked[aria-invalid="false"] { + --border-color: var(--form-element-valid-border-color); +} +[type="checkbox"][aria-invalid="true"], +[type="checkbox"]:checked[aria-invalid="true"], +[type="radio"][aria-invalid="true"], +[type="radio"]:checked[aria-invalid="true"], +[type="checkbox"][role="switch"][aria-invalid="true"], +[type="checkbox"][role="switch"]:checked[aria-invalid="true"] { + --border-color: var(--form-element-invalid-border-color); +} + +/** + * Form elements + * Alternatives input types (Not Checkboxes & Radios) + */ +[type="color"]::-webkit-color-swatch-wrapper { + padding: 0; +} +[type="color"]::-moz-focus-inner { + padding: 0; +} +[type="color"]::-webkit-color-swatch { + border: 0; + border-radius: calc(var(--border-radius) * 0.5); +} +[type="color"]::-moz-color-swatch { + border: 0; + border-radius: calc(var(--border-radius) * 0.5); +} + +input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]):is( + [type="date"], + [type="datetime-local"], + [type="month"], + [type="time"], + [type="week"] + ) { + --icon-position: 0.75rem; + --icon-width: 1rem; + padding-right: calc(var(--icon-width) + var(--icon-position)); + background-image: var(--icon-date); + background-position: center right var(--icon-position); + background-size: var(--icon-width) auto; + background-repeat: no-repeat; +} +input:not( + [type="checkbox"], + [type="radio"], + [type="range"], + [type="file"] + )[type="time"] { + background-image: var(--icon-time); +} + +[type="date"]::-webkit-calendar-picker-indicator, +[type="datetime-local"]::-webkit-calendar-picker-indicator, +[type="month"]::-webkit-calendar-picker-indicator, +[type="time"]::-webkit-calendar-picker-indicator, +[type="week"]::-webkit-calendar-picker-indicator { + width: var(--icon-width); + margin-right: calc(var(--icon-width) * -1); + margin-left: var(--icon-position); + opacity: 0; +} + +[dir="rtl"] + :is( + [type="date"], + [type="datetime-local"], + [type="month"], + [type="time"], + [type="week"] + ) { + text-align: right; +} + +@-moz-document url-prefix() { + [type="date"], + [type="datetime-local"], + [type="month"], + [type="time"], + [type="week"] { + padding-right: var(--form-element-spacing-horizontal) !important; + background-image: none !important; + } +} +[type="file"] { + --color: var(--muted-color); + padding: calc(var(--form-element-spacing-vertical) * 0.5) 0; + border: 0; + border-radius: 0; + background: none; +} +[type="file"]::file-selector-button { + --background-color: var(--secondary); + --border-color: var(--secondary); + --color: var(--secondary-inverse); + margin-right: calc(var(--spacing) / 2); + margin-left: 0; + -webkit-margin-start: 0; + margin-inline-start: 0; + -webkit-margin-end: calc(var(--spacing) / 2); + margin-inline-end: calc(var(--spacing) / 2); + padding: calc(var(--form-element-spacing-vertical) * 0.5) + calc(var(--form-element-spacing-horizontal) * 0.5); + border: var(--border-width) solid var(--border-color); + border-radius: var(--border-radius); + outline: none; + background-color: var(--background-color); + box-shadow: var(--box-shadow); + color: var(--color); + font-weight: var(--font-weight); + font-size: 1rem; + line-height: var(--line-height); + text-align: center; + cursor: pointer; + transition: + background-color var(--transition), + border-color var(--transition), + color var(--transition), + box-shadow var(--transition); +} +[type="file"]::file-selector-button:is(:hover, :active, :focus) { + --background-color: var(--secondary-hover); + --border-color: var(--secondary-hover); +} +[type="file"]::-webkit-file-upload-button { + --background-color: var(--secondary); + --border-color: var(--secondary); + --color: var(--secondary-inverse); + margin-right: calc(var(--spacing) / 2); + margin-left: 0; + -webkit-margin-start: 0; + margin-inline-start: 0; + -webkit-margin-end: calc(var(--spacing) / 2); + margin-inline-end: calc(var(--spacing) / 2); + padding: calc(var(--form-element-spacing-vertical) * 0.5) + calc(var(--form-element-spacing-horizontal) * 0.5); + border: var(--border-width) solid var(--border-color); + border-radius: var(--border-radius); + outline: none; + background-color: var(--background-color); + box-shadow: var(--box-shadow); + color: var(--color); + font-weight: var(--font-weight); + font-size: 1rem; + line-height: var(--line-height); + text-align: center; + cursor: pointer; + -webkit-transition: + background-color var(--transition), + border-color var(--transition), + color var(--transition), + box-shadow var(--transition); + transition: + background-color var(--transition), + border-color var(--transition), + color var(--transition), + box-shadow var(--transition); +} +[type="file"]::-webkit-file-upload-button:is(:hover, :active, :focus) { + --background-color: var(--secondary-hover); + --border-color: var(--secondary-hover); +} +[type="file"]::-ms-browse { + --background-color: var(--secondary); + --border-color: var(--secondary); + --color: var(--secondary-inverse); + margin-right: calc(var(--spacing) / 2); + margin-left: 0; + margin-inline-start: 0; + margin-inline-end: calc(var(--spacing) / 2); + padding: calc(var(--form-element-spacing-vertical) * 0.5) + calc(var(--form-element-spacing-horizontal) * 0.5); + border: var(--border-width) solid var(--border-color); + border-radius: var(--border-radius); + outline: none; + background-color: var(--background-color); + box-shadow: var(--box-shadow); + color: var(--color); + font-weight: var(--font-weight); + font-size: 1rem; + line-height: var(--line-height); + text-align: center; + cursor: pointer; + -ms-transition: + background-color var(--transition), + border-color var(--transition), + color var(--transition), + box-shadow var(--transition); + transition: + background-color var(--transition), + border-color var(--transition), + color var(--transition), + box-shadow var(--transition); +} +[type="file"]::-ms-browse:is(:hover, :active, :focus) { + --background-color: var(--secondary-hover); + --border-color: var(--secondary-hover); +} + +[type="range"] { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + width: 100%; + height: 1.25rem; + background: none; +} +[type="range"]::-webkit-slider-runnable-track { + width: 100%; + height: 0.25rem; + border-radius: var(--border-radius); + background-color: var(--range-border-color); + -webkit-transition: + background-color var(--transition), + box-shadow var(--transition); + transition: + background-color var(--transition), + box-shadow var(--transition); +} +[type="range"]::-moz-range-track { + width: 100%; + height: 0.25rem; + border-radius: var(--border-radius); + background-color: var(--range-border-color); + -moz-transition: + background-color var(--transition), + box-shadow var(--transition); + transition: + background-color var(--transition), + box-shadow var(--transition); +} +[type="range"]::-ms-track { + width: 100%; + height: 0.25rem; + border-radius: var(--border-radius); + background-color: var(--range-border-color); + -ms-transition: + background-color var(--transition), + box-shadow var(--transition); + transition: + background-color var(--transition), + box-shadow var(--transition); +} +[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; + width: 1.25rem; + height: 1.25rem; + margin-top: -0.5rem; + border: 2px solid var(--range-thumb-border-color); + border-radius: 50%; + background-color: var(--range-thumb-color); + cursor: pointer; + -webkit-transition: + background-color var(--transition), + transform var(--transition); + transition: + background-color var(--transition), + transform var(--transition); +} +[type="range"]::-moz-range-thumb { + -webkit-appearance: none; + width: 1.25rem; + height: 1.25rem; + margin-top: -0.5rem; + border: 2px solid var(--range-thumb-border-color); + border-radius: 50%; + background-color: var(--range-thumb-color); + cursor: pointer; + -moz-transition: + background-color var(--transition), + transform var(--transition); + transition: + background-color var(--transition), + transform var(--transition); +} +[type="range"]::-ms-thumb { + -webkit-appearance: none; + width: 1.25rem; + height: 1.25rem; + margin-top: -0.5rem; + border: 2px solid var(--range-thumb-border-color); + border-radius: 50%; + background-color: var(--range-thumb-color); + cursor: pointer; + -ms-transition: + background-color var(--transition), + transform var(--transition); + transition: + background-color var(--transition), + transform var(--transition); +} +[type="range"]:hover, +[type="range"]:focus { + --range-border-color: var(--range-active-border-color); + --range-thumb-color: var(--range-thumb-hover-color); +} +[type="range"]:active { + --range-thumb-color: var(--range-thumb-active-color); +} +[type="range"]:active::-webkit-slider-thumb { + transform: scale(1.25); +} +[type="range"]:active::-moz-range-thumb { + transform: scale(1.25); +} +[type="range"]:active::-ms-thumb { + transform: scale(1.25); +} + +input:not( + [type="checkbox"], + [type="radio"], + [type="range"], + [type="file"] + )[type="search"] { + -webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem); + padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem); + border-radius: 5rem; + background-image: var(--icon-search); + background-position: center left 1.125rem; + background-size: 1rem auto; + background-repeat: no-repeat; +} +input:not( + [type="checkbox"], + [type="radio"], + [type="range"], + [type="file"] + )[type="search"][aria-invalid] { + -webkit-padding-start: calc( + var(--form-element-spacing-horizontal) + 1.75rem + ) !important; + padding-inline-start: calc( + var(--form-element-spacing-horizontal) + 1.75rem + ) !important; + background-position: + center left 1.125rem, + center right 0.75rem; +} +input:not( + [type="checkbox"], + [type="radio"], + [type="range"], + [type="file"] + )[type="search"][aria-invalid="false"] { + background-image: var(--icon-search), var(--icon-valid); +} +input:not( + [type="checkbox"], + [type="radio"], + [type="range"], + [type="file"] + )[type="search"][aria-invalid="true"] { + background-image: var(--icon-search), var(--icon-invalid); +} + +[type="search"]::-webkit-search-cancel-button { + -webkit-appearance: none; + display: none; +} + +[dir="rtl"] + :where(input):not( + [type="checkbox"], + [type="radio"], + [type="range"], + [type="file"] + )[type="search"] { + background-position: center right 1.125rem; +} +[dir="rtl"] + :where(input):not( + [type="checkbox"], + [type="radio"], + [type="range"], + [type="file"] + )[type="search"][aria-invalid] { + background-position: + center right 1.125rem, + center left 0.75rem; +} + +/** + * Table + */ +:where(table) { + width: 100%; + border-collapse: collapse; + border-spacing: 0; + text-indent: 0; +} + +th, +td { + padding: calc(var(--spacing) / 2) var(--spacing); + border-bottom: var(--border-width) solid var(--table-border-color); + color: var(--color); + font-weight: var(--font-weight); + font-size: var(--font-size); + text-align: left; + text-align: start; +} + +tfoot th, +tfoot td { + border-top: var(--border-width) solid var(--table-border-color); + border-bottom: 0; +} + +table[role="grid"] tbody tr:nth-child(odd) { + background-color: var(--table-row-stripped-background-color); +} + +/** + * Code + */ +pre, +code, +kbd, +samp { + font-size: 0.875em; + font-family: var(--font-family); +} + +pre { + -ms-overflow-style: scrollbar; + overflow: auto; +} + +pre, +code, +kbd { + border-radius: var(--border-radius); + background: var(--code-background-color); + color: var(--code-color); + font-weight: var(--font-weight); + line-height: initial; +} + +code, +kbd { + display: inline-block; + padding: 0.375rem 0.5rem; +} + +pre { + display: block; + margin-bottom: var(--spacing); + overflow-x: auto; +} +pre > code { + display: block; + padding: var(--spacing); + background: none; + font-size: 14px; + line-height: var(--line-height); +} + +code b { + color: var(--code-tag-color); + font-weight: var(--font-weight); +} +code i { + color: var(--code-property-color); + font-style: normal; +} +code u { + color: var(--code-value-color); + text-decoration: none; +} +code em { + color: var(--code-comment-color); + font-style: normal; +} + +kbd { + background-color: var(--code-kbd-background-color); + color: var(--code-kbd-color); + vertical-align: baseline; +} + +/** + * Miscs + */ +hr { + height: 0; + border: 0; + border-top: 1px solid var(--muted-border-color); + color: inherit; +} + +[hidden], +template { + display: none !important; +} + +canvas { + display: inline-block; +} + +/** + * Accordion (
) + */ +details { + display: block; + margin-bottom: var(--spacing); + padding-bottom: var(--spacing); + border-bottom: var(--border-width) solid var(--accordion-border-color); +} +details summary { + line-height: 1rem; + list-style-type: none; + cursor: pointer; + transition: color var(--transition); +} +details summary:not([role]) { + color: var(--accordion-close-summary-color); +} +details summary::-webkit-details-marker { + display: none; +} +details summary::marker { + display: none; +} +details summary::-moz-list-bullet { + list-style-type: none; +} +details summary::after { + display: block; + width: 1rem; + height: 1rem; + -webkit-margin-start: calc(var(--spacing, 1rem) * 0.5); + margin-inline-start: calc(var(--spacing, 1rem) * 0.5); + float: right; + transform: rotate(-90deg); + background-image: var(--icon-chevron); + background-position: right center; + background-size: 1rem auto; + background-repeat: no-repeat; + content: ""; + transition: transform var(--transition); +} +details summary:focus { + outline: none; +} +details summary:focus:not([role="button"]) { + color: var(--accordion-active-summary-color); +} +details summary[role="button"] { + width: 100%; + text-align: left; +} +details summary[role="button"]::after { + height: calc(1rem * var(--line-height, 1.5)); + background-image: var(--icon-chevron-button); +} +details summary[role="button"]:not(.outline).contrast::after { + background-image: var(--icon-chevron-button-inverse); +} +details[open] > summary { + margin-bottom: calc(var(--spacing)); +} +details[open] > summary:not([role]):not(:focus) { + color: var(--accordion-open-summary-color); +} +details[open] > summary::after { + transform: rotate(0); +} + +[dir="rtl"] details summary { + text-align: right; +} +[dir="rtl"] details summary::after { + float: left; + background-position: left center; +} + +/** + * Card (
) + */ +article { + margin: var(--block-spacing-vertical) 0; + padding: var(--block-spacing-vertical) var(--block-spacing-horizontal); + border-radius: var(--border-radius); + background: var(--card-background-color); + box-shadow: var(--card-box-shadow); +} +article > header, +article > footer { + margin-right: calc(var(--block-spacing-horizontal) * -1); + margin-left: calc(var(--block-spacing-horizontal) * -1); + padding: calc(var(--block-spacing-vertical) * 0.66) + var(--block-spacing-horizontal); + background-color: var(--card-sectionning-background-color); +} +article > header { + margin-top: calc(var(--block-spacing-vertical) * -1); + margin-bottom: var(--block-spacing-vertical); + border-bottom: var(--border-width) solid var(--card-border-color); + border-top-right-radius: var(--border-radius); + border-top-left-radius: var(--border-radius); +} +article > footer { + margin-top: var(--block-spacing-vertical); + margin-bottom: calc(var(--block-spacing-vertical) * -1); + border-top: var(--border-width) solid var(--card-border-color); + border-bottom-right-radius: var(--border-radius); + border-bottom-left-radius: var(--border-radius); +} + +/** + * Modal () + */ +:root { + --scrollbar-width: 0px; +} + +dialog { + display: flex; + z-index: 999; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + align-items: center; + justify-content: center; + width: inherit; + min-width: 100%; + height: inherit; + min-height: 100%; + padding: var(--spacing); + border: 0; + -webkit-backdrop-filter: var(--modal-overlay-backdrop-filter); + backdrop-filter: var(--modal-overlay-backdrop-filter); + background-color: var(--modal-overlay-background-color); + color: var(--color); +} +dialog article { + max-height: calc(100vh - var(--spacing) * 2); + overflow: auto; +} +@media (min-width: 576px) { + dialog article { + max-width: 510px; + } +} +@media (min-width: 768px) { + dialog article { + max-width: 700px; + } +} +dialog article > header, +dialog article > footer { + padding: calc(var(--block-spacing-vertical) * 0.5) + var(--block-spacing-horizontal); +} +dialog article > header .close { + margin: 0; + margin-left: var(--spacing); + float: right; +} +dialog article > footer { + text-align: right; +} +dialog article > footer [role="button"] { + margin-bottom: 0; +} +dialog article > footer [role="button"]:not(:first-of-type) { + margin-left: calc(var(--spacing) * 0.5); +} +dialog article p:last-of-type { + margin: 0; +} +dialog article .close { + display: block; + width: 1rem; + height: 1rem; + margin-top: calc(var(--block-spacing-vertical) * -0.5); + margin-bottom: var(--typography-spacing-vertical); + margin-left: auto; + background-image: var(--icon-close); + background-position: center; + background-size: auto 1rem; + background-repeat: no-repeat; + opacity: 0.5; + transition: opacity var(--transition); +} +dialog article .close:is([aria-current], :hover, :active, :focus) { + opacity: 1; +} +dialog:not([open]), +dialog[open="false"] { + display: none; +} + +.modal-is-open { + padding-right: var(--scrollbar-width, 0px); + overflow: hidden; + pointer-events: none; + touch-action: none; +} +.modal-is-open dialog { + pointer-events: auto; +} + +:where(.modal-is-opening, .modal-is-closing) dialog, +:where(.modal-is-opening, .modal-is-closing) dialog > article { + animation-duration: 0.2s; + animation-timing-function: ease-in-out; + animation-fill-mode: both; +} +:where(.modal-is-opening, .modal-is-closing) dialog { + animation-duration: 0.8s; + animation-name: modal-overlay; +} +:where(.modal-is-opening, .modal-is-closing) dialog > article { + animation-delay: 0.2s; + animation-name: modal; +} + +.modal-is-closing dialog, +.modal-is-closing dialog > article { + animation-delay: 0s; + animation-direction: reverse; +} + +@keyframes modal-overlay { + from { + -webkit-backdrop-filter: none; + backdrop-filter: none; + background-color: transparent; + } +} +@keyframes modal { + from { + transform: translateY(-100%); + opacity: 0; + } +} +/** + * Nav + */ +:where(nav li)::before { + float: left; + content: "​"; +} + +nav, +nav ul { + display: flex; +} + +nav { + justify-content: space-between; +} +nav ol, +nav ul { + align-items: center; + margin-bottom: 0; + padding: 0; + list-style: none; +} +nav ol:first-of-type, +nav ul:first-of-type { + margin-left: calc(var(--nav-element-spacing-horizontal) * -1); +} +nav ol:last-of-type, +nav ul:last-of-type { + margin-right: calc(var(--nav-element-spacing-horizontal) * -1); +} +nav li { + display: inline-block; + margin: 0; + padding: var(--nav-element-spacing-vertical) + var(--nav-element-spacing-horizontal); +} +nav li > * { + --spacing: 0; +} +nav :where(a, [role="link"]) { + display: inline-block; + margin: calc(var(--nav-link-spacing-vertical) * -1) + calc(var(--nav-link-spacing-horizontal) * -1); + padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal); + border-radius: var(--border-radius); + text-decoration: none; +} +nav :where(a, [role="link"]):is([aria-current], :hover, :active, :focus) { + text-decoration: none; +} +nav[aria-label="breadcrumb"] { + align-items: center; + justify-content: start; +} +nav[aria-label="breadcrumb"] ul li:not(:first-child) { + -webkit-margin-start: var(--nav-link-spacing-horizontal); + margin-inline-start: var(--nav-link-spacing-horizontal); +} +nav[aria-label="breadcrumb"] ul li:not(:last-child) ::after { + position: absolute; + width: calc(var(--nav-link-spacing-horizontal) * 2); + -webkit-margin-start: calc(var(--nav-link-spacing-horizontal) / 2); + margin-inline-start: calc(var(--nav-link-spacing-horizontal) / 2); + content: "/"; + color: var(--muted-color); + text-align: center; +} +nav[aria-label="breadcrumb"] a[aria-current] { + background-color: transparent; + color: inherit; + text-decoration: none; + pointer-events: none; +} +nav [role="button"] { + margin-right: inherit; + margin-left: inherit; + padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal); +} + +aside nav, +aside ol, +aside ul, +aside li { + display: block; +} +aside li { + padding: calc(var(--nav-element-spacing-vertical) * 0.5) + var(--nav-element-spacing-horizontal); +} +aside li a { + display: block; +} +aside li [role="button"] { + margin: inherit; +} + +[dir="rtl"] nav[aria-label="breadcrumb"] ul li:not(:last-child) ::after { + content: "\\"; +} + +/** + * Progress + */ +progress { + display: inline-block; + vertical-align: baseline; +} + +progress { + -webkit-appearance: none; + -moz-appearance: none; + display: inline-block; + appearance: none; + width: 100%; + height: 0.5rem; + margin-bottom: calc(var(--spacing) * 0.5); + overflow: hidden; + border: 0; + border-radius: var(--border-radius); + background-color: var(--progress-background-color); + color: var(--progress-color); +} +progress::-webkit-progress-bar { + border-radius: var(--border-radius); + background: none; +} +progress[value]::-webkit-progress-value { + background-color: var(--progress-color); +} +progress::-moz-progress-bar { + background-color: var(--progress-color); +} +@media (prefers-reduced-motion: no-preference) { + progress:indeterminate { + background: var(--progress-background-color) + linear-gradient( + to right, + var(--progress-color) 30%, + var(--progress-background-color) 30% + ) + top left/150% 150% no-repeat; + animation: progress-indeterminate 1s linear infinite; + } + progress:indeterminate[value]::-webkit-progress-value { + background-color: transparent; + } + progress:indeterminate::-moz-progress-bar { + background-color: transparent; + } +} + +@media (prefers-reduced-motion: no-preference) { + [dir="rtl"] progress:indeterminate { + animation-direction: reverse; + } +} + +@keyframes progress-indeterminate { + 0% { + background-position: 200% 0; + } + 100% { + background-position: -200% 0; + } +} +/** + * Dropdown ([role="list"]) + */ +details[role="list"], +li[role="list"] { + position: relative; +} + +details[role="list"] summary + ul, +li[role="list"] > ul { + display: flex; + z-index: 99; + position: absolute; + top: auto; + right: 0; + left: 0; + flex-direction: column; + margin: 0; + padding: 0; + border: var(--border-width) solid var(--dropdown-border-color); + border-radius: var(--border-radius); + border-top-right-radius: 0; + border-top-left-radius: 0; + background-color: var(--dropdown-background-color); + box-shadow: var(--card-box-shadow); + color: var(--dropdown-color); + white-space: nowrap; +} +details[role="list"] summary + ul li, +li[role="list"] > ul li { + width: 100%; + margin-bottom: 0; + padding: calc(var(--form-element-spacing-vertical) * 0.5) + var(--form-element-spacing-horizontal); + list-style: none; +} +details[role="list"] summary + ul li:first-of-type, +li[role="list"] > ul li:first-of-type { + margin-top: calc(var(--form-element-spacing-vertical) * 0.5); +} +details[role="list"] summary + ul li:last-of-type, +li[role="list"] > ul li:last-of-type { + margin-bottom: calc(var(--form-element-spacing-vertical) * 0.5); +} +details[role="list"] summary + ul li a, +li[role="list"] > ul li a { + display: block; + margin: calc(var(--form-element-spacing-vertical) * -0.5) + calc(var(--form-element-spacing-horizontal) * -1); + padding: calc(var(--form-element-spacing-vertical) * 0.5) + var(--form-element-spacing-horizontal); + overflow: hidden; + color: var(--dropdown-color); + text-decoration: none; + text-overflow: ellipsis; +} +details[role="list"] summary + ul li a:hover, +li[role="list"] > ul li a:hover { + background-color: var(--dropdown-hover-background-color); +} + +details[role="list"] summary::after, +li[role="list"] > a::after { + display: block; + width: 1rem; + height: calc(1rem * var(--line-height, 1.5)); + -webkit-margin-start: 0.5rem; + margin-inline-start: 0.5rem; + float: right; + transform: rotate(0deg); + background-position: right center; + background-size: 1rem auto; + background-repeat: no-repeat; + content: ""; +} + +details[role="list"] { + padding: 0; + border-bottom: none; +} +details[role="list"] summary { + margin-bottom: 0; +} +details[role="list"] summary:not([role]) { + height: calc( + 1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + + var(--border-width) * 2 + ); + padding: var(--form-element-spacing-vertical) + var(--form-element-spacing-horizontal); + border: var(--border-width) solid var(--form-element-border-color); + border-radius: var(--border-radius); + background-color: var(--form-element-background-color); + color: var(--form-element-placeholder-color); + line-height: inherit; + cursor: pointer; + transition: + background-color var(--transition), + border-color var(--transition), + color var(--transition), + box-shadow var(--transition); +} +details[role="list"] summary:not([role]):active, +details[role="list"] summary:not([role]):focus { + border-color: var(--form-element-active-border-color); + background-color: var(--form-element-active-background-color); +} +details[role="list"] summary:not([role]):focus { + box-shadow: 0 0 0 var(--outline-width) var(--form-element-focus-color); +} +details[role="list"][open] summary { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} +details[role="list"][open] summary::before { + display: block; + z-index: 1; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + background: none; + content: ""; + cursor: default; +} + +nav details[role="list"] summary, +nav li[role="list"] a { + display: flex; + direction: ltr; +} + +nav details[role="list"] summary + ul, +nav li[role="list"] > ul { + min-width: -moz-fit-content; + min-width: fit-content; + border-radius: var(--border-radius); +} +nav details[role="list"] summary + ul li a, +nav li[role="list"] > ul li a { + border-radius: 0; +} + +nav details[role="list"] summary, +nav details[role="list"] summary:not([role]) { + height: auto; + padding: var(--nav-link-spacing-vertical) var(--nav-link-spacing-horizontal); +} +nav details[role="list"][open] summary { + border-radius: var(--border-radius); +} +nav details[role="list"] summary + ul { + margin-top: var(--outline-width); + -webkit-margin-start: 0; + margin-inline-start: 0; +} +nav details[role="list"] summary[role="link"] { + margin-bottom: calc(var(--nav-link-spacing-vertical) * -1); + line-height: var(--line-height); +} +nav details[role="list"] summary[role="link"] + ul { + margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width)); + -webkit-margin-start: calc(var(--nav-link-spacing-horizontal) * -1); + margin-inline-start: calc(var(--nav-link-spacing-horizontal) * -1); +} + +li[role="list"]:hover > ul, +li[role="list"] a:active ~ ul, +li[role="list"] a:focus ~ ul { + display: flex; +} +li[role="list"] > ul { + display: none; + margin-top: calc(var(--nav-link-spacing-vertical) + var(--outline-width)); + -webkit-margin-start: calc( + var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal) + ); + margin-inline-start: calc( + var(--nav-element-spacing-horizontal) - var(--nav-link-spacing-horizontal) + ); +} +li[role="list"] > a::after { + background-image: var(--icon-chevron); +} + +label > details[role="list"] { + margin-top: calc(var(--spacing) * 0.25); + margin-bottom: var(--spacing); +} + +/** + * Loading ([aria-busy=true]) + */ +[aria-busy="true"] { + cursor: progress; +} + +[aria-busy="true"]:not(input, select, textarea, html)::before { + display: inline-block; + width: 1em; + height: 1em; + border: 0.1875em solid currentColor; + border-radius: 1em; + border-right-color: transparent; + content: ""; + vertical-align: text-bottom; + vertical-align: -0.125em; + animation: spinner 0.75s linear infinite; + opacity: var(--loading-spinner-opacity); +} +[aria-busy="true"]:not(input, select, textarea, html):not(:empty)::before { + margin-right: calc(var(--spacing) * 0.5); + margin-left: 0; + -webkit-margin-start: 0; + margin-inline-start: 0; + -webkit-margin-end: calc(var(--spacing) * 0.5); + margin-inline-end: calc(var(--spacing) * 0.5); +} +[aria-busy="true"]:not(input, select, textarea, html):empty { + text-align: center; +} + +button[aria-busy="true"], +input[type="submit"][aria-busy="true"], +input[type="button"][aria-busy="true"], +input[type="reset"][aria-busy="true"], +a[aria-busy="true"] { + pointer-events: none; +} + +@keyframes spinner { + to { + transform: rotate(360deg); + } +} +/** + * Tooltip ([data-tooltip]) + */ +[data-tooltip] { + position: relative; +} +[data-tooltip]:not(a, button, input) { + border-bottom: 1px dotted; + text-decoration: none; + cursor: help; +} +[data-tooltip][data-placement="top"]::before, +[data-tooltip][data-placement="top"]::after, +[data-tooltip]::before, +[data-tooltip]::after { + display: block; + z-index: 99; + position: absolute; + bottom: 100%; + left: 50%; + padding: 0.25rem 0.5rem; + overflow: hidden; + transform: translate(-50%, -0.25rem); + border-radius: var(--border-radius); + background: var(--tooltip-background-color); + content: attr(data-tooltip); + color: var(--tooltip-color); + font-style: normal; + font-weight: var(--font-weight); + font-size: 0.875rem; + text-decoration: none; + text-overflow: ellipsis; + white-space: nowrap; + opacity: 0; + pointer-events: none; +} +[data-tooltip][data-placement="top"]::after, +[data-tooltip]::after { + padding: 0; + transform: translate(-50%, 0rem); + border-top: 0.3rem solid; + border-right: 0.3rem solid transparent; + border-left: 0.3rem solid transparent; + border-radius: 0; + background-color: transparent; + content: ""; + color: var(--tooltip-background-color); +} +[data-tooltip][data-placement="bottom"]::before, +[data-tooltip][data-placement="bottom"]::after { + top: 100%; + bottom: auto; + transform: translate(-50%, 0.25rem); +} +[data-tooltip][data-placement="bottom"]:after { + transform: translate(-50%, -0.3rem); + border: 0.3rem solid transparent; + border-bottom: 0.3rem solid; +} +[data-tooltip][data-placement="left"]::before, +[data-tooltip][data-placement="left"]::after { + top: 50%; + right: 100%; + bottom: auto; + left: auto; + transform: translate(-0.25rem, -50%); +} +[data-tooltip][data-placement="left"]:after { + transform: translate(0.3rem, -50%); + border: 0.3rem solid transparent; + border-left: 0.3rem solid; +} +[data-tooltip][data-placement="right"]::before, +[data-tooltip][data-placement="right"]::after { + top: 50%; + right: auto; + bottom: auto; + left: 100%; + transform: translate(0.25rem, -50%); +} +[data-tooltip][data-placement="right"]:after { + transform: translate(-0.3rem, -50%); + border: 0.3rem solid transparent; + border-right: 0.3rem solid; +} +[data-tooltip]:focus::before, +[data-tooltip]:focus::after, +[data-tooltip]:hover::before, +[data-tooltip]:hover::after { + opacity: 1; +} +@media (hover: hover) and (pointer: fine) { + [data-tooltip][data-placement="bottom"]:focus::before, + [data-tooltip][data-placement="bottom"]:focus::after, + [data-tooltip][data-placement="bottom"]:hover [data-tooltip]:focus::before, + [data-tooltip][data-placement="bottom"]:hover [data-tooltip]:focus::after, + [data-tooltip]:hover::before, + [data-tooltip]:hover::after { + animation-duration: 0.2s; + animation-name: tooltip-slide-top; + } + [data-tooltip][data-placement="bottom"]:focus::after, + [data-tooltip][data-placement="bottom"]:hover [data-tooltip]:focus::after, + [data-tooltip]:hover::after { + animation-name: tooltip-caret-slide-top; + } + [data-tooltip][data-placement="bottom"]:focus::before, + [data-tooltip][data-placement="bottom"]:focus::after, + [data-tooltip][data-placement="bottom"]:hover::before, + [data-tooltip][data-placement="bottom"]:hover::after { + animation-duration: 0.2s; + animation-name: tooltip-slide-bottom; + } + [data-tooltip][data-placement="bottom"]:focus::after, + [data-tooltip][data-placement="bottom"]:hover::after { + animation-name: tooltip-caret-slide-bottom; + } + [data-tooltip][data-placement="left"]:focus::before, + [data-tooltip][data-placement="left"]:focus::after, + [data-tooltip][data-placement="left"]:hover::before, + [data-tooltip][data-placement="left"]:hover::after { + animation-duration: 0.2s; + animation-name: tooltip-slide-left; + } + [data-tooltip][data-placement="left"]:focus::after, + [data-tooltip][data-placement="left"]:hover::after { + animation-name: tooltip-caret-slide-left; + } + [data-tooltip][data-placement="right"]:focus::before, + [data-tooltip][data-placement="right"]:focus::after, + [data-tooltip][data-placement="right"]:hover::before, + [data-tooltip][data-placement="right"]:hover::after { + animation-duration: 0.2s; + animation-name: tooltip-slide-right; + } + [data-tooltip][data-placement="right"]:focus::after, + [data-tooltip][data-placement="right"]:hover::after { + animation-name: tooltip-caret-slide-right; + } +} +@keyframes tooltip-slide-top { + from { + transform: translate(-50%, 0.75rem); + opacity: 0; + } + to { + transform: translate(-50%, -0.25rem); + opacity: 1; + } +} +@keyframes tooltip-caret-slide-top { + from { + opacity: 0; + } + 50% { + transform: translate(-50%, -0.25rem); + opacity: 0; + } + to { + transform: translate(-50%, 0rem); + opacity: 1; + } +} +@keyframes tooltip-slide-bottom { + from { + transform: translate(-50%, -0.75rem); + opacity: 0; + } + to { + transform: translate(-50%, 0.25rem); + opacity: 1; + } +} +@keyframes tooltip-caret-slide-bottom { + from { + opacity: 0; + } + 50% { + transform: translate(-50%, -0.5rem); + opacity: 0; + } + to { + transform: translate(-50%, -0.3rem); + opacity: 1; + } +} +@keyframes tooltip-slide-left { + from { + transform: translate(0.75rem, -50%); + opacity: 0; + } + to { + transform: translate(-0.25rem, -50%); + opacity: 1; + } +} +@keyframes tooltip-caret-slide-left { + from { + opacity: 0; + } + 50% { + transform: translate(0.05rem, -50%); + opacity: 0; + } + to { + transform: translate(0.3rem, -50%); + opacity: 1; + } +} +@keyframes tooltip-slide-right { + from { + transform: translate(-0.75rem, -50%); + opacity: 0; + } + to { + transform: translate(0.25rem, -50%); + opacity: 1; + } +} +@keyframes tooltip-caret-slide-right { + from { + opacity: 0; + } + 50% { + transform: translate(-0.05rem, -50%); + opacity: 0; + } + to { + transform: translate(-0.3rem, -50%); + opacity: 1; + } +} + +/** + * Accessibility & User interaction + */ +[aria-controls] { + cursor: pointer; +} + +[aria-disabled="true"], +[disabled] { + cursor: not-allowed; +} + +[aria-hidden="false"][hidden] { + display: initial; +} + +[aria-hidden="false"][hidden]:not(:focus) { + clip: rect(0, 0, 0, 0); + position: absolute; +} + +a, +area, +button, +input, +label, +select, +summary, +textarea, +[tabindex] { + -ms-touch-action: manipulation; +} + +[dir="rtl"] { + direction: rtl; +} + +/** +* Reduce Motion Features +*/ +@media (prefers-reduced-motion: reduce) { + *:not([aria-busy="true"]), + :not([aria-busy="true"])::before, + :not([aria-busy="true"])::after { + background-attachment: initial !important; + animation-duration: 1ms !important; + animation-delay: -1ms !important; + animation-iteration-count: 1 !important; + scroll-behavior: auto !important; + transition-delay: 0s !important; + transition-duration: 0s !important; + } +} + +/*# sourceMappingURL=pico.css.map */ diff --git a/index.html b/index.html new file mode 100644 index 0000000..09be59e --- /dev/null +++ b/index.html @@ -0,0 +1,73 @@ + + + + + + + + + + + + + + Meme Me! + + + +
+

meme me!

+
+ +
+
+ + +
+
+ + + + + + + + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..1b33b03 --- /dev/null +++ b/main.js @@ -0,0 +1,81 @@ +import { getThemeToggle } from "./src/theme.js"; +import { getVideo, drawVideo } from "./src/camera.js"; +import { drawText } from "./src/text.js"; +import { Modal } from "./src/modal.js"; + +const memeCanvas = document.getElementById("meme"); + +// Create unattached canvas elements +// to serve as "layers" of the meme +const selfieLayer = document.createElement("canvas"); +const textLayer = document.createElement("canvas"); +for (let canvas of [selfieLayer, textLayer]) { + canvas.width = memeCanvas.width; + canvas.height = memeCanvas.height; +} + +// When either layer has changed, we'll +// call this function to redraw the +// meme with the layers' new data +function redrawMeme() { + const memeCtx = memeCanvas.getContext("2d"); + memeCtx.drawImage(selfieLayer, 0, 0); + memeCtx.drawImage(textLayer, 0, 0); +} + +function setupSettings() { + const settings = document.getElementById("settings"); + getThemeToggle(); + + const darkModal = new Modal( + "Settings", + settings, + settings.querySelector(".modal-content") + ); + darkModal.render(); +} + +function setupAddText() { + const textInputs = document.getElementById("add-text"); + const saveTextBtn = document.getElementById("text-save"); + + saveTextBtn.addEventListener("click", () => { + drawText(textLayer); + redrawMeme(); + }); + + const textModal = new Modal( + "Add some text", + textInputs, + textInputs.querySelector(".modal-content") + ); + textModal.render(); +} + +async function setupTakeSelfie() { + const selfie = document.getElementById("take-selfie"); + const savePhotoBtn = document.getElementById("save-photo"); + + const selfieModal = new Modal( + "Take a selfie", + selfie, + selfie.querySelector(".modal-content") + ); + selfieModal.render(); + + const previewCanvas = document.getElementById("preview"); + + const video = await getVideo(previewCanvas); + + savePhotoBtn.addEventListener("click", () => { + drawVideo(video, selfieLayer); + redrawMeme(); + }); +} + +// IIFE in case we don't have top-level await +(async function run() { + setupSettings(); + setupAddText(); + await setupTakeSelfie(); +})(); diff --git a/meme-me.html b/meme-me.html new file mode 100644 index 0000000..e9bc3e6 --- /dev/null +++ b/meme-me.html @@ -0,0 +1,240 @@ + + + + + + + meme me! + + + +
+

meme me!

+
+ +
+
+ + +
+
+ + + + + + + + + diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..0a33c6d --- /dev/null +++ b/package-lock.json @@ -0,0 +1,1854 @@ +{ + "name": "meme-me", + "version": "0.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "meme-me", + "version": "0.0.0", + "devDependencies": { + "eslint": "^8.54.0", + "prettier": "3.1.0", + "vite": "^5.0.0" + } + }, + "node_modules/@aashutoshrathi/word-wrap": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz", + "integrity": "sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/@esbuild/android-arm": { + "version": "0.19.8", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.8.tgz", + "integrity": "sha512-31E2lxlGM1KEfivQl8Yf5aYU/mflz9g06H6S15ITUFQueMFtFjESRMoDSkvMo8thYvLBax+VKTPlpnx+sPicOA==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/android-arm64": { + "version": "0.19.8", + "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.8.tgz", + "integrity": "sha512-B8JbS61bEunhfx8kasogFENgQfr/dIp+ggYXwTqdbMAgGDhRa3AaPpQMuQU0rNxDLECj6FhDzk1cF9WHMVwrtA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/android-x64": { + "version": "0.19.8", + "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.8.tgz", + "integrity": "sha512-rdqqYfRIn4jWOp+lzQttYMa2Xar3OK9Yt2fhOhzFXqg0rVWEfSclJvZq5fZslnz6ypHvVf3CT7qyf0A5pM682A==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/darwin-arm64": { + "version": "0.19.8", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.8.tgz", + "integrity": "sha512-RQw9DemMbIq35Bprbboyf8SmOr4UXsRVxJ97LgB55VKKeJOOdvsIPy0nFyF2l8U+h4PtBx/1kRf0BelOYCiQcw==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/darwin-x64": { + "version": "0.19.8", + "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.8.tgz", + "integrity": "sha512-3sur80OT9YdeZwIVgERAysAbwncom7b4bCI2XKLjMfPymTud7e/oY4y+ci1XVp5TfQp/bppn7xLw1n/oSQY3/Q==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/freebsd-arm64": { + "version": "0.19.8", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.8.tgz", + "integrity": "sha512-WAnPJSDattvS/XtPCTj1tPoTxERjcTpH6HsMr6ujTT+X6rylVe8ggxk8pVxzf5U1wh5sPODpawNicF5ta/9Tmw==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/freebsd-x64": { + "version": "0.19.8", + "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.8.tgz", + "integrity": "sha512-ICvZyOplIjmmhjd6mxi+zxSdpPTKFfyPPQMQTK/w+8eNK6WV01AjIztJALDtwNNfFhfZLux0tZLC+U9nSyA5Zg==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "freebsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-arm": { + "version": "0.19.8", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.8.tgz", + "integrity": "sha512-H4vmI5PYqSvosPaTJuEppU9oz1dq2A7Mr2vyg5TF9Ga+3+MGgBdGzcyBP7qK9MrwFQZlvNyJrvz6GuCaj3OukQ==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-arm64": { + "version": "0.19.8", + "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.8.tgz", + "integrity": "sha512-z1zMZivxDLHWnyGOctT9JP70h0beY54xDDDJt4VpTX+iwA77IFsE1vCXWmprajJGa+ZYSqkSbRQ4eyLCpCmiCQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-ia32": { + "version": "0.19.8", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.8.tgz", + "integrity": "sha512-1a8suQiFJmZz1khm/rDglOc8lavtzEMRo0v6WhPgxkrjcU0LkHj+TwBrALwoz/OtMExvsqbbMI0ChyelKabSvQ==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-loong64": { + "version": "0.19.8", + "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.8.tgz", + "integrity": "sha512-fHZWS2JJxnXt1uYJsDv9+b60WCc2RlvVAy1F76qOLtXRO+H4mjt3Tr6MJ5l7Q78X8KgCFudnTuiQRBhULUyBKQ==", + "cpu": [ + "loong64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-mips64el": { + "version": "0.19.8", + "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.8.tgz", + "integrity": "sha512-Wy/z0EL5qZYLX66dVnEg9riiwls5IYnziwuju2oUiuxVc+/edvqXa04qNtbrs0Ukatg5HEzqT94Zs7J207dN5Q==", + "cpu": [ + "mips64el" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-ppc64": { + "version": "0.19.8", + "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.8.tgz", + "integrity": "sha512-ETaW6245wK23YIEufhMQ3HSeHO7NgsLx8gygBVldRHKhOlD1oNeNy/P67mIh1zPn2Hr2HLieQrt6tWrVwuqrxg==", + "cpu": [ + "ppc64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-riscv64": { + "version": "0.19.8", + "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.8.tgz", + "integrity": "sha512-T2DRQk55SgoleTP+DtPlMrxi/5r9AeFgkhkZ/B0ap99zmxtxdOixOMI570VjdRCs9pE4Wdkz7JYrsPvsl7eESg==", + "cpu": [ + "riscv64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-s390x": { + "version": "0.19.8", + "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.8.tgz", + "integrity": "sha512-NPxbdmmo3Bk7mbNeHmcCd7R7fptJaczPYBaELk6NcXxy7HLNyWwCyDJ/Xx+/YcNH7Im5dHdx9gZ5xIwyliQCbg==", + "cpu": [ + "s390x" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/linux-x64": { + "version": "0.19.8", + "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.8.tgz", + "integrity": "sha512-lytMAVOM3b1gPypL2TRmZ5rnXl7+6IIk8uB3eLsV1JwcizuolblXRrc5ShPrO9ls/b+RTp+E6gbsuLWHWi2zGg==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/netbsd-x64": { + "version": "0.19.8", + "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.8.tgz", + "integrity": "sha512-hvWVo2VsXz/8NVt1UhLzxwAfo5sioj92uo0bCfLibB0xlOmimU/DeAEsQILlBQvkhrGjamP0/el5HU76HAitGw==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "netbsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/openbsd-x64": { + "version": "0.19.8", + "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.8.tgz", + "integrity": "sha512-/7Y7u77rdvmGTxR83PgaSvSBJCC2L3Kb1M/+dmSIvRvQPXXCuC97QAwMugBNG0yGcbEGfFBH7ojPzAOxfGNkwQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "openbsd" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/sunos-x64": { + "version": "0.19.8", + "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.8.tgz", + "integrity": "sha512-9Lc4s7Oi98GqFA4HzA/W2JHIYfnXbUYgekUP/Sm4BG9sfLjyv6GKKHKKVs83SMicBF2JwAX6A1PuOLMqpD001w==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "sunos" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-arm64": { + "version": "0.19.8", + "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.8.tgz", + "integrity": "sha512-rq6WzBGjSzihI9deW3fC2Gqiak68+b7qo5/3kmB6Gvbh/NYPA0sJhrnp7wgV4bNwjqM+R2AApXGxMO7ZoGhIJg==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-ia32": { + "version": "0.19.8", + "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.8.tgz", + "integrity": "sha512-AIAbverbg5jMvJznYiGhrd3sumfwWs8572mIJL5NQjJa06P8KfCPWZQ0NwZbPQnbQi9OWSZhFVSUWjjIrn4hSw==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@esbuild/win32-x64": { + "version": "0.19.8", + "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.8.tgz", + "integrity": "sha512-bfZ0cQ1uZs2PqpulNL5j/3w+GDhP36k1K5c38QdQg+Swy51jFZWWeIkteNsufkQxp986wnqRRsb/bHbY1WQ7TA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">=12" + } + }, + "node_modules/@eslint-community/eslint-utils": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", + "integrity": "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==", + "dev": true, + "dependencies": { + "eslint-visitor-keys": "^3.3.0" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "peerDependencies": { + "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0" + } + }, + "node_modules/@eslint-community/regexpp": { + "version": "4.10.0", + "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.10.0.tgz", + "integrity": "sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==", + "dev": true, + "engines": { + "node": "^12.0.0 || ^14.0.0 || >=16.0.0" + } + }, + "node_modules/@eslint/eslintrc": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.3.tgz", + "integrity": "sha512-yZzuIG+jnVu6hNSzFEN07e8BxF3uAzYtQb6uDkaYZLo6oYZDCq454c5kB8zxnzfCYyP4MIuyBn10L0DqwujTmA==", + "dev": true, + "dependencies": { + "ajv": "^6.12.4", + "debug": "^4.3.2", + "espree": "^9.6.0", + "globals": "^13.19.0", + "ignore": "^5.2.0", + "import-fresh": "^3.2.1", + "js-yaml": "^4.1.0", + "minimatch": "^3.1.2", + "strip-json-comments": "^3.1.1" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/@eslint/js": { + "version": "8.54.0", + "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.54.0.tgz", + "integrity": "sha512-ut5V+D+fOoWPgGGNj83GGjnntO39xDy6DWxO0wb7Jp3DcMX0TfIqdzHF85VTQkerdyGmuuMD9AKAo5KiNlf/AQ==", + "dev": true, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + } + }, + "node_modules/@humanwhocodes/config-array": { + "version": "0.11.13", + "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz", + "integrity": "sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==", + "dev": true, + "dependencies": { + "@humanwhocodes/object-schema": "^2.0.1", + "debug": "^4.1.1", + "minimatch": "^3.0.5" + }, + "engines": { + "node": ">=10.10.0" + } + }, + "node_modules/@humanwhocodes/module-importer": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz", + "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==", + "dev": true, + "engines": { + "node": ">=12.22" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/nzakas" + } + }, + "node_modules/@humanwhocodes/object-schema": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.1.tgz", + "integrity": "sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==", + "dev": true + }, + "node_modules/@nodelib/fs.scandir": { + "version": "2.1.5", + "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", + "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==", + "dev": true, + "dependencies": { + "@nodelib/fs.stat": "2.0.5", + "run-parallel": "^1.1.9" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/@nodelib/fs.stat": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz", + "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==", + "dev": true, + "engines": { + "node": ">= 8" + } + }, + "node_modules/@nodelib/fs.walk": { + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz", + "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==", + "dev": true, + "dependencies": { + "@nodelib/fs.scandir": "2.1.5", + "fastq": "^1.6.0" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/@rollup/rollup-android-arm-eabi": { + "version": "4.6.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.6.1.tgz", + "integrity": "sha512-0WQ0ouLejaUCRsL93GD4uft3rOmB8qoQMU05Kb8CmMtMBe7XUDLAltxVZI1q6byNqEtU7N1ZX1Vw5lIpgulLQA==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ] + }, + "node_modules/@rollup/rollup-android-arm64": { + "version": "4.6.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.6.1.tgz", + "integrity": "sha512-1TKm25Rn20vr5aTGGZqo6E4mzPicCUD79k17EgTLAsXc1zysyi4xXKACfUbwyANEPAEIxkzwue6JZ+stYzWUTA==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "android" + ] + }, + "node_modules/@rollup/rollup-darwin-arm64": { + "version": "4.6.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.6.1.tgz", + "integrity": "sha512-cEXJQY/ZqMACb+nxzDeX9IPLAg7S94xouJJCNVE5BJM8JUEP4HeTF+ti3cmxWeSJo+5D+o8Tc0UAWUkfENdeyw==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@rollup/rollup-darwin-x64": { + "version": "4.6.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.6.1.tgz", + "integrity": "sha512-LoSU9Xu56isrkV2jLldcKspJ7sSXmZWkAxg7sW/RfF7GS4F5/v4EiqKSMCFbZtDu2Nc1gxxFdQdKwkKS4rwxNg==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "darwin" + ] + }, + "node_modules/@rollup/rollup-linux-arm-gnueabihf": { + "version": "4.6.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.6.1.tgz", + "integrity": "sha512-EfI3hzYAy5vFNDqpXsNxXcgRDcFHUWSx5nnRSCKwXuQlI5J9dD84g2Usw81n3FLBNsGCegKGwwTVsSKK9cooSQ==", + "cpu": [ + "arm" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm64-gnu": { + "version": "4.6.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.6.1.tgz", + "integrity": "sha512-9lhc4UZstsegbNLhH0Zu6TqvDfmhGzuCWtcTFXY10VjLLUe4Mr0Ye2L3rrtHaDd/J5+tFMEuo5LTCSCMXWfUKw==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-arm64-musl": { + "version": "4.6.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.6.1.tgz", + "integrity": "sha512-FfoOK1yP5ksX3wwZ4Zk1NgyGHZyuRhf99j64I5oEmirV8EFT7+OhUZEnP+x17lcP/QHJNWGsoJwrz4PJ9fBEXw==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-x64-gnu": { + "version": "4.6.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.6.1.tgz", + "integrity": "sha512-DNGZvZDO5YF7jN5fX8ZqmGLjZEXIJRdJEdTFMhiyXqyXubBa0WVLDWSNlQ5JR2PNgDbEV1VQowhVRUh+74D+RA==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-linux-x64-musl": { + "version": "4.6.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.6.1.tgz", + "integrity": "sha512-RkJVNVRM+piYy87HrKmhbexCHg3A6Z6MU0W9GHnJwBQNBeyhCJG9KDce4SAMdicQnpURggSvtbGo9xAWOfSvIQ==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "linux" + ] + }, + "node_modules/@rollup/rollup-win32-arm64-msvc": { + "version": "4.6.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.6.1.tgz", + "integrity": "sha512-v2FVT6xfnnmTe3W9bJXl6r5KwJglMK/iRlkKiIFfO6ysKs0rDgz7Cwwf3tjldxQUrHL9INT/1r4VA0n9L/F1vQ==", + "cpu": [ + "arm64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@rollup/rollup-win32-ia32-msvc": { + "version": "4.6.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.6.1.tgz", + "integrity": "sha512-YEeOjxRyEjqcWphH9dyLbzgkF8wZSKAKUkldRY6dgNR5oKs2LZazqGB41cWJ4Iqqcy9/zqYgmzBkRoVz3Q9MLw==", + "cpu": [ + "ia32" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@rollup/rollup-win32-x64-msvc": { + "version": "4.6.1", + "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.6.1.tgz", + "integrity": "sha512-0zfTlFAIhgz8V2G8STq8toAjsYYA6eci1hnXuyOTUFnymrtJwnS6uGKiv3v5UrPZkBlamLvrLV2iiaeqCKzb0A==", + "cpu": [ + "x64" + ], + "dev": true, + "optional": true, + "os": [ + "win32" + ] + }, + "node_modules/@ungap/structured-clone": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz", + "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==", + "dev": true + }, + "node_modules/acorn": { + "version": "8.11.2", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.2.tgz", + "integrity": "sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==", + "dev": true, + "bin": { + "acorn": "bin/acorn" + }, + "engines": { + "node": ">=0.4.0" + } + }, + "node_modules/acorn-jsx": { + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", + "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", + "dev": true, + "peerDependencies": { + "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" + } + }, + "node_modules/ajv": { + "version": "6.12.6", + "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", + "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==", + "dev": true, + "dependencies": { + "fast-deep-equal": "^3.1.1", + "fast-json-stable-stringify": "^2.0.0", + "json-schema-traverse": "^0.4.1", + "uri-js": "^4.2.2" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/epoberezkin" + } + }, + "node_modules/ansi-regex": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", + "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/argparse": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", + "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", + "dev": true + }, + "node_modules/balanced-match": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", + "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", + "dev": true + }, + "node_modules/brace-expansion": { + "version": "1.1.11", + "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", + "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==", + "dev": true, + "dependencies": { + "balanced-match": "^1.0.0", + "concat-map": "0.0.1" + } + }, + "node_modules/callsites": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz", + "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==", + "dev": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "dev": true, + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true + }, + "node_modules/concat-map": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", + "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", + "dev": true + }, + "node_modules/cross-spawn": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", + "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "dev": true, + "dependencies": { + "path-key": "^3.1.0", + "shebang-command": "^2.0.0", + "which": "^2.0.1" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/debug": { + "version": "4.3.4", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", + "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==", + "dev": true, + "dependencies": { + "ms": "2.1.2" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/deep-is": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz", + "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==", + "dev": true + }, + "node_modules/doctrine": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz", + "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==", + "dev": true, + "dependencies": { + "esutils": "^2.0.2" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/esbuild": { + "version": "0.19.8", + "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.8.tgz", + "integrity": "sha512-l7iffQpT2OrZfH2rXIp7/FkmaeZM0vxbxN9KfiCwGYuZqzMg/JdvX26R31Zxn/Pxvsrg3Y9N6XTcnknqDyyv4w==", + "dev": true, + "hasInstallScript": true, + "bin": { + "esbuild": "bin/esbuild" + }, + "engines": { + "node": ">=12" + }, + "optionalDependencies": { + "@esbuild/android-arm": "0.19.8", + "@esbuild/android-arm64": "0.19.8", + "@esbuild/android-x64": "0.19.8", + "@esbuild/darwin-arm64": "0.19.8", + "@esbuild/darwin-x64": "0.19.8", + "@esbuild/freebsd-arm64": "0.19.8", + "@esbuild/freebsd-x64": "0.19.8", + "@esbuild/linux-arm": "0.19.8", + "@esbuild/linux-arm64": "0.19.8", + "@esbuild/linux-ia32": "0.19.8", + "@esbuild/linux-loong64": "0.19.8", + "@esbuild/linux-mips64el": "0.19.8", + "@esbuild/linux-ppc64": "0.19.8", + "@esbuild/linux-riscv64": "0.19.8", + "@esbuild/linux-s390x": "0.19.8", + "@esbuild/linux-x64": "0.19.8", + "@esbuild/netbsd-x64": "0.19.8", + "@esbuild/openbsd-x64": "0.19.8", + "@esbuild/sunos-x64": "0.19.8", + "@esbuild/win32-arm64": "0.19.8", + "@esbuild/win32-ia32": "0.19.8", + "@esbuild/win32-x64": "0.19.8" + } + }, + "node_modules/escape-string-regexp": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz", + "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/eslint": { + "version": "8.54.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.54.0.tgz", + "integrity": "sha512-NY0DfAkM8BIZDVl6PgSa1ttZbx3xHgJzSNJKYcQglem6CppHyMhRIQkBVSSMaSRnLhig3jsDbEzOjwCVt4AmmA==", + "dev": true, + "dependencies": { + "@eslint-community/eslint-utils": "^4.2.0", + "@eslint-community/regexpp": "^4.6.1", + "@eslint/eslintrc": "^2.1.3", + "@eslint/js": "8.54.0", + "@humanwhocodes/config-array": "^0.11.13", + "@humanwhocodes/module-importer": "^1.0.1", + "@nodelib/fs.walk": "^1.2.8", + "@ungap/structured-clone": "^1.2.0", + "ajv": "^6.12.4", + "chalk": "^4.0.0", + "cross-spawn": "^7.0.2", + "debug": "^4.3.2", + "doctrine": "^3.0.0", + "escape-string-regexp": "^4.0.0", + "eslint-scope": "^7.2.2", + "eslint-visitor-keys": "^3.4.3", + "espree": "^9.6.1", + "esquery": "^1.4.2", + "esutils": "^2.0.2", + "fast-deep-equal": "^3.1.3", + "file-entry-cache": "^6.0.1", + "find-up": "^5.0.0", + "glob-parent": "^6.0.2", + "globals": "^13.19.0", + "graphemer": "^1.4.0", + "ignore": "^5.2.0", + "imurmurhash": "^0.1.4", + "is-glob": "^4.0.0", + "is-path-inside": "^3.0.3", + "js-yaml": "^4.1.0", + "json-stable-stringify-without-jsonify": "^1.0.1", + "levn": "^0.4.1", + "lodash.merge": "^4.6.2", + "minimatch": "^3.1.2", + "natural-compare": "^1.4.0", + "optionator": "^0.9.3", + "strip-ansi": "^6.0.1", + "text-table": "^0.2.0" + }, + "bin": { + "eslint": "bin/eslint.js" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/eslint-scope": { + "version": "7.2.2", + "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz", + "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==", + "dev": true, + "dependencies": { + "esrecurse": "^4.3.0", + "estraverse": "^5.2.0" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/eslint-visitor-keys": { + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz", + "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==", + "dev": true, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/espree": { + "version": "9.6.1", + "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz", + "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==", + "dev": true, + "dependencies": { + "acorn": "^8.9.0", + "acorn-jsx": "^5.3.2", + "eslint-visitor-keys": "^3.4.1" + }, + "engines": { + "node": "^12.22.0 || ^14.17.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint" + } + }, + "node_modules/esquery": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.5.0.tgz", + "integrity": "sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==", + "dev": true, + "dependencies": { + "estraverse": "^5.1.0" + }, + "engines": { + "node": ">=0.10" + } + }, + "node_modules/esrecurse": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz", + "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==", + "dev": true, + "dependencies": { + "estraverse": "^5.2.0" + }, + "engines": { + "node": ">=4.0" + } + }, + "node_modules/estraverse": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz", + "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==", + "dev": true, + "engines": { + "node": ">=4.0" + } + }, + "node_modules/esutils": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz", + "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/fast-deep-equal": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", + "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", + "dev": true + }, + "node_modules/fast-json-stable-stringify": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", + "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==", + "dev": true + }, + "node_modules/fast-levenshtein": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz", + "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==", + "dev": true + }, + "node_modules/fastq": { + "version": "1.15.0", + "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.15.0.tgz", + "integrity": "sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==", + "dev": true, + "dependencies": { + "reusify": "^1.0.4" + } + }, + "node_modules/file-entry-cache": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz", + "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==", + "dev": true, + "dependencies": { + "flat-cache": "^3.0.4" + }, + "engines": { + "node": "^10.12.0 || >=12.0.0" + } + }, + "node_modules/find-up": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz", + "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==", + "dev": true, + "dependencies": { + "locate-path": "^6.0.0", + "path-exists": "^4.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/flat-cache": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz", + "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==", + "dev": true, + "dependencies": { + "flatted": "^3.2.9", + "keyv": "^4.5.3", + "rimraf": "^3.0.2" + }, + "engines": { + "node": "^10.12.0 || >=12.0.0" + } + }, + "node_modules/flatted": { + "version": "3.2.9", + "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.9.tgz", + "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==", + "dev": true + }, + "node_modules/fs.realpath": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", + "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==", + "dev": true + }, + "node_modules/fsevents": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "dev": true, + "hasInstallScript": true, + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, + "node_modules/glob": { + "version": "7.2.3", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz", + "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==", + "dev": true, + "dependencies": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.1.1", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + }, + "engines": { + "node": "*" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/glob-parent": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", + "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==", + "dev": true, + "dependencies": { + "is-glob": "^4.0.3" + }, + "engines": { + "node": ">=10.13.0" + } + }, + "node_modules/globals": { + "version": "13.23.0", + "resolved": "https://registry.npmjs.org/globals/-/globals-13.23.0.tgz", + "integrity": "sha512-XAmF0RjlrjY23MA51q3HltdlGxUpXPvg0GioKiD9X6HD28iMjo2dKC8Vqwm7lne4GNr78+RHTfliktR6ZH09wA==", + "dev": true, + "dependencies": { + "type-fest": "^0.20.2" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/graphemer": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz", + "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==", + "dev": true + }, + "node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/ignore": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.0.tgz", + "integrity": "sha512-g7dmpshy+gD7mh88OC9NwSGTKoc3kyLAZQRU1mt53Aw/vnvfXnbC+F/7F7QoYVKbV+KNvJx8wArewKy1vXMtlg==", + "dev": true, + "engines": { + "node": ">= 4" + } + }, + "node_modules/import-fresh": { + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", + "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==", + "dev": true, + "dependencies": { + "parent-module": "^1.0.0", + "resolve-from": "^4.0.0" + }, + "engines": { + "node": ">=6" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/imurmurhash": { + "version": "0.1.4", + "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz", + "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==", + "dev": true, + "engines": { + "node": ">=0.8.19" + } + }, + "node_modules/inflight": { + "version": "1.0.6", + "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", + "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==", + "dev": true, + "dependencies": { + "once": "^1.3.0", + "wrappy": "1" + } + }, + "node_modules/inherits": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz", + "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", + "dev": true + }, + "node_modules/is-extglob": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", + "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-glob": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", + "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "dev": true, + "dependencies": { + "is-extglob": "^2.1.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-path-inside": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz", + "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/isexe": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", + "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==", + "dev": true + }, + "node_modules/js-yaml": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", + "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", + "dev": true, + "dependencies": { + "argparse": "^2.0.1" + }, + "bin": { + "js-yaml": "bin/js-yaml.js" + } + }, + "node_modules/json-buffer": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz", + "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==", + "dev": true + }, + "node_modules/json-schema-traverse": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz", + "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", + "dev": true + }, + "node_modules/json-stable-stringify-without-jsonify": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz", + "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==", + "dev": true + }, + "node_modules/keyv": { + "version": "4.5.4", + "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz", + "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==", + "dev": true, + "dependencies": { + "json-buffer": "3.0.1" + } + }, + "node_modules/levn": { + "version": "0.4.1", + "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz", + "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==", + "dev": true, + "dependencies": { + "prelude-ls": "^1.2.1", + "type-check": "~0.4.0" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/locate-path": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz", + "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==", + "dev": true, + "dependencies": { + "p-locate": "^5.0.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/lodash.merge": { + "version": "4.6.2", + "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", + "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==", + "dev": true + }, + "node_modules/minimatch": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", + "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==", + "dev": true, + "dependencies": { + "brace-expansion": "^1.1.7" + }, + "engines": { + "node": "*" + } + }, + "node_modules/ms": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", + "dev": true + }, + "node_modules/nanoid": { + "version": "3.3.7", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", + "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "bin": { + "nanoid": "bin/nanoid.cjs" + }, + "engines": { + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" + } + }, + "node_modules/natural-compare": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz", + "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==", + "dev": true + }, + "node_modules/once": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", + "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==", + "dev": true, + "dependencies": { + "wrappy": "1" + } + }, + "node_modules/optionator": { + "version": "0.9.3", + "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.3.tgz", + "integrity": "sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==", + "dev": true, + "dependencies": { + "@aashutoshrathi/word-wrap": "^1.2.3", + "deep-is": "^0.1.3", + "fast-levenshtein": "^2.0.6", + "levn": "^0.4.1", + "prelude-ls": "^1.2.1", + "type-check": "^0.4.0" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/p-limit": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz", + "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==", + "dev": true, + "dependencies": { + "yocto-queue": "^0.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/p-locate": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz", + "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==", + "dev": true, + "dependencies": { + "p-limit": "^3.0.2" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/parent-module": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", + "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==", + "dev": true, + "dependencies": { + "callsites": "^3.0.0" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/path-exists": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", + "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/path-is-absolute": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", + "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/path-key": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", + "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/picocolors": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", + "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", + "dev": true + }, + "node_modules/postcss": { + "version": "8.4.31", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", + "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "dependencies": { + "nanoid": "^3.3.6", + "picocolors": "^1.0.0", + "source-map-js": "^1.0.2" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/prelude-ls": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", + "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==", + "dev": true, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/prettier": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.1.0.tgz", + "integrity": "sha512-TQLvXjq5IAibjh8EpBIkNKxO749UEWABoiIZehEPiY4GNpVdhaFKqSTu+QrlU6D2dPAfubRmtJTi4K4YkQ5eXw==", + "dev": true, + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, + "node_modules/punycode": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", + "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==", + "dev": true, + "engines": { + "node": ">=6" + } + }, + "node_modules/queue-microtask": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", + "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ] + }, + "node_modules/resolve-from": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", + "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", + "dev": true, + "engines": { + "node": ">=4" + } + }, + "node_modules/reusify": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz", + "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==", + "dev": true, + "engines": { + "iojs": ">=1.0.0", + "node": ">=0.10.0" + } + }, + "node_modules/rimraf": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", + "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==", + "dev": true, + "dependencies": { + "glob": "^7.1.3" + }, + "bin": { + "rimraf": "bin.js" + }, + "funding": { + "url": "https://github.com/sponsors/isaacs" + } + }, + "node_modules/rollup": { + "version": "4.6.1", + "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.6.1.tgz", + "integrity": "sha512-jZHaZotEHQaHLgKr8JnQiDT1rmatjgKlMekyksz+yk9jt/8z9quNjnKNRoaM0wd9DC2QKXjmWWuDYtM3jfF8pQ==", + "dev": true, + "bin": { + "rollup": "dist/bin/rollup" + }, + "engines": { + "node": ">=18.0.0", + "npm": ">=8.0.0" + }, + "optionalDependencies": { + "@rollup/rollup-android-arm-eabi": "4.6.1", + "@rollup/rollup-android-arm64": "4.6.1", + "@rollup/rollup-darwin-arm64": "4.6.1", + "@rollup/rollup-darwin-x64": "4.6.1", + "@rollup/rollup-linux-arm-gnueabihf": "4.6.1", + "@rollup/rollup-linux-arm64-gnu": "4.6.1", + "@rollup/rollup-linux-arm64-musl": "4.6.1", + "@rollup/rollup-linux-x64-gnu": "4.6.1", + "@rollup/rollup-linux-x64-musl": "4.6.1", + "@rollup/rollup-win32-arm64-msvc": "4.6.1", + "@rollup/rollup-win32-ia32-msvc": "4.6.1", + "@rollup/rollup-win32-x64-msvc": "4.6.1", + "fsevents": "~2.3.2" + } + }, + "node_modules/run-parallel": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", + "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "dependencies": { + "queue-microtask": "^1.2.2" + } + }, + "node_modules/shebang-command": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", + "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", + "dev": true, + "dependencies": { + "shebang-regex": "^3.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/shebang-regex": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", + "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", + "dev": true, + "engines": { + "node": ">=8" + } + }, + "node_modules/source-map-js": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", + "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "dev": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/strip-ansi": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", + "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dev": true, + "dependencies": { + "ansi-regex": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/strip-json-comments": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz", + "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==", + "dev": true, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/text-table": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", + "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==", + "dev": true + }, + "node_modules/type-check": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", + "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==", + "dev": true, + "dependencies": { + "prelude-ls": "^1.2.1" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/type-fest": { + "version": "0.20.2", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz", + "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/uri-js": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz", + "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==", + "dev": true, + "dependencies": { + "punycode": "^2.1.0" + } + }, + "node_modules/vite": { + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.4.tgz", + "integrity": "sha512-RzAr8LSvM8lmhB4tQ5OPcBhpjOZRZjuxv9zO5UcxeoY2bd3kP3Ticd40Qma9/BqZ8JS96Ll/jeBX9u+LJZrhVg==", + "dev": true, + "dependencies": { + "esbuild": "^0.19.3", + "postcss": "^8.4.31", + "rollup": "^4.2.0" + }, + "bin": { + "vite": "bin/vite.js" + }, + "engines": { + "node": "^18.0.0 || >=20.0.0" + }, + "funding": { + "url": "https://github.com/vitejs/vite?sponsor=1" + }, + "optionalDependencies": { + "fsevents": "~2.3.3" + }, + "peerDependencies": { + "@types/node": "^18.0.0 || >=20.0.0", + "less": "*", + "lightningcss": "^1.21.0", + "sass": "*", + "stylus": "*", + "sugarss": "*", + "terser": "^5.4.0" + }, + "peerDependenciesMeta": { + "@types/node": { + "optional": true + }, + "less": { + "optional": true + }, + "lightningcss": { + "optional": true + }, + "sass": { + "optional": true + }, + "stylus": { + "optional": true + }, + "sugarss": { + "optional": true + }, + "terser": { + "optional": true + } + } + }, + "node_modules/which": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", + "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "dev": true, + "dependencies": { + "isexe": "^2.0.0" + }, + "bin": { + "node-which": "bin/node-which" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/wrappy": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz", + "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==", + "dev": true + }, + "node_modules/yocto-queue": { + "version": "0.1.0", + "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz", + "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..7e4f550 --- /dev/null +++ b/package.json @@ -0,0 +1,18 @@ +{ + "name": "meme-me", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "npm run lint && vite build", + "preview": "vite preview", + "lint": "eslint .", + "format": "prettier . --write" + }, + "devDependencies": { + "eslint": "^8.54.0", + "prettier": "3.1.0", + "vite": "^5.0.0" + } +} \ No newline at end of file diff --git a/public/javascript.svg b/public/javascript.svg new file mode 100644 index 0000000..f9abb2b --- /dev/null +++ b/public/javascript.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/vite.svg b/public/vite.svg new file mode 100644 index 0000000..e7b8dfb --- /dev/null +++ b/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/camera.js b/src/camera.js new file mode 100644 index 0000000..2b6c127 --- /dev/null +++ b/src/camera.js @@ -0,0 +1,45 @@ +export async function getVideo(previewCanvas) { + const avStream = await navigator.mediaDevices.getUserMedia({ + video: true, + }); + + const video = document.createElement("video"); + try { + // modern browsers + video.srcObject = avStream; + } catch (error) { + // old browsers + video.src = window.URL.createObjectURL(avStream); + } + + if (previewCanvas) { + video.addEventListener("canplay", () => { + drawPreview(video, previewCanvas); + }); + } + + await video.play(); + return video; +} + +export function drawVideo(video, canvas) { + const context = canvas.getContext("2d"); + context.drawImage(video, 0, 0, canvas.width, canvas.height); +} + +export function drawPreview(video, canvas) { + const context = canvas.getContext("2d"); + setInterval(() => { + context.drawImage( + video, + 0, + 0, + video.videoWidth, + video.videoHeight, + 0, + 0, + canvas.width, + canvas.height, + ); + }, 16); +} diff --git a/src/modal.js b/src/modal.js new file mode 100644 index 0000000..c986bae --- /dev/null +++ b/src/modal.js @@ -0,0 +1,56 @@ +export class Form { + element = document.createElement("form"); + heading = document.createElement("h2"); + closeButton = document.createElement("button"); + + constructor(type, title, content) { + this.element.setAttribute("type", type); + this.heading.textContent = title; + this.closeButton.setAttribute("type", "submit"); + this.closeButton.classList.add("secondary"); + this.closeButton.textContent = "Close"; + this.element.appendChild(this.heading); + this.element.appendChild(content); + this.element.appendChild(this.closeButton); + } +} + +export class Modal { + openButton = document.createElement("button"); + dialog = document.createElement("dialog"); + + constructor(name, parentElement, contentElement) { + this.name = name; + this.openButton.setAttribute("id", name); + this.openButton.textContent = name; + this.parent = parentElement; + this.content = contentElement; + this.#setupForm(); + this.#registerOpenListener(); + } + + #setupForm() { + const article = document.createElement("article"); + const form = new Form("dialog", this.name, this.content); + article.appendChild(form.element); + this.dialog.appendChild(article); + + const dialog = this.dialog; + form.element.addEventListener("submit", function (event) { + event.preventDefault(); + dialog.close(); + }); + } + + #registerOpenListener() { + const dialog = this.dialog; + this.openButton.addEventListener("click", () => { + dialog.showModal(); + }); + } + + render() { + this.parent.replaceChildren(this.openButton); + this.parent.appendChild(this.dialog); + } +} diff --git a/src/text.js b/src/text.js new file mode 100644 index 0000000..2437a7b --- /dev/null +++ b/src/text.js @@ -0,0 +1,33 @@ +export function drawText(canvas) { + const textData = getTextData(); + const context = canvas.getContext("2d"); + + // Clear any previous text + context.clearRect(0, 0, canvas.width, canvas.height); + + for (let { text, x, y } of textData) { + const maxWidth = canvas.width - 10 - x; + context.fillStyle = "white"; + context.strokeStyle = "black"; + context.font = "80px Impact"; + context.fillText(text, x, y, maxWidth); + context.strokeText(text, x, y, maxWidth); + } +} + +function getTextData() { + const top = document.getElementById("text-top"); + const topData = { + text: top.value.toUpperCase(), + x: 10, + y: 90, + }; + + const bottom = document.getElementById("text-bottom"); + const bottomData = { + text: bottom.value.toUpperCase(), + x: 10, + y: 470, + }; + return [topData, bottomData]; +} diff --git a/src/theme.js b/src/theme.js new file mode 100644 index 0000000..4da6a59 --- /dev/null +++ b/src/theme.js @@ -0,0 +1,12 @@ +export function getThemeToggle() { + const doc = document.documentElement; + const toggle = document.getElementById("toggle"); + + const toggleDarkMode = () => { + const newTheme = toggle.checked ? "dark" : "light"; + doc.setAttribute("data-theme", newTheme); + }; + + toggle.addEventListener("change", toggleDarkMode); + return toggle; +} diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 0000000..7827612 --- /dev/null +++ b/vite.config.js @@ -0,0 +1,5 @@ +import { defineConfig } from "vite"; + +export default defineConfig({ + base: "/meme-me/", +});