/* ==总体== 位于.ptn-main中 *ptn = Path To Nowhere */ .ptn-icon, .ptn-skill-period::before { /* font-weight: 400;*/ } .noselect { -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; user-select: none; } .ptn-main { clear: both; line-height: 1.4; color: #020305; max-width: 84em; margin: 0 auto; } .ptn-main p { /* line-height: inherit !important;*/ } /* ==信息 Info== 位于.ptn-info-outer中 * data = basic ** prvw = preview ** cap = caption */ .ptn-data { position: absolute; right: 5%; bottom: 14em; display: flex; flex-direction: column; color: #FFF; z-index: 2; } /*filter:linear-gradient(270deg,rgba(0,0,0,.6),rgba(0,0,0,.4) 150px,transparent 300px)*/ .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.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);*/ 0 0 .05em #000; } .ptn-info-code { text-align: center; padding: 0 .5em; box-sizing: border-box; text-transform: uppercase; transform: scale(0.8); } .ptn-info-rank { position:absolute; height:80px; width:80px; top:3.8em; right:-.5em; transform:rotate(350deg); font-size: 40px; color: #fff; text-shadow: 0 0 5px #000; } .ptn-tend { display:flex; margin-top:1em; color:#fff; } .ptn-tend-zh { font-size: 1.2em; } .ptn-tend-en { text-transform: uppercase; font-size:.9em; } .ptn-tend .pohe-y { background: linear-gradient(#cde, #cde 40%,#ff4d40); } .ptn-tend .pohe-n { background: #cde; } .ptn-feat { display: flex; width:20em; box-sizing: border-box; padding: 0.5em; margin: 1em 0; background: rgba(0,0,0,.5); } .ptn-feat>div:first-child { flex: 0 0 3em; } .ptn-deep { display: flex; flex-direction: column; align-items: flex-end; } .ptn-deep-nm { /*nm=namae*/ display: flex; width: 14em; transition: unset; background:linear-gradient(300deg, #222 50%, transparent 50%),repeating-linear-gradient(150deg, #222, #222 1.5px,#888 1.5px, #888 3px); box-shadow: 0 0 3px 2px rgba(210,210,210,.5); margin-bottom: 0.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 { /*ef=effet*/ width: 20em; box-sizing: border-box; padding: 0.5em; background: rgba(0,0,0,.5); } /* ---- */ .ptn-info-outer { box-shadow: 0 1px 0.4em rgba(28,28,28,.5); display: flex; flex-flow: column wrap; /*align-items: ;*/ position: relative; margin: .4em 0 .8em; color: #FFF; } .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 { flex: 1 1 7em; /*!!also inline!!*/ flex-wrap: wrap; display:flex; margin: .5em .8em; max-width: 10em; height: 1.8em; flex-direction: column; justify-content:center; align-content: center; font-weight: 700; text-align: center; background: #000!important; border: 0.1em solid transparent !important; border-radius:1em; filter: brightness(0.7); } .ptn-info-butn.star-wear{ } .ptn-info-butn.selected { border: 0.1em solid #fff !important; filter: none; } .ptn-wear-star { /*color: #000; background: #ccc; border-radius: 1em; font-size: 85%;*/ 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: 37em; overflow: hidden; border: none; } .ptn-info-img { display: flex; flex-wrap: wrap; } .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: wear-slidein .4s; color: #020305; } .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; max-width: 130% !important; } .ptn-wear-capt { position: absolute; left:2em; bottom:2em; width: 19em; height: 12em; display: flex; box-sizing: border-box; flex-wrap: nowrap; flex-direction: column; flex-wrap: wrap; 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 0.05em #000; line-height: 1.8; } .ptn-wear-capt > .poem { flex: 1 1 auto; box-sizing: border-box; padding: 1em; border-top: 0.2em solid #fff; max-height: 7em; color: #FFF; overflow-y: auto; background: rgba(0,0,0,.5); } .ptn-wear-capt p { margin: 0 !important; } @keyframes wear-slidein { from { transform: translateX(12em); opacity: .3; } to { transform: translateX(0); opacity: 1; } } /* ==窄页面== */ @media screen and (max-width: 540px) { .ptn-data { transform: scale(.85); bottom: 0; right: 0; } .ptn-wear-name { display:none; } .ptn-wear-capt { bottom: 0; left: 0; right: 0; width:100%; height:auto; padding:2em; font-size:.9em; } .ptn-tend{ flex-direction: row-reverse; text-align:right; } .ptn-info-rank{ right: -1.2em; top: 1.8em; } }