├── .gitattributes ├── .github ├── dependabot.yml └── workflows │ ├── check.yml │ ├── dependabot_patch_bun.yml │ ├── dependency-review.yml │ ├── dependency-updater.yml │ ├── publish.yml │ └── semgrep.yml ├── .gitignore ├── .npmrc ├── .vscode └── extensions.json ├── LICENSE ├── README.md ├── biome.json ├── bun.lockb ├── external_assets ├── Banner1400x560.png ├── Banner440x280.png ├── Banner792x680.png ├── Banner920x680.png ├── chrome-unpacked.png ├── edge-unpacked.png ├── icon128.png ├── icon128x128.png ├── icon16.png ├── icon32.png ├── icon48.png ├── icon48x48.png ├── icon512.png ├── icon512x512.png ├── icon936x804.png ├── popup-dark.png ├── popup-light.png ├── promo-icon 128x128.png └── promo-icon680x680.png ├── package.json └── unpacked ├── background-script.js ├── icons ├── BigIcon128x128.png ├── BigIcon48x48.png ├── BigIcon512x512.png ├── icon16x16.png └── icon32x32.png ├── index.js ├── manifest.json ├── pageAccess.js ├── popup ├── elements │ ├── slider.js │ └── tooltip.js ├── popup.css ├── popup.css.map ├── popup.html ├── popup.js ├── popup.scss └── vendors │ ├── coloris │ ├── LICENSE │ ├── coloris.min.css │ ├── coloris.min.js │ └── vendor-lock.json │ └── cooltipz │ ├── LICENSE │ ├── cooltipz.min.css │ └── vendor-lock.json └── style.css /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto eol=lf 3 | *.scss linguist-detectable=false 4 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | # To get started with Dependabot version updates, you'll need to specify which 2 | # package ecosystems to update and where the package manifests are located. 3 | # Please see the documentation for all configuration options: 4 | # https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates 5 | 6 | version: 2 7 | updates: 8 | - package-ecosystem: 'npm' # See documentation for possible values 9 | directory: '/' # Location of package manifests 10 | schedule: 11 | interval: 'weekly' 12 | versioning-strategy: 'increase' 13 | groups: 14 | production-dependencies: 15 | dependency-type: 'production' 16 | development-dependencies: 17 | dependency-type: 'development' 18 | 19 | - package-ecosystem: 'github-actions' # See documentation for possible values 20 | directory: '/' # Location of package manifests 21 | schedule: 22 | interval: 'weekly' 23 | -------------------------------------------------------------------------------- /.github/workflows/check.yml: -------------------------------------------------------------------------------- 1 | name: Check 2 | 3 | on: 4 | push: 5 | branches: [main] 6 | pull_request: 7 | # The branches below must be a subset of the branches above 8 | branches: [main] 9 | 10 | jobs: 11 | Check: 12 | runs-on: ubuntu-latest 13 | steps: 14 | - uses: actions/checkout@v4 15 | - uses: oven-sh/setup-bun@v2 16 | - run: bun install 17 | - run: bun check 18 | - run: bun b 19 | -------------------------------------------------------------------------------- /.github/workflows/dependabot_patch_bun.yml: -------------------------------------------------------------------------------- 1 | # https://github.com/dependabot/dependabot-core/issues/6528#issuecomment-2013695799 2 | name: 'Dependabot: Update bun.lockb' 3 | on: 4 | pull_request: 5 | paths: 6 | - 'package.json' 7 | permissions: 8 | contents: write 9 | jobs: 10 | update-bun-lockb: 11 | name: 'Update bun.lockb' 12 | if: github.actor == 'dependabot[bot]' 13 | runs-on: ubuntu-latest 14 | steps: 15 | - uses: oven-sh/setup-bun@v2 16 | - uses: actions/checkout@v4 17 | with: 18 | fetch-depth: 0 19 | ref: ${{ github.event.pull_request.head.ref }} 20 | - run: | 21 | bun install 22 | git add bun.lockb 23 | git config --global user.name 'dependabot[bot]' 24 | git config --global user.email 'dependabot[bot]@users.noreply.github.com' 25 | git commit --amend --no-edit 26 | git push --force 27 | -------------------------------------------------------------------------------- /.github/workflows/dependency-review.yml: -------------------------------------------------------------------------------- 1 | # Dependency Review Action 2 | # 3 | # This Action will scan dependency manifest files that change as part of a Pull Request, surfacing known-vulnerable versions of the packages declared or updated in the PR. Once installed, if the workflow run is marked as required, PRs introducing known-vulnerable packages will be blocked from merging. 4 | # 5 | # Source repository: https://github.com/actions/dependency-review-action 6 | # Public documentation: https://docs.github.com/en/code-security/supply-chain-security/understanding-your-software-supply-chain/about-dependency-review#dependency-review-enforcement 7 | name: "Dependency Review" 8 | on: pull_request 9 | 10 | permissions: 11 | contents: read 12 | 13 | jobs: 14 | dependency-review: 15 | runs-on: ubuntu-latest 16 | steps: 17 | - name: "Checkout Repository" 18 | uses: actions/checkout@v4 19 | - name: 'Dependency Review' 20 | uses: actions/dependency-review-action@v4 21 | -------------------------------------------------------------------------------- /.github/workflows/dependency-updater.yml: -------------------------------------------------------------------------------- 1 | name: Dependency Updater 2 | 3 | on: 4 | schedule: 5 | # every day at 07:33 6 | - cron: '33 7 * * *' 7 | workflow_dispatch: null # allow manual trigger 8 | 9 | jobs: 10 | update-vendors: 11 | runs-on: ubuntu-latest 12 | steps: 13 | - uses: actions/checkout@v4 14 | - uses: oven-sh/setup-bun@v2 15 | - run: bun install 16 | 17 | - name: Run vendor update 18 | uses: Araxeus/vendorfiles-action@v1 19 | with: 20 | token: ${{ secrets.GITHUB_TOKEN }} 21 | package-manager: bun 22 | -------------------------------------------------------------------------------- /.github/workflows/publish.yml: -------------------------------------------------------------------------------- 1 | name: Publish 2 | 3 | on: 4 | workflow_dispatch: null 5 | 6 | jobs: 7 | Publish: 8 | runs-on: ubuntu-latest 9 | steps: 10 | - uses: actions/checkout@v4 11 | - uses: oven-sh/setup-bun@v2 12 | - run: bun install 13 | - run: bun b 14 | 15 | - name: Publish to Chrome/Edge/Firefox stores 16 | uses: PlasmoHQ/bpp@main 17 | with: 18 | keys: ${{ secrets.BPP_KEYS }} 19 | edge-notes: "Submitted using https://github.com/Araxeus/Youtube-Volume-Scroll/blob/main/.github/workflows/publish.yml" 20 | -------------------------------------------------------------------------------- /.github/workflows/semgrep.yml: -------------------------------------------------------------------------------- 1 | on: 2 | pull_request: {} 3 | push: 4 | branches: 5 | - main 6 | - master 7 | paths: 8 | - .github/workflows/semgrep.yml 9 | schedule: 10 | # random HH:MM to avoid a load spike on GitHub Actions at 00:00 11 | - cron: 43 21 * * * 12 | name: Semgrep 13 | jobs: 14 | semgrep: 15 | name: Scan 16 | runs-on: ubuntu-20.04 17 | env: 18 | SEMGREP_APP_TOKEN: ${{ secrets.SEMGREP_APP_TOKEN }} 19 | container: 20 | image: returntocorp/semgrep 21 | steps: 22 | - uses: actions/checkout@v4 23 | - run: semgrep ci 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .vscode/* 2 | external_assets/uncompressed/ 3 | *.zip 4 | *.xpi 5 | node_modules 6 | keys.json 7 | *.crx 8 | 9 | # Ignore the .vscode recommended extensions file 10 | !.vscode/extensions.json 11 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict = true 2 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["biomejs.biome"] 3 | } 4 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Araxeus 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [link-chrome]: https://chrome.google.com/webstore/detail/youtube-volume-scroll/agadcopafaojndinhloilcanpfpbonbk "Version published on Chrome Web Store" 2 | 3 | [link-firefox]: https://addons.mozilla.org/en-US/firefox/addon/youtube-volume-scroll "Version published on Mozilla Add-ons" 4 | 5 | [link-edge]: https://microsoftedge.microsoft.com/addons/detail/kigkklogdpgeomdollklnlfgglnkgenb "Version published on Edge Add-ons" 6 | 7 | [link-releases]: https://github.com/Araxeus/Youtube-Volume-Scroll/releases/latest "Latest release" 8 | 9 |

Youtube Volume Scroll

10 | 11 | [for Firefox][link-firefox] [for Firefox][link-edge] [for Chrome][link-chrome] 12 | 13 | > Browser Extension that enable scrolling mousewheel to control volume on Youtube and Youtube Music 14 | 15 |

16 | 17 | Version 18 | 19 | 20 | License: MIT 21 | 22 | 23 | Maintenance 24 | 25 |

