crunch
Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
 
 
 

218 linhas
2.4 KiB

  1. body {
  2. background: #111;
  3. color: #eee;
  4. height: 100%;
  5. width: 100%;
  6. font-family: Arial;
  7. }
  8. a {
  9. color: #7777FF;
  10. text-decoration: none;
  11. }
  12. body.combat {
  13. background: #311;
  14. }
  15. body.explore {
  16. background: #111;
  17. }
  18. body.eaten {
  19. background: #500;
  20. }
  21. button {
  22. background: #222;
  23. color: #eee;
  24. }
  25. #selector-combat {
  26. display: none;
  27. }
  28. .active-button {
  29. }
  30. .inactive-button {
  31. background: #111;
  32. }
  33. .disabled-button {
  34. background: repeating-linear-gradient(
  35. 45deg,
  36. #111,
  37. #111 10px,
  38. #622 10px,
  39. #622 20px
  40. );
  41. }
  42. .stat-button {
  43. width: 100px;
  44. height: 50px;
  45. font-size: 18px;
  46. user-select: none;
  47. }
  48. .compass-button {
  49. width: 100px;
  50. height: 100px;
  51. font-size: 18px;
  52. user-select: none;
  53. }
  54. .action-button {
  55. width: 100px;
  56. height: 100px;
  57. font-size: 18px;
  58. user-select: none;
  59. }
  60. .combat-button {
  61. width: 200px;
  62. height: 50px;
  63. font-size: 18px;
  64. user-select: none;
  65. }
  66. .eaten-button {
  67. width: 200px;
  68. height: 50px;
  69. font-size: 18px;
  70. user-select: none;
  71. }
  72. #combat-desc {
  73. width: 200px;
  74. height: 400px;
  75. background: #222;
  76. }
  77. .dialog-button {
  78. width: 300px;
  79. height: 75px;
  80. font-size: 18px;
  81. user-select: none;
  82. }
  83. #dialog {
  84. list-style-type: none;
  85. }
  86. #combat {
  87. list-style-type: none;
  88. }
  89. #eaten {
  90. list-style-type: none;
  91. }
  92. #log {
  93. background: #222;
  94. width: 100%;
  95. height: 100%;
  96. flex: 3;
  97. overflow: auto;
  98. }
  99. .stats {
  100. float: right;
  101. flex: 1;
  102. }
  103. #player-stats {
  104. height: 50%;
  105. }
  106. #foe-stats {
  107. display: none;
  108. height: 50%;
  109. }
  110. .stat-line {
  111. }
  112. #game-and-stats {
  113. margin: auto;
  114. height: 500px;
  115. width: 700px;
  116. display: flex;
  117. }
  118. #footer {
  119. width: 500px;
  120. margin: auto;
  121. }
  122. .selector {
  123. display: flex;
  124. }
  125. #game {
  126. display: none;
  127. }
  128. #create {
  129. color: #eee;
  130. padding: 25px;
  131. text-align: center;
  132. }
  133. #character-form-list {
  134. margin: auto;
  135. list-style-type: none;
  136. }
  137. #character-form {
  138. font-size: 20pt;
  139. }
  140. .pref-radio {
  141. display: none;
  142. }
  143. .pref-radio + label {
  144. color: #666;
  145. width: 150px;
  146. }
  147. .pref-radio:checked + label.pref-disable {
  148. background: #933;
  149. color: #eee;
  150. }
  151. .pref-radio:checked + label.pref-avoid {
  152. background: #973;
  153. color: #eee;
  154. }
  155. .pref-radio:checked + label.pref-enable {
  156. background: #393;
  157. color: #eee;
  158. }
  159. .pref-radio:checked + label.pref-prefer {
  160. background: #191;
  161. color: #eee;
  162. }
  163. .pref-select {
  164. display: flex;
  165. align-items: center;
  166. justify-content: center;
  167. }
  168. .pref-list {
  169. text-align: center;
  170. margin: auto;
  171. user-select: none;
  172. }
  173. .pref-type {
  174. width: 150px;
  175. }