自用Uptime-Kuma样式分享

代码部分

只写了深色模式，浅色模式下可能不适配

/* 添加背景 */
body {
    background-image: url("https://rainview.net/wp-content/uploads/2025/06/20250608025015534954.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position-x: center;
}

/* 为服务状态显示区域添加阴影和透明效果 */
.shadow-box:not(.alert) {
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* 鼠标悬停时，将服务状态显示区域背景色设置为半透明 */
.monitor-list .item:hover,
.monitor-list .item.active {
    background-color: rgba(255, 255, 255, 0.1);
}

/* 全局白色字体 */
div {
    color: white;
}

/* 修改未检测的状态条样式为半透明 */
.hp-bar-big .beat.empty[data-v-636dc6a9] {
    background-color: rgba(162, 162, 162, 0.6);
}

/* 修改正常状态条样式为半透明 */
.hp-bar-big .beat[data-v-636dc6a9] {
    background-color: rgba(92, 221, 139, 0.6);
}

/* 修改异常状态条样式为半透明 */
.hp-bar-big .beat.down[data-v-636dc6a9] {
    background-color: rgba(220, 53, 69, 0.6);
}

/* 修改选择框样式（管理员才能看到的选择监控项选项） */
.multiselect__tags {
    background-color: #fff0 !important;
    border-color: #fff !important;
}

/* 修改选择框样式（管理员才能看到的选择监控项选项） */
.multiselect__input,
.multiselect__single {
    background-color: #fff0;
}

/* 隐藏“服务”标识 */
h2[data-v-f71ca08e].group-title {
    display: none;
}

/* 修改“编辑状态页面”和“前往仪表盘”按钮样式 */
.btn-info {
    color: #fff;
    background-color: rgba(92, 221, 139, 0.7) !important;  /* 修改按钮颜色为绿色，和整体的Uptime-Kuma颜色保持一致 */
    border-color: rgba(255, 255, 255, 0) !important;  /* 修改边框为透明 */
}

效果图