Advertisement
LazerPixel

Css for incremental

Oct 26th, 2017
274
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.06 KB | None | 0 0
  1. .box /* [0 = x,0 = y] */
  2. {
  3. text-align:center;
  4. padding:0px;
  5. box-shadow:none;
  6. }
  7.  
  8. .thing,.box-header,.box-footer,.box-bit
  9. {
  10. background:#666666
  11. box-shadow:0px 0px 4px rgba(0,0,0,0.2),1px 1px 2px rgba(0,0,0,0.5),0px 0px 4px rgba(255,255,255,0.5) inset;
  12. }
  13. .box-bit{border-radius:20px;}
  14.  
  15. .box-header
  16. {
  17. border-bottom-left-radius:20px;
  18. border-bottom-right-radius:20px;
  19. margin-bottom:4px;
  20. }
  21. .box-footer
  22. {
  23. border-top-left-radius:20px;
  24. border-top-right-radius:20px;
  25. margin-top:4px;
  26. }
  27.  
  28. .thing.upgrade.dim.tag-.visible.notOwned {
  29. background:#6a776d;
  30. }
  31.  
  32. .thing.upgrade.dim.tag-.visible.cantAfford.notOwned {
  33. background:#cf5055;
  34. }
  35.  
  36. #box-main
  37. {
  38. left:0px;
  39. top:0px;
  40. bottom:0px;
  41. overflow:hidden;
  42. width:60%;
  43. position:absolute;
  44. }
  45. #box-res.fullWidth
  46. {
  47. width:100%;
  48. top:5%;
  49. height:5%;
  50. min-height:32px;
  51. z-index:100;
  52. position:absolute;
  53. }
  54. #box-buttons
  55. {
  56. top:0px;
  57. right:0px;
  58. bottom:0px;
  59. left:0px;
  60. position:absolute;
  61. }
  62. #box-store
  63. {
  64. right:0px;
  65. top:0px;
  66. bottom:0px;
  67. width:40%;
  68. position:absolute;
  69. }
  70. #box-buildings,#box-upgrades
  71. {
  72. top:0px;
  73. bottom:0px;
  74. width:50%;
  75. right:0%;
  76. overflow-x:hidden;
  77. overflow-y:scroll;
  78. padding-bottom:48px;/* this is to accommodate the info and settings buttons */
  79. position:absolute;
  80. }
  81. #box-buildings
  82. {right:50%;}
  83.  
  84. #box-buildings{background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 20%);}
  85. #box-upgrades{background:rgba(0,0,0,0.3);}
  86.  
  87. #bulkDisplay{margin:-11px 24px 4px 24px;}
  88.  
  89.  
  90. .thing
  91. {
  92. display:inline-block;
  93. padding:0px;
  94. margin:2px;
  95. cursor:pointer;
  96. }
  97. .thing:hover,.thing.lit
  98. {
  99. background:#6cf;
  100. }
  101. .thing.cantAfford
  102. {
  103. opacity:1;
  104. }
  105. .upgrade.cantAfford
  106. {
  107. box-shadow:0px 0px 4px #cf5055;
  108. border-radius:8px;
  109. }
  110. .upgrade.cantAfford:hover
  111. {
  112. box-shadow:0px 0px 4px #cf5055;
  113. }
  114. .upgrade.owned,.achiev.owned
  115. {
  116. background:#55cf50;
  117. }
  118. .thing-text,.thing-costs{font-weight:bold;}
  119.  
  120. .building
  121. {
  122. border-top-left-radius:20px;
  123. border-bottom-left-radius:20px;
  124. display:block;
  125. margin-right:0px;
  126. font-size:14px;
  127. }
  128.  
  129. .fullWidth
  130. {
  131. display:block;
  132. margin-left:0px;
  133. margin-right:0px;
  134. z-index:10;
  135. }
  136. #game .fullWidth
  137. {
  138. height:auto;
  139. min-height:auto;
  140. }
  141. .fullWidth,.fullWidth:hover
  142. {
  143. /*background:rgba(0,0,0,0.5);
  144. background:linear-gradient(to bottom,rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.25) 50%,rgba(0,0,0,0.5) 100%);*/
  145. background:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,0.25) 50%,rgba(0,0,0,0) 100%);
  146. box-shadow:none;
  147. }
  148. .fullWidth:before,.fullWidth:after
  149. {
  150. content:'';
  151. height:1px;
  152. background:linear-gradient(to right,rgba(255,255,255,0) 0%,rgba(255,255,255,0.25) 50%,rgba(255,255,255,0) 100%);
  153. position:absolute;
  154. left:0px;
  155. right:0px;
  156. z-index:-1;
  157. }
  158. .fullWidth:before{top:-1px;}
  159. .fullWidth:after{bottom:-1px;}
  160.  
  161. .fullWidth .thing-icon
  162. {
  163. margin-top:-14px;
  164. margin-bottom:-14px;
  165. }
  166. .fullWidth .thing-text
  167. {
  168. margin-top:-4px;
  169. margin-bottom:-4px;
  170. }
  171.  
  172. #game.filtersOn .thing-icon{filter:drop-shadow(3px 3px 1px rgba(0,0,0,0.5));}
  173.  
  174. #game.filtersOn .thing.cantAfford.notOwned
  175. {
  176. filter:blur(0.5px);
  177. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement