@charset "utf-8";

@font-face {

font-family: 'FOT-KurokaneStd-EB';

src:

local("FOT-Kurokane Std EB"),

local("KurokaneStd-EB"),

local("FOT-くろかね Std"),

url("./fonts/FOT-KurokaneStd-EB.woff2") format('woff2');

font-style: normal;

font-weight: normal;

}

@font-face {

font-family: 'zpix';

src:

local("Zpix"),

url("./fonts/zpix.woff2") format('woff2');

font-weight: normal;

font-style: normal;

}

@font-face {

font-family: 'Font Awesome Solid';

src:

local("FontAwesome"),

url("fonts/fa-solid-900.woff2") format("woff2");

font-style: normal;

font-weight: 900;

font-display: block;

}

@font-face {

font-family: 'Font Awesome Regular';

src:

local("FontAwesome"),

url("fonts/fa-regular-400.woff2") format("woff2");

font-style: normal;

font-weight: 900;

font-display: block;

}

@keyframes rotate-animate{

from {

transform: rotate(0deg);

}

to {

transform: rotate(360deg);

}

}

body{

--head-width: 100px;

--head-height: 100px;

--head-block--border-width: 4px;

--head-block-width: calc(var(--head-width) + var(--head-block--border-width) * 2);

--head-block-height: calc(var(--head-height) + var(--head-block--border-width) * 2);

--search-icon-unchecked: 0.4;

--font-family : "Microsoft Yahei","Microsoft JhengHei","Source Han Sans",Arial, Helvetica, sans-serif, "Malgun Gothic", "맑은 고딕", "Gulim", AppleGothic;

--icon-font-family : 'Font Awesome Solid', "Microsoft Yahei","Microsoft JhengHei","Source Han Sans",Arial, Helvetica, sans-serif, "Malgun Gothic", "맑은 고딕", "Gulim", AppleGothic;

--icon-regular-font-family : 'Font Awesome Regular', "Microsoft Yahei","Microsoft JhengHei","Source Han Sans",Arial, Helvetica, sans-serif, "Malgun Gothic", "맑은 고딕", "Gulim", AppleGothic;

--game-font-family : 'FOT-KurokaneStd-EB',"Microsoft Yahei","Microsoft JhengHei","Source Han Sans",Arial, Helvetica, sans-serif, "Malgun Gothic", "맑은 고딕", "Gulim", AppleGothic;

--char-border-width: 2px;

--awoken-width: 32px;

--awoken-height: 32px;

--badge-width: 102px;

--badge-height: 76px;

font-family: var(--font-family);

background-color: white;

}

details>summary {

cursor: pointer;

}

details>summary:hover {

background-color: #00000044;

}

.control-box,

.formation-box

{

--margin: 10px;

}

.noscript {

color: red;

font-size: 2em;

}

.display-none {

display:none !important;

}

.disabled {

cursor: not-allowed;

filter: grayscale(0.75);

pointer-events: none;

opacity: 0.5;

}

@keyframes hightlight-animate{

from {

outline-offset: 0;

outline-color: red;

}

to {

outline-offset: 5px;

outline-color: yellow;

}

}

.hightlight {

border-radius: 5px;

outline-style: solid;

outline-width: 5px;

outline-offset: 2px;

outline-color: yellow;

z-index: 2;

animation-name: hightlight-animate;

animation-duration: 0.2s;

animation-timing-function: linear;

animation-direction: alternate-reverse;

animation-iteration-count: infinite;

}

.monster.hightlight {

animation-duration: 0.5s;

}

/*控制框*/

.control-box :where(

label,

button,

a,

)::before {

font-family: var(--icon-font-family);

margin-right: 3px;

}

.control-box>div

{

margin-bottom: 2px;

}

label[for="languages"]::before{

content: "\f1ab";

}

label[for="languages"]::after{

content: "Lanuage:";

}

label[for="datasource"]::before{

content: "\f11b";

}

#datasource-updatetime::before{

content: "\f073";

}

#help-link {

cursor: help;

}

#help-link::before{

content: "\f05a";

}

