Advertisement
ClickerGuy

My CSS Layout (Clone)

Oct 2nd, 2022 (edited)
263
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*Stylesheet created by morkysherk, owned by Eric*/
  2.  
  3. #game
  4. {
  5. background-image:http://www.colorhexa.com/afafaf.png;
  6. font-size:12px;
  7. color:rgba(0,0,0,0.9);
  8. text-shadow:none;
  9. }
  10. .box
  11. {
  12. text-align:center;
  13. padding:0px;
  14. box-shadow:none;
  15. }
  16.  
  17. .thing,.box-header,.box-footer,.box-bit
  18. {
  19. background:#7c7c7c;
  20. border:1px solid rgba(0,0,0,0.9);
  21. margin:1px;
  22. }
  23. .thing.cantAfford
  24. {
  25. background:#cf5055;
  26. }
  27. .thing:hover
  28. {
  29. background:#cccccc;
  30. }
  31. .thing.cantAfford:hover
  32. {
  33. background:#cc6a6d;
  34. }
  35.  
  36. .box-header
  37. {
  38. margin-top:2px;
  39. margin-bottom:4px;
  40. display:inline-block;
  41. font-family:Verdana;
  42. font-weight:bold;
  43. border-radius:10px;
  44. border:3px solid black;
  45. }
  46. .box-footer
  47. {
  48. margin-top:4px;
  49. }
  50.  
  51. .title
  52. {
  53. text-decoration:underline;
  54. }
  55.  
  56. #box-title
  57. {
  58. display:inline-block;
  59. margin-top:0.75%;
  60. margin-left:0.75%;
  61. float:left;
  62. }
  63. #box-version
  64. {
  65. display:inline-block;
  66. margin-top:0.75%;
  67. margin-left:0.75%;
  68. margin-right:0.75%;
  69. float:left;
  70. }
  71.  
  72. #box-main
  73. {
  74. left:0px;
  75. top:0px;
  76. bottom:0px;
  77. overflow:hidden;
  78. width:60%;
  79. position:absolute;
  80. border:5px solid black;
  81. border-right:0px;
  82. }
  83. #box-buttons
  84. {
  85. top:0px;
  86. right:25px;
  87. bottom:0px;
  88. left:0px;
  89. position:absolute;
  90. }
  91. #box-store
  92. {
  93. right:0px;
  94. top:0px;
  95. bottom:0px;
  96. width:40%;
  97. position:absolute;
  98. }
  99. #box-buildings,#box-upgrades, upgradesZZ, upgrades IV, #box-achievs, #box-prestige
  100. {
  101. top:0px;
  102. bottom:0px;
  103. width:50%;
  104. right:0%;
  105. overflow-x:hidden;
  106. overflow-y:scroll;
  107. padding-bottom:48px;/* this is to accommodate the info and settings buttons */
  108. position:absolute;
  109. border:solid 5px black;
  110. }
  111. #box-res
  112. {
  113. border-top:5px solid black;
  114. border-left:2.5px solid black;
  115. border-bottom:3px solid black;
  116. width:150%;
  117. right:100%;
  118. bottom:72%;
  119. height:21.2%;
  120. z-index:100;
  121. position:absolute;
  122. overflow-y:scroll;
  123. background:linear-gradient(to right,rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.6) 50%,rgba(0,0,0,0.15) 100%);
  124. }
  125. #box-buildings
  126. {
  127. right:50%;
  128. border-right:solid 0px black;
  129. }
  130. #box-achievs
  131. {
  132. right:100%;
  133. width:150%;
  134. top:75%;
  135. height:25%;
  136. border-right:solid 0px black;
  137. }
  138. #box-prestige
  139. {
  140. right:100%;
  141. top:28%;
  142. height:47.7%;
  143. border-top:solid 0px black;
  144. border-bottom:solid 0px black;
  145. border-right:solid 0px black;
  146. }
  147. #box-stats
  148. {
  149. border-top:2.5px solid black;
  150. border-bottom:5px solid black;
  151. width:0%;
  152. bottom:0%;
  153. right:0%;
  154. z-index:100;
  155. position:absolute;
  156. overflow-y:scroll;
  157. height:8.5%;
  158. background:linear-gradient(to right,rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.6) 50%,rgba(0,0,0,0.15) 100%);
  159. }
  160.  
  161. #box-buildings>.box-header
  162. {
  163. padding-bottom:16px;
  164. }
  165.  
  166. #bulkDisplay
  167. {
  168. margin-top:-2.5px;
  169. border:solid 1px black;
  170. background:#7c7c7c;
  171. width:70px;
  172. margin-left:auto;
  173. margin-right:auto;
  174. position:relative;
  175. z-index:200;
  176. }
  177.  
  178.  
  179. .thing
  180. {
  181. display:inline-block;
  182. padding:0px;
  183. cursor:pointer;
  184. font-family:Verdana;
  185. }
  186. .thing:active
  187. {
  188. opacity:0.5;
  189. }
  190. .upgrade.owned,.achiev.owned
  191. {
  192. box-shadow:0px 0px 0px 2px rgba(0,0,0,0.5) inset;
  193. background:#55cf50;
  194. ]
  195. }
  196. .upgrade.owned:hover,.achiev.owned:hover
  197. {
  198. background:#7dcc7a;
  199. }
  200. .thing.cantAfford
  201. {
  202. opacity:0.65;
  203. }
  204. .upgrade.cantAfford
  205. {
  206. border:none;
  207. }
  208. .thing-costs{font-weight:bold;text-shadow:1px 1px 0px rgba(0,0,0,0.5);}
  209. .cost.hasEnough{color:#0f0;}
  210. .cost.notEnough{color:#f00;}
  211.  
  212.  
  213. .button>.thing-text
  214. {
  215. text-decoration:underline;
  216. }
  217.  
  218. .building
  219. {
  220. display:block;
  221. margin-right:0px;
  222. font-size:14px;
  223. }
  224.  
  225. .fullWidth
  226. {
  227. display:block;
  228. margin-left:0px;
  229. margin-right:0px;
  230. z-index:10;
  231. }
  232.  
  233. .fullWidth,.fullWidth:hover
  234. {
  235. background:rgba(0,0,0,0.75);
  236. box-shadow:none;
  237. color:#fff;
  238. }
  239. .fullWidth:before,.fullWidth:after
  240. {
  241. content:'';
  242. height:1px;
  243. background:rgba(255,255,255,0.75);
  244. position:absolute;
  245. left:0px;
  246. right:0px;
  247. z-index:-1;
  248. }
  249. .fullWidth .thing-icon
  250. {
  251. margin-top:-10px;
  252. margin-bottom:-10px;
  253. }
  254. .fullWidth .thing-text
  255. {
  256. margin-top:-4px;
  257. margin-bottom:-4px;
  258. }
  259.  
  260. .listing
  261. {
  262. font-weight:normal;
  263. }
  264.  
  265. .res
  266. {
  267. vertical-align:middle;
  268. }
  269.  
  270. #game.filtersOn .thing-icon{filter:drop-shadow(3px 3px 1px rgba(0,0,0,0.5));}
  271.  
  272. .tag-achievements
  273. {
  274. margin-bottom:4px;
  275. display:inline-block;
  276. font-family:Verdana;
  277. font-weight:bold;
  278. border-radius:10px;
  279. border:3px solid black;
  280. }
  281. .tag-upgradesII
  282. {
  283. margin-bottom:4px;
  284. display:inline-block;
  285. font-family:Verdana;
  286. font-weight:bold;
  287. border-radius:10px;
  288. border:3px solid black;
  289. }
  290. .tag-upgradesIII
  291. {
  292. margin-bottom:4px;
  293. display:inline-block;
  294. font-family:Verdana;
  295. font-weight:bold;
  296. border-radius:10px;
  297. border:3px solid black;
  298. }
  299. .tag-prestigeII
  300. {
  301. margin-bottom:4px;
  302. display:inline-block;
  303. font-family:Verdana;
  304. font-weight:bold;
  305. border-radius:10px;
  306. border:3px solid black;
  307. }
  308. #box-things-achievements
  309. {
  310. display:inline-block;
  311. }
  312. #box-things-upgradesII
  313. {
  314. display:inline-block;
  315. }
  316. #box-things-upgradesIV
  317. {
  318. display:inline-block;
  319. }
  320. #box-things-prestigeII
  321. {
  322. display:inline-block;
  323. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement