更多操作
无编辑摘要 |
无编辑摘要 |
||
| 第1行: | 第1行: | ||
/* | /* ================================================================= | ||
/* | MIST STYLE TABLE - 全局暗黑科技风格表格 | ||
.wikitable { | 覆盖默认 class="wikitable" | ||
================================================================= */ | |||
/* 1. 表格整体容器 */ | |||
table.wikitable { | |||
overflow: hidden; | background-color: #1a1a1a; /* 深灰背景 */ | ||
box-shadow: 0 | color: #cccccc; /* 浅灰文字 */ | ||
border: 1px solid #333333; /* 暗色边框 */ | |||
border-collapse: collapse; /* 边框合并,更硬朗 */ | |||
margin: 1em 0; /* 上下间距 */ | |||
border-radius: 4px; /* 细微圆角 */ | |||
overflow: hidden; /* 配合圆角 */ | |||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* 悬浮阴影 */ | |||
font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif; | |||
width: 100%; /* 默认全宽,也可去掉 */ | |||
} | } | ||
/* | |||
.wikitable th { | /* 2. 表头 (Th) - 核心科技感 */ | ||
background: # | table.wikitable > tr > th, | ||
color: # | table.wikitable > * > tr > th { | ||
background-color: #111111; /* 比单元格更黑 */ | |||
text-align: | color: #ffffff; /* 纯白文字高亮 */ | ||
font- | border: 1px solid #333333; /* 边框 */ | ||
text-align: left; /* 默认左对齐,更像文档 */ | |||
border-bottom: 2px solid # | padding: 12px 15px; /* 增加呼吸感 */ | ||
font-family: Consolas, monospace; /* MIST核心:代码字体 */ | |||
border- | font-weight: bold; | ||
border-bottom: 2px solid #5c6bc0; /* 默认底部亮条 (迷雾蓝) */ | |||
} | |||
/* 3. 单元格 (Td) */ | |||
table.wikitable > tr > td, | |||
table.wikitable > * > tr > td { | |||
background-color: #1a1a1a; /* 默认背景 */ | |||
border: 1px solid #2a2a2a; /* 极淡的内部分隔线 */ | |||
padding: 10px 15px; | |||
transition: background-color 0.2s; /* 交互动画 */ | |||
} | |||
/* 4. 斑马纹 (隔行变色) - 增加阅读舒适度 */ | |||
table.wikitable > tr:nth-child(even), | |||
table.wikitable > tbody > tr:nth-child(even) { | |||
background-color: #1f1f1f; /* 极细微的提亮 */ | |||
} | |||
/* 5. 鼠标悬停效果 (Hover) - 科技感交互 */ | |||
table.wikitable > tr:hover > td, | |||
table.wikitable > * > tr:hover > td { | |||
background-color: #252525; /* 悬停高亮 */ | |||
color: #ffffff; /* 文字变亮 */ | |||
} | |||
/* 6. 链接颜色适配 */ | |||
table.wikitable a { | |||
color: #64b5f6; /* 浅蓝色链接,在黑底上更清晰 */ | |||
text-decoration: none; | |||
transition: color 0.2s; | |||
} | |||
table.wikitable a:hover { | |||
color: #90caf9; /* 悬停变亮 */ | |||
text-decoration: underline; | |||
} | |||
table.wikitable a.new { /* 红色空链接适配 */ | |||
color: #ef5350; | |||
} | |||
/* ================================================================= | |||
MIST 变体类 - 如果你想给表格换个颜色 | |||
用法: {| class="wikitable mist-green" | |||
================================================================= */ | |||
/* 绿色变体 (用于工具/进行中) */ | |||
table.wikitable.mist-green > tr > th, | |||
table.wikitable.mist-green > * > tr > th { | |||
border-bottom-color: #66bb6a; | |||
color: #66bb6a; | |||
} | |||
/* 橙色变体 (用于警告/中断) */ | |||
table.wikitable.mist-orange > tr > th, | |||
table.wikitable.mist-orange > * > tr > th { | |||
border-bottom-color: #ffa726; | |||
color: #ffa726; | |||
} | |||
/* 紫色变体 (用于科普/Puzzle) */ | |||
table.wikitable.mist-purple > tr > th, | |||
table.wikitable.mist-purple > * > tr > th { | |||
border-bottom-color: #ab47bc; | |||
color: #ab47bc; | |||
} | } | ||
2025年11月30日 (日) 09:59的最新版本
/* =================================================================
MIST STYLE TABLE - 全局暗黑科技风格表格
覆盖默认 class="wikitable"
================================================================= */
/* 1. 表格整体容器 */
table.wikitable {
background-color: #1a1a1a; /* 深灰背景 */
color: #cccccc; /* 浅灰文字 */
border: 1px solid #333333; /* 暗色边框 */
border-collapse: collapse; /* 边框合并,更硬朗 */
margin: 1em 0; /* 上下间距 */
border-radius: 4px; /* 细微圆角 */
overflow: hidden; /* 配合圆角 */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* 悬浮阴影 */
font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
width: 100%; /* 默认全宽,也可去掉 */
}
/* 2. 表头 (Th) - 核心科技感 */
table.wikitable > tr > th,
table.wikitable > * > tr > th {
background-color: #111111; /* 比单元格更黑 */
color: #ffffff; /* 纯白文字高亮 */
border: 1px solid #333333; /* 边框 */
text-align: left; /* 默认左对齐,更像文档 */
padding: 12px 15px; /* 增加呼吸感 */
font-family: Consolas, monospace; /* MIST核心:代码字体 */
font-weight: bold;
border-bottom: 2px solid #5c6bc0; /* 默认底部亮条 (迷雾蓝) */
}
/* 3. 单元格 (Td) */
table.wikitable > tr > td,
table.wikitable > * > tr > td {
background-color: #1a1a1a; /* 默认背景 */
border: 1px solid #2a2a2a; /* 极淡的内部分隔线 */
padding: 10px 15px;
transition: background-color 0.2s; /* 交互动画 */
}
/* 4. 斑马纹 (隔行变色) - 增加阅读舒适度 */
table.wikitable > tr:nth-child(even),
table.wikitable > tbody > tr:nth-child(even) {
background-color: #1f1f1f; /* 极细微的提亮 */
}
/* 5. 鼠标悬停效果 (Hover) - 科技感交互 */
table.wikitable > tr:hover > td,
table.wikitable > * > tr:hover > td {
background-color: #252525; /* 悬停高亮 */
color: #ffffff; /* 文字变亮 */
}
/* 6. 链接颜色适配 */
table.wikitable a {
color: #64b5f6; /* 浅蓝色链接,在黑底上更清晰 */
text-decoration: none;
transition: color 0.2s;
}
table.wikitable a:hover {
color: #90caf9; /* 悬停变亮 */
text-decoration: underline;
}
table.wikitable a.new { /* 红色空链接适配 */
color: #ef5350;
}
/* =================================================================
MIST 变体类 - 如果你想给表格换个颜色
用法: {| class="wikitable mist-green"
================================================================= */
/* 绿色变体 (用于工具/进行中) */
table.wikitable.mist-green > tr > th,
table.wikitable.mist-green > * > tr > th {
border-bottom-color: #66bb6a;
color: #66bb6a;
}
/* 橙色变体 (用于警告/中断) */
table.wikitable.mist-orange > tr > th,
table.wikitable.mist-orange > * > tr > th {
border-bottom-color: #ffa726;
color: #ffa726;
}
/* 紫色变体 (用于科普/Puzzle) */
table.wikitable.mist-purple > tr > th,
table.wikitable.mist-purple > * > tr > th {
border-bottom-color: #ab47bc;
color: #ab47bc;
}