diff --git a/frontend/css/layout/responsive.css b/frontend/css/layout/responsive.css index 59637ba..297a1e9 100644 --- a/frontend/css/layout/responsive.css +++ b/frontend/css/layout/responsive.css @@ -287,3 +287,216 @@ line-height: 1.5; } +/* Profile & Savegame Management Styles */ +.modal-profile-card { + max-width: 480px; + gap: 14px; +} + +.modal-header-text { + flex: 1; +} + +.btn-modal-close { + padding: 6px; + font-size: 1.1rem; + cursor: pointer; + background: transparent; + border: none; + color: var(--text-muted); + border-radius: var(--radius-sm); +} + +.btn-modal-close:hover { + background: var(--bg-surface-sub); + color: var(--text-primary); +} + +.profile-status-box { + display: flex; + align-items: center; + gap: 12px; + background: var(--bg-surface-sub); + border: 1px solid var(--border-color); + border-radius: var(--radius-md); + padding: 10px 14px; +} + +.profile-avatar-icon { + width: 36px; + height: 36px; + border-radius: var(--radius-sm); + background: var(--primary-blue-light); + color: var(--primary-blue); + display: flex; + align-items: center; + justify-content: center; + font-size: 1.4rem; + flex-shrink: 0; +} + +.profile-info-content { + display: flex; + flex-direction: column; + gap: 2px; + flex: 1; + min-width: 0; +} + +.profile-name-row { + display: flex; + align-items: center; + gap: 8px; + font-size: 0.92rem; + color: var(--text-primary); +} + +.badge-pill-soft { + font-size: 0.65rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.04em; + padding: 2px 6px; + border-radius: 4px; + background: var(--border-subtle); + color: var(--text-secondary); +} + +.badge-pill-soft.badge-online { + background: var(--emerald-light); + color: var(--emerald-dark); +} + +.profile-sub-desc { + font-size: 0.72rem; + color: var(--text-muted); +} + +.profile-sub-section { + display: flex; + flex-direction: column; + gap: 10px; +} + +.profile-save-section { + border-top: 1px solid var(--border-color); + padding-top: 14px; + display: flex; + flex-direction: column; + gap: 10px; +} + +.save-section-header { + display: flex; + flex-direction: column; + gap: 2px; +} + +.save-section-title { + display: flex; + align-items: center; + gap: 6px; + font-size: 0.82rem; + font-weight: 700; + color: var(--text-primary); +} + +.save-section-title iconify-icon { + font-size: 1.1rem; + color: var(--primary-blue); +} + +.save-section-sub { + font-size: 0.72rem; + color: var(--text-muted); +} + +.save-actions-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 8px; +} + +@media (max-width: 480px) { + .save-actions-grid { + grid-template-columns: repeat(2, 1fr); + } +} + +.btn-save-action { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 6px; + background: var(--bg-surface-sub); + border: 1px solid var(--border-color); + border-radius: var(--radius-sm); + padding: 10px 6px; + color: var(--text-primary); + font-size: 0.72rem; + font-weight: 600; + cursor: pointer; + text-align: center; + transition: all 0.15s; + user-select: none; +} + +.btn-save-action iconify-icon { + font-size: 1.3rem; + color: var(--primary-blue); +} + +.btn-save-action:hover { + background: var(--bg-surface); + border-color: var(--primary-blue); + box-shadow: var(--shadow-sm); + transform: translateY(-1px); +} + +.btn-upload-label { + margin: 0; + box-sizing: border-box; +} + +.import-text-container { + display: flex; + flex-direction: column; + gap: 8px; + background: var(--bg-surface-sub); + border: 1px solid var(--border-color); + border-radius: var(--radius-sm); + padding: 10px; + margin-top: 4px; +} + +.modal-textarea { + width: 100%; + border: 1px solid var(--border-color); + border-radius: var(--radius-sm); + padding: 8px 10px; + font-size: 0.78rem; + font-family: var(--font-mono); + outline: none; + resize: vertical; + box-sizing: border-box; + background: var(--bg-surface); + color: var(--text-primary); +} + +.modal-textarea:focus { + border-color: var(--primary-blue); +} + +.import-text-actions { + display: flex; + justify-content: flex-end; + gap: 8px; +} + +.btn-sm { + padding: 6px 12px !important; + font-size: 0.75rem !important; +} + + diff --git a/frontend/index.html b/frontend/index.html index f86a73f..94cf058 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -141,41 +141,123 @@
- +