switch to red bg

global.css

@@ -308,15 +308,27 @@ summary {
   position: absolute;
 }
 
-.all-disabled #disableAll {
-  border-color: var(--red1);
-}
 .all-disabled #disableAll-label {
+  position: relative;
+  background: var(--red1);
+  width: 100%;
+  color: #fff;
   font-weight: bold;
-  color: var(--red1);
+}
+.all-disabled #disableAll-label::before {
+  position: absolute;
+  content: '';
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: var(--outer-padding, 1rem) solid var(--red1);
+  margin: calc(-1 * var(--outer-padding, 1rem));
 }
 .all-disabled #disableAll-label .svg-icon {
-  fill: currentColor;
+  fill: #fff;
+}
+.all-disabled #disableAll {
+  border-color: #fff;
 }
 
 :focus,

manage.html

@@ -350,12 +350,10 @@
         <span><a href="https://www.transifex.com/github-7/Stylus" target="_blank" i18n="linkTranslate"></a></span>
       </div>
 
-      <p>
+      <label id="disableAll-label" i18n="disableAllStyles" hidden>
-        <label id="disableAll-label" i18n="disableAllStyles">
         <input id="disableAll" type="checkbox">
         <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
       </label>
-      </p>
     </div>
   </div>
 

manage/manage.css

@@ -69,6 +69,11 @@ a:hover {
   text-align: left;
 }
 
+#disableAll-label:not([hidden]) {
+  display: block;
+  margin-top: 1rem;
+}
+
 #header h1 {
   margin-top: 0;
   margin-bottom: .3em;

manage/manage.js

@@ -71,6 +71,11 @@ newUI.renderClass();
     router.makeToggle('update-history', (...args) => showUpdateHistory(...args), [
       '/manage/updater-ui', /* global showUpdateHistory */
     ]);
+  if (prefs.get('disableAll')) {
+    $('#disableAll-label').hidden = false;
+  } else {
+    prefs.subscribe('disableAll', () => ($('#disableAll-label').hidden = false));
+  }
   $$('#header a[href^="http"]').forEach(a => (a.onclick = Events.external));
   window.on('pageshow', handleVisibilityChange);
   window.on('pagehide', handleVisibilityChange);

popup/popup.css

@@ -36,7 +36,7 @@ body:not(.blocked) .if-blocked,
   z-index: 4;
 }
 #main-actions > * {
-  margin-top: .75em;
+  margin-top: var(--outer-padding);
   padding-left: var(--inner-padding);
   display: block;
 }
@@ -45,12 +45,6 @@ body:not(.blocked) .if-blocked,
   width: fit-content;
   position: relative;
 }
-.all-disabled #installed:hover + #main-actions #disableAll-label {
-  animation: .5s blink-red infinite;
-}
-@keyframes blink-red {
-  50% { color: var(--fg); }
-}
 
 #no-styles {
   padding: 6px var(--outer-padding);