75 lines
8.2 KiB
CSS
75 lines
8.2 KiB
CSS
/* Tantangan harian (daily.js, RENCANA 7.1 dan 7.2): tombol HARIAN di menu utama, kartu tantangan, baris aturan di layar VS, penanda aturan di arena.
|
|
Tinggi minimum yang didukung 520 px; ada aturan ringkas untuk jendela pendek (<= 560 px) dan ponsel lanskap (<= 420 px). */
|
|
|
|
/* ---- Tombol HARIAN di menu utama: di dalam .home-top-right, tepat di kiri teks versi, sebagai item flex biasa. Margin atas dan bawahnya negatif sebesar
|
|
setengah tingginya, jadi kotak margin-nya setinggi 0: bilah atas tidak bertambah tinggi sedikit pun (menu tetap muat di 520 px) dan tombol
|
|
tetap di tengah vertikal. Sengaja tidak memakai position:absolute atau menjadikan .home-top-right sebagai induk posisi: tombol layar penuh
|
|
(.menu-fullscreen, absolut) memakai .home-top sebagai induknya. ---- */
|
|
#front-menu .daily-entry{display:inline-flex;align-items:center;gap:8px;min-height:26px;margin:-13px 18px -13px 0;padding:3px 12px 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:2px;white-space:nowrap;cursor:pointer;transform:skewX(-7deg);transition:background .14s,border-color .14s,color .14s}
|
|
#front-menu .daily-entry>*{transform:skewX(7deg)}
|
|
#front-menu .daily-entry i{font-style:normal;font-size:11px;color:#d7b87d}
|
|
#front-menu .daily-entry .de-n{color:#f0d49d}
|
|
#front-menu .daily-entry b{padding:1px 6px;font-size:10px;letter-spacing:1.5px;color:#102b37;background:#e6c78f}
|
|
#front-menu .daily-entry em{font-style:normal;font-size:11px;letter-spacing:1px;color:#a9c0c4}
|
|
#front-menu .daily-entry:not(.done){animation:daily-nudge 2.4s ease-in-out infinite}
|
|
#front-menu .daily-entry:hover,#front-menu .daily-entry:focus-visible{background:#f0d49d;color:#122837;border-color:#fff0c8;animation:none}
|
|
#front-menu .daily-entry:hover i,#front-menu .daily-entry:focus-visible i,#front-menu .daily-entry:hover .de-n,#front-menu .daily-entry:focus-visible .de-n,#front-menu .daily-entry:hover em,#front-menu .daily-entry:focus-visible em{color:#122837}
|
|
#front-menu .daily-entry:hover b,#front-menu .daily-entry:focus-visible b{background:#122837;color:#f0d49d}
|
|
#front-menu .daily-entry.done{border-left-color:#8dffa8}
|
|
#front-menu .daily-entry.done i{color:#8dffa8}
|
|
#front-menu .daily-entry.done b{background:#8dffa8}
|
|
@keyframes daily-nudge{0%,100%{box-shadow:0 0 0 #d7b87d00}50%{box-shadow:0 0 14px #d7b87d88}}
|
|
html.touch #front-menu .daily-entry{min-height:32px;margin-top:-16px;margin-bottom:-16px}
|
|
@media(max-width:700px){#front-menu .daily-entry .de-n,#front-menu .daily-entry em{display:none}}
|
|
/* Ponsel lanskap: bilah atas hanya 9 px; kotak margin tetap 0 tetapi tombol digeser 3 px ke bawah supaya tepi atasnya tidak terpotong bila teks versi tersembunyi. */
|
|
@media(max-height:420px){#front-menu .daily-entry{min-height:22px;margin-top:-8px;margin-bottom:-14px;padding:2px 9px 2px 8px;font-size:11px;letter-spacing:1.5px}html.touch #front-menu .daily-entry{min-height:28px;margin-top:-11px;margin-bottom:-17px}}
|
|
|
|
/* ---- Kartu tantangan: <dialog> modal memakai gaya dialog bawaan (style.css) dengan isi yang dipadatkan ---- */
|
|
.daily-dialog{width:min(580px,calc(100% - 24px));padding:16px 22px 14px}
|
|
.daily-dialog .dialog-kicker{margin-bottom:2px}
|
|
.dl-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
|
|
.daily-dialog h2{margin:4px 0 0;font-size:34px;font-style:italic;letter-spacing:1px}
|
|
.dl-state{padding:2px 10px;font-size:12px;font-weight:700;letter-spacing:2px;color:#102b37;background:var(--gold);transform:skewX(-8deg)}
|
|
.dl-state.ok{background:#8dffa8}
|
|
.daily-dialog .dl-desc{margin:6px 0 10px;font-size:16px;line-height:1.3;color:#cfdde0}
|
|
.dl-facts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:0 0 10px}
|
|
.dl-f{grid-column:span 2;min-width:0;padding:5px 9px;background:#0b1d29;border:1px solid #ffffff1c;border-left:3px solid #7fa698}
|
|
.dl-f:nth-child(n+4){grid-column:span 3}
|
|
.dl-f dt{font-size:10px;font-weight:700;letter-spacing:2px;color:#9fb3c4}
|
|
.dl-f dd{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:2px 0 0;font-size:16px;font-weight:700;letter-spacing:.5px;color:#f6eedb}
|
|
.dl-f dd img{width:24px;height:24px;object-fit:cover;border-radius:3px}
|
|
.dl-f dd small{flex-basis:100%;font-size:12px;font-weight:500;letter-spacing:0;color:#9fb3c4}
|
|
.dl-pick>span{display:block;margin:0 0 5px;font-size:10px;font-weight:700;letter-spacing:2px;color:#9fb3c4}
|
|
.dl-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
|
|
.dl-chip{display:grid;justify-items:center;gap:2px;width:62px;padding:3px 2px 4px;background:#13222d;border:1px solid #ffffff33;font:700 10px/1.1 Rajdhani,Arial,sans-serif;letter-spacing:.4px;color:#dfe9ea}
|
|
.dl-chip img{width:34px;height:34px;object-fit:cover;border-radius:3px}
|
|
.dl-chip span{max-width:58px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
.dl-chip:hover{background:#315263}
|
|
.dl-chip[aria-pressed=true]{background:var(--gold);color:#102b37;border-color:#fff0c8}
|
|
.dl-chip:disabled{opacity:.4;cursor:not-allowed}
|
|
.dl-chip:disabled:hover{background:#13222d}
|
|
.daily-dialog .dialog-buttons .dl-go{background:var(--gold);color:#132b37;border-color:#fff0c8}
|
|
.daily-dialog .dialog-buttons .dl-go:hover{background:#fae0b4}
|
|
.dl-note{display:block;margin-top:8px;font-size:12px;letter-spacing:.3px;color:#8fa3b3}
|
|
html.touch .dl-chip{width:66px;padding:5px 2px 6px}
|
|
html.touch .daily-dialog .dialog-buttons button{padding:12px 8px}
|
|
@media(max-height:560px){.daily-dialog{padding:12px 18px 10px}.daily-dialog h2{font-size:28px}.daily-dialog .dl-desc{font-size:14px;margin:4px 0 7px}.dl-f{padding:3px 8px}.dl-f dd{font-size:14px}.dl-f dd small{font-size:11px}.dl-chip{width:56px}.dl-chip img{width:28px;height:28px}.dl-chips{margin-bottom:8px}.dl-note{margin-top:5px}}
|
|
@media(max-height:420px){.daily-dialog{padding:8px 14px 8px}.daily-dialog h2{font-size:22px}.dl-state{font-size:10px}.daily-dialog .dl-desc{font-size:13px;margin:2px 0 5px}.dl-facts{gap:4px;margin-bottom:6px}.dl-f dd{font-size:13px}.dl-f dd img{width:18px;height:18px}.dl-chip{width:48px;padding:2px 1px 3px}.dl-chip img{width:22px;height:22px}.dl-chip span{max-width:46px;font-size:9px}.dl-pick>span{margin-bottom:3px}.dl-chips{gap:4px;margin-bottom:6px}.daily-dialog .dialog-buttons button{padding:5px;font-size:13px}.dl-note{display:none}}
|
|
|
|
/* ---- Layar VS: satu baris aturan di bawah bilah atas (label DIALOG RAHASIA turun satu baris bila ada) ---- */
|
|
.vs-daily{position:absolute;z-index:6;left:50%;top:calc(clamp(8px,2.4vh,22px) + clamp(22px,3.6vh + 2px,32px));transform:translateX(-50%);display:flex;align-items:baseline;gap:10px;max-width:92vw;padding:2px 14px;white-space:nowrap;background:#06121bd9;border-left:3px solid #e0bf85;border-right:3px solid #e0bf85;font-family:Rajdhani,Arial,sans-serif;animation:vs-fade .4s .5s both}
|
|
.vs-daily b{font-size:clamp(9px,1.1vh + 3px,12px);letter-spacing:3px;color:#e0bf85}
|
|
.vs-daily strong{font-size:clamp(13px,1.8vh + 4px,19px);font-style:italic;letter-spacing:2px;color:#fff0c8}
|
|
.vs-daily span{overflow:hidden;text-overflow:ellipsis;font-size:clamp(11px,1.4vh + 3px,15px);font-weight:600;color:#cfdde0}
|
|
#vs-screen.has-daily .vs-secret{top:calc(clamp(8px,2.4vh,22px) + clamp(22px,3.6vh + 2px,32px) + clamp(24px,3.6vh + 4px,34px))}
|
|
@media(max-width:760px),(max-height:420px){.vs-daily b,.vs-daily span{display:none}}
|
|
|
|
/* ---- Arena: penanda aturan di tepi atas tengah (di atas bilah HUD, tidak mengubah tata letak). Berkedip bila pemain mencoba aksi yang dimatikan aturan. ---- */
|
|
#daily-tag{position:absolute;left:50%;top:0;z-index:3;transform:translateX(-50%);padding:0 12px;white-space:nowrap;pointer-events:none;font:700 10px/12px Rajdhani,Arial,sans-serif;letter-spacing:2px;color:#f0d49d;background:#06121bcc;border:1px solid #d7b87d66;border-top:0;transition:background .12s,color .12s}
|
|
#daily-tag.hit{background:#e6c78f;color:#102b37}
|
|
.in-menu #daily-tag{display:none}
|
|
@media(max-height:500px){#daily-tag{font-size:9px;line-height:11px;letter-spacing:1.5px}}
|
|
/* Hanya ultimate: kartu dan tombol sentuh yang dimatikan diredupkan. */
|
|
body[data-daily-rule=ultimate] .skill-card:not(.ultimate),body[data-daily-rule=ultimate] .tbtn-attack,body[data-daily-rule=ultimate] .tbtn-s1,body[data-daily-rule=ultimate] .tbtn-s2{opacity:.4;filter:grayscale(.8)}
|
|
@media(prefers-reduced-motion:reduce){#daily-tag{transition:none}}
|