62 lines
1.5 KiB
CSS
62 lines
1.5 KiB
CSS
@layer utilities {
|
|
.content-auto {
|
|
content-visibility: auto;
|
|
}
|
|
.card-shadow {
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
}
|
|
.sidebar-item-active {
|
|
background-color: rgba(22, 93, 255, 0.1);
|
|
color: #165DFF;
|
|
border-right: 4px solid #165DFF;
|
|
}
|
|
}
|
|
|
|
/* 服务器状态组件光晕效果 */
|
|
.glow-effect {
|
|
animation: pulse 2s ease-in-out;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
box-shadow: 0 0 0 0 rgba(41, 128, 185, 0.4);
|
|
}
|
|
70% {
|
|
box-shadow: 0 0 0 10px rgba(41, 128, 185, 0);
|
|
}
|
|
100% {
|
|
box-shadow: 0 0 0 0 rgba(41, 128, 185, 0);
|
|
}
|
|
}
|
|
|
|
/* 服务器状态组件样式优化 */
|
|
.server-status-widget {
|
|
min-width: 170px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.server-status-widget:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
|
|
/* 加载状态样式 */
|
|
.status-loading {
|
|
animation: status-pulse 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
/* 状态脉冲动画 */
|
|
@keyframes status-pulse {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
|
|
/* 保存按钮状态样式 */
|
|
#save-blacklist-status {
|
|
transition: all 0.3s ease-in-out;
|
|
} |