diff --git a/public/css/building.css b/public/css/building.css index 228b225..a85fcc7 100644 --- a/public/css/building.css +++ b/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; } diff --git a/public/css/launcher.css b/public/css/launcher.css index cdc1b3f..bc0379c 100644 --- a/public/css/launcher.css +++ b/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;