更新版本到2.0
This commit is contained in:
Alex Yang
@@ -569,6 +569,71 @@ header p {
|
||||
-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;
|
||||
@@ -881,7 +946,7 @@ tr:hover {
|
||||
/* 通知组件 */
|
||||
.notification {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
background-color: #3498db;
|
||||
color: white;
|
||||
@@ -889,12 +954,7 @@ tr:hover {
|
||||
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);
|
||||
max-width: 90%;
|
||||
}
|
||||
|
||||
.notification.success {
|
||||
@@ -1076,8 +1136,9 @@ tr:hover {
|
||||
/* 跟踪器浮窗样式 */
|
||||
.tracker-tooltip {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
top: 50%;
|
||||
left: 100%;
|
||||
transform: translateY(-50%);
|
||||
margin-left: 10px;
|
||||
background-color: white;
|
||||
border: 1px solid #e2e8f0;
|
||||
@@ -1085,9 +1146,15 @@ tr:hover {
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
padding: 12px;
|
||||
min-width: 250px;
|
||||
z-index: 50;
|
||||
max-width: 350px;
|
||||
z-index: 9999;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
display: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
|
||||
visibility: hidden;
|
||||
word-wrap: break-word;
|
||||
/* 添加箭头 */
|
||||
}
|
||||
|
||||
@@ -1154,4 +1221,75 @@ tr:hover {
|
||||
|
||||
.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;
|
||||
}
|
||||
Reference in New Issue
Block a user