给你的Komari面板增加顶部超链接，简单，支持黑夜白天模式
效果
怎么做
- 进入komari后台
- 设置 - 站点
- 自定义 Body - 填写(改成自己想要的链接)：
<div class="top-info">
<div class="top-info-container">
<a href="https://www.lsp.pw" target="_blank" class="top-info-link text-primary">梁山泊</a>
<a href="https://www.buyao.de" target="_blank" class="top-info-link text-primary">BuYao.De</a>
<a href="https://github.com/awinds" target="_blank" class="top-info-link text-primary">GitHub</a>
</div>
</div>
<style>
.top-info {
position: fixed;
top: 10px;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
}
.top-info-container {
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 10px; /* 减小间距 */
padding: 5px 12px; /* 减小高度 */
background: rgba(255, 255, 255, 0.2);
border-radius: 12px;
backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.top-info-link {
text-decoration: none;
font-size: 14px;
font-weight: 500;
padding: 4px 8px;
border-radius: 6px;
transition: all 0.3s ease;
white-space: nowrap;
}
.top-info-link:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
/* 小屏幕适配 */
@media (max-width: 600px) {
.top-info-container {
gap: 8px;
padding: 5px 10px;
}
.top-info-link {
font-size: 13px;
padding: 3px 6px;
}
}
</style>