@wwawing/styles 3.9.2 → 3.10.0-beta.2

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 +167 -64
  2. package/output/wwa_classic.css +167 -64
  3. package/package.json +2 -2
package/output/wwa.css CHANGED
@@ -529,109 +529,208 @@ div.savedata > div.ss > span {
529
529
  width: 3em;
530
530
  }
531
531
 
532
- #wwa-virtualpad-left,
533
- #wwa-virtualpad-right {
534
- bottom: 0;
535
- position: fixed;
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;
536
543
  }
537
544
 
538
- #wwa-virtualpad-left {
539
- left: 0;
545
+ #wwa-enter-button,
546
+ #wwa-esc-button {
547
+ font-size: 35px;
548
+ border-radius: 50%;
540
549
  }
541
- #wwa-virtualpad-left .virtualpad_move button {
542
- border-radius: 1rem;
550
+ @media (orientation: portrait) {
551
+ #wwa-enter-button,
552
+ #wwa-esc-button {
553
+ width: 21vmin;
554
+ height: 21vmin;
555
+ }
543
556
  }
544
-
545
- #wwa-virtualpad-right {
546
- right: 0;
557
+ @media (orientation: landscape) {
558
+ #wwa-enter-button,
559
+ #wwa-esc-button {
560
+ width: 30vmin;
561
+ height: 30vmin;
562
+ }
547
563
  }
548
- #wwa-virtualpad-right .virtualpad_select button {
549
- border-radius: 50%;
564
+
565
+ #wwa-up-button,
566
+ #wwa-right-button,
567
+ #wwa-down-button,
568
+ #wwa-left-button {
569
+ font-size: 35px;
550
570
  }
551
- #wwa-virtualpad-right .virtualpad_speedcontrol button {
552
- font-size: 30px;
553
- height: 50px;
554
- width: 90px;
571
+ @media (orientation: portrait) {
572
+ #wwa-up-button,
573
+ #wwa-right-button,
574
+ #wwa-down-button,
575
+ #wwa-left-button {
576
+ width: 20vmin;
577
+ height: 20vmin;
578
+ }
579
+ }
580
+ @media (orientation: landscape) {
581
+ #wwa-up-button,
582
+ #wwa-right-button,
583
+ #wwa-down-button,
584
+ #wwa-left-button {
585
+ width: 24vmin;
586
+ height: 24vmin;
587
+ }
555
588
  }
556
589
 
557
- #wwa-virtualpad-left button,
558
- #wwa-virtualpad-right button {
559
- background-color: #c0c0c0;
560
- border: 0;
561
- color: #000;
562
- opacity: 0.75;
590
+ #wwa-slow-button,
591
+ #wwa-fast-button {
592
+ font-size: 25px;
593
+ height: 10vmin;
594
+ border-radius: 0.75rem;
595
+ }
596
+ @media (orientation: portrait) {
597
+ #wwa-slow-button,
598
+ #wwa-fast-button {
599
+ width: 14vmin;
600
+ }
601
+ }
602
+ @media (orientation: landscape) {
603
+ #wwa-slow-button,
604
+ #wwa-fast-button {
605
+ width: 20vmin;
606
+ }
563
607
  }
564
608
 
565
- #wwa-virtualpad-left .virtualpad_move button,
566
- #wwa-virtualpad-right .virtualpad_select button {
567
- font-size: 50px;
568
- height: 100px;
569
- width: 100px;
609
+ #wwa-virtualpad-left,
610
+ #wwa-virtualpad-right {
611
+ visibility: hidden;
612
+ position: fixed;
613
+ pointer-events: none;
614
+ }
615
+ @media (orientation: portrait) {
616
+ #wwa-virtualpad-left,
617
+ #wwa-virtualpad-right {
618
+ bottom: 30vh;
619
+ }
620
+ }
621
+ @media (orientation: landscape) {
622
+ #wwa-virtualpad-left,
623
+ #wwa-virtualpad-right {
624
+ bottom: 20vh;
625
+ }
570
626
  }
571
627
 
572
- #wwa-virtualpad-left .virtualpad_move,
573
- #wwa-virtualpad-right .virtualpad_select,
574
- #wwa-virtualpad-right .virtualpad_speedcontrol {
628
+ #wwa-virtualpad-left {
629
+ left: 0;
575
630
  display: grid;
