main.css 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335
  1. *{
  2. margin: 0;
  3. padding: 0;
  4. position: relative;
  5. -moz-box-sizing: border-box;
  6. -webkit-box-sizing: border-box;
  7. -ms-box-sizing: border-box;
  8. box-sizing: border-box;
  9. color: #333;
  10. -webkit-transition: all 0.5s ease;
  11. -moz-transition: all 0.5s ease;
  12. -o-transition: all 0.5s ease;
  13. -ms-transition: all 0.5s ease;
  14. transition: all 0.5s ease;
  15. }
  16. body{
  17. background: #170804 url("../img/page_bg.jpg") repeat-x left top;
  18. font-family: Palatino, Times, "Times New Roman", serif;
  19. }
  20. h1{
  21. margin: 8px 0 7px;
  22. }
  23. h2{
  24. margin-bottom: 7px;
  25. }
  26. p{
  27. display: block;
  28. margin-bottom: 7px;
  29. font-size: 18px;
  30. line-height: 25px;
  31. }
  32. .push--top{
  33. margin-top: 4px;
  34. }
  35. .push--right{
  36. margin-right: 4px;
  37. }
  38. .fancy{
  39. font-family: Tangerine, Palatino, Times, "Times New Roman", serif;
  40. font-style: italic;
  41. }
  42. .clickable{
  43. cursor: pointer;
  44. }
  45. .hidden{
  46. display: none;
  47. }
  48. .btn{
  49. border: none;
  50. background: #666;
  51. cursor: pointer;
  52. color: #FFF;
  53. padding: 7px;
  54. font-weight: 600;
  55. margin-bottom: 3px;
  56. }
  57. .btn:hover{
  58. opacity: .65;
  59. }
  60. .btn:disabled{
  61. opacity: .3;
  62. }
  63. .btnsmall{
  64. border: none;
  65. background: #666;
  66. cursor: pointer;
  67. color: #FFF;
  68. padding: 2px;
  69. font-weight: 600;
  70. margin-bottom: 1px;
  71. }
  72. .btnsmall:hover{
  73. opacity: .65;
  74. }
  75. .btnsmall:disabled{
  76. opacity: .3;
  77. }
  78. .main{
  79. min-width: 640px;
  80. padding-left: 0.3em;
  81. }
  82. .canvas-container{
  83. display: inline-block;
  84. text-align: center;
  85. width: 25%;
  86. min-width: 180px;
  87. background: #e6e6c6 url("../img/text_bg.jpg") repeat left top;
  88. margin: 0.3em auto 0.3em auto;
  89. padding: 2.2em;
  90. }
  91. .center-column{
  92. display: inline-block;
  93. vertical-align: top;
  94. width: 48.5%;
  95. background: #e6e6c6 url("../img/text_bg.jpg") repeat left top;
  96. margin: 0.3em auto 0.3em auto;
  97. padding: .6em;
  98. }
  99. .stats{
  100. width: 100%;
  101. font-family: "Lucida Console", Monaco, monospace;
  102. }
  103. .stat-container{
  104. border-bottom: thin solid #333;
  105. margin-bottom: 3px;
  106. }
  107. .stat-bar-container{
  108. width: 100%;
  109. height: 23px;
  110. }
  111. .changra-container{
  112. width: 100%;
  113. height: 18px;
  114. }
  115. .changra-container2{
  116. width: 100%;
  117. }
  118. .stat-bar{
  119. display: inline-block;
  120. height: 100%;
  121. width: 48%;
  122. }
  123. .stat-bar--masc{
  124. border-left: thin solid #333;
  125. }
  126. .stat-bar--fem{
  127. border-right: thin solid #DDD;
  128. }
  129. .stat-bar--masc .avatar-stat{
  130. left: 0;
  131. }
  132. .stat-bar--fem .avatar-stat{
  133. right: 0;
  134. }
  135. .avatar-stat{
  136. display: inline-block;
  137. position: absolute;
  138. height: 100%;
  139. opacity: .3;
  140. }
  141. .avatar-stat--player{
  142. background: orange;
  143. }
  144. .avatar-stat--rival{
  145. background: blue;
  146. }
  147. .avatar-stat--maxmin{
  148. background: white;
  149. }
  150. .stat-text{
  151. position: absolute;
  152. bottom: 0;
  153. font-size: 12px;
  154. line-height: 14px;
  155. }
  156. .stat-text-free{
  157. position: relative;
  158. bottom: 0;
  159. font-size: 12px;
  160. line-height: 14px;
  161. }
  162. .stat-text-noh{
  163. font-size: 12px;
  164. }
  165. .stat-text--right{
  166. right: 0;
  167. }
  168. table.slidertable {
  169. padding: 0;
  170. margin-bottom: 0.7em;
  171. border-radius: 4px;
  172. -moz-border-radius: 4px;
  173. -webkit-border-radius: 4px;
  174. }
  175. table.slidertable td first-child {
  176. padding-left: 2px;
  177. padding-right: 20px;
  178. }
  179. table.slidertable td:last-child {
  180. width:375px;
  181. padding-left: 10px;
  182. padding-right: 10px;
  183. }
  184. table.slidertable2 {
  185. padding: 0;
  186. margin-bottom: 0.7em;
  187. border-radius: 4px;
  188. -moz-border-radius: 4px;
  189. -webkit-border-radius: 4px;
  190. }
  191. table.slidertable2 td:nth-child(2) {
  192. width:70%;
  193. padding-left: 10px;
  194. padding-right: 10px;
  195. }
  196. table.slidertable2 td:first-child {
  197. width:15%;
  198. }
  199. table.slidertable2 td:last-child {
  200. width:15%;
  201. }
  202. table.slidertable3 {
  203. display:none;
  204. padding: 0;
  205. margin-bottom: 0.7em;
  206. border-radius: 4px;
  207. -moz-border-radius: 4px;
  208. -webkit-border-radius: 4px;
  209. }
  210. table.slidertable3 td:nth-child(2) {
  211. width:70%;
  212. padding-left: 10px;
  213. padding-right: 10px;
  214. }
  215. table.slidertable3 td:first-child {
  216. width:15%;
  217. }
  218. table.slidertable3 td:last-child {
  219. width:15%;
  220. }
  221. .ui-slider-horizontal .ui-state-default {
  222. border:#987;
  223. background:#987;
  224. }
  225. .combat-controls{
  226. margin: 7px;
  227. text-align: center;
  228. }
  229. .combat-button-column{
  230. margin: 0;
  231. padding: 0;
  232. display: inline-block;
  233. vertical-align: top;
  234. width: 31%;
  235. height: 100%;
  236. }
  237. .btn-combat{
  238. width: 100%;
  239. font-size: 12px;
  240. }
  241. .btn-push{
  242. background: pink;
  243. }
  244. .btn-summon-maternal{
  245. background: purple;
  246. }
  247. .btn-summon-paternal{
  248. background: red;
  249. }
  250. .btn-drain{
  251. background: blue;
  252. }
  253. .btn-support{
  254. background: green;
  255. }
  256. .btn-reflect{
  257. background: #444;
  258. }
  259. .btn-victory{
  260. width: 100%;
  261. }
  262. .btn-woman{
  263. background: purple;
  264. }
  265. .btn-man{
  266. background: rebeccapurple;
  267. }
  268. .btn-futa{
  269. background: darkorchid;
  270. }
  271. .btn-woman.btn-player{
  272. background:fuchsia;
  273. }
  274. .btn-man.btn-player{
  275. background:indigo;
  276. }
  277. .battle-description{
  278. margin-bottom: 7px;
  279. }
  280. .change-feminine:first-child{
  281. color: purple;
  282. }
  283. .change-masculine:first-child{
  284. color: blue;
  285. }