SHOW:
|
|
- or go back to the newest paste.
1 | #game | |
2 | { | |
3 | - | background:#150c01; |
3 | + | background:#040014; |
4 | background-size: cover; | |
5 | font-family: DejaVu Sans Mono, monospace; | |
6 | letter-spacing: 1px; | |
7 | font-stretch: ultra-expanded | |
8 | - | color:#d0ff00; |
8 | + | color:#ff0000; |
9 | } | |
10 | ||
11 | ||
12 | .box | |
13 | { | |
14 | - | text-align:left; |
14 | + | |
15 | - | padding: 0px; |
15 | + | |
16 | box-shadow:none; | |
17 | } | |
18 | #box-res.fullWidth | |
19 | { | |
20 | width:100%; | |
21 | top:0%; | |
22 | height:5%; | |
23 | min-height:32px; | |
24 | z-index:100; | |
25 | position:absolute; | |
26 | color:#ff0000 !important; | |
27 | - | color:#d0ff00 !important; |
27 | + | |
28 | .box-header,.box-footer,.box-bit | |
29 | { | |
30 | background:#ff0000; | |
31 | - | background:#d0ff00; |
31 | + | color:#040014; |
32 | - | color:#150c01; |
32 | + | |
33 | } | |
34 | ||
35 | .box-header{ | |
36 | font-size: 20px; | |
37 | font-style: italic; | |
38 | font-weight: 1000; | |
39 | text-align: start; | |
40 | padding-left: 20px; | |
41 | } | |
42 | .box-bit{border-radius:0px;} | |
43 | ||
44 | .box-header | |
45 | { | |
46 | border-bottom-left-radius:0px; | |
47 | border-bottom-right-radius:0px; | |
48 | margin-bottom:0px; | |
49 | } | |
50 | .box-footer | |
51 | { | |
52 | border-top-left-radius:0px; | |
53 | border-top-right-radius:0px; | |
54 | margin-top:4px; | |
55 | } | |
56 | ||
57 | ||
58 | #box-main | |
59 | { | |
60 | left:0px; | |
61 | top:0px; | |
62 | bottom:0px; | |
63 | overflow:hidden; | |
64 | width:19%; | |
65 | position:absolute; | |
66 | margin-bottom: 1%; | |
67 | margin-left: 1%; | |
68 | margin-right: 1%; | |
69 | } | |
70 | ||
71 | #box-buttons | |
72 | { | |
73 | top:0px; | |
74 | right:0px; | |
75 | bottom:0px; | |
76 | left:0px; | |
77 | position:absolute; | |
78 | } | |
79 | #box-store | |
80 | { | |
81 | right:0px; | |
82 | top:32px; | |
83 | bottom:0px; | |
84 | width:80% !important; | |
85 | position:absolute; | |
86 | margin-bottom: 1%; | |
87 | margin-left: 1%; | |
88 | margin-right: 1%; | |
89 | } | |
90 | #box-buildings,#box-upgrades, #box-buildings2,#box-upgrades2 | |
91 | { | |
92 | top:0px; | |
93 | bottom:0px; | |
94 | width:49%; | |
95 | right:0%; | |
96 | overflow-x:hidden; | |
97 | overflow-y:auto; | |
98 | position:absolute; | |
99 | } | |
100 | #box-buildings, #box-upgrades2 | |
101 | {right:51%;} | |
102 | ||
103 | #box-buildings, #box-upgrades | |
104 | {bottom: 52%;} | |
105 | ||
106 | ||
107 | ||
108 | ||
109 | ||
110 | ||
111 | .thing | |
112 | { | |
113 | display:inline-block; | |
114 | padding:0px; | |
115 | margin:0px; | |
116 | cursor:pointer; | |
117 | } | |
118 | .thing:hover,.thing.lit | |
119 | { | |
120 | background:#ff0000; | |
121 | - | background:#d0ff00; |
121 | + | |
122 | ||
123 | ||
124 | ||
125 | .upgrade.owned,.achiev.owned | |
126 | { | |
127 | color:#ff0000; | |
128 | - | color:#d0ff00; |
128 | + | |
129 | } | |
130 | .thing-text,.thing-costs{ | |
131 | ||
132 | font-weight:bold; | |
133 | font-size: 16px; | |
134 | ||
135 | } | |
136 | ||
137 | .building | |
138 | { | |
139 | border-top-left-radius:0px; | |
140 | border-bottom-left-radius:0px; | |
141 | display:block; | |
142 | margin-right:0px; | |
143 | font-size:14px; | |
144 | } | |
145 | ||
146 | - | .building, .upgrade{ |
146 | + | |
147 | - | padding-left: 4px; |
147 | + | |
148 | display:block; | |
149 | margin-left:0px; | |
150 | margin-right:0px; | |
151 | z-index:10; | |
152 | } | |
153 | #game .fullWidth | |
154 | { | |
155 | height:auto; | |
156 | min-height:auto; | |
157 | } | |
158 | ||
159 | .fullWidth:before,.fullWidth:after | |
160 | { | |
161 | content:''; | |
162 | height:1px; | |
163 | position:absolute; | |
164 | left:0px; | |
165 | right:0px; | |
166 | z-index:-1; | |
167 | } | |
168 | .fullWidth:before{top:-1px;} | |
169 | .fullWidth:after{bottom:-1px;} | |
170 | ||
171 | .fullWidth .thing-icon | |
172 | { | |
173 | margin-top:0px; | |
174 | margin-bottom:0px; | |
175 | } | |
176 | .fullWidth .thing-text | |
177 | { | |
178 | margin-top:0px; | |
179 | margin-bottom:0px; | |
180 | } | |
181 | ||
182 | ||
183 | ||
184 | #box-buildingsHeader{ | |
185 | top: 0px; | |
186 | width:49%; | |
187 | left: 0%; | |
188 | position: absolute; | |
189 | height: 32px; | |
190 | ||
191 | ||
192 | ||
193 | ||
194 | } | |
195 | ||
196 | #box-upgradesHeader{ | |
197 | top: 0px; | |
198 | width:49%; | |
199 | right: 0%; | |
200 | position: absolute; | |
201 | height: 32px; | |
202 | } | |
203 | ||
204 | #box-buildings2Header{ | |
205 | top: 51%; | |
206 | width:49%; | |
207 | right: 0%; | |
208 | position: absolute; | |
209 | height: 32px; | |
210 | ||
211 | ||
212 | ||
213 | ||
214 | } | |
215 | ||
216 | #box-upgrades2Header{ | |
217 | top: 51%; | |
218 | width:49%; | |
219 | left: 0%; | |
220 | position: absolute; | |
221 | height: 32px; | |
222 | } | |
223 | ||
224 | #box-logHeader{ | |
225 | opacity: 1; | |
226 | position: absolute; | |
227 | top: 51%; | |
228 | width: 86%; | |
229 | left: 0px; | |
230 | height: 32px; | |
231 | margin-left: 2%; | |
232 | margin-right: 2%; | |
233 | } | |
234 | ||
235 | ||
236 | #box-buildingsHeader:before, #box-upgradesHeader:before, #box-buildings2Header:before, #box-upgrades2Header:before, #box-logHeader:before{ | |
237 | ||
238 | height: 10px; | |
239 | ||
240 | ||
241 | content: ''; | |
242 | position: absolute; | |
243 | top: 0; left: 0; | |
244 | border-top: 16px solid #040014; | |
245 | border-right: 16px solid #ff0000; | |
246 | width: 0; | |
247 | } | |
248 | ||
249 | - | border-top: 16px solid #150c01; |
249 | + | |
250 | - | border-right: 16px solid #d0ff00; |
250 | + | |
251 | ||
252 | ||
253 | ||
254 | #box-buildings, #box-upgrades{ | |
255 | top: 32px; | |
256 | border: thick solid #ff0000; | |
257 | color:#ff0000; | |
258 | } | |
259 | ||
260 | #box-buildings2, #box-upgrades2{ | |
261 | - | border: thick solid #d0ff00; |
261 | + | |
262 | - | color:#d0ff00; |
262 | + | |
263 | border: thick solid #ff0000; | |
264 | color:#ff0000; | |
265 | } | |
266 | ||
267 | .building:hover, .upgrade:hover{ | |
268 | - | border: thick solid #d0ff00; |
268 | + | |
269 | - | color:#d0ff00; |
269 | + | color: #040014; |
270 | background: #ff0000; | |
271 | ||
272 | } | |
273 | #bulkDisplay{ | |
274 | - | color: #150c01; |
274 | + | |
275 | - | background: #d0ff00; |
275 | + | |
276 | top: 0px; | |
277 | } | |
278 | .upgrade{ | |
279 | width:100%; | |
280 | ||
281 | } | |
282 | ||
283 | .thing-text, .thing-costs{ | |
284 | ||
285 | padding: 8px; | |
286 | text-shadow: 0px 0px 0px #000; | |
287 | ||
288 | }.box{ | |
289 | text-shadow: 0px 0px 0px #000; | |
290 | ||
291 | } | |
292 | ||
293 | #box-log{ | |
294 | position: absolute !important; | |
295 | opacity: 1 !important; | |
296 | top: 51%; | |
297 | margin-top: 32px; | |
298 | left: 0% !important; | |
299 | bottom: 0%; | |
300 | width: 86% !important; | |
301 | background:#040014; | |
302 | color:#ff0000; | |
303 | border: thick solid #ff0000; | |
304 | ||
305 | margin-left: 2%; | |
306 | - | background:#150c01; |
306 | + | |
307 | - | color:#d0ff00; |
307 | + | |
308 | - | border: thick solid #d0ff00; |
308 | + | |
309 | background:#040014; | |
310 | color:#ff0000; | |
311 | ||
312 | ||
313 | } | |
314 | - | background:#150c01; |
314 | + | |
315 | - | color:#d0ff00; |
315 | + | |
316 | flex-direction: column; | |
317 | padding: 5%; | |
318 | background:#040014; | |
319 | color:#ff0000; | |
320 | overflow:auto; | |
321 | } | |
322 | ||
323 | - | background:#150c01; |
323 | + | #thing-0{ |
324 | - | color:#d0ff00; |
324 | + | |
325 | ||
326 | } | |
327 | #box-things-Buttons{ | |
328 | position: absolute; | |
329 | height: 50%; | |
330 | top: 0%; | |
331 | width: 100%; | |
332 | } | |
333 | ||
334 | .wobble { | |
335 | animation: wobble 0.5s; | |
336 | animation-duration: 0.5s; | |
337 | transition: transform 1.00s ease-out; | |
338 | ||
339 | } | |
340 | ||
341 | @keyframes wobble { | |
342 | 0% { | |
343 | opacity: 0.7; | |
344 | transform: scale(1); | |
345 | } | |
346 | 5% { | |
347 | opacity: 1; | |
348 | transform: scale(0.9); | |
349 | } | |
350 | 100% | |
351 | opacity: 1; | |
352 | transform: scale(1); | |
353 | } | |
354 | } | |
355 | ::-webkit-scrollbar{ | |
356 | width: 0.5vw !important; | |
357 | ||
358 | } | |
359 | #log::-webkit-scrollbar, #box-upgrades::-webkit-scrollbar, #box-buildings::-webkit-scrollbar, #box-upgrades2::-webkit-scrollbar, #box-buildings2::-webkit-scrollbar { | |
360 | width: 0.5vw !important; | |
361 | } | |
362 | #log::-webkit-scrollbar-thumb, #box-upgrades::-webkit-scrollbar-thumb, #box-buildings::-webkit-scrollbar-thumb, #box-upgrades2::-webkit-scrollbar-thumb, #box-buildings2::-webkit-scrollbar-thumb { | |
363 | background: #ff000099 !important; | |
364 | - | background: #d0ff0099 !important; |
364 | + | |
365 | } | |
366 | #log::-webkit-scrollbar-thumb:hover, #box-upgrades::-webkit-scrollbar-thumb:hover, #box-buildings::-webkit-scrollbar-thumb:hover, #box-upgrades2::-webkit-scrollbar-thumb:hover, #box-buildings2::-webkit-scrollbar-thumb:hover { | |
367 | background: #ff0000 !important; | |
368 | - | background: #d0ff00 !important; |
368 | + | |
369 | } | |
370 | ||
371 | #log::-webkit-scrollbar-track, #box-upgrades::-webkit-scrollbar-track, #box-buildings::-webkit-scrollbar-track, #box-upgrades2::-webkit-scrollbar-track, #box-buildings2::-webkit-scrollbar-track { | |
372 | background: #040014 !important; | |
373 | - | background: #150c01 !important; |
373 | + | |
374 | ||
375 | } | |
376 | ||
377 | .thing.bigButton{ | |
378 | position: absolute !important; | |
379 | margin-left: -100%; | |
380 | margin-top: -30%; | |
381 | margin-right: 10%; | |
382 | ||
383 | position: absolute; | |
384 | width: 10vw; | |
385 | height: 10vw; | |
386 | top: 28vh; | |
387 | left: 23vw; | |
388 | } | |
389 | ||
390 | .popup, #tooltip, .toast { | |
391 | - | .thing.bigButton .thing-icon{ |
391 | + | background: #040014; |
392 | color: #ff0000 ; | |
393 | border-radius: 0px; | |
394 | - | background-size: contain !important; |
394 | + | |
395 | padding: 8px 8px; | |
396 | border: thick solid #ff0000; | |
397 | box-shadow: none !important; | |
398 | - | background: #150c01; |
398 | + | |
399 | - | color: #d0ff00 ; |
399 | + | |
400 | font-weight:bold; | |
401 | } | |
402 | ||
403 | - | border: thick solid #d0ff00; |
403 | + | |
404 | #tooltipContent{ | |
405 | color: #ff0000; | |
406 | font-weight: 100; | |
407 | ||
408 | font-weight:bold; | |
409 | } | |
410 | ||
411 | #tooltip .desc, .listing.b, .listing b, .desc b{ | |
412 | - | color: #d0ff00; |
412 | + | |
413 | color: #ff0000; | |
414 | ||
415 | } | |
416 | #tooltip .thing-icon{ | |
417 | ||
418 | }.tooltipPoint{ | |
419 | border: 0px !important; | |
420 | - | color: #d0ff00; |
420 | + | |
421 | text-shadow: none !important; | |
422 | color: #ff0000; | |
423 | visibility: hidden; | |
424 | } | |
425 | #box-things-sortup, #box-things-sortup2, #box-things-Upgrades, #box-things-upgrades2 /*if necessary, change this to the name of the box containing your upgrades. it should start with "box-things" and you can use inspect element to find it*/ | |
426 | { | |
427 | display:flex; | |
428 | flex-wrap:wrap; | |
429 | - | color: #d0ff00; |
429 | + | |
430 | flex-direction: column-reverse; | |
431 | } | |
432 | ||
433 | #box-things-Buildings, #box-things-buildings2{ | |
434 | display:flex; | |
435 | flex-wrap:wrap; | |
436 | justify-content:center; /*you can change this to "flex-start" if you want upgrades aligned to the left*/ | |
437 | flex-direction: column-reverse; | |
438 | } | |
439 | ||
440 | .tag-sortup, .tag-sortup2, .building, .upgrade2.notOwned, .upgrade2.cantAfford{ | |
441 | order:3; | |
442 | } | |
443 | .upgrade.notOwned { | |
444 | order:3; | |
445 | } | |
446 | .upgrade.owned, .upgrade2.owned | |
447 | { | |
448 | order:1; | |
449 | } | |
450 | .achiev:hover{ | |
451 | margin-right: -1px; | |
452 | border: 1px solid #ff0000; | |
453 | color: #040014; | |
454 | background: #ff0000; | |
455 | ||
456 | }.achiev{ | |
457 | margin-right: -1px; | |
458 | border: 1px solid #ff0000; | |
459 | - | border: 1px solid #d0ff00; |
459 | + | color: #ff0000; |
460 | - | color: #150c01; |
460 | + | background: #040014; |
461 | - | background: #d0ff00; |
461 | + | |
462 | } | |
463 | ||
464 | .systemButton{ | |
465 | - | border: 1px solid #d0ff00; |
465 | + | |
466 | - | color: #d0ff00; |
466 | + | |
467 | - | background: #150c01; |
467 | + | |
468 | background: #040014; | |
469 | box-shadow: none; | |
470 | padding: 4px 6px; | |
471 | margin: 2px; | |
472 | position: relative; | |
473 | border: 1px solid #ff000099; | |
474 | } | |
475 | - | background: #150c01; |
475 | + | |
476 | ||
477 | background: #040014; | |
478 | ||
479 | border: 1px solid #ff0000; | |
480 | - | border: 1px solid #d0ff0099; |
480 | + | |
481 | ||
482 | .tickbox.on:before { | |
483 | background: #ff0000; | |
484 | - | background: #150c01; |
484 | + | |
485 | } | |
486 | - | border: 1px solid #d0ff00; |
486 | + | |
487 | .tickbox, .footerTitle{ | |
488 | color: #ff0000; | |
489 | } | |
490 | - | background: #d0ff00; |
490 | + | |
491 | .tickbox:before{ | |
492 | background: #040014; | |
493 | } |