MediaWiki:Common.css：修订间差异
导入页面骨架 |
新增 .mw-flag 行内标记样式（小卡片：78% 字号、上标、极窄内边距，三种语义色） |
||
| （未显示同一用户的15个中间版本） | |||
| 第1行： | 第1行： | ||
/* ===== 首页布局：左新闻 60% + 右导航 40% ===== */ | |||
.home-layout { | |||
display: flex; | |||
gap: 24px; | |||
align-items: flex-start; | |||
} | |||
.home-news { | |||
flex: 0 0 60%; | |||
max-width: 60%; | |||
} | |||
.home-nav { | |||
flex: 1; | |||
max-width: 40%; | |||
} | |||
@media (max-width: 900px) { | |||
.home-layout { flex-direction: column; } | |||
.home-news, .home-nav { max-width: 100%; flex: none; } | |||
} | |||
/* 顶部条：logo + 吸顶搜索 */ | |||
.home-topbar { | |||
position: sticky; | |||
top: 0; | |||
z-index: 100; | |||
display: flex; | |||
align-items: center; | |||
gap: 16px; | |||
padding: 12px 0; | |||
background: rgba(255, 255, 255, 0.92); | |||
backdrop-filter: blur(6px); | |||
} | |||
.home-logo { | |||
font-weight: bold; | |||
font-size: 20px; | |||
} | |||
.home-search { | |||
flex: 1; | |||
display: flex; | |||
gap: 8px; | |||
} | |||
.home-search-input { | |||
flex: 1; | |||
padding: 8px 12px; | |||
border: 1px solid #ccc; | |||
border-radius: 8px; | |||
font-size: 14px; | |||
} | |||
.home-search-btn { | |||
padding: 8px 16px; | |||
border: none; | |||
border-radius: 8px; | |||
background: #444; | |||
color: #fff; | |||
cursor: pointer; | |||
} | |||
.home-search-btn:hover { background: #222; } | |||
/* 区块标题 */ | |||
.home-section-title { | |||
border-bottom: 2px solid #ccc; | |||
padding-bottom: 6px; | |||
margin-bottom: 12px; | |||
} | |||
/* 主焦点卡 */ | |||
.news-featured { | |||
border: 1px solid #ccc; | |||
border-radius: 16px; | |||
padding: 20px; | |||
margin-bottom: 16px; | |||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04); | |||
} | |||
.news-featured-tag { | |||
display: inline-block; | |||
font-size: 12px; | |||
padding: 2px 10px; | |||
border-radius: 999px; | |||
background: #444; | |||
color: #fff; | |||
margin-bottom: 8px; | |||
} | |||
.news-featured-title { | |||
font-size: 20px; | |||
font-weight: bold; | |||
margin-bottom: 8px; | |||
} | |||
.news-featured-summary { | |||
color: #666; | |||
margin-bottom: 8px; | |||
} | |||
.news-featured-link a { font-weight: bold; } | |||
/* 新闻条目 */ | |||
.news-item { | |||
display: flex; | |||
align-items: baseline; | |||
gap: 10px; | |||
padding: 10px 12px; | |||
border-radius: 10px; | |||
margin-bottom: 4px; | |||
} | |||
.news-item:hover { background: #f3f3f3; } | |||
.news-date { | |||
color: #888; | |||
font-size: 12px; | |||
white-space: nowrap; | |||
} | |||
.news-type { | |||
font-size: 12px; | |||
padding: 1px 8px; | |||
border-radius: 999px; | |||
white-space: nowrap; | |||
color: #fff; | |||
background: #777; | |||
} | |||
.news-title { | |||
flex: 0 0 auto; | |||
white-space: nowrap; | |||
} | |||
.news-summary { color: #888; font-size: 13px; } | |||
.news-more { text-align: right; margin: 8px 0; } | |||
/* 快捷导航卡片 */ | |||
.home-nav-grid { | |||
display: grid; | |||
grid-template-columns: 1fr 1fr; | |||
gap: 12px; | |||
margin-bottom: 24px; | |||
} | |||
.nav-card { | |||
border: 1px solid #ccc; | |||
border-radius: 14px; | |||
padding: 20px 12px; | |||
text-align: center; | |||
font-weight: bold; | |||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04); | |||
} | |||
.nav-card:hover { | |||
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); | |||
transform: translateY(-2px); | |||
transition: all 0.2s; | |||
} | |||
.nav-card a { text-decoration: none; } | |||
/* 曲包导航 */ | |||
.home-pack-links { | |||
border: 1px solid #eee; | |||
border-radius: 10px; | |||
padding: 10px 14px; | |||
margin-bottom: 8px; | |||
} | |||
.home-pack-links ul { margin: 0; } | |||
.home-pack-links li { margin: 4px 0; } | |||
.home-more-link { text-align: right; margin: 8px 0; } | |||
/* 页脚 */ | |||
.home-footer { | |||
margin-top: 32px; | |||
padding-top: 16px; | |||
border-top: 1px solid #ddd; | |||
text-align: center; | |||
color: #888; | |||
font-size: 13px; | |||
} | |||
.home-footer-links { margin-bottom: 8px; } | |||
/* ===== BleapBox（曲目信息框，arcaeabox 风格，固定6列布局） ===== */ | /* ===== BleapBox（曲目信息框，arcaeabox 风格，固定6列布局） ===== */ | ||
.bleapbox { | .bleapbox { | ||
| 第127行： | 第317行： | ||
visibility: hidden; | visibility: hidden; | ||
} | } | ||
/* ===== 用户页 ===== */ | |||
.userpage { | |||
border: 1px solid #e5e5e5; | |||
border-radius: 12px; | |||
padding: 20px; | |||
max-width: 800px; | |||
background: #fafaf8; | |||
} | |||
.userpage-header { | |||
display: flex; | |||
gap: 16px; | |||
align-items: center; | |||
padding-bottom: 16px; | |||
border-bottom: 1px solid #e5e5e5; | |||
margin-bottom: 16px; | |||
} | |||
.userpage-avatar img { | |||
border-radius: 50%; | |||
border: 3px solid #a683e3; | |||
} | |||
.userpage-name { | |||
font-size: 22px; | |||
margin-bottom: 4px; | |||
} | |||
.userpage-role { | |||
display: inline-block; | |||
padding: 2px 10px; | |||
border-radius: 999px; | |||
background: #a683e3; | |||
color: #dbff9a; | |||
font-size: 12px; | |||
} | |||
.userpage-body .userpage-label { | |||
font-weight: bold; | |||
margin: 12px 0 4px; | |||
color: #555; | |||
} | |||
.userpage-body .userpage-content { | |||
padding: 4px 0 8px; | |||
} | |||
/* ===== 待办项页面 ===== */ | |||
.project-notice { | |||
border: 1px solid #a683e3; | |||
background: #f3eeff; | |||
border-radius: 10px; | |||
padding: 12px 16px; | |||
margin-bottom: 16px; | |||
} | |||
.todo-status { | |||
display: inline-block; | |||
padding: 2px 10px; | |||
border-radius: 999px; | |||
font-size: 12px; | |||
color: #fff; | |||
} | |||
.todo-待认领 { background: #60a5fa; } | |||
.todo-进行中 { background: #f2b048; } | |||
.todo-验证中 { background: #a683e3; } | |||
.todo-已完成 { background: #67d691; } | |||
.todo-搁置 { background: #9ca3af; } | |||
.todo-已关闭 { background: #ef4444; } | |||
/* 首页焦点故事: 带背景图片时的可读性 */ | |||
.news-featured-img .news-featured-tag { | |||
background: rgba(0, 0, 0, 0.55); | |||
} | |||
.news-featured-img .news-featured-summary { | |||
color: #eee; | |||
} | |||
.news-featured-img .news-featured-title a { | |||
color: #fff; | |||
} | |||
/* 首页焦点故事: 背景图铺底 + 可读性 */ | |||
.news-featured { | |||
position: relative; | |||
overflow: hidden; | |||
} | |||
/* 文件链接会被 MediaWiki 包进 <p>, 命中 p 及其内 img */ | |||
.news-featured > p:first-child, | |||
.news-featured > p:first-child img { | |||
position: absolute; | |||
inset: 0; | |||
width: 100%; | |||
height: 100%; | |||
object-fit: cover; | |||
z-index: 0; | |||
margin: 0; | |||
} | |||
.news-featured > :not(p:first-child) { | |||
position: relative; | |||
z-index: 1; | |||
} | |||
.news-featured-img .news-featured-tag { | |||
background: rgba(0, 0, 0, 0.55); | |||
} | |||
.news-featured-img .news-featured-title, | |||
.news-featured-img .news-featured-summary { | |||
display: inline-block; | |||
padding: 4px 10px; | |||
border-radius: 8px; | |||
background: rgba(0, 0, 0, 0.45); | |||
-webkit-backdrop-filter: blur(6px); | |||
backdrop-filter: blur(6px); | |||
} | |||
.news-featured-img .news-featured-summary { | |||
color: #eee; | |||
} | |||
.news-featured-img .news-featured-title a { | |||
color: #fff; | |||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); | |||
} | |||
.news-featured-img .news-featured-link { | |||
display: inline-block; | |||
padding: 4px 10px; | |||
border-radius: 8px; | |||
background: rgba(0, 0, 0, 0.45); | |||
-webkit-backdrop-filter: blur(6px); | |||
backdrop-filter: blur(6px); | |||
} | |||
.news-featured-img .news-featured-link a { | |||
color: #fff; | |||
} | |||
/* 新闻条目: 标题/摘要不换行(超长省略), 链接文字可换行 */ | |||
.news-summary { | |||
flex: 1 1 auto; | |||
min-width: 0; | |||
white-space: nowrap; | |||
overflow: hidden; | |||
text-overflow: ellipsis; | |||
} | |||
.news-link { | |||
flex: 0 0 auto; | |||
white-space: normal; | |||
word-break: break-word; | |||
} | |||
/* ===== 维护提示框 (模板:维护提示) ===== */ | |||
.mw-maint-box { | |||
border: 2px solid #d0d0d0; | |||
border-left-width: 6px; | |||
background: #f8f9fa; | |||
padding: 10px 14px; | |||
margin: 8px 0 16px 0; | |||
border-radius: 6px; | |||
font-size: 0.95em; | |||
line-height: 1.5; | |||
} | |||
.mw-maint-box b { font-size: 1.05em; } | |||
.mw-maint-note { | |||
margin-top: 6px; | |||
padding-top: 6px; | |||
border-top: 1px dashed #ccc; | |||
color: #555; | |||
} | |||
/* 类型配色 (左边条) */ | |||
.mw-maint-reg { border-left-color: #4a90d9; } /* 定期维护: 蓝 */ | |||
.mw-maint-care { border-left-color: #f0a030; } /* 谨慎: 橙 */ | |||
.mw-maint-admin { border-left-color: #d9534f; } /* 禁止: 红 */ | |||
.mw-maint-todo { border-left-color: #5cb85c; } /* 待补: 绿 */ | |||
.mw-maint-stale { border-left-color: #888; } /* 过时: 灰 */ | |||
.mw-maint-wip { border-left-color: #9460d0; } /* 施工: 紫 */ | |||
/* 默认隐藏, 仅已登录(有编辑权限, body.mw-editable)显示 */ | |||
.mw-maint-box { display: none; } | |||
body.mw-editable .mw-maint-box { display: block; } | |||
/* ===== 行内内容标记 模板:标记 （小卡片）===== */ | |||
.mw-flag { | |||
display: inline-block; | |||
font-size: 78%; | |||
line-height: 1.15; | |||
padding: 0 4px; | |||
margin: 0 2px; | |||
border: 1px solid; | |||
border-radius: 3px; | |||
white-space: nowrap; | |||
vertical-align: super; | |||
cursor: help; | |||
} | |||
.mw-flag-doubt { color: #8a5a00; background: #fff6e5; border-color: #e0b060; } | |||
.mw-flag-stale { color: #555555; background: #f2f2f2; border-color: #bbbbbb; } | |||
.mw-flag-orig { color: #5b3a8e; background: #f4eeff; border-color: #b9a3dd; } | |||