@everymatrix/player-profile-info 1.36.1 → 1.37.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (4) hide show
  1. package/dist/player-profile-info.js +1 -1
  2. package/dist/player-profile-info.js.map +1 -1
  3. package/package.json +2 -2
  4. package/src/PlayerProfileInfo.svelte +92 -80
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@everymatrix/player-profile-info",
3
- "version": "1.36.1",
3
+ "version": "1.37.0",
4
4
  "main": "dist/player-profile-info.js",
5
5
  "svelte": "src/index.ts",
6
6
  "scripts": {
@@ -35,5 +35,5 @@
35
35
  "publishConfig": {
36
36
  "access": "public"
37
37
  },
38
- "gitHead": "5ffc382ef56d1d1736e48fec65bba06fbdadc8cf"
38
+ "gitHead": "23b14632ab842e43bf71843de47000e6dd141751"
39
39
  }
package/src/PlayerProfileInfo.svelte CHANGED
@@ -444,7 +444,7 @@
444
444
 
445
445
  {#if isMobile}
446
446
  <div class="MenuReturnButton" on:click={() => toggleScreen()}>
447
- <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"><defs><style>.aaa{fill:var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C));}</style></defs><g transform="translate(-20 -158)">
447
+ <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"><defs><style>.aaa{fill:var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));}</style></defs><g transform="translate(-20 -158)">
448
448
  <g transform="translate(20 158)">
449
449
  <path class="aaa" d="M7.5,0,6.136,1.364,11.3,6.526H0V8.474H11.3L6.136,13.636,7.5,15,15,7.5Z" transform="translate(15 15) rotate(180)"/>
450
450
  </g></g>
@@ -598,16 +598,24 @@
598
598
  <style lang="scss">
599
599
 
600
600
 
601
+ button {
602
+ font-family: var(--emw--button-typography);
603
+ }
604
+
605
+ input, select, option {
606
+ font-family: inherit;
607
+ }
608
+
601
609
 
602
610
  .MyAccountCategoryTitle {
603
- font-size: 26px;
604
- color: var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C));
605
- font-weight: 400;
611
+ font-size: var(--emw--font-size-x-large, 26px);
612
+ color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));
613
+ font-weight: var(--emw--font-weight-semibold, 500);
606
614
  }
607
615
 
608
616
  .MyAccountCategoryTitleMobile {
609
- font-size: 16px;
610
- color: var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C));
617
+ font-size: var(--emw--size-standard, 16px);
618
+ color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));
611
619
  }
612
620
 
613
621
  .MyAccountCategoryTitleNone {
@@ -615,18 +623,19 @@
615
623
  }
616
624
 
