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