diff --git a/manifest.json b/manifest.json index 1a82951..8812343 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "id": "ninja-cursor", "name": "Ninja Cursor", - "version": "0.0.11", + "version": "0.0.12", "minAppVersion": "0.12.0", "description": "The plugin which enhance cursor visibility.", "author": "vorotamoroz", diff --git a/package-lock.json b/package-lock.json index baaadb2..4bbd7a6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "ninja-cursor", - "version": "0.0.11", + "version": "0.0.12", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "ninja-cursor", - "version": "0.0.11", + "version": "0.0.12", "license": "MIT", "devDependencies": { "@types/node": "^16.11.6", diff --git a/package.json b/package.json index 870a656..5ec133e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ninja-cursor", - "version": "0.0.11", + "version": "0.0.12", "description": "The plugin which enhance cursor visibility.", "main": "main.js", "scripts": { diff --git a/styles.css b/styles.css index ae13ebf..19b14f1 100644 --- a/styles.css +++ b/styles.css @@ -1,122 +1,123 @@ .cursorWrapper { - --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)); */ + --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; - left: 0; - height: var(--cursor-height); - width: 8px; - display: inline-block; - user-select: none; - background: var(--text-normal); - transform: translate3d(var(--cursor-x2), var(--cursor-y2), 0); - opacity: 0; - pointer-events: none; - visibility: var(--cursor-visibility); + position: relative; + top: 0; + left: 0; + height: var(--cursor-height); + width: 8px; + display: inline-block; + user-select: none; + background: var(--text-normal); + transform: translate3d(var(--cursor-x2), var(--cursor-y2), 0); + opacity: 0; + pointer-events: none; + visibility: var(--cursor-visibility); } .x-cursor:after { - content: ""; - height: var(--cursor-drag-height); - width: var(--cursor-drag-width); - display: inline-block; - user-select: none; - background: linear-gradient(to right, var(--text-normal), transparent); - transform: rotate(var(--cursor-drag-angle)); - transform-origin: 4px center; - opacity: 0.5; - pointer-events: none; + content: ""; + height: var(--cursor-drag-height); + width: var(--cursor-drag-width); + display: inline-block; + user-select: none; + background: linear-gradient(to right, var(--text-normal), transparent); + transform: rotate(var(--cursor-drag-angle)); + transform-origin: 4px center; + opacity: 0.5; + pointer-events: none; } .x-cursor0 { - animation: a1 75ms cubic-bezier(0.34, 1.26, 0.84, 1) 0s both; + animation: a1 75ms cubic-bezier(0.34, 1.26, 0.84, 1) 0s both; } .x-cursor1 { - animation: a2 75ms cubic-bezier(0.34, 1.26, 0.84, 1) 0s both; + animation: a2 75ms cubic-bezier(0.34, 1.26, 0.84, 1) 0s both; } .cursorWrapper { - display: block; - overflow: hidden; - user-select: none; - pointer-events: none; - background-color: transparent; - position: fixed; - top: var(--header-height); - left: 0; - right: 0; - bottom: 0; - margin: 0; - padding: 0; + display: block; + overflow: hidden; + user-select: none; + pointer-events: none; + background-color: transparent; + position: fixed; + top: var(--header-height); + left: 0; + right: 0; + bottom: 0; + margin: 0; + padding: 0; + -webkit-app-region: initial !important; } @keyframes a1 { - 0% { - transform: translate3d(var(--cursor-x1), calc(var(--cursor-y1) - var(--header-height)), 0); - background-color: var(--text-normal); - opacity: 0; - } - - 4% { - opacity: 1; - } - - 80% { - opacity: 0.95; - } - - 90% { - transform: translate3d(var(--cursor-x2), calc(var(--cursor-y2) - var(--header-height)), 0); - background-color: var(--text-normal); - opacity: 0.9; - } - - 100% { - opacity: 0; - } + 0% { + transform: translate3d(var(--cursor-x1), calc(var(--cursor-y1) - var(--header-height)), 0); + background-color: var(--text-normal); + opacity: 0; + } + + 4% { + opacity: 1; + } + + 80% { + opacity: 0.95; + } + + 90% { + transform: translate3d(var(--cursor-x2), calc(var(--cursor-y2) - var(--header-height)), 0); + background-color: var(--text-normal); + opacity: 0.9; + } + + 100% { + opacity: 0; + } } @keyframes a2 { - 0% { - transform: translate3d(var(--cursor-x1), calc(var(--cursor-y1) - var(--header-height)), 0); - background-color: var(--text-normal); - opacity: 0; - } - - 4% { - opacity: 1; - } - - 80% { - opacity: 0.95; - } - - 90% { - transform: translate3d(var(--cursor-x2), calc(var(--cursor-y2) - var(--header-height)), 0); - background-color: var(--text-normal); - opacity: 0.9; - } - - 100% { - opacity: 0; - } -} \ No newline at end of file + 0% { + transform: translate3d(var(--cursor-x1), calc(var(--cursor-y1) - var(--header-height)), 0); + background-color: var(--text-normal); + opacity: 0; + } + + 4% { + opacity: 1; + } + + 80% { + opacity: 0.95; + } + + 90% { + transform: translate3d(var(--cursor-x2), calc(var(--cursor-y2) - var(--header-height)), 0); + background-color: var(--text-normal); + opacity: 0.9; + } + + 100% { + opacity: 0; + } +}