Attached menu button, accessibility optimization

Author: veniware

Protest/Front/ui.css

@@ -57,23 +57,25 @@
 
 #attachedmenubutton {
 	position: absolute;
-	left: 4px;
-	top: 4px;
-	width: 48px;
-	height: 48px;
-	background-image: url(mono/logo.svg);
-	background-size: 55% 55%;
-	background-position: center;
-	background-repeat: no-repeat;
-	border-radius: 48%;
+	left: 0;
+	top: 0;
+	width: 56px;
+	height: 56px;
+
+	background:
+		url(mono/logo.svg),
+		radial-gradient(circle, transparent 52%, var(--clr-dark) 56%, var(--clr-dark) 60%, transparent 64%);
+
+	background-size: 46% 46%, 100% 100%;
+	background-position: center, center;
+	background-repeat: no-repeat, no-repeat;
+	border-radius: 50%;
 
-	transform: scaleY(0%);
 	transform-origin: 50% 50%;
 	transition: .2s;
 }
 
 #attachedmenubutton:active {
-	filter: brightness(0%);
 	background-color: rgba(32,32,32,.1);
 }
 

Protest/Front/ui.js

@@ -491,7 +491,6 @@ const MENU = {
 		menubutton.style.visibility = "hidden";
 
 		attachedmenubutton.style.transform = "none";
-		attachedmenubutton.style.boxShadow = "#202020 0 0 0 3px inset";
 
 		switch (UI.taskbarPosition) {
 		case "top":
@@ -541,8 +540,6 @@ const MENU = {
 		default: attachedmenubutton.style.transform = "scaleY(0)"; break;
 		}
 
-		attachedmenubutton.style.boxShadow = "none";
-
 		if (MENU.isAttached) {
 			MENU.isAttached = false;
 			WIN.AlignIcon();
@@ -858,7 +855,6 @@ const MENU = {
 			menufilterdot.style.left = `${menufilter.offsetLeft + Math.max(index, 0)  * 40 + 1}px`;
 			MENU.filterIndex = index;
 		}
-
 		MENU.Update(searchinput.value);
 	},
 

Protest/Front/window.js

@@ -50,8 +50,8 @@ const WIN = {
 		}
 
 		if (MENU.isAttached) {
-			attachedmenubutton.style.width = `${WIN.iconSize - 8}px`;
-			attachedmenubutton.style.height = `${WIN.iconSize - 8}px`;
+			attachedmenubutton.style.width = `${WIN.iconSize}px`;
+			attachedmenubutton.style.height = `${WIN.iconSize}px`;
 		}
 
 		for (let i = 0; i < WIN.array.length; i++) {
@@ -1047,11 +1047,11 @@ class Window {
 		okButton.onclick = event=> cancelButton.onclick(event);
 
 		return {
-			okButton: okButton,
+			okButton    : okButton,
 			cancelButton: cancelButton,
-			innerBox: innerBox,
-			buttonBox: buttonBox,
-			Close: Close
+			innerBox    : innerBox,
+			buttonBox   : buttonBox,
+			Close       : Close
 		};
 	}