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

智龙迷城队伍图制作工具