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

智龙迷城队伍图制作工具