From 7fe219214269c47e1de8d1d782c25e089c0d2d72 Mon Sep 17 00:00:00 2001
From: Kibi Kelburton <git@f0ck.it>
Date: Fri, 17 Jul 2026 12:49:08 +0200
Subject: [PATCH] center top

---
 public/s/css/f0ckm.css           |  4 +--
 views/comments_user-partial.html |  2 +-
 views/item-partial-legacy.html   |  2 +-
 views/settings.html              |  4 +--
 views/user-partial.html          | 44 ++++++++++++++++++++++----------
 5 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/public/s/css/f0ckm.css b/public/s/css/f0ckm.css
index 8d2ecda..639b87c 100644
--- a/public/s/css/f0ckm.css
+++ b/public/s/css/f0ckm.css
@@ -13926,7 +13926,7 @@ i.iconset#a_oc {
   inset: 0;
   background-image: var(--author-banner, none);
   background-size: var(--author-banner-size, cover);
-  background-position: var(--author-banner-position, center);
+  background-position: var(--author-banner-position, center top);
   opacity: 0.3;
   z-index: -1;
   border-radius: inherit;
@@ -14044,7 +14044,7 @@ textarea#profile_description {
   inset: 0;
   background-image: var(--author-banner, none);
   background-size: var(--author-banner-size, cover);
-  background-position: var(--author-banner-position, center);
+  background-position: var(--author-banner-position, center top);
   background-repeat: var(--author-banner-repeat, no-repeat);
   opacity: var(--author-banner-opacity, 0.3);
   z-index: -1;
diff --git a/views/comments_user-partial.html b/views/comments_user-partial.html
index 7e531c0..3e7caf4 100644
--- a/views/comments_user-partial.html
+++ b/views/comments_user-partial.html
@@ -1,4 +1,4 @@
-<div class="profile_head" data-banner-user="{{ user.user || '' }}" style="@if(user.banner_file && user_banner_enabled) --author-banner: url('/a/{{ user.banner_file }}'); --author-banner-position: {{ user.banner_position || 'center' }}; --author-banner-size: {{ user.banner_size || 'cover' }}; @endif">
+<div class="profile_head" data-banner-user="{{ user.user || '' }}" style="@if(user.banner_file && user_banner_enabled) --author-banner: url('/a/{{ user.banner_file }}'); --author-banner-position: {{ user.banner_position === 'center' ? 'center top' : (user.banner_position || 'center top') }}; --author-banner-size: {{ user.banner_size || 'cover' }}; @endif">
     @if(user.avatar_file)
     <div class="profile_head_avatar">
         <img src="/a/{{ user.avatar_file }}" style="display: grid;width: 55px" />
diff --git a/views/item-partial-legacy.html b/views/item-partial-legacy.html
index 5666fd9..0494c68 100644
--- a/views/item-partial-legacy.html
+++ b/views/item-partial-legacy.html
@@ -84,7 +84,7 @@
 
             <div class="blahlol">
                 @if(user_alternative_infobox)
-                <div class="user-infobox-block" data-banner-user="{{ item.username || '' }}" style="--author-accent: @if(item.author_color){{ item.author_color }}@else var(--accent) @endif; --author-border: @if(item.author_color){{ item.author_color }}@else var(--accent) @endif;@if(item.author_banner_file && user_banner_enabled) --author-banner: url('/a/{{ item.author_banner_file }}'); --author-banner-position: {{ item.author_banner_position || 'center' }}; --author-banner-size: {{ item.author_banner_size || 'cover' }};@endif">
+                <div class="user-infobox-block" data-banner-user="{{ item.username || '' }}" style="--author-accent: @if(item.author_color){{ item.author_color }}@else var(--accent) @endif; --author-border: @if(item.author_color){{ item.author_color }}@else var(--accent) @endif;@if(item.author_banner_file && user_banner_enabled) --author-banner: url('/a/{{ item.author_banner_file }}'); --author-banner-position: {{ item.author_banner_position === 'center' ? 'center top' : (item.author_banner_position || 'center top') }}; --author-banner-size: {{ item.author_banner_size || 'cover' }};@endif">
 
                     <div class="user-infobox-avatar">
                         <a href="/user/{{ (item.username || '').toLowerCase() }}">
diff --git a/views/settings.html b/views/settings.html
index 296b165..78fe8a1 100644
--- a/views/settings.html
+++ b/views/settings.html
@@ -144,7 +144,7 @@
             <div class="avatar-preview-label">{{ t('settings.current_banner') }}</div>
             @if(banner_file)
             <a href="/user/{!! session.user !!}" target="_blank" style="display:block; width: 100%;">
