made a page to generate crafting trees (TODO: docs + testing)
This commit is contained in:
@@ -5,7 +5,8 @@ const PAGES = {
|
||||
TOYS: 2,
|
||||
LICENSE: 3,
|
||||
LOADING: 4,
|
||||
LIBS: 5
|
||||
LIBS: 5,
|
||||
CRAFTING: 6
|
||||
}
|
||||
const CONSOLE_COLORS = {
|
||||
red: "color: #FF0000;",
|
||||
@@ -189,6 +190,7 @@ document.addEventListener("DOMContentLoaded", async function () {
|
||||
case (PAGES.LICENSE): loadingScreenStars(); await loadingScreenLicense(); break
|
||||
case (PAGES.TOYS): loadingScreenStars(); break
|
||||
case (PAGES.LIBS): loadingScreenStars(); break
|
||||
case (PAGES.CRAFTING): loadingScreenCrafting(); break
|
||||
}
|
||||
|
||||
if (navBarPresent) {
|
||||
|
||||
@@ -64,6 +64,9 @@ canvas {
|
||||
margin: calc(3px * var(--pxDensity)) calc(3px * var(--pxDensity)) 0% 0%;
|
||||
width: round(auto, var(--pxDensity));
|
||||
/*height: calc(6px * var(--pxDensity));*/
|
||||
border: none;
|
||||
color: #ffffff;
|
||||
font-size: inherit;
|
||||
}
|
||||
.switch {
|
||||
position: relative;
|
||||
@@ -109,4 +112,41 @@ canvas {
|
||||
aspect-ratio: 1 / 1;
|
||||
image-rendering: pixelated;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
button {
|
||||
display: inline-block;
|
||||
background-color: var(--navBarBtn_Inner);
|
||||
box-shadow: calc(1px * var(--pxDensity)) 0px var(--navBarBtn_Border),
|
||||
calc(-1px * var(--pxDensity)) 0px var(--navBarBtn_Border),
|
||||
0px calc(1px * var(--pxDensity)) var(--navBarBtn_Border),
|
||||
0px calc(-1px * var(--pxDensity)) var(--navBarBtn_Border);
|
||||
|
||||
padding: calc(1px * var(--pxDensity));
|
||||
margin: calc(3px * var(--pxDensity)) calc(3px * var(--pxDensity)) 0% 0%;
|
||||
width: round(auto, var(--pxDensity));
|
||||
/*height: calc(6px * var(--pxDensity));*/
|
||||
border: none;
|
||||
color: #ffffff;
|
||||
font-size: inherit;
|
||||
}
|
||||
button:hover {
|
||||
filter: brightness(1.35) drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
|
||||
cursor: pointer;
|
||||
}
|
||||
button:active {
|
||||
filter: brightness(0.75);
|
||||
transform: translateY(calc(1px * var(--pxDensity)));
|
||||
}
|
||||
button:disabled, button[disabled] {
|
||||
filter: brightness(0.75) drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
|
||||
cursor: not-allowed;
|
||||
}
|
||||
button:disabled:hover, button[disabled]:hover {
|
||||
filter: brightness(0.75) drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
|
||||
cursor: not-allowed;
|
||||
}
|
||||
button:disabled:active, button[disabled]:active {
|
||||
filter: brightness(0.75) drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
+3
-21
@@ -20,27 +20,9 @@ li {
|
||||
padding: 0%;
|
||||
border: none;
|
||||
filter: drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
|
||||
}
|
||||
button:hover {
|
||||
filter: brightness(1.35) drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
|
||||
cursor: pointer;
|
||||
}
|
||||
button:active {
|
||||
filter: brightness(0.75);
|
||||
transform: translateY(calc(1px * var(--pxDensity)));
|
||||
}
|
||||
.button:disabled, button[disabled] {
|
||||
filter: brightness(0.75) drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.button:disabled:hover, button[disabled]:hover {
|
||||
filter: brightness(0.75) drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.button:disabled:active, button[disabled]:active {
|
||||
filter: brightness(0.75) drop-shadow(0px calc(1px * var(--pxDensity)) rgba(0, 0, 0, 0.5));
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
margin: 0%;
|
||||
box-shadow: none;
|
||||
width: auto;
|
||||
}
|
||||
.navBtnImg {
|
||||
width: calc(12px * var(--pxDensity));
|
||||
|
||||
Reference in New Issue
Block a user