@wwawing/styles 3.9.1 → 3.10.0-beta.1

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 (3) hide show
  1. package/output/wwa.css +110 -63
  2. package/output/wwa_classic.css +110 -63
  3. package/package.json +2 -2
package/output/wwa.css CHANGED
@@ -529,109 +529,152 @@ div.savedata > div.ss > span {
529
529
  width: 3em;
530
530
  }
531
531
 
532
+ .wwa-virtualpad__button {
533
+ background-color: #c0c0c0;
534
+ border: 0;
535
+ color: #000;
536
+ font-weight: 700;
537
+ opacity: 0.75;
538
+ text-align: center;
539
+ -moz-appearance: none;
540
+ -webkit-appearance: none;
541
+ -webkit-touch-callout: none;
542
+ -webkit-user-select: none;
543
+ }
544
+
545
+ #wwa-enter-button,
546
+ #wwa-esc-button,
547
+ #wwa-estimate-button {
548
+ font-size: 35px;
549
+ height: 16vmin;
550
+ width: 16vmin;
551
+ border-radius: 50%;
552
+ }
553
+
554
+ #wwa-up-button,
555
+ #wwa-right-button,
556
+ #wwa-down-button,
557
+ #wwa-left-button {
558
+ font-size: 35px;
559
+ height: 20vmin;
560
+ width: 20vmin;
561
+ }
562
+
563
+ #wwa-slow-button,
564
+ #wwa-fast-button {
565
+ font-size: 25px;
566
+ height: 10vmin;
567
+ width: 16vmin;
568
+ border-radius: 0.75rem;
569
+ }
570
+
532
571
  #wwa-virtualpad-left,
533
572
  #wwa-virtualpad-right {
534
- bottom: 0;
573
+ bottom: 20vmin;
535
574
  position: fixed;
575
+ pointer-events: none;
536
576
  }
537
577
 
538
578
  #wwa-virtualpad-left {
539
579
  left: 0;
540
- }
541
- #wwa-virtualpad-left .virtualpad_move button {
542
- border-radius: 1rem;
580
+ display: grid;
581
+ grid-template-columns: 1fr 7.5vmin 7.5vmin 1fr;
582
+ grid-template-rows: 1fr 7.5vmin 7.5vmin 1fr;
583
+ width: 40vmin;
584
+ height: 40vmin;
585
+ transform: rotate(45deg);
586
+ gap: 4px;
587
+ margin-left: 6vmin;
588
+ }
589
+ #wwa-virtualpad-left .wwa-virtualpad__hole {
590
+ grid-column: 2/4;
591
+ grid-row: 2/4;
592
+ background-color: #808080;
593
+ border-radius: 50%;
543
594
  }
544
595
 
545
596
  #wwa-virtualpad-right {
546
597
  right: 0;
547
- }
548
- #wwa-virtualpad-right .virtualpad_select button {
549
- border-radius: 50%;
550
- }
551
- #wwa-virtualpad-right .virtualpad_speedcontrol button {
552
- font-size: 30px;
553
- height: 50px;
554
- width: 90px;
598
+ display: grid;
599
+ grid-template: " . slow " " . fast " " . . " 20px " . estimate" " . estimate" " . enter " "esc enter " "esc . " " . . " 1vmin;
600
+ gap: 1vmin;
601
+ margin-right: 6vmin;
555
602
  }
556
603
 
557
- #wwa-virtualpad-left button,
558
- #wwa-virtualpad-right button {
559
- background-color: #c0c0c0;
560
- border: 0;
561
- color: #000;
562
- opacity: 0.75;
604
+ .wwa-virtualpad__button {
605
+ pointer-events: auto;
563
606
  }
564
-
565
- #wwa-virtualpad-left .virtualpad_move button,
566
- #wwa-virtualpad-right .virtualpad_select button {
567
- font-size: 50px;
568
- height: 100px;
569
- width: 100px;
607
+ .wwa-virtualpad__button--pressed {
608
+ background-color: #808080;
570
609
  }
571
610
 
