Skip to content

Commit b4486a5

Browse files
FifthTundraGFifthTundraG
committed
Split popups, tooltip, and upgrades into seperate SCSS files
1 parent 79fe90b commit b4486a5

4 files changed

Lines changed: 145 additions & 138 deletions

File tree

‎src/scss/main.scss‎

Lines changed: 3 additions & 138 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
@use "_variables.scss";
22
@use "buildings.scss";
3+
@use "upgrades.scss";
4+
@use "tooltip.scss";
5+
@use "popups.scss";
36

47
// non-SCSS variables that are used for anything that needs to be modified programmatically
58
:root {
@@ -187,66 +190,6 @@ small {
187190
row-gap: 4px;
188191
}
189192

190-
/* UPGRADES */
191-
.upgrades-holder {
192-
position: relative;
193-
width: 338px;
194-
height: 67.6px;
195-
overflow: hidden;
196-
border: 6px solid;
197-
border-width: 6px 0px 6px 0px;
198-
border-color: variables.$brown-border;
199-
}
200-
.upgrade {
201-
width: 59.6px;
202-
height: 59.6px;
203-
background-image: url(img/unknown-32-32.png);
204-
background-size: contain;
205-
margin: 0px;
206-
display: inline-block;
207-
cursor: pointer;
208-
vertical-align: top;
209-
border: 4px solid rgb(80, 51, 30);
210-
image-rendering: pixelated; /* makes it so there's no blur in the images */
211-
}
212-
.upgrades-holder-background {
213-
position: relative;
214-
}
215-
.upgrades-holder-background::before {
216-
content: "";
217-
position: absolute;
218-
top: 0; left: 0;
219-
width: 100%; height: 100%;
220-
background: rgba(0,0,0,0.5);
221-
}
222-
.upgrade-name {
223-
margin: 2px;
224-
color: black;
225-
}
226-
.upgrade-price{
227-
margin-left: 2px;
228-
margin-top: 6px;
229-
margin-bottom: 6px;
230-
color: black;
231-
}
232-
.upgrade-desc {
233-
margin: 2px;
234-
color: black;
235-
}
236-
237-
.upgrades-bought-stats-holder {
238-
display: grid;
239-
grid-template-columns: repeat(auto-fill, 64px);
240-
justify-content: space-between;
241-
}
242-
.upgrade-stats {
243-
width: 56px;
244-
height: 56px;
245-
margin: 3px;
246-
background-size: 56px;
247-
image-rendering: pixelated;
248-
}
249-
250193
/* social links stuff */
251194
.social-links {
252195
position: absolute;
@@ -284,47 +227,6 @@ small {
284227
background-color: variables.$colored-container;
285228
}
286229

287-
/* Infobox when hovering over a building */
288-
.tooltip {
289-
width: 285px;
290-
height: 125px;
291-
border: solid 3px black;
292-
border-right-width: 0px;
293-
background-color: variables.$colored-container;
294-
pointer-events: none; /* if it's hovered over it won't do the flickering thing */
295-
right: 346px;
296-
z-index: 1; /* legit nothing has a higher-than-normal z-index, so this will show above EVERYTHING */
297-
}
298-
.tooltip-content {
299-
padding: 0px 3px 0px 3px;
300-
}
301-
.tooltip-name {
302-
font-size: 15px;
303-
margin-top: 4px;
304-
margin-bottom: 0px;
305-
}
306-
.tooltip-price {
307-
font-size: 15px;
308-
right: 0px;
309-
top: 0px;
310-
margin-top: 4px;
311-
margin-right: 3px;
312-
}
313-
.tooltip-quote {
314-
font-size: 12px;
315-
margin-top: 5px;
316-
overflow-y: hidden;
317-
}
318-
.tooltip-description {
319-
font-size: 13px;
320-
margin-left: 1px;
321-
}
322-
.tooltip-stats {
323-
font-size: 14px;
324-
margin-top: 5px;
325-
margin-bottom: 0px;
326-
}
327-
328230
/* building icon css */
329231
.keyboard-icon {
330232
background: url(img/keyboard.png);
@@ -354,43 +256,6 @@ small {
354256
background-image: url(img/church.png);
355257
}
356258

357-
/* Popup CSS */
358-
.popup {
359-
flex-direction: column;
360-
align-items: center;
361-
width: 128px;
362-
height: 96px;
363-
padding: 0px; /* dialog boxes have padding by default */
364-
text-align: center;
365-
background-color: white;
366-
text-shadow: none;
367-
}
368-
dialog::backdrop {
369-
background-color: black;
370-
opacity: 50%;
371-
opacity: var(--dialog-backdrop-opacity); /* for programmatic modification */
372-
}
373-
.simple-popup-button-div {
374-
display: flex;
375-
justify-content: center;
376-
align-items: center;
377-
}
378-
.popup-text {
379-
margin-left: 8px;
380-
margin-right: 8px;
381-
color: black;
382-
}
383-
.popup-button {
384-
width: min-content;
385-
}
386-
.simple-popup-title {
387-
display: none;
388-
color: black;
389-
margin-top: 7px;
390-
margin-bottom: 7px;
391-
font-size: 17px;
392-
}
393-
394259
/* middle buttons */
395260
.left-middle-buttons {
396261
display: flex;

‎src/scss/popups.scss‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
.popup {
2+
flex-direction: column;
3+
align-items: center;
4+
width: 128px;
5+
height: 96px;
6+
padding: 0px; /* dialog boxes have padding by default */
7+
text-align: center;
8+
background-color: white;
9+
text-shadow: none;
10+
}
11+
dialog::backdrop {
12+
background-color: black;
13+
opacity: 50%;
14+
opacity: var(--dialog-backdrop-opacity); /* for programmatic modification */
15+
}
16+
.simple-popup-button-div {
17+
display: flex;
18+
justify-content: center;
19+
align-items: center;
20+
}
21+
.popup-text {
22+
margin-left: 8px;
23+
margin-right: 8px;
24+
color: black;
25+
}
26+
.popup-button {
27+
width: min-content;
28+
}
29+
.simple-popup-title {
30+
display: none;
31+
color: black;
32+
margin-top: 7px;
33+
margin-bottom: 7px;
34+
font-size: 17px;
35+
}

‎src/scss/tooltip.scss‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
@use "_variables.scss";
2+
3+
.tooltip {
4+
width: 285px;
5+
height: 125px;
6+
border: solid 3px black;
7+
border-right-width: 0px;
8+
background-color: variables.$colored-container;
9+
pointer-events: none; /* if it's hovered over it won't do the flickering thing */
10+
right: 346px;
11+
z-index: 1; /* legit nothing has a higher-than-normal z-index, so this will show above EVERYTHING */
12+
}
13+
.tooltip-content {
14+
padding: 0px 3px 0px 3px;
15+
}
16+
.tooltip-name {
17+
font-size: 15px;
18+
margin-top: 4px;
19+
margin-bottom: 0px;
20+
}
21+
.tooltip-price {
22+
font-size: 15px;
23+
right: 0px;
24+
top: 0px;
25+
margin-top: 4px;
26+
margin-right: 3px;
27+
}
28+
.tooltip-quote {
29+
font-size: 12px;
30+
margin-top: 5px;
31+
overflow-y: hidden;
32+
}
33+
.tooltip-description {
34+
font-size: 13px;
35+
margin-left: 1px;
36+
}
37+
.tooltip-stats {
38+
font-size: 14px;
39+
margin-top: 5px;
40+
margin-bottom: 0px;
41+
}

‎src/scss/upgrades.scss‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
@use "_variables.scss";
2+
3+
.upgrades-holder-background {
4+
position: relative;
5+
6+
.upgrades-holder {
7+
position: relative;
8+
width: 338px;
9+
height: 67.6px;
10+
overflow: hidden;
11+
border: 6px solid;
12+
border-width: 6px 0px 6px 0px;
13+
border-color: variables.$brown-border;
14+
15+
.upgrade {
16+
width: 59.6px;
17+
height: 59.6px;
18+
background-image: url(img/unknown-32-32.png);
19+
background-size: contain;
20+
margin: 0px;
21+
display: inline-block;
22+
cursor: pointer;
23+
vertical-align: top;
24+
border: 4px solid rgb(80, 51, 30);
25+
image-rendering: pixelated; /* makes it so there's no blur in the images */
26+
}
27+
}
28+
}
29+
.upgrades-holder-background::before {
30+
content: "";
31+
position: absolute;
32+
top: 0; left: 0;
33+
width: 100%; height: 100%;
34+
background: rgba(0,0,0,0.5);
35+
}
36+
37+
/* tooltip */
38+
.upgrade-name {
39+
margin: 2px;
40+
color: black;
41+
}
42+
.upgrade-price {
43+
margin-left: 2px;
44+
margin-top: 6px;
45+
margin-bottom: 6px;
46+
color: black;
47+
}
48+
.upgrade-desc {
49+
margin: 2px;
50+
color: black;
51+
}
52+
53+
/* statistics */
54+
.upgrades-bought-stats-holder {
55+
display: grid;
56+
grid-template-columns: repeat(auto-fill, 64px);
57+
justify-content: space-between;
58+
59+
.upgrade-stats {
60+
width: 56px;
61+
height: 56px;
62+
margin: 3px;
63+
background-size: 56px;
64+
image-rendering: pixelated;
65+
}
66+
}

0 commit comments

Comments
 (0)