631
+ grid-template-columns: 1fr 7.5vmin 7.5vmin 1fr;
632
+ grid-template-rows: 1fr 7.5vmin 7.5vmin 1fr;
633
+ transform: rotate(45deg);
634
+ gap: 4px;
635
+ margin-left: 6vmin;
636
+ }
637
+ @media (orientation: portrait) {
638
+ #wwa-virtualpad-left {
639
+ width: 40vmin;
640
+ height: 40vmin;
641
+ }
642
+ }
643
+ @media (orientation: landscape) {
644
+ #wwa-virtualpad-left {
645
+ width: 48vmin;
646
+ height: 48vmin;
647
+ }
648
+ }
649
+ #wwa-virtualpad-left .wwa-virtualpad__hole {
650
+ grid-column: 2/4;
651
+ grid-row: 2/4;
652
+ background-color: #808080;
653
+ border-radius: 50%;
576
654
  }
577
655
 
578
- #wwa-virtualpad-left .virtualpad_move {
579
- grid-template-columns: repeat(3, 1fr);
656
+ #wwa-virtualpad-right {
657
+ right: 0;
658
+ display: grid;
659
+ 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;
660
+ gap: 1vmin;
661
+ margin-right: 6vmin;
580
662
  }
581
663
 
582
- #wwa-virtualpad-right .virtualpad_select,
583
- #wwa-virtualpad-right .virtualpad_speedcontrol {
584
- grid-template-columns: repeat(2, 1fr);
664
+ .wwa-virtualpad__button {
665
+ pointer-events: auto;
666
+ }
667
+ .wwa-virtualpad__button--pressed {
668
+ background-color: #808080;
585
669
  }
586
670
 
587
- #wwa-virtualpad-right .virtualpad_speedcontrol {
588
- margin-bottom: 16px;
671
+ #wwa-up-button::before,
672
+ #wwa-right-button::before,
673
+ #wwa-down-button::before,
674
+ #wwa-left-button::before {
675
+ transform: rotate(-45deg);
676
+ display: block;
589
677
  }
590
678
 
591
- #wwa-top-button {
592
- grid-column-start: 2;
593
- grid-row-start: 1;
679
+ #wwa-up-button {
680
+ grid-column: 1/3;
681
+ grid-row: 1/3;
682
+ border-radius: 100% 0 0 0;
683
+ }
684
+ #wwa-up-button::before {
685
+ content: "△";
594
686
  }
595
687
 
596
- #wwa-left-button,
597
688
  #wwa-right-button {
598
- grid-row-start: 2;
689
+ grid-column: 3/5;
690
+ grid-row: 1/3;
691
+ border-radius: 0 100% 0 0;
599
692
  }
600
-
601
- #wwa-left-button {
602
- grid-column-start: 1;
693
+ #wwa-right-button::before {
694
+ content: "▷";
603
695
  }
604
696
 
605
- #wwa-right-button {
606
- grid-column-start: 3;
697
+ #wwa-down-button {
698
+ grid-column: 3/5;
699
+ grid-row: 3/5;
700
+ border-radius: 0 0 100% 0;
701
+ }
702
+ #wwa-down-button::before {
703
+ content: "▽";
607
704
  }
608
705
 
609
- #wwa-bottom-button {
610
- grid-column-start: 2;
611
- grid-row-start: 3;
706
+ #wwa-left-button {
707
+ grid-column: 1/3;
708
+ grid-row: 3/5;
709
+ border-radius: 0 0 0 100%;
710
+ }
711
+ #wwa-left-button::before {
712
+ content: "◁";
612
713
  }
613
714
 
614
- #wwa-y-button {
615
- grid-column-start: 2;
616
- grid-row-start: 3;
715
+ #wwa-enter-button {
716
+ grid-area: enter;
617
717
  }
618
718
 
619
- #wwa-n-button {
620
- grid-column-start: 1;
621
- grid-row-start: 4;
719
+ #wwa-esc-button {
720
+ grid-area: esc;
622
721
  }
623
722
 
624
- #wwa-m-button {
625
- grid-column-start: 1;
626
- grid-row-start: 2;
723
+ #wwa-slow-button {
724
+ grid-area: slow;
627
725
  }
628
726
 
629
- #wwa-i-button {
630
- border-radius: 1rem 0 0 1rem;
727
+ #wwa-fast-button {
728
+ grid-area: fast;
631
729
  }
632
730
 
633
- #wwa-p-button {
634
- border-radius: 0 1rem 1rem 0;
731
+ #virtualpad-controller {
732
+ margin: 1rem;
733
+ text-align: center;
635
734
  }
636
735
 