572
- #wwa-virtualpad-left .virtualpad_move,
573
- #wwa-virtualpad-right .virtualpad_select,
574
- #wwa-virtualpad-right .virtualpad_speedcontrol {
575
- display: grid;
611
+ #wwa-up-button::before,
612
+ #wwa-right-button::before,
613
+ #wwa-down-button::before,
614
+ #wwa-left-button::before {
615
+ transform: rotate(-45deg);
616
+ display: block;
576
617
  }
577
618
 
578
- #wwa-virtualpad-left .virtualpad_move {
579
- grid-template-columns: repeat(3, 1fr);
619
+ #wwa-up-button {
620
+ grid-column: 1/3;
621
+ grid-row: 1/3;
622
+ border-radius: 100% 0 0 0;
580
623
  }
581
-
582
- #wwa-virtualpad-right .virtualpad_select,
583
- #wwa-virtualpad-right .virtualpad_speedcontrol {
584
- grid-template-columns: repeat(2, 1fr);
624
+ #wwa-up-button::before {
625
+ content: "△";
585
626
  }
586
627
 
587
- #wwa-virtualpad-right .virtualpad_speedcontrol {
588
- margin-bottom: 16px;
628
+ #wwa-right-button {
629
+ grid-column: 3/5;
630
+ grid-row: 1/3;
631
+ border-radius: 0 100% 0 0;
589
632
  }
590
-
591
- #wwa-top-button {
592
- grid-column-start: 2;
593
- grid-row-start: 1;
633
+ #wwa-right-button::before {
634
+ content: "▷";
594
635
  }
595
636
 
596
- #wwa-left-button,
597
- #wwa-right-button {
598
- grid-row-start: 2;
637
+ #wwa-down-button {
638
+ grid-column: 3/5;
639
+ grid-row: 3/5;
640
+ border-radius: 0 0 100% 0;
641
+ }
642
+ #wwa-down-button::before {
643
+ content: "▽";
599
644
  }
600
645
 
601
646
  #wwa-left-button {
602
- grid-column-start: 1;
647
+ grid-column: 1/3;
648
+ grid-row: 3/5;
649
+ border-radius: 0 0 0 100%;
603
650
  }
604
-
605
- #wwa-right-button {
606
- grid-column-start: 3;
651
+ #wwa-left-button::before {
652
+ content: "◁";
607
653
  }
608
654
 
609
- #wwa-bottom-button {
610
- grid-column-start: 2;
611
- grid-row-start: 3;
655
+ #wwa-enter-button {
656
+ grid-area: enter;
612
657
  }
613
658
 
614
- #wwa-y-button {
615
- grid-column-start: 2;
616
- grid-row-start: 3;
659
+ #wwa-esc-button {
660
+ grid-area: esc;
617
661
  }
618
662
 
619
- #wwa-n-button {
620
- grid-column-start: 1;
621
- grid-row-start: 4;
663
+ #wwa-estimate-button {
664
+ grid-area: estimate;
622
665
  }
623
666
 
624
- #wwa-m-button {
625
- grid-column-start: 1;
626
- grid-row-start: 2;
667
+ #wwa-slow-button {
668
+ grid-area: slow;
627
669
  }
628
670
 
629
- #wwa-i-button {
630
- border-radius: 1rem 0 0 1rem;
671
+ #wwa-fast-button {
672
+ grid-area: fast;
631
673
  }
632
674
 
633
- #wwa-p-button {
634
- border-radius: 0 1rem 1rem 0;
675
+ #virtualpad-controller {
676
+ margin: 1rem;
677
+ text-align: center;
635
678
  }
636
679
 
