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