MediaWiki:Common.css:修订间差异

Admin​(留言 | 贡献)
导入页面骨架
Admin​(留言 | 贡献)
新增 .mw-flag 行内标记样式(小卡片:78% 字号、上标、极窄内边距,三种语义色)
 
(未显示同一用户的23个中间版本)
第1行: 第1行:
/* ===== BleapBox(曲目信息框,arcaeabox 风格,6列=标签+4难度+曲绘) ===== */
/* ===== 首页布局:左新闻 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 {
.bleapbox {
   display: grid;
   display: grid;
第26行: 第216行:
}
}


.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-title {
.bleapbox-title {
   grid-column: 1/7;
   grid-column: 1/7;
   padding: 7px 10px;
   padding: 7px 10px;
   font-size: large;
   font-size: large;
   background-color: #f2e9c8;
   background-color: #a683e3;
  color: #dbff9a;
}
}


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


第63行: 第241行:
}
}


/* 移动端:显示顶部曲绘,隐藏右侧 */
@media (max-width: 900px) {
@media (max-width: 900px) {
   .bleapbox-right-image { display: none !important; }
   .bleapbox-right-image { display: none !important; }
第69行: 第246行:
}
}


/* 数据与标签 */
/* 行标题(曲目信息/谱面信息)跨 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 > .data,
.bleapbox > .cas-data,
.bleapbox > .cas-data,
第78行: 第286行:
}
}


/* 列边框 */
/* 列边框:label 与 data 之间、各难度单元格之间 */
.bleapbox > .label,
.bleapbox > .data,
.bleapbox > .data,
.bleapbox > .cas-label,
.bleapbox > .cas-label,
第91行: 第300行:
}
}


/* 难度颜色(Bleap 主题:黄绿 + 紫) */
/* label 底色与文字色 */
.cas-label { color: #7a9a3c; }
.bleapbox > .label {
.tou-label { color: #b8860b; }
  background-color: #a683e3;
.ins-label { color: #8b5cf6; }
  color: #dbff9a;
.pro-label { color: #7c3aed; }
}


/* 无 PRO 难度时:隐藏 PRO 标签/数据,其列折叠 */
/* 难度颜色(官方色值) */
.cas-label { color: #67d691; }
.tou-label { color: #f2b048; }
.ins-label { color: #f067b4; }
.pro-label { color: #c75dd7; }
 
/* 无 PRO 难度:单元格保留占位(防止列错位) */
.bleapbox > .pro-label:empty,
.bleapbox > .pro-label:empty,
.bleapbox > .pro-data:empty {
.bleapbox > .pro-data:empty {
   display: none;
  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;
}
}


/* 无 PRO 时表格自动用剩余列(grid 自动放置) */
.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; }