cay/dok
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rstz

Browse Source
This commit is contained in:
Cay 2026-03-12 15:20:35 +00:00
parent 6651912124
commit a0db933e51
1 changed files with 67 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
public/css/building.css
View File

@ -1,52 +1,28 @@
body { body {
margin: 0; margin: 0;
height: 100vh; height: 100vh;
justify-content: center; font-family: "Cinzel", serif;
align-items: center; color: #2b1b0f;
font-family: sans-serif;
color: white;
} }
.building h1 { /* Progress Bar */
margin-top: 0;
}
.back {
display: inline-block;
margin-top: 20px;
padding: 12px 20px;
background: #2c6cff;
color: white;
text-decoration: none;
border-radius: 6px;
transition: 0.2s;
}
.back:hover {
background: #4a85ff;
}
.progress-bar { .progress-bar {
width: 100%; width: 100%;
height: 10px; height: 12px;
background: #2a1a0b; background: #2a1a0b;
border: 1px solid #8b6a3c; border: 1px solid #8b6a3c;
margin-top: 8px;
margin-top: 6px;
} }
.progress-fill { .progress-fill {
height: 100%; height: 100%;
background: linear-gradient(#3cff3c, #1ea01e); background: linear-gradient(#3cff3c, #1ea01e);
box-shadow: 0 0 6px #3cff3c; box-shadow: 0 0 6px #3cff3c;
} }
/* Popup */
.building-popup { .building-popup {
position: fixed; position: fixed;
@ -55,28 +31,32 @@ body {
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: 420px; width: 460px;
background: url("/images/parchment.png") center/cover no-repeat; background: url("/images/parchment.png") center/cover no-repeat;
border: 4px solid #6b4b2a; border: 4px solid #6b4b2a;
border-radius: 8px; border-radius: 10px;
box-shadow: box-shadow:
0 0 40px rgba(0, 0, 0, 0.9), 0 0 40px rgba(0, 0, 0, 0.9),
inset 0 0 20px rgba(0, 0, 0, 0.6); inset 0 0 25px rgba(0, 0, 0, 0.5);
display: none; display: none;
color: #2b1b0f;
z-index: 1000; z-index: 1000;
} }
/* Header */
.popup-header { .popup-header {
padding: 12px; padding: 14px;
font-family: "Tangerine", serif; font-family: "Tangerine", serif;
font-size: 34px;
background: linear-gradient(#6b4b2a, #3c2414); background: linear-gradient(#6b4b2a, #3c2414);
border-bottom: 2px solid #8b6a3c; border-bottom: 2px solid #8b6a3c;
@ -85,14 +65,17 @@ body {
justify-content: space-between; justify-content: space-between;
font-weight: bold;
color: #f0d9a6; color: #f0d9a6;
font-size: 28px;
text-shadow: 0 0 4px black; text-shadow: 0 2px 4px black;
} }
.popup-header span {
cursor: pointer;
}
/* Tabs */
.popup-tabs { .popup-tabs {
display: flex; display: flex;
@ -101,9 +84,13 @@ body {
.popup-tabs button { .popup-tabs button {
flex: 1; flex: 1;
font-weight: bold;
padding: 10px; padding: 10px;
font-family: "Cinzel", serif;
font-weight: bold;
background: linear-gradient(#5c3b20, #3a2513); background: linear-gradient(#5c3b20, #3a2513);
border: 1px solid #8b6a3c; border: 1px solid #8b6a3c;
@ -125,13 +112,24 @@ body {
color: #2b1b0f; color: #2b1b0f;
} }
/* Content */
.popup-content { .popup-content {
padding: 15px; padding: 20px;
font-family: "Cinzel", serif; font-family: "Cinzel", serif;
font-size: 18px;
line-height: 1.4; font-size: 20px;
line-height: 1.6;
background: rgba(255, 255, 255, 0.08);
border-radius: 6px;
} }
/* Tabs Content */
.tab-content { .tab-content {
display: none; display: none;
} }
@ -140,29 +138,23 @@ body {
display: block; display: block;
} }
@keyframes popupFade { /* Buttons */
from {
opacity: 0;
transform: translate(-50%, -40%);
}
to {
opacity: 1;
transform: translate(-50%, -50%);
}
}
.popup-content button { .popup-content button {
margin-top: 10px;
background: linear-gradient(#7a5a2a, #caa24b); background: linear-gradient(#7a5a2a, #caa24b);
border: 1px solid #e0c67b; border: 1px solid #e0c67b;
padding: 8px 14px; padding: 10px 18px;
color: #1a1206; color: #1a1206;
font-weight: bold; font-weight: bold;
font-family: "Cinzel", serif;
cursor: pointer; cursor: pointer;
transition: 0.2s; transition: 0.2s;
@ -176,11 +168,26 @@ body {
0 0 25px #caa24b; 0 0 25px #caa24b;
} }
.popup-header span { /* Animation */
cursor: pointer;
@keyframes popupFade {
from {
opacity: 0;
transform: translate(-50%, -40%);
}
to {
opacity: 1;
transform: translate(-50%, -50%);
}
} }
.building-popup {
animation: popupFade 0.25s ease;
}
/* Title */
#popup-title { #popup-title {
font-weight: bold; font-weight: bold;
font-size: 30px;
} }