637
736
  /*
@@ -891,4 +990,8 @@ div#wwa-sidebar {
891
990
 
892
991
  #wwa-virtualpad-right {
893
992
  z-index: 501;
993
+ }
994
+
995
+ .wwa-virtualpad__hole {
996
+ z-index: 502;
894
997
  }
package/output/wwa_classic.css CHANGED
@@ -529,109 +529,208 @@ div.savedata > div.ss > span {
529
529
  width: 3em;
530
530
  }
531
531
 
532
- #wwa-virtualpad-left,
533
- #wwa-virtualpad-right {
534
- bottom: 0;
535
- position: fixed;
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;
536
543
  }
537
544
 
538
- #wwa-virtualpad-left {
539
- left: 0;
545
+ #wwa-enter-button,
546
+ #wwa-esc-button {
547
+ font-size: 35px;
548
+ border-radius: 50%;
540
549
  }
541
- #wwa-virtualpad-left .virtualpad_move button {
542
- border-radius: 1rem;
550
+ @media (orientation: portrait) {
551
+ #wwa-enter-button,
552
+ #wwa-esc-button {
553
+ width: 21vmin;
554
+ height: 21vmin;
555
+ }
543
556
  }
544
-
545
- #wwa-virtualpad-right {
546
- right: 0;
557
+ @media (orientation: landscape) {
558
+ #wwa-enter-button,
559
+ #wwa-esc-button {
560
+ width: 30vmin;
561
+ height: 30vmin;
562
+ }
547
563
  }
548
- #wwa-virtualpad-right .virtualpad_select button {
549
- border-radius: 50%;
564
+
565
+ #wwa-up-button,
566
+ #wwa-right-button,
567
+ #wwa-down-button,
568
+ #wwa-left-button {
569
+ font-size: 35px;
550
570
  }
551
- #wwa-virtualpad-right .virtualpad_speedcontrol button {
552
- font-size: 30px;
553
- height: 50px;
554
- width: 90px;
571
+ @media (orientation: portrait) {
572
+ #wwa-up-button,
573
+ #wwa-right-button,
574
+ #wwa-down-button,
575
+ #wwa-left-button {
576
+ width: 20vmin;
577
+ height: 20vmin;
578
+ }
579
+ }
580
+ @media (orientation: landscape) {
581
+ #wwa-up-button,
582
+ #wwa-right-button,
583
+ #wwa-down-button,
584
+ #wwa-left-button {
585
+ width: 24vmin;
586
+ height: 24vmin;
587
+ }
555
588
  }
556
589
 
557
- #wwa-virtualpad-left button,
558
- #wwa-virtualpad-right button {
559
- background-color: #c0c0c0;
560
- border: 0;
561
- color: #000;
562
- opacity: 0.75;
590
+ #wwa-slow-button,
591
+ #wwa-fast-button {
592
+ font-size: 25px;
593
+ height: 10vmin;
594
+ border-radius: 0.75rem;
595
+ }
596
+ @media (orientation: portrait) {
597
+ #wwa-slow-button,
598
+ #wwa-fast-button {
599
+ width: 14vmin;
600
+ }
601
+ }
602
+ @media (orientation: landscape) {
603
+ #wwa-slow-button,
604
+ #wwa-fast-button {
605
+ width: 20vmin;
606
+ }
563
607
  }
564
608
 
565
- #wwa-virtualpad-left .virtualpad_move button,
566
- #wwa-virtualpad-right .virtualpad_select button {
567
- font-size: 50px;
568
- height: 100px;
569
- width: 100px;
609
+ #wwa-virtualpad-left,
610
+ #wwa-virtualpad-right {
611
+ visibility: hidden;
612
+ position: fixed;
613
+ pointer-events: none;
614
+ }
615
+ @media (orientation: portrait) {
616
+ #wwa-virtualpad-left,
617
+ #wwa-virtualpad-right {
618
+ bottom: 30vh;
619
+ }
620
+ }
621
+ @media (orientation: landscape) {
622
+ #wwa-virtualpad-left,
623
+ #wwa-virtualpad-right {
624
+ bottom: 20vh;
625
+ }
570
626
  }
571
627
 
572
- #wwa-virtualpad-left .virtualpad_move,
573
- #wwa-virtualpad-right .virtualpad_select,
574
- #wwa-virtualpad-right .virtualpad_speedcontrol {
628
+ #wwa-virtualpad-left {
629
+ left: 0;
575
630
  display: grid;
631
+ grid-template-columns: 1fr 7.5vmin 7.5vmin 1fr;
632
+ grid-template-rows: 1fr 7.5vmin 7.5vmin 1fr;
633
+ transform: rotate(45deg);
634
+ gap: 4px;
635
+ margin-left: 6vmin;
636
+ }
637
+ @media (orientation: portrait) {
638
+ #wwa-virtualpad-left {
639
+ width: 40vmin;
640
+ height: 40vmin;
641
+ }
642
+ }
643
+ @media (orientation: landscape) {
644
+ #wwa-virtualpad-left {
645
+ width: 48vmin;
646
+ height: 48vmin;
647
+ }
648
+ }
649
+ #wwa-virtualpad-left .wwa-virtualpad__hole {
650
+ grid-column: 2/4;
651
+ grid-row: 2/4;
652
+ background-color: #808080;
653
+ border-radius: 50%;
576
654
  }
577
655
 
578
- #wwa-virtualpad-left .virtualpad_move {
579
- grid-template-columns: repeat(3, 1fr);
656
+ #wwa-virtualpad-right {
657
+ right: 0;
658
+ display: grid;
659
+ 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;
660
+ gap: 1vmin;
661
+ margin-right: 6vmin;
580
662
  }
581
663
 
582
- #wwa-virtualpad-right .virtualpad_select,
583
- #wwa-virtualpad-right .virtualpad_speedcontrol {
584
- grid-template-columns: repeat(2, 1fr);
664
+ .wwa-virtualpad__button {
665
+ pointer-events: auto;
666
+ }
667
+ .wwa-virtualpad__button--pressed {
668
+ background-color: #808080;
585
669
  }
586
670
 
587
- #wwa-virtualpad-right .virtualpad_speedcontrol {
588
- margin-bottom: 16px;
671
+ #wwa-up-button::before,
672
+ #wwa-right-button::before,
673
+ #wwa-down-button::before,
674
+ #wwa-left-button::before {
675
+ transform: rotate(-45deg);
676
+ display: block;
589
677
  }
590
678
 
591
- #wwa-top-button {
592
- grid-column-start: 2;
593
- grid-row-start: 1;
679
+ #wwa-up-button {
680
+ grid-column: 1/3;
681
+ grid-row: 1/3;
682
+ border-radius: 100% 0 0 0;
683
+ }
684
+ #wwa-up-button::before {
685
+ content: "△";
594
686
  }
595
687
 
596
- #wwa-left-button,
597
688
  #wwa-right-button {
598
- grid-row-start: 2;
689
+ grid-column: 3/5;
690
+ grid-row: 1/3;
691
+ border-radius: 0 100% 0 0;
599
692
  }
600
-
601
- #wwa-left-button {
602
- grid-column-start: 1;
693
+ #wwa-right-button::before {
694
+ content: "▷";
603
695
  }
604
696
 
605
- #wwa-right-button {
606
- grid-column-start: 3;
697
+ #wwa-down-button {
698
+ grid-column: 3/5;
699
+ grid-row: 3/5;
700
+ border-radius: 0 0 100% 0;
701
+ }
702
+ #wwa-down-button::before {
703
+ content: "▽";
607
704
  }
608
705
 
609
- #wwa-bottom-button {
610
- grid-column-start: 2;
611
- grid-row-start: 3;
706
+ #wwa-left-button {
707
+ grid-column: 1/3;
708
+ grid-row: 3/5;
709
+ border-radius: 0 0 0 100%;
710
+ }
711
+ #wwa-left-button::before {
712
+ content: "◁";
612
713
  }
613
714
 
614
- #wwa-y-button {
615
- grid-column-start: 2;
616
- grid-row-start: 3;
715
+ #wwa-enter-button {
716
+ grid-area: enter;
617
717
  }
618
718
 
619
- #wwa-n-button {
620
- grid-column-start: 1;
621
- grid-row-start: 4;
719
+ #wwa-esc-button {
720
+ grid-area: esc;
622
721
  }
623
722
 
624
- #wwa-m-button {
625
- grid-column-start: 1;
626
- grid-row-start: 2;
723
+ #wwa-slow-button {
724
+ grid-area: slow;
627
725
  }
628
726
 
629
- #wwa-i-button {
630
- border-radius: 1rem 0 0 1rem;
727
+ #wwa-fast-button {
728
+ grid-area: fast;
631
729
  }
632
730
 
633
- #wwa-p-button {
634
- border-radius: 0 1rem 1rem 0;
731
+ #virtualpad-controller {
732
+ margin: 1rem;
733
+ text-align: center;
635
734
  }
636
735
 
637
736
  /*
@@ -893,6 +992,10 @@ div#wwa-sidebar {
893
992
  z-index: 501;
894
993
  }
895
994
 
995
+ .wwa-virtualpad__hole {
996
+ z-index: 502;
997
+ }
998
+
896
999
  .wwa-size-box {
897
1000
  text-shadow: 1px 0px 0 gray;
898
1001
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wwawing/styles",
3
- "version": "3.9.2",
3
+ "version": "3.10.0-beta.2",
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": "b775192355e609257f9ebdef8d39f8a81d0d6300"
23
+ "gitHead": "6d3289453a463b5292a66502ed9f7dccfb60fcac"
24
24
  }