Custom UI elements (#291)

edit/edit.css

@@ -576,9 +576,6 @@ html:not(.usercss) .applies-to li:last-child .add-applies-to {
   top: 1em;
   margin: 1ex 0;
 }
-.firefox .beautify-options > label input {
-  top: 1px;
-}
 .beautify-options:after {
   clear: both;
   display: block;
@@ -809,9 +806,3 @@ html:not(.usercss) .usercss-only,
     white-space: normal;
   }
 }
-
-@supports (-moz-appearance: none) {
-  #header button {
-    padding: 0 3px 2px;
-  }
-}

global.css

@@ -1,3 +1,39 @@
+button {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  user-select: none;
+  padding: 2px 7px;
+  border: 1px solid hsl(0, 0%, 62%);
+  font: 400 13.3333px Arial;
+  color: #000;
+  background-color: hsl(0, 0%, 100%);
+  background: url(../images/button.png)repeat-x;
+  background-size: 100% 100%;
+  transition: background-color .25s, border-color .25s;
+}
+
+button:hover {
+  background-color: hsl(0, 0%, 95%);
+  border-color: hsl(0, 0%, 52%);
+}
+
+/* For some odd reason these hovers appear lighter than all other button hovers in every browser */
+#message-box-buttons button:hover {
+  background-color: hsl(0, 0%, 90%);
+  border-color: hsl(0, 0%, 50%);
+}
+
+input:not([type]) {
+  background: #fff;
+  color: #000;
+  height: 22px;
+  min-height: 22px!important;
+  line-height: 22px;
+  padding: 0 3px;
+  font: 400 13.3333px Arial;
+  border: 1px solid hsl(0, 0%, 66%);
+} 
+
 .svg-icon.checked {
   position: absolute;
   height: 8px;
@@ -13,12 +49,11 @@ input[type="checkbox"]:not(.slider):checked + .svg-icon.checked {
 }
 
 input[type="checkbox"]:not(.slider) {
+  -webkit-appearance: none;
+  -moz-appearance: none;
   position: absolute;
   left: 0;
   top: 0;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  pointer-events: none;
   border: 1px solid hsl(0, 0%, 46%);
   height: 12px;
   width: 12px;
@@ -63,17 +98,14 @@ select {
   -moz-appearance: none;
   -webkit-appearance: none;
   height: 22px;
-  color: currentColor;
+  font: 400 13.3333px Arial;
+  color: #000;
   background-color: transparent;
   border: 1px solid hsl(0, 0%, 66%);
   padding: 0 20px 0 6px;
   transition: color .5s;
 }
 
-.firefox select {
-  padding: 0 20px 0 2px;
-}
-
 .select-resizer {
   display: inline-flex!important;
   cursor: default;
@@ -86,7 +118,7 @@ select {
   display: inline-flex;
   height: 14px;
   width: 14px;
-  fill: currentColor;
+  fill: #000;
   position: absolute;
   top: 4px;
   right: 4px;
@@ -102,11 +134,37 @@ select {
     -moz-appearance: checkbox !important;
   }
   
-  ::-moz-focus-inner {
-    border: 0; 
+  .firefox select {
+    font-size: 13px;
+    padding: 0 20px 0 2px;
+    line-height: 22px!important;
   }
 
   svg {
     transform: scale(1); /* de-blur */
   }
+
+/* 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"]:hover,
+  .firefox.non-windows input[type="number"]:focus {
+    -moz-appearance: number-input;
+  }
+  
+/* Firefox cannot handle fractions in font-size */
+  .firefox button:not(.install) {
+    font-size: 13px;
+    line-height: 13px;
+    padding: 3px 7px;
+  }
+
+  .firefox.moz-appearance-bug button:not(.install) {
+    padding: 2px 4px;
+  }
 }

manage.html

@@ -259,7 +259,7 @@
     <button id="check-all-updates-force" class="hidden" i18n-text="checkAllUpdatesForce"></button>
   </p>
 
-  <p id="add-style-wrapper">
+  <div id="add-style-wrapper">
     <a href="edit.html">
       <button id="add-style-label" i18n-text="addStyleLabel"></button>
     </a>
@@ -275,7 +275,7 @@
         </svg>
       </a>
     </label>
-  </p>
+  </div>
 
   <details id="options" data-pref="manage.options.expanded">
 

manage/manage.css

@@ -84,23 +84,28 @@ select {
 
 #header a[href^="edit"] {
   text-decoration: none;
+  margin-right: 8px;
 }
 
-#add-style-label {
-  margin-right: .25em;
-  margin-bottom: .25em;
+#add-style-wrapper {
+  display: flex;
+  align-items: center;
+  padding-bottom: 1.5em;
 }
 
 #add-style-as-usercss-wrapper {
   display: inline-flex;
+  margin-top: 3px;
 }
 
 #add-style-as-usercss-wrapper:not(:hover) input:not(:checked) ~ a svg {
   fill: #aaa;
 }
 
-#usercss-wiki svg {
-  margin-top: -4px;
+#add-style-as-usercss-wrapper #usercss-wiki {
+  position: absolute;
+  right: -20px;
+  top: -3px;
 }
 
 #installed {
