From ce47e69b8a3dc6330a8b29305a80d31936304b55 Mon Sep 17 00:00:00 2001 From: narcolepticinsomniac Date: Thu, 7 Dec 2017 22:18:47 -0500 Subject: [PATCH] Custom UI elements (#291) --- edit/edit.css | 11 +----- global.css | 82 +++++++++++++++++++++++++++++++++++++------- images/button.png | Bin 0 -> 203 bytes manage.html | 4 +-- manage/manage.css | 28 ++++++++++----- options/options.css | 50 +++++++++++++++++++++++++++ 6 files changed, 142 insertions(+), 33 deletions(-) create mode 100644 images/button.png diff --git a/edit/edit.css b/edit/edit.css index 9f8b7f4f..6f6645e1 100644 --- a/edit/edit.css +++ b/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; @@ -808,10 +805,4 @@ html:not(.usercss) .usercss-only, flex-wrap: wrap; white-space: normal; } -} - -@supports (-moz-appearance: none) { - #header button { - padding: 0 3px 2px; - } -} +} \ No newline at end of file diff --git a/global.css b/global.css index 577d2253..7bef2323 100644 --- a/global.css +++ b/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; @@ -101,12 +133,38 @@ select { .moz-appearance-bug input[type="checkbox"] { -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; + } } diff --git a/images/button.png b/images/button.png new file mode 100644 index 0000000000000000000000000000000000000000..19d2389230fd64b743dad55b9c98b91b04065688 GIT binary patch literal 203 zcmeAS@N?(olHy`uVBq!ia0vp^j6f{M!3HGXPAxeOq}Y|gW!U_%O?XxI14-? ziy0WWg+Z8+Vb&Z8pdfpRr>`sfLmoC384kHmYhMC|WHUn|N}Tg^b5rw5fLsO!=c3fa zlGGH1^30M91$R&1fE2w{cA&Vvr;B3<$Mxilj0}PFq=bZo6cCXHBAPZ!JdDXnIf_ literal 0 HcmV?d00001 diff --git a/manage.html b/manage.html index 0ef738a0..a6ce6452 100644 --- a/manage.html +++ b/manage.html @@ -259,7 +259,7 @@

-

+

@@ -275,7 +275,7 @@ -

+
diff --git a/manage/manage.css b/manage/manage.css index c48c1604..984dc3ee 100644 --- a/manage/manage.css +++ b/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 { diff --git a/options/options.css b/options/options.css index 468e1a39..e885e47a 100644 --- a/options/options.css +++ b/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' */