This commit is contained in:
2026-05-22 18:27:29 +02:00
parent 126923f2b7
commit de2302b589
2 changed files with 32 additions and 34 deletions

View File

@@ -14395,7 +14395,6 @@ body.scroller-active #gchat-reopen-bubble {
.filter-badge { .filter-badge {
position: absolute; position: absolute;
bottom: -13px; bottom: -13px;
right: -5px;
font-size: 8px; font-size: 8px;
font-weight: 800; font-weight: 800;
padding: 1px 4px; padding: 1px 4px;
@@ -14434,20 +14433,21 @@ body.scroller-active #gchat-reopen-bubble {
/* Slate grey */ /* Slate grey */
} }
/* Dynamic MIME dots styles */ /* Dynamic MIME icons styles */
.filter-mime-dots { .filter-mime-icons {
display: inline-flex; display: inline-flex;
gap: 2px; gap: 3px;
margin-left: 2px; margin-left: 4px;
align-items: center; align-items: center;
} }
.mime-dot { .mime-icon {
display: inline-block; font-size: 7px !important;
width: 4px; width: auto !important;
height: 4px; /* Override navbar icon fixed width */
border-radius: 50%; text-align: center;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.8); line-height: 1;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
animation: dot-fade-in 0.2s ease-out forwards; animation: dot-fade-in 0.2s ease-out forwards;
} }
@@ -14463,28 +14463,20 @@ body.scroller-active #gchat-reopen-bubble {
} }
} }
.mime-dot-video { .mime-icon-video {
background-color: #00bcd4; text-shadow: 0 0 3px #00bcd4;
/* Cyan */
box-shadow: 0 0 3px #00bcd4;
} }
.mime-dot-image { .mime-icon-image {
background-color: #2ecc71; text-shadow: 0 0 3px #2ecc71;
/* Green */
box-shadow: 0 0 3px #2ecc71;
} }
.mime-dot-audio { .mime-icon-audio {
background-color: #e84393; text-shadow: 0 0 3px #e84393;
/* Pink */
box-shadow: 0 0 3px #e84393;
} }
.mime-dot-flash { .mime-icon-flash {
background-color: #f1c40f; text-shadow: 0 0 3px #f1c40f;
/* Yellow */
box-shadow: 0 0 3px #f1c40f;
} }
/* ZOMG Mode glowing Z indicator */ /* ZOMG Mode glowing Z indicator */

View File

@@ -344,15 +344,21 @@ window.cancelAnimFrame = (function () {
badge.innerHTML = badgeText + zomgHtml; badge.innerHTML = badgeText + zomgHtml;
if (hasMimeFilter) { if (hasMimeFilter) {
const dotsContainer = document.createElement('span'); const iconsContainer = document.createElement('span');
dotsContainer.className = 'filter-mime-dots'; iconsContainer.className = 'filter-mime-icons';
selectedMimes.forEach(mime => { selectedMimes.forEach(mime => {
const dot = document.createElement('span'); const icon = document.createElement('i');
dot.className = `mime-dot mime-dot-${mime}`; let iconClass = 'mime-icon ';
dot.title = mime.charAt(0).toUpperCase() + mime.slice(1); if (mime === 'audio') iconClass += 'fa-solid fa-music mime-icon-audio';
dotsContainer.appendChild(dot); else if (mime === 'image') iconClass += 'fa-solid fa-image mime-icon-image';
else if (mime === 'video') iconClass += 'fa-solid fa-film mime-icon-video';
else if (mime === 'flash') iconClass += 'fa-solid fa-bolt mime-icon-flash';
icon.className = iconClass;
icon.title = mime.charAt(0).toUpperCase() + mime.slice(1);
iconsContainer.appendChild(icon);
}); });
badge.appendChild(dotsContainer); badge.appendChild(iconsContainer);
} }
badge.style.display = 'inline-flex'; badge.style.display = 'inline-flex';