59269a7608
Renders the 5 HuntEncounter danger tiers as German text plus a per-tier BEM modifier class, mirroring travel-panel's text+class danger pattern so color is never the sole signal. Colors map across the existing 3 semantic tokens (success/warning/danger).
45 lines
965 B
SCSS
45 lines
965 B
SCSS
:host {
|
|
display: inline-block;
|
|
}
|
|
|
|
.danger-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: var(--ar-space-1) var(--ar-space-2);
|
|
border: 1px solid var(--ar-border);
|
|
border-radius: var(--ar-radius-sm);
|
|
background: var(--ar-panel-muted);
|
|
color: var(--ar-text);
|
|
font-family: Georgia, 'Times New Roman', serif;
|
|
font-size: var(--ar-font-sm);
|
|
letter-spacing: 0.02em;
|
|
}
|
|
|
|
.danger-badge--weak {
|
|
color: var(--ar-success);
|
|
border-color: var(--ar-success);
|
|
}
|
|
|
|
.danger-badge--match {
|
|
color: var(--ar-success);
|
|
border-color: var(--ar-success);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.danger-badge--strong {
|
|
color: var(--ar-warning);
|
|
border-color: var(--ar-warning);
|
|
}
|
|
|
|
.danger-badge--very-dangerous {
|
|
color: var(--ar-danger);
|
|
border-color: var(--ar-danger);
|
|
}
|
|
|
|
.danger-badge--deadly {
|
|
color: var(--ar-danger);
|
|
border-color: var(--ar-danger);
|
|
font-weight: 700;
|
|
background: color-mix(in srgb, var(--ar-danger) 18%, var(--ar-panel-muted));
|
|
}
|