diff --git a/index.html b/index.html index 388e80c..b899255 100644 --- a/index.html +++ b/index.html @@ -2413,9 +2413,11 @@ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); border: 3px solid #e94560; border-radius: 20px; - padding: 25px 30px; + padding: 20px 24px; max-width: 480px; width: 95%; + max-height: 90vh; + overflow-y: auto; color: white; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; box-shadow: 0 0 40px rgba(233, 69, 96, 0.4); @@ -2495,12 +2497,12 @@ } .combat-log { background: rgba(0, 0, 0, 0.5); - border-radius: 10px; - padding: 12px 15px; - height: 100px; + border-radius: 8px; + padding: 8px 12px; + height: 70px; overflow-y: auto; - margin-bottom: 18px; - font-size: 13px; + margin-bottom: 12px; + font-size: 12px; border: 1px solid #333; } .combat-log-entry { @@ -2533,37 +2535,49 @@ .combat-skills { display: grid; grid-template-columns: repeat(2, 1fr); - gap: 10px; - margin-bottom: 12px; + gap: 8px; + margin-bottom: 10px; } .skill-btn { background: linear-gradient(135deg, #0f3460 0%, #16213e 100%); border: 2px solid #e94560; color: white; - padding: 14px 10px; + padding: 8px 6px; border-radius: 10px; cursor: pointer; transition: all 0.2s; text-align: center; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + min-height: 70px; } .skill-btn:hover:not(:disabled) { background: linear-gradient(135deg, #e94560 0%, #c73e54 100%); - transform: scale(1.03); - box-shadow: 0 0 15px rgba(233, 69, 96, 0.4); + transform: scale(1.02); + box-shadow: 0 0 12px rgba(233, 69, 96, 0.4); } .skill-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; } + .skill-btn .skill-icon-wrapper { + margin-bottom: 3px; + } + .skill-btn .skill-icon-wrapper img { + width: 28px; + height: 28px; + } .skill-btn .skill-name { font-weight: bold; - display: block; - font-size: 13px; - margin-bottom: 3px; + font-size: 11px; + margin-bottom: 2px; + line-height: 1.2; } .skill-btn .skill-cost { - font-size: 11px; + font-size: 10px; color: #4ecdc4; } .skill-btn .skill-cost.free { @@ -2585,11 +2599,12 @@ background: #333; border: 2px solid #555; color: #aaa; - padding: 12px; + padding: 10px; border-radius: 8px; cursor: pointer; - font-size: 14px; + font-size: 13px; transition: all 0.2s; + margin-top: 8px; } .combat-flee-btn:hover { background: #444; @@ -14745,14 +14760,15 @@ if (baseSkill.type === 'utility') return; const displayName = skillInfo?.displayName || hardcodedSkill?.name || dbSkill?.name || skillId; - const iconHtml = renderSkillIcon(skillId, 'class', playerStats.class, 20); + const iconHtml = renderSkillIcon(skillId, 'class', playerStats.class, 28); const mpCost = hardcodedSkill?.mpCost || dbSkill?.mpCost || 0; const btn = document.createElement('button'); btn.className = 'skill-btn'; btn.dataset.skillId = skillId; btn.innerHTML = ` - ${iconHtml} ${displayName} + ${iconHtml} + ${displayName} ${mpCost > 0 ? mpCost + ' MP' : 'Free'} `; btn.onclick = () => executePlayerSkill(skillId); @@ -14767,7 +14783,8 @@ btn.dataset.skillId = 'admin_banish'; btn.style.borderColor = '#ff6b35'; btn.innerHTML = ` - ${adminSkill.icon} ${adminSkill.name} + ${adminSkill.icon} + ${adminSkill.name} Admin `; btn.onclick = () => executePlayerSkill('admin_banish');