cookie clicker but bigger
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.
 
 
 
 

189 lines
2.6 KiB

  1. body {
  2. font-family: Sans-Serif;
  3. }
  4. body.dark {
  5. background: #111;
  6. color: #eee;
  7. }
  8. .hidden {
  9. display: none !important;
  10. }
  11. #tasty-micro {
  12. color: #ddd;
  13. background-color: #211;
  14. width: 300px;
  15. height: 200px;
  16. position: fixed;
  17. left: 15%;
  18. top: 50%;
  19. bottom: 50%;
  20. margin: auto;
  21. font-size: 60px;
  22. }
  23. #top-bar {
  24. background-color: #322;
  25. position: absolute;
  26. width: 100%;
  27. height: 10%;
  28. top: 0%;
  29. left: 0%;
  30. text-align: center;
  31. margin: auto;
  32. }
  33. #resources-area {
  34. position: absolute;
  35. text-align: center;
  36. width: 20%;
  37. left: 0%;
  38. top: 10%;
  39. height: 90%;
  40. margin: auto;
  41. }
  42. #buildings-area {
  43. position: absolute;
  44. width: 20%;
  45. right: 5%;
  46. top: 10%;
  47. height: 90%;
  48. overflow-x: hidden;
  49. overflow-y: scroll;
  50. }
  51. .building-button {
  52. display: block;
  53. width: 90%;
  54. height: 75px;
  55. background-color: #222;
  56. color: #eee;
  57. border: 5px;
  58. border-color: #666;
  59. border-style: solid;
  60. user-select: none;
  61. }
  62. .building-button-disabled {
  63. background-color: #111;
  64. color: #999;
  65. }
  66. .building-button .building-button-name {
  67. font-size: 24px;
  68. position: relative;
  69. left: 25%;
  70. top: 10%;
  71. user-select: none;
  72. -moz-user-select: none;
  73. }
  74. .building-button .building-button-cost {
  75. font-size: 18px;
  76. position: relative;
  77. left: 25%;
  78. top: 20px;
  79. }
  80. .building-button:hover {
  81. background-color: #333;
  82. }
  83. .building-button-disabled:hover {
  84. background-color: #111 !important;
  85. }
  86. .building-button:active {
  87. border-color: #333;
  88. background-color: #111;
  89. }
  90. #upgrades-area {
  91. position: absolute;
  92. width: 20%;
  93. right: 35%;
  94. top: 10%;
  95. }
  96. .title {
  97. font-size: 48px;
  98. height: 10%;
  99. text-align: center;
  100. }
  101. #upgrades-list {
  102. display: flex;
  103. flex-wrap: wrap;
  104. }
  105. #upgrade-tooltip {
  106. position: absolute;
  107. width: 200px;
  108. height: 125%;
  109. background: #333;
  110. display: none;
  111. z-index: 1;
  112. left: 0px;
  113. top: 0px;
  114. }
  115. #upgrade-tooltip-desc {
  116. font-size: 14px;
  117. color: #bbb;
  118. margin: 10px;
  119. top: 50%;
  120. left: 10px;
  121. }
  122. #upgrade-tooltip-effect {
  123. font-size: 20px;
  124. margin: 10px;
  125. }
  126. #upgrade-tooltip-cost {
  127. position: absolute;
  128. right: 10px;
  129. bottom: 10px;
  130. }
  131. #upgrade-tooltip-prereqs {
  132. position: absolute;
  133. left: 10px;
  134. bottom: 10px;
  135. }
  136. .cost-met {
  137. color: #0f0;
  138. }
  139. .cost-unmet {
  140. color: #f00;
  141. }
  142. .upgrade-button {
  143. width: 75px;
  144. height: 75px;
  145. display: block;
  146. background-color: #444;
  147. user-select: none;
  148. -moz-user-select: none;
  149. }
  150. .upgrade-button-inactive {
  151. background-color: #222 !important;
  152. color: #999 !important;
  153. }
  154. .upgrade-button-name {
  155. position: relative;
  156. text-align: center;
  157. width: 75px;
  158. height: 75px
  159. top: 50%;
  160. left: 50%;
  161. margin: 18.75px -37.5px;
  162. }