2023年政策修订增补工作正在进行中,欢迎参与!
Template:蔚蓝档案学生/bac.css
跳转到导航
跳转到搜索
.ba-charinfo {
box-sizing: border-box;
width: 100%;
/*min is 600px*/
max-width: 1025px;
min-height: 700px;
/* height: 700px; 2022-06-18 */
display: grid;
grid-template-columns: auto 400px;
grid-template-rows: 150px auto auto;
grid-gap: 10px;
grid-template-areas:
"tabs name"
"tabs data"
"tabs misc";
font-family: "Hiragino Sans GB", "Source Han Sans CN", "思源黑体", "Noto Sans CJK", "Source Sans Pro", "Noto Sans SC", "Noto Sans", "Microsoft Yahei UI", Sans-serif;
text-align: center;
padding-right: 15px;
line-height: 1.2;
overflow-x: scroll;
overflow-y: hidden;
}
/*functional stuff*/
.ba-charinfo .label {
color: #172D4A;
text-shadow: 1px 1px rgba(255, 255, 255, 0.5);
}
.ba-noselect {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
}
.ba-charinfo div {
box-sizing: border-box;
padding: 5px;
border-radius: 5px;
justify-content: center;
transition: all 0.25s ease-in-out;
}
.ba-charinfo>div,
.ba-charinfo>.name-container>.school,
.ba-charinfo>.tabs-container,
.ba-charinfo>.tabs-container>.Tabs,
.ba-charinfo>.tabs-container>.Tabs div {
padding: 0;
}
.ba-charinfo>.name-container,
.ba-charinfo>.misc-container>.profession {
color: #FFF;
background: linear-gradient(to right, #193A67, #0F2233 90%);
}
.ba-charinfo .skew {
transform: skewX(-10deg);
}
.ba-charinfo .skew>div {
transform: skewX(10deg);
/* 2022-06-16 */
display: flex;
flex-direction: column;
height: inherit;
}
.ba-charinfo>.name-container,
.ba-charinfo>.data-container,
.ba-charinfo>.misc-container {
z-index: 1;
}
.ba-charinfo>.name-container {
grid-area: name;
position: relative;
font-weight: bold;
font-size: 1.5em;
margin-top: 15px;
}
.ba-charinfo>.name-container>.school {
position: absolute;
top: -10px;
left: -10px;
width: 200px;
height: 60px;
background: linear-gradient(to right, #DEF 30%, #FFF 100%);
z-index: 2;
font-size: 0.9em;
/* 2022-06-16*/
}
.ba-charinfo>.name-container>.school>div>span:last-child {
font-weight: normal;
}
.ba-charinfo>.name-container>.name-ja {
color: #3DF;
height: 50px;
margin-left: 190px;
display: flex;
font-family: "Hiragino Sans", "Source Han Sans JP", "源ノ角ゴシック", "Noto Sans CJK", "Noto Sans JP", "Meiryo UI", "Yu Gothic", Sans-serif;
align-items: baseline;
font-size: 1.1em;
}
.ba-charinfo>.name-container>.name {
font-size: 2.5em;
text-shadow: 2px 2px rgba(0, 0, 0, 0.4);
text-decoration: underline;
text-decoration-color: #FF0;
/*text-decoration-thickness: 5px;
text-underline-offset: 5px; not recognized by SCSS, will define inline*/
z-index: 2;
padding-bottom: 15px;
}
.ba-charinfo>.tabs-container {
grid-area: tabs;
position: relative;
display: flex;
align-items: center;
font-size: 1.5em;
border-radius: 0;
z-index: 0;
}
.ba-charinfo>.tabs-container>.illust-cv {
position: absolute;
top: 0;
left: 15px;
z-index: 2;
color: #FFF;
font-weight: bold;
text-shadow: 1px 1px rgba(0, 0, 0, 0.4);
text-align: left;
}
.ba-charinfo>.tabs-container>.illust-cv>.label {
font-weight: normal;
letter-spacing: 0.4em;
}
.ba-charinfo>.tabs-container>.sabun-label {
position: absolute;
bottom: 0;
left: 15px;
z-index: 2;
width: 1.5em;
}
.ba-charinfo>.tabs-container>.school-logo {
position: absolute;
top: calc(50% - 100px);
left: 60px;
z-index: 0;
width: calc(100% - 60px);
height: 200px;
}
.ba-charinfo>.tabs-container>.Tabs {
height: 100%;
border-radius: 0;
}
.ba-charinfo>.tabs-container>.Tabs div {
border-radius: 0;
}
.ba-charinfo>.tabs-container>.Tabs .TabLabel {
/* height: 700px; 2022-06-17 */
overflow-y: auto;
/* background: linear-gradient( to bottom, #3DF, #193A67 90% ); */
background: transparent;
display: grid;
grid-template-columns: 60px;
grid-template-rows: repeat(auto-fit, 50px);
grid-gap: 5px;
padding: 5px 0;
/*border-right: 4px solid #0F2233;*/
}
.ba-charinfo>.tabs-container>.Tabs .TabLabelText {
height: 50px;
font-size: 25px;
color: #3DF;
border-radius: 10px;
border: none;
padding-bottom: 6px !important;
background: #0F2233 !important;
margin: 0 5px;
}
.ba-charinfo>.tabs-container>.Tabs .TabLabelText.selected {
font-weight: bold;
/* border-radius: 10px 0 0 10px; */
border-radius: 10px;
margin-right: 0;
color: #b4f3ff;
}
.ba-charinfo>.tabs-container>.Tabs .TabContentText {
height: 100%;
width: 100%;
position: relative;
/*
mask-image: linear-gradient(to right, black 98%, transparent);
-webkit-mask-image: linear-gradient(to right, black 98%, transparent); */
}
.ba-charinfo>.tabs-container>.Tabs .TabContentText>.img {
position: absolute;
top: 50%;
left: 50%;
}
.ba-charinfo>.tabs-container>.img>.illust-link>a>img {
max-width: 100%;
height: auto;
}
.ba-charinfo>.tabs-container>.Tabs .TabContentText>.img>.illust-link>a>img {
/* 2022-06-16 */
max-width: none !important;
/* 去除mzh的链接内图片自动缩放 */
height: 600px !important;
/* 解决mzh特有样式会使部分立绘高度为599px的问题 */
}
.ba-charinfo>.tabs-container>.Tabs .TabContentText>.notachie {
width: 200px;
height: 200px;
font-size: 200px;
line-height: 200px;
font-weight: bold;
color: #FFF;
color: rgba(255, 255, 255, 0.75);
}
.ba-charinfo>.data-container {
grid-area: data;
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 100%;
grid-gap: 0;
grid-template-areas:
". .";
font-size: 1.2em;
padding: 10px;
background: #DEF;
}
.ba-charinfo>.data-container>div {
display: grid;
grid-template-columns: 6em 4em;
grid-template-rows: repeat(7, 1fr);
grid-gap: 5px;
column-gap: 15px;
grid-template-areas:
". ."
". ."
". ."
". ."
". ."
". ."
". .";
}
.ba-charinfo>.data-container>div,
.ba-charinfo>.data-container>div>div {
border-radius: 0;
padding: 0;
}
.ba-charinfo>.data-container>div:first-child {
border-right: solid 2px #3DF;
}
.ba-charinfo>.data-container>div:last-child {
border-left: solid 2px #3DF;
}
.ba-charinfo>.data-container>div>div:nth-child(odd) {
text-align: right;
}
.ba-charinfo>.data-container>div>div:nth-child(even) {
text-align: left;
}
.ba-charinfo>.misc-container {
grid-area: misc;
display: grid;
grid-template-columns: 1fr auto;
/* 2022-06-15
grid-template-rows: 55px auto;
*/
grid-gap: 10px;
/* 2022-06-15
grid-template-areas:
"profession profession"
"atk-info terrain";
*/
grid-template-areas:
"atk-info terrain"
"outfit outfit";
font-size: 1.5em;
margin-bottom: 15px;
}
.ba-charinfo>.misc-container>.attack-info,
.ba-charinfo>.misc-container>.terrain-ratings {
background: rgba(255,255,255,0.5);
}
.ba-charinfo>.tabs-container>.Tabs .TabLabelText,
.ba-charinfo>.misc-container>.attack-info>div,
.ba-charinfo>.misc-container>.terrain-ratings>div {
display: flex;
align-items: center;
}
.ba-charinfo>.misc-container>.profession {
grid-area: profession;
display: grid;
grid-template-columns: 70px auto;
grid-template-rows: 40px;
grid-gap: 5px;
grid-template-areas:
". .";
font-size: 1.3em;
}
.ba-charinfo>.misc-container>.attack-info {
grid-area: atk-info;
display: grid;
grid-template-rows: repeat(6, 1fr);
grid-gap: 2px;
grid-template-areas:
". ."
". ."
". ."
". ."
". ."
". .";
justify-content: space-around;
align-items: center;
font-size: 0.85em;
}
.ba-charinfo>.misc-container>.attack-info>div:nth-child(even) {
color: #FFF;
font-weight: bold;
}
.ba-charinfo>.misc-container>.attack-info>.block-label {
padding: 4px 8px;
}
.ba-charinfo>.misc-container>.attack-info>.pos-weapon {
text-shadow: -1.4px 0 #336, -1px -1px #336, 0 -1.4px #336, -1px 1px #336, 1.4px 0 #336, 1px 1px #336, 0 1.4px #336, 1px -1px #336, 3px 3px 3px #779;
color: #EEE;
}
.ba-charinfo>.misc-container>.terrain-ratings {
grid-area: terrain;
display: grid;
grid-template-columns: repeat(3, 2em);
grid-template-rows: repeat(3, 1fr);
grid-gap: 5px;
grid-template-areas:
"street street-rank-text street-rank-icon"
"outdoor outdoor-rank-text outdoor-rank-icon"
"indoor indoor-rank-text indoor-rank-icon";
}
.ba-charinfo>.misc-container>.terrain-ratings>.terrain-icon,
.ba-charinfo>.misc-container>.terrain-ratings>.terrain-rating-icon {
font-size: 70%;
}
/* 2022-06-19 */
.ba-charinfo>.misc-container>.outfit {
grid-area: outfit;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-areas:
". . .";
background-color: rgba(255,255,255,0.5);
}
@media (max-width: 755px) {
.ba-charinfo {
grid-template-areas: "tabs""name""data""misc";
height: auto;
grid-template-columns: 100%;
grid-template-rows: 600px auto;
padding-right: 0;
}
.ba-charinfo>.name-container>.school {
/* font-size: 80%; 2022-06-16*/
font-size: 70%;
width: 160px;
}
.ba-charinfo>.name-container>.name-ja {
/* 2022-06-12
font-size: 1em;
margin-left: 150px;
*/
font-size: 0.9em;
margin-left: 38vw;
}
.ba-charinfo>.name-container>.name {
font-size: 1.75em;
}
.ba-charinfo>.tabs-container>.Tabs .TabContentText>.img>.illust-link>a>img {
/* 2022-06-16 */
height: 500px !important;
width: auto !important;
}
.ba-charinfo>.data-container {
font-size: 95%;
}
/* 2022-06-18 */
.ba-charinfo>.misc-container {
grid-template-areas:
"atk-info"
"terrain"
"outfit";
grid-template-columns: 100%;
}
/* .ba-charinfo>.misc-container>.attack-info { */
/* grid-template-areas: none; 2022-06-15 */
/*grid-template-areas:
". . . ."
". . . ."
". . . .";
grid-template-rows: auto;
grid-template-columns: auto 70px auto 70px;
font-size: 0.6em;*/
/* } */
/* 2022-06-18 */
/* .mw-parser-output .ba-charinfo>.misc-container>.attack-info img { */
/* zoom: 70%;*/
/* } */
.ba-charinfo>.misc-container>.terrain-ratings {
/* 2022-06-18 */
grid-template-areas:
"street outdoor indoor"
"street-rank-icon outdoor-rank-icon indoor-rank-icon"
"street-rank-text outdoor-rank-text indoor-rank-text";
grid-gap: 0;
grid-template-rows: repeat(3, 40px);
grid-template-columns: repeat(3, 30%);
align-items: baseline;
font-size: 85%;
}
}
/* [[Category:在模板名字空间下的CSS页面]][[Category:蔚蓝档案CSS页面]] */