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 13 kB

7 years ago
7 years ago
7 years ago
7 years ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587
  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/sfont.woff2) format('woff2'),
  7. url(fonts/sfont?#iefix) format('embedded-opentype'),
  8. url(fonts/sfont.woff2) format('woff2'),
  9. url(fonts/sfont.woff) format('woff'),
  10. url(fonts/sfont.ttf) format('truetype'),
  11. url(fonts/sfont.svg#mywebfontregular) format('svg');
  12. }
  13. body{
  14. font-family: "Microsoft Yahei","Source Han Sans",Arial, Helvetica, sans-serif;
  15. }
  16. .display-none{
  17. display:none;
  18. }
  19. .title{
  20. font-size: 2em;
  21. font-weight: bold;
  22. }
  23. .detail{
  24. min-height: 100px;
  25. font-size: 1.5em;
  26. font-family: "Microsoft Yahei","Source Han Sans",Arial, Helvetica, sans-serif;
  27. }
  28. .title,.detail{
  29. width:100%;
  30. border: none;
  31. background: none;
  32. box-sizing: border-box;
  33. padding: 1px;
  34. }
  35. .title:focus,.detail:focus{
  36. border: black solid 1px;;
  37. background-color: #eee;
  38. padding: 0;
  39. }
  40. ul{
  41. margin: 0;
  42. padding: 0;
  43. list-style: none;
  44. }
  45. /*队伍的整个盒子*/
  46. .formation-box{
  47. /*width: 648px;*/
  48. min-width: 648px;
  49. }
  50. /*单个怪物*/
  51. .monster{
  52. font-family: 'FOT-KurokaneStd-EB',"Microsoft Yahei","Source Han Sans",Arial, Helvetica, sans-serif;
  53. width: 100px;
  54. height: 100px;
  55. margin: 0;
  56. display: block;
  57. float: left;
  58. background-repeat: no-repeat;
  59. position: relative;
  60. cursor: pointer;
  61. border-radius: 5px;
  62. }
  63. .null .monster,.delay .monster,
  64. .null .property,.delay .property,
  65. .null .subproperty,.delay .subproperty
  66. {
  67. box-sizing: border-box;
  68. background-image: none;
  69. }
  70. .null .monster{
  71. background-color: rgba(230,230,230,0.5);
  72. border: 3px grey dashed;
  73. }
  74. .edit-box .null .monster{
  75. background-color: #653;
  76. border: none;
  77. box-shadow: inset black 0 0 7px;
  78. }
  79. .delay .monster{
  80. background-color: yellow;
  81. box-shadow: inset orange 0 0 7px;
  82. border: 3px black solid;
  83. }
  84. .delay .monster::before{
  85. display: block;
  86. width: 94px;
  87. height: 94px;
  88. color: black;
  89. font-size: 30px;
  90. line-height: 47px;
  91. text-align: center;
  92. font-weight: bold;
  93. /*content: "应 对\A威 吓";*/
  94. font-family: "Microsoft Yahei","Source Han Sans",Arial, Helvetica, sans-serif;
  95. white-space: pre-wrap;
  96. display: inline-block;
  97. }
  98. /*怪物属性*/
  99. .property,.subproperty{
  100. position:absolute;
  101. left:0;top:0;
  102. width: 100px;
  103. height: 100px;
  104. background-repeat: no-repeat;
  105. background-image: url(images/CARDFRAME2.PNG);
  106. background-position: 100px 100px; /*默认都不显示*/
  107. }
  108. /*怪物-加值*/
  109. .monster .plus{
  110. color: yellow;
  111. font-size: 20px;
  112. line-height: 20px;
  113. text-shadow: black 0 0 1px, black 2px 2px 0;
  114. position: absolute;
  115. left:0;
  116. }
  117. .null .plus,.delay .plus,
  118. .null .awoken-count,.delay .awoken-count,
  119. .null .level,.delay .level{
  120. display:none;
  121. }
  122. /*.monster .plus .hp::before,
  123. .monster .plus .atk::before,
  124. .monster .plus .rcv::before,
  125. .monster .plus ._297::before{
  126. content: "+";
  127. }*/
  128. .monster .plus ._297{ /*297默认不显示*/
  129. display:none;
  130. }
  131. .monster .plus.has297 .hp,.monster .plus.zero .hp,
  132. .monster .plus.has297 .atk,.monster .plus.zero .atk,
  133. .monster .plus.has297 .rcv,.monster .plus.zero .rcv{ /*当是297时隐藏3维*/
  134. display:none;
  135. }
  136. .monster .plus.has297 ._297{ /*当是297时显示297*/
  137. display:block;
  138. }
  139. /*怪物-觉醒*/
  140. .monster .awoken-count{
  141. color: yellow;
  142. font-size: 20px;
  143. line-height: 30px;
  144. text-shadow: black 0 0 4px;
  145. text-align: center;
  146. background-image: url(images/awoken-bg.png);
  147. background-repeat: no-repeat;
  148. width: 34px;
  149. height: 38px;
  150. position: absolute;
  151. right: 0;
  152. }
  153. .monster .awoken-count.allowable-assist{
  154. font-size: 0;
  155. text-shadow: none;
  156. background-position: 0 -38px;
  157. }
  158. /*怪物-等级*/
  159. .monster .level{
  160. color: white;
  161. font-size: 18px;
  162. line-height: 27px;
  163. height: 27px;
  164. text-shadow: black 0 0 1px, black 2px 2px 0;
  165. position: absolute;
  166. left: 5px;
  167. bottom: 0;
  168. vertical-align: top;
  169. }
  170. .monster .level._110{
  171. color: lightskyblue;
  172. }
  173. /*.monster .level::before{
  174. content: "Lv.";
  175. }*/
  176. .monster .level.max{
  177. font-size: 0;
  178. }
  179. .monster .level.max::before{
  180. font-size: 18px;
  181. /*content: "Lv.最大";*/
  182. }
  183. /*辅助和队伍的每一只框架*/
  184. .member, .acquisitus-awoken-icon {
  185. display: block;
  186. float: left;
  187. position: relative;
  188. width: 108px;
  189. }
  190. .formation-box .monster{
  191. margin: 4px; /*留给队长边框的*/
  192. }
  193. /*队伍的背景色*/
  194. .formation-assist, .formation-team{
  195. display: inline-block;
  196. }
  197. .formation-A-box .formation-team,.formation-A-box .formation-latents{
  198. background-color:pink;
  199. }
  200. .formation-B-box .formation-team,.formation-B-box .formation-latents{
  201. background-color:lightblue;
  202. }
  203. .formation-A-bigbox, .formation-B-bigbox{
  204. position: relative;
  205. font-size:0;
  206. }
  207. .formation-B-bigbox{
  208. margin-top:15px;
  209. }
  210. /*队伍A、B的文字*/
  211. .formation-A-bigbox::after, .formation-B-bigbox::before{
  212. font-size: 30px;
  213. font-weight: bold;
  214. text-align: center;
  215. line-height: 50px;
  216. white-space: pre-wrap;
  217. display: inline-block;
  218. width: 108px;
  219. height: 108px;
  220. }
  221. .formation-A-bigbox::after{
  222. color:red;
  223. background-color:pink;
  224. /*content: "队伍\A A";*/
  225. }
  226. .formation-B-bigbox::before{
  227. color:blue;
  228. background-color:lightblue;
  229. /*content: "队伍\A B";*/
  230. vertical-align:top;
  231. }
  232. .formation-A-box, .formation-B-box{
  233. display: inline-block;
  234. vertical-align:bottom;
  235. }
  236. .formation-A-box .formation-assist .member::after, .formation-B-box .formation-assist .member::before{
  237. width: 108px;
  238. text-align: center;
  239. font-size: 18px;
  240. font-weight: bold;
  241. display: inline-block;
  242. position: relative;
  243. }
  244. .formation-A-box .formation-assist .member::after{
  245. color:red;
  246. /*content: "▼辅助";*/
  247. }
  248. .formation-B-box .formation-assist .member::before{
  249. color:blue;
  250. /*content: "▲辅助";*/
  251. }
  252. /*队伍的潜觉*/
  253. .formation-box .latents{
  254. width: 108px;
  255. /*float:left;*/
  256. margin-bottom: -19px;
  257. display: inline-block;
  258. }
  259. .formation-box .latent-ul{
  260. font-size: 0;
  261. width: 152px;
  262. transform: translate(-22px,-10px) scale(0.71);
  263. }
  264. .a-awoken-icon-1 li{
  265. background-image: url(images/sha.png);
  266. background-size: 50px 21px;
  267. width: 50px;
  268. height: 21px;
  269. margin-right: 4px;
  270. }
  271. .a-awoken-icon-2 li{
  272. background-image: url(images/fangzuo.png);
  273. background-size: 21px 21px;
  274. width: 21px;
  275. height: 21px;
  276. margin-left: 6px;
  277. }
  278. .a-awoken-icon-ul li{
  279. float:left;
  280. }
  281. /*队长的边框*/
  282. .formation-A-box .formation-team .team-leader .monster, .formation-B-box .formation-team .team-leader .monster{
  283. border-radius: 10px;
  284. border-width:4px;
  285. border-style:solid;
  286. box-sizing: initial;
  287. margin: 0;
  288. }
  289. .formation-A-box .formation-team .team-leader .monster{
  290. border-color: red;
  291. }
  292. .formation-B-box .formation-team .team-leader .monster{
  293. border-color: blue;
  294. }
  295. /*编辑窗口*/
  296. .blur-bg{
  297. filter:blur(5px);
  298. }
  299. .edit-box{
  300. background-color: rgba(82, 53, 30, 0.8);
  301. color: white;
  302. position: absolute;
  303. left:0;
  304. top:0;
  305. width:100%;
  306. box-sizing: border-box;
  307. min-width:664px;
  308. }
  309. .edit-box-title{
  310. text-align: center;
  311. font-size: 2em;
  312. font-weight: bold;
  313. }
  314. /*.edit-box .edit-box-title::before{
  315. content: "修改队员";
  316. }
  317. .edit-box .edit-box-title.edit-box-title-assist::before{
  318. content: "修改辅助";
  319. }*/
  320. .edit-box .monsterinfo-box{
  321. font-family: 'FOT-KurokaneStd-EB';
  322. color: white;
  323. text-shadow: black 2px 2px 0;
  324. height: 100px;
  325. margin: 5px 0;
  326. background-image: linear-gradient(#798421,#394914);
  327. border-top: #B1BB39 solid 4px;
  328. border-bottom: #72941D ridge 7px;
  329. box-shadow: black 0 3px 3px;
  330. padding: 5px 10px;
  331. }
  332. /*.edit-box .search-box::before{
  333. content: "▼怪物ID";
  334. }*/
  335. .edit-box .search-box .m-id{
  336. box-sizing: border-box;
  337. font-size: 25px;
  338. height: 40px;
  339. width: 100%;
  340. }
  341. .edit-box .search-box .search-button{
  342. width: 100%;
  343. height: 40px;
  344. font-size: 25px;
  345. }
  346. .edit-box .search-box,.edit-box .setting-box{
  347. padding: 0 10px;
  348. }
  349. .edit-box .setting-row{
  350. width: 100%;
  351. }
  352. .monsterinfo-box .monster{
  353. margin-right:5px;
  354. }
  355. .monsterinfo-box .monster-id{
  356. display:inline-block;
  357. width:150px;
  358. }
  359. /*.monsterinfo-box .monster-id::before{
  360. content: "No.";
  361. }*/
  362. .monsterinfo-box .monster-rare{
  363. display:inline-block;
  364. }
  365. .monsterinfo-box .monster-rare::before{
  366. color:gold;
  367. text-shadow: black 0 0 3px,black 0 2px 3px;
  368. }
  369. .rare-1::before{content: "★";}
  370. .rare-2::before{content: "★★";}
  371. .rare-3::before{content: "★★★";}
  372. .rare-4::before{content: "★★★★";}
  373. .rare-5::before{content: "★★★★★";}
  374. .rare-6::before{content: "★★★★★★";}
  375. .rare-7::before{content: "★★★★★★★";}
  376. .rare-8::before{content: "★★★★★★★★";}
  377. .rare-9::before{content: "★★★★★★★★★";}
  378. .rare-10::before{content: "★★★★★★★★★★";}
  379. .monsterinfo-box .monster-id,.monsterinfo-box .monster-rare,.monsterinfo-box .monster-name{
  380. vertical-align: top;
  381. margin:0;
  382. height: 34px;
  383. font-size: 22px;
  384. line-height: 22px;
  385. }
  386. .monsterinfo-box .monster-type{
  387. font-size: 0;
  388. }
  389. .monsterinfo-box .monster-type .type-name{
  390. display:inline-block;
  391. margin-right: 10px;
  392. }
  393. .monsterinfo-box .monster-type .type-icon{
  394. margin-right:3px;
  395. }
  396. .monsterinfo-box .monster-type .type-name::after{
  397. vertical-align: middle;
  398. font-size: 22px;
  399. line-height: 22px;
  400. }
  401. .edit-box .setting-box .row-mon-level::before{
  402. /*content: "▼怪物等级";*/
  403. display: block;
  404. }
  405. .edit-box .setting-box .m-level{
  406. font-size: 25px;
  407. height: 40px;
  408. width: calc(100% - 150px);
  409. box-sizing: border-box;
  410. }
  411. .m-level-btn-max{
  412. height: 40px;
  413. width: 145px;
  414. box-sizing: border-box;
  415. font-size: 25px;
  416. }
  417. /*.m-level-btn-max::before{
  418. content: "最高Lv";
  419. }
  420. .edit-box .setting-box .row-mon-awoken::before{
  421. content: "▼怪物觉醒";
  422. }*/
  423. .row-mon-awoken .m-awoken-ul{
  424. height: 32px;
  425. }
  426. .m-awoken-ul .awoken-icon{
  427. cursor: pointer;
  428. }
  429. .m-awoken-ul .awoken-icon.unselected-awoken{
  430. opacity: 0.3;
  431. }
  432. .awoken-icon.awoken-count{
  433. color: yellow;
  434. font-size: 22px;
  435. line-height: 28px;
  436. font-weight: bold;
  437. text-shadow: black 0 0 4px;
  438. text-align: center;
  439. }
  440. .edit-box .setting-box .row-mon-plus::before{
  441. /*content: "▼怪物加值";*/
  442. display: block;
  443. }
  444. .setting-box .m-plus-hp,.setting-box .m-plus-atk,.setting-box .m-plus-rcv{
  445. font-size: 25px;
  446. height: 40px;
  447. width: calc(100% - 212px);
  448. box-sizing: border-box;
  449. }
  450. .m-plus-hp-li::before,.m-plus-atk-li::before,.m-plus-rcv-li::before{
  451. font-size: 25px;
  452. width: 55px;
  453. display: inline-block;
  454. }
  455. /*.m-plus-hp-li::before{content: "HP";}
  456. .m-plus-atk-li::before{content: "攻击";}
  457. .m-plus-rcv-li::before{content: "回复";}*/
  458. .m-plus-hp-btn-99,.m-plus-atk-btn-99,.m-plus-rcv-btn-99{
  459. height: 40px;
  460. width: 70px;
  461. box-sizing: border-box;
  462. font-size: 25px;
  463. }
  464. /*.m-plus-hp-btn-99::before,.m-plus-atk-btn-99::before,.m-plus-rcv-btn-99::before,.m-plus-btn-297::before{
  465. content: "+";
  466. }*/
  467. .m-plus-btn-297{
  468. float:right;
  469. width: 85px;
  470. height: 120px;
  471. box-sizing: border-box;
  472. font-size: 25px;
  473. }
  474. /*.edit-box .setting-box .row-mon-latent::before{
  475. content: "▼潜在觉醒";
  476. }*/
  477. .m-latent-ul{
  478. text-align: center;
  479. font-size: 0;
  480. }
  481. .m-latent-ul .latent-icon{
  482. margin-left: 12px;
  483. }
  484. .m-latent-ul .latent-icon:first-of-type{
  485. margin-left: 0;
  486. }
  487. .m-latent-allowable-ul{
  488. margin-top: 5px;
  489. }
  490. .m-latent-allowable-ul .latent-icon{
  491. cursor: pointer;
  492. }
  493. .m-latent-allowable-ul .latent-icon.unselected-latent{
  494. cursor: default;
  495. opacity: 0.3;
  496. }
  497. .latent-icon-11,
  498. .latent-icon-13,
  499. .latent-icon-14,
  500. .latent-icon-15,
  501. .latent-icon-16,
  502. .latent-icon-17,
  503. .latent-icon-18,
  504. .latent-icon-19,
  505. .latent-icon-20,
  506. .latent-icon-21,
  507. .latent-icon-22,
  508. .latent-icon-23,
  509. .latent-icon-24{
  510. cursor: pointer;
  511. }
  512. .edit-box .button-box{
  513. border-top: black solid 3px;
  514. background-color: rgba(0,0,0,0.5);
  515. margin-top: 10px;
  516. padding: 5px;
  517. height: 50px;
  518. }
  519. .edit-box .button-box .button-null,
  520. .edit-box .button-box .button-delay,
  521. .edit-box .button-box .button-cancel,
  522. .edit-box .button-box .button-done{
  523. height: 50px;
  524. box-sizing: border-box;
  525. font-size: 25px;
  526. font-weight: bold;
  527. }
  528. .edit-box .button-box .button-null,
  529. .edit-box .button-box .button-delay{
  530. float: left;
  531. margin-right:5px;
  532. }
  533. .edit-box .button-box .button-cancel,
  534. .edit-box .button-box .button-done{
  535. float: right;
  536. margin-left:5px;
  537. }
  538. /*.edit-box .button-box .button-null::after{
  539. content: "留空格子";
  540. }
  541. .edit-box .button-box .button-delay::after{
  542. content: "应对威吓";
  543. }
  544. .edit-box .button-box .button-cancel::after{
  545. content: "取消修改";
  546. }
  547. .edit-box .button-box .button-done::after{
  548. content: "确认修改";
  549. }
  550. .edit-box .button-box .button-done.cant-assist::after{
  551. content: "不能辅助";
  552. }*/
  553. .awoken-total-box::before{
  554. font-size: 20px;
  555. /*content: "觉醒总计:";*/
  556. }
  557. .detail-box{
  558. margin-top:5px;
  559. }
  560. .awoken-total-box .m-awoken-ul .awoken-count{
  561. font-size: 20px;
  562. line-height: 32px;
  563. font-family: 'FOT-KurokaneStd-EB';
  564. float: left;
  565. margin-right: 5px;
  566. }
  567. .awoken-total-box .m-awoken-ul .count{
  568. height: 32px;
  569. vertical-align: middle;
  570. }
  571. .awoken-total-box .m-awoken-ul .count::before{
  572. content: "×";
  573. }
  574. .control-box{
  575. margin-bottom: 10px;
  576. }
  577. .control-box .languages-label::before{
  578. content: "Lanuage:";
  579. }

智龙迷城队伍图制作工具

Contributors (1)