617
625
  .PlayerInfoWrapper {
618
- color: var(--emfe-w-pam-typography, var(--emfe-w-color-contrast, #07072A));
619
- background: var(--emfe-w-color-gray-50, #F9F8F8);
626
+ color: var(--emw--pam-typography, var(--emw-color-contrast, #07072A));
627
+ background: var(--emw-color-pale, var(--emw--color-gray-50, #F1F1F1));
620
628
  padding: 50px;
621
629
  max-width: 760px;
630
+ border-radius: 20px;
622
631
  }
623
632
 
624
633
  .PlayerNotificationsHeader, .PlayerDetailsHeader, .PlayerLocationHeader {
625
634
  h3 {
626
- font-size: 16px;
627
- color: var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C));
635
+ font-size: var(--emw--size-standard, 16px);
636
+ color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));
628
637
  text-transform: capitalize;
629
- font-weight: 400;
638
+ font-weight: var(--emw--font-weight-semibold, 500);
630
639
  }
631
640
  }
632
641
 
@@ -640,7 +649,7 @@
640
649
  }
641
650
 
642
651
  .MenuReturnButton{
643
- color: var(--emfe-w-color-gray-300, #58586B);
652
+ color: var(--emw-color-gray-300, #58586B);
644
653
  display: inline-flex;
645
654
  align-items: center;
646
655
  column-gap: 10px;
@@ -651,37 +660,38 @@
651
660
  display: flex;
652
661
  flex-direction: column;
653
662
  label {
654
- font-size: 14px;
655
- font-weight: 300;
663
+ font-size: var(--emw--size-small, 14px);
664
+ font-weight: var(--emw--font-weight-semibold, 500);
656
665
  margin-bottom: 10px;
657
666
  }
658
667
  input {
659
- font-size: 14px;
660
- font-weight: 300;
661
- color: var(--emfe-w-pam-contrast, var(--emfe-w-color-contrast, #07072A));
668
+ font-size: var(--emw--size-small, 14px);
669
+ font-weight: var(--emw--font-weight-light, 300);
670
+ color: var(--emw--pam-contrast, var(--emw-color-contrast, #07072A));
662
671
  padding: 10px;
663
672
  line-height: 16px;
664
- background: var(--emfe-w-color-white, #FFFFFF);
665
- border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
666
- border-radius: 5px;
673
+ background: var(--emw-color-white, #FFFFFF);
667
674
  outline: none;
668
675
  transition-duration: 0.3s;
676
+ border: 1px solid var(--emw--color-gray-100, #353535);
677
+ border-radius: 10px;
678
+
669
679
  &:focus, :focus-within, :focus-visible, :visited {
670
- border: 1px solid var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C));
671
- box-shadow: 0 0 0 1pt var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C));
680
+ border: 1px solid var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));
681
+ box-shadow: 0 0 0 1pt var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));
672
682
  }
673
683
  }
674
684
 
675
685
  &.InvalidField {
676
686
  input {
677
- border: 1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #FD2839));
678
- background: var(--emfe-w-color-pale, #FBECF4);
679
- color: var(--emfe-w-color-error, var(--emfe-w-color-red, #FD2839));
687
+ border: 1px solid var(--emw-color-error, var(--emw-color-red, #FD2839));
688
+ background: var(--emw-color-pale, #FBECF4);
689
+ color: var(--emw-color-error, var(--emw-color-red, #FD2839));
680
690
  }
681
691
  }
682
692
 
683
693
  .InvalidInput {
684
- color: var(--emfe-w-color-error, var(--emfe-w-color-red, #FD2839));
694
+ color: var(--emw-color-error, var(--emw-color-red, #FD2839));
685
695
  font-size: 10px;
686
696
  line-height: 10px;
687
697
  }
@@ -697,22 +707,22 @@
697
707
  position: relative;
698
708
  }
699
709
  select {
700
- font-size: 14px;
701
- font-weight: 300;
710
+ font-size: var(--emw--size-small, 14px);
711
+ font-weight: var(--emw--font-weight-light, 300);
702
712
  padding: 10px;
703
- color: var(--emfe-w-pam-contrast, var(--emfe-w-color-contrast, #07072A));
704
- border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
705
- border-radius: 5px;
713
+ color: var(--emw--pam-contrast, var(--emw-color-contrast, #07072A));
714
+ border: 1px solid var(--emw--color-gray-100, #353535);
715
+ border-radius: 10px;
706
716
  outline: none;
707
717
  transition-duration: 0.3s;
708
718
  -webkit-appearance: none;
709
719
  -moz-appearance: none;
710
720
  appearance: none;
711
- background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat var(--emfe-w-color-white, #FFFFFF);
721
+ background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat var(--emw-color-white, #FFFFFF);
712
722
  background-position: calc(100% - 0.75rem) center;
713
723
  &:focus, :focus-within, :focus-visible, :visited {
714
- border: 1px solid var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C));
715
- box-shadow: 0 0 0 1pt var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C));
724
+ border: 1px solid var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));
725
+ box-shadow: 0 0 0 1pt var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));
716
726
  }
717
727
  }
718
728
  /* Chrome, Safari, Edge, Opera */
@@ -746,8 +756,8 @@
746
756
  position: relative;
747
757
  align-items: center;
748
758
  span {
749
- font-size: 14px;
750
- font-weight: 300;
759
+ font-size: var(--emw--size-small, 14px);
760
+ font-weight: var(--emw--font-weight-light, 300);
751
761
  }
752
762
  input {
753
763
  height: 20px;
@@ -759,19 +769,19 @@
759
769
  border-radius: 50px;
760
770
  outline: none;
761
771
  transition-duration: 0.3s;
762
- background-color: var(--emfe-w-color-gray-100, #E6E6E6);
772
+ background-color: var(--emw-color-gray-100, #E6E6E6);
763
773
  cursor: pointer;
764
774
  margin-right: 10px;
765
775
  }
766
776
  input:checked {
767
- background-color: var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C));
777
+ background-color: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));
768
778
  }
769
779
  .Checkmark {
770
780
  left: 10px;
771
781
  top: 7px;
772
782
  width: 4px;
773
783
  height: 8px;
774
- border: solid var(--emfe-w-color-white, #FFFFFF);
784
+ border: solid var(--emw-color-white, #FFFFFF);
775
785
  border-width: 0 2px 2px 0;
776
786
  -webkit-transform: rotate(45deg);
777
787
  -ms-transform: rotate(45deg);
@@ -796,18 +806,19 @@
796
806
  display: flex;
797
807
  align-items: center;
798
808
  justify-content: center;
799
- font-size: 16px;
800
- color: var(--emfe-w-pam-contrast, var(--emfe-w-color-contrast, #07072A));
809
+ font-size: var(--emw--size-standard, 16px);
810
+ color: var(--emw--pam-contrast, var(--emw-color-contrast, #07072A));
801
811
  text-transform: uppercase;
802
812
  transition-duration: 0.3s;
803
813
  box-sizing: border-box;
804
814
  }
805
815
  .PlayerDetailsSaveButton {
806
- background: var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C));
807
- border: 1px solid var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C));
808
- color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));
816
+ background-image: linear-gradient(to bottom, color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, black 20%), var(--emw--color-primary, #22B04E), color-mix(in srgb, var(--emw--color-primary, #22B04E) 80%, white 30%));
817
+ border: 2px solid var(--emw--button-border-color, #0E5924);
818
+ color: var(--emw--button-text-color, #FFFFFF);
819
+ border-radius: var(--emw--button-border-radius, 50px);
809
820
  &:active {
810
- background: var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C));
821
+ background: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));
811
822
  }
812
823
  &.PlayerButtonDisabled {
813
824
  opacity: 0.3;
@@ -817,13 +828,13 @@
817
828
 
818
829
  .PlayerDetailsCancelButton {
819
830
  background: transparent;
820
- border: 1px solid var(--emfe-w-color-gray-300, #58586B);
831
+ border: 1px solid var(--emw-color-gray-300, #58586B);
821
832
  &:active {
822
- background: var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C));
833
+ background: var(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));
823
834
  }
824
835
  &.PlayerButtonDisabled {
825
836
  background: transparent;
826
- border: 1px solid var(--emfe-w-color-gray-300, #58586B);
837
+ border: 1px solid var(--emw-color-gray-300, #58586B);
827
838
  cursor: not-allowed;
828
839
  opacity: 0.6;
829
840
  }
@@ -833,7 +844,7 @@
833
844
  grid-template-columns: 1fr 1fr;
834
845
  .PlayerDetailsSaveButton, .PlayerDetailsCancelButton {
835
846
  height: 40px;
836
- font-size: 12px;
847
+ font-size: var(--emw--size-x-small, 12px);
837
848
  }
838
849
  }
839
850
  }
@@ -844,31 +855,31 @@
844
855
 
845
856
  .PlayerInfoWrapperMobile {
846
857
  padding: 20px 15px;
847
- background: var(--emfe-w-color-gray-50, #F9F8F8);
858
+ background: var(--emw-color-gray-50, #F9F8F8);
848
859
  max-width: unset;
849
860
  .PlayerDetailsContent {
850
861
  grid-template-columns: 1fr;
851
862
  }
852
863
  .PlayerNotificationsHeader, .PlayerDetailsHeader, .PlayerLocationHeader {
853
864
  h3 {
854
- color: var(--emfe-w-pam-color-primary, var(--emfe-w-color-primary, #D0046C));
855
- font-size: 14px;
856
- font-weight: 400;
865
+ color: ar(--emw--pam-color-primary, var(--emw--color-primary, #22B04E));
866
+ font-size: var(--emw--size-small, 14px);
867
+ font-weight: var(--emw--font-weight-semibold, 500);
857
868
  }
858
869
  }
859
870
  .PlayerInfoBox {
860
871
  label {
861
- color: var(--emfe-w-color-gray-300, #58586B);
862
- font-size: 12px;
863
- font-weight: 400;
872
+ color: var(--emw-color-gray-300, #58586B);
873
+ font-size: var(--emw--size-x-small, 12px);
874
+ font-weight: var(-emw--font-weight-normal, 400);
864
875
  }
865
876
  input {
866
- color: var(--emfe-w-color-gray-300, #58586B);
867
- font-size: 12px;
868
- font-weight: 300;
877
+ color: var(--emw-color-gray-300, #58586B);
878
+ font-size: var(--emw--size-x-small, 12px);
879
+ font-weight: var(--emw--font-weight-light, 300);
869
880
  }
870
881
  select {
871
- color: var(--emfe-w-color-gray-300, #58586B);
882
+ color: var(--emw-color-gray-300, #58586B);
872
883
  }
873
884
  }
874
885
  .PlayerLocationContent {
@@ -877,25 +888,25 @@
877
888
  .PlayerNotificationsCheckboxArea {
878
889
  .PlayerNotificationBox {
879
890
  label {
880
- color: var(--emfe-w-pam-typography, var(--emfe-w-color-contrast, #07072A));
881
- font-size: 12px;
882
- font-weight: 300;
891
+ color: var(--emw--pam-typography, var(--emw-color-contrast, #07072A));
892
+ font-size: var(--emw--size-x-small, 12px);
893
+ font-weight: var(--emw--font-weight-light, 300);
883
894
  }
884
895
  }
885
896
  }
886
- .PlayerDetailsButtonsArea {
897
+ .PlayerDetailsButtonsArea {
887
898
  grid-column-gap: 10px;
888
899
  }
889
900
  .PlayerDetailsSaveButton, .PlayerDetailsCancelButton {
890
- font-size: 12px;
901
+ font-size: var(--emw--size-x-small, 12px);
891
902
  height: 40px;
892
- color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));
903
+ color: var(--emw-button-typography, var(--emw-color-white, #FFFFFF));
893
904
  &.PlayerButtonDisabled {
894
- color: var(--emfe-w-color-gray-300, #58586B);
905
+ color: var(--emw-color-gray-300, #58586B);
895
906
  }
896
907
  }
897
908
  .PlayerDetailsCancelButton {
898
- color: var(--emfe-w-color-gray-300, #58586B);
909
+ color: var(--emw-color-gray-300, #58586B);
899
910
  }
900
911
  }
901
912
 
@@ -907,7 +918,7 @@
907
918
  .MenuReturnButton {
908
919
  margin-bottom: 30px;
909
920
  span {
910
- font-size: 20px;
921
+ font-size: var(--emw--font-size-large, 20px);
911
922
  }
912
923
  }
913
924
  .PlayerDetailsHeader, .PlayerLocationHeader, .PlayerNotificationsHeader {
@@ -917,48 +928,49 @@
917
928
  }
918
929
  .PlayerInfoBox {
919
930
  label {
920
- font-size: 20px;
931
+ font-size: var(--emw--font-size-large, 20px);
921
932
  }
922
933
  input {
923
934
  height: 30px;
924
- font-size: 20px;
935
+ font-size: var(--emw--font-size-large, 20px);
925
936
  line-height: 30px;
926
937
  }
927
938
  select {
928
- font-size: 20px;
939
+ font-size: var(--emw--font-size-large, 20px);
929
940
  }
930
941
  .TogglePasswordVisibility {
931
942
  width: 30px;
932
943
  top: 26px;
933
944
  }
934
945
  .InvalidInput {
935
- font-size: 16px;
946
+ font-size: var(--emw--size-standard, 16px);
936
947
  bottom: - 50px;
937
948
  }
938
949
  &:last-child {
939
950
  .InvalidInput {
940
- font-size: 16px;
951
+ font-size: var(--emw--size-standard, 16px);
941
952
  bottom: -50px;
942
953
  }
943
954
  }
944
955
  }
945
956
  .PlayerDetailsButtonsArea {
957
+ font-family: var(--emw--button-typography);
946
958
  grid-column-gap: 40px;
947
959
  .PlayerDetailsSaveButton, .PlayerDetailsCancelButton {
948
- font-size: 20px;
960
+ font-size: var(--emw--font-size-large, 20px);
949
961
  height: 56px;
950
962
  }
951
963
  .PlayerDetailsSaveButton {
952
- color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));
964
+ color: var(--emw-button-typography, var(--emw-color-white, #FFFFFF));
953
965
  &.PlayerButtonDisabled {
954
- color: var(--emfe-w-color-gray-300, #58586B);
966
+ color: var(--emw-color-gray-300, #58586B);
955
967
  }
956
968
  }
957
969
  }
958
970
  .PlayerNotificationBox {
959
971
  label {
960
972
  span {
961
- font-size: 20px;
973
+ font-size: var(--emw--font-size-large, 20px);
962
974
  }
963
975
  input {
964
976
  height: 26px;
@@ -972,8 +984,8 @@
972
984
  }
973
985
  }
974
986
  .PlayerDetailsConfirmSave {
975
- background: var(--emfe-w-color-valid, var(--emfe-w-color-green, #48952a));
976
- color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));
987
+ background: var(--emw-color-valid, var(--emw-color-green, #48952a));
988
+ color: var(--emw-button-typography, var(--emw-color-white, #FFFFFF));
977
989
  padding: 16px;
978
990
  border-radius: 5px;
979
991
  margin-top: 16px;