MediaWiki:Common.css
MediaWiki界面页面
更多操作
注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。
- Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
- Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
- Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5。
/* ==================================================
暂时隐藏login
================================================== */
/* 1. 【核心】隐藏针对路人的“入口”
解释：#pt-login 是登录连接，#pt-createaccount 是注册。
只要隐藏这两个，路人就找不到门了。
注意：千万不要在这里隐藏 #pt-logout 或 #pt-preferences！
*/
#pt-login, #pt-createaccount {
display: none !important;
}
/* 2. 隐藏页面工具（讨论页等）
*/
#ca-viewsource, #ca-history, #ca-talk {
display: none !important;
}
/* 3. 隐藏侧边栏的杂项 */
#t-permalink, #t-info, #t-specialpages, #t-print, #n-help {
display: none !important;
}
/* 4. 隐藏底部版权图标 (后面加回来*/
#footer-poweredbyico {
display: none !important;
}
/* 一点样式代码测试 */
/* ==========================================================================
1. 黑幕测试
========================================================================== */
.heimu, .heimu rt {
background-color: #252525;
transition: color 0.13s linear;
color: #252525; /* 初始颜色与背景一致 */
text-shadow: none;
}
.heimu a, a .heimu, .new .heimu {
transition: color 0.13s linear;
color: #252525;
}
/* 鼠标悬停显示 */
span.heimu:hover, span.heimu:active { color: #ffffff !important; }
span.heimu:hover a, a:hover span.heimu { color: #add8e6 !important; }
span.heimu:hover a:visited { color: #c5cae9 !important; }
/* ==========================================================================
2. 选项卡组件 (Tabs)
用于切换“立绘/重创/心智升级”
========================================================================== */
/* 容器 */
.Tabs { display: block; margin: 1em 0; clear: both; }
/* 标签栏 */
.TabLabel { display: flex; flex-wrap: wrap; border-bottom: 2px solid #aaa; }
/* 标签：让它看起来像个按钮 */
.TabLabelText {
padding: 8px 16px;
cursor: pointer;
border: 1px solid #aaa;
border-bottom: none;
margin-right: 4px;
background: #f8f9fa;
}
/* 选中状态 */
.TabLabelText.selected {
background: #fff;
font-weight: bold;
margin-bottom: -2px;
border-bottom: 2px solid #fff;
/* 这里的颜色可以通过模板参数控制，或者手动加个 border-top */
}
/* 内容显示控制 */
.TabContent { border: 1px solid #aaa; border-top: none; padding: 15px; }
.TabContentText { display: none; }
.TabContentText.selected { display: block; }
.TabContent {
min-height: 50px; /* 根据少前立绘的平均高度设置 */
transition: min-height 0.3s ease; /* 增加平滑过渡 */
}
/* ==========================================================================
2. 导航箱 (Navbox) - 仅保留布局，颜色交给模板
========================================================================== */
table.navbox {
border: 1px solid #aaa;
width: 100%;
margin: auto;
clear: both;
font-size: 88%;
text-align: center;
border-collapse: collapse;
}
/* 移除原本固定的 background 设置，允许模板参数生效 */
.navbox-title,
table.navbox th {
padding-left: 1em; /* [cite: 82] */
padding-right: 1em; /* [cite: 82] */
text-align: center; /* [cite: 82] */
}
.navbox-group {
font-weight: bold; /* [cite: 82] */
white-space: nowrap; /* [cite: 82] */
padding: 0 10px;
}
.navbox-list {
border-color: #fdfdfd; /* [cite: 83] */
}
/* ==========================================================================
4. 侧边信息栏 (InfoBox)
角色属性、数值面板基础
========================================================================== */
.infotemplatebox {
float: right;
width: 280px;
font-size: 90%;
margin: 0 0 1em 1em;
background: #f9f9f9;
border: 1px solid #999;
border-collapse: collapse;
clear: right;
}
.infoBoxTitle {
background: #deede0;
color: #228b22;
text-align: center;
font-weight: bold;
padding: 5px;
}
/* ==========================================================================
5. 通用修正
防止图片溢出、强制换行等运维小优化
========================================================================== */
pre {
white-space: pre-wrap;
overflow-wrap: break-word;
}
.wikitable {
max-width: 100%;
margin: 1em 0;
}
/* 隐藏单选框本身 */
.tab-container input[type="radio"] {
display: none;
}
/* 标签栏容器 */
.tab-labels {
display: flex;
border-bottom: 2px solid #36c;
margin-bottom: 10px;
}
/* 单个标签样式 */
.tab-labels label {
padding: 10px 20px;
cursor: pointer;
background: #f8f9fa;
border: 1px solid #ddd;
border-bottom: none;
margin-right: 5px;
transition: 0.3s;
}
.tab-labels label:hover {
background: #eaecf0;
}
/* 选中状态的样式 */
#tab1:checked ~ .tab-labels label[for="tab1"],
#tab2:checked ~ .tab-labels label[for="tab2"],
#tab3:checked ~ .tab-labels label[for="tab3"] {
background: #36c;
color: white;
font-weight: bold;
}
/* 内容区域默认隐藏 */
.tab-content {
display: none;
padding: 15px;
border: 1px solid #ddd;
border-top: none;
}
/* 根据选中的 radio 显示对应的内容 */
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3 {
display: block;
}
/* 1. 隐藏系统默认的黑三角，并让鼠标放上去变成小手 */
.home-game-fold summary {
list-style: none; /* 隐藏标准浏览器的三角 */
cursor: pointer;
margin-bottom: 10px; /* 图标之间留点空隙 */
}
.home-game-fold summary::-webkit-details-marker {
display: none; /* 隐藏苹果/谷歌浏览器的三角 */
}
/* 2. 给展开的内容加上丝滑的浮现动画 */
.home-game-fold[open] .fold-content {
animation: slideDownFade 0.3s ease-out; /* 0.3秒的动画时间 */
padding: 10px;
margin-bottom: 20px;
background: rgba(0, 0, 0, 0.03); /* 给展开的区域加个极淡的背景色，区分层次（不需要可删除） */
border-radius: 8px; /* 加个圆角更像 App */
}
/* 3. 定义具体的动画过程：从上面稍微滑下来，并从透明变清晰 */
@keyframes slideDownFade {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ================================== */
/* 1. 全站固定背景图 */
/* ================================== */
html, body {
background-image: url('https://gf-ogas.wiki/images/7/7e/RC_CG_xian_2.png') !important;
background-size: cover !important;
background-attachment: fixed !important;
background-position: center !important;
}
/* ================================== */
/* 2. 扒掉 Citizen 的底层纯色外衣 */
/* ================================== */
/* 必须把这两个专属框架的底色变透明，卡片才能显现 */
.citizen-layout,
.citizen-layout__main {
background: transparent !important;
}
/* ================================== */
/* 3. 悬浮卡片（毛玻璃区） */
/* ================================== */
/* 锁定真正的正文容器 #content */
#content.mw-body {
background-color: rgba(255, 255, 255, 0.80) !important; /* 白色半透明 */
backdrop-filter: blur(16px) !important; /* 毛玻璃模糊度 */
-webkit-backdrop-filter: blur(12px) !important;
max-width: 1300px !important; /* 卡片宽度 */
margin: 120px auto 40px !important; /* 顶部留出超大空隙 */
border-radius: 10px !important; /* 圆角 */
box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important; /* 悬浮阴影 */
padding: 30px 40px !important; /* 内部留白 */
}
/* ================================== */
/* 4. 首页专用自由网格排版系统 */
/* ================================== */
/* 这是大棋盘容器 */
.home-grid {
display: grid;
/* 核心魔法：自动计算列数，每个卡片最小 250px。手机上自动变1列，电脑上自动变多列 */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 15px; /* 卡片之间的间隔 */
width: 100%;
}
/* 这是每一个积木块（小卡片）的默认样式 */
.home-card {
background: rgba(0, 0, 0, 0.04); /* 给小卡片加一层极淡的底色，和外层的白玻璃区分开 */
border: 1px solid rgba(0, 0, 0, 0.05); /* 加个很细的边框显得更精致 */
border-radius: 12px; /* 小卡片的圆角 */
padding: 20px;
box-sizing: border-box;
transition: transform 0.2s, box-shadow 0.2s; /* 为鼠标悬停动画做准备 */
}
/* 特殊积木：如果想让某个卡片特别长，横跨两格 */
@media (min-width: 600px) {
.home-card--wide {
grid-column: span 2;
}
}
/* 特殊积木：直接横跨铺满整行（比如顶部的欢迎语或大横幅） */
.home-card--full {
grid-column: 1 / -1;
}
/* ================================== */
/* 6. 首页专属：左大图 + 右文字 比例排版 */
/* ================================== */
.home-top-row {
display: grid;
grid-template-columns: 2fr 1fr; /* 核心魔法：左边占2份(约66%)，右边占1份(约33%) */
gap: 15px;
margin: 15px 0; /* 和上下积木保持距离 */
}
/* 手机端保护机制：屏幕变窄时，自动变成上下两块，防止挤在一起 */
@media (max-width: 768px) {
.home-top-row {
grid-template-columns: 1fr;
}
}