diff --git a/data/navBar.json b/data/navBar.json index 00edc5e..a2175f2 100644 --- a/data/navBar.json +++ b/data/navBar.json @@ -18,11 +18,13 @@ "icon": "powerplates_8x8.png", "action": "navigate", "actionValue": "/powerplates", + "disabled": true, "alt": { "name": "byte", "icon": "dice3_8x8.png", "action": "navigate", - "actionValue": "/" + "actionValue": "/", + "disabled": false } }, { diff --git a/global/navBar.css b/global/navBar.css index d9f355d..84a26b9 100644 --- a/global/navBar.css +++ b/global/navBar.css @@ -22,13 +22,26 @@ li { 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)); + 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; +} .navBtnImg { width: calc(12px * var(--pxDensity)); height: calc(12px * var(--pxDensity)); diff --git a/global/navBar.js b/global/navBar.js index 7f57a73..f301034 100644 --- a/global/navBar.js +++ b/global/navBar.js @@ -21,7 +21,8 @@ function onLoadNavBar() { btn["action"] || "", btn["actionValue"] || "", btn["iconId"] || "", - btn["alt"] || "" + btn["alt"] || "", + btn["disabled"] || false )) } @@ -29,12 +30,13 @@ function onLoadNavBar() { container.appendChild(navBarAligner) } -function createNavBarBtn(icon = "", action = "", actionValue = "", iconId = "", alt = "", hidden = "") { +function createNavBarBtn(icon = "", action = "", actionValue = "", iconId = "", alt = "", disabled = false) { if (alts.includes(alt["name"])) { icon = alt["icon"] || "" action = alt["action"] || "" actionValue = alt["actionValue"] || "" iconId = alt["iconId"] || "" + disabled = alt["disabled"] || false } let onClick @@ -47,7 +49,7 @@ function createNavBarBtn(icon = "", action = "", actionValue = "", iconId = "", let btn = document.createElement("li") btn.innerHTML = ` -