spellcard.component.html 873 B

123456789101112131415161718192021222324252627282930313233
  1. <div class="card-container">
  2. <div
  3. class="card-background"
  4. [style.background-color]="
  5. 'var(--' + spell.school.toLowerCase() + '-background)'
  6. "
  7. ></div>
  8. <div
  9. class="title"
  10. [style.box-shadow]="'var(--' + spell.school.toLowerCase() + '-border)'"
  11. >
  12. {{ spell.german }}
  13. </div>
  14. <img
  15. class="spell-image"
  16. [src]="'assets/images/spells/' + spell.image + '.jpg'"
  17. (error)="setBackupImage($event)"
  18. [style.box-shadow]="'var(--' + spell.school.toLowerCase() + '-border)'"
  19. alt="spell image"
  20. />
  21. <div
  22. class="info"
  23. [style.box-shadow]="'var(--' + spell.school.toLowerCase() + '-border)'"
  24. >
  25. <div class="school">{{ schools[spell.school].display }}</div>
  26. <div
  27. class="level"
  28. [style.box-shadow]="'var(--' + spell.school.toLowerCase() + '-border)'"
  29. >
  30. {{ spell.level }}
  31. </div>
  32. </div>
  33. </div>