diff --git a/public/s/css/f0ckm.css b/public/s/css/f0ckm.css index 38a10f9..8d2ecda 100644 --- a/public/s/css/f0ckm.css +++ b/public/s/css/f0ckm.css @@ -16777,3 +16777,51 @@ a.lazy-thumb.filtered-upload-ghost:hover::after { display: flex; gap: 10px; } + +/* Avatar inline edit button */ +.profile_head_avatar { + position: relative; +} +.avatar-edit-btn { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: rgba(0,0,0,0.6); + border: 1px solid rgba(255,255,255,0.3); + border-radius: 50%; + width: 32px; + height: 32px; + padding: 0; + margin: 0; + line-height: 1; + color: #fff; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 0 5px rgba(0,0,0,0.5); + opacity: 0; + transition: opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease; + z-index: 10; +} +.profile-avatar-img { + display: block; + width: 55px; + height: 55px; + object-fit: cover; + transition: filter 0.2s ease; +} +.avatar-image-wrapper .profile-avatar-img:hover ~ .avatar-edit-btn, +.avatar-edit-btn:hover { + opacity: 1; +} +.avatar-edit-btn:hover { + background: rgba(0,0,0,0.85); + border-color: var(--accent); + color: var(--accent); +} +.avatar-image-wrapper:has(.avatar-edit-btn:hover) .profile-avatar-img, +.avatar-image-wrapper .profile-avatar-img:hover { + filter: brightness(0.6); +} diff --git a/views/user-partial.html b/views/user-partial.html index d571c2c..6eb7f5a 100644 --- a/views/user-partial.html +++ b/views/user-partial.html @@ -1,28 +1,55 @@
+