@wwawing/styles 0.0.0-exe-chousa.based-on.3.12.21

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/output/wwa.css ADDED
@@ -0,0 +1,1046 @@
1
+ @charset "UTF-8";
2
+ /**
3
+ wwa.css
4
+ @author Matsuyuki(rmn.)
5
+ このファイルは、WWAの起動時に必要です。
6
+ フォントやフォントサイズは自由に変更できます。
7
+ */
8
+ .wwa-size-box {
9
+ width: 560px;
10
+ height: 440px;
11
+ font-size: 16px;
12
+ font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", sans-serif;
13
+ line-height: 1.2;
14
+ text-indent: 0px;
15
+ letter-spacing: 0px;
16
+ word-spacing: 0px;
17
+ writing-mode: horizontal-tb;
18
+ overflow: hidden;
19
+ }
20
+
21
+ div#wwa-wrapper {
22
+ position: relative;
23
+ margin: 0 auto;
24
+ text-align: center;
25
+ }
26
+
27
+ #wwa-controller {
28
+ position: absolute;
29
+ top: 0;
30
+ left: 0;
31
+ width: 440px;
32
+ height: 440px;
33
+ }
34
+
35
+ /**
36
+ * common は WWA Wing で共通で利用できるクラス名や mixin が含まれています。
37
+ * UI 構築の際はこれらのセレクターもご活用ください。
38
+ */
39
+ div.savedata > div.wide-cell-row, .wide-button, div.status-value-box, div#wwa-sidebar > div.wide-cell-row {
40
+ width: 120px;
41
+ height: 35px;
42
+ line-height: 35px;
43
+ font-size: 14px;
44
+ }
45
+
46
+ div.savedata > div.wide-cell-row > div.status-icon, div.item-disp, div.item-click-border, div#wwa-sidebar > div.item-cell {
47
+ position: absolute;
48
+ width: 40px;
49
+ height: 40px;
50
+ }
51
+
52
+ div#wwa-sidebar > div.item-cell.onpress, div#wwa-sidebar > div.wide-cell-row.onpress {
53
+ margin: 3px 0 0 3px;
54
+ }
55
+
56
+ .wide-button, div.status-value-box, div#wwa-sidebar > div.wide-cell-row {
57
+ position: absolute;
58
+ }
59
+
60
+ div#wwa-sidebar {
61
+ position: absolute;
62
+ top: 0px;
63
+ left: 440px;
64
+ width: 120px;
65
+ height: 440px;
66
+ background-color: #000000;
67
+ font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS Pゴシック", sans-serif;
68
+ }
69
+ div.status-icon {
70
+ width: 40px;
71
+ height: 35px;
72
+ margin-left: 6px;
73
+ }
74
+
75
+ div.status-value-box {
76
+ top: 0;
77
+ left: 0;
78
+ padding-left: 46px;
79
+ box-sizing: border-box;
80
+ text-align: center;
81
+ }
82
+
83
+ div.item-click-border {
84
+ top: 0;
85
+ left: 0;
86
+ }
87
+
88
+ div.item-disp {
89
+ top: 0;
90
+ left: 0;
91
+ }
92
+
93
+ .item-overwritten {
94
+ width: 40px;
95
+ height: 40px;
96
+ z-index: 0 !important;
97
+ }
98
+
99
+ .item-transitioning {
100
+ z-index: 240 !important;
101
+ }
102
+
103
+ .wide-button {
104
+ cursor: pointer;
105
+ }
106
+
107
+ #disp-energy {
108
+ top: 0;
109
+ left: 0px;
110
+ }
111
+
112
+ #disp-strength {
113
+ top: 35px;
114
+ left: 0px;
115
+ }
116
+
117
+ #disp-defence {
118
+ top: 70px;
119
+ left: 0px;
120
+ }
121
+
122
+ #disp-gold {
123
+ top: 105px;
124
+ left: 0px;
125
+ }
126
+
127
+ #item0 {
128
+ top: 140px;
129
+ left: 0px;
130
+ }
131
+
132
+ #item1 {
133
+ top: 140px;
134
+ left: 40px;
135
+ }
136
+
137
+ #item2 {
138
+ top: 140px;
139
+ left: 80px;
140
+ }
141
+
142
+ #item3 {
143
+ top: 180px;
144
+ left: 0px;
145
+ }
146
+
147
+ #item4 {
148
+ top: 180px;
149
+ left: 40px;
150
+ }
151
+
152
+ #item5 {
153
+ top: 180px;
154
+ left: 80px;
155
+ }
156
+
157
+ #item6 {
158
+ top: 220px;
159
+ left: 0px;
160
+ }
161
+
162
+ #item7 {
163
+ top: 220px;
164
+ left: 40px;
165
+ }
166
+
167
+ #item8 {
168
+ top: 220px;
169
+ left: 80px;
170
+ }
171
+
172
+ #item9 {
173
+ top: 260px;
174
+ left: 0px;
175
+ }
176
+
177
+ #item10 {
178
+ top: 260px;
179
+ left: 40px;
180
+ }
181
+
182
+ #item11 {
183
+ top: 260px;
184
+ left: 80px;
185
+ }
186
+
187
+ #cell-load {
188
+ top: 300px;
189
+ left: 0px;
190
+ }
191
+
192
+ #button-load {
193
+ top: 300px;
194
+ left: 0px;
195
+ }
196
+
197
+ #cell-save {
198
+ top: 335px;
199
+ left: 0px;
200
+ }
201
+
202
+ #button-save {
203
+ top: 335px;
204
+ left: 0px;
205
+ }
206
+
207
+ #cell-restart {
208
+ top: 370px;
209
+ left: 0px;
210
+ }
211
+
212
+ #button-restart {
213
+ top: 370px;
214
+ left: 0px;
215
+ }
216
+
217
+ #cell-gotowwa {
218
+ top: 405px;
219
+ left: 0px;
220
+ }
221
+
222
+ #button-gotowwa {
223
+ top: 405px;
224
+ left: 0px;
225
+ }
226
+
227
+ canvas.wwa-canvas {
228
+ display: block;
229
+ position: absolute;
230
+ }
231
+
232
+ #wwa-cover {
233
+ position: absolute;
234
+ top: 0;
235
+ left: 0;
236
+ width: 560px;
237
+ height: 440px;
238
+ line-height: 16px;
239
+ font-size: 12px;
240
+ background-color: #FFFFFF;
241
+ }
242
+ #wwa-cover > #version {
243
+ position: absolute;
244
+ bottom: 32px;
245
+ height: 16px;
246
+ text-align: left;
247
+ padding-left: 4px;
248
+ color: #000000;
249
+ }
250
+ #wwa-cover > #progress-message-container {
251
+ position: absolute;
252
+ bottom: 16px;
253
+ height: 16px;
254
+ text-align: left;
255
+ padding-left: 4px;
256
+ color: #000000;
257
+ }
258
+ #wwa-cover > #progress-bar {
259
+ position: absolute;
260
+ bottom: 0;
261
+ left: 0;
262
+ width: auto;
263
+ height: 16px;
264
+ background-color: #00ff90;
265
+ }
266
+ #wwa-cover > #progress-bar-bg {
267
+ position: absolute;
268
+ bottom: 0;
269
+ left: 0;
270
+ width: 560px;
271
+ height: 16px;
272
+ background-color: #808080;
273
+ }
274
+ #wwa-cover > #progress-bar-audio {
275
+ position: absolute;
276
+ bottom: 0;
277
+ left: 0;
278
+ width: auto;
279
+ height: 16px;
280
+ background-color: #008aff;
281
+ }
282
+ #wwa-cover > #progress-disp {
283
+ position: absolute;
284
+ bottom: 0;
285
+ right: 0;
286
+ width: 120px;
287
+ height: 16px;
288
+ background-color: #FF6A00;
289
+ color: #FFFFFF;
290
+ text-align: center;
291
+ font-weight: bold;
292
+ overflow: hidden;
293
+ }
294
+
295
+ #wwa-fader {
296
+ position: absolute;
297
+ top: 0;
298
+ left: 0;
299
+ width: 440px;
300
+ height: 440px;
301
+ border-width: 0;
302
+ border-color: #808080;
303
+ border-style: solid;
304
+ display: none;
305
+ }
306
+
307
+ #wwa-text-message-window,
308
+ .wwa-message-window, #wwa-battle-estimate, #wwa-password-window {
309
+ background-color: rgba(255, 255, 255, 0.9);
310
+ border: 2px solid #000;
311
+ border-radius: 10px;
312
+ box-sizing: border-box;
313
+ overflow: auto;
314
+ user-select: none;
315
+ }
316
+
317
+ #wwa-battle-estimate, #wwa-password-window {
318
+ position: absolute;
319
+ top: 0;
320
+ left: 0;
321
+ margin: 20px;
322
+ width: 400px;
323
+ height: 400px;
324
+ cursor: pointer;
325
+ }
326
+
327
+ #wwa-text-message-window,
328
+ .wwa-message-window {
329
+ position: absolute;
330
+ }
331
+
332
+ #wwa-password-window {
333
+ font-size: 12px;
334
+ }
335
+ #wwa-password-window > div.wwa-password-description {
336
+ text-align: left;
337
+ padding: 8px;
338
+ }
339
+ #wwa-password-window > textarea {
340
+ font-size: inherit;
341
+ }
342
+ #wwa-password-window > div.wwa-password-submit {
343
+ padding: 4px;
344
+ box-sizing: border-box;
345
+ }
346
+ #wwa-password-window > div.wwa-password-submit button {
347
+ display: inline;
348
+ margin: 0 4px;
349
+ }
350
+
351
+ #wwa-battle-estimate {
352
+ font-size: 16px;
353
+ }
354
+ #wwa-battle-estimate > .est {
355
+ width: 100%;
356
+ height: 50px;
357
+ }
358
+ #wwa-battle-estimate > .est > .est-img-wrapper {
359
+ width: 40px;
360
+ height: 40px;
361
+ margin: 5px;
362
+ float: left;
363
+ }
364
+ #wwa-battle-estimate > .est > .est-status-wrapper {
365
+ height: 40px;
366
+ margin: 5px;
367
+ float: left;
368
+ text-align: left;
369
+ position: relative;
370
+ }
371
+ #wwa-battle-estimate > .est > .est-status-wrapper > div {
372
+ width: 140px;
373
+ height: 20px;
374
+ line-height: 20px;
375
+ position: absolute;
376
+ }
377
+ #wwa-battle-estimate > .est > .est-status-wrapper > .est-energy {
378
+ top: 0;
379
+ left: 0;
380
+ }
381
+ #wwa-battle-estimate > .est > .est-status-wrapper > .est-strength {
382
+ top: 0;
383
+ left: 140px;
384
+ }
385
+ #wwa-battle-estimate > .est > .est-status-wrapper > .est-defence {
386
+ top: 20px;
387
+ left: 0;
388
+ }
389
+ #wwa-battle-estimate > .est > .est-status-wrapper > .est-damage {
390
+ top: 20px;
391
+ left: 140px;
392
+ color: #FF0000;
393
+ white-space: nowrap;
394
+ }
395
+ #wwa-battle-estimate > .est:after {
396
+ content: "";
397
+ clear: left;
398
+ display: block;
399
+ height: 0;
400
+ visibility: hidden;
401
+ }
402
+
403
+ .wwa-yesno-wrapper {
404
+ margin: 0 0 10px 246px;
405
+ width: 80px;
406
+ height: 40px;
407
+ cursor: pointer;
408
+ }
409
+
410
+ .wwa-yes-button,
411
+ .wwa-no-button {
412
+ padding: 0;
413
+ margin: 0;
414
+ float: left;
415
+ width: 40px;
416
+ height: 40px;
417
+ }
418
+
419
+ #wwa-wrapper.useScaleUp #wwa-text-message-window {
420
+ overflow: hidden;
421
+ }
422
+ #wwa-wrapper.useScaleUp #wwa-text-message-window .wwa-yesno-wrapper {
423
+ transform: scale(1.5, 1.5) translate(-30px, 20px);
424
+ image-rendering: pixelated;
425
+ width: 100px;
426
+ height: 80px !important;
427
+ }
428
+ #wwa-wrapper.useScaleUp #wwa-text-message-window .wwa-yesno-wrapper .wwa-yes-button,
429
+ #wwa-wrapper.useScaleUp #wwa-text-message-window .wwa-yesno-wrapper .wwa-no-button {
430
+ margin: 0 5px !important;
431
+ }
432
+
433
+ div.savedata {
434
+ display: inline-block;
435
+ text-align: center;
436
+ padding: 2px 17px;
437
+ vertical-align: middle;
438
+ font-size: 0;
439
+ border-width: 3px;
440
+ border-style: dotted;
441
+ border-color: transparent;
442
+ border-radius: 7px;
443
+ }
444
+ div.savedata.select {
445
+ border-color: #FF0000;
446
+ }
447
+ div.savedata > div.wide-cell-row {
448
+ position: relative;
449
+ pointer-events: none;
450
+ }
451
+ div.savedata > div.wide-cell-row > div.status-icon {
452
+ top: 0;
453
+ left: 6px;
454
+ padding: 0;
455
+ margin: 0;
456
+ }
457
+ div.savedata > div.ss {
458
+ display: inline-block;
459
+ padding: 0;
460
+ margin: 0px 4px 3px 4px;
461
+ position: relative;
462
+ pointer-events: none;
463
+ }
464
+ div.savedata > div.ss:empty {
465
+ background-color: rgba(0, 0, 0, 0.2);
466
+ width: 99px;
467
+ height: 99px;
468
+ }
469
+ div.savedata > div.ss > canvas {
470
+ display: inline-block;
471
+ }
472
+ div.savedata > div.ss > span {
473
+ display: inline-block;
474
+ font-size: 7px;
475
+ position: absolute;
476
+ bottom: 0;
477
+ right: 0;
478
+ background-color: rgba(0, 0, 0, 0.6);
479
+ color: rgb(255, 255, 255);
480
+ padding: 3px 7px;
481
+ }
482
+
483
+ .wwa-vardump-wrapper {
484
+ --wwa-vardump-grid-column-num: 10;
485
+ display: flex;
486
+ flex-direction: column;
487
+ align-items: center;
488
+ }
489
+ .wwa-vardump-wrapper > .user-variable-list-section {
490
+ width: 560px;
491
+ box-sizing: border-box;
492
+ border-radius: 8px;
493
+ background-color: #FFCC88;
494
+ }
495
+ .wwa-vardump-wrapper > .user-variable-list-section + .user-variable-list-section {
496
+ margin-top: 16px;
497
+ }
498
+ .wwa-vardump-wrapper > .user-variable-list-section[data-kind=named] > .user-variable-list {
499
+ --wwa-vardump-grid-column-num: 5;
500
+ }
501
+ .wwa-vardump-wrapper > .user-variable-list-section[data-kind=named] > .user-variable-list > li > .user-variable-card {
502
+ white-space: nowrap;
503
+ max-width: 12em;
504
+ }
505
+ .wwa-vardump-wrapper > .user-variable-list-section[data-kind=named] > .user-variable-list > li > .user-variable-card > .index, .wwa-vardump-wrapper > .user-variable-list-section[data-kind=named] > .user-variable-list > li > .user-variable-card > .value {
506
+ width: 100%;
507
+ text-overflow: ellipsis;
508
+ overflow: hidden;
509
+ }
510
+ .wwa-vardump-wrapper > .user-variable-list-section > header {
511
+ margin: 8px;
512
+ }
513
+ .wwa-vardump-wrapper > .user-variable-list-section > header > .heading-area {
514
+ display: flex;
515
+ justify-content: space-between;
516
+ }
517
+ .wwa-vardump-wrapper > .user-variable-list-section > header > .heading-area > h2 {
518
+ margin: 0;
519
+ font-size: 1.4em;
520
+ }
521
+ .wwa-vardump-wrapper > .user-variable-list-section > header > .heading-area > .content-visibility-toggle-button {
522
+ cursor: pointer;
523
+ }
524
+ .wwa-vardump-wrapper > .user-variable-list-section > header > .information {
525
+ margin: 8px 0 4px 0;
526
+ padding: 4px;
527
+ border-radius: 4px;
528
+ background-color: #FFFFCC;
529
+ }
530
+ .wwa-vardump-wrapper > .user-variable-list-section > header > .information[aria-hidden=true] {
531
+ display: none;
532
+ }
533
+ .wwa-vardump-wrapper > .user-variable-list-section > .user-variable-list {
534
+ display: grid;
535
+ grid-template-columns: repeat(var(--wwa-vardump-grid-column-num, 10), 1fr);
536
+ margin: 0 8px 8px 8px;
537
+ padding: 0;
538
+ width: calc(100% - 16px);
539
+ box-sizing: border-box;
540
+ text-align: center;
541
+ border-spacing: 1px;
542
+ list-style: none;
543
+ }
544
+ .wwa-vardump-wrapper > .user-variable-list-section > .user-variable-list[aria-hidden=true] {
545
+ display: none;
546
+ }
547
+ .wwa-vardump-wrapper > .user-variable-list-section > .user-variable-list > li > .user-variable-card {
548
+ margin: 1px;
549
+ }
550
+ .wwa-vardump-wrapper > .user-variable-list-section > .user-variable-list > li > .user-variable-card > .index {
551
+ border-radius: 4px 4px 0 0;
552
+ background-color: #FFFF66;
553
+ position: relative;
554
+ }
555
+ .wwa-vardump-wrapper > .user-variable-list-section > .user-variable-list > li > .user-variable-card > .index[data-labelled-var-index=true] {
556
+ font-weight: bold;
557
+ text-decoration: underline;
558
+ background-color: #66FFFF;
559
+ cursor: pointer;
560
+ }
561
+ .wwa-vardump-wrapper > .user-variable-list-section > .user-variable-list > li > .user-variable-card > .index > .user-variable-label {
562
+ cursor: auto;
563
+ position: absolute;
564
+ top: 15px;
565
+ left: 45px;
566
+ display: block;
567
+ width: max-content;
568
+ background-color: #000000;
569
+ color: #FFFFFF;
570
+ z-index: 100;
571
+ padding: 5px;
572
+ }
573
+ .wwa-vardump-wrapper > .user-variable-list-section > .user-variable-list > li > .user-variable-card > .index > .user-variable-label[aria-hidden=true] {
574
+ display: none;
575
+ }
576
+ .wwa-vardump-wrapper > .user-variable-list-section > .user-variable-list > li > .user-variable-card .value {
577
+ border-radius: 0 0 4px 4px;
578
+ background-color: #FFFFCC;
579
+ }
580
+
581
+ .wwa-virtualpad__button {
582
+ background-color: #c0c0c0;
583
+ border: 0;
584
+ color: #000;
585
+ font-weight: 700;
586
+ opacity: 0.75;
587
+ text-align: center;
588
+ -moz-appearance: none;
589
+ -webkit-appearance: none;
590
+ -webkit-touch-callout: none;
591
+ -webkit-user-select: none;
592
+ }
593
+
594
+ #wwa-enter-button,
595
+ #wwa-esc-button {
596
+ font-size: 35px;
597
+ border-radius: 50%;
598
+ }
599
+ @media (orientation: portrait) {
600
+ #wwa-enter-button,
601
+ #wwa-esc-button {
602
+ width: 21vmin;
603
+ height: 21vmin;
604
+ }
605
+ }
606
+ @media (orientation: landscape) {
607
+ #wwa-enter-button,
608
+ #wwa-esc-button {
609
+ width: 30vmin;
610
+ height: 30vmin;
611
+ }
612
+ }
613
+
614
+ #wwa-up-button,
615
+ #wwa-right-button,
616
+ #wwa-down-button,
617
+ #wwa-left-button {
618
+ font-size: 35px;
619
+ }
620
+ @media (orientation: portrait) {
621
+ #wwa-up-button,
622
+ #wwa-right-button,
623
+ #wwa-down-button,
624
+ #wwa-left-button {
625
+ width: 20vmin;
626
+ height: 20vmin;
627
+ }
628
+ }
629
+ @media (orientation: landscape) {
630
+ #wwa-up-button,
631
+ #wwa-right-button,
632
+ #wwa-down-button,
633
+ #wwa-left-button {
634
+ width: 24vmin;
635
+ height: 24vmin;
636
+ }
637
+ }
638
+
639
+ #wwa-slow-button,
640
+ #wwa-fast-button {
641
+ font-size: 25px;
642
+ height: 10vmin;
643
+ border-radius: 0.75rem;
644
+ }
645
+ @media (orientation: portrait) {
646
+ #wwa-slow-button,
647
+ #wwa-fast-button {
648
+ width: 14vmin;
649
+ }
650
+ }
651
+ @media (orientation: landscape) {
652
+ #wwa-slow-button,
653
+ #wwa-fast-button {
654
+ width: 20vmin;
655
+ }
656
+ }
657
+
658
+ #wwa-virtualpad-left,
659
+ #wwa-virtualpad-right {
660
+ visibility: hidden;
661
+ position: fixed;
662
+ pointer-events: none;
663
+ }
664
+ @media (orientation: portrait) {
665
+ #wwa-virtualpad-left,
666
+ #wwa-virtualpad-right {
667
+ bottom: 30vh;
668
+ }
669
+ }
670
+ @media (orientation: landscape) {
671
+ #wwa-virtualpad-left,
672
+ #wwa-virtualpad-right {
673
+ bottom: 20vh;
674
+ }
675
+ }
676
+
677
+ #wwa-virtualpad-left {
678
+ left: 0;
679
+ display: grid;
680
+ grid-template-columns: 1fr 7.5vmin 7.5vmin 1fr;
681
+ grid-template-rows: 1fr 7.5vmin 7.5vmin 1fr;
682
+ transform: rotate(45deg);
683
+ gap: 4px;
684
+ margin-left: 6vmin;
685
+ }
686
+ @media (orientation: portrait) {
687
+ #wwa-virtualpad-left {
688
+ width: 40vmin;
689
+ height: 40vmin;
690
+ }
691
+ }
692
+ @media (orientation: landscape) {
693
+ #wwa-virtualpad-left {
694
+ width: 48vmin;
695
+ height: 48vmin;
696
+ }
697
+ }
698
+ #wwa-virtualpad-left .wwa-virtualpad__hole {
699
+ grid-column: 2/4;
700
+ grid-row: 2/4;
701
+ background-color: #808080;
702
+ border-radius: 50%;
703
+ }
704
+
705
+ #wwa-virtualpad-right {
706
+ right: 0;
707
+ display: grid;
708
+ grid-template: " . . slow slow fast fast " " . . . . . . " 1vmin " . . . enter enter enter" " . . . enter enter enter" "esc esc esc enter enter enter" "esc esc esc . . . " "esc esc esc . . . " " . . . . . . " 1vmin;
709
+ gap: 1vmin;
710
+ margin-right: 6vmin;
711
+ }
712
+
713
+ .wwa-virtualpad__button {
714
+ pointer-events: auto;
715
+ }
716
+ .wwa-virtualpad__button--pressed {
717
+ background-color: #808080;
718
+ }
719
+
720
+ #wwa-up-button::before,
721
+ #wwa-right-button::before,
722
+ #wwa-down-button::before,
723
+ #wwa-left-button::before {
724
+ transform: rotate(-45deg);
725
+ display: block;
726
+ }
727
+
728
+ #wwa-up-button {
729
+ grid-column: 1/3;
730
+ grid-row: 1/3;
731
+ border-radius: 100% 0 0 0;
732
+ }
733
+ #wwa-up-button::before {
734
+ content: "△";
735
+ }
736
+
737
+ #wwa-right-button {
738
+ grid-column: 3/5;
739
+ grid-row: 1/3;
740
+ border-radius: 0 100% 0 0;
741
+ }
742
+ #wwa-right-button::before {
743
+ content: "▷";
744
+ }
745
+
746
+ #wwa-down-button {
747
+ grid-column: 3/5;
748
+ grid-row: 3/5;
749
+ border-radius: 0 0 100% 0;
750
+ }
751
+ #wwa-down-button::before {
752
+ content: "▽";
753
+ }
754
+
755
+ #wwa-left-button {
756
+ grid-column: 1/3;
757
+ grid-row: 3/5;
758
+ border-radius: 0 0 0 100%;
759
+ }
760
+ #wwa-left-button::before {
761
+ content: "◁";
762
+ }
763
+
764
+ #wwa-enter-button {
765
+ grid-area: enter;
766
+ }
767
+
768
+ #wwa-esc-button {
769
+ grid-area: esc;
770
+ }
771
+
772
+ #wwa-slow-button {
773
+ grid-area: slow;
774
+ }
775
+
776
+ #wwa-fast-button {
777
+ grid-area: fast;
778
+ }
779
+
780
+ #virtualpad-controller {
781
+ margin: 1rem;
782
+ text-align: center;
783
+ }
784
+
785
+ /*
786
+ * z-index.css はIDで指定されている要素に対してのみ z-index を指定するSASSファイルです。
787
+ * アイテムボックスのエフェクトなど、一定条件で発生する、クラス指定の要素は別のSASSファイルをご利用ください。
788
+ */
789
+ .wwa-yesno-wrapper {
790
+ z-index: 10;
791
+ }
792
+
793
+ canvas#wwa-map {
794
+ z-index: 100;
795
+ }
796
+
797
+ canvas#wwa-map-sub {
798
+ z-index: 101;
799
+ }
800
+
801
+ div#wwa-sidebar {
802
+ z-index: 102;
803
+ }
804
+
805
+ #disp-energy {
806
+ z-index: 103;
807
+ }
808
+ #disp-energy > .status-icon {
809
+ z-index: 140;
810
+ }
811
+ #disp-energy > .status-value-box {
812
+ z-index: 150;
813
+ }
814
+
815
+ #disp-strength {
816
+ z-index: 104;
817
+ }
818
+ #disp-strength > .status-icon {
819
+ z-index: 141;
820
+ }
821
+ #disp-strength > .status-value-box {
822
+ z-index: 151;
823
+ }
824
+
825
+ #disp-defence {
826
+ z-index: 105;
827
+ }
828
+ #disp-defence > .status-icon {
829
+ z-index: 142;
830
+ }
831
+ #disp-defence > .status-value-box {
832
+ z-index: 152;
833
+ }
834
+
835
+ #disp-gold {
836
+ z-index: 106;
837
+ }
838
+ #disp-gold > .status-icon {
839
+ z-index: 143;
840
+ }
841
+ #disp-gold > .status-value-box {
842
+ z-index: 153;
843
+ }
844
+
845
+ #item0 {
846
+ z-index: 107;
847
+ }
848
+ #item0 > .item-disp {
849
+ z-index: 160;
850
+ }
851
+ #item0 > .item-click-border {
852
+ z-index: 172;
853
+ }
854
+
855
+ #item1 {
856
+ z-index: 108;
857
+ }
858
+ #item1 > .item-disp {
859
+ z-index: 161;
860
+ }
861
+ #item1 > .item-click-border {
862
+ z-index: 173;
863
+ }
864
+
865
+ #item2 {
866
+ z-index: 109;
867
+ }
868
+ #item2 > .item-disp {
869
+ z-index: 162;
870
+ }
871
+ #item2 > .item-click-border {
872
+ z-index: 174;
873
+ }
874
+
875
+ #item3 {
876
+ z-index: 110;
877
+ }
878
+ #item3 > .item-disp {
879
+ z-index: 163;
880
+ }
881
+ #item3 > .item-click-border {
882
+ z-index: 175;
883
+ }
884
+
885
+ #item4 {
886
+ z-index: 111;
887
+ }
888
+ #item4 > .item-disp {
889
+ z-index: 164;
890
+ }
891
+ #item4 > .item-click-border {
892
+ z-index: 176;
893
+ }
894
+
895
+ #item5 {
896
+ z-index: 112;
897
+ }
898
+ #item5 > .item-disp {
899
+ z-index: 165;
900
+ }
901
+ #item5 > .item-click-border {
902
+ z-index: 177;
903
+ }
904
+
905
+ #item6 {
906
+ z-index: 113;
907
+ }
908
+ #item6 > .item-disp {
909
+ z-index: 166;
910
+ }
911
+ #item6 > .item-click-border {
912
+ z-index: 178;
913
+ }
914
+
915
+ #item7 {
916
+ z-index: 114;
917
+ }
918
+ #item7 > .item-disp {
919
+ z-index: 167;
920
+ }
921
+ #item7 > .item-click-border {
922
+ z-index: 179;
923
+ }
924
+
925
+ #item8 {
926
+ z-index: 115;
927
+ }
928
+ #item8 > .item-disp {
929
+ z-index: 168;
930
+ }
931
+ #item8 > .item-click-border {
932
+ z-index: 180;
933
+ }
934
+
935
+ #item9 {
936
+ z-index: 116;
937
+ }
938
+ #item9 > .item-disp {
939
+ z-index: 169;
940
+ }
941
+ #item9 > .item-click-border {
942
+ z-index: 181;
943
+ }
944
+
945
+ #item10 {
946
+ z-index: 117;
947
+ }
948
+ #item10 > .item-disp {
949
+ z-index: 170;
950
+ }
951
+ #item10 > .item-click-border {
952
+ z-index: 182;
953
+ }
954
+
955
+ #item11 {
956
+ z-index: 118;
957
+ }
958
+ #item11 > .item-disp {
959
+ z-index: 171;
960
+ }
961
+ #item11 > .item-click-border {
962
+ z-index: 183;
963
+ }
964
+
965
+ #cell-load {
966
+ z-index: 119;
967
+ }
968
+
969
+ #button-load {
970
+ z-index: 201;
971
+ }
972
+
973
+ #cell-save {
974
+ z-index: 120;
975
+ }
976
+
977
+ #button-save {
978
+ z-index: 202;
979
+ }
980
+
981
+ #cell-restart {
982
+ z-index: 121;
983
+ }
984
+
985
+ #button-restart {
986
+ z-index: 203;
987
+ }
988
+
989
+ #cell-gotowwa {
990
+ z-index: 122;
991
+ }
992
+
993
+ #button-gotowwa {
994
+ z-index: 204;
995
+ }
996
+
997
+ #wwa-controller {
998
+ z-index: 200;
999
+ }
1000
+
1001
+ #wwa-battle-estimate {
1002
+ z-index: 230;
1003
+ }
1004
+
1005
+ #wwa-password-window {
1006
+ z-index: 231;
1007
+ }
1008
+
1009
+ #wwa-fader {
1010
+ z-index: 250;
1011
+ }
1012
+
1013
+ #wwa-cover {
1014
+ z-index: 300;
1015
+ }
1016
+ #wwa-cover > #progress-message-container {
1017
+ z-index: 305;
1018
+ }
1019
+ #wwa-cover > #progress-bar-bg {
1020
+ z-index: 310;
1021
+ }
1022
+ #wwa-cover > #progress-bar {
1023
+ z-index: 315;
1024
+ }
1025
+ #wwa-cover > #progress-bar-audio {
1026
+ z-index: 316;
1027
+ }
1028
+ #wwa-cover > #progress-disp {
1029
+ z-index: 320;
1030
+ }
1031
+
1032
+ #wwa-text-message-window {
1033
+ z-index: 400;
1034
+ }
1035
+
1036
+ #wwa-virtualpad-left {
1037
+ z-index: 500;
1038
+ }
1039
+
1040
+ #wwa-virtualpad-right {
1041
+ z-index: 501;
1042
+ }
1043
+
1044
+ .wwa-virtualpad__hole {
1045
+ z-index: 502;
1046
+ }