Fixup errant paste

See 8cf05ee185

_locales/en/messages.json

@@ -368,8 +368,12 @@
     "description": "Text for a checkbox that opens search results 'inline' (within the Stylus popup window)"
   },
   "findStylesInlineTooltip": {
-    "message": "Display search results inside this window.",
+    "message": "Display search results inside this window",
-    "description": "Text for a checkbox that displays search results within the Stylus popup."
+    "description": "Text for a checkbox that displays search results within the Stylus popup"
+  },
+  "findStylesExternalTooltip": {
+    "message": "Display search results on an external website",
+    "description": "Text for a checkbox that displays search results on an external website"
   },
   "genericAdd": {
     "message": "Add",
@@ -767,6 +771,30 @@
   "optionsOpenManager": {
     "message": "Manage styles"
   },
+  "optionsPopupActionElements": {
+    "message": "Action elements",
+    "description": "Label in the options page to alter the popup action elements to show either text or icons"
+  },
+  "optionsPopupClassicUI": {
+    "message": "Text and buttons",
+    "description": "Tooltip displayed when hovering the popup action elements option to choose the classic text & button format"
+  },
+  "optionsPopupIconUI": {
+    "message": "Vector icons",
+    "description": "Tooltip displayed when hovering the popup action elements option to choose displaying vector icons instead of text"
+  },
+  "optionsPopupClickAction": {
+    "message": "Style name click action",
+    "description": "Label in the options page for the action performed when clicking on a style name in the popup"
+  },
+  "optionsPopupClickActionLink": {
+    "message": "Edit style",
+    "description": "Tooltip displayed when hovering the popup click action option to choose to edit the style when clicking on the style name in the popup"
+  },
+  "optionsPopupClickActionToggle": {
+    "message": "Toggle style",
+    "description": "Tooltip displayed when hovering the popup click action option to choose to toggle a style (on or off) when clicking the style name in the popup"
+  },
   "optionsPopupWidth": {
     "message": "Popup width (in pixels)"
   },
@@ -851,6 +879,10 @@
     "message": "Temporarily applies the changes without saving.\nSave the style to make the changes permanent.",
     "description": "Tooltip for the checkbox in style editor to enable live preview while editing."
   },
+  "reEnableAllStyles": {
+    "message": "Turn all previously enabled styles back on",
+    "description": "Label for the element which turns all disabled styles back on."
+  },
   "replace": {
     "message": "Replace",
     "description": "Label before the replace input field in the editor shown on Ctrl-H"
@@ -1051,15 +1083,6 @@
     },
     "description": "Error displayed when the value of @var color is invalid"
   },
-  "styleMetaErrorRangeOrNumber": {
-    "message": "Invalid @var $type$: value must be an array containing at least one number at index zero",
-    "description": "Error displayed when the value of @var number or @var range is invalid",
-    "placeholders": {
-      "type": {
-        "content": "$1"
-      }
-    }
-  },
   "styleMetaErrorPreprocessor": {
     "message": "Unsupported @preprocessor: $preprocessor$",
     "placeholders": {
@@ -1261,10 +1284,6 @@
     "message": "Updates installed:",
     "description": "Text that displays when an update is installed on options page. Followed by the number of currently installed updates."
   },
-  "usercssAvoidOverwriting": {
-    "message": "Please change the value of @name or @namespace to avoid overwriting an existing style.",
-    "description": "Shown in a message box when attempting to save a new Usercss style that would overwrite an existing one."
-  },
   "usercssConfigIncomplete": {
     "message": "The style was updated or deleted after the configuration dialog was shown. These variables were not saved to avoid corrupting the style's metadata:"
   },
@@ -1291,6 +1310,10 @@
     "message": "Write style for: ",
     "description": "Label for toolbar pop-up that precedes the links to write a new style"
   },
