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

closing #13

Browse Source
This commit is contained in:
Kibi Kelburton
2026-05-16 18:39:30 +02:00
parent b96d97e213
commit 589fa84847
8 changed files with 182 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -873,7 +873,7 @@ html[theme="4d"] #my-video {
html[theme="xd"] { html[theme="xd"] {
--accent: #17786a; --accent: #17786a;
--accent-rgb: 31,178,176; --accent-rgb: 31, 178, 176;
--bg: #0c0c0c; --bg: #0c0c0c;
--black: #000; --black: #000;
--white: #fff; --white: #fff;
@@ -882,12 +882,12 @@ html[theme="xd"] {
--nav-brand-border: inset 1px #242424; --nav-brand-border: inset 1px #242424;
--nav-brand-bg: #171717; --nav-brand-bg: #171717;
--motd-bg: #101010; --motd-bg: #101010;
--navigation-links-bg: rgb(32,32,32); --navigation-links-bg: rgb(32, 32, 32);
--navigation-links-background-linear-gradient: rgba(0,0,0,.12),rgba(0,0,0,0); --navigation-links-background-linear-gradient: rgba(0, 0, 0, .12), rgba(0, 0, 0, 0);
--navigation-links-border-color: rgba(0,0,0,.8) rgba(0,0,0,.65) rgba(0,0,0,.5); --navigation-links-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
--navigation-links-box-shadow: rgba(255,255,255,.05); --navigation-links-box-shadow: rgba(255, 255, 255, .05);
--nav-link-background-linear-gradient: rgba(255,255,255,.04),rgba(255,255,255,0); --nav-link-background-linear-gradient: rgba(255, 255, 255, .04), rgba(255, 255, 255, 0);
--nav-link-box-shadow: inset 0 0 0 1px rgba(255,255,255,.04),inset 0 0px rgba(255,255,255,.04),inset 0 0px rgba(0,0,0,.15),0 0px 0px rgba(0,0,0,.1); --nav-link-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 0px rgba(255, 255, 255, .04), inset 0 0px rgba(0, 0, 0, .15), 0 0px 0px rgba(0, 0, 0, .1);
--nav-link-hover-bg: #333; --nav-link-hover-bg: #333;
--nav-border-color: #3b3b3c; --nav-border-color: #3b3b3c;
--dropdown-bg: #232323; --dropdown-bg: #232323;
@@ -895,11 +895,11 @@ html[theme="xd"] {
--nav-brand-font: 'VCR'; --nav-brand-font: 'VCR';
--font: monospace; --font: monospace;
--pagination-background: #171717; --pagination-background: #171717;
--pagination-box-shadow: inset 0 0 0 1px rgba(255,255,255,.04),inset 0 0px rgba(255,255,255,.04),inset 0 0px rgba(0,0,0,.15),0 0px 0px rgba(0,0,0,.1); --pagination-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 0px rgba(255, 255, 255, .04), inset 0 0px rgba(0, 0, 0, .15), 0 0px 0px rgba(0, 0, 0, .1);
--pagination-anchor-box-shadow: inset 0 0 0 1px rgba(255,255,255,.04),inset 0 1px rgba(255,255,255,.04),inset 0 -1px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.1); --pagination-anchor-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), inset 0 1px rgba(255, 255, 255, .04), inset 0 -1px rgba(0, 0, 0, .15), 0 1px 1px rgba(0, 0, 0, .1);
--pagination-background-hover: #333; --pagination-background-hover: #333;
--pagination-border-color: rgba(0,0,0,.8) rgba(0,0,0,.65) rgba(0,0,0,.5); --pagination-border-color: rgba(0, 0, 0, .8) rgba(0, 0, 0, .65) rgba(0, 0, 0, .5);
--metadata-bg: rgba(34,34,34,0.8); --metadata-bg: rgba(34, 34, 34, 0.8);
--badge-bg: #131313; --badge-bg: #131313;
--posts-meta-bg: #000000b8; --posts-meta-bg: #000000b8;
--badge-sfw: #68a728; --badge-sfw: #68a728;
@@ -912,7 +912,7 @@ html[theme="xd"] {
--img-border-width: 0; --img-border-width: 0;
--img-border-color: #363636; --img-border-color: #363636;
--maximize_button: #1fb2b0; --maximize_button: #1fb2b0;
--bg-gradient: linear-gradient(0deg,rgba(0,0,0,0.94) 0%,rgb(6,6,6) 10%,rgb(43,43,43) 100%); --bg-gradient: linear-gradient(0deg, rgba(0, 0, 0, 0.94) 0%, rgb(6, 6, 6) 10%, rgb(43, 43, 43) 100%);
} }
html[theme="xd"] .motd-container { html[theme="xd"] .motd-container {
@@ -920,8 +920,8 @@ html[theme="xd"] .motd-container {
border-bottom: 1px solid var(--nav-border-color); border-bottom: 1px solid var(--nav-border-color);
} }
html[theme="xd"] .item-sidebar-right, html[theme="xd"] .item-sidebar-right,
html[theme="xd"] .index-sidebar-right, html[theme="xd"] .index-sidebar-right,
html[theme="xd"] .global-sidebar-right { html[theme="xd"] .global-sidebar-right {
background: #131313 !important; background: #131313 !important;
border-left: 2px solid var(--nav-border-color) !important; border-left: 2px solid var(--nav-border-color) !important;
@@ -1724,7 +1724,8 @@ body.sidebar-right-hidden .global-sidebar-right {
display: grid; display: grid;
grid-template-rows: auto auto auto; grid-template-rows: auto auto auto;
justify-items: center; justify-items: center;
align-content: baseline; /*with center the layout shifts when item has favs, with baseline it stays consistent and expands to the bottom cleanly */ align-content: baseline;
/*with center the layout shifts when item has favs, with baseline it stays consistent and expands to the bottom cleanly */
overflow: visible; overflow: visible;
padding: 20px; padding: 20px;
min-height: 0; min-height: 0;
@@ -1997,8 +1998,13 @@ body.sidebar-right-hidden .global-sidebar-right {
/* ─── Sidebar Skeleton Loader ─────────────────────────────────────────────── */ /* ─── Sidebar Skeleton Loader ─────────────────────────────────────────────── */
@keyframes skeleton-shimmer { @keyframes skeleton-shimmer {
0% { background-position: -300px 0; } 0% {
100% { background-position: 300px 0; } background-position: -300px 0;
}
100% {
background-position: 300px 0;
}
} }
.sidebar-skeleton-item { .sidebar-skeleton-item {
@@ -2028,12 +2034,10 @@ body.sidebar-right-hidden .global-sidebar-right {
/* Shared shimmer base */ /* Shared shimmer base */
.skeleton-avatar, .skeleton-avatar,
.skeleton-line { .skeleton-line {
background: linear-gradient( background: linear-gradient(90deg,
90deg, rgba(255, 255, 255, 0.04) 0%,
rgba(255,255,255,0.04) 0%, rgba(255, 255, 255, 0.10) 40%,
rgba(255,255,255,0.10) 40%, rgba(255, 255, 255, 0.04) 80%);
rgba(255,255,255,0.04) 80%
);
background-size: 600px 100%; background-size: 600px 100%;
animation: skeleton-shimmer 1.6s ease-in-out infinite; animation: skeleton-shimmer 1.6s ease-in-out infinite;
border-radius: 3px; border-radius: 3px;
@@ -2050,22 +2054,51 @@ body.sidebar-right-hidden .global-sidebar-right {
height: 10px; height: 10px;
} }
.skeleton-name { width: 55%; } .skeleton-name {
.skeleton-time { width: 35%; height: 8px; opacity: 0.65; } width: 55%;
}
.skeleton-text-long { width: 90%; margin-bottom: 6px; } .skeleton-time {
.skeleton-text-medium { width: 70%; margin-bottom: 6px; } width: 35%;
.skeleton-text-short { width: 45%; margin-bottom: 0; } height: 8px;
opacity: 0.65;
}
.skeleton-text-long {
width: 90%;
margin-bottom: 6px;
}
.skeleton-text-medium {
width: 70%;
margin-bottom: 6px;
}
.skeleton-text-short {
width: 45%;
margin-bottom: 0;
}
/* Stagger the shimmer phase so each item feels alive individually (cycles every 5) */ /* Stagger the shimmer phase so each item feels alive individually (cycles every 5) */
.sidebar-skeleton-item:nth-child(5n+2) .skeleton-avatar, .sidebar-skeleton-item:nth-child(5n+2) .skeleton-avatar,
.sidebar-skeleton-item:nth-child(5n+2) .skeleton-line { animation-delay: 0.2s; } .sidebar-skeleton-item:nth-child(5n+2) .skeleton-line {
animation-delay: 0.2s;
}
.sidebar-skeleton-item:nth-child(5n+3) .skeleton-avatar, .sidebar-skeleton-item:nth-child(5n+3) .skeleton-avatar,
.sidebar-skeleton-item:nth-child(5n+3) .skeleton-line { animation-delay: 0.4s; } .sidebar-skeleton-item:nth-child(5n+3) .skeleton-line {
animation-delay: 0.4s;
}
.sidebar-skeleton-item:nth-child(5n+4) .skeleton-avatar, .sidebar-skeleton-item:nth-child(5n+4) .skeleton-avatar,
.sidebar-skeleton-item:nth-child(5n+4) .skeleton-line { animation-delay: 0.6s; } .sidebar-skeleton-item:nth-child(5n+4) .skeleton-line {
animation-delay: 0.6s;
}
.sidebar-skeleton-item:nth-child(5n+5) .skeleton-avatar, .sidebar-skeleton-item:nth-child(5n+5) .skeleton-avatar,
.sidebar-skeleton-item:nth-child(5n+5) .skeleton-line { animation-delay: 0.8s; } .sidebar-skeleton-item:nth-child(5n+5) .skeleton-line {
animation-delay: 0.8s;
}
/* Mobile Stacking for Legacy Mode (max-width: 999px) */ /* Mobile Stacking for Legacy Mode (max-width: 999px) */
@media (max-width: 999px) { @media (max-width: 999px) {
@@ -3677,7 +3710,8 @@ ul.navbar-nav li.nav-item {
content: "" !important; content: "" !important;
} */ } */
.fa-solid.fa-angle-up, .fa-regular.fa-image { .fa-solid.fa-angle-up,
.fa-regular.fa-image {
margin-right: 5px; margin-right: 5px;
} }
@@ -4344,6 +4378,26 @@ span.placeholder {
object-fit: contain; object-fit: contain;
} }
/* Inline image expansion */
.embed-responsive.is-expanded::before {
display: none !important;
}
.embed-responsive.is-expanded {
height: auto !important;
overflow: visible !important;
}
.embed-responsive.is-expanded .embed-responsive-image,
.embed-responsive.is-expanded a#elfe,
.embed-responsive.is-expanded img#f0ck-image {
position: static !important;
height: auto !important;
width: auto !important;
max-width: 100% !important;
max-height: 100% !important;
}
a#elfe { a#elfe {
height: 100%; height: 100%;
width: 100%; width: 100%;
@@ -5265,7 +5319,7 @@ div.posts>a[data-mode="nsfl"]>p::before {
background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(227, 7, 7, 0) 85%, rgb(231, 3, 3) 100%); background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(227, 7, 7, 0) 85%, rgb(231, 3, 3) 100%);
} }
div.posts > a[data-mode="null"] > p::before { div.posts>a[data-mode="null"]>p::before {
background: #000000; background: #000000;
background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(63, 196, 61, 0) 85%, rgb(244, 222, 0) 100%); background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(63, 196, 61, 0) 85%, rgb(244, 222, 0) 100%);
} }
@@ -6292,8 +6346,10 @@ button#togglebg {
} }
.fader-in { .fader-in {
/*opacity: 0.4 !important;*/ /* default */ /*opacity: 0.4 !important;*/
opacity: 0.1 !important; /* darker */ /* default */
opacity: 0.1 !important;
/* darker */
} }
.fader-out { .fader-out {
@@ -6319,20 +6375,23 @@ button#togglebg {
} }
/* ─── Posts Grid Skeleton: shimmer on real items while thumbnail loads ─────── */ /* ─── Posts Grid Skeleton: shimmer on real items while thumbnail loads ─────── */
div.posts > a.lazy-thumb:not(.loaded) { div.posts>a.lazy-thumb:not(.loaded) {
background: linear-gradient( background: linear-gradient(90deg,
90deg, rgba(255, 255, 255, 0.04) 0%,
rgba(255,255,255,0.04) 0%, rgba(255, 255, 255, 0.10) 40%,
rgba(255,255,255,0.10) 40%, rgba(255, 255, 255, 0.04) 80%);
rgba(255,255,255,0.04) 80%
);
background-size: 600px 100%; background-size: 600px 100%;
animation: skeleton-shimmer 1.6s ease-in-out infinite; animation: skeleton-shimmer 1.6s ease-in-out infinite;
} }
/* Stagger shimmer phases so items feel alive individually */ /* Stagger shimmer phases so items feel alive individually */
div.posts > a.lazy-thumb:not(.loaded):nth-child(3n+2) { animation-delay: 0.2s; } div.posts>a.lazy-thumb:not(.loaded):nth-child(3n+2) {
div.posts > a.lazy-thumb:not(.loaded):nth-child(3n+3) { animation-delay: 0.4s; } animation-delay: 0.2s;
}
div.posts>a.lazy-thumb:not(.loaded):nth-child(3n+3) {
animation-delay: 0.4s;
}
/* Make individual item entry subtler and faster for infinite scroll */ /* Make individual item entry subtler and faster for infinite scroll */
@@ -9450,7 +9509,7 @@ div.posts>a.thumb.has-notif p::after {
/* ===== Dynamic Thumbnail Sizes ===== */ /* ===== Dynamic Thumbnail Sizes ===== */
/* Size tier 2: 2×2 grid cells */ /* Size tier 2: 2×2 grid cells */
div.posts > a.thumb[data-size="2"] { div.posts>a.thumb[data-size="2"] {
grid-column: span 2; grid-column: span 2;
grid-row: span 2; grid-row: span 2;
} }
@@ -13668,58 +13727,68 @@ body.scroller-active #gchat-reopen-bubble {
} }
} }
#nav-meme-link, #nav-upload-link { #nav-meme-link,
#nav-upload-link {
white-space: nowrap; white-space: nowrap;
} }
/* --- Admin IP History Styles --- */ /* --- Admin IP History Styles --- */
.admin-ips-table { .admin-ips-table {
width: 100%; width: 100%;
border-collapse: separate; border-collapse: separate;
border-spacing: 0 8px; border-spacing: 0 8px;
color: var(--white); color: var(--white);
} }
.admin-ips-table th { .admin-ips-table th {
padding: 15px; padding: 15px;
text-align: left; text-align: left;
text-transform: uppercase; text-transform: uppercase;
font-size: 0.75rem; font-size: 0.75rem;
letter-spacing: 1px; letter-spacing: 1px;
color: #888; color: #888;
border-bottom: 1px solid rgba(255,255,255,0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.05);
} }
.admin-ips-table tr { .admin-ips-table tr {
transition: all 0.2s ease; transition: all 0.2s ease;
} }
.admin-ips-table tbody tr { .admin-ips-table tbody tr {
background: rgba(255, 255, 255, 0.02); background: rgba(255, 255, 255, 0.02);
} }
.admin-ips-table tbody tr:hover { .admin-ips-table tbody tr:hover {
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
} }
.admin-ips-table td { .admin-ips-table td {
padding: 15px; padding: 15px;
vertical-align: middle; vertical-align: middle;
} }
.ip-badge { .ip-badge {
font-family: monospace; font-family: monospace;
padding: 4px 10px; padding: 4px 10px;
background: rgba(var(--accent-rgb, 153, 255, 0), 0.1); background: rgba(var(--accent-rgb, 153, 255, 0), 0.1);
border: 1px solid rgba(var(--accent-rgb, 153, 255, 0), 0.2); border: 1px solid rgba(var(--accent-rgb, 153, 255, 0), 0.2);
color: var(--accent); color: var(--accent);
border-radius: 4px; border-radius: 4px;
font-size: 0.9rem; font-size: 0.9rem;
word-break: break-all; word-break: break-all;
display: inline-block; display: inline-block;
max-width: 100%; max-width: 100%;
} }
.date-cell { .date-cell {
font-size: 0.85rem; font-size: 0.85rem;
color: #aaa; color: #aaa;
} }
.date-label { .date-label {
display: block; display: block;
font-size: 0.7rem; font-size: 0.7rem;
color: #666; color: #666;
text-transform: uppercase; text-transform: uppercase;
margin-bottom: 2px; margin-bottom: 2px;
} }

