MediaWiki:Common.css

注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的更改的影响。

• Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
• Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
• Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5。

/* ===== 首页布局：左新闻 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 {
  display: grid;
  grid-template-columns: minmax(3.5em, 1fr) minmax(0, 2fr) minmax(0, 2fr) minmax(0, 2fr) minmax(0, 2fr) auto;
  width: 100%;
  max-width: 100% !important;
  margin: 1em 0 2em;
  position: relative;
  border: 1px solid #e5e5e5;
  background-color: #fafaf8;
  color: #202122;
  text-align: center;
  word-wrap: break-word;
  font-size: small;
  line-height: 1.5em;
  box-sizing: border-box;
}

.bleapbox > div {
  min-width: 0;
  padding: 5px;
  border-bottom: 1px solid #e5e5e5;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* 标题跨全行 */
.bleapbox-title {
  grid-column: 1/7;
  padding: 7px 10px;
  font-size: large;
  background-color: #a683e3;
  color: #dbff9a;
}

/* 曲绘：桌面端右侧第6列竖排；移动端顶部 */
.bleapbox-top-image { display: none !important; }

.bleapbox-right-image {
  grid-column: 6/7;
  grid-row: 2/25;
  border-left: 1px solid #e5e5e5;
}

.bleapbox-top-image > div > img,
.bleapbox-right-image > div > img {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .bleapbox-right-image { display: none !important; }
  .bleapbox-top-image { display: flex !important; grid-column: 1/7; }
}

/* 行标题（曲目信息/谱面信息）跨 label+4难度 列（不占曲绘列） */
.bleapbox > .header {
  grid-column: 1/6;
  background-color: #a683e3;
  color: #dbff9a;
}

/* 曲目信息：label 固定第1列（窄格），data 跨 2-5 列（4格宽） */
.bleapbox > .label { grid-column: 1; }

.bleapbox > .data { grid-column: 2/6; }

/* 谱面信息：难度单元格固定列位 */
.bleapbox > .cas-label, .bleapbox > .cas-data { grid-column: 2; }
.bleapbox > .tou-label, .bleapbox > .tou-data { grid-column: 3; }
.bleapbox > .ins-label, .bleapbox > .ins-data { grid-column: 4; }
.bleapbox > .pro-label, .bleapbox > .pro-data { grid-column: 5; }

/* 垂直居中 */
.bleapbox > .header,
.bleapbox > .label,
.bleapbox > .cas-label,
.bleapbox > .tou-label,
.bleapbox > .ins-label,
.bleapbox > .pro-label,
.bleapbox > .bleapbox-right-image,
.bleapbox > .bleapbox-top-image {
  display: flex;
  justify-content: center;
  align-items: center;
}

.bleapbox > .data,
.bleapbox > .cas-data,
.bleapbox > .tou-data,
.bleapbox > .ins-data,
.bleapbox > .pro-data {
  align-content: center;
}

/* 列边框：label 与 data 之间、各难度单元格之间 */
.bleapbox > .label,
.bleapbox > .data,
.bleapbox > .cas-label,
.bleapbox > .cas-data,
.bleapbox > .tou-label,
.bleapbox > .tou-data,
.bleapbox > .ins-label,
.bleapbox > .ins-data,
.bleapbox > .pro-label,
.bleapbox > .pro-data {
  border-right: 1px solid #e5e5e5;
}

/* label 底色与文字色 */
.bleapbox > .label {
  background-color: #a683e3;
  color: #dbff9a;
}

/* 难度颜色（官方色值） */
.cas-label { color: #67d691; }
.tou-label { color: #f2b048; }
.ins-label { color: #f067b4; }
.pro-label { color: #c75dd7; }

/* 无 PRO 难度：单元格保留占位（防止列错位） */
.bleapbox > .pro-label:empty,
.bleapbox > .pro-data:empty {
  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; }