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页面]] */