Alex Yang
1293 lines
23 KiB
CSS
1293 lines
23 KiB
CSS
/* 全局样式重置 */
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html, body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background-color: #f5f7fa;
|
|
color: #333;
|
|
line-height: 1.6;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
body {
|
|
position: relative;
|
|
}
|
|
|
|
/* 基础响应式变量 */
|
|
:root {
|
|
--sidebar-width: 250px;
|
|
--sidebar-mobile-width: 70px;
|
|
--header-height: 130px;
|
|
--content-padding: 1rem;
|
|
--card-min-width: 300px;
|
|
}
|
|
|
|
/* 主容器样式 */
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
background-color: #fff;
|
|
box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
/* 头部样式 */
|
|
header.header-container {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
color: white;
|
|
padding: 1.5rem;
|
|
width: 100%;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.logo i {
|
|
margin-right: 1rem;
|
|
color: white;
|
|
}
|
|
|
|
.logo h1 {
|
|
font-size: 1.8rem;
|
|
margin: 0;
|
|
font-weight: 600;
|
|
}
|
|
|
|
header p {
|
|
font-size: 1rem;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
/* 主体布局容器 */
|
|
.main-layout {
|
|
display: flex;
|
|
flex: 1;
|
|
min-height: 0;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
/* 侧边栏样式 */
|
|
.sidebar {
|
|
width: var(--sidebar-width);
|
|
background-color: #2c3e50;
|
|
color: white;
|
|
padding: 1rem 0;
|
|
flex-shrink: 0;
|
|
overflow-y: auto;
|
|
height: calc(100vh - var(--header-height)); /* 减去header的高度 */
|
|
transition: width 0.3s ease;
|
|
position: relative;
|
|
}
|
|
|
|
/* 移动设备侧边栏切换按钮 */
|
|
.sidebar-toggle {
|
|
position: fixed;
|
|
top: calc(var(--header-height) + 10px);
|
|
left: 10px;
|
|
z-index: 100;
|
|
background-color: #2c3e50;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
padding: 8px 12px;
|
|
cursor: pointer;
|
|
display: none;
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* 响应式布局 - 平板设备 */
|
|
@media (max-width: 992px) {
|
|
.sidebar {
|
|
width: var(--sidebar-mobile-width);
|
|
}
|
|
|
|
.nav-item span {
|
|
display: none;
|
|
}
|
|
|
|
.nav-item i {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.sidebar-toggle {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
/* 响应式布局 - 移动设备 */
|
|
@media (max-width: 768px) {
|
|
/* 这些样式已经通过Tailwind CSS类在HTML中实现，这里移除避免冲突 */
|
|
}
|
|
|
|
.nav-menu {
|
|
list-style: none;
|
|
}
|
|
|
|
.nav-item {
|
|
padding: 1rem 1.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.nav-item:hover {
|
|
background-color: #34495e;
|
|
padding-left: 1.75rem;
|
|
}
|
|
|
|
.nav-item.active {
|
|
background-color: #3498db;
|
|
border-left: 4px solid #fff;
|
|
}
|
|
|
|
.nav-item i {
|
|
margin-right: 1rem;
|
|
width: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
/* 主内容区域样式 */
|
|
.content {
|
|
flex: 1;
|
|
padding: var(--content-padding);
|
|
overflow-y: auto;
|
|
background-color: #f8f9fa;
|
|
min-width: 0; /* 防止flex子元素溢出 */
|
|
height: calc(100vh - var(--header-height)); /* 减去header的高度 */
|
|
transition: padding-left 0.3s ease;
|
|
}
|
|
|
|
/* Tooltip趋势信息颜色类 - 替代内联style */
|
|
.tooltip-trend {
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* 注意：这些颜色值与colors.config.js中的COLOR_CONFIG.colorClassMap保持同步 */
|
|
.tooltip-trend.blue {
|
|
color: #1890ff;
|
|
}
|
|
|
|
.tooltip-trend.green {
|
|
color: #52c41a;
|
|
}
|
|
|
|
.tooltip-trend.orange {
|
|
color: #fa8c16;
|
|
}
|
|
|
|
.tooltip-trend.red {
|
|
color: #f5222d;
|
|
}
|
|
|
|
.tooltip-trend.purple {
|
|
color: #722ed1;
|
|
}
|
|
|
|
.tooltip-trend.cyan {
|
|
color: #13c2c2;
|
|
}
|
|
|
|
.tooltip-trend.teal {
|
|
color: #36cfc9;
|
|
}
|
|
|
|
/* 平板设备适配 - 侧边栏折叠时调整内容区域 */
|
|
@media (max-width: 992px) {
|
|
.content {
|
|
padding-left: calc(var(--content-padding) + 10px);
|
|
}
|
|
}
|
|
|
|
/* 移动设备适配 - 侧边栏隐藏时的内容区域 */
|
|
@media (max-width: 768px) {
|
|
.content {
|
|
padding-left: var(--content-padding);
|
|
}
|
|
|
|
/* 响应式头部样式 */
|
|
header.header-container {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.logo h1 {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
header p {
|
|
font-size: 0.9rem;
|
|
}
|
|
}
|
|
|
|
/* 面板样式 */
|
|
.panel {
|
|
display: none;
|
|
background-color: white;
|
|
border-radius: 8px;
|
|
padding: 1.5rem;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.panel.active {
|
|
display: block;
|
|
}
|
|
|
|
.panel-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 2rem;
|
|
padding-bottom: 1rem;
|
|
border-bottom: 1px solid #e9ecef;
|
|
}
|
|
|
|
.panel-header h2 {
|
|
font-size: 1.5rem;
|
|
color: #2c3e50;
|
|
}
|
|
|
|
/* 状态指示器 */
|
|
.status-indicator {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.status-dot {
|
|
width: 10px;
|
|
height: 10px;
|
|
border-radius: 50%;
|
|
background-color: #e74c3c;
|
|
margin-right: 8px;
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
.status-dot.connected {
|
|
background-color: #2ecc71;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
transform: scale(1.1);
|
|
opacity: 0.7;
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* 按钮样式 */
|
|
.btn {
|
|
padding: 0.5rem 1rem;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 0.9rem;
|
|
font-weight: 500;
|
|
transition: all 0.3s ease;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.btn i {
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.btn-primary {
|
|
background-color: #3498db;
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background-color: #2980b9;
|
|
}
|
|
|
|
.btn-secondary {
|
|
background-color: #7f8c8d;
|
|
color: white;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background-color: #6c757d;
|
|
}
|
|
|
|
.btn-success {
|
|
background-color: #2ecc71;
|
|
color: white;
|
|
}
|
|
|
|
.btn-success:hover {
|
|
background-color: #27ae60;
|
|
}
|
|
|
|
.btn-danger {
|
|
background-color: #e74c3c;
|
|
color: white;
|
|
}
|
|
|
|
.btn-danger:hover {
|
|
background-color: #c0392b;
|
|
}
|
|
|
|
.btn-warning {
|
|
background-color: #f39c12;
|
|
color: white;
|
|
}
|
|
|
|
.btn-warning:hover {
|
|
background-color: #e67e22;
|
|
}
|
|
|
|
.btn-sm {
|
|
padding: 0.375rem 0.75rem;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.btn-block {
|
|
width: 100%;
|
|
}
|
|
|
|
/* 统计卡片网格 */
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
|
|
gap: clamp(1rem, 3vw, 1.5rem); /* 根据屏幕宽度动态调整间距 */
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
/* 图表容器 */
|
|
.charts-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
|
|
gap: clamp(1rem, 3vw, 1.5rem); /* 根据屏幕宽度动态调整间距 */
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.stat-card {
|
|
background-color: white;
|
|
border-radius: 8px;
|
|
padding: clamp(1rem, 3vw, 1.5rem); /* 根据屏幕宽度动态调整内边距 */
|
|
text-align: center;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
|
min-width: 0; /* 防止内容溢出 */
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.stat-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* 卡片布局的响应式优化 */
|
|
@media (max-width: 640px) {
|
|
/* 在极小屏幕上，调整卡片网格为单列显示 */
|
|
.stats-grid,
|
|
.charts-container,
|
|
.tables-container {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
/* 卡片更紧凑的内边距 */
|
|
.stat-card,
|
|
.chart-card,
|
|
.table-card {
|
|
padding: 1rem;
|
|
min-height: 120px;
|
|
}
|
|
|
|
/* 优化统计卡片的图标大小 */
|
|
.stat-card i {
|
|
font-size: 1.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
/* 优化统计卡片的数值和标签 */
|
|
.stat-value {
|
|
font-size: clamp(1.2rem, 5vw, 1.5rem);
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: clamp(0.7rem, 3vw, 0.8rem);
|
|
}
|
|
|
|
/* 优化图表卡片标题 */
|
|
.chart-card h3 {
|
|
font-size: clamp(1rem, 4vw, 1.1rem);
|
|
}
|
|
|
|
/* 优化面板标题 */
|
|
.panel-header h2 {
|
|
font-size: clamp(1.2rem, 5vw, 1.3rem);
|
|
}
|
|
}
|
|
|
|
.stat-card i {
|
|
font-size: 2rem;
|
|
margin-bottom: 1rem;
|
|
color: #3498db;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 2rem;
|
|
font-weight: bold;
|
|
margin-bottom: 0.5rem;
|
|
color: #2c3e50;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 0.9rem;
|
|
color: #7f8c8d;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
/* 图表容器 */
|
|
.charts-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 1.5rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.chart-card {
|
|
background-color: white;
|
|
border-radius: 8px;
|
|
padding: 1.5rem;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.chart-card h3 {
|
|
margin-bottom: 1rem;
|
|
font-size: 1.2rem;
|
|
color: #2c3e50;
|
|
}
|
|
|
|
/* 表格容器 */
|
|
.tables-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
/* 表格卡片样式 */
|
|
.table-card {
|
|
background-color: white;
|
|
border-radius: 8px;
|
|
padding: 1.5rem;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
|
min-width: 0; /* 防止子元素溢出 */
|
|
}
|
|
|
|
/* 表格响应式样式 */
|
|
@media (max-width: 768px) {
|
|
/* 调整卡片内边距 */
|
|
.table-card,
|
|
.stat-card,
|
|
.chart-card {
|
|
padding: 1rem;
|
|
}
|
|
|
|
/* 调整表格单元格内边距 */
|
|
th, td {
|
|
padding: 0.5rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
/* 调整表格卡片标题 */
|
|
.table-card h3,
|
|
.chart-card h3 {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
/* 调整统计卡片数值和标签 */
|
|
.stat-value {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
/* 调整面板标题 */
|
|
.panel-header h2 {
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
/* 调整按钮大小 */
|
|
.btn {
|
|
padding: 0.4rem 0.8rem;
|
|
font-size: 0.85rem;
|
|
}
|
|
}
|
|
|
|
.table-card {
|
|
background-color: white;
|
|
border-radius: 8px;
|
|
padding: 1.5rem;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.table-card h3 {
|
|
margin-bottom: 1rem;
|
|
font-size: 1.2rem;
|
|
color: #2c3e50;
|
|
}
|
|
/* 表格样式 */
|
|
.table-wrapper {
|
|
overflow-x: auto;
|
|
border-radius: 8px;
|
|
background-color: #ffffff;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
margin-bottom: 16px;
|
|
display: block;
|
|
width: 100%;
|
|
-webkit-overflow-scrolling: touch; /* iOS平滑滚动 */
|
|
}
|
|
|
|
/* 列宽调节样式 */
|
|
.resizable-table {
|
|
width: 100%;
|
|
table-layout: auto;
|
|
border-collapse: collapse;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.resizable-table th {
|
|
position: relative;
|
|
padding: 0.75rem 1rem;
|
|
background-color: #f8f9fa;
|
|
font-weight: 600;
|
|
color: #2c3e50;
|
|
border-bottom: 1px solid #e9ecef;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
min-width: 50px;
|
|
}
|
|
|
|
.resizable-table th::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 10px;
|
|
height: 100%;
|
|
cursor: col-resize;
|
|
background: transparent;
|
|
z-index: 10;
|
|
margin-right: -10px;
|
|
}
|
|
|
|
.resizable-table th:hover::after {
|
|
background: rgba(59, 130, 246, 0.3);
|
|
}
|
|
|
|
.resizable-table th.dragging {
|
|
cursor: col-resize;
|
|
}
|
|
|
|
.resizable-table th.dragging::after {
|
|
background: rgba(59, 130, 246, 0.6);
|
|
}
|
|
|
|
.resizable-table td {
|
|
padding: 0.75rem 1rem;
|
|
text-align: left;
|
|
border-bottom: 1px solid #e9ecef;
|
|
word-break: break-word;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
min-width: 50px;
|
|
}
|
|
|
|
/* 确保表格容器正确显示 */
|
|
.overflow-x-auto {
|
|
overflow-x: auto;
|
|
position: relative;
|
|
}
|
|
|
|
/* 最常屏蔽和最常解析域名表格的特殊样式 */
|
|
#top-blocked-table, #top-resolved-table {
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
/* 限制域名表格高度，只显示5条内容 */
|
|
.table-card .table-wrapper {
|
|
max-height: 220px;
|
|
overflow-y: auto;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
background-color: #ffffff;
|
|
margin: 0;
|
|
table-layout: fixed; /* 固定布局，有助于响应式设计 */
|
|
}
|
|
|
|
th, td {
|
|
padding: 0.75rem 1rem;
|
|
text-align: left;
|
|
border-bottom: 1px solid #e9ecef;
|
|
word-break: break-word; /* 长文本自动换行 */
|
|
}
|
|
|
|
/* 缩小最常屏蔽和最常解析域名表格的单元格内边距 */
|
|
#top-blocked-table th, #top-blocked-table td,
|
|
#top-resolved-table th, #top-resolved-table td {
|
|
padding: 0.5rem 0.75rem;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
/* 移动设备上表格的优化 */
|
|
@media (max-width: 768px) {
|
|
/* 确保表格可以水平滚动 */
|
|
.table-wrapper {
|
|
max-width: 100%;
|
|
margin-left: -1rem;
|
|
margin-right: -1rem;
|
|
border-radius: 0;
|
|
}
|
|
|
|
/* 表格单元格内容截断处理 */
|
|
td {
|
|
font-size: 0.85rem;
|
|
max-width: 150px; /* 限制单元格最大宽度 */
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* 当用户触摸单元格时显示完整内容 */
|
|
td:active {
|
|
white-space: normal;
|
|
word-break: break-word;
|
|
}
|
|
|
|
/* 优化百分比条在小屏幕上的显示 */
|
|
.count-cell {
|
|
position: relative;
|
|
padding-right: 50px; /* 为百分比文本留出空间 */
|
|
}
|
|
|
|
.percentage-text {
|
|
font-size: 10px;
|
|
right: 5px;
|
|
}
|
|
}
|
|
|
|
th {
|
|
background-color: #f8f9fa;
|
|
font-weight: 600;
|
|
color: #2c3e50;
|
|
}
|
|
|
|
td.loading {
|
|
text-align: center;
|
|
color: #7f8c8d;
|
|
font-style: italic;
|
|
}
|
|
|
|
tr:hover {
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
/* 百分比条样式 */
|
|
.count-cell {
|
|
position: relative;
|
|
}
|
|
|
|
.count-number {
|
|
position: relative;
|
|
z-index: 2;
|
|
display: inline-block;
|
|
}
|
|
|
|
.percentage-text {
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
z-index: 2;
|
|
font-size: 12px;
|
|
color: #bdc3c7;
|
|
}
|
|
|
|
.percentage-bar-container {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
z-index: 1;
|
|
overflow: hidden;
|
|
border-radius: 4px;
|
|
opacity: 0.2;
|
|
}
|
|
|
|
.percentage-bar {
|
|
height: 100%;
|
|
transition: width 0.5s ease;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* 分页控件样式 */
|
|
.pagination-controls {
|
|
background-color: #ffffff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
padding: 16px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 16px;
|
|
}
|
|
|
|
.pagination-info {
|
|
font-size: 14px;
|
|
color: #666;
|
|
}
|
|
|
|
.pagination-buttons {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.items-per-page {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.items-per-page select {
|
|
padding: 6px 12px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
background-color: #fff;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.nav-buttons {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.btn:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* 规则内容样式优化 */
|
|
.rule-content {
|
|
max-width: 600px;
|
|
}
|
|
|
|
.rule-content pre {
|
|
margin: 0;
|
|
font-family: inherit;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* 表单样式 */
|
|
.form-group {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
font-weight: 500;
|
|
color: #2c3e50;
|
|
}
|
|
|
|
.form-group input,
|
|
.form-group select {
|
|
width: 100%;
|
|
padding: 0.75rem;
|
|
border: 1px solid #ced4da;
|
|
border-radius: 4px;
|
|
font-size: 1rem;
|
|
transition: border-color 0.3s ease;
|
|
}
|
|
|
|
.form-group input:focus,
|
|
.form-group select:focus {
|
|
outline: none;
|
|
border-color: #3498db;
|
|
}
|
|
|
|
.form-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
|
|
/* 管理区域样式 */
|
|
.rules-management,
|
|
.hosts-management,
|
|
.blacklists-management {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.rules-input,
|
|
.rules-filter,
|
|
.hosts-filter {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
gap: 1rem;
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
.rules-input {
|
|
grid-template-columns: 1fr auto auto;
|
|
}
|
|
|
|
/* 查询表单 */
|
|
.query-form .form-group {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
gap: 1rem;
|
|
}
|
|
|
|
/* 查询结果样式 */
|
|
.query-result {
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
#query-result-container {
|
|
background-color: #f8f9fa;
|
|
border-radius: 8px;
|
|
padding: 1.5rem;
|
|
}
|
|
|
|
#query-result-container.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.result-header {
|
|
margin-bottom: 1rem;
|
|
border-bottom: 1px solid #e9ecef;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
|
|
.result-header h3 {
|
|
font-size: 1.2rem;
|
|
color: #2c3e50;
|
|
}
|
|
|
|
.result-item {
|
|
padding: 0.5rem 0;
|
|
border-bottom: 1px solid #e9ecef;
|
|
}
|
|
|
|
.result-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* 配置表单样式 */
|
|
.config-form {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.config-section {
|
|
background-color: #f8f9fa;
|
|
border-radius: 8px;
|
|
padding: 1.5rem;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.config-section h3 {
|
|
margin-bottom: 1.5rem;
|
|
font-size: 1.2rem;
|
|
color: #2c3e50;
|
|
}
|
|
|
|
.config-actions {
|
|
text-align: center;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
/* 通知组件 */
|
|
.notification {
|
|
position: fixed;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
background-color: #3498db;
|
|
color: white;
|
|
padding: 1rem 1.5rem;
|
|
border-radius: 4px;
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
|
z-index: 1000;
|
|
transform: translateX(100%);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.notification.show {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.notification.success {
|
|
background-color: #2ecc71;
|
|
}
|
|
|
|
.notification.error {
|
|
background-color: #e74c3c;
|
|
}
|
|
|
|
.notification.warning {
|
|
background-color: #f39c12;
|
|
}
|
|
|
|
.notification-content {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.notification-content i {
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
/* 大屏幕优化 */
|
|
@media (min-width: 1200px) {
|
|
.container {
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
/* 平板设备 */
|
|
@media (max-width: 1024px) {
|
|
.content {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.stats-grid,
|
|
.charts-container {
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
}
|
|
|
|
.tables-container {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* 移动设备 */
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sidebar {
|
|
width: 100%;
|
|
height: auto;
|
|
max-height: 120px;
|
|
}
|
|
|
|
.nav-menu {
|
|
display: flex;
|
|
overflow-x: auto;
|
|
padding-bottom: 0.5rem;
|
|
}
|
|
|
|
.nav-item {
|
|
white-space: nowrap;
|
|
padding: 0.75rem 1rem;
|
|
}
|
|
|
|
.stats-grid,
|
|
.charts-container,
|
|
.tables-container {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.rules-input,
|
|
.rules-filter,
|
|
.hosts-filter {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.form-row {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.query-form .form-group {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.panel {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.pagination-controls {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 12px;
|
|
}
|
|
|
|
.pagination-buttons {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 12px;
|
|
}
|
|
|
|
.nav-buttons {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
/* 小屏幕移动设备 */
|
|
@media (max-width: 480px) {
|
|
header {
|
|
padding: 1.5rem 1rem;
|
|
}
|
|
|
|
.logo h1 {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.content {
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
.panel-header {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.stat-card {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.chart-card {
|
|
padding: 1rem;
|
|
}
|
|
|
|
th, td {
|
|
padding: 0.5rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
}
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* 确保按钮在不同容器中保持一致宽度 */
|
|
.w-full {
|
|
width: 100%;
|
|
}
|
|
|
|
/* 确保输入和按钮在表单组中有合适的高度对齐 */
|
|
.form-group button {
|
|
height: auto;
|
|
align-self: flex-end;
|
|
}
|
|
|
|
/* 优化表格中的操作按钮间距 */
|
|
.actions-cell {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
/* 跟踪器状态图标容器 */
|
|
.tracker-icon-container {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
cursor: help;
|
|
}
|
|
|
|
/* 跟踪器浮窗样式 */
|
|
.tracker-tooltip {
|
|
position: absolute;
|
|
top: -10px;
|
|
left: 100%;
|
|
margin-left: 10px;
|
|
background-color: white;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
padding: 12px;
|
|
min-width: 250px;
|
|
z-index: 50;
|
|
font-size: 14px;
|
|
color: #333;
|
|
/* 添加箭头 */
|
|
}
|
|
|
|
/* 浮窗箭头 */
|
|
.tracker-tooltip::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 15px;
|
|
left: -10px;
|
|
width: 0;
|
|
height: 0;
|
|
border-top: 10px solid transparent;
|
|
border-bottom: 10px solid transparent;
|
|
border-right: 10px solid white;
|
|
}
|
|
|
|
.tracker-tooltip::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 15px;
|
|
left: -11px;
|
|
width: 0;
|
|
height: 0;
|
|
border-top: 10px solid transparent;
|
|
border-bottom: 10px solid transparent;
|
|
border-right: 10px solid #e2e8f0;
|
|
z-index: -1;
|
|
}
|
|
|
|
/* 浮窗标题 */
|
|
.tracker-tooltip .font-semibold {
|
|
font-weight: 600;
|
|
color: #2d3748;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
/* 搜索框样式优化 */
|
|
#logs-search {
|
|
/* 确保搜索框在所有设备上都有合适的宽度 */
|
|
max-width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* 在移动设备上进一步优化搜索框 */
|
|
@media (max-width: 768px) {
|
|
/* 确保搜索框在移动设备上占满宽度 */
|
|
#logs-search {
|
|
width: 100%;
|
|
padding: 0.5rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
}
|
|
|
|
/* 浮窗内容项 */
|
|
.tracker-tooltip > div {
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
/* 浮窗链接样式 */
|
|
.tracker-tooltip a {
|
|
color: #3182ce;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.tracker-tooltip a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* 滚动条样式优化 */
|
|
/* 基础滚动条样式 */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
/* 滚动条轨道 */
|
|
::-webkit-scrollbar-track {
|
|
background: rgba(241, 245, 249, 0.5);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* 滚动条滑块 */
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgba(148, 163, 184, 0.6);
|
|
border-radius: 4px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
/* 滚动条滑块悬停效果 */
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(100, 116, 139, 0.8);
|
|
}
|
|
|
|
/* 滚动条角落 */
|
|
::-webkit-scrollbar-corner {
|
|
background: rgba(241, 245, 249, 0.5);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* 为不同滚动容器添加特定样式 */
|
|
.sidebar::-webkit-scrollbar-thumb {
|
|
background: rgba(148, 163, 184, 0.4);
|
|
}
|
|
|
|
.sidebar::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(148, 163, 184, 0.7);
|
|
}
|
|
|
|
/* 优化表格和卡片中的滚动条 */
|
|
.table-wrapper::-webkit-scrollbar,
|
|
.chart-card::-webkit-scrollbar,
|
|
.stat-card::-webkit-scrollbar,
|
|
#top-blocked-table::-webkit-scrollbar,
|
|
#top-resolved-table::-webkit-scrollbar,
|
|
#top-clients-table::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
.table-wrapper::-webkit-scrollbar-thumb,
|
|
.chart-card::-webkit-scrollbar-thumb,
|
|
.stat-card::-webkit-scrollbar-thumb,
|
|
#top-blocked-table::-webkit-scrollbar-thumb,
|
|
#top-resolved-table::-webkit-scrollbar-thumb,
|
|
#top-clients-table::-webkit-scrollbar-thumb {
|
|
background: rgba(148, 163, 184, 0.5);
|
|
}
|
|
|
|
/* Firefox滚动条样式 */
|
|
* {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba(148, 163, 184, 0.6) rgba(241, 245, 249, 0.5);
|
|
}
|
|
|
|
/* 优化滚动行为 */
|
|
* {
|
|
scroll-behavior: smooth;
|
|
} |