fixup for checkbox pos; add wrapper & visual feedback

popup.html

@@ -42,6 +42,9 @@
 			#installed {
 				margin-top: 0.5em;
 			}
+			#installed.disabled {
+				opacity: 0.5;
+			}
 			body > .actions {
 				margin-top: 0.5em;
 			}
@@ -49,6 +52,9 @@
 			.actions > div, #unavailable {
 				margin-bottom: 0.75em;
 			}
+			.actions input, .actions label {
+				vertical-align: middle;
+			}
 
 			#unavailable {
 				border: none;
@@ -105,12 +111,6 @@
 				color: inherit;
 				text-decoration: underline;
 			}
-
-			#disableAll {
-				margin: 0 .5ex 0 0;
-				font-size: x-small;
-				vertical-align: text-bottom;
-			}
 		</style>
 
 		<script src="localization.js"></script>
@@ -126,9 +126,12 @@
 	<div id="installed"></div>
 
 	<div class="actions">
+		<div id="disable-all-wrapper">
+			<input id="disableAll" type="checkbox">
+			<label id="disableAll-label" for="disableAll"></label>
+		</div>
 		<div id="find-styles"><a id="find-styles-link" href="#"></a></div>
 		<div id="manage-styles"><a id="open-manage-link" href="manage.html"></a></div>
-		<div><input id="disableAll" type="checkbox"><label id="disableAll-label" for="disableAll"></label></div>
 		<div id="write-style"><span id="write-style-for"></span></div>
 	</div>
 

popup.js

@@ -193,5 +193,6 @@ tE("disableAll-label", "disableAllStyles");
 
 loadPrefs({"disableAll": false})
 document.getElementById("disableAll").addEventListener("change", function(event) {
+	document.getElementById("installed").classList.toggle("disabled", event.target.checked);
 	notifyAllTabs({method: "styleDisableAll", disableAll: event.target.checked});
 });