63 lines
5.8 KiB
CSS
63 lines
5.8 KiB
CSS
/* Latihan lanjutan (training.js, RENCANA 6.5): tombol DUMMY di bilah kecil bawah jam dan panel dummy di arena latihan; juga satu baris "Rival belajar" di layar hasil (ai.js, RENCANA 6.6).
|
|
Panel memakai kelas .training-only (menu.css), jadi hilang sendiri di versus dan di menu; body.tut-on (tutorial.js) menyembunyikannya selama tutorial.
|
|
Tinggi minimum yang didukung 520 px: panel boleh digulir di dalamnya dan tidak pernah menutupi kartu skill di bawah. */
|
|
|
|
/* ---- tombol di bilah .match-actions (menimpa ukuran tombol ikon 29 x 27 px) ---- */
|
|
.match-actions #dm-btn{width:auto;min-width:0;padding:4px 9px;font:700 11px/1 Rajdhani,Arial,sans-serif;letter-spacing:1.6px;color:#e9dcc6;cursor:pointer}
|
|
.match-actions #dm-btn[hidden]{display:none}
|
|
.match-actions #dm-btn.on{background:#e6c78f;color:#102734;border-color:#fff0c8}
|
|
body.tut-on #dm-btn,body.tut-on #dm-panel{display:none!important}
|
|
|
|
/* ---- panel: sisi kiri (bisa dipindah ke kanan) di bawah header HUD, jauh dari penghitung kombo besar di kanan; letaknya mengikuti tiga ukuran header seperti panel tutorial. z-index 2: timer mode (.form-timers, z-index 3, tembus klik) tetap terlihat di atasnya ---- */
|
|
#dm-panel{--dm-fs:12px;position:absolute;left:14px;top:156px;z-index:2;width:236px;max-height:calc(100% - 156px - 128px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;box-sizing:border-box;padding:7px 10px 10px;color:#fff8e8;background:linear-gradient(180deg,#0d2432f2,#0a1b27ee);border:1px solid #e6c78f55;border-top:3px solid #e6c78f;font:600 var(--dm-fs)/1.25 Rajdhani,Arial,sans-serif;pointer-events:auto;box-shadow:0 6px 22px #0008}
|
|
#dm-panel[hidden]{display:none}
|
|
#dm-panel[data-side="right"]{left:auto;right:14px}
|
|
.dm-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
|
|
.dm-head b{font-size:13px;letter-spacing:2.2px;color:#f3d796}
|
|
.dm-head span{display:flex;gap:4px}
|
|
.dm-mini{width:22px;height:22px;padding:0;display:grid;place-items:center;font:700 12px/1 Arial,sans-serif;color:#e6ecea;background:#13303d;border:1px solid #7dada177;cursor:pointer}
|
|
.dm-mini:hover,.dm-mini:focus-visible{background:#e6c78f;color:#102734;border-color:#fff0c8}
|
|
.dm-sec{margin-top:7px;padding-top:6px;border-top:1px solid #ffffff1f}
|
|
.dm-sec h3{margin:0 0 4px;font-size:10px;letter-spacing:2.4px;color:#e6c78f}
|
|
.dm-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px}
|
|
.dm-b,.dm-sw{font:700 var(--dm-fs)/1.2 Rajdhani,Arial,sans-serif;letter-spacing:.5px;color:#e6ecea;background:#13303d;border:1px solid #7dada177;cursor:pointer}
|
|
.dm-b{padding:4px 5px;text-align:center}
|
|
.dm-b:hover,.dm-b:focus-visible,.dm-sw:hover,.dm-sw:focus-visible{background:#2a5566;border-color:#e6c78faa}
|
|
.dm-b[aria-checked="true"],.dm-b.on{background:#e6c78f;color:#102734;border-color:#fff0c8}
|
|
.dm-b:disabled,.dm-sw:disabled{opacity:.45;cursor:default}
|
|
.dm-b:disabled:hover,.dm-sw:disabled:hover{background:#13303d;border-color:#7dada177}
|
|
.dm-wide{display:block;width:100%;margin-top:4px}
|
|
.dm-sw{display:flex;align-items:center;gap:8px;width:100%;margin-top:3px;padding:3px 6px;text-align:left}
|
|
.dm-sw i{flex:none;width:26px;height:14px;position:relative;background:#0a1b27;border:1px solid #7dada1aa;border-radius:8px}
|
|
.dm-sw i:after{content:"";position:absolute;left:2px;top:2px;width:8px;height:8px;border-radius:50%;background:#9fb3c4;transition:transform .12s,background .12s}
|
|
.dm-sw[aria-checked="true"] i{background:#1d6b52;border-color:#8dffa8}
|
|
.dm-sw[aria-checked="true"] i:after{transform:translateX(12px);background:#8dffa8}
|
|
.dm-count{display:flex;flex-direction:column;gap:1px;margin:6px 0 0;font-size:11px;letter-spacing:.4px;color:#cfdedd}
|
|
.dm-count b{color:#ffd36a}
|
|
.dm-fd dl{display:grid;grid-template-columns:auto 1fr;gap:1px 10px;margin:0}
|
|
.dm-fd dt{color:#9fb3c4;font-size:11px}
|
|
.dm-fd dd{margin:0;text-align:right;color:#fff3d4}
|
|
.dm-mv{margin:0 0 3px;display:flex;flex-direction:column;line-height:1.15}
|
|
.dm-mv b{font-size:13px;color:#ffd36a;letter-spacing:.6px}
|
|
.dm-mv small{font-size:10px;color:#9fb3c4;letter-spacing:.8px}
|
|
.dm-rec{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:4px}
|
|
.dm-rec .dm-b{padding:4px 3px;white-space:nowrap}
|
|
.dm-note{margin:5px 0 0;min-height:1.3em;font-size:11px;font-weight:600;letter-spacing:.2px;color:#d6e4e6}
|
|
.dm-note.hint{color:#ffd36a}.dm-note.good{color:#8dffa8}.dm-note.bad{color:#ff9d8f}
|
|
|
|
@media(min-width:1200px) and (min-height:640px){#dm-panel{--dm-fs:13px;width:262px}.dm-head b{font-size:14px}.dm-fd dt,.dm-note,.dm-count{font-size:12px}}
|
|
@media(min-width:1600px){#dm-panel{top:170px;max-height:calc(100% - 170px - 140px)}}
|
|
@media(max-width:950px){#dm-panel{top:137px;width:224px;max-height:calc(100% - 137px - 120px)}}
|
|
@media(max-width:620px){#dm-panel{top:118px;width:204px;max-height:calc(100% - 118px - 112px)}}
|
|
@media(max-height:500px) and (min-width:620px){#dm-panel{--dm-fs:11px;top:118px;width:216px;max-height:calc(100% - 118px - 104px);padding:5px 8px 8px}.dm-sec{margin-top:5px;padding-top:4px}.dm-b{padding:3px 4px}.dm-sw{padding:2px 6px}.dm-note{margin-top:3px}}
|
|
html.touch .dm-b,html.touch .dm-sw{padding-top:6px;padding-bottom:6px}
|
|
html.touch .dm-mini{width:28px;height:28px}
|
|
html.touch .match-actions #dm-btn{padding:6px 12px}
|
|
@media(max-height:500px){html.touch .dm-b,html.touch .dm-sw{padding-top:4px;padding-bottom:4px}}
|
|
@media(prefers-reduced-motion:reduce){.dm-sw i:after{transition:none}}
|
|
|
|
/* ---- layar hasil: satu baris "Rival belajar" di bawah kutipan (ai.js). Disembunyikan di jendela pendek supaya tata letak 520 px tidak bergeser ---- */
|
|
.rs-learn{margin:0;padding:3px 10px;border-left:3px solid #8bd4c3;font:600 italic clamp(11px,1.4vh + 3px,14px)/1.25 Rajdhani,sans-serif;letter-spacing:.3px;color:#cfe9e2;background:linear-gradient(90deg,#0b1b25aa,#0b1b2500);animation:rs-up .5s .55s both}
|
|
@media(max-height:600px){.rs-learn{display:none}}
|
|
@media(prefers-reduced-motion:reduce){.rs-learn{animation:none}}
|