Added a global hidden class that can be used like disabled

src/client/css/main.css

@@ -1 +1 @@
-body,html{position:fixed;overflow:hidden;overscroll-behavior:none}body{margin:0;width:100vw;height:100vh;background-color:#2d2136}.ui-container{width:100%;height:100%;position:absolute;left:0;top:0;z-index:20;overflow:hidden;display:flex;justify-content:center;align-items:center}.ui-container>.right{position:absolute;right:10px;top:94px}.ui-container.mobile .uiTooltipInfo{display:none!important}.ui-container.hideMonetization .monetization{display:none}.mobile.ui-container>.right{top:10px;right:158px;z-index:2;display:flex;flex-direction:row-reverse}*{box-sizing:border-box;font-family:bitty;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.canvas-container{position:relative;float:left}.canvas-container.visible{opacity:1;transition:1s}.canvas-container canvas{left:0;top:0;width:100vw}.disabled{opacity:.4!important;pointer-events:none!important}[class^=ui] input,[class^=ui] textarea{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}[class^=ui] .el{height:35px;text-align:center;padding:0;background-color:transparent}[class^=ui] .textbox{border:none;outline:0;font-size:16px}[class^=ui] div.textbox{padding-top:6px}[class^=ui] .btn{cursor:pointer;display:flex;justify-content:center;align-items:center}[class^=ui] .btn:hover{background-color:#473456}[class^=ui] .spacer-h{width:100%}[class^=ui].modal .btnClose{position:absolute;background-color:#505360;color:#ff6942;cursor:pointer;height:31px;width:31px;text-align:center;right:0;top:0;padding-top:0;display:flex;justify-content:center;align-items:center}[class^=ui].modal .btnClose:hover{background-color:#676b7c}::-webkit-scrollbar{width:16px}::-webkit-scrollbar-track{background-color:#3c3f4c;-webkit-border-radius:0;border-radius:0}::-webkit-scrollbar-thumb{-webkit-border-radius:10px;border-radius:0;background:#929398}:root{scrollbar-color:#929398 #3c3f4c!important;scrollbar-width:thin!important;--color-element-default:#fcfcfc;--color-element-arcane:#fc66f7;--color-element-frost:#48edff;--color-element-fire:#ff4252;--color-element-holy:#ffeb38;--color-element-poison:#51fc9a}.q0{color:#fcfcfc}.q1{color:#4ac441}.q2{color:#3fa7dd}.q3{color:#a24eff}.q4{color:#ff6942}.color-red{color:#d43346!important}.color-redA{color:#ff4252!important}.color-blueA{color:#48edff!important}.color-blueB{color:#3fa7dd!important}.color-greenB{color:#4ac441!important}.color-yellowB{color:#faac45!important}.color-green{color:#80f643!important}.color-brownC{color:#b15a30!important}.color-brownD{color:#763b3b!important}.color-grayA{color:#fcfcfc!important}.color-grayB{color:#c0c3cf!important}.color-grayC{color:#929398!important}.color-grayD{color:#69696e!important}.color-pinkA{color:#fc66f7!important}.color-pinkB{color:#de43ae!important}.color-purpleA{color:#a24eff!important}.color-tealB{color:#51fc9a!important}[class^=ui] .renderItem{width:72px;height:72px;float:left;position:relative;cursor:pointer;box-sizing:border-box;margin:4px;background-color:#312136}[class^=ui] .renderItem.hover{background-color:rgba(72,237,255,.1)}[class^=ui] .renderItem.dragging{position:absolute;opacity:.5;pointer-events:none;background-color:transparent}[class^=ui] .renderItem.dragging .icon{filter:brightness(100%) drop-shadow(0 -4px 0 #312136) drop-shadow(0 4px 0 #312136) drop-shadow(4px 0 0 #312136) drop-shadow(-4px 0 0 #312136);-moz-filter:brightness(100%) drop-shadow(0 -4px 0 #312136) drop-shadow(0 4px 0 #312136) drop-shadow(4px 0 0 #312136) drop-shadow(-4px 0 0 #312136)}[class^=ui] .renderItem .quantity{left:6px;bottom:3px;position:absolute;color:#fcfcfc;filter:drop-shadow(0 -2px 0 #312136) drop-shadow(0 2px 0 #312136) drop-shadow(2px 0 0 #312136) drop-shadow(-2px 0 0 #312136);-moz-filter:drop-shadow(0 -2px 0 #312136) drop-shadow(0 2px 0 #312136) drop-shadow(2px 0 0 #312136) drop-shadow(-2px 0 0 #312136)}[class^=ui] .renderItem .icon{width:64px;height:64px;position:absolute;left:4px;top:4px}[class^=ui] .renderItem.eq .quantity{color:#ffeb38}[class^=ui] .renderItem.new .quantity{color:#80f643}[class^=ui] .renderItem:hover .icon{filter:brightness(160%);-moz-filter:brightness(160%)}.hasBorderShadow{box-shadow:0 -2px 0 #2d2136,0 2px 0 #2d2136,2px 0 0 #2d2136,-2px 0 0 #2d2136}
+body,html{position:fixed;overflow:hidden;overscroll-behavior:none}body{margin:0;width:100vw;height:100vh;background-color:#2d2136}.ui-container{width:100%;height:100%;position:absolute;left:0;top:0;z-index:20;overflow:hidden;display:flex;justify-content:center;align-items:center}.ui-container>.right{position:absolute;right:10px;top:94px}.ui-container.mobile .uiTooltipInfo{display:none!important}.ui-container.hideMonetization .monetization{display:none}.mobile.ui-container>.right{top:10px;right:158px;z-index:2;display:flex;flex-direction:row-reverse}*{box-sizing:border-box;font-family:bitty;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.canvas-container{position:relative;float:left}.canvas-container.visible{opacity:1;transition:1s}.canvas-container canvas{left:0;top:0;width:100vw}.disabled{opacity:.4!important;pointer-events:none!important}.hidden{display:none!important}[class^=ui] input,[class^=ui] textarea{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}[class^=ui] .el{height:35px;text-align:center;padding:0;background-color:transparent}[class^=ui] .textbox{border:none;outline:0;font-size:16px}[class^=ui] div.textbox{padding-top:6px}[class^=ui] .btn{cursor:pointer;display:flex;justify-content:center;align-items:center}[class^=ui] .btn:hover{background-color:#473456}[class^=ui] .spacer-h{width:100%}[class^=ui].modal .btnClose{position:absolute;background-color:#505360;color:#ff6942;cursor:pointer;height:31px;width:31px;text-align:center;right:0;top:0;padding-top:0;display:flex;justify-content:center;align-items:center}[class^=ui].modal .btnClose:hover{background-color:#676b7c}::-webkit-scrollbar{width:16px}::-webkit-scrollbar-track{background-color:#3c3f4c;-webkit-border-radius:0;border-radius:0}::-webkit-scrollbar-thumb{-webkit-border-radius:10px;border-radius:0;background:#929398}:root{scrollbar-color:#929398 #3c3f4c!important;scrollbar-width:thin!important;--color-element-default:#fcfcfc;--color-element-arcane:#fc66f7;--color-element-frost:#48edff;--color-element-fire:#ff4252;--color-element-holy:#ffeb38;--color-element-poison:#51fc9a}.q0{color:#fcfcfc}.q1{color:#4ac441}.q2{color:#3fa7dd}.q3{color:#a24eff}.q4{color:#ff6942}.color-red{color:#d43346!important}.color-redA{color:#ff4252!important}.color-blueA{color:#48edff!important}.color-blueB{color:#3fa7dd!important}.color-greenB{color:#4ac441!important}.color-yellowB{color:#faac45!important}.color-green{color:#80f643!important}.color-brownC{color:#b15a30!important}.color-brownD{color:#763b3b!important}.color-grayA{color:#fcfcfc!important}.color-grayB{color:#c0c3cf!important}.color-grayC{color:#929398!important}.color-grayD{color:#69696e!important}.color-pinkA{color:#fc66f7!important}.color-pinkB{color:#de43ae!important}.color-purpleA{color:#a24eff!important}.color-tealB{color:#51fc9a!important}[class^=ui] .renderItem{width:72px;height:72px;float:left;position:relative;cursor:pointer;box-sizing:border-box;margin:4px;background-color:#312136}[class^=ui] .renderItem.hover{background-color:rgba(72,237,255,.1)}[class^=ui] .renderItem.dragging{position:absolute;opacity:.5;pointer-events:none;background-color:transparent}[class^=ui] .renderItem.dragging .icon{filter:brightness(100%) drop-shadow(0 -4px 0 #312136) drop-shadow(0 4px 0 #312136) drop-shadow(4px 0 0 #312136) drop-shadow(-4px 0 0 #312136);-moz-filter:brightness(100%) drop-shadow(0 -4px 0 #312136) drop-shadow(0 4px 0 #312136) drop-shadow(4px 0 0 #312136) drop-shadow(-4px 0 0 #312136)}[class^=ui] .renderItem .quantity{left:6px;bottom:3px;position:absolute;color:#fcfcfc;filter:drop-shadow(0 -2px 0 #312136) drop-shadow(0 2px 0 #312136) drop-shadow(2px 0 0 #312136) drop-shadow(-2px 0 0 #312136);-moz-filter:drop-shadow(0 -2px 0 #312136) drop-shadow(0 2px 0 #312136) drop-shadow(2px 0 0 #312136) drop-shadow(-2px 0 0 #312136)}[class^=ui] .renderItem .icon{width:64px;height:64px;position:absolute;left:4px;top:4px}[class^=ui] .renderItem.eq .quantity{color:#ffeb38}[class^=ui] .renderItem.new .quantity{color:#80f643}[class^=ui] .renderItem:hover .icon{filter:brightness(160%);-moz-filter:brightness(160%)}.hasBorderShadow{box-shadow:0 -2px 0 #2d2136,0 2px 0 #2d2136,2px 0 0 #2d2136,-2px 0 0 #2d2136}

src/client/css/main.less

@@ -86,6 +86,10 @@ body {
 	pointer-events: none !important;
 }
 
+.hidden {
+	display: none !important;
+}
+
 [class^="ui"] {
 	input,
 	textarea {