@omnipad/vue 0.5.0 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.d.ts +20 -17
  2. package/dist/omnipad-vue.css +1 -1
  3. package/dist/omnipad-vue.mjs +527 -505
  4. package/dist/omnipad-vue.umd.js +1 -1
  5. package/package.json +2 -2
package/dist/index.d.ts CHANGED
@@ -46,7 +46,7 @@ onPointerDown: (e: PointerEvent) => any;
46
46
  onPointerMove: (e: PointerEvent) => any;
47
47
  onPointerUp: (e: PointerEvent) => any;
48
48
  onPointerCancel: (e: PointerEvent) => any;
49
- markRectDirty: () => (() => void) | undefined;
49
+ markRectDirty: () => () => void;
50
50
  }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<VirtualButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
51
51
  elementRef: ({
52
52
  $: ComponentInternalInstance;
@@ -118,7 +118,7 @@ onPointerDown: (e: PointerEvent) => any;
118
118
  onPointerMove: (e: PointerEvent) => any;
119
119
  onPointerUp: (e: PointerEvent) => any;
120
120
  onPointerCancel: (e: PointerEvent) => any;
121
- markRectDirty: () => void | undefined;
121
+ markRectDirty: () => void;
122
122
  }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<VirtualDPadProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
123
123
  elementRef: ({
124
124
  $: ComponentInternalInstance;
@@ -128,7 +128,7 @@ readonly layout?: LayoutBox | undefined;
128
128
  readonly isActive?: boolean | undefined;
129
129
  readonly vector?: Vec2 | undefined;
130
130
  readonly showStick?: boolean | undefined;
131
- readonly baseRadius?: Vec2 | undefined;
131
+ readonly baseSize?: Vec2 | undefined;
132
132
  } & VNodeProps & AllowedComponentProps & ComponentCustomProps;
133
133
  $attrs: {
134
134
  [x: string]: unknown;
@@ -149,7 +149,7 @@ layout?: LayoutBox;
149
149
  isActive?: boolean;
150
150
  vector?: Vec2;
151
151
  showStick?: boolean;
152
- baseRadius?: Vec2;
152
+ baseSize?: Vec2;
153
153
  }> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & {
154
154
  beforeCreate?: (() => void) | (() => void)[];
155
155
  created?: (() => void) | (() => void)[];
@@ -175,7 +175,7 @@ layout?: LayoutBox;
175
175
  isActive?: boolean;
176
176
  vector?: Vec2;
177
177
  showStick?: boolean;
178
- baseRadius?: Vec2;
178
+ baseSize?: Vec2;
179
179
  }> & Readonly<{}>, never> & ShallowUnwrapRef< {}> & {} & ComponentCustomProperties & {} & {
180
180
  $slots: {
181
181
  base?(_: {
@@ -200,7 +200,7 @@ onPointerDown: (e: PointerEvent) => any;
200
200
  onPointerMove: (e: PointerEvent) => any;
201
201
  onPointerUp: (e: PointerEvent) => any;
202
202
  onPointerCancel: (e: PointerEvent) => any;
203
- markRectDirty: () => (() => void) | undefined;
203
+ markRectDirty: () => () => void;
204
204
  }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<VirtualTrackpadProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
205
205
  elementRef: ({
206
206
  $: ComponentInternalInstance;
@@ -272,7 +272,7 @@ onPointerDown: (e: PointerEvent) => any;
272
272
  onPointerMove: (e: PointerEvent) => any;
273
273
  onPointerUp: (e: PointerEvent) => any;
274
274
  onPointerCancel: (e: PointerEvent) => any;
275
- markRectDirty: () => (() => void) | undefined;
275
+ markRectDirty: () => () => void;
276
276
  }, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<VirtualJoystickProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
277
277
  elementRef: ({
278
278
  $: ComponentInternalInstance;
@@ -282,7 +282,7 @@ readonly layout?: LayoutBox | undefined;
282
282
  readonly isActive?: boolean | undefined;
283
283
  readonly vector?: Vec2 | undefined;
284
284
  readonly showStick?: boolean | undefined;
285
- readonly baseRadius?: Vec2 | undefined;
285
+ readonly baseSize?: Vec2 | undefined;
286
286
  } & VNodeProps & AllowedComponentProps & ComponentCustomProps;
287
287
  $attrs: {
288
288
  [x: string]: unknown;
@@ -303,7 +303,7 @@ layout?: LayoutBox;
303
303
  isActive?: boolean;
304
304
  vector?: Vec2;
305
305
  showStick?: boolean;
306
- baseRadius?: Vec2;
306
+ baseSize?: Vec2;
307
307
  }> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & {
308
308
  beforeCreate?: (() => void) | (() => void)[];
309
309
  created?: (() => void) | (() => void)[];
@@ -329,7 +329,7 @@ layout?: LayoutBox;
329
329
  isActive?: boolean;
330
330
  vector?: Vec2;
331
331
  showStick?: boolean;
332
- baseRadius?: Vec2;
332
+ baseSize?: Vec2;
333
333
  }> & Readonly<{}>, never> & ShallowUnwrapRef< {}> & {} & ComponentCustomProperties & {} & {
334
334
  $slots: {
335
335
  base?(_: {
@@ -560,7 +560,7 @@ declare function __VLS_template_5(): {
560
560
  readonly isActive?: boolean | undefined;
561
561
  readonly vector?: Vec2 | undefined;
562
562
  readonly showStick?: boolean | undefined;
563
- readonly baseRadius?: Vec2 | undefined;
563
+ readonly baseSize?: Vec2 | undefined;
564
564
  } & VNodeProps & AllowedComponentProps & ComponentCustomProps;
565
565
  $attrs: {
566
566
  [x: string]: unknown;
@@ -581,7 +581,7 @@ declare function __VLS_template_5(): {
581
581
  isActive?: boolean;
582
582
  vector?: Vec2;
583
583
  showStick?: boolean;
584
- baseRadius?: Vec2;
584
+ baseSize?: Vec2;
585
585
  }> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & {
586
586
  beforeCreate?: (() => void) | (() => void)[];
587
587
  created?: (() => void) | (() => void)[];
@@ -607,7 +607,7 @@ declare function __VLS_template_5(): {
607
607
  isActive?: boolean;
608
608
  vector?: Vec2;
609
609
  showStick?: boolean;
610
- baseRadius?: Vec2;
610
+ baseSize?: Vec2;
611
611
  }> & Readonly<{}>, never> & ShallowUnwrapRef< {}> & {} & ComponentCustomProperties & {} & {
612
612
  $slots: {
613
613
  base?(_: {
@@ -736,7 +736,7 @@ declare function __VLS_template_7(): {
736
736
  readonly isActive?: boolean | undefined;
737
737
  readonly vector?: Vec2 | undefined;
738
738
  readonly showStick?: boolean | undefined;
739
- readonly baseRadius?: Vec2 | undefined;
739
+ readonly baseSize?: Vec2 | undefined;
740
740
  } & VNodeProps & AllowedComponentProps & ComponentCustomProps;
741
741
  $attrs: {
742
742
  [x: string]: unknown;
@@ -757,7 +757,7 @@ declare function __VLS_template_7(): {
757
757
  isActive?: boolean;
758
758
  vector?: Vec2;
759
759
  showStick?: boolean;
760
- baseRadius?: Vec2;
760
+ baseSize?: Vec2;
761
761
  }> & Readonly<{}>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, {}, {}, string, {}, GlobalComponents, GlobalDirectives, string, ComponentProvideOptions> & {
762
762
  beforeCreate?: (() => void) | (() => void)[];
763
763
  created?: (() => void) | (() => void)[];
@@ -783,7 +783,7 @@ declare function __VLS_template_7(): {
783
783
  isActive?: boolean;
784
784
  vector?: Vec2;
785
785
  showStick?: boolean;
786
- baseRadius?: Vec2;
786
+ baseSize?: Vec2;
787
787
  }> & Readonly<{}>, never> & ShallowUnwrapRef< {}> & {} & ComponentCustomProperties & {} & {
788
788
  $slots: {
789
789
  base?(_: {
@@ -894,7 +894,10 @@ declare interface TargetZoneProps {
894
894
  /** Unique configuration ID (CID) for this zone. Used for profile serialization. */
895
895
  widgetId?: string;
896
896
  /** Whether to render a visual virtual cursor. */
897
- cursorEnabled?: boolean;
897
+ cursorEnabled?: {
898
+ type: boolean;
899
+ default: undefined;
900
+ };
898
901
  /** Delay in milliseconds before the virtual cursor auto-hides after inactivity (0 to disable). */
899
902
  cursorAutoDelay?: number;
900
903
  /** Spatial layout configuration. Usually set to cover the entire game container. */
package/dist/omnipad-vue.css CHANGED
@@ -1 +1 @@
1
- :root{--omnipad-btn-bg: rgba(255, 255, 255, .2);--omnipad-btn-border-color: rgba(255, 255, 255, .4);--omnipad-btn-border-style: solid;--omnipad-btn-border-width: 2px;--omnipad-btn-radius: 8px;--omnipad-btn-font-family: "Upheaval", "monacoregular", sans-serif;--omnipad-btn-font-size: 18px;--omnipad-btn-font-weight: bold;--omnipad-btn-label-color: #ffffff;--omnipad-btn-pressed-bg: rgba(255, 186, 67, .6);--omnipad-btn-pressed-border-color: #ffba43;--omnipad-btn-pressed-opacity: 1;--omnipad-btn-pressed-scale: .92;--omnipad-btn-transition-duration: .1s;--omnipad-btn-transition-timing: ease-out;--omnipad-dpad-arm-bg: rgba(255, 255, 255, .15);--omnipad-dpad-arm-border: 2px solid rgba(255, 255, 255, .4);--omnipad-dpad-arm-border-radius: 8px;--omnipad-dpad-active-bg: rgba(255, 186, 67, .6);--omnipad-dpad-active-border: #ffba43;--omnipad-dpad-active-scale: .96;--omnipad-dpad-active-transform: scale(var(--omnipad-dpad-active-scale));--omnipad-dpad-bg: rgba(255, 255, 255, .05);--omnipad-dpad-border-radius: 50%;--omnipad-default-cursor-height: 20px;--omnipad-default-cursor-width: 20px;--omnipad-default-cursor-transition: var(--omnipad-default-cursor-transition-mode) var(--omnipad-default-cursor-transition-time);--omnipad-default-cursor-transition-mode: opacity;--omnipad-default-cursor-transition-time: .2s;--omnipad-default-cursor-dot-background: #ff000080;--omnipad-default-cursor-dot-border-color: #ffffff;--omnipad-default-cursor-dot-border-radius: 50%;--omnipad-default-cursor-dot-border-style: solid;--omnipad-default-cursor-dot-border-width: 2px;--omnipad-default-cursor-dot-down-background: #ff0000;--omnipad-default-cursor-dot-down-scale: .8;--omnipad-default-axis-stick-bg: rgba(255, 255, 255, .4);--omnipad-default-axis-stick-border-color: rgba(255, 255, 255, .8);--omnipad-default-axis-stick-border-radius: 50%;--omnipad-default-axis-stick-border-style: solid;--omnipad-default-axis-stick-border-width: 2px;--omnipad-default-axis-stick-box-shadow: 0 4px 10px rgba(0, 0, 0, .3);--omnipad-default-axis-stick-height-scaler: .2;--omnipad-default-axis-stick-width-scaler: .2;--omnipad-default-axis-stick-active-bg: rgba(255, 186, 67, .6);--omnipad-default-axis-stick-active-border-color: #ffba43;--omnipad-focus-color: rgba(255, 186, 67, .8);--omnipad-focus-bg-color: rgba(100, 200, 255, .05);--omnipad-joystick-base-border-color: rgba(255, 255, 255, .4);--omnipad-joystick-base-border-radius: 50%;--omnipad-joystick-base-border-style: solid;--omnipad-joystick-base-border-width: 2px;--omnipad-joystick-base-bg: rgba(255, 255, 255, .2);--omnipad-default-joystick-stick-height-scaler: .5;--omnipad-default-joystick-stick-width-scaler: .5;--omnipad-joystick-btn-bg: rgba(255, 255, 255, .2);--omnipad-joystick-btn-border-color: rgba(255, 255, 255, .4);--omnipad-joystick-btn-border-style: solid;--omnipad-joystick-btn-border-width: 2px;--omnipad-joystick-btn-radius: 50%;--omnipad-trackpad-bg: rgba(255, 255, 255, .05);--omnipad-trackpad-border-style: dashed;--omnipad-trackpad-cursor: crosshair}.omnipad-default-button-base{background:var(--omnipad-btn-bg);border:var(--omnipad-btn-border-width) var(--omnipad-btn-border-style) var(--omnipad-btn-border-color);border-radius:var(--omnipad-btn-radius);transition:all var(--omnipad-btn-transition-duration) var(--omnipad-btn-transition-timing)}.omnipad-default-cursor-dot{width:100%;height:100%;box-sizing:border-box;background:var(--omnipad-default-cursor-dot-background);border-color:var(--omnipad-default-cursor-dot-border-color);border-radius:var(--omnipad-default-cursor-dot-border-radius);border-style:var(--omnipad-default-cursor-dot-border-style);border-width:var(--omnipad-default-cursor-dot-border-width)}.omnipad-default-cursor-dot.is-down{transform:scale(var(--omnipad-default-cursor-dot-down-scale));background:var(--omnipad-default-cursor-dot-down-background)}.omnipad-default-axis-stick{width:100%;height:100%;box-sizing:border-box;background:var(--omnipad-default-axis-stick-bg);border-width:var(--omnipad-default-axis-stick-border-width);border-style:var(--omnipad-default-axis-stick-border-style);border-color:var(--omnipad-default-axis-stick-border-color);border-radius:var(--omnipad-default-axis-stick-border-radius);box-shadow:var(--omnipad-default-axis-stick-box-shadow)}.omnipad-default-axis-stick.is-active{background:var(--omnipad-default-axis-stick-active-bg);border-color:var(--omnipad-default-axis-stick-active-border-color)}.omnipad-default-focus-border-feedback{position:absolute;inset:0;pointer-events:none;z-index:5;border:2px solid var(--omnipad-focus-color);background-color:var(--omnipad-focus-bg-color);box-shadow:inset 0 0 10px var(--omnipad-focus-color);box-sizing:border-box}.omnipad-default-focus-fade-enter-active{transition:opacity .05s ease-in}.omnipad-default-focus-fade-leave-active{transition:opacity .2s ease-out}.omnipad-default-focus-fade-enter-from,.omnipad-default-focus-fade-leave-to{opacity:0}.omnipad-prevent{touch-action:none;user-select:none;outline:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.omnipad-trackpad:before{content:"";position:absolute;inset:10px;background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1px);background-size:20px 20px;pointer-events:none}.omnipad-virtual-layer-base[data-v-a172c7c0]{position:absolute;inset:0;pointer-events:none;z-index:1000}[data-v-a172c7c0] .omnipad-input-zone,[data-v-a172c7c0] .omnipad-button{pointer-events:auto}.omnipad-input-zone[data-v-2f22290e]{position:relative;pointer-events:none;container-type:size}.omnipad-input-zone-trigger[data-v-2f22290e]{position:absolute;inset:0;pointer-events:auto;background:transparent;touch-action:none}.dynamic-widget-mount[data-v-2f22290e]{position:absolute;left:0;top:0;pointer-events:none;will-change:transform;transform:translate3d(var(--dynamic-widget-mount-x, 0px),var(--dynamic-widget-mount-y, 0px),0);--dynamic-widget-mount-x: 0px;--dynamic-widget-mount-y: 0px}.omnipad-root-layer[data-v-ad8f02d4]{position:relative;pointer-events:none}.omnipad-target-zone[data-v-b1782723]{position:relative;pointer-events:auto;overflow:hidden;container-type:size}.omnipad-virtual-cursor[data-v-b1782723]{position:absolute;top:0;left:0;width:var(--omnipad-default-cursor-width);height:var(--omnipad-default-cursor-height);pointer-events:none;will-change:transform;transition:var(--omnipad-default-cursor-transition);z-index:10;transform:translate3d(calc(-50% + var(--omnipad-virtual-cursor-x, 0px)),calc(-50% + var(--omnipad-virtual-cursor-y, 0px)),0);--omnipad-virtual-cursor-x: 0px;--omnipad-virtual-cursor-y: 0px}.omnipad-button-base[data-v-f6a6e082]{position:relative;overflow:hidden;box-sizing:border-box;pointer-events:auto;will-change:transform,opacity}.omnipad-default-button-base[data-v-f6a6e082]{position:absolute;inset:0;pointer-events:none}.omnipad-button-content-layer[data-v-f6a6e082]{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.omnipad-default-button-base.is-active[data-v-f6a6e082]{background:var(--omnipad-btn-pressed-bg, rgba(255, 255, 255, .4));border-color:var(--omnipad-btn-pressed-border-color);opacity:var(--omnipad-btn-pressed-opacity)}.omnipad-default-button-label[data-v-f6a6e082]{font-family:var(--omnipad-btn-font-family);font-size:var(--omnipad-btn-font-size);color:var(--omnipad-btn-label-color);font-weight:var(--omnipad-btn-font-weight)}.omnipad-axis-base[data-v-6ae17f17]{position:relative;box-sizing:border-box;pointer-events:auto;container-type:size}.omnipad-axis-bg[data-v-6ae17f17]{box-sizing:border-box;border-color:var(--omnipad-axis-base-border-color);border-radius:var(--omnipad-axis-base-border-radius);border-style:var(--omnipad-axis-base-border-style);border-width:var(--omnipad-axis-base-border-width);background:var(--omnipad-axis-base-bg)}.omnipad-axis-bg[data-v-6ae17f17],.omnipad-axis-content-layer[data-v-6ae17f17]{position:absolute;inset:0;pointer-events:none}.omnipad-axis-stick-container[data-v-6ae17f17]{width:calc(var(--omnipad-axis-stick-width, 0px) * var(--omnipad-default-axis-stick-width-scaler, .2));height:calc(var(--omnipad-axis-stick-height, 0px) * var(--omnipad-default-axis-stick-height-scaler, .2));position:absolute;left:50%;top:50%;pointer-events:none;transform:translate3d(calc(-50% + var(--omnipad-axis-stick-container-x, 0px)),calc(-50% + var(--omnipad-axis-stick-container-y, 0px)),0);--omnipad-axis-stick-container-x: 0px;--omnipad-axis-stick-container-y: 0px}.omnipad-dpad-cross-bg[data-v-8c030849]{position:relative;width:100%;height:100%;border-radius:var(--omnipad-dpad-border-radius);background:var(--omnipad-dpad-bg);pointer-events:none}.dpad-arm[data-v-8c030849]{position:absolute;background:var(--omnipad-dpad-arm-bg);border:var(--omnipad-dpad-arm-border);box-sizing:border-box;transition:background .1s,transform .1s,border-color .1s}.dpad-arm.top[data-v-8c030849]{inset:0 33% 66%;border-bottom:none;border-radius:var(--omnipad-dpad-arm-border-radius) var(--omnipad-dpad-arm-border-radius) 0 0}.dpad-arm.bottom[data-v-8c030849]{inset:66% 33% 0;border-top:none;border-radius:0 0 var(--omnipad-dpad-arm-border-radius) var(--omnipad-dpad-arm-border-radius)}.dpad-arm.left[data-v-8c030849]{inset:33% 66% 33% 0;border-right:none;border-radius:var(--omnipad-dpad-arm-border-radius) 0 0 var(--omnipad-dpad-arm-border-radius)}.dpad-arm.right[data-v-8c030849]{inset:33% 0 33% 66%;border-left:none;border-radius:0 var(--omnipad-dpad-arm-border-radius) var(--omnipad-dpad-arm-border-radius) 0}.dpad-center[data-v-8c030849]{position:absolute;inset:33%;background:var(--omnipad-dpad-arm-bg);z-index:1}.dpad-arm.on[data-v-8c030849]{background:var(--omnipad-dpad-active-bg);border-color:var(--omnipad-dpad-active-border);transform:var(--omnipad-dpad-active-transform);z-index:2}.omnipad-trackpad[data-v-bacab613]{--omnipad-btn-border-style: var(--omnipad-trackpad-border-style);--omnipad-btn-bg: var(--omnipad-trackpad-bg);cursor:var(--omnipad-trackpad-cursor)}.omnipad-joystick[data-v-ae628e53]{pointer-events:auto;--omnipad-axis-base-border-color: var(--omnipad-joystick-base-border-color);--omnipad-axis-base-border-radius: var(--omnipad-joystick-base-border-radius);--omnipad-axis-base-border-style: var(--omnipad-joystick-base-border-style);--omnipad-axis-base-border-width: var(--omnipad-joystick-base-border-width);--omnipad-axis-base-bg: var(--omnipad-joystick-base-bg, rgba(255, 255, 255, .2));--omnipad-default-axis-stick-height-scaler: var( --omnipad-default-joystick-stick-height-scaler, .5 );--omnipad-default-axis-stick-width-scaler: var( --omnipad-default-joystick-stick-width-scaler, .5 );--omnipad-btn-bg: var(--omnipad-joystick-btn-bg, rgba(255, 255, 255, .2));--omnipad-btn-border-color: var(--omnipad-joystick-btn-border-color);--omnipad-btn-border-style: var(--omnipad-joystick-btn-border-style);--omnipad-btn-border-width: var(--omnipad-joystick-btn-border-width);--omnipad-btn-radius: var(--omnipad-joystick-btn-radius)}
1
+ :root{--omnipad-btn-bg: rgba(255, 255, 255, .2);--omnipad-btn-border-color: rgba(255, 255, 255, .4);--omnipad-btn-border-style: solid;--omnipad-btn-border-width: 2px;--omnipad-btn-radius: 8px;--omnipad-btn-font-family: "Upheaval", "monacoregular", sans-serif;--omnipad-btn-font-size: 18px;--omnipad-btn-font-weight: bold;--omnipad-btn-label-color: #ffffff;--omnipad-btn-pressed-bg: rgba(255, 186, 67, .6);--omnipad-btn-pressed-border-color: #ffba43;--omnipad-btn-pressed-opacity: 1;--omnipad-btn-pressed-scale: .92;--omnipad-btn-transition-duration: .1s;--omnipad-btn-transition-timing: ease-out;--omnipad-dpad-arm-bg: rgba(255, 255, 255, .15);--omnipad-dpad-arm-border: 2px solid rgba(255, 255, 255, .4);--omnipad-dpad-arm-border-radius: 8px;--omnipad-dpad-active-bg: rgba(255, 186, 67, .6);--omnipad-dpad-active-border: #ffba43;--omnipad-dpad-active-scale: .96;--omnipad-dpad-active-transform: scale(var(--omnipad-dpad-active-scale));--omnipad-dpad-bg: rgba(255, 255, 255, .05);--omnipad-dpad-border-radius: 50%;--omnipad-default-cursor-height: 20px;--omnipad-default-cursor-width: 20px;--omnipad-default-cursor-transition: var(--omnipad-default-cursor-transition-mode) var(--omnipad-default-cursor-transition-time);--omnipad-default-cursor-transition-mode: opacity;--omnipad-default-cursor-transition-time: .2s;--omnipad-default-cursor-dot-background: #ff000080;--omnipad-default-cursor-dot-border-color: #ffffff;--omnipad-default-cursor-dot-border-radius: 50%;--omnipad-default-cursor-dot-border-style: solid;--omnipad-default-cursor-dot-border-width: 2px;--omnipad-default-cursor-dot-down-background: #ff0000;--omnipad-default-cursor-dot-down-scale: .8;--omnipad-default-axis-stick-bg: rgba(255, 255, 255, .4);--omnipad-default-axis-stick-border-color: rgba(255, 255, 255, .8);--omnipad-default-axis-stick-border-radius: 50%;--omnipad-default-axis-stick-border-style: solid;--omnipad-default-axis-stick-border-width: 2px;--omnipad-default-axis-stick-box-shadow: 0 4px 10px rgba(0, 0, 0, .3);--omnipad-default-axis-stick-height-scaler: .2;--omnipad-default-axis-stick-width-scaler: .2;--omnipad-default-axis-stick-active-bg: rgba(255, 186, 67, .6);--omnipad-default-axis-stick-active-border-color: #ffba43;--omnipad-focus-color: rgba(255, 186, 67, .8);--omnipad-focus-bg-color: rgba(100, 200, 255, .05);--omnipad-joystick-base-border-color: rgba(255, 255, 255, .4);--omnipad-joystick-base-border-radius: 50%;--omnipad-joystick-base-border-style: solid;--omnipad-joystick-base-border-width: 2px;--omnipad-joystick-base-bg: rgba(255, 255, 255, .2);--omnipad-default-joystick-stick-height-scaler: .5;--omnipad-default-joystick-stick-width-scaler: .5;--omnipad-joystick-btn-bg: rgba(255, 255, 255, .2);--omnipad-joystick-btn-border-color: rgba(255, 255, 255, .4);--omnipad-joystick-btn-border-style: solid;--omnipad-joystick-btn-border-width: 2px;--omnipad-joystick-btn-radius: 50%;--omnipad-trackpad-bg: rgba(255, 255, 255, .05);--omnipad-trackpad-border-style: dashed;--omnipad-trackpad-cursor: crosshair}.omnipad-default-button-base{background:var(--omnipad-btn-bg);border:var(--omnipad-btn-border-width) var(--omnipad-btn-border-style) var(--omnipad-btn-border-color);border-radius:var(--omnipad-btn-radius);transition:all var(--omnipad-btn-transition-duration) var(--omnipad-btn-transition-timing)}.omnipad-default-cursor-dot{width:100%;height:100%;box-sizing:border-box;background:var(--omnipad-default-cursor-dot-background);border-color:var(--omnipad-default-cursor-dot-border-color);border-radius:var(--omnipad-default-cursor-dot-border-radius);border-style:var(--omnipad-default-cursor-dot-border-style);border-width:var(--omnipad-default-cursor-dot-border-width)}.omnipad-default-cursor-dot.is-down{transform:scale(var(--omnipad-default-cursor-dot-down-scale));background:var(--omnipad-default-cursor-dot-down-background)}.omnipad-default-axis-stick{width:100%;height:100%;box-sizing:border-box;background:var(--omnipad-default-axis-stick-bg);border-width:var(--omnipad-default-axis-stick-border-width);border-style:var(--omnipad-default-axis-stick-border-style);border-color:var(--omnipad-default-axis-stick-border-color);border-radius:var(--omnipad-default-axis-stick-border-radius);box-shadow:var(--omnipad-default-axis-stick-box-shadow)}.omnipad-default-axis-stick.is-active{background:var(--omnipad-default-axis-stick-active-bg);border-color:var(--omnipad-default-axis-stick-active-border-color)}.omnipad-default-focus-border-feedback{position:absolute;inset:0;pointer-events:none;z-index:5;border:2px solid var(--omnipad-focus-color);background-color:var(--omnipad-focus-bg-color);box-shadow:inset 0 0 10px var(--omnipad-focus-color);box-sizing:border-box}.omnipad-default-focus-fade-enter-active{transition:opacity .05s ease-in}.omnipad-default-focus-fade-leave-active{transition:opacity .2s ease-out}.omnipad-default-focus-fade-enter-from,.omnipad-default-focus-fade-leave-to{opacity:0}.omnipad-prevent{touch-action:none;user-select:none;outline:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.omnipad-trackpad:before{content:"";position:absolute;inset:10px;background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1px);background-size:20px 20px;pointer-events:none}.omnipad-virtual-layer-base[data-v-a172c7c0]{position:absolute;inset:0;pointer-events:none;z-index:1000}[data-v-a172c7c0] .omnipad-input-zone,[data-v-a172c7c0] .omnipad-button{pointer-events:auto}.omnipad-input-zone[data-v-6543281e]{position:relative;pointer-events:none;container-type:size}.omnipad-input-zone-trigger[data-v-6543281e]{position:absolute;inset:0;pointer-events:auto;background:transparent;touch-action:none}.dynamic-widget-mount[data-v-6543281e]{position:absolute;left:0;top:0;pointer-events:none;will-change:transform;transform:translate3d(var(--dynamic-widget-mount-x, 0px),var(--dynamic-widget-mount-y, 0px),0);--dynamic-widget-mount-x: 0px;--dynamic-widget-mount-y: 0px}.omnipad-root-layer[data-v-99206012]{position:relative;pointer-events:none}.omnipad-target-zone[data-v-8de7c4a4]{position:relative;pointer-events:auto;overflow:hidden;container-type:size}.omnipad-virtual-cursor[data-v-8de7c4a4]{position:absolute;top:0;left:0;width:var(--omnipad-default-cursor-width);height:var(--omnipad-default-cursor-height);pointer-events:none;will-change:transform;transition:var(--omnipad-default-cursor-transition);z-index:10;transform:translate3d(calc(-50% + var(--omnipad-virtual-cursor-x, 0px)),calc(-50% + var(--omnipad-virtual-cursor-y, 0px)),0);--omnipad-virtual-cursor-x: 0px;--omnipad-virtual-cursor-y: 0px}.omnipad-button-base[data-v-f6a6e082]{position:relative;overflow:hidden;box-sizing:border-box;pointer-events:auto;will-change:transform,opacity}.omnipad-default-button-base[data-v-f6a6e082]{position:absolute;inset:0;pointer-events:none}.omnipad-button-content-layer[data-v-f6a6e082]{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.omnipad-default-button-base.is-active[data-v-f6a6e082]{background:var(--omnipad-btn-pressed-bg, rgba(255, 255, 255, .4));border-color:var(--omnipad-btn-pressed-border-color);opacity:var(--omnipad-btn-pressed-opacity)}.omnipad-default-button-label[data-v-f6a6e082]{font-family:var(--omnipad-btn-font-family);font-size:var(--omnipad-btn-font-size);color:var(--omnipad-btn-label-color);font-weight:var(--omnipad-btn-font-weight)}.omnipad-axis-base[data-v-9eef9626]{position:relative;box-sizing:border-box;pointer-events:auto;container-type:size}.omnipad-axis-bg[data-v-9eef9626]{box-sizing:border-box;border-color:var(--omnipad-axis-base-border-color);border-radius:var(--omnipad-axis-base-border-radius);border-style:var(--omnipad-axis-base-border-style);border-width:var(--omnipad-axis-base-border-width);background:var(--omnipad-axis-base-bg)}.omnipad-axis-bg[data-v-9eef9626],.omnipad-axis-content-layer[data-v-9eef9626]{position:absolute;inset:0;pointer-events:none}.omnipad-axis-stick-container[data-v-9eef9626]{width:calc(var(--omnipad-axis-stick-width, 0px) * var(--omnipad-default-axis-stick-width-scaler, .2));height:calc(var(--omnipad-axis-stick-height, 0px) * var(--omnipad-default-axis-stick-height-scaler, .2));position:absolute;left:0;top:0;pointer-events:none;transform:translate3d(calc(-50% + var(--omnipad-axis-stick-container-x, 0px)),calc(-50% + var(--omnipad-axis-stick-container-y, 0px)),0);--omnipad-axis-stick-container-x: 0px;--omnipad-axis-stick-container-y: 0px}.omnipad-dpad-cross-bg[data-v-2690a0c6]{position:relative;width:100%;height:100%;border-radius:var(--omnipad-dpad-border-radius);background:var(--omnipad-dpad-bg);pointer-events:none}.dpad-arm[data-v-2690a0c6]{position:absolute;background:var(--omnipad-dpad-arm-bg);border:var(--omnipad-dpad-arm-border);box-sizing:border-box;transition:background .1s,transform .1s,border-color .1s}.dpad-arm.top[data-v-2690a0c6]{inset:0 33% 66%;border-bottom:none;border-radius:var(--omnipad-dpad-arm-border-radius) var(--omnipad-dpad-arm-border-radius) 0 0}.dpad-arm.bottom[data-v-2690a0c6]{inset:66% 33% 0;border-top:none;border-radius:0 0 var(--omnipad-dpad-arm-border-radius) var(--omnipad-dpad-arm-border-radius)}.dpad-arm.left[data-v-2690a0c6]{inset:33% 66% 33% 0;border-right:none;border-radius:var(--omnipad-dpad-arm-border-radius) 0 0 var(--omnipad-dpad-arm-border-radius)}.dpad-arm.right[data-v-2690a0c6]{inset:33% 0 33% 66%;border-left:none;border-radius:0 var(--omnipad-dpad-arm-border-radius) var(--omnipad-dpad-arm-border-radius) 0}.dpad-center[data-v-2690a0c6]{position:absolute;inset:33%;background:var(--omnipad-dpad-arm-bg);z-index:1}.dpad-arm.on[data-v-2690a0c6]{background:var(--omnipad-dpad-active-bg);border-color:var(--omnipad-dpad-active-border);transform:var(--omnipad-dpad-active-transform);z-index:2}.omnipad-trackpad[data-v-55cc7ea4]{--omnipad-btn-border-style: var(--omnipad-trackpad-border-style);--omnipad-btn-bg: var(--omnipad-trackpad-bg);cursor:var(--omnipad-trackpad-cursor)}.omnipad-joystick[data-v-b0ffdd7b]{pointer-events:auto;--omnipad-axis-base-border-color: var(--omnipad-joystick-base-border-color);--omnipad-axis-base-border-radius: var(--omnipad-joystick-base-border-radius);--omnipad-axis-base-border-style: var(--omnipad-joystick-base-border-style);--omnipad-axis-base-border-width: var(--omnipad-joystick-base-border-width);--omnipad-axis-base-bg: var(--omnipad-joystick-base-bg, rgba(255, 255, 255, .2));--omnipad-default-axis-stick-height-scaler: var( --omnipad-default-joystick-stick-height-scaler, .5 );--omnipad-default-axis-stick-width-scaler: var( --omnipad-default-joystick-stick-width-scaler, .5 );--omnipad-btn-bg: var(--omnipad-joystick-btn-bg, rgba(255, 255, 255, .2));--omnipad-btn-border-color: var(--omnipad-joystick-btn-border-color);--omnipad-btn-border-style: var(--omnipad-joystick-btn-border-style);--omnipad-btn-border-width: var(--omnipad-joystick-btn-border-width);--omnipad-btn-radius: var(--omnipad-joystick-btn-radius)}