MediaWiki:Common.css：修订间差异

2026年8月8日 (六) 22:28的版本

/* ===== 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: #f2e9c8;
}

/* 曲绘：桌面端右侧第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;
}

/* 曲目信息：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;
}

/* 难度颜色（官方色值） */
.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;
}