You can not select more than 25 topics Topics must start with a chinese character,a letter or number, can include dashes ('-') and can be up to 35 characters long.

style.css 28 kB

7 years ago
6 years ago
7 years ago
7 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
6 years ago
6 years ago
6 years ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323
  1. @charset "utf-8";
  2. @font-face {
  3. font-family: 'FOT-KurokaneStd-EB';
  4. font-style: normal;
  5. /*font-weight: 400;*/
  6. src: url("fonts/FOT-KurokaneStd-EB.woff2") format('woff2'),
  7. url("fonts/FOT-KurokaneStd-EB.woff") format('woff'),
  8. url("fonts/FOT-KurokaneStd-EB.ttf") format('truetype'),
  9. url("fonts/FOT-KurokaneStd-EB.eot") format('embedded-opentype'),
  10. url("fonts/FOT-KurokaneStd-EB.svg") format('svg');
  11. }
  12. @keyframes loading-animate{
  13. from {
  14. transform: rotate(0deg);
  15. }
  16. to {
  17. transform: rotate(3600deg);
  18. }
  19. }
  20. body{
  21. font-family: "Microsoft Yahei","Source Han Sans",Arial, Helvetica, sans-serif, "Malgun Gothic", "맑은 고딕", "Gulim", AppleGothic;
  22. --head-block-width: 108px;
  23. --head-block-height: 108px;
  24. --search-icon-unchecked: 0.4;
  25. --team-1-bgcolor : pink;
  26. --team-2-bgcolor : lightblue;
  27. --team-3-bgcolor : lightgreen;
  28. --team-1-color : red;
  29. --team-2-color : blue;
  30. --team-3-color : green;
  31. }
  32. .display-none{
  33. display:none !important;
  34. }
  35. .disabled{
  36. cursor: not-allowed;
  37. pointer-events: none;
  38. opacity: 0.5;
  39. }
  40. .help-link::before{
  41. content: "Help & Tips";
  42. }
  43. .title,
  44. .title-display
  45. {
  46. font-size: 2em;
  47. font-weight: bold;
  48. }
  49. .detail,
  50. .detail-display
  51. {
  52. min-height: 1.5em;
  53. font-size: 1.5em;
  54. }
  55. .title,
  56. .detail,
  57. .title-display,
  58. .detail-display
  59. {
  60. font-family: "Microsoft Yahei","Source Han Sans",Arial, Helvetica, sans-serif, "Malgun Gothic", "맑은 고딕", "Gulim", AppleGothic;
  61. width:100%;
  62. border: none;
  63. background: none;
  64. box-sizing: border-box;
  65. padding: 1px;
  66. margin: 0;
  67. }
  68. .formation-box .title:focus,
  69. .formation-box .detail:focus
  70. {
  71. border: black solid 1px;;
  72. background-color: #eee;
  73. padding: 0;
  74. }
  75. .formation-box .title,
  76. .formation-box .detail
  77. {
  78. display: none;
  79. }
  80. .formation-box .edit .title,
  81. .formation-box .edit .detail
  82. {
  83. display: block;
  84. }
  85. .formation-box .edit .title-display,
  86. .formation-box .edit .detail-display
  87. {
  88. display: none;
  89. }
  90. .config-checkbox-ipt{
  91. display:none;
  92. }
  93. .config-checkbox-lbl .config-checkbox-lbl-cicle{
  94. width: 28px;
  95. height: 12px;
  96. display: inline-block;
  97. position: relative;
  98. background-color: #8884;
  99. border-radius: 16px;
  100. margin-right: 5px;
  101. }
  102. .config-checkbox-lbl .config-checkbox-lbl-cicle::before{
  103. content:"";
  104. width: 20px;
  105. height: 20px;
  106. position: absolute;
  107. transition: .3s ease-out;
  108. background-color: #c6c6c6;
  109. box-shadow: 0 2px 4px 0 #0003;
  110. border-radius: 50%;
  111. left: -4px;
  112. top: -4px;
  113. }
  114. .config-checkbox-ipt:checked+.config-checkbox-lbl .config-checkbox-lbl-cicle {
  115. background: rgba(0,160,216,0.8);
  116. }
  117. .config-checkbox-ipt:checked+.config-checkbox-lbl .config-checkbox-lbl-cicle::before {
  118. background: #00A0D8;
  119. box-shadow: 0 2px 4px 0 rgba(0,160,216,0.4);
  120. left: calc(100% - 16px);
  121. }
  122. .config-checkbox-lbl{
  123. cursor: pointer;
  124. line-height: 25px;
  125. margin-right: 20px;
  126. }
  127. .status{
  128. line-height: 16px;
  129. }
  130. /*.status.loading-mon-info .text::before{
  131. content: "正在加载怪物数据";
  132. }*/
  133. .status.loading-mon-info .icon,
  134. .status.loading-skill-info .icon,
  135. .status.prepare-cauture .icon
  136. {
  137. display: inline-block;
  138. width: 16px;
  139. height: 16px;
  140. border: 4px SteelBlue dotted;
  141. border-radius: 50%;
  142. animation: loading-animate 50s infinite linear;
  143. vertical-align: middle;
  144. }
  145. ul{
  146. margin: 0;
  147. padding: 0;
  148. list-style: none;
  149. }
  150. /*队伍的整个盒子*/
  151. .formation-box{
  152. width: 648px;
  153. min-width: 648px;
  154. }
  155. /*单个怪物*/
  156. .monster{
  157. font-family: 'FOT-KurokaneStd-EB',"Microsoft Yahei","Source Han Sans",Arial, Helvetica, sans-serif, "Malgun Gothic", "맑은 고딕", "Gulim", AppleGothic;
  158. width: 100px;
  159. height: 100px;
  160. margin: 0;
  161. display: block;
  162. background-repeat: no-repeat;
  163. position: relative;
  164. cursor: pointer;
  165. border-radius: 5px;
  166. }
  167. .null .monster,.delay .monster,
  168. .null .property,.delay .property,
  169. .null .subproperty,.delay .subproperty
  170. {
  171. box-sizing: border-box;
  172. background-image: none !important;
  173. }
  174. .null .monster{
  175. background-color: rgba(230,230,230,0.5);
  176. border: 3px grey dashed;
  177. }
  178. .edit-box .null .monster{
  179. background-color: #653;
  180. border: none;
  181. box-shadow: inset black 0 0 7px;
  182. }
  183. .member{
  184. vertical-align: top;
  185. }
  186. .delay .monster{
  187. background-color: yellow;
  188. box-shadow: inset orange 0 0 7px;
  189. border: 3px black solid;
  190. }
  191. .delay .monster::before{
  192. width: 94px;
  193. height: 94px;
  194. color: black;
  195. font-size: 30px;
  196. line-height: 47px;
  197. text-align: center;
  198. font-weight: bold;
  199. /*content: "应 对\A威 吓";*/
  200. font-family: "Microsoft Yahei","Source Han Sans",Arial, Helvetica, sans-serif, "Malgun Gothic", "맑은 고딕", "Gulim", AppleGothic;
  201. white-space: pre-wrap;
  202. display: inline-block;
  203. }
  204. /*怪物属性*/
  205. .property,.subproperty{
  206. position:absolute;
  207. left:0;top:0;
  208. width: 100px;
  209. height: 100px;
  210. background-repeat: no-repeat;
  211. background-image: url(images/CARDFRAME2.PNG);
  212. background-position: 100px 100px; /*默认都不显示*/
  213. }
  214. /*怪物-加值*/
  215. .monster .plus{
  216. color: yellow;
  217. font-size: 17px;
  218. line-height: 17px;
  219. text-shadow: black 0 0 1px,black 0 0 2px, black 2px 2px 0;
  220. position: absolute;
  221. left:10px;
  222. }
  223. .null .monster>div,.delay .monster>div{
  224. display:none !important;
  225. }
  226. .monster .plus .hp::before,
  227. .monster .plus .atk::before,
  228. .monster .plus .rcv::before,
  229. .monster .plus ._297::before{
  230. content: "+";
  231. }
  232. .monster .plus ._297{ /*297默认不显示*/
  233. display:none;
  234. }
  235. .monster .plus.has297 .hp,.monster .plus.zero .hp,
  236. .monster .plus.has297 .atk,.monster .plus.zero .atk,
  237. .monster .plus.has297 .rcv,.monster .plus.zero .rcv{ /*当是297时隐藏3维*/
  238. display:none;
  239. }
  240. .monster .plus.has297 ._297{ /*当是297时显示297*/
  241. display:block;
  242. }
  243. /*怪物-觉醒*/
  244. .monster .awoken-count{
  245. color: yellow;
  246. text-shadow: black 0 0 4px;
  247. text-align: center;
  248. background-image: url(images/awoken-count-bg.png);
  249. background-repeat: no-repeat;
  250. width: 34px;
  251. height: 38px;
  252. position: absolute;
  253. top: -4px;
  254. right: 0;
  255. transform: scale(0.75) translateX(4px);
  256. }
  257. .monster .awoken-count,
  258. .monster .awoken-count.full-awoken::before{
  259. font-size: 20px;
  260. line-height: 28px;
  261. }
  262. .monster .awoken-count.full-awoken{
  263. font-size: 0;
  264. }
  265. .monster .awoken-count.full-awoken::before{
  266. content: "★";
  267. }
  268. .monster .awoken-count.allowable-assist.full-awoken::before{
  269. content: none;
  270. }
  271. .monster .awoken-count.allowable-assist{
  272. font-size: 0;
  273. text-shadow: none;
  274. background-position: 0 -38px;
  275. }
  276. /*武器*/
  277. .monster .awoken-count.allowable-assist.wepon{
  278. transform: scale(0.80) translateY(4px);
  279. width:32px;height:32px;
  280. background-image: url(images/awoken.png);
  281. background-position-x: 0;
  282. background-position-y: -1568px;
  283. }
  284. /*怪物-超觉醒*/
  285. .monster .super-awoken{
  286. position: absolute;
  287. right:0;
  288. top: 25px;
  289. transform: scale(0.75) translateX(4px);
  290. }
  291. /*怪物-等级*/
  292. .monster .level{
  293. color: white;
  294. height: 17px;
  295. text-shadow: black 0 0 2px, black 2px 2px 0;
  296. position: absolute;
  297. left: 5px;
  298. bottom: 0;
  299. vertical-align: top;
  300. }
  301. .monster .level,.monster .level.max::before{
  302. font-size: 15px;
  303. line-height: 17px;
  304. }
  305. .monster .level.max{
  306. font-size: 0;
  307. }
  308. .monster .level._110{
  309. color: lightskyblue;
  310. }
  311. /*.monster .level::before{
  312. content: "Lv.";
  313. }.monster .level.max::before{
  314. content: "Lv.最大";
  315. }*/
  316. .monster .id{
  317. display: block;
  318. color: white;
  319. font-family: "Microsoft Yahei","Source Han Sans",Arial, Helvetica, sans-serif, "Malgun Gothic", "맑은 고딕", "Gulim", AppleGothic;
  320. font-size: 15px;
  321. line-height: 17px;
  322. height: 17px;
  323. text-shadow: black 0px 0px 2px,black -1px -1px 1px,black 1px 1px 1px;
  324. position: absolute;
  325. left: 5px;
  326. bottom: 15px;
  327. }
  328. .not-show-mon-id .monster .id{
  329. display: none;
  330. }
  331. .monster .id::before{
  332. font-size: 12px;
  333. }
  334. /*.monster .id::before{
  335. content: "No.";
  336. }*/
  337. .monster .skill::before{
  338. content:"CD";
  339. font-size: 10px;
  340. }
  341. .monster .skill{
  342. font-size: 13px;
  343. line-height: 13px;
  344. color:white;
  345. text-shadow: black 0 0 1px,black 0 0 2px, black 2px 2px 0;
  346. position: absolute;
  347. right:0;
  348. bottom:0;
  349. }
  350. .monster .skill.max-skill{
  351. display: none;
  352. }
  353. .show-mon-skill-cd .monster .skill.max-skill{
  354. display: block;
  355. }
  356. /*辅助和队伍的每一只框架*/
  357. .member, .acquisitus-awoken-icon{
  358. display: inline-block;
  359. position: relative;
  360. width: var(--head-block-width);
  361. }
  362. .formation-box .monster{
  363. margin: 4px; /*留给队长边框的*/
  364. }
  365. .team-assist, .team-members,.team-badge{
  366. display: inline-block;
  367. }
  368. /* 徽章,平时都隐藏 */
  369. .badge-bg{
  370. display: none;
  371. cursor: pointer;
  372. }
  373. .badge-radio{
  374. display: none;
  375. }
  376. /* 显示所有徽章时则打开 */
  377. .show-all-badges .badge-bg{
  378. display: inline-block;
  379. }
  380. /* 选中的徽章平时也打开 */
  381. .team-badge .badge-radio:checked+label{
  382. display: inline-block;
  383. }
  384. /*队伍的背景色*/
  385. .team-1 .team-members,
  386. .team-1 .team-latents,
  387. .team-1 .team-box-name::before,
  388. .team-1 .team-box-name::after
  389. {
  390. background-color: var(--team-1-bgcolor);
  391. }
  392. .team-2 .team-members,
  393. .team-2 .team-latents,
  394. .team-2 .team-box-name::before,
  395. .team-2 .team-box-name::after
  396. {
  397. background-color: var(--team-2-bgcolor);
  398. }
  399. .team-3 .team-members,
  400. .team-3 .team-latents,
  401. .team-3 .team-box-name::before,
  402. .team-3 .team-box-name::after
  403. {
  404. background-color: var(--team-3-bgcolor);
  405. }
  406. .team-bigbox{
  407. position: relative;
  408. font-size:0;
  409. margin-bottom:15px;
  410. }
  411. .team-bigbox:last-of-type{
  412. margin-bottom:0;
  413. }
  414. /*队伍A、B的文字*/
  415. .team-box-name::after,
  416. .team-box-name::before
  417. {
  418. font-size: 30px;
  419. font-weight: bold;
  420. text-align: center;
  421. line-height: 54px;
  422. white-space: pre-wrap;
  423. display: none;
  424. width: var(--head-block-width);
  425. height: var(--head-block-height);
  426. }
  427. .show-team-name-left .team-box-name::before{
  428. display: inline-block;
  429. }
  430. .show-team-name-right .team-box-name::after{
  431. display: inline-block;
  432. }
  433. .reverse-member-assist .team-box-name::after,
  434. .reverse-member-assist .team-box-name::before
  435. {
  436. vertical-align:top;
  437. }
  438. .team-1 .team-box-name::after,
  439. .team-1 .team-box-name::before,
  440. .team-1 .team-assist .member::after,
  441. .team-1 .team-assist .member::before
  442. {
  443. color: var(--team-1-color);
  444. }
  445. .team-2 .team-box-name::after,
  446. .team-2 .team-box-name::before,
  447. .team-2 .team-assist .member::after,
  448. .team-2 .team-assist .member::before
  449. {
  450. color: var(--team-2-color);
  451. /*vertical-align:top;*/
  452. }
  453. .team-3 .team-box-name::after,
  454. .team-3 .team-box-name::before,
  455. .team-3 .team-assist .member::after,
  456. .team-3 .team-assist .member::before
  457. {
  458. color: var(--team-3-color);
  459. }
  460. .team-box{
  461. display: inline-block;
  462. vertical-align:bottom;
  463. }
  464. .team-box .team-assist .member::after,
  465. .team-box .team-assist .member::before
  466. {
  467. width: var(--head-block-width);
  468. text-align: center;
  469. font-size: 18px;
  470. font-weight: bold;
  471. position: relative;
  472. }
  473. /*平时的显示*/
  474. .team-box .team-assist .member::after
  475. {
  476. display: inline-block;
  477. }
  478. .team-box .team-assist .member::before
  479. {
  480. display: none;
  481. }
  482. /*反向时的显示*/
  483. .reverse-member-assist .team-assist .member::after
  484. {
  485. display: none;
  486. }
  487. .reverse-member-assist .team-assist .member::before
  488. {
  489. display: inline-block;
  490. }
  491. .formation-box .formation-total-info,
  492. .formation-box .team-total-info
  493. {
  494. font-size: 15px;
  495. vertical-align: bottom;
  496. }
  497. .formation-box .team-badge .team-total-info
  498. {
  499. display:inline-block;
  500. }
  501. /*
  502. .team-info .tIf-total-hp,.team-info .tIf-total-rcv{
  503. display:inline-block;
  504. }
  505. */
  506. /*队伍的潜觉*/
  507. .team-latents .latents{
  508. width: var(--head-block-width);
  509. /*float:left;*/
  510. margin-bottom: -20px;
  511. display: inline-block;
  512. }
  513. .team-latents .latent-ul{
  514. font-size: 0;
  515. width: 152px;
  516. transform: translate(-22px,-8px) scale(0.63);
  517. }
  518. .team-latents .latent-icon{
  519. margin-left: 3px;
  520. margin-right: 3px;
  521. }
  522. .team-latents .latent-icon-12,
  523. .team-latents .latent-icon-13,
  524. .team-latents .latent-icon-14,
  525. .team-latents .latent-icon-15,
  526. .team-latents .latent-icon-16,
  527. .team-latents .latent-icon-17,
  528. .team-latents .latent-icon-18,
  529. .team-latents .latent-icon-19,
  530. .team-latents .latent-icon-20,
  531. .team-latents .latent-icon-21,
  532. .team-latents .latent-icon-22,
  533. .team-latents .latent-icon-23,
  534. .team-latents .latent-icon-24,
  535. .team-latents .latent-icon-25,
  536. .team-latents .latent-icon-26,
  537. .team-latents .latent-icon-27,
  538. .team-latents .latent-icon-28,
  539. .team-latents .latent-icon-29,
  540. .team-latents .latent-icon-30,
  541. .team-latents .latent-icon-31,
  542. .team-latents .latent-icon-32,
  543. .team-latents .latent-icon-33{
  544. margin: 0;
  545. }
  546. /*队长的边框*/
  547. .team-box .team-members .team-leader .monster{
  548. border-radius: 10px;
  549. border-width:4px;
  550. border-style:solid;
  551. box-sizing: initial;
  552. margin: 0;
  553. }
  554. .team-1 .team-members .team-leader .monster{
  555. border-color: var(--team-1-color);
  556. }
  557. .team-2 .team-members .team-leader .monster{
  558. border-color: var(--team-2-color);
  559. }
  560. .team-3 .team-members .team-leader .monster{
  561. border-color: var(--team-3-color);
  562. }
  563. /*三维计算值*/
  564. .team-ability::after,
  565. .team-ability::before,
  566. .team-ability .abilitys
  567. {
  568. padding-left: 5px;
  569. box-sizing: border-box;
  570. font-size: 15px;
  571. width: var(--head-block-width);
  572. }
  573. .team-ability .abilitys
  574. {
  575. display: inline-block;
  576. }
  577. .team-ability::after,
  578. .team-ability::before
  579. {
  580. display: none;
  581. content: "";
  582. }
  583. .show-team-name-left .team-ability::before{
  584. display: inline-block;
  585. }
  586. .show-team-name-right .team-ability::after{
  587. display: inline-block;
  588. }
  589. .abilitys .hp::before,
  590. .abilitys .atk::before,
  591. .abilitys .rcv::before
  592. {
  593. width: 45px;
  594. display: inline-block;
  595. }
  596. /*.abilitys .hp::before{
  597. content: "HP:";
  598. }
  599. .abilitys .atk::before{
  600. content: "攻击:";
  601. }
  602. .abilitys .rcv::before{
  603. content: "回复:";
  604. }*/
  605. /*编辑窗口*/
  606. .blur-bg{
  607. filter:blur(5px);
  608. pointer-events: none;
  609. }
  610. .edit-box{
  611. background-color: rgba(82, 53, 30, 0.8);
  612. color: white;
  613. position: absolute;
  614. left:0;
  615. top:0;
  616. width:100%;
  617. box-sizing: border-box;
  618. min-width:664px;
  619. }
  620. .edit-box-title{
  621. text-align: center;
  622. font-size: 2em;
  623. font-weight: bold;
  624. }
  625. /*.edit-box .edit-box-title::before{
  626. content: "修改队员";
  627. }
  628. .edit-box .edit-box-title.edit-box-title-assist::before{
  629. content: "修改辅助";
  630. }*/
  631. .edit-box .monsterinfo-box{
  632. font-family: 'FOT-KurokaneStd-EB', "Malgun Gothic", "맑은 고딕", "Gulim", AppleGothic;
  633. color: white;
  634. text-shadow: black 2px 2px 0;
  635. min-height: 100px;
  636. margin: 5px 0;
  637. background-image: linear-gradient(#798421,#394914);
  638. border-top: #B1BB39 solid 4px;
  639. border-bottom: #72941D ridge 7px;
  640. box-shadow: black 0 3px 3px;
  641. padding: 5px 10px;
  642. }
  643. .edit-box .search-box,
  644. .edit-box .setting-box{
  645. padding: 0 10px;
  646. }
  647. /*.edit-box .setting-box .row-mon-id::before{
  648. content: "▼怪物ID";
  649. }*/
  650. .edit-box .setting-box .row-mon-id .m-id{
  651. box-sizing: border-box;
  652. font-size: 25px;
  653. height: 40px;
  654. width: 100%;
  655. }
  656. .edit-box .setting-box .row-mon-id .unable-monster{
  657. pointer-events: none;
  658. opacity: 0.5;
  659. }
  660. .edit-box .setting-box .row-mon-id .unable-monster .monster{
  661. box-sizing: border-box;
  662. border: 5px solid red;
  663. border-radius: 10px;
  664. overflow: hidden;
  665. }
  666. .edit-box .setting-box .row-mon-id .unable-monster .id{
  667. display: none;
  668. }
  669. .edit-box .setting-box .row-mon-id .search-button{
  670. width: 100%;
  671. height: 40px;
  672. font-size: 25px;
  673. }
  674. .edit-box .setting-box .row-mon-id .evo-card-list li,
  675. .edit-box .search-box .search-mon-list li,
  676. .detail-mon{
  677. display: inline-block;
  678. vertical-align: top;
  679. top: 0;
  680. width: 80px;
  681. height: 78px;
  682. }
  683. .detail-mon{
  684. vertical-align: bottom;
  685. }
  686. .edit-box .setting-box .row-mon-id .evo-card-list .monster,
  687. .edit-box .search-box .search-mon-list .monster,
  688. .detail-mon .monster{
  689. float: none;
  690. transform: scale(0.75) translate(-16px,-16px);
  691. }
  692. .edit-box .setting-box .row-mon-id .evo-card-list .monster .id,
  693. .edit-box .search-box .search-mon-list .monster .id,
  694. .detail-mon .monster .id{
  695. bottom: 5px;
  696. font-size: 20px;
  697. }
  698. .detail-box .detail-mon{
  699. width: 50px;
  700. height: 50px;
  701. }
  702. .detail-box .detail-mon .monster{
  703. transform: scale(0.5) translate(-58px,-58px);
  704. }
  705. .detail-box .detail-mon .monster .id{
  706. font-weight: bold;
  707. font-size: 23px;
  708. }
  709. .detail-box .detail-mon .monster .id::before {
  710. font-size: 15px;
  711. }
  712. /*.setting-box .row-mon-id .open-search::before{
  713. content: "搜索怪物";
  714. }
  715. .search-box::before{
  716. content: "▼简易搜索";
  717. }
  718. .attrs .attr-all::before{
  719. content: "不限";
  720. }
  721. .attrs .attr-none::before{
  722. content: "无";
  723. }*/
  724. .search-box>div{
  725. margin-bottom: 5px;
  726. }
  727. .search-box>div ul{
  728. display: inline-block;
  729. }
  730. .search-box .attrs ul{
  731. display: block;
  732. }
  733. .search-box>div ul>li{
  734. display: inline-block;
  735. vertical-align: top;
  736. font-size:16px;
  737. overflow: hidden;
  738. }
  739. .search-box>div ul>li>label{
  740. cursor: pointer;
  741. display: block;
  742. text-align: center;
  743. }
  744. .attrs .attr-list-1::before,
  745. .attrs .attr-list-2::before,
  746. .types-div::before,
  747. .awoken-div::before,
  748. .sawoken-div::before{
  749. /*float: left;*/
  750. font-size: 16px;
  751. /*width: 55px;*/
  752. margin-right: 3px;
  753. display: inline-block;
  754. }
  755. /*.search-box .attrs .attr-list-1::before{
  756. content: "属性1";
  757. }
  758. .search-box .attrs .attr-list-2::before{
  759. content: "属性2";
  760. }
  761. .search-box .attrs .fix-main-color-label::after{
  762. content: "限制属性1为主属性,属性2为副属性";
  763. }*/
  764. .attr-radio,.type-check,.sawoken-check{
  765. display: none;
  766. }
  767. .attrs .attr-list{
  768. font-size:0;
  769. }
  770. .attrs .attr-list li{
  771. border: 1px solid white;
  772. border-left: none;
  773. background: #947244;
  774. }
  775. .attrs .attr-list li:hover{
  776. background: #E9CB9E;
  777. }
  778. .attrs .attr-list li:first-of-type{
  779. border-radius: 8px 0 0 8px;
  780. border-left: 1px solid white;
  781. }
  782. .attrs .attr-list li:last-of-type{
  783. border-radius: 0 8px 8px 0;
  784. }
  785. .attrs .attr-list li label{
  786. line-height: 30px;
  787. width: 55px;
  788. height: 30px;
  789. }
  790. .attrs .attr-list input:checked+label{
  791. background-color:#8C4242;
  792. box-shadow: inset black 0 0 5px;
  793. cursor: auto;
  794. }
  795. .attr-list-1{
  796. margin-bottom: 5px;
  797. }
  798. /*.search-box .types-div::before{
  799. content: "类型";
  800. }*/
  801. .types-div .type-list li label{
  802. opacity: var(--search-icon-unchecked);
  803. }
  804. .types-div .type-list input:checked~label{
  805. opacity: 1;
  806. }
  807. /*.search-box .awoken-div::before{
  808. content: "觉醒";
  809. }*/
  810. .search-box .awoken-div .awoken-clear::before,
  811. .search-box .sawoken-div .sawoken-clear::before
  812. {
  813. content: "❌";
  814. }
  815. .search-box .awoken-div .awoken-clear,
  816. .search-box .sawoken-div .sawoken-clear
  817. {
  818. padding: 0;
  819. float: right;
  820. }
  821. .search-box .awoken-ul button{
  822. border: none;
  823. background-color: unset;
  824. font-family: 'FOT-KurokaneStd-EB', "Malgun Gothic", "맑은 고딕", "Gulim", AppleGothic;
  825. color: white;
  826. line-height: 32px;
  827. font-size: 16px;
  828. padding: 0;
  829. }
  830. .search-box .awoken-ul .awoken-count.zero{
  831. opacity: var(--search-icon-unchecked);
  832. }
  833. .search-box .awoken-ul .count{
  834. width: 30px;
  835. }
  836. .search-box .awoken-ul .awoken-count .awoken-icon{
  837. cursor: pointer;
  838. }
  839. .search-box .awoken-ul .awoken-count .count{
  840. cursor: pointer;
  841. }
  842. .search-box .awoken-ul .awoken-count.zero .count{
  843. cursor: auto;
  844. }
  845. /*.search-box .sawoken-div::before{
  846. content: "超觉醒";
  847. }*/
  848. .sawoken-div .sawoken-ul li label{
  849. opacity: var(--search-icon-unchecked);
  850. }
  851. .sawoken-div .sawoken-ul input:checked+label{
  852. opacity: 1;
  853. }
  854. .control-div button{
  855. font-size: 20px;
  856. }
  857. .control-div .search-start{
  858. float: right;
  859. margin-left: 5px;
  860. }
  861. /*.control-div .search-start::before{
  862. content: "开始搜索";
  863. }
  864. .control-div .search-clear::before{
  865. content: "清空搜索条件";
  866. }
  867. .control-div .search-close::before{
  868. content: "关闭搜索";
  869. }*/
  870. .search-box .search-mon-list{
  871. border: 1px solid white;
  872. border-radius: 5px;
  873. background: grey;
  874. }
  875. .setting-box .row-mon-id .open-search{
  876. float: right;
  877. }
  878. .edit-box .setting-row{
  879. width: 100%;
  880. }
  881. .monsterinfo-box .monster-head{
  882. float: left;
  883. margin-right:5px;
  884. }
  885. .monsterinfo-box .monsterinfo-line>div,
  886. .monsterinfo-box .monsterinfo-line>ul
  887. {
  888. display:inline-block;
  889. vertical-align: top;
  890. font-size: 22px;
  891. line-height: 22px;
  892. }
  893. .monsterinfo-box .monster-id{
  894. width:150px;
  895. }
  896. .monsterinfo-box .monster-seriesId,
  897. .monsterinfo-box .monster-collabId,
  898. .monsterinfo-box .monster-altName
  899. {
  900. cursor: pointer;
  901. font-size: 14px;
  902. line-height: 16px;
  903. vertical-align: bottom;
  904. /*max-width: 270px;*/
  905. white-space:nowrap;
  906. text-overflow:ellipsis;
  907. overflow:hidden;
  908. }
  909. .monsterinfo-box .monster-seriesId:hover::after,
  910. .monsterinfo-box .monster-collabId:hover::after,
  911. .monsterinfo-box .monster-altName:hover::after
  912. {
  913. content: "🔍";
  914. }
  915. /*.monsterinfo-box .monster-id::before{
  916. content: "No.";
  917. }*/
  918. .monsterinfo-box .monster-rare{
  919. width: 230px;
  920. }
  921. .monsterinfo-box .monster-rare::before{
  922. color:gold;
  923. text-shadow: black 0 0 3px,black 0 2px 3px;
  924. }
  925. .rare-1::before{content: "★";}
  926. .rare-2::before{content: "★★";}
  927. .rare-3::before{content: "★★★";}
  928. .rare-4::before{content: "★★★★";}
  929. .rare-5::before{content: "★★★★★";}
  930. .rare-6::before{content: "★★★★★★";}
  931. .rare-7::before{content: "★★★★★★★";}
  932. .rare-8::before{content: "★★★★★★★★";}
  933. .rare-9::before{content: "★★★★★★★★★";}
  934. .rare-10::before{content: "★★★★★★★★★★";}
  935. .monsterinfo-box .monster-type{
  936. font-size: 0;
  937. }
  938. .monsterinfo-box .monster-type .type-name{
  939. display:inline-block;
  940. margin-right: 10px;
  941. }
  942. .monsterinfo-box .monster-type .type-icon{
  943. margin-right:3px;
  944. }
  945. .monsterinfo-box .monster-type .type-name::after{
  946. vertical-align: middle;
  947. font-size: 22px;
  948. line-height: 22px;
  949. }
  950. /*.edit-box .setting-box .row-mon-level::before{
  951. content: "▼怪物等级";
  952. }*/
  953. .edit-box .setting-box .m-level{
  954. font-size: 25px;
  955. height: 40px;
  956. width: calc(100% - 220px);
  957. box-sizing: border-box;
  958. }
  959. .m-level-btn-min,
  960. .m-level-btn-max
  961. {
  962. height: 40px;
  963. box-sizing: border-box;
  964. font-size: 25px;
  965. padding: 0;
  966. }
  967. .m-level-btn-min{
  968. width: 65px;
  969. }
  970. .m-level-btn-max{
  971. width: 145px;
  972. }
  973. .m-level-exp{
  974. margin-left: 10px;
  975. display: inline-block;
  976. }
  977. /*
  978. .m-level-exp::before{
  979. content: "需要经验:";
  980. }
  981. .m-level-btn-max::before{
  982. content: "最高Lv";
  983. }
  984. .edit-box .setting-box .row-mon-awoken::before{
  985. content: "▼怪物觉醒";
  986. }
  987. */
  988. .row-mon-awoken .awoken-ul, .row-mon-super-awoken .awoken-ul{
  989. font-size: 0;
  990. height: 32px;
  991. }
  992. .awoken-ul li{
  993. margin-right: 5px;
  994. }
  995. .awoken-ul li:last-of-type{
  996. margin-right: 0;
  997. }
  998. .edit-box .awoken-ul .awoken-icon{
  999. cursor: pointer;
  1000. }
  1001. .awoken-ul .awoken-icon.unselected-awoken{
  1002. opacity: var(--search-icon-unchecked);
  1003. }
  1004. .row-mon-awoken .awoken-icon.awoken-count,
  1005. .row-mon-awoken .awoken-icon.awoken-count.full-awoken::before
  1006. {
  1007. color: yellow;
  1008. font-size: 22px;
  1009. line-height: 28px;
  1010. font-weight: bold;
  1011. text-shadow: black 0 0 4px;
  1012. text-align: center;
  1013. }
  1014. .row-mon-awoken .awoken-icon.awoken-count.full-awoken{
  1015. font-size: 0;
  1016. }
  1017. .row-mon-awoken .awoken-icon.awoken-count.full-awoken::before{
  1018. content: "★";
  1019. }
  1020. .row-mon-awoken .m-super-awoken-ul{
  1021. margin-top: 5px;
  1022. }
  1023. /*.edit-box .setting-box .row-mon-super-awoken::before{
  1024. content: "▼超觉醒";
  1025. }*/
  1026. .edit-box .setting-box .row-mon-plus::before{
  1027. /*content: "▼怪物加值";*/
  1028. display: block;
  1029. }
  1030. .row-mon-plus .ability-value::before{content: "(";}
  1031. .row-mon-plus .ability-value::after{content: ")";}
  1032. .setting-box .m-plus-hp,.setting-box .m-plus-atk,.setting-box .m-plus-rcv{
  1033. font-size: 25px;
  1034. height: 40px;
  1035. width: calc(100% - 288px);
  1036. box-sizing: border-box;
  1037. }
  1038. .m-plus-hp-li::before,.m-plus-atk-li::before,.m-plus-rcv-li::before,.row-mon-plus .ability-value{
  1039. font-size: 25px;
  1040. width: 55px;
  1041. display: inline-block;
  1042. }
  1043. .row-mon-plus .ability-value{
  1044. width: 90px;
  1045. }
  1046. /*.m-plus-hp-li::before{content: "HP";}
  1047. .m-plus-atk-li::before{content: "攻击";}
  1048. .m-plus-rcv-li::before{content: "回复";}*/
  1049. .m-plus-btn{
  1050. height: 40px;
  1051. width: 55px;
  1052. box-sizing: border-box;
  1053. font-size: 25px;
  1054. }
  1055. .m-plus-btn::before,.m-plus-btn-297::before{
  1056. content: "+";
  1057. }
  1058. .m-plus-btn-297{
  1059. float:right;
  1060. width: 85px;
  1061. height: 120px;
  1062. box-sizing: border-box;
  1063. font-size: 25px;
  1064. }
  1065. /*.edit-box .setting-box .row-mon-latent::before{
  1066. content: "▼潜在觉醒";
  1067. }*/
  1068. .m-latent-ul{
  1069. text-align: center;
  1070. font-size: 0;
  1071. }
  1072. .m-latent-ul .latent-icon{
  1073. margin-left: 12px;
  1074. }
  1075. .m-latent-ul .latent-icon:first-of-type{
  1076. margin-left: 0;
  1077. }
  1078. .m-latent-allowable-ul{
  1079. margin-top: 5px;
  1080. }
  1081. .m-latent-allowable-ul .latent-icon,
  1082. .m-latent-ul .latent-icon{
  1083. cursor: pointer;
  1084. }
  1085. .m-latent-ul .latent-icon[class="latent-icon"]{
  1086. cursor: default;
  1087. }
  1088. .m-latent-allowable-ul .latent-icon.unselected-latent{
  1089. cursor: default;
  1090. opacity: var(--search-icon-unchecked);
  1091. }
  1092. .edit-box .setting-box .row-mon-skill,
  1093. .edit-box .setting-box .row-mon-leader-skill{
  1094. margin-top:5px;
  1095. }
  1096. /*.skill-box .skill-cd::before{
  1097. content: "冷却回合:";
  1098. }
  1099. .skill-box .skill-level-label::before{
  1100. content: "Lv";
  1101. }
  1102. .skill-box .m-skill-lv-1::before{
  1103. content: "Lv";
  1104. }
  1105. .skill-box .m-skill-lv-max::before{
  1106. content: "最高Lv";
  1107. }*/
  1108. .skill-box .m-skill-level {
  1109. height: 30px;
  1110. width: 45px;
  1111. box-sizing: border-box;
  1112. border: none;
  1113. background: none;
  1114. font-size: inherit;
  1115. font-family: inherit;
  1116. color: inherit;
  1117. text-shadow: inherit;
  1118. }
  1119. .skill-box .m-skill-lv-1,
  1120. .skill-box .m-skill-lv-max{
  1121. padding: 0 3px;
  1122. height: 30px;
  1123. box-sizing: border-box;
  1124. font-size: 18px;
  1125. }
  1126. .skill-box{
  1127. font-family: 'FOT-KurokaneStd-EB', "Malgun Gothic", "맑은 고딕", "Gulim", AppleGothic;
  1128. font-size: 20px;
  1129. border: #9C743E solid 2px;
  1130. border-radius: 10px;
  1131. background-color: #B1AAA0;
  1132. overflow: hidden;
  1133. box-shadow: inset black 0 0 5px;
  1134. }
  1135. .skill-title{
  1136. background-color: #39180F;
  1137. box-shadow: inset black 0 5px 5px;
  1138. padding: 0 10px 0 5px;
  1139. text-shadow:black 3px 3px 0;
  1140. }
  1141. .skill-title::before{
  1142. background-color: #774433;
  1143. border: #BBAA55 solid 2px;
  1144. border-radius: 10px;
  1145. margin-right: 5px;
  1146. padding: 0 5px;
  1147. text-shadow:black 0 0 3px;
  1148. line-height: 25px;
  1149. display: inline-block;
  1150. }
  1151. .row-mon-skill .skill-title::before{
  1152. /*content: "主動技能";*/
  1153. color: #DDEEEE;
  1154. }
  1155. .row-mon-skill .skill-title .skill-name{
  1156. color: #84BAFC;
  1157. cursor: pointer;
  1158. }
  1159. .row-mon-skill .skill-title .skill-name:hover::after{
  1160. content: "🔍";
  1161. }
  1162. .row-mon-leader-skill .skill-title::before{
  1163. /*content: "隊長技能";*/
  1164. color: #FF9955;
  1165. }
  1166. .row-mon-leader-skill .skill-title .skill-name{
  1167. color: #85FD80;
  1168. }
  1169. .skill-box .skill-cd-control{
  1170. float: right;
  1171. }
  1172. .skill-box .skill-cd{
  1173. margin-left: 10px;
  1174. }
  1175. .skill-datail{
  1176. color: black;
  1177. padding: 0 8px 6px 8px;
  1178. line-height: 25px;
  1179. }
  1180. .skill-datail .spColor{
  1181. color: #ff3600;
  1182. }
  1183. .skill-datail .detail-search{
  1184. cursor: pointer;
  1185. color: blue;
  1186. }
  1187. .skill-datail .detail-search::before{
  1188. content: "🔍";
  1189. }
  1190. .skill-datail .random-active-skill{
  1191. padding-left: 1em;
  1192. }
  1193. .skill-datail .random-active-skill>.active-skill-li{
  1194. list-style: decimal;
  1195. }
  1196. .edit-box .button-box{
  1197. border-top: black solid 3px;
  1198. background-color: rgba(0,0,0,0.5);
  1199. margin-top: 10px;
  1200. padding: 5px;
  1201. height: 50px;
  1202. }
  1203. .edit-box .button-box .button-null,
  1204. .edit-box .button-box .button-delay,
  1205. .edit-box .button-box .button-cancel,
  1206. .edit-box .button-box .button-done{
  1207. height: 50px;
  1208. box-sizing: border-box;
  1209. font-size: 25px;
  1210. font-weight: bold;
  1211. }
  1212. .edit-box .button-box .button-null,
  1213. .edit-box .button-box .button-delay{
  1214. float: left;
  1215. margin-right:5px;
  1216. }
  1217. .edit-box .button-box .button-cancel,
  1218. .edit-box .button-box .button-done{
  1219. float: right;
  1220. margin-left:5px;
  1221. }
  1222. /*.edit-box .button-box .button-null::after{
  1223. content: "留空格子";
  1224. }
  1225. .edit-box .button-box .button-delay::after{
  1226. content: "应对威吓";
  1227. }
  1228. .edit-box .button-box .button-cancel::after{
  1229. content: "取消修改";
  1230. }
  1231. .edit-box .button-box .button-done::after{
  1232. content: "确认修改";
  1233. }
  1234. .edit-box .button-box .button-done.cant-assist::after{
  1235. content: "不能辅助";
  1236. }*/
  1237. .formation-awoken::before,
  1238. .team-awoken::before
  1239. {
  1240. font-size: 20px;
  1241. margin-top:5px;
  1242. /*content: "觉醒总计:";*/
  1243. }
  1244. .detail-box{
  1245. margin-top:5px;
  1246. }
  1247. .awoken-ul .awoken-count
  1248. {
  1249. font-size: 16px;
  1250. line-height: 32px;
  1251. font-family: 'FOT-KurokaneStd-EB',"Malgun Gothic", "맑은 고딕", "Gulim", AppleGothic;
  1252. display: inline-block;
  1253. margin-right: 3px;
  1254. }
  1255. .awoken-ul .count
  1256. {
  1257. height: 32px;
  1258. width: 37px;
  1259. display: inline-block;
  1260. vertical-align: middle;
  1261. }
  1262. .awoken-ul .count::before{
  1263. content: "×";
  1264. }
  1265. /*控制框*/
  1266. .control-box{
  1267. margin-bottom: 10px;
  1268. }
  1269. .control-box .languages-label::before{
  1270. content: "Lanuage:";
  1271. }
  1272. .control-box .solo-link::before{
  1273. content: "Jump To Solo Version";
  1274. }
  1275. .control-box .multi-link::before{
  1276. content: "Jump To 2-Player Version";
  1277. }
  1278. /*.control-box .btn-show-mon-id::before{
  1279. content: "隐藏怪物ID";
  1280. }
  1281. .not-show-mon-id .control-box .btn-show-mon-skill-cd::before{
  1282. content: "显示怪物ID";
  1283. }
  1284. .show-mon-skill-cd .control-box .btn-show-mon-skill-cd::before{
  1285. content: "⬜隐藏已满技能CD";
  1286. }
  1287. .control-box .btn-show-mon-skill-cd::before{
  1288. content: "❄️显示已满技能CD";
  1289. }
  1290. */
  1291. #interchange-line{
  1292. pointer-events: none;
  1293. position: absolute;
  1294. left: 0;
  1295. top: 0;
  1296. }
  1297. #interchange-line g line {
  1298. fill: none;
  1299. stroke: blue;
  1300. stroke-linecap: round;
  1301. stroke-width: 5;
  1302. stroke-dasharray: 10;
  1303. }

智龙迷城队伍图制作工具