diff --git a/public/s/css/f0ckm.css b/public/s/css/f0ckm.css
index 9019ce6..d278b93 100644
--- a/public/s/css/f0ckm.css
+++ b/public/s/css/f0ckm.css
@@ -14639,8 +14639,9 @@ body.scroller-active #gchat-reopen-bubble {
/* Filter badge style on navbar */
.filter-badge {
position: absolute;
- bottom: -20px;
- right: 0;
+ top: 100%;
+ left: 50%;
+ transform: translateX(-50%);
font-size: 9px;
font-weight: 800;
padding: 2px 4px;
@@ -14653,6 +14654,7 @@ body.scroller-active #gchat-reopen-bubble {
letter-spacing: 0.5px;
z-index: 10;
display: inline-flex;
+ flex-direction: column;
align-items: center;
user-select: none;
}
@@ -14679,11 +14681,47 @@ body.scroller-active #gchat-reopen-bubble {
/* Slate grey */
}
+/* Multi-rating mode: neutral wrapper + individual colored letter chips */
+.filter-badge-multi {
+ background: transparent;
+ padding: 0;
+ gap: 2px;
+ box-shadow: none;
+}
+
+.filter-letter {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 11px;
+ height: 11px;
+ border-radius: 2px;
+ font-size: 8px;
+ font-weight: 900;
+ color: #fff;
+ line-height: 1;
+}
+
+.filter-letter-sfw { background: var(--badge-sfw, #68a728); }
+.filter-letter-nsfw { background: var(--badge-nsfw, #E10DC3); }
+.filter-letter-nsfl { background: var(--badge-nsfl, #660000); }
+.filter-letter-unt { background: #ff9800; }
+
+
/* Dynamic MIME icons styles */
+.filter-rating-row {
+ display: inline-flex;
+ align-items: center;
+ gap: 2px;
+ justify-content: center;
+}
+
.filter-mime-icons {
display: inline-flex;
gap: 3px;
- margin-left: 4px;
+ margin-left: 0;
+ margin-top: 2px;
+ justify-content: center;
align-items: center;
}
diff --git a/public/s/js/f0ckm.js b/public/s/js/f0ckm.js
index 729aee9..f4bde08 100644
--- a/public/s/js/f0ckm.js
+++ b/public/s/js/f0ckm.js
@@ -393,15 +393,23 @@ window.cancelAnimFrame = (function () {
if (isAll) {
badgeText = 'ALL';
badgeClass += ' filter-badge-all';
- } else {
- // Multi-rating mode: show abbreviated names
+ } else if (activeRatings.length === 1) {
+ // Single rating — keep existing single-color badge style
+ const single = activeRatings[0];
const abbr = { sfw: 'SFW', nsfw: 'NSFW', nsfl: 'NSFL', untagged: 'UNT' };
- badgeText = activeRatings.map(r => abbr[r] || r.toUpperCase()).join('+');
- // Use most prominent active rating for colour hint
- if (activeRatings.includes('nsfw')) badgeClass += ' filter-badge-nsfw';
- else if (activeRatings.includes('nsfl')) badgeClass += ' filter-badge-nsfl';
- else if (activeRatings.includes('sfw')) badgeClass += ' filter-badge-sfw';
+ badgeText = abbr[single] || single.toUpperCase();
+ if (single === 'nsfw') badgeClass += ' filter-badge-nsfw';
+ else if (single === 'nsfl') badgeClass += ' filter-badge-nsfl';
+ else if (single === 'sfw') badgeClass += ' filter-badge-sfw';
else badgeClass += ' filter-badge-unt';
+ } else {
+ // Multi-rating: render individual colored letter chips, neutral container
+ const letterMap = { sfw: 'S', nsfw: 'N', nsfl: 'N', untagged: 'U' };
+ const colorMap = { sfw: 'filter-letter-sfw', nsfw: 'filter-letter-nsfw', nsfl: 'filter-letter-nsfl', untagged: 'filter-letter-unt' };
+ badgeText = activeRatings.map(r =>
+ `${letterMap[r] || r[0].toUpperCase()}`
+ ).join('');
+ badgeClass += ' filter-badge-multi';
}
} else {
switch (activeMode) {
@@ -438,7 +446,8 @@ window.cancelAnimFrame = (function () {
}
badge.className = badgeClass;
- badge.innerHTML = badgeText + zomgHtml;
+ // Always wrap rating text in a row container so mime icons can sit on the next row cleanly
+ badge.innerHTML = `${badgeText}${zomgHtml}`;
if (hasMimeFilter) {
const iconsContainer = document.createElement('span');
@@ -582,10 +591,10 @@ window.cancelAnimFrame = (function () {
}
if (activeRatings.length === 0) {
- // Nothing selected: default back to SFW
+ // Nothing selected: treat as ALL (no filter = show everything)
clearRatingsCookie();
- window.activeMode = 0;
- document.cookie = `mode=0; Path=/; Max-Age=31536000`;
+ window.activeMode = 3;
+ document.cookie = `mode=3; Path=/; Max-Age=31536000`;
} else {
setRatingsCookie(activeRatings);
// Use mode=3 (ALL) on server when multi-select; single-select maps to native mode
@@ -607,7 +616,7 @@ window.cancelAnimFrame = (function () {
if (data.success) {
const label = activeRatings.length > 0
? activeRatings.map(r => r.toUpperCase()).join('+') + ' ACTIVE'
- : 'SFW MODE ACTIVATED';
+ : 'ALL MODE ACTIVATED';
window.flashMessage(label);
gridCacheMap.clear();
const isGridView = document.querySelector('.posts, .tags-grid');
@@ -5234,7 +5243,10 @@ window.cancelAnimFrame = (function () {
const btn = e.target.closest('.shuffle-btn');
if (btn) {
e.preventDefault();
- handleShuffleBtnClick(btn);
+ const fromFilterModal = !!btn.closest('#excluded-tags-overlay');
+ if (fromFilterModal) window._keepFilterModal = true;
+ const result = handleShuffleBtnClick(btn);
+ if (fromFilterModal) Promise.resolve(result).finally(() => { window._keepFilterModal = false; });
}
});