+  "writeStyleForInfo": {
+    "message": "Create a new style by selecting a target URL.\nAvailable options shown in hover tooltips.",
+    "description": "Popup style creation actions tooltip to accompany icon"
+  },
   "writeStyleForURL": {
     "message": "this URL",
     "description": "Text for link in toolbar pop-up to write a new style for the current URL"

edit.html

@@ -272,7 +272,7 @@
     </template>
   </head>
 
-  <body id="stylus-edit">
+  <body id="stylus-edit" class="truegray-alpha-2">
     <div id="header">
       <h1 id="heading">&nbsp;</h1> <!-- nbsp allocates the actual height which prevents page shift -->
       <section id="basic-info">

edit/applies-to-line-widget.js

@@ -222,6 +222,7 @@ function createAppliesToLineWidget(cm) {
       requestAnimationFrame(updateWidgetStyle);
       return;
     }
+    if (prefs.get('editor.theme') !== 'default') {
       const MIN_LUMA = .05;
       const MIN_LUMA_DIFF = .4;
       const color = {
@@ -257,9 +258,8 @@ function createAppliesToLineWidget(cm) {
           color: ${fore};
         }
         .applies-to input,
-      .applies-to button,
         .applies-to select {
-        background: rgba(255, 255, 255, ${
+          background-color: rgba(255, 255, 255, ${
             Math.max(MIN_LUMA, Math.pow(Math.max(0, color.gutter.bgLuma - MIN_LUMA * 2), 2)).toFixed(2)
           });
           border: ${borderStyleForced};
@@ -267,11 +267,16 @@ function createAppliesToLineWidget(cm) {
           color: ${fore};
         }
         .applies-to .svg-icon.select-arrow {
-        fill: ${fore};
+          fill: ${fore} !important;
-        transition: none;
+        }
+        .applies-to select option {
+          background-color: ${color.gutter.bg};
         }
       `;
       document.documentElement.appendChild(actualStyle);
+    } else if (prefs.get('editor.theme') === 'default') {
+      actualStyle.textContent = '';
+    }
   }
 
   function doUpdate() {

edit/beautify.js

@@ -63,7 +63,7 @@ function beautify(event) {
         ]),
       ]));
 
-    $('#help-popup').className = 'wide';
+    $('#help-popup').className = 'main-bg wide';
 
     scope.forEach(cm => {
       setTimeout(() => {

edit/codemirror-default.css

@@ -1,12 +1,48 @@
+:root {
+  --applies-to-pseudo: hsla(214, 100%, 90%, 0.15);
+}
+
+/************ CM default ************/
+.CodeMirror.cm-s-default {
+  background: var(--gray-lightness-93);
+}
+
+.CodeMirror {
+  outline-style: solid;
+  outline-color: transparent;
+  outline-width: 1px;
+  outline-offset: -1px;
+  transition: outline-color .25s;
+}
+
+.CodeMirror-focused {
+  outline-color: var(--focus-outline);
+}
+
+.CodeMirror.cm-s-default .CodeMirror-gutters {
+  background-color: var(--truegray-alpha-1);
+  border-right: 1px solid var(--truegray-alpha-2);
+}
+
+.CodeMirror.cm-s-default .CodeMirror-activeline-background {
+  background: var(--cm-activeline-bg);
+}
+
+.CodeMirror-hints.default {
+  background-color: var(--main-bg);
+}
+
 .CodeMirror-hints {
   z-index: 999;
 }
+
+/* match Windows select hover, so no variables */
 .CodeMirror-hint:hover {
-  color: white;
+  color: #fff;
   background: #08f;
 }
 .CodeMirror {
-  border: solid #CCC 1px;
+  border: 1px solid var(--gray-lightness-76);
 }
 .CodeMirror-lint-mark-warning {
   background: none;
@@ -14,17 +50,6 @@
 .CodeMirror-dialog {
   -webkit-animation: highlight 3s cubic-bezier(.18, .02, 0, .94);
 }
-.CodeMirror-focused {
-  outline: -webkit-focus-ring-color auto 5px;
-  outline-offset: -2px;
-}
-@supports (-moz-appearance:none) {
-  /* restrict to FF */
-  .CodeMirror-focused {
-    outline: #7dadd9 auto 1px;
-    outline-offset: -1px;
-  }
-}
 .CodeMirror-search-field {
   width: 10em;
 }
@@ -32,22 +57,14 @@
   width: 5em;
 }
 .CodeMirror-search-hint {
-  color: #888;
+  color: var(--truegray);
 }
 .cm-uso-variable {
   font-weight: bold;
 }
-.cm-searching.cm-matchhighlight {
-  /* tokens found by manual search should not animate by cm-matchhighlight */
-  animation-name: search-and-match-highlighter !important;
-}
-@keyframes search-and-match-highlighter {
-  from { background-color: rgba(255, 255, 0, .4); } /* search color */
-  to   { background-color: rgba(100, 255, 100, .4); } /* sarch + highlight */
-}
 
 .CodeMirror-activeline .applies-to:before {
-  background-color: hsla(214, 100%, 90%, 0.15);
+  background-color: var(--applies-to-pseudo);
   content: "";
   top: 1em;
   left: 0;

edit/codemirror-editing-hooks.js

@@ -299,6 +299,7 @@ onDOMscriptReady('/codemirror.js').then(() => {
             break;
           default:
             value = null;
+            document.body.removeAttribute('data-match-highlight');
         }
         option = 'highlightSelectionMatches';
         break;

edit/edit.css

@@ -1,8 +1,17 @@
 :root {
   --header-narrow-min-height: 12em;
+  --match-highlighter-alpha-15: hsla(193, 99%, 38%, .15);
+  --regexp-report-mark-alpha-5: hsla(60, 100%, 50%, .5);
+  --section-label-highlight: hsl(60, 100%, 80%);
+  --cm-activeline-bg: hsl(180, 22%, 88%);
+  --darkgreen: hsl(120, 100%, 20%);
+  --global-progress: hsla(180, 66%, 36%, .25);
+  --beautify-select-gradient-left: hsla(0, 0%, 0%, .07);
+  --beautify-select-gradient-right: hsla(0, 0%, 0%, .05);
 }
 
 body {
+  display: flex;
   margin: 0;
   font: 12px arial,sans-serif;
 }
@@ -13,8 +22,8 @@ body {
   top: 0;
   left: 0;
   right: 0;
-  background-color: hsla(180, 66%, 36%, .25);
+  background-color: var(--global-progress);
-  border-left: 0 solid darkcyan;
+  border-left: 0 solid var(--darkcyan);
   z-index: 2147483647;
   opacity: 0;
   transition: opacity 2s;
@@ -49,9 +58,9 @@ label {
   position: fixed;
   top: 0;
   padding: 1rem;
-  border-right: 1px dashed #AAA;
+  border-right: 1px dashed var(--gray-lightness-66);
-  -webkit-box-shadow: 0 0 3rem -1.2rem black;
+  -webkit-box-shadow: 0 0 3rem -1.2rem var(--black);
-  box-shadow: 0 0 3rem -1.2rem black;
+  box-shadow: 0 0 3rem -1.2rem var(--black);
   box-sizing: border-box;
   z-index: 10;
   display: flex;
@@ -61,6 +70,7 @@ label {
   margin-top: 0;
 }
 #sections {
+  flex-grow: 1;
   padding-left: 280px;
 }
 #sections h2 {
@@ -122,7 +132,7 @@ label {
 
 #preview-errors {
   background-color: red;
-  color: white;
+  color: var(--white);
   padding: 0 6px;
   border-radius: 9px;
   margin-left: -.5em;
@@ -164,19 +174,19 @@ label {
 .svg-icon:hover,
 .svg-icon.info,
 .svg-icon.settings {
-  fill: #666;
+  fill: var(--gray-lightness-40);
 }
 .svg-icon,
 .svg-icon.info:hover,
 .svg-icon.settings:hover {
-  fill: #000;
+  fill: var(--black);
 }
 #options span .svg-icon {
   margin-top: -3px; /* inline info and config icons */
 }
 input:invalid {
-  background-color: rgba(255, 0, 0, 0.1);
+  background-color: var(--truegray-alpha-05);
-  color: darkred;
+  color: var(--darkred);
 }
 #enabled {
   margin-left: 0;
@@ -198,7 +208,7 @@ input:invalid {
 }
 
 #header summary:hover h2 {
-  border-color: #bbb;
+  border-color: var(--truegray-alpha-7);
 }
 
 #header summary svg {
@@ -272,7 +282,7 @@ input:invalid {
   padding: 0 1rem .3rem;
 }
 #sections > *:not(:first-child) {
-  border-top: 2px solid hsl(0, 0%, 80%);
+  border-top: 2px solid var(--truegray-alpha-3);
 }
 .add-section:after {
   content: attr(short-text);
@@ -348,18 +358,23 @@ input:invalid {
 .resize-grip-enabled .CodeMirror-scrollbar-filler {
   bottom: 7px; /* make space for resize-grip */
 }
-body[data-match-highlight="token"] .cm-matchhighlight-approved .cm-matchhighlight,
+.CodeMirror-vscrollbar,
-body[data-match-highlight="token"] .CodeMirror-selection-highlight-scrollbar {
+.CodeMirror-hscrollbar {
+  outline: 0;
+}
+body[data-match-highlight="token"]:not(.find-open) .cm-matchhighlight-approved .cm-matchhighlight,
+body[data-match-highlight="token"]:not(.find-open) .cm-matchhighlight-approved .CodeMirror-selection-highlight-scrollbar {
   animation: fadein-match-highlighter 1s cubic-bezier(.97,.01,.42,.98);
   animation-fill-mode: both;
 }
-body[data-match-highlight="selection"] .cm-matchhighlight-approved .cm-matchhighlight,
+body[data-match-highlight="selection"]:not(.find-open) .cm-matchhighlight,
-body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar {
+body[data-match-highlight="selection"]:not(.find-open) .CodeMirror-selection-highlight-scrollbar {
-  background-color: rgba(1, 151, 193, 0.1);
+  background-color: var(--match-highlighter-alpha-15);
 }
+
 @-webkit-keyframes highlight {
   from {
-    background-color: #ff9;
+    background-color: var(--section-label-highlight);
   }
   to {
     background-color: inherit;
@@ -375,7 +390,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
 }
 @keyframes fadein-match-highlighter {
   from { background-color: transparent; }
-  to   { background-color: rgba(1, 151, 193, 0.1); }
+  to   { background-color: var(--match-highlighter-alpha-15); }
 }
 .resize-grip {
   position: absolute;
@@ -416,7 +431,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
   padding: 0;
   height: 22px;
   align-items: center;
-  margin: 0 .2em 0 0;
+  margin: 0 .35em 0 0;
   white-space: nowrap;
 }
 .applies-to ul {
@@ -468,14 +483,14 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
 .add-applies-to .svg-icon,
 .remove-applies-to .svg-icon {
   pointer-events: none;
-  fill: hsl(0, 0%, 60%);
+  fill: var(--gray-lightness-60);
   height: 12px;
   width: 12px;
 }
 .add-applies-to:hover .svg-icon,
 .remove-applies-to:hover .svg-icon {
   pointer-events: none;
-  fill: hsl(0, 0%, 0%);
+  fill: var(--black);
 }
 .test-regexp {
   display: none;
@@ -487,7 +502,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
   cursor: pointer;
 }
 .regexp-report mark {
-  background-color: rgba(255, 255, 0, .5);
+  background-color: var(--regexp-report-mark-alpha-5);
 }
 .regexp-report details {
   margin-left: 1rem;
@@ -504,10 +519,10 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
   overflow-wrap: break-word;
 }
 .regexp-report details[data-type="full"] {
-  color: darkgreen;
+  color: var(--darkgreen);
 }
 .regexp-report details[data-type="partial"] {
-  color: darkgray;
+  color: var(--truegray-alpha-6);
 }
 .regexp-report details[data-type="invalid"] {
   color: maroon;
@@ -538,7 +553,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
   margin-top: -1px;
 }
 .regexp-report-note {
-  color: #999;
+  color: var(--truegray);
   position: absolute;
   margin: 0 0.5rem 0 0;
   hyphens: auto;
@@ -550,8 +565,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
   max-width: 50vw;
   position: fixed;
   display: none;
-  background-color: white;
+  box-shadow: 3px 3px 30px var(--black-alpha-5);
-  box-shadow: 3px 3px 30px rgba(0, 0, 0, 0.5);
   padding: 0.5rem;
   z-index: 99;
 }
@@ -560,7 +574,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
   max-width: 100%;
 }
 #help-popup.big {
-  box-shadow: rgba(0, 0, 0, 0.45) 0px 0px 0px 100000px !important;
+  box-shadow: var(--black-alpha-5) 0px 0px 0px 100000px !important;
   left: calc(280px - 3rem);
 }
 #help-popup.big .CodeMirror {
@@ -569,7 +583,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
 }
 #help-popup .title {
   font-weight: bold;
-  background-color: rgba(0,0,0,0.05);
+  background-color: var(--truegray-alpha-15);
   margin: -0.5rem -0.5rem 0.5rem;
   padding: .5rem 32px .5rem .5rem;
 }
@@ -594,10 +608,12 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
   word-break: break-all;
 }
 .keymap-list input {
+  background-color: var(--main-bg);
+  border: 1px solid var(--truegray-alpha-6);
   width: 100%;
 }
 .keymap-list tr:nth-child(odd) {
-  background-color: rgba(0, 0, 0, 0.07);
+  background-color: var(--truegray-alpha-1);
 }
 .keymap-list td:first-child {
   white-space: nowrap;
@@ -663,7 +679,7 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
   cursor: pointer;
 }
 #lint tr:hover {
-  background-color: rgba(0, 0, 0, 0.1);
+  background-color: var(--black-alpha-1);
 }
 #lint td[role="severity"] {
   font-size: 0;
@@ -716,12 +732,15 @@ body[data-match-highlight="selection"] .CodeMirror-selection-highlight-scrollbar
 }
 .beautify-options select {
   border: none;
-  background: linear-gradient(90deg, rgba(0, 0, 0, .05) 18px, rgba(0, 0, 0, .02) 24px);
+  background: linear-gradient(90deg, var(--beautify-select-gradient-left) 18px, var(--beautify-select-gradient-right) 24px);
   font-family: monospace;
   font-weight: bold;
   padding-left: 4px;
   margin-left: 4px;
 }
+.beautify-options select option{
+  background-color: var(--truegray-alpha-2)
+}
 
 /************ single editor **************/
 .usercss body {
@@ -751,8 +770,9 @@ html:not(.usercss) .usercss-only,
 }
 
 .usercss #name {
-  background-color: #eee;
+  background-color: var(--truegray-alpha-07);
-  color: #888;
+  color: var(--truegray);
+  cursor: not-allowed;
 }
 
 #sections .single-editor,
@@ -770,14 +790,8 @@ html:not(.usercss) .usercss-only,
   outline: none;
 }
 
-#footer a {
+.single-editor .CodeMirror.cm-s-default {
-  color: #333;
+  outline: none !important;
-  transition: color .5s;
-  text-decoration-skip: ink;
-}
-
-#footer a:hover {
-  color: #666;
 }
 
 .usercss.firefox #sections,
@@ -788,11 +802,18 @@ html:not(.usercss) .usercss-only,
 
 /************ line widget *************/
 .CodeMirror-linewidget .applies-to {
+  font: normal 12px Arial, system-ui, sans-serif;
   margin: 1em 0;
   padding: .75rem .75rem .25rem;
   padding-right: calc(1em + 20px);
 }
 
+.CodeMirror.cm-s-default .CodeMirror-linewidget .applies-to {
+  background-color: var(--gray-lightness-90);
+  border-top: 1px solid var(--truegray-alpha-3);
+  border-bottom: 1px solid var(--truegray-alpha-3);
+}
+
 .CodeMirror-linewidget .applies-to li {
   margin: 0;
 }
@@ -821,7 +842,7 @@ html:not(.usercss) .usercss-only,
     width: unset;
     position: inherit;
     border-right: none;
-    border-bottom: 1px dashed #AAA;
+    border-bottom: 1px dashed var(--gray-lightness-66);
     padding: 0;
   }
   #actions {
@@ -933,7 +954,7 @@ html:not(.usercss) .usercss-only,
     padding-left: 0;
     display: flex;
     flex-direction: column;
-    flex: 1;
+    flex: 1 1 auto;
   }
   #sections > * {
     margin: 0 .5rem .5rem;

edit/edit.js

@@ -524,7 +524,7 @@ function showToMozillaHelp(event) {
 
 function showHelp(title = '', body) {
   const div = $('#help-popup');
-  div.className = '';
+  div.className = 'main-bg';
 
   const contents = $('.contents', div);
   contents.textContent = '';

edit/global-search.css

@@ -6,9 +6,9 @@
   max-width: calc(100vw - 4rem);
   box-sizing: border-box;
   z-index: 10000;
-  background-color: white;
+  background-color: var(--white);
-  box-shadow: 4px 5px 20px -6px rgba(0, 0, 0, .5);
+  box-shadow: 4px 5px 20px -6px var(--black-alpha-5);
-  border: 1px solid hsla(0, 0%, 50%, .4);
+  border: 1px solid var(--truegray-alpha-4);
   transition: opacity .25s;
   border-top: none;
 }
@@ -21,7 +21,7 @@
   padding-right: .75em;
   display: flex;
   align-items: stretch;
-  background-color: hsla(0, 0%, 50%, .1);
+  background-color: var(--truegray-alpha-1);
 }
 
 #search-replace-dialog [data-type="content"] {
@@ -59,7 +59,7 @@
   padding: .25rem .25rem .25rem .5rem;
   margin: 0;
   border: none;
-  background-color: white;
+  background-color: var(--white);
   font-weight: bold;
   white-space: nowrap;
   color: currentColor; /* use the current theme's color instead of UserAgent's CSS */
@@ -118,7 +118,7 @@
   right: 0;
   bottom: 0;
   position: absolute;
-  border-color: hsla(180, 100%, 30%, .5);
+  border-color: var(--darkcyan-alpha-5);
   border-style: none none solid none;
   border-width: 4px;
 }
@@ -160,11 +160,11 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: hsla(0, 0%, 100%, .75);
+  background-color: var(--white-alpha-75);
 }
 
 #search-replace-dialog [data-type="status"] {
-  background-color: hsla(0, 0%, 50%, .2);
+  background-color: var(--truegray-alpha-2);
   padding-top: 2px;
   padding-left: .5rem;
   display: flex;
@@ -181,17 +181,33 @@
   opacity: 1;
 }
 
-/*********** CodeMirror ****************/
+/*********** CodeMirror search. Shouldn't need variables ****************/
-
+body.find-open .search-target-editor {
-.search-target-editor {
+  outline-color: darkorange !important;
-  outline: 1px solid darkorange;
 }
 
-#stylus .search-target-match {
+body.find-open .cm-searching {
+  background-color: rgba(255, 255, 0, .4);
+}
+
+body.find-open .cm-searching.search-target-match {
   background-color: darkorange;
   color: black;
 }
 
+body.find-open .CodeMirror-search-match {
+  background: gold;
+  border-top: 1px solid orange;
+  border-bottom: 1px solid orange;
+}
+
+/* hide default CM search highlighting */
+body .cm-searching,
+body .CodeMirror-search-match {
+  background-color: transparent;
+  border-color: transparent;
+}
+
 @media (max-width: 500px) {
   #search-replace-dialog {
     left: 0;

edit/global-search.js

@@ -753,8 +753,14 @@ onDOMready().then(() => {
   function makeTargetVisible(element) {
     const old = $('.' + TARGET_CLASS);
     if (old !== element) {
-      if (old) old.classList.remove(TARGET_CLASS);
+      if (old) {
-      if (element) element.classList.add(TARGET_CLASS);
+        old.classList.remove(TARGET_CLASS);
+        document.body.classList.remove('find-open');
+      }
+      if (element) {
+        element.classList.add(TARGET_CLASS);
+        document.body.classList.add('find-open');
+      }
     }
   }
 

global.css

@@ -1,3 +1,124 @@
+:root {
+  --white: hsl(0, 0%, 100%);
+  --white-alpha-75: hsla(0, 0%, 100%, 0.75);
+  --gray-lightness-10: hsl(0, 0%, 10%);
+  --gray-lightness-20: hsl(0, 0%, 20%);
+  --gray-lightness-24: hsl(0, 0%, 24%);
+  --gray-lightness-25: hsl(0, 0%, 25%);
+  --gray-lightness-27: hsl(0, 0%, 27%);
+  --gray-lightness-30: hsl(0, 0%, 30%);
+  --gray-lightness-33: hsl(0, 0%, 33%);
+  --gray-lightness-38: hsl(0, 0%, 38%);
+  --gray-lightness-40: hsl(0, 0%, 40%);
+  --gray-lightness-45: hsl(0, 0%, 45%);
+  --gray-lightness-46: hsl(0, 0%, 46%);
+  --truegray: hsl(0, 0%, 50%);
+  --gray-lightness-60: hsl(0, 0%, 60%);
+  --gray-lightness-65: hsl(0, 0%, 65%);
+  --gray-lightness-66: hsl(0, 0%, 66%);
+  --gray-lightness-73: hsl(0, 0%, 73%);
+  --gray-lightness-76: hsl(0, 0%, 76%);
+  --gray-lightness-80: hsl(0, 0%, 80%);
+  --gray-lightness-84: hsl(0, 0%, 84%);
+  --gray-lightness-85: hsl(0, 0%, 85%);
+  --gray-lightness-86: hsl(0, 0%, 86%);
+  --gray-lightness-87: hsl(0, 0%, 87%);
+  --gray-lightness-88: hsl(0, 0%, 88%);
+  --gray-lightness-90: hsl(0, 0%, 90%);
+  --main-bg: hsl(0, 0%, 90%);
+  --gray-lightness-92: hsl(0, 0%, 92%);
+  --gray-lightness-93: hsl(0, 0%, 93%);
+  --gray-lightness-95: hsl(0, 0%, 95%);
+  --truegray-alpha-05: hsla(0, 0%, 50%, .05);
+  --truegray-alpha-06: hsla(0, 0%, 50%, .06);
+  --truegray-alpha-07: hsla(0, 0%, 50%, .07);
+  --truegray-alpha-1: hsla(0, 0%, 50%, .1);
+  --truegray-alpha-15: hsla(0, 0%, 50%, .15);
+  --truegray-alpha-2: hsla(0, 0%, 50%, .2);
+  --truegray-alpha-25: hsla(0, 0%, 50%, .25);
+  --truegray-alpha-3: hsla(0, 0%, 50%, .3);
+  --truegray-alpha-4: hsla(0, 0%, 50%, .4);
+  --truegray-alpha-5: hsla(0, 0%, 50%, .5);
+  --truegray-alpha-6: hsla(0, 0%, 50%, .6);
+  --truegray-alpha-7: hsla(0, 0%, 50%, .7);
+  --black: hsl(0, 0%, 0%);
+  --black-alpha-05: hsla(0, 0%, 0%, .05);
+  --black-alpha-1: hsla(0, 0%, 0%, .1);
+  --black-alpha-15: hsla(0, 0%, 0%, .15);
+  --black-alpha-25: hsla(0, 0%, 0%, .25);
+  --black-alpha-3: hsla(0, 0%, 0%, .3);
+  --black-alpha-4: hsla(0, 0%, 0%, .4);
+  --black-alpha-45: hsla(0, 0%, 0%, .45);
+  --black-alpha-5: hsla(0, 0%, 0%, .5);
+  --black-alpha-7: hsla(0, 0%, 0%, .7);
+  --black-alpha-75: hsla(0, 0%, 0%, .75);
+  --darker-red: hsl(0, 100%, 42%);
+  --darkred: hsl(0, 100%, 27%);
+  --maroon: hsl(0, 100%, 25%);
+  --darker-maroon: hsl(0, 100%, 20%);
+  --red-alpha-05: hsla(0, 100%, 50%, .05);
+  --red-alpha-1: hsla(0, 100%, 50%, .1);
+  --darkgreen: hsl(120, 100%, 20%);
+  --darkcyan: hsl(180, 100%, 27%);
+  --darkcyan-alpha-5: hsla(180, 100%, 27%, .5);
+  --darkcyan-alpha-75: hsla(180, 100%, 27%, .75);
+  --focus-outline: hsl(180, 100%, 34%);
+  --selection: hsl(180, 50%, 34%);
+}
+
+/* in case custom browser bg is specified */
+html {
+  background-color: var(--white);
+}
+
+a, .disabled a:hover {
+  color: var(--black);
+  transition: color .5s;
+  text-decoration-skip: ink;
+}
+
+a:hover {
+  color: var(--gray-lightness-40);
+}
+
+.main-bg {
+  background-color: var(--main-bg);
+}
+
+.truegray-alpha-05 {
+  background-color: var(--truegray-alpha-05);
+}
+
+.truegray-alpha-06 {
+  background-color: var(--truegray-alpha-06);
+}
+
+.truegray-alpha-1 {
+  background-color: var(--truegray-alpha-1);
+}
+
+.truegray-alpha-15 {
+  background-color: var(--truegray-alpha-15);
+}
+
+.truegray-alpha-2 {
+  background-color: var(--truegray-alpha-2);
+}
+
+* {
+  outline-color: var(--focus-outline);
+}
+
+::selection {
+  color: var(--white);
+  background-color: var(--selection);
+}
+
+::-moz-selection {
+  color: var(--white);
+  background-color: var(--selection);
+}
+
 body {
   font: normal 12px Arial, system-ui, sans-serif;
 }
@@ -24,49 +145,66 @@ button {
   overflow: hidden;
   text-overflow: ellipsis;
   padding: 2px 7px;
-  border: 1px solid hsl(0, 0%, 62%);
+  border: 1px solid var(--gray-lightness-60);
   font: inherit;
   font-size: 13px;
-  color: #000;
+  color: var(--gray-lightness-10);
-  background-color: hsl(0, 0%, 100%);
+  background-color: var(--gray-lightness-95);
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAYAAADtlXTHAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QwGBBwIHvKt6QAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAL0lEQVQI12NoaGgQZ2JgYGBkYmBgYGZiYGBggrMY4VxsYsyoskQQCB2MWAxAMhkADVECDhlW9CoAAAAASUVORK5CYII=');
   background-repeat: repeat-x;
-  background-size: 100% 100%;
+  background-size: auto 100%;
-  transition: background-color .25s, border-color .25s;
+  transition: color .25s, background-color .25s, border-color .25s;
 }
 
 button:not(:disabled):hover {
-  background-color: hsl(0, 0%, 95%);
+  color: var(--black);
-  border-color: hsl(0, 0%, 52%);
+  background-color: var(--gray-lightness-90);
+  border-color: var(--truegray);
 }
 
 button:active {
-  background-color: hsl(0, 0%, 95%);
+  background-color: var(--gray-lightness-90);
-  border-color: hsl(0, 0%, 52%);
+  border-color: var(--truegray);
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAYAAADtlXTHAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QwJARIWJNZvuQAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAMElEQVQI12NoaGgIZmJgYPjLxMDA8I+JgYHhP5z1Dy7xH5X7jxQCzWQ0A9DEILYBABm5HtJk2jPHAAAAAElFTkSuQmCC');
   background-repeat: repeat-x;
   background-size: 100% 100%;
 }
 
-/* For some odd reason these hovers appear lighter than all other button hovers in every browser */
-#message-box-buttons button:not(:disabled):hover {
-  background-color: hsl(0, 0%, 90%);
-  border-color: hsl(0, 0%, 50%);
-}
-
 input  {
   font: inherit;
 }
 
-input:not([type]) {
+input:not([type]),
-  background: #fff;
+input[type="text"],
-  color: #000;
+input[type="search"] {
+  color: var(--black);
+  background: var(--gray-lightness-93);
   height: 22px;
-  min-height: 22px!important;
   line-height: 22px;
   padding: 0 3px;
   font: inherit;
-  border: 1px solid hsl(0, 0%, 66%);
+  border: 1px solid var(--gray-lightness-66);
+  transition: border-color .25s;
+}
+
+input[data-focused-via-click]:not([type]):focus,
+input[data-focused-via-click][type="number"]:focus,
+input[data-focused-via-click][type="search"]:focus,
+label[data-focused-via-click] input[type="number"]:focus,
+label[data-focused-via-click] + input[type="number"]:focus,
+input[data-focused-via-click].config-value:focus,
+label[data-focused-via-click] input.config-value:focus {
+  outline: none;
+  border-color: var(--focus-outline);
+}
+
+input[type="number"] {
+  height: 22px;
+  color: var(--black);
+  background: var(--gray-lightness-93);
+  border: 1px solid var(--gray-lightness-66);
+  padding-top: 2px;
+  padding-bottom: 2px;
 }
 
 .svg-icon.checked {
@@ -74,7 +212,7 @@ input:not([type]) {
   height: 8px;
   width: 8px;
   display: none;
-  fill: #000;
+  fill: var(--gray-lightness-20);
   margin: 2px 0 0 2px;
 }
 
@@ -89,19 +227,19 @@ input[type="checkbox"]:not(.slider) {
   position: absolute;
   left: 0;
   top: 0;
-  border: 1px solid hsl(0, 0%, 46%);
+  border: 1px solid var(--gray-lightness-46);
   height: 12px;
   width: 12px;
   display: inline-flex;
   border-radius: 2px;
-  background-color: hsla(0, 0%, 0%, .1);
+  background-color: var(--truegray-alpha-15);
   margin: 0;
   transition: background-color .1s, border-color .1s;
 }
 
 input[type="checkbox"]:not(.slider):hover {
-  border-color: hsl(0, 0%, 32%);
+  border-color: var(--black);
-  background-color: hsl(0, 0%, 82%);
+  background-color: var(--truegray-alpha-25);
 }
 
 input[type="checkbox"]:not(.slider):checked + .svg-icon.checked {
@@ -113,31 +251,46 @@ input[type="checkbox"]:not(.slider):checked + .svg-icon.checked {
 
 input[type="checkbox"]:not(.slider):disabled {
   background-color: transparent;
-  border-color: hsl(0, 0%, 50%);
+  border-color: var(--truegray);
 }
 
 input[type="checkbox"]:not(.slider):disabled + .svg-icon.checked {
-  fill: hsl(0, 0%, 50%);
+  fill: var(--truegray);
 }
 
 input[type="checkbox"]:not(.slider):disabled + .svg-icon.checked + span {
-  color: hsl(0, 0%, 50%);
+  color: var(--truegray);
 }
 
 label {
+  color: var(--gray-lightness-20);
   transition: color .1s;
 }
 
+label:hover {
+  color: var(--black)
+}
+
 select {
   -moz-appearance: none;
   -webkit-appearance: none;
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAMAAADaS4T1AAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAMUExURQAAAIGBgYGAgIGBgSS07UcAAAAEdFJOUwAiFQpfOvseAAAAFklEQVQI12NgZGBkwA+YoZAJDhkhEAACSgAd0bXODAAAAABJRU5ErkJggg==);
+  background-repeat: repeat-x;
+  background-size: 100% 100%;
   height: 22px;
   font: inherit;
-  color: #000;
+  color: var(--gray-lightness-20);
-  background-color: transparent;
+  background-color: var(--gray-lightness-88);
-  border: 1px solid hsl(0, 0%, 66%);
+  border: 1px solid var(--gray-lightness-60);
   padding: 0 20px 0 6px;
-  transition: color .5s;
+  transition: color .5s, background-color .5s, border-color .5s;
+}
+
+select:hover,
+select:focus {
+  color: var(--black);
+  background-color: var(--main-bg);
+  border-color: var(--truegray);
 }
 
 .select-resizer {
@@ -152,19 +305,24 @@ select {
   display: inline-flex;
   height: 14px;
   width: 14px;
-  fill: #000;
+  fill: var(--gray-lightness-30);
   position: absolute;
   top: 4px;
   right: 4px;
   transition: fill .5s;
 }
 
+select:hover + .svg-icon.select-arrow,
+select:focus + .svg-icon.select-arrow {
+  fill: var(--black);
+}
+
 input[type="radio"] {
   -webkit-appearance: none;
   -moz-appearance: none;
-  background: hsl(0, 0%, 88%);
+  background: var(--gray-lightness-88);
   border-radius: 50%;
-  border: 1px solid hsl(0, 0%, 60%);
+  border: 1px solid var(--gray-lightness-60);
   cursor: default;
   height: 13px;
   width: 13px;
@@ -186,7 +344,7 @@ input[type="radio"]:after {
 }
 
 input[type="radio"]:checked:after {
-  background-color: hsl(0, 0%, 30%);
+  background-color: var(--gray-lightness-30);
   transform: scale(1);
 }
 
@@ -235,9 +393,6 @@ select[disabled] > option {
 /* We can customize everything about number inputs except arrows. They're horrible in Linux FF, so we'll hide them unless hovered or focused. */
   .firefox.non-windows input[type="number"] {
     -moz-appearance: textfield;
-    background: #fff;
-    color: #000;
-    border: 1px solid hsl(0, 0%, 66%);
   }
 
   .firefox.non-windows input[type="number"]:not(:disabled):hover,
@@ -246,8 +401,7 @@ select[disabled] > option {
   }
 
   .firefox.non-windows input[type="color"] {
-    background: #fff;
+    border: 1px solid var(--gray-lightness-66);
-    border: 1px solid hsl(0, 0%, 66%);
     padding: 4px;
   }
 

install-usercss/install-usercss.css

@@ -1,18 +1,17 @@
+:root{
+  --install-btn-default: hsl(176, 50%, 35%);
+  --install-btn-default-hover: hsl(176, 50%, 40%);
+  --install-btn-update: hsl(140, 100%, 13%);
+  --install-btn-update-hover: hsl(140, 100%, 18%);
+  --warning-border: hsl(0, 28%, 60%);
+  --warnings-bg: hsl(0, 100%, 94%);
+}
+
 body {
   overflow: hidden;
   margin: 0;
   font: 12px arial, sans-serif;
-  background: white;
+  background: var(--main-bg);
-}
-
-a {
-  color: #000;
-  transition: color .5s;
-  text-decoration-skip: ink;
-}
-
-a:hover {
-  color: #666;
 }
 
 img.icon,
@@ -23,16 +22,16 @@ img.icon,
 
 .svg-icon {
   margin-left: 2px;
-  fill: #000;
+  fill: var(--black);
   transition: fill .5s;
 }
 
 a:hover .svg-icon {
-  fill: #666;
+  fill: var(--gray-lightness-40);
 }
 
 input:disabled + span {
-  color: rgb(128, 128, 128);
+  color: var(--truegray);
 }
 
 .container {
@@ -45,8 +44,8 @@ input:disabled + span {
   flex: 0 0 280px;
   box-sizing: border-box;
   padding: 1rem;
-  border-right: 1px dashed #aaa;
+  border-right: 1px dashed var(--gray-lightness-66);
-  box-shadow: 0 0 50px -18px black;
+  box-shadow: 0 0 50px -18px var(--black);
   overflow-wrap: break-word;
   overflow-y: auto;
   z-index: 100;
@@ -60,9 +59,9 @@ input:disabled + span {
   display: none;
   padding-bottom: 0;
   flex-basis: auto;
-  background: #ffe2e2;
+  background: var(--warnings-bg);
   border-right: none;
-  border-bottom: 1px dashed #aaa;
+  border-bottom: 1px dashed var(--gray-lightness-66);
 }
 
 .has-warnings .warnings {
@@ -111,19 +110,19 @@ h1 small {
 .install {
   font-family: Arial, "DejaVu Sans", Verdana, Geneva, sans-serif;
   font-size: 14px;
-  background-color: hsl(0, 0%, 33%);
+  background-color: var(--gray-lightness-33);
-  color: #eee;
+  color: var(--gray-lightness-93);
   border-radius: 4px;
   padding: 4px 38px 4px 10px;
   position: relative;
   display: inline-block;
-  text-shadow: 1px 1px 1px #333;
+  text-shadow: 1px 1px 1px var(--gray-lightness-20);
   -webkit-appearance: none;
   -moz-appearance: none;
   border-style: none;
   margin-bottom: 1ex;
   cursor: pointer;
-  box-shadow: inset 0 -1px 0 0 hsl(0, 0%, 24%), inset 0 1px 0 0 hsl(0, 0%, 30%), inset 1px 0 0 0 hsl(0, 0%, 24%);
+  box-shadow: inset 0 -1px 0 0 var(--gray-lightness-24), inset 0 1px 0 0 var(--gray-lightness-30), inset 1px 0 0 0 var(--gray-lightness-24);
   transition: color .25s, background-color .25s;
 }
 
@@ -135,8 +134,8 @@ h1 small {
 }
 
 .install:hover:not(:disabled) {
-  background-color: hsl(0, 0%, 38%);
+  background-color: var(--gray-lightness-38);
-  color: #fff;
+  color: var(--white);
   text-shadow: none;
 }
 
@@ -154,8 +153,8 @@ h1 small {
 }
 
 .install:before {
-  border-left: 1px solid rgba(0, 0, 0, .3);
+  border-left: 1px solid var(--black-alpha-3);
-  box-shadow: inset 0 -1px 0 0 hsl(0, 0%, 24%), inset 0 1px 0 0 hsl(0, 0%, 30%), inset -1px 0 0 0 hsl(0, 0%, 38%);
+  box-shadow: inset 0 -1px 0 0 var(--gray-lightness-24), inset 0 1px 0 0 var(--gray-lightness-30), inset -1px 0 0 0 var(--gray-lightness-38);
   padding: 5px 8px;
   transition: background-color .25s;
 }
@@ -163,11 +162,11 @@ h1 small {
 .install:before,
 .install:active:before,
 .install:active:hover:before {
-  background-color: hsl(176, 50%, 35%);
+  background-color: var(--install-btn-default);
 }
 
 .install:hover:before {
-  background-color: hsl(176, 50%, 40%);
+  background-color: var(--install-btn-default-hover);
 }
 
 .install:active,
@@ -179,7 +178,7 @@ h1 small {
 
 .install:active,
 .install:active:hover {
-  background-color: hsl(0, 0%, 33%);
+  background-color: var(--gray-lightness-33);
 }
 
 .install:after {
@@ -190,7 +189,7 @@ h1 small {
 
 .install:disabled {
   opacity: .25;
-  color: white;
+  color: var(--white);
   cursor: auto;
 }
 
@@ -201,25 +200,25 @@ h1 small {
 .install.reinstall:before,
 .install.reinstall:active:before,
 .install.reinstall:active:hover:before {
-  background-color: hsl(0, 0%, 20%);
+  background-color: var(--gray-lightness-20);
 }
 
 .install.reinstall:hover:before {
-  background-color: hsl(0, 0%, 25%);
+  background-color: var(--gray-lightness-25);
 }
 
 .install.reinstall:hover:before {
-  background-color: #444;
+  background-color: var(--gray-lightness-27);
 }
 
 .install.update:before,
 .install.update:active:before,
 .install.update:active:hover:before {
-  background-color: hsl(140, 100%, 13%);
+  background-color: var(--install-btn-update);
 }
 
 .install.update:hover:before {
-  background-color: hsl(140, 100%, 18%);
+  background-color: var(--install-btn-update-hover);
 }
 
 .install.update:after {
@@ -281,6 +280,19 @@ li {
   border: none;
 }
 
+/************ CM default ************/
+.CodeMirror.cm-s-default {
+  background: var(--gray-lightness-93) !important;
+}
+
+.CodeMirror.cm-s-default .CodeMirror-gutters {
+  background-color: var(--truegray-alpha-1) !important;
+  border-right: 1px solid var(--truegray-alpha-2) !important;
+}
+
+.CodeMirror {
+  outline: none !important;
+}
 /* spinner-related */
 
 #header {
@@ -457,7 +469,7 @@ label:not(.unavailable) {
   #header {
     flex: 0 1 auto;
     border-right: none;
-    border-bottom: 1px dashed #AAA;
+    border-bottom: 1px dashed var(--gray-lightness-66);
     overflow-x: auto;
     overflow-y: hidden;
     padding: 0;
@@ -530,7 +542,7 @@ label:not(.unavailable) {
     max-height: 20%;
   }
   .warning:not(:last-child) {
-    border-bottom: 1px dashed #b57c7c;
+    border-bottom: 1px dashed var(--warning-border);
     padding-bottom: 1em;
   }
   ul.applies-to,

js/prefs.js

@@ -89,6 +89,12 @@ var prefs = new function Prefs() {
     'iconset': 0,                   // 0 = dark-themed icon
                                     // 1 = light-themed icon
 
+    'popupui': 0,                   // 0 = new UI
+                                    // 1 = classic UI
+
+    'popupclick': 0,                // 0 = edit
+                                    // 1 = toggle
+
     'badgeDisabled': '#8B0000',     // badge background color when disabled
     'badgeNormal': '#006666',       // badge background color
 

manage.html

@@ -167,9 +167,9 @@
   <script src="js/storage-util.js" async></script>
 </head>
 
-<body id="stylus-manage" i18n-dragndrop-hint="dragDropMessage">
+<body id="stylus-manage" class="truegray-alpha-15" i18n-dragndrop-hint="dragDropMessage">
 
-<div id="header">
+<div id="header" class="truegray-alpha-06">
   <h1 id="manage-heading" i18n-text="manageHeading"></h1>
 
   <div id="manage-settings">
@@ -325,16 +325,18 @@
 
         <div id="newUIoptions">
           <div>
+            <div class="favicon-label-wrapper">
               <label for="manage.newUI.favicons" i18n-text="manageFavicons">
                 <input id="manage.newUI.favicons" type="checkbox">
                 <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+              </label>
               <a href="#" data-toggle-on-click="#faviconsHelp" tabindex="0">
                 <svg class="svg-icon select-arrow">
                   <title i18n-text="optionsSubheading"></title>
                   <use xlink:href="#svg-icon-select-arrow"/>
                 </svg>
               </a>
-            </label>
+            </div>
             <div id="faviconsHelp" class="hidden" i18n-text="manageFaviconsHelp">
               <div>
                 <label for="manage.newUI.faviconsGray" i18n-text="manageFaviconsGray">

manage/manage.css

@@ -5,13 +5,28 @@
   --name-padding-right: 40px;
   --actions-width: 75px;
   --onoffswitch-width: 60px;
+  --manage-zebra-alpha-bg: hsla(0, 0%, 50%, .07);
+  --styles-hidden: hsla(180, 40%, 45%, .3);
+  --usercss-label: hsl(180, 100%, 20%);
+  --exit-filters: hsla(180, 50%, 27%, .5);
+  --exit-filters-hover: hsl(180, 50%, 27%);
+  --tooltip-default-border: hsl(52, 52%, 73%);
+  --tooltip-default-bg: hsl(54, 100%, 92%);
+  --tooltip-action-complete-border: hsl(179, 38%, 66%);
+  --tooltip-action-complete-bg: hsl(166, 100%, 88%);
+  --palered: hsl(0, 81%, 67%);
+  --lightred: hsl(0, 98%, 62%);
+  --red: hsl(0, 100%, 50%);
+  --stylename-manage-hover-text: hsl(180, 100%, 15%);
+  --stylename-hover-garadient-left: hsla(180, 50%, 30%, 0.2);
+  --stylename-hover-garadient-middle: hsla(180, 20%, 10%, 0.05);
 }
 
 body {
   margin: 0;
   /* Firefox: fill the entire page for drag'n'drop to work */
   display: flex;
-  height: 100%;
+  min-height: 100%;
 }
 
 #header:lang(ja) h1 {
@@ -22,7 +37,7 @@ body.all-styles-hidden-by-filters:before,
 body.all-styles-hidden-by-filters:after {
   position: absolute;
   left: calc(3rem + var(--header-width));
-  color: hsla(180, 40%, 45%, .3);
+  color: var(--styles-hidden);
   animation: fadein 3s;
 }
 
@@ -38,25 +53,15 @@ body.all-styles-hidden-by-filters:after {
   top: 3rem;
 }
 
-a, .disabled a:hover {
-  color: #000;
-  transition: color .5s;
-  text-decoration-skip: ink;
-}
-
-a:hover {
-  color: #666;
-}
-
 #header {
   width: var(--header-width);
   height: 100vh;
   position: fixed;
   top: 0;
   padding: 1rem;
-  border-right: 1px dashed #AAA;
+  border-right: 1px dashed var(--gray-lightness-66);
-  -webkit-box-shadow: 0 0 50px -18px black;
+  -webkit-box-shadow: 0 0 50px -18px var(--black);
-  box-shadow: 0 0 50px -18px black;
+  box-shadow: 0 0 50px -18px var(--black);
   overflow: auto;
   box-sizing: border-box;
   z-index: 9;
@@ -71,11 +76,6 @@ a:hover {
   max-width: calc(100% - 30px);
 }
 
-#check-all-updates-force {
-  white-space: normal;
-  text-align: left;
-}
-
 #header h1 {
   margin-top: 0;
   margin-bottom: .3em;
@@ -103,7 +103,7 @@ a:hover {
 }
 
 #add-style-as-usercss-wrapper:not(:hover) input:not(:checked) ~ a svg {
-  fill: #aaa;
+  fill: var(--gray-lightness-66);
 }
 
 #add-style-as-usercss-wrapper input {
@@ -127,7 +127,7 @@ a:hover {
 .entry {
   margin: 0;
   padding: 1.25em 2em;
-  border-top: 1px solid #ddd;
+  border-top: 1px solid var(--gray-lightness-86);
 }
 
 .entry:first-child {
@@ -140,11 +140,11 @@ a:hover {
   transition: fill .5s;
   width: 20px;
   height: 20px;
-  fill: #666;
+  fill: var(--gray-lightness-40);
 }
 
 .svg-icon:hover {
-  fill: #000;
+  fill: var(--black);
 }
 
 .svg-icon.info {
@@ -209,7 +209,7 @@ a:hover {
 }
 
 .applies-to .target:hover {
-  background-color: rgba(128, 128, 128, .15);
+  background-color: var(--truegray-alpha-15);
 }
 
 .applies-to-extra:not([open]) {
@@ -239,7 +239,7 @@ a:hover {
   font-weight: normal;
   font-size: 11px;
   text-transform: lowercase;
-  background: rgba(128, 128, 128, .2);
+  background: var(--truegray-alpha-2);
   padding: 2px 5px 3px;
   border-radius: 4px;
   margin-left: 1ex;
@@ -250,8 +250,8 @@ a:hover {
 
 .entry.usercss .style-name-link::after {
   content: "usercss";
-  background-color: hsla(180, 100%, 20%, 1);
+  background-color: var(--usercss-label);
-  color: white;
+  color: var(--white);
 }
 
 .disabled h2 .style-name-link,
@@ -292,8 +292,8 @@ a:hover {
   padding-top: .1rem;
 }
 
-#options-buttons button,
+#options-buttons > *,
-#backup-buttons button {
+#backup-buttons > * {
   margin: 0 .2rem .5rem 0;
 }
 
@@ -330,7 +330,7 @@ a:hover {
 }
 
 #header summary:hover h2 {
-  border-color: #bbb;
+  border-color: var(--gray-lightness-73);
 }
 
 /* compact layout */
@@ -352,7 +352,7 @@ a:hover {
 }
 
 .newUI .entry.odd {
-  background-color: rgba(128, 128, 128, 0.05);
+  background-color: var(--manage-zebra-alpha-bg);
 }
 
 .newUI .entry > * {
@@ -405,6 +405,8 @@ a:hover {
 }
 
 .filter-selection select {
+  background-image: none;
+  background-color: transparent;
   height: 18px;
   border: none;
   max-width: 100%;
@@ -412,6 +414,10 @@ a:hover {
   padding-right: 14px;
 }
 
+.filter-selection select option  {
+  background-color: var(--main-bg)
+}
+
 .filter-selection .select-arrow {
   margin-top: 2px;
   top: 0;
@@ -434,7 +440,7 @@ a:hover {
 
 #filters label:hover,
 #filters .filter-selection:hover {
-  background-color: hsla(0, 0%, 50%, .2);
+  background-color: var(--truegray-alpha-2);
 }
 
 .checkmate {
@@ -463,7 +469,7 @@ a:hover {
 
 .newUI .entry .svg-icon.checked,
 .newUI .entry:hover .svg-icon.checked {
-  fill: #000;
+  fill: var(--black);
 }
 
 .newUI .entry input[type="checkbox"]:not(.slider) {
@@ -479,19 +485,26 @@ a:hover {
   cursor: pointer;
 }
 
-.newUI .entry .style-name:hover::before {
+.newUI .entry .style-name::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background: linear-gradient(to right, hsla(180, 50%, 30%, 0.2), hsla(180, 20%, 10%, 0.05) 50%, transparent);
+  background: linear-gradient(to right, var(--stylename-hover-garadient-left), var(--stylename-hover-garadient-middle) 50%, transparent);
   pointer-events: none;
+  opacity: 0;
+  transition: opacity .1s;
+  will-change: opacity;
+}
+
+.newUI .entry .style-name:hover::before {
+  opacity: 1;
 }
 
 .newUI .entry.enabled .style-name:hover .style-name-link {
-  color: hsla(180, 100%, 15%, 1);
+  color: var(--stylename-manage-hover-text);
 }
 
 .newUI .style-name:after {
@@ -526,15 +539,15 @@ a:hover {
 }
 
 .newUI .entry .svg-icon {
-  fill: #999;
+  fill: var(--gray-lightness-60);
 }
 
 .newUI .entry:hover .svg-icon {
-  fill: #666;
+  fill: var(--gray-lightness-40);
 }
 
 .newUI .entry:hover .svg-icon:hover {
-  fill: #000;
+  fill: var(--black);
 }
 
 .newUI .checking-update .check-update {
@@ -570,17 +583,17 @@ a:hover {
 
 .newUI .can-update[data-details$="locally edited"] .update svg,
 .newUI .update-problem .check-update svg {
-  fill: #ef6969;
+  fill: var(--palered);
 }
 
 .newUI .can-update[data-details$="locally edited"]:hover .update svg,
 .newUI .entry.update-problem:hover .check-update svg {
-  fill: #fd4040;
+  fill: var(--lightred);
 }
 
 .newUI .can-update[data-details$="locally edited"]:hover .update svg:hover,
 .newUI .entry.update-problem:hover .check-update svg:hover {
-  fill: red;
+  fill: var(--red);
 }
 
 .newUI .actions {
@@ -593,19 +606,19 @@ a:hover {
   margin-top: 18px;
   margin-left: -36px;
   padding: 1ex 1.5ex;
-  border: 1px solid #ded597;
+  border: 1px solid var(--tooltip-default-border);
-  background-color: #fffbd6;
+  background-color: var(--tooltip-default-bg);
   border-radius: 4px;
-  box-shadow: 2px 3px 10px rgba(0,0,0,.25);
+  box-shadow: 2px 3px 10px var(--black-alpha-25);
   font-size: 90%;
   animation: fadeout 10s;
   animation-fill-mode: both;
 }
 
 .newUI .update-problem .check-update:after {
-  background-color: red;
+  background-color: var(--red);
-  border: 1px solid #d40000;
+  border: 1px solid var(--darker-red);
-  color: white;
+  color: var(--white);
   animation: none;
 }
 
@@ -614,8 +627,8 @@ a:hover {
 }
 
 .newUI .can-update:not([data-details$="locally edited"]) .update:after {
-  background-color: #c0fff0;
+  background-color: var(--tooltip-action-complete-bg);
-  border: 1px solid #89cac9;
+  border: 1px solid var(--tooltip-action-complete-border);
 }
 
 .newUI .applies-to {
@@ -721,8 +734,7 @@ a:hover {
   height: 14px;
   display: inline-block;
   vertical-align: middle;
-  position: relative;
+  margin-left: 1px;
-  top: -1px;
 }
 
 #newUIoptions [data-toggle-on-click] > svg {
@@ -815,15 +827,6 @@ input[id^="manage.newUI"] {
   margin-top: 1ex;
 }
 
-#update-all-no-updates[data-skipped-edited="true"] {
-  font-weight: bold;
-}
-
-#update-all-no-updates[data-skipped-edited="true"]::after {
-  font-weight: normal;
-  display: block;
-}
-
 /* highlight updated/added styles */
 .highlight {
   animation: highlight 10s cubic-bezier(0,.82,.47,.98);
@@ -834,7 +837,7 @@ input[id^="manage.newUI"] {
 
 @keyframes highlight {
   from {
-    background-color: rgba(128, 128, 128, .5);
+    background-color: var(--truegray-alpha-5);
   }
   to {
     background-color: none;
@@ -859,7 +862,7 @@ input[id^="manage.newUI"] {
 }
 
 #filters > label:hover {
-  background-color: hsla(0, 0%, 50%, .4);
+  background-color: var(--truegray-alpha-4);
 }
 
 #filters {
@@ -867,9 +870,9 @@ input[id^="manage.newUI"] {
 }
 
 .active #filters-stats {
-  background-color: darkcyan;
+  background-color: var(--darkcyan);
-  border-color: darkcyan;
+  border-color: var(--darkcyan);
-  color: white;
+  color: var(--white);
   font-size: 0.7rem;
   font-weight: normal;
   padding: 2px 5px;
@@ -891,8 +894,17 @@ input[id^="manage.newUI"] {
   margin-top: 4px
 }
 
+.favicon-label-wrapper {
+  display: inline-flex;
+  flex-wrap: nowrap;
+}
+
+.favicon-label-wrapper a:hover .svg-icon {
+  fill: var(--black);
+}
+
 #reset-filters svg {
-  fill: hsla(180, 50%, 27%, .5);
+  fill: var(--exit-filters);
   width: 24px; /* widen the click area a bit */
   height: 20px;
   padding: 2px;
@@ -900,7 +912,7 @@ input[id^="manage.newUI"] {
 }
 
 #reset-filters:hover svg {
-  fill: hsla(180, 50%, 27%, 1);
+  fill: var(--exit-filters-hover);
 }
 
 #filters summary:not(.active) #reset-filters,
@@ -932,16 +944,20 @@ input[id^="manage.newUI"] {
 
 #search {
   max-width: calc(100% - 30px);
+  background-color: var(--gray-lightness-93);
+  border: 1px solid var(--gray-lightness-60);
+  transition: border-color .25s;
+}
+
+#search[data-focused-via-click]:focus {
+  border-color: var(--focus-outline);
 }
 
 #search, #manage\.newUI\.sort {
   flex-grow: 1;
-  background: #fff;
   height: 20px;
   box-sizing: border-box;
   padding: 3px 3px 3px 4px;
-  color: #000;
-  border: 1px solid hsl(0, 0%, 66%);
 }
 
 #manage\.newUI\.sort {
@@ -970,12 +986,12 @@ input[id^="manage.newUI"] {
 }
 
 .help-text mark {
-  background-color: rgba(128, 128, 128, .15);
+  background-color: var(--truegray-alpha-15);
   color: currentColor;
   padding: 2px 6px;
   font-weight: bold;
   font-family: Consolas, monospace;
-  border: 1px solid rgba(128, 128, 128, .25);
+  border: 1px solid var(--truegray-alpha-25);
   display: inline-block;
   margin: 2px;
 }
@@ -998,15 +1014,15 @@ input[id^="manage.newUI"] {
 }
 
 #import pre {
-  background: #eee;
+  background: var(--main-bg);
   overflow: auto;
   margin: 0 0 .5em 0;
 }
 
 /* drag-n-drop on import button */
 .dropzone:after {
-  background-color: rgba(0, 0, 0, 0.7);
+  background-color: var(--black-alpha-7);
-  color: white;
+  color: var(--white);
   left: 0;
   top: 0;
   right: 0;
@@ -1015,7 +1031,7 @@ input[id^="manage.newUI"] {
   position: fixed;
   padding: calc(50vh - 3em) calc(50vw - 5em);
   content: attr(dragndrop-hint);
-  text-shadow: 1px 1px 10px black;
+  text-shadow: 1px 1px 10px var(--black);
   font-size: xx-large;
   text-align: center;
   animation: fadein 1s cubic-bezier(.03, .67, .08, .94);
@@ -1029,7 +1045,7 @@ input[id^="manage.newUI"] {
 
 /* post-import report */
 #message-box details:not([data-id="invalid"]) div:hover {
-  background-color: rgba(128, 128, 128, .3);
+  background-color: var(--truegray-alpha-3);
 }
 
 #message-box details:not(:last-child) {
@@ -1141,7 +1157,7 @@ input[id^="manage.newUI"] {
     width: 100%;
     position: static;
     border-right: none;
-    border-bottom: 1px dashed #AAA;
+    border-bottom: 1px dashed var(--gray-lightness-66);
   }
 
   #manage-settings {

msgbox/msgbox.css

@@ -1,3 +1,8 @@
+:root {
+  --message-box-title: hsl(170, 40%, 69%);
+  --firebrick: hsl(0, 68%, 42%);
+}
+
 #message-box {
   top: 0;
   left: 0;
@@ -5,7 +10,7 @@
   bottom: 0;
   display: flex;
   position: fixed;
-  background-color: rgba(0, 0, 0, 0.45);
+  background-color: var(--black-alpha-45);
   animation: fadein .25s ease-in-out;
   z-index: 9999990;
   -moz-user-select: none;
@@ -21,8 +26,7 @@
   position: fixed;
   display: flex;
   flex-direction: column;
-  background-color: white;
+  box-shadow: 5px 5px 50px var(--black-alpha-25);
-  box-shadow: 5px 5px 50px rgba(0, 0, 0, 0.225);
   z-index: 9999991;
   -moz-user-select: text;
 }
@@ -57,7 +61,7 @@
 
 #message-box-title {
   font-weight: bold;
-  background-color: rgb(145, 208, 198);
+  background-color: var(--message-box-title);
   padding: .75rem 24px .75rem 52px;
   font-size: 1rem;
   position: relative;
@@ -79,8 +83,8 @@
 }
 
 #message-box.danger #message-box-title {
-  background-color: firebrick;
+  background-color: var(--firebrick);
-  color: white;
+  color: var(--white);
 }
 
 #message-box.danger #message-box-title::before {
@@ -92,11 +96,11 @@
 }
 
 #message-box.danger #message-box-close-icon svg {
-  fill: maroon;
+  fill: var(--maroon);
 }
 
 #message-box.danger #message-box-close-icon svg:hover {
-  fill: #600;
+  fill: var(--darker-maroon);
 }
 
 #message-box-close-icon {
@@ -117,6 +121,7 @@
   position: relative;
   flex-grow: 9;
   overflow-wrap: break-word;
+  outline: none;
 }
 
 #message-box-contents p:first-child {
@@ -129,7 +134,6 @@
 
 #message-box-buttons {
   padding: .75rem .375rem;
-  background-color: #f0f0f0;
   text-align: center;
 }
 

msgbox/msgbox.js

@@ -112,7 +112,7 @@ function messageBox({
     const id = 'message-box';
     messageBox.element =
       $create({id, className}, [
-        $create([
+        $create('div.main-bg', [
           $create(`#${id}-title`, title),
           $create(`#${id}-close-icon`, {onclick: messageBox.listeners.closeIcon},
             $create('SVG:svg.svg-icon', {viewBox: '0 0 20 20'},
@@ -120,7 +120,7 @@ function messageBox({
                 '5.45,16.23,3.77,14.55,8.31,10,3.77,5.45,5.45,3.77,10,8.31l4.55-4.55,1.69,1.69Z',
               }))),
           $create(`#${id}-contents`, tHTML(contents)),
-          $create(`#${id}-buttons`,
+          $create(`#${id}-buttons.truegray-alpha-2`,
             buttons.map((content, buttonIndex) => content &&
               $create('button', Object.assign({
                 buttonIndex,

options.html

@@ -28,7 +28,7 @@
   <script src="content/apply.js"></script>
 </head>
 
-<body id="stylus-options">
+<body id="stylus-options" class="truegray-alpha-2">
   <div id="options">
 
     <div class="block">
@@ -105,6 +105,57 @@
             <span></span>
           </span>
         </label>
+        <div class="radio-outer-wrapper action-elements">
+          <div class="radio-title" i18n-text="optionsPopupActionElements"></div>
+          <div class="radio-inner-wrapper">
+            <label i18n-title="optionsPopupIconUI">
+              <div class="popupui">
+                <input type="radio" name="popupui">
+                <div class="icon-wrapper use-svg">
+                  <svg class="svg-icon vector" viewBox="0 0 40 22">
+                    <path fill-rule="evenodd" clip-rule="evenodd" d="m 36.9,0.95 c -1.2,0 -2.4,0.8 -2.9,1.9 H 23.8 v -2.5 h -7.5 v 2.5 H 6 C 5.5,1.75 4.4,0.95 3.1,0.95 1.3,0.95 0,2.35 0,4.05 c 0,1.7 1.4,3.1 3.1,3.1 1.2,0 2.4,-0.8 2.9,-1.9 h 6.4 c -3,2 -5.2,5.1 -6.2,8.8 H 3.8 v 7.6 h 7.5 v -7.5 H 8.8 c 1.1,-3.6 4,-6.6 7.5,-7.9 v 1.6 h 7.5 v -1.6 c 3.6,1.4 6.4,4.2 7.5,7.9 h -2.5 v 7.5 h 7.5 v -7.5 h -2.4 c -1,-3.6 -3.2,-6.8 -6.2,-8.8 H 34 c 0.5,1.1 1.6,1.9 2.9,1.9 1.8,0 3.1,-1.4 3.1,-3.1 0,-1.8 -1.4,-3.2 -3.1,-3.2 z"/>
+                  </svg>
+                </div>
+              </div>
+            </label>
+            <label i18n-title="optionsPopupClassicUI">
+              <div class="popupui">
+                <input type="radio" name="popupui">
+                <div class="icon-wrapper use-text">
+                  <svg class="svg-icon text" viewBox="0 0 8 8">
+                    <path d="M0 0v2h.5c0-.55.45-1 1-1h1.5v5.5c0 .28-.22.5-.5.5h-.5v1h4v-1h-.5c-.28 0-.5-.22-.5-.5v-5.5h1.5c.55 0 1 .45 1 1h.5v-2h-8z"/>
+                  </svg>
+                </div>
+              </div>
+            </label>
+          </div>
+        </div>
+        <div class="radio-outer-wrapper style-name-action">
+          <div class="radio-title" i18n-text="optionsPopupClickAction"></div>
+          <div class="radio-inner-wrapper">
+            <label i18n-title="optionsPopupClickActionLink">
+              <div class="popupclick ">
+                <input type="radio" name="popupclick">
+                <div class="icon-wrapper use-edit">
+                  <svg class="svg-icon edit" viewBox="0 0 1024 1024">
+                    <path d="M 920,920 H 104 V 104 l 344,0 V 0 H 0 V 1024 H 1024 V 576 H 920 Z"/>
+                    <path d="M1088 448M256 593.152 256 768l179.712 0L1024 182.784l-180.352-179.456L256 593.152zM843.008 276.352l-407.296 407.296L345.152 593.152l407.296-407.296L843.008 276.352zM933.504 185.856l-45.248 45.248-90.496-90.496 45.248-45.248L933.504 185.856z"/>
+                  </svg>
+                </div>
+              </div>
+            </label>
+            <label i18n-title="optionsPopupClickActionToggle">
+              <div class="popupclick">
+                <input type="radio" name="popupclick">
+                <div class="icon-wrapper use-toggle">
+                  <svg class="svg-icon double-toggle" viewBox="0 0 1024 1024">
+                    <path d="M692.053333 474.502095 331.897905 474.502095c-119.369143 0-216.088381-100.766476-216.088381-225.060571S212.528762 24.380952 331.897905 24.380952l360.131048 0c119.369143 0 216.137143 100.766476 216.137143 225.060571S811.398095 474.502095 692.053333 474.502095zM692.053333 61.878857 331.897905 61.878857c-99.449905 0-180.077714 83.992381-180.077714 187.562667s80.62781 187.562667 180.077714 187.562667l360.131048 0c99.474286 0 180.077714-83.992381 180.077714-187.562667S791.527619 61.878857 692.053333 61.878857zM331.897905 399.433143c-79.579429 0-144.067048-67.145143-144.067048-149.991619s64.512-150.064762 144.067048-150.064762c79.555048 0 144.042667 67.193905 144.042667 150.064762S411.452952 399.433143 331.897905 399.433143zM331.897905 549.497905l360.131048 0c119.369143 0 216.137143 100.790857 216.137143 225.060571S811.398095 999.619048 692.053333 999.619048L331.897905 999.619048c-119.369143 0-216.088381-100.766476-216.088381-225.03619S212.528762 549.497905 331.897905 549.497905zM692.053333 924.623238c79.60381 0 144.11581-67.193905 144.11581-150.040381s-64.512-150.064762-144.11581-150.064762c-79.579429 0-144.042667 67.218286-144.042667 150.064762S612.473905 924.623238 692.053333 924.623238z"/>
+                  </svg>
+                </div>
+              </div>
+            </label>
+          </div>
+        </div>
       </div>
     </div>
 
@@ -167,7 +218,7 @@
       </div>
     </div>
 
-    <div class="block" id="actions">
+    <div class="block truegray-alpha-2" id="actions">
       <button data-cmd="reset" i18n-text="optionsResetButton" i18n-title="optionsReset"></button>
       <button data-cmd="open-manage" i18n-text="optionsOpenManager"></button>
       <div data-cmd="check-updates">

options/onoffswitch.css

@@ -1,5 +1,11 @@
 /* On/Off FlipSwitch https://proto.io/freebies/onoff/ */
 
+:root {
+  --slider-enabled-bg: hsl(165, 45%, 84%);
+  --slider-enabled-border: hsl(165, 45%, 82%);
+  --slider-enabled-circle: hsl(171, 96%, 37%);
+}
+
 .onoffswitch {
   position: relative;
   margin: 1ex 0;
@@ -33,10 +39,10 @@
   height: 12px;
   padding: 0;
   line-height: 12px;
-  border: 0 solid #E3E3E3;
+  border: 1px solid var(--gray-lightness-84);
   border-radius: 12px;
-  background-color: #E0E0E0;
+  background-color: var(--gray-lightness-87);
-  box-shadow: inset 2px 2px 4px rgba(0,0,0,0.1);
+  box-shadow: inset 2px 2px 4px var(--black-alpha-15);
 }
 
 .onoffswitch span::before {
@@ -45,21 +51,21 @@
   width: 18px;
   height: 18px;
   margin: -3px;
-  background: #efefef;
+  background: var(--gray-lightness-92);
   position: absolute;
   top: 0;
   bottom: 0;
   right: 46px;
   border-radius: 18px;
-  box-shadow: 0 3px 13px 0 rgba(0, 0, 0, 0.4);
+  box-shadow: 0 3px 13px 0 var(--black-alpha-45);
 }
 
 .onoffswitch input:checked + span {
-  background-color: #CAEBE3;
+  background-color: var(--slider-enabled-bg);
 }
 
 .onoffswitch input:checked + span, .onoffswitch input:checked + span::before {
-  border-color: #CAEBE3;
+  border-color: var(--slider-enabled-border);
 }
 
 .onoffswitch input:checked + span .onoffswitch-inner {
@@ -69,5 +75,5 @@
 .onoffswitch input:checked + span::before {
   right: 0;
   background-color: #04BA9F;
-  box-shadow: 3px 6px 18px 0 rgba(0, 0, 0, 0.2);
+  box-shadow: 3px 6px 18px 0 var(--black-alpha-25);
 }

options/options.css

@@ -10,7 +10,8 @@ html.opera body {
 }
 
 body {
-  background: #fff;
+  display: flex;
+  background: var(--main-bg);
   margin: 0;
   font-family: "Helvetica Neue", Helvetica, sans-serif;
   font-size: 12px;
@@ -18,13 +19,35 @@ body {
   max-width: 800px;
 }
 
+.radio-outer-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.radio-inner-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.radio-inner-wrapper label > :first-child {
+  margin-right: 4px;
+}
+
+.radio-title + label {
+  margin-left: auto;
+  margin-right: 1.25rem;
+}
+
 @supports (-moz-appearance:none) {
   body {
     --addons-page-left-padding: 6px;
+    --match-ff-bg: hsl(240, 9%, 98%);
     /* compensate 'html.firefox .block' padding-left */
     width: calc(100% - var(--addons-page-left-padding));
     /* match the default FF theme */
-    background-color: #f9f9fa;
+    background-color: var(--match-ff-bg)
   }
   html.firefox .block {
     padding-left: var(--addons-page-left-padding);
@@ -39,7 +62,7 @@ body {
   display: flex;
   align-items: center;
   margin: 1em 0;
-  border-bottom: 1px dotted #ccc;
+  border-bottom: 1px dotted var(--gray-lightness-80);
   padding: 0 16px .75em;
   position: relative;
 }
@@ -86,13 +109,17 @@ label > :first-child {
   flex-grow: 1;
 }
 
-label:not([disabled]) > :first-child {
+label:not([disabled]),
-  cursor: default;
+label:not([disabled]) * {
+  cursor: pointer;
+}
+
+label:not([disabled]) input[type=number] {
+  cursor: auto;
 }
 
 label:not([disabled]):hover > :first-child {
-  text-shadow: 0 0 0.01px rgba(0, 0, 0, .25);
+  text-shadow: 0 0 0.01px var(--black-alpha-25);
-  cursor: pointer;
 }
 
 input[type=number],
@@ -117,8 +144,8 @@ input[type=number] {
 }
 
 input[type=number]:invalid {
-  background-color: rgba(255, 0, 0, 0.1);
+  background-color: var(--red-alpha-1);
-  color: darkred;
+  color: var(--darkred);
 }
 
 input[type="color"] {
@@ -143,7 +170,6 @@ input[type="color"] {
   align-items: stretch;
   padding: 1em;
   white-space: nowrap;
-  background-color: rgba(0, 0, 0, .05);
   margin: 0;
 }
 
@@ -221,7 +247,7 @@ html:not(.firefox):not(.opera) #updates {
 #advanced.collapsible h1 {
   width: unset;
   padding: 0;
-  color: #333;
+  color: var(--gray-lightness-20);
   transition: color .5s;
   display: inline-flex;
   align-items: center;
@@ -234,32 +260,91 @@ html:not(.firefox):not(.opera) #updates {
 }
 
 #advanced.collapsible:not(.collapsed) h1:hover {
-  color: #666;
+  color: var(--gray-lightness-40);
 }
 
 #advanced.collapsible.collapsed h1 {
   padding: 0;
-  color: #666;
+  color: var(--gray-lightness-40);
 }
 
 #advanced.collapsible.collapsed:hover h1 {
-  color: #333;
+  color: var(--gray-lightness-20);
 }
 
 .collapsible-resizer .svg-icon {
-  fill: #333;
+  fill: var(--gray-lightness-20);
   transition: fill .5s;
   height: 16px;
   width: 16px;
 }
 
+.action-elements {
+  padding: 6px 0;
+}
+
+.icon-wrapper {
+  display: inline-flex;
+}
+
+.action-elements input,
+.style-name-action input {
+  margin: 0 3px -1px;
+}
+
+.icon-wrapper.use-text {
+  margin: 0 3px;
+}
+
+.icon-wrapper.use-edit {
+  margin: 0 5px 0 6px;
+}
+
+.action-elements label > :first-child,
+.style-name-action label > :first-child {
+  margin: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.action-elements label,
+.style-name-action label {
+  width: 56px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.icon-wrapper .svg-icon {
+  fill: var(--gray-lightness-40);
+  transition: fill .5s;
+}
+
+label:hover .icon-wrapper .svg-icon,
+input:checked + .icon-wrapper .svg-icon {
+  fill: var(--black);
+}
+
+.svg-icon.text,
+.svg-icon.vector {
+  height: 16px;
+}
+
+.svg-icon.edit {
+  height: 18px;
+}
+
+.svg-icon.double-toggle {
+  height: 22px;
+}
+
 #advanced.collapsible.collapsed .collapsible-resizer .svg-icon,
 #advanced.collapsible:not(.collapsed) .collapsible-resizer h1:hover .svg-icon {
-  fill: #666;
+  fill: var(--gray-lightness-40);
 }
 
 #advanced.collapsible.collapsed:hover .collapsible-resizer .svg-icon {
-  fill: #333;
+  fill: var(--gray-lightness-20);
 }
 
 #advanced.collapsible h1 .svg-icon {
@@ -278,12 +363,12 @@ html:not(.firefox):not(.opera) #updates {
 .svg-inline-wrapper .svg-icon {
   width: 16px;
   height: 16px;
-  fill: #666;
+  fill: var(--gray-lightness-40);
   vertical-align: sub;
 }
 
 .svg-inline-wrapper:hover .svg-icon {
-  fill: #000;
+  fill: var(--black);
 }
 
 #message-box.note > div {
@@ -306,7 +391,7 @@ html:not(.firefox):not(.opera) #updates {
   .expanded-note {
     font-size: 90%;
     white-space: normal;
-    color: #666;
+    color: var(--gray-lightness-40);
     margin-top: .5em;
     hyphens: auto;
   }

popup.html

@@ -25,18 +25,31 @@
   <template data-id="style">
     <div class="entry">
       <div class="main-controls">
+        <a class="style-edit-link-accessibility directLinkUI-el" href="edit.html?id=" tabindex="0"></a>
         <label class="style-name">
-          <input class="checker" type="checkbox">
+          <input class="checker toggleUI-el" type="checkbox">
-          <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+          <svg class="svg-icon checked toggleUI-el"><use xlink:href="#svg-icon-checked"/></svg>
         </label>
       </div>
       <div class="actions">
-        <a href="#" class="enable" i18n-text="enableStyleLabel" tabindex="0"></a>
-        <a href="#" class="disable" i18n-text="disableStyleLabel" tabindex="0"></a>
         <a href="#" class="configure" i18n-title="configureStyle" tabindex="0">
           <svg class="svg-icon config"><use xlink:href="#svg-icon-config"></use></svg>
         </a>
-        <a class="style-edit-link" href="edit.html?id=" i18n-title="editStyleLabel" tabindex="0">
+        <a href="#" class="enable directLinkUI-el" i18n-title="enableStyleLabel" tabindex="0">
+          <svg class="svg-icon toggled-off" viewbox="0 0 24 24">
+            <path d="M17,8H7c-2.21,0-4,1.79-4,4s1.79,4,4,4h10c2.21,0,4-1.79,4-4S19.21,8,17,8z M7,15c-1.66,0-3-1.34-3-3    c0-1.66,1.34-3,3-3s3,1.34,3,3C10,13.66,8.66,15,7,15z"/>
+		    <path d="M17,6H7c-3.31,0-6,2.69-6,6s2.69,6,6,6h10c3.31,0,6-2.69,6-6S20.31,6,17,6z M17,16H7c-2.21,0-4-1.79-4-4s1.79-4,4-4h10    c2.21,0,4,1.79,4,4S19.21,16,17,16z"/>
+		    <path d="M7,9c-1.66,0-3,1.34-3,3c0,1.66,1.34,3,3,3s3-1.34,3-3C10,10.34,8.66,9,7,9z"/>
+          </svg>
+        </a>
+        <a href="#" class="disable directLinkUI-el" i18n-title="disableStyleLabel" tabindex="0">
+          <svg class="svg-icon toggled-on" viewbox="0 0 24 24">
+            <path d="M17,8H7c-2.21,0-4,1.79-4,4s1.79,4,4,4h10c2.21,0,4-1.79,4-4S19.21,8,17,8z M17,15c-1.66,0-3-1.34-3-3    c0-1.66,1.34-3,3-3s3,1.34,3,3C20,13.66,18.66,15,17,15z"/>
+		    <path d="M17,6H7c-3.31,0-6,2.69-6,6s2.69,6,6,6h10c3.31,0,6-2.69,6-6S20.31,6,17,6z M17,16H7c-2.21,0-4-1.79-4-4s1.79-4,4-4h10    c2.21,0,4,1.79,4,4S19.21,16,17,16z"/>
+		    <path d="M17,9c-1.66,0-3,1.34-3,3c0,1.66,1.34,3,3,3s3-1.34,3-3C20,10.34,18.66,9,17,9z"/>
+          </svg>
+        </a>
+        <a class="style-edit-link toggleUI-el" href="edit.html?id=" i18n-title="editStyleLabel" tabindex="0">
           <svg class="svg-icon edit" viewBox="0 0 14 16">
             <path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"/>
           </svg>
@@ -50,6 +63,14 @@
     </div>
   </template>
 
+  <template data-id="confirmHotkey">
+    <a id="popup-confirm-icon" class="action-wrapper iconUI-el" i18n-title="confirmOK">
+      <svg class="svg-icon thumbsup" viewBox="0 0 16 16">
+        <path fill-rule="evenodd" d="M13.991 13.991c-.05.69-1.269 1-1.998 1H5.666l-1.668-1V7.995c1.359 0 2.108-.75 3.128-1.879 1.229-1.359 1.139-2.558.879-4.127-.08-.5.5-1 1-1 .829 0 1.998 2.729 1.998 3.998l-.02 1.03c0 .689.33.969 1.02.969H14c.63 0 .98.36 1 .999l-1 5.996-.01.01zm0-7.995h-2.018l.02-.98C11.993 3.719 10.823 0 8.994 0c-.58 0-1.169.3-1.559.77-.36.41-.5.909-.42 1.409.25 1.479.28 2.278-.629 3.278-1 1.089-1.48 1.549-2.388 1.549h-2C.94 6.996 0 7.935 0 8.994v3.998c0 1.06.94 1.999 1.999 1.999h1.719l1.439.86c.16.089.33.139.52.139h6.325c1.13 0 2.839-.5 2.999-1.879l.979-5.946c.02-.08.02-.14.02-.2-.03-1.17-.84-1.969-1.999-1.969h-.01z"/>
+      </svg>
+    </a>
+  </template>
+
   <template data-id="writeStyle">
     <a class="write-style-link"></a>
   </template>
@@ -169,10 +190,22 @@
 <body id="stylus-popup">
 
   <div id="confirm">
-    <div>
+    <div class="main-bg">
       <b>Style's Name</b>
       <span i18n-text="deleteStyleConfirm"></span>
-      <div>
+      <div class="iconUI-el">
+        <a id="popup-delete-icon" href="#" class="action-wrapper" i18n-title="confirmDelete" data-cmd="ok" tabindex="0">
+          <svg class="svg-icon remove" viewBox="0 0 14 16">
+            <path fill-rule="evenodd" d="M11 2H9c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1H2c-.55 0-1 .45-1 1v1c0 .55.45 1 1 1v9c0 .55.45 1 1 1h7c.55 0 1-.45 1-1V5c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm-1 12H3V5h1v8h1V5h1v8h1V5h1v8h1V5h1v9zm1-10H2V3h9v1z"/>
+          </svg>
+        </a>
+        <a id="popup-cancel-icon" href="#" class="action-wrapper iconUI-el" i18n-title="confirmCancel" data-cmd="cancel" tabindex="0">
+          <svg class="svg-icon cancel" viewBox="0 0 14 16">
+            <path fill-rule="evenodd" d="M7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm0 1.3c1.3 0 2.5.44 3.47 1.17l-8 8A5.755 5.755 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zm0 11.41c-1.3 0-2.5-.44-3.47-1.17l8-8c.73.97 1.17 2.17 1.17 3.47 0 3.14-2.56 5.7-5.7 5.7z"/>
+          </svg>
+        </a>
+      </div>
+      <div class="classicUI-el">
         <button i18n-text="confirmDelete" data-cmd="ok"></button>
         <button i18n-text="confirmCancel" data-cmd="cancel"></button>
       </div>
@@ -183,40 +216,95 @@
     <aside id="hotkey-info" i18n-title="popupHotkeysTooltip"></aside>
   </div>
 
-  <div class="actions">
+  <div id="popup-manage-wrapper" class="action-wrapper">
-    <div id="disable-all-wrapper">
+    <button id="popup-manage-button" data-href="manage.html" i18n-title="popupManageTooltip">
+      <span class="classicUI-el" i18n-text="openManage"></span>
+      <svg class="iconUI-el svg-icon manager" viewBox="0 0 14 14">
+        <path d="M2.33 6.33a.5.5 0 0 1-.5-.5V1.75a.5.5 0 0 1 1 0v4.08a.5.5 0 0 1-.5.5zM7 12.75a.5.5 0 0 1-.5-.5V7a.5.5 0 0 1 1 0v5.25a.5.5 0 0 1-.5.5zM11.67 7.5a.5.5 0 0 1-.5-.5V1.75a.5.5 0 0 1 1 0V7a.5.5 0 0 1-.5.5zM4.08 7.67H.58a.5.5 0 0 0 0 1h1.25v3.58a.5.5 0 0 0 1 0V8.67h1.25a.5.5 0 0 0 0-1zM8.75 4.17H7.5V1.75a.5.5 0 0 0-1 0v2.42H5.25a.5.5 0 0 0 0 1h3.5a.5.5 0 0 0 0-1zM13.42 8.83h-3.5a.5.5 0 0 0 0 1h1.25v2.42a.5.5 0 0 0 1 0V9.83h1.25a.5.5 0 0 0 0-1z"/>
+      </svg>
+    </button>
+  </div>
+  <div id="popup-options-wrapper" class="action-wrapper">
+    <button id="popup-options-button" i18n-title="openOptionsPopup">
+      <span class="classicUI-el" i18n-text="openOptionsPopup"></span>
+      <svg class="iconUI-el svg-icon options" viewBox="0 0 16 16">
+        <path fill-rule="evenodd" d="M8,0C7.6,0,7.3,0,6.9,0.1v2.2C6.1,2.5,5.4,2.8,4.8,3.2L3.2,1.6c-0.6,0.4-1.1,1-1.6,1.6l1.6,1.6C2.8,5.4,2.5,6.1,2.3,6.9H0.1C0,7.3,0,7.6,0,8c0,0.4,0,0.7,0.1,1.1h2.2c0.1,0.8,0.4,1.5,0.9,2.1l-1.6,1.6c0.4,0.6,1,1.1,1.6,1.6l1.6-1.6c0.6,0.4,1.4,0.7,2.1,0.9v2.2C7.3,16,7.6,16,8,16c0.4,0,0.7,0,1.1-0.1v-2.2c0.8-0.1,1.5-0.4,2.1-0.9l1.6,1.6c0.6-0.4,1.1-1,1.6-1.6l-1.6-1.6c0.4-0.6,0.7-1.4,0.9-2.1h2.2C16,8.7,16,8.4,16,8c0-0.4,0-0.7-0.1-1.1h-2.2c-0.1-0.8-0.4-1.5-0.9-2.1l1.6-1.6c-0.4-0.6-1-1.1-1.6-1.6l-1.6,1.6c-0.6-0.4-1.4-0.7-2.1-0.9V0.1C8.7,0,8.4,0,8,0z M8,4.3c2.1,0,3.7,1.7,3.7,3.7c0,0,0,0,0,0c0,2.1-1.7,3.7-3.7,3.7c0,0,0,0,0,0c-2.1,0-3.7-1.7-3.7-3.7c0,0,0,0,0,0C4.3,5.9,5.9,4.3,8,4.3C8,4.3,8,4.3,8,4.3z"/>
+      </svg>
+    </button>
+  </div>
+  <div id="find-styles-wrapper" class="action-wrapper truegray-alpha-1">
+    <div id="find-styles">
+      <a id="find-styles-link" class="classicUI-el" i18n-text="findStyles" i18n-title="findStylesForSite" tabindex="0"></a>
+      <a id="find-styles-icon" href="#" class="iconUI-el" i18n-title="findStylesForSite" tabindex="0">
+        <svg  class="svg-icon search" viewBox="0 0 24 24">
+          <path d="M18,13v7H4V6h5.02C9.07,5.29,9.24,4.62,9.5,4H2v18h18v-7L18,13z M16.5,18h-11l2.75-3.53l1.96,2.36l2.75-3.54L16.5,18z    M19.3,8.89C19.74,8.19,20,7.38,20,6.5C20,4.01,17.99,2,15.5,2S11,4.01,11,6.5s2.01,4.5,4.49,4.5c0.88,0,1.7-0.26,2.39-0.7   L21,13.42L22.42,12L19.3,8.89z M15.5,9C14.12,9,13,7.88,13,6.5S14.12,4,15.5,4S18,5.12,18,6.5S16.88,9,15.5,9z"/>
+        </svg>
+      </a>
+      <span id="find-styles-inline-group">
+        <label i18n-title="findStylesInlineTooltip">
+          <input id="popup.findStylesInline" class="checker toggle-inline classicUI-el" type="checkbox">
+          <svg class="svg-icon checked classicUI-el"><use xlink:href="#svg-icon-checked"/></svg>
+          <span class="classicUI-el" i18n-text="findStylesInline"></span>
+          <a id="find-inline-icon" href="#" class="iconUI-el" tabindex="0">
+            <svg viewBox="0 0 20 20" class="svg-icon inline">
+              <path d="M4,4h5v2H6v8h8v-3h2v5H4V4z M 17,9 H 11 V 3 l 2,2 4,-4 2,2 -4,4 z"/>
+            </svg>
+          </a>
+          <a id="find-external-icon" href="#" class="iconUI-el" i18n-title="findStylesExternalTooltip" tabindex="0">
+            <svg class="svg-icon external" viewBox="0 0 20 20">
+              <path d="M4,4h5v2H6v8h8v-3h2v5H4V4z M11,3h6v6l-2-2l-4,4L9,9l4-4L11,3z"/>
+            </svg>
+          </a>
+        </label>
+        <div id="find-external-icon-noclick" class="iconUI-el" i18n-title="findStylesExternalTooltip">
+          <svg class="svg-icon external noclick" viewBox="0 0 20 20">
+            <path d="M4,4h5v2H6v8h8v-3h2v5H4V4z M11,3h6v6l-2-2l-4,4L9,9l4-4L11,3z"/>
+          </svg>
+        </div>
+      </span>
+    </div>
+  </div>
+  <div id="popup-wiki-wrapper" class="action-wrapper">
+    <button id="popup-wiki-button" i18n-title="linkGetHelp" data-href="https://github.com/openstyles/stylus/wiki">
+      <span class="classicUI-el" i18n-text="linkStylusWiki"></span>
+      <svg class="iconUI-el svg-icon wiki" viewBox="0 0 24 24">
+        <path d="M12.09 13.119c-.936 1.932-2.217 4.548-2.853 5.728-.616 1.074-1.127.931-1.532.029-1.406-3.321-4.293-9.144-5.651-12.409-.251-.601-.441-.987-.619-1.139-.181-.15-.554-.24-1.122-.271C.103 5.033 0 4.982 0 4.898v-.455l.052-.045c.924-.005 5.401 0 5.401 0l.051.045v.434c0 .119-.075.176-.225.176l-.564.031c-.485.029-.727.164-.727.436 0 .135.053.33.166.601 1.082 2.646 4.818 10.521 4.818 10.521l.136.046 2.411-4.81-.482-1.067-1.658-3.264s-.318-.654-.428-.872c-.728-1.443-.712-1.518-1.447-1.617-.207-.023-.313-.05-.313-.149v-.468l.06-.045h4.292l.113.037v.451c0 .105-.076.15-.227.15l-.308.047c-.792.061-.661.381-.136 1.422l1.582 3.252 1.758-3.504c.293-.64.233-.801.111-.947-.07-.084-.305-.22-.812-.24l-.201-.021c-.052 0-.098-.015-.145-.051-.045-.031-.067-.076-.067-.129v-.427l.061-.045c1.247-.008 4.043 0 4.043 0l.059.045v.436c0 .121-.059.178-.193.178-.646.03-.782.095-1.023.439-.12.186-.375.589-.646 1.039l-2.301 4.273-.065.135 2.792 5.712.17.048 4.396-10.438c.154-.422.129-.722-.064-.895-.197-.172-.346-.273-.857-.295l-.42-.016c-.061 0-.105-.014-.152-.045-.043-.029-.072-.075-.072-.119v-.436l.059-.045h4.961l.041.045v.437c0 .119-.074.18-.209.18-.648.03-1.127.18-1.443.421-.314.255-.557.616-.736 1.067 0 0-4.043 9.258-5.426 12.339-.525 1.007-1.053.917-1.503-.031-.571-1.171-1.773-3.786-2.646-5.71l.053-.036z"/>
+      </svg>
+    </button>
+  </div>
+  <div id="disable-all-wrapper" class="action-wrapper">
     <div class="main-controls">
-        <label id="disableAll-label" i18n-text="disableAllStyles">
+      <label id="disableAll-label" class="classicUI-el" i18n-text="disableAllStyles">
         <input id="disableAll" type="checkbox">
         <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
       </label>
     </div>
+    <a id="disable-all-icon" class="iconUI-el" href="#" tabindex="0">
+      <div i18n-title="disableAllStyles">
+        <svg class="svg-icon toggle-all-off" viewBox="0 0 24 24">
+          <path fill="none" d="M0 0h24v24H0z"/>
+          <path d="M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42C17.99 7.86 19 9.81 19 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.19 1.01-4.14 2.58-5.42L6.17 5.17C4.23 6.82 3 9.26 3 12c0 4.97 4.03 9 9 9s9-4.03 9-9c0-2.74-1.23-5.18-3.17-6.83z"/>
+        </svg>
       </div>
-    <div class="main-controls">
+      <div i18n-title="reEnableAllStyles">
-      <div id="find-styles">
+        <svg  class="svg-icon toggle-all-on" viewBox="0 0 24 24">
-        <a id="find-styles-link" i18n-text="findStyles" i18n-title="findStylesForSite"></a>
+          <path fill="none" d="M0 0h24v24H0z"/>
-        <span id="find-styles-inline-group">
+          <path d="M13 3h-2v10h2V3zm4.83 2.17l-1.42 1.42C17.99 7.86 19 9.81 19 12c0 3.87-3.13 7-7 7s-7-3.13-7-7c0-2.19 1.01-4.14 2.58-5.42L6.17 5.17C4.23 6.82 3 9.26 3 12c0 4.97 4.03 9 9 9s9-4.03 9-9c0-2.74-1.23-5.18-3.17-6.83z"/>
-          <label i18n-title="findStylesInlineTooltip">
+        </svg>
-            <input id="popup.findStylesInline" class="checker" type="checkbox">
-            <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
-            <span i18n-text="findStylesInline"></span>
-          </label>
-        </span>
-      </div>
-      <div id="write-style">
-        <span id="write-style-for" i18n-text="writeStyleFor"></span>
       </div>
+    </a>
   </div>
 
-    <!-- Actions -->
+  <div id="write-style-wrapper">
-    <div id="popup-options">
+    <div id="write-style">
-      <button id="popup-manage-button" i18n-text="openManage"
+      <span id="write-style-for" i18n-text="writeStyleFor">
-              data-href="manage.html" i18n-title="popupManageTooltip"></button>
+        <div id="popup-write-style-icon" i18n-title="writeStyleForInfo">
-      <button id="popup-options-button" i18n-text="openOptionsPopup"></button>
+          <svg class="svg-icon write-style iconUI-el" viewBox="0 0 1024 1024">
-      <button id="popup-wiki-button"
+            <path d="M 920,920 H 104 V 104 l 344,0 V 0 H 0 V 1024 H 1024 V 576 H 920 Z"/>
-              i18n-text="linkStylusWiki"
+            <path d="M1088 448M256 593.152 256 768l179.712 0L1024 182.784l-180.352-179.456L256 593.152zM843.008 276.352l-407.296 407.296L345.152 593.152l407.296-407.296L843.008 276.352zM933.504 185.856l-45.248 45.248-90.496-90.496 45.248-45.248L933.504 185.856z"/>
-              i18n-title="linkGetHelp"
+          </svg>
-              data-href="https://github.com/openstyles/stylus/wiki"></button>
+        </div>
+      </span>
     </div>
   </div>
 
@@ -240,8 +328,8 @@
       <path d="M6.2,0C5.8,0,5.4,0.4,5.4,0.8v0.7C5,1.7,4.6,1.8,4.3,2L3.8,1.5C3.6,1.4,3.4,1.3,3.2,1.3S2.7,1.4,2.6,1.5L1.5,2.6c-0.3,0.3-0.3,0.9,0,1.2L2,4.3C1.8,4.6,1.7,5,1.5,5.4H0.8C0.4,5.4,0,5.8,0,6.2v1.5c0,0.5,0.4,0.8,0.8,0.8h0.7C1.7,9,1.8,9.4,2,9.7l-0.5,0.5c-0.3,0.3-0.3,0.8,0,1.2l1.1,1.1c0.3,0.3,0.9,0.3,1.2,0L4.3,12c0.4,0.2,0.8,0.4,1.2,0.5v0.7c0,0.5,0.4,0.8,0.8,0.8h1.5c0.5,0,0.8-0.4,0.8-0.8v-0.7C9,12.3,9.4,12.2,9.7,12l0.5,0.5c0.3,0.3,0.9,0.3,1.2,0l1.1-1.1c0.3-0.3,0.3-0.8,0-1.2L12,9.7c0.2-0.4,0.4-0.8,0.5-1.2h0.7c0.5,0,0.8-0.4,0.8-0.8V6.2c0-0.5-0.4-0.8-0.8-0.8h-0.7C12.3,5,12.2,4.6,12,4.3l0.5-0.5c0.3-0.3,0.3-0.9,0-1.2l-1.1-1.1c-0.2-0.2-0.4-0.2-0.6-0.2s-0.4,0.1-0.6,0.2L9.7,2C9.4,1.8,9,1.7,8.6,1.5V0.8C8.6,0.4,8.2,0,7.8,0L6.2,0z M6.8,0.8h0.4c0.2,0,0.4,0.2,0.4,0.4v1.2c0.8,0.1,1.6,0.4,2.3,0.9l0.8-0.8c0.2-0.2,0.4-0.2,0.6,0l0.3,0.3c0.2,0.2,0.2,0.4,0,0.6l-0.8,0.8c0.5,0.7,0.8,1.4,0.9,2.3h1.2c0.2,0,0.4,0.2,0.4,0.4v0.4c0,0.2-0.2,0.4-0.4,0.4h-1.2c-0.1,0.8-0.4,1.6-0.9,2.3l0.8,0.8c0.2,0.2,0.2,0.4,0,0.6l-0.3,0.3c-0.2,0.2-0.4,0.2-0.6,0l-0.8-0.8c-0.7,0.5-1.4,0.8-2.3,0.9v1.2c0,0.2-0.2,0.4-0.4,0.4H6.8c-0.2,0-0.4-0.2-0.4-0.4v-1.2c-0.8-0.1-1.6-0.4-2.3-0.9l-0.8,0.8c-0.2,0.2-0.4,0.2-0.6,0l-0.3-0.3c-0.2-0.2-0.2-0.4,0-0.6l0.8-0.8C2.8,9.2,2.5,8.4,2.4,7.6H1.2C1,7.6,0.8,7.4,0.8,7.2V6.8c0-0.2,0.2-0.4,0.4-0.4h1.2c0.1-0.8,0.4-1.6,0.9-2.3L2.5,3.3c-0.2-0.2-0.2-0.4,0-0.6l0.3-0.3c0.2-0.2,0.4-0.2,0.6,0l0.8,0.8c0.7-0.5,1.4-0.8,2.3-0.9V1.2C6.4,1,6.6,0.8,6.8,0.8L6.8,0.8z M7,3.6C5.1,3.6,3.6,5.1,3.6,7c0,0,0,0,0,0c0,1.9,1.5,3.4,3.4,3.4c1.9,0,3.4-1.5,3.4-3.4C10.4,5.1,8.9,3.6,7,3.6C7,3.6,7,3.6,7,3.6z M7,4.8c1.2,0,2.2,1,2.2,2.2c0,1.2-1,2.2-2.2,2.2c-1.2,0-2.2-1-2.2-2.2C4.8,5.8,5.8,4.8,7,4.8z"/>
     </symbol>
 
-    <symbol id="svg-icon-config-uso" viewBox="0 0 14 14">
+    <symbol id="svg-icon-config-uso" viewBox="0 0 20 20">
-      <path d="M2,3h4v2H4v6h6V9h2v4H2V3z M8,1h6v6l-2.2-2.2l-4,4L6.2,7.2l4-4L8,1z"/>
+      <path d="M4,4h5v2H6v8h8v-3h2v5H4V4z M11,3h6v6l-2-2l-4,4L9,9l4-4L11,3z"/>
     </symbol>
 
     <symbol id="svg-icon-help" viewBox="0 0 14 16">

popup/hotkeys.js

@@ -120,7 +120,7 @@ var hotkeys = (() => {
     const container = $('#hotkey-info');
     let title;
     container.onclick = ({target}) => {
-      if (target.localName === 'button') {
+      if (target.localName === 'button' || target.id === 'popup-confirm-icon') {
         close();
       } else if (!container.dataset.active) {
         open();
@@ -174,10 +174,11 @@ var hotkeys = (() => {
             }));
       [
         linesToElements(t('popupHotkeysInfo')),
-        $create('button', t('confirmOK')),
+        $create('button', {className: 'classicUI-el', id: 'confirm-button'}, t('confirmOK')),
       ].forEach(child => {
         container.appendChild($create('div', child));
       });
+      $('#confirm-button').insertAdjacentElement('afterend', template.confirmHotkey);
     }
   }
 

popup/popup.js

@@ -5,12 +5,21 @@
 let installed;
 let tabURL;
 const handleEvent = {};
+const doc = document.documentElement;
 
 const ENTRY_ID_PREFIX_RAW = 'style-';
 const ENTRY_ID_PREFIX = '#' + ENTRY_ID_PREFIX_RAW;
 
 toggleSideBorders();
 
+doc.classList.add(prefs.get('popupui') === 1 ? 'classicUI' : 'iconUI');
+
+doc.classList.add(prefs.get('popupclick') === 1 ? 'toggleUI' : 'directLinkUI');
+
+if (!prefs.get('popup.stylesFirst')) {
+  doc.classList.add('actions-top');
+}
+
 getActiveTab().then(tab =>
   FIREFOX && tab.url === 'about:blank' && tab.status === 'loading'
   ? getTabRealURLFirefox(tab)
@@ -81,8 +90,17 @@ function initPopup() {
 
   // action buttons
   $('#disableAll').onchange = function () {
-    installed.classList.toggle('disabled', this.checked);
+    document.body.classList.toggle('disabled', this.checked);
   };
+
+  $('#find-styles-icon').onclick = () => {
+    $('#find-styles-link').click();
+  };
+
+  $('#disable-all-icon').onclick = () => {
+    $('#disableAll').click();
+  };
+
   setupLivePrefs();
 
   Object.assign($('#popup-manage-button'), {
@@ -91,6 +109,16 @@ function initPopup() {
     oncontextmenu: handleEvent.openManager,
   });
 
+  $('#find-external-icon').onclick = event => {
+    event.preventDefault();
+    $('input.toggle-inline').click()
+  };
+
+  $('#find-inline-icon').onclick = event => {
+    event.preventDefault();
+    $('input.toggle-inline').click()
+  };
+
   $('#popup-options-button').onclick = () => {
     chrome.runtime.openOptionsPage();
     window.close();
@@ -98,12 +126,6 @@ function initPopup() {
 
   $('#popup-wiki-button').onclick = handleEvent.openURLandHide;
 
-  if (!prefs.get('popup.stylesFirst')) {
-    document.body.insertBefore(
-      $('body > .actions'),
-      installed);
-  }
-
   if (!tabURL) {
     document.body.classList.add('blocked');
     document.body.insertBefore(template.unavailableInfo, document.body.firstChild);
@@ -241,6 +263,9 @@ function showStyles(styles) {
     }
     window.dispatchEvent(new Event('showStyles:done'));
   });
+
+  var reverseZebra = $('.entry:last-child:nth-of-type(odd)') !== null;
+  installed.classList.toggle('reverse-stripe', reverseZebra);
 }
 
 
@@ -272,6 +297,12 @@ function createStyleElement({
     onclick: handleEvent.openLink,
   });
 
+  const editLinkAccess = $('.style-edit-link-accessibility', entry);
+  Object.assign(editLinkAccess, {
+    href: editLinkAccess.getAttribute('href') + style.id,
+    onclick: handleEvent.openLink,
+  });
+
   const styleName = $('.style-name', entry);
   Object.assign(styleName, {
     htmlFor: ENTRY_ID_PREFIX_RAW + style.id,
@@ -330,13 +361,16 @@ Object.assign(handleEvent, {
   },
 
   name(event) {
+    if (prefs.get('popupclick') === 1) {
       this.checkbox.dispatchEvent(new MouseEvent('click'));
+    } else {
+      const entry = handleEvent.getClickedStyleElement(event);
+      $('.style-edit-link', entry).click();
+    }
     event.preventDefault();
   },
 
   toggle(event) {
-    // when fired on checkbox, prevent the parent label from seeing the event, see #501
-    event.stopPropagation();
     API.saveStyle({
       id: handleEvent.getClickedStyleId(event),
       enabled: this.matches('.enable') || this.checked,
@@ -350,9 +384,12 @@ Object.assign(handleEvent, {
     box.dataset.display = true;
     box.style.cssText = '';
     $('b', box).textContent = $('.style-name', entry).textContent;
-    $('[data-cmd="ok"]', box).focus();
+    $('button[data-cmd="ok"]', box).focus();
-    $('[data-cmd="ok"]', box).onclick = () => confirm(true);
+    $('button[data-cmd="ok"]', box).onclick = () => confirm(true);
-    $('[data-cmd="cancel"]', box).onclick = () => confirm(false);
+    $('button[data-cmd="cancel"]', box).onclick = () => confirm(false);
+    $('a[data-cmd="ok"]', box).focus();
+    $('a[data-cmd="ok"]', box).onclick = () => confirm(true);
+    $('a[data-cmd="cancel"]', box).onclick = () => confirm(false);
     window.onkeydown = event => {
       const keyCode = event.keyCode || event.which;
       if (!event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey
@@ -438,7 +475,7 @@ Object.assign(handleEvent, {
     event.preventDefault();
     getActiveTab()
       .then(activeTab => API.openURL({
-        url: this.href || this.dataset.href,
+        url: this.hasAttribute('data-href') ? this.dataset.href : this.href,
         index: activeTab.index + 1,
         message: tryJSONparse(this.dataset.sendMessage),
       }))
@@ -483,6 +520,9 @@ function handleDelete(id) {
   if (!$('.entry')) {
     installed.appendChild(template.noStyles.cloneNode(true));
   }
+
+  var reverseZebra = $('.entry:last-child:nth-of-type(odd)') !== null;
+  installed.classList.toggle('reverse-stripe', reverseZebra);
 }
 
 

popup/search-results.css

@@ -1,15 +1,19 @@
+:root {
+  --search-result-meta: hsla(0, 0%, 93%, 0.75);
+}
+
 body.search-results-shown {
   overflow-y: auto;
   overflow-x: hidden;
 }
 
 #search-results:not([data-empty]):before {
-  background-image: linear-gradient(transparent, rgba(0, 0, 0, .3) 200px);
+  background-image: linear-gradient(transparent, var(--black-alpha-3) 200px);
   content: "";
   top: -50px;
   left: -1000px;
   right: -1000px;
-  bottom: -12px;
+  bottom: 0;
   position: absolute;
   pointer-events: none;
   animation: fadein 1s;
@@ -18,15 +22,17 @@ body.search-results-shown {
 
 #search-results {
   position: relative;
-  margin-top: -1em;
 }
 
 #search-results-error {
-  background-color: rgba(255, 0, 0, 0.4);
+  flex-basis: 100%;
+  background-color: var(--darkred);
+  color: var(--white);
+  text-shadow: 2px 1px 1px var(--black);
   font-weight: bold;
   padding: 5px;
   text-align: center;
-  margin: 0 0 var(--outer-padding);
+  margin: 0 var(--outer-padding) var(--outer-padding);
 }
 
 #search-results-list {
@@ -39,24 +45,29 @@ body.search-results-shown {
   position: relative;
   padding: 8px 8px 21px;
   min-height: 160px;
+  margin: 0 2px;
 }
 
 .search-result {
-  box-shadow: 1px 1px 10px rgba(0, 0, 0, .75);
+  box-shadow: 1px 1px 10px var(--black-alpha-75);
   border-radius: 4px;
-  border: 1px solid #555;
+  border: 1px solid var(--gray-lightness-33);
   margin-bottom: 24px;
-  background-color: #eee;
+  background-color: var(--gray-lightness-93);
+}
+
+.search-result:last-of-type {
+  margin-bottom: 0;
 }
 
 .search-result:hover {
-  border-color: #000;
+  border-color: var(--black);
-  background-color: #fff;
+  background-color: var(--white);
 }
 
 .search-result .lds-spinner {
   transform: scale(.5);
-  filter: invert(1) drop-shadow(1px 1px 3px #000);
+  filter: invert(1) drop-shadow(1px 1px 3px var(--black));
 }
 
 .search-result-empty .lds-spinner {
@@ -79,7 +90,7 @@ body.search-results-shown {
 .search-result-title {
   margin-bottom: .5em;
   display: block;
-  color: #555;
+  color: var(--gray-lightness-33);
   overflow-wrap: break-word;
 }
 
@@ -103,14 +114,14 @@ body.search-results-shown {
   line-height: 18px;
   text-align: center;
   position: absolute;
-  background-color: hsla(180, 100%, 27%, .75);
+  background-color: var(--darkcyan-alpha-75);
-  color: #fff;
+  color: var(--white);
   transition: background-color .5s;
   pointer-events: none;
 }
 
 .search-result-screenshot:hover ~ .search-result-status {
-  background-color: hsla(180, 100%, 27%, 1);
+  background-color: var(--darkcyan);
 }
 
 .search-result-actions {
@@ -131,13 +142,13 @@ body.search-results-shown {
 }
 
 .search-result-actions button {
-  box-shadow: 2px 2px 20px #000;
+  box-shadow: 2px 2px 20px var(--black);
   white-space: nowrap;
   margin: 3px;
 }
 
 .search-result-meta {
-  background-color: hsla(0, 0%, 93%, 0.75);
+  background-color: var(--search-result-meta);
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
@@ -150,7 +161,7 @@ body.search-results-shown {
 }
 
 .search-result:hover .search-result-meta {
-  background-color: hsla(0, 0%, 100%, 0.75);
+  background-color: var(--white-alpha-75);
 }
 
 .search-result-meta dt {
@@ -179,16 +190,13 @@ body.search-results-shown {
   font-weight: bold;
 }
 
-.search-result-meta [data-type="rating"][data-class="good"] dd {
+.search-result-meta [data-type="rating"][data-class="good"] dd,
-  color: darkgreen;
-}
-
 .search-result-meta [data-type="rating"][data-class="okay"] dd {
-  color: darkgreen;
+  color: var(--darkgreen);
 }
 
 .search-result-meta [data-type="rating"][data-class="bad"] dd {
-  color: darkred;
+  color: var(--darkred);
 }
 
 .search-result-meta [data-type="rating"][data-class="none"] dd {
@@ -227,8 +235,7 @@ body.search-results-shown {
 }
 
 .search-results-nav[data-type="bottom"] {
-  margin-top: -1em;
+  margin: 1.25rem 0 .5rem;
-  margin-bottom: 1em;
 }
 
 #search-results .search-results-nav button {
@@ -249,12 +256,7 @@ body.search-results-shown {
 }
 
 #search-results .search-results-nav button:not(:disabled):hover {
-  text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
+  text-shadow: 0 1px 4px var(--black-alpha-5);
-}
-
-#find-styles-inline-group label {
-  position: relative;
-  padding-left: 16px;
 }
 
 /* spinner: https://github.com/loadingio/css-spinner */

popup/search-results.js

@@ -94,7 +94,9 @@ window.addEventListener('showStyles:done', function _() {
   function init() {
     setTimeout(() => document.body.classList.add(BODY_CLASS));
 
+    if(prefs.get('popupui') === 1) {
       $('#find-styles-inline-group').classList.add('hidden');
+    }
 
     dom.container = $('#search-results');
     dom.container.dataset.empty = '';
@@ -207,6 +209,7 @@ window.addEventListener('showStyles:done', function _() {
     dom.error.classList.remove('hidden');
     dom.container.classList.toggle('hidden', !processedResults.length);
     document.body.classList.toggle('search-results-shown', processedResults.length > 0);
+    document.body.classList.add('error-shown');
     if (dom.error.getBoundingClientRect().bottom < 0) {
       dom.error.scrollIntoView({behavior: 'smooth', block: 'start'});
     }