MediaWiki:Common.css
注意:在发布之后,您可能需要清除浏览器缓存才能看到所作出的更改的影响。
- Firefox或Safari:按住Shift的同时单击刷新,或按Ctrl-F5或Ctrl-R(Mac为⌘-R)
- Google Chrome:按Ctrl-Shift-R(Mac为⌘-Shift-R)
- Edge:按住Ctrl的同时单击刷新,或按Ctrl-F5。
/* 这里开始设置全站背景 */
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); /* 白色文字阴影增加可读性 */
}