Template:SwitchImage/style.css:修订间差异
模板页面
更多操作
创建页面,内容为“.themed-image-container { display: inline-block; line-height: 0; } .themed-image-dark { display: none; } html.client-dark-mode .themed-image-light { display: none; } html.client-dark-mode .themed-image-dark { display: block; } @media (prefers-color-scheme: dark) { html.client-js:not(.client-light-mode) .themed-image-light { display: none; } html.client-js:not(.client-light-mode) .themed-image-dark { display: b…” |
无编辑摘要 |
||
| (未显示同一用户的2个中间版本) | |||
| 第1行: | 第1行: | ||
/* 容器样式 */ | |||
.themed-image-container { | .themed-image-container { | ||
display: inline-block; | display: inline-block; | ||
| 第4行: | 第5行: | ||
} | } | ||
/* 默认逻辑:显示浅色图,隐藏深色图 */ | |||
.themed-image-dark { | .themed-image-dark { | ||
display: none; | display: none; | ||
} | } | ||
.themed-image-light { | |||
display: block; | |||
} | |||
/* --- 情况 A:手动切换模式 --- */ | |||
html. | /* 1. 强制深色模式 (Night) */ | ||
display: none; | html.skin-theme-clientpref-night .themed-image-light { | ||
display: none !important; | |||
} | |||
html.skin-theme-clientpref-night .themed-image-dark { | |||
display: block !important; | |||
} | } | ||
html. | /* 2. 强制浅色模式 (Day) - 确保在 OS 模式切换后能正确切回 */ | ||
display: | html.skin-theme-clientpref-day .themed-image-light { | ||
display: block !important; | |||
} | |||
html.skin-theme-clientpref-day .themed-image-dark { | |||
display: none !important; | |||
} | } | ||
/* --- 情况 B:跟随系统模式 (OS) --- */ | |||
@media (prefers-color-scheme: dark) { | @media (prefers-color-scheme: dark) { | ||
html. | /* 当用户选择“跟随系统”且系统当前为深色时 */ | ||
display: none; | html.skin-theme-clientpref-os .themed-image-light { | ||
display: none !important; | |||
} | } | ||
html. | html.skin-theme-clientpref-os .themed-image-dark { | ||
display: block; | display: block !important; | ||
} | } | ||
} | |||
/* 嵌入文本模式的样式 */ | |||
.themed-image-inline { | |||
display: inline-flex; | |||
align-self: center; | |||
vertical-align: middle; /* 关键:使图片与文字对齐 */ | |||
} | |||
.themed-image-inline img { | |||
height: 1em; /* 关键:高度与当前行文字高度一致 */ | |||
width: auto; /* 宽度根据比例自适应 */ | |||
display: inline-block; | |||
margin: 0 2px; /* 给图标左右留一点点空隙 */ | |||
} | } | ||
2026年5月3日 (日) 22:31的最新版本
/* 容器样式 */
.themed-image-container {
display: inline-block;
line-height: 0;
}
/* 默认逻辑:显示浅色图,隐藏深色图 */
.themed-image-dark {
display: none;
}
.themed-image-light {
display: block;
}
/* --- 情况 A:手动切换模式 --- */
/* 1. 强制深色模式 (Night) */
html.skin-theme-clientpref-night .themed-image-light {
display: none !important;
}
html.skin-theme-clientpref-night .themed-image-dark {
display: block !important;
}
/* 2. 强制浅色模式 (Day) - 确保在 OS 模式切换后能正确切回 */
html.skin-theme-clientpref-day .themed-image-light {
display: block !important;
}
html.skin-theme-clientpref-day .themed-image-dark {
display: none !important;
}
/* --- 情况 B:跟随系统模式 (OS) --- */
@media (prefers-color-scheme: dark) {
/* 当用户选择“跟随系统”且系统当前为深色时 */
html.skin-theme-clientpref-os .themed-image-light {
display: none !important;
}
html.skin-theme-clientpref-os .themed-image-dark {
display: block !important;
}
}
/* 嵌入文本模式的样式 */
.themed-image-inline {
display: inline-flex;
align-self: center;
vertical-align: middle; /* 关键:使图片与文字对齐 */
}
.themed-image-inline img {
height: 1em; /* 关键:高度与当前行文字高度一致 */
width: auto; /* 宽度根据比例自适应 */
display: inline-block;
margin: 0 2px; /* 给图标左右留一点点空隙 */
}