-              <div id="banner-preview" class="banner-preview-img" style="width:100%;aspect-ratio:400/140;border-radius:4px;border:1px solid var(--nav-border-color);background-image:url('/a/{{ banner_file }}');background-size:{{ banner_size || 'cover' }};background-position:{{ banner_position || 'center' }};background-repeat:no-repeat;"></div>
+              <div id="banner-preview" class="banner-preview-img" style="width:100%;aspect-ratio:400/140;border-radius:4px;border:1px solid var(--nav-border-color);background-image:url('/a/{{ banner_file }}');background-size:{{ banner_size || 'cover' }};background-position:{{ banner_position === 'center' ? 'center top' : (banner_position || 'center top') }};background-repeat:no-repeat;"></div>
             </a>
             @else
             <div id="banner-preview" class="banner-preview-img banner-placeholder" style="width:100%;aspect-ratio:400/140;display:flex;align-items:center;justify-content:center;border:1px dashed var(--nav-border-color);border-radius:4px;color:var(--text-muted);font-size:0.85em;">{{ t('settings.no_banner_set') }}</div>
@@ -214,7 +214,7 @@
       <fieldset style="border: 1px solid var(--nav-border-color); padding: 10px; border-radius: 4px; margin-bottom: 15px;">
         <legend style="width: auto; padding: 0 5px; font-size: 1.1em; font-weight: bold;">Live Profile Preview</legend>
         <div class="setting-item" style="max-width: 750px;">
-           <div class="user-infobox-block" id="live-profile-preview-box" style="--author-accent: {{ session.username_color || 'var(--accent)' }}; --author-border: {{ session.username_color || 'var(--accent)' }}; @if(banner_file && user_banner_enabled) --author-banner: url('/a/{{ banner_file }}?t={{ Date.now() }}'); --author-banner-position: {{ banner_position || 'center' }}; --author-banner-size: {{ banner_size || 'cover' }}; @endif">
+           <div class="user-infobox-block" id="live-profile-preview-box" style="--author-accent: {{ session.username_color || 'var(--accent)' }}; --author-border: {{ session.username_color || 'var(--accent)' }}; @if(banner_file && user_banner_enabled) --author-banner: url('/a/{{ banner_file }}?t={{ Date.now() }}'); --author-banner-position: {{ banner_position === 'center' ? 'center top' : (banner_position || 'center top') }}; --author-banner-size: {{ banner_size || 'cover' }}; @endif">
               <div class="user-infobox-avatar">
                   <a href="#">
                       @if(avatar_file)
diff --git a/views/user-partial.html b/views/user-partial.html
index 6eb7f5a..eb9ce35 100644
--- a/views/user-partial.html
+++ b/views/user-partial.html
@@ -1,5 +1,5 @@
 <div class="profile-page-wrapper" style="max-width: 800px; margin: 0 auto; width: 100%; padding: 20px 10px; box-sizing: border-box;">
-<div class="profile_head" id="live-profile-preview-box" data-banner-user="{{ user.user || '' }}" style="position: relative; @if(user.banner_file && user_banner_enabled) --author-banner: url('/a/{{ user.banner_file }}'); --author-banner-position: {{ user.banner_position || 'center' }}; --author-banner-size: {{ user.banner_size || 'cover' }}; @endif">
+<div class="profile_head" id="live-profile-preview-box" data-banner-user="{{ user.user || '' }}" style="position: relative; @if(user.banner_file && user_banner_enabled) --author-banner: url('/a/{{ user.banner_file }}'); --author-banner-position: {{ user.banner_position === 'center' ? 'center top' : (user.banner_position || 'center top') }}; --author-banner-size: {{ user.banner_size || 'cover' }}; @endif">
     @if(session && session.id === user.user_id && user_banner_enabled)
     <button id="inline-banner-edit-btn" style="position:absolute; top: 10px; right: 10px; background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.2); border-radius: 4px; padding: 4px 8px; color: #fff; cursor: pointer; z-index: 10; font-size: 0.8em;" title="{{ t('profile.edit_banner', 'Edit Banner') }}">
         <i class="fa-solid fa-pen"></i> Edit Banner
@@ -50,20 +50,24 @@
                     <button id="inline-name-cancel-btn" class="btn btn-sm btn-outline-danger" style="padding: 2px 5px; font-size: 0.8em;"><i class="fa-solid fa-xmark"></i></button>
                 </div>
                 @endif
-                @if(session && session.id !== user.user_id)
+                @if(session)
                 <div class="profile-actions" style="margin: 0; flex-shrink: 0;">
