@wwawing/styles 3.8.0 → 3.9.0-beta.0

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 +117 -66
  2. package/output/wwa_classic.css +117 -66
  3. package/package.json +5 -5
package/output/wwa.css CHANGED
@@ -24,7 +24,7 @@ div#wwa-wrapper {
24
24
  text-align: center;
25
25
  }
26
26
 
27
- #wwa-controller {
27
+ #wwa-audio-wrapper, #wwa-controller {
28
28
  position: absolute;
29
29
  top: 0;
30
30
  left: 0;
@@ -32,6 +32,11 @@ div#wwa-wrapper {
32
32
  height: 440px;
33
33
  }
34
34
 
35
+ #wwa-audio-wrapper {
36
+ display: none;
37
+ overflow: hidden;
38
+ }
39
+
35
40
  /**
36
41
  * common は WWA Wing で共通で利用できるクラス名や mixin が含まれています。
37
42
  * UI 構築の際はこれらのセレクターもご活用ください。
@@ -529,109 +534,147 @@ div.savedata > div.ss > span {
529
534
  width: 3em;
530
535
  }
531
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
+
532
576
  #wwa-virtualpad-left,
533
577
  #wwa-virtualpad-right {
534
- bottom: 0;
578
+ bottom: 20vmin;
535
579
  position: fixed;
580
+ pointer-events: none;
536
581
  }
537
582
 
538
583
  #wwa-virtualpad-left {
539
584
  left: 0;
540
- }
541
- #wwa-virtualpad-left .virtualpad_move button {
542
- 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%;
543
599
  }
544
600
 
545
601
  #wwa-virtualpad-right {
546
602
  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;
603
+ display: grid;
604
+ grid-template: " . slow " " . fast " " . . " 20px " . estimate" " . estimate" " . enter " "esc enter " "esc . " " . . " 1vmin;
605
+ gap: 1vmin;
606
+ margin-right: 6vmin;
555
607
  }
556
608
 
557
- #wwa-virtualpad-left button,
558
- #wwa-virtualpad-right button {
559
- background-color: #c0c0c0;
560
- border: 0;
561
- color: #000;
562
- opacity: 0.75;
609
+ .wwa-virtualpad__button {
610
+ pointer-events: auto;
563
611
  }
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;
612
+ .wwa-virtualpad__button--pressed {
613
+ background-color: #808080;
570
614
  }
571
615
 
572
- #wwa-virtualpad-left .virtualpad_move,
573
- #wwa-virtualpad-right .virtualpad_select,
574
- #wwa-virtualpad-right .virtualpad_speedcontrol {
575
- 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;
576
622
  }
577
623
 
578
- #wwa-virtualpad-left .virtualpad_move {
579
- 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;
580
628
  }
581
-
582
- #wwa-virtualpad-right .virtualpad_select,
583
- #wwa-virtualpad-right .virtualpad_speedcontrol {
584
- grid-template-columns: repeat(2, 1fr);
629
+ #wwa-up-button::before {
630
+ content: "△";
585
631
  }
586
632
 
587
- #wwa-virtualpad-right .virtualpad_speedcontrol {
588
- margin-bottom: 16px;
633
+ #wwa-right-button {
634
+ grid-column: 3/5;
635
+ grid-row: 1/3;
636
+ border-radius: 0 100% 0 0;
589
637
  }
590
-
591
- #wwa-top-button {
592
- grid-column-start: 2;
593
- grid-row-start: 1;
638
+ #wwa-right-button::before {
639
+ content: "▷";
594
640
  }
595
641
 
596
- #wwa-left-button,
597
- #wwa-right-button {
598
- 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;
599
646
  }
600
-
601
- #wwa-left-button {
602
- grid-column-start: 1;
647
+ #wwa-down-button::before {
648
+ content: "▽";
603
649
  }
604
650
 
605
- #wwa-right-button {
606
- 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%;
607
655
  }
608
-
609
- #wwa-bottom-button {
610
- grid-column-start: 2;
611
- grid-row-start: 3;
656
+ #wwa-left-button::before {
657
+ content: "◁";
612
658
  }
613
659
 
614
- #wwa-y-button {
615
- grid-column-start: 2;
616
- grid-row-start: 3;
660
+ #wwa-enter-button {
661
+ grid-area: enter;
617
662
  }
618
663
 
619
- #wwa-n-button {
620
- grid-column-start: 1;
621
- grid-row-start: 4;
664
+ #wwa-esc-button {
665
+ grid-area: esc;
622
666
  }
623
667
 
624
- #wwa-m-button {
625
- grid-column-start: 1;
626
- grid-row-start: 2;
668
+ #wwa-estimate-button {
669
+ grid-area: estimate;
627
670
  }
628
671
 
629
- #wwa-i-button {
630
- border-radius: 1rem 0 0 1rem;
672
+ #wwa-slow-button {
673
+ grid-area: slow;
631
674
  }
632
675
 
633
- #wwa-p-button {
634
- border-radius: 0 1rem 1rem 0;
676
+ #wwa-fast-button {
677
+ grid-area: fast;
635
678
  }
636
679
 
637
680
  /*
@@ -885,10 +928,18 @@ div#wwa-sidebar {
885
928
  z-index: 400;
886
929
  }
887
930
 
931
+ #wwa-audio-wrapper {
932
+ z-index: -9999;
933
+ }
934
+
888
935
  #wwa-virtualpad-left {
889
936
  z-index: 500;
890
937
  }
891
938
 
892
939
  #wwa-virtualpad-right {
893
940
  z-index: 501;
941
+ }
942
+
943
+ .wwa-virtualpad__hole {
944
+ z-index: 502;
894
945
  }
package/output/wwa_classic.css CHANGED
@@ -24,7 +24,7 @@ div#wwa-wrapper {
24
24
  text-align: center;
25
25
  }
26
26
 
27
- #wwa-controller {
27
+ #wwa-audio-wrapper, #wwa-controller {
28
28
  position: absolute;
29
29
  top: 0;
30
30
  left: 0;
@@ -32,6 +32,11 @@ div#wwa-wrapper {
32
32
  height: 440px;
33
33
  }
34
34
 
35
+ #wwa-audio-wrapper {
36
+ display: none;
37
+ overflow: hidden;
38
+ }
39
+
35
40
  /**
36
41
  * common は WWA Wing で共通で利用できるクラス名や mixin が含まれています。
37
42
  * UI 構築の際はこれらのセレクターもご活用ください。
@@ -529,109 +534,147 @@ div.savedata > div.ss > span {
529
534
  width: 3em;
530
535
  }
531
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
+
532
576
  #wwa-virtualpad-left,
533
577
  #wwa-virtualpad-right {
534
- bottom: 0;
578
+ bottom: 20vmin;
535
579
  position: fixed;
580
+ pointer-events: none;
536
581
  }
537
582
 
538
583
  #wwa-virtualpad-left {
539
584
  left: 0;
540
- }
541
- #wwa-virtualpad-left .virtualpad_move button {
542
- 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%;
543
599
  }
544
600
 
545
601
  #wwa-virtualpad-right {
546
602
  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;
603
+ display: grid;
604
+ grid-template: " . slow " " . fast " " . . " 20px " . estimate" " . estimate" " . enter " "esc enter " "esc . " " . . " 1vmin;
605
+ gap: 1vmin;
606
+ margin-right: 6vmin;
555
607
  }
556
608
 
557
- #wwa-virtualpad-left button,
558
- #wwa-virtualpad-right button {
559
- background-color: #c0c0c0;
560
- border: 0;
561
- color: #000;
562
- opacity: 0.75;
609
+ .wwa-virtualpad__button {
610
+ pointer-events: auto;
563
611
  }
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;
612
+ .wwa-virtualpad__button--pressed {
613
+ background-color: #808080;
570
614
  }
571
615
 
572
- #wwa-virtualpad-left .virtualpad_move,
573
- #wwa-virtualpad-right .virtualpad_select,
574
- #wwa-virtualpad-right .virtualpad_speedcontrol {
575
- 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;
576
622
  }
577
623
 
578
- #wwa-virtualpad-left .virtualpad_move {
579
- 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;
580
628
  }
581
-
582
- #wwa-virtualpad-right .virtualpad_select,
583
- #wwa-virtualpad-right .virtualpad_speedcontrol {
584
- grid-template-columns: repeat(2, 1fr);
629
+ #wwa-up-button::before {
630
+ content: "△";
585
631
  }
586
632
 
587
- #wwa-virtualpad-right .virtualpad_speedcontrol {
588
- margin-bottom: 16px;
633
+ #wwa-right-button {
634
+ grid-column: 3/5;
635
+ grid-row: 1/3;
636
+ border-radius: 0 100% 0 0;
589
637
  }
590
-
591
- #wwa-top-button {
592
- grid-column-start: 2;
593
- grid-row-start: 1;
638
+ #wwa-right-button::before {
639
+ content: "▷";
594
640
  }
595
641
 
596
- #wwa-left-button,
597
- #wwa-right-button {
598
- 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;
599
646
  }
600
-
601
- #wwa-left-button {
602
- grid-column-start: 1;
647
+ #wwa-down-button::before {
648
+ content: "▽";
603
649
  }
604
650
 
605
- #wwa-right-button {
606
- 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%;
607
655
  }
608
-
609
- #wwa-bottom-button {
610
- grid-column-start: 2;
611
- grid-row-start: 3;
656
+ #wwa-left-button::before {
657
+ content: "◁";
612
658
  }
613
659
 
614
- #wwa-y-button {
615
- grid-column-start: 2;
616
- grid-row-start: 3;
660
+ #wwa-enter-button {
661
+ grid-area: enter;
617
662
  }
618
663
 
619
- #wwa-n-button {
620
- grid-column-start: 1;
621
- grid-row-start: 4;
664
+ #wwa-esc-button {
665
+ grid-area: esc;
622
666
  }
623
667
 
624
- #wwa-m-button {
625
- grid-column-start: 1;
626
- grid-row-start: 2;
668
+ #wwa-estimate-button {
669
+ grid-area: estimate;
627
670
  }
628
671
 
629
- #wwa-i-button {
630
- border-radius: 1rem 0 0 1rem;
672
+ #wwa-slow-button {
673
+ grid-area: slow;
631
674
  }
632
675
 
633
- #wwa-p-button {
634
- border-radius: 0 1rem 1rem 0;
676
+ #wwa-fast-button {
677
+ grid-area: fast;
635
678
  }
636
679
 
637
680
  /*
@@ -885,6 +928,10 @@ div#wwa-sidebar {
885
928
  z-index: 400;
886
929
  }
887
930
 
931
+ #wwa-audio-wrapper {
932
+ z-index: -9999;
933
+ }
934
+
888
935
  #wwa-virtualpad-left {
889
936
  z-index: 500;
890
937
  }
@@ -893,6 +940,10 @@ div#wwa-sidebar {
893
940
  z-index: 501;
894
941
  }
895
942
 
943
+ .wwa-virtualpad__hole {
944
+ z-index: 502;
945
+ }
946
+
896
947
  .wwa-size-box {
897
948
  text-shadow: 1px 0px 0 gray;
898
949
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wwawing/styles",
3
- "version": "3.8.0",
3
+ "version": "3.9.0-beta.0",
4
4
  "description": "WWA Wing stylesheet files",
5
5
  "main": "index.js",
6
6
  "files": [
@@ -15,10 +15,10 @@
15
15
  "license": "MIT",
16
16
  "devDependencies": {
17
17
  "@types/sass": "^1.43.1",
18
- "sass": "^1.52.3",
18
+ "sass": "^1.49.0",
19
19
  "shx": "^0.3.3",
20
- "ts-node": "^10.8.1",
21
- "typescript": "^4.7.3"
20
+ "ts-node": "^10.4.0",
21
+ "typescript": "^4.5.4"
22
22
  },
23
- "gitHead": "c652b5022ed532432f87b6b9011fcac0170e0999"
23
+ "gitHead": "31f57918222d901ab542e8382dcd2c2b79023af4"
24
24
  }