分享一些主题改造

[Tokinx]

非常感谢 lyimoexiao 开发的这款主题，真的非常漂亮。

1.0.7 版本支持了标签的显示，但是主题默认的标签显示和主机名好像有点冲突，导致多几个标签就无法显示主机名了，而且一些标签超长换行后有点不好看，所以闲暇之余针对主题做了一些个性化的 CSS 改动。

主要解决问题和改动：

一些标签超长导致换行：

解决方案：
使用zoom缩放了一下。

标签与主机名显示在一起，导致超长无法显示主机名：

解决方案：
标签改为卡片hover后浮动显示

还有其他一些细微改动，最终效果如下图所示：

如果喜欢这些改动，可以将下方CSS更新到 Komari 的自定义 CSS 中，也可以按自己喜好调整。

.n-tabs .n-tabs-pane-wrapper {
    overflow: unset;
}
.text-xs:not(.flex-col) .n-text ~ .n-text,
.n-card :is(.n-progress, .traffic-progress) ~ .n-text {
  zoom: 0.88;
}
.n-progress .n-progress-graph .n-progress-graph-line .n-progress-graph-line-rail,
.traffic-progress .traffic-progress__rail {
  height: 4px !important;
}
.n-card {
  overflow: hidden;
}
.n-card .flex-between:last-child {
  transition: 300ms;
}
.n-card .flex-between:last-child .n-text:last-child {
  line-height: 1;
  box-shadow: 0 0 0 1px rgb(111 108 236 / 30%) inset;
  border-radius: 2px;
  padding: 0 7px;
  font-size: 12px;
  height: 22px;
  background: rgb(111 108 236 / 10%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(111 108 236);
}
.n-card .n-card-header__extra .n-button ~ .n-tag{
    font-size: 0;
    border-radius: 9rem;
    height: 8px;
    width: 8px;
    padding: 0;
    overflow: unset !important;
    background-color: var(--n-text-color);
}
.n-card .n-card-header__extra .n-button ~ .n-tag::after{
    content: '';
    position: absolute;
    inset: 0;
    background: currentColor;
    border-radius: 9rem;
    height: 16px;
    width: 16px;
    opacity: 0.2;
    flex-shrink: 0;
    margin: -4px;
}
.n-card .shrink-0.n-icon ~ .flex.shrink-0 {
  position: absolute;
  backdrop-filter: blur(8px);
  padding: 1rem 22px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  z-index: 9;
  transform: translateY(10%);
  opacity: 0;
  transition: 300ms;
}
.n-card:hover .shrink-0.n-icon ~ .flex.shrink-0 {
  transform: translateY(0);
  opacity: 1;
}
.n-card:hover .flex-between:last-child {
  opacity: 0.3;
}
.echarts > div:last-child{
    background: rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 0 15px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.06)  !important;
}

[Tokinx]

显示效果可以参考：https://tz.osid.cn

Last time：2026年3月1日19:45:59

因为 UI 属于比较主观的调整，所以就不提 PR 了。

再次感谢作者提供这么漂亮的主题。

[lyimoexiao]

非常感谢提供一个很好的思路！标签显示的排版一直是我比较头痛的问题，之前一直在考虑常驻显示所以直接给塞 NodeName 前面了。很是不优雅 ><

[lyimoexiao]

最新版本已经引入相关功能啦～ 感谢支持～