@gjsify/example-dom-excalibur-jelly-jumper 0.1.11 → 0.1.12

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gjsify/example-dom-excalibur-jelly-jumper",
3
- "version": "0.1.11",
3
+ "version": "0.1.12",
4
4
  "description": "2D platformer showcase using Excalibur.js 0.32.0 with Tiled tilemaps, running natively on GJS/GTK4 and in the browser",
5
5
  "main": "dist/gjs.js",
6
6
  "type": "module",
@@ -24,23 +24,23 @@
24
24
  },
25
25
  "devDependencies": {
26
26
  "@excaliburjs/plugin-tiled": "0.32.0",
27
- "@girs/adw-1": "^1.10.0-4.0.0-rc.2",
28
- "@girs/gio-2.0": "^2.88.0-4.0.0-rc.2",
29
- "@girs/gjs": "^4.0.0-rc.2",
30
- "@girs/glib-2.0": "^2.88.0-4.0.0-rc.2",
31
- "@girs/gobject-2.0": "^2.88.0-4.0.0-rc.2",
32
- "@girs/gtk-4.0": "^4.23.0-4.0.0-rc.2",
33
- "@gjsify/adwaita-icons": "^0.1.11",
34
- "@gjsify/adwaita-web": "^0.1.11",
35
- "@gjsify/canvas2d": "^0.1.11",
36
- "@gjsify/cli": "^0.1.11",
27
+ "@girs/adw-1": "^1.10.0-4.0.0-rc.3",
28
+ "@girs/gio-2.0": "^2.88.0-4.0.0-rc.3",
29
+ "@girs/gjs": "^4.0.0-rc.3",
30
+ "@girs/glib-2.0": "^2.88.0-4.0.0-rc.3",
31
+ "@girs/gobject-2.0": "^2.88.0-4.0.0-rc.3",
32
+ "@girs/gtk-4.0": "^4.23.0-4.0.0-rc.3",
33
+ "@gjsify/adwaita-icons": "^0.1.12",
34
+ "@gjsify/adwaita-web": "^0.1.12",
35
+ "@gjsify/canvas2d": "^0.1.12",
36
+ "@gjsify/cli": "^0.1.12",
37
37
  "@types/node": "^25.6.0",
38
38
  "excalibur": "0.32.0",
39
39
  "http-server": "^14.1.1",
40
40
  "typescript": "^6.0.2"
41
41
  },
42
42
  "dependencies": {
43
- "@gjsify/webgl": "^0.1.11"
43
+ "@gjsify/webgl": "^0.1.12"
44
44
  },
45
45
  "author": "Pascal Garber <pascal@artandcode.studio>",
46
46
  "license": "MIT"
