/* [[模板:盲盒派对/大图鉴]]的css样式 */
/* [[Category:在模板命名空间下的CSS页面]] */
/* 响应式设置：大屏幕下的特殊布局 */
@media screen and (min-width: 985px) {
#bparty_chara_tabs {
padding-left: 20px !important;
}
#bparty_chara_tabs > .Tabs > .TabLabel {
width: 700px;
}
}
/* 主容器 */
#bparty_chara_tabs {
max-width: 745px;
}
/* 外层Tabs样式 (系列选择) */
#bparty_chara_tabs > .Tabs > .TabLabel {
box-shadow: inset 0 -1px 0 0 #a2a9b1;
justify-content: space-evenly;
}
#bparty_chara_tabs > .Tabs > .TabLabel > .TabLabelText {
text-align: center;
font-weight: bold;
font-size: 110%;
}
#bparty_chara_tabs > .Tabs > .TabContent {
padding-top: 10px !important;
}
#bparty_chara_tabs > .Tabs > .TabLabel > .TabLabelText.selected {
border-bottom: 3px solid !important;
}
/* -----------------------------------------------------
各系列Tab选中时的颜色（颜色取自各自主题的大师称号）
----------------------------------------------------- */
/* 甜品 */
#bparty_chara_tabs > .Tabs > .TabLabel > .TabLabelText:nth-child(1).selected { color: #fc4991; }
#bparty_chara_tabs .TabContentText:nth-child(1) .TabLabelText { background: rgba(252, 73, 145, 0.2) !important; }
/* 梦境 */
#bparty_chara_tabs > .Tabs > .TabLabel > .TabLabelText:nth-child(2).selected { color: #fbbd18; }
#bparty_chara_tabs .TabContentText:nth-child(2) .TabLabelText { background: rgba(251, 189, 24, 0.2) !important; }
/* 电玩 */
#bparty_chara_tabs > .Tabs > .TabLabel > .TabLabelText:nth-child(3).selected { color: #5d22fa; }
#bparty_chara_tabs .TabContentText:nth-child(3) .TabLabelText { background: rgba(93, 34, 250, 0.2) !important; }
/* 电音 */
#bparty_chara_tabs > .Tabs > .TabLabel > .TabLabelText:nth-child(4).selected { color: #d024fd; }
#bparty_chara_tabs .TabContentText:nth-child(4) .TabLabelText { background: rgba(208, 36, 253, 0.2) !important; }
/* 寒冰 */
#bparty_chara_tabs > .Tabs > .TabLabel > .TabLabelText:nth-child(5).selected { color: #2db9fc; }
#bparty_chara_tabs .TabContentText:nth-child(5) .TabLabelText { background: rgba(45, 185, 252, 0.2) !important; }
/* 火焰 */
#bparty_chara_tabs > .Tabs > .TabLabel > .TabLabelText:nth-child(6).selected { color: #fc3751; }
#bparty_chara_tabs .TabContentText:nth-child(6) .TabLabelText { background: rgba(252, 55, 81, 0.2) !important; }
/* 水流 */
#bparty_chara_tabs > .Tabs > .TabLabel > .TabLabelText:nth-child(7).selected { color: #2475fb; }
#bparty_chara_tabs .TabContentText:nth-child(7) .TabLabelText { background: rgba(36, 117, 251, 0.2) !important; }
/* 异界 */
#bparty_chara_tabs > .Tabs > .TabLabel > .TabLabelText:nth-child(8).selected { color: #b925e6; }
#bparty_chara_tabs .TabContentText:nth-child(8) .TabLabelText { background: rgba(185, 37, 230, 0.2) !important; }
/* 内层Tabs样式 (角色头像选择) */
#bparty_chara_tabs .Tabs .Tabs > .TabContent {
margin-top: 5px;
}
#bparty_chara_tabs .Tabs .Tabs > .TabLabel {
text-align: center;
font-weight: bold;
}
#bparty_chara_tabs .Tabs .Tabs > .TabLabel > .TabLabelText {
min-width: 5.5em;
margin: 0.3em 0.37em;
padding: 0 0 3px !important;
color: #4a5366;
border-radius: 5px;
border-width: 0 !important;
box-shadow: 0 0 3px 1px #c6c6c6, inset 0 -25px 0 0 rgba(255,255,255,0.6);
}
#bparty_chara_tabs .Tabs .Tabs > .TabLabel > .TabLabelText img {
height: 5.5em;
width: initial;
}
#bparty_chara_tabs .Tabs .Tabs > .TabLabel > .TabLabelText.selected {
padding: 0 !important;
border-bottom-width: 3px !important;
box-shadow: 0 0 3px 1px #888888, inset 0 -23px 0 0 rgba(255,255,255,0.6);
}
/* TODO: 未来如果有需要单独放置角色简介，则需要将以下CSS放入模板:盲盒派对/角色简介/styles.css中*/
/* 角色信息卡容器 */
.bparty-intro {
max-width: 350px;
display: block;
}
/* 立绘单元格 */
.bparty-char-tachie {
border: none;
padding: 0;
}
/* 表格主体基础样式 */
.bparty-info-table {
max-width: 350px;
width: 100%;
margin: 0;
background: #f9f9f9;
border: 1px solid #d0d0d0;
border-collapse: separate;
border-spacing: 0.25em;
}
/* 表格内部行高 */
.bparty-info-table tr:not(:last-child) {
height: 36px;
}
/* 应用背景色变量 */
.bparty-info-table th {
width: 20%;
background: #808080;
color: white;
}
.bparty-info-table.R th { background: #5692FF; }
.bparty-info-table.SR th { background: #CB2DFF; }
.bparty-info-table.SSR th { background: #FFA628; }
.bparty-info-table.SP th { background: linear-gradient(to bottom, #FF553D, #FFA628); }
.bparty-info-table.未实装 th { background: #808080; }
/* 单元格基础 */
.bparty-info-table td {
width: 30%;
padding: 2px 4px;
}
/* 稀有度文字颜色 */
.bparty-info-table .bparty-rarity {
font-weight: bold;
color: #808080;
}
.bparty-info-table.R .bparty-rarity { color: #5692FF; }
.bparty-info-table.SR .bparty-rarity { color: #CB2DFF; }
.bparty-info-table.SSR .bparty-rarity { color: #FFA628; }
.bparty-info-table.SP .bparty-rarity { color: #FF553D; }
.bparty-info-table.未实装 .bparty-rarity { color: #808080; }
/* 简介单元格 */
.bparty-info-table .bparty-description {
padding: 8px 4px;
vertical-align: middle;
width: auto;
}
/* 定位图标容器 */
.bparty-role {
display: flex;
flex-direction: row;
align-items: center;
gap: 4px;
}
/* 定位图标样式与背景色 */
.bparty-role-icon {
background-color:#FFA628; /* 默认 */
width: 28px;
height: 28px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
}
.bparty-role-icon span {
line-height: 0;
}
/* 不同稀有度下的图标背景色 */
.bparty-info-table.R .bparty-role-icon { background-color: #5692FF; }
.bparty-info-table.SR .bparty-role-icon { background-color: #CB2DFF; }
.bparty-info-table.SSR .bparty-role-icon { background-color: #FFA628; }
.bparty-info-table.SP .bparty-role-icon { background: linear-gradient(to bottom, #FF553D, #FFA628); }
.bparty-info-table.未实装 .bparty-role-icon { background-color: #808080; }