MediaWiki:Citizen.css:修订间差异
MediaWiki界面页面
更多操作
![]() OctoberSama(留言 | 贡献) 小 |
![]() OctoberSama(留言 | 贡献) 小 |
||
第9行: | 第9行: | ||
pointer-events: none; | pointer-events: none; | ||
} | } | ||
.citizen-header { | |||
padding-top: 36px; | |||
} | |||
.citizen-header::before { | .citizen-header::before { |
2025年6月12日 (四) 00:16的版本
/* 测试中 头图 */
.citizen-header:before,
.citizen-page-container::before,
.mw-body::before,
.citizen-body-container::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
}
.citizen-header {
padding-top: 36px;
}
.citizen-header::before {
background-position: top center;
mask-image: linear-gradient(rgba(0, 0, 0, 0.2), transparent 64px);
-webkit-mask-image: linear-gradient(
rgba(0, 0, 0, 0.2),
transparent 64px
);
}
.citizen-header:before,
.citizen-page-container::before {
background-repeat: no-repeat;
}
.citizen-header:before {
background-image: url(/images/3/36/%E5%94%A2%E5%91%90%E6%A3%8D.png);
}
/* 特殊:参数设置 选项容器取消宽度限制 */
.oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-top > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-header, .oo-ui-fieldLayout.oo-ui-labelElement.oo-ui-fieldLayout-align-inline > .oo-ui-fieldLayout-body {
max-width: 100%;
}
/* 压缩 Citizen 底部分类和版权之间的留白区域 */
@media screen and (max-width: 1119px) {
body.skin-citizen .mw-footer {
margin-top: 0 !important;
padding-top: 0.5em !important;
}
}
/* Citizen 页脚底部压缩 */
@media screen and (max-width: 1119px) {
html.citizen-feature-autohide-navigation-clientpref-1 body.skin-citizen .mw-footer {
margin-bottom: 0 !important;
padding-bottom: 0.5em !important;
text-align: start !important;
}
}
/* 名字空间前缀防断行 */
.mw-page-title-namespace {
white-space:nowrap;
writing-mode: horizontal-tb
}
/* 桌面端页脚样式 */
@media screen and (min-width: 1120px) {
/* 占满宽度 */
.citizen-footer .citizen-footer__container {
max-width: none !important;
width: 100% !important;
padding: 0 1rem; /* 或根据需要加/调左右边距 */
}
.citizen-footer__content {
width: 100%;
max-width: none;
}
}
/* 统一感谢按钮样式 */
.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;
}
/* 浅色模式(默认)下悬停:使用 --color-surface-2 */
span.heimu:hover,
span.heimu:active {
color: var(--color-surface-2);
}
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 .heimu:hover,
.skin-theme-clientpref-night .heimu:active,
.skin-theme-clientpref-night .heimu:hover a,
.skin-theme-clientpref-night a:hover .heimu,
.skin-theme-clientpref-night .heimu:hover a:visited,
.skin-theme-clientpref-night a:visited:hover .heimu,
.skin-theme-clientpref-night .heimu:hover a.new,
.skin-theme-clientpref-night a.new:hover .heimu,
.skin-theme-clientpref-night .heimu a.new:hover:visited,
.skin-theme-clientpref-night a.new:hover:visited .heimu,
.skin-theme-clientpref-night .heimu:hover a.extiw:visited,
.skin-theme-clientpref-night a.extiw:visited:hover .heimu {
color: var(--color-base) !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: var(--color-base) !important;
}
}
/* CodeMirror 编辑器选中文本样式:浅蓝底 + 深蓝字 */
.CodeMirror ::selection {
background-color: #cce4ff !important;
color: #4449cf !important;
}
.CodeMirror ::-moz-selection {
background-color: #cce4ff !important;
color: #4449cf !important;
}
/* 背景图片:直接设在 body 上,随内容滚动 */
body {
background-image: url(/images/b/b8/Th20_eff_switchbg.png);
background-repeat: repeat;
background-size: auto; /* 原始尺寸 */
background-position: top center;
background-attachment: scroll; /* 默认值,可省略 */
}
/* 遮罩层一:surface-0 */
body::after {
content: '';
position: fixed;
inset: 0;
z-index: -2;
background-color: var(--color-surface-0);
opacity: 0.2;
pointer-events: none;
}
/* 遮罩层二:surface-1,介于 surface-0 与 surface-2 之间 */
/* main::after {
content: '';
position: fixed;
inset: 0;
z-index: -2;
background-color: var(--color-surface-1);
opacity: 0.4;
pointer-events: none;
} */
/* 遮罩层三:surface-2 */
main::before {
content: '';
position: fixed;
inset: 0;
z-index: -1;
background-color: var(--color-surface-2);
opacity: 0.6;
pointer-events: none;
}