-                    @if(private_messages)
-                        <button id="send-dm-btn" class="btn btn-sm btn-outline-info" data-username="{!! user.user !!}" style="padding: 2px 8px; font-size: 0.8em; border: 1px solid var(--accent); color: var(--accent); background: transparent; cursor: pointer;" title="{{ t('profile.message_btn') }}"><i class="fa-solid fa-envelope"></i></button>
-                    @endif
-                    @if(session.admin || session.is_moderator)
-                        @if(session.admin || !user.admin)
-                            @if(user.banned)
-                            <button id="unban-user-btn" class="btn btn-sm btn-outline-success" style="padding: 2px 8px; font-size: 0.8em; border: 1px solid #5cb85c; color: #5cb85c; background: transparent; cursor: pointer;" title="{{ t('profile.unban_btn') }}"><i class="fa-solid fa-unlock"></i></button>
-                            @else
-                            <button id="ban-user-btn" class="btn btn-sm btn-outline-danger" style="padding: 2px 8px; font-size: 0.8em; border: 1px solid var(--accent); color: var(--accent); background: transparent; cursor: pointer;" title="{{ t('profile.ban_btn') }}"><i class="fa-solid fa-ban"></i></button>
-                            @endif
-                            <button id="warn-user-btn" class="btn btn-sm btn-outline-warning" style="padding: 2px 8px; font-size: 0.8em; border: 1px solid #f0ad4e; color: #f0ad4e; background: transparent; cursor: pointer;" title="{{ t('profile.warn_btn') }}"><i class="fa-solid fa-triangle-exclamation"></i></button>
+                    @if(session.id !== user.user_id)
+                        @if(private_messages)
+                            <button id="send-dm-btn" class="btn btn-sm btn-outline-info" data-username="{!! user.user !!}" style="padding: 2px 8px; font-size: 0.8em; border: 1px solid var(--accent); color: var(--accent); background: transparent; cursor: pointer;" title="{{ t('profile.message_btn') }}"><i class="fa-solid fa-envelope"></i></button>
                         @endif
+                        @if(session.admin || session.is_moderator)
+                            @if(session.admin || !user.admin)
+                                @if(user.banned)
+                                <button id="unban-user-btn" class="btn btn-sm btn-outline-success" style="padding: 2px 8px; font-size: 0.8em; border: 1px solid #5cb85c; color: #5cb85c; background: transparent; cursor: pointer;" title="{{ t('profile.unban_btn') }}"><i class="fa-solid fa-unlock"></i></button>
+                                @else
+                                <button id="ban-user-btn" class="btn btn-sm btn-outline-danger" style="padding: 2px 8px; font-size: 0.8em; border: 1px solid var(--accent); color: var(--accent); background: transparent; cursor: pointer;" title="{{ t('profile.ban_btn') }}"><i class="fa-solid fa-ban"></i></button>
+                                @endif
+                                <button id="warn-user-btn" class="btn btn-sm btn-outline-warning" style="padding: 2px 8px; font-size: 0.8em; border: 1px solid #f0ad4e; color: #f0ad4e; background: transparent; cursor: pointer;" title="{{ t('profile.warn_btn') }}"><i class="fa-solid fa-triangle-exclamation"></i></button>
+                            @endif
+                        @endif
+                    @else
+                        <button id="edit-profile-btn" class="btn btn-sm btn-outline-primary" onclick="const box = document.getElementById('live-profile-preview-box'); box.classList.toggle('edit-mode-active'); if(box.classList.contains('edit-mode-active')){ this.innerHTML='<i class=&quot;fa-solid fa-check&quot;></i>'; this.style.color='#51cf66'; this.style.borderColor='#51cf66'; } else { this.innerHTML='<i class=&quot;fa-solid fa-pen&quot;></i>'; this.style.color='var(--accent)'; this.style.borderColor='var(--accent)'; }" style="position: absolute; bottom: 10px; right: 10px; padding: 4px 10px; font-size: 0.9em; border: 1px solid var(--accent); color: var(--accent); background: rgba(0,0,0,0.8); cursor: pointer; border-radius: 4px; z-index: 20; box-shadow: 0 0 5px rgba(0,0,0,0.5);" title="{{ t('profile.edit_btn', 'Edit Profile') }}"><i class="fa-solid fa-pen"></i></button>
                     @endif
                 </div>
                 @endif
@@ -365,6 +369,20 @@
 @endif
 
 @if(session && session.id === user.user_id)
+<style>
+#live-profile-preview-box:not(.edit-mode-active) .avatar-edit-btn,
+#live-profile-preview-box:not(.edit-mode-active) #inline-banner-edit-btn,
+#live-profile-preview-box:not(.edit-mode-active) #inline-name-edit-btn,
+#live-profile-preview-box:not(.edit-mode-active) #inline-desc-edit-btn {
+    display: none !important;
+}
+#live-profile-preview-box.edit-mode-active .avatar-edit-btn {
+    opacity: 1;
+}
+#live-profile-preview-box.edit-mode-active .avatar-image-wrapper .profile-avatar-img {
+    filter: brightness(0.6);
+}
+</style>
 <script src="/s/js/settings.js"></script>
 <script>
     (function() {