637
680
  /*
@@ -891,4 +934,8 @@ div#wwa-sidebar {
891
934
 
892
935
  #wwa-virtualpad-right {
893
936
  z-index: 501;
937
+ }
938
+
939
+ .wwa-virtualpad__hole {
940
+ z-index: 502;
894
941
  }
package/output/wwa_classic.css CHANGED
@@ -529,109 +529,152 @@ div.savedata > div.ss > span {
529
529
  width: 3em;
530
530
  }
531
531
 
532
+ .wwa-virtualpad__button {
533
+ background-color: #c0c0c0;
534
+ border: 0;
535
+ color: #000;
536
+ font-weight: 700;
537
+ opacity: 0.75;
538
+ text-align: center;
539
+ -moz-appearance: none;
540
+ -webkit-appearance: none;
541
+ -webkit-touch-callout: none;
542
+ -webkit-user-select: none;
543
+ }
544
+
545
+ #wwa-enter-button,
546
+ #wwa-esc-button,
547
+ #wwa-estimate-button {
548
+ font-size: 35px;
549
+ height: 16vmin;
550
+ width: 16vmin;
551
+ border-radius: 50%;
552
+ }
553
+
554
+ #wwa-up-button,
555
+ #wwa-right-button,
556
+ #wwa-down-button,
557
+ #wwa-left-button {
558
+ font-size: 35px;
559
+ height: 20vmin;
560
+ width: 20vmin;
561
+ }
562
+
563
+ #wwa-slow-button,
564
+ #wwa-fast-button {
565
+ font-size: 25px;
566
+ height: 10vmin;
567
+ width: 16vmin;
568
+ border-radius: 0.75rem;
569
+ }
570
+
532
571
  #wwa-virtualpad-left,
533
572
  #wwa-virtualpad-right {
534
- bottom: 0;
573
+ bottom: 20vmin;
535
574
  position: fixed;
575
+ pointer-events: none;
536
576
  }
537
577
 
538
578
  #wwa-virtualpad-left {
539
579
  left: 0;
540
- }
541
- #wwa-virtualpad-left .virtualpad_move button {
542
- border-radius: 1rem;
580
+ display: grid;
581
+ grid-template-columns: 1fr 7.5vmin 7.5vmin 1fr;
582
+ grid-template-rows: 1fr 7.5vmin 7.5vmin 1fr;
583
+ width: 40vmin;
584
+ height: 40vmin;
585
+ transform: rotate(45deg);
586
+ gap: 4px;
587
+ margin-left: 6vmin;
588
+ }
589
+ #wwa-virtualpad-left .wwa-virtualpad__hole {
590
+ grid-column: 2/4;
591
+ grid-row: 2/4;
592
+ background-color: #808080;
593
+ border-radius: 50%;
543
594
  }
544
595
 
545
596
  #wwa-virtualpad-right {
546
597
  right: 0;
547
- }
548
- #wwa-virtualpad-right .virtualpad_select button {
549
- border-radius: 50%;
550
- }
551
- #wwa-virtualpad-right .virtualpad_speedcontrol button {
552
- font-size: 30px;
553
- height: 50px;
554
- width: 90px;
598
+ display: grid;
599
+ grid-template: " . slow " " . fast " " . . " 20px " . estimate" " . estimate" " . enter " "esc enter " "esc . " " . . " 1vmin;
600
+ gap: 1vmin;
601
+ margin-right: 6vmin;
555
602
  }
556
603
 
557
- #wwa-virtualpad-left button,
558
- #wwa-virtualpad-right button {
559
- background-color: #c0c0c0;
560
- border: 0;
561
- color: #000;
562
- opacity: 0.75;
604
+ .wwa-virtualpad__button {
605
+ pointer-events: auto;
563
606
  }
564
-
565
- #wwa-virtualpad-left .virtualpad_move button,
566
- #wwa-virtualpad-right .virtualpad_select button {
567
- font-size: 50px;
568
- height: 100px;
569
- width: 100px;
607
+ .wwa-virtualpad__button--pressed {
608
+ background-color: #808080;
570
609
  }
571
610
 
572
- #wwa-virtualpad-left .virtualpad_move,
573
- #wwa-virtualpad-right .virtualpad_select,
574
- #wwa-virtualpad-right .virtualpad_speedcontrol {
575
- display: grid;
611
+ #wwa-up-button::before,
612
+ #wwa-right-button::before,
613
+ #wwa-down-button::before,
614
+ #wwa-left-button::before {
615
+ transform: rotate(-45deg);
616
+ display: block;
576
617
  }
577
618
 
578
- #wwa-virtualpad-left .virtualpad_move {
579
- grid-template-columns: repeat(3, 1fr);
619
+ #wwa-up-button {
620
+ grid-column: 1/3;
621
+ grid-row: 1/3;
622
+ border-radius: 100% 0 0 0;
580
623
  }
581
-
582
- #wwa-virtualpad-right .virtualpad_select,
583
- #wwa-virtualpad-right .virtualpad_speedcontrol {
584
- grid-template-columns: repeat(2, 1fr);
624
+ #wwa-up-button::before {
625
+ content: "△";
585
626
  }
586
627
 
587
- #wwa-virtualpad-right .virtualpad_speedcontrol {
588
- margin-bottom: 16px;
628
+ #wwa-right-button {
629
+ grid-column: 3/5;
630
+ grid-row: 1/3;
631
+ border-radius: 0 100% 0 0;
589
632
  }
590
-
591
- #wwa-top-button {
592
- grid-column-start: 2;
593
- grid-row-start: 1;
633
+ #wwa-right-button::before {
634
+ content: "▷";
594
635
  }
595
636
 
596
- #wwa-left-button,
597
- #wwa-right-button {
598
- grid-row-start: 2;
637
+ #wwa-down-button {
638
+ grid-column: 3/5;
639
+ grid-row: 3/5;
640
+ border-radius: 0 0 100% 0;
641
+ }
642
+ #wwa-down-button::before {
643
+ content: "▽";
599
644
  }
600
645
 
601
646
  #wwa-left-button {
602
- grid-column-start: 1;
647
+ grid-column: 1/3;
648
+ grid-row: 3/5;
649
+ border-radius: 0 0 0 100%;
603
650
  }
604
-
605
- #wwa-right-button {
606
- grid-column-start: 3;
651
+ #wwa-left-button::before {
652
+ content: "◁";
607
653
  }
608
654
 
609
- #wwa-bottom-button {
610
- grid-column-start: 2;
611
- grid-row-start: 3;
655
+ #wwa-enter-button {
656
+ grid-area: enter;
612
657
  }
613
658
 
614
- #wwa-y-button {
615
- grid-column-start: 2;
616
- grid-row-start: 3;
659
+ #wwa-esc-button {
660
+ grid-area: esc;
617
661
  }
618
662
 
619
- #wwa-n-button {
620
- grid-column-start: 1;
621
- grid-row-start: 4;
663
+ #wwa-estimate-button {
664
+ grid-area: estimate;
622
665
  }
623
666
 
624
- #wwa-m-button {
625
- grid-column-start: 1;
626
- grid-row-start: 2;
667
+ #wwa-slow-button {
668
+ grid-area: slow;
627
669
  }
628
670
 
629
- #wwa-i-button {
630
- border-radius: 1rem 0 0 1rem;
671
+ #wwa-fast-button {
672
+ grid-area: fast;
631
673
  }
632
674
 
633
- #wwa-p-button {
634
- border-radius: 0 1rem 1rem 0;
675
+ #virtualpad-controller {
676
+ margin: 1rem;
677
+ text-align: center;
635
678
  }
636
679
 
637
680
  /*
@@ -893,6 +936,10 @@ div#wwa-sidebar {
893
936
  z-index: 501;
894
937
  }
895
938
 
939
+ .wwa-virtualpad__hole {
940
+ z-index: 502;
941
+ }
942
+
896
943
  .wwa-size-box {
897
944
  text-shadow: 1px 0px 0 gray;
898
945
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wwawing/styles",
3
- "version": "3.9.1",
3
+ "version": "3.10.0-beta.1",
4
4
  "description": "WWA Wing stylesheet files",
5
5
  "main": "index.js",
6
6
  "files": [
@@ -20,5 +20,5 @@
20
20
  "ts-node": "^10.8.1",
21
21
  "typescript": "^4.7.3"
22
22
  },
23
- "gitHead": "f8fd27b3ee7f9dfd8f07c65bec03973aaf67c335"
23
+ "gitHead": "d01da974eb9b40670bf46bdf677d25340a6e5542"
24
24
  }