10
public/s/js/f0ckm.js
View File

@@ -7822,7 +7822,15 @@ document.addEventListener('DOMContentLoaded', () => {
const elfe = e.target.closest('#elfe'); const elfe = e.target.closest('#elfe');
if (elfe) { if (elfe) {
e.preventDefault(); e.preventDefault();
openImageModal(elfe.href); const expandOnClick = localStorage.getItem('imageExpandOnClick') !== 'false';
if (expandOnClick) {
const wrapper = elfe.closest('.embed-responsive');
if (wrapper) {
wrapper.classList.toggle('is-expanded');
}
} else {
openImageModal(elfe.href);
}
} }
}); });
}; };

8
public/s/js/settings.js
View File

@@ -711,6 +711,14 @@
}); });
} }
const imageExpandToggle = document.getElementById('image_expand_toggle');
if (imageExpandToggle) {
imageExpandToggle.checked = localStorage.getItem('imageExpandOnClick') !== 'false';
imageExpandToggle.addEventListener('change', () => {
localStorage.setItem('imageExpandOnClick', imageExpandToggle.checked);
});
}
// Background Blur Toggle // Background Blur Toggle
const backgroundToggle = document.getElementById('show_background_toggle'); const backgroundToggle = document.getElementById('show_background_toggle');
if (backgroundToggle) { if (backgroundToggle) {

2
src/inc/locales/de.json
View File

@@ -144,6 +144,8 @@
"disable_autoplay_hint": "Verhindert die automatische Wiedergabe von Videos und Audio", "disable_autoplay_hint": "Verhindert die automatische Wiedergabe von Videos und Audio",
"disable_swiping": "Wischen deaktivieren", "disable_swiping": "Wischen deaktivieren",
"disable_swiping_hint": "Navigation per Wischen auf Mobilgeräten deaktivieren", "disable_swiping_hint": "Navigation per Wischen auf Mobilgeräten deaktivieren",
"image_expand_on_click": "Bilder beim Klicken inline erweitern",
"image_expand_on_click_hint": "Anstatt das Scroll-Zoom-Modal zu öffnen, wird ein Bild beim Klicken innerhalb der Seite auf volle Größe erweitert.",
"enable_bg_blur": "Hintergrundunschärfe aktivieren", "enable_bg_blur": "Hintergrundunschärfe aktivieren",
"enable_bg_blur_hint": "Unscharfen Hintergrund bei Beiträgen anzeigen", "enable_bg_blur_hint": "Unscharfen Hintergrund bei Beiträgen anzeigen",
"render_emojis": "Emojis in Zitatantworten anzeigen", "render_emojis": "Emojis in Zitatantworten anzeigen",

2
src/inc/locales/en.json
View File

@@ -144,6 +144,8 @@
"disable_autoplay_hint": "Prevent videos and audio from playing automatically", "disable_autoplay_hint": "Prevent videos and audio from playing automatically",
"disable_swiping": "Disable Swiping", "disable_swiping": "Disable Swiping",
"disable_swiping_hint": "Disable swipe-to-navigate on mobile devices", "disable_swiping_hint": "Disable swipe-to-navigate on mobile devices",
"image_expand_on_click": "Expand images inline on click",
"image_expand_on_click_hint": "Instead of opening the scroll zoom modal, clicking an image will expand it to full size within the page.",
"enable_bg_blur": "Enable Background blur", "enable_bg_blur": "Enable Background blur",
"enable_bg_blur_hint": "Show blurred background on items", "enable_bg_blur_hint": "Show blurred background on items",
"render_emojis": "Render emojis in quote replies", "render_emojis": "Render emojis in quote replies",

2
src/inc/locales/nl.json
View File

@@ -144,6 +144,8 @@
"disable_autoplay_hint": "Voorkomen dat video's en audio automatisch worden afgespeeld", "disable_autoplay_hint": "Voorkomen dat video's en audio automatisch worden afgespeeld",
"disable_swiping": "Swipen uitschakelen", "disable_swiping": "Swipen uitschakelen",
"disable_swiping_hint": "Swipe-to-navigate uitschakelen op mobiele apparaten", "disable_swiping_hint": "Swipe-to-navigate uitschakelen op mobiele apparaten",
"image_expand_on_click": "Afbeeldingen inline vergroten bij klikken",
"image_expand_on_click_hint": "In plaats van de scroll-zoom-modal te openen, wordt een afbeelding bij klikken vergroot tot volledige grootte binnen de pagina.",
"enable_bg_blur": "Achtergrondvervaging inschakelen", "enable_bg_blur": "Achtergrondvervaging inschakelen",
"enable_bg_blur_hint": "Vervaagde achtergrond tonen bij items", "enable_bg_blur_hint": "Vervaagde achtergrond tonen bij items",
"render_emojis": "Emoji's weergeven in antwoorden", "render_emojis": "Emoji's weergeven in antwoorden",

2
src/inc/locales/zange.json
View File

@@ -144,6 +144,8 @@
"disable_autoplay_hint": "Vermeiden Sie das automatische Abspielen von Videos und Tondateien", "disable_autoplay_hint": "Vermeiden Sie das automatische Abspielen von Videos und Tondateien",
"disable_swiping": "Wischen deaktivieren", "disable_swiping": "Wischen deaktivieren",
"disable_swiping_hint": "Deaktivieren der Wisch-Navigation auf Mobilgeräten", "disable_swiping_hint": "Deaktivieren der Wisch-Navigation auf Mobilgeräten",
"image_expand_on_click": "Bildli beim Klickle inline uffblähe",
"image_expand_on_click_hint": "Anstatt dat Scroll-Zoom-Moped aufzumache, wird n Bild beim Klickle uff volle Größ im Bereich uffgepumpt.",
"enable_bg_blur": "Hintergrundunschärfe aktivieren", "enable_bg_blur": "Hintergrundunschärfe aktivieren",
"enable_bg_blur_hint": "Gefalteten Hintergrund auf Elementen anzeigen", "enable_bg_blur_hint": "Gefalteten Hintergrund auf Elementen anzeigen",
"render_emojis": "Emojis in Zitatantworten darstellen", "render_emojis": "Emojis in Zitatantworten darstellen",

7
views/settings.html
View File

@@ -110,6 +110,13 @@
</label> </label>
<small class="text-muted" style="margin-left: 25px;">{{ t('settings.scroll_nav_hint') }}</small> <small class="text-muted" style="margin-left: 25px;">{{ t('settings.scroll_nav_hint') }}</small>
</div> </div>
<div class="setting-item" style="margin-bottom: 15px;">
<label for="image_expand_toggle" style="cursor: pointer; display: flex; align-items: center; gap: 10px;">
<input type="checkbox" id="image_expand_toggle">
<span>{{ t('settings.image_expand_on_click') || 'Expand images inline on click' }}</span>
</label>
<small class="text-muted" style="margin-left: 25px;">{{ t('settings.image_expand_on_click_hint') || 'Instead of opening the scroll zoom modal, clicking an image will expand it to full size within the page.' }}</small>
</div>
<div class="setting-item" style="margin-top: 15px;"> <div class="setting-item" style="margin-top: 15px;">
<label for="disable_autoplay_toggle" <label for="disable_autoplay_toggle"
style="cursor: pointer; display: flex; align-items: center; gap: 10px;"> style="cursor: pointer; display: flex; align-items: center; gap: 10px;">