Light grey theme

Give me a few minutes. I edited a bunch of files.

global.css

@@ -1,3 +1,17 @@
+* {
+  outline-color: hsl(180, 100%, 34%) !important;
+}
+
+::selection {
+  color: #fff;
+  background-color: hsl(180, 50%, 34%)
+}
+
+::-moz-selection {
+  color: #fff;
+  background-color: hsl(180, 50%, 34%)
+}
+
 button {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -7,44 +21,60 @@ button {
   overflow: hidden;
   text-overflow: ellipsis;
   padding: 2px 7px;
-  border: 1px solid hsl(0, 0%, 62%);
+  border: 1px solid hsl(0, 0%, 56%);
   font: 400 13.3333px Arial;
-  color: #000;
+  color: hsl(0, 0%, 24%);
   background-color: hsl(0, 0%, 100%);
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAYAAADtlXTHAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QwGBBwIHvKt6QAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAL0lEQVQI12NoaGgQZ2JgYGBkYmBgYGZiYGBggrMY4VxsYsyoskQQCB2MWAxAMhkADVECDhlW9CoAAAAASUVORK5CYII=');
   background-repeat: repeat-x;
   background-size: 100% 100%;
-  transition: background-color .25s, border-color .25s;
+  transition: color .25s, background-color .25s, border-color .25s;
 }
 
 button:not(:disabled):hover {
+  color: hsl(0, 0%, 10%);
   background-color: hsl(0, 0%, 95%);
-  border-color: hsl(0, 0%, 52%);
+  border-color: hsl(0, 0%, 46%);
 }
 
 button:active {
   background-color: hsl(0, 0%, 95%);
-  border-color: hsl(0, 0%, 52%);
+  border-color: hsl(0, 0%, 46%);
   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 {
+#message-box.center #message-box-buttons button:not(:disabled):hover {
   background-color: hsl(0, 0%, 90%);
   border-color: hsl(0, 0%, 50%);
 }
 
-input:not([type]) {
+input:not([type]),
-  background: #fff;
+input[type="number"],
-  color: #000;
+input[type="search"],
+input.config-value {
+  background: hsl(0, 0%, 92%);
+  color: hsl(0, 0%, 30%);
   height: 22px;
   min-height: 22px!important;
   line-height: 22px;
   padding: 0 3px;
   font: 400 13.3333px Arial;
   border: 1px solid hsl(0, 0%, 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: hsl(180, 100%, 34%);
 }
 
 .svg-icon.checked {
@@ -52,7 +82,7 @@ input:not([type]) {
   height: 8px;
   width: 8px;
   display: none;
-  fill: #000;
+  fill: hsl(0, 0%, 30%);
   margin: 2px 0 0 2px;
 }
 
@@ -61,6 +91,10 @@ input[type="checkbox"]:not(.slider):checked + .svg-icon.checked {
   transition: fill .1s;
 }
 
+input[type="checkbox"]:not(.slider):checked:hover + .svg-icon.checked {
+  fill: hsl(0, 0%, 10%);
+}
+
 input[type="checkbox"]:not(.slider) {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -72,14 +106,13 @@ input[type="checkbox"]:not(.slider) {
   width: 12px;
   display: inline-flex;
   border-radius: 2px;
-  background-color: hsla(0, 0%, 0%, .1);
+  background-color: hsl(0, 0%, 88%);
   margin: 0;
   transition: background-color .1s, border-color .1s;
 }
 
 input[type="checkbox"]:not(.slider):hover {
-  border-color: hsl(0, 0%, 32%);
+  border-color: hsl(0, 0%, 10%);
-  background-color: hsl(0, 0%, 82%);
 }
 
 input[type="checkbox"]:not(.slider):checked + .svg-icon.checked {
@@ -91,31 +124,58 @@ 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: hsl(0, 0%, 60%);
 }
 
-input[type="checkbox"]:not(.slider):disabled + .svg-icon.checked {
+input[type="checkbox"]:not(.slider):disabled + .svg-icon.checked,
-  fill: hsl(0, 0%, 50%);
+input[type="checkbox"]:not(.slider):disabled:hover + .svg-icon.checked {
+  fill: hsl(0, 0%, 60%);
 }
 
-input[type="checkbox"]:not(.slider):disabled + .svg-icon.checked + span {
+input[type="checkbox"]:not(.slider):disabled  ~ *,
-  color: hsl(0, 0%, 50%);
+input[type="checkbox"]:not(.slider):disabled:hover ~ * {
+  color: hsl(0, 0%, 60%);
 }
 
 label {
+  color: hsl(0, 0%, 30%);
   transition: color .1s;
 }
 
+label:hover {
+  color: hsl(0, 0%, 10%);
+}
+
 select {
   -moz-appearance: none;
   -webkit-appearance: none;
   height: 22px;
   font: 400 13.3333px Arial;
-  color: #000;
+  color: hsl(0, 0%, 24%);
-  background-color: transparent;
   border: 1px solid hsl(0, 0%, 66%);
   padding: 0 20px 0 6px;
-  transition: color .5s;
+  transition: color .25s, background-color .25s, border-color .25s, box-shadow .25s;
+  box-shadow: 0 1px 1px hsla(0, 0%, 0%, .05);
+  background-color: hsl(0, 0%, 90%);
+  background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, .5), hsla(0, 0%, 80%, .5));
+}
+
+select:hover,
+select:focus {
+  color: hsl(0, 0%, 14%);
+  border: 1px solid hsl(0, 0%, 60%);
+  background-color: hsl(0, 0%, 85%);
+  box-shadow: 0 1px 1px hsla(0, 0%, 0%, .1);
+}
+
+select option,
+select optgroup {
+  background-color: hsl(0, 0%, 90%)
+}
+
+select:hover + .svg-icon.select-arrow,
+select:focus + .svg-icon.select-arrow {
+  fill: hsl(0, 0%, 30%);
 }
 
 .select-resizer {
@@ -130,11 +190,11 @@ select {
   display: inline-flex;
   height: 14px;
   width: 14px;
-  fill: #000;
+  fill: hsl(0, 0%, 50%);
   position: absolute;
   top: 4px;
   right: 4px;
-  transition: fill .5s;
+  transition: fill .25s;
 }
 
 input[type="radio"] {
@@ -208,6 +268,15 @@ select[disabled] > option {
 
   .moz-appearance-bug input[type="checkbox"] {
     -moz-appearance: checkbox !important;
+    opacity: .6;
+    filter: brightness(.9)grayscale(1);
+    transition: opacity .1s;
+    will-change: opacity;
+  }
+
+  .moz-appearance-bug input[type="checkbox"]:hover,
+  .moz-appearance-bug #stylus-popup .style-name:hover input[type="checkbox"] {
+    opacity: 1;
   }
 
   .moz-appearance-bug input[type="radio"] {

manage.html

@@ -171,12 +171,12 @@
 
 <div id="header">
   <h1 id="manage-heading" i18n-text="manageHeading"></h1>
-
+  
   <div id="manage-settings">
     <div class="settings-column">
       <details id="filters" data-pref="manage.filters.expanded">
         <summary>
-          <h2 i18n-text="manageFilters">:
+          <h2 i18n-text="manageFilters">: 
             <div class="filter-stats-wrapper">
               <span id="filters-stats"></span>
               <a id="reset-filters" href="#" tabindex="0">
@@ -189,7 +189,7 @@
             </div>
           </h2>
         </summary>
-
+      
         <div class="filter-selection">
           <label>
             <div class="checkmate">
@@ -207,7 +207,7 @@
             <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
           </div>
         </div>
-
+      
         <div class="filter-selection">
           <label>
             <div class="checkmate">
@@ -225,7 +225,7 @@
             <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
           </div>
         </div>
-
+      
         <div class="filter-selection">
           <label>
             <div class="checkmate">
@@ -243,7 +243,7 @@
             <svg class="svg-icon select-arrow"><use xlink:href="#svg-icon-select-arrow"/></svg>
           </div>
         </div>
-
+      
         <label id="only-updates" class="hidden">
           <input type="checkbox"
                  data-filter=".can-update, .update-problem, .update-done"
@@ -251,7 +251,7 @@
           <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
           <span i18n-text="manageOnlyUpdates"></span>
         </label>
-
+      
         <div id="search-wrapper">
           <input id="search" type="search" i18n-placeholder="searchStyles" spellcheck="false"
                  data-filter=":not(.not-matching)"
@@ -272,7 +272,7 @@
           <svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
         </a>
       </div>
-
+      
       <div id="style-actions">
         <div id="update-check">
           <button id="check-all-updates" i18n-text="checkAllUpdates"><span id="update-progress"></span></button>
@@ -282,13 +282,13 @@
             </svg>
           </a>
         </div>
-
+        
         <div id="update-all">
           <button id="apply-all-updates" class="hidden" i18n-text="applyAllUpdates"></button>
           <span id="update-all-no-updates" class="hidden" i18n-text="updateAllCheckSucceededNoUpdate"></span>
           <button id="check-all-updates-force" class="hidden" i18n-text="checkAllUpdatesForce"></button>
         </div>
-
+        
         <div id="add-style-wrapper">
           <a href="edit.html">
             <button id="add-style-label" i18n-text="addStyleLabel" tabindex="-1"></button>
@@ -309,30 +309,32 @@
         </div>
       </div>
     </div>
-
+    
     <div class="settings-column">
       <details id="options" data-pref="manage.options.expanded">
-
+      
         <summary><h2 id="options-heading" i18n-text="optionsHeading"></h2></summary>
-
+      
         <label>
           <input id="manage.newUI" type="checkbox">
           <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
           <span i18n-text="manageNewUI"></span>
         </label>
-
+      
         <div id="newUIoptions">
           <div>
-            <label for="manage.newUI.favicons" i18n-text="manageFavicons">
+            <div class="favicon-help-wrapper">
-              <input id="manage.newUI.favicons" type="checkbox">
+              <label for="manage.newUI.favicons" i18n-text="manageFavicons">
-              <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
+                <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">
@@ -344,7 +346,7 @@
           </div>
          <label><input id="manage.newUI.targets" type="number" min="1" max="99"><span i18n-text="manageMaxTargets"></span></label>
         </div>
-
+      
         <div id="options-buttons">
           <button id="manage-options-button" i18n-text="openOptionsManage"></button>
           <button id="manage-shortcuts-button" class="chromium-only"
@@ -355,9 +357,9 @@
              i18n-title="editorStylesButton"
              target="_blank"><button i18n-text="cm_theme" tabindex="-1"></button></a>
         </div>
-
+      
       </details>
-
+      
       <details id="backup" data-pref="manage.backup.expanded">
         <summary><h2 id="backup-title" i18n-text="backupButtons"></h2></summary>
         <span id="backup-message" i18n-text="backupMessage"></span>
@@ -366,7 +368,7 @@
           <button id="unfile-all-styles" i18n-text="retrieveBckp"></button>
         </div>
       </details>
-
+      
       <div id="manage-text">
         <span><a href="https://userstyles.org" target="_blank" i18n-text="linkGetStyles"></a></span>
         <span><a href="https://add0n.com/stylus.html#features" target="_blank" i18n-text="linkGetHelp"></a></span>

popup.html

@@ -42,7 +42,7 @@
           </svg>
         </a>
         <a href="#" class="delete" i18n-title="deleteStyleLabel" tabindex="0">
-          <svg class="svg-icon remove" viewBox="0 0 14 16">
+          <svg class="svg-icon remove" viewBox="0 0 12 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>