cookie clicker but bigger
Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут содержать дефисы(-) и должны содержать не более 35 символов.
 
 
 
 

162 строки
2.3 KiB

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