@@ -256,8 +261,7 @@ select {
 }
 
 /* collapsibles */
-#header details:not(#filters),
-#add-style-wrapper {
+#header details:not(#filters) {
   padding-bottom: .7em;
 }
 
@@ -825,8 +829,14 @@ input[id^="manage.newUI"] {
 #search {
   flex-grow: 1;
   margin: 0.25rem 0 0;
-  padding-left: 0.25rem;
-  border-width: 1px;
+  background: #fff;
+  height: 20px;
+  box-sizing: border-box;
+  padding: 3px 3px 3px 4px;
+  font: 400 12px Arial;
+  color: #000;
+  border: 1px solid hsl(0, 0%, 66%);
+  border-radius: 0.25rem;
 }
 
 #search-wrapper .info {

options/options.css

@@ -27,6 +27,56 @@ body {
   max-width: 800px;
 }
 
+.firefox button {
+  -moz-appearance: none;
+  user-select: none;
+  padding: 3px 7px;
+  border: 1px solid hsl(0, 0%, 62%);
+  font: 400 13px Arial;
+  line-height: 13px;
+  color: #000;
+  background-color: hsl(0, 0%, 100%);
+  background: url(../images/button.png)repeat-x;
+  background-size: 100% 100%;
+  transition: background-color .25s, border-color .25s;
+}
+
+.firefox button:hover {
+  background-color: hsl(0, 0%, 95%);
+  border-color: hsl(0, 0%, 52%);
+}
+
+.firefox.moz-appearance-bug button {
+  padding: 2px 4px;
+}
+
+:-webkit-any(button,input[type="button"],input[type="submit"]) {
+  -webkit-appearance: none;
+  user-select: none;
+  padding: 3px 7px;
+  border: 1px solid hsl(0, 0%, 62%);
+  border-radius: 0;
+  font: 400 13.3333px Arial;
+  color: hsl(0, 0%, 0%);
+  background-color: hsl(0, 0%, 100%);
+  background-image: url(../images/button.png);
+  background-repeat: repeat-x;
+  background-size: 100% 100%;
+  transition: background-color .25s, border-color .25s;
+  text-shadow: none;
+  box-shadow: none;
+  min-height: unset;
+}
+
+:enabled:hover:-webkit-any(select,input[type="checkbox"],input[type="radio"],:-webkit-any(button,input[type="button"],input[type="submit"])) {
+  background-color: hsl(0, 0%, 95%);
+  background-image: url(../images/button.png);
+  background-repeat: repeat-x;
+  text-shadow: none;
+  box-shadow: none;
+  border-color: hsl(0, 0%, 52%);
+}
+
 @media (min-width: 401px) {
   .firefox body {
     width: calc(100% - 6px); /* TODO: rework to avoid compensating padding of 'html.firefox .block'  */