kibi/f0ckm
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

center top

Browse Source
This commit is contained in:
Kibi Kelburton
2026-07-17 12:49:08 +02:00
parent 843acab8b3
commit 7fe2192142
5 changed files with 37 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
public/s/css/f0ckm.css
View File

@@ -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;

2
views/comments_user-partial.html
View File

@@ -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" />

2
views/item-partial-legacy.html
View File

@@ -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() }}">

4
views/settings.html
View File

@@ -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)

44
views/user-partial.html
View File

@@ -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() {