Binary file
package/dist/browser.css DELETED
@@ -1,505 +0,0 @@
1
- /* ../../../packages/web/adwaita-fonts/400.css */
2
- @font-face {
3
- font-family: "Adwaita Sans";
4
- font-style: normal;
5
- font-display: swap;
6
- font-weight: 400;
7
- src: url("./adwaita-sans-400-VCQV646T.ttf") format("truetype");
8
- }
9
-
10
- /* ../../../packages/web/adwaita-fonts/index.css */
11
-
12
- /* ../../../packages/web/adwaita-web/dist/adwaita-web.css */
13
- :root {
14
- --icon-edit-paste: url("data:image/svg+xml,%3Csvg%20height%3D'16px'%20viewBox%3D'0%200%2016%2016'%20width%3D'16px'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%20%3Cpath%20d%3D'm%207%200%20c%20-0.554688%200%20-1%200.445312%20-1%201%20h%20-2%20c%20-1.644531%200%20-3%201.355469%20-3%203%20v%209%20c%200%201.644531%201.355469%203%203%203%20h%208%20c%201.644531%200%203%20-1.355469%203%20-3%20v%20-9%20c%200%20-1.644531%20-1.355469%20-3%20-3%20-3%20h%20-2%20c%200%20-0.554688%20-0.445312%20-1%20-1%20-1%20z%20m%20-3%203%20h%201%20v%201%20c%200%200.554688%200.445312%201%201%201%20h%204%20c%200.554688%200%201%20-0.445312%201%20-1%20v%20-1%20h%201%20c%200.570312%200%201%200.429688%201%201%20v%209%20c%200%200.570312%20-0.429688%201%20-1%201%20h%20-8%20c%20-0.570312%200%20-1%20-0.429688%20-1%20-1%20v%20-9%20c%200%20-0.570312%200.429688%20-1%201%20-1%20z%20m%200%200'%20fill%3D'currentColor'%2F%3E%20%3C%2Fsvg%3E");
15
- --icon-go-down: url("data:image/svg+xml,%3Csvg%20height%3D'16px'%20viewBox%3D'0%200%2016%2016'%20width%3D'16px'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%20%3Cpath%20d%3D'm%201%205%20c%200%20-0.265625%200.105469%20-0.519531%200.292969%20-0.707031%20c%200.390625%20-0.390625%201.023437%20-0.390625%201.414062%200%20l%205.292969%205.292969%20l%205.292969%20-5.292969%20c%200.390625%20-0.390625%201.023437%20-0.390625%201.414062%200%20c%200.1875%200.1875%200.292969%200.441406%200.292969%200.707031%20s%20-0.105469%200.519531%20-0.292969%200.707031%20l%20-6%206%20c%20-0.390625%200.390625%20-1.023437%200.390625%20-1.414062%200%20l%20-6%20-6%20c%20-0.1875%20-0.1875%20-0.292969%20-0.441406%20-0.292969%20-0.707031%20z%20m%200%200'%20fill%3D'currentColor'%2F%3E%20%3C%2Fsvg%3E");
16
- --icon-sidebar-show: url("data:image/svg+xml,%3Csvg%20height%3D'16px'%20viewBox%3D'0%200%2016%2016'%20width%3D'16px'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%20%3Cg%20fill%3D'currentColor'%3E%20%3Cpath%20d%3D'm%206%2013%20v%20-10%20h%20-3%20c%20-0.550781%200%20-1%200.449219%20-1%201%20v%208%20c%200%200.550781%200.449219%201%201%201%20z%20m%200%200'%20fill-opacity%3D'0.34902'%2F%3E%20%3Cpath%20d%3D'm%203%201%20c%20-1.644531%200%20-3%201.355469%20-3%203%20v%208%20c%200%201.644531%201.355469%203%203%203%20h%2010%20c%201.644531%200%203%20-1.355469%203%20-3%20v%20-8%20c%200%20-1.644531%20-1.355469%20-3%20-3%20-3%20z%20m%200%202%20h%203%20v%2010%20h%20-3%20c%20-0.570312%200%20-1%20-0.429688%20-1%20-1%20v%20-8%20c%200%20-0.570312%200.429688%20-1%201%20-1%20z%20m%204%200%20h%206%20c%200.570312%200%201%200.429688%201%201%20v%208%20c%200%200.570312%20-0.429688%201%20-1%201%20h%20-6%20z%20m%200%200'%2F%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E");
17
- }
18
- :root {
19
- --window-bg-color: #fafafb;
20
- --window-fg-color: rgba(0, 0, 6, 0.8);
21
- --view-bg-color: #ffffff;
22
- --view-fg-color: rgba(0, 0, 6, 0.8);
23
- --headerbar-bg-color: #ffffff;
24
- --headerbar-fg-color: rgba(0, 0, 6, 0.8);
25
- --headerbar-shade-color: rgba(0, 0, 6, 0.12);
26
- --sidebar-bg-color: #ebebed;
27
- --card-bg-color: #ffffff;
28
- --card-fg-color: rgba(0, 0, 6, 0.8);
29
- --card-shade-color: rgba(0, 0, 6, 0.07);
30
- --accent-bg-color: #3584e4;
31
- --accent-fg-color: #ffffff;
32
- --accent-color: #1c71d8;
33
- --switch-off-bg: rgba(0, 0, 0, 0.2);
34
- --switch-knob-bg: #ffffff;
35
- --window-radius: 15px;
36
- --card-radius: 12px;
37
- --button-radius: 9px;
38
- --spacing-xs: 6px;
39
- --spacing-s: 9px;
40
- --spacing-m: 12px;
41
- --spacing-l: 18px;
42
- --spacing-xl: 24px;
43
- --font-family:
44
- "Adwaita Sans",
45
- "Cantarell",
46
- "Inter",
47
- "Segoe UI",
48
- sans-serif;
49
- --font-size-base: 11pt;
50
- --font-size-small: 9pt;
51
- --font-size-heading: 12pt;
52
- --dim-opacity: 0.55;
53
- }
54
- @media (prefers-color-scheme: dark) {
55
- :root:not(.theme-light) {
56
- --window-bg-color: #222226;
57
- --window-fg-color: #ffffff;
58
- --view-bg-color: #1d1d20;
59
- --view-fg-color: #ffffff;
60
- --headerbar-bg-color: #2e2e32;
61
- --headerbar-fg-color: #ffffff;
62
- --headerbar-shade-color: rgba(0, 0, 6, 0.36);
63
- --sidebar-bg-color: #2e2e32;
64
- --card-bg-color: rgba(255, 255, 255, 0.08);
65
- --card-fg-color: #ffffff;
66
- --card-shade-color: rgba(0, 0, 6, 0.36);
67
- --accent-color: #78aeed;
68
- --switch-off-bg: rgba(255, 255, 255, 0.2);
69
- --switch-knob-bg: #deddda;
70
- }
71
- }
72
- :root.theme-dark {
73
- --window-bg-color: #222226;
74
- --window-fg-color: #ffffff;
75
- --view-bg-color: #1d1d20;
76
- --view-fg-color: #ffffff;
77
- --headerbar-bg-color: #2e2e32;
78
- --headerbar-fg-color: #ffffff;
79
- --headerbar-shade-color: rgba(0, 0, 6, 0.36);
80
- --sidebar-bg-color: #2e2e32;
81
- --card-bg-color: rgba(255, 255, 255, 0.08);
82
- --card-fg-color: #ffffff;
83
- --card-shade-color: rgba(0, 0, 6, 0.36);
84
- --accent-color: #78aeed;
85
- --switch-off-bg: rgba(255, 255, 255, 0.2);
86
- --switch-knob-bg: #deddda;
87
- }
88
- adw-window {
89
- display: flex;
90
- flex-direction: column;
91
- background-color: var(--window-bg-color);
92
- color: var(--window-fg-color);
93
- font-family: var(--font-family);
94
- font-size: var(--font-size-base);
95
- border-radius: var(--window-radius);
96
- box-shadow:
97
- 0 0 14px 5px rgba(0, 0, 0, 0.15),
98
- 0 0 5px 2px rgba(0, 0, 0, 0.1),
99
- 0 0 0 1px rgba(0, 0, 0, 0.05);
100
- overflow: hidden;
101
- outline: 1px solid rgba(255, 255, 255, 0.07);
102
- outline-offset: -1px;
103
- }
104
- adw-header-bar {
105
- display: flex;
106
- align-items: center;
107
- min-height: 47px;
108
- padding: 0 6px;
109
- background-color: var(--headerbar-bg-color);
110
- color: var(--headerbar-fg-color);
111
- box-shadow: inset 0 -1px var(--headerbar-shade-color);
112
- flex-shrink: 0;
113
- }
114
- adw-header-bar .adw-header-bar-center {
115
- flex: 1;
116
- display: flex;
117
- justify-content: center;
118
- }
119
- adw-header-bar .adw-header-bar-title {
120
- font-weight: bold;
121
- font-size: var(--font-size-base);
122
- white-space: nowrap;
123
- overflow: hidden;
124
- text-overflow: ellipsis;
125
- }
126
- adw-header-bar .adw-header-bar-start {
127
- display: flex;
128
- align-items: center;
129
- padding: 0 6px;
130
- gap: 4px;
131
- }
132
- adw-header-bar .adw-header-bar-end {
133
- display: flex;
134
- align-items: center;
135
- padding: 0 6px;
136
- gap: 4px;
137
- }
138
- adw-header-bar .adw-header-btn {
139
- position: relative;
140
- width: 34px;
141
- height: 34px;
142
- border: none;
143
- border-radius: var(--button-radius);
144
- background: transparent;
145
- color: var(--headerbar-fg-color);
146
- cursor: pointer;
147
- padding: 0;
148
- margin: 0;
149
- flex-shrink: 0;
150
- }
151
- adw-header-bar .adw-header-btn:hover {
152
- background: rgba(128, 128, 128, 0.12);
153
- }
154
- adw-header-bar .adw-header-btn:active {
155
- background: rgba(128, 128, 128, 0.22);
156
- }
157
- adw-preferences-group {
158
- display: block;
159
- }
160
- adw-preferences-group .adw-preferences-group-header {
161
- padding: var(--spacing-xs) 2px;
162
- }
163
- adw-preferences-group .adw-preferences-group-title {
164
- font-size: var(--font-size-small);
165
- font-weight: 700;
166
- text-transform: uppercase;
167
- letter-spacing: 0.5px;
168
- opacity: var(--dim-opacity);
169
- margin: 0;
170
- color: var(--window-fg-color);
171
- }
172
- adw-preferences-group .adw-preferences-group-listbox {
173
- background-color: var(--card-bg-color);
174
- color: var(--card-fg-color);
175
- border-radius: var(--card-radius);
176
- box-shadow:
177
- 0 0 0 1px rgba(0, 0, 6, 0.03),
178
- 0 1px 3px 1px rgba(0, 0, 6, 0.07),
179
- 0 2px 6px 2px rgba(0, 0, 6, 0.03);
180
- overflow: hidden;
181
- }
182
- adw-card,
183
- .adw-card {
184
- display: block;
185
- background-color: var(--card-bg-color);
186
- color: var(--card-fg-color);
187
- border-radius: var(--card-radius);
188
- padding: var(--spacing-l);
189
- box-shadow:
190
- 0 0 0 1px rgba(0, 0, 6, 0.03),
191
- 0 1px 3px 1px rgba(0, 0, 6, 0.07),
192
- 0 2px 6px 2px rgba(0, 0, 6, 0.03);
193
- overflow: hidden;
194
- }
195
- adw-switch-row,
196
- adw-combo-row {
197
- display: flex;
198
- align-items: center;
199
- justify-content: space-between;
200
- min-height: 50px;
201
- padding: var(--spacing-s) var(--spacing-m);
202
- gap: var(--spacing-m);
203
- border-bottom: 1px solid var(--card-shade-color);
204
- }
205
- adw-switch-row:last-child,
206
- adw-combo-row:last-child {
207
- border-bottom: none;
208
- }
209
- .adw-separator-vertical {
210
- width: 1px;
211
- align-self: stretch;
212
- background-color: var(--card-shade-color);
213
- flex-shrink: 0;
214
- }
215
- adw-switch-row .adw-row-title {
216
- flex: 1;
217
- font-size: var(--font-size-base);
218
- color: var(--card-fg-color);
219
- }
220
- adw-switch-row .adw-switch {
221
- position: relative;
222
- display: inline-block;
223
- width: 44px;
224
- height: 24px;
225
- flex-shrink: 0;
226
- }
227
- adw-switch-row .adw-switch input {
228
- opacity: 0;
229
- width: 0;
230
- height: 0;
231
- position: absolute;
232
- }
233
- adw-switch-row .adw-switch-slider {
234
- position: absolute;
235
- cursor: pointer;
236
- inset: 0;
237
- background-color: var(--switch-off-bg);
238
- border-radius: 12px;
239
- transition: background-color 0.15s ease-out;
240
- }
241
- adw-switch-row .adw-switch-slider::before {
242
- content: "";
243
- position: absolute;
244
- height: 20px;
245
- width: 20px;
246
- left: 2px;
247
- bottom: 2px;
248
- background-color: var(--switch-knob-bg);
249
- border-radius: 50%;
250
- transition: transform 0.15s ease-out;
251
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
252
- }
253
- adw-switch-row .adw-switch input:checked + .adw-switch-slider {
254
- background-color: var(--accent-bg-color);
255
- }
256
- adw-switch-row .adw-switch input:checked + .adw-switch-slider::before {
257
- transform: translateX(20px);
258
- }
259
- adw-switch-row .adw-switch input:focus-visible + .adw-switch-slider {
260
- outline: 2px solid var(--accent-color);
261
- outline-offset: 2px;
262
- }
263
- adw-combo-row {
264
- position: relative;
265
- cursor: pointer;
266
- }
267
- adw-combo-row .adw-row-title {
268
- font-size: var(--font-size-base);
269
- color: var(--card-fg-color);
270
- pointer-events: none;
271
- }
272
- adw-combo-row select {
273
- appearance: none;
274
- -webkit-appearance: none;
275
- background-color: transparent;
276
- border: none;
277
- padding: 6px 24px 6px 8px;
278
- font-family: var(--font-family);
279
- font-size: var(--font-size-base);
280
- color: var(--card-fg-color);
281
- cursor: pointer;
282
- text-align: right;
283
- position: absolute;
284
- inset: 0;
285
- opacity: 0;
286
- width: 100%;
287
- height: 100%;
288
- z-index: 1;
289
- }
290
- adw-combo-row select:focus-visible {
291
- outline: 2px solid var(--accent-color);
292
- outline-offset: -1px;
293
- }
294
- adw-combo-row select option {
295
- background-color: var(--window-bg-color);
296
- color: var(--window-fg-color);
297
- }
298
- adw-combo-row .adw-row-value {
299
- font-size: var(--font-size-base);
300
- color: var(--card-fg-color);
301
- opacity: var(--dim-opacity);
302
- display: flex;
303
- align-items: center;
304
- gap: 4px;
305
- }
306
- adw-combo-row .adw-row-value::after {
307
- content: "";
308
- display: inline-block;
309
- width: 12px;
310
- height: 12px;
311
- background-color: currentColor;
312
- -webkit-mask-image: var(--icon-go-down);
313
- mask-image: var(--icon-go-down);
314
- -webkit-mask-repeat: no-repeat;
315
- mask-repeat: no-repeat;
316
- -webkit-mask-size: contain;
317
- mask-size: contain;
318
- -webkit-mask-position: center;
319
- mask-position: center;
320
- }
321
- adw-spin-row {
322
- display: flex;
323
- align-items: center;
324
- justify-content: space-between;
325
- min-height: 50px;
326
- padding: var(--spacing-s) var(--spacing-m);
327
- gap: var(--spacing-m);
328
- border-bottom: 1px solid var(--card-shade-color);
329
- }
330
- adw-spin-row:last-child {
331
- border-bottom: none;
332
- }
333
- adw-spin-row .adw-row-title {
334
- flex: 1;
335
- font-size: var(--font-size-base);
336
- color: var(--card-fg-color);
337
- }
338
- .adw-spin-control {
339
- display: flex;
340
- align-items: center;
341
- gap: 2px;
342
- }
343
- .adw-spin-control button {
344
- width: 32px;
345
- height: 32px;
346
- border: none;
347
- border-radius: var(--button-radius);
348
- background: transparent;
349
- color: var(--card-fg-color);
350
- cursor: pointer;
351
- font-size: 16px;
352
- display: flex;
353
- align-items: center;
354
- justify-content: center;
355
- flex-shrink: 0;
356
- }
357
- .adw-spin-control button:hover {
358
- background: rgba(128, 128, 128, 0.15);
359
- }
360
- .adw-spin-control input {
361
- width: 56px;
362
- text-align: center;
363
- border: none;
364
- border-radius: var(--button-radius);
365
- background: rgba(128, 128, 128, 0.1);
366
- color: var(--card-fg-color);
367
- font-family: var(--font-family);
368
- font-size: var(--font-size-base);
369
- padding: 4px 2px;
370
- }
371
- .adw-spin-control input:focus {
372
- outline: 2px solid var(--accent-color);
373
- outline-offset: -1px;
374
- }
375
- adw-toast-overlay {
376
- position: fixed;
377
- bottom: 24px;
378
- left: 50%;
379
- transform: translateX(-50%);
380
- z-index: 9999;
381
- display: flex;
382
- flex-direction: column-reverse;
383
- gap: 9px;
384
- align-items: center;
385
- pointer-events: none;
386
- }
387
- .adw-toast {
388
- background-color: #3d3846;
389
- color: #ffffff;
390
- padding: 9px 12px;
391
- border-radius: var(--card-radius);
392
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.25);
393
- display: flex;
394
- align-items: center;
395
- gap: 9px;
396
- width: max-content;
397
- max-width: 400px;
398
- min-height: 36px;
399
- pointer-events: auto;
400
- font-family: var(--font-family);
401
- font-size: var(--font-size-base);
402
- opacity: 0;
403
- transform: translateY(100%) scale(0.9);
404
- transition: opacity 0.2s cubic-bezier(0, 0, 0.2, 1), transform 0.2s cubic-bezier(0, 0, 0.2, 1);
405
- will-change: transform, opacity;
406
- }
407
- .adw-toast.visible {
408
- opacity: 1;
409
- transform: translateY(0) scale(1);
410
- }
411
- .adw-toast.hiding {
412
- opacity: 0;
413
- transform: translateY(100%) scale(0.9);
414
- transition-duration: 0.15s;
415
- transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
416
- }
417
- .adw-toast .adw-toast-title {
418
- font-weight: normal;
419
- line-height: 1.3;
420
- }
421
- adw-overlay-split-view {
422
- display: flex;
423
- flex-direction: row;
424
- flex: 1;
425
- min-height: 0;
426
- position: relative;
427
- overflow: hidden;
428
- }
429
- adw-overlay-split-view .adw-osv-sidebar {
430
- background-color: var(--sidebar-bg-color);
431
- overflow-y: auto;
432
- flex-shrink: 0;
433
- transition:
434
- transform 0.2s ease,
435
- opacity 0.2s ease,
436
- margin 0.2s ease;
437
- z-index: 10;
438
- align-self: stretch;
439
- }
440
- adw-overlay-split-view .adw-osv-content {
441
- flex: 1;
442
- min-width: 0;
443
- min-height: 0;
444
- display: flex;
445
- flex-direction: column;
446
- align-self: stretch;
447
- }
448
- adw-overlay-split-view:not(.collapsed) .adw-osv-sidebar {
449
- position: relative;
450
- }
451
- adw-overlay-split-view:not(.collapsed):not(.show-sidebar) .adw-osv-sidebar {
452
- transform: translateX(-100%);
453
- opacity: 0;
454
- pointer-events: none;
455
- }
456
- adw-overlay-split-view.collapsed .adw-osv-sidebar {
457
- position: absolute;
458
- top: 0;
459
- bottom: 0;
460
- left: 0;
461
- transform: translateX(-100%);
462
- opacity: 0;
463
- pointer-events: none;
464
- }
465
- adw-overlay-split-view.collapsed.sidebar-end .adw-osv-sidebar {
466
- left: auto;
467
- right: 0;
468
- transform: translateX(100%);
469
- }
470
- adw-overlay-split-view.collapsed.show-sidebar .adw-osv-sidebar {
471
- transform: translateX(0);
472
- opacity: 1;
473
- pointer-events: auto;
474
- }
475
- adw-overlay-split-view .adw-osv-backdrop {
476
- display: none;
477
- }
478
- adw-overlay-split-view.collapsed.show-sidebar .adw-osv-backdrop {
479
- display: block;
480
- position: absolute;
481
- inset: 0;
482
- background: rgba(0, 0, 0, 0.3);
483
- z-index: 9;
484
- }
485
- .adw-sidebar-content {
486
- padding: var(--spacing-m);
487
- display: flex;
488
- flex-direction: column;
489
- gap: var(--spacing-m);
490
- }
491
- .adw-sidebar-toggle-icon::after {
492
- content: "";
493
- position: absolute;
494
- inset: 0;
495
- background-color: currentColor;
496
- -webkit-mask-image: var(--icon-sidebar-show);
497
- mask-image: var(--icon-sidebar-show);
498
- -webkit-mask-repeat: no-repeat;
499
- mask-repeat: no-repeat;
500
- -webkit-mask-size: 16px 16px;
501
- mask-size: 16px 16px;
502
- -webkit-mask-position: center;
503
- mask-position: center;
504
- pointer-events: none;
505
- }