@everymatrix/player-profile-info 1.13.14 → 1.13.16

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 +81 -81
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@everymatrix/player-profile-info",
3
- "version": "1.13.14",
3
+ "version": "1.13.16",
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": "a5cf232b09fe0b3050e2243fb25404a2e17f382f"
38
+ "gitHead": "586fd8038cd1f675aab3c6a81922c36e5d8faa34"
39
39
  }
package/src/PlayerProfileInfo.svelte CHANGED
@@ -445,37 +445,37 @@
445
445
  $: clientstyling && customStylingContainer && setClientStyling();
446
446
  $: translationurl && setTranslationUrl();
447
447
  </script>
448
-
448
+ <p style="font-size: 29px; color: green;">TESTT</p>
449
449
  <div bind:this={customStylingContainer}>
450
450
  {#if isLoading}
451
- <div class="ModalLoader" part="ModalLoader"></div>
451
+ <div class="ModalLoader"></div>
452
452
  {:else}
453
- <form class="PlayerInfoWrapper {isMobile ? 'PlayerInfoWrapperMobile' : ''} {mediaQuery.matches && isMobile ? 'PlayerInfoWrapperTablet' : ''}" part="PlayerInfoWrapper {isMobile ? 'PlayerInfoWrapperMobile' : ''} {mediaQuery.matches && isMobile ? 'PlayerInfoWrapperTablet' : ''}">
453
+ <form class="PlayerInfoWrapper {isMobile ? 'PlayerInfoWrapperMobile' : ''} {mediaQuery.matches && isMobile ? 'PlayerInfoWrapperTablet' : ''}">
454
454
 
455
455
  {#if isMobile}
456
- <div class="MenuReturnButton" part="MenuReturnButton" on:click={() => toggleScreen()}>
457
- <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15"><defs><style>.aaa{fill:var(--emfe-w-color-primary, #D0046C);}</style></defs><g transform="translate(-20 -158)">
456
+ <div class="MenuReturnButton" on:click={() => toggleScreen()}>
457
+ <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-pink-500, #D0046C));}</style></defs><g transform="translate(-20 -158)">
458
458
  <g transform="translate(20 158)">
459
459
  <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)"/>
460
460
  </g></g>
461
461
  </svg>
462
- <h2 class="MyAccountCategoryTitleMobile" part="MyAccountCategoryTitleMobile">{$_('title')}</h2>
462
+ <h2 class="MyAccountCategoryTitleMobile">{$_('title')}</h2>
463
463
  </div>
464
464
  {/if}
465
465
 
466
- <h2 class="MyAccountCategoryTitle {isMobile ? 'MyAccountCategoryTitleNone' : ''}" part="MyAccountCategoryTitle {isMobile ? 'MyAccountCategoryTitleNone' : ''}">{$_('title')}</h2>
466
+ <h2 class="MyAccountCategoryTitle {isMobile ? 'MyAccountCategoryTitleNone' : ''}">{$_('title')}</h2>
467
467
 
468
- <div class="PlayerNotificationsHeader" part="PlayerNotificationsHeader">
468
+ <div class="PlayerNotificationsHeader">
469
469
  <h3>{$_('personalDetails')}</h3>
470
470
  </div>
471
- <section class="PlayerDetailsContent" part="PlayerDetailsContent">
472
- <div class="PlayerInfoBox" part="PlayerInfoBox">
471
+ <section class="PlayerDetailsContent">
472
+ <div class="PlayerInfoBox">
473
473
  <label>{$_('userName')}</label>
474
- <input type="text" class="FieldDisabled" part="FieldDisabled" value={username} readonly />
474
+ <input type="text" class="FieldDisabled" value={username} readonly />
475
475
  </div>
476
- <div class="PlayerInfoBox {invalidMobile ? 'InvalidField' : ''}" part="PlayerInfoBox {invalidMobile ? 'InvalidField' : ''}">
476
+ <div class="PlayerInfoBox {invalidMobile ? 'InvalidField' : ''}">
477
477
  <label>{$_('userPhone')}</label>
478
- <div class="PlayerPhoneNumber" part="PlayerPhoneNumber">
478
+ <div class="PlayerPhoneNumber">
479
479
  <select bind:value={playerPrefix} on:change={() => checkForChanges()}>
480
480
  {#each prefixesArray as pref}
481
481
  {#if pref.Prefix === initialValuesArray.mobiePrefix}
@@ -488,99 +488,99 @@
488
488
  <input bind:value={playerMobileNumber} on:keyup={validateMobile} type="text" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" placeholder={noPlayerData ? mobile.number : ''} on:keyup={() => checkForChanges()}/>
489
489
  </div>
490
490
  {#if invalidMobile}
491
- <p class="InvalidInput" part="InvalidInput">{$_('userPhoneError')}</p>
491
+ <p class="InvalidInput">{$_('userPhoneError')}</p>
492
492
  {/if}
493
493
  </div>
494
- <div class="PlayerInfoBox {invalidSecurityQuestion ? 'InvalidField' : ''}" part="PlayerInfoBox {invalidSecurityQuestion ? 'InvalidField' : ''}">
494
+ <div class="PlayerInfoBox {invalidSecurityQuestion ? 'InvalidField' : ''}">
495
495
  <label>{$_('securityQuestion')}</label>
496
496
  <input type="text" bind:value={playerQuestion} on:keyup={() => checkForChanges()} on:blur={validateSecurityQuestion} placeholder={noPlayerData ? securityQuestion : ''} />
497
497
  {#if invalidSecurityQuestion}
498
- <p class="InvalidInput" part="InvalidInput">{$_('securityQuestionError')}</p>
498
+ <p class="InvalidInput">{$_('securityQuestionError')}</p>
499
499
  {/if}
500
500
  </div>
501
- <div class="PlayerInfoBox {invalidSecurityAnswer ? 'InvalidField' : ''}" part="PlayerInfoBox {invalidSecurityAnswer ? 'InvalidField' : ''}">
501
+ <div class="PlayerInfoBox {invalidSecurityAnswer ? 'InvalidField' : ''}">
502
502
  <label>{$_('securityAnswer')}</label>
503
503
  <input type="text" bind:value={playerAnswer} on:keyup={() => checkForChanges()} on:blur={validateSecurityAnswer} placeholder={noPlayerData ? securityAnswer : ''} />
504
504
  {#if invalidSecurityAnswer}
505
- <p class="InvalidInput" part="InvalidInput">{$_('securityAnswerError')}</p>
505
+ <p class="InvalidInput">{$_('securityAnswerError')}</p>
506
506
  {/if}
507
507
  </div>
508
- <div class="PlayerInfoBox" part="PlayerInfoBox">
508
+ <div class="PlayerInfoBox">
509
509
  <label>{$_('userEmail')}</label>
510
- <input type="email" class="FieldDisabled" part="FieldDisabled" value={email} readonly />
510
+ <input type="email" class="FieldDisabled" value={email} readonly />
511
511
  </div>
512
- <div class="PlayerInfoBox" part="PlayerInfoBox">
512
+ <div class="PlayerInfoBox">
513
513
  <label>{$_('dateOfBirth')}</label>
514
- <input type="text" class="FieldDisabled" part="FieldDisabled" value={birth} readonly />
514
+ <input type="text" class="FieldDisabled" value={birth} readonly />
515
515
  </div>
516
- <div class="PlayerInfoBox" part="PlayerInfoBox">
516
+ <div class="PlayerInfoBox">
517
517
  <label>{$_('firstName')}</label>
518
- <input type="text" class="FieldDisabled" part="FieldDisabled" value={firstname} readonly />
518
+ <input type="text" class="FieldDisabled" value={firstname} readonly />
519
519
  </div>
520
- <div class="PlayerInfoBox" part="PlayerInfoBox">
520
+ <div class="PlayerInfoBox">
521
521
  <label>{$_('lastName')}</label>
522
- <input type="text" class="FieldDisabled" part="FieldDisabled" value={lastname} readonly />
522
+ <input type="text" class="FieldDisabled" value={lastname} readonly />
523
523
  </div>
524
- <div class="PlayerInfoBox" part="PlayerInfoBox">
524
+ <div class="PlayerInfoBox">
525
525
  <label>{$_('userTitle')}</label>
526
- <input type="text" class="FieldDisabled" part="FieldDisabled" value={userTitles} readonly />
526
+ <input type="text" class="FieldDisabled" value={userTitles} readonly />
527
527
  </div>
528
- <div class="PlayerInfoBox" part="PlayerInfoBox">
528
+ <div class="PlayerInfoBox">
529
529
  <label>{$_('currency')}</label>
530
- <input type="text" class="FieldDisabled" part="FieldDisabled" value={currency} readonly />
530
+ <input type="text" class="FieldDisabled" value={currency} readonly />
531
531
  </div>
532
532
  </section>
533
533
 
534
- <div class="PlayerLocationHeader" part="PlayerLocationHeader">
534
+ <div class="PlayerLocationHeader">
535
535
  <h3>{$_('locationDetails')}</h3>
536
536
  </div>
537
- <section class="PlayerLocationContent" part="PlayerLocationContent">
538
- <div class="PlayerInfoBox" part="PlayerInfoBox">
537
+ <section class="PlayerLocationContent">
538
+ <div class="PlayerInfoBox">
539
539
  <label>{$_('userCountry')}</label>
540
- <input type="text" class="PlayerCountry FieldDisabled" part="PlayerCountry FieldDisabled" placeholder={countrycode} value={selectedCountry.Name} readonly />
540
+ <input type="text" class="PlayerCountry FieldDisabled" placeholder={countrycode} value={selectedCountry.Name} readonly />
541
541
  </div>
542
- <div class="PlayerInfoBox {invalidCity ? 'InvalidField' : ''}" part="PlayerInfoBox {invalidCity ? 'InvalidField' : ''}">
542
+ <div class="PlayerInfoBox {invalidCity ? 'InvalidField' : ''}">
543
543
  <label>{$_('userCity')}</label>
544
544
  <input bind:this={playerCity} type="text" on:blur={validateCity} on:keyup={() => checkForChanges()} placeholder={noPlayerData ? city : ''} value={noPlayerData ? '' : initialValuesArray.city} />
545
545
  {#if invalidCity}
546
- <p class="InvalidInput" part="InvalidInput">{$_('userCityError')}</p>
546
+ <p class="InvalidInput">{$_('userCityError')}</p>
547
547
  {/if}
548
548
  </div>
549
- <div class="PlayerInfoBox {invalidAddress ? 'InvalidField' : ''}" part="PlayerInfoBox {invalidAddress ? 'InvalidField' : ''}">
549
+ <div class="PlayerInfoBox {invalidAddress ? 'InvalidField' : ''}">
550
550
  <label>{$_('userAddress')}</label>
551
551
  <input bind:this={playerAddress} placeholder={address1} type="text" on:blur={validateAddress} on:keyup={() => checkForChanges()} value={noPlayerData ? '' : initialValuesArray.address} />
552
552
  {#if invalidAddress}
553
- <p class="InvalidInput" part="InvalidInput">{$_('userAddressError')}</p>
553
+ <p class="InvalidInput">{$_('userAddressError')}</p>
554
554
  {/if}
555
555
  </div>
556
- <div class="PlayerInfoBox {invalidPostalCode ? 'InvalidField' : ''}" part="PlayerInfoBox {invalidPostalCode ? 'InvalidField' : ''}">
556
+ <div class="PlayerInfoBox {invalidPostalCode ? 'InvalidField' : ''}">
557
557
  <label>{$_('userPostalCode')}</label>
558
558
  <input bind:this={playerPostalCode} type="text" on:blur={validatePostalCode} on:keyup={() => checkForChanges()} placeholder={noPlayerData ? postalCode : ''} value={noPlayerData ? '' : initialValuesArray.postalCode} />
559
559
  {#if invalidPostalCode}
560
- <p class="InvalidInput" part="InvalidInput">{$_('userPostalCodeError')}</p>
560
+ <p class="InvalidInput">{$_('userPostalCodeError')}</p>
561
561
  {/if}
562
562
  </div>
563
563
  </section>
564
564
 
565
565
  {#if showEmail || showSMS}
566
- <div class="PlayerNotificationsHeader" part="PlayerNotificationsHeader">
566
+ <div class="PlayerNotificationsHeader">
567
567
  <h3>{$_('userNotifications')}</h3>
568
568
  </div>
569
- <section class="PlayerNotificationsCheckboxArea" part="PlayerNotificationsCheckboxArea">
569
+ <section class="PlayerNotificationsCheckboxArea">
570
570
  {#if showSMS}
571
- <div class="PlayerNotificationBox" part="PlayerNotificationBox">
571
+ <div class="PlayerNotificationBox">
572
572
  <label for="SMSNotification">
573
573
  <input bind:checked={giveConsentSMS} on:change={checkForChanges} type="checkbox" id="SMSNotification" name="Enable SMS notifications" />
574
- <span class="Checkmark" part="Checkmark"></span>
574
+ <span class="Checkmark"></span>
575
575
  <span>{$_('userSMSNotification')}</span>
576
576
  </label>
577
577
  </div>
578
578
  {/if}
579
579
  {#if showEmail}
580
- <div class="PlayerNotificationBox" part="PlayerNotificationBox">
580
+ <div class="PlayerNotificationBox">
581
581
  <label for="EmailNotification">
582
582
  <input bind:checked={giveConsentEmail} on:change={checkForChanges} type="checkbox" id="EmailNotification" name="Enable Emails" />
583
- <span class="Checkmark" part="Checkmark"></span>
583
+ <span class="Checkmark"></span>
584
584
  <span>{$_('userEmailNotification')}</span>
585
585
  </label>
586
586
  </div>
@@ -588,25 +588,25 @@
588
588
  </section>
589
589
  {/if}
590
590
  {#if isOnNative}
591
- <div class="PlayerNotificationsHeader" part="PlayerNotificationsHeader">
591
+ <div class="PlayerNotificationsHeader">
592
592
  <h3>{$_('userAppSettings')}</h3>
593
593
  </div>
594
- <section class="PlayerNotificationsCheckboxArea" part="PlayerNotificationsCheckboxArea">
595
- <div class="PlayerNotificationBox" part="PlayerNotificationBox">
594
+ <section class="PlayerNotificationsCheckboxArea">
595
+ <div class="PlayerNotificationBox">
596
596
  <label for="Biometrics">
597
597
  <input bind:checked={biometricsSelection} on:change={checkForChanges} type="checkbox" id="BiometricsEnabled" name="Biometric Enabled" />
598
- <span class="Checkmark" part="Checkmark"></span>
598
+ <span class="Checkmark"></span>
599
599
  <span>{$_('userBiometrics')}</span>
600
600
  </label>
601
601
  </div>
602
602
  </section>
603
603
  {/if}
604
- <section class="PlayerDetailsButtonsArea {isMobile ? 'PlayerDetailsButtonsAreaMobile' : ''}" part="PlayerDetailsButtonsArea {isMobile ? 'PlayerDetailsButtonsAreaMobile' : ''}">
605
- <button class="PlayerDetailsSaveButton {differencesExist && isValid ? '' : 'PlayerButtonDisabled'}" part="PlayerDetailsSaveButton {differencesExist && isValid ? '' : 'PlayerButtonDisabled'}" on:click={(e) => updatePlayerInfo(e)}>{$_('userProfileSaveChanges')}</button>
604
+ <section class="PlayerDetailsButtonsArea {isMobile ? 'PlayerDetailsButtonsAreaMobile' : ''}" >
605
+ <button class="PlayerDetailsSaveButton {differencesExist && isValid ? '' : 'PlayerButtonDisabled'}" on:click={(e) => updatePlayerInfo(e)}>{$_('userProfileSaveChanges')}</button>
606
606
  </section>
607
607
  {#if showConfirmSave}
608
- <section class="PlayerDetailsConfirmSave" part="PlayerDetailsConfirmSave">
609
- <p class="PlayerDetailsConfirmSaveText" part="PlayerDetailsConfirmSaveText">{$_('userProfileConfirmationMessage')}</p>
608
+ <section class="PlayerDetailsConfirmSave">
609
+ <p class="PlayerDetailsConfirmSaveText">{$_('userProfileConfirmationMessage')}</p>
610
610
  </section>
611
611
  {/if}
612
612
  </form>
@@ -619,13 +619,13 @@
619
619
 
620
620
  .MyAccountCategoryTitle {
621
621
  font-size: 26px;
622
- color: var(--emfe-w-color-primary, #D0046C);
622
+ color: var(--emfe-w-pam-color-primary, var(--emfe-w-color-pink-500, #D0046C));
623
623
  font-weight: 400;
624
624
  }
625
625
 
626
626
  .MyAccountCategoryTitleMobile {
627
627
  font-size: 16px;
628
- color: var(--emfe-w-color-primary, #D0046C);
628
+ color: var(--emfe-w-pam-color-primary, var(--emfe-w-color-pink-500, #D0046C));
629
629
  }
630
630
 
631
631
  .MyAccountCategoryTitleNone {
@@ -633,7 +633,7 @@
633
633
  }
634
634
 
635
635
  .PlayerInfoWrapper {
636
- color: var(--emfe-w-color-contrast, #07072A);
636
+ color: var(--emfe-w-pam-typography, var(--emfe-w-color-dunkel, #07072A));
637
637
  background: var(--emfe-w-color-gray-50, #F9F8F8);
638
638
  padding: 50px;
639
639
  max-width: 760px;
@@ -642,7 +642,7 @@
642
642
  .PlayerNotificationsHeader, .PlayerDetailsHeader, .PlayerLocationHeader {
643
643
  h3 {
644
644
  font-size: 16px;
645
- color: var(--emfe-w-color-primary, #D0046C);
645
+ color: var(--emfe-w-pam-color-primary, var(--emfe-w-color-pink-500, #D0046C));
646
646
  text-transform: capitalize;
647
647
  font-weight: 400;
648
648
  }
@@ -676,7 +676,7 @@
676
676
  input {
677
677
  font-size: 14px;
678
678
  font-weight: 300;
679
- color: var(--emfe-w-color-contrast, #07072A);
679
+ color: var(--emfe-w-pam-contrast, var(--emfe-w-color-dunkel, #07072A));
680
680
  padding: 10px;
681
681
  line-height: 16px;
682
682
  background: var(--emfe-w-color-white, #FFFFFF);
@@ -685,21 +685,21 @@
685
685
  outline: none;
686
686
  transition-duration: 0.3s;
687
687
  &:focus, :focus-within, :focus-visible, :visited {
688
- border: 1px solid var(--emfe-w-color-primary, #D0046C);
689
- box-shadow: 0 0 0 1pt var(--emfe-w-color-primary, #D0046C);
688
+ border: 1px solid var(--emfe-w-pam-color-primary, var(--emfe-w-color-pink-500, #D0046C));
689
+ box-shadow: 0 0 0 1pt var(--emfe-w-pam-color-primary, var(--emfe-w-color-pink-500, #D0046C));
690
690
  }
691
691
  }
692
692
 
693
693
  &.InvalidField {
694
694
  input {
695
- border: 1px solid var(--emfe-w-color-error, #FD2839);
695
+ border: 1px solid var(--emfe-w-color-error, var(--emfe-w-color-red, #FD2839));
696
696
  background: var(--emfe-w-color-primary-50, #FBECF4);
697
- color: var(--emfe-w-color-error, #FD2839);
697
+ color: var(--emfe-w-color-error, var(--emfe-w-color-red, #FD2839));
698
698
  }
699
699
  }
700
700
 
701
701
  .InvalidInput {
702
- color: var(--emfe-w-color-error, #FD2839);
702
+ color: var(--emfe-w-color-error, var(--emfe-w-color-red, #FD2839));
703
703
  font-size: 10px;
704
704
  line-height: 10px;
705
705
  }
@@ -718,7 +718,7 @@
718
718
  font-size: 14px;
719
719
  font-weight: 300;
720
720
  padding: 10px;
721
- color: var(--emfe-w-color-contrast, #07072A);
721
+ color: var(--emfe-w-pam-contrast, var(--emfe-w-color-dunkel, #07072A));
722
722
  border: 1px solid var(--emfe-w-color-gray-100, #E6E6E6);
723
723
  border-radius: 5px;
724
724
  outline: none;
@@ -729,8 +729,8 @@
729
729
  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);
730
730
  background-position: calc(100% - 0.75rem) center;
731
731
  &:focus, :focus-within, :focus-visible, :visited {
732
- border: 1px solid var(--emfe-w-color-primary, #D0046C);
733
- box-shadow: 0 0 0 1pt var(--emfe-w-color-primary, #D0046C);
732
+ border: 1px solid var(--emfe-w-pam-color-primary, var(--emfe-w-color-pink-500, #D0046C));
733
+ box-shadow: 0 0 0 1pt var(--emfe-w-pam-color-primary, var(--emfe-w-color-pink-500, #D0046C));
734
734
  }
735
735
  }
736
736
  /* Chrome, Safari, Edge, Opera */
@@ -782,14 +782,14 @@
782
782
  margin-right: 10px;
783
783
  }
784
784
  input:checked {
785
- background-color: var(--emfe-w-color-primary, #D0046C);
785
+ background-color: var(--emfe-w-pam-color-primary, var(--emfe-w-color-pink-500, #D0046C));
786
786
  }
787
787
  .Checkmark {
788
788
  left: 10px;
789
789
  top: 7px;
790
790
  width: 4px;
791
791
  height: 8px;
792
- border: solid white;
792
+ border: solid var(--emfe-w-color-white, #FFFFFF);
793
793
  border-width: 0 2px 2px 0;
794
794
  -webkit-transform: rotate(45deg);
795
795
  -ms-transform: rotate(45deg);
@@ -815,17 +815,17 @@
815
815
  align-items: center;
816
816
  justify-content: center;
817
817
  font-size: 16px;
818
- color: var(--emfe-w-color-contrast, #07072A);
818
+ color: var(--emfe-w-pam-contrast, var(--emfe-w-color-dunkel, #07072A));
819
819
  text-transform: uppercase;
820
820
  transition-duration: 0.3s;
821
821
  box-sizing: border-box;
822
822
  }
823
823
  .PlayerDetailsSaveButton {
824
- background: var(--emfe-w-color-primary, #D0046C);
825
- border: 1px solid var(--emfe-w-color-primary, #D0046C);
826
- color: var(--emfe-w-color-white, #FFFFFF);
824
+ background: var(--emfe-w-pam-color-primary, var(--emfe-w-color-pink-500, #D0046C));
825
+ border: 1px solid var(--emfe-w-pam-color-primary, var(--emfe-w-color-pink-500, #D0046C));
826
+ color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));
827
827
  &:active {
828
- background: var(--emfe-w-color-primary-600, #99034F);
828
+ background: var(--emfe-w-pam-color-primary, var(--emfe-w-color-pink-500, #D0046C));
829
829
  }
830
830
  &.PlayerButtonDisabled {
831
831
  opacity: 0.3;
@@ -837,7 +837,7 @@
837
837
  background: transparent;
838
838
  border: 1px solid var(--emfe-w-color-gray-300, #58586B);
839
839
  &:active {
840
- background: var(--emfe-w-color-primary-600, #99034F);
840
+ background: var(--emfe-w-pam-color-primary, var(--emfe-w-color-pink-500, #D0046C));
841
841
  }
842
842
  &.PlayerButtonDisabled {
843
843
  background: transparent;
@@ -869,7 +869,7 @@
869
869
  }
870
870
  .PlayerNotificationsHeader, .PlayerDetailsHeader, .PlayerLocationHeader {
871
871
  h3 {
872
- color: var(--emfe-w-color-primary, #D0046C);
872
+ color: var(--emfe-w-pam-color-primary, var(--emfe-w-color-pink-500, #D0046C));
873
873
  font-size: 14px;
874
874
  font-weight: 400;
875
875
  }
@@ -895,7 +895,7 @@
895
895
  .PlayerNotificationsCheckboxArea {
896
896
  .PlayerNotificationBox {
897
897
  label {
898
- color: var(--emfe-w-color-contrast, #07072A);
898
+ color: var(--emfe-w-pam-typography, var(--emfe-w-color-dunkel, #07072A));
899
899
  font-size: 12px;
900
900
  font-weight: 300;
901
901
  }
@@ -907,7 +907,7 @@
907
907
  .PlayerDetailsSaveButton, .PlayerDetailsCancelButton {
908
908
  font-size: 12px;
909
909
  height: 40px;
910
- color: var(--emfe-w-color-white, #FFFFFF);
910
+ color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));
911
911
  &.PlayerButtonDisabled {
912
912
  color: var(--emfe-w-color-gray-300, #58586B);
913
913
  }
@@ -967,7 +967,7 @@
967
967
  height: 56px;
968
968
  }
969
969
  .PlayerDetailsSaveButton {
970
- color: var(--emfe-w-color-white, #FFFFFF);
970
+ color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));
971
971
  &.PlayerButtonDisabled {
972
972
  color: var(--emfe-w-color-gray-300, #58586B);
973
973
  }
@@ -990,8 +990,8 @@
990
990
  }
991
991
  }
992
992
  .PlayerDetailsConfirmSave {
993
- background: var(--emfe-w-color-green, #48952a);
994
- color: var(--emfe-w-color-white, #FFFFFF);
993
+ background: var(--emfe-w-color-valid, var(--emfe-w-color-green, #48952a));
994
+ color: var(--emfe-w-button-typography, var(--emfe-w-color-white, #FFFFFF));
995
995
  padding: 16px;
996
996
  border-radius: 5px;
997
997
  margin-top: 16px;