j.brandenburger/helldivers
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: larger stratagem icon with glow, readable queue labels

Browse Source
This commit is contained in:
Jeremy Brandenburger
2026-03-31 18:42:48 +02:00
parent 8a5d08b586
commit b35687d095
2 changed files with 57 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/styles.css
+49 -32
View File
@@ -1658,7 +1658,7 @@ select option { background: var(--bg-surface2); }
.page-title { font-size: 1.3rem; }
.match-wins { font-size: 1.8rem; }
.match-status-text { font-size: 1.2rem; }
.stratagem-icon-lg { width: 70px; height: 70px; }
.stratagem-icon-lg { width: 88px; height: 88px; }
}
/* ── Stratagem icons ─────────────────────────────────────────────────────── */
@@ -1666,23 +1666,35 @@ select option { background: var(--bg-surface2); }
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
height: 90px;
margin-bottom: 14px;
height: 130px;
}
/* Circular glowing backdrop behind the main icon */
.stratagem-icon-wrap::before {
content: '';
position: absolute;
width: 120px;
height: 120px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,210,0,0.10) 0%, rgba(255,210,0,0.03) 60%, transparent 80%);
border: 1px solid rgba(255,210,0,0.15);
pointer-events: none;
}
.stratagem-icon-lg {
width: 86px;
height: 86px;
width: 110px;
height: 110px;
object-fit: contain;
filter: invert(1) sepia(1) saturate(3) hue-rotate(0deg) brightness(1.1);
/* Converts monochrome SVG → gold/yellow to match theme */
opacity: 0.92;
transition: transform 0.25s ease, opacity 0.2s;
filter: invert(1) sepia(1) saturate(4) hue-rotate(0deg) brightness(1.25) drop-shadow(0 0 8px rgba(255,210,0,0.4));
opacity: 1;
transition: transform 0.25s ease, filter 0.2s;
position: relative;
}
.stratagem-icon-lg.icon-complete {
transform: scale(1.12);
filter: invert(1) sepia(1) saturate(6) hue-rotate(0deg) brightness(1.3);
transform: scale(1.14);
filter: invert(1) sepia(1) saturate(6) hue-rotate(0deg) brightness(1.5) drop-shadow(0 0 14px rgba(255,210,0,0.7));
}
.stratagem-icon-lg.icon-wrong {
@@ -1690,8 +1702,8 @@ select option { background: var(--bg-surface2); }
}
.stratagem-icon-fallback {
font-size: 3rem;
opacity: 0.25;
font-size: 3.5rem;
opacity: 0.3;
}
.stratagem-icon-md {
@@ -1724,50 +1736,55 @@ select option { background: var(--bg-surface2); }
/* ── Stratagem queue (upcoming stratagems) ───────────────────────────────── */
.stratagem-queue {
display: flex;
align-items: center;
align-items: flex-start;
justify-content: center;
gap: 10px;
margin: 6px 0 10px;
min-height: 52px;
gap: 16px;
margin: 4px 0 12px;
min-height: 72px;
}
.queue-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
opacity: 0.45;
gap: 5px;
opacity: 0.40;
transition: opacity 0.2s;
width: 72px;
}
.queue-item:first-child { opacity: 0.7; }
.queue-item:first-child { opacity: 0.75; }
.queue-item:nth-child(2) { opacity: 0.55; }
.queue-icon {
width: 36px;
height: 36px;
width: 44px;
height: 44px;
object-fit: contain;
filter: invert(1) sepia(1) saturate(2) hue-rotate(0deg) brightness(1);
filter: invert(1) sepia(1) saturate(3) hue-rotate(0deg) brightness(1.15);
}
.queue-icon-fallback {
width: 36px;
height: 36px;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
font-size: 1.4rem;
background: var(--bg-surface2);
border-radius: 6px;
border-radius: 8px;
}
.queue-label {
font-size: 0.6rem;
font-size: 0.62rem;
color: var(--text-muted);
max-width: 60px;
max-width: 72px;
text-align: center;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 1.3;
word-break: break-word;
}
/* ── Score popup ─────────────────────────────────────────────────────────── */
@@ -1901,6 +1918,6 @@ select option { background: var(--bg-surface2); }
@media (max-width: 768px) {
.summary-grid { grid-template-columns: repeat(2, 1fr); }
.admin-layout { grid-template-columns: 1fr; }
.stratagem-icon-lg { width: 70px; height: 70px; }
.stratagem-icon-lg { width: 88px; height: 88px; }
.stratagem-queue { gap: 8px; }
}