93 lines
6.3 KiB
CSS
93 lines
6.3 KiB
CSS
/* Minegrechka Game Styles - v1.2 */
|
||
html, body { margin:0; padding:0; width:100%; height:100%; overflow:hidden; background:#111; font-family: system-ui, sans-serif; user-select:none; -webkit-user-select:none; touch-action:none; }
|
||
#game { position:absolute; top:0; left:0; right:0; bottom:0; background:#87CEEB; overflow:hidden; }
|
||
canvas { display:block; width:100%; height:100%; image-rendering:pixelated; }
|
||
#controls { position:absolute; left:0; right:0; bottom:0; height:140px; background:#222; border-top:4px solid #444; z-index:100; display:none; }
|
||
|
||
/* Стили для кнопок управления (.btn вместо .cbtn для совместимости с index.html) */
|
||
.btn { position:absolute; top:50%; transform:translateY(-50%); width:74px; height:74px; border-radius:14px;
|
||
background:#333; border:3px solid #555; color:#fff; font-size:32px; display:flex; align-items:center; justify-content:center;
|
||
box-shadow:0 7px 0 #111; pointer-events:auto; z-index:101; }
|
||
.btn:active { transform:translateY(-46%); box-shadow:0 3px 0 #111; background:#444; }
|
||
#left { left:18px; }
|
||
#right { left:102px; }
|
||
#down { left:186px; background:#2980b9; border-color:#3498db; }
|
||
#jump { right:18px; background:#d35400; border-color:#e67e22; }
|
||
|
||
/* Скрываем панель на десктопе (широкие экраны) */
|
||
@media (min-width: 769px) {
|
||
#controls { display: none !important; }
|
||
}
|
||
|
||
/* Показываем панель на мобильных устройствах (узкие экраны) */
|
||
@media (max-width: 768px) {
|
||
#controls { display: block !important; }
|
||
}
|
||
|
||
.ui { position:absolute; inset:0; pointer-events:none; z-index:20; }
|
||
.pe { pointer-events:auto; }
|
||
|
||
#stats { position:absolute; left:10px; top:10px; color:#fff; font-weight:800; font-size:14px;
|
||
background: rgba(0,0,0,0.55); padding:8px; border-radius:10px; text-shadow:1px 1px 0 #000; }
|
||
#stats .row{ display:flex; gap:10px; align-items:center; }
|
||
|
||
.rbtn { position:absolute; right:10px; width:52px; height:52px; border-radius:12px;
|
||
display:flex; align-items:center; justify-content:center; border:2px solid rgba(255,255,255,0.9);
|
||
font-size:24px; cursor:pointer; pointer-events:auto; box-shadow:0 4px 0 rgba(0,0,0,0.5); }
|
||
.rbtn:active { transform: translateY(4px); box-shadow:none; }
|
||
#modeBtn { top:10px; background:#f39c12; }
|
||
#saveBtn { top:10px; right:70px !important; background:#27ae60; }
|
||
#resetBtn { top:10px; right:130px !important; background:#e74c3c; }
|
||
#craftBtn { top:74px; right:10px !important; background:#9b59b6; }
|
||
#invToggle { top:74px; right:70px !important; background:#3498db; }
|
||
#chatToggle { display: none !important; }
|
||
#chatPanel { display: none !important; }
|
||
|
||
#hotbar { position:absolute; left:50%; transform:translateX(-50%); bottom:10px; display:flex; gap:6px;
|
||
background: rgba(0,0,0,0.60); padding:6px; border-radius:12px; pointer-events:auto;
|
||
overflow-x: auto; overflow-y: hidden; max-width: 80%; }
|
||
|
||
/* Поднимаем hotbar на тач-устройствах, чтобы не перекрывать кнопки */
|
||
body.touch-device #hotbar {
|
||
bottom: 150px;
|
||
}
|
||
.slot { width:38px; height:38px; border:2px solid rgba(255,255,255,0.22); border-radius:10px;
|
||
position:relative; overflow:hidden; cursor:pointer; background: rgba(255,255,255,0.07);
|
||
display:flex; align-items:center; justify-content:center; font-size:18px; }
|
||
.slot.sel { border-color:#f1c40f; box-shadow: 0 0 0 2px rgba(241,196,15,0.18) inset; }
|
||
.count { position:absolute; right:3px; bottom:1px; font-size:10px; color:#fff; font-weight:900; text-shadow:1px 1px 0 #000; }
|
||
|
||
/* Craft modal */
|
||
#craftPanel { display:none; position:absolute; left:14px; right:14px; top:14px; bottom:14px;
|
||
background: rgba(10,10,12,0.92); border:2px solid rgba(255,255,255,0.85); border-radius:14px;
|
||
pointer-events:auto; padding:12px; overflow:auto; z-index: 200; }
|
||
|
||
/* Inventory modal */
|
||
#inventoryPanel { display:none; position:absolute; left:50%; top:50%; transform: translate(-50%, -50%);
|
||
width: 420px; max-width: 90%; background: rgba(10,10,12,0.92); border:2px solid rgba(255,255,255,0.85);
|
||
border-radius:14px; pointer-events:auto; padding:12px; z-index: 200; }
|
||
#inventoryPanel .top { display:flex; justify-content:space-between; align-items:center; color:#fff; margin-bottom:10px; }
|
||
#inventoryGrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 10px; }
|
||
.inv-slot { width: 48px; height: 48px; border: 2px solid rgba(255,255,255,0.22); border-radius: 8px;
|
||
position: relative; overflow: hidden; cursor: pointer; background: rgba(255,255,255,0.07);
|
||
display: flex; align-items: center; justify-content: center; font-size: 24px; }
|
||
.inv-slot.sel { border-color: #f1c40f; box-shadow: 0 0 0 2px rgba(241,196,15,0.18) inset; }
|
||
.inv-count { position: absolute; right: 3px; bottom: 1px; font-size: 12px; color: #fff;
|
||
font-weight: 900; text-shadow: 1px 1px 0 #000; background: rgba(0,0,0,0.5); padding: 1px 3px; border-radius: 4px; }
|
||
.equipped-indicator { position: absolute; top: 2px; right: 2px; font-size: 14px; color: #2ecc71; font-weight: 900; text-shadow: 1px 1px 0 #000; }
|
||
#craftPanel .top { display:flex; justify-content:space-between; align-items:center; color:#fff; margin-bottom:10px; }
|
||
#craftPanel .close { background:#c0392b; border:none; color:#fff; font-weight:900; padding:8px 10px; border-radius:10px; cursor:pointer; }
|
||
#inventoryPanel .close { background:#c0392b; border:none; color:#fff; font-weight:900; padding:8px 10px; border-radius:10px; cursor:pointer; }
|
||
.recipe { display:flex; align-items:center; gap:10px; padding:10px; border-radius:12px;
|
||
background: rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.10); margin-bottom:8px; }
|
||
.ricon { width:32px; height:32px; border-radius:8px; background-size:cover; image-rendering:pixelated; }
|
||
.rinfo { flex:1; }
|
||
.rname { color:#fff; font-weight:900; font-size:14px; }
|
||
.rcost { color:#bbb; font-size:11px; line-height:1.25; }
|
||
.rcraft { background:#2ecc71; border:none; color:#fff; font-weight:900; padding:8px 10px; border-radius:10px; cursor:pointer; }
|
||
.rcraft:disabled { background:#444; color:#888; cursor:not-allowed; }
|
||
|
||
#death { display:none; position:absolute; inset:0; background: rgba(60,0,0,0.88);
|
||
z-index:200; color:#fff; pointer-events:auto; align-items:center; justify-content:center; flex-direction:column; gap:12px; }
|
||
#death button { padding:12px 18px; font-size:18px; font-weight:900; border:none; border-radius:12px; cursor:pointer; }
|