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

dahfaer

Browse Source
This commit is contained in:
cay 2026-03-30 16:01:42 +01:00
parent 38d47e1817
commit 43d31bfa10
1 changed files with 125 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

202
public/css/popup.css
View File

@ -17,8 +17,8 @@
0deg, 0deg,
transparent, transparent,
transparent 2px, transparent 2px,
rgba(255,255,255,0.012) 2px, rgba(255, 255, 255, 0.012) 2px,
rgba(255,255,255,0.012) 4px rgba(255, 255, 255, 0.012) 4px
), ),
linear-gradient(160deg, #2e1c07 0%, #1a0e04 40%, #221508 100%); linear-gradient(160deg, #2e1c07 0%, #1a0e04 40%, #221508 100%);
border: 2px solid #9a7a28; border: 2px solid #9a7a28;
@ -28,10 +28,10 @@
z-index: 1000; z-index: 1000;
overflow: visible; overflow: visible;
box-shadow: box-shadow:
0 0 0 1px rgba(200,168,64,0.3), 0 0 0 1px rgba(200, 168, 64, 0.3),
0 0 40px rgba(200,150,12,0.1), 0 0 40px rgba(200, 150, 12, 0.1),
0 30px 80px rgba(0,0,0,0.6), 0 30px 80px rgba(0, 0, 0, 0.6),
inset 0 0 60px rgba(0,0,0,0.27); inset 0 0 60px rgba(0, 0, 0, 0.27);
} }
.building-popup.active { .building-popup.active {
@ -50,10 +50,25 @@
pointer-events: none; pointer-events: none;
} }
.popup-corner.c-tl { top: -4px; left: -4px; } .popup-corner.c-tl {
.popup-corner.c-tr { top: -4px; right: -4px; transform: scaleX(-1); } top: -4px;
.popup-corner.c-bl { bottom: -4px; left: -4px; transform: scaleY(-1); } left: -4px;
.popup-corner.c-br { bottom: -4px; right: -4px; transform: scale(-1); } }
.popup-corner.c-tr {
top: -4px;
right: -4px;
transform: scaleX(-1);
}
.popup-corner.c-bl {
bottom: -4px;
left: -4px;
transform: scaleY(-1);
}
.popup-corner.c-br {
bottom: -4px;
right: -4px;
transform: scale(-1);
}
/* ================================ /* ================================
HEADER HEADER
@ -79,7 +94,7 @@
} }
.popup-header::after { .popup-header::after {
content: ''; content: "";
position: absolute; position: absolute;
bottom: -5px; bottom: -5px;
left: 5%; left: 5%;
@ -88,9 +103,9 @@
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
transparent, transparent,
rgba(200,150,12,0.67), rgba(200, 150, 12, 0.67),
rgba(240,208,96,0.6), rgba(240, 208, 96, 0.6),
rgba(200,150,12,0.67), rgba(200, 150, 12, 0.67),
transparent transparent
); );
filter: blur(1px); filter: blur(1px);
@ -108,17 +123,19 @@
height: 11px; height: 11px;
border-radius: 50%; border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #f0d080, #c8960c, #7a4a00); background: radial-gradient(circle at 35% 35%, #f0d080, #c8960c, #7a4a00);
box-shadow: 0 0 8px rgba(200,150,12,0.53); box-shadow: 0 0 8px rgba(200, 150, 12, 0.53);
flex-shrink: 0; flex-shrink: 0;
} }
#popup-title { #popup-title {
font-family: 'Cinzel Decorative', 'Palatino Linotype', serif; font-family: "Cinzel Decorative", "Palatino Linotype", serif;
font-size: 13px; font-size: 13px;
font-weight: 700; font-weight: 700;
color: #f5e090; color: #f5e090;
letter-spacing: 3px; letter-spacing: 3px;
text-shadow: 0 0 20px rgba(200,150,12,0.53), 0 1px 3px rgba(0,0,0,0.6); text-shadow:
0 0 20px rgba(200, 150, 12, 0.53),
0 1px 3px rgba(0, 0, 0, 0.6);
text-transform: uppercase; text-transform: uppercase;
} }
@ -135,7 +152,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: all 0.2s; transition: all 0.2s;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.094); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.094);
user-select: none; user-select: none;
} }
@ -143,7 +160,7 @@
background: radial-gradient(circle at 40% 35%, #8a2010, #4a1008); background: radial-gradient(circle at 40% 35%, #8a2010, #4a1008);
border-color: #e04020; border-color: #e04020;
color: #ff9080; color: #ff9080;
box-shadow: 0 0 10px rgba(200,64,32,0.27); box-shadow: 0 0 10px rgba(200, 64, 32, 0.27);
} }
/* ================================ /* ================================
@ -169,8 +186,8 @@
90deg, 90deg,
transparent, transparent,
transparent 1px, transparent 1px,
rgba(255,255,255,0.008) 1px, rgba(255, 255, 255, 0.008) 1px,
rgba(255,255,255,0.008) 2px rgba(255, 255, 255, 0.008) 2px
), ),
linear-gradient(180deg, #1a0e04 0%, #120a03 100%); linear-gradient(180deg, #1a0e04 0%, #120a03 100%);
border-right: 2px solid #7a5a18; border-right: 2px solid #7a5a18;
@ -184,7 +201,7 @@
} }
.popup-tabs::after { .popup-tabs::after {
content: ''; content: "";
position: absolute; position: absolute;
right: -4px; right: -4px;
top: 8%; top: 8%;
@ -193,9 +210,9 @@
background: linear-gradient( background: linear-gradient(
180deg, 180deg,
transparent, transparent,
rgba(200,150,12,0.33), rgba(200, 150, 12, 0.33),
rgba(240,208,96,0.2), rgba(240, 208, 96, 0.2),
rgba(200,150,12,0.33), rgba(200, 150, 12, 0.33),
transparent transparent
); );
filter: blur(1px); filter: blur(1px);
@ -219,8 +236,8 @@
position: relative; position: relative;
transition: all 0.2s; transition: all 0.2s;
box-shadow: box-shadow:
inset 0 1px 0 rgba(255,255,255,0.031), inset 0 1px 0 rgba(255, 255, 255, 0.031),
inset 0 -1px 0 rgba(0,0,0,0.2); inset 0 -1px 0 rgba(0, 0, 0, 0.2);
padding: 0; padding: 0;
outline: none; outline: none;
} }
@ -229,23 +246,23 @@
border-color: #c8960c; border-color: #c8960c;
background: linear-gradient(145deg, #3e2c10 0%, #2a1a08 100%); background: linear-gradient(145deg, #3e2c10 0%, #2a1a08 100%);
box-shadow: box-shadow:
inset 0 1px 0 rgba(200,150,12,0.125), inset 0 1px 0 rgba(200, 150, 12, 0.125),
0 0 14px rgba(200,150,12,0.133), 0 0 14px rgba(200, 150, 12, 0.133),
0 0 0 1px rgba(200,150,12,0.267); 0 0 0 1px rgba(200, 150, 12, 0.267);
} }
.popup-tabs .tab.active { .popup-tabs .tab.active {
border-color: #c8960c; border-color: #c8960c;
background: linear-gradient(145deg, #5a3a14 0%, #3a2208 100%); background: linear-gradient(145deg, #5a3a14 0%, #3a2208 100%);
box-shadow: box-shadow:
inset 0 1px 0 rgba(200,150,12,0.25), inset 0 1px 0 rgba(200, 150, 12, 0.25),
0 0 18px rgba(200,150,12,0.2), 0 0 18px rgba(200, 150, 12, 0.2),
0 0 0 1px rgba(200,150,12,0.4); 0 0 0 1px rgba(200, 150, 12, 0.4);
} }
/* Aktiver Tab: goldener Balken rechts */ /* Aktiver Tab: goldener Balken rechts */
.popup-tabs .tab.active::after { .popup-tabs .tab.active::after {
content: ''; content: "";
position: absolute; position: absolute;
right: -3px; right: -3px;
top: 20%; top: 20%;
@ -263,11 +280,19 @@
display: none; display: none;
} }
.tab-icon-default { display: block; } .tab-icon-default {
.tab-icon-active { display: none; } display: block;
}
.tab-icon-active {
display: none;
}
.tab.active .tab-icon-default { display: none; } .tab.active .tab-icon-default {
.tab.active .tab-icon-active { display: block; } display: none;
}
.tab.active .tab-icon-active {
display: block;
}
/* Tooltip */ /* Tooltip */
.tab-tip { .tab-tip {
@ -279,7 +304,7 @@
border: 1px solid #9a7a28; border: 1px solid #9a7a28;
color: #f0d080; color: #f0d080;
font-size: 11px; font-size: 11px;
font-family: 'Cinzel', 'Palatino Linotype', serif; font-family: "Cinzel", "Palatino Linotype", serif;
letter-spacing: 1px; letter-spacing: 1px;
padding: 5px 10px; padding: 5px 10px;
border-radius: 4px; border-radius: 4px;
@ -288,11 +313,13 @@
opacity: 0; opacity: 0;
transition: opacity 0.15s; transition: opacity 0.15s;
z-index: 20; z-index: 20;
box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 0 0 1px rgba(200,150,12,0.2); box-shadow:
0 4px 12px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(200, 150, 12, 0.2);
} }
.tab-tip::before { .tab-tip::before {
content: ''; content: "";
position: absolute; position: absolute;
left: -5px; left: -5px;
top: 50%; top: 50%;
@ -342,8 +369,14 @@
} }
@keyframes popupFadeIn { @keyframes popupFadeIn {
from { opacity: 0; transform: translateY(4px); } from {
to { opacity: 1; transform: none; } opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: none;
}
} }
/* ================================ /* ================================
@ -351,20 +384,20 @@
================================ */ ================================ */
.popup-info-title { .popup-info-title {
font-family: 'Cinzel', 'Palatino Linotype', serif; font-family: "Cinzel", "Palatino Linotype", serif;
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 600;
color: #f0d060; color: #f0d060;
letter-spacing: 2px; letter-spacing: 2px;
text-shadow: 0 0 12px rgba(200,150,12,0.33); text-shadow: 0 0 12px rgba(200, 150, 12, 0.33);
margin-bottom: 14px; margin-bottom: 14px;
padding-bottom: 10px; padding-bottom: 10px;
border-bottom: 1px solid rgba(122,90,24,0.3); border-bottom: 1px solid rgba(122, 90, 24, 0.3);
position: relative; position: relative;
} }
.popup-info-title::after { .popup-info-title::after {
content: ''; content: "";
position: absolute; position: absolute;
bottom: -1px; bottom: -1px;
left: 0; left: 0;
@ -391,13 +424,13 @@
} }
.popup-stat-key { .popup-stat-key {
color: #806040; color: #fff;
} }
.popup-stat-val { .popup-stat-val {
color: #e0c060; color: #e0c060;
font-weight: 600; font-weight: 600;
font-family: 'Cinzel', serif; font-family: "Cinzel", serif;
font-size: 15px; font-size: 15px;
} }
@ -407,11 +440,11 @@
line-height: 1.8; line-height: 1.8;
font-style: italic; font-style: italic;
padding: 10px 12px; padding: 10px 12px;
border-left: 2px solid rgba(200,150,12,0.4); border-left: 2px solid rgba(200, 150, 12, 0.4);
background: #1a1005; background: #1a1005;
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
margin-top: 8px; margin-top: 8px;
text-shadow: 0 1px 3px rgba(0,0,0,0.8); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
} }
/* Fortschrittsbalken */ /* Fortschrittsbalken */
@ -423,7 +456,7 @@
font-size: 11px; font-size: 11px;
color: #705030; color: #705030;
margin-bottom: 5px; margin-bottom: 5px;
font-family: 'Cinzel', serif; font-family: "Cinzel", serif;
letter-spacing: 1px; letter-spacing: 1px;
} }
@ -445,13 +478,13 @@
} }
.popup-xp-fill::after { .popup-xp-fill::after {
content: ''; content: "";
position: absolute; position: absolute;
top: 1px; top: 1px;
left: 4px; left: 4px;
right: 8px; right: 8px;
height: 3px; height: 3px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.188)); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.188));
border-radius: 3px; border-radius: 3px;
} }
@ -461,13 +494,18 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
width: 20px; width: 20px;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25)); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25));
animation: popupShimmer 2s ease-in-out infinite; animation: popupShimmer 2s ease-in-out infinite;
} }
@keyframes popupShimmer { @keyframes popupShimmer {
0%, 100% { opacity: 0.3; } 0%,
50% { opacity: 1; } 100% {
opacity: 0.3;
}
50% {
opacity: 1;
}
} }
.popup-divider { .popup-divider {
@ -491,17 +529,21 @@
border: 1px solid #c8960c; border: 1px solid #c8960c;
border-radius: 4px; border-radius: 4px;
color: #f5e090; color: #f5e090;
font-family: 'Cinzel Decorative', 'Palatino Linotype', serif; font-family: "Cinzel Decorative", "Palatino Linotype", serif;
font-size: 11px; font-size: 11px;
letter-spacing: 3px; letter-spacing: 3px;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
box-shadow: inset 0 1px 0 rgba(200,150,12,0.25), 0 0 20px rgba(200,150,12,0.11); box-shadow:
inset 0 1px 0 rgba(200, 150, 12, 0.25),
0 0 20px rgba(200, 150, 12, 0.11);
} }
.popup-upgrade-btn:hover { .popup-upgrade-btn:hover {
background: linear-gradient(160deg, #8a5824 0%, #5a3410 50%, #8a5824 100%); background: linear-gradient(160deg, #8a5824 0%, #5a3410 50%, #8a5824 100%);
box-shadow: inset 0 1px 0 rgba(200,150,12,0.375), 0 0 30px rgba(200,150,12,0.2); box-shadow:
inset 0 1px 0 rgba(200, 150, 12, 0.375),
0 0 30px rgba(200, 150, 12, 0.2);
letter-spacing: 4px; letter-spacing: 4px;
} }
@ -530,18 +572,18 @@
0deg, 0deg,
transparent, transparent,
transparent 2px, transparent 2px,
rgba(255,255,255,0.012) 2px, rgba(255, 255, 255, 0.012) 2px,
rgba(255,255,255,0.012) 4px rgba(255, 255, 255, 0.012) 4px
), ),
linear-gradient(160deg, #2e1c07 0%, #1a0e04 40%, #221508 100%); linear-gradient(160deg, #2e1c07 0%, #1a0e04 40%, #221508 100%);
border: 2px solid #9a7a28; border: 2px solid #9a7a28;
border-radius: 6px; border-radius: 6px;
overflow: visible; overflow: visible;
box-shadow: box-shadow:
0 0 0 1px rgba(200,168,64,0.3), 0 0 0 1px rgba(200, 168, 64, 0.3),
0 0 40px rgba(200,150,12,0.15), 0 0 40px rgba(200, 150, 12, 0.15),
0 30px 80px rgba(0,0,0,0.7), 0 30px 80px rgba(0, 0, 0, 0.7),
inset 0 0 60px rgba(0,0,0,0.27); inset 0 0 60px rgba(0, 0, 0, 0.27);
} }
.notification-header { .notification-header {
@ -563,7 +605,7 @@
} }
.notification-header::after { .notification-header::after {
content: ''; content: "";
position: absolute; position: absolute;
bottom: -5px; bottom: -5px;
left: 5%; left: 5%;
@ -572,9 +614,9 @@
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
transparent, transparent,
rgba(200,150,12,0.67), rgba(200, 150, 12, 0.67),
rgba(240,208,96,0.6), rgba(240, 208, 96, 0.6),
rgba(200,150,12,0.67), rgba(200, 150, 12, 0.67),
transparent transparent
); );
filter: blur(1px); filter: blur(1px);
@ -586,12 +628,14 @@
} }
#notification-title { #notification-title {
font-family: 'Cinzel Decorative', 'Palatino Linotype', serif; font-family: "Cinzel Decorative", "Palatino Linotype", serif;
font-size: 12px; font-size: 12px;
font-weight: 700; font-weight: 700;
color: #f5e090; color: #f5e090;
letter-spacing: 2px; letter-spacing: 2px;
text-shadow: 0 0 20px rgba(200,150,12,0.53), 0 1px 3px rgba(0,0,0,0.6); text-shadow:
0 0 20px rgba(200, 150, 12, 0.53),
0 1px 3px rgba(0, 0, 0, 0.6);
text-transform: uppercase; text-transform: uppercase;
} }
@ -600,12 +644,12 @@
} }
#notification-message { #notification-message {
font-family: 'Cinzel', 'Palatino Linotype', serif; font-family: "Cinzel", "Palatino Linotype", serif;
font-size: 13px; font-size: 13px;
color: #ccc8b0; color: #ccc8b0;
line-height: 1.7; line-height: 1.7;
margin: 0; margin: 0;
text-shadow: 0 1px 3px rgba(0,0,0,0.8); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
} }
.notification-footer { .notification-footer {
@ -619,17 +663,21 @@
border: 1px solid #c8960c; border: 1px solid #c8960c;
border-radius: 4px; border-radius: 4px;
color: #f5e090; color: #f5e090;
font-family: 'Cinzel', 'Palatino Linotype', serif; font-family: "Cinzel", "Palatino Linotype", serif;
font-size: 12px; font-size: 12px;
letter-spacing: 2px; letter-spacing: 2px;
padding: 8px 22px; padding: 8px 22px;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
box-shadow: inset 0 1px 0 rgba(200,150,12,0.25), 0 0 16px rgba(200,150,12,0.1); box-shadow:
inset 0 1px 0 rgba(200, 150, 12, 0.25),
0 0 16px rgba(200, 150, 12, 0.1);
} }
.notification-btn:hover { .notification-btn:hover {
background: linear-gradient(160deg, #8a5824 0%, #5a3410 50%, #8a5824 100%); background: linear-gradient(160deg, #8a5824 0%, #5a3410 50%, #8a5824 100%);
box-shadow: inset 0 1px 0 rgba(200,150,12,0.375), 0 0 26px rgba(200,150,12,0.2); box-shadow:
inset 0 1px 0 rgba(200, 150, 12, 0.375),
0 0 26px rgba(200, 150, 12, 0.2);
letter-spacing: 3px; letter-spacing: 3px;
} }