MediaWiki:Citizen.css:修订间差异
外观
![]() 小 |
![]() OctoberSama(留言 | 贡献) 小 |
||
第130行: | 第130行: | ||
} | } | ||
/* | /* 顶部头图区域(固定在顶部) */ | ||
.header-image { | |||
position: fixed; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
height: 30vh; /* 占视口 30% 高度 */ | |||
background-image: url('/resources/assets/header.webp'); | |||
background-size: cover; | |||
background-position: center; | |||
background-repeat: no-repeat; | |||
z-index: -4; /* 比背景图更底层 */ | |||
pointer-events: none; | |||
} | |||
/* 渐变遮罩:头图到底部背景过渡 */ | |||
.header-gradient { | |||
position: fixed; | |||
top: 30vh; | |||
left: 0; | |||
width: 100%; | |||
height: 10vh; | |||
background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0)); | |||
z-index: -3; | |||
pointer-events: none; | |||
} | |||
/* 背景图片,设置在 body 上,随页面滚动 */ | |||
body { | body { | ||
background-image: url(/ | background-image: url('/resources/assets/Th20_eff_switchbg.webp'); | ||
background-repeat: repeat; | background-repeat: repeat; | ||
background-size: auto; | background-size: auto; | ||
background-position: top center; | background-position: top center; | ||
background-attachment: scroll; | background-attachment: scroll; | ||
margin: 0; | |||
} | } | ||
第144行: | 第172行: | ||
position: fixed; | position: fixed; | ||
inset: 0; | inset: 0; | ||
z-index: - | z-index: -2; | ||
background-color: var(--color-surface-0); | background-color: var(--color-surface-0); | ||
opacity: 0.3; | opacity: 0.3; | ||
第150行: | 第178行: | ||
} | } | ||
/* 遮罩层二:surface- | /* 遮罩层二:surface-1 */ | ||
main::after { | main::after { | ||
content: ''; | content: ''; | ||
position: fixed; | position: fixed; | ||
inset: 0; | inset: 0; | ||
z-index: - | z-index: -1; | ||
background-color: var(--color-surface-1); | background-color: var(--color-surface-1); | ||
opacity: 0.4; | opacity: 0.4; | ||
第166行: | 第194行: | ||
position: fixed; | position: fixed; | ||
inset: 0; | inset: 0; | ||
z-index: | z-index: 0; | ||
background-color: var(--color-surface-2); | background-color: var(--color-surface-2); | ||
opacity: 0.6; | opacity: 0.6; | ||
pointer-events: none; | pointer-events: none; | ||
} | |||
/* 页面主要内容从头图下方开始 */ | |||
main { | |||
position: relative; | |||
z-index: 1; | |||
margin-top: 40vh; /* 头图 + 渐变高度 */ | |||
padding: 1rem; | |||
} | } |
2025年6月4日 (三) 20:40的版本
/* 压缩 Citizen 底部分类和版权之间的留白区域 */ body.skin-citizen .mw-footer { margin-top: 0 !important; padding-top: 0.5em !important; } /* Citizen 页脚底部压缩 */ body.skin-citizen .mw-footer { margin-bottom: 0 !important; padding-bottom: 0.5em !important; text-align: start !important; } /* 统一感谢按钮样式 */ .mw-thanks-thank-link { color: #36c; text-decoration: none; } .mw-thanks-thank-link:hover { color: #0645ad; text-decoration: underline; } /* IPE增高 */ body.skin-citizen #ipe-edit-toolbox { bottom: 7.3rem !important; } /* 黑幕相关 */ /* 黑幕背景 */ .heimu, .heimu rt { background-color: #252525; } /* 通用默认:浅色模式下用深灰色隐藏文字 */ .heimu, .heimu a, a .heimu, a.new .heimu, span.heimu a.new, span.heimu a.external, span.heimu a.external:visited, span.heimu a.extiw, span.heimu a.extiw:visited, span.heimu a.mw-disambig, span.heimu a.mw-redirect { transition: color 0.13s linear; color: #252525; text-shadow: none; } /* 深色模式(night 或 os+dark)下默认隐藏文字 */ .skin-theme-clientpref-night .heimu, .skin-theme-clientpref-night .heimu a, .skin-theme-clientpref-night a .heimu, .skin-theme-clientpref-night a.new .heimu, .skin-theme-clientpref-night span.heimu a.new, .skin-theme-clientpref-night span.heimu a.external, .skin-theme-clientpref-night span.heimu a.external:visited, .skin-theme-clientpref-night span.heimu a.extiw, .skin-theme-clientpref-night span.heimu a.extiw:visited, .skin-theme-clientpref-night span.heimu a.mw-disambig, .skin-theme-clientpref-night span.heimu a.mw-redirect { color: #252525; } /* 悬停显示:默认浅色下使用白色 */ span.heimu:hover, span.heimu:active { color: #EEF2F9; } span.heimu:hover a, a:hover span.heimu { color: lightblue; } span.heimu:hover a:visited, a:visited:hover span.heimu { color: #C5CAE9; } span.heimu:hover a.new, a.new:hover span.heimu { color: #FCC; } span.heimu a.new:hover:visited, a.new:hover:visited span.heimu { color: #EF9A9A; } span.heimu:hover a.extiw:visited, a.extiw:visited:hover span.heimu { color: #D1C4E9; } /* 深色(手动 night)下:悬停时继承正文颜色 */ .skin-theme-clientpref-night span.heimu:hover, .skin-theme-clientpref-night span.heimu:active, .skin-theme-clientpref-night span.heimu:hover a, .skin-theme-clientpref-night a:hover span.heimu, .skin-theme-clientpref-night span.heimu:hover a:visited, .skin-theme-clientpref-night a:visited:hover span.heimu, .skin-theme-clientpref-night span.heimu:hover a.new, .skin-theme-clientpref-night a.new:hover span.heimu, .skin-theme-clientpref-night span.heimu a.new:hover:visited, .skin-theme-clientpref-night a.new:hover:visited span.heimu, .skin-theme-clientpref-night span.heimu:hover a.extiw:visited, .skin-theme-clientpref-night a.extiw:visited:hover span.heimu { color: inherit !important; } /* 深色(自动 OS + 浏览器深色)下:悬停时继承正文颜色 */ @media (prefers-color-scheme: dark) { .skin-theme-clientpref-os .heimu:hover, .skin-theme-clientpref-os .heimu:active, .skin-theme-clientpref-os a:hover .heimu, .skin-theme-clientpref-os .heimu:hover a, .skin-theme-clientpref-os .heimu:hover a:visited, .skin-theme-clientpref-os .heimu:hover a.new, .skin-theme-clientpref-os .heimu a.new:hover:visited, .skin-theme-clientpref-os .heimu:hover a.extiw:visited { color: inherit !important; } } /* CodeMirror 编辑器选中文本样式:浅蓝底 + 深蓝字 */ .CodeMirror ::selection { background-color: #cce4ff !important; color: #4449cf !important; } .CodeMirror ::-moz-selection { background-color: #cce4ff !important; color: #4449cf !important; } /* 顶部头图区域(固定在顶部) */ .header-image { position: fixed; top: 0; left: 0; width: 100%; height: 30vh; /* 占视口 30% 高度 */ background-image: url('/resources/assets/header.webp'); background-size: cover; background-position: center; background-repeat: no-repeat; z-index: -4; /* 比背景图更底层 */ pointer-events: none; } /* 渐变遮罩:头图到底部背景过渡 */ .header-gradient { position: fixed; top: 30vh; left: 0; width: 100%; height: 10vh; background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0)); z-index: -3; pointer-events: none; } /* 背景图片,设置在 body 上,随页面滚动 */ body { background-image: url('/resources/assets/Th20_eff_switchbg.webp'); background-repeat: repeat; background-size: auto; background-position: top center; background-attachment: scroll; margin: 0; } /* 遮罩层一:surface-0 */ body::after { content: ''; position: fixed; inset: 0; z-index: -2; background-color: var(--color-surface-0); opacity: 0.3; pointer-events: none; } /* 遮罩层二:surface-1 */ main::after { content: ''; position: fixed; inset: 0; z-index: -1; background-color: var(--color-surface-1); opacity: 0.4; pointer-events: none; } /* 遮罩层三:surface-2 */ main::before { content: ''; position: fixed; inset: 0; z-index: 0; background-color: var(--color-surface-2); opacity: 0.6; pointer-events: none; } /* 页面主要内容从头图下方开始 */ main { position: relative; z-index: 1; margin-top: 40vh; /* 头图 + 渐变高度 */ padding: 1rem; }