69 lines
6.6 KiB
CSS
69 lines
6.6 KiB
CSS
/* Kode tantangan dan kebiasaan bermain (challenge.js, RENCANA 7.5 dan 7.6). Tinggi jendela terendah yang didukung 520 px (ponsel lanskap 844x390 juga dijaga):
|
|
tombol-tombol kecil memakai ruang yang sudah ada (absolut di bilah atas, atau di kolom kanan yang lebih rendah dari kolom kirinya), sehingga tinggi layar tidak bertambah. */
|
|
|
|
/* ---- Menu utama: tombol KODE TANTANGAN di sebelah TUTORIAL (pojok kiri atas), di luar alur bilah .home-top ---- */
|
|
#front-menu .home-top{position:relative}
|
|
#front-menu .ch-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 #67e4dd66;border-left:3px solid #67e4dd;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~.ch-entry{left:calc(4.5% + 142px)}
|
|
#front-menu .ch-entry>*{transform:skewX(7deg)}
|
|
#front-menu .ch-entry i{font-style:normal;font-size:12px;color:#67e4dd}
|
|
#front-menu .ch-entry:hover,#front-menu .ch-entry:focus-visible{background:#9be9e2;color:#102734;border-color:#d8fffb;transform:translateY(-50%) skewX(-7deg) translateX(4px)}
|
|
#front-menu .ch-entry:hover i,#front-menu .ch-entry:focus-visible i{color:#102734}
|
|
@media(max-width:560px){#front-menu .ch-entry{font-size:11px;letter-spacing:1.5px;padding:3px 9px 3px 7px}#front-menu .tut-entry~.ch-entry{left:calc(4.5% + 112px)}}
|
|
html.touch #front-menu .ch-entry{min-height:30px}
|
|
|
|
/* ---- Layar arena: baris ATURAN / SALIN KODE / TAUTAN di kolom kanan .match-rules (kolom kiri berisi tombol tingkat dan lebih tinggi, jadi tinggi baris tidak naik) ---- */
|
|
#front-menu .ch-tools{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:5px;margin-top:6px;letter-spacing:0;text-align:left}
|
|
#front-menu .ch-code{display:none;padding:4px 8px;font:700 13px/1 Rajdhani,Arial,sans-serif;letter-spacing:2px;color:#cfe9e2;background:#07151d99;border:1px dashed #9fd3c455;user-select:all}
|
|
@media(min-width:900px){#front-menu .ch-code{display:inline-block}}
|
|
#front-menu .ch-btn{margin:0;padding:4px 9px;font:700 11px/1.15 Rajdhani,Arial,sans-serif;letter-spacing:1.4px;color:#e6ecea;background:#13303d;border:1px solid #7dada177;cursor:pointer;white-space:nowrap}
|
|
#front-menu .ch-btn small{display:inline;margin:0 5px 0 0;font-size:9px;letter-spacing:1px;color:#9fb8bc}
|
|
#front-menu .ch-btn:hover,#front-menu .ch-btn:focus-visible{background:#e6c78f;color:#102734;border-color:#fff0c8}
|
|
#front-menu .ch-btn:hover small,#front-menu .ch-btn:focus-visible small{color:#35505a}
|
|
#front-menu .ch-btn.on{border-color:#e6c78f;color:#f3d796;background:#2a3b3a}
|
|
#front-menu .ch-btn.on:hover,#front-menu .ch-btn.on:focus-visible{color:#102734;background:#e6c78f}
|
|
@media(max-height:420px){#front-menu .ch-tools{margin-top:3px;gap:4px}#front-menu .ch-btn{padding:2px 7px;font-size:10px}#front-menu .ch-btn small{font-size:8px}#front-menu .ch-code{padding:2px 6px;font-size:11px}}
|
|
@media(pointer:coarse) and (min-height:421px){#front-menu .ch-btn{min-height:26px}}
|
|
|
|
/* ---- Layar hasil: SALIN KODE / TAUTAN di pojok kanan atas kepala hasil (tombol STATISTIK ada di pojok kanan bawah) ---- */
|
|
#front-menu .rs-head{position:relative}
|
|
#front-menu .ch-share{position:absolute;right:0;top:0;z-index:2;display:flex;gap:6px;animation:rs-up .5s .9s both}
|
|
@media(max-width:700px){#front-menu .ch-share .ch-btn[data-ch=link]{display:none}}
|
|
|
|
/* ---- HUD: penanda tantangan tepat di bawah kolom tengah (jam), ikut posisi bilah atas di semua ukuran ---- */
|
|
.ch-badge{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:6px;padding:2px 10px;white-space:nowrap;font:700 10px/1.35 Rajdhani,Arial,sans-serif;letter-spacing:1.8px;color:#102734;background:#e6c78f;border:1px solid #fff0c8;box-shadow:0 2px 6px #0007}
|
|
@media(max-width:950px){.ch-badge{font-size:9px;letter-spacing:1.2px;padding:1px 7px;margin-top:4px}}
|
|
@media(max-height:500px) and (min-width:620px){.ch-badge{margin-top:3px}}
|
|
@media(max-width:620px){.ch-badge{font-size:8px;letter-spacing:.8px;padding:1px 5px}}
|
|
|
|
/* ---- Dialog Masukkan kode / undangan ---- */
|
|
#ch-dialog{width:min(470px,calc(100% - 24px));padding:22px 26px 20px}
|
|
#ch-dialog h2{font-size:30px;margin:6px 0 4px}
|
|
#ch-dialog .ch-lead{margin:4px 0 12px;font-size:15px;line-height:1.4}
|
|
#ch-dialog .ch-field{display:flex;align-items:center;gap:12px}
|
|
#ch-dialog .ch-field>span{flex:none;font-size:12px;font-weight:700;letter-spacing:2px;color:var(--gold)}
|
|
#ch-input{flex:1;min-width:0;padding:8px 12px;font:700 26px/1.1 Rajdhani,Arial,sans-serif;letter-spacing:5px;text-transform:uppercase;color:#fff8e8;background:#0a1620;border:1px solid #8da8b1aa;border-radius:0}
|
|
#ch-input::placeholder{color:#5f7782;letter-spacing:5px}
|
|
#ch-input:focus{border-color:var(--gold)}
|
|
#ch-dialog .ch-preview{min-height:76px;margin:12px 0 4px;padding:9px 12px;font-size:15px;line-height:1.4;color:#b9cbd0;background:#ffffff0a;border-left:3px solid #ffffff2e}
|
|
#ch-dialog .ch-preview.ok{border-left-color:#67e4dd;color:#e8f6f1}
|
|
#ch-dialog .ch-preview.err{border-left-color:#ff9a7a;color:#ffc7b8}
|
|
#ch-dialog .ch-vs{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;font-size:22px;line-height:1.15}
|
|
#ch-dialog .ch-vs b,#ch-dialog .ch-line b{color:#fff0c8}
|
|
#ch-dialog .ch-vs i{font-style:normal;font-size:13px;letter-spacing:2px;color:var(--gold)}
|
|
#ch-dialog .ch-actions{display:flex;align-items:center;gap:12px;margin-top:10px}
|
|
#ch-dialog .ch-actions .primary-button{width:auto;flex:1;margin:0}
|
|
#ch-dialog .ch-actions .primary-button:disabled{background:#6d6e66;color:#2a3338;cursor:not-allowed}
|
|
#ch-dialog .ch-actions .text-button{margin:0;white-space:nowrap}
|
|
@media(max-height:480px){#ch-dialog{padding:14px 22px 12px}#ch-dialog h2{font-size:24px;margin:2px 0}#ch-dialog .ch-lead{display:none}#ch-input{font-size:22px;padding:6px 10px}#ch-dialog .ch-preview{min-height:60px;margin-top:8px;padding:6px 10px;font-size:14px}#ch-dialog .ch-vs{font-size:19px}}
|
|
|
|
/* ---- Koleksi: "Kebiasaan bermainmu" (disisipkan challenge.js sebelum daftar pencapaian) ---- */
|
|
.hb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;margin:12px 0 0}
|
|
.hb-grid>div{min-width:0;padding:8px 12px;background:#101c26;border:1px solid #ffffff1c;border-radius:8px}
|
|
.hb-grid dt{font-size:13px;letter-spacing:.06em;color:#9fb3c4;text-transform:uppercase}
|
|
.hb-grid dd{margin:2px 0 0;font:700 20px/1.15 Rajdhani,Arial,sans-serif;color:#f6eedb;overflow-wrap:anywhere}
|
|
.hb-grid dd small{display:block;margin-top:1px;font-size:14px;font-weight:600;color:#8fa3b3}
|
|
|
|
/* ---- About: catatan privasi satu baris ---- */
|
|
.about-panel>small.ch-about{margin-top:3px;line-height:1.45;color:#8fb0b6}
|