MediaWiki:Common.css:修订间差异
跳转到导航
跳转到搜索
Ling Zuian(留言 | 贡献) 无编辑摘要 |
Ling Zuian(留言 | 贡献) 无编辑摘要 |
||
| 第21行: | 第21行: | ||
#mw-head { | #mw-head { | ||
background-color: rgba(255, 255, 255, 0.85); | background-color: rgba(255, 255, 255, 0.85); | ||
} | |||
/* === Network 扩展网络图美化 === */ | |||
/* 1. 美化外层容器:添加圆角、阴影和柔和背景 */ | |||
.network-graph, .ext-network-container { | |||
background-color: #f8f9fa; /* 浅灰底色,保护视力 */ | |||
border: 1px solid #a2a9b1; /* 细边框 */ | |||
border-radius: 12px; /* 圆角 */ | |||
box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* 柔和阴影 */ | |||
padding: 20px; | |||
min-height: 500px; | |||
overflow: hidden; | |||
} | |||
/* 2. 美化节点(圆点) */ | |||
.network-graph .node circle { | |||
fill: #3366cc; /* 节点填充颜色为深蓝色 */ | |||
stroke: #fff; /* 白色描边让节点更突出 */ | |||
stroke-width: 2px; | |||
transition: all 0.2s ease-in-out; /* 添加动画过渡 */ | |||
} | |||
/* 3. 鼠标悬停在节点上时:放大并变色 */ | |||
.network-graph .node:hover circle { | |||
fill: #ff9900; /* 悬停变橙色 */ | |||
stroke-width: 3px; | |||
r: 8; /* 半径变大 */ | |||
} | |||
/* 4. 美化连线 */ | |||
.network-graph .link { | |||
stroke: #c8ccd1; /* 连线颜色变浅 */ | |||
stroke-opacity: 0.6; | |||
stroke-width: 1.5px; | |||
} | |||
/* 5. 美化节点文字标签 */ | |||
.network-graph .node text { | |||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; | |||
font-size: 13px; | |||
fill: #222; /* 深灰色文字 */ | |||
pointer-events: none; /* 鼠标穿透,防止遮挡点击 */ | |||
text-shadow: 0 1px 2px rgba(255,255,255,0.8); /* 白色文字阴影增加可读性 */ | |||
} | } | ||
2026年7月10日 (五) 14:59的版本
/* 这里开始设置全站背景 */
body {
background-image: url("https://wiki.lingzuian.top/images/thumb/e/ed/Server_Banner.jpg/1350px-Server_Banner.jpg");
background-size: cover;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}
/* 让主内容区域变成半透明白色,这样背景能透出来一点点,又不影响看字 */
#content {
background-color: rgba(255, 255, 255, 0.92);
}
/* 让左侧导航栏也变成半透明 */
#mw-panel {
background-color: rgba(255, 255, 255, 0.85);
}
/* 让顶部标题栏也半透明 */
#mw-head {
background-color: rgba(255, 255, 255, 0.85);
}
/* === Network 扩展网络图美化 === */
/* 1. 美化外层容器:添加圆角、阴影和柔和背景 */
.network-graph, .ext-network-container {
background-color: #f8f9fa; /* 浅灰底色,保护视力 */
border: 1px solid #a2a9b1; /* 细边框 */
border-radius: 12px; /* 圆角 */
box-shadow: 0 4px 12px rgba(0,0,0,0.05); /* 柔和阴影 */
padding: 20px;
min-height: 500px;
overflow: hidden;
}
/* 2. 美化节点(圆点) */
.network-graph .node circle {
fill: #3366cc; /* 节点填充颜色为深蓝色 */
stroke: #fff; /* 白色描边让节点更突出 */
stroke-width: 2px;
transition: all 0.2s ease-in-out; /* 添加动画过渡 */
}
/* 3. 鼠标悬停在节点上时:放大并变色 */
.network-graph .node:hover circle {
fill: #ff9900; /* 悬停变橙色 */
stroke-width: 3px;
r: 8; /* 半径变大 */
}
/* 4. 美化连线 */
.network-graph .link {
stroke: #c8ccd1; /* 连线颜色变浅 */
stroke-opacity: 0.6;
stroke-width: 1.5px;
}
/* 5. 美化节点文字标签 */
.network-graph .node text {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: 13px;
fill: #222; /* 深灰色文字 */
pointer-events: none; /* 鼠标穿透,防止遮挡点击 */
text-shadow: 0 1px 2px rgba(255,255,255,0.8); /* 白色文字阴影增加可读性 */
}