Template:无期迷途禁闭者档案/style.css

/*
 For [[Template:无期迷途禁闭者档案]]
 部分修改自 [[Template:云图计划心智人形/doll.css]]
 
 *ptn = Path To Nowhere 
 
 结构:
.ptn-info-outer 
.ptn-main
│
├─.ptn-data-outer
│   ├─.ptn-h3 //技能
│   ├─ div
│   │   ├─ .ptn-jineng.ptn-jn-pg
│   │   ├─ .ptn-jineng.ptn-jn-bs
│   │   ├─ .ptn-jineng.ptn-jn-bd
│   │   └─ .ptn-jineng.ptn-jn-bd
│   │
│   ├─.ptn-h3 //枷锁
│   ├─ div
│   │   ├─ .ptn-jiasuo
│   │   ├─ ...
│   │   └─ .ptn-jiasuo
│   │
│   ├─.ptn-h3 //烙印
│   └─ div
│
└─.ptn-file-outer
    ├─.ptn-h3 //档案
    └─.ptn-dangan
*/

.noselect {
	-webkit-user-select: none;
	-ms-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

.ptn-main a {
	color: lightblue;
}

.ptn-info-outer,
.ptn-data-outer,
.ptn-file-outer {
	margin: .4em .4em 0;
}

.ptn-info-outer,
.ptn-main {
	clear: both;
	max-width: 84em;
	margin: auto;
	line-height: 1.6;
} 
.ptn-main2 {
    max-width: 83.2em;
    margin: 0 auto;
}
.ptn-main { 
	display: flex;
	flex-wrap: wrap;
	flex-direction: row-reverse;
}

.ptn-main p {
	line-height: inherit !important;
}

.ptn-main img {
	color: #3399aa;
}

.ptn-info-outer,
.ptn-jineng,
.ptn-js-dtl,
.ptn-laoyin,
.ptn-dangan {
	box-shadow: 0 1px .4em rgba(28, 28, 28, .5);
}

/* 数值颜色 */
.ptn-face .wqmt-value,
.ptn-jineng .wqmt-value,
.ptn-jiasuo .wqmt-value {
  color: #66eeee;
}

/* ==信息 Info== */

.ptn-face {
	/* *面板 */
	position: absolute;
	right: 5%;
	top: 6em;
	bottom: 11em;
	display: flex;
	flex-direction: column;
	color: #fff;
	z-index: 3;
}

.ptn-filter {
	content: "";
	background: linear-gradient(270deg,rgba(0,0,0,.6),rgba(0,0,0,.4) 150px,transparent 300px),
		linear-gradient(180deg, rgba(0,0,0,.6), transparent 40px);
	position: absolute;
	left: 0;
	right: 0;
	height: 40em;
	z-index: 2;
	/* !pointer-events: none; //inline */
}

.ptn-info-name {
	min-width: 5em;
	font-size: 3em;
	font-family: "Source Han Serif", "思源宋体 CN", "思源宋体", "Noto CJK", Serif;
	font-weight: 700;
	text-align: center;
	text-shadow: 0 0 .05em #000;
}

.ptn-info-code {
	text-align: center;
	padding: 0 .5em;
	box-sizing: border-box;
	text-transform: uppercase;
	transform: scale(.8);
}

.ptn-info-rank {
	position: absolute;
	height: 99px;
	width: 99px;
	top: 1.1em;
	right: -0.4em;
	transform: rotate(350deg);
	font-size: 40px;
	color: #fff;
	text-shadow: 0 0 .05em #000;
}

.ptn-tend {
	/* *职业 */
	display: flex;
	margin-top: 1em;
	color: #fff;	
	text-shadow: 1px 1px 2px rgba(0,0,0,.6), 1px -1px 2px rgba(0,0,0,.6), 
		-1px 1px 2px rgba(0,0,0,.6), -1px -1px 2px rgba(0,0,0,.6);
	align-items: center;
}
.ptn-tend-zh {
	font-size: 1.2em;
	font-weight: 500;
	padding-right: .5em;
}
.ptn-tend-en {
	text-transform: uppercase;
	font-size: .9em;
	padding-right: .5em;
}
.ptn-tend.pohe-y img {
	margin-right: .5em;
	background: linear-gradient(#cde, #cde 40%, #ff4d40);
}
.ptn-tend.pohe-n img {
	margin-right: .5em;
	background: #cde;
}

.ptn-feat {
	/* *特性 */
	display: flex;
	width: 20em;
	box-sizing: border-box;
	padding: .5em;
	margin: 1em 0;
	background: rgba(0, 0, 0, .6);
}
.ptn-feat > div:first-child {
	flex: 0 0 3em;
	color: #e6f6ff;
}

.ptn-deep {
	/* *狂厄深化 nm=namae ef=effet */
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	margin-top: 1em;
}
.ptn-deep-nm {
	display: flex;
	width: 14em;
	transition: unset;
	background: linear-gradient(300deg, #222 50%, transparent 50%),
		repeating-linear-gradient(150deg, #222, #222 1px, #888 2px, #888 3px);
	box-shadow: 0 0 2px 1px rgba(210, 210, 210, .5);
	margin-bottom: .4em;
}
.ptn-deep-nm > div {
	flex: 1 1 7em;
	display: flex;
	flex-direction: column;
	text-align: center;
	vertical-align: middle;
	justify-content: center;
}
.ptn-deep-ef {
	width: 20em;
	box-sizing: border-box;
	padding: .5em;
	background: rgba(0, 0, 0, .6);
}

/* ---- */

.ptn-info-outer {
	display: flex;
	flex-flow: column wrap;
	/*align-items: ;*/
	position: relative;
	color: #fff;
	background: #888;
	background-image: url(https://img.moegirl.org.cn/common/d/d0/Wqmt_bg_1.png);
	background-position: center;
	background-size: cover;
}
.ptn-info-outer::after {
	content: "";
	height: 37em;
	flex: 32 1 34em;
}

/* !.ptn-info { (inline) } */

.ptn-info > .TabLabel {
	flex-flow: row wrap;
	padding: 0;
	margin: 0;
	justify-content: center;
}

.ptn-info-butn {
	/* *Tabs切换按钮 */
	flex: 1 1 7em;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: center;
	align-content: center;
	display: flex;
	margin: .5em .8em;
	max-width: 10em;
	height: 1.8em;
	text-align: center;
	font-weight: 600;
	background: #222 !important;
	background: rgba(0,0,0,.8) !important;
	border: .1em solid transparent !important;
	border-radius: 1em;
	filter: opacity(.75);
}
.ptn-info-butn.selected {
	box-shadow: 0 0 3px 1px #cde;
	filter: none;
}
.ptn-wear-star {
	transform: rotate(22.5deg) scale(1.4);
}

.ptn-info .TabDivider,
.ptn-information .TabDivider {
	display: none;
}

/* *立绘 */

.ptn-info .TabContent {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 40em;
	overflow: hidden;
	border: none;
}

.ptn-info-img {
	display: flex;
	flex-wrap: nowrap;
}

.ptn-info-img::before {
	content: "";
	flex-grow: 1;
}

.ptn-info-img > div {
	flex: 0 1 40em;
	height: 37em;
	display: flex;
	max-width: 100%;
	align-items: center;
	justify-content: center;
	animation: lihui-slidein .4s;
}

.ptn-info-img::after {
	content: "";
	flex: 1 1 7em;
}

.ptn-info-img > div > a {
	display: flex;
	justify-content: center;
}

.ptn-info-img > div img {
	width: auto !important;
	height: auto !important;
}
.lihui-default img {
	position: absolute;
	top: -14px;
	min-width: 700px !important;
	max-width: 150% !important;
}
.lihui-zhanzi img,
.lihui-prison img {
	position: absolute;
	top: 20px;
	max-width: 270% !important;
}

/* *装束背景 */

.ptn-wear-capt {
	position: absolute;
	left: 2em;
	bottom: 2em;
	width: 19em;
	height: 12em;
	z-index: 3;
	display: flex;
	box-sizing: border-box;
	flex-wrap: nowrap;
	flex-direction: column;
	justify-content: center;
}
.ptn-wear-name {
	font-family: "Source Han Serif", "思源宋体 CN", "思源宋体", "Noto CJK", Serif;
	font-weight: 700;
	font-size: 1.6em;
	text-shadow: 0 0 .05em #000;
	line-height: 1.8;
}
.ptn-wear-capt > .poem {
	flex: 1 1 auto;
	box-sizing: border-box;
	padding: 1em;
	border-top: .2em solid #fff;
	color: #fff;
	overflow-y: auto;
	background: rgba(0, 0, 0, .6);
}
.ptn-wear-capt p {
	margin: 0 !important;
}
.ptn-wear-capt::after {
	position: absolute;
	content: "";
	border-top: 8px solid transparent;
	border-right: 8px solid #e60000;
	width: 0;
	bottom: 2px;
	right: 2px;
}

@keyframes lihui-slidein {
	from {
		transform: translateX(12em);
		opacity: 0.3;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}

/* ---- */

/* 左栏 */
.ptn-data-outer {
  flex: 2 1 30em;
  display: flex;
  flex-direction: column;
}

/* 右栏 */
.ptn-file-outer {
  flex: 1 1 28em;
}

/* h3 */
.ptn-h3 {
  display: flex;
  align-items: baseline;
}

.ptn-h3 h3 {
  margin-right: .5em !important;
}

.ptn-h3>div {
  width: 1rem;
  padding: .1rem;
  font-size: 80%;
  line-height: 1rem;
  text-align: center;
  border: .1rem solid #222;
  transform: translate(0,-.15em) scale(.75);
  user-select: none;
}

/* 共通 */
.ptn-jineng,
.ptn-laoyin,
.ptn-jiasuo,
.ptn-dangan {
  margin: .4em 0 .8em;
}

.ptn-laoyin span.wqmt-value {
  color: #ff9800;
}

/* ===技能 jineng / 专烙 laoyin=== 

jn = jineng
zl = zhuanlao
zs = zhuanshu(laoyin)
*/

.ptn-jineng,
.ptn-laoyin {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  color: #e6f6ff;
  background: #000;
  background: rgba(0,0,0,.8);
  border-left: .3em solid #e60000;
}

.ptn-jn-main,
.ptn-zl-main {
  padding: .5em 0;
  flex-grow: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.ptn-jn-icon {
  position: relative;
  flex: 0 0 6.4em;
  display: flex;
  min-height: 6em;
  font-size: 13px;
  align-items: center;
  justify-content: center;
}

.ptn-jn-icon>div {
  position: relative;
  overflow: hidden;
}

.ptn-jn-icon img {
  width: 6em !important;
  height: auto !important;
}

.ptn-jn-main>div:not(.ptn-jn-icon) {
  flex: 1 1 20em;
  padding: 0 .5em;
}

.ptn-zl-header,
.ptn-jn-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-bottom: .2em;
}

.ptn-jn-header {
  border-bottom: .1em dashed #e60000;
}

.ptn-jn-type {
  color: #fff;
  margin: 0 .5em 0;
  min-width: 3.5em;
  font-size: small;
  line-height: 1.2;
  text-align: center;
}

.ptn-jn-pg .ptn-jn-type {
  background-color: #bbb;
}

.ptn-jn-bs .ptn-jn-type {
  background-color: #d40;
}

.ptn-jn-bd .ptn-jn-type {
  background-color: #49e;
}

.ptn-laoyin .ptn-jn-type {
  padding: 0 1.2em;
  color: #333;
  background-image: linear-gradient(90deg, #f33 10%, #dee 70%);
}

.ptn-zl-name,
.ptn-jn-name {
  font-size: 120%;
  color: #fff;
}

.ptn-zl-name {
  font: 700 1.5em/1.4 "Source Han Serif", "思源宋体 CN", "思源宋体", "Noto CJK", Serif;
}

.ptn-zs-img {
  flex: 0 0 8em;
  display: flex;
  align-items: center;
  min-height: 6em;
  margin-left: .4em;
  margin-right: .4em;
  border: .1em solid #fff;
}

.ptn-zs-img+div {
  flex: 1 1 20em;
  padding: 0 .5em;
}

.ptn-jn-time {
  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
  margin-left: .5em;
  line-height: 1.5;
}

.ptn-jn-core {
  padding: 0 .4em;
  margin-left: .6em;
  line-height: 1.3;
  background: #a08a08;
  color: #fff;
  border-radius: 11px;
}

.ptn-jn-energy {
  padding: 0 .4em;
  line-height: 1.3;
  background: #774499;
  color: #fff;
  border-radius: 11px;
}

.ptn-jn-unlock {
  color: #bfbfbf;
}

.ptn-jn-energy::before {
  /* 闪电 */
  content: "\26A1";
  margin-right: .3em;
}

.ptn-jn-core::before {
  /* 菱形 */
  content: "\1F538";
  margin-right: .3em;
}

.ptn-jn-main::after {
  content: "";
  clear: both;
}

/* 切换显示（jn技能、zl专烙等级选择） */
.ptn-zl-dtl .textToggleDisplayButtons>span,
.ptn-jn-dtl .textToggleDisplayButtons>span {
  display: flex;
}

.ptn-zl-dtl .textToggleDisplayButtonLabel,
.ptn-jn-dtl .textToggleDisplayButtonLabel {
  margin: 0;
  border: none;
  box-shadow: none;
  border-radius: 0;
  background: transparent;
  color: inherit;
}

.textToggleDisplayButtonLabel:not(.on) {
  cursor: pointer;
}

.ptn-zl-dtl .textToggleDisplayButtonInput,
.ptn-jn-dtl .textToggleDisplayButtonInput {
  display: none;
}

.ptn-zl-dtl .textToggleDisplayButtons,
.ptn-jn-dtl .textToggleDisplayButtons {
  /*background: rgba(255,255,255,.1);*/
  text-align: center;
  display: flex;
  /* fallback */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(3.4em, 1fr));
}

.ptn-zl-dtl .textToggleDisplayButtonLabel,
.ptn-jn-dtl .textToggleDisplayButtonLabel {
  overflow: hidden;
  padding: 0;
  color: #aaa;
}

.ptn-zl-dtl .textToggleDisplayButtonLabel.on,
.ptn-jn-dtl .textToggleDisplayButtonLabel.on {
  /*background: rgba(255,255,255,.5);*/
  background: linear-gradient(0deg, #e6f6ff, transparent 20%);
  color: #fff;
}

.ptn-zl-dtl .textToggleDisplayButtonLabel:not(.on):hover,
.ptn-jn-dtl .textToggleDisplayButtonLabel:not(.on):hover {
  /*background-color: rgba(255,255,255,.2);*/
  color: #fff;
}

/* ==枷锁 jiasuo== */
.ptn-jiasuo {
  display: flex;
}

.ptn-js-dtl {
  flex: 1;
  padding: .5em;
  color: rgb(233,255,255);
  background: #000;
  background: rgba(0,0,0,.8);
}

.ptn-js-num::before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-bottom: 8px solid rgba(99,99,99,.5);
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
}

.ptn-js-num::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-top: 8px solid rgba(99,99,99,.5);
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
}

.ptn-js-num>span {
  display: block;
  width: 35px;
  font-size: 45px;
  font-weight: bold;
  color: white;
  text-align: center;
  line-height: 40px;
  background: rgba(99,99,99,.5);
  transform: scale(0.8, 1);
  transform-origin: left;
}

.ptn-js-name {
  font-weight: 500;
  color: #fff;
}

/* ==档案 dangan== 

结构:
Tabs ptn-dangan
├─ TabLabel    // (资料|语音|审查|梦境)
├─ TabDivider  
└─ TabContent
   ├─ TabContentText ptn-intel  // 资料
   │   ├─ ptn-above
   │   └─ <div>
   │     ├─ ptn-jbxx
   │     ├─ ptn-gwzs
   │     ├─ ptn-ynbx
   │     ├─ ptn-zzjl
   │     └─ ptn-jcjl
   ├─ TabContentText ptn-voice  // 语音
   │   ├─ ptn-above
   │   └─ <div>
   │     ├─ ptn-doc
   │     ├─ <div>
   │     ├─ ptn-doc
   │     ├─ <div>
   │     └─ …
   ├─ TabContentText ptn-trial  // 审查
   │   ├─ ptn-above
   │   └─ <div>
   │     ├─ ptn-doc
   │     ├─ <div>
   │     ├─ ptn-doc
   │     ├─ <div>
   │     └─ …
   └─ TabContentText ptn-dream  // 梦境
      ├─ ptn-above
      └─ ?
*/

.ptn-dangan {
  overflow: hidden;
}

.ptn-dangan>.TabLabel {
  flex-wrap: nowrap;
  /*font-size: 108%;*/
}

.ptn-dangan .TabLabelText {
  flex: 1;
  color: #fff;
  font: 600 1.4em/0.8 "Source Han Serif", "思源宋体 CN", "思源宋体", "Noto CJK", Serif;
  text-align: center;
  background: linear-gradient(to top, rgba(230,0,0,.4), transparent 60%) !important;
  border: none !important;
  border-bottom: 1px solid #fff !important;
}

.ptn-dangan .TabLabelText.selected {
  background: linear-gradient(to top, rgba(230,0,0,.8), transparent) !important;
  border-bottom: 3px solid #fff !important;
}

.ptn-dangan .TabContent {
  border: none !important;
}

.ptn-above {
  padding: 1em;
  border-bottom: .1em solid;
}

.ptn-above+div {
  box-sizing: border-box;
  height: 40em;
  padding: 0 .9em;
  overflow-y: auto;
}

.ptn-above-name {
  color: #fff;
  font: 700 1.8em/1.2 "Source Han Serif", "思源宋体 CN", "思源宋体", "Noto CJK", Serif;
}

.ptn-above-subt {
  font-size: x-small;
  color: #e6f6ff;
}

/* *资料 */

.ptn-doc {
  position: relative;
  padding: .4em;
  margin: .8em 0 0;
  color: #fff;
  font: 500 120%/0.8 sans-serif;
  background: linear-gradient(105deg, rgba(230,0,0,.5), transparent 50%);
  border: .08em solid #ba0000;
}

.ptn-intel .ptn-doc+div {
  padding: .2em .5em;
  color: #e6f6ff;
  border: #fff; /*fallback*/
  border: 1px solid rgba(255,255,255,.5);
  border-top: none;
}

.ptn-dtl {
  color: #fff;
}

.ptn-zzjl+div>div,
.ptn-jcjl+div>div {
  padding: .4em;
  margin: .4em 0;
  background: linear-gradient(to right, rgba(230,0,0,.1), transparent 10%, rgba(230,0,0,.2));
  border: #f00; /*fallback*/
  border: .1em solid rgba(170,17,0,.5);
}

.ptn-ynbx+div>div {
  padding: .4em;
  margin: .4em 0;
  background: linear-gradient(90deg, rgba(230,0,0,.2), transparent 40%);
}

/* *语音&审查 */

.ptn-voice .ptn-doc {
  color: #cde;
  background: none;
  border: .08em solid #cde;
}

.ptn-voice .poem {
  padding: 0 .5em;
}

.ptn-voice .ptn-between {
    color: #fff;
    background: linear-gradient(90deg, transparent 10%, rgba(230,0,0,.5) 50%, transparent 90%);
    line-height: 1.6;
    font-size: 110%;
    font-weight: 500;
    margin: 1em 0;
    text-align: center;
}
 
.ptn-voice-toggle {
	float: right;
	font-size: 14px;
	color: #fff;
}
 
.ptn-voice-toggle>div {
	display: inline-block;
	position: relative;
	height: 1.2em;
	text-align: center;
}
 
.ptn-voice-toggle span {
	display: inline-block;
	position: absolute;
	left: 0;
    color: #e6f6ff;
}

/* *梦境 */

.ptn-dream p {
    color: #e6f6ff;
	text-align: center;
    line-height: 2;
    font-size: 105%;
}

.ptn-dream-img {
	margin: auto;
}


/** 窄页面优化 */

@media screen and (max-width: 540px) {
	.ptn-filter {
		display: none;
	}
	.ptn-face {
		transform: scale(.75);
		bottom: 4.5em;
		right: -1.5em;
		filter: drop-shadow(0 0 .2em rgba(0,0,0,.6));
	}
	.ptn-wear-name {
		display: none;
	}
	.ptn-wear-capt {
		bottom: 0;
		left: 0;
		right: 0;
		width: auto;
		height: auto;
		margin: .5em;
		font-size: .9em;
	}
	.ptn-wear-capt > .poem {
		max-height: 7.5em;
	}
	.ptn-tend {
		flex-direction: row-reverse;
		text-align: right;
	}
	.ptn-info-rank {
		right: -0.8em;
		top: .2em;
		transform: scale(.9);
	}
}

/* [[Category:在模板名字空间下的CSS页面]] */