26 | 27 | ## Features 28 | 29 | ★ Use mousewheel on the video to change the volume 30 | 31 | ★ Display the new volume for 1 second on the video when changing volume 32 | 33 | ★ Customizable options in the extension settings (with [light](https://raw.githubusercontent.com/Araxeus/Youtube-Volume-Scroll/main/external_assets/popup-light.png) / [dark](https://raw.githubusercontent.com/Araxeus/Youtube-Volume-Scroll/main/external_assets/popup-dark.png) mode support) 34 | 35 | ★ Remember volume even in incognito mode 36 | 37 | ★ Works on [youtube.com](youtube.com) and [music.youtube.com](music.youtube.com) 38 | 39 | ★ Works in embedded videos (Like in Reddit, WhatsApp, etc.) 40 | 41 | ★ Automatically blocks the ["Continue watching?" popup](https://user-images.githubusercontent.com/61631665/129977894-01c60740-7ec6-4bf0-9a2c-25da24491b0e.png) that appears after some time 42 | 43 | ## Installation 44 | 45 | [Chrome][link-chrome] [][link-chrome] Chrome and other Chromium browsers 46 | 47 | [Chrome][link-edge] [][link-edge] Microsoft Edge 48 | 49 | [Firefox][link-firefox] [][link-firefox] Manifest V3 only 50 | 51 | [Firefox][link-releases] [][link-releases] Signed .xpi files 52 | 53 | ## Build it yourself 54 | 55 | Requires [Node.js](https://nodejs.org/) and [npm](https://www.npmjs.com/) 56 | 57 | ```sh 58 | # Clone the repo and cd to it 59 | git clone https://github.com/Araxeus/Youtube-Volume-Scroll.git 60 | 61 | cd Youtube-Volume-Scroll 62 | 63 | # Install build dependencies 64 | bun install 65 | 66 | # Build the extension 67 | bun b 68 | ``` 69 | 70 | The resulting unsigned xpi/zip file will be in the `web-ext-artifacts` folder. 71 | 72 | ## Known Issues 73 | 74 | * To work in incognito, permission needs to be explicitly set in the [extension settings](https://user-images.githubusercontent.com/78568641/155850125-4b98e01c-f55d-4747-89c5-25ecd792f025.png) 75 | 76 | * If you experience embedded videos in incognito mode not saving volume:
77 | disable `Block third-party cookies in incognito` ([1](https://i.stack.imgur.com/mEidB.png)/[2](https://user-images.githubusercontent.com/78568641/155897465-08876dc9-48c2-4f7a-a95a-e39522e99f03.png)) 78 | 79 | ## Author 80 | 81 | 👤 **Araxeus** 82 | 83 | * Github: [@Araxeus](https://github.com/Araxeus) 84 | 85 | ## 🤝 Contributing 86 | 87 | Contributions, issues and feature requests are welcome!
Feel free to check [issues page](https://github.com/Araxeus/Youtube-Volume-Scroll/issues). 88 | 89 | ## Show your support 90 | 91 | Give a ⭐️ if this project helped you! 92 | -------------------------------------------------------------------------------- /biome.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@biomejs/biome/configuration_schema.json", 3 | "organizeImports": { 4 | "enabled": true 5 | }, 6 | "files": { 7 | "ignore": [ 8 | "**/popup/vendors/*", 9 | "./node_modules/**", 10 | "./dist/**", 11 | "./unpacked/popup/popup.css" 12 | ] 13 | }, 14 | "javascript": { 15 | "formatter": { 16 | "quoteStyle": "single", 17 | "arrowParentheses": "asNeeded" 18 | } 19 | }, 20 | "formatter": { 21 | "enabled": true, 22 | "indentStyle": "space", 23 | "indentWidth": 4 24 | }, 25 | "json": { 26 | "formatter": { 27 | "enabled": true, 28 | "indentStyle": "space", 29 | "indentWidth": 2 30 | }, 31 | "linter": { 32 | "enabled": true 33 | } 34 | }, 35 | "css": { 36 | "formatter": { 37 | "enabled": true, 38 | "indentStyle": "space", 39 | "indentWidth": 2, 40 | "lineWidth": 200 41 | }, 42 | "linter": { 43 | "enabled": true 44 | } 45 | }, 46 | "linter": { 47 | "enabled": true, 48 | "rules": { 49 | "recommended": true, 50 | "correctness": { 51 | "noUndeclaredVariables": "error", 52 | "noUnusedVariables": "error" 53 | }, 54 | "complexity": { 55 | "noThisInStatic": "off", 56 | "noForEach": "off" 57 | }, 58 | "suspicious": { 59 | "noAssignInExpressions": "off" 60 | }, 61 | "style": { 62 | "useNumberNamespace": "off" 63 | }, 64 | "nursery": { 65 | "recommended": true 66 | } 67 | } 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /bun.lockb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Araxeus/Youtube-Volume-Scroll/cf71974267ca2c0d8ad0da7e4d91a973ca726df7/bun.lockb -------------------------------------------------------------------------------- /external_assets/Banner1400x560.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Araxeus/Youtube-Volume-Scroll/cf71974267ca2c0d8ad0da7e4d91a973ca726df7/external_assets/Banner1400x560.png -------------------------------------------------------------------------------- /external_assets/Banner440x280.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Araxeus/Youtube-Volume-Scroll/cf71974267ca2c0d8ad0da7e4d91a973ca726df7/external_assets/Banner440x280.png -------------------------------------------------------------------------------- /external_assets/Banner792x680.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Araxeus/Youtube-Volume-Scroll/cf71974267ca2c0d8ad0da7e4d91a973ca726df7/external_assets/Banner792x680.png -------------------------------------------------------------------------------- /external_assets/Banner920x680.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Araxeus/Youtube-Volume-Scroll/cf71974267ca2c0d8ad0da7e4d91a973ca726df7/external_assets/Banner920x680.png -------------------------------------------------------------------------------- /external_assets/chrome-unpacked.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Araxeus/Youtube-Volume-Scroll/cf71974267ca2c0d8ad0da7e4d91a973ca726df7/external_assets/chrome-unpacked.png -------------------------------------------------------------------------------- /external_assets/edge-unpacked.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Araxeus/Youtube-Volume-Scroll/cf71974267ca2c0d8ad0da7e4d91a973ca726df7/external_assets/edge-unpacked.png -------------------------------------------------------------------------------- /external_assets/icon128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Araxeus/Youtube-Volume-Scroll/cf71974267ca2c0d8ad0da7e4d91a973ca726df7/external_assets/icon128.png -------------------------------------------------------------------------------- /external_assets/icon128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Araxeus/Youtube-Volume-Scroll/cf71974267ca2c0d8ad0da7e4d91a973ca726df7/external_assets/icon128x128.png -------------------------------------------------------------------------------- /external_assets/icon16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Araxeus/Youtube-Volume-Scroll/cf71974267ca2c0d8ad0da7e4d91a973ca726df7/external_assets/icon16.png -------------------------------------------------------------------------------- /external_assets/icon32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Araxeus/Youtube-Volume-Scroll/cf71974267ca2c0d8ad0da7e4d91a973ca726df7/external_assets/icon32.png -------------------------------------------------------------------------------- /external_assets/icon48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Araxeus/Youtube-Volume-Scroll/cf71974267ca2c0d8ad0da7e4d91a973ca726df7/external_assets/icon48.png -------------------------------------------------------------------------------- /external_assets/icon48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Araxeus/Youtube-Volume-Scroll/cf71974267ca2c0d8ad0da7e4d91a973ca726df7/external_assets/icon48x48.png -------------------------------------------------------------------------------- /external_assets/icon512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Araxeus/Youtube-Volume-Scroll/cf71974267ca2c0d8ad0da7e4d91a973ca726df7/external_assets/icon512.png -------------------------------------------------------------------------------- /external_assets/icon512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Araxeus/Youtube-Volume-Scroll/cf71974267ca2c0d8ad0da7e4d91a973ca726df7/external_assets/icon512x512.png -------------------------------------------------------------------------------- /external_assets/icon936x804.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Araxeus/Youtube-Volume-Scroll/cf71974267ca2c0d8ad0da7e4d91a973ca726df7/external_assets/icon936x804.png -------------------------------------------------------------------------------- /external_assets/popup-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Araxeus/Youtube-Volume-Scroll/cf71974267ca2c0d8ad0da7e4d91a973ca726df7/external_assets/popup-dark.png -------------------------------------------------------------------------------- /external_assets/popup-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Araxeus/Youtube-Volume-Scroll/cf71974267ca2c0d8ad0da7e4d91a973ca726df7/external_assets/popup-light.png -------------------------------------------------------------------------------- /external_assets/promo-icon 128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Araxeus/Youtube-Volume-Scroll/cf71974267ca2c0d8ad0da7e4d91a973ca726df7/external_assets/promo-icon 128x128.png -------------------------------------------------------------------------------- /external_assets/promo-icon680x680.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Araxeus/Youtube-Volume-Scroll/cf71974267ca2c0d8ad0da7e4d91a973ca726df7/external_assets/promo-icon680x680.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "youtube-volume-scroll", 3 | "version": "3.2.2", 4 | "description": "Browser Extension that enables scrolling mousewheel to control volume on Youtube and Youtube Music", 5 | "main": "index.js", 6 | "type": "module", 7 | "packageManager": "bun@1.1.22", 8 | "scripts": { 9 | "check": "bun copy_to_dist && bun check_no_copy && del-cli dist", 10 | "check_no_copy": "(biome check && web-ext lint -w --ignore-files \"./popup/vendors/*\") || (del-cli dist && exit 1)", 11 | "lint": "biome check --write", 12 | "format": "biome format --write", 13 | "sas": "sass --update unpacked/popup", 14 | "release": "release-it && bun b", 15 | "publish": "gh workflow run publish.yml", 16 | "b": "bun sas && bun copy_to_dist && bun check_no_copy && bun build:firefox && bun build:chromium && del-cli dist", 17 | "build:firefox": "x-var web-ext build --filename=\"youtube-volume-scroll_%npm_package_version%_firefox.xpi\"", 18 | "build:chromium": "bun manifest:chromium && x-var web-ext build --filename=\"youtube-volume-scroll_%npm_package_version%_chromium.zip\"", 19 | "manifest:firefox": "bun manifest:add:gecko-id && bun manifest:add:background-script", 20 | "manifest:chromium": "bun manifest:remove:gecko-id && bun manifest:remove:background-script", 21 | "manifest:add:gecko-id": "dot-json dist/manifest.json browser_specific_settings.gecko.id youtube-volume-scroll@github.com", 22 | "manifest:remove:gecko-id": "dot-json dist/manifest.json -d browser_specific_settings", 23 | "manifest:add:background-script": "dot-json dist/manifest.json background.scripts.0 background-script.js && cpy background-script.js ../dist --cwd=unpacked", 24 | "manifest:remove:background-script": "dot-json dist/manifest.json -d background && del-cli dist/background-script.js", 25 | "copy_to_dist": "cpy . ../dist --cwd=unpacked --dot && bun manifest:firefox" 26 | }, 27 | "repository": { 28 | "type": "git", 29 | "url": "git+https://github.com/Araxeus/Youtube-Volume-Scroll.git" 30 | }, 31 | "author": "Araxeus", 32 | "license": "MIT", 33 | "bugs": { 34 | "url": "https://github.com/Araxeus/Youtube-Volume-Scroll/issues" 35 | }, 36 | "homepage": "https://github.com/Araxeus/Youtube-Volume-Scroll#readme", 37 | "devDependencies": { 38 | "@biomejs/biome": "^1.8.3", 39 | "@release-it/bumper": "^6.0.1", 40 | "auto-changelog": "^2.4.0", 41 | "cpy-cli": "=4.2.0", 42 | "del-cli": "^5.1.0", 43 | "dot-json": "^1.3.0", 44 | "globals": "^15.9.0", 45 | "release-it": "^17.6.0", 46 | "sass": "^1.77.8", 47 | "vendorfiles": "^1.2.2", 48 | "web-ext": "^8.2.0", 49 | "x-var": "^2.0.1" 50 | }, 51 | "vendorConfig": { 52 | "vendorFolder": "./unpacked/popup/vendors" 53 | }, 54 | "vendorDependencies": { 55 | "cooltipz": { 56 | "version": "v2.3.1", 57 | "repository": "https://github.com/jackdomleo7/Cooltipz.css", 58 | "files": ["cooltipz.min.css", "LICENSE"] 59 | }, 60 | "coloris": { 61 | "version": "v0.24.0", 62 | "repository": "https://github.com/mdbassit/Coloris", 63 | "files": ["dist/coloris.min.js", "dist/coloris.min.css", "LICENSE"] 64 | } 65 | }, 66 | "webExt": { 67 | "sourceDir": "dist", 68 | "ignoreFiles": ["./popup/*.scss", "./popup/*.map"], 69 | "run": { 70 | "firefox": "nightly" 71 | }, 72 | "lint": { 73 | "pretty": true 74 | }, 75 | "build": { 76 | "overwriteDest": true 77 | } 78 | }, 79 | "release-it": { 80 | "plugins": { 81 | "@release-it/bumper": { 82 | "out": "unpacked/manifest.json" 83 | } 84 | }, 85 | "hooks": { 86 | "before:init": "bun check", 87 | "after:bump": "bun format", 88 | "after:release": "echo Successfully released ${name} v${version} to ${repo.repository}." 89 | }, 90 | "git": { 91 | "requireBranch": "main", 92 | "changelog": "npx auto-changelog --stdout --commit-limit false -u --template https://raw.githubusercontent.com/release-it/release-it/master/templates/changelog-compact.hbs" 93 | }, 94 | "github": { 95 | "release": true, 96 | "draft": true, 97 | "web": true 98 | }, 99 | "npm": { 100 | "publish": false 101 | } 102 | }, 103 | "trustedDependencies": ["@biomejs/biome"] 104 | } 105 | -------------------------------------------------------------------------------- /unpacked/background-script.js: -------------------------------------------------------------------------------- 1 | // This file is only included in the firefox version of the extension 2 | // Purpose: Prompt the user to grant the extension permission to access youtube.com and music.youtube.com 3 | // This is essential on firefox since the browser doesn't ask for permission by itself 4 | 5 | const browserApi = globalThis.browser ?? globalThis.chrome ?? null; 6 | 7 | const permissions = { 8 | origins: ['https://www.youtube.com/*', 'https://music.youtube.com/*'], 9 | }; 10 | browserApi.permissions.contains(permissions, result => { 11 | if (!result) { 12 | browserApi.browserAction?.openPopup?.() ?? 13 | browserApi.action?.openPopup?.() ?? 14 | browserApi.tabs.create({ 15 | url: browserApi.runtime.getURL('popup/popup.html'), 16 | }); 17 | } 18 | }); 19 | -------------------------------------------------------------------------------- /unpacked/icons/BigIcon128x128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Araxeus/Youtube-Volume-Scroll/cf71974267ca2c0d8ad0da7e4d91a973ca726df7/unpacked/icons/BigIcon128x128.png -------------------------------------------------------------------------------- /unpacked/icons/BigIcon48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Araxeus/Youtube-Volume-Scroll/cf71974267ca2c0d8ad0da7e4d91a973ca726df7/unpacked/icons/BigIcon48x48.png -------------------------------------------------------------------------------- /unpacked/icons/BigIcon512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Araxeus/Youtube-Volume-Scroll/cf71974267ca2c0d8ad0da7e4d91a973ca726df7/unpacked/icons/BigIcon512x512.png -------------------------------------------------------------------------------- /unpacked/icons/icon16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Araxeus/Youtube-Volume-Scroll/cf71974267ca2c0d8ad0da7e4d91a973ca726df7/unpacked/icons/icon16x16.png -------------------------------------------------------------------------------- /unpacked/icons/icon32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Araxeus/Youtube-Volume-Scroll/cf71974267ca2c0d8ad0da7e4d91a973ca726df7/unpacked/icons/icon32x32.png -------------------------------------------------------------------------------- /unpacked/index.js: -------------------------------------------------------------------------------- 1 | const browserApi = globalThis.browser ?? globalThis.chrome ?? undefined; 2 | if (!browserApi) 3 | throw new Error( 4 | 'Youtube-Volume-Scroll could not find a browser api to use', 5 | ); 6 | 7 | const $ = document.querySelector.bind(document); 8 | const oneMonth = 2592e6; 9 | const isMusic = window.location.href.includes('music.youtube'); 10 | 11 | let configFromPageAccess = undefined; 12 | 13 | if (browserApi.extension.inIncognitoContext) { 14 | setupIncognito(); 15 | } 16 | 17 | window.addEventListener('load', start, { once: true }); 18 | 19 | // keep config in sync with extension popup 20 | browserApi.storage.onChanged.addListener((changes, area) => { 21 | // sync is the main storage, local is used for instant changes 22 | if (area === 'sync' && changes.config?.newValue) { 23 | if (!simpleAreEqual(changes.config.newValue, configFromPageAccess)) { 24 | sendConfig(changes.config.newValue); 25 | } 26 | configFromPageAccess = undefined; 27 | } 28 | if (area === 'local' && changes.config?.newValue) { 29 | sendConfig(changes.config.newValue); 30 | } 31 | }); 32 | 33 | function start() { 34 | if ($('.html5-video-player:not(.unstarted-mode)')) { 35 | checkOverlay(); 36 | return; 37 | } 38 | 39 | const documentObserver = new MutationObserver(() => { 40 | if ($('.html5-video-player:not(.unstarted-mode)')) { 41 | documentObserver.disconnect(); 42 | checkOverlay(); 43 | } 44 | }); 45 | 46 | documentObserver.observe(document.documentElement, { 47 | childList: true, 48 | subtree: true, 49 | }); 50 | } 51 | 52 | // check if the extension is inside a youtube embedded iframe that isn't active yet 53 | function checkOverlay() { 54 | const overlay = $('.ytp-cued-thumbnail-overlay-image'); 55 | const noOverlay = () => 56 | !overlay?.style.backgroundImage || 57 | overlay.parentNode.style.display === 'none'; 58 | if (noOverlay()) { 59 | init(); 60 | } else { 61 | const overlayObserver = new MutationObserver(() => { 62 | if (noOverlay()) { 63 | overlayObserver.disconnect(); 64 | init(); 65 | } 66 | }); 67 | 68 | overlayObserver.observe(overlay.parentNode, { 69 | attributeFilter: ['style'], 70 | }); 71 | } 72 | } 73 | 74 | function init() { 75 | loadPageAccess(); 76 | 77 | window.addEventListener('message', e => { 78 | if (e.origin !== window.location.origin) return; 79 | if ( 80 | e.data.type === 'YoutubeVolumeScroll-volume' && 81 | typeof e.data.newVolume === 'number' 82 | ) { 83 | saveVolume(e.data.newVolume); 84 | } else if ( 85 | e.data.type === 'YoutubeVolumeScroll-config-save' && 86 | typeof e.data.config === 'object' 87 | ) { 88 | configFromPageAccess = e.data.config; 89 | browserApi.storage.sync.set({ config: e.data.config }); 90 | } 91 | }); 92 | 93 | console.log('loaded Youtube-Volume-Scroll on url: ', window.location.href); 94 | } 95 | 96 | function loadPageAccess() { 97 | const pageAccess = document.createElement('script'); 98 | pageAccess.src = browserApi.runtime.getURL('pageAccess.js'); 99 | pageAccess.onload = function () { 100 | this.remove(); 101 | browserApi.storage.sync.get('config', data => { 102 | if (data.config) sendConfig(data.config); 103 | }); 104 | }; 105 | (document.head || document.documentElement).appendChild(pageAccess); 106 | } 107 | 108 | function sendConfig(config) { 109 | //send updated config to pageAccess.js 110 | window.postMessage( 111 | { type: 'YoutubeVolumeScroll-config-change', config }, 112 | window.location.origin, 113 | ); 114 | } 115 | 116 | function setupIncognito() { 117 | browserApi.storage.sync.get('savedVolume', data => { 118 | if (data?.savedVolume !== undefined) { 119 | try { 120 | // indicate to pageAccess that we are in incognito 121 | window.localStorage.setItem( 122 | 'Youtube-Volume-Scroll', 123 | JSON.stringify({ 124 | incognito: true, 125 | savedVolume: data.savedVolume, 126 | }), 127 | ); 128 | if (!isMusic) { 129 | // setup native youtube volume cookie 130 | const cookieData = JSON.stringify({ 131 | volume: data.savedVolume, 132 | muted: data.savedVolume <= 0, 133 | }); 134 | const timeNow = Date.now(); 135 | 136 | window.localStorage.setItem( 137 | 'yt-player-volume', 138 | JSON.stringify({ 139 | data: cookieData, 140 | expiration: timeNow + oneMonth, 141 | creation: timeNow, 142 | }), 143 | ); 144 | 145 | window.sessionStorage.setItem( 146 | 'yt-player-volume', 147 | JSON.stringify({ 148 | data: cookieData, 149 | creation: timeNow, 150 | }), 151 | ); 152 | } 153 | } catch { 154 | console.error( 155 | 'Youtube-Volume-Scroll could not save volume cookies, see https://i.stack.imgur.com/mEidB.png', 156 | ); 157 | } 158 | } 159 | }); 160 | } 161 | 162 | // save volume after a delay to avoid throttle limit 163 | // https://developer.chrome.com/docs/extensions/reference/storage/#storage-and-throttling-limits 164 | let saveTimeout; 165 | 166 | function saveVolume(newVolume) { 167 | if (saveTimeout) clearTimeout(saveTimeout); 168 | 169 | saveTimeout = setTimeout(() => { 170 | browserApi.storage.sync.set({ savedVolume: newVolume }); 171 | saveTimeout = undefined; 172 | }, 500); 173 | } 174 | 175 | function simpleAreEqual(obj1, obj2) { 176 | if (typeof obj1 !== typeof obj2) return false; 177 | 178 | switch (typeof obj1) { 179 | case 'object': 180 | for (const p of Object.keys(obj1)) { 181 | if (!this.simpleAreEqual(obj1[p], obj2[p])) return false; 182 | } 183 | break; 184 | case 'string': 185 | case 'number': 186 | case 'boolean': 187 | if (obj1 !== obj2) return false; 188 | break; 189 | default: 190 | throw new Error( 191 | `.simpleAreEqual() encountered an unknown type: {${typeof obj1}} pos1: ${obj1}, pos2: ${obj2}`, 192 | ); 193 | } 194 | 195 | return true; 196 | } 197 | -------------------------------------------------------------------------------- /unpacked/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Youtube Volume Scroll", 3 | "short_name": "YoutubeVolumeScroll", 4 | "version": "3.2.2", 5 | "description": "Enable scrolling mousewheel to control volume on Youtube and Youtube Music", 6 | "permissions": ["storage"], 7 | "content_scripts": [ 8 | { 9 | "matches": [ 10 | "https://www.youtube.com/*", 11 | "https://music.youtube.com/*", 12 | "https://www.youtube-nocookie.com/embed/*" 13 | ], 14 | "all_frames": true, 15 | "js": ["index.js"], 16 | "css": ["style.css"], 17 | "run_at": "document_end" 18 | } 19 | ], 20 | "web_accessible_resources": [ 21 | { 22 | "resources": ["pageAccess.js"], 23 | "matches": [ 24 | "https://www.youtube.com/*", 25 | "https://music.youtube.com/*", 26 | "https://www.youtube-nocookie.com/*" 27 | ] 28 | } 29 | ], 30 | "icons": { 31 | "16": "icons/icon16x16.png", 32 | "32": "icons/icon32x32.png", 33 | "48": "icons/BigIcon48x48.png", 34 | "128": "icons/BigIcon128x128.png", 35 | "512": "icons/BigIcon512x512.png" 36 | }, 37 | "action": { 38 | "default_popup": "popup/popup.html" 39 | }, 40 | "options_ui": { 41 | "page": "popup/popup.html", 42 | "open_in_tab": false 43 | }, 44 | "manifest_version": 3 45 | } 46 | -------------------------------------------------------------------------------- /unpacked/pageAccess.js: -------------------------------------------------------------------------------- 1 | // set last active time to now every 15min (blocks "are you there?" popup) 2 | setInterval(() => (window._lact = Date.now()), 9e5); 3 | 4 | // biome-ignore lint/complexity/noStaticOnlyClass: this is a class to hide private variables and avoid page pollution 5 | class ytvs { 6 | static #$ = document.querySelector.bind(document); 7 | static get $() { 8 | return this.#$; 9 | } 10 | 11 | static #isMusic = window.location.href.includes('music.youtube'); 12 | static get isMusic() { 13 | return this.#isMusic; 14 | } 15 | 16 | static #oneMonth = 2592e6; 17 | static get oneMonth() { 18 | return this.#oneMonth; 19 | } 20 | 21 | static #hudTypes = { 22 | custom: 0, 23 | native: 1, 24 | none: 2, 25 | }; 26 | static #reversedHudTypes = Object.fromEntries( 27 | Object.entries(this.#hudTypes).map(([key, value]) => [value, key]), 28 | ); 29 | 30 | static get hudTypes() { 31 | return this.#hudTypes; 32 | } 33 | 34 | static #activationModifiers = { 35 | none: 0, 36 | shift: 1, 37 | rightClick: 2, 38 | }; 39 | static get activationModifiers() { 40 | return this.#activationModifiers; 41 | } 42 | 43 | static #isRightMouseDown = false; 44 | static get isRightMouseDown() { 45 | return this.#isRightMouseDown; 46 | } 47 | 48 | static #isLoaded = false; 49 | static get isLoaded() { 50 | return this.#isLoaded; 51 | } 52 | static set isLoaded(value) { 53 | if (typeof value !== 'boolean') { 54 | console.error('ytvs.isLoaded expects a boolean'); 55 | return; 56 | } 57 | this.#isLoaded = value; 58 | } 59 | 60 | static #activeInstances = []; 61 | static get activeInstances() { 62 | return this.#activeInstances; 63 | } 64 | static addInstance(instance) { 65 | if (!(instance instanceof YoutubeVolumeScroll)) { 66 | console.error( 67 | 'ytvs.addInstance() expects a YoutubeVolumeScroll object', 68 | ); 69 | return; 70 | } 71 | this.#activeInstances.push(instance); 72 | } 73 | 74 | static #config = { 75 | steps: 1, 76 | hud: this.hudTypes.custom, 77 | hudSize: '50px', 78 | hudColor: '#eee', 79 | hudPositionMode: false, 80 | activationModifier: this.activationModifiers.none, 81 | hudPosition: { 82 | youtube: { 83 | top: '5px', 84 | bottom: 'unset', 85 | left: 'unset', 86 | right: '5px', 87 | }, 88 | music: { 89 | top: '10px', 90 | bottom: 'unset', 91 | left: 'unset', 92 | right: '6%', 93 | }, 94 | shorts: { 95 | top: '0', 96 | bottom: 'unset', 97 | left: 'unset', 98 | right: '35px', 99 | }, 100 | }, 101 | }; 102 | 103 | static get steps() { 104 | return this.#config.steps ?? 1; 105 | } 106 | 107 | static get activationModifier() { 108 | return this.#config.activationModifier ?? this.activationModifiers.none; 109 | } 110 | 111 | static get hud() { 112 | return this.#config.hud ?? this.hudTypes.custom; 113 | } 114 | 115 | static get hudPositionMode() { 116 | return this.#config.hudPositionMode; 117 | } 118 | 119 | static get hudSize() { 120 | return this.#config.hudSize ?? '50px'; 121 | } 122 | 123 | static get hudColor() { 124 | return this.#config.hudColor ?? '#eee'; 125 | } 126 | 127 | static get hudPosition() { 128 | return this.#config.hudPosition; 129 | } 130 | static set hudPosition(value) { 131 | const [type, hudPosition] = Object.entries(value)[0]; 132 | if (!this.hudPosition[type]) { 133 | console.error(`ytvs.hudPosition.${type} is not a valid type`); 134 | return; 135 | } 136 | if (typeof hudPosition !== 'object') { 137 | console.error(`ytvs.hudPosition.${type} expects an object`); 138 | return; 139 | } 140 | 141 | this.#config.hudPosition[type] = hudPosition; 142 | this.#save(); 143 | } 144 | 145 | static #saveTimeout = undefined; 146 | static #save() { 147 | if (this.#saveTimeout) clearTimeout(this.#saveTimeout); 148 | this.#saveTimeout = setTimeout(() => { 149 | window.postMessage( 150 | { 151 | type: 'YoutubeVolumeScroll-config-save', 152 | config: this.#config, 153 | }, 154 | window.location.origin, 155 | ); 156 | }, 500); 157 | } 158 | 159 | static getCookie(n) { 160 | return document.cookie.split('; ').find(row => row.startsWith(`${n}=`)); 161 | } 162 | 163 | static #setupMouseObserver() { 164 | let changedVolumeWhileRightMouseDown = false; 165 | 166 | document.addEventListener('mousedown', e => { 167 | if (e.button === 2) { 168 | this.#isRightMouseDown = true; 169 | } 170 | }); 171 | 172 | document.addEventListener('mouseup', e => { 173 | if (e.button === 2) { 174 | this.#isRightMouseDown = false; 175 | if (changedVolumeWhileRightMouseDown) { 176 | changedVolumeWhileRightMouseDown = false; 177 | setTimeout( 178 | () => (this.$('body').oncontextmenu = undefined), 179 | ); 180 | if (!this.isMusic) { 181 | // send left click event to movie player 182 | setTimeout(() => { 183 | this.$('ytd-app')?.dispatchEvent( 184 | new MouseEvent('click', { 185 | view: window, 186 | bubbles: true, 187 | cancelable: true, 188 | }), 189 | ); 190 | }); 191 | } 192 | return false; 193 | } 194 | } 195 | }); 196 | 197 | window.addEventListener('message', e => { 198 | if (e.origin !== window.location.origin) return; 199 | if (e.data.type === 'YoutubeVolumeScroll-volume') { 200 | if (this.#isRightMouseDown) { 201 | changedVolumeWhileRightMouseDown = true; 202 | this.$('body').oncontextmenu = () => false; 203 | } 204 | } 205 | }); 206 | } 207 | 208 | static #handleDataChange(config) { 209 | this.#config.steps = config.steps; 210 | if (this.hud !== config.hud) { 211 | this.#config.hud = config.hud; 212 | if (this.#initDone) { 213 | document.body.setAttribute( 214 | 'ytvs_type', 215 | this.#reversedHudTypes[ytvs.hud], 216 | ); 217 | this.#activeInstances.forEach(obj => obj.showVolume()); 218 | } 219 | } 220 | 221 | if (config.activationModifier !== this.activationModifier) { 222 | this.#config.activationModifier = config.activationModifier; 223 | } 224 | 225 | if (config.hudPositionMode !== this.hudPositionMode) { 226 | this.#config.hudPositionMode = config.hudPositionMode; 227 | if (this.hud === this.hudTypes.custom) { 228 | this.#activeInstances.forEach(obj => 229 | obj.updateHudPositionMode(), 230 | ); 231 | } 232 | } 233 | 234 | if (config.hudSize && config.hudSize !== this.hudSize) { 235 | this.#config.hudSize = config.hudSize; 236 | this.#activeInstances.forEach(obj => obj.updateHudSize()); 237 | } 238 | 239 | if (config.hudColor && config.hudColor !== this.hudColor) { 240 | this.#config.hudColor = config.hudColor; 241 | this.#activeInstances.forEach(obj => obj.updateHudColor()); 242 | } 243 | 244 | if ( 245 | config.hudPosition && 246 | !this.simpleAreEqual(config.hudPosition, this.hudPosition) 247 | ) { 248 | this.#config.hudPosition = config.hudPosition; 249 | this.activeInstances.forEach(obj => obj.updateHudPosition()); 250 | } 251 | } 252 | 253 | static #initDone = false; 254 | static init() { 255 | window.addEventListener( 256 | 'message', 257 | e => { 258 | if (e.origin !== window.location.origin) return; 259 | if ( 260 | e.data.type === 'YoutubeVolumeScroll-config-change' && 261 | typeof e.data.config === 'object' 262 | ) { 263 | this.#handleDataChange(e.data.config); 264 | this.#initDone ||= true; 265 | } 266 | }, 267 | false, 268 | ); 269 | 270 | this.#setupMouseObserver(); 271 | } 272 | 273 | static simpleAreEqual(obj1, obj2) { 274 | if (typeof obj1 !== typeof obj2) return false; 275 | 276 | switch (typeof obj1) { 277 | case 'object': 278 | for (const p of Object.keys(obj1)) { 279 | if (!this.simpleAreEqual(obj1[p], obj2[p])) return false; 280 | } 281 | break; 282 | case 'string': 283 | case 'number': 284 | case 'boolean': 285 | if (obj1 !== obj2) return false; 286 | break; 287 | default: 288 | throw new Error( 289 | `ytvs.simpleAreEqual() encountered an unknown type: {${typeof obj1}} pos1: ${obj1}, pos2: ${obj2}`, 290 | ); 291 | } 292 | 293 | return true; 294 | } 295 | } 296 | 297 | class YoutubeVolumeScroll { 298 | static types = { 299 | youtube: 'youtube', 300 | music: 'music', 301 | shorts: 'shorts', 302 | }; 303 | type = undefined; 304 | 305 | isShorts = () => this.type === this.constructor.types.shorts; 306 | 307 | volume = undefined; 308 | hudFadeTimeout = undefined; 309 | 310 | api = undefined; 311 | scrollTarget = undefined; 312 | hudContainer = undefined; 313 | hudAfter = undefined; 314 | 315 | static run() { 316 | if (ytvs.isLoaded) return; 317 | if (ytvs.isMusic) { 318 | this.newMusic(); 319 | } else { 320 | this.newYoutube(); 321 | } 322 | } 323 | 324 | static newYoutube() { 325 | return new this({ 326 | type: this.types.youtube, 327 | api: ytvs.$('#movie_player'), 328 | scrollTarget: '#movie_player', 329 | hudContainer: '#movie_player', 330 | hudAfter: '#movie_player .html5-video-container', 331 | customFunction: () => { 332 | ytvs.$('.ytp-cards-button-icon').style.display = 'none'; 333 | ytvs.$('.ytp-chrome-top-buttons').style.display = 'none'; 334 | 335 | // hide the real native volume hud when its in volume mode - aka text ends with % 336 | const bezelText = ytvs.$('.ytp-bezel-text'); 337 | const parent = bezelText.parentElement.parentElement; 338 | const observer = new MutationObserver(() => { 339 | parent.style.opacity = bezelText.textContent.endsWith('%') 340 | ? 0 341 | : 1; 342 | }); 343 | observer.observe(bezelText, { childList: true }); 344 | }, 345 | }); 346 | } 347 | 348 | static newYoutubeShorts() { 349 | return new this({ 350 | type: this.types.shorts, 351 | api: ytvs.$('#shorts-player'), 352 | scrollTarget: 'ytd-player.ytd-shorts', 353 | hudContainer: 'ytd-player.ytd-shorts', 354 | hudAfter: 'ytd-player.ytd-shorts div', 355 | }); 356 | } 357 | 358 | static newMusic() { 359 | return new this({ 360 | type: this.types.music, 361 | api: ytvs.$('#movie_player'), 362 | scrollTarget: '#main-panel', 363 | hudContainer: 'ytmusic-player', 364 | hudAfter: '#song-video', 365 | }); 366 | } 367 | 368 | constructor({ 369 | type, 370 | api, 371 | scrollTarget, 372 | hudContainer, 373 | hudAfter, 374 | customFunction, 375 | }) { 376 | this.type = type; 377 | this.api = api; 378 | // Saves the volume locally so that hudOnVolume doesn't show hud if volume wasn't actually changed 379 | // (e.g. the sponsorblock skip function triggers a volume change without actually changing the volume) 380 | this.volume = this.api.getVolume(); 381 | if (!(this.isShorts() || ytvs.isLoaded)) { 382 | this.#setupIncognito(); 383 | } 384 | 385 | this.scrollTarget = scrollTarget; 386 | this.hudContainer = hudContainer; 387 | this.hudAfter = hudAfter; 388 | 389 | this.setupOnWheel(); 390 | customFunction?.(this); 391 | 392 | this.setupHudOnVolume(); 393 | 394 | ytvs.addInstance(this); 395 | 396 | if (!this.isShorts()) { 397 | ytvs.isLoaded = true; 398 | } 399 | } 400 | 401 | printIncognitoError() { 402 | console.error( 403 | 'Youtube-Volume-Scroll: Could not save volume in incognito mode', 404 | ); 405 | } 406 | 407 | #setupIncognito() { 408 | let volumeCookie; 409 | try { 410 | volumeCookie = JSON.parse( 411 | window.localStorage.getItem('Youtube-Volume-Scroll'), 412 | ); 413 | } catch { 414 | this.printIncognitoError(); 415 | } 416 | if (volumeCookie) { 417 | if ( 418 | volumeCookie.incognito === true && 419 | volumeCookie.savedVolume !== this.api.getVolume() 420 | ) { 421 | this.api.setVolume(volumeCookie.savedVolume); 422 | this.saveNativeVolume(volumeCookie.savedVolume); 423 | } 424 | } 425 | } 426 | 427 | setupOnWheel() { 428 | ytvs.$(this.scrollTarget).onwheel = event => { 429 | if ( 430 | ytvs.activationModifier === ytvs.activationModifiers.shift && 431 | !event.shiftKey 432 | ) 433 | return; 434 | if ( 435 | ytvs.activationModifier === 436 | ytvs.activationModifiers.rightClick && 437 | !ytvs.isRightMouseDown 438 | ) 439 | return; 440 | // check if scrolltarget is inside the settings menu 441 | if (!ytvs.isMusic && event.target.matches('.ytp-settings-menu *')) { 442 | const menu = ytvs.$('.ytp-settings-menu>.ytp-panel'); 443 | // if the menu has a scrollbar, don't change the volume 444 | if (menu.scrollHeight > menu.clientHeight) return; 445 | } 446 | const multiplier = 447 | event.shiftKey && 448 | ytvs.activationModifier !== ytvs.activationModifiers.shift 449 | ? 2 450 | : 1; 451 | // Event.deltaY < 0 means wheel-up (increase), > 0 means wheel-down (decrease) 452 | if (event.deltaY !== 0) 453 | this.changeVolume(event.deltaY < 0, multiplier); 454 | // Event.deltaX < 0 means wheel-left (decrease), > 0 means wheel-right (increase) 455 | if (event.deltaX !== 0) 456 | this.changeVolume(event.deltaX > 0, multiplier); 457 | return false; 458 | }; 459 | } 460 | 461 | #hudCheckTimeout = undefined; 462 | changeVolume(toIncrease, multiplier) { 463 | const newVolume = Math.round( 464 | toIncrease 465 | ? Math.min(this.api.getVolume() + ytvs.steps * multiplier, 100) 466 | : Math.max(this.api.getVolume() - ytvs.steps * multiplier, 0), 467 | ); 468 | 469 | // Have to manually mute/unmute on youtube.com 470 | if (!ytvs.isMusic && newVolume > 0 && this.api.isMuted()) { 471 | this.api.unMute(); 472 | } 473 | 474 | this.api.setVolume(newVolume); 475 | 476 | if (this.isShorts()) return; 477 | 478 | this.saveNativeVolume(newVolume); 479 | 480 | window.postMessage( 481 | { type: 'YoutubeVolumeScroll-volume', newVolume }, 482 | window.location.origin, 483 | ); 484 | 485 | if (ytvs.hud !== ytvs.hudTypes.none) { 486 | this.#hudCheckTimeout ??= setTimeout(() => { 487 | if (this.getVolumeHud()?.style.opacity !== '1') { 488 | console.debug( 489 | 'YTVS: video onvolumechange was not triggered, setting it again', 490 | ); 491 | this.showVolume(); 492 | this.setupHudOnVolume(); 493 | } 494 | setTimeout(() => { 495 | this.#hudCheckTimeout = undefined; 496 | }, 5000); 497 | }, 50); 498 | } 499 | } 500 | 501 | saveNativeVolume(volume) { 502 | if (!ytvs.isMusic) this.saveVolumeToStorage(volume); 503 | 504 | const pref = ytvs 505 | .getCookie('PREF') 506 | ?.replace(/volume=(\d+)/, `volume=${volume}`); 507 | if (pref) { 508 | document.cookie = `${pref};domain=.youtube.com;max-age=${ 509 | ytvs.oneMonth / 1000 // convert to seconds 510 | }`; 511 | } 512 | } 513 | 514 | saveVolumeToStorage(volume) { 515 | const data = JSON.stringify({ 516 | volume, 517 | muted: volume <= 0, 518 | }); 519 | const timeNow = Date.now(); 520 | 521 | try { 522 | window.localStorage.setItem( 523 | 'yt-player-volume', 524 | JSON.stringify({ 525 | data: data, 526 | expiration: timeNow + ytvs.oneMonth, 527 | creation: timeNow, 528 | }), 529 | ); 530 | 531 | window.sessionStorage.setItem( 532 | 'yt-player-volume', 533 | JSON.stringify({ 534 | data: data, 535 | creation: timeNow, 536 | }), 537 | ); 538 | } catch { 539 | this.printIncognitoError(); 540 | } 541 | } 542 | 543 | cachedVolumeHud = undefined; 544 | getVolumeHud() { 545 | const selector = `${this.hudContainer} ${ 546 | ytvs.hud === ytvs.hudTypes.native 547 | ? '.volume-hud-native' 548 | : '.volume-hud-custom' 549 | }`; 550 | 551 | let volumeHud = this.cachedVolumeHud?.matches(selector) 552 | ? this.cachedVolumeHud 553 | : ytvs.$(selector); 554 | 555 | if (!volumeHud) { 556 | this.injectVolumeHud(); 557 | volumeHud = ytvs.$(selector); 558 | 559 | if (!volumeHud) { 560 | console.error( 561 | 'Cannot Create Youtube-Volume-Scroll HUD', 562 | `$('${selector}')`, 563 | ); 564 | return undefined; 565 | } 566 | } 567 | 568 | this.cachedVolumeHud = volumeHud; 569 | return volumeHud; 570 | } 571 | 572 | injectVolumeHud() { 573 | const createNative = () => { 574 | const volumeHudNativeWrapper = document.createElement('div'); 575 | volumeHudNativeWrapper.style.opacity = 0; 576 | volumeHudNativeWrapper.classList.add( 577 | 'ytp-bezel-text-wrapper', 578 | 'volume-hud-native-wrapper', 579 | ); 580 | const volumeHudNative = document.createElement('div'); 581 | volumeHudNative.classList.add( 582 | 'ytp-bezel-text', 583 | 'volume-hud-native', 584 | ); 585 | volumeHudNativeWrapper.appendChild(volumeHudNative); 586 | 587 | ytvs.$(this.hudAfter).insertAdjacentElement( 588 | 'afterend', 589 | volumeHudNativeWrapper, 590 | ); 591 | }; 592 | 593 | const createCustom = () => { 594 | const volumeHud = document.createElement('span'); 595 | volumeHud.classList.add('volume-hud', 'volume-hud-custom'); 596 | if (ytvs.isMusic) volumeHud.classList.add('music'); 597 | 598 | ytvs.$(this.hudAfter).insertAdjacentElement('afterend', volumeHud); 599 | 600 | return volumeHud; 601 | }; 602 | 603 | switch (ytvs.hud) { 604 | case ytvs.hudTypes.none: 605 | break; 606 | case ytvs.hudTypes.native: 607 | if (!ytvs.$(`${this.hudContainer} .volume-hud-native`)) { 608 | createNative(); 609 | } 610 | break; 611 | // biome-ignore lint/complexity/noUselessSwitchCase: Just here for clarity 612 | case ytvs.hudTypes.custom: 613 | default: 614 | if (!ytvs.$(`${this.hudContainer} .volume-hud-custom`)) { 615 | const volumeHud = createCustom(); 616 | this.updateHudSize(volumeHud); 617 | this.updateHudColor(volumeHud); 618 | this.updateHudPositionMode(volumeHud); 619 | this.updateHudPosition(volumeHud); 620 | } 621 | } 622 | } 623 | 624 | setupHudOnVolume() { 625 | const video = ytvs.$(`${this.hudContainer} video`); 626 | setTimeout(() => { 627 | video.addEventListener('volumechange', () => { 628 | if ( 629 | ytvs.hud !== ytvs.hudTypes.none && 630 | this.volume !== this.api.getVolume() 631 | ) { 632 | this.showVolume(); 633 | } 634 | this.volume = this.api.getVolume(); 635 | }); 636 | }); 637 | } 638 | 639 | showVolume(volume = Math.round(this.api.getVolume())) { 640 | const volumeHud = this.getVolumeHud(); 641 | if (!volumeHud) return; 642 | 643 | const hudTimes = { 644 | [ytvs.hudTypes.none]: 0, 645 | [ytvs.hudTypes.native]: 1000, 646 | [ytvs.hudTypes.custom]: 1500, 647 | }; 648 | 649 | const setOpacity = opacity => { 650 | if ( 651 | ytvs.hudPositionMode && 652 | opacity === 0 && 653 | ytvs.hud === ytvs.hudTypes.custom 654 | ) 655 | return; 656 | volumeHud.style.opacity = opacity; 657 | if (ytvs.hud === ytvs.hudTypes.native) { 658 | volumeHud.parentElement.style.opacity = opacity; 659 | } 660 | }; 661 | 662 | volumeHud.textContent = `${volume}%`; 663 | setOpacity(1); 664 | 665 | if (this.hudFadeTimeout) clearTimeout(this.hudFadeTimeout); 666 | this.hudFadeTimeout = setTimeout(() => { 667 | setOpacity(0); 668 | this.hudFadeTimeout = undefined; 669 | }, hudTimes[ytvs.hud]); 670 | } 671 | 672 | getCustomHud() { 673 | return ytvs.$(`${this.hudContainer} .volume-hud-custom`); 674 | } 675 | 676 | updateHudSize(volumeHud = this.getCustomHud()) { 677 | if (!volumeHud) return; 678 | 679 | volumeHud.style.fontSize = ytvs.hudSize; 680 | } 681 | 682 | updateHudColor(volumeHud = this.getCustomHud()) { 683 | if (!volumeHud) return; 684 | 685 | volumeHud.style.color = ytvs.hudColor; 686 | } 687 | 688 | updateHudPosition(volumeHud = this.getCustomHud()) { 689 | if (!volumeHud) return; 690 | 691 | const newHudPosition = ytvs.hudPosition[this.type]; 692 | 693 | Object.keys(newHudPosition).forEach( 694 | key => (volumeHud.style[key] = newHudPosition[key]), 695 | ); 696 | } 697 | 698 | hudPositionMode = false; 699 | updateHudPositionMode(volumeHud) { 700 | if (ytvs.hudPositionMode === this.hudPositionMode) return; 701 | 702 | const dragTarget = ytvs.$(this.hudContainer); 703 | 704 | let draggedElement = volumeHud ?? this.getCustomHud(); 705 | if (!draggedElement && ytvs.hudTypes.custom === ytvs.hud) { 706 | this.injectVolumeHud(); 707 | draggedElement = this.getCustomHud(); 708 | } 709 | if (!draggedElement) return; 710 | 711 | if (ytvs.hudPositionMode) { 712 | this.#enablePositionMode(draggedElement, dragTarget); 713 | } else { 714 | this.#disablePositionMode(draggedElement); 715 | } 716 | 717 | this.hudPositionMode = ytvs.hudPositionMode; 718 | } 719 | 720 | #enablePositionMode(draggedElement, dragTarget) { 721 | let dragOffsetX; 722 | let dragOffsetY; 723 | 724 | const setShortsControlsPointerEvents = value => { 725 | const shortsControls = [ 726 | ytvs.$('.player-controls.ytd-reel-video-renderer'), 727 | ]; 728 | shortsControls.forEach(c => { 729 | if (c) c.style.pointerEvents = value; 730 | }); 731 | }; 732 | 733 | draggedElement.draggable = true; 734 | draggedElement.style.pointerEvents = 'auto'; 735 | 736 | draggedElement.style.opacity = 1; 737 | draggedElement.textContent ||= `${Math.round(this.api.getVolume())}%`; 738 | 739 | draggedElement.ondragstart = ev => { 740 | const rect = ev.target.getBoundingClientRect(); 741 | 742 | dragOffsetX = ev.clientX - rect.x; 743 | dragOffsetY = ev.clientY - rect.y; 744 | 745 | setShortsControlsPointerEvents('none'); 746 | }; 747 | 748 | dragTarget.ondrop = ev => { 749 | ev.preventDefault(); 750 | 751 | const dragTargetRect = dragTarget.getBoundingClientRect(); 752 | 753 | draggedElement.style.hudPosition = 'absolute'; 754 | 755 | const newLeft = ev.clientX - dragTargetRect.x - dragOffsetX; 756 | const newTop = ev.clientY - dragTargetRect.y - dragOffsetY; 757 | 758 | const padding = 759 | Number.parseFloat( 760 | window.getComputedStyle(draggedElement, undefined).padding, 761 | ) - 2; 762 | 763 | const controlsHeight = 764 | ytvs.$('.ytp-chrome-bottom')?.clientHeight || 0; 765 | 766 | const pxToPercent_width = x => (x / dragTargetRect.width) * 100; 767 | const pxToPercent_height = y => (y / dragTargetRect.height) * 100; 768 | 769 | const ogStyle = draggedElement.style; 770 | const hudPosition = { 771 | left: ogStyle.left, 772 | right: ogStyle.right, 773 | top: ogStyle.top, 774 | bottom: ogStyle.bottom, 775 | }; 776 | 777 | if (newLeft < dragTargetRect.width / 2) { 778 | const x = Math.max(newLeft, 0 - padding); 779 | hudPosition.left = `${pxToPercent_width(x)}%`; 780 | hudPosition.right = 'unset'; 781 | } else { 782 | const x = Math.min( 783 | newLeft + draggedElement.clientWidth, 784 | dragTargetRect.width + padding, 785 | ); 786 | hudPosition.right = `${100 - pxToPercent_width(x)}%`; 787 | hudPosition.left = 'unset'; 788 | } 789 | 790 | if (newTop < dragTargetRect.height / 2) { 791 | const y = Math.max(newTop, 0 - padding); 792 | hudPosition.top = `${pxToPercent_height(y)}%`; 793 | hudPosition.bottom = 'unset'; 794 | } else { 795 | const y = Math.min( 796 | newTop + draggedElement.clientHeight, 797 | dragTargetRect.height + padding - controlsHeight, 798 | ); 799 | hudPosition.bottom = `${100 - pxToPercent_height(y)}%`; 800 | hudPosition.top = 'unset'; 801 | } 802 | 803 | Object.keys(hudPosition).forEach( 804 | pos => (draggedElement.style[pos] = hudPosition[pos]), 805 | ); 806 | 807 | const hudPositionToSend = {}; 808 | hudPositionToSend[this.type] = hudPosition; 809 | ytvs.hudPosition = hudPositionToSend; 810 | 811 | setShortsControlsPointerEvents('auto'); 812 | }; 813 | 814 | dragTarget.ondragover = ev => { 815 | ev.preventDefault(); 816 | ev.dataTransfer.dropEffect = 'move'; 817 | }; 818 | } 819 | 820 | #disablePositionMode(draggedElement) { 821 | draggedElement.draggable = false; 822 | draggedElement.style.pointerEvents = 'none'; 823 | setTimeout(() => (draggedElement.style.opacity = 0), 50); 824 | } 825 | } 826 | 827 | ytvs.init(); 828 | 829 | if (ytvs.$('#movie_player:not(.unstarted-mode) video')) { 830 | YoutubeVolumeScroll.run(); 831 | } else { 832 | const videoObserver = new MutationObserver(() => { 833 | if (ytvs.$('#movie_player:not(.unstarted-mode) video')) { 834 | videoObserver.disconnect(); 835 | YoutubeVolumeScroll.run(); 836 | } 837 | }); 838 | 839 | const moviePlayer = ytvs.$('#movie_player'); 840 | if (moviePlayer) { 841 | videoObserver.observe(moviePlayer, { attributes: true }); 842 | } else { 843 | const pageManager = ytvs.$('ytd-page-manager'); 844 | if (pageManager) { 845 | videoObserver.observe(pageManager, { 846 | childList: true, 847 | subtree: true, 848 | }); 849 | } else { 850 | new MutationObserver((_, observer) => { 851 | if (ytvs.$('ytd-page-manager')) { 852 | observer.disconnect(); 853 | videoObserver.observe(ytvs.$('ytd-page-manager'), { 854 | childList: true, 855 | subtree: true, 856 | }); 857 | } 858 | }).observe(document.documentElement, { 859 | childList: true, 860 | subtree: true, 861 | }); 862 | } 863 | } 864 | } 865 | 866 | if (!ytvs.isMusic) { 867 | if (ytvs.$('ytd-player.ytd-shorts video')) { 868 | YoutubeVolumeScroll.newYoutubeShorts(); 869 | } else { 870 | const shortsObserver = new MutationObserver(m => { 871 | if (m[0].addedNodes[0].tagName === 'YTD-SHORTS') { 872 | shortsObserver.disconnect(); 873 | const shortsContainer = m[0].addedNodes[0]; 874 | new MutationObserver((_, observer) => { 875 | if ( 876 | shortsContainer.querySelector( 877 | 'ytd-player.ytd-shorts video', 878 | ) 879 | ) { 880 | observer.disconnect(); 881 | YoutubeVolumeScroll.newYoutubeShorts(); 882 | } 883 | }).observe(shortsContainer, { 884 | childList: true, 885 | subtree: true, 886 | }); 887 | } 888 | }); 889 | const pageManager = ytvs.$('ytd-page-manager'); 890 | if (pageManager) { 891 | shortsObserver.observe(pageManager, { childList: true }); 892 | } else { 893 | new MutationObserver((_, observer) => { 894 | if (ytvs.$('ytd-page-manager')) { 895 | observer.disconnect(); 896 | shortsObserver.observe(ytvs.$('ytd-page-manager'), { 897 | childList: true, 898 | }); 899 | } 900 | }).observe(document.documentElement, { 901 | childList: true, 902 | subtree: true, 903 | }); 904 | } 905 | } 906 | } 907 | -------------------------------------------------------------------------------- /unpacked/popup/elements/slider.js: -------------------------------------------------------------------------------- 1 | customElements.define( 2 | 'custom-slider', 3 | class Slider extends HTMLElement { 4 | input; 5 | 6 | get min() { 7 | return this.getAttribute('min') || '0'; 8 | } 9 | 10 | set min(value) { 11 | this.setAttribute('min', value); 12 | } 13 | 14 | get max() { 15 | return this.getAttribute('max') || '100'; 16 | } 17 | 18 | set max(value) { 19 | this.setAttribute('max', value); 20 | } 21 | 22 | get step() { 23 | return this.getAttribute('step') || '1'; 24 | } 25 | 26 | set step(value) { 27 | this.setAttribute('step', value); 28 | } 29 | 30 | set value(value) { 31 | this.setAttribute('value', value); 32 | this.input.value = value; 33 | this.style.setProperty('--value', value); 34 | this.style.setProperty('--text-value', `"${value}"`); 35 | 36 | this.dispatchEvent(new Event('input')); 37 | } 38 | 39 | get value() { 40 | return this.getAttribute('value') || '1'; 41 | } 42 | 43 | // biome-ignore lint/complexity/noUselessConstructor: for clarity 44 | constructor() { 45 | super(); 46 | } 47 | 48 | connectedCallback() { 49 | this.classList.add('range-slider'); 50 | 51 | // Transform attributes 52 | this.style.setProperty('--min', this.min); 53 | this.style.setProperty('--max', this.max); 54 | this.style.setProperty('--step', this.step); 55 | this.style.setProperty('--value', this.value); 56 | 57 | // Create elements 58 | this.input = this.#createInput(); 59 | 60 | const output = document.createElement('output'); 61 | 62 | const progress = document.createElement('div'); 63 | progress.setAttribute('class', 'range-slider__progress'); 64 | 65 | this.append(this.input, output, progress); 66 | } 67 | 68 | #createInput() { 69 | const input = document.createElement('input'); 70 | input.setAttribute('type', 'range'); 71 | input.setAttribute('min', this.min); 72 | input.setAttribute('max', this.max); 73 | input.setAttribute('step', this.step); 74 | input.value = this.value; 75 | 76 | input.addEventListener('input', () => { 77 | this.value = input.value; 78 | }); 79 | 80 | const inc = n => 81 | (input.value = 82 | parseFloat(input.value) + parseFloat(this.step) * n); 83 | 84 | input.addEventListener('wheel', e => { 85 | // Event.deltaY < 0 means wheel-up (increase), > 0 means wheel-down (decrease) 86 | if (e.deltaY !== 0) inc(e.deltaY < 0 ? 1 : -1); 87 | // Event.deltaX < 0 means wheel-left (decrease), > 0 means wheel-right (increase) 88 | if (e.deltaX !== 0) inc(e.deltaX < 0 ? -1 : 1); 89 | 90 | this.value = input.value; 91 | }); 92 | 93 | return input; 94 | } 95 | }, 96 | ); 97 | -------------------------------------------------------------------------------- /unpacked/popup/elements/tooltip.js: -------------------------------------------------------------------------------- 1 | customElements.define( 2 | 'tooltip-icon', 3 | class Tooltip extends HTMLElement { 4 | // biome-ignore lint/complexity/noUselessConstructor: for clarity 5 | constructor() { 6 | super(); 7 | } 8 | 9 | connectedCallback() { 10 | // Transform attributes 11 | if (this.hasAttribute('label')) 12 | this.setAttribute('aria-label', this.getAttribute('label')); 13 | 14 | if (this.hasAttribute('size')) 15 | this.setAttribute( 16 | 'data-cooltipz-size', 17 | this.getAttribute('size'), 18 | ); 19 | 20 | if (this.hasAttribute('position')) 21 | this.setAttribute( 22 | 'data-cooltipz-dir', 23 | this.getAttribute('position'), 24 | ); 25 | 26 | // Create elements 27 | const spacing = document.createElement('div'); 28 | spacing.setAttribute('class', 'tooltip-spacing'); 29 | 30 | const bg1 = document.createElement('div'); 31 | bg1.setAttribute('class', 'tooltip-bg1'); 32 | 33 | const bg2 = document.createElement('div'); 34 | bg2.setAttribute('class', 'tooltip-bg2'); 35 | 36 | const letter = document.createElement('div'); 37 | letter.setAttribute('class', 'tooltip-text'); 38 | letter.textContent = '?'; 39 | 40 | spacing.append(bg1, bg2, letter); 41 | 42 | this.appendChild(spacing); 43 | } 44 | }, 45 | ); 46 | -------------------------------------------------------------------------------- /unpacked/popup/popup.css: -------------------------------------------------------------------------------- 1 | @media (prefers-color-scheme: dark) { 2 | body { 3 | background-color: #0d1117; 4 | color: #f5f5f5; 5 | } 6 | h2 { 7 | color: #d5003c; 8 | } 9 | .range-slider__progress, 10 | .radio-container label span:hover, 11 | .radio-container label input:checked + span { 12 | background-color: #2d0e12 !important; 13 | } 14 | .radio-container label span::before { 15 | background-color: unset !important; 16 | box-shadow: inset 0 0 0 0.125em #ae181d !important; 17 | } 18 | .radio-container label input:checked + span::before { 19 | box-shadow: inset 0 0 0 0.4375em #bd003f !important; 20 | } 21 | .switch .slider { 22 | background-color: #2d0e12 !important; 23 | } 24 | .switch .slider::before { 25 | background-color: #bd003f !important; 26 | box-shadow: 0 0 3px rgb(0, 0, 0), 0 0 3px rgb(0, 0, 0) inset, 0 0 0 99px #d5003c inset !important; 27 | } 28 | input:checked + .slider { 29 | background-color: #ae181d !important; 30 | } 31 | tooltip-icon .tooltip-spacing .tooltip-bg1 { 32 | background-color: #000 !important; 33 | } 34 | tooltip-icon .tooltip-spacing .tooltip-bg2 { 35 | background-color: #626262 !important; 36 | } 37 | tooltip-icon .tooltip-spacing .tooltip-text { 38 | color: #000 !important; 39 | } 40 | } 41 | tooltip-icon { 42 | width: 0; 43 | font-size: 16px; 44 | font-weight: normal; 45 | color: black; 46 | margin-top: 2px; 47 | position: relative; 48 | } 49 | tooltip-icon:hover { 50 | cursor: help; 51 | } 52 | tooltip-icon .tooltip-spacing { 53 | height: 20px; 54 | margin-left: 6px; 55 | position: relative; 56 | width: 20px; 57 | } 58 | tooltip-icon .tooltip-spacing .tooltip-bg1 { 59 | background-color: #555; 60 | border-radius: 10px; 61 | content: " "; 62 | display: flex; 63 | height: 20px; 64 | position: absolute; 65 | top: 0; 66 | width: 20px; 67 | } 68 | tooltip-icon .tooltip-spacing .tooltip-bg2 { 69 | background-color: #fff; 70 | border-radius: 8px; 71 | content: " "; 72 | display: flex; 73 | height: 16px; 74 | left: 2px; 75 | position: absolute; 76 | top: 2px; 77 | width: 16px; 78 | } 79 | tooltip-icon .tooltip-spacing .tooltip-text { 80 | color: #555; 81 | font-size: 14px; 82 | font-weight: bold; 83 | line-height: 20px; 84 | position: relative; 85 | text-align: center; 86 | width: 20px; 87 | } 88 | 89 | .clr-picker { 90 | left: unset !important; 91 | } 92 | 93 | .clr-field { 94 | background: inherit; 95 | border: 1px solid #252f3e; 96 | border-radius: 34px; 97 | padding: 6px; 98 | } 99 | .clr-field input { 100 | width: 155px; 101 | background: inherit; 102 | color: inherit; 103 | border: none; 104 | border-radius: inherit; 105 | outline: none; 106 | font-family: Courier, "Courier New", monospace; 107 | font-weight: 600; 108 | font-size: 24px; 109 | text-shadow: rgb(0, 0, 0) -1px 1px 2px, rgb(0, 0, 0) 1px 1px 2px, rgb(0, 0, 0) 1px -1px 0px, rgb(0, 0, 0) -1px -1px 0px; 110 | text-indent: 11px; 111 | } 112 | .clr-field button { 113 | right: 9px !important; 114 | width: 24px !important; 115 | border-radius: 20px; 116 | height: 50% !important; 117 | } 118 | 119 | @media (prefers-color-scheme: light) { 120 | h2 { 121 | color: #ae181d; 122 | } 123 | } 124 | h2 { 125 | display: flex; 126 | user-select: none; 127 | text-align: center; 128 | font-family: "Segoe UI", Tahoma, sans-serif; 129 | font-size: 25px; 130 | } 131 | 132 | body { 133 | min-height: 220px; 134 | min-width: 350px; 135 | overflow: hidden; 136 | display: grid; 137 | place-content: center; 138 | grid-row-gap: 5px; 139 | place-items: center; 140 | } 141 | body .last-item { 142 | margin-top: 4px; 143 | margin-bottom: 7px; 144 | } 145 | body.custom-options-enabled:not(.permissions-mode) { 146 | height: 574px !important; 147 | } 148 | body:not(.custom-options-enabled) > div.custom-options { 149 | display: none !important; 150 | } 151 | @media screen and (max-width: 500px) { 152 | body { 153 | padding-bottom: 10px; 154 | width: 350px; 155 | } 156 | } 157 | @media screen and (min-width: 500px) { 158 | body { 159 | height: 350px; 160 | padding-bottom: 20px; 161 | } 162 | } 163 | body div.max-width { 164 | display: grid; 165 | width: 325px; 166 | } 167 | body div.max-width h2 { 168 | justify-content: center; 169 | } 170 | body div.custom-options.grid { 171 | display: grid; 172 | grid-template-columns: 180px 180px; 173 | grid-row: auto; 174 | grid-column-gap: 15px; 175 | grid-row-gap: 0; 176 | margin-top: 5px; 177 | } 178 | body div.custom-options.grid h2 { 179 | font-size: 21px; 180 | margin-block-end: 10px; 181 | margin-top: 20px; 182 | justify-content: center; 183 | } 184 | body div.custom-options.grid div { 185 | justify-content: center; 186 | display: flex; 187 | } 188 | body div.custom-options.grid div .switch { 189 | margin-left: 5px; 190 | margin-top: 6px; 191 | } 192 | body div.custom-options .column { 193 | display: flex; 194 | flex-direction: column; 195 | justify-content: center; 196 | } 197 | body div.custom-options h2 { 198 | margin-block-start: 10px; 199 | } 200 | 201 | a { 202 | position: fixed; 203 | top: 1em; 204 | left: 1em; 205 | display: inline-block; 206 | height: 2em; 207 | } 208 | @media screen and (max-width: 500px) { 209 | a { 210 | position: static; 211 | order: -1; 212 | } 213 | } 214 | a > img { 215 | display: inherit; 216 | height: 100%; 217 | } 218 | 219 | body > .range-slider, 220 | label[dir=rtl] .range-slider { 221 | width: clamp(300px, 50vw, 800px); 222 | min-width: 200px; 223 | } 224 | 225 | /* The switch - the box around the slider */ 226 | .switch { 227 | position: relative; 228 | display: inline-block; 229 | width: 60px; 230 | height: 34px; 231 | /* Hide default HTML checkbox */ 232 | /* The slider */ 233 | /* Rounded sliders */ 234 | } 235 | .switch input { 236 | opacity: 0; 237 | width: 0; 238 | height: 0; 239 | } 240 | .switch .slider { 241 | position: absolute; 242 | cursor: pointer; 243 | top: 0; 244 | left: 0; 245 | right: 0; 246 | bottom: 0; 247 | background-color: #eee; 248 | -webkit-transition: 0.4s; 249 | transition: 0.4s; 250 | } 251 | .switch .slider:before { 252 | position: absolute; 253 | content: ""; 254 | height: 26px; 255 | width: 26px; 256 | left: 4px; 257 | bottom: 4px; 258 | background-color: #eee; 259 | -webkit-transition: 0.4s; 260 | transition: 0.4s; 261 | } 262 | .switch input:checked + .slider { 263 | background-color: #ad0007; 264 | } 265 | .switch input:checked + .slider:before { 266 | -webkit-transform: translateX(26px); 267 | -ms-transform: translateX(26px); 268 | transform: translateX(26px); 269 | } 270 | .switch .slider.round { 271 | border-radius: 34px; 272 | } 273 | .switch .slider.round:before { 274 | border-radius: 50%; 275 | box-shadow: 0 0 3px rgba(0, 0, 0, 0.4), 0 0 1px rgba(0, 0, 0, 0.5) inset, 0 0 0 99px white inset; 276 | } 277 | 278 | body.permissions-mode { 279 | height: 250px !important; 280 | } 281 | body.permissions-mode #permissions_wrapper { 282 | display: flex !important; 283 | } 284 | body.permissions-mode > div:not(#permissions_wrapper) { 285 | display: none !important; 286 | } 287 | 288 | #permissions_wrapper { 289 | flex-direction: column; 290 | align-items: center; 291 | justify-content: center; 292 | width: 100%; 293 | height: 100%; 294 | } 295 | #permissions_wrapper h2 { 296 | color: #e7195c; 297 | } 298 | #permissions_wrapper #permissions_button { 299 | width: 200px; 300 | height: 70px; 301 | background: linear-gradient(to left top, #c32c71 50%, #b33771 50%); 302 | border-style: none; 303 | color: #fff; 304 | font-size: 23px; 305 | letter-spacing: 3px; 306 | font-family: Lato, sans-serif; 307 | font-weight: 600; 308 | text-align: center; 309 | outline: none; 310 | cursor: pointer; 311 | position: relative; 312 | padding: 0px; 313 | overflow: hidden; 314 | transition: all 0.5s; 315 | box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2); 316 | } 317 | #permissions_wrapper #permissions_button:hover { 318 | transition: all 0.5s; 319 | transform: perspective(5px) scale(1.1); 320 | box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.4); 321 | } 322 | #permissions_wrapper #permissions_button span { 323 | position: absolute; 324 | display: block; 325 | } 326 | #permissions_wrapper #permissions_button span:nth-child(1) { 327 | height: 3px; 328 | width: 200px; 329 | top: 0px; 330 | left: -200px; 331 | background: linear-gradient(to right, rgba(0, 0, 0, 0), #f6e58d); 332 | border-top-right-radius: 1px; 333 | border-bottom-right-radius: 1px; 334 | animation: span1 2s linear infinite; 335 | animation-delay: 1s; 336 | } 337 | @keyframes span1 { 338 | 0% { 339 | left: -200px; 340 | } 341 | 100% { 342 | left: 200px; 343 | } 344 | } 345 | #permissions_wrapper #permissions_button span:nth-child(2) { 346 | height: 70px; 347 | width: 3px; 348 | top: -70px; 349 | right: 0px; 350 | background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #f6e58d); 351 | border-bottom-left-radius: 1px; 352 | border-bottom-right-radius: 1px; 353 | animation: span2 2s linear infinite; 354 | animation-delay: 2s; 355 | } 356 | @keyframes span2 { 357 | 0% { 358 | top: -70px; 359 | } 360 | 100% { 361 | top: 70px; 362 | } 363 | } 364 | #permissions_wrapper #permissions_button span:nth-child(3) { 365 | height: 3px; 366 | width: 200px; 367 | right: -200px; 368 | bottom: 0px; 369 | background: linear-gradient(to left, rgba(0, 0, 0, 0), #f6e58d); 370 | border-top-left-radius: 1px; 371 | border-bottom-left-radius: 1px; 372 | animation: span3 2s linear infinite; 373 | animation-delay: 3s; 374 | } 375 | @keyframes span3 { 376 | 0% { 377 | right: -200px; 378 | } 379 | 100% { 380 | right: 200px; 381 | } 382 | } 383 | #permissions_wrapper #permissions_button span:nth-child(4) { 384 | height: 70px; 385 | width: 3px; 386 | bottom: -70px; 387 | left: 0px; 388 | background: linear-gradient(to top, rgba(0, 0, 0, 0), #f6e58d); 389 | border-top-right-radius: 1px; 390 | border-top-left-radius: 1px; 391 | animation: span4 2s linear infinite; 392 | animation-delay: 4s; 393 | } 394 | @keyframes span4 { 395 | 0% { 396 | bottom: -70px; 397 | } 398 | 100% { 399 | bottom: 70px; 400 | } 401 | } 402 | 403 | h2.hud { 404 | margin-block-end: 8px; 405 | margin-block-start: 20px; 406 | } 407 | 408 | .radio-container { 409 | display: flex; 410 | flex-wrap: wrap; 411 | flex-direction: row; 412 | justify-content: center; 413 | } 414 | .radio-container label { 415 | display: flex; 416 | cursor: pointer; 417 | font-weight: 500; 418 | position: relative; 419 | overflow: hidden; 420 | margin: 0.3em; 421 | } 422 | .radio-container label input { 423 | position: absolute; 424 | left: -9999px; 425 | } 426 | .radio-container label input:checked + span { 427 | background-color: #f2dadb; 428 | } 429 | .radio-container label input:checked + span:before { 430 | box-shadow: inset 0 0 0 0.4375em #ae181d; 431 | } 432 | .radio-container label span { 433 | user-select: none; 434 | font-family: "Segoe UI Semibold", sans-serif; 435 | font-size: medium; 436 | display: flex; 437 | align-items: center; 438 | padding: 0.375em 0.75em 0.375em 0.375em; 439 | border-radius: 99em; 440 | transition: 0.25s ease; 441 | } 442 | .radio-container label span:hover { 443 | background-color: #f2dadb; 444 | } 445 | .radio-container label span:before { 446 | display: flex; 447 | flex-shrink: 0; 448 | content: ""; 449 | background-color: #fff; 450 | width: 1.5em; 451 | height: 1.5em; 452 | border-radius: 50%; 453 | margin-right: 0.375em; 454 | transition: 0.25s ease; 455 | box-shadow: inset 0 0 0 0.125em #ae181d; 456 | } 457 | 458 | #hud_size_slider::before, #hud_size_slider::after { 459 | --offset: 0; 460 | } 461 | #hud_size_slider .range-slider__progress { 462 | --start-end: 0; 463 | } 464 | 465 | .range-slider { 466 | --value-offset-y: var(--ticks-gap); 467 | --value-active-color: white; 468 | --value-background: transparent; 469 | --value-background-hover: var(--primary-color); 470 | --value-font: 700 12px/1 Arial; 471 | --fill-color: var(--primary-color); 472 | --progress-background: #eee; 473 | --progress-radius: 20px; 474 | --track-height: calc(var(--thumb-size) / 2); 475 | --min-max-font: 12px Arial; 476 | --min-max-opacity: 0.5; 477 | --min-max-x-offset: 10%; 478 | --thumb-size: 22px; 479 | --thumb-shadow: 0 0 3px rgba(0, 0, 0, 0.4), 0 0 1px rgba(0, 0, 0, 0.5) inset, 0 0 0 99px var(--thumb-color) inset; 480 | --thumb-shadow-active: 0 0 0 calc(var(--thumb-size) / 4) inset var(--thumb-color), 481 | 0 0 0 99px var(--primary-color) inset, 0 0 3px rgba(0, 0, 0, 0.4); 482 | --thumb-shadow-hover: var(--thumb-shadow); 483 | --ticks-thickness: 1px; 484 | --ticks-height: 5px; 485 | --ticks-gap: var(--ticks-height, 0); 486 | --ticks-color: silver; 487 | --step: 1; 488 | --ticks-count: Calc(var(--max) - var(--min)) / var(--step); 489 | --maxTicksAllowed: 30; 490 | --too-many-ticks: Min(1, Max(var(--ticks-count) - var(--maxTicksAllowed), 0)); 491 | --x-step: Max( 492 | var(--step), 493 | var(--too-many-ticks) * (var(--max) - var(--min)) 494 | ); 495 | --tickInterval: 100/ ((var(--max) - var(--min)) / var(--step)) * var(--tickEvery, 1); 496 | --tickIntervalPerc: calc( 497 | (100% - var(--thumb-size)) / ((var(--max) - var(--min)) / var(--x-step)) * var(--tickEvery, 1) 498 | ); 499 | --value-a: Clamp(var(--min), var(--value, 0), var(--max)); 500 | --value-b: var(--value, 0); 501 | --text-value-a: var(--text-value, ""); 502 | --completed-a: calc((var(--value-a) - var(--min)) / (var(--max) - var(--min)) * 100); 503 | --completed-b: calc((var(--value-b) - var(--min)) / (var(--max) - var(--min)) * 100); 504 | --ca: Min(var(--completed-a), var(--completed-b)); 505 | --cb: Max(var(--completed-a), var(--completed-b)); 506 | --thumbs-too-close: Clamp(-1, 1000 * (Min(1, Max(var(--cb) - var(--ca) - 5, -1)) + 0.001), 1); 507 | --thumb-close-to-min: Min(1, Max(var(--ca) - 2, 0)); 508 | --thumb-close-to-max: Min(1, Max(98 - var(--cb), 0)); 509 | display: inline-block; 510 | height: max(var(--track-height), var(--thumb-size)); 511 | background: linear-gradient(to right, var(--ticks-color) var(--ticks-thickness), transparent 1px) repeat-x; 512 | background-size: var(--tickIntervalPerc) var(--ticks-height); 513 | background-position-x: calc(var(--thumb-size) / 2 - var(--ticks-thickness) / 2); 514 | background-position-y: var(--flip-y, bottom); 515 | padding-bottom: var(--flip-y, var(--ticks-gap)); 516 | padding-top: calc(var(--flip-y) * var(--ticks-gap)); 517 | margin-top: 13px; 518 | position: relative; 519 | z-index: 1; 520 | } 521 | @media (prefers-color-scheme: dark) { 522 | .range-slider { 523 | --primary-color: #ae181d; 524 | --thumb-color: #bd003f; 525 | } 526 | } 527 | @media (prefers-color-scheme: light) { 528 | .range-slider { 529 | --primary-color: #ae181d; 530 | --thumb-color: white; 531 | } 532 | } 533 | .range-slider[data-ticks-position=top] { 534 | --flip-y: 1; 535 | } 536 | .range-slider::before, .range-slider::after { 537 | --offset: calc(var(--thumb-size) / 2); 538 | content: counter(x); 539 | display: var(--show-min-max, block); 540 | font: var(--min-max-font); 541 | position: absolute; 542 | bottom: var(--flip-y, -2.5ch); 543 | top: calc(-2.5ch * var(--flip-y)); 544 | opacity: clamp(0, var(--at-edge), var(--min-max-opacity)); 545 | transform: translateX(calc(var(--min-max-x-offset) * var(--before, -1) * -1)) scale(var(--at-edge)); 546 | pointer-events: none; 547 | } 548 | .range-slider::before { 549 | --before: 1; 550 | --at-edge: var(--thumb-close-to-min); 551 | counter-reset: x var(--min); 552 | left: var(--offset); 553 | } 554 | .range-slider::after { 555 | --at-edge: var(--thumb-close-to-max); 556 | counter-reset: x var(--max); 557 | right: var(--offset); 558 | } 559 | .range-slider__values { 560 | position: relative; 561 | top: 50%; 562 | line-height: 0; 563 | text-align: justify; 564 | width: 100%; 565 | pointer-events: none; 566 | margin: 0 auto; 567 | z-index: 5; 568 | } 569 | .range-slider__values::after { 570 | content: ""; 571 | width: 100%; 572 | display: inline-block; 573 | height: 0; 574 | background: red; 575 | } 576 | .range-slider__progress { 577 | --start-end: calc(var(--thumb-size) / 2); 578 | --clip-end: calc(100% - (var(--cb)) * 1%); 579 | --clip-start: calc(var(--ca) * 1%); 580 | --clip: inset(-20px var(--clip-end) -20px var(--clip-start)); 581 | position: absolute; 582 | left: var(--start-end); 583 | right: var(--start-end); 584 | top: calc(var(--ticks-gap) * var(--flip-y, 0) + var(--thumb-size) / 2 - var(--track-height) / 2); 585 | height: calc(var(--track-height)); 586 | background: var(--progress-background, #eee); 587 | pointer-events: none; 588 | z-index: -1; 589 | border-radius: var(--progress-radius); 590 | } 591 | .range-slider__progress::before { 592 | content: ""; 593 | position: absolute; 594 | left: 0; 595 | right: 0; 596 | clip-path: var(--clip); 597 | top: 0; 598 | bottom: 0; 599 | background: var(--fill-color, black); 600 | box-shadow: var(--progress-fill-shadow); 601 | z-index: 1; 602 | border-radius: inherit; 603 | } 604 | .range-slider__progress::after { 605 | content: ""; 606 | position: absolute; 607 | top: 0; 608 | right: 0; 609 | bottom: 0; 610 | left: 0; 611 | box-shadow: var(--progress-shadow); 612 | pointer-events: none; 613 | border-radius: inherit; 614 | } 615 | .range-slider > input { 616 | -webkit-appearance: none; 617 | appearance: none; 618 | width: 100%; 619 | height: var(--thumb-size); 620 | margin: 0; 621 | position: absolute; 622 | left: 0; 623 | top: calc(50% - max(var(--track-height), var(--thumb-size)) / 2 + var(--ticks-gap) / 2 * var(--flip-y, -1)); 624 | cursor: -webkit-grab; 625 | cursor: grab; 626 | outline: none; 627 | background: none; 628 | } 629 | .range-slider > input:not(:only-of-type) { 630 | pointer-events: none; 631 | } 632 | .range-slider > input::-webkit-slider-thumb { 633 | appearance: none; 634 | height: var(--thumb-size); 635 | width: var(--thumb-size); 636 | transform: var(--thumb-transform); 637 | border-radius: var(--thumb-radius, 50%); 638 | background: var(--thumb-color); 639 | box-shadow: var(--thumb-shadow); 640 | border: none; 641 | pointer-events: auto; 642 | transition: 0.1s; 643 | } 644 | .range-slider > input::-moz-range-thumb { 645 | appearance: none; 646 | height: var(--thumb-size); 647 | width: var(--thumb-size); 648 | transform: var(--thumb-transform); 649 | border-radius: var(--thumb-radius, 50%); 650 | background: var(--thumb-color); 651 | box-shadow: var(--thumb-shadow); 652 | border: none; 653 | pointer-events: auto; 654 | transition: 0.1s; 655 | } 656 | .range-slider > input::-ms-thumb { 657 | appearance: none; 658 | height: var(--thumb-size); 659 | width: var(--thumb-size); 660 | transform: var(--thumb-transform); 661 | border-radius: var(--thumb-radius, 50%); 662 | background: var(--thumb-color); 663 | box-shadow: var(--thumb-shadow); 664 | border: none; 665 | pointer-events: auto; 666 | transition: 0.1s; 667 | } 668 | .range-slider > input:hover { 669 | --thumb-shadow: var(--thumb-shadow-hover); 670 | } 671 | .range-slider > input:hover + output { 672 | --value-background: var(--value-background-hover); 673 | --y-offset: -5px; 674 | color: var(--value-active-color); 675 | box-shadow: 0 0 0 3px var(--value-background); 676 | } 677 | .range-slider > input:active { 678 | --thumb-shadow: var(--thumb-shadow-active); 679 | cursor: grabbing; 680 | z-index: 2; 681 | } 682 | .range-slider > input:active + output { 683 | transition: 0s; 684 | } 685 | .range-slider > input:nth-of-type(1) { 686 | --is-left-most: Clamp(0, (var(--value-a) - var(--value-b)) * 99999, 1); 687 | } 688 | .range-slider > input:nth-of-type(1) + output { 689 | --value: var(--value-a); 690 | --x-offset: calc(var(--completed-a) * -1%); 691 | } 692 | .range-slider > input:nth-of-type(1) + output:not(:only-of-type) { 693 | --flip: calc(var(--thumbs-too-close) * -1); 694 | } 695 | .range-slider > input:nth-of-type(1) + output::after { 696 | content: var(--prefix, "") var(--text-value-a) var(--suffix, ""); 697 | } 698 | .range-slider > input:nth-of-type(2) { 699 | --is-left-most: Clamp(0, (var(--value-b) - var(--value-a)) * 99999, 1); 700 | } 701 | .range-slider > input:nth-of-type(2) + output { 702 | --value: var(--value-b); 703 | } 704 | .range-slider > input:only-of-type ~ .range-slider__progress { 705 | --clip-start: 0; 706 | } 707 | .range-slider > input + output { 708 | --flip: -1; 709 | --x-offset: calc(var(--completed-b) * -1%); 710 | --pos: calc(((var(--value) - var(--min)) / (var(--max) - var(--min))) * 100%); 711 | pointer-events: none; 712 | position: absolute; 713 | z-index: 5; 714 | background: var(--value-background); 715 | border-radius: 10px; 716 | padding: 2px 4px; 717 | left: var(--pos); 718 | transform: translate(var(--x-offset), calc(150% * var(--flip) - (var(--y-offset, 0px) + var(--value-offset-y)) * var(--flip))); 719 | transition: all 0.12s ease-out, left 0s; 720 | } 721 | .range-slider > input + output::after { 722 | content: var(--prefix, "") var(--text-value-b) var(--suffix, ""); 723 | font: var(--value-font); 724 | } 725 | 726 | /*# sourceMappingURL=popup.css.map */ 727 | -------------------------------------------------------------------------------- /unpacked/popup/popup.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["popup.scss"],"names":[],"mappings":"AAqBA;EACE;IACE,kBAJa;IAKb,OApBS;;EAuBX;IACE,OArBS;;EAyBX;AAAA;AAAA;IAKE;;EAIF;IACE;IACA;;EAIF;IACE;;EAIF;IACE;;EAIA;IACE;IACA;;EAIJ;IACE;;EAIA;IACE;;EAEF;IACE;;EAEF;IACE;;;AASN;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AASN;EACE;;;AAGF;EAEE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;;AAGF;EACE;EACA;EACA;EACA;;;AAWJ;EACE;IACE,OALY;;;AAShB;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;AAGF;EAtBF;IAuBI;IACA;;;AAGF;EA3BF;IA4BI;IACA;;;AAGF;EACE;EACA;;AACA;EACE;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAKN;EACE;EACA;EACA;;AAEF;EACE;;;AAKN;EACE;EACA;EACA;EACA;EACA;;AAEA;EAPF;IAQI;IACA;;;AAGF;EACE;EACA;;;AAIJ;AAAA;EAEE;EACA;;;AAOF;AACA;EACE;EACA;EACA;EACA;AAEA;AAOA;AAmCA;;AAzCA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE,kBAlKc;;AAqKhB;EACE;EACA;EACA;;AAIF;EACE;;AAGF;EACE;EAEA;;;AAQJ;EACE;;AAGA;EACE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;IACE;;EAEF;IACE;;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;IACE;;EAEF;IACE;;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;IACE;;EAEF;IACE;;;AAGJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;IACE;;EAEF;IACE;;;;AASR;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;EAEA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACA;EACE;;AACA;EACE;;AAIN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAWN;EAEE;;AAGF;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EAaA;EAEA;AAAA;EAGA;EAEA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;AAAA;AAAA;AAAA;EAIA;EACA;AAAA;AAAA;EAIA;EACA;EACA;EAEA;EACA;EACA;EACA;EAOA;EACA;EACA;EAeA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;;AAjFA;EAlBF;IAoBI;IAEA;;;AAEF;EAxBF;IAyBI;IACA;;;AA2EF;EACE;;AAIF;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EAhJA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA0IA;EAnJA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA6IA;EAtJA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAiJA;EACE;;AACA;EACE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AACA;EACE;;AAIJ;EACE;;AACA;EAKE;EACA;;AALA;EACE;;AAKF;EACE;;AAKN;EACE;;AACA;EACE;;AAMF;EACE;;AAIJ;EACE;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAIA;;AAEA;EACE;EACA","file":"popup.css"} -------------------------------------------------------------------------------- /unpacked/popup/popup.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Youtube-Volume-Scroll Popup 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 31 |
32 |

Volume Steps:

33 | 34 |
35 |
36 |

Required Modifier:

37 |
38 |
39 | 43 | 47 | 51 |
52 |
53 |

Overlay Style:

54 |
55 |
56 | 60 | 64 | 68 |
69 |
70 |

Position Mode: 71 | 73 |

74 |

Font Color:

75 |
76 | 80 |
81 |
82 |
83 | 84 |
85 |
86 |
87 |
88 |

Font Size:

89 | 90 |
91 | 92 | 93 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /unpacked/popup/popup.js: -------------------------------------------------------------------------------- 1 | const browserApi = globalThis.browser ?? globalThis.chrome ?? null; 2 | if (!browserApi) 3 | throw new Error( 4 | 'Youtube-Volume-Scroll could not find a browser api to use', 5 | ); 6 | 7 | const $ = document.querySelector.bind(document); 8 | const $$ = document.querySelectorAll.bind(document); 9 | 10 | const hudTypes = { 11 | custom: 0, 12 | native: 1, 13 | none: 2, 14 | }; 15 | 16 | const activationModifiers = { 17 | none: 0, 18 | shift: 1, 19 | rightClick: 2, 20 | }; 21 | 22 | const defaultConfig = { 23 | steps: 1, 24 | hud: hudTypes.native, 25 | hudSize: '50px', 26 | hudColor: '#eeeeee', 27 | hudPositionMode: false, 28 | activationModifier: activationModifiers.none, 29 | hudPosition: { 30 | youtube: { 31 | top: '5px', 32 | bottom: 'unset', 33 | left: 'unset', 34 | right: '5px', 35 | }, 36 | music: { 37 | top: '10px', 38 | bottom: 'unset', 39 | left: 'unset', 40 | right: '6%', 41 | }, 42 | shorts: { 43 | top: '0', 44 | bottom: 'unset', 45 | left: 'unset', 46 | right: '35px', 47 | }, 48 | }, 49 | }; 50 | 51 | let config; 52 | 53 | let saveTimeout; 54 | function sendConfig(timeout = 0) { 55 | if (saveTimeout) clearTimeout(saveTimeout); 56 | 57 | saveTimeout = setTimeout(() => { 58 | browserApi.storage.local.set({ config }); 59 | saveTimeout = null; 60 | }, timeout); 61 | } 62 | 63 | browserApi.storage.sync.get('config', data => { 64 | config = { ...defaultConfig, ...(data?.config || {}) }; 65 | if ($('#steps_slider')) init(); 66 | else { 67 | window.addEventListener('DOMContentLoaded', init, { once: true }); 68 | } 69 | }); 70 | 71 | function init() { 72 | window.onblur = () => { 73 | browserApi.storage.sync.set({ config }); 74 | }; 75 | 76 | setupStepsSlider(); 77 | setupActivationModifierRadio(); 78 | setupHudRadio(); 79 | 80 | // only shown if custom hud is selected 81 | setupSizeSlider(); 82 | setupHudPositionModeCheckbox(); 83 | setupColorPicker(); 84 | 85 | const permissions = { 86 | origins: ['https://www.youtube.com/*', 'https://music.youtube.com/*'], 87 | }; 88 | browserApi.permissions.contains(permissions, result => { 89 | if (!result) { 90 | $('body').classList.add('permissions-mode'); 91 | $('#permissions_button').onclick = () => { 92 | browserApi.permissions.request(permissions, granted => { 93 | if (granted) { 94 | $('body').classList.remove('permissions-mode'); 95 | } 96 | }); 97 | window.close(); 98 | }; 99 | } 100 | }); 101 | } 102 | 103 | const setCustomOptionsEnabled = b => 104 | $('body').classList[b ? 'add' : 'remove']('custom-options-enabled'); 105 | 106 | function setupHudRadio() { 107 | const radios = $$('input[name="hud"]'); 108 | radios.forEach(radio => { 109 | radio.onchange = () => { 110 | config.hud = parseInt(radio.value, 10); 111 | setCustomOptionsEnabled(config.hud === hudTypes.custom); 112 | sendConfig(); 113 | }; 114 | }); 115 | radios[config.hud].checked = true; 116 | setCustomOptionsEnabled(config.hud === hudTypes.custom); 117 | } 118 | 119 | function setupActivationModifierRadio() { 120 | const radios = $$('input[name="activation_modifier"]'); 121 | radios.forEach(radio => { 122 | radio.onchange = () => { 123 | config.activationModifier = parseInt(radio.value, 10); 124 | sendConfig(); 125 | }; 126 | }); 127 | radios[config.activationModifier].checked = true; 128 | } 129 | 130 | function setupStepsSlider() { 131 | const slider = $('#steps_slider'); 132 | slider.value = parseFloat(config.steps); 133 | 134 | slider.addEventListener('input', () => { 135 | config.steps = slider.value; 136 | sendConfig(350); 137 | }); 138 | } 139 | 140 | function setupSizeSlider() { 141 | const slider = $('#hud_size_slider'); 142 | slider.value = parseFloat(config.hudSize); 143 | 144 | slider.addEventListener('input', () => { 145 | config.hudSize = `${slider.value}px`; 146 | sendConfig(0); 147 | }); 148 | } 149 | 150 | function setupHudPositionModeCheckbox() { 151 | const checkbox = $('#hud_position_mode_checkbox'); 152 | checkbox.onchange = () => { 153 | config.hudPositionMode = checkbox.checked; 154 | sendConfig(); 155 | }; 156 | checkbox.checked = config.hudPositionMode; 157 | } 158 | 159 | function setupColorPicker() { 160 | document.addEventListener('coloris:pick', ({ detail }) => { 161 | config.hudColor = detail.color; 162 | sendConfig(); 163 | }); 164 | const colorInput = $('input[data-coloris'); 165 | colorInput.value = config.hudColor; 166 | colorInput.dispatchEvent(new Event('input', { bubbles: true })); 167 | 168 | globalThis.Coloris?.({ 169 | // Available themes: default, large, polaroid, pill (horizontal). 170 | theme: 'large', 171 | 172 | // Set the theme to light or dark mode: 173 | // * light: light mode (default). 174 | // * dark: dark mode. 175 | // * auto: automatically enables dark mode when the user prefers a dark color scheme. 176 | themeMode: 'auto', 177 | 178 | // The margin in pixels between the input fields and the color picker's dialog. 179 | margin: 10, 180 | 181 | // Set the preferred color string format: 182 | // * hex: outputs #RRGGBB or #RRGGBBAA (default). 183 | // * rgb: outputs rgb(R, G, B) or rgba(R, G, B, A). 184 | // * hsl: outputs hsl(H, S, L) or hsla(H, S, L, A). 185 | // * auto: guesses the format from the active input field. Defaults to hex if it fails. 186 | // * mixed: outputs #RRGGBB when alpha is 1; otherwise rgba(R, G, B, A). 187 | format: 'auto', 188 | 189 | // Set to true to enable format toggle buttons in the color picker dialog. 190 | // This will also force the format option (above) to auto. 191 | formatToggle: false, 192 | 193 | // Enable or disable alpha support. 194 | // When disabled, it will strip the alpha value from the existing color string in all formats. 195 | alpha: false, 196 | 197 | // Set to true to always include the alpha value in the color value even if the opacity is 100%. 198 | forceAlpha: false, 199 | 200 | // Set to true to hide all the color picker widgets (spectrum, hue, ...) except the swatches. 201 | swatchesOnly: false, 202 | 203 | // Focus the color value input when the color picker dialog is opened. 204 | focusInput: true, 205 | 206 | // Show an optional clear button 207 | clearButton: false, 208 | 209 | // An array of the desired color swatches to display. If omitted or the array is empty, 210 | // the color swatches will be disabled. 211 | swatches: [ 212 | '#eee', 213 | '#99506d', 214 | '#e9c46a', 215 | '#f4a261', 216 | '#e76f51', 217 | '#d62828', 218 | '#da003a', 219 | '#f82359', 220 | '#264653', 221 | '#2a9d8f', 222 | '#691ffd', 223 | '#be73ff', 224 | '#07b', 225 | '#0096c7', 226 | '#00b4d8', 227 | ], 228 | }); 229 | } 230 | -------------------------------------------------------------------------------- /unpacked/popup/popup.scss: -------------------------------------------------------------------------------- 1 | //////////////////////////////////////////////// 2 | // DARK MODE 3 | 4 | // white-text 5 | $white_text: #f5f5f5; 6 | 7 | // h2 8 | $pnk1_title: #d5003c; 9 | 10 | // slider-thumb + selected button 11 | $pnk2_selected: #bd003f; 12 | 13 | //buttons outlines + selected slider part 14 | $red3_outlines: #ae181d; 15 | 16 | // slider-background + button hover background 17 | $red_deep: #2d0e12; 18 | 19 | // body background 20 | $drk_background: #0d1117; 21 | 22 | @media (prefers-color-scheme: dark) { 23 | body { 24 | background-color: $drk_background; 25 | color: $white_text; 26 | } 27 | 28 | h2 { 29 | color: $pnk1_title; 30 | } 31 | 32 | // slider background 33 | .range-slider__progress, 34 | // hover background on radio buttons 35 | .radio-container label span:hover, 36 | // background of selected radio button 37 | .radio-container label input:checked + span { 38 | background-color: $red_deep !important; 39 | } 40 | 41 | // unselected radio buttons 42 | .radio-container label span::before { 43 | background-color: unset !important; 44 | box-shadow: inset 0 0 0 0.125em $red3_outlines !important; 45 | } 46 | 47 | // selected radio button 48 | .radio-container label input:checked + span::before { 49 | box-shadow: inset 0 0 0 0.4375em $pnk2_selected !important; 50 | } 51 | 52 | // toggle switch 53 | .switch .slider { 54 | background-color: $red_deep !important; 55 | //border: 1px solid $red3_outlines; 56 | 57 | // thumb 58 | &::before { 59 | background-color: $pnk2_selected !important; 60 | box-shadow: 0 0 3px rgb(0 0 0), 0 0 3px rgb(0 0 0) inset, 0 0 0 99px $pnk1_title inset !important; 61 | } 62 | } 63 | 64 | input:checked + .slider { 65 | background-color: $red3_outlines !important; 66 | } 67 | 68 | tooltip-icon .tooltip-spacing { 69 | .tooltip-bg1 { 70 | background-color: #000 !important; 71 | } 72 | .tooltip-bg2 { 73 | background-color: #626262 !important; 74 | } 75 | .tooltip-text { 76 | color: #000 !important; 77 | } 78 | } 79 | } 80 | 81 | //////////////////////////////////////////////// 82 | /// Tooltips 83 | /// 84 | 85 | tooltip-icon { 86 | width: 0; 87 | font-size: 16px; 88 | font-weight: normal; 89 | color: black; 90 | margin-top: 2px; 91 | position: relative; 92 | 93 | &:hover { 94 | cursor: help; 95 | } 96 | 97 | .tooltip-spacing { 98 | height: 20px; 99 | margin-left: 6px; 100 | position: relative; 101 | width: 20px; 102 | 103 | .tooltip-bg1 { 104 | background-color: #555; 105 | border-radius: 10px; 106 | content: " "; 107 | display: flex; 108 | height: 20px; 109 | position: absolute; 110 | top: 0; 111 | width: 20px; 112 | } 113 | 114 | .tooltip-bg2 { 115 | background-color: #fff; 116 | border-radius: 8px; 117 | content: " "; 118 | display: flex; 119 | height: 16px; 120 | left: 2px; 121 | position: absolute; 122 | top: 2px; 123 | width: 16px; 124 | } 125 | 126 | .tooltip-text { 127 | color: #555; 128 | font-size: 14px; 129 | font-weight: bold; 130 | line-height: 20px; 131 | position: relative; 132 | text-align: center; 133 | width: 20px; 134 | } 135 | } 136 | } 137 | 138 | //////////////////////////////////////////////// 139 | /// COLOR PICKER 140 | /// 141 | 142 | .clr-picker { 143 | left: unset !important; 144 | } 145 | 146 | .clr-field { 147 | //color: rgb(250, 0, 0); 148 | background: inherit; 149 | border: 1px solid #252f3e; 150 | border-radius: 34px; 151 | padding: 6px; 152 | 153 | input { 154 | width: 155px; 155 | background: inherit; 156 | color: inherit; 157 | border: none; 158 | border-radius: inherit; 159 | outline: none; 160 | 161 | font-family: Courier, "Courier New", monospace; 162 | font-weight: 600; 163 | font-size: 24px; 164 | text-shadow: rgb(0, 0, 0) -1px 1px 2px, rgb(0, 0, 0) 1px 1px 2px, rgb(0, 0, 0) 1px -1px 0px, 165 | rgb(0, 0, 0) -1px -1px 0px; 166 | text-indent: 11px; 167 | } 168 | 169 | button { 170 | right: 9px !important; 171 | width: 24px !important; 172 | border-radius: 20px; 173 | height: 50% !important; 174 | } 175 | } 176 | 177 | //////////////////////////////////////////////// 178 | /// PAGE SETUP 179 | /// 180 | 181 | $primary-color: #ae181d; 182 | $secondary-color: #ad0007; 183 | 184 | @media (prefers-color-scheme: light) { 185 | h2 { 186 | color: $primary-color; 187 | } 188 | } 189 | 190 | h2 { 191 | display: flex; 192 | user-select: none; 193 | text-align: center; 194 | font-family: "Segoe UI", Tahoma, sans-serif; 195 | font-size: 25px; 196 | } 197 | 198 | body { 199 | min-height: 220px; 200 | min-width: 350px; 201 | overflow: hidden; 202 | display: grid; 203 | place-content: center; 204 | grid-row-gap: 5px; 205 | place-items: center; 206 | 207 | .last-item { 208 | margin-top: 4px; 209 | margin-bottom: 7px; 210 | } 211 | 212 | &.custom-options-enabled:not(.permissions-mode) { 213 | height: 574px !important; 214 | } 215 | 216 | &:not(.custom-options-enabled) > div.custom-options { 217 | display: none !important; 218 | } 219 | 220 | @media screen and (max-width: 500px) { 221 | padding-bottom: 10px; 222 | width: 350px; 223 | } 224 | 225 | @media screen and (min-width: 500px) { 226 | height: 350px; 227 | padding-bottom: 20px; 228 | } 229 | 230 | div.max-width { 231 | display: grid; 232 | width: 325px; 233 | h2 { 234 | justify-content: center; 235 | } 236 | } 237 | 238 | div.custom-options { 239 | &.grid { 240 | display: grid; 241 | grid-template-columns: 180px 180px; 242 | grid-row: auto; 243 | grid-column-gap: 15px; 244 | grid-row-gap: 0; 245 | margin-top: 5px; 246 | 247 | h2 { 248 | font-size: 21px; 249 | margin-block-end: 10px; 250 | margin-top: 20px; 251 | justify-content: center; 252 | } 253 | 254 | div { 255 | justify-content: center; 256 | display: flex; 257 | 258 | .switch { 259 | margin-left: 5px; 260 | margin-top: 6px; 261 | } 262 | } 263 | } 264 | 265 | .column { 266 | display: flex; 267 | flex-direction: column; 268 | justify-content: center; 269 | } 270 | h2 { 271 | margin-block-start: 10px; 272 | } 273 | } 274 | } 275 | 276 | a { 277 | position: fixed; 278 | top: 1em; 279 | left: 1em; 280 | display: inline-block; 281 | height: 2em; 282 | 283 | @media screen and (max-width: 500px) { 284 | position: static; 285 | order: -1; 286 | } 287 | 288 | > img { 289 | display: inherit; 290 | height: 100%; 291 | } 292 | } 293 | 294 | body > .range-slider, 295 | label[dir="rtl"] .range-slider { 296 | width: Clamp(300px, 50vw, 800px); 297 | min-width: 200px; 298 | } 299 | 300 | //////////////////////////////////////////////// 301 | /// TOGGLE SWITCH BUTTON 302 | /// 303 | 304 | /* The switch - the box around the slider */ 305 | .switch { 306 | position: relative; 307 | display: inline-block; 308 | width: 60px; 309 | height: 34px; 310 | 311 | /* Hide default HTML checkbox */ 312 | input { 313 | opacity: 0; 314 | width: 0; 315 | height: 0; 316 | } 317 | 318 | /* The slider */ 319 | .slider { 320 | position: absolute; 321 | cursor: pointer; 322 | top: 0; 323 | left: 0; 324 | right: 0; 325 | bottom: 0; 326 | background-color: #eee; 327 | -webkit-transition: 0.4s; 328 | transition: 0.4s; 329 | } 330 | 331 | .slider:before { 332 | position: absolute; 333 | content: ""; 334 | height: 26px; 335 | width: 26px; 336 | left: 4px; 337 | bottom: 4px; 338 | background-color: #eee; 339 | -webkit-transition: 0.4s; 340 | transition: 0.4s; 341 | } 342 | 343 | input:checked + .slider { 344 | background-color: $secondary-color; 345 | } 346 | 347 | input:checked + .slider:before { 348 | -webkit-transform: translateX(26px); 349 | -ms-transform: translateX(26px); 350 | transform: translateX(26px); 351 | } 352 | 353 | /* Rounded sliders */ 354 | .slider.round { 355 | border-radius: 34px; 356 | } 357 | 358 | .slider.round:before { 359 | border-radius: 50%; 360 | 361 | box-shadow: 0 0 3px rgb(0 0 0 / 40%), 0 0 1px rgb(0 0 0 / 50%) inset, 0 0 0 99px white inset; 362 | } 363 | } 364 | 365 | //////////////////////////////////////////////// 366 | /// PERMISSIONS PROMPT 367 | /// 368 | 369 | body.permissions-mode { 370 | height: 250px !important; 371 | //background: linear-gradient(to left top, #c32c71 50%, #b33771 50%); 372 | 373 | #permissions_wrapper { 374 | display: flex !important; 375 | } 376 | 377 | & > div:not(#permissions_wrapper) { 378 | display: none !important; 379 | } 380 | } 381 | 382 | #permissions_wrapper { 383 | flex-direction: column; 384 | align-items: center; 385 | justify-content: center; 386 | width: 100%; 387 | height: 100%; 388 | h2 { 389 | color: #e7195c; 390 | } 391 | #permissions_button { 392 | width: 200px; 393 | height: 70px; 394 | background: linear-gradient(to left top, #c32c71 50%, #b33771 50%); 395 | border-style: none; 396 | color: #fff; 397 | font-size: 23px; 398 | letter-spacing: 3px; 399 | font-family: Lato, sans-serif; 400 | font-weight: 600; 401 | text-align: center; 402 | outline: none; 403 | cursor: pointer; 404 | position: relative; 405 | padding: 0px; 406 | overflow: hidden; 407 | transition: all 0.5s; 408 | box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2); 409 | &:hover { 410 | transition: all 0.5s; 411 | transform: perspective(5px) scale(1.1); 412 | box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.4); 413 | } 414 | span { 415 | position: absolute; 416 | display: block; 417 | } 418 | span:nth-child(1) { 419 | height: 3px; 420 | width: 200px; 421 | top: 0px; 422 | left: -200px; 423 | background: linear-gradient(to right, rgba(0, 0, 0, 0), #f6e58d); 424 | border-top-right-radius: 1px; 425 | border-bottom-right-radius: 1px; 426 | animation: span1 2s linear infinite; 427 | animation-delay: 1s; 428 | } 429 | @keyframes span1 { 430 | 0% { 431 | left: -200px; 432 | } 433 | 100% { 434 | left: 200px; 435 | } 436 | } 437 | span:nth-child(2) { 438 | height: 70px; 439 | width: 3px; 440 | top: -70px; 441 | right: 0px; 442 | background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #f6e58d); 443 | border-bottom-left-radius: 1px; 444 | border-bottom-right-radius: 1px; 445 | animation: span2 2s linear infinite; 446 | animation-delay: 2s; 447 | } 448 | @keyframes span2 { 449 | 0% { 450 | top: -70px; 451 | } 452 | 100% { 453 | top: 70px; 454 | } 455 | } 456 | span:nth-child(3) { 457 | height: 3px; 458 | width: 200px; 459 | right: -200px; 460 | bottom: 0px; 461 | background: linear-gradient(to left, rgba(0, 0, 0, 0), #f6e58d); 462 | border-top-left-radius: 1px; 463 | border-bottom-left-radius: 1px; 464 | animation: span3 2s linear infinite; 465 | animation-delay: 3s; 466 | } 467 | @keyframes span3 { 468 | 0% { 469 | right: -200px; 470 | } 471 | 100% { 472 | right: 200px; 473 | } 474 | } 475 | span:nth-child(4) { 476 | height: 70px; 477 | width: 3px; 478 | bottom: -70px; 479 | left: 0px; 480 | background: linear-gradient(to top, rgba(0, 0, 0, 0), #f6e58d); 481 | border-top-right-radius: 1px; 482 | border-top-left-radius: 1px; 483 | animation: span4 2s linear infinite; 484 | animation-delay: 4s; 485 | } 486 | @keyframes span4 { 487 | 0% { 488 | bottom: -70px; 489 | } 490 | 100% { 491 | bottom: 70px; 492 | } 493 | } 494 | } 495 | } 496 | 497 | ///////////////////////////////////////////////// 498 | /// HUD Radios 499 | /// 500 | h2.hud { 501 | margin-block-end: 8px; 502 | margin-block-start: 20px; 503 | } 504 | 505 | .radio-container { 506 | display: flex; 507 | flex-wrap: wrap; 508 | flex-direction: row; 509 | justify-content: center; 510 | label { 511 | display: flex; 512 | //flex-grow: 1; 513 | cursor: pointer; 514 | font-weight: 500; 515 | position: relative; 516 | overflow: hidden; 517 | margin: 0.3em; 518 | input { 519 | position: absolute; 520 | left: -9999px; 521 | &:checked + span { 522 | background-color: mix(#fff, $primary-color, 84%); 523 | &:before { 524 | box-shadow: inset 0 0 0 0.4375em $primary-color; 525 | } 526 | } 527 | } 528 | span { 529 | user-select: none; 530 | font-family: "Segoe UI Semibold", sans-serif; 531 | font-size: medium; 532 | display: flex; 533 | align-items: center; 534 | padding: 0.375em 0.75em 0.375em 0.375em; 535 | border-radius: 99em; // or something higher... 536 | transition: 0.25s ease; 537 | &:hover { 538 | background-color: mix(#fff, $primary-color, 84%); 539 | } 540 | &:before { 541 | display: flex; 542 | flex-shrink: 0; 543 | content: ""; 544 | background-color: #fff; 545 | width: 1.5em; 546 | height: 1.5em; 547 | border-radius: 50%; 548 | margin-right: 0.375em; 549 | transition: 0.25s ease; 550 | box-shadow: inset 0 0 0 0.125em $primary-color; 551 | } 552 | } 553 | } 554 | } 555 | 556 | //////////////////////////////////////////////// 557 | /// SLIDERS 558 | /// 559 | 560 | #hud_size_slider { 561 | &::before, 562 | &::after { 563 | --offset: 0; 564 | } 565 | 566 | .range-slider__progress { 567 | --start-end: 0; 568 | } 569 | } 570 | 571 | .range-slider { 572 | --value-offset-y: var(--ticks-gap); 573 | --value-active-color: white; 574 | --value-background: transparent; 575 | --value-background-hover: var(--primary-color); 576 | --value-font: 700 12px/1 Arial; 577 | 578 | --fill-color: var(--primary-color); 579 | --progress-background: #eee; 580 | --progress-radius: 20px; 581 | --track-height: calc(var(--thumb-size) / 2); 582 | 583 | --min-max-font: 12px Arial; 584 | --min-max-opacity: 0.5; 585 | --min-max-x-offset: 10%; // 50% to center 586 | 587 | --thumb-size: 22px; 588 | 589 | @media (prefers-color-scheme: dark) { 590 | // $red3_outline 591 | --primary-color: #ae181d; 592 | //$pnk2_selected 593 | --thumb-color: #bd003f; 594 | } 595 | @media (prefers-color-scheme: light) { 596 | --primary-color: #ae181d; 597 | --thumb-color: white; 598 | } 599 | 600 | --thumb-shadow: 0 0 3px rgba(0, 0, 0, 0.4), 0 0 1px rgba(0, 0, 0, 0.5) inset, 0 0 0 99px var(--thumb-color) inset; 601 | 602 | --thumb-shadow-active: 0 0 0 calc(var(--thumb-size) / 4) inset var(--thumb-color), 603 | 0 0 0 99px var(--primary-color) inset, 0 0 3px rgba(0, 0, 0, 0.4); 604 | 605 | --thumb-shadow-hover: var(--thumb-shadow); 606 | 607 | --ticks-thickness: 1px; 608 | --ticks-height: 5px; 609 | --ticks-gap: var(--ticks-height, 0); // vertical space between the ticks and the progress bar 610 | --ticks-color: silver; 611 | 612 | // ⚠️ BELOW VARIABLES SHOULD NOT BE CHANGED 613 | --step: 1; 614 | --ticks-count: Calc(var(--max) - var(--min)) / var(--step); 615 | --maxTicksAllowed: 30; 616 | --too-many-ticks: Min(1, Max(var(--ticks-count) - var(--maxTicksAllowed), 0)); 617 | --x-step: Max( 618 | var(--step), 619 | var(--too-many-ticks) * (var(--max) - var(--min)) 620 | ); // manipulate the number of steps if too many ticks exist, so there would only be 2 621 | --tickInterval: 100/ ((var(--max) - var(--min)) / var(--step)) * var(--tickEvery, 1); 622 | --tickIntervalPerc: calc( 623 | (100% - var(--thumb-size)) / ((var(--max) - var(--min)) / var(--x-step)) * var(--tickEvery, 1) 624 | ); 625 | 626 | --value-a: Clamp(var(--min), var(--value, 0), var(--max)); // default value ("--value" is used in single-range markup) 627 | --value-b: var(--value, 0); // default value 628 | --text-value-a: var(--text-value, ""); 629 | 630 | --completed-a: calc((var(--value-a) - var(--min)) / (var(--max) - var(--min)) * 100); 631 | --completed-b: calc((var(--value-b) - var(--min)) / (var(--max) - var(--min)) * 100); 632 | --ca: Min(var(--completed-a), var(--completed-b)); 633 | --cb: Max(var(--completed-a), var(--completed-b)); 634 | 635 | // breakdown of the below super-complex brain-breaking CSS math: 636 | // "clamp" is used to ensure either "-1" or "1" 637 | // "calc" is used to inflate the outcome into a huge number, to get rid of any value between -1 & 1 638 | // if absolute diff of both completed % is above "5" (%) 639 | // ".001" bumps the value just a bit, to avoid a scenario where calc resulted in "0" (then clamp will also be "0") 640 | --thumbs-too-close: Clamp(-1, 1000 * (Min(1, Max(var(--cb) - var(--ca) - 5, -1)) + 0.001), 1); 641 | --thumb-close-to-min: Min(1, Max(var(--ca) - 2, 0)); // 2% threshold 642 | --thumb-close-to-max: Min(1, Max(98 - var(--cb), 0)); // 2% threshold 643 | 644 | @mixin thumb { 645 | appearance: none; 646 | height: var(--thumb-size); 647 | width: var(--thumb-size); 648 | transform: var(--thumb-transform); 649 | border-radius: var(--thumb-radius, 50%); 650 | background: var(--thumb-color); 651 | box-shadow: var(--thumb-shadow); 652 | border: none; 653 | pointer-events: auto; 654 | transition: 0.1s; 655 | } 656 | 657 | display: inline-block; 658 | height: Max(var(--track-height), var(--thumb-size)); 659 | // margin: calc((var(--thumb-size) - var(--track-height)) * -.25) var(--thumb-size) 0; 660 | background: linear-gradient(to right, var(--ticks-color) var(--ticks-thickness), transparent 1px) repeat-x; 661 | background-size: var(--tickIntervalPerc) var(--ticks-height); 662 | background-position-x: calc(var(--thumb-size) / 2 - var(--ticks-thickness) / 2); 663 | background-position-y: var(--flip-y, bottom); 664 | 665 | padding-bottom: var(--flip-y, var(--ticks-gap)); 666 | padding-top: calc(var(--flip-y) * var(--ticks-gap)); 667 | margin-top: 13px; 668 | 669 | position: relative; 670 | z-index: 1; 671 | 672 | &[data-ticks-position="top"] { 673 | --flip-y: 1; 674 | } 675 | 676 | // mix/max texts 677 | &::before, 678 | &::after { 679 | --offset: calc(var(--thumb-size) / 2); 680 | content: counter(x); 681 | display: var(--show-min-max, block); 682 | font: var(--min-max-font); 683 | position: absolute; 684 | bottom: var(--flip-y, -2.5ch); 685 | top: calc(-2.5ch * var(--flip-y)); 686 | opacity: Clamp(0, var(--at-edge), var(--min-max-opacity)); 687 | transform: translateX(calc(var(--min-max-x-offset) * var(--before, -1) * -1)) scale(var(--at-edge)); 688 | pointer-events: none; 689 | } 690 | 691 | &::before { 692 | --before: 1; 693 | --at-edge: var(--thumb-close-to-min); 694 | counter-reset: x var(--min); 695 | left: var(--offset); 696 | } 697 | 698 | &::after { 699 | --at-edge: var(--thumb-close-to-max); 700 | counter-reset: x var(--max); 701 | right: var(--offset); 702 | } 703 | 704 | &__values { 705 | position: relative; 706 | top: 50%; 707 | line-height: 0; 708 | text-align: justify; 709 | width: 100%; 710 | pointer-events: none; 711 | margin: 0 auto; 712 | z-index: 5; 713 | 714 | // trick so "justify" will work 715 | &::after { 716 | content: ""; 717 | width: 100%; 718 | display: inline-block; 719 | height: 0; 720 | background: red; 721 | } 722 | } 723 | 724 | &__progress { 725 | --start-end: calc(var(--thumb-size) / 2); 726 | --clip-end: calc(100% - (var(--cb)) * 1%); 727 | --clip-start: calc(var(--ca) * 1%); 728 | --clip: inset(-20px var(--clip-end) -20px var(--clip-start)); 729 | position: absolute; 730 | left: var(--start-end); 731 | right: var(--start-end); 732 | top: calc(var(--ticks-gap) * var(--flip-y, 0) + var(--thumb-size) / 2 - var(--track-height) / 2); 733 | // transform: var(--flip-y, translateY(-50%) translateZ(0)); 734 | height: calc(var(--track-height)); 735 | background: var(--progress-background, #eee); 736 | pointer-events: none; 737 | z-index: -1; 738 | border-radius: var(--progress-radius); 739 | 740 | // fill area 741 | &::before { 742 | content: ""; 743 | position: absolute; 744 | // left: Clamp(0%, calc(var(--ca) * 1%), 100%); // confine to 0 or above 745 | // width: Min(100%, calc((var(--cb) - var(--ca)) * 1%)); // confine to maximum 100% 746 | left: 0; 747 | right: 0; 748 | clip-path: var(--clip); 749 | top: 0; 750 | bottom: 0; 751 | background: var(--fill-color, black); 752 | box-shadow: var(--progress-fill-shadow); 753 | z-index: 1; 754 | border-radius: inherit; 755 | } 756 | 757 | // shadow-effect 758 | &::after { 759 | content: ""; 760 | position: absolute; 761 | top: 0; 762 | right: 0; 763 | bottom: 0; 764 | left: 0; 765 | box-shadow: var(--progress-shadow); 766 | pointer-events: none; 767 | border-radius: inherit; 768 | } 769 | } 770 | 771 | & > input { 772 | -webkit-appearance: none; 773 | appearance: none; 774 | width: 100%; 775 | height: var(--thumb-size); 776 | margin: 0; 777 | position: absolute; 778 | left: 0; 779 | top: calc(50% - Max(var(--track-height), var(--thumb-size)) / 2 + calc(var(--ticks-gap) / 2 * var(--flip-y, -1))); 780 | cursor: -webkit-grab; 781 | cursor: grab; 782 | outline: none; 783 | background: none; 784 | 785 | &:not(:only-of-type) { 786 | pointer-events: none; 787 | } 788 | 789 | &::-webkit-slider-thumb { 790 | @include thumb; 791 | } 792 | &::-moz-range-thumb { 793 | @include thumb; 794 | } 795 | &::-ms-thumb { 796 | @include thumb; 797 | } 798 | 799 | &:hover { 800 | --thumb-shadow: var(--thumb-shadow-hover); 801 | & + output { 802 | --value-background: var(--value-background-hover); 803 | --y-offset: -5px; 804 | color: var(--value-active-color); 805 | box-shadow: 0 0 0 3px var(--value-background); 806 | } 807 | } 808 | 809 | &:active { 810 | --thumb-shadow: var(--thumb-shadow-active); 811 | cursor: grabbing; 812 | z-index: 2; // when sliding left thumb over the right or vice-versa, make sure the moved thumb is on top 813 | + output { 814 | transition: 0s; 815 | } 816 | } 817 | 818 | &:nth-of-type(1) { 819 | --is-left-most: Clamp(0, (var(--value-a) - var(--value-b)) * 99999, 1); 820 | & + output { 821 | &:not(:only-of-type) { 822 | --flip: calc(var(--thumbs-too-close) * -1); 823 | } 824 | 825 | --value: var(--value-a); 826 | --x-offset: calc(var(--completed-a) * -1%); 827 | &::after { 828 | content: var(--prefix, "") var(--text-value-a) var(--suffix, ""); 829 | } 830 | } 831 | } 832 | 833 | &:nth-of-type(2) { 834 | --is-left-most: Clamp(0, (var(--value-b) - var(--value-a)) * 99999, 1); 835 | & + output { 836 | --value: var(--value-b); 837 | } 838 | } 839 | 840 | // non-multiple range should not clip start of progress bar 841 | &:only-of-type { 842 | ~ .range-slider__progress { 843 | --clip-start: 0; 844 | } 845 | } 846 | 847 | & + output { 848 | --flip: -1; 849 | --x-offset: calc(var(--completed-b) * -1%); 850 | --pos: calc(((var(--value) - var(--min)) / (var(--max) - var(--min))) * 100%); 851 | 852 | pointer-events: none; 853 | position: absolute; 854 | z-index: 5; 855 | background: var(--value-background); 856 | border-radius: 10px; 857 | padding: 2px 4px; 858 | left: var(--pos); 859 | transform: translate( 860 | var(--x-offset), 861 | calc(150% * var(--flip) - (var(--y-offset, 0px) + var(--value-offset-y)) * var(--flip)) 862 | ); 863 | transition: all 0.12s ease-out, left 0s; 864 | 865 | &::after { 866 | content: var(--prefix, "") var(--text-value-b) var(--suffix, ""); 867 | font: var(--value-font); 868 | } 869 | } 870 | } 871 | } 872 | -------------------------------------------------------------------------------- /unpacked/popup/vendors/coloris/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Mohammed Bassit 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /unpacked/popup/vendors/coloris/coloris.min.css: -------------------------------------------------------------------------------- 1 | .clr-picker{display:none;flex-wrap:wrap;position:absolute;width:200px;z-index:1000;border-radius:10px;background-color:#fff;justify-content:flex-end;direction:ltr;box-shadow:0 0 5px rgba(0,0,0,.05),0 5px 20px rgba(0,0,0,.1);-moz-user-select:none;-webkit-user-select:none;user-select:none}.clr-picker.clr-open,.clr-picker[data-inline=true]{display:flex}.clr-picker[data-inline=true]{position:relative}.clr-gradient{position:relative;width:100%;height:100px;margin-bottom:15px;border-radius:3px 3px 0 0;background-image:linear-gradient(rgba(0,0,0,0),#000),linear-gradient(90deg,#fff,currentColor);cursor:pointer}.clr-marker{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border:1px solid #fff;border-radius:50%;background-color:currentColor;cursor:pointer}.clr-picker input[type=range]::-webkit-slider-runnable-track{width:100%;height:16px}.clr-picker input[type=range]::-webkit-slider-thumb{width:16px;height:16px;-webkit-appearance:none}.clr-picker input[type=range]::-moz-range-track{width:100%;height:16px;border:0}.clr-picker input[type=range]::-moz-range-thumb{width:16px;height:16px;border:0}.clr-hue{background-image:linear-gradient(to right,red 0,#ff0 16.66%,#0f0 33.33%,#0ff 50%,#00f 66.66%,#f0f 83.33%,red 100%)}.clr-alpha,.clr-hue{position:relative;width:calc(100% - 40px);height:8px;margin:5px 20px;border-radius:4px}.clr-alpha span{display:block;height:100%;width:100%;border-radius:inherit;background-image:linear-gradient(90deg,rgba(0,0,0,0),currentColor)}.clr-alpha input[type=range],.clr-hue input[type=range]{position:absolute;width:calc(100% + 32px);height:16px;left:-16px;top:-4px;margin:0;background-color:transparent;opacity:0;cursor:pointer;appearance:none;-webkit-appearance:none}.clr-alpha div,.clr-hue div{position:absolute;width:16px;height:16px;left:0;top:50%;margin-left:-8px;transform:translateY(-50%);border:2px solid #fff;border-radius:50%;background-color:currentColor;box-shadow:0 0 1px #888;pointer-events:none}.clr-alpha div:before{content:'';position:absolute;height:100%;width:100%;left:0;top:0;border-radius:50%;background-color:currentColor}.clr-format{display:none;order:1;width:calc(100% - 40px);margin:0 20px 20px}.clr-segmented{display:flex;position:relative;width:100%;margin:0;padding:0;border:1px solid #ddd;border-radius:15px;box-sizing:border-box;color:#999;font-size:12px}.clr-segmented input,.clr-segmented legend{position:absolute;width:100%;height:100%;margin:0;padding:0;border:0;left:0;top:0;opacity:0;pointer-events:none}.clr-segmented label{flex-grow:1;margin:0;padding:4px 0;font-size:inherit;font-weight:400;line-height:initial;text-align:center;cursor:pointer}.clr-segmented label:first-of-type{border-radius:10px 0 0 10px}.clr-segmented label:last-of-type{border-radius:0 10px 10px 0}.clr-segmented input:checked+label{color:#fff;background-color:#666}.clr-swatches{order:2;width:calc(100% - 32px);margin:0 16px}.clr-swatches div{display:flex;flex-wrap:wrap;padding-bottom:12px;justify-content:center}.clr-swatches button{position:relative;width:20px;height:20px;margin:0 4px 6px 4px;padding:0;border:0;border-radius:50%;color:inherit;text-indent:-1000px;white-space:nowrap;overflow:hidden;cursor:pointer}.clr-swatches button:after{content:'';display:block;position:absolute;width:100%;height:100%;left:0;top:0;border-radius:inherit;background-color:currentColor;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}input.clr-color{order:1;width:calc(100% - 80px);height:32px;margin:15px 20px 20px auto;padding:0 10px;border:1px solid #ddd;border-radius:16px;color:#444;background-color:#fff;font-family:sans-serif;font-size:14px;text-align:center;box-shadow:none}input.clr-color:focus{outline:0;border:1px solid #1e90ff}.clr-clear,.clr-close{display:none;order:2;height:24px;margin:0 20px 20px;padding:0 20px;border:0;border-radius:12px;color:#fff;background-color:#666;font-family:inherit;font-size:12px;font-weight:400;cursor:pointer}.clr-close{display:block;margin:0 20px 20px auto}.clr-preview{position:relative;width:32px;height:32px;margin:15px 0 20px 20px;border-radius:50%;overflow:hidden}.clr-preview:after,.clr-preview:before{content:'';position:absolute;height:100%;width:100%;left:0;top:0;border:1px solid #fff;border-radius:50%}.clr-preview:after{border:0;background-color:currentColor;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}.clr-preview button{position:absolute;width:100%;height:100%;z-index:1;margin:0;padding:0;border:0;border-radius:50%;outline-offset:-2px;background-color:transparent;text-indent:-9999px;cursor:pointer;overflow:hidden}.clr-alpha div,.clr-color,.clr-hue div,.clr-marker{box-sizing:border-box}.clr-field{display:inline-block;position:relative;color:transparent}.clr-field input{margin:0;direction:ltr}.clr-field.clr-rtl input{text-align:right}.clr-field button{position:absolute;width:30px;height:100%;right:0;top:50%;transform:translateY(-50%);margin:0;padding:0;border:0;color:inherit;text-indent:-1000px;white-space:nowrap;overflow:hidden;pointer-events:none}.clr-field.clr-rtl button{right:auto;left:0}.clr-field button:after{content:'';display:block;position:absolute;width:100%;height:100%;left:0;top:0;border-radius:inherit;background-color:currentColor;box-shadow:inset 0 0 1px rgba(0,0,0,.5)}.clr-alpha,.clr-alpha div,.clr-field button,.clr-preview:before,.clr-swatches button{background-image:repeating-linear-gradient(45deg,#aaa 25%,transparent 25%,transparent 75%,#aaa 75%,#aaa),repeating-linear-gradient(45deg,#aaa 25%,#fff 25%,#fff 75%,#aaa 75%,#aaa);background-position:0 0,4px 4px;background-size:8px 8px}.clr-marker:focus{outline:0}.clr-keyboard-nav .clr-alpha input:focus+div,.clr-keyboard-nav .clr-hue input:focus+div,.clr-keyboard-nav .clr-marker:focus,.clr-keyboard-nav .clr-segmented input:focus+label{outline:0;box-shadow:0 0 0 2px #1e90ff,0 0 2px 2px #fff}.clr-picker[data-alpha=false] .clr-alpha{display:none}.clr-picker[data-minimal=true]{padding-top:16px}.clr-picker[data-minimal=true] .clr-alpha,.clr-picker[data-minimal=true] .clr-color,.clr-picker[data-minimal=true] .clr-gradient,.clr-picker[data-minimal=true] .clr-hue,.clr-picker[data-minimal=true] .clr-preview{display:none}.clr-dark{background-color:#444}.clr-dark .clr-segmented{border-color:#777}.clr-dark .clr-swatches button:after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}.clr-dark input.clr-color{color:#fff;border-color:#777;background-color:#555}.clr-dark input.clr-color:focus{border-color:#1e90ff}.clr-dark .clr-preview:after{box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}.clr-dark .clr-alpha,.clr-dark .clr-alpha div,.clr-dark .clr-preview:before,.clr-dark .clr-swatches button{background-image:repeating-linear-gradient(45deg,#666 25%,transparent 25%,transparent 75%,#888 75%,#888),repeating-linear-gradient(45deg,#888 25%,#444 25%,#444 75%,#888 75%,#888)}.clr-picker.clr-polaroid{border-radius:6px;box-shadow:0 0 5px rgba(0,0,0,.1),0 5px 30px rgba(0,0,0,.2)}.clr-picker.clr-polaroid:before{content:'';display:block;position:absolute;width:16px;height:10px;left:20px;top:-10px;border:solid transparent;border-width:0 8px 10px 8px;border-bottom-color:currentColor;box-sizing:border-box;color:#fff;filter:drop-shadow(0 -4px 3px rgba(0,0,0,.1));pointer-events:none}.clr-picker.clr-polaroid.clr-dark:before{color:#444}.clr-picker.clr-polaroid.clr-left:before{left:auto;right:20px}.clr-picker.clr-polaroid.clr-top:before{top:auto;bottom:-10px;transform:rotateZ(180deg)}.clr-polaroid .clr-gradient{width:calc(100% - 20px);height:120px;margin:10px;border-radius:3px}.clr-polaroid .clr-alpha,.clr-polaroid .clr-hue{width:calc(100% - 30px);height:10px;margin:6px 15px;border-radius:5px}.clr-polaroid .clr-alpha div,.clr-polaroid .clr-hue div{box-shadow:0 0 5px rgba(0,0,0,.2)}.clr-polaroid .clr-format{width:calc(100% - 20px);margin:0 10px 15px}.clr-polaroid .clr-swatches{width:calc(100% - 12px);margin:0 6px}.clr-polaroid .clr-swatches div{padding-bottom:10px}.clr-polaroid .clr-swatches button{width:22px;height:22px}.clr-polaroid input.clr-color{width:calc(100% - 60px);margin:10px 10px 15px auto}.clr-polaroid .clr-clear{margin:0 10px 15px 10px}.clr-polaroid .clr-close{margin:0 10px 15px auto}.clr-polaroid .clr-preview{margin:10px 0 15px 10px}.clr-picker.clr-large{width:275px}.clr-large .clr-gradient{height:150px}.clr-large .clr-swatches button{width:22px;height:22px}.clr-picker.clr-pill{width:380px;padding-left:180px;box-sizing:border-box}.clr-pill .clr-gradient{position:absolute;width:180px;height:100%;left:0;top:0;margin-bottom:0;border-radius:3px 0 0 3px}.clr-pill .clr-hue{margin-top:20px} -------------------------------------------------------------------------------- /unpacked/popup/vendors/coloris/coloris.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * Copyright (c) 2021 Momo Bassit. 3 | * Licensed under the MIT License (MIT) 4 | * https://github.com/mdbassit/Coloris 5 | */ 6 | !function(u,p,s,c){var d,f,h,i,b,y,v,m,g,l,w,k,L,E,a,n,r=p.createElement("canvas").getContext("2d"),x={r:0,g:0,b:0,h:0,s:0,v:0,a:1},A={},C={el:"[data-coloris]",parent:"body",theme:"default",themeMode:"light",rtl:!1,wrap:!0,margin:2,format:"hex",formatToggle:!1,swatches:[],swatchesOnly:!1,alpha:!0,forceAlpha:!1,focusInput:!0,selectInput:!1,inline:!1,defaultColor:"#000000",clearButton:!1,clearLabel:"Clear",closeButton:!1,closeLabel:"Close",onChange:function(){return c},a11y:{open:"Open color picker",close:"Close color picker",clear:"Clear the selected color",marker:"Saturation: {s}. Brightness: {v}.",hueSlider:"Hue slider",alphaSlider:"Opacity slider",input:"Color value field",format:"Color format",swatch:"Color swatch",instruction:"Saturation and brightness selector. Use up, down, left and right arrow keys to select."}},o={},S="",T={},B=!1;function M(t){if("object"==typeof t)for(var e in t)switch(e){case"el":D(t.el),!1!==t.wrap&&R(t.el);break;case"parent":(d=t.parent instanceof HTMLElement?t.parent:p.querySelector(t.parent))&&(d.appendChild(f),C.parent=t.parent,d===p.body&&(d=c));break;case"themeMode":C.themeMode=t.themeMode,"auto"===t.themeMode&&u.matchMedia&&u.matchMedia("(prefers-color-scheme: dark)").matches&&(C.themeMode="dark");case"theme":t.theme&&(C.theme=t.theme),f.className="clr-picker clr-"+C.theme+" clr-"+C.themeMode,C.inline&&j();break;case"rtl":C.rtl=!!t.rtl,Array.from(p.getElementsByClassName("clr-field")).forEach(function(e){return e.classList.toggle("clr-rtl",C.rtl)});break;case"margin":t.margin*=1,C.margin=(isNaN(t.margin)?C:t).margin;break;case"wrap":t.el&&t.wrap&&R(t.el);break;case"formatToggle":C.formatToggle=!!t.formatToggle,V("clr-format").style.display=C.formatToggle?"block":"none",C.formatToggle&&(C.format="auto");break;case"swatches":Array.isArray(t.swatches)&&function(){var e=V("clr-swatches"),l=p.createElement("div");e.textContent="",t.swatches.forEach(function(e,t){var a=p.createElement("button");a.setAttribute("type","button"),a.setAttribute("id","clr-swatch-"+t),a.setAttribute("aria-labelledby","clr-swatch-label clr-swatch-"+t),a.style.color=e,a.textContent=e,l.appendChild(a)}),t.swatches.length&&e.appendChild(l),C.swatches=t.swatches.slice()}();break;case"swatchesOnly":C.swatchesOnly=!!t.swatchesOnly,f.setAttribute("data-minimal",C.swatchesOnly);break;case"alpha":C.alpha=!!t.alpha,f.setAttribute("data-alpha",C.alpha);break;case"inline":C.inline=!!t.inline,f.setAttribute("data-inline",C.inline),C.inline&&(l=t.defaultColor||C.defaultColor,E=P(l),j(),Y(l));break;case"clearButton":"object"==typeof t.clearButton&&(t.clearButton.label&&(C.clearLabel=t.clearButton.label,v.innerHTML=C.clearLabel),t.clearButton=t.clearButton.show),C.clearButton=!!t.clearButton,v.style.display=C.clearButton?"block":"none";break;case"clearLabel":C.clearLabel=t.clearLabel,v.innerHTML=C.clearLabel;break;case"closeButton":C.closeButton=!!t.closeButton,C.closeButton?f.insertBefore(m,b):b.appendChild(m);break;case"closeLabel":C.closeLabel=t.closeLabel,m.innerHTML=C.closeLabel;break;case"a11y":var a,l,r=t.a11y,n=!1;if("object"==typeof r)for(var o in r)r[o]&&C.a11y[o]&&(C.a11y[o]=r[o],n=!0);n&&(a=V("clr-open-label"),l=V("clr-swatch-label"),a.innerHTML=C.a11y.open,l.innerHTML=C.a11y.swatch,m.setAttribute("aria-label",C.a11y.close),v.setAttribute("aria-label",C.a11y.clear),g.setAttribute("aria-label",C.a11y.hueSlider),w.setAttribute("aria-label",C.a11y.alphaSlider),y.setAttribute("aria-label",C.a11y.input),h.setAttribute("aria-label",C.a11y.instruction));break;default:C[e]=t[e]}}function H(e,t){"string"==typeof e&&"object"==typeof t&&(o[e]=t,B=!0)}function N(e){delete o[e],0===Object.keys(o).length&&(B=!1,e===S&&O())}function t(l){if(B){var e,r=["el","wrap","rtl","inline","defaultColor","a11y"];for(e in o)if("break"===function(e){var t=o[e];if(l.matches(e)){for(var a in S=e,T={},r.forEach(function(e){return delete t[e]}),t)T[a]=Array.isArray(C[a])?C[a].slice():C[a];return M(t),"break"}}(e))break}}function O(){0r.clientWidth&&(a+=t.width-o,i.left=!0),l+c>r.clientHeight-e&&c+C.margin<=t.top-(s.y-n)&&(l-=t.height+c+2*C.margin,i.top=!0),l+=r.scrollTop):(a+o>p.documentElement.clientWidth&&(a+=t.width-o,i.left=!0),l+c-n>p.documentElement.clientHeight&&c+C.margin<=t.top&&(l=n+t.y-c-C.margin,i.top=!0)),f.classList.toggle("clr-left",i.left),f.classList.toggle("clr-top",i.top),f.style.left=a+"px",f.style.top=l+"px",s.x+=f.offsetLeft,s.y+=f.offsetTop),A={width:h.offsetWidth,height:h.offsetHeight,x:h.offsetLeft+s.x,y:h.offsetTop+s.y}}function R(e){e instanceof HTMLElement?W(e):(Array.isArray(e)?e:p.querySelectorAll(e)).forEach(W)}function W(e){var t,a,l=e.parentNode;l.classList.contains("clr-field")||(t=p.createElement("div"),a="clr-field",(C.rtl||e.classList.contains("clr-rtl"))&&(a+=" clr-rtl"),t.innerHTML='',l.insertBefore(t,e),t.className=a,t.style.color=e.value,t.appendChild(e))}function q(e){var t=e.target.parentNode;t.classList.contains("clr-field")&&(t.style.color=e.target.value)}function F(e){var t;L&&!C.inline&&(t=L,e&&(L=c,a!==t.value&&(t.value=a,t.dispatchEvent(new Event("input",{bubbles:!0})))),setTimeout(function(){a!==t.value&&t.dispatchEvent(new Event("change",{bubbles:!0}))}),f.classList.remove("clr-open"),B&&O(),t.dispatchEvent(new Event("close",{bubbles:!0})),C.focusInput&&t.focus({preventScroll:!0}),L=c)}function Y(e){var t=function(e){r.fillStyle="#000",r.fillStyle=e,e=(e=/^((rgba)|rgb)[\D]+([\d.]+)[\D]+([\d.]+)[\D]+([\d.]+)[\D]*?([\d.]+|$)/i.exec(r.fillStyle))?{r:+e[3],g:+e[4],b:+e[5],a:+e[6]}:(e=r.fillStyle.replace("#","").match(/.{2}/g).map(function(e){return parseInt(e,16)}),{r:e[0],g:e[1],b:e[2],a:1});return e}(e),e=function(e){var t=e.r/255,a=e.g/255,l=e.b/255,r=s.max(t,a,l),n=s.min(t,a,l),o=r-n,c=r,i=0,n=0;o&&(r===t&&(i=(a-l)/o),r===a&&(i=2+(l-t)/o),r===l&&(i=4+(t-a)/o),r&&(n=o/r));return{h:(i=s.floor(60*i))<0?i+360:i,s:s.round(100*n),v:s.round(100*c),a:e.a}}(t);G(e.s,e.v),z(t,e),g.value=e.h,f.style.color="hsl("+e.h+", 100%, 50%)",l.style.left=e.h/360*100+"%",i.style.left=A.width*e.s/100+"px",i.style.top=A.height-A.height*e.v/100+"px",w.value=100*e.a,k.style.left=100*e.a+"%"}function P(e){e=e.substring(0,3).toLowerCase();return"rgb"===e||"hsl"===e?e:"hex"}function U(e){e=e!==c?e:y.value,L&&(L.value=e,L.dispatchEvent(new Event("input",{bubbles:!0}))),C.onChange&&C.onChange.call(u,e,L),p.dispatchEvent(new CustomEvent("coloris:pick",{detail:{color:e,currentEl:L}}))}function X(e,t){e={h:+g.value,s:e/A.width*100,v:100-t/A.height*100,a:w.value/100},t=function(e){var t=e.s/100,a=e.v/100,l=t*a,r=e.h/60,n=l*(1-s.abs(r%2-1)),o=a-l;l+=o,n+=o;t=s.floor(r)%6,a=[l,n,o,o,n,l][t],r=[n,l,l,n,o,o][t],t=[o,o,n,l,l,n][t];return{r:s.round(255*a),g:s.round(255*r),b:s.round(255*t),a:e.a}}(e);G(e.s,e.v),z(t,e),U()}function G(e,t){var a=C.a11y.marker;e=+e.toFixed(1),t=+t.toFixed(1),a=(a=a.replace("{s}",e)).replace("{v}",t),i.setAttribute("aria-label",a)}function K(e){var t={pageX:((a=e).changedTouches?a.changedTouches[0]:a).pageX,pageY:(a.changedTouches?a.changedTouches[0]:a).pageY},a=t.pageX-A.x,t=t.pageY-A.y;d&&(t+=d.scrollTop),$(a,t),e.preventDefault(),e.stopPropagation()}function $(e,t){e=e<0?0:e>A.width?A.width:e,t=t<0?0:t>A.height?A.height:t,i.style.left=e+"px",i.style.top=t+"px",X(e,t),i.focus()}function z(e,t){void 0===t&&(t={});var a,l,r=C.format;for(a in e=void 0===e?{}:e)x[a]=e[a];for(l in t)x[l]=t[l];var n,o=function(e){var t=e.r.toString(16),a=e.g.toString(16),l=e.b.toString(16),r="";e.r<16&&(t="0"+t);e.g<16&&(a="0"+a);e.b<16&&(l="0"+l);C.alpha&&(e.a<1||C.forceAlpha)&&(e=255*e.a|0,r=e.toString(16),e<16&&(r="0"+r));return"#"+t+a+l+r}(x),c=o.substring(0,7);switch(i.style.color=c,k.parentNode.style.color=c,k.style.color=o,b.style.color=o,h.style.display="none",h.offsetHeight,h.style.display="",k.nextElementSibling.style.display="none",k.nextElementSibling.offsetHeight,k.nextElementSibling.style.display="","mixed"===r?r=1===x.a?"hex":"rgb":"auto"===r&&(r=E),r){case"hex":y.value=o;break;case"rgb":y.value=(n=x,!C.alpha||1===n.a&&!C.forceAlpha?"rgb("+n.r+", "+n.g+", "+n.b+")":"rgba("+n.r+", "+n.g+", "+n.b+", "+n.a+")");break;case"hsl":y.value=(n=function(e){var t,a=e.v/100,l=a*(1-e.s/100/2);0
'+C.a11y.format+'
",p.body.appendChild(f),h=V("clr-color-area"),i=V("clr-color-marker"),v=V("clr-clear"),m=V("clr-close"),b=V("clr-color-preview"),y=V("clr-color-value"),g=V("clr-hue-slider"),l=V("clr-hue-marker"),w=V("clr-alpha-slider"),k=V("clr-alpha-marker"),D(C.el),R(C.el),Z(f,"mousedown",function(e){f.classList.remove("clr-keyboard-nav"),e.stopPropagation()}),Z(h,"mousedown",function(e){Z(p,"mousemove",K)}),Z(h,"contextmenu",function(e){e.preventDefault()}),Z(h,"touchstart",function(e){p.addEventListener("touchmove",K,{passive:!1})}),Z(i,"mousedown",function(e){Z(p,"mousemove",K)}),Z(i,"touchstart",function(e){p.addEventListener("touchmove",K,{passive:!1})}),Z(y,"change",function(e){var t=y.value;(L||C.inline)&&U(""===t?t:Y(t))}),Z(v,"click",function(e){U(""),F()}),Z(m,"click",function(e){U(),F()}),Z(V("clr-format"),"click",".clr-format input",function(e){E=e.target.value,z(),U()}),Z(f,"click",".clr-swatches button",function(e){Y(e.target.textContent),U(),C.swatchesOnly&&F()}),Z(p,"mouseup",function(e){p.removeEventListener("mousemove",K)}),Z(p,"touchend",function(e){p.removeEventListener("touchmove",K)}),Z(p,"mousedown",function(e){n=!1,f.classList.remove("clr-keyboard-nav"),F()}),Z(p,"keydown",function(e){var t,a=e.key,l=e.target,r=e.shiftKey;"Escape"===a?F(!0):["Tab","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(a)&&(n=!0,f.classList.add("clr-keyboard-nav")),"Tab"===a&&l.matches(".clr-picker *")&&(a=(t=Q()).shift(),t=t.pop(),r&&l===a?(t.focus(),e.preventDefault()):r||l!==t||(a.focus(),e.preventDefault()))}),Z(p,"click",".clr-field button",function(e){B&&O(),e.target.nextElementSibling.dispatchEvent(new Event("click",{bubbles:!0}))}),Z(i,"keydown",function(e){var t={ArrowUp:[0,-1],ArrowDown:[0,1],ArrowLeft:[-1,0],ArrowRight:[1,0]};Object.keys(t).includes(e.key)&&(!function(e,t){$(+i.style.left.replace("px","")+e,+i.style.top.replace("px","")+t)}.apply(void 0,t[e.key]),e.preventDefault())}),Z(h,"click",K),Z(g,"input",e),Z(w,"input",J)})}(window,document,Math); -------------------------------------------------------------------------------- /unpacked/popup/vendors/coloris/vendor-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "coloris": { 3 | "version": "v0.24.0", 4 | "repository": "https://github.com/mdbassit/Coloris", 5 | "files": { 6 | "dist/coloris.min.js": "coloris.min.js", 7 | "dist/coloris.min.css": "coloris.min.css", 8 | "LICENSE": "LICENSE" 9 | } 10 | } 11 | } -------------------------------------------------------------------------------- /unpacked/popup/vendors/cooltipz/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020-present Jack Domleo 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /unpacked/popup/vendors/cooltipz/cooltipz.min.css: -------------------------------------------------------------------------------- 1 | /*! Cooltipz.css v2.3.1 | MIT License | github.com/jackdomleo7/Cooltipz.css */:root{--cooltipz-bg-color:#1f1f1f;--cooltipz-border-width:0;--cooltipz-border-style:solid;--cooltipz-border-color:#1f1f1f;--cooltipz-text-color:#fff;--cooltipz-font-size:0.75rem;--cooltipz-font-family:verdana,geneva,tahoma,var(--cooltipz-fontawesome,Arial),sans-serif;--cooltipz-slide:6px;--cooltipz-border-radius:0.125rem;--cooltipz-timing:120ms;--cooltipz-cursor:pointer;--cooltipz-small:6.25rem;--cooltipz-medium:12.5rem;--cooltipz-large:18.75rem;--cooltipz-arrow-size:0.3125rem;--cooltipz-arrow-offset:0px;--cooltipz-delay-show:0s;--cooltipz-delay-hide:0s}[aria-label][class*=cooltipz].cooltipz--bottom-left:before,[aria-label][class*=cooltipz].cooltipz--bottom-right:before,[aria-label][class*=cooltipz].cooltipz--bottom:before,[aria-label][class*=cooltipz].cooltipz--left:before,[aria-label][class*=cooltipz].cooltipz--right:before,[aria-label][class*=cooltipz].cooltipz--top-left:before,[aria-label][class*=cooltipz].cooltipz--top-right:before,[aria-label][class*=cooltipz].cooltipz--top:before,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom-left]:before,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom-right]:before,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom]:before,[aria-label][class*=cooltipz][data-cooltipz-dir=left]:before,[aria-label][class*=cooltipz][data-cooltipz-dir=right]:before,[aria-label][class*=cooltipz][data-cooltipz-dir=top-left]:before,[aria-label][class*=cooltipz][data-cooltipz-dir=top-right]:before,[aria-label][class*=cooltipz][data-cooltipz-dir=top]:before,[aria-label][data-cooltipz-dir].cooltipz--bottom-left:before,[aria-label][data-cooltipz-dir].cooltipz--bottom-right:before,[aria-label][data-cooltipz-dir].cooltipz--bottom:before,[aria-label][data-cooltipz-dir].cooltipz--left:before,[aria-label][data-cooltipz-dir].cooltipz--right:before,[aria-label][data-cooltipz-dir].cooltipz--top-left:before,[aria-label][data-cooltipz-dir].cooltipz--top-right:before,[aria-label][data-cooltipz-dir].cooltipz--top:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-left]:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-right]:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom]:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=left]:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=right]:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top-left]:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top-right]:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top]:before{border:var(--cooltipz-arrow-size,.3125rem) solid transparent;height:0;width:0}@media(forced-colors:active){[aria-label][class*=cooltipz].cooltipz--bottom-left:before,[aria-label][class*=cooltipz].cooltipz--bottom-right:before,[aria-label][class*=cooltipz].cooltipz--bottom:before,[aria-label][class*=cooltipz].cooltipz--left:before,[aria-label][class*=cooltipz].cooltipz--right:before,[aria-label][class*=cooltipz].cooltipz--top-left:before,[aria-label][class*=cooltipz].cooltipz--top-right:before,[aria-label][class*=cooltipz].cooltipz--top:before,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom-left]:before,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom-right]:before,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom]:before,[aria-label][class*=cooltipz][data-cooltipz-dir=left]:before,[aria-label][class*=cooltipz][data-cooltipz-dir=right]:before,[aria-label][class*=cooltipz][data-cooltipz-dir=top-left]:before,[aria-label][class*=cooltipz][data-cooltipz-dir=top-right]:before,[aria-label][class*=cooltipz][data-cooltipz-dir=top]:before,[aria-label][data-cooltipz-dir].cooltipz--bottom-left:before,[aria-label][data-cooltipz-dir].cooltipz--bottom-right:before,[aria-label][data-cooltipz-dir].cooltipz--bottom:before,[aria-label][data-cooltipz-dir].cooltipz--left:before,[aria-label][data-cooltipz-dir].cooltipz--right:before,[aria-label][data-cooltipz-dir].cooltipz--top-left:before,[aria-label][data-cooltipz-dir].cooltipz--top-right:before,[aria-label][data-cooltipz-dir].cooltipz--top:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-left]:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-right]:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom]:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=left]:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=right]:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top-left]:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top-right]:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top]:before{border-color:Canvas;-webkit-filter:none!important;filter:none!important}}[aria-label][class*=cooltipz].cooltipz--top-left:before,[aria-label][class*=cooltipz].cooltipz--top-right:before,[aria-label][class*=cooltipz].cooltipz--top:before,[aria-label][class*=cooltipz][data-cooltipz-dir=top-left]:before,[aria-label][class*=cooltipz][data-cooltipz-dir=top-right]:before,[aria-label][class*=cooltipz][data-cooltipz-dir=top]:before,[aria-label][data-cooltipz-dir].cooltipz--top-left:before,[aria-label][data-cooltipz-dir].cooltipz--top-right:before,[aria-label][data-cooltipz-dir].cooltipz--top:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top-left]:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top-right]:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top]:before{border-top-color:var(--cooltipz-border-color,#1f1f1f);-webkit-filter:drop-shadow(0 1px 1px rgba(0,0,0,.3));filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}@media(forced-colors:active){[aria-label][class*=cooltipz].cooltipz--top-left:before,[aria-label][class*=cooltipz].cooltipz--top-right:before,[aria-label][class*=cooltipz].cooltipz--top:before,[aria-label][class*=cooltipz][data-cooltipz-dir=top-left]:before,[aria-label][class*=cooltipz][data-cooltipz-dir=top-right]:before,[aria-label][class*=cooltipz][data-cooltipz-dir=top]:before,[aria-label][data-cooltipz-dir].cooltipz--top-left:before,[aria-label][data-cooltipz-dir].cooltipz--top-right:before,[aria-label][data-cooltipz-dir].cooltipz--top:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top-left]:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top-right]:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top]:before{border-top-color:CanvasText}}[aria-label][class*=cooltipz].cooltipz--bottom-left:before,[aria-label][class*=cooltipz].cooltipz--bottom-right:before,[aria-label][class*=cooltipz].cooltipz--bottom:before,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom-left]:before,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom-right]:before,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom]:before,[aria-label][data-cooltipz-dir].cooltipz--bottom-left:before,[aria-label][data-cooltipz-dir].cooltipz--bottom-right:before,[aria-label][data-cooltipz-dir].cooltipz--bottom:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-left]:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-right]:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom]:before{border-bottom-color:var(--cooltipz-border-color,#1f1f1f);-webkit-filter:drop-shadow(0 -1px 1px rgba(0,0,0,.3));filter:drop-shadow(0 -1px 1px rgba(0,0,0,.3))}@media(forced-colors:active){[aria-label][class*=cooltipz].cooltipz--bottom-left:before,[aria-label][class*=cooltipz].cooltipz--bottom-right:before,[aria-label][class*=cooltipz].cooltipz--bottom:before,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom-left]:before,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom-right]:before,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom]:before,[aria-label][data-cooltipz-dir].cooltipz--bottom-left:before,[aria-label][data-cooltipz-dir].cooltipz--bottom-right:before,[aria-label][data-cooltipz-dir].cooltipz--bottom:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-left]:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-right]:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom]:before{border-bottom-color:CanvasText}}[aria-label][class*=cooltipz].cooltipz--right:before,[aria-label][class*=cooltipz][data-cooltipz-dir=right]:before,[aria-label][data-cooltipz-dir].cooltipz--right:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=right]:before{border-right-color:var(--cooltipz-border-color,#1f1f1f);-webkit-filter:drop-shadow(-1px 0 1px rgba(0,0,0,.3));filter:drop-shadow(-1px 0 1px rgba(0,0,0,.3))}@media(forced-colors:active){[aria-label][class*=cooltipz].cooltipz--right:before,[aria-label][class*=cooltipz][data-cooltipz-dir=right]:before,[aria-label][data-cooltipz-dir].cooltipz--right:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=right]:before{border-right-color:CanvasText}}[aria-label][class*=cooltipz].cooltipz--left:before,[aria-label][class*=cooltipz][data-cooltipz-dir=left]:before,[aria-label][data-cooltipz-dir].cooltipz--left:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=left]:before{border-left-color:var(--cooltipz-border-color,#1f1f1f);-webkit-filter:drop-shadow(1px 0 1px rgba(0,0,0,.3));filter:drop-shadow(1px 0 1px rgba(0,0,0,.3))}@media(forced-colors:active){[aria-label][class*=cooltipz].cooltipz--left:before,[aria-label][class*=cooltipz][data-cooltipz-dir=left]:before,[aria-label][data-cooltipz-dir].cooltipz--left:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=left]:before{border-left-color:CanvasText}}[aria-label][class*=cooltipz].cooltipz--fit:after,[aria-label][class*=cooltipz].cooltipz--large:after,[aria-label][class*=cooltipz].cooltipz--medium:after,[aria-label][class*=cooltipz].cooltipz--small:after,[aria-label][class*=cooltipz][data-cooltipz-size=fit]:after,[aria-label][class*=cooltipz][data-cooltipz-size=large]:after,[aria-label][class*=cooltipz][data-cooltipz-size=medium]:after,[aria-label][class*=cooltipz][data-cooltipz-size=small]:after,[aria-label][data-cooltipz-dir].cooltipz--fit:after,[aria-label][data-cooltipz-dir].cooltipz--large:after,[aria-label][data-cooltipz-dir].cooltipz--medium:after,[aria-label][data-cooltipz-dir].cooltipz--small:after,[aria-label][data-cooltipz-dir][data-cooltipz-size=fit]:after,[aria-label][data-cooltipz-dir][data-cooltipz-size=large]:after,[aria-label][data-cooltipz-dir][data-cooltipz-size=medium]:after,[aria-label][data-cooltipz-dir][data-cooltipz-size=small]:after{white-space:normal;word-wrap:break-word}[aria-label][class*=cooltipz],[aria-label][data-cooltipz-dir]{cursor:var(--cooltipz-cursor,pointer);position:relative}[aria-label][class*=cooltipz]:after,[aria-label][data-cooltipz-dir]:after{background-color:var(--cooltipz-bg-color,#1f1f1f);border:var(--cooltipz-border-width,0) var(--cooltipz-border-style,solid) var(--cooltipz-border-color,#1f1f1f);border-radius:var(--cooltipz-border-radius,.125rem);-webkit-box-shadow:0 0 .1875rem rgba(0,0,0,.3);box-shadow:0 0 .1875rem rgba(0,0,0,.3);color:var(--cooltipz-text-color,#fff);content:attr(aria-label);font-family:var(--cooltipz-font-family,verdana,geneva,tahoma,var(--cooltipz-fontawesome,Arial),sans-serif);font-size:var(--cooltipz-font-size,.75rem);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-style:normal;font-weight:400;padding:.5em 1em;text-indent:0;text-shadow:none;white-space:nowrap;z-index:10}@media(forced-colors:active){[aria-label][class*=cooltipz]:after,[aria-label][data-cooltipz-dir]:after{border:1px solid CanvasText;color:CanvasText}}[aria-label][class*=cooltipz]:before,[aria-label][data-cooltipz-dir]:before{content:"";z-index:11}[aria-label][class*=cooltipz]:after,[aria-label][class*=cooltipz]:before,[aria-label][data-cooltipz-dir]:after,[aria-label][data-cooltipz-dir]:before{-webkit-box-sizing:border-box;box-sizing:border-box;opacity:0;pointer-events:none;position:absolute;-webkit-transition-delay:var(--cooltipz-delay-hide,0s);transition-delay:var(--cooltipz-delay-hide,0s);-webkit-transition:all var(--cooltipz-timing,.12s) ease-out var(--cooltipz-timing,.12s);transition:all var(--cooltipz-timing,.12s) ease-out var(--cooltipz-timing,.12s)}@media(prefers-reduced-motion:reduce){[aria-label][class*=cooltipz]:after,[aria-label][class*=cooltipz]:before,[aria-label][data-cooltipz-dir]:after,[aria-label][data-cooltipz-dir]:before{-webkit-transition:none;transition:none}}[aria-label][class*=cooltipz].cooltipz--visible:after,[aria-label][class*=cooltipz].cooltipz--visible:before,[aria-label][class*=cooltipz]:focus:after,[aria-label][class*=cooltipz]:focus:before,[aria-label][class*=cooltipz]:hover:after,[aria-label][class*=cooltipz]:hover:before,[aria-label][class*=cooltipz][data-cooltipz-visible]:after,[aria-label][class*=cooltipz][data-cooltipz-visible]:before,[aria-label][data-cooltipz-dir].cooltipz--visible:after,[aria-label][data-cooltipz-dir].cooltipz--visible:before,[aria-label][data-cooltipz-dir]:focus:after,[aria-label][data-cooltipz-dir]:focus:before,[aria-label][data-cooltipz-dir]:hover:after,[aria-label][data-cooltipz-dir]:hover:before,[aria-label][data-cooltipz-dir][data-cooltipz-visible]:after,[aria-label][data-cooltipz-dir][data-cooltipz-visible]:before{opacity:1;-webkit-transition-delay:var(--cooltipz-delay-show,0s);transition-delay:var(--cooltipz-delay-show,0s)}[aria-label][class*=cooltipz].cooltipz--top:after,[aria-label][class*=cooltipz][data-cooltipz-dir=top]:after,[aria-label][data-cooltipz-dir].cooltipz--top:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top]:after{margin-bottom:calc(var(--cooltipz-arrow-size, .3125rem)*2);-webkit-transform:translate(-50%,var(--cooltipz-slide,6px));transform:translate(-50%,var(--cooltipz-slide,6px))}[aria-label][class*=cooltipz].cooltipz--top:before,[aria-label][class*=cooltipz][data-cooltipz-dir=top]:before,[aria-label][data-cooltipz-dir].cooltipz--top:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top]:before{-webkit-transform:translate(calc(-50% + var(--cooltipz-arrow-offset, 0px)),var(--cooltipz-slide,6px));transform:translate(calc(-50% + var(--cooltipz-arrow-offset, 0px)),var(--cooltipz-slide,6px))}[aria-label][class*=cooltipz].cooltipz--top:after,[aria-label][class*=cooltipz].cooltipz--top:before,[aria-label][class*=cooltipz][data-cooltipz-dir=top]:after,[aria-label][class*=cooltipz][data-cooltipz-dir=top]:before,[aria-label][data-cooltipz-dir].cooltipz--top:after,[aria-label][data-cooltipz-dir].cooltipz--top:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top]:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top]:before{bottom:calc(100% - var(--cooltipz-arrow-size, .3125rem)/2);left:50%;-webkit-transform-origin:top;transform-origin:top}[aria-label][class*=cooltipz].cooltipz--top.cooltipz--visible:before,[aria-label][class*=cooltipz].cooltipz--top:focus:before,[aria-label][class*=cooltipz].cooltipz--top:hover:before,[aria-label][class*=cooltipz].cooltipz--top[data-cooltipz-visible]:before,[aria-label][class*=cooltipz][data-cooltipz-dir=top].cooltipz--visible:before,[aria-label][class*=cooltipz][data-cooltipz-dir=top]:focus:before,[aria-label][class*=cooltipz][data-cooltipz-dir=top]:hover:before,[aria-label][class*=cooltipz][data-cooltipz-dir=top][data-cooltipz-visible]:before,[aria-label][data-cooltipz-dir].cooltipz--top.cooltipz--visible:before,[aria-label][data-cooltipz-dir].cooltipz--top:focus:before,[aria-label][data-cooltipz-dir].cooltipz--top:hover:before,[aria-label][data-cooltipz-dir].cooltipz--top[data-cooltipz-visible]:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top].cooltipz--visible:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top]:focus:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top]:hover:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top][data-cooltipz-visible]:before{-webkit-transform:translate(calc(-50% + var(--cooltipz-arrow-offset, 0px)));transform:translate(calc(-50% + var(--cooltipz-arrow-offset, 0px)))}[aria-label][class*=cooltipz].cooltipz--top.cooltipz--visible:after,[aria-label][class*=cooltipz].cooltipz--top:focus:after,[aria-label][class*=cooltipz].cooltipz--top:hover:after,[aria-label][class*=cooltipz].cooltipz--top[data-cooltipz-visible]:after,[aria-label][class*=cooltipz][data-cooltipz-dir=top].cooltipz--visible:after,[aria-label][class*=cooltipz][data-cooltipz-dir=top]:focus:after,[aria-label][class*=cooltipz][data-cooltipz-dir=top]:hover:after,[aria-label][class*=cooltipz][data-cooltipz-dir=top][data-cooltipz-visible]:after,[aria-label][data-cooltipz-dir].cooltipz--top.cooltipz--visible:after,[aria-label][data-cooltipz-dir].cooltipz--top:focus:after,[aria-label][data-cooltipz-dir].cooltipz--top:hover:after,[aria-label][data-cooltipz-dir].cooltipz--top[data-cooltipz-visible]:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top].cooltipz--visible:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top]:focus:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top]:hover:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top][data-cooltipz-visible]:after{-webkit-transform:translate(-50%);transform:translate(-50%)}[aria-label][class*=cooltipz].cooltipz--top-left:after,[aria-label][class*=cooltipz][data-cooltipz-dir=top-left]:after,[aria-label][data-cooltipz-dir].cooltipz--top-left:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top-left]:after{left:0;margin-bottom:calc(var(--cooltipz-arrow-size, .3125rem)*2);-webkit-transform:translateY(var(--cooltipz-slide,6px));transform:translateY(var(--cooltipz-slide,6px))}[aria-label][class*=cooltipz].cooltipz--top-left:before,[aria-label][class*=cooltipz][data-cooltipz-dir=top-left]:before,[aria-label][data-cooltipz-dir].cooltipz--top-left:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top-left]:before{left:calc(var(--cooltipz-arrow-size, .3125rem)/2);-webkit-transform:translate(var(--cooltipz-arrow-offset,0),var(--cooltipz-slide,6px));transform:translate(var(--cooltipz-arrow-offset,0),var(--cooltipz-slide,6px))}[aria-label][class*=cooltipz].cooltipz--top-left:after,[aria-label][class*=cooltipz].cooltipz--top-left:before,[aria-label][class*=cooltipz][data-cooltipz-dir=top-left]:after,[aria-label][class*=cooltipz][data-cooltipz-dir=top-left]:before,[aria-label][data-cooltipz-dir].cooltipz--top-left:after,[aria-label][data-cooltipz-dir].cooltipz--top-left:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top-left]:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top-left]:before{bottom:calc(100% - var(--cooltipz-arrow-size, .3125rem)/2);-webkit-transform-origin:top;transform-origin:top}[aria-label][class*=cooltipz].cooltipz--top-left.cooltipz--visible:before,[aria-label][class*=cooltipz].cooltipz--top-left:focus:before,[aria-label][class*=cooltipz].cooltipz--top-left:hover:before,[aria-label][class*=cooltipz].cooltipz--top-left[data-cooltipz-visible]:before,[aria-label][class*=cooltipz][data-cooltipz-dir=top-left].cooltipz--visible:before,[aria-label][class*=cooltipz][data-cooltipz-dir=top-left]:focus:before,[aria-label][class*=cooltipz][data-cooltipz-dir=top-left]:hover:before,[aria-label][class*=cooltipz][data-cooltipz-dir=top-left][data-cooltipz-visible]:before,[aria-label][data-cooltipz-dir].cooltipz--top-left.cooltipz--visible:before,[aria-label][data-cooltipz-dir].cooltipz--top-left:focus:before,[aria-label][data-cooltipz-dir].cooltipz--top-left:hover:before,[aria-label][data-cooltipz-dir].cooltipz--top-left[data-cooltipz-visible]:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top-left].cooltipz--visible:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top-left]:focus:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top-left]:hover:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top-left][data-cooltipz-visible]:before{-webkit-transform:translate(var(--cooltipz-arrow-offset,0));transform:translate(var(--cooltipz-arrow-offset,0))}[aria-label][class*=cooltipz].cooltipz--top-left.cooltipz--visible:after,[aria-label][class*=cooltipz].cooltipz--top-left:focus:after,[aria-label][class*=cooltipz].cooltipz--top-left:hover:after,[aria-label][class*=cooltipz].cooltipz--top-left[data-cooltipz-visible]:after,[aria-label][class*=cooltipz][data-cooltipz-dir=top-left].cooltipz--visible:after,[aria-label][class*=cooltipz][data-cooltipz-dir=top-left]:focus:after,[aria-label][class*=cooltipz][data-cooltipz-dir=top-left]:hover:after,[aria-label][class*=cooltipz][data-cooltipz-dir=top-left][data-cooltipz-visible]:after,[aria-label][data-cooltipz-dir].cooltipz--top-left.cooltipz--visible:after,[aria-label][data-cooltipz-dir].cooltipz--top-left:focus:after,[aria-label][data-cooltipz-dir].cooltipz--top-left:hover:after,[aria-label][data-cooltipz-dir].cooltipz--top-left[data-cooltipz-visible]:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top-left].cooltipz--visible:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top-left]:focus:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top-left]:hover:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top-left][data-cooltipz-visible]:after{-webkit-transform:translate(0);transform:translate(0)}[aria-label][class*=cooltipz].cooltipz--top-right:after,[aria-label][class*=cooltipz][data-cooltipz-dir=top-right]:after,[aria-label][data-cooltipz-dir].cooltipz--top-right:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top-right]:after{margin-bottom:calc(var(--cooltipz-arrow-size, .3125rem)*2);right:0;-webkit-transform:translateY(var(--cooltipz-slide,6px));transform:translateY(var(--cooltipz-slide,6px))}[aria-label][class*=cooltipz].cooltipz--top-right:before,[aria-label][class*=cooltipz][data-cooltipz-dir=top-right]:before,[aria-label][data-cooltipz-dir].cooltipz--top-right:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top-right]:before{right:calc(var(--cooltipz-arrow-size, .3125rem)/2);-webkit-transform:translate(var(--cooltipz-arrow-offset,0),var(--cooltipz-slide,6px));transform:translate(var(--cooltipz-arrow-offset,0),var(--cooltipz-slide,6px))}[aria-label][class*=cooltipz].cooltipz--top-right:after,[aria-label][class*=cooltipz].cooltipz--top-right:before,[aria-label][class*=cooltipz][data-cooltipz-dir=top-right]:after,[aria-label][class*=cooltipz][data-cooltipz-dir=top-right]:before,[aria-label][data-cooltipz-dir].cooltipz--top-right:after,[aria-label][data-cooltipz-dir].cooltipz--top-right:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top-right]:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top-right]:before{bottom:calc(100% - var(--cooltipz-arrow-size, .3125rem)/2);-webkit-transform-origin:top;transform-origin:top}[aria-label][class*=cooltipz].cooltipz--top-right.cooltipz--visible:before,[aria-label][class*=cooltipz].cooltipz--top-right:focus:before,[aria-label][class*=cooltipz].cooltipz--top-right:hover:before,[aria-label][class*=cooltipz].cooltipz--top-right[data-cooltipz-visible]:before,[aria-label][class*=cooltipz][data-cooltipz-dir=top-right].cooltipz--visible:before,[aria-label][class*=cooltipz][data-cooltipz-dir=top-right]:focus:before,[aria-label][class*=cooltipz][data-cooltipz-dir=top-right]:hover:before,[aria-label][class*=cooltipz][data-cooltipz-dir=top-right][data-cooltipz-visible]:before,[aria-label][data-cooltipz-dir].cooltipz--top-right.cooltipz--visible:before,[aria-label][data-cooltipz-dir].cooltipz--top-right:focus:before,[aria-label][data-cooltipz-dir].cooltipz--top-right:hover:before,[aria-label][data-cooltipz-dir].cooltipz--top-right[data-cooltipz-visible]:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top-right].cooltipz--visible:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top-right]:focus:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top-right]:hover:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top-right][data-cooltipz-visible]:before{-webkit-transform:translate(var(--cooltipz-arrow-offset,0));transform:translate(var(--cooltipz-arrow-offset,0))}[aria-label][class*=cooltipz].cooltipz--top-right.cooltipz--visible:after,[aria-label][class*=cooltipz].cooltipz--top-right:focus:after,[aria-label][class*=cooltipz].cooltipz--top-right:hover:after,[aria-label][class*=cooltipz].cooltipz--top-right[data-cooltipz-visible]:after,[aria-label][class*=cooltipz][data-cooltipz-dir=top-right].cooltipz--visible:after,[aria-label][class*=cooltipz][data-cooltipz-dir=top-right]:focus:after,[aria-label][class*=cooltipz][data-cooltipz-dir=top-right]:hover:after,[aria-label][class*=cooltipz][data-cooltipz-dir=top-right][data-cooltipz-visible]:after,[aria-label][data-cooltipz-dir].cooltipz--top-right.cooltipz--visible:after,[aria-label][data-cooltipz-dir].cooltipz--top-right:focus:after,[aria-label][data-cooltipz-dir].cooltipz--top-right:hover:after,[aria-label][data-cooltipz-dir].cooltipz--top-right[data-cooltipz-visible]:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top-right].cooltipz--visible:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top-right]:focus:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top-right]:hover:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=top-right][data-cooltipz-visible]:after{-webkit-transform:translate(0);transform:translate(0)}[aria-label][class*=cooltipz].cooltipz--bottom:after,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom]:after,[aria-label][data-cooltipz-dir].cooltipz--bottom:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom]:after{margin-top:calc(var(--cooltipz-arrow-size, .3125rem)*2);-webkit-transform:translate(-50%,calc(var(--cooltipz-slide, 6px)*-1));transform:translate(-50%,calc(var(--cooltipz-slide, 6px)*-1))}[aria-label][class*=cooltipz].cooltipz--bottom:before,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom]:before,[aria-label][data-cooltipz-dir].cooltipz--bottom:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom]:before{-webkit-transform:translate(calc(-50% + var(--cooltipz-arrow-offset, 0px)),calc(var(--cooltipz-slide, 6px)*-1));transform:translate(calc(-50% + var(--cooltipz-arrow-offset, 0px)),calc(var(--cooltipz-slide, 6px)*-1))}[aria-label][class*=cooltipz].cooltipz--bottom:after,[aria-label][class*=cooltipz].cooltipz--bottom:before,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom]:after,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom]:before,[aria-label][data-cooltipz-dir].cooltipz--bottom:after,[aria-label][data-cooltipz-dir].cooltipz--bottom:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom]:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom]:before{left:50%;top:calc(100% - var(--cooltipz-arrow-size, .3125rem)/2);-webkit-transform-origin:bottom;transform-origin:bottom}[aria-label][class*=cooltipz].cooltipz--bottom.cooltipz--visible:before,[aria-label][class*=cooltipz].cooltipz--bottom:focus:before,[aria-label][class*=cooltipz].cooltipz--bottom:hover:before,[aria-label][class*=cooltipz].cooltipz--bottom[data-cooltipz-visible]:before,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom].cooltipz--visible:before,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom]:focus:before,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom]:hover:before,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom][data-cooltipz-visible]:before,[aria-label][data-cooltipz-dir].cooltipz--bottom.cooltipz--visible:before,[aria-label][data-cooltipz-dir].cooltipz--bottom:focus:before,[aria-label][data-cooltipz-dir].cooltipz--bottom:hover:before,[aria-label][data-cooltipz-dir].cooltipz--bottom[data-cooltipz-visible]:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom].cooltipz--visible:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom]:focus:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom]:hover:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom][data-cooltipz-visible]:before{-webkit-transform:translate(calc(-50% + var(--cooltipz-arrow-offset, 0px)));transform:translate(calc(-50% + var(--cooltipz-arrow-offset, 0px)))}[aria-label][class*=cooltipz].cooltipz--bottom.cooltipz--visible:after,[aria-label][class*=cooltipz].cooltipz--bottom:focus:after,[aria-label][class*=cooltipz].cooltipz--bottom:hover:after,[aria-label][class*=cooltipz].cooltipz--bottom[data-cooltipz-visible]:after,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom].cooltipz--visible:after,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom]:focus:after,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom]:hover:after,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom][data-cooltipz-visible]:after,[aria-label][data-cooltipz-dir].cooltipz--bottom.cooltipz--visible:after,[aria-label][data-cooltipz-dir].cooltipz--bottom:focus:after,[aria-label][data-cooltipz-dir].cooltipz--bottom:hover:after,[aria-label][data-cooltipz-dir].cooltipz--bottom[data-cooltipz-visible]:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom].cooltipz--visible:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom]:focus:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom]:hover:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom][data-cooltipz-visible]:after{-webkit-transform:translate(-50%);transform:translate(-50%)}[aria-label][class*=cooltipz].cooltipz--bottom-left:after,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom-left]:after,[aria-label][data-cooltipz-dir].cooltipz--bottom-left:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-left]:after{left:0;margin-top:calc(var(--cooltipz-arrow-size, .3125rem)*2);-webkit-transform:translateY(calc(var(--cooltipz-slide, 6px)*-1));transform:translateY(calc(var(--cooltipz-slide, 6px)*-1))}[aria-label][class*=cooltipz].cooltipz--bottom-left:before,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom-left]:before,[aria-label][data-cooltipz-dir].cooltipz--bottom-left:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-left]:before{left:calc(var(--cooltipz-arrow-size, .3125rem)/2);-webkit-transform:translate(var(--cooltipz-arrow-offset,0),calc(var(--cooltipz-slide, 6px)*-1));transform:translate(var(--cooltipz-arrow-offset,0),calc(var(--cooltipz-slide, 6px)*-1))}[aria-label][class*=cooltipz].cooltipz--bottom-left:after,[aria-label][class*=cooltipz].cooltipz--bottom-left:before,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom-left]:after,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom-left]:before,[aria-label][data-cooltipz-dir].cooltipz--bottom-left:after,[aria-label][data-cooltipz-dir].cooltipz--bottom-left:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-left]:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-left]:before{top:calc(100% - var(--cooltipz-arrow-size, .3125rem)/2);-webkit-transform-origin:bottom;transform-origin:bottom}[aria-label][class*=cooltipz].cooltipz--bottom-left.cooltipz--visible:before,[aria-label][class*=cooltipz].cooltipz--bottom-left:focus:before,[aria-label][class*=cooltipz].cooltipz--bottom-left:hover:before,[aria-label][class*=cooltipz].cooltipz--bottom-left[data-cooltipz-visible]:before,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom-left].cooltipz--visible:before,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom-left]:focus:before,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom-left]:hover:before,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom-left][data-cooltipz-visible]:before,[aria-label][data-cooltipz-dir].cooltipz--bottom-left.cooltipz--visible:before,[aria-label][data-cooltipz-dir].cooltipz--bottom-left:focus:before,[aria-label][data-cooltipz-dir].cooltipz--bottom-left:hover:before,[aria-label][data-cooltipz-dir].cooltipz--bottom-left[data-cooltipz-visible]:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-left].cooltipz--visible:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-left]:focus:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-left]:hover:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-left][data-cooltipz-visible]:before{-webkit-transform:translate(var(--cooltipz-arrow-offset,0));transform:translate(var(--cooltipz-arrow-offset,0))}[aria-label][class*=cooltipz].cooltipz--bottom-left.cooltipz--visible:after,[aria-label][class*=cooltipz].cooltipz--bottom-left:focus:after,[aria-label][class*=cooltipz].cooltipz--bottom-left:hover:after,[aria-label][class*=cooltipz].cooltipz--bottom-left[data-cooltipz-visible]:after,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom-left].cooltipz--visible:after,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom-left]:focus:after,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom-left]:hover:after,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom-left][data-cooltipz-visible]:after,[aria-label][data-cooltipz-dir].cooltipz--bottom-left.cooltipz--visible:after,[aria-label][data-cooltipz-dir].cooltipz--bottom-left:focus:after,[aria-label][data-cooltipz-dir].cooltipz--bottom-left:hover:after,[aria-label][data-cooltipz-dir].cooltipz--bottom-left[data-cooltipz-visible]:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-left].cooltipz--visible:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-left]:focus:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-left]:hover:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-left][data-cooltipz-visible]:after{-webkit-transform:translate(0);transform:translate(0)}[aria-label][class*=cooltipz].cooltipz--bottom-right:after,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom-right]:after,[aria-label][data-cooltipz-dir].cooltipz--bottom-right:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-right]:after{margin-top:calc(var(--cooltipz-arrow-size, .3125rem)*2);right:0;-webkit-transform:translateY(calc(var(--cooltipz-slide, 6px)*-1));transform:translateY(calc(var(--cooltipz-slide, 6px)*-1))}[aria-label][class*=cooltipz].cooltipz--bottom-right:before,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom-right]:before,[aria-label][data-cooltipz-dir].cooltipz--bottom-right:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-right]:before{right:calc(var(--cooltipz-arrow-size, .3125rem)/2);-webkit-transform:translate(var(--cooltipz-arrow-offset,0),calc(var(--cooltipz-slide, 6px)*-1));transform:translate(var(--cooltipz-arrow-offset,0),calc(var(--cooltipz-slide, 6px)*-1))}[aria-label][class*=cooltipz].cooltipz--bottom-right:after,[aria-label][class*=cooltipz].cooltipz--bottom-right:before,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom-right]:after,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom-right]:before,[aria-label][data-cooltipz-dir].cooltipz--bottom-right:after,[aria-label][data-cooltipz-dir].cooltipz--bottom-right:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-right]:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-right]:before{top:calc(100% - var(--cooltipz-arrow-size, .3125rem)/2);-webkit-transform-origin:bottom;transform-origin:bottom}[aria-label][class*=cooltipz].cooltipz--bottom-right.cooltipz--visible:before,[aria-label][class*=cooltipz].cooltipz--bottom-right:focus:before,[aria-label][class*=cooltipz].cooltipz--bottom-right:hover:before,[aria-label][class*=cooltipz].cooltipz--bottom-right[data-cooltipz-visible]:before,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom-right].cooltipz--visible:before,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom-right]:focus:before,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom-right]:hover:before,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom-right][data-cooltipz-visible]:before,[aria-label][data-cooltipz-dir].cooltipz--bottom-right.cooltipz--visible:before,[aria-label][data-cooltipz-dir].cooltipz--bottom-right:focus:before,[aria-label][data-cooltipz-dir].cooltipz--bottom-right:hover:before,[aria-label][data-cooltipz-dir].cooltipz--bottom-right[data-cooltipz-visible]:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-right].cooltipz--visible:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-right]:focus:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-right]:hover:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-right][data-cooltipz-visible]:before{-webkit-transform:translate(var(--cooltipz-arrow-offset,0));transform:translate(var(--cooltipz-arrow-offset,0))}[aria-label][class*=cooltipz].cooltipz--bottom-right.cooltipz--visible:after,[aria-label][class*=cooltipz].cooltipz--bottom-right:focus:after,[aria-label][class*=cooltipz].cooltipz--bottom-right:hover:after,[aria-label][class*=cooltipz].cooltipz--bottom-right[data-cooltipz-visible]:after,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom-right].cooltipz--visible:after,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom-right]:focus:after,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom-right]:hover:after,[aria-label][class*=cooltipz][data-cooltipz-dir=bottom-right][data-cooltipz-visible]:after,[aria-label][data-cooltipz-dir].cooltipz--bottom-right.cooltipz--visible:after,[aria-label][data-cooltipz-dir].cooltipz--bottom-right:focus:after,[aria-label][data-cooltipz-dir].cooltipz--bottom-right:hover:after,[aria-label][data-cooltipz-dir].cooltipz--bottom-right[data-cooltipz-visible]:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-right].cooltipz--visible:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-right]:focus:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-right]:hover:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=bottom-right][data-cooltipz-visible]:after{-webkit-transform:translate(0);transform:translate(0)}[aria-label][class*=cooltipz].cooltipz--left:after,[aria-label][class*=cooltipz][data-cooltipz-dir=left]:after,[aria-label][data-cooltipz-dir].cooltipz--left:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=left]:after{margin-right:calc(var(--cooltipz-arrow-size, .3125rem)*2);-webkit-transform:translate(var(--cooltipz-slide,6px),-50%);transform:translate(var(--cooltipz-slide,6px),-50%)}[aria-label][class*=cooltipz].cooltipz--left:before,[aria-label][class*=cooltipz][data-cooltipz-dir=left]:before,[aria-label][data-cooltipz-dir].cooltipz--left:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=left]:before{-webkit-transform:translate(var(--cooltipz-slide,6px),calc(-50% + var(--cooltipz-arrow-offset, 0px)));transform:translate(var(--cooltipz-slide,6px),calc(-50% + var(--cooltipz-arrow-offset, 0px)))}[aria-label][class*=cooltipz].cooltipz--left:after,[aria-label][class*=cooltipz].cooltipz--left:before,[aria-label][class*=cooltipz][data-cooltipz-dir=left]:after,[aria-label][class*=cooltipz][data-cooltipz-dir=left]:before,[aria-label][data-cooltipz-dir].cooltipz--left:after,[aria-label][data-cooltipz-dir].cooltipz--left:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=left]:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=left]:before{right:calc(100% - var(--cooltipz-arrow-size, .3125rem)/2);top:50%;-webkit-transform-origin:left;transform-origin:left}[aria-label][class*=cooltipz].cooltipz--left.cooltipz--visible:before,[aria-label][class*=cooltipz].cooltipz--left:focus:before,[aria-label][class*=cooltipz].cooltipz--left:hover:before,[aria-label][class*=cooltipz].cooltipz--left[data-cooltipz-visible]:before,[aria-label][class*=cooltipz][data-cooltipz-dir=left].cooltipz--visible:before,[aria-label][class*=cooltipz][data-cooltipz-dir=left]:focus:before,[aria-label][class*=cooltipz][data-cooltipz-dir=left]:hover:before,[aria-label][class*=cooltipz][data-cooltipz-dir=left][data-cooltipz-visible]:before,[aria-label][data-cooltipz-dir].cooltipz--left.cooltipz--visible:before,[aria-label][data-cooltipz-dir].cooltipz--left:focus:before,[aria-label][data-cooltipz-dir].cooltipz--left:hover:before,[aria-label][data-cooltipz-dir].cooltipz--left[data-cooltipz-visible]:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=left].cooltipz--visible:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=left]:focus:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=left]:hover:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=left][data-cooltipz-visible]:before{-webkit-transform:translateY(calc(-50% + var(--cooltipz-arrow-offset, 0px)));transform:translateY(calc(-50% + var(--cooltipz-arrow-offset, 0px)))}[aria-label][class*=cooltipz].cooltipz--left.cooltipz--visible:after,[aria-label][class*=cooltipz].cooltipz--left:focus:after,[aria-label][class*=cooltipz].cooltipz--left:hover:after,[aria-label][class*=cooltipz].cooltipz--left[data-cooltipz-visible]:after,[aria-label][class*=cooltipz][data-cooltipz-dir=left].cooltipz--visible:after,[aria-label][class*=cooltipz][data-cooltipz-dir=left]:focus:after,[aria-label][class*=cooltipz][data-cooltipz-dir=left]:hover:after,[aria-label][class*=cooltipz][data-cooltipz-dir=left][data-cooltipz-visible]:after,[aria-label][data-cooltipz-dir].cooltipz--left.cooltipz--visible:after,[aria-label][data-cooltipz-dir].cooltipz--left:focus:after,[aria-label][data-cooltipz-dir].cooltipz--left:hover:after,[aria-label][data-cooltipz-dir].cooltipz--left[data-cooltipz-visible]:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=left].cooltipz--visible:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=left]:focus:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=left]:hover:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=left][data-cooltipz-visible]:after{-webkit-transform:translateY(-50%);transform:translateY(-50%)}[aria-label][class*=cooltipz].cooltipz--right:after,[aria-label][class*=cooltipz][data-cooltipz-dir=right]:after,[aria-label][data-cooltipz-dir].cooltipz--right:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=right]:after{margin-left:calc(var(--cooltipz-arrow-size, .3125rem)*2);-webkit-transform:translate(calc(var(--cooltipz-slide, 6px)*-1),-50%);transform:translate(calc(var(--cooltipz-slide, 6px)*-1),-50%)}[aria-label][class*=cooltipz].cooltipz--right:before,[aria-label][class*=cooltipz][data-cooltipz-dir=right]:before,[aria-label][data-cooltipz-dir].cooltipz--right:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=right]:before{-webkit-transform:translate(calc(var(--cooltipz-slide, 6px)*-1),calc(-50% + var(--cooltipz-arrow-offset, 0px)));transform:translate(calc(var(--cooltipz-slide, 6px)*-1),calc(-50% + var(--cooltipz-arrow-offset, 0px)))}[aria-label][class*=cooltipz].cooltipz--right:after,[aria-label][class*=cooltipz].cooltipz--right:before,[aria-label][class*=cooltipz][data-cooltipz-dir=right]:after,[aria-label][class*=cooltipz][data-cooltipz-dir=right]:before,[aria-label][data-cooltipz-dir].cooltipz--right:after,[aria-label][data-cooltipz-dir].cooltipz--right:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=right]:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=right]:before{left:calc(100% - var(--cooltipz-arrow-size, .3125rem)/2);top:50%;-webkit-transform-origin:right;transform-origin:right}[aria-label][class*=cooltipz].cooltipz--right.cooltipz--visible:before,[aria-label][class*=cooltipz].cooltipz--right:focus:before,[aria-label][class*=cooltipz].cooltipz--right:hover:before,[aria-label][class*=cooltipz].cooltipz--right[data-cooltipz-visible]:before,[aria-label][class*=cooltipz][data-cooltipz-dir=right].cooltipz--visible:before,[aria-label][class*=cooltipz][data-cooltipz-dir=right]:focus:before,[aria-label][class*=cooltipz][data-cooltipz-dir=right]:hover:before,[aria-label][class*=cooltipz][data-cooltipz-dir=right][data-cooltipz-visible]:before,[aria-label][data-cooltipz-dir].cooltipz--right.cooltipz--visible:before,[aria-label][data-cooltipz-dir].cooltipz--right:focus:before,[aria-label][data-cooltipz-dir].cooltipz--right:hover:before,[aria-label][data-cooltipz-dir].cooltipz--right[data-cooltipz-visible]:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=right].cooltipz--visible:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=right]:focus:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=right]:hover:before,[aria-label][data-cooltipz-dir][data-cooltipz-dir=right][data-cooltipz-visible]:before{-webkit-transform:translateY(calc(-50% + var(--cooltipz-arrow-offset, 0px)));transform:translateY(calc(-50% + var(--cooltipz-arrow-offset, 0px)))}[aria-label][class*=cooltipz].cooltipz--right.cooltipz--visible:after,[aria-label][class*=cooltipz].cooltipz--right:focus:after,[aria-label][class*=cooltipz].cooltipz--right:hover:after,[aria-label][class*=cooltipz].cooltipz--right[data-cooltipz-visible]:after,[aria-label][class*=cooltipz][data-cooltipz-dir=right].cooltipz--visible:after,[aria-label][class*=cooltipz][data-cooltipz-dir=right]:focus:after,[aria-label][class*=cooltipz][data-cooltipz-dir=right]:hover:after,[aria-label][class*=cooltipz][data-cooltipz-dir=right][data-cooltipz-visible]:after,[aria-label][data-cooltipz-dir].cooltipz--right.cooltipz--visible:after,[aria-label][data-cooltipz-dir].cooltipz--right:focus:after,[aria-label][data-cooltipz-dir].cooltipz--right:hover:after,[aria-label][data-cooltipz-dir].cooltipz--right[data-cooltipz-visible]:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=right].cooltipz--visible:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=right]:focus:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=right]:hover:after,[aria-label][data-cooltipz-dir][data-cooltipz-dir=right][data-cooltipz-visible]:after{-webkit-transform:translateY(-50%);transform:translateY(-50%)}[aria-label][class*=cooltipz].cooltipz--fit:after,[aria-label][class*=cooltipz][data-cooltipz-size=fit]:after,[aria-label][data-cooltipz-dir].cooltipz--fit:after,[aria-label][data-cooltipz-dir][data-cooltipz-size=fit]:after{width:100%}[aria-label][class*=cooltipz].cooltipz--small:after,[aria-label][class*=cooltipz][data-cooltipz-size=small]:after,[aria-label][data-cooltipz-dir].cooltipz--small:after,[aria-label][data-cooltipz-dir][data-cooltipz-size=small]:after{width:var(--cooltipz-small,6.25rem)}[aria-label][class*=cooltipz].cooltipz--medium:after,[aria-label][class*=cooltipz][data-cooltipz-size=medium]:after,[aria-label][data-cooltipz-dir].cooltipz--medium:after,[aria-label][data-cooltipz-dir][data-cooltipz-size=medium]:after{width:var(--cooltipz-medium,12.5rem)}[aria-label][class*=cooltipz].cooltipz--large:after,[aria-label][class*=cooltipz][data-cooltipz-size=large]:after,[aria-label][data-cooltipz-dir].cooltipz--large:after,[aria-label][data-cooltipz-dir][data-cooltipz-size=large]:after{width:var(--cooltipz-large,18.75rem)}[aria-label][class*=cooltipz].cooltipz--custom:after,[aria-label][class*=cooltipz][data-cooltipz-size=custom]:after,[aria-label][data-cooltipz-dir].cooltipz--custom:after,[aria-label][data-cooltipz-dir][data-cooltipz-size=custom]:after{white-space:pre;word-wrap:break-word}[aria-label][class*=cooltipz].cooltipz--static:after,[aria-label][class*=cooltipz].cooltipz--static:before,[aria-label][class*=cooltipz][data-cooltipz-static]:after,[aria-label][class*=cooltipz][data-cooltipz-static]:before,[aria-label][data-cooltipz-dir].cooltipz--static:after,[aria-label][data-cooltipz-dir].cooltipz--static:before,[aria-label][data-cooltipz-dir][data-cooltipz-static]:after,[aria-label][data-cooltipz-dir][data-cooltipz-static]:before{-webkit-transition:none;transition:none}[aria-label=""][class*=cooltipz]:after,[aria-label=""][class*=cooltipz]:before,[aria-label=""][data-cooltipz-dir]:after,[aria-label=""][data-cooltipz-dir]:before{display:none} -------------------------------------------------------------------------------- /unpacked/popup/vendors/cooltipz/vendor-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "cooltipz": { 3 | "repository": "https://github.com/jackdomleo7/Cooltipz.css", 4 | "version": "v2.3.1", 5 | "files": { 6 | "cooltipz.min.css": "cooltipz.min.css", 7 | "LICENSE": "LICENSE" 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /unpacked/style.css: -------------------------------------------------------------------------------- 1 | .volume-hud-custom { 2 | z-index: 50; 3 | position: absolute; 4 | pointer-events: none; 5 | user-select: none; 6 | font-size: 50px; 7 | padding: 10px; 8 | transition: opacity 0.6s; 9 | font-weight: 600; 10 | text-shadow: -1px 1px 2px #000, 1px 1px 2px #000, 1px -1px 0 #000, -1px -1px 0 #000; 11 | color: #eee; 12 | } 13 | 14 | .volume-hud-custom.music { 15 | top: 10px; 16 | left: 10px; 17 | } 18 | 19 | .volume-hud-custom:not(.music) { 20 | top: 5px; 21 | right: 5px; 22 | } 23 | 24 | .volume-hud-native { 25 | user-select: none; 26 | pointer-events: none; 27 | transition: opacity 0.3s; 28 | color: #dedddd; 29 | } 30 | 31 | /* font-size: 0; fixes a bug with position mode, where after its disabled and hidden the browser still allows dragging it 32 | when the font size is 0 - the bug is still present but the draggable area shrinks to 1 pixel which drastically lowers the effect of the bug */ 33 | body[ytvs_type="native"] .volume-hud-custom { 34 | opacity: 0 !important; 35 | font-size: 0 !important; 36 | } 37 | 38 | body[ytvs_type="custom"] .volume-hud-native-wrapper { 39 | opacity: 0 !important; 40 | font-size: 0 !important; 41 | } 42 | 43 | body[ytvs_type="none"] .volume-hud-custom, 44 | body[ytvs_type="none"] .volume-hud-native-wrapper { 45 | opacity: 0 !important; 46 | font-size: 0 !important; 47 | } 48 | --------------------------------------------------------------------------------