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

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

@@ -873,7 +873,7 @@ html[theme="4d"] #my-video {
html[theme="xd"] {
--accent: #17786a;
--accent-rgb: 31,178,176;
--accent-rgb: 31, 178, 176;
--bg: #0c0c0c;
--black: #000;
--white: #fff;
@@ -882,12 +882,12 @@ html[theme="xd"] {
--nav-brand-border: inset 1px #242424;
--nav-brand-bg: #171717;
--motd-bg: #101010;
--navigation-links-bg: rgb(32,32,32);
--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-box-shadow: rgba(255,255,255,.05);
--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);
--navigation-links-bg: rgb(32, 32, 32);
--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-box-shadow: rgba(255, 255, 255, .05);
--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-hover-bg: #333;
--nav-border-color: #3b3b3c;
--dropdown-bg: #232323;
@@ -895,11 +895,11 @@ html[theme="xd"] {
--nav-brand-font: 'VCR';
--font: monospace;
--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-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-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-background-hover: #333;
--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);
--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);
--badge-bg: #131313;
--posts-meta-bg: #000000b8;
--badge-sfw: #68a728;
@@ -912,7 +912,7 @@ html[theme="xd"] {
--img-border-width: 0;
--img-border-color: #363636;
--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 {
@@ -1724,7 +1724,8 @@ body.sidebar-right-hidden .global-sidebar-right {
display: grid;
grid-template-rows: auto auto auto;
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;
padding: 20px;
min-height: 0;
@@ -1997,8 +1998,13 @@ body.sidebar-right-hidden .global-sidebar-right {
/* ─── Sidebar Skeleton Loader ─────────────────────────────────────────────── */
@keyframes skeleton-shimmer {
0% { background-position: -300px 0; }
100% { background-position: 300px 0; }
0% {
background-position: -300px 0;
}
100% {
background-position: 300px 0;
}
}
.sidebar-skeleton-item {
@@ -2028,12 +2034,10 @@ body.sidebar-right-hidden .global-sidebar-right {
/* Shared shimmer base */
.skeleton-avatar,
.skeleton-line {
background: linear-gradient(
90deg,
rgba(255,255,255,0.04) 0%,
rgba(255,255,255,0.10) 40%,
rgba(255,255,255,0.04) 80%
);
background: linear-gradient(90deg,
rgba(255, 255, 255, 0.04) 0%,
rgba(255, 255, 255, 0.10) 40%,
rgba(255, 255, 255, 0.04) 80%);
background-size: 600px 100%;
animation: skeleton-shimmer 1.6s ease-in-out infinite;
border-radius: 3px;
@@ -2050,22 +2054,51 @@ body.sidebar-right-hidden .global-sidebar-right {
height: 10px;
}
.skeleton-name { width: 55%; }
.skeleton-time { width: 35%; height: 8px; opacity: 0.65; }
.skeleton-name {
width: 55%;
}
.skeleton-text-long { width: 90%; margin-bottom: 6px; }
.skeleton-text-medium { width: 70%; margin-bottom: 6px; }
.skeleton-text-short { width: 45%; margin-bottom: 0; }
.skeleton-time {
width: 35%;
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) */
.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-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-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-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) */
@media (max-width: 999px) {
@@ -3677,7 +3710,8 @@ ul.navbar-nav li.nav-item {
content: "" !important;
} */
.fa-solid.fa-angle-up, .fa-regular.fa-image {
.fa-solid.fa-angle-up,
.fa-regular.fa-image {
margin-right: 5px;
}
@@ -4344,6 +4378,26 @@ span.placeholder {
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 {
height: 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%);
}
div.posts > a[data-mode="null"] > p::before {
div.posts>a[data-mode="null"]>p::before {
background: #000000;
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 {
/*opacity: 0.4 !important;*/ /* default */
opacity: 0.1 !important; /* darker */
/*opacity: 0.4 !important;*/
/* default */
opacity: 0.1 !important;
/* darker */
}
.fader-out {
@@ -6319,20 +6375,23 @@ button#togglebg {
}
/* ─── Posts Grid Skeleton: shimmer on real items while thumbnail loads ─────── */
div.posts > a.lazy-thumb:not(.loaded) {
background: linear-gradient(
90deg,
rgba(255,255,255,0.04) 0%,
rgba(255,255,255,0.10) 40%,
rgba(255,255,255,0.04) 80%
);
div.posts>a.lazy-thumb:not(.loaded) {
background: linear-gradient(90deg,
rgba(255, 255, 255, 0.04) 0%,
rgba(255, 255, 255, 0.10) 40%,
rgba(255, 255, 255, 0.04) 80%);
background-size: 600px 100%;
animation: skeleton-shimmer 1.6s ease-in-out infinite;
}
/* 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+3) { animation-delay: 0.4s; }
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+3) {
animation-delay: 0.4s;
}
/* 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 ===== */
/* 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-row: span 2;
}
@@ -13668,9 +13727,11 @@ body.scroller-active #gchat-reopen-bubble {
}
}
#nav-meme-link, #nav-upload-link {
#nav-meme-link,
#nav-upload-link {
white-space: nowrap;
}
/* --- Admin IP History Styles --- */
.admin-ips-table {
width: 100%;
@@ -13678,6 +13739,7 @@ body.scroller-active #gchat-reopen-bubble {
border-spacing: 0 8px;
color: var(--white);
}
.admin-ips-table th {
padding: 15px;
text-align: left;
@@ -13685,21 +13747,26 @@ body.scroller-active #gchat-reopen-bubble {
font-size: 0.75rem;
letter-spacing: 1px;
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 {
transition: all 0.2s ease;
}
.admin-ips-table tbody tr {
background: rgba(255, 255, 255, 0.02);
}
.admin-ips-table tbody tr:hover {
background: rgba(255, 255, 255, 0.05);
}
.admin-ips-table td {
padding: 15px;
vertical-align: middle;
}
.ip-badge {
font-family: monospace;
padding: 4px 10px;
@@ -13712,10 +13779,12 @@ body.scroller-active #gchat-reopen-bubble {
display: inline-block;
max-width: 100%;
}
.date-cell {
font-size: 0.85rem;
color: #aaa;
}
.date-label {
display: block;
font-size: 0.7rem;

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

@@ -7822,8 +7822,16 @@ document.addEventListener('DOMContentLoaded', () => {
const elfe = e.target.closest('#elfe');
if (elfe) {
e.preventDefault();
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
const backgroundToggle = document.getElementById('show_background_toggle');
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_swiping": "Wischen 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_hint": "Unscharfen Hintergrund bei Beiträgen 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_swiping": "Disable Swiping",
"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_hint": "Show blurred background on items",
"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_swiping": "Swipen uitschakelen",
"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_hint": "Vervaagde achtergrond tonen bij items",
"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_swiping": "Wischen deaktivieren",
"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_hint": "Gefalteten Hintergrund auf Elementen anzeigen",
"render_emojis": "Emojis in Zitatantworten darstellen",

7
views/settings.html
View File

@@ -110,6 +110,13 @@
</label>
<small class="text-muted" style="margin-left: 25px;">{{ t('settings.scroll_nav_hint') }}</small>
</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;">
<label for="disable_autoplay_toggle"
style="cursor: pointer; display: flex; align-items: center; gap: 10px;">