continued restyling the whole application

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-0.jpg");
-  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-0.jpg");
-  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-0.jpg");
-  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;
@@ -91,7 +117,7 @@
       height: 1.75rem;
       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;
     }

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>

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-0.jpg");
-  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-0.jpg");
-  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-0.jpg");
-  box-shadow: var(--shadow);
-}
-
 .title {
   text-align: center;
   font-size: 2em;

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-0.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-0.jpg");
+  border: var(--gold-3);
+  background-image: url("/assets/images/texture-30.jpg");
   box-shadow: var(--shadow);
   border-radius: 10px;
-  transition: transform 0.2s ease-in-out;
   cursor: pointer;
-
   &:hover {
-    filter: brightness(0.9);
+    background-image: url("/assets/images/texture-20.jpg");
   }
   &.active {
-    filter: brightness(0.8);
+    background-image: url("/assets/images/texture-0.jpg");
   }
 }
 
@@ -79,15 +77,14 @@ ul {
   font-weight: 500;
   padding: 0.5rem;
   border: solid 1px var(--border-color);
-  background-image: url("/assets/images/texture-0.jpg");
   box-shadow: var(--shadow);
   border-radius: 10px;
-  transition: transform 0.2s ease-in-out;
-
+  border: var(--gold-3);
+  background-image: url("/assets/images/texture-30.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-0.jpg");
   }
 }

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

@@ -44,7 +44,7 @@
   flex-direction: column;
   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;
@@ -82,7 +82,7 @@
     border-radius: 10px;
     box-shadow: var(--shadow);
     transition: all 0.2 ease-in-out;
