crunch
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

172 line
1.8 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. list-style-type: none;
  135. }
  136. #character-form {
  137. font-size: 20pt;
  138. }