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