-    border: var(--golder);
+    border: var(--gold-2);
     background-image: url("/assets/images/texture-15.jpg");
     &:hover {
       background-image: url("/assets/images/texture-40.jpg");
@@ -109,7 +109,7 @@
   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-0.jpg");
@@ -147,7 +147,7 @@
     border-radius: 10px;
     box-shadow: var(--shadow);
     transition: all 0.2s ease-in-out;
-    border: var(--golder);
+    border: var(--gold-2);
     background-image: url("/assets/images/texture-15.jpg");
     &:hover {
       background-image: url("/assets/images/texture-40.jpg");
@@ -174,7 +174,7 @@
   // background-color: var(--field-background-color);
   background-image: url("/assets/images/texture-0.jpg");
   box-shadow: var(--shadow);
-  border: var(--golder);
+  border: var(--gold-2);
 
   .money-box {
     width: 6rem;
@@ -189,7 +189,7 @@
     border-radius: 10px;
     background-image: url("/assets/images/texture-15.jpg");
     box-shadow: var(--shadow);
-    border: var(--golder);
+    border: var(--gold-2);
   }
 
   .money-icon {
@@ -226,7 +226,7 @@
   justify-content: center;
   gap: 2rem;
   position: relative;
-  border: var(--golder);
+  border: var(--gold-2);
   border-radius: 10px;
   background-image: url("/assets/images/texture-0.jpg");
   box-shadow: var(--shadow);
@@ -240,7 +240,7 @@
     align-items: center;
     border-radius: 10px;
     background-image: url("/assets/images/texture-15.jpg");
-    border: var(--golder);
+    border: var(--gold-2);
     box-shadow: var(--shadow);
   }
 }

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

@@ -1,5 +1,5 @@
 .ability-panel-container {
-  border: var(--golder);
+  border: var(--gold-2);
   background-image: url("/assets/images/texture-0.jpg");
   box-shadow: var(--shadow);
   border-radius: 10px;

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

@@ -7,6 +7,8 @@
     }
   </div>
 
+  <divider [appearance]="'gold-1'" style="margin-top: 1rem"></divider>
+
   <div class="flex-form t-15">
     <div>
       <div class="input-label">{{ "modal.name" | translate }}</div>
@@ -87,19 +89,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

@@ -18,12 +18,9 @@
           <div class="cost">{{ "time." + ability.cost | translate }}</div>
         </div>
 
-        <!-- <divider></divider> -->
-
         <p [innerHTML]="ability.shortDescription"></p>
 
         @if (ability.charges != 0) {
-          <!-- <divider class="b-1"></divider> -->
           <div class="charges-box t-05">
             {{ "abilities.uses" | translate }}
             @if (ability.charges > 9) {
@@ -69,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

@@ -15,7 +15,7 @@
   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 {
@@ -71,10 +71,10 @@ 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;
+  // background-image: url("/assets/images/texture-15.jpg");
   display: flex;
   justify-content: center;
   align-items: center;

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

@@ -6,6 +6,7 @@
       {{ "traits.modal.addTrait" | translate }}
     }
   </div>
+  <divider [appearance]="'gold-1'" style="margin-top: 1rem"></divider>
   <div class="flex-form t-15">
     <div>
       <div class="input-label">{{ "modal.name" | translate }}</div>
@@ -51,19 +52,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-field.component.scss

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

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

@@ -1,6 +1,6 @@
 .condition-container {
   display: flex;
-  border: var(--golder);
+  border: var(--gold-2);
   background-image: url("/assets/images/texture-0.jpg");
   box-shadow: var(--shadow);
   border-radius: 10px;
@@ -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/life.component.scss

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

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

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

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

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

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

@@ -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-modal/weapon-modal.component.html

@@ -12,7 +12,7 @@
     <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="checkbox-column">
@@ -74,7 +74,10 @@
       </div>
     </div>
 
-    <hr />
+    <divider
+      [appearance]="'gold-1'"
+      style="display: block; margin: 1rem 0"
+    ></divider>
 
     <!-- TAB-PANEL -->
     <div class="d-flex">
@@ -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

@@ -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

@@ -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,5 +1,5 @@
 .weapon-spell-container {
-  border: var(--golder);
+  border: var(--gold-2);
   background-image: url("/assets/images/texture-0.jpg");
   box-shadow: var(--shadow);
   border-radius: 10px;

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",

src/assets/i18n/en.json

@@ -73,6 +73,7 @@
     "deleteSelected": "Delete Selected"
   },
   "time": {
+    "none": "No cost",
     "action": "Action",
     "bonus": "Bonus Action",
     "reaction": "Reaction",

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

@@ -50,27 +50,58 @@
   --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);
 
   --primary-old: #b0826b;
-  --primary: #a78032;
+  --primary: #c1ae75;
+  --border-color: #8d8c8c;
+
+  // Deprecated
   --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-dark: #c0a042;
   --gold-active: #98895c;
-  --golder: 2px solid var(--gold);
+
+  --grey: #8d8c8c;
+  --grey-dark: #6e6d6d;
+
+  // BORDERS
+
+  --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);
 }

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");
@@ -31,8 +28,6 @@
   align-items: center;
 
   h1 {
-    // color: #58180d;
-    // font-family: "Bookinsanity", serif;
     font-size: 3.5rem;
     font-weight: 500;
     margin-bottom: 0;
@@ -58,6 +53,22 @@
   }
 }
 
+.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
 
 //////////////////
@@ -76,15 +87,10 @@
   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");
   }
 }
 
@@ -182,7 +188,7 @@ input[type="checkbox"] {
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
-  border: var(--golder);
+  border: var(--gold-2);
   background-image: url("/assets/images/texture-0.jpg");
   box-shadow: var(--shadow);
   border-radius: 10px;
@@ -246,10 +252,8 @@ input[type="checkbox"] {
 
 .dimensions {
   width: 50rem;
-  // background-color: var(--modal-background);
   border-radius: 10px;
-  // border: 1px solid var(--border-color);
-  border: var(--golder);
+  border: var(--gold-3);
   padding: 0 2rem;
   box-shadow: var(--shadow);
   background-image: url("/assets/images/texture-0.jpg");
@@ -367,6 +371,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;