#help-link::after{

content: "Help & Tips";

}

#feedback-link::before{

content: "\f4ad";

}

#feedback-link::after{

content: "Feedback";

}

#btn-clear-data::before{

content: "\f2ed";

}

#btn-player-data::before,

#player-data-frame .player-box-title::before

{

content: "\f2bd";

}

#player-number {

display: inline-flex;

}

#player-number input {

display: none;

}

#player-number .horizontally-radio-list label {

padding: 0 3px;

}

label[for="player-number-1"]::before{

content: "\f183";

}

label[for="player-number-2"]::before{

content: "\e068";

}

label[for="player-number-3"]::before{

content: "\e591";

}

#btn-swap-team::before{

content: "\f2f1";

}

.solo #btn-swap-team {

display: none;

}

#draw-screenshot::before{

content: "\f03e";

}

#btn-qrcode::before {

content: "\f029";

}

label[for="screenshot-transparent"] {

margin-right: 10px;

}

#rich-text-tools {

position: sticky;

left: 0;

bottom: 0;

box-sizing: border-box;

width: 100%;

background-color: rgba(200,200,200,0.5);

backdrop-filter: blur(3px);

padding: 5px;

user-select: none; /*让内容不可选中*/

}

#rich-text-tools button

{

min-width: 50px;

}

#rich-text-tools #rich-text-tools-contents {

margin-bottom: 3px;

}

#rich-text-tools button,

#rich-text-tools input[type="color"]

{

height: 40px;

vertical-align: middle;

text-align: center;

display: inline-flex;

align-items: center;

justify-content: center;

}

#rich-text-tools button::before {

font-family: var(--icon-font-family);

vertical-align: middle;

}

:where(

#insert-card-avatar,

#insert-type-icon,

#insert-awoken-icon,

#insert-latent-icon,

#insert-orb-icon

)::before {

display: inline-block;

content: "";

background-repeat: no-repeat;

}

label[for="siwtch-code-mode"] {

vertical-align: middle;

margin: 0 0 0 5px;

}

label[for="siwtch-code-mode"]::after {

font-size: 1.7em;

font-family: var(--icon-font-family);

content: "\f121";

vertical-align: middle;

}

#set-font-color::before {

content: "A";

font-size: 1.7em;

}

#color-chooser {

width: 30px;

}

#insert-card-avatar .monster

{

transform: scale(calc(32 / 100));

margin: calc(-100px * (1 - (32 / 100)) / 2);

}

#insert-type-icon::before {

width: 32px;

height: 32px;

background-image: url(images/type.png);

background-position-y: calc(-32px * 4);

}

#insert-awoken-icon::before {

width: 32px;

height: 32px;

background-image: url(images/awoken.png);

background-position-y: calc(-32px * 43);

}

#insert-latent-icon::before {

width: 32px;

height: 32px;

background-color: #4499EE;

border: 2px ridge #CCEEFF;

box-shadow: inset 0 1px 0 0 rgba(0,0,0,0.5);

border-radius: 5px;

box-sizing: border-box;

background-image: url(images/icon-latent.png);

background-position-x: -2px;

background-position-y: calc(-32px * 11 - 2px);

}

#insert-orb-icon::before {

width: 36px;

height: 36px;

background-image: url(images/icon-orbs.png);

transform: scale(calc(32 / 36));

margin: calc(-36px * (1 - (32 / 36)) / 2);

}

#rich-text-tools>ul icon {

cursor: grab;

}

#rich-text-tools>ul {

margin-top: 10px;

display: grid;

grid-template-columns: repeat(auto-fill, 32px);

grid-auto-rows: 32px;

grid-gap: 4px;

}

#rich-text-tools>.orb-ul{

grid-template-columns: repeat(auto-fill, 36px);

grid-auto-rows: 36px;

}

#hide-rich-text-tools {

float: right;

}

#hide-rich-text-tools::before {

content: "\f00d";

font-size: 1.7em;

}

.rich-text icon{

vertical-align: middle;

}

.title-code,

.title-display

{

font-size: 2em;

font-weight: bold;

}

