pop20

public/css/building.css

@@ -213,15 +213,15 @@ body {
 
 .character {
   position: absolute;
-  top: 90px;
+  top: 70px;
   left: 50%;
   transform: translateX(-50%);
 }
 
 #character-ui {
   position: relative;
-  width: 500px;
-  height: 420px;
+  width: 600px;
+  height: 500px;
   margin: auto;
 }
 
@@ -233,7 +233,7 @@ body {
 }
 
 .character img {
-  height: 260px;
+  height: 340px;
   object-fit: contain;
   filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.6));
 }
@@ -263,13 +263,19 @@ body {
   font-size: 12px;
   color: #3a2413;
   font-weight: bold;
+  pointer-events: none;
 }
 
 /* Slot Basis */
 
+/* SLOT BASIS */
+
+.slot:hover {
+  filter: brightness(1.3);
+}
+
 .slot {
   position: absolute;
-
   width: 70px;
   height: 70px;
 
@@ -281,54 +287,72 @@ body {
   justify-content: center;
 }
 
-/* Slot Positionen */
+/* HELM */
 
 .helmet {
-  top: 0;
+  top: 10px;
   left: 50%;
   transform: translateX(-50%);
 }
 
-.shoulder {
-  top: 60px;
-  left: 0;
-}
+/* AMULET */
 
 .amulet {
-  top: 60px;
-  right: 0;
+  top: 80px;
+  left: 50%;
+  transform: translateX(-50%);
 }
 
-.gloves {
-  top: 150px;
-  left: 0;
+/* SCHULTER */
+
+.shoulder {
+  top: 110px;
+  left: 80px;
 }
 
+/* WAFFE */
+
 .weapon {
-  top: 150px;
-  right: 0;
+  top: 170px;
+  right: 70px;
 }
 
-.belt {
-  top: 230px;
-  left: 0;
+/* HANDSCHUHE */
+
+.gloves {
+  top: 200px;
+  left: 70px;
 }
 
+/* SCHILD */
+
 .shield {
-  top: 230px;
-  right: 0;
+  top: 240px;
+  right: 70px;
 }
 
+/* GÜRTEL */
+
+.belt {
+  top: 270px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+/* RINGE */
+
 .ring1 {
-  top: 310px;
-  left: 0;
+  top: 330px;
+  left: 80px;
 }
 
 .ring2 {
-  top: 310px;
-  right: 0;
+  top: 330px;
+  right: 80px;
 }
 
+/* STIEFEL */
+
 .boots {
   bottom: 0;
   left: 50%;