49 lines
4.8 KiB
CSS
49 lines
4.8 KiB
CSS
/* Statistik pertandingan (stats.js, RENCANA 5.5): tombol dan kartu di layar hasil (vs.js ResultView), ringkasan seumur hidup di tab Koleksi (meta.js).
|
|
Kartu hasil memakai satuan vh/clamp seperti vs.css supaya muat di tinggi 520 px (dan ponsel lanskap <= 420 px); isi yang lebih tinggi dari ruang tersedia digulir di dalam kartu, tidak mendorong tombol aksi. */
|
|
|
|
/* ---- Layar hasil: tombol di kanan baris skor, kartu menutup kolom tengah di atas tombol aksi ---- */
|
|
.rs-head{position:relative}
|
|
.rs-ms-btn{position:absolute;right:0;bottom:2px;z-index:2;display:inline-flex;align-items:center;gap:8px;margin:0;padding:clamp(5px,1vh,8px) clamp(9px,1.2vw,14px);font:700 clamp(10px,1.3vh + 2px,13px)/1 Rajdhani,Arial,sans-serif;letter-spacing:2px;color:#f3d796;background:#0b1c26d9;border:1px solid #e0bf85aa;border-radius:0;cursor:pointer;animation:rs-up .5s .9s both}
|
|
.rs-ms-btn em{display:none;font-style:normal}
|
|
.rs-ms-btn i{display:inline-block;font-style:normal;transition:transform .18s}
|
|
.rs-ms-btn:hover,.rs-ms-btn:focus-visible{background:#24505e;color:#fff;border-color:#e0bf85}
|
|
.rs-ms-btn[aria-expanded=true] i{transform:rotate(90deg)}
|
|
@media(min-width:1180px) and (min-height:640px){.rs-ms-btn em{display:inline}}
|
|
|
|
.rs-ms{--ms-b:56px;position:absolute;left:0;right:0;top:0;bottom:var(--ms-b);z-index:9;display:flex;align-items:center;justify-content:center;padding:clamp(4px,1vh,10px) 0;background:#050f17d9;animation:ms-fade .2s ease-out both}
|
|
.rs-ms[hidden]{display:none}
|
|
.rs-ms-card{width:100%;max-height:100%;overflow:auto;padding:clamp(8px,1.5vh,14px) clamp(10px,1.6vw,16px);background:#0b1c26;border:1px solid #7fa6a533;border-top:2px solid #e0bf85;box-shadow:0 10px 30px #000a}
|
|
.rs-ms-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:clamp(5px,1.2vh,10px)}
|
|
.rs-ms-head>div{min-width:0}
|
|
.rs-ms-head small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;font-size:clamp(9px,1.2vh + 2px,12px);letter-spacing:2px;color:#8fa9ac}
|
|
.rs-ms-head h3{margin:1px 0 0;font:700 clamp(15px,2.6vh + 2px,24px)/1.05 Rajdhani,'Arial Narrow',sans-serif;letter-spacing:3px;color:#f3d796}
|
|
.rs-ms-x{flex:none;margin:0;padding:clamp(4px,.9vh,7px) clamp(8px,1.2vw,12px);font:700 clamp(10px,1.2vh + 2px,12px)/1 Rajdhani,Arial,sans-serif;letter-spacing:2px;color:#cbddd4;background:#183440;border:1px solid #8ba89d66;border-radius:0;cursor:pointer}
|
|
.rs-ms-x:hover,.rs-ms-x:focus-visible{background:#24505e;color:#fff}
|
|
#front-menu .rs-ms-x:focus-visible{outline-offset:-3px}
|
|
.rs-ms-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(4px,.9vh,8px);margin:0}
|
|
.rs-ms-grid>div{min-width:0;padding:clamp(4px,.9vh,8px) clamp(6px,.9vw,10px);background:#ffffff0a;border:1px solid #ffffff14;border-left:2px solid #ffffff2e}
|
|
.rs-ms-grid dt{font-weight:700;font-size:clamp(9px,1.3vh + 2px,12px);letter-spacing:1px;color:#8fa9ac;text-transform:uppercase;overflow-wrap:anywhere}
|
|
.rs-ms-grid dd{margin:0;font-weight:700;font-size:clamp(15px,2.8vh + 3px,26px);line-height:1.1;color:#f2ead3;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
|
|
.rs-ms-grid dd small{display:inline-block;margin-left:5px;font-size:.52em;font-weight:600;letter-spacing:.5px;color:#93a9ad;white-space:nowrap}
|
|
.rs-ms-grid .dmg{border-left-color:#ffe08a}.rs-ms-grid .dmg dd{color:#ffe08a}
|
|
.rs-ms-grid .hurt{border-left-color:#ff9a7a}.rs-ms-grid .hurt dd{color:#ffb4a6}
|
|
.rs-ms-grid .acc{border-left-color:#8bd4c3}
|
|
.rs-ms-grid .acc:after{content:'';display:block;height:3px;margin-top:4px;background:linear-gradient(90deg,#8bd4c3 calc(var(--p) * 1%),#ffffff1f 0)}
|
|
.rs-ms-grid .acc.none{border-left-color:#ffffff2e}.rs-ms-grid .acc.none dd{color:#6e868c}
|
|
@keyframes ms-fade{from{opacity:0}to{opacity:1}}
|
|
/* Kolom sempit atau layar pendek: kartu lebih rapat, label dan nilai lebih kecil. */
|
|
@media(max-width:700px),(max-height:420px){
|
|
.rs-ms-btn{padding:4px 8px;gap:6px;letter-spacing:1px}
|
|
.rs-ms-card{padding:6px 8px}.rs-ms-head{margin-bottom:5px}.rs-ms-head small{font-size:9px;letter-spacing:1px}.rs-ms-head h3{font-size:15px;letter-spacing:2px}
|
|
.rs-ms-grid{gap:4px}.rs-ms-grid>div{padding:3px 6px}.rs-ms-grid dt{font-size:9px;letter-spacing:.5px}.rs-ms-grid dd{font-size:15px}.rs-ms-grid dd small{font-size:9px}
|
|
.rs-ms-grid .acc:after{margin-top:2px}
|
|
}
|
|
@media(pointer:coarse){.rs-ms-btn,.rs-ms-x{min-height:30px}}
|
|
|
|
/* ---- Tab Koleksi ---- */
|
|
.ms-life{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:12px 0 0}
|
|
.ms-life>div{min-width:0;padding:8px 12px;background:#101c26;border:1px solid #ffffff1c;border-radius:8px}
|
|
.ms-life dt{font-size:13px;letter-spacing:.06em;color:#9fb3c4;text-transform:uppercase}
|
|
.ms-life dd{margin:2px 0 0;font:700 22px/1.1 Rajdhani,Arial,sans-serif;color:#f6eedb;font-variant-numeric:tabular-nums}
|
|
.ms-life dd small{margin-left:6px;font-size:14px;font-weight:600;color:#8fa3b3}
|