journal-spellbook.component.scss 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. .journal-content {
  2. flex-direction: column;
  3. gap: 1rem;
  4. }
  5. .top-button {
  6. width: 18.5rem;
  7. }
  8. .class-picker {
  9. display: flex;
  10. flex-direction: row;
  11. justify-content: center;
  12. align-items: center;
  13. padding-top: 0.25rem;
  14. margin-bottom: 1.5rem;
  15. gap: 1rem;
  16. width: 100%;
  17. height: 8rem;
  18. border: var(--gold-2);
  19. div.class:first-child {
  20. margin-right: 2rem;
  21. }
  22. background-image: url("/assets/images/texture-0.jpg");
  23. border-radius: 10px;
  24. box-shadow: var(--shadow);
  25. }
  26. // Classes
  27. @mixin class-icon {
  28. width: 70px;
  29. height: 70px;
  30. background-size: cover;
  31. background-position: center center;
  32. border-radius: 50%;
  33. opacity: 0.5;
  34. transition: opacity 0.2s ease-in-out;
  35. &:hover {
  36. opacity: 0.75;
  37. }
  38. }
  39. .class {
  40. width: 100px;
  41. height: 100px;
  42. cursor: pointer;
  43. display: flex;
  44. flex-direction: column;
  45. align-items: center;
  46. justify-content: space-between;
  47. label {
  48. width: 10rem;
  49. text-align: center;
  50. font-weight: 500;
  51. color: var(--text);
  52. }
  53. }
  54. .icon-active {
  55. opacity: 1 !important;
  56. &::after {
  57. border: 3px solid var(--gold-dark);
  58. content: "";
  59. height: 80px;
  60. width: 80px;
  61. display: block;
  62. border-radius: 50%;
  63. position: relative;
  64. top: -5px;
  65. left: -5px;
  66. }
  67. }
  68. .nav-link {
  69. background-color: var(--tab);
  70. color: black;
  71. font-size: 1.123rem;
  72. font-weight: 500;
  73. width: 8rem;
  74. height: 4rem;
  75. border-radius: 10px 10px 0 0;
  76. border: var(--border);
  77. transition: all 0.2s ease-in-out;
  78. &:hover {
  79. background-color: var(--tab-hover);
  80. }
  81. }
  82. .nav-link.active {
  83. background-color: var(--tab-active);
  84. width: 9.25rem;
  85. font-size: 1.25rem;
  86. font-weight: 550;
  87. border: var(--border);
  88. }
  89. .card-container {
  90. display: flex;
  91. flex-wrap: wrap;
  92. gap: 1rem;
  93. width: 100%;
  94. min-height: 400px;
  95. padding: 1rem;
  96. padding-top: 2rem;
  97. background-image: url("/assets/images/texture-0.jpg");
  98. border-radius: 0 0 10px 10px;
  99. box-shadow: var(--shadow);
  100. border: var(--gold-2);
  101. border-top: none;
  102. }
  103. spellcard {
  104. display: inline-block;
  105. }
  106. .empty {
  107. display: flex;
  108. justify-content: center;
  109. align-items: center;
  110. width: 100%;
  111. height: 320px;
  112. font-size: 1.5rem;
  113. font-weight: 600;
  114. }
  115. .all-icon {
  116. @include class-icon;
  117. background-image: url("/assets/images/classes/all.png");
  118. }
  119. .artificer-icon {
  120. @include class-icon;
  121. background-image: url("/assets/images/classes/artificer.jpg");
  122. }
  123. .cleric-icon {
  124. @include class-icon;
  125. background-image: url("/assets/images/classes/cleric.jpg");
  126. }
  127. .bard-icon {
  128. @include class-icon;
  129. background-image: url("/assets/images/classes/bard.jpg");
  130. }
  131. .druid-icon {
  132. @include class-icon;
  133. background-image: url("/assets/images/classes/druid.jpg");
  134. }
  135. .paladin-icon {
  136. @include class-icon;
  137. background-image: url("/assets/images/classes/paladin.jpg");
  138. }
  139. .ranger-icon {
  140. @include class-icon;
  141. background-image: url("/assets/images/classes/ranger.jpg");
  142. }
  143. .sorcerer-icon {
  144. @include class-icon;
  145. background-image: url("/assets/images/classes/sorcerer.jpg");
  146. }
  147. .warlock-icon {
  148. @include class-icon;
  149. background-image: url("/assets/images/classes/warlock.jpg");
  150. }
  151. .wizard-icon {
  152. @include class-icon;
  153. background-image: url("/assets/images/classes/wizard.jpg");
  154. }