魔改自这个佬的原版
刚才用claude3.5sonnet写的，就是感觉原版的一页看不了多少内容
/* ==============================
1. 基础元素样式
============================== */
/* 项目名称样式 */
.item-name[data-v-f71ca08e] {
font-weight: 700;
padding-left: 10px;
padding-right: 6px;
margin: 2px;
margin-right: auto;
}
/* 链接样式及动画效果 */
a {
text-decoration: none;
position: relative;
padding-left: 12px;
z-index: 1;
display: inline-block;
transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
}
a:not(.btn-info)::before {
content: '';
position: absolute;
left: 0;
top: 46%;
transform: translateY(-50%);
width: 5px;
height: 25px;
margin: 2px;
background-color: #55ba63;
transition: all cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
border-radius: 3px;
z-index: -1;
}
/* Hover效果 */
/* 白天模式 */
a:hover,
.p-2:hover {
color: #fff !important;
}
/* 夜间模式 */
.dark a:hover,
.dark .p-2:hover {
color: #000 !important;
}
/* 内边距样式 */
.p-2 {
padding-left: 0px;
padding-right: 10px;
font-weight: 700;
margin: 6px;
}
/* 链接悬停动画 */
a:hover::before {
width: 100%;
left: 0;
border-radius: 6px;
}
/* ==============================
2. 布局系统变量
============================== */
:root {
--bs-primary-rgb: 67, 179, 82;
--item-width: 280px; /* 项目宽度 */
--item-height: 80px; /* 降低高度适应横向布局 */
--grid-spacing: 1rem; /* 间距 */
--item-padding: 0.75rem; /* 内边距 */
}
/* ==============================
3. 响应式设计
============================== */
@media (max-width: 768px) {
.item {
width: 100%;
margin-right: 0;
}
:root {
--item-height: 70px;
}
.container {
padding: 0 0.5rem;
}
}
@media (min-width: 769px) and (max-width: 1200px) {
.item {
width: calc(50% - var(--grid-spacing));
}
}
@media (min-width: 1201px) {
.item {
width: calc(33.333% - var(--grid-spacing));
}
}
@media (min-width: 1600px) {
.item {
width: calc(25% - var(--grid-spacing));
}
.item-name {
font-size: 1.3em;
font-weight: 700;
letter-spacing: 0.8px;
}
.badge,
.tag-text[data-v-24636654] {
font-size: 0.9em;
}
.wrap > .d-flex {
font-size: 0.9em;
font-weight: 500;
letter-spacing: 0.8px;
}
}
/* ==============================
4. 布局组件
============================== */
/* 容器设置 */
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 1rem;
}
/* 监控列表布局 */
.monitor-list {
display: flex !important;
flex-wrap: wrap !important;
gap: var(--grid-spacing) !important;
justify-content: flex-start;
width: 100%;
padding: 0.5rem;
}
/* ==============================
5. 卡片组件
============================== */
/* 卡片基础样式 */
.item {
position: relative;
width: calc(33.333% - var(--grid-spacing));
min-width: 280px;
height: var(--item-height);
padding: var(--item-padding) !important;
border: 1px solid #ccc;
border-radius: 8px;
background: var(--card-bg, #fff);
margin-bottom: var(--grid-spacing);
/* Flexbox布局 */
display: flex;
flex-direction: row;
align-items: center;
gap: 1rem;
/* 动画效果 */
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.item > .row {
flex-direction: row;
width: 100%;
margin: 0;
align-items: center;
}
.row > div {
width: auto;
margin-right: 1rem;
}
/* 状态条样式 */
.hp-bar-big .beat[data-v-636dc6a9] {
background-color: #55ba63;
}
.hp-bar-big {
min-width: 120px;
}
/* ==============================
6. 徽章组件
============================== */
/* 徽章定位 */
body:not(.mobile) .badge,
body.mobile .badge {
position: absolute;
top: 50%;
right: var(--item-padding);
transform: translateY(-50%);
}
/* ==============================
7. 标题与按钮
============================== */
/* 分组标题样式 */
.group-title span[data-v-f71ca08e] {
display: inline-block;
min-width: 70px;
margin: 0 auto;
text-align: center;
}
/* 标题和信息按钮样式 */
h2,
.h2,
.btn-info {
margin-bottom: 0rem;
font-weight: 600;
color: white;
border: 1px solid #ccc;
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity));
border-radius: 9px;
padding: 6px 10px;
display: inline-block;
text-align: center;
min-width: 8%;
}
/* ==============================
8. 主题设置
============================== */
/* 深色主题样式覆盖 */
.dark h2,
.dark .h2,
.dark .btn-info,
.dark .refresh-info[data-v-b8247e57] {
color: #000000;
}
/* 状态指示器 */
.overall-status {
border: 1px solid #ccc;
border-radius: 9px;
position: absolute;
top: 10px;
right: 10px;
padding: 0.5rem !important;
}
.overall-status[data-v-b8247e57] {
font-weight: 700;
font-size: 18px;
}
/* 维护状态背景色 */
.bg-maintenance {
background-color: #4962bd !important;
}
/* 刷新组件样式 */
.refresh-info[data-v-b8247e57] {
font-family: math;
opacity: 0.9;
color: #ffffff;
border: 1px solid #ccc;
--bs-bg-opacity: 1;
background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity));
border-radius: 9px;
padding: 6px 6px;
display: inline-block;
text-align: center;
min-width: 4%;
}
/* UI元素样式 */
.rounded-pill {
border-radius: 0.5rem !important;
}
.shadow-box {
box-shadow: 0 15px 70px rgba(0, 0, 0, 0);
padding: 0px;
border-radius: 10px;
}
/* 间距调整 */
.p-2 {
padding: 0rem !important;
}
.mb-4,
.mb-5 {
margin-bottom: 0.5rem !important;
}
.mt-4 {
margin-top: 0.5rem !important;
}
.mt-5 {
margin-top: 0 !important;
}
/* 工具样式 */
::-webkit-scrollbar {
display: none;
}
