68 lines
7.1 KiB
CSS
68 lines
7.1 KiB
CSS
/* Tutorial singkat (tutorial.js, RENCANA 4.1): tombol di menu utama, panel instruksi di arena, dan tanda "!" untuk latihan parry.
|
|
Tinggi minimum yang didukung 520 px (1024x520); ada aturan ringkas untuk jendela pendek dan ponsel lanskap (844x390). */
|
|
|
|
/* ---- Tombol TUTORIAL di menu utama: pojok kiri atas, di dalam bilah .home-top tetapi di luar alur (absolut, tengah vertikal), sehingga
|
|
tinggi bilah dan letak tombol-tombol menu tidak berubah sedikit pun (menu tetap muat di 520 px) ---- */
|
|
#front-menu .home-top{position:relative}
|
|
#front-menu .tut-entry{position:absolute;left:4.5%;top:50%;z-index:1;display:inline-flex;align-items:center;gap:8px;min-height:26px;padding:3px 14px 3px 10px;background:#102b37c4;border:1px solid #d7b87d77;border-left:3px solid #d7b87d;color:#f6eedb;font:700 13px/1.1 Rajdhani,Arial,sans-serif;letter-spacing:2.5px;cursor:pointer;transform:translateY(-50%) skewX(-7deg);transition:background .14s,border-color .14s,transform .14s}
|
|
#front-menu .tut-entry>*{transform:skewX(7deg)}
|
|
#front-menu .tut-entry i{font-style:normal;font-size:11px;color:#d7b87d}
|
|
#front-menu .tut-entry:not(.done){animation:tut-nudge 2.2s ease-in-out infinite}
|
|
#front-menu .tut-entry:hover,#front-menu .tut-entry:focus-visible{background:#f0d49d;color:#122837;border-color:#fff0c8;transform:translateY(-50%) skewX(-7deg) translateX(4px);animation:none}
|
|
#front-menu .tut-entry:hover i,#front-menu .tut-entry:focus-visible i{color:#122837}
|
|
#front-menu .tut-entry.done{border-left-color:#8dffa8}#front-menu .tut-entry.done i{color:#8dffa8}
|
|
@keyframes tut-nudge{0%,100%{box-shadow:0 0 0 #d7b87d00}50%{box-shadow:0 0 14px #d7b87d88}}
|
|
html.touch #front-menu .tut-entry{min-height:32px}
|
|
@media(max-width:800px){#front-menu .tut-entry{left:6%}}
|
|
@media(max-height:420px){#front-menu .tut-entry{min-height:22px;padding:2px 10px 2px 8px;font-size:11px;letter-spacing:2px}html.touch #front-menu .tut-entry{min-height:28px}}
|
|
|
|
/* ---- Panel instruksi di arena: tengah atas, di bawah header HUD dan tombol jeda; letaknya mengikuti tiga ukuran header di style.css ---- */
|
|
#tut-panel{--tt:18px;--tx:15px;--gl:14px;--kb:12px;position:absolute;left:50%;top:156px;z-index:4;width:min(540px,calc(100vw - 340px));transform:translateX(-50%);box-sizing:border-box;padding:8px 14px 10px;color:#fff8e8;background:linear-gradient(180deg,#0d2432f0,#0a1b27ea);border:1px solid #e6c78f55;border-top:3px solid #e6c78f;box-shadow:0 8px 26px #0009;pointer-events:none;font-family:Rajdhani,'Arial Narrow',sans-serif}
|
|
#tut-panel.fin{border-top-color:#8dffa8}
|
|
.tut-head{display:flex;align-items:center;gap:10px;min-height:26px}
|
|
.tut-step{flex:none;font-size:11px;font-weight:700;letter-spacing:2px;color:#e6c78f;white-space:nowrap}
|
|
.tut-title{flex:1;min-width:0;margin:0;font-size:var(--tt);line-height:1.1;font-weight:700;font-style:italic;letter-spacing:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:2px 2px 0 #13232c}
|
|
#tut-panel.fin .tut-title{color:#8dffa8}
|
|
.tut-actions{flex:none;display:flex;gap:6px}
|
|
.tut-btn{pointer-events:auto;padding:3px 9px;font:700 11px/1.2 Rajdhani,Arial,sans-serif;letter-spacing:1.4px;color:#e6ecea;background:#13303d;border:1px solid #7dada177;cursor:pointer}
|
|
.tut-btn:hover,.tut-btn:focus-visible{background:#e6c78f;color:#102734;border-color:#fff0c8}
|
|
.tut-free{background:#e6c78f;color:#102734;border-color:#fff0c8}
|
|
.tut-btn[hidden],.tut-goals[hidden]{display:none}
|
|
.tut-text{margin:3px 0 6px;min-height:1.25em;font-size:var(--tx);line-height:1.25;color:#d6e4e6}
|
|
.tut-text.hint{color:#ffd36a}.tut-text.bad{color:#ff9d8f}.tut-text.good{color:#8dffa8}
|
|
.tut-goals{display:flex;flex-wrap:wrap;gap:6px 8px;margin:0;padding:0;list-style:none}
|
|
.tut-goal{display:flex;align-items:center;gap:7px;min-height:26px;padding:2px 10px 2px 6px;font-size:var(--gl);font-weight:700;letter-spacing:.4px;background:#102b37c4;border:1px solid #7dada144;border-left:3px solid #7fa69877}
|
|
.tut-goal .box{flex:none;width:16px;height:16px;display:grid;place-items:center;font-style:normal;font-size:12px;line-height:1;color:transparent;border:2px solid #9fb3c4}
|
|
.tut-goal.done{background:#12362bd6;border-left-color:#8dffa8}
|
|
.tut-goal.done .box{background:#8dffa8;border-color:#8dffa8;color:#0c2230}
|
|
.tut-goal.done.new .box{animation:tut-pop .3s ease-out}
|
|
.tut-goal.done .lab{color:#b9ffcd}
|
|
.tut-goal .keys{display:flex;align-items:center;gap:3px}
|
|
.tut-key{display:inline-block;min-width:20px;padding:1px 6px;font:700 var(--kb)/18px Rajdhani,Arial,sans-serif;text-align:center;background:#ecddbb;color:#102731;box-shadow:0 2px 0 #8d7f5f}
|
|
.tut-goal .plus{font-size:12px;color:#9fb3c4}
|
|
.tut-goal .lab small{font-size:.85em;font-weight:500;letter-spacing:0;color:#ffd36a}
|
|
.tut-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:#ffffff1c}
|
|
.tut-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#86d9c4,#e0bf85);transition:width .35s ease-out}
|
|
.tut-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
|
|
@keyframes tut-pop{0%{transform:scale(.4)}70%{transform:scale(1.3)}100%{transform:scale(1)}}
|
|
/* Pengumuman besar (UPPERCUT!, PARRY!, ...) turun ke bawah panel supaya tidak tertutup. --tut-bottom diisi tutorial.js. */
|
|
body.tut-on #announcement{top:calc(var(--tut-bottom,160px) + 6px)}
|
|
|
|
/* ---- Tanda "!" di atas kepala dummy, 0,3 dtk sebelum pukulannya kena (ketuk L sekarang). Posisi dan skala diisi tutorial.js ---- */
|
|
.tut-cue{position:absolute;z-index:4;left:0;top:0;width:46px;display:none;transform:translate(-50%,-100%) scale(var(--cs,1));transform-origin:50% 100%;text-align:center;pointer-events:none}
|
|
.tut-cue.on{display:block}
|
|
.tut-cue b{display:block;width:46px;height:46px;border-radius:50%;font:700 34px/46px Rajdhani,Arial,sans-serif;color:#2a1a00;background:#ffd36a;box-shadow:0 0 0 4px #ff6a5acc,0 0 24px #ffb15a;animation:tut-cue .22s ease-in-out infinite alternate}
|
|
.tut-cue small{display:block;margin-top:3px;font:700 13px/1 Rajdhani,Arial,sans-serif;letter-spacing:2px;color:#fff3d4;text-shadow:0 1px 3px #000}
|
|
@keyframes tut-cue{from{transform:scale(.92)}to{transform:scale(1.08)}}
|
|
|
|
/* ---- Ukuran: layar lebar, header besar, header ringkas, jendela pendek (<= 500 px) ---- */
|
|
@media(min-width:1200px) and (min-height:640px){#tut-panel{--tt:21px;--tx:17px;--gl:16px;--kb:13px;width:min(660px,calc(100vw - 560px));padding:10px 16px 12px}.tut-step{font-size:12px}.tut-btn{padding:4px 11px;font-size:12px}.tut-goal{min-height:30px}}
|
|
@media(min-width:1600px){#tut-panel{top:170px}}
|
|
@media(max-width:950px){#tut-panel{top:137px;width:min(520px,calc(100vw - 300px))}}
|
|
@media(max-width:620px){#tut-panel{top:118px;width:calc(100vw - 24px)}}
|
|
@media(max-height:500px) and (min-width:620px){#tut-panel{--tt:15px;--tx:13px;--gl:12px;--kb:11px;top:118px;width:min(520px,calc(100vw - 340px));padding:6px 12px 8px}.tut-head{min-height:22px}.tut-text{margin:2px 0 5px}.tut-goal{min-height:22px;padding:1px 8px 1px 5px}.tut-key{line-height:16px}.tut-btn{padding:2px 7px;font-size:10px}}
|
|
html.touch .tut-btn{padding:5px 10px}
|
|
@media(max-height:500px){html.touch .tut-btn{padding:4px 9px}}
|
|
|
|
@media(prefers-reduced-motion:reduce){#front-menu .tut-entry,.tut-goal.done.new .box,.tut-cue b{animation:none!important}.tut-bar i{transition:none}}
|