:root {
--min-item-width: 28ch;
--max-item-width: .5fr;
--grid-spacing: .25rem;
--item-padding: .25rem;
}
/* 小屏幕铺满 */
@media (max-width: 600px) {
:root { --max-item-width: 1fr; }
}
/* 大屏幕限制宽度 */
@media (min-width: 2560px) {
:root { --max-item-width: 300px; }
}
/* 4K 远距离阅读优化 */
@media (min-width: 3840px) {
.item-name {
font-size: 1.3em;
font-weight: 700;
letter-spacing: 0.8px;
}
.badge { font-size: .9em; }
.wrap > .d-flex {
font-size: .9em;
font-weight: 500;
letter-spacing: .8px;
}
}
/* 容器宽度 */
.container {
max-width: 98%;
}
/* 网格布局 */
.monitor-list > .monitor-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--min-item-width), var(--max-item-width)));
grid-gap: var(--grid-spacing);
}
/* ====================== 核心卡片样式 ====================== */
.item {
position: relative;
width: 100%;
padding: var(--item-padding) !important;
border: 1.5px solid #33774c !important;
background: rgba(0, 0, 0, 0.4);
border-radius: 8px;
box-shadow: 0 0 20px rgba(51, 119, 76, 0.7), 0 0 40px rgba(51, 119, 76, 0.3);
animation: glow-green 4s ease-in-out infinite alternate;
transition: all 0.4s ease;
}
/* 宕机 → 红光呼吸 */
.item.status-down,
.item.down,
.item.bg-danger,
.item .badge.bg-danger,
.item:has(.bg-danger) {
border-color: #c42b1c !important;
box-shadow: 0 0 20px rgba(196, 43, 28, 0.8), 0 0 40px rgba(196, 43, 28, 0.4);
animation: glow-red 3s ease-in-out infinite alternate !important;
}
/* 维护中 → 黄光呼吸 */
.item.status-maintenance,
.item.maintenance,
.item.bg-maintenance,
.item.bg-warning,
.item .badge.bg-warning,
.item:has(.bg-warning) {
border-color: #d4a017 !important;
box-shadow: 0 0 20px rgba(212, 160, 23, 0.8), 0 0 40px rgba(212, 160, 23, 0.4);
animation: glow-yellow 3.5s ease-in-out infinite alternate !important;
}
/* ====================== 三种呼吸动画 ====================== */
@keyframes glow-green {
from { box-shadow: 0 0 15px rgba(51, 119, 76, 0.5), 0 0 30px rgba(51, 119, 76, 0.2); }
to { box-shadow: 0 0 30px rgba(51, 119, 76, 0.9), 0 0 60px rgba(51, 119, 76, 0.5), 0 0 90px rgba(51, 119, 76, 0.3); }
}
@keyframes glow-red {
from { box-shadow: 0 0 15px rgba(196, 43, 28, 0.6), 0 0 30px rgba(196, 43, 28, 0.3); }
to { box-shadow: 0 0 35px rgba(196, 43, 28, 1), 0 0 70px rgba(196, 43, 28, 0.6), 0 0 100px rgba(196, 43, 28, 0.4); }
}
@keyframes glow-yellow {
from { box-shadow: 0 0 15px rgba(212, 160, 23, 0.6), 0 0 30px rgba(212, 160, 23, 0.3); }
to { box-shadow: 0 0 35px rgba(212, 160, 23, 1), 0 0 70px rgba(212, 160, 23, 0.6), 0 0 100px rgba(212, 160, 23, 0.4); }
}
/* 悬停增强（全状态通用） */
.item:hover {
transform: translateY(-4px);
box-shadow: 0 0 40px rgba(51, 119, 76, 1), 0 0 80px rgba(51, 119, 76, 0.6);
}
.item.status-down:hover,
.item.down:hover,
.item.bg-danger:hover {
box-shadow: 0 0 45px rgba(196, 43, 28, 1), 0 0 90px rgba(196, 43, 28, 0.8);
}
.item.status-maintenance:hover,
.item.maintenance:hover,
.item.bg-maintenance:hover,
.item.bg-warning:hover {
box-shadow: 0 0 45px rgba(212, 160, 23, 1), 0 0 90px rgba(212, 160, 23, 0.8);
}
/* ====================== 你原来的其他样式 ====================== */
.item > .row { flex-direction: column; }
.row > div { width: 100%; }
.item-name { color: #f1f1f1; }
.row { position: relative; }
body:not(.mobile) .badge {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.main { position: relative; }
.overall-status { padding: .5rem !important; }
body:not(.mobile) .overall-status {
position: absolute;
top: 0;
right: 0;
width: 50%;
}
footer .alert-heading { padding: 0 !important; }
.mb-4, .mb-5 { margin-bottom: .5rem !important; }
.mt-4 { margin-top: .5rem !important; }
.mt-5 { margin-top: 0 !important; }
.bg-maintenance { background-color: #4962bd !important; }
/* ====================== 强制全局微软雅黑（最强版）====================== */
, ::before, *::after {
font-family: "Microsoft YaHei", "微软雅黑", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
/* 二次保险：针对常见组件单独再打一针 */
body, .container, .item, .item-name, .badge, .alert, .alert-heading,
h1, h2, h3, h4, h5, h6, p, span, div, a, small, .text-muted, .overall-status,
.btn, .form-control, .form-select, .input-group-text,
.dropdown-menu, .tooltip, .popover, .toast {
font-family: "Microsoft YaHei", "微软雅黑", sans-serif !important;
}
/* 4K 那段也再强制一次 */
@media (min-width: 3840px) {
.item-name, .badge, .wrap > .d-flex, * {
font-family: "Microsoft YaHei", "微软雅黑", sans-serif !important;
}
}
/* 终极保险：任何内联 style 都被干掉（放最下面） */
html * {
font-family: "Microsoft YaHei", "微软雅黑" !important;
}:root {
--min-item-width: 28ch;
--max-item-width: .5fr;
--grid-spacing: .25rem;
--item-padding: .25rem;
}
/* 小屏幕铺满 */
@media (max-width: 600px) {
:root { --max-item-width: 1fr; }
}
/* 大屏幕限制宽度 */
@media (min-width: 2560px) {
:root { --max-item-width: 300px; }
}
/* 4K 远距离阅读优化 */
@media (min-width: 3840px) {
.item-name {
font-size: 1.3em;
font-weight: 700;
letter-spacing: 0.8px;
}
.badge { font-size: .9em; }
.wrap > .d-flex {
font-size: .9em;
font-weight: 500;
letter-spacing: .8px;
}
}
/* 容器宽度 */
.container {
max-width: 98%;
}
/* 网格布局 */
.monitor-list > .monitor-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--min-item-width), var(--max-item-width)));
grid-gap: var(--grid-spacing);
}
/* ====================== 核心卡片样式 ====================== */
.item {
position: relative;
width: 100%;
padding: var(--item-padding) !important;
border: 1.5px solid #33774c !important;
background: rgba(0, 0, 0, 0.4);
border-radius: 8px;
box-shadow: 0 0 20px rgba(51, 119, 76, 0.7), 0 0 40px rgba(51, 119, 76, 0.3);
animation: glow-green 4s ease-in-out infinite alternate;
transition: all 0.4s ease;
}
/* 宕机 → 红光呼吸 */
.item.status-down,
.item.down,
.item.bg-danger,
.item .badge.bg-danger,
.item:has(.bg-danger) {
border-color: #c42b1c !important;
box-shadow: 0 0 20px rgba(196, 43, 28, 0.8), 0 0 40px rgba(196, 43, 28, 0.4);
animation: glow-red 3s ease-in-out infinite alternate !important;
}
/* 维护中 → 黄光呼吸 */
.item.status-maintenance,
.item.maintenance,
.item.bg-maintenance,
.item.bg-warning,
.item .badge.bg-warning,
.item:has(.bg-warning) {
border-color: #d4a017 !important;
box-shadow: 0 0 20px rgba(212, 160, 23, 0.8), 0 0 40px rgba(212, 160, 23, 0.4);
animation: glow-yellow 3.5s ease-in-out infinite alternate !important;
}
/* ====================== 三种呼吸动画 ====================== */
@keyframes glow-green {
from { box-shadow: 0 0 15px rgba(51, 119, 76, 0.5), 0 0 30px rgba(51, 119, 76, 0.2); }
to { box-shadow: 0 0 30px rgba(51, 119, 76, 0.9), 0 0 60px rgba(51, 119, 76, 0.5), 0 0 90px rgba(51, 119, 76, 0.3); }
}
@keyframes glow-red {
from { box-shadow: 0 0 15px rgba(196, 43, 28, 0.6), 0 0 30px rgba(196, 43, 28, 0.3); }
to { box-shadow: 0 0 35px rgba(196, 43, 28, 1), 0 0 70px rgba(196, 43, 28, 0.6), 0 0 100px rgba(196, 43, 28, 0.4); }
}
@keyframes glow-yellow {
from { box-shadow: 0 0 15px rgba(212, 160, 23, 0.6), 0 0 30px rgba(212, 160, 23, 0.3); }
to { box-shadow: 0 0 35px rgba(212, 160, 23, 1), 0 0 70px rgba(212, 160, 23, 0.6), 0 0 100px rgba(212, 160, 23, 0.4); }
}
/* 悬停增强 */
.item:hover {
transform: translateY(-4px);
box-shadow: 0 0 40px rgba(51, 119, 76, 1), 0 0 80px rgba(51, 119, 76, 0.6);
}
.item.status-down:hover,
.item.down:hover,
.item.bg-danger:hover {
box-shadow: 0 0 45px rgba(196, 43, 28, 1), 0 0 90px rgba(196, 43, 28, 0.8);
}
.item.status-maintenance:hover,
.item.maintenance:hover,
.item.bg-maintenance:hover,
.item.bg-warning:hover {
box-shadow: 0 0 45px rgba(212, 160, 23, 1), 0 0 90px rgba(212, 160, 23, 0.8);
}
/* ====================== 原有布局样式 ====================== */
.item > .row { flex-direction: column; }
.row > div { width: 100%; }
.item-name { color: #f1f1f1; }
.row { position: relative; }
body:not(.mobile) .badge {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.main { position: relative; }
.overall-status { padding: .5rem !important; }
body:not(.mobile) .overall-status {
position: absolute;
top: 0;
right: 0;
width: 50%;
}
footer .alert-heading { padding: 0 !important; }
.mb-4, .mb-5 { margin-bottom: .5rem !important; }
.mt-4 { margin-top: .5rem !important; }
.mt-5 { margin-top: 0 !important; }
.bg-maintenance { background-color: #4962bd !important; }
/* ====================== 终极系统字体栈（-apple-system 方案）====================== */
/* 2025 年最清晰、最省电、兼容性最高的写法 */
, ::before, *::after,
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video,
button, input, textarea, select,
.badge, .btn, .alert, .tooltip, .popover, .toast {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
"Hiragino Sans GB", "Source Han Sans CN", "Noto Sans SC", sans-serif !important;
}
/* 终极一击：防止任何内联 style 捣乱（放最下面） */
html * {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
"Hiragino Sans GB", "Source Han Sans CN", "Noto Sans SC", sans-serif !important;
}