32 lines
3.6 KiB
CSS
32 lines
3.6 KiB
CSS
/* Tata letak tombol sentuh yang bisa diatur (RENCANA 4.6, touchlayout.js) dan tombol kecil di baris Pengaturan (RENCANA 4.7, pwa.js). */
|
|
.kf-set-btn{flex:none;margin-left:12px;min-height:36px;padding:6px 16px;border:0;border-radius:4px;background:#e8b84a;color:#101923;font:700 15px Rajdhani,system-ui,sans-serif;letter-spacing:.06em;cursor:pointer}
|
|
.kf-set-btn:hover{background:#f3cb6b}
|
|
|
|
/* Tata letak kustom pada kontrol asli: hanya elemen berkelas .tl-xf yang berubah; titik tumpu = sudut dekat tepi layar, jadi pembesaran menjauhi tepi. */
|
|
.tl-xf{transform:translate(var(--tl-x,0px),var(--tl-y,0px)) scale(var(--tl-s,1))}
|
|
.dpad.tl-xf{transform-origin:0 100%}
|
|
.action-pad.tl-xf,.extra-pad.tl-xf{transform-origin:100% 100%}
|
|
|
|
/* Editor: dialog modal layar penuh di atas Pengaturan (Pengaturan disembunyikan, tetap terbuka di bawahnya supaya game tetap beku). */
|
|
html.tl-editing #settings-panel{visibility:hidden}
|
|
html.tl-editing #settings-panel::backdrop{background:transparent;backdrop-filter:none}
|
|
#tl-editor{position:fixed;inset:0;margin:0;padding:0;width:100%;height:100%;max-width:none;max-height:none;border:0;background:transparent;box-shadow:none;overflow:hidden;color:#f9f0dc;font-family:Rajdhani,'Arial Narrow',sans-serif;touch-action:none;-webkit-user-select:none;user-select:none}
|
|
#tl-editor::backdrop{background:#031423b3;backdrop-filter:none}
|
|
#tl-editor.tl-over-menu::backdrop{background:#031423ee}
|
|
.tl-bar{position:absolute;left:0;right:0;top:0;z-index:9999;height:44px;display:flex;align-items:center;gap:8px;padding:0 max(10px,env(safe-area-inset-right)) 0 max(12px,env(safe-area-inset-left));background:#0b1b25f2;border-bottom:2px solid var(--gold,#e6c78f)}
|
|
.tl-bar strong{margin-right:auto;font-size:17px;letter-spacing:.16em;color:var(--gold,#e6c78f);white-space:nowrap}
|
|
.tl-bar button{min-height:34px;padding:0 12px;border:1px solid #8da8b153;background:#274352;color:#f9f0dc;font:700 14px Rajdhani,system-ui,sans-serif;letter-spacing:.06em;white-space:nowrap}
|
|
.tl-bar button.tl-done{border-color:transparent;background:var(--gold,#e6c78f);color:#132b37}
|
|
.tl-stage{position:absolute;inset:0;touch-action:none}
|
|
.tl-hint{position:absolute;left:50%;top:50%;z-index:1;margin:0;max-width:min(92%,430px);transform:translate(-50%,-50%);text-align:center;font-size:clamp(13px,3.4vh,17px);line-height:1.5;color:#dfeaec;text-shadow:0 1px 4px #000c;pointer-events:none}
|
|
.tl-clone,.tl-clone *{pointer-events:none!important}
|
|
.tl-box{position:absolute;z-index:2;box-sizing:border-box;border:2px dashed #e6c78fcc;border-radius:12px;background:#e6c78f1c;cursor:grab;touch-action:none}
|
|
.tl-box.on{border-style:solid;border-color:#fff3d4;background:#e6c78f33;cursor:grabbing}
|
|
.tl-box:focus-visible{outline:2px solid #fff3d4;outline-offset:2px}
|
|
.tl-name{position:absolute;left:50%;top:3px;transform:translateX(-50%);padding:0 7px;border-radius:9px;background:var(--gold,#e6c78f);color:#101923;font-size:11px;font-weight:700;letter-spacing:.12em;line-height:16px;white-space:nowrap;pointer-events:none}
|
|
.tl-grip{position:absolute;top:-2px;width:30px;height:30px;border:2px solid #101923;border-radius:50%;box-shadow:0 2px 6px #0009;touch-action:none;cursor:nesw-resize;background:var(--gold,#e6c78f) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 13 13 3M8 3h5v5M3 8v5h5' fill='none' stroke='%23101923' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
|
|
.tl-grip:before{content:'';position:absolute;inset:-9px}
|
|
.tl-grip.tr{right:-2px}
|
|
.tl-grip.tl{left:-2px;cursor:nwse-resize;transform:scaleX(-1)}
|
|
@media(max-height:420px){.tl-hint{font-size:13px}}
|