Merge branch 'release/0.12.0'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dndtools",
-  "version": "0.11.2",
+  "version": "0.12.0",
   "scripts": {
     "ng": "ng",
     "start": "nx serve",

src/app/character/character-picker/deletion-confirm/deletion-confirm.component.scss

@@ -2,6 +2,6 @@
   width: 15rem;
   background-color: var(--modal-background);
   border-radius: 10px;
-  border: 1px solid var(--border-color);
+  border: var(--border);
   padding: 1rem;
 }

src/app/journal/journal-character/background/background.component.html

@@ -1,4 +1,4 @@
-<div class="background-container">
+<div class="character-container">
   <div class="title">{{ "backgrounds." + backgroundName | translate }}</div>
   <div class="content" [innerHTML]="background.description"></div>
 </div>

src/app/journal/journal-character/background/background.component.scss

@@ -1,18 +1,3 @@
-.background-container {
-  position: absolute;
-  top: 8.5rem;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 800px;
-  height: calc(100vh - 10.5rem);
-  margin: auto;
-  padding: 2rem;
-  overflow: auto;
-  border-radius: 10px;
-  background-image: url("/assets/images/texture.png");
-  box-shadow: var(--shadow);
-}
-
 .title {
   text-align: center;
   font-size: 2.5em;

src/app/journal/journal-character/class/class.component.html

@@ -1,4 +1,4 @@
-<div class="class-container">
+<div class="character-container">
   <div class="title">{{ "classes." + class.title | translate }}</div>
 
   <div [innerHTML]="class.description"></div>
@@ -6,7 +6,10 @@
   <div class="features">
     @for (feature of class.features; track feature) {
       <div class="feature">
-        <hr />
+        <divider
+          [appearance]="'gold-1'"
+          style="margin-bottom: 0.5rem"
+        ></divider>
         <div class="feature-name">{{ feature.name }}</div>
         <div class="feature-level">{{ feature.level }}</div>
         <icon-button

src/app/journal/journal-character/class/class.component.scss

@@ -1,18 +1,3 @@
-.class-container {
-  position: absolute;
-  top: 8.5rem;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 800px;
-  height: calc(100vh - 10.5rem);
-  margin: auto;
-  padding: 2rem;
-  overflow: auto;
-  border-radius: 10px;
-  background-image: url("/assets/images/texture.png");
-  box-shadow: var(--shadow);
-}
-
 .title {
   text-align: center;
   font-size: 2em;

src/app/journal/journal-character/combined/combined.component.html

@@ -1,4 +1,4 @@
-<div class="combined-container">
+<div class="character-container">
   <!-- <div class="content">{{ "character.complete.description" | translate }}</div> -->
   <div class="features">
     @for (feature of combined; track feature) {
@@ -11,7 +11,10 @@
           (click)="addFeature(feature)"
         ></icon-button>
         <div [innerHTML]="feature.description"></div>
-        <hr />
+        <divider
+          [appearance]="'gold-1'"
+          style="margin-bottom: 0.5rem"
+        ></divider>
       </div>
     }
   </div>

src/app/journal/journal-character/combined/combined.component.scss

@@ -1,18 +1,3 @@
-.combined-container {
-  position: absolute;
-  top: 8.5rem;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 800px;
-  height: calc(100vh - 10.5rem);
-  margin: auto;
-  padding: 2rem;
-  overflow: auto;
-  border-radius: 10px;
-  background-image: url("/assets/images/texture.png");
-  box-shadow: var(--shadow);
-}
-
 .content {
   font-size: 1.25rem;
   font-weight: 600;

src/app/journal/journal-character/general/general.component.scss

@@ -1,10 +1,36 @@
+@import "../../../../responsive";
+
 .general-container {
   height: 100%;
   display: flex;
   flex-direction: column;
   row-gap: 2rem;
+
+  @include width-medium {
+    position: absolute;
+    top: 8.5rem;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 1200px;
+    height: calc(100vh - 10.5rem);
+    margin: auto;
+  }
 }
 
+// position: absolute;
+//   top: 8.5rem;
+//   left: 50%;
+//   transform: translateX(-50%);
+//   width: 800px;
+//   height: calc(100vh - 10.5rem);
+//   margin: auto;
+//   padding: 2rem 2rem;
+//   overflow: auto;
+//   border-radius: 10px;
+//   border: var(--gold-3);
+//   background-image: url("/assets/images/texture-0.jpg");
+//   box-shadow: var(--shadow);
+
 .first-row {
   display: flex;
   justify-content: space-between;
@@ -14,10 +40,10 @@
   width: 24rem;
   height: 24rem;
   position: relative;
-  border: 1px solid var(--border-color);
+  border: var(--border);
   border-radius: 10px;
   box-shadow: var(--shadow);
-  background-image: url("/assets/images/texture.png");
+  background-image: url("/assets/images/texture-0.jpg");
   border-radius: 10px;
   overflow: hidden;
 
@@ -89,9 +115,9 @@
     .looks-field {
       width: 12.5rem;
       height: 1.75rem;
-      background-image: url("/assets/images/texture.png");
+      background-image: url("/assets/images/texture-0.jpg");
       border-radius: 4px;
-      border: 1px solid var(--border-color);
+      border: var(--gold-1);
       box-shadow: var(--shadow);
       padding-left: 1rem;
     }
@@ -108,7 +134,7 @@
     height: 32px !important;
     min-height: 32px !important;
     padding-top: 4px !important;
-    background-image: url("/assets/images/texture.png");
+    background-image: url("/assets/images/texture-0.jpg");
   }
 }
 
@@ -126,7 +152,7 @@
     resize: none;
     height: 20rem !important;
     width: 18.75rem;
-    background-image: url("/assets/images/texture.png");
+    background-image: url("/assets/images/texture-0.jpg");
   }
 
   .description-wrapper {
@@ -189,5 +215,5 @@
 }
 
 ::ng-deep .mdc-text-field--outlined {
-  background-image: url("/assets/images/texture.png") !important;
+  background-image: url("/assets/images/texture-0.jpg") !important;
 }

src/app/journal/journal-character/journal-character.component.html

@@ -1,8 +1,7 @@
 <div class="header">
   <div class="header-data">
     <input type="number" [(ngModel)]="data.level" (change)="updateData()" />
-    <!-- <div class="horizontal-ruler"></div> -->
-    <divider></divider>
+    <divider [appearance]="'grey-dark-2'"></divider>
     {{ "character.level" | translate }}
   </div>
   <div class="name">{{ name }}</div>
@@ -12,7 +11,7 @@
       [(ngModel)]="data.experience"
       (change)="updateData()"
     />
-    <divider></divider>
+    <divider [appearance]="'grey-dark-2'"></divider>
     {{ "character.experience" | translate }}
   </div>
 </div>
@@ -22,7 +21,7 @@
       ngbNav
       #nav="ngbNav"
       [(activeId)]="activeTab"
-      class="flex-column navigation-bar"
+      class="column navigation-bar"
       orientation="vertical"
     >
       <ng-container ngbNavItem="general">

src/app/journal/journal-character/journal-character.component.scss

@@ -2,9 +2,10 @@
   display: flex;
   justify-content: space-between;
   height: 6.5rem;
-  background-image: url("/assets/images/background-50.jpg");
+  background-image: url("/assets/images/background-30.jpg");
+  border-bottom: var(--gold-dark-2);
   box-shadow: var(--shadow);
-
+  z-index: 5;
   .header-data {
     margin: 0 5rem;
     display: flex;
@@ -68,7 +69,7 @@
 
       &.active,
       &:hover {
-        background-color: var(--new-tab);
+        background-color: var(--gold);
         box-shadow: var(--shadow);
       }
     }

src/app/journal/journal-character/species/species.component.html

@@ -1,4 +1,4 @@
-<div class="species-container">
+<div class="character-container">
   <div class="title">{{ "species." + speciesName | translate }}</div>
 
   @for (entry of species.content; let index = $index; track entry) {
@@ -21,7 +21,10 @@
         <div class="abilities">
           @for (feature of entry.features; track feature) {
             <div class="ability">
-              <hr />
+              <divider
+                [appearance]="'gold-1'"
+                style="margin-bottom: 0.5rem"
+              ></divider>
               <div class="ability-name">{{ feature.name }}</div>
               <icon-button
                 [icon]="'add'"
@@ -45,6 +48,5 @@
         </div>
       }
     </div>
-    <hr />
   }
 </div>

src/app/journal/journal-character/species/species.component.scss

@@ -1,18 +1,3 @@
-.species-container {
-  position: absolute;
-  top: 8.5rem;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 800px;
-  height: calc(100vh - 10.5rem);
-  margin: auto;
-  padding: 2rem 1rem;
-  overflow: auto;
-  border-radius: 10px;
-  background-image: url("/assets/images/texture.png");
-  box-shadow: var(--shadow);
-}
-
 .title {
   text-align: center;
   font-size: 2.5em;

src/app/journal/journal-character/story/story.component.html

@@ -1,4 +1,4 @@
-<div class="story-container">
+<div class="character-container">
   <div class="edit">
     <icon-button
       [icon]="editMode ? 'cross' : 'edit'"
@@ -19,18 +19,12 @@
       ></ngx-editor>
     </div>
     <div class="horizontal-buttons" style="justify-content: space-around">
-      <ui-button
-        [color]="'green'"
-        [width]="'w15'"
-        [type]="'apply'"
-        (click)="update()"
-      ></ui-button>
-      <ui-button
-        [color]="'red'"
-        [width]="'w15'"
-        [type]="'discard'"
-        (click)="cancel()"
-      ></ui-button>
+      <ui-button [width]="'w15'" (click)="update()"
+        >{{ "buttons.apply" | translate }}
+      </ui-button>
+      <ui-button [width]="'w15'" (click)="cancel()"
+        >{{ "buttons.discard" | translate }}
+      </ui-button>
     </div>
   } @else {
     {{ "character.story.editStory" | translate }}

src/app/journal/journal-character/story/story.component.scss

@@ -1,22 +1,7 @@
-.story-container {
+.edit {
   position: absolute;
-  top: 8.5rem;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 800px;
-  height: calc(100vh - 10.5rem);
-  margin: auto;
-  padding: 2rem;
-  overflow: auto;
-  border-radius: 10px;
-  background-image: url("/assets/images/texture.png");
-  box-shadow: var(--shadow);
-
-  .edit {
-    position: absolute;
-    right: 1rem;
-    top: 3rem;
-  }
+  right: 1rem;
+  top: 3rem;
 }
 
 .title {

src/app/journal/journal-character/subclass/subclass.component.html

@@ -1,4 +1,4 @@
-<div class="subclass-container">
+<div class="character-container">
   @if (!subclass) {
     <div class="title">{{ "subclasses.empty" | translate }}</div>
     <div class="description">
@@ -32,7 +32,10 @@
     <div class="features">
       @for (feature of subclass.features; track feature) {
         <div class="feature">
-          <hr />
+          <divider
+            [appearance]="'gold-1'"
+            style="margin-bottom: 0.5rem"
+          ></divider>
           <div class="feature-name">{{ feature.name }}</div>
           <div class="feature-level">{{ feature.level }}</div>
           <icon-button

src/app/journal/journal-character/subclass/subclass.component.scss

@@ -1,18 +1,3 @@
-.subclass-container {
-  position: absolute;
-  top: 8.5rem;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 800px;
-  height: calc(100vh - 10.5rem);
-  margin: auto;
-  padding: 2rem;
-  overflow: auto;
-  border-radius: 10px;
-  background-image: url("/assets/images/texture.png");
-  box-shadow: var(--shadow);
-}
-
 .title {
   text-align: center;
   font-size: 2em;

src/app/journal/journal-home/details-panel/details-panel.component.scss

@@ -20,9 +20,11 @@
   right: 0;
   bottom: 0;
   width: 30rem;
-  background-color: var(--background-color);
+  background-image: url("/assets/images/texture-0.jpg");
   z-index: 999;
   padding: 1.5rem;
+  border-left: var(--gold-3);
+  box-shadow: var(--shadow-left);
   transform: translateX(100%);
   transition: transform 0.3s ease-in-out;
   overflow: auto;

src/app/journal/journal-home/journal-home.component.scss

@@ -4,5 +4,5 @@
   height: 100vh;
   width: 100vw;
   // background-color: var(--background-color);
-  background-image: url("/assets/images/background.jpg");
+  background-image: url("/assets/images/background-0.jpg");
 }

src/app/journal/journal-home/navigation-panel/navigation-panel.component.scss

@@ -22,13 +22,14 @@
   left: 0;
   bottom: 0;
   width: 25rem;
-  // background-color: var(--background-color);
-  background-image: url("/assets/images/background.jpg");
+  background-image: url("/assets/images/background-40.jpg");
   z-index: 1001;
   padding: 1.5rem;
   transform: translateX(-100%);
   transition: transform 0.3s ease-in-out;
   overflow: hidden;
+  border-right: var(--gold-3);
+  box-shadow: var(--shadow-right);
 }
 
 .panel--open {
@@ -49,19 +50,16 @@ ul {
     padding: 0.5rem 0 0.5rem 2rem;
   }
 
-  border: solid 1px var(--border-color);
-  // background-color: var(--field-background-color);
-  background-image: url("/assets/images/texture.png");
+  border: var(--gold-3);
   box-shadow: var(--shadow);
   border-radius: 10px;
-  transition: transform 0.2s ease-in-out;
   cursor: pointer;
-
+  background-image: url("/assets/images/texture-10.jpg");
   &:hover {
-    filter: brightness(0.9);
+    background-image: url("/assets/images/texture-20.jpg");
   }
   &.active {
-    filter: brightness(0.8);
+    background-image: url("/assets/images/texture-30.jpg");
   }
 }
 
@@ -78,16 +76,15 @@ ul {
   width: 9rem;
   font-weight: 500;
   padding: 0.5rem;
-  border: solid 1px var(--border-color);
-  background-image: url("/assets/images/texture.png");
+  border: var(--border);
   box-shadow: var(--shadow);
   border-radius: 10px;
-  transition: transform 0.2s ease-in-out;
-
+  border: var(--gold-3);
+  background-image: url("/assets/images/texture-10.jpg");
   &:hover {
-    filter: brightness(0.9);
+    background-image: url("/assets/images/texture-20.jpg");
   }
   &.active {
-    filter: brightness(0.8);
+    background-image: url("/assets/images/texture-30.jpg");
   }
 }

src/app/journal/journal-inventory/journal-inventory.component.html

@@ -36,12 +36,8 @@
     }
 
     <div class="footer">
-      <ui-button
-        [color]="'green'"
-        [width]="'w22'"
-        [type]="'addEntry'"
-        (click)="addItem('items')"
-      >
+      <ui-button [width]="'w22'" (click)="addItem('items')"
+        >{{ "buttons.addEntry" | translate }}
       </ui-button>
     </div>
   </div>
@@ -88,12 +84,8 @@
       }
 
       <div class="footer">
-        <ui-button
-          [color]="'green'"
-          [width]="'w22'"
-          [type]="'addEntry'"
-          (click)="addItem('consumables')"
-        >
+        <ui-button [width]="'w22'" (click)="addItem('consumables')"
+          >{{ "buttons.addEntry" | translate }}
         </ui-button>
       </div>
     </div>

src/app/journal/journal-inventory/journal-inventory.component.scss

@@ -25,13 +25,13 @@
   color: black;
   border: none;
   transition: filter 0.25s ease-in-out;
-  background-image: url("/assets/images/texture-15.jpg");
+  background-color: var(--tab);
   filter: brightness(0.85);
   &:hover {
-    background-image: url("/assets/images/texture-25.jpg");
+    background-color: var(--tab-hover);
   }
   &.active {
-    background-image: url("/assets/images/texture-40.jpg");
+    background-color: var(--tab-active);
   }
 }
 
@@ -42,16 +42,16 @@
   border-radius: 10px;
   display: flex;
   flex-direction: column;
-  background-image: url("/assets/images/texture.png");
+  background-image: url("/assets/images/texture-0.jpg");
   box-shadow: var(--shadow);
-  border: var(--golder);
+  border: var(--gold-2);
 
   .heading-row {
     flex: 0 0 3rem;
     display: grid;
     grid-template-columns: 2fr 1fr 1fr 1fr;
     padding: 10px 20px;
-    border-bottom: 1px solid var(--border-color);
+    border-bottom: var(--border);
     box-shadow: var(--shadow);
   }
 
@@ -77,16 +77,6 @@
     display: grid;
     grid-template-columns: 2fr 1fr 1fr 1fr;
     align-items: center;
-    box-sizing: border-box;
-    cursor: pointer;
-    border-radius: 10px;
-    box-shadow: var(--shadow);
-    transition: all 0.2 ease-in-out;
-    border: var(--golder);
-    background-image: url("/assets/images/texture-15.jpg");
-    &:hover {
-      background-image: url("/assets/images/texture-40.jpg");
-    }
   }
 
   .item-property {
@@ -109,10 +99,10 @@
   height: calc(100% - 16rem);
   width: 100%;
   border-radius: 10px;
-  border: var(--golder);
+  border: var(--gold-2);
   display: flex;
   flex-direction: column;
-  background-image: url("/assets/images/texture.png");
+  background-image: url("/assets/images/texture-0.jpg");
   box-shadow: var(--shadow);
 
   .heading-row {
@@ -120,7 +110,7 @@
     display: grid;
     grid-template-columns: 2fr 1.5fr 1.5fr 1.5fr;
     padding: 10px 10px;
-    border-bottom: 1px solid var(--border-color);
+    border-bottom: var(--border);
     box-shadow: var(--shadow);
   }
 
@@ -142,16 +132,6 @@
     margin: 0 0.5rem;
     display: grid;
     align-items: center;
-    box-sizing: border-box;
-    cursor: pointer;
-    border-radius: 10px;
-    box-shadow: var(--shadow);
-    transition: all 0.2s ease-in-out;
-    border: var(--golder);
-    background-image: url("/assets/images/texture-15.jpg");
-    &:hover {
-      background-image: url("/assets/images/texture-40.jpg");
-    }
   }
 
   .item-property {
@@ -169,12 +149,12 @@
   align-items: center;
   height: 6rem;
   width: 100%;
-  // border: 1px solid var(--border-color);
+  // border: var(--border);;
   border-radius: 10px;
   // background-color: var(--field-background-color);
-  background-image: url("/assets/images/texture.png");
+  background-image: url("/assets/images/texture-0.jpg");
   box-shadow: var(--shadow);
-  border: var(--golder);
+  border: var(--gold-2);
 
   .money-box {
     width: 6rem;
@@ -187,9 +167,9 @@
     font-size: 1.5rem;
     position: relative;
     border-radius: 10px;
-    background-image: url("/assets/images/texture-15.jpg");
+    background-color: white;
     box-shadow: var(--shadow);
-    border: var(--golder);
+    border: var(--gold-2);
   }
 
   .money-icon {
@@ -226,9 +206,9 @@
   justify-content: center;
   gap: 2rem;
   position: relative;
-  border: var(--golder);
+  border: var(--gold-2);
   border-radius: 10px;
-  background-image: url("/assets/images/texture.png");
+  background-image: url("/assets/images/texture-0.jpg");
   box-shadow: var(--shadow);
 
   .weight-box {
@@ -239,8 +219,8 @@
     justify-content: center;
     align-items: center;
     border-radius: 10px;
-    background-image: url("/assets/images/texture-15.jpg");
-    border: var(--golder);
+    background-color: white;
+    border: var(--gold-2);
     box-shadow: var(--shadow);
   }
 }

src/app/journal/journal-inventory/simple-item-modal/simple-item-modal.component.html

@@ -15,7 +15,7 @@
       </mat-form-field>
     </div>
 
-    <div class="flex-row numbers">
+    <div class="flex numbers">
       <div>
         <div class="input-label">{{ "inventory.weight" | translate }}</div>
         <mat-form-field appearance="outline" style="width: 7rem">
@@ -64,28 +64,16 @@
 
   <div class="horizontal-buttons">
     @if (isUpdate) {
-      <ui-button
-        [color]="'green'"
-        [type]="'confirm'"
-        style="width: 40%"
-        (click)="update()"
-      >
+      <ui-button style="width: 40%" (click)="update()"
+        >{{ "buttons.confirm" | translate }}
       </ui-button>
     } @else {
-      <ui-button
-        [color]="'green'"
-        [type]="'confirm'"
-        style="width: 40%"
-        (click)="add()"
-      >
+      <ui-button style="width: 40%" (click)="add()"
+        >{{ "buttons.confirm" | translate }}
       </ui-button>
     }
-    <ui-button
-      [color]="'red'"
-      [type]="'cancel'"
-      style="width: 40%"
-      (click)="cancel()"
-    >
+    <ui-button style="width: 40%" (click)="cancel()"
+      >{{ "buttons.cancel" | translate }}
     </ui-button>
   </div>
 </div>

src/app/journal/journal-inventory/simple-item-modal/simple-item-modal.component.scss

@@ -1,6 +1,5 @@
 .dimensions {
   width: 35rem;
-  background-image: url("/assets/images/background.jpg");
 }
 
 .numbers {

src/app/journal/journal-settings/journal-settings.component.html

@@ -27,10 +27,6 @@
   <hr />
   <div class="settings-entry">
     Aktuellen Charakter exportieren (coming soon)
-    <ui-button
-      [color]="'neutral'"
-      [type]="'export'"
-      [width]="'w15'"
-    ></ui-button>
+    <ui-button [width]="'w15'">{{ "buttons.export" | translate }} </ui-button>
   </div>
 </div>

src/app/journal/journal-settings/journal-settings.component.scss

@@ -2,10 +2,10 @@
   margin: 2rem auto 0 auto;
   width: 600px;
   padding: 2rem;
-  border: var(--border);
+  border: var(--gold-2);
   border-radius: 10px;
   box-shadow: var(--shadow);
-  font-family: var(--bs-body-font-family) !important;
+  background-image: url("/assets/images/texture-0.jpg");
 }
 
 .settings-entry {

src/app/journal/journal-spellbook/custom-spells-modal/custom-spells-modal.component.html

@@ -23,6 +23,8 @@
             {{ "schools." + spell.school | translate }}
           </div>
         </div>
+      } @empty {
+        <div class="empty-list">{{ "spellbook.empty" | translate }}</div>
       }
     </div>
   </div>

src/app/journal/journal-spellbook/custom-spells-modal/custom-spells-modal.component.scss

@@ -2,8 +2,6 @@
   width: 35rem;
   height: 45rem;
   padding: 0;
-  overflow: hidden;
-  background-image: url("/assets/images/background.jpg");
 }
 
 .content {
@@ -14,8 +12,6 @@
   box-shadow: var(--shadow-bottom);
   padding: 1.5rem 0 1rem 0;
   margin-top: 0;
-  // color: #58180d;
-  // font-family: "Bookinsanity", serif;
 }
 
 .spell-list {
@@ -33,7 +29,7 @@
   display: flex;
   align-items: center;
   // justify-content: space-between;
-  background-image: url("/assets/images/texture.png");
+  background-image: url("/assets/images/texture-0.jpg");
   border-radius: 10px;
   font-size: 1rem;
   font-weight: 600;
@@ -69,6 +65,13 @@
   }
 }
 
+.empty-list {
+  text-align: center;
+  margin: 5rem auto;
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+
 .button-container {
   box-shadow: var(--shadow-top);
   height: 5.5rem;

src/app/journal/journal-spellbook/journal-spellbook.component.scss

@@ -17,10 +17,12 @@
   gap: 1rem;
   width: 100%;
   height: 8rem;
+  border: var(--gold-2);
+
   div.class:first-child {
     margin-right: 2rem;
   }
-  background-image: url("/assets/images/texture.png");
+  background-image: url("/assets/images/texture-0.jpg");
   border-radius: 10px;
   box-shadow: var(--shadow);
 }
@@ -73,22 +75,26 @@
 }
 
 .nav-link {
-  background-color: var(--new-tab);
+  background-color: var(--tab);
   color: black;
   font-size: 1.123rem;
   font-weight: 500;
   width: 8rem;
   height: 4rem;
   border-radius: 10px 10px 0 0;
-  transition: all 0.2s ease-in-out;
   border: var(--border);
+  transition: all 0.2s ease-in-out;
+  &:hover {
+    background-color: var(--tab-hover);
+  }
 }
 
 .nav-link.active {
-  background-color: var(--new-tab-active);
+  background-color: var(--tab-active);
   width: 9.25rem;
   font-size: 1.25rem;
   font-weight: 550;
+  border: var(--border);
 }
 
 .card-container {
@@ -99,9 +105,10 @@
   min-height: 400px;
   padding: 1rem;
   padding-top: 2rem;
-  background-image: url("/assets/images/texture.png");
+  background-image: url("/assets/images/texture-0.jpg");
   border-radius: 0 0 10px 10px;
   box-shadow: var(--shadow);
+  border: var(--gold-1);
 }
 
 spellcard {

src/app/journal/journal-spellcards/add-card/add-card.component.scss

@@ -2,23 +2,22 @@
   position: relative;
   height: 20rem;
   width: 15rem;
-  border: var(--border);
   border-radius: 10px;
+  border: var(--gold-2);
   box-shadow: var(--shadow);
   overflow: hidden;
   transition: all 0.3s ease-in-out;
+  background-image: url("/assets/images/texture-5.jpg");
 
   .clickable-card {
     width: 100%;
     height: 100%;
     position: relative;
     cursor: pointer;
-    transition: all 0.2s ease-in-out;
-    background-image: url("/assets/images/background.jpg");
-    filter: brightness(0.8);
-
+    border-radius: 10px;
+    background-image: url("/assets/images/texture-5.jpg");
     &:hover {
-      filter: brightness(0.9);
+      background-image: url("/assets/images/texture-10.jpg");
     }
 
     .add-icon {
@@ -50,10 +49,6 @@
   font-weight: 600;
 }
 
-.active {
-  // font-size: 1.125rem;
-}
-
 .inactive {
   color: rgb(124, 124, 124);
 }
@@ -61,9 +56,7 @@
 .spell-selection {
   width: 100%;
   height: 100%;
-  // background-color: var(--background-color);
-  background-image: url("/assets/images/background.jpg");
-  filter: brightness(0.9);
+  background-image: url("/assets/images/texture-5.jpg");
   padding-top: 0.375rem;
 }
 
@@ -95,8 +88,8 @@
     width: 90%;
     box-shadow: var(--shadow);
     cursor: pointer;
-    background-image: url("/assets/images/texture.png");
-    border: 1px solid var(--border-brown);
+    background-image: url("/assets/images/texture-0.jpg");
+    border: var(--gold-2);
     &:hover {
       filter: brightness(0.9);
     }

src/app/journal/journal-spellcards/journal-spellcards.component.scss

@@ -12,8 +12,8 @@
   width: 16rem;
   gap: 1rem;
   padding: 0.25rem 1rem;
-  background-image: url("/assets/images/texture.png");
-  border: solid 1px var(--border-color);
+  background-image: url("/assets/images/texture-0.jpg");
+  border: var(--border);
   border-bottom: none;
   border-radius: 10px 10px 0 0;
   cursor: pointer;
@@ -26,15 +26,15 @@
 
 @keyframes borders {
   0% {
-    border: solid 1px var(--border-color);
+    border: var(--border);
     border-radius: 10px 10px 0 0;
   }
   50% {
-    border: solid 1px var(--border-color);
+    border: var(--border);
     border-radius: 10px 10px 0 0;
   }
   100% {
-    border: 1px solid var(--border-color);
+    border: var(--border);
     border-radius: 10px;
   }
 }
@@ -62,9 +62,9 @@
 }
 
 .spell-list {
-  border: solid 1px var(--border-color);
+  border: var(--border);
   height: 22rem;
-  background-image: url("/assets/images/texture.png");
+  background-image: url("/assets/images/texture-0.jpg");
   border-radius: 0 10px 10px 10px;
   display: flex;
   flex-direction: row;
@@ -109,7 +109,7 @@ spellcard {
   width: 15rem;
   font-size: 1.25rem;
   font-weight: 600;
-  border: solid 1px var(--border-color);
+  border: var(--border);
   border-radius: 10px;
   display: flex;
   justify-content: center;

src/app/journal/journal-spellcards/spellcard/spellcard.component.scss

@@ -103,7 +103,7 @@
   height: 12rem;
   margin-bottom: 7px;
   z-index: 2;
-  background-image: url("/assets/images/texture.png");
+  background-image: url("/assets/images/texture-0.jpg");
 
   // img {
   //   width: 100%;

src/app/journal/journal-stats/ability-panel/ability-panel.component.scss

@@ -1,6 +1,6 @@
 .ability-panel-container {
-  border: var(--golder);
-  background-image: url("/assets/images/texture.png");
+  border: var(--gold-2);
+  background-image: url("/assets/images/texture-0.jpg");
   box-shadow: var(--shadow);
   border-radius: 10px;
   display: flex;
@@ -18,19 +18,19 @@
   }
   > :first-child {
     border-radius: 8px 0 0 0;
-    border-right: 1px solid var(--border-color);
+    border-right: var(--border);
   }
   > :nth-child(2) {
-    border-left: 1px solid var(--border-color);
-    border-right: 1px solid var(--border-color);
+    border-left: var(--border);
+    border-right: var(--border);
   }
   > :nth-child(3) {
-    border-left: 1px solid var(--border-color);
-    border-right: 1px solid var(--border-color);
+    border-left: var(--border);
+    border-right: var(--border);
   }
   > :last-child {
     border-radius: 0 8px 0 0;
-    border-left: 1px solid var(--border-color);
+    border-left: var(--border);
   }
 }
 
@@ -39,7 +39,7 @@
   font-size: 1.375rem;
   font-weight: 600;
   color: black;
-  border-bottom: solid 1px var(--border-color);
+  border-bottom: var(--border);
   border-right: 0;
   border-left: 0;
   border-top: 0;
@@ -49,7 +49,7 @@
 
   &.active {
     background-color: var(--tab-active);
-    border-bottom: 3px solid var(--border-color);
+    border-bottom: 3var (--border);
   }
 }
 

src/app/journal/journal-stats/ability-panel/ability-table/ability-details/ability-details.component.html

@@ -1,5 +1,7 @@
 <div class="title">{{ ability?.name }}</div>
 
+<divider [appearance]="'gold-2'" class="t-0625"></divider>
+
 <div class="content" [innerHTML]="ability?.longDescription"></div>
 
 <div class="details-cost-charge">
@@ -11,18 +13,10 @@
 </div>
 
 <div class="vertical-buttons bottom">
-  <ui-button
-    [color]="'green'"
-    [width]="'w20'"
-    [type]="'edit'"
-    (click)="close('update')"
-  >
+  <ui-button [width]="'w20'" (click)="close('update')"
+    >{{ "buttons.edit" | translate }}
   </ui-button>
-  <ui-button
-    [color]="'red'"
-    [width]="'w20'"
-    [type]="'delete'"
-    (click)="close('delete')"
-  >
+  <ui-button [width]="'w20'" (click)="close('delete')"
+    >{{ "buttons.delete" | translate }}
   </ui-button>
 </div>

src/app/journal/journal-stats/ability-panel/ability-table/ability-details/ability-details.component.scss

@@ -1,9 +1,11 @@
 .details-cost-charge {
   display: flex;
-  background-color: var(--secondary-color);
   justify-content: space-between;
-  margin: 0, 875rem;
-  font-size: 600;
+  background-image: url("/assets/images/texture-10.jpg");
+  font-weight: 600;
+  font-size: 1.125rem;
   padding: 0.5rem 2rem;
+  margin-top: 1rem;
+  border: var(--gold-3);
   border-radius: 10px;
 }

src/app/journal/journal-stats/ability-panel/ability-table/ability-modal/ability-modal.component.html

@@ -43,7 +43,7 @@
       <div class="hint">{{ "modal.longHint" | translate }}</div>
     </div>
 
-    <div class="flex-row">
+    <div class="row">
       <div class="w-100">
         <div class="input-label">{{ "modal.cost" | translate }}</div>
 
@@ -87,19 +87,13 @@
           (click)="update()"
         ></ui-button>
       } @else {
-        <ui-button
-          [color]="'green'"
-          [type]="'add'"
-          style="width: 45%"
-          (click)="add()"
-        ></ui-button>
+        <ui-button style="width: 45%" (click)="add()"
+          >{{ "buttons.add" | translate }}
+        </ui-button>
       }
-      <ui-button
-        [color]="'red'"
-        [type]="'cancel'"
-        style="width: 45%"
-        (click)="cancel()"
-      ></ui-button>
+      <ui-button style="width: 45%" (click)="cancel()"
+        >{{ "buttons.cancel" | translate }}
+      </ui-button>
     </div>
   </div>
 </div>

src/app/journal/journal-stats/ability-panel/ability-table/ability-modal/ability-modal.component.scss

@@ -1,14 +1,5 @@
 @import "../../../../../../responsive";
 
-.dimensions {
-  width: 50rem;
-  background-color: var(--modal-background);
-  border-radius: 10px;
-  border: 1px solid var(--border-color);
-  box-shadow: var(--shadow);
-  padding: 0 2rem;
-}
-
 .flex-form {
   gap: 0.5rem;
   @include height-small {

src/app/journal/journal-stats/ability-panel/ability-table/ability-table.component.html

@@ -21,7 +21,7 @@
         <p [innerHTML]="ability.shortDescription"></p>
 
         @if (ability.charges != 0) {
-          <div class="charges-box">
+          <div class="charges-box t-05">
             {{ "abilities.uses" | translate }}
             @if (ability.charges > 9) {
               <div class="usage-box">
@@ -66,12 +66,8 @@
     }
   </div>
   <div class="footer">
-    <ui-button
-      [color]="'green'"
-      [type]="'add'"
-      style="width: 80%"
-      (click)="openModal(false)"
-    >
+    <ui-button style="width: 60%" (click)="openModal(false)"
+      >{{ "buttons.add" | translate }}
     </ui-button>
   </div>
 </div>

src/app/journal/journal-stats/ability-panel/proficiencies-table/proficiencies-table.component.html

@@ -91,12 +91,8 @@
 
   <!-- MODAL BUTTON -->
   <div class="footer">
-    <ui-button
-      [color]="'green'"
-      [type]="'modify'"
-      style="width: 80%"
-      (click)="openModal()"
-    >
+    <ui-button style="width: 60%" (click)="openModal()"
+      >{{ "buttons.modify" | translate }}
     </ui-button>
   </div>
 </div>

src/app/journal/journal-stats/ability-panel/proficiencies-table/proficiencies-table.component.scss

@@ -13,11 +13,12 @@ mat-expansion-panel {
   margin-right: 10px;
   margin-left: 10px;
   margin-bottom: 1rem !important;
-  background-color: var(--items);
-  border: var(--border) !important;
+  // background-color: var(--items);
+  // border: var(--border); !important;
+  border: var(--gold-2) !important;
+  background-image: url("/assets/images/texture-0.jpg");
   border-radius: 10px !important;
   box-shadow: var(--shadow) !important;
-  transition: background-color 0.2s ease-in-out;
   transition: margin 0.2s ease-in-out;
 
   mat-panel-title {

src/app/journal/journal-stats/ability-panel/proficiencies-table/tools-modal/tools-modal.component.html

@@ -1,6 +1,7 @@
 <div class="dimensions">
   <div class="title">{{ "proficiencies.modalHeader" | translate }}</div>
-  <div class="heading left b-05">
+  <divider [appearance]="'gold-1'" style="margin-top: 1rem"></divider>
+  <div class="heading left b-05 t-1">
     {{ "proficiencies.languages" | translate }}
   </div>
   <div style="display: flex; flex-direction: column; gap: 0.5rem">
@@ -43,19 +44,11 @@
   </div>
 
   <div class="horizontal-buttons">
-    <ui-button
-      [color]="'green'"
-      [type]="'confirm'"
-      style="width: 45%"
-      (click)="update()"
-    >
+    <ui-button style="width: 45%" (click)="update()"
+      >{{ "buttons.confirm" | translate }}
     </ui-button>
-    <ui-button
-      [color]="'red'"
-      [type]="'cancel'"
-      style="width: 45%"
-      (click)="cancel()"
-    >
+    <ui-button style="width: 45%" (click)="cancel()"
+      >{{ "buttons.cancel" | translate }}
     </ui-button>
   </div>
 </div>

src/app/journal/journal-stats/ability-panel/proficiencies-table/tools-modal/tools-modal.component.scss

@@ -1,9 +1,5 @@
 .dimensions {
   width: 35rem;
-  background-color: var(--modal-background);
-  border-radius: 10px;
-  border: 1px solid var(--border-color);
-  padding: 0 2rem;
 }
 
 .item-row {

src/app/journal/journal-stats/ability-panel/spellslots/spellslots-modal/spellslots-modal.component.html

@@ -1,6 +1,7 @@
 <div class="dimensions">
   @if (!isMonk) {
     <div class="title">{{ "magic.spellslots" | translate }}</div>
+    <divider [appearance]="'gold-1'" style="margin-top: 1rem"></divider>
     <div class="content">{{ "magic.description" | translate }}</div>
     <mat-slide-toggle
       class="t-1"
@@ -39,6 +40,7 @@
     }
   } @else {
     <div class="title">{{ "magic.ki" | translate }}</div>
+    <divider [appearance]="'gold-1'" style="margin-top: 1rem"></divider>
     <div class="content">{{ "magic.descriptioni" | translate }}</div>
     <mat-slide-toggle
       [checked]="kiPoints.showKiPoints"
@@ -63,19 +65,11 @@
   }
 
   <div class="horizontal-buttons">
-    <ui-button
-      [color]="'green'"
-      [type]="'confirm'"
-      style="width: 45%"
-      (click)="update()"
-    >
+    <ui-button style="width: 45%" (click)="update()"
+      >{{ "buttons.confirm" | translate }}
     </ui-button>
-    <ui-button
-      [color]="'red'"
-      [type]="'cancel'"
-      style="width: 45%"
-      (click)="cancel()"
-    >
+    <ui-button style="width: 45%" (click)="cancel()"
+      >{{ "buttons.cancel" | translate }}
     </ui-button>
   </div>
 </div>

src/app/journal/journal-stats/ability-panel/spellslots/spellslots-modal/spellslots-modal.component.scss

@@ -1,7 +1,3 @@
 .dimensions {
   width: 35rem;
-  background-color: var(--modal-background);
-  border-radius: 10px;
-  border: 1px solid var(--border-color);
-  padding: 0 2rem;
 }

src/app/journal/journal-stats/ability-panel/spellslots/spellslots.component.html

@@ -91,12 +91,8 @@
   <!-- MODAL BUTTON -->
 
   <div class="footer">
-    <ui-button
-      [color]="'green'"
-      [type]="'modify'"
-      style="width: 80%"
-      (click)="openModal()"
-    >
+    <ui-button style="width: 60%" (click)="openModal()"
+      >{{ "buttons.modify" | translate }}
     </ui-button>
   </div>
 </div>

src/app/journal/journal-stats/ability-panel/spellslots/spellslots.component.scss

@@ -11,11 +11,11 @@
 .spell-container {
   margin: 15px 10px;
   // background-color: var(--items);
-  // border: var(--border);
+  // border: var(--border);;
   border-radius: 10px;
   box-shadow: var(--shadow);
   padding-bottom: 1.25rem;
-  border: var(--golder);
+  border: var(--gold-2);
   background-image: url("/assets/images/texture-15.jpg");
 }
 .level-row {
@@ -60,7 +60,7 @@ input[type="checkbox"]:checked::after {
   left: 50%;
   width: 12px;
   height: 12px;
-  background: var(--gold-active);
+  background: var(--gold-dark);
   transform: translate(-50%, -50%);
 }
 
@@ -71,10 +71,9 @@ input[type="checkbox"]:checked::after {
   font-size: 1.5rem;
   text-align: center;
   border-radius: 10px;
-  border: var(--golder);
+  border: var(--gold-2);
   box-shadow: var(--shadow);
-  // background-color: white;
-  background-image: url("/assets/images/texture-15.jpg");
+  background-color: white;
   display: flex;
   justify-content: center;
   align-items: center;

src/app/journal/journal-stats/ability-panel/trait-table/trait-details/trait-details.component.html

@@ -1,20 +1,14 @@
 <div class="title">{{ trait?.name }}</div>
 
+<divider [appearance]="'gold-2'" class="t-0625"></divider>
+
 <div class="content" [innerHTML]="trait?.longDescription"></div>
 
 <div class="vertical-buttons bottom">
-  <ui-button
-    [color]="'green'"
-    [type]="'edit'"
-    [width]="'w20'"
-    (click)="close('update')"
-  >
+  <ui-button [width]="'w20'" (click)="close('update')"
+    >{{ "buttons.edit" | translate }}
   </ui-button>
-  <ui-button
-    [color]="'red'"
-    [type]="'delete'"
-    [width]="'w20'"
-    (click)="close('delete')"
-  >
+  <ui-button [width]="'w20'" (click)="close('delete')"
+    >{{ "buttons.delete" | translate }}
   </ui-button>
 </div>

src/app/journal/journal-stats/ability-panel/trait-table/trait-modal/trait-modal.component.html

@@ -51,19 +51,13 @@
           (click)="update()"
         ></ui-button>
       } @else {
-        <ui-button
-          [color]="'green'"
-          [type]="'add'"
-          style="width: 45%"
-          (click)="add()"
-        ></ui-button>
+        <ui-button style="width: 45%" (click)="add()"
+          >{{ "buttons.add" | translate }}
+        </ui-button>
       }
-      <ui-button
-        [color]="'red'"
-        [type]="'cancel'"
-        style="width: 45%"
-        (click)="cancel()"
-      ></ui-button>
+      <ui-button style="width: 45%" (click)="cancel()"
+        >{{ "buttons.cancel" | translate }}
+      </ui-button>
     </div>
   </div>
 </div>

src/app/journal/journal-stats/ability-panel/trait-table/trait-table.component.html

@@ -11,12 +11,8 @@
     }
   </div>
   <div class="footer">
-    <ui-button
-      [color]="'green'"
-      [type]="'add'"
-      style="width: 80%"
-      (click)="openModal(false)"
-    >
+    <ui-button style="width: 60%" (click)="openModal(false)"
+      >{{ "buttons.add" | translate }}
     </ui-button>
   </div>
 </div>

src/app/journal/journal-stats/attribute-panel/attribute-field/attribute-details/attribute-details.component.scss

@@ -44,7 +44,7 @@
 }
 
 mat-expansion-panel {
-  border: var(--border) !important;
+  border: var(--gold-2) !important;
   border-radius: 10px !important;
   box-shadow: var(--shadow) !important;
   margin-top: 2.5rem;

src/app/journal/journal-stats/attribute-panel/attribute-field/attribute-field.component.scss

@@ -1,7 +1,7 @@
 .attribute-box {
   width: 8rem;
-  border: var(--golder);
-  background-image: url("/assets/images/texture.png");
+  border: var(--gold-2);
+  background-image: url("/assets/images/texture-0.jpg");
   box-shadow: var(--shadow);
   border-radius: 10px;
   text-align: center;

src/app/journal/journal-stats/info-row/conditions/conditions-details/conditions-details.component.html

@@ -80,18 +80,10 @@
 
 <!-- NAVIGATION BUTTONS -->
 <div class="vertical-buttons bottom">
-  <ui-button
-    [color]="'green'"
-    [type]="'save'"
-    [width]="'w20'"
-    (click)="close('update')"
-  >
+  <ui-button [width]="'w20'" (click)="close('update')"
+    >{{ "buttons.apply" | translate }}
   </ui-button>
-  <ui-button
-    [color]="'red'"
-    [type]="'discard'"
-    [width]="'w20'"
-    (click)="close('cancel')"
-  >
+  <ui-button [width]="'w20'" (click)="close('cancel')"
+    >{{ "buttons.discard" | translate }}
   </ui-button>
 </div>

src/app/journal/journal-stats/info-row/conditions/conditions-details/conditions-details.component.scss

@@ -24,7 +24,7 @@
   }
 }
 mat-expansion-panel {
-  border: var(--border) !important;
+  border: var(--gold-1) !important;
   box-shadow: none !important;
   mat-expansion-panel-header {
     font-size: 1.25rem;

src/app/journal/journal-stats/info-row/conditions/conditions.component.scss

@@ -1,7 +1,7 @@
 .condition-container {
   display: flex;
-  border: var(--golder);
-  background-image: url("/assets/images/texture.png");
+  border: var(--gold-2);
+  background-image: url("/assets/images/texture-0.jpg");
   box-shadow: var(--shadow);
   border-radius: 10px;
   height: 6rem;
@@ -20,9 +20,12 @@
   height: 4rem;
   margin: 0.25rem 0.25rem 0 0.25rem;
   overflow-y: auto;
-  border: var(--golder);
-  background-image: url("/assets/images/texture-15.jpg");
+  border: var(--gold-2);
+  background-image: url("/assets/images/texture-10.jpg");
   border-radius: 10px;
+  &:hover {
+    background-image: url("/assets/images/texture-15.jpg");
+  }
 }
 
 .condition-item {

src/app/journal/journal-stats/life/hit-dice/hit-dice.component.scss

@@ -30,8 +30,8 @@ input[type="checkbox"]:checked::after {
   position: absolute;
   top: 50%;
   left: 50%;
-  width: 12px;
-  height: 12px;
-  background: #815139;
+  width: 11px;
+  height: 11px;
+  background: var(--gold);
   transform: translate(-50%, -50%);
 }

src/app/journal/journal-stats/life/life-details/life-details.component.scss

@@ -2,7 +2,6 @@
   display: flex;
   flex-direction: row;
   justify-content: space-evenly;
-  // gap: 1.5rem;
   margin-top: 3rem;
   margin-bottom: 2rem;
 }
@@ -42,12 +41,12 @@
   background-color: var(--tab);
   border-top: 0;
   border-left: 0;
-  border-bottom: 1px solid var(--border-color);
+  border-bottom: var(--border);
   border-right: 0;
 
   &.active {
     background-color: var(--tab-active);
-    border-bottom: 3px solid var(--border-color);
+    border-bottom: 3var (--border);
   }
 }
 
@@ -60,22 +59,22 @@
   > :first-child {
     border-radius: 10px 0 0 0;
     &.active {
-      border-right: 1px solid var(--border-color);
+      border-right: var(--border);
     }
   }
   > :last-child {
     border-radius: 0 10px 0 0;
-    border-right: 1px solid var(--border-color);
+    border-right: var(--border);
     &.active {
-      border-left: 1px solid var(--border-color);
+      border-left: var(--border);
     }
   }
 }
 
 .life-data-container {
   height: calc(100% - 30rem);
-  background-color: var(--field-background-color);
-  border: var(--border);
+  background-image: url("/assets/images/texture-10.jpg");
+  border: var(--gold-2);
   border-radius: 0 0 10px 10px;
   padding: 0.5rem;
 }

src/app/journal/journal-stats/life/life.component.scss

@@ -1,8 +1,8 @@
 .life-box {
   width: 100%;
   height: 100%;
-  border: var(--golder);
-  background-image: url("/assets/images/texture.png");
+  border: var(--gold-2);
+  background-image: url("/assets/images/texture-0.jpg");
   box-shadow: var(--shadow);
   border-radius: 10px;
   cursor: pointer;

src/app/journal/journal-stats/save-throw-panel/save-throw-details/save-throw-details.component.html

@@ -25,19 +25,11 @@
 
 @if (showButtonsContainer) {
   <div class="vertical-buttons bottom">
-    <ui-button
-      [color]="'green'"
-      [type]="'apply'"
-      [width]="'w20'"
-      (click)="close('update')"
-    >
+    <ui-button [width]="'w20'" (click)="close('update')"
+      >{{ "buttons.apply" | translate }}
     </ui-button>
-    <ui-button
-      [color]="'red'"
-      [type]="'discard'"
-      [width]="'w20'"
-      (click)="close('cancel')"
-    >
+    <ui-button [width]="'w20'" (click)="close('cancel')"
+      >{{ "buttons.discard" | translate }}
     </ui-button>
   </div>
 }

src/app/journal/journal-stats/save-throw-panel/save-throw-panel.component.scss

@@ -1,8 +1,8 @@
 @import "../../../../responsive";
 
 .save-throw-panel {
-  border: var(--golder);
-  background-image: url("/assets/images/texture.png");
+  border: var(--gold-2);
+  background-image: url("/assets/images/texture-0.jpg");
   box-shadow: var(--shadow);
   border-radius: 10px;
   display: flex;

src/app/journal/journal-stats/skill-panel/skill-details/skill-details.component.html

@@ -18,19 +18,11 @@
 
 @if (showButtonsContainer) {
   <div class="vertical-buttons bottom">
-    <ui-button
-      [color]="'green'"
-      [type]="'apply'"
-      [width]="'w20'"
-      (click)="close('update')"
-    >
+    <ui-button [width]="'w20'" (click)="close('update')"
+      >{{ "buttons.apply" | translate }}
     </ui-button>
-    <ui-button
-      [color]="'red'"
-      [type]="'discard'"
-      [width]="'w20'"
-      (click)="close('cancel')"
-    >
+    <ui-button [width]="'w20'" (click)="close('cancel')"
+      >{{ "buttons.discard" | translate }}
     </ui-button>
   </div>
 }

src/app/journal/journal-stats/skill-panel/skill-panel.component.scss

@@ -3,8 +3,8 @@
   display: flex;
   flex-direction: column;
   justify-content: space-evenly;
-  border: var(--golder);
-  background-image: url("/assets/images/texture.png");
+  border: var(--gold-2);
+  background-image: url("/assets/images/texture-0.jpg");
   box-shadow: var(--shadow);
   border-radius: 10px;
   height: 37.875rem;

src/app/journal/journal-stats/weapons-container/spell-table/favorite-spells-modal/favorite-spells-modal.component.html

@@ -1,7 +1,7 @@
 <div class="dimensions">
   <div class="shadow-box">
     <div class="title t-0">{{ "spells.favorite" | translate }}</div>
-    <hr style="margin-bottom: 0; margin: 1.5rem 2rem 0 2rem" />
+    <divider [appearance]="'gold-1'" style="margin: 1.5rem 2rem 0"></divider>
     <div class="heading-list">
       <div>{{ "spells.header.cost" | translate }}</div>
       <div>{{ "spells.header.name" | translate }}</div>
@@ -15,7 +15,7 @@
     @for (spell of preparedSpells; let index = $index; track spell) {
       <div
         matRipple
-        class="spell-item"
+        class="item"
         [ngClass]="{ selected: checkedSpells[index] }"
         (click)="checkedSpells[index] = !checkedSpells[index]"
       >
@@ -74,19 +74,11 @@
   </div>
 
   <div class="horizontal-buttons">
-    <ui-button
-      [color]="'green'"
-      [type]="'confirm'"
-      style="width: 40%"
-      (click)="update()"
-    >
+    <ui-button style="width: 40%" (click)="update()"
+      >{{ "buttons.confirm" | translate }}
     </ui-button>
-    <ui-button
-      [color]="'red'"
-      [type]="'cancel'"
-      style="width: 40%"
-      (click)="cancel()"
-    >
+    <ui-button style="width: 40%" (click)="cancel()">
+      {{ "buttons.cancel" | translate }}
     </ui-button>
   </div>
 </div>

src/app/journal/journal-stats/weapons-container/spell-table/favorite-spells-modal/favorite-spells-modal.component.scss

@@ -21,7 +21,7 @@
 }
 
 .item-list {
-  height: 36rem;
+  height: 35.375rem;
   padding: 0 1rem;
   display: block;
   background: transparent;
@@ -29,37 +29,22 @@
   overflow: auto;
 }
 
-.spell-item {
-  box-sizing: border-box;
+.item {
   margin: 15px 10px;
-  color: rgba(0, 0, 0, 0.87);
   display: grid;
   grid-template-columns: 6fr 0.1fr 20fr 0.1fr 10fr 0.1fr 8fr 0.1fr 20fr 0.1fr 16fr;
   align-items: center;
   justify-content: space-between;
-  box-sizing: border-box;
-  background: var(--items);
-  border-radius: 10px;
-  border: var(--border);
   font-size: 1rem;
   font-weight: 600;
   text-align: center;
-  cursor: pointer;
-  box-shadow:
-    0 5px 5px -3px rgba(0, 0, 0, 0.2),
-    0 8px 8px 1px rgba(0, 0, 0, 0.14),
-    0 3px 10px 2px rgba(0, 0, 0, 0.12);
-  transition: background-color 0.2s ease-in-out;
-  &:hover {
-    background-color: #f8d8c6;
-  }
 }
 
 .selected {
-  background-color: #f8d8c6;
-  border: 3px solid var(--primary);
+  background-image: url("/assets/images/texture-25.jpg");
+  border: var(--gold-3);
   &:hover {
-    background-color: var(--items);
+    background-image: url("/assets/images/texture-20.jpg");
   }
 }
 

src/app/journal/journal-stats/weapons-container/spell-table/spell-table.component.html

@@ -70,12 +70,8 @@
     }
   </div>
   <div class="footer">
-    <ui-button
-      [color]="'green'"
-      [type]="'edit'"
-      style="width: 80%"
-      (click)="openModal()"
-    >
+    <ui-button style="width: 60%" (click)="openModal()"
+      >{{ "buttons.edit" | translate }}
     </ui-button>
   </div>
 
@@ -86,12 +82,12 @@
     <div class="bold">
       @if (spell.cost === "action") {
         <span>A</span>
-      }
-      @if (spell.cost === "bonus") {
+      } @else if (spell.cost === "bonus") {
         <span>B</span>
-      }
-      @if (spell.cost === "reaction") {
+      } @else if (spell.cost === "reaction") {
         <span>R</span>
+      } @else {
+        <img src="assets/icons/UIIcons/time.svg" alt="time" />
       }
     </div>
   </ng-template>

src/app/journal/journal-stats/weapons-container/spell-table/spell-table.component.scss

@@ -6,7 +6,7 @@
   text-align: center;
   font-weight: 700;
   box-shadow: var(--shadow-bottom);
-  border-bottom: 1px solid var(--border-color);
+  border-bottom: var(--border);
 }
 
 .item-list {
@@ -20,30 +20,13 @@
 
 .item {
   margin: 15px 10px;
-  color: rgba(0, 0, 0, 0.87);
   display: grid;
   grid-template-columns: 1.75fr 1px 6fr 1px 3.75fr 1px 2.25fr 1px 5fr 1px 3.25fr;
   align-items: center;
   justify-content: space-between;
-  box-sizing: border-box;
-  border-radius: 10px;
   font-size: 1rem;
   font-weight: 600;
   text-align: center;
-  box-shadow:
-    0 5px 5px -3px rgba(0, 0, 0, 0.2),
-    0 8px 8px 1px rgba(0, 0, 0, 0.14),
-    0 3px 10px 2px rgba(0, 0, 0, 0.12);
-  // background: var(--items);
-  // transition: background-color 0.2s ease-in-out;
-  // &:hover {
-  //   background: var(--items-hover);
-  // }
-  border: var(--golder);
-  background-image: url("/assets/images/texture-15.jpg");
-  &:hover {
-    background-image: url("/assets/images/texture-40.jpg");
-  }
 }
 
 .spell-box {
@@ -61,6 +44,11 @@
 
 .bold {
   font-weight: bold;
+
+  img {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
 }
 
 .small {

src/app/journal/journal-stats/weapons-container/weapon-table/weapon-details/weapon-details.component.html

@@ -2,14 +2,14 @@
 
 <div class="subheading left">{{ "weapons.attack" | translate }}</div>
 
-<div class="flex-row">
+<div class="row">
   <div class="label">{{ "general.modifier" | translate }}:</div>
   <span>{{ weapon?.attackBonus }}</span>
 </div>
 
 <!-- Singel Damage -->
 @if (!weapon?.isVersatile) {
-  <div class="flex-row">
+  <div class="row">
     <div class="label">{{ "weapons.header.damage" | translate }}:</div>
     @for (damage of weapon?.damage; let index = $index; track damage) {
       {{ damage.diceNumber }} {{ "general.dice" | translate

src/app/journal/journal-stats/weapons-container/weapon-table/weapon-modal/weapon-modal.component.html

@@ -12,9 +12,9 @@
     <mat-form-field appearance="outline" class="w-100">
       <input matInput [(ngModel)]="name" />
     </mat-form-field>
-    <hr />
+    <divider [appearance]="'gold-1'" style="margin-top: 1rem"></divider>
 
-    <div class="flex-row t-1">
+    <div class="row t-1">
       <div class="checkbox-column">
         <div class="checkbox-row">
           <input id="proficient" type="checkbox" [(ngModel)]="proficient" />
@@ -74,7 +74,10 @@
       </div>
     </div>
 
-    <hr />
+    <divider
+      [appearance]="'gold-1'"
+      style="display: block; margin: 1rem 0"
+    ></divider>
 
     <!-- TAB-PANEL -->
     <div class="d-flex">
@@ -82,13 +85,13 @@
         ngbNav
         #nav="ngbNav"
         [(activeId)]="active"
-        class="flex-column navigation-bar"
+        class="column navigation-bar"
         orientation="vertical"
       >
         <ng-container ngbNavItem="damage">
           <button ngbNavLink>Schaden</button>
           <ng-template ngbNavContent>
-            <div class="flex-row">
+            <div class="row">
               <div class="w-50">
                 <div class="input-label">
                   {{ "weapons.modal.attackBonus" | translate }}
@@ -122,7 +125,7 @@
               }
             </div>
 
-            <div class="flex-row t-05">
+            <div class="row t-05">
               @for (
                 damageEntry of damage;
                 let index = $index;
@@ -233,7 +236,7 @@
           <ng-template ngbNavContent>
             <div class="numbers">
               @if (isRanged) {
-                <div class="flex-row t-1">
+                <div class="row t-1">
                   <div class="w-50">
                     <div class="input-label">
                       {{ "weapons.modal.normalRange" | translate }}
@@ -269,7 +272,7 @@
                 </div>
               }
               @if (canBeThrown) {
-                <div class="flex-row t-2">
+                <div class="row t-2">
                   <div class="w-50">
                     <div class="input-label">
                       {{ "weapons.modal.normalThrowRange" | translate }}
@@ -336,7 +339,10 @@
       ></div>
     </div>
 
-    <hr style="margin-bottom: 0" />
+    <divider
+      [appearance]="'gold-1'"
+      style="display: block; margin-top: 1rem"
+    ></divider>
   </div>
 
   <div class="horizontal-buttons">
@@ -349,20 +355,12 @@
       >
       </ui-button>
     } @else {
-      <ui-button
-        [color]="'green'"
-        [type]="'add'"
-        style="width: 40%"
-        (click)="add()"
-      >
+      <ui-button style="width: 40%" (click)="add()"
+        >{{ "buttons.add" | translate }}
       </ui-button>
     }
-    <ui-button
-      [color]="'red'"
-      [type]="'cancel'"
-      style="width: 40%"
-      (click)="cancel()"
-    >
+    <ui-button style="width: 40%" (click)="cancel()"
+      >{{ "buttons.cancel" | translate }}
     </ui-button>
   </div>
 </div>

src/app/journal/journal-stats/weapons-container/weapon-table/weapon-modal/weapon-modal.component.scss

@@ -58,7 +58,7 @@
   }
 }
 
-div.nav-pills.flex-column.nav {
+div.nav-pills.column.nav {
   border-right: 1px solid darkgray;
   padding-right: 4px;
 }
@@ -73,7 +73,7 @@ div.nav-pills.flex-column.nav {
   gap: 1rem;
   height: 20rem;
   align-items: center;
-  border-right: 1px solid rgba(0, 0, 0, 0.125);
+  border-right: 1px solid var(--gold);
   padding-right: 4px;
   width: 11rem;
 
@@ -86,7 +86,7 @@ div.nav-pills.flex-column.nav {
 
     &.active,
     &:hover {
-      background-color: var(--tab-active);
+      background-color: var(--gold);
       box-shadow: var(--shadow);
     }
   }

src/app/journal/journal-stats/weapons-container/weapon-table/weapon-table.component.html

@@ -54,13 +54,8 @@
     }
   </div>
   <div class="footer">
-    <ui-button
-      [color]="'green'"
-      [type]="'add'"
-      style="width: 80%"
-      (click)="openModal(false)"
-    >
-      Hinzufügen
+    <ui-button style="width: 60%" (click)="openModal(false)">
+      {{ "buttons.add" | translate }}
     </ui-button>
   </div>
 </div>

src/app/journal/journal-stats/weapons-container/weapon-table/weapon-table.component.scss

@@ -6,7 +6,7 @@
   text-align: center;
   font-weight: 700;
   box-shadow: var(--shadow);
-  border-bottom: 1px solid var(--border-color);
+  border-bottom: var(--border);
 }
 
 .item-list {
@@ -22,26 +22,9 @@
   grid-template-columns: 6fr 0.1fr 20fr 0.1fr 8fr 0.1fr 16fr 0.1fr 10fr;
   align-items: center;
   justify-content: space-between;
-  box-sizing: border-box;
-  cursor: pointer;
-  border-radius: 10px;
   font-size: 1rem;
   font-weight: 600;
   text-align: center;
-  box-shadow:
-    0 5px 5px -3px rgba(0, 0, 0, 0.2),
-    0 8px 8px 1px rgba(0, 0, 0, 0.14),
-    0 3px 10px 2px rgba(0, 0, 0, 0.12);
-  // background: var(--items);
-  // transition: background-color 0.2s ease-in-out;
-  // &:hover {
-  //   background: var(--items-hover);
-  // }
-  border: var(--golder);
-  background-image: url("/assets/images/texture-15.jpg");
-  &:hover {
-    background-image: url("/assets/images/texture-40.jpg");
-  }
 }
 
 .weapons-box {
@@ -90,19 +73,6 @@
   display: flex;
   justify-content: center;
   align-items: center;
-
-  button {
-    height: 3rem;
-    width: 80%;
-    border-radius: 10px;
-    background: var(--accept);
-    transition: background-color 0.2s ease-in-out;
-    box-shadow: var(--shadow);
-
-    &:hover {
-      background-color: var(--accept-hover);
-    }
-  }
 }
 
 //// Drag and Drop

src/app/journal/journal-stats/weapons-container/weapons-container.component.scss

@@ -1,6 +1,6 @@
 .weapon-spell-container {
-  border: var(--golder);
-  background-image: url("/assets/images/texture.png");
+  border: var(--gold-2);
+  background-image: url("/assets/images/texture-0.jpg");
   box-shadow: var(--shadow);
   border-radius: 10px;
   display: flex;
@@ -15,9 +15,7 @@
   color: black;
   transition: all 0.25s ease-in-out;
   background-color: var(--tab);
-  border-top: 0;
-  border-left: 0;
-  border-right: 0;
+  border: 0;
 
   &.active {
     background-color: var(--tab-active);
@@ -33,14 +31,14 @@
   > :first-child {
     border-radius: 8px 0 0 0;
     &.active {
-      // border-right: 1px solid var(--border-color);
+      // border-right: var(--border);;
     }
   }
   > :last-child {
     border-radius: 0 8px 0 0;
-    // border-right: 1px solid var(--border-color);
+    // border-right: var(--border);;
     &.active {
-      // border-left: 1px solid var(--border-color);
+      // border-left: var(--border);;
     }
   }
 }

src/app/journal/spell-modal/spell-modal.component.html

@@ -12,9 +12,10 @@
     <mat-form-field appearance="outline" class="w-100">
       <input matInput [(ngModel)]="name" />
     </mat-form-field>
-    <hr />
+    <!-- <hr /> -->
+    <divider [appearance]="'gold-1'" class="t-05"></divider>
 
-    <div class="flex-row t-1">
+    <div class="row t-1">
       <div class="checkbox-column">
         <div class="checkbox-row">
           <input id="verbal" type="checkbox" [(ngModel)]="needsVerbal" />
@@ -189,7 +190,7 @@
       </div>
     </div>
 
-    <hr />
+    <divider [appearance]="'gold-1'" class="b-05 t-05"></divider>
 
     <!-- TAB-PANEL -->
     <div class="d-flex">
@@ -197,7 +198,7 @@
         ngbNav
         #nav="ngbNav"
         [(activeId)]="active"
-        class="flex-column navigation-bar"
+        class="column navigation-bar"
         orientation="vertical"
       >
         <!-- DAMAGE -->
@@ -210,7 +211,7 @@
             </button>
           }
           <ng-template ngbNavContent>
-            <div class="tab-content flex-row t-05">
+            <div class="tab-content row t-05">
               @for (
                 damageEntry of damage;
                 let index = $index;
@@ -397,24 +398,20 @@
       ></div>
     </div>
 
-    <hr class="b-0" />
+    <divider [appearance]="'gold-1'" class="t-05"></divider>
   </div>
 
   <!-- Button section -->
   <div class="horizontal-buttons">
-    <ui-button
-      [color]="'green'"
-      [type]="isModification ? 'apply' : 'add'"
-      style="width: 40%"
-      (click)="isModification ? update() : add()"
-    >
+    <ui-button style="width: 40%" (click)="isModification ? update() : add()">
+      @if (isModification) {
+        {{ "buttons.apply" | translate }}
+      } @else {
+        {{ "buttons.add" | translate }}
+      }
     </ui-button>
-    <ui-button
-      [color]="'red'"
-      [type]="'cancel'"
-      style="width: 40%"
-      (click)="cancel()"
-    >
+    <ui-button style="width: 40%" (click)="cancel()"
+      >{{ "buttons.cancel" | translate }}
     </ui-button>
   </div>
 </div>

src/app/journal/spell-modal/spell-modal.component.scss

@@ -1,9 +1,5 @@
 @import "../../../responsive";
 
-.dimensions {
-  background-image: url("/assets/images/background.jpg");
-}
-
 .checkbox-column {
   width: 33.3%;
   display: flex;
@@ -38,7 +34,7 @@
   }
 }
 
-.flex-row,
+.row,
 .range-container {
   ::ng-deep .mat-mdc-text-field-wrapper {
     width: 11rem !important;
@@ -85,7 +81,7 @@
   }
 }
 
-div.nav-pills.flex-column.nav {
+div.nav-pills.column.nav {
   border-right: 1px solid darkgray;
   padding-right: 4px;
 }
@@ -100,7 +96,7 @@ div.nav-pills.flex-column.nav {
   gap: 1rem;
   height: 20rem;
   align-items: center;
-  border-right: 1px solid rgba(0, 0, 0, 0.125);
+  border-right: var(--gold-1);
   padding-right: 4px;
   width: 11rem;
 
@@ -109,12 +105,11 @@ div.nav-pills.flex-column.nav {
     border-radius: 10px;
     transition: all 0.25s ease-in-out;
     font-weight: 600;
-    color: var(--text);
-
+    color: black;
     &.active,
     &:hover {
-      background-color: var(--tab-active);
-      background-color: var(--new-tab);
+      background-color: var(--gold);
+      background-color: var(--gold);
 
       box-shadow: var(--shadow);
     }

src/app/shared-components/divider/divider.component.html

@@ -1 +1,2 @@
-<div></div>
+<!-- <div [class]="'size' + size"></div> -->
+<div [style]="'border-top: var(--' + appearance + ')'"></div>

src/app/shared-components/divider/divider.component.scss

@@ -3,3 +3,27 @@ div {
   height: 1px;
   width: 100%;
 }
+
+:host {
+  display: block;
+}
+
+// .size1 {
+//   border-top: 1px solid var(--gold);
+// }
+
+// .size2 {
+//   border-top: 2px solid var(--gold);
+// }
+
+// .size3 {
+//   border-top: 3px solid var(--gold);
+// }
+
+// .size4 {
+//   border-top: 4px solid var(--gold);
+// }
+
+// .size5 {
+//   border-top: 5px solid var(--gold);
+// }

src/app/shared-components/divider/divider.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 @Component({
@@ -8,4 +8,12 @@ import { CommonModule } from '@angular/common';
   templateUrl: './divider.component.html',
   styleUrl: './divider.component.scss',
 })
-export class DividerComponent {}
+export class DividerComponent {
+  /**
+   * Defines the size and color of the divider.
+   * @Usage [style]="gold-2"
+   * @type {string} - The size and color of the divider. Possible are gold-x, gold-dark-x, grey-x and grey-dark-x.
+   * x is a number between 1 and 5 and defines the thickness of the divider.
+   */
+  @Input() appearance: string = 'gold-2';
+}

src/app/shared-components/ui-button/ui-button.component.html

@@ -1,7 +1,6 @@
 <button
   [disabled]="disabled"
-  [class]="disabled ? width + ' ' + color + '' + disabled : width + ' ' + color"
+  [class]="disabled ? width + ' ' + disabled : width"
 >
-  <!-- <ng-content></ng-content> -->
-  {{ "buttons." + type | translate }}
+  <ng-content></ng-content>
 </button>

src/app/shared-components/ui-button/ui-button.component.scss

@@ -1,15 +1,17 @@
 button {
   display: block;
+  height: 3rem;
+  width: 100%;
   font-size: 1.25rem;
   font-weight: 600;
-  height: 3rem;
   border-radius: 10px;
-  cursor: pointer;
+  border: var(--gold-3);
   box-shadow: var(--shadow);
-  transition: background-color 0.25s ease-in-out;
-}
-.default {
-  width: 100%;
+  cursor: pointer;
+  background-image: url("/assets/images/texture-20.jpg");
+  &:hover {
+    background-image: url("/assets/images/texture-25.jpg");
+  }
 }
 
 .disabled {
@@ -17,33 +19,7 @@ button {
   filter: grayscale(50%);
 }
 
-.green {
-  background-color: var(--accept);
-  &:hover {
-    background-color: var(--accept-hover);
-  }
-}
-
-.red {
-  background-color: var(--delete);
-  &:hover {
-    background-color: var(--delete-hover);
-  }
-}
-
-.blue {
-  background-color: var(--edit);
-  &:hover {
-    background-color: var(--edit-hover);
-  }
-}
-
-.neutral {
-  background-color: var(--neutral);
-  &:hover {
-    background-color: var(--neutral-hover);
-  }
-}
+// Used for the Input() width
 
 .w1 {
   width: 1rem !important;
@@ -144,3 +120,33 @@ button {
 .w25 {
   width: 25rem !important;
 }
+
+// DEPRECATED
+
+// .green {
+//   background-color: var(--accept);
+//   &:hover {
+//     background-color: var(--accept-hover);
+//   }
+// }
+
+// .red {
+//   background-color: var(--delete);
+//   &:hover {
+//     background-color: var(--delete-hover);
+//   }
+// }
+
+// .blue {
+//   background-color: var(--edit);
+//   &:hover {
+//     background-color: var(--edit-hover);
+//   }
+// }
+
+// .neutral {
+//   background-color: var(--neutral);
+//   &:hover {
+//     background-color: var(--neutral-hover);
+//   }
+// }

src/app/shared-components/ui-button/ui-button.component.ts

@@ -9,12 +9,14 @@ export class UiButtonComponent {
   /** Defines if the ui-button is disabled */
   @Input() disabled: boolean = false;
 
-  /** Available colors: green | red | blue | neutral */
-  @Input() type: string = 'default';
-
-  /** The width of the button from w1 to w25 in rem, defaulted to 100%. */
+  /** The width of the button from w1 to w25 in rem, and 10 to 100 in % defaulted to 100%. */
   @Input() width: string = 'default';
 
+  // DEPRECATED
   /** Available colors are green | red | blue | neutral. defaulted to neutral. */
   @Input() color: string = 'neutral';
+
+  // DEPRECATED
+  /** Used for the string to display on the button */
+  @Input() type: string = 'default';
 }

src/app/shared-components/value-box/value-box.component.scss

@@ -13,8 +13,9 @@ input,
   font-size: 1.5rem;
   text-align: center;
   border-radius: 10px;
-  border: none;
+  border: var(--gold-2);
   box-shadow: var(--shadow);
+  // background-image: url("/assets/images/texture-0.jpg");
   background-color: white;
   display: flex;
   justify-content: center;

src/app/shared-components/value-box/value-box.component.ts

@@ -1,5 +1,5 @@
 import { Component, forwardRef, Input } from '@angular/core';
-import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';
 
 @Component({

src/assets/i18n/de.json

@@ -76,6 +76,7 @@
     "finalDelete": "Endgültig löschen?"
   },
   "time": {
+    "none": "Keine Kosten",
     "action": "Aktion",
     "bonus": "Bonusaktion",
     "reaction": "Reaktion",
@@ -799,6 +800,7 @@
       "9": "9. Grad"
     },
     "manage": "Eigene Zauber verwalten",
+    "empty": "Noch keine Zauber erstellt",
     "add": "Neuen Zauber erstellen",
     "noSpells": "Für diesen Filter gibt es keine Zauber",
     "delete": "Ausgewählte Zauber löschen",
@@ -833,6 +835,6 @@
     "hint": "Die App befindet sich immer noch in einem Entwicklungsstadium und es können Fehler auftreten",
     "issues": "<p>Fehler und Anmerkungen bitte auf dem <a href='https://gogs.koljastrohm-games.com/Warafear/DNDTools/issues'>Git-Server in Issues</a> vermerken.<p>",
     "okay": "Verstanden",
-    "version": "0.11.2"
+    "version": "0.12.0"
   }
 }

src/assets/i18n/en.json

@@ -73,6 +73,7 @@
     "deleteSelected": "Delete Selected"
   },
   "time": {
+    "none": "No cost",
     "action": "Action",
     "bonus": "Bonus Action",
     "reaction": "Reaction",
@@ -794,6 +795,7 @@
       "9": "9th Level"
     },
     "manage": "Manage custom spells",
+    "empty": "No spells created",
     "add": "Create new spell",
     "noSpells": "No spells found for this filter",
     "delete": "Delete selected spells",
@@ -827,7 +829,7 @@
     "hint": "The app is still in a development stage and errors may occur",
     "issues": "<p>Please note errors and comments on the <a href='https://gogs.koljastrohm-games.com/Warafear/DNDTools/issues'>Git server in Issues</a>.<p>",
     "okay": "Understood",
-    "version": "0.11.2",
+    "version": "0.12.0",
     "test": "Test"
   }
 }

src/assets/icons/UIIcons/time.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M320-160h320v-120q0-66-47-113t-113-47q-66 0-113 47t-47 113v120Zm160-360q66 0 113-47t47-113v-120H320v120q0 66 47 113t113 47ZM160-80v-80h80v-120q0-61 28.5-114.5T348-480q-51-32-79.5-85.5T240-680v-120h-80v-80h640v80h-80v120q0 61-28.5 114.5T612-480q51 32 79.5 85.5T720-280v120h80v80H160Zm320-80Zm0-640Z"/></svg>

src/colors.scss

@@ -1,4 +1,5 @@
 :root {
+  // BUTTON COLORS
   --accept: #84a36f;
   --accept-hover: #6f9158;
   --delete: #a45a52;
@@ -7,8 +8,60 @@
   --edit-hover: #6f8e9f;
   --neutral: #b9835d;
   --neutral-hover: #a76b43;
+
+  // Deprecated
+  --background-color: #fff2e9;
+  --field-background-color: #efc8af;
+  --border-brown: #9b8559;
+
+  // General Colors
+  --gold: #c1ae75;
+  --gold-dark: #c0a042;
+  --gold-active: #98895c;
+
+  --grey: #8d8c8c;
+  --grey-dark: #6e6d6d;
+
+  --primary: #c1ae75;
+  --border-color: #8d8c8c;
+
   --tab: #c1ae75;
-  --tab-active: #98895c;
+  --tab-hover: #b5a36e;
+  --tab-active: #a29263;
+
+  // BORDERS
+  --border: 1px solid var(--border-color);
+  --gold-1: 1px solid var(--gold);
+  --gold-2: 2px solid var(--gold);
+  --gold-3: 3px solid var(--gold);
+  --gold-4: 4px solid var(--gold);
+  --gold-5: 5px solid var(--gold);
+
+  --gold-dark-1: 1px solid var(--gold-dark);
+  --gold-dark-2: 2px solid var(--gold-dark);
+  --gold-dark-3: 3px solid var(--gold-dark);
+  --gold-dark-4: 4px solid var(--gold-dark);
+  --gold-dark-5: 5px solid var(--gold-dark);
+
+  --grey-1: 1px solid var(--grey);
+  --grey-2: 2px solid var(--grey);
+  --grey-3: 3px solid var(--grey);
+  --grey-4: 4px solid var(--grey);
+  --grey-5: 5px solid var(--grey);
+
+  --grey-dark-1: 1px solid var(--grey-dark);
+  --grey-dark-2: 2px solid var(--grey-dark);
+  --grey-dark-3: 3px solid var(--grey-dark);
+  --grey-dark-4: 4px solid var(--grey-dark);
+  --grey-dark-5: 5px solid var(--grey-dark);
+
+  // SHADOWS
+  --shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
+  --shadow-inverted: 0px -5px 10px 0px rgba(0, 0, 0, 0.5);
+  --shadow-bottom: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
+  --shadow-top: 0px -5px 10px 0px rgba(0, 0, 0, 0.5);
+  --shadow-right: 5px 0px 10px 0px rgba(0, 0, 0, 0.5);
+  --shadow-left: -5px 0px 10px 0px rgba(0, 0, 0, 0.5);
 
   --abjuration-background: #cab8de;
   --abjuration-border: 0 0 0 2px #171314, 0 0 0 5px #9586a5;
@@ -45,32 +98,4 @@
     0 0 9px #69088f, 0 0 12px #3a088f, 0 0 15px #080a8f;
   --transmutation-border-large: 0 0 0 3px #171314, 0 0 4px #8f088f,
     0 0 5px #7f088f, 0 0 11px #69088f, 0 0 14px #3a088f, 0 0 17px #080a8f;
-
-  --shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
-  --shadow-inverted: 0px -5px 10px 0px rgba(0, 0, 0, 0.5);
-  --shadow-bottom: 0px 5px 10px 0px rgba(0, 0, 0, 0.5);
-  --shadow-top: 0px -5px 10px 0px rgba(0, 0, 0, 0.5);
-
-  --primary-old: #b0826b;
-  --primary: #a78032;
-  --background-color: #fff2e9;
-  --field-background-color: #efc8af;
-  --border-color: #8d8c8c;
-  --border-brown: #9b8559;
-
-  --new-tab: #b5a27d;
-  --new-tab-active: #9b8559;
-  --new-border: 1.5px solid #9b8559;
-
-  --modal-background: antiquewhite;
-  --header: #ffdec6;
-  --text: #000000;
-  --items: #fff2e9;
-  --items-hover: #f7e3d7;
-  --border: 1px solid var(--border-color);
-
-  //
-  --gold: #c1ae75;
-  --gold-active: #98895c;
-  --golder: 2px solid var(--gold);
 }

src/info-row.scss

@@ -0,0 +1,59 @@
+.responsive-small {
+  display: block;
+}
+
+.responsive-large {
+  display: none;
+}
+.responsive-large {
+  @include width-small {
+    display: block;
+  }
+}
+
+.responsive-small {
+  @include width-small {
+    display: none;
+  }
+}
+
+.info-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  border: var(--gold-2);
+  background-image: url("/assets/images/texture-0.jpg");
+  box-shadow: var(--shadow);
+  border-radius: 10px;
+  height: 6rem;
+  width: 7rem;
+
+  @include width-small {
+    width: 10rem;
+  }
+}
+
+.info-input {
+  border: none;
+  outline: none;
+  text-align: center;
+  background-color: transparent;
+  width: 5rem;
+  margin-top: 0.375rem;
+  font-size: 2rem;
+  font-weight: 600;
+}
+.info-input::-webkit-outer-spin-button,
+.info-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  appearance: none;
+  margin: 0;
+}
+
+.info-label {
+  font-size: 1.25rem;
+  font-weight: 600;
+  text-align: center;
+  padding: 0.25rem 0.5rem;
+}

src/responsive.scss

@@ -46,6 +46,7 @@
   }
 }
 
+// BLOEW ARE TESTLINES TO SIMULATE DIFFERENT SCREEN SIZES
 .h840 {
   position: absolute;
   border-top: 2px solid green;

src/styles.scss

@@ -1,7 +1,4 @@
-/* You can add global styles to this file, and also import other style files */
-
 /* Importing Bootstrap SCSS file. */
-// TODO: remove bootstrap styles
 @import "bootstrap/scss/bootstrap";
 // @import url("./helpers.scss");
 // @import url("./button-styles.scss");
@@ -12,10 +9,11 @@
 @import "colors";
 @import "responsive";
 @import "fonts";
+@import "info-row";
 
 // #region new styles
 
-// Wraps all journal components and gives general layout and styling
+// Wraps journal components that have a limited centered layout.
 .journal-content {
   position: relative;
   width: 1332px;
@@ -31,8 +29,6 @@
   align-items: center;
 
   h1 {
-    // color: #58180d;
-    // font-family: "Bookinsanity", serif;
     font-size: 3.5rem;
     font-weight: 500;
     margin-bottom: 0;
@@ -52,12 +48,28 @@
     gap: 0.5rem;
     border-radius: 10px;
     padding: 0.5rem 1rem;
-    background-image: url("/assets/images/texture.png");
+    background-image: url("/assets/images/texture-0.jpg");
     border: none;
     box-shadow: var(--shadow);
   }
 }
 
+.character-container {
+  position: absolute;
+  top: 8.5rem;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 800px;
+  height: calc(100vh - 10.5rem);
+  margin: auto;
+  padding: 2rem 2rem;
+  overflow: auto;
+  border-radius: 10px;
+  border: var(--gold-3);
+  background-image: url("/assets/images/texture-0.jpg");
+  box-shadow: var(--shadow);
+}
+
 // #endregion
 
 //////////////////
@@ -75,16 +87,10 @@
   border-radius: 10px;
   box-shadow: var(--shadow);
   cursor: pointer;
-  transition: background-color 0.2s ease-in-out;
-  // border: var(--border);
-  // background-color: var(--items);
-  // &:hover {
-  //   background-color: var(--items-hover);
-  // }
-  border: var(--golder);
-  background-image: url("/assets/images/texture-15.jpg");
+  border: var(--gold-2);
+  background-image: url("/assets/images/texture-5.jpg");
   &:hover {
-    background-image: url("/assets/images/texture-40.jpg");
+    background-image: url("/assets/images/texture-15.jpg");
   }
 }
 
@@ -134,18 +140,20 @@
 //  Checkbox
 
 input[type="checkbox"] {
-  accent-color: var(--accept) !important;
+  accent-color: var(--gold) !important;
+  height: 1.25rem;
+  width: 1.25rem;
 }
 
 // Scrollbar
 ::-webkit-scrollbar {
-  width: 0.5rem;
+  width: 0.375rem;
   margin: 0.125rem 0;
   height: 0.5rem;
 }
 
 ::-webkit-scrollbar-track {
-  background: #f1f1f1;
+  background: #e6e6e6;
   border-radius: 10px;
 }
 
@@ -173,85 +181,15 @@ input[type="checkbox"] {
   align-items: center;
 }
 
-// TODO: Check which of the below are still used
-
-//  Info Row
-
-.info-container {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-  border: var(--golder);
-  background-image: url("/assets/images/texture.png");
-  box-shadow: var(--shadow);
-  border-radius: 10px;
-  height: 6rem;
-  width: 7rem;
-
-  @include width-small {
-    width: 10rem;
-  }
-}
-// // Responsive styles
-.responsive-small {
-  display: block;
-}
-
-.responsive-large {
-  display: none;
-}
-.responsive-large {
-  @include width-small {
-    display: block;
-  }
-}
-
-.responsive-small {
-  @include width-small {
-    display: none;
-  }
-}
-
-.info-input {
-  border: none;
-  outline: none;
-  text-align: center;
-  background-color: transparent;
-  width: 5rem;
-  margin-top: 0.375rem;
-  font-size: 2rem;
-  font-weight: 600;
-}
-.info-input::-webkit-outer-spin-button,
-.info-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  appearance: none;
-  margin: 0;
-}
-
-.info-label {
-  font-size: 1.25rem;
-  font-weight: 600;
-  text-align: center;
-  padding: 0.25rem 0.5rem;
-}
-
-input[type="checkbox"] {
-  height: 1.25rem;
-  width: 1.25rem;
-}
-
 // DETAILS + MODAL
 
 .dimensions {
   width: 50rem;
-  background-color: var(--modal-background);
   border-radius: 10px;
-  border: 1px solid var(--border-color);
+  border: var(--gold-3);
   padding: 0 2rem;
   box-shadow: var(--shadow);
-  background-image: url("/assets/images/background.jpg");
+  background-image: url("/assets/images/texture-0.jpg");
 }
 
 .title {
@@ -301,7 +239,7 @@ input[type="checkbox"] {
   flex-direction: column;
   gap: 1.5rem;
 
-  .flex-row {
+  .row {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -334,16 +272,6 @@ body {
   font-family: var(--bs-body-font-family) !important;
 }
 
-.flex-row {
-  display: flex;
-  flex-direction: row;
-}
-
-.flex-column {
-  display: flex;
-  flex-direction: column;
-}
-
 // Overriding the default styles of angular material
 
 .mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled)
@@ -366,6 +294,15 @@ body {
   border-color: var(--primary) !important;
 }
 
+.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field
+  .mdc-notched-outline__leading,
+.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field
+  .mdc-notched-outline__notch,
+.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field
+  .mdc-notched-outline__trailing {
+  border-color: var(--primary) !important;
+}
+
 .mdc-text-field--outlined:not(.mdc-text-field--disabled)
   .mdc-text-field__input {
   caret-color: var(--primary) !important;