MediaWiki:Common.css：修订间差异

/* ==================================================
  暂时隐藏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);
    }
}



/* ================================== */
/* 首页专用自由网格排版系统 (Citizen 适配优化版) */
/* ================================== */

/* 1. 大棋盘容器 */
.home-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px; /* 微调为16px，更符合现代网页 8pt 栅格规范 */
    width: 100%;
}

/* 2. 小卡片基础样式 */
.home-card {
    /* 核心魔法：使用 Citizen 原生变量，自动适配白天/黑夜模式！ */
    background: var(--color-surface-2, rgba(128, 128, 128, 0.05)); 
    border: 1px solid var(--border-color-base, rgba(128, 128, 128, 0.2)); 
    border-radius: 8px;
    padding: 20px;
    box-sizing: border-box;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* 补充你原代码中遗漏的悬停交互（提升精致感） */
.home-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--box-shadow-drop, 0 4px 12px rgba(0, 0, 0, 0.1));
}

/* 3. 特殊积木：跨格控制 */
@media (min-width: 600px) {
    .home-card--wide {
        grid-column: span 2;
    }
}
.home-card--full {
    grid-column: 1 / -1;
}

/* ================================== */
/* 首页专属：左大图 + 右文字 比例排版 */
/* ================================== */
.home-top-row {
    display: grid;
    grid-template-columns: 2fr 1fr; 
    gap: 16px;
    margin: 16px 0; 
}

/* 补全你在媒体查询外漏掉的 Flex 基础样式 */
.home-flex-container {
    display: flex;
    gap: 16px;
}
.home-flex-card {
    flex: 1; /* 默认平分宽度 */
}

/* 手机端保护机制：屏幕窄于 768px 时，全部折叠为单列 */
@media (max-width: 768px) {
    .home-top-row {
        grid-template-columns: 1fr; 
    }
    .home-flex-container {
        flex-direction: column;
    }
    .home-flex-card {
        width: 100% !important;
        flex: none;
    }
}