.title-display br{ /*隐藏所有换行*/

display: none;

}

.detail-code,

.detail-display

{

min-height: 1.5em;

font-size: 1.5em;

}

.title-code,

.detail-code,

.title-display,

.detail-display

{

font-family: var(--font-family);

width:100%;

border: none;

background: none;

box-sizing: border-box;

padding: 1px;

margin: 0;

white-space: break-spaces;

}

:where(

.title-display,

.detail-display,

):empty::before{

color: grey;

content: attr(placeholder);

pointer-events: none; /*打开编辑窗后禁止后方有鼠标反应*/

width: 0px;

display: inline-block;

overflow-wrap: normal;

word-break: keep-all;

white-space:nowrap;

}

body.guide-mod .control-box>div.status

{

display: block;

}

.formation-box:not(.edit-code) :where(

.title-code,

.detail-code,

){

display: none;

}

.edit-code :where(

.title-display,

.detail-display,

){

display: none;

}

.switch-ipt+label{

margin-right: 3px;

}

input[type="checkbox"].switch-ipt {

display: none;

}

input[type="checkbox"].switch-ipt+label{

display: inline-block;

}

input[type="checkbox"].switch-ipt+label::after{

vertical-align: middle;

}

input[type="checkbox"].switch-ipt+label::before{

content: "";

vertical-align: middle;

display: inline-block;

width: 2em;

height: 1.1em;

border-radius: 0.5em;

background-image: radial-gradient(white 40%, black 50%, transparent 55%);

background-size: 1.1em 1.1em;

background-repeat: no-repeat;

transition: .3s ease-out;

background-color: #888;

background-position: left;

}

input[type="checkbox"].switch-ipt:checked+label::before{

background-color: #0ae;

background-position: right;

}

input[type="checkbox"].switch-ipt+label:hover:before{

box-shadow: inset white 0 0 2px, black 0 0 2px;

}

label[for$=and-or]::after{

content: "OR";

}

input:checked+label[for$=and-or]::after{

content: "AND";

}

#change-swap-to-copy+label[for="change-swap-to-copy"] {

cursor: move;

}

#change-swap-to-copy:checked+label[for="change-swap-to-copy"] {

cursor: copy;

}

.status{

line-height: 16px;

background-color: pink;

}

.status:empty{

display: none;

}

/*状态栏不为空时*/

.status:not(:empty)::before {

content: "";

display: inline-block;

width: 16px;

height: 16px;

border: 4px SteelBlue dotted;

border-radius: 50%;

animation: rotate-animate 5s infinite linear;

vertical-align: middle;

}

ul{

margin: 0;

padding: 0;

list-style: none;

}

/*队伍的整个盒子*/

.formation-box{

width: calc(var(--head-block-width) * 6);

min-width: calc(var(--head-block-width) * 6);

}

body.block-width-7 .formation-box{

width: calc(var(--head-block-width) * 7);

min-width: calc(var(--head-block-width) * 7);

}

/*电脑宽屏使用*/

@media (min-width: 1310px) {

body:not(.side-mode) .formation-box{

width: 100% !important;

min-width: unset;

}

body:not(.side-mode) .team-bigbox {

display: grid;

column-fill: auto;

column-count: 2;

grid-template-columns: min-content auto;

grid-auto-rows: min-content;

grid-auto-flow: column dense;

gap: 0 10px;

}

body:not(.side-mode) .team-bigbox :where(

.team-total-info,

.team-box-name,

.team-member-types,

.team-member-awoken,

.team-assist-awoken,

.team-ability,

) {

grid-column: 1;

}

body:not(.side-mode) .team-box-name {

grid-row: span 3;

}

body:not(.side-mode) .team-bigbox :where(

.team-total-info-count,

.team-awoken-effect,

.team-awoken,

) {

grid-column: 2;

}

body:not(.side-mode) .team-awoken-effect {

grid-row: span 3;

}

body:not(.side-mode) .team-awoken {

grid-row: span 3;

}

body.side-mode {

display: grid;

column-fill: auto;

column-count: 2;

grid-template-columns: min-content auto;

grid-auto-rows: min-content;

grid-auto-flow: column dense;

}

body.side-mode>*:not(.formation-box,.edit-box) {

grid-column: 1 / 3;

}

body.side-mode>.formation-box {

grid-column: 1;

}

body.side-mode>.edit-box {

position: inherit;

grid-column: 2;

}

body.side-mode #rich-text-tools {

z-index: 6;

}

