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

智龙迷城队伍图制作工具