diff --git a/css/styles.css b/css/styles.css index c9278f4..7af9422 100644 --- a/css/styles.css +++ b/css/styles.css @@ -377,40 +377,47 @@ body { display: flex; flex-direction: column; justify-content: space-between; - min-height: 220px; + min-height: 140px; position: relative; cursor: pointer; border-width: 1.5px; + padding: 1rem; + border-radius: var(--radius-md); + transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease, border-color 0.2s ease; +} + +.avatar-card:hover { + transform: translateY(-4px); } /* 5-Star Card Theme */ .avatar-card.card-rarity-5 { - border-color: rgba(251, 191, 36, 0.4); - background: linear-gradient(145deg, rgba(251, 191, 36, 0.05) 0%, rgba(18, 24, 38, 0.8) 100%); + border-color: rgba(251, 191, 36, 0.45); + background: linear-gradient(145deg, rgba(251, 191, 36, 0.08) 0%, rgba(18, 24, 38, 0.95) 100%); } .avatar-card.card-rarity-5:hover { - border-color: rgba(251, 191, 36, 0.8); - box-shadow: var(--glow-gold); + border-color: rgba(251, 191, 36, 0.9); + box-shadow: 0 8px 24px rgba(251, 191, 36, 0.25), 0 0 15px rgba(251, 191, 36, 0.15); } /* 4-Star Card Theme */ .avatar-card.card-rarity-4 { - border-color: rgba(192, 132, 252, 0.35); - background: linear-gradient(145deg, rgba(192, 132, 252, 0.05) 0%, rgba(18, 24, 38, 0.8) 100%); + border-color: rgba(192, 132, 252, 0.4); + background: linear-gradient(145deg, rgba(192, 132, 252, 0.08) 0%, rgba(18, 24, 38, 0.95) 100%); } .avatar-card.card-rarity-4:hover { - border-color: rgba(192, 132, 252, 0.8); - box-shadow: var(--glow-purple); + border-color: rgba(192, 132, 252, 0.9); + box-shadow: 0 8px 24px rgba(192, 132, 252, 0.25), 0 0 15px rgba(192, 132, 252, 0.15); } .avatar-badge-rarity { position: absolute; - top: 0.85rem; - right: 0.85rem; - font-size: 0.75rem; - padding: 0.15rem 0.5rem; + top: 0.75rem; + right: 0.75rem; + font-size: 0.725rem; + padding: 0.15rem 0.45rem; border-radius: var(--radius-sm); font-weight: 800; letter-spacing: 0.05em; @@ -432,6 +439,12 @@ body { display: flex; gap: 0.85rem; align-items: center; + margin-right: 2.2rem; +} + +.avatar-meta-details { + flex: 1; + min-width: 0; } /* Circular / Rounded Avatar Portrait */ @@ -523,6 +536,53 @@ body { font-weight: 600; } +/* Avatar Card Footer & Status */ +.avatar-card-footer { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 0.85rem; + padding-top: 0.65rem; + border-top: 1px solid rgba(255, 255, 255, 0.08); +} + +.avatar-status-pill { + display: inline-flex; + align-items: center; + gap: 0.45rem; + background: rgba(0, 0, 0, 0.45); + padding: 0.25rem 0.6rem; + border-radius: 6px; + border: 1px solid var(--border-color); + font-size: 0.775rem; + font-weight: 700; +} + +.avatar-lvl { + color: var(--accent-cyan); +} + +.avatar-eidolon { + color: #94a3b8; + background: rgba(255, 255, 255, 0.08); + padding: 0.1rem 0.4rem; + border-radius: 4px; +} + +.avatar-eidolon.e6 { + color: #0b0d14; + background: linear-gradient(135deg, #fbbf24, #f59e0b); + box-shadow: 0 0 10px rgba(251, 191, 36, 0.6); + font-weight: 900; +} + +.btn-card-quick-max { + padding: 0.25rem 0.65rem; + font-size: 0.75rem; + font-weight: 800; + border-radius: 6px; +} + /* Eidolon Selector */ .eidolon-selector { display: flex; @@ -537,17 +597,18 @@ body { .eidolon-buttons { display: flex; - gap: 0.3rem; + gap: 0.35rem; + flex-wrap: wrap; } .eidolon-pip { - width: 28px; - height: 28px; + width: 32px; + height: 32px; border-radius: 6px; border: 1.5px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.05); color: #cbd5e1; - font-size: 0.8rem; + font-size: 0.825rem; font-weight: 800; cursor: pointer; display: flex; @@ -573,12 +634,20 @@ body { } .modal-eidolon-pip { - width: 38px; - height: 38px; - font-size: 0.95rem; + width: 44px; + height: 44px; + font-size: 1rem; + font-weight: 900; border-radius: 8px; } +.modal-eidolon-pip.active { + background: linear-gradient(135deg, #f59e0b, #fbbf24); + border-color: #fbbf24; + color: #0b0d14; + box-shadow: 0 0 14px rgba(251, 191, 36, 0.6); +} + /* ========================================================================== Party / Lineup Builder ========================================================================== */ @@ -805,7 +874,7 @@ input:checked + .slider:before { display: none; align-items: center; justify-content: center; - z-index: 999; + z-index: 10000; padding: 1rem; } @@ -817,10 +886,15 @@ input:checked + .slider:before { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-lg); - max-width: 600px; + max-width: 640px; width: 100%; + max-height: 90vh; + overflow-y: auto; + position: relative; + z-index: 10001; + pointer-events: auto; padding: 1.75rem; - box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7); + box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85); animation: fadeIn 0.2s ease-out; } diff --git a/index.html b/index.html index 506af81..9ccad5b 100644 --- a/index.html +++ b/index.html @@ -368,7 +368,7 @@
freesr-data.json และ persistent ได้แบบ 100% เรียลไทม์ผ่าน REST API Gateway พร้อมระบบ Ex-Rank และ Teleport
+ โหมดเฉพาะของเซิร์ฟเวอร์เรา สามารถอ่านและเขียนทั้ง freesr-data.json และ persistent ได้แบบ 100% เรียลไทม์ผ่าน REST API Gateway พร้อมระบบ Ex-Rank