MediaWiki:Common.css:修订间差异

来自Nexus Chronicle 文枢新境 wiki
跳转到导航 跳转到搜索
无编辑摘要
无编辑摘要
第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); /* 白色文字阴影增加可读性 */
}