Files
dcalc/design/src-web/rarity/style/index.css
T
2026-08-04 17:57:01 +08:00

25 lines
1.1 KiB
CSS

/* Source module: rarity.css */
.rarity-grid { display:grid;grid-template-columns:repeat(6,1fr);gap:8px; }
.rarity-card { min-width:0;padding:8px 5px;border:1px solid #292a27;background:#070807; }
.rarity-slot { position:relative;width:40px;height:40px;margin:0 auto 7px;display:flex;align-items:center;justify-content:center;background:#030404; }
.rarity-slot.is-emphasized { background:rgba(0,0,0,.9); }
.rarity-slot.is-emphasized::before,
.rarity-slot.is-emphasized::after { content:"";position:absolute;pointer-events:none; }
.rarity-slot.is-emphasized::before {
z-index:0;
inset:4px;
border:1px solid #ffa800;
box-shadow:
0 0 2px 1px rgba(255,168,0,.88),
0 0 5px 4px rgba(255,168,0,.46),
inset 0 0 2px rgba(255,168,0,.7);
}
.rarity-slot.is-emphasized::after {
z-index:3;
inset:5px;
border:1px solid #fffc2a;
}
.rarity-slot .frame { position:absolute;z-index:2;left:50%;top:50%;width:28px;height:28px;transform:translate(-50%,-50%);image-rendering:pixelated; }
.rarity-slot .item { position:relative;z-index:1;width:28px;height:28px;image-rendering:pixelated; }
.rarity-name { text-align:center;font-size:11px;color:var(--gold); }