/*主模組內全局樣式*/
.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頁面]] */