body.side-mode .edit-box{

background-color: rgb(102, 73, 50);

backdrop-filter: unset;

}

body.side-mode .edit-box::backdrop{

filter: unset;

}

}

/*弹出窗口相关*/

.dialog {

color: white;

padding: 5px;

font-family: var(--game-font-family);

text-shadow: black 2px 2px 0;

background-image: linear-gradient(to bottom,#788321d0,#3E4D14d0);

background-color: unset;

box-shadow: black 2px 0px 1px,black 0px 2px 1px,black -2px 0px 1px,black 0px -2px 1px;

border: 2px ridge #D1D398;

border-radius: 6px;

backdrop-filter: blur(3px);

}

.dialog {

background-color: unset;

}

/*模态框背景*/

.dialog::backdrop {

background-color: rgba(0,0,0,0.8);

}

.dialog .dialog-title

{

font-size: 20px;

line-height: 20px;

text-align: center;

margin-bottom: 5px;

}

/*.dialog .dialog-content .additional-string::before

{

content: "其他語言";

}*/

.dialog .dialog-control

{

text-align: center;

margin-top:10px;

}

.brown-button

{

display: inline-flex;

align-items: center;

align-content: center;

justify-items: center;

justify-content: center;

box-sizing: border-box;

min-width: 100px;

padding: 3px;

font-size: 1.3em;

line-height: 1.3em;

color: white;

font-family: var(--game-font-family);

text-shadow: black 2px 2px 0;

cursor: pointer;

transition: transform 0.1s;

background-image: url(images/slate.svg), linear-gradient(to bottom,#956A42,#956A42), linear-gradient(to bottom,#C38E5F,#2F2008);

background-clip: padding-box,padding-box, border-box;

background-origin: padding-box,padding-box, border-box;

background-size: cover, auto, auto;

border-color: transparent;

border-style: solid;

border-width: 3px;

border-radius: 5px;

}

.brown-button:hover {

color: lightgreen;

}

.brown-button:active

{

transform: scale(1.1);

}

/*

#dialog-search-string .dialog-title::before

{

content: "以字符串搜索";

}

.dialog-close::before

{

content: "关闭";

}

*/

#dialog-show-any-string {

width: 100%;

}

#dialog-show-any-string .dialog-content ul li {

display: grid;

gap: 5px;

grid-template-columns: auto 45px;

}

#dialog-search-string

{

width: 350px;

top: 0;

z-index: 2;

}

.dialog .dialog-content :where(.original-string, .additional-string) li {

display: grid;

gap: 5px;

margin-bottom: 5px;

}

.dialog .dialog-content .original-string li {

grid-template-columns: auto 45px 45px;

}

.dialog .dialog-content .additional-string li {

grid-template-columns: auto 45px;

}

.dialog .dialog-content .additional-string

{

border-top: 2px solid white;

margin-top: 5px;

}

.dialog .string-copy,

.dialog .string-search

{

box-sizing: border-box;

cursor: pointer;

background-color: #994433;

border: 2px solid #FFCC88;

box-shadow: black 1px 0 1px,black -1px 0 1px,black 0 -1px 1px,black 0 3px 2px;

border-radius: 5px;

padding: 0;

}

.dialog .string-copy::before {

content: "📋";

}

.dialog .string-search::before {

content: "🔍";

}

.dialog .string-value

{

box-sizing: border-box;

}

/*单个怪物*/

.monster{

font-family: var(--game-font-family);

width: var(--head-width);

height: var(--head-height);

display: block;

background-repeat: no-repeat;

position: relative;

border-radius: 5px;

box-sizing: border-box;

text-decoration:none;

}

.monster.null,.monster.delay,

