适用于 Komari 探针和哪吒监控的页脚赞助美化 css 组件

最近从哪吒监控迁移到了 Komari 探针面板，受到群友页脚滚动横幅美化组件的启发，折腾了一个探针页脚赞助美化 css 组件。加上其它相关背景、字体和小组件的美化，下面给出完整的 css 代码。

css 代码

自定义头部

/* — 1. 基础与全局样式 — */
@media (min-width: 641px) {
* { font-family: var(–font-desktop); font-display: swap; }
h1, h2, h3 { font-weight: 600; }
h4, h5, h6, strong, b { font-weight: 500; }

.dark .bg-cover::after { backdrop-filter: blur(1px) brightness(0.8); }
.light .bg-cover::after { backdrop-filter: blur(1px) brightness(0.9); }

@media (hover: hover) {
img[alt=”animated-man”] {
transition: transform 0.2s, filter 0.2s;
will-change: transform;
}
img[alt=”animated-man”]:hover {
transform: scale(1.05);
filter: brightness(1.1);
}
}
}

img[alt=”animated-man”] { /* 插图定位 */
position: absolute;
right: 8px;
top: -116px;
z-index: 50;
width: 110px;
transform: scale(0.9);
}

footer { display: none !important; } /* 隐藏页脚 */

/* 隐藏包含IPv4/IPv6标签的整个section容器 */
section.flex.gap-1.items-center.flex-wrap {
display: none !important;
}

@keyframes fadeIn { /* 动画定义 */
0%, 80% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes borderFlow {
to { background-position: 0 0, 200% 0; }
}

/* — 2. 赞助商滚动条样式 — */
.bm-wrap {
width: 100%;
margin: 40px auto 20px;
display: flex;
justify-content: center;
}
.bottom-marquee {
width: min(92vw, 980px);
height: 42px;
border-radius: 999px;
padding: 0 16px;
box-shadow: 0 10px 24px rgba(0,0,0,0.18);
backdrop-filter: blur(10px);
overflow: hidden;
position: relative;
background:
var(–bg-light) padding-box,
linear-gradient(90deg, #ff3b30, #ffcc00, #34c759, #007aff, #ff3b30) border-box;
border: 2px solid transparent;
background-size: auto, 200% 100%;
animation:
borderFlow 6s linear infinite,
fadeIn 2s ease-out;
will-change: background-position;
}
.dark .bottom-marquee {
background:
var(–bg-dark) padding-box,
linear-gradient(90deg, #ff3b30, #ffcc00, #34c759, #007aff, #ff3b30) border-box;
}
.bm-track {
position: absolute;
inset: 0;
display: flex;
align-items: center;
gap: 8px;
padding: 0 8px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
touch-action: pan-x;
}
.bm-track::-webkit-scrollbar { display: none; }
.bm-track::before, .bm-track::after { content: ”; flex-grow: 1; }
.bm-item {
font-weight: 600;
font-size: 14px;
line-height: 42px;
opacity: 0.95;
display: flex;
align-items: center;
white-space: nowrap;
flex-shrink: 0;
}
.bm-item a {
flex-shrink: 0;
transition: opacity 0.2s;
}
.bm-item a:hover { opacity: 0.8; }
.logo {
height: 28px;
width: auto;
object-fit: contain;
margin: 0 5px;
}

/* — 3. 时间显示美化 (纯 CSS 方案) — */
/* a. 隐藏原始文本 */
p.text-base.font-semibold,
p.text-sm.font-medium.opacity-50 {
display: none !important;
}
/* b. 美化时间容器 (桌面端及默认) */
.flex.text-sm.font-medium.mt-0\.5 {
font-size: 3.0rem !important;
font-weight: bold;
opacity: 0.8 !important;
justify-content: center !important;
align-items: baseline !important;
color: rgba(0, 0, 0, 0.85) !important;
}
/* c. 暗色模式适配 */
.dark .flex.text-sm.font-medium.mt-0\.5 {
color: rgba(255, 255, 255, 0.85) !important;
}
/* d. 数字与冒号对齐 */
.number__inner {
display: inline-block !important;
width: 2ch !important;
text-align: center !important;
}
.number-flow-react svg {
height: 2.5rem !important;
vertical-align: middle !important;
}

/* — 4. 移动端样式覆盖 — */
@media (max-width: 640px) {
/* a. 基础字体和大小 */
* { font-family: var(–font-mobile); }
body { font-size: 0.95rem; }

/* b. 赞助商条适配 */
.bottom-marquee { height: 38px; }
.bm-item { font-size: 13px; line-height: 38px; }
.logo { height: 24px; }

/* c. 时间显示适配 */
.flex.text-sm.font-medium.mt-0\.5 {
font-size: 2.2rem !important;
}
.number-flow-react svg {
height: 1.9rem !important;
}
}
</style>

// — 1. 定义自定义变量 —
window.CustomBackgroundImage = ‘https://s2.loli.net/2024/12/31/itJ2dS4Vv9qfLTl.webp’;
window.CustomMobileBackgroundImage = ‘https://s2.loli.net/2024/12/31/ZImuea5CnqLw1iY.webp’;
window.CustomLogo = ‘https://s2.loli.net/2025/12/27/sC6iFExcQZn3Xz4.webp’;
window.CustomDesc = ‘™’;
window.CustomIllustration = ‘https://s2.loli.net/2024/12/24/fj3EXY7umsyR9NW.webp’;
window.ShowNetTransfer = true;
window.ForceUseSvgFlag = true;

// — 2. 动态加载字体和预加载背景图 —
const isMobile = window.matchMedia(‘(max-width: 640px)’).matches;
if (!isMobile) {
const font = document.createElement(‘link’);
font.rel = ‘stylesheet’;
font.href = ‘https://font.sec.miui.com/font/css?family=MiSans:400,500,600:MiSans&display=swap’;
font.media = ‘print’;
font.onload = () => font.media = ‘all’;
document.head.appendChild(font);
}
const bgImage = isMobile ? window.CustomMobileBackgroundImage : window.CustomBackgroundImage;
if (bgImage) {
const preload = document.createElement(‘link’);
Object.assign(preload, {
rel: ‘preload’,
as: ‘image’,
href: bgImage,
fetchpriority: ‘high’
});
document.head.appendChild(preload);
}

// — 3. 修改网站标题 —
try {
const currentTitle = document.title;
const separatorIndex = currentTitle.indexOf(‘ – ‘);
if (separatorIndex !== -1) {
document.title = currentTitle.substring(0, separatorIndex);
}
} catch (e) {
console.error(‘修改标题失败:’, e);
}
});
</script>

自定义 Body

使用效果

桌面版

手机版（可触摸滑动）

代码是纯 css，理论上 Komari 探针和哪吒监控都适用，复制完整代码添加到哪吒面板或 Komari 探针的后台自定义 css 区域保存即可生效。以上 Logo 图片可以自行替换图床链接，图片 aff 链接同样自行修改替换即可。

完整效果参考我的探针 sharon.li 。探针基于 Komari 搭建并使用了 Nezha dash V1 移植主题。

适用于 Komari 探针和哪吒监控的页脚赞助美化 css 组件

css 代码

使用效果

0 条评论

取消