打开/关闭菜单
打开/关闭外观设置菜单
打开/关闭个人菜单
未登录
未登录用户的IP地址会在进行任意编辑后公开展示。

MediaWiki:Common.css:修订间差异

MediaWiki界面页面
删除的内容 添加的内容
Maintenance script留言 | 贡献
迁移首页样式到 Common.css
Maintenance script留言 | 贡献
首页样式小幅优化(选择器收敛与中间断点)
 
(未显示同一用户的2个中间版本)
第9行: 第9行:


/* 2026-01-11: load Mainpage-specific styles from dedicated page */
/* 2026-01-11: load Mainpage-specific styles from dedicated page */

@import url("/index.php?title=MediaWiki:Mainpage.css&action=raw&ctype=text/css");


/* 全站重定向链接样式 */
/* 全站重定向链接样式 */
第37行: 第37行:
}
}
/* 2026-01-12: 首页样式从 LocalSettings.php 迁移到此处(仅首页生效) */
/* 2026-01-12: 首页样式从 LocalSettings.php 迁移到此处(仅首页生效) */
.page-首页 .banner {
body.page-Main_Page .banner {
height: auto !important;
height: auto !important;
display: flex !important;
display: flex !important;
第53行: 第53行:
}
}


.page-首页 .banner-text {
body.page-Main_Page .banner-text {
margin: 0 !important;
margin: 0 !important;
line-height: 1.4 !important;
line-height: 1.4 !important;
}
}


.page-首页 .banner .chinese-text {
body.page-Main_Page .banner .chinese-text {
font-size: 24px !important;
font-size: 24px !important;
font-weight: 700 !important;
font-weight: 700 !important;
}
}


