Minor changes and optical unification

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

@@ -1,11 +1,17 @@
 .class-container {
     width: 800px;
-    height: calc(100% - 2rem);
+    height: calc(100vh - 10.5rem);
     overflow: auto;
     margin: auto;
     border: 1px solid black;
     padding: 2rem;
     border-radius: 10px;
+    background-color: var(--items-hover);
+    box-shadow: var(--shadow-large);
+    position: absolute;
+    top: 8.5rem;
+    left: 50%;
+    transform: translateX(-50%);
 }
 
 .title {

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

@@ -17,6 +17,7 @@
     border: 1px solid var(--border-color);
     border-radius: 10px;
     box-shadow: var(--shadow);
+    background-color: white;
     border-radius: 10px;
     overflow: hidden;
 

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

@@ -43,13 +43,24 @@
         </ng-template>
       </ng-container>
       <ng-container ngbNavItem="subclass">
+        @if(data.level >= 3 || data.class === "Cleric"){
         <button ngbNavLink>Unterklasse</button>
         <ng-template ngbNavContent>
           <subclass></subclass>
         </ng-template>
+        }@else{
+        <button class="disabled-button" disabled>
+          <img
+            style="display: inline"
+            src="assets/icons/UIIcons/lock.svg"
+            alt="locked"
+          />
+          Unterklasse
+        </button>
+        }
       </ng-container>
       <ng-container ngbNavItem="combined">
-        <button ngbNavLink>Kombinierte Ansicht</button>
+        <button ngbNavLink>Tabellen- ansicht</button>
         <ng-template ngbNavContent>
           <!-- <class></class> -->
           combined works!

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

@@ -74,6 +74,14 @@
                 box-shadow: var(--shadow);
             }
         }
+
+        .disabled-button {
+            border: none;
+            font-size: 1.25rem;
+            font-weight: 600;
+            color: black;
+            cursor: not-allowed;
+        }
     }
 
     .outlet {

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

@@ -1,11 +1,17 @@
 .species-container {
     width: 800px;
-    height: calc(100% - 2rem);
+    height: calc(100vh - 10.5rem);
     overflow: auto;
     margin: auto;
     border: 1px solid black;
     padding: 2rem;
     border-radius: 10px;
+    background-color: var(--items-hover);
+    box-shadow: var(--shadow-large);
+    position: absolute;
+    top: 8.5rem;
+    left: 50%;
+    transform: translateX(-50%);
 }
 
 .title {

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

@@ -1,11 +1,17 @@
 .subclass-container {
     width: 800px;
-    height: calc(100% - 2rem);
+    height: calc(100vh - 10.5rem);
     overflow: auto;
     margin: auto;
     border: 1px solid black;
     padding: 2rem;
     border-radius: 10px;
+    background-color: var(--items-hover);
+    box-shadow: var(--shadow-large);
+    position: absolute;
+    top: 8.5rem;
+    left: 50%;
+    transform: translateX(-50%);
 }
 
 .title {

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

@@ -9,7 +9,7 @@
         (click)="setActiveProperty(1)"
         [routerLink]="'./stats'"
       >
-        Kampf
+        Übersicht
       </div>
     </li>
     <li>

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

@@ -5,7 +5,6 @@
 .slots-container {
     height: calc(100% - 5rem);
     overflow: auto;
-    padding-top: 0.5rem;
     position: relative;
 }
 

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

@@ -60,7 +60,7 @@
     <div
       style="
         text-align: center;
-        margin-top: 2rem;
+        margin-top: 3rem;
         font-size: 1.25rem;
         font-weight: 500;
       "

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

@@ -89,6 +89,8 @@
   bottom: 1rem;
   right: 10%;
   width: 80%;
+  font-size: 1.25rem;
+  font-weight: 600;
   border-radius: 10px;
   background: var(--accept);
   transition: width 0.25s ease-in-out;
@@ -122,9 +124,14 @@
   right: 10%;
   width: 80%;
   border-radius: 10px;
+  padding-left: 0.875rem;
   box-shadow: var(--shadow);
 }
 
+.hidden {
+  box-shadow: none;
+}
+
 //// Drag and Drop
 
 .cdk-drag-preview {

src/assets/icons/UIIcons/lock.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M240-80q-33 0-56.5-23.5T160-160v-400q0-33 23.5-56.5T240-640h40v-80q0-83 58.5-141.5T480-920q83 0 141.5 58.5T680-720v80h40q33 0 56.5 23.5T800-560v400q0 33-23.5 56.5T720-80H240Zm0-80h480v-400H240v400Zm240-120q33 0 56.5-23.5T560-360q0-33-23.5-56.5T480-440q-33 0-56.5 23.5T400-360q0 33 23.5 56.5T480-280ZM360-640h240v-80q0-50-35-85t-85-35q-50 0-85 35t-35 85v80ZM240-160v-400 400Z"/></svg>

src/styles.scss

@@ -49,9 +49,10 @@
     --edit: #86a5b7;
     --edit-hover: #6f8e9f;
     --neutral: #b9835d;
-    --neutral-hover: #a46e4a;
-    --tab: #efc8af;
-    --tab-active: #e0ad91;
+    --neutral-hover: #a76b43;
+    --tab: #c79980;
+    --tab-active: #bc8567;
+    // c28c6f
 
     // Spellcards