rtjuh

public/css/building.css

@@ -56,5 +56,134 @@ body {
 
 .progress-fill {
   height: 100%;
-  background: #3cff3c;
+
+  background: linear-gradient(#3cff3c, #1ea01e);
+
+  box-shadow: 0 0 6px #3cff3c;
+}
+
+.building-popup {
+  position: fixed;
+
+  transform: translate(-50%, -50%);
+
+  width: 420px;
+
+  background: url("/images/ui/parchment.png") center/cover no-repeat;
+
+  border: 4px solid #6b4b2a;
+
+  border-radius: 8px;
+
+  box-shadow:
+    0 0 40px rgba(0, 0, 0, 0.9),
+    inset 0 0 20px rgba(0, 0, 0, 0.6);
+
+  display: none;
+
+  color: #2b1b0f;
+
+  z-index: 1000;
+}
+
+.popup-header {
+  padding: 12px;
+
+  background: linear-gradient(#6b4b2a, #3c2414);
+
+  border-bottom: 2px solid #8b6a3c;
+
+  display: flex;
+
+  justify-content: space-between;
+
+  font-weight: bold;
+
+  color: #f0d9a6;
+
+  text-shadow: 0 0 4px black;
+}
+
+.popup-tabs {
+  display: flex;
+
+  border-bottom: 2px solid #8b6a3c;
+}
+
+.popup-tabs button {
+  flex: 1;
+
+  padding: 10px;
+
+  background: linear-gradient(#5c3b20, #3a2513);
+
+  border: 1px solid #8b6a3c;
+
+  color: #e7d9b4;
+
+  cursor: pointer;
+
+  transition: 0.2s;
+}
+
+.popup-tabs button:hover {
+  background: linear-gradient(#8b6a3c, #5c3b20);
+}
+
+.popup-tabs button.active {
+  background: linear-gradient(#d4b97a, #9c7a3a);
+
+  color: #2b1b0f;
+}
+
+.popup-content {
+  padding: 15px;
+}
+
+.tab-content {
+  display: none;
+}
+
+.tab-content.active {
+  display: block;
+}
+
+.building-popup {
+  animation: popupFade 0.25s ease;
+}
+
+@keyframes popupFade {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -40%);
+  }
+
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%);
+  }
+}
+
+.popup-content button {
+  background: linear-gradient(#7a5a2a, #caa24b);
+
+  border: 1px solid #e0c67b;
+
+  padding: 8px 14px;
+
+  color: #1a1206;
+
+  font-weight: bold;
+
+  cursor: pointer;
+
+  transition: 0.2s;
+}
+
+.popup-content button:hover {
+  transform: scale(1.05);
+
+  box-shadow:
+    0 0 10px #ffd66b,
+    0 0 25px #caa24b;
 }

public/css/launcher.css

@@ -32,80 +32,6 @@
   filter: drop-shadow(0 0 14px #6ec6ff);
 }
 
-.building-popup {
-  position: fixed;
-
-  transform: translate(-50%, -50%);
-
-  width: 420px;
-
-  background: linear-gradient(#2b2115, #1b140b);
-
-  border: 3px solid #8b6a3c;
-
-  border-radius: 10px;
-
-  box-shadow: 0 0 30px rgba(0, 0, 0, 0.8);
-
-  display: none;
-
-  color: #f3e6c5;
-
-  font-family: serif;
-
-  z-index: 1000;
-}
-
-.popup-header {
-  padding: 12px;
-
-  background: #3a2a17;
-
-  border-bottom: 2px solid #8b6a3c;
-
-  display: flex;
-
-  justify-content: space-between;
-
-  font-weight: bold;
-}
-
-.popup-tabs {
-  display: flex;
-
-  border-bottom: 2px solid #8b6a3c;
-}
-
-.popup-tabs button {
-  flex: 1;
-
-  padding: 10px;
-
-  background: transparent;
-
-  border: none;
-
-  color: #f3e6c5;
-
-  cursor: pointer;
-}
-
-.popup-tabs button.active {
-  background: #5b4325;
-}
-
-.popup-content {
-  padding: 15px;
-}
-
-.tab-content {
-  display: none;
-}
-
-.tab-content.active {
-  display: block;
-}
-
 #game-chat {
   position: fixed;