SF Card
A HUD style panel with a glow and corner brackets. Tinted by --sf-color.
Examples
80%
CSS variables
| Name | Type | Default | Description |
|---|---|---|---|
--sf-color | <color> | #f90 | Tint for the outline, text and glow. Set it on the element or any ancestor. |
Usage
<zakuni-sf-card style="--sf-color: #7df9ff">Shields at 80%</zakuni-sf-card>Use it on a dark background; the glow is hard to see on white. Content is rendered through the default slot.
Implementation
import { LitElement, css, html } from 'lit';
import { customElement } from 'lit/decorators.js';
@customElement('zakuni-sf-card')
export class ZakuniSFCard extends LitElement {
static styles = css`
:host {
--_c: var(--sf-color, #f90);
display: inline-block;
}
div {
position: relative;
padding: 1em 2em;
color: var(--_c);
font-weight: 300;
background: color-mix(in srgb, var(--_c) 8%, transparent);
border: 1px solid color-mix(in srgb, var(--_c) 60%, transparent);
box-shadow:
0 0 8px var(--_c),
inset 0 0 12px color-mix(in srgb, var(--_c) 25%, transparent);
transition: box-shadow 0.2s;
}
div:hover {
box-shadow:
0 0 14px var(--_c),
inset 0 0 16px color-mix(in srgb, var(--_c) 35%, transparent);
}
/* corner brackets: a full 2px frame, masked down to four 10px corners */
div::before {
content: '';
position: absolute;
inset: -2px;
border: 2px solid var(--_c);
--_m: linear-gradient(#000, #000) no-repeat;
mask:
var(--_m) 0 0 / 10px 10px,
var(--_m) 100% 0 / 10px 10px,
var(--_m) 0 100% / 10px 10px,
var(--_m) 100% 100% / 10px 10px;
}
`;
render() {
return html`
<div><slot /></div>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
"zakuni-sf-card": ZakuniSFCard;
}
}