.null .attrs .attr,.delay .attrs .attr

{

box-sizing: border-box;

background-image: none !important;

}

.monster.null{

background-color: rgba(230,230,230,0.5);

border: 3px grey dashed;

}

.monster.delay{

background-color: yellow;

box-shadow: inset orange 0 0 7px;

border: 3px black solid;

}

.monster.delay::before{

display: flex;

justify-content: center;

align-items: center;

width: 100%;

height: 100%;

color: black;

font-size: 30px;

text-align: center;

font-weight: bold;

/*content: "应 对\A威 吓";*/

font-family: var(--font-family);

white-space: pre-wrap;

}

/*怪物属性*/

.monster .attrs {

position:absolute;

left:0;top:0;

width: 100px;

height: 100px;

}

.monster .attrs .attr{

position:absolute;

left:0;top:0;

width: 100%;

height: 100%;

background-repeat: no-repeat;

background-image: url(images/CARDFRAME2.png);

background-position: 100px 100px; /*默认都不显示*/

}

/*改变属性的，生成一个淡绿色圈*/

.monster .attrs .attr.changed-sub-attr::before {

content: "";

right: 3px;

bottom: 5px;

width: 22px;

height: 22px;

box-sizing: border-box;

border: 1px solid lightgreen;

border-radius: 50%;

box-shadow: 0 0 3px lightgreen,0 0 3px lightgreen,0 0 3px lightgreen;

display: block;

position: absolute;

}

.member-types .append-type::before {

font-family: var(--game-font-family);

content: "+";

font-size: 15px;

line-height: 15px;

vertical-align: top;

color: yellow;

text-shadow: black 0 0 1px,black 0 0 2px, black 2px 2px 0;

}

.member-types .append-type+.append-type::before{

display: none;

}

.member-types .append-type .type-icon{

background-color: lightgreen;

box-shadow: 1px 1px 3px lightgreen,1px 1px 3px lightgreen,1px 1px 3px lightgreen;

}

/*怪物-加值*/

.monster .plus,

.row-mon-plus .plus-value{

color: yellow;

}

.monster .plus{

font-size: 17px;

line-height: 17px;

position: absolute;

left:10px;

display: flex;

flex-direction: column;

}

.monster .plus>* {

display: grid;

}

.monster .plus[class*="297"] :where(

.hp,

.atk,

.rcv

){ /*当是297时隐藏3维*/

display:none;

}

.monster .plus:not([class*="297"]) .sum{

display:none;

}

.monster .plus>*::before,

.monster .plus.gt297>*::after {

content: "+" attr(data-value);

left: 0;

top: 0;

grid-row: 1;

grid-column: 1;

}

.monster .plus>*::before {

-webkit-text-stroke: 3px black;

paint-order: stroke;

}

.monster .plus.gt297>*::before {

color: black;

}

.monster .plus.gt297>*::after,

.row-mon-plus .plus-value.gt297

