本站页面（多半）转载自萌娘百科的同名页面，依CC BY-NC-SA 3.0引入，贡献者可以在历史页查询。
因各种原因页面内容可能和源页面有所出入，非本站特有页面内容请以萌娘百科为准。
置顶公告：【置顶】关于临时开启评论区所有功能的公告(2022.10.22) | 【置顶】关于本站Widget恢复使用的公告
  • 你好～！欢迎来到萌娘百科镜像站！如需查看或编辑，请联系本站管理员注册账号。
  • 本镜像站和其他萌娘百科的镜像站无关，请注意分别。

Template:明日方舟干员/aoc.css

猛汉♂百科，万男皆可猛的百科全书！转载请标注来源页面的网页链接，并声明引自猛汉百科。内容不可商用。
跳到导航 跳到搜索 
/*主模组内全局样式*/
.akopbasics {
	width: 100%;
	max-width: 1024px;
	/*max-width: min(1300px, calc(100% - 300px)); apparently not supported by SCSS, will be defined inline*/
}
/*适配不支持min()时的较窄宽度屏幕*/
@media only screen and (max-width: 1600px ) {
	.akopbasics { max-width: 887.5px; }
}
/*适配过窄宽度屏幕*/
@media only screen and (max-width: 1000px ) {
	.akopbasics { max-width: 100%!important; }
}
.akopbasics div{
	box-sizing: border-box;
	transition: all 0.25s ease-in-out;
}
.akopbasics span{
	transition: all 0.25s ease-in-out;
}
.aoc-scroll-wrapper {
	width: 100%;
	overflow-x: auto;
}
.ak-operator-complex {
	position: relative;
	overflow: hidden;
	width: 100%;
	min-width: 800px;
	min-height: 600px; /*let it fit itself*/
	background: linear-gradient(to bottom,rgba(0,0,0,0.667),rgba(0,0,0,0.1) 95%, transparent);
	margin-bottom: 0.5em;
}
.ak-operator-complex>div {
	position: absolute;/*ak-operator-complex will be defined static inline*/
	color: #FFF;
	text-shadow: 0 0 2px #000;
}
.akopbasics>.wikitable {width:100% !important;}
.aoc-mobile-alt {display:none;}
/*功能性样式*/
.ak-operator-complex>div a {color: #DEF;}
.ak-operator-complex>div a:visited {color: #C0DDFF;}
.ak-operator-complex>div a.new {color: #FDD;}
.ak-operator-complex>div a.new:visited {color: #FFC0C0;}
.ak-operator-complex>div .reference:target {background:#888;}
.akopbasics .talentblock,
.akoplegacy .talentblock{
	color: #000;
	display: inline-block;
	padding: 0 4px;
	background: #e0e0e0;
	border-radius: 4px;
	text-shadow: none;
        margin-top:3.5px;
}
.akoplegacy .orangetext,
.akopbasics .orangetext {color: #FC6;}
.akoplegacy .trusttext,
.akopbasics .trusttext {color: #FAA;}
.akoplegacy .skybluetext,
.akopbasics .skybluetext {color: skyblue;}
.akoplegacy .bluetext,
.aoc-mobile-alt .bluetext {color: blue;}
.akoplegacy .redtext,
.aoc-mobile-alt .redtext {color: red;}
.ak-operator-complex .bluetext {color: #8DF;}
.ak-operator-complex .redtext {color: #F99;}
.aoc-noselect {user-select:none;-webkit-user-select:none;-moz-user-select:none;}

.akopbasics hr {
	color: transparent;
	background-color: #4c4c4c;
	background-color: rgba(0,0,0,0.3);
	margin: 0.25em 0;
}
/*阵营图标*/
.aoc-faction-logo {
	z-index: 0;
	top: -100px;
	left: -175px;
	transform: rotate(-10deg);
}
.aoc-faction-logo>img {
	width: 600px;
	opacity: 0.25;
}
/*左下角*/
.ak-operator-complex>.aoc-left-bottom-box {
	z-index: 2;
	left: 0;
	bottom: 0;
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: auto auto auto;
	grid-gap: 0.5em;
	grid-template-areas:
		"."
		"."
		".";
	padding-left: 0.5em;
}
/*干员名区域*/
.aoc-names {
	bottom: 140px;
}
.aoc-names>div {
	text-shadow: 0 0 3px #000;
	font-size: 1.1em;
}
.aoc-names>.aoc-stars {
	letter-spacing: -2px;
	line-height: 1em;
}
.aoc-names>.aoc-name-en {
	font-family: 'Source Sans Pro','Source Han Sans','思源黑体','Noto Sans','Noto Sans CJK',Sans-serif;
	font-weight: 500;
}
.aoc-names>.aoc-name-zh {
	font-family: 'Source Han Serif','思源宋体 CN','思源宋体','Noto CJK',Serif;
	font-weight: 800;
	font-size: 3em;
	line-height: 1em;
	text-shadow: 0 0 4px #000;
	margin-bottom: 0.25em;
}
.aoc-names>.aoc-cv {line-height:1.25em;}
/*主立绘模块*/
.aoc-main-tabs-container {
	z-index: 1;/*ak-operator-complex will be defined static inline*/
}
  /*Clusterfuck the tabs system for "better styling"*/
.aoc-main-tabs-container .TabDivider {height: 0 !important;}
.aoc-main-tabs-container .TabLabel {
	background: #222;
	flex-direction: row !important;
}
.aoc-main-tabs-container .TabLabelText {padding: 0.25em 1em !important;}
.aoc-main-tabs-container .TabContentText a>img {user-select:none;-webkit-user-select:none;-moz-user-select:none;}
.aoc-main-tabs-container .TabContentText:not(.sabun-tabs) {padding-left: calc(45.982% - 347.857px);}
.aoc-main-tabs-container .TabContentText:not(.sabun-tabs)>a>img {
	height:700px !important;
	max-width:700px !important;
}
.aoc-main-tabs-container .sabun-tabs .Tabs {width: calc(100% - 270px);}
.aoc-main-tabs-container .sabun-tabs .TabContentText {padding-left: calc(37.5% - 198.75px);}
.aoc-main-tabs-container .sabun-tabs .TabContentText>a>img {
	height:666px !important;
	max-width:666px !important;
}
/*基本数据框*/
.aoc-data {
	display: grid;
	grid-template-columns: 4em minmax(8em,max-content);
	grid-template-rows: repeat(8, 1.5em);
	grid-template-areas:
		". ."
		". ."
		". ."
		". ."
		". ."
		". ."
		". ."
		". .";
	grid-gap: 4px 1em;
	background: rgba(0,0,0,0.2);
	border-radius: 4px;
	padding: 3px 5px;
	/*width: fit-content; not recognized, will define inline*/
}
.aoc-data>div {
	line-height: 1.5em;
}
.aoc-data>div:nth-child(odd) { font-weight:bold; }
/*职业-范围-标签*/
.aoc-prl {
	display: grid;
	grid-template-columns: 80px minmax(80px,max-content) minmax(80px,max-content);
	grid-template-rows: 30px minmax(50px,max-content);
	grid-gap: 4px;
	grid-template-areas:
	"professions range location"
	"professions range other-labels";
	text-align: center;
	min-width: 200px;
}
.aoc-prl>div {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(0,0,0,0.2);
	border-radius: 4px;
	overflow: hidden;
	line-height: 1.2em;
}
.aoc-prl>div>.aoc-prl-labels {
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 2px;
	font-size: 0.75em;
}
.aoc-prl>.aoc-professions {
	grid-area: professions;
	background-color: #444;
	display: grid;
	grid-template-areas: "." ".";
	grid-template-rows: auto 25px;
	overflow: hidden;
}
.aoc-profession {
	background:#000;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0 0 4px 4px;
}
.aoc-profession>img { 
	height: 50px;
	width: 50px;
}
.aoc-subprofession {
	width: 80px;
	height: 25px;
	padding: 2px;
	font-size: 0.75em;
}
.aoc-subprofession > img {
	user-select:none;-webkit-user-select:none;-moz-user-select:none;
	max-width: 20px;
	max-height: 20px;
	width: auto!important;
	height: auto!important;
	margin-right: 4px;
}
.aoc-range {
	grid-area: range;
	padding-bottom: calc(2px + 0.75em);
}
.aoc-location-label {grid-area: location;}
.aoc-other-labels {
	grid-area: other-labels;
	padding: 5px;
}
/*雷达图*/
.aoc-radar-container {
	z-index: 2;
	right: 0;
	top: 50px;
}
.aoc-radar-cat-text {color:#FFF;}
/*潜能-特性-天赋*/
.aoc-bottomright-box {
	z-index: 2;
	right:0;
	bottom:0;
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: auto auto;
	grid-gap: 4px;
	grid-template-areas:
		"potential"
		"characteristic"
		"talent";
	padding-right:0.5em;
}
.aoc-bottomright-box>div {
	max-width: 320px;
	background: rgba(0,0,0,0.2);
	border-radius: 4px;
	overflow: hidden;
	line-height: 1.2em;
	padding: 5px;
}
.aoc-bottomright-box .aoc-comp-title {
	font-weight: bold;
	margin-bottom: 0.5em;
}
.aoc-bottomright-box>.aoc-potential {
	grid-area: potential;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-rows: auto auto;
	grid-template-areas:
		"title title title title title"
		". . . . .";
}
.aoc-potential>.aoc-comp-title {grid-area: title;}
.aoc-potential>.aoc-potential-item {
	font-size: .75em;
	line-height: 1.2;
	text-align: center;
	display: grid;
	grid-template-columns: 25px auto;
	grid-template-rows: 100%;
	grid-template-areas: ". .";
}
.aoc-potential>.aoc-pot-item-na {
	font-size: inherit;
	opacity:.65;
}
.aoc-bottomright-box>.aoc-characteristic {grid-area: characteristic;}
.aoc-bottomright-box>.aoc-talent {grid-area: talent;}

/*hover styles*/
.ak-operator-complex .aoc-data:hover,
/*.ak-operator-complex .aoc-prl>div:not(.aoc-profession):hover,*/
.aoc-bottomright-box>div:hover {
	background: rgba(0,0,0,0.5);
}
.ak-operator-complex .aoc-data:hover .orangetext,
/*.ak-operator-complex .aoc-prl>div:not(.aoc-profession):hover,*/
.aoc-bottomright-box>div:hover .orangetext {
	color: orange;
}
.ak-operator-complex .aoc-data:hover .trusttext,
/*.ak-operator-complex .aoc-prl>div:not(.aoc-profession):hover,*/
.aoc-bottomright-box>div:hover .trusttext {
	color:#F88;
}
.ak-operator-complex .aoc-data:hover .redtext,
/*.ak-operator-complex .aoc-prl>div:not(.aoc-profession):hover,*/
.aoc-bottomright-box>div:hover .redtext {
	color:#F66;
}

/*下表格*/
/*skills*/
.aoc-skill-container {
	display: flex;
	flex-wrap: wrap;
}
.aoc-skill {
	flex: 0 0 100%;
	padding: 5px;
	display: grid;
	grid-template-areas: 'img-name activ-sp tab' 'img-name  desc tab';
	grid-template-rows: minmax(2em,auto) auto;
	grid-template-columns: 110px 1fr max-content;
	grid-gap: 0 5px;
}
.aoc-skill:not(:last-child) {
	border-bottom: solid 1px #a2a9b1;
}
.aoc-skill-img-name {
	grid-area: img-name;
	width: 110px;
	margin: auto 0;
}
.aoc-skill-img-name > img {
	margin: 0 15px;
}
.aoc-skill-img-name > .aoc-skill-name {
	color: #FFF;
	background: #666;
	margin: 4px auto 0 auto;
	padding: 3px 6px;
	min-width: 80px;
	/*width: -moz-fit-content;
	width: fit-content; not allowed, will define inline*/
	text-align: center;
	line-height: 1.1em;
}
.aoc-skill-activ-sp {
	grid-area: activ-sp;
	display: flex;
	flex-wrap: wrap;
}
.aoc-skill-activation {
	margin: auto 3px auto 0;
	flex: 0 1 auto;
}
.aoc-skill-activation > div {
	display: block;
	margin: 0 2px 2px 0;
}
.aoc-skill-sp {
	margin: auto 0;
	flex: 0 1 auto;
}
.aoc-skill-desc {
	grid-area: desc;
	margin: auto 0;
}

.aoc-skill-masterTabs {
	grid-area: tab;
	margin: auto;
}
/*mobile styling*/
@media only screen and (max-width: 650px ) {
	.aoc-skill {
		grid-template-areas: 'img-name activ-sp' 'img-name desc' 'img-name tab';
		grid-template-rows: minmax(2em,auto) auto auto;
		grid-template-columns: 90px auto;
	}
	.aoc-skill-img-name {width: 90px;}
	.aoc-skill-img-name > img {margin: 0 5px;}
	.aoc-skill-masterTabs {margin:0;}
}
@media only screen and (max-width: 500px ) {
	.aoc-fullwidth-only {display:none;}
	.aoc-scroll-wrapper {overflow-x:hidden;}
	.ak-operator-complex {
		width:100%;
		min-width: unset;
		min-height: 540px;
		overflow-x:hidden;
	}
	.aoc-main-tabs-container .TabLabel {
		width: 100%;
		overflow-x: auto;
		flex-wrap: nowrap !important;
	}
	.aoc-main-tabs-container .TabLabelText {padding: 0.1em 0.4em !important;}
	.aoc-main-tabs-container .TabContentText {
		padding-left: 0 !important;
		overflow: auto;
	}
	.aoc-main-tabs-container .TabContentText:not(.sabun-tabs)>a>img {
		height:500px !important;
		max-width:500px !important;
	}
	.aoc-main-tabs-container .sabun-tabs .Tabs {width:100%;}
	.aoc-main-tabs-container .sabun-tabs .TabContentText>a>img {
		height:432px !important;
		max-width:432px !important;
	}/*
	.aoc-mobile-alt {
		display: grid;
		grid-template-columns: 100%;
		grid-template-rows: auto auto auto auto;
		grid-gap: 0;
		grid-template-areas:
			"."
			"."
			"."
			".";
		color: #000;
		border: 1px solid #54595d;
		border-color: rgba(84,89,93,0.3);
	}
	.aoc-mobile-alt>div{
		padding: 0.2em;
		background: #f9f9f9;
		border-top: 0;
		border-left: 1px solid #54595d;
		border-right: 1px solid #54595d;
		border-bottom: 1px solid #54595d;
		border-color: rgba(84,89,93,0.3);
		border-radius: unset;
	}*/
	.aoc-mobile-alt {
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		border: 1px solid #54595d;
		border-color: rgba(84,89,93,0.3);
	}
	.aoc-mobile-alt>div {
		flex:0 1 100%;
		margin:0;
		padding: 0.2em;
		background: #f9f9f9;
		border-top: 0;
		border-left: 1px solid #54595d;
		border-right: 1px solid #54595d;
		border-bottom: 1px solid #54595d;
		border-color: rgba(84,89,93,0.3);
		border-radius: unset;
	}
	.aoc-mobile-alt>div:first-child{
		border-top: 1px solid #54595d;
		border-color: rgba(84,89,93,0.3);
	}
	.aoc-mobile-alt .aoc-radar-container {padding: 0.5em;}
	.aoc-mobile-alt .aoc-radar-outer {
		/*width:fit-content; not recognized, will define inline*/
		margin:auto;
	}
	.aoc-mobile-alt .aoc-radar-cat-text {color:#000;}
	.aoc-mobile-alt .aoc-comp-title {
		background: #eaecf0;
		font-weight: bold;
		text-align: center;
	}
}
/* [[Category:在模板名字空间下的CSS页面]] */
取自“https://moegirl.uk/index.php?title=Template:明日方舟干员/aoc.css&oldid=92848”