15 lines
1.6 KiB
CSS
15 lines
1.6 KiB
CSS
/* Rasa kena (feel.js): peringkat kombo C/B/A/S di tengah layar. Letak: di bawah header, di atas kepala petarung; tidak menyentuh HUD bawah. */
|
|
.combo-rank{position:absolute;left:50%;top:35%;z-index:2;display:flex;flex-direction:column;align-items:center;pointer-events:none;opacity:0;transform:translateX(-50%);transition:opacity .22s;--rk:#bfeaff;--rk2:#2b6f86;--t:1}
|
|
.combo-rank.visible{opacity:.96}
|
|
.combo-rank[data-rank=C]{--rk:#bfeaff;--rk2:#2b6f86}
|
|
.combo-rank[data-rank=B]{--rk:#ffe08a;--rk2:#8a5a12}
|
|
.combo-rank[data-rank=A]{--rk:#ffa24a;--rk2:#8a2f0e}
|
|
.combo-rank[data-rank=S]{--rk:#ff6b5a;--rk2:#7a0f1e}
|
|
.combo-rank b{display:block;padding:0 .14em;font:700 italic clamp(52px,18.5vh,150px)/.85 Rajdhani,'Arial Narrow',sans-serif;color:var(--rk);transform-origin:50% 62%;
|
|
text-shadow:.045em 0 #142430,-.045em 0 #142430,0 .045em #142430,0 -.045em #142430,.032em .032em #142430,-.032em .032em #142430,.032em -.032em #142430,-.032em -.032em #142430,0 .07em 0 var(--rk2),0 0 .22em var(--rk)}
|
|
.combo-rank small{display:block;margin-top:.15em;font:700 clamp(12px,3.3vh,24px)/1 Rajdhani,sans-serif;letter-spacing:.28em;text-indent:.28em;color:#fff3d4;text-shadow:2px 2px 0 #142430,0 0 10px #0009}
|
|
.combo-rank i{display:block;width:clamp(70px,18vh,150px);height:4px;margin-top:5px;background:#142430a8;box-shadow:0 0 0 1px #ffffff2e;overflow:hidden}
|
|
.combo-rank i:after{content:'';display:block;height:100%;background:var(--rk);transform:scaleX(var(--t));transform-origin:0 50%}
|
|
.in-menu .combo-rank{visibility:hidden}
|
|
@media(prefers-reduced-motion:reduce){.combo-rank{transition:none}}
|