.page-首页 .banner .english-text {
body.page-Main_Page .banner .english-text {
font-size: 16px !important;
font-size: 16px !important;
font-weight: 500 !important;
font-weight: 500 !important;
第71行: 第71行:
/* 当屏幕宽度大于 768px(如平板和大屏幕设备) */
/* 当屏幕宽度大于 768px(如平板和大屏幕设备) */
@media screen and (min-width: 768px) {
@media screen and (min-width: 768px) {
.page-首页 .banner .chinese-text {
body.page-Main_Page .banner .chinese-text {
font-size: 28px !important;
font-size: 28px !important;
}
}


.page-首页 .banner .english-text {
body.page-Main_Page .banner .english-text {
font-size: 18px !important;
font-size: 18px !important;
}
}
第82行: 第82行:
/* 当屏幕宽度小于 480px(如手机设备) */
/* 当屏幕宽度小于 480px(如手机设备) */
@media screen and (max-width: 480px) {
@media screen and (max-width: 480px) {
.page-首页 .banner .chinese-text {
body.page-Main_Page .banner .chinese-text {
font-size: 20px !important;
font-size: 20px !important;
}
}


.page-首页 .banner .english-text {
body.page-Main_Page .banner .english-text {
font-size: 14px !important;
font-size: 14px !important;
}
}
第92行: 第92行:


/* 内容块样式 */
/* 内容块样式 */
.page-首页 .content-box {
body.page-Main_Page .content-box {
margin: 10px !important;
margin: 10px !important;
padding: 20px !important;
padding: 20px !important;
第103行: 第103行:
}
}


.page-首页 .content-box:hover {
body.page-Main_Page .content-box:hover {
-webkit-transform: translateY(-5px) !important;
-webkit-transform: translateY(-5px) !important;
-moz-transform: translateY(-5px) !important;
-moz-transform: translateY(-5px) !important;
transform: translateY(-5px) !important;
transform: translateY(-5px) !important;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2) !important;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18) !important;
}
}


.page-首页 .content-box:focus {
body.page-Main_Page .content-box:focus {
outline: 2px solid #0066cc !important; /* 可访问性改进 */
outline: 2px solid #0066cc !important; /* 可访问性改进 */
outline-offset: 2px !important;
outline-offset: 2px !important;
}
}


.page-首页 .content-box h2 {
body.page-Main_Page .content-box h2 {
position: relative !important;
position: relative !important;
padding-bottom: 10px !important;
padding-bottom: 10px !important;
第123行: 第123行:
}
}


.page-首页 .content-box p {
body.page-Main_Page .content-box p {
line-height: 1.6 !important;
line-height: 1.6 !important;
color: #666666 !important;
color: #666666 !important;
第129行: 第129行:


/* Flex 容器 */
/* Flex 容器 */
.page-首页 .flex-container {
body.page-Main_Page .flex-container {
display: flex !important;
display: flex !important;
justify-content: space-between !important;
justify-content: space-between !important;
第136行: 第136行:
}
}


.page-首页 .flex-container .content-box {
body.page-Main_Page .flex-container .content-box {
flex: 1 !important;
flex: 1 !important;
min-width: 300px !important;
min-width: 300px !important;
第142行: 第142行:
box-sizing: border-box !important;
box-sizing: border-box !important;
}
}
/* 中等屏幕优化 */
@media (max-width: 900px) {
body.page-Main_Page .flex-container .content-box {
max-width: 50% !important;
}
}



/* 移动端优化 */
/* 移动端优化 */
@media (max-width: 768px) {
@media (max-width: 768px) {
.page-首页 .flex-container {
body.page-Main_Page .flex-container {
flex-direction: column !important;
flex-direction: column !important;
gap: 15px !important; /* 统一间距 */
gap: 15px !important; /* 统一间距 */
}
}


.page-首页 .flex-container .content-box {
body.page-Main_Page .flex-container .content-box {
max-width: 100% !important; /* 移除限制 */
max-width: 100% !important; /* 移除限制 */
width: 100% !important;
width: 100% !important;
第156行: 第163行:
}
}


.page-首页 .banner .chinese-text,
body.page-Main_Page .banner .chinese-text,
.page-首页 .banner .english-text {
body.page-Main_Page .banner .english-text {
text-align: center !important;
text-align: center !important;
}
}


.page-首页 .banner .chinese-text {
body.page-Main_Page .banner .chinese-text {
font-size: 20px !important;
font-size: 20px !important;
}
}


.page-首页 .banner .english-text {
body.page-Main_Page .banner .english-text {
font-size: 14px !important;
font-size: 14px !important;
}
}
第172行: 第179行:
/* 为减少动画的用户提供支持 */
/* 为减少动画的用户提供支持 */
@media (prefers-reduced-motion: reduce) {
@media (prefers-reduced-motion: reduce) {
.page-首页 .content-box {
body.page-Main_Page .content-box {
-webkit-transition: none !important;
-webkit-transition: none !important;
transition: none !important;
transition: none !important;
}
}


.page-首页 .content-box:hover {
body.page-Main_Page .content-box:hover {
-webkit-transform: none !important;
-webkit-transform: none !important;
-moz-transform: none !important;
-moz-transform: none !important;
第185行: 第192行:


/* 暗色模式覆盖(Citizen: night) */
/* 暗色模式覆盖(Citizen: night) */
.skin-theme-clientpref-night .page-首页 .banner {
.skin-theme-clientpref-night body.page-Main_Page .banner {
background: linear-gradient(135deg, #3a0c0c, #5a1a1a) !important;
background: linear-gradient(135deg, #3a0c0c, #5a1a1a) !important;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45) !important;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45) !important;
}
}


.skin-theme-clientpref-night .page-首页 .content-box {
.skin-theme-clientpref-night body.page-Main_Page .content-box {
border-color: #2f2f2f !important;
border-color: #2f2f2f !important;
background-color: #1c1c1c !important;
background-color: #1c1c1c !important;
}
}


.skin-theme-clientpref-night .page-首页 .content-box:hover {
.skin-theme-clientpref-night body.page-Main_Page .content-box:hover {
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.55) !important;
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.5) !important;
}
}


.skin-theme-clientpref-night .page-首页 .content-box:focus {
.skin-theme-clientpref-night body.page-Main_Page .content-box:focus {
outline-color: #5ea0ff !important;
outline-color: #5ea0ff !important;
}
}


.skin-theme-clientpref-night .page-首页 .content-box h2 {
.skin-theme-clientpref-night body.page-Main_Page .content-box h2 {
border-bottom-color: #b94a4a !important;
border-bottom-color: #b94a4a !important;
color: #ffffff !important;
color: #ffffff !important;
}
}


.skin-theme-clientpref-night .page-首页 .content-box p {
.skin-theme-clientpref-night body.page-Main_Page .content-box p {
color: #cccccc !important;
color: #cccccc !important;
}
}