{

background-image: linear-gradient(#FF7711 25%, #FFEE33 80%);

color: transparent;

-webkit-background-clip: text;

background-clip: text;

}

.row-mon-plus .plus-value.gt297 {

text-shadow: none;

}

.monster.null>div,

.monster.delay>div

{

display:none !important;

}

/*怪物-觉醒*/

.awoken-count-num

{

font-family: var(--game-font-family);

font-size: 20px;

line-height: 28px;

color: yellow;

text-shadow: black 0 0 4px;

text-align: center;

background-image: url(images/awoken-count-bg.png);

background-repeat: no-repeat;

width: 34px;

height: 38px;

}

.monster .awoken-count-num{

position: absolute;

top: -4px;

right: 0;

transform: scale(0.75) translateX(4px);

}

/*显示怪物觉醒的数字*/

.awoken-count-num::before

{

content: attr(data-value);

}

.awoken-count-num[data-value="0"]

{

display: none;

}

.awoken-count-num.full-awoken

{

display: inline-block;

}

.awoken-count-num.full-awoken::before

{

content: "★";

}

.allowable-assist .awoken-count-num.full-awoken

{

text-shadow: none;

background-position-y: -38px;

}

.allowable-assist .awoken-count-num.full-awoken::before

{

display: none;

}

/*武器*/

.monster.wepon .awoken-count-num.full-awoken{

transform: scale(0.79) translateY(4px);

width:32px;height:32px;

background-image: url(images/awoken.png);

background-position-x: 0;

background-position-y: -1568px;

}

/*怪物-超觉醒*/

.monster .super-awoken{

position: absolute;

right:0;

top: 25px;

transform: scale(0.75) translateX(4px);

}

/*怪物-等级*/

.monster .level{

--level-color: white;

font-size: 15px;

line-height: 17px;

color: var(--level-color);

height: 17px;

position: absolute;

left: 5px;

bottom: 0;

vertical-align: top;

-webkit-text-stroke: 2px black;

paint-order: stroke;

}

.monster .level::before{

content: "Lv.";

font-size: 0.75em;

}

.monster .level::after

{

content: attr(data-value);

}

.monster .level.max,

.level-value.max

{

--level-color: #FEFF85;

}

.monster .level[data-level-range="110"],

.level-value[data-level-range="110"]

{

--level-color: #85BCFF;

}

.monster .level[data-level-range="120"],

.level-value[data-level-range="120"]

{

--level-color: #19F897;

}

.monster .level[data-level-range="error"],

.level-value[data-level-range="error"]

{

--level-color: red;

}

.row-mon-level .level-value {

color: var(--level-color);

}

/**/

.monster .id{

display: block;

color: white;

font-family: var(--font-family);

font-size: 15px;

font-weight: 600;

line-height: 17px;

height: 17px;

position: absolute;

left: 5px;

bottom: 15px;

-webkit-text-stroke: 2px black;

paint-order: stroke;

}

.monster .id::before{

content: "#";

font-size: 0.75em;

}

.monster .skill-cd{

text-align: right;

}

.monster .skill-cd::before,

.monster .skill-cd::after

{

display: inline-block;

font-size: 0.75em;

}

.monster .skill-cd::before{

content:"CD";

}

.monster .skill-cd.loop-skill::after{

content:"🔁";

}

.monster .skill-cd {

font-size: 13px;

line-height: 13px;

color:white;

position: absolute;

right:0;

bottom:0;

-webkit-text-stroke: 2px black;

paint-order: stroke;

}

/*显示怪物星级*/

.monster .rarity::before{

position: absolute;

left: 3px;

top: 10px;

font-size: 22px;

content: attr(data-value)"★";

color: yellow;

-webkit-text-stroke: 1px black;

paint-order: stroke;

text-shadow: black 1px 1px 1px;

}

body:not(.show-card-id) .monster .id, /*卡片id*/

body:not(.show-card-rarity) .monster .rarity, /*卡片稀有度*/

body:not(.show-member-level) .monster .level, /*队员等级*/

body:not(.show-member-plus-point) .monster .plus, /*队员加值*/

body:not(.show-member-awoken-count) .monster .awoken-count-num, /*队员觉醒数量*/

body:not(.show-member-skill-cd) .monster .skill-cd.max-skill, /*队员CD，不满时还是显示*/

body:not(.show-member-ability) .team-ability, /*队员三维*/

body:not(.show-member-types) .team-member-types, /*队员类型*/

body:not(.show-member-awoken) :where(.team-assist-awoken , .team-member-awoken), /*武器觉醒、队员觉醒列表*/

body:not(.show-team-awoken-count) .team-awoken, /*队伍觉醒统计*/

body:not(.show-team-total-info) :where(.tIf-total-hp, .tIf-effect),

body:not(.show-team-attrtype-count) .team-total-info-count, /*稀有度、属性与类型计数*/

body:not(.show-team-awoken-effect) .team-awoken-effect, /*队伍觉醒效果统计*/

body:not(.show-meter) meter, /*显示计量条*/

body.show-meter meter+span /*勾选显示计量条则隐藏文字*/

{

display: none !important;

}

.config-display-list .in-card{

display: grid;

grid-template-columns: 75px auto;

}