User:淮南皓月/test.css

注意：在保存之后，您可能需要清除浏览器缓存才能看到所作出的变更的影响。

Firefox/Safari：按住“Shift”的同时单击“刷新”，或按“Ctrl-F5”或“Ctrl-R”（Mac为“⌘-R”）
Google Chrome：按“Ctrl-Shift-R”（Mac为“⌘-Shift-R”）
Internet Explorer：按住“Ctrl”的同时单击“刷新”，或按“Ctrl-F5”
Opera：在“工具→首选项”中清除缓存

如果您已登录但该页面出现未登录状态，请尝试在地址栏的地址最后添加代码?_=1来访问最新页面。: 添加代码后的本页地址如下：-{R|https://moegirl.icu/User:%E6%B7%AE%E5%8D%97%E7%9A%93%E6%9C%88/test.css?_=1}-

/*
==总体==
位于.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;
	}
}

User:淮南皓月/test.css

导航菜单

搜索