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

rfthjert

Browse Source
This commit is contained in:
cay 2026-04-11 13:47:47 +01:00
parent 4fe6762d5e
commit 0fe0f29ff3
1 changed files with 150 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

190
public/css/glucksspiel.css
View File

@ -41,14 +41,21 @@
text-align: left; text-align: left;
white-space: nowrap; white-space: nowrap;
} }
.gs-tab:hover { color: #f0d9a6; filter: brightness(1.2); } .gs-tab:hover {
color: #f0d9a6;
filter: brightness(1.2);
}
.gs-tab.gs-tab-active { .gs-tab.gs-tab-active {
color: #fff !important; color: #fff !important;
box-shadow: inset 0 0 10px rgba(0,0,0,0.5), 0 0 14px rgba(200,160,60,0.3) !important; box-shadow:
inset 0 0 10px rgba(0, 0, 0, 0.5),
0 0 14px rgba(200, 160, 60, 0.3) !important;
} }
.gs-tab-dot { .gs-tab-dot {
width: 10px; height: 10px; width: 10px;
border-radius: 50%; flex-shrink: 0; height: 10px;
border-radius: 50%;
flex-shrink: 0;
border: 1px solid rgba(255, 255, 255, 0.3); border: 1px solid rgba(255, 255, 255, 0.3);
} }
@ -92,7 +99,10 @@
overflow: visible; overflow: visible;
background: #1a0f04; background: #1a0f04;
cursor: pointer; cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; transition:
transform 0.2s,
box-shadow 0.2s,
border-color 0.2s;
aspect-ratio: 3/4; aspect-ratio: 3/4;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -100,7 +110,9 @@
.gs-card:hover { .gs-card:hover {
transform: scale(1.06) translateY(-4px); transform: scale(1.06) translateY(-4px);
border-color: #f0d060; border-color: #f0d060;
box-shadow: 0 8px 24px rgba(0,0,0,0.7), 0 0 14px rgba(200,160,60,0.3); box-shadow:
0 8px 24px rgba(0, 0, 0, 0.7),
0 0 14px rgba(200, 160, 60, 0.3);
z-index: 10; z-index: 10;
} }
.gs-card.gs-card-disabled { .gs-card.gs-card-disabled {
@ -117,46 +129,73 @@
box-shadow: 0 0 14px rgba(240, 208, 96, 0.5); box-shadow: 0 0 14px rgba(240, 208, 96, 0.5);
} }
.gs-card img { .gs-card img {
width: 100%; height: 100%; width: 100%;
object-fit: cover; display: block; height: 100%;
object-fit: cover;
display: block;
border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0;
} }
.gs-stat-atk { .gs-stat-atk {
position: absolute; right: 8px; top: 38%; position: absolute;
right: 25px;
top: 40%;
transform: translateY(-50%); transform: translateY(-50%);
background: rgba(180, 40, 20, 0.88); background: rgba(180, 40, 20, 0.88);
border: 1px solid #ff6040; border: 1px solid #ff6040;
border-radius: 45px; color: #fff; border-radius: 45px;
font-family: "Cinzel", serif; font-size: 9px; font-weight: bold; color: #fff;
padding: 2px 4px; z-index: 5; font-family: "Cinzel", serif;
font-size: 12px;
font-weight: bold;
padding: 2px 4px;
z-index: 5;
} }
.gs-stat-def { .gs-stat-def {
position: absolute; left: 8px; top: 38%; position: absolute;
left: 25px;
top: 40%;
transform: translateY(-50%); transform: translateY(-50%);
background: rgba(20, 80, 180, 0.88); background: rgba(20, 80, 180, 0.88);
border: 1px solid #4090ff; border: 1px solid #4090ff;
border-radius: 45px; color: #fff; border-radius: 45px;
font-family: "Cinzel", serif; font-size: 9px; font-weight: bold; color: #fff;
padding: 2px 4px; z-index: 5; font-family: "Cinzel", serif;
font-size: 12px;
font-weight: bold;
padding: 2px 4px;
z-index: 5;
} }
.gs-stat-cd { .gs-stat-cd {
position: absolute; position: absolute;
bottom: 6px; right: 5px; bottom: 14px;
width: 18px; height: 18px; right: 20px;
width: 25px;
height: 25px;
border-radius: 50%; border-radius: 50%;
background: rgba(0, 0, 0, 0.75); background: rgba(0, 0, 0, 0.75);
border: 1px solid #f0d060; border: 1px solid #f0d060;
display: flex; align-items: center; justify-content: center; display: flex;
font-family: "Cinzel", serif; font-size: 8px; font-weight: bold; align-items: center;
color: #f0d9a6; z-index: 5; pointer-events: none; justify-content: center;
font-family: "Cinzel", serif;
font-size: 20px;
font-weight: bold;
color: #f0d9a6;
z-index: 5;
pointer-events: none;
} }
.gs-card-footer { .gs-card-footer {
position: absolute; bottom: 4px; left: 6px; position: absolute;
z-index: 5; pointer-events: none; bottom: 4px;
left: 6px;
z-index: 5;
pointer-events: none;
} }
.gs-count-owned { .gs-count-owned {
font-family: "Cinzel", serif; font-size: 12px; font-family: "Cinzel", serif;
color: #000; font-weight: bold; font-size: 12px;
color: #000;
font-weight: bold;
text-shadow: 0 0 3px rgba(255, 255, 255, 0.6); text-shadow: 0 0 3px rgba(255, 255, 255, 0.6);
} }
@ -164,17 +203,23 @@
.gs-rarity { .gs-rarity {
position: absolute; position: absolute;
top: 72%; top: 72%;
left: 0; right: 0; left: 0;
display: flex; justify-content: center; flex-wrap: wrap; right: 0;
gap: 1px; padding: 0 4px; display: flex;
pointer-events: none; z-index: 4; justify-content: center;
flex-wrap: wrap;
gap: 1px;
padding: 0 4px;
pointer-events: none;
z-index: 4;
} }
/* ── Reichweite & Laufen Badges ─────────── */ /* ── Reichweite & Laufen Badges ─────────── */
.gs-range-race { .gs-range-race {
position: absolute; position: absolute;
top: 82%; top: 82%;
left: 0; right: 0; left: 0;
right: 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
gap: 3px; gap: 3px;
@ -206,21 +251,36 @@
/* ── Pagination ──────────────────────────── */ /* ── Pagination ──────────────────────────── */
.gs-pagination { .gs-pagination {
display: flex; align-items: center; justify-content: center; display: flex;
gap: 5px; padding: 8px 10px; flex-shrink: 0; align-items: center;
justify-content: center;
gap: 5px;
padding: 8px 10px;
flex-shrink: 0;
border-top: 1px solid #3a2810; border-top: 1px solid #3a2810;
} }
.gs-page-btn { .gs-page-btn {
background: linear-gradient(#3a2810, #1a0f04); background: linear-gradient(#3a2810, #1a0f04);
border: 1px solid #8b6a3c; border-radius: 5px; border: 1px solid #8b6a3c;
color: #f0d9a6; font-family: "Cinzel", serif; border-radius: 5px;
font-size: 11px; padding: 3px 10px; cursor: pointer; transition: 0.15s; color: #f0d9a6;
font-family: "Cinzel", serif;
font-size: 11px;
padding: 3px 10px;
cursor: pointer;
transition: 0.15s;
}
.gs-page-btn:hover {
border-color: #f0d060;
}
.gs-page-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
} }
.gs-page-btn:hover { border-color: #f0d060; }
.gs-page-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.gs-page-btn.gs-page-active { .gs-page-btn.gs-page-active {
background: linear-gradient(#6b4b2a, #3c2414); background: linear-gradient(#6b4b2a, #3c2414);
border-color: #f0d060; color: #fff5cc; border-color: #f0d060;
color: #fff5cc;
} }
/* ── Rechte Spalte: Kombinier-Panel ──────── */ /* ── Rechte Spalte: Kombinier-Panel ──────── */
@ -268,28 +328,40 @@
border-radius: 8px; border-radius: 8px;
overflow: visible; overflow: visible;
background: #0f1a04; background: #0f1a04;
transition: transform 0.2s, border-color 0.2s; transition:
transform 0.2s,
border-color 0.2s;
} }
.gs-stack-card img { .gs-stack-card img {
width: 100%; height: 100%; width: 100%;
object-fit: cover; display: block; height: 100%;
object-fit: cover;
display: block;
} }
.gs-card-stack:hover .gs-stack-card:last-child { .gs-card-stack:hover .gs-stack-card:last-child {
border-color: #ff4444; border-color: #ff4444;
} }
.gs-card-stack:hover .gs-stack-card:last-child::after { .gs-card-stack:hover .gs-stack-card:last-child::after {
content: "✕ Entfernen"; content: "✕ Entfernen";
position: absolute; inset: 0; position: absolute;
inset: 0;
background: rgba(180, 0, 0, 0.6); background: rgba(180, 0, 0, 0.6);
display: flex; align-items: center; justify-content: center; display: flex;
font-family: "Cinzel", serif; font-size: 11px; align-items: center;
color: #fff; border-radius: 6px; pointer-events: none; justify-content: center;
font-family: "Cinzel", serif;
font-size: 11px;
color: #fff;
border-radius: 6px;
pointer-events: none;
} }
.gs-combine-count { .gs-combine-count {
padding: 6px 12px; padding: 6px 12px;
font-family: "Cinzel", serif; font-size: 12px; font-family: "Cinzel", serif;
color: #f0d9a6; text-align: center; font-size: 12px;
color: #f0d9a6;
text-align: center;
border-top: 1px solid #3a2810; border-top: 1px solid #3a2810;
flex-shrink: 0; flex-shrink: 0;
min-height: 28px; min-height: 28px;
@ -322,11 +394,25 @@
/* ── Empty / Loading ─────────────────────── */ /* ── Empty / Loading ─────────────────────── */
.gs-empty { .gs-empty {
grid-column: 1 / -1; text-align: center; grid-column: 1 / -1;
color: #8b6a3c; font-size: 13px; padding: 30px 0; text-align: center;
color: #8b6a3c;
font-size: 13px;
padding: 30px 0;
} }
.gs-loading { .gs-loading {
text-align: center; color: #8b6a3c; font-size: 13px; text-align: center;
padding: 20px 0; animation: gs-pulse 1.2s infinite; color: #8b6a3c;
font-size: 13px;
padding: 20px 0;
animation: gs-pulse 1.2s infinite;
}
@keyframes gs-pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.4;
}
} }
@keyframes gs-pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }