98 lines
8.4 KiB
CSS
98 lines
8.4 KiB
CSS
/* Bantuan dan aksesibilitas (access.js, RENCANA 4.2 dan 4.3).
|
|
Semua aturan di luar kotak Pengaturan hanya berlaku bila access.js memberi kelas pada <html> (acc-t, acc-cb, acc-hc, acc-calm),
|
|
jadi tanpa opsi aktif tampilan sama persis dengan sebelumnya. Tinggi minimum yang didukung tetap 520 px. */
|
|
|
|
/* ---- Kotak lipat di panel Pengaturan ---- */
|
|
#settings-panel{overscroll-behavior:contain}
|
|
.acc-box{margin:14px 0 4px;border:1px solid #98abb73a;background:#0e1d27}
|
|
.acc-head{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;border:0;background:#1a3441;color:#f9f0dc;font:700 17px Rajdhani,Arial,sans-serif;letter-spacing:.4px;text-align:left}
|
|
.acc-head:hover{background:#244858}
|
|
.acc-title{flex:1}
|
|
.acc-badge{padding:1px 8px;border-radius:9px;background:var(--gold);color:#132b37;font:700 12px Rajdhani,Arial,sans-serif;font-style:normal;letter-spacing:.5px}
|
|
.acc-badge[hidden],.acc-body[hidden],.acc-reset[hidden]{display:none}
|
|
.acc-chev{font-size:14px;transition:transform .15s}
|
|
.acc-head[aria-expanded=true] .acc-chev{transform:rotate(180deg)}
|
|
.acc-body{padding:0 14px 12px}
|
|
.acc-h{margin:14px 0 0;font-size:12px;font-weight:700;letter-spacing:2px;color:var(--gold);text-transform:uppercase}
|
|
.acc-row{gap:12px}
|
|
.acc-txt{flex:1;min-width:0}
|
|
.acc-txt label{display:block;cursor:pointer}
|
|
.acc-ctl{flex:none;display:flex;align-items:center}
|
|
.acc-ctl select{max-width:170px}
|
|
.acc-reset{display:block;margin-top:4px;padding:1px 0;border:0;background:none;color:#8fe3d0;font:700 13px Rajdhani,Arial,sans-serif;text-decoration:underline;cursor:pointer}
|
|
.acc-foot{display:flex;margin-top:12px}
|
|
.acc-foot button{flex:1;border:1px solid #8da8b153;background:#274352;padding:8px;font-size:15px;font-weight:700}
|
|
#settings-panel .acc-live{margin:6px 0 0;min-height:1.3em;font-size:13px;line-height:1.3;color:#8fe3d0}
|
|
@media(max-height:760px){.acc-box{margin-top:8px}.acc-h{margin-top:8px}.acc-foot{margin-top:8px}}
|
|
|
|
/* ---- Ukuran teks (Normal/Besar/Sangat besar): variabel CSS dipakai lewat zoom pada elemen teks saja ----
|
|
--acc-zh = teks kecil HUD (faktor lebih kecil supaya header dan dek jurus tidak menyempitkan arena di tinggi 520 px),
|
|
--acc-z = teks kecil menu, layar VS, hasil, dan cerita, --acc-zm = teks sedang (panel, kutipan, daftar).
|
|
zoom ikut mengubah ukuran kotak, jadi aturan media query lama (ukuran per tinggi/lebar jendela) tetap berlaku lalu dikalikan. */
|
|
:root{--acc-z:1;--acc-zh:1;--acc-zm:1}
|
|
html.acc-text-1{--acc-z:1.25;--acc-zh:1.15;--acc-zm:1.15}
|
|
html.acc-text-2{--acc-z:1.5;--acc-zh:1.3;--acc-zm:1.3}
|
|
html.acc-t :is(
|
|
.class-tag,.bar-caption,.fighter-mark,.ult-meter,.mode-kicker,.match-rule,.deck-heading,.skill-name,.training-data>div>span,.training-data strong small,.reset-hint,.stage-sign small,.form-timer,#round-call small
|
|
){zoom:var(--acc-zh)}
|
|
/* Tombol jeda/pengaturan diposisikan mutlak tepat di bawah kolom tengah header; geser sebesar pertumbuhan baris kicker, jam, dan skor. */
|
|
html.acc-t .match-actions{transform:translate(-50%,calc(31px*(var(--acc-zh) - 1)))}
|
|
html.acc-t :is(
|
|
.eyebrow,.build-tag,.home-title>span,.home-nav small,.home-nav .nav-index,.home-caption small,.home-footer,.menu-back span,.selection-steps,.side-tag,.fighter-copy>span,.fighter-copy p,.fighter-copy small,.roster-caption strong,.roster-caption>span,.roster-tile>span,.fighter-moves>span,.fighter-moves b,.roster-notice,.menu-footer,.arena-window small,.arena-number,.arena-day,.arena-tile span,.match-rules,.about-fighters p,.about-stats,.about-panel>small,.result-copy>small,
|
|
.vs-top,.vs-who,.vs-tag,.vs-skip,.vs-perk,.vs-secret,.rs-kicker,.rs-plate small,.rs-quote cite,.rs-cols h3,.rs-total,.rs-stats dt,.st-kicker,.st-gelar small,.st-skip,.st-face figcaption
|
|
){zoom:var(--acc-z)}
|
|
html.acc-t :is(
|
|
#settings-panel .setting-row,#settings-panel .volume-row,#settings-panel .dialog-buttons,#settings-panel .controls-help,#settings-panel>p,#settings-panel .acc-head,#settings-panel .acc-h,#settings-panel .acc-foot,#settings-panel .acc-live,
|
|
#pause-panel .pause-main>p,#pause-panel .move-body,.meta-panel,#shop-chip,.meta-toast,.brand-toast,
|
|
.home-title p,.about-panel>p,.vs-quote,.rs-quote p,.rs-coins li,.st-line
|
|
){zoom:var(--acc-zm)}
|
|
/* Nama jurus boleh turun baris dan tetap di tengah kartu supaya tidak menabrak jurus di sebelahnya. */
|
|
html.acc-t .skill-name{white-space:normal;text-align:center;line-height:1.1}
|
|
|
|
/* ---- Mode buta warna: filter SVG (access.js) pada arena + HUD; indikator non-warna: bar HP lawan bergaris, lapisan cadangan bertitik ---- */
|
|
html.acc-cb-pro #game-shell{filter:url(#acc-cb-pro)}
|
|
html.acc-cb-deu #game-shell{filter:url(#acc-cb-deu)}
|
|
html.acc-cb-tri #game-shell{filter:url(#acc-cb-tri)}
|
|
html.acc-cb .life-fill::after{content:'';position:absolute;inset:0;pointer-events:none}
|
|
html.acc-cb .fighter-two .life-fill::after{background:repeating-linear-gradient(135deg,#0000003d 0 3px,transparent 3px 7px)}
|
|
html.acc-cb .life-fill.reserve-fill::after{background:radial-gradient(circle,#00000055 1.2px,transparent 1.8px) 0 0/6px 6px}
|
|
html.acc-cb .fighter-two .life-fill.reserve-fill::after{background:radial-gradient(circle,#00000055 1.2px,transparent 1.8px) 0 0/6px 6px,repeating-linear-gradient(135deg,#0000003d 0 3px,transparent 3px 7px)}
|
|
/* Meter ultimate: tanda bentuk di depan nama menurut keadaan (siap, mode aktif), selain teks SIAP/waktu. */
|
|
html.acc-cb .ult-meter[data-state=ready] .ult-name::before{content:'\2605\00a0'}
|
|
html.acc-cb .ult-meter[data-state=mode] .ult-name::before{content:'\25B6\00a0'}
|
|
|
|
/* ---- Kontras tinggi untuk HUD: teks putih berbingkai hitam, bingkai bar dan kartu putih, latar gelap di belakang teks kecil ---- */
|
|
html.acc-hc .vignette{background:linear-gradient(180deg,#000000d6,#00000070 22%,transparent 34%,transparent 62%,#000000c4)}
|
|
html.acc-hc.touch .vignette{background:linear-gradient(180deg,#000000d6,#00000070 22%,transparent 34%)}
|
|
html.acc-hc :is(.class-tag,.bar-caption,.fighter-mark,.mode-kicker,.match-rule,.deck-heading,.skill-name,.training-data>div>span,.training-data strong small,.reset-hint,.stage-sign>span,.stage-sign small,.ult-meter,.form-timer){color:#fff;text-shadow:0 0 3px #000,0 0 3px #000,1px 1px 0 #000,-1px -1px 0 #000}
|
|
html.acc-hc :is(.bar-caption span,.fighter-mark span,.class-tag,.mode-kicker,.match-rule span,.deck-heading span,.deck-heading b,.skill-name,.ult-name,.ult-val){background:#000000b8;padding:0 4px}
|
|
html.acc-hc :is(.name-row h1,.name-row h2){text-shadow:3px 3px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000}
|
|
html.acc-hc :is(.match-clock,.combo-counter,.announcement,#round-call strong,#round-call small){text-shadow:-2px -2px 0 #000,2px -2px 0 #000,-2px 2px 0 #000,2px 2px 0 #000,0 0 12px #000}
|
|
html.acc-hc .life-frame{border:2px solid #fff;background:#000}
|
|
html.acc-hc .life-track{background:#262626}
|
|
html.acc-hc .ult-track{border-color:#fff;background:#000}
|
|
html.acc-hc .portrait-frame{border-color:#fff}
|
|
html.acc-hc .skill-art{border:2px solid #fff}
|
|
html.acc-hc .skill-card.on-cooldown .skill-art{border-color:#9aa6ab}
|
|
html.acc-hc .skill-card kbd{background:#fff;color:#000}
|
|
html.acc-hc .combo-rank b{-webkit-text-stroke:2px #000}
|
|
html.acc-hc dialog{background:#0a141c;border-color:#fff}
|
|
html.acc-hc :is(.setting-row small,.mv-row small,.mv-keys,.mv-sec h3 small,.mv-note,.controls-help,.dialog-kicker){color:#e3edf0}
|
|
|
|
/* ---- Kurangi gerakan: cermin aturan prefers-reduced-motion yang sudah ada di berkas lain, supaya pilihan "Selalu kurangi" berlaku sama ---- */
|
|
html.acc-calm .acc-chev{transition:none}
|
|
html.acc-calm #front-menu *,html.acc-calm #round-call strong{animation:none!important;transition:none!important}
|
|
html.acc-calm .menu-fullscreen.hinted{animation:none}
|
|
html.acc-calm .roster-tile.picked,html.acc-calm #player-preview.picked .selection-art,html.acc-calm #enemy-preview.picked .selection-art{animation:none;filter:brightness(1.35)}
|
|
html.acc-calm .hc-stripes,html.acc-calm .hc-slot,html.acc-calm .brand-toast{animation:none!important}
|
|
html.acc-calm .brand-toast{opacity:1}
|
|
html.acc-calm #vs-screen,html.acc-calm #vs-screen *{animation:none!important}
|
|
html.acc-calm #vs-screen:after{display:none}
|
|
html.acc-calm .vs-timer i{transform:none}
|
|
html.acc-calm .rs *{animation:none!important}
|
|
html.acc-calm .rs-confetti,html.acc-calm .st-confetti{display:none}
|
|
html.acc-calm .combo-rank{transition:none}
|
|
html.acc-calm .ult-meter .ult-track,html.acc-calm .ult-meter .ult-fill,html.acc-calm .ult-meter .ult-fill:after,html.acc-calm .ult-meter .ult-val{animation:none!important}
|
|
html.acc-calm #story-screen,html.acc-calm #story-screen *{animation:none!important}
|
|
html.acc-calm .st-timer i{transform:none}
|