MediaWiki:Citizen.css:修订间差异
MediaWiki界面页面
更多操作
无编辑摘要 |
无编辑摘要 |
||
| 第1行: | 第1行: | ||
/* ===== 侧边工具栏 Rail ===== */ | |||
/* 固定按钮 */ | |||
.custom-rail-toggle { | |||
position: fixed; | |||
top: 50%; | |||
right: 0; | |||
transform: translateY(-50%); | |||
z-index: 900; | |||
width: 2.5rem; | |||
height: 4rem; | |||
border: none; | |||
border-radius: 0.5rem 0 0 0.5rem; | |||
background: #56000d; | |||
color: #fff; | |||
cursor: pointer; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
font-size: 1.25rem; | |||
box-shadow: -2px 0 8px rgba(0, 0, 0, 0.25); | |||
transition: background 0.2s, right 0.3s; | |||
} | |||
.custom-rail-toggle:hover { | |||
background: #8b1a2b; | |||
} | |||
body.custom-rail-open .custom-rail-toggle { | |||
right: 20rem; /* 面板宽度 */ | |||
} | |||
/* 面板 */ | |||
.custom-rail { | |||
position: fixed; | |||
top: 0; | |||
right: 0; | |||
width: 20rem; | |||
height: 100vh; | |||
background: #fff; | |||
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.25); | |||
z-index: 1000; | |||
transform: translateX(100%); | |||
transition: transform 0.3s ease; | |||
overflow-y: auto; | |||
display: flex; | |||
flex-direction: column; | |||
} | |||
body.custom-rail-open .custom-rail { | |||
transform: translateX(0); | |||
} | |||
/* 面板头部 */ | |||
.custom-rail__header { | |||
display: flex; | |||
align-items: center; | |||
justify-content: space-between; | |||
padding: 1rem 1.25rem; | |||
background: #56000d; | |||
color: #fff; | |||
flex-shrink: 0; | |||
} | |||
.custom-rail__title { | |||
font-size: 1.1rem; | |||
font-weight: bold; | |||
letter-spacing: 0.1em; | |||
} | |||
.custom-rail__close { | |||
background: transparent; | |||
border: none; | |||
color: #fff; | |||
font-size: 1.5rem; | |||
cursor: pointer; | |||
line-height: 1; | |||
padding: 0 0.25rem; | |||
transition: opacity 0.2s; | |||
} | |||
.custom-rail__close:hover { | |||
opacity: 0.7; | |||
} | |||
/* 面板内容 */ | |||
.custom-rail__content { | |||
padding: 1.25rem; | |||
overflow-y: auto; | |||
flex: 1; | |||
} | |||
.custom-rail__content h3 { | |||
font-size: 1rem; | |||
color: #56000d; | |||
border-left: 3px solid #56000d; | |||
padding-left: 0.5rem; | |||
margin: 1rem 0 0.5rem 0; | |||
} | |||
.custom-rail__content h3:first-child { | |||
margin-top: 0; | |||
} | |||
.custom-rail__content ul { | |||
list-style: none; | |||
padding: 0; | |||
margin: 0 0 0.75rem 0; | |||
} | |||
.custom-rail__content li { | |||
margin-bottom: 0.25rem; | |||
} | |||
.custom-rail__content li a { | |||
display: block; | |||
padding: 0.5rem 0.75rem; | |||
color: #333; | |||
text-decoration: none; | |||
border-radius: 0.4rem; | |||
transition: background 0.15s, color 0.15s; | |||
} | |||
.custom-rail__content li a:hover { | |||
background: rgba(86, 0, 13, 0.08); | |||
color: #56000d; | |||
} | |||
.custom-rail__content p { | |||
color: #555; | |||
font-size: 0.9rem; | |||
line-height: 1.6; | |||
} | |||
/* 遮罩 */ | |||
.custom-rail-overlay { | |||
position: fixed; | |||
inset: 0; | |||
background: rgba(0, 0, 0, 0.4); | |||
z-index: 950; | |||
opacity: 0; | |||
pointer-events: none; | |||
transition: opacity 0.3s; | |||
} | |||
body.custom-rail-open .custom-rail-overlay { | |||
opacity: 1; | |||
pointer-events: auto; | |||
} | |||
/* 移动端适配 */ | |||
@media (max-width: 700px) { | |||
.custom-rail { | |||
width: 80vw; | |||
} | |||
body.custom-rail-open .custom-rail-toggle { | |||
right: 80vw; | |||
} | |||
} | |||
/* ========== Footer 整体:暗红渐变 + 与上方内容留空隙 ========== */ | /* ========== Footer 整体:暗红渐变 + 与上方内容留空隙 ========== */ | ||
.citizen-footer { | .citizen-footer { | ||
2026年9月27日 (日) 17:16的版本
/* ===== 侧边工具栏 Rail ===== */
/* 固定按钮 */
.custom-rail-toggle {
position: fixed;
top: 50%;
right: 0;
transform: translateY(-50%);
z-index: 900;
width: 2.5rem;
height: 4rem;
border: none;
border-radius: 0.5rem 0 0 0.5rem;
background: #56000d;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
box-shadow: -2px 0 8px rgba(0, 0, 0, 0.25);
transition: background 0.2s, right 0.3s;
}
.custom-rail-toggle:hover {
background: #8b1a2b;
}
body.custom-rail-open .custom-rail-toggle {
right: 20rem; /* 面板宽度 */
}
/* 面板 */
.custom-rail {
position: fixed;
top: 0;
right: 0;
width: 20rem;
height: 100vh;
background: #fff;
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.25);
z-index: 1000;
transform: translateX(100%);
transition: transform 0.3s ease;
overflow-y: auto;
display: flex;
flex-direction: column;
}
body.custom-rail-open .custom-rail {
transform: translateX(0);
}
/* 面板头部 */
.custom-rail__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.25rem;
background: #56000d;
color: #fff;
flex-shrink: 0;
}
.custom-rail__title {
font-size: 1.1rem;
font-weight: bold;
letter-spacing: 0.1em;
}
.custom-rail__close {
background: transparent;
border: none;
color: #fff;
font-size: 1.5rem;
cursor: pointer;
line-height: 1;
padding: 0 0.25rem;
transition: opacity 0.2s;
}
.custom-rail__close:hover {
opacity: 0.7;
}
/* 面板内容 */
.custom-rail__content {
padding: 1.25rem;
overflow-y: auto;
flex: 1;
}
.custom-rail__content h3 {
font-size: 1rem;
color: #56000d;
border-left: 3px solid #56000d;
padding-left: 0.5rem;
margin: 1rem 0 0.5rem 0;
}
.custom-rail__content h3:first-child {
margin-top: 0;
}
.custom-rail__content ul {
list-style: none;
padding: 0;
margin: 0 0 0.75rem 0;
}
.custom-rail__content li {
margin-bottom: 0.25rem;
}
.custom-rail__content li a {
display: block;
padding: 0.5rem 0.75rem;
color: #333;
text-decoration: none;
border-radius: 0.4rem;
transition: background 0.15s, color 0.15s;
}
.custom-rail__content li a:hover {
background: rgba(86, 0, 13, 0.08);
color: #56000d;
}
.custom-rail__content p {
color: #555;
font-size: 0.9rem;
line-height: 1.6;
}
/* 遮罩 */
.custom-rail-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 950;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s;
}
body.custom-rail-open .custom-rail-overlay {
opacity: 1;
pointer-events: auto;
}
/* 移动端适配 */
@media (max-width: 700px) {
.custom-rail {
width: 80vw;
}
body.custom-rail-open .custom-rail-toggle {
right: 80vw;
}
}
/* ========== Footer 整体:暗红渐变 + 与上方内容留空隙 ========== */
.citizen-footer {
margin-top: 4rem;
padding: 3rem 1.5rem 2rem;
background: linear-gradient(180deg, #2a0006 0%, #56000d 100%);
color: rgba(255, 255, 255, 0.85);
border-top: none;
}
.citizen-footer__container {
max-width: 87.5rem;
margin: 0 auto;
padding: 0;
}
/* ========== Footer 上半区:居中布局 ========== */
.citizen-footer__content {
display: block;
text-align: center;
padding-bottom: 2rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.citizen-footer__siteinfo {
display: inline-block;
text-align: center;
margin: 0 auto;
}
/* ========== 站点标题 + Logo ========== */
.citizen-footer__sitetitle {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
font-size: 1.5rem;
font-weight: bold;
color: #fff;
letter-spacing: 0.05em;
margin-bottom: 0.75rem;
}
.citizen-footer__sitetitle .mw-logo-icon {
width: 2.5rem;
height: 2.5rem;
filter: brightness(0) invert(1);
}
.citizen-footer__sitetitle .mw-logo-wordmark {
color: #fff;
}
/* ========== 站点描述 ========== */
.citizen-footer__desc {
color: rgba(255, 255, 255, 0.75);
font-size: 0.95rem;
line-height: 1.7;
margin: 0 auto;
max-width: 40rem;
}
/* ========== 隐藏三个跳转链接 ========== */
#footer-places-privacy,
#footer-places-about,
#footer-places-disclaimers {
display: none;
}
/* 如果整个 footer-places 里没有任何其他链接,也一并隐藏,避免留空白 */
#footer-places {
display: none;
}
/* ========== Footer 下半区:tagline 居中 ========== */
.citizen-footer__bottom {
padding-top: 1.5rem;
text-align: center;
}
#footer-tagline {
color: rgba(255, 255, 255, 0.6);
font-size: 0.85rem;
letter-spacing: 0.15em;
text-transform: uppercase;
}
/* 1. 定义字体 */
@font-face {
font-family: 'LXGW WenKai Medium';
src: url('/fonts/LXGWWenKai-Medium.woff2') format('woff2');
font-weight: normal;
font-style: normal;
font-display: swap;
}
/* 2. 应用为全局默认字体 */
:root {
--font-family-base: 'LXGW WenKai Medium', system-ui, sans-serif;
}
/* 3. 确保正文内容也使用该字体(覆盖性更强) */
html, body, .mw-body, .mw-parser-output {
font-family: 'LXGW WenKai Medium', system-ui, sans-serif;
}