Template:云图计划心智人形/doll.css
跳到导航
跳到搜索
/*
==总体==
位于.pnc-dollStatus中
*pnc = Project. Neural. Cloud.
*/
.pnc-icon, .pnc-skill-period::before {
font-family: PNCicons;
font-weight: 400;
}
.noselect {
-webkit-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
user-select: none;
}
.pnc-dollStatus {
clear: both;
line-height: 1.4;
color: #020305;
max-width: 84em;
margin: 0 auto;
}
.pnc-dollStatus h3 {
margin-bottom: 0 !important;
}
.pnc-dollStatus p {
line-height: inherit !important;
}
/*
==基本资料、心智投影==
位于.pnc-figr-outer中
* basc = basic
* figr = figure
** prvw = preview
** cap = caption
*/
.pnc-basc {
position: absolute;
left: 3%;
bottom: 14em;
display: flex;
flex-direction: column;
align-items: flex-start;
color: #FFF;
z-index: 2;
}
.pnc-dollPos {
font-size: 2em;
background: rgba(45,45,45,.8);
display: flex;
align-items: center;
line-height: 1;
padding: .14em;
}
.pnc-dollPos-txt {
font-size: 85%;
width: 0;
height: 1em;
overflow: hidden;
white-space: nowrap;
transition: width .36s;
position: relative;
}
.pnc-dollPos:hover .pnc-dollPos-txt {
width: 2.2em;
transition-duration: .25s;
}
.pnc-dollPos-txt > span {
position: absolute;
right: 0;
top: 0;
}
.pnc-dollTag {
display: flex;
margin-top: .6em;
}
.pnc-dollTag > span {
background: rgba(45,45,45,.8);
padding: 0 .5em;
margin-right: .5em;
}
.pnc-zhName {
font-size: 3em;
font-weight: 700;
text-shadow:
-0.03em -0.03em rgba(28,28,28,.2),
-0.03em 0.03em rgba(28,28,28,.2),
0.03em -0.03em rgba(28,28,28,.2),
0.03em 0.03em rgba(28,28,28,.2);
}
.pnc-enName {
background: #ff8a07;
min-width: 11em;
padding: 0 .5em;
box-sizing: border-box;
text-transform: uppercase;
}
.pnc-star-1 .pnc-enName {
background: #2c99ff;
}
.pnc-star-2 .pnc-enName {
background: #b268f3;
}
.pnc-starLv {
font-size: 2em;
text-shadow: -.1em .1em .3em rgba(28,28,28,.5)
}
/* ---- */
.pnc-figr-outer {
box-shadow: 0 1px 0.4em rgba(28,28,28,.5);
display: flex;
flex-flow: row-reverse wrap;
align-items: flex-start;
position: relative;
margin: .4em 0 .8em;
color: #FFF;
}
.pnc-figr-outer::after {
content: "";
height: 37em;
flex: 32 1 34em;
}
/* .pnc-figr { (inline) } */
.pnc-figr > .TabLabel {
flex-flow: row wrap;
max-height: 27em;
padding: 0;
margin: 0;
overflow-y: auto;
}
.pnc-figrPrvw {
flex: 1 1 auto;
display: flex;
text-align: center;
margin: .3em;
background: linear-gradient(#575757, #484848 1.4em) !important;
box-shadow: 0 1px .2em #1C1C1C;
border: none !important;
filter: brightness(0.7);
}
.pnc-figrPrvw.selected {
filter: none;
}
.pnc-figrPrvw > div {
flex-grow: 1;
display: flex;
flex-wrap: wrap;
justify-content: center;
min-width: 7em;
padding: .2em .4em;
box-sizing: content-box;
background: linear-gradient(0deg, rgba(245,190,0,.5), transparent 1.4em) center 1.4em repeat-x;
transition: background-position .5s, box-shadow .5s;
}
.pnc-figrPrvw.selected > div {
box-shadow: 0 0.1em #f5be00;
background-position: center bottom;
}
.pnc-figr-name {
flex-grow: 1;
display: flex;
flex-flow: column nowrap;
justify-content: center;
font-weight: 700;
margin-right: .3em;
min-height: 2.6em;
}
.pnc-figr-name > div {
font-size: 90%;
font-weight: 400;
}
.pnc-figr-label {
color: #000;
background: #ccc;
border-radius: 1em;
font-size: 85%;
width: 4.3em;
}
.pnc-figr-label + .pnc-figr-label {
margin-top: .2em;
}
/* ---- */
.pnc-figr .TabDivider, .pnc-information .TabDivider {
display: none;
}
/* ---- */
.pnc-figr .TabContent {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 37em;
overflow: hidden;
border: none;
}
.pnc-figr-img, .pnc-skillAndInfo {
display: flex;
flex-wrap: wrap;
}
.pnc-figr-img::before {
content: "";
flex-grow: 1;
}
.pnc-figr-img > div {
flex: 0 1 40em;
height: 37em;
display: flex;
max-width: 100%;
align-items: center;
justify-content: center;
animation: figr-slidein .4s;
color: #020305;
}
.pnc-figr-img::after {
content: "";
flex: 1 1 7em;
}
.pnc-figr-img > div > a {
display: flex;
justify-content: center;
}
.pnc-figr-img > div img {
width: auto !important;
height: auto !important;
max-width: 130% !important;
}
.pnc-figr-cap {
position: absolute;
bottom: 0;
right: 0;
left: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
background: linear-gradient(90deg,rgba(28,28,28,0),rgba(28,28,28,.5),rgba(28,28,28,.5),rgba(28,28,28,0))
}
.pnc-figr-cap > .poem {
color: #FFF;
padding: 1em;
box-sizing: border-box;
max-height: 9em;
overflow-y: auto;
}
.pnc-figr-cap p {
margin: 0 !important;
text-shadow: 0 0 1em #000;
}
@keyframes figr-slidein {
from {
transform: translateX(12em);
opacity: .3;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/*
==技能和档案==
位于.pnc-skillAndInfo中
*/
.pnc-skillAndInfo {
margin-right: -1em;
/* 还有一部分和上面.pnc-figr-img在一起 */
}
.pnc-skill-outer {
flex: 2 1 30em;
display: flex;
flex-direction: column;
margin-right: 1em;
}
.pnc-info-outer {
flex: 1 1 28em;
margin-right: 1em;
}
.pnc-skill, .pnc-information {
background: rgba(255,255,255,.8);
margin: .4em 0 .8em;
box-shadow: 0 0.5em 0.5em -0.1em rgba(28,28,28,.35);
border: .1em solid rgba(28,28,28,.3);
}
/*
===技能===
位于.pnc-skill-outer中
* skill
** pasv = passive
** ulti = ultimate
** pre = 预充能
** unlk = unlock
** anno = annotation
*/
.pnc-skill {
flex-grow: 1;
display: flex;
flex-direction: column;
}
.pnc-skill-main {
padding: .5em 0;
flex-grow: 1;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.pnc-skill-icon {
flex: 0 0 6.4em;
margin-right: .4em;
min-height: 6em;
display: flex;
align-items: center;
justify-content: center;
position: relative;
font-size: 13px;
}
.pnc-skill-icon::after {
content: "";
width: 1px;
height: 3em;
background: #d1d2d6;
position: absolute;
right: 0;
}
.pnc-skill-icon > div {
position: relative;
overflow: hidden;
filter: drop-shadow(0 0 .2em rgba(28,28,28,.6));
width: 4.8em;
height: 5.17em;
}
.pnc-skill-auto .pnc-skill-icon > div {
height: 5.44em;
}
.pnc-skill-ulti .pnc-skill-icon > div {
height: 5.7em;
}
.pnc-skill-icon img {
position: absolute;
top: 0;
width: 18em !important;
height: auto !important;
max-width: none !important;
transform-origin: left top;
transform: matrix(1, 0, -.03, 1, 0, 0);
left: -0.07em;
}
.pnc-skill-auto .pnc-skill-icon img {
transform: matrix(1, 0, -.05, 1, 0, 0);
left: -6.27em;
}
.pnc-skill-ulti .pnc-skill-icon img {
transform: matrix(1, 0, -.06, 1, 0, 0);
left: -12.57em;
}
.pnc-skill-main > div:not(.pnc-skill-icon) {
padding: 0 .5em;
flex: 1 1 20em;
}
.pnc-skill-header {
display: flex;
flex-wrap: wrap;
align-items: center;
padding-bottom: .2em;
border-bottom: .1em solid #888
}
.pnc-skill-type {
color: #FFF;
margin-right: .5em;
min-width: 3.5em;
line-height: 1.5;
text-align: center;
background-color: #464950;
}
.pnc-skill-auto .pnc-skill-type {
background-color: #0b8ffe;
}
.pnc-skill-ulti .pnc-skill-type {
background-color: #fb7600;
}
.pnc-skill-name {
flex-grow: 1;
font-size: 120%;
}
.pnc-skill-time {
display: flex;
line-height: 1.5;
flex-grow: 1;
justify-content: flex-end;
margin-left: .5em;
}
.pnc-skill-pre {
background: #9f9f9f;
color: #fff;
border-left: 2px solid #fb7600;
padding: 0 .4em;
}
.pnc-skill-period {
background: #454545;
color: #bfbfbf;
padding: 0 .4em;
}
.pnc-skill-period::before {
content: "\231B"; /* 沙漏 */
margin-right: .3em;
}
.pnc-skill-video {
float: right;
display: inline-block;
margin: 0 0 .4em .4em;
position: relative;
overflow: hidden;
}
.pnc-skill-video > div {
font-size: 95%;
position: absolute;
bottom: .3em;
right: .4em;
color: #FFF;
text-shadow: -1px 0 .2em #000, 1px 0 .2em #000, 0 1px .2em #000;
}
.pnc-skill-video + div {
overflow: hidden;
width: 14em;
max-width: 100%;
}
.pnc-skill-main::after {
content: "";
clear: both;
}
.pnc-skill-unlk {
padding: .3em .5em;
background: linear-gradient(90deg, #201f24, rgba(32,31,36,0));
color: #fff;
}
.pnc-skill-anno {
padding: .5em 0;
margin: 0 .5em;
}
.pnc-skill-main + .pnc-skill-anno {
border-top: .1em solid #888;
}
/* 切换显示（精简详细选择、技能等级选择） */
.pnc-skill-h3 .textToggleDisplayButtons,
.pnc-skill-h3 .textToggleDisplayButtons > span,
.pnc-skill-dtl .textToggleDisplayButtons > span {
display: flex;
}
.pnc-skill-h3 .textToggleDisplayButtonLabel, .pnc-skill-dtl .textToggleDisplayButtonLabel {
margin: 0;
border: none;
box-shadow: none;
border-radius: 0;
background: transparent;
color: inherit;
}
.textToggleDisplayButtonLabel:not(.on) {
cursor: pointer;
}
.pnc-skill-h3 .textToggleDisplayButtonInput, .pnc-skill-dtl .textToggleDisplayButtonInput {
display: none;
}
/* 精简/详细 */
.pnc-skill-h3 {
display: flex;
align-items: baseline;
}
.pnc-skill-h3 h3 {
margin-right: 1em !important;
}
.pnc-skill-h3 .textToggleDisplayButtons {
background: #5c5c5c;
outline: .12em solid #5c5c5c;
color: #d6d6d6;
}
.pnc-skill-h3 .textToggleDisplayButtonLabel {
padding: 0 1em;
}
.pnc-skill-h3 .textToggleDisplayButtonLabel.on {
background: #FFF;
color: #636363;
}
/* 等级选择 */
.pnc-skill-dtl .textToggleDisplayButtons {
background: rgba(48,48,48,.1);
text-align: center;
display: flex; /* fallback */
display: grid;
grid-template-columns: repeat(auto-fit, minmax(3.4em, 1fr));
}
.pnc-skill-dtl .textToggleDisplayButtonLabel {
overflow: hidden;
padding: 0;
}
.pnc-skill-dtl .textToggleDisplayButtonLabel.on {
background: #464950;
color: #FFF;
}
.pnc-skill-dtl .textToggleDisplayButtonLabel:not(.on):hover {
background-color: rgba(70,73,80,.2);
}
.pnc-skill-dtl .textToggleDisplayButtonLabelText.on {
position: relative;
animation: text-slidein .3s ease-out;
}
@keyframes text-slidein {
from {
left: 3em;
}
to {
left: 0;
}
}
/*
===档案（档案/故事/语音）===
位于.pnc-info-outer中
*info = information
**prof = profile
**stry = story
**voic = voice
结构:
Tabs pnc-information
├─ TabLabel //档案|故事|语音
├─ TabDivider //无用
└─ TabContent
├─ TabContentText pnc-prof //档案
│ └─ <div>
│ ├─ pnc-prof-header
│ ├─ pnc-prof-1
│ ├─ pnc-prof-dt
│ └─ pnc-prof-2
├─ TabContentText pnc-stry //故事
│ └─ <div>
│ ├─ pnc-info
│ ├─ <div>
│ ├─ pnc-info
│ ├─ <div>
│ └─ …
└─ TabContentText pnc-voic //语音
└─ <div>
├─ pnc-info
├─ <div>
├─ pnc-info
├─ <div>
└─ …
*/
/* 整体 information */
.pnc-information {
overflow: hidden;
}
.pnc-information > .TabLabel {
flex-wrap: nowrap;
font-size: 108%;
}
.pnc-information .TabLabelText {
flex: 1;
text-align: center;
background: #383838 !important;
border: none !important;
color: #AAA;
}
.pnc-information .TabLabelText.selected {
background: initial !important;
color: #1C1C1C;
}
.pnc-information .TabContent {
border: none !important;
}
.pnc-prof > div, .pnc-stry > div, .pnc-voic > div {
box-sizing: border-box;
height: 40em;
padding: 0 .9em;
overflow-y: auto;
}
/*
====档案====
*/
.pnc-prof > div {
display: flex;
flex-direction: column;
}
.pnc-prof-header {
color: #A2A2A2;
display: flex;
justify-content: space-between;
line-height: 2;
border-bottom: .12em solid;
font-size: .9em;
}
.pnc-prof-header::before {
content: "受试人形档案";
}
.pnc-prof-header::after {
content: "PROJECT. NEURAL. CLOUD";
}
.pnc-prof-dt {
padding: 0.24em 0.7em;
border-radius: 3px;
background: #494949;
color: #FFF;
}
span.pnc-prof-dt {
display: inline-block;
margin-right: 1em;
}
.pnc-prof-1 {
display: flex;
flex-wrap: wrap;
margin: .7em -.4em .1em;
}
.pnc-prof-1 > div {
min-width: calc(50% - 0.8em);
flex: 1 0 auto;
background: rgba(48,48,48,.1);
border-radius: 3px;
margin: 0 .4em .8em;
padding-right: .7em;
box-sizing: border-box;
}
.pnc-prof-2 {
flex: 1;
font-size: 106%;
margin: .3em 0 .4em;
position: relative;
min-height: 6em;
}
.pnc-prof-2 > div {
position: absolute;
top:0; right:0; bottom:0; left:0;
overflow-y: auto;
}
/*
====故事和语音====
*/
.pnc-info {
margin: .8em 0 0;
padding: .4em .6em;
background: #484848;
color: #fff;
font-size: 110%;
box-shadow: .15em .15em .3em rgba(28,28,28,.5);
position: relative;
}
.pnc-info::after {
content: "INFO";
position: absolute;
opacity: 0.04;
right:0; top:50%;
font: 500 2.5em/0 sans-serif;
}
.pnc-info.pnc-info-voic::after, .pnc-voic .pnc-info::after {
content: "VOICE";
}
.pnc-info[data-friendshipLv]::before {
content: "亲密度LV" attr(data-friendshipLv) "解锁";
display: block;
position: absolute;
padding: .2em .5em;
background: rgba(28,28,28,.8);
border-radius: .3em;
right: .2em;
top: .2em;
opacity: 0;
transition: opacity .3s;
}
.pnc-info[data-friendshipLv]:hover::before {
opacity: 1;
}
.pnc-info + div {
background: rgba(48,48,48,.1);
padding: .3em .5em;
}
.pnc-prof-2 p, .pnc-info + div p {
margin: 0;
}
/* SM2音频 */
.pnc-information .sm2-bar-ui {
display: block;
max-width: none;
border-radius: .2em;
font-size: .9em;
line-height: 1;
margin: .4em 0 .2em;
}
.pnc-information .sm2-bar-ui .sm2-inline-element,
.pnc-information .sm2-bar-ui .sm2-button-element .sm2-button-bd {
width: auto;
min-height: 2.1em;
}
.pnc-information .sm2-bar-ui a {
display: flex;
align-items: center;
}
.pnc-information .sm2-icon-play-pause::before,
.pnc-information .sm2-icon-play-pause:hover::before,
.pnc-information .paused .sm2-icon-play-pause:hover::before {
background: #FFF;
border-radius: 100%;
font-size: .9em;
line-height: 1;
width: 1em;
height: 1em;
padding: .2em;
margin: 0 .5em 0;
box-sizing: content-box;
}
.pnc-information .sm2-icon-play-pause::after {
content: "暂停";
color: #FFF;
}
.pnc-information .paused .sm2-icon-play-pause::after {
content: "播放";
}
/*
==窄页面==
*/
@media screen and (max-width: 540px) {
.pnc-basc {
transform: scale(.875);
transform-origin: left bottom;
bottom: 9.5em;
}
.pnc-zhName {
font-size: 2.5em;
}
.pnc-figr-img > div {
align-items: flex-start;
}
}
@media screen and (max-width: 480px) {
.pnc-skill-icon {
font-size: 2.7vw;
}
.pnc-prof > div, .pnc-stry > div, .pnc-voic > div {
padding: 0 .5em;
}
.pnc-skill-video {
display: table;
float: none;
margin: 0 auto .4em;
}
}
/* [[Category:在模板名字空间下的CSS页面]] */