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

120
public/css/popup.css
View File

@ -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%;
@ -113,12 +128,14 @@
} }
#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;
} }
@ -184,7 +201,7 @@
} }
.popup-tabs::after { .popup-tabs::after {
content: ''; content: "";
position: absolute; position: absolute;
right: -4px; right: -4px;
top: 8%; top: 8%;
@ -245,7 +262,7 @@
/* 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,7 +384,7 @@
================================ */ ================================ */
.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;
@ -364,7 +397,7 @@
} }
.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;
} }
@ -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,7 +478,7 @@
} }
.popup-xp-fill::after { .popup-xp-fill::after {
content: ''; content: "";
position: absolute; position: absolute;
top: 1px; top: 1px;
left: 4px; left: 4px;
@ -466,8 +499,13 @@
} }
@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;
} }
@ -563,7 +605,7 @@
} }
.notification-header::after { .notification-header::after {
content: ''; content: "";
position: absolute; position: absolute;
bottom: -5px; bottom: -5px;
left: 5%; left: 5%;
@ -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,7 +644,7 @@
} }
#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;
@ -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;
} }