diff --git a/manifest.json b/manifest.json index 8e6c48a..c0556c5 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "id": "ninja-cursor", "name": "Ninja Cursor", - "version": "0.0.7", + "version": "0.0.8", "minAppVersion": "0.12.0", "description": "The plugin which enhance cursor visibility.", "author": "vorotamoroz", diff --git a/package-lock.json b/package-lock.json index e310740..1bdd13b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "ninja-cursor", - "version": "0.0.7", + "version": "0.0.8", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "ninja-cursor", - "version": "0.0.7", + "version": "0.0.8", "license": "MIT", "devDependencies": { "@types/node": "^16.11.6", diff --git a/package.json b/package.json index e1ba77f..87e71e2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ninja-cursor", - "version": "0.0.7", + "version": "0.0.8", "description": "The plugin which enhance cursor visibility.", "main": "main.js", "scripts": { diff --git a/styles.css b/styles.css index 56e17c8..bc90b1b 100644 --- a/styles.css +++ b/styles.css @@ -1,3 +1,21 @@ +:root { + --cursor-x1: "0px"; + --cursor-x2: "0px"; + --cursor-y1src: "0px"; + --cursor-y2src: "0px"; + --cursor-offset-y: "0px"; + --cursor-drag-distance: "0px"; + --cursor-drag-angle: "0deg"; + --cursor-drag-width: "0px"; + --cursor-drag-height: "0px"; + + --cursor-height: 18px; + --cursor-y1: calc(var(--cursor-y1src) + var(--cursor-offset-y)); + --cursor-y2: calc(var(--cursor-y2src) + var(--cursor-offset-y)); + --cursor-visibility: "hidden"; + /* --cursor-margin-height: calc(var(--header-height)); */ +} + .x-cursor { position: relative; top: 0; @@ -34,23 +52,7 @@ animation: a2 75ms cubic-bezier(0.34, 1.26, 0.84, 1) 0s both; } -:root { - --cursor-x1: "0px"; - --cursor-x2: "0px"; - --cursor-y1src: "0px"; - --cursor-y2src: "0px"; - --cursor-offset-y: "0px"; - --cursor-drag-distance: "0px"; - --cursor-drag-angle: "0deg"; - --cursor-drag-width: "0px"; - --cursor-drag-height: "0px"; - --cursor-height: 18px; - --cursor-y1: calc(var(--cursor-y1src) + var(--cursor-offset-y)); - --cursor-y2: calc(var(--cursor-y2src) + var(--cursor-offset-y)); - --cursor-visibility: "hidden"; - /* --cursor-color: --text-normal; */ -} .cursorWrapper { display: block; @@ -59,7 +61,7 @@ pointer-events: none; background-color: transparent; position: fixed; - top: 0; + top: var(--header-height); left: 0; right: 0; bottom: 0; @@ -69,7 +71,7 @@ @keyframes a1 { 0% { - transform: translate3d(var(--cursor-x1), var(--cursor-y1), 0); + transform: translate3d(var(--cursor-x1), calc(var(--cursor-y1) - var(--header-height)), 0); background-color: var(--text-normal); opacity: 0; } @@ -83,7 +85,7 @@ } 90% { - transform: translate3d(var(--cursor-x2), var(--cursor-y2), 0); + transform: translate3d(var(--cursor-x2), calc(var(--cursor-y2) - var(--header-height)), 0); background-color: var(--text-normal); opacity: 0.9; } @@ -95,7 +97,7 @@ @keyframes a2 { 0% { - transform: translate3d(var(--cursor-x1), var(--cursor-y1), 0); + transform: translate3d(var(--cursor-x1), calc(var(--cursor-y1) - var(--header-height)), 0); background-color: var(--text-normal); opacity: 0; } @@ -109,7 +111,7 @@ } 90% { - transform: translate3d(var(--cursor-x2), var(--cursor-y2), 0); + transform: translate3d(var(--cursor-x2), calc(var(--cursor-y2) - var(--header-height)), 0); background-color: var(--text-normal); opacity: 0.9; }