Cleanup of prefs UI, incl 3p lists and dynamic-filtering tab

src/css/3p-filters.css

@@ -131,10 +131,10 @@ span.new {
     background-color: hsl(36, 100%, 75%);
     }
 #externalListsDiv {
-    margin: 2em auto 0 2em;
+    margin: 2em auto 2em 2em;
     }
 body[dir=rtl] #externalListsDiv {
-    margin: 2em 2em 0;
+    margin: 2em 2em 2em;
     }
 #externalLists {
     box-sizing: border-box;
@@ -147,7 +147,6 @@ body[dir=rtl] #externalListsDiv {
 body #busyOverlay {
     background-color: transparent;
     bottom: 0;
-    cursor: wait;
     display: none;
     left: 0;
     position: fixed;
@@ -185,14 +184,16 @@ body.busy #busyOverlay {
     background-repeat: repeat-x;
     border: 0;
     box-sizing: border-box;
-    color: #222;
     height: 100%;
     left: 0;
     padding: 0;
     position: absolute;
     width: 25%;
+    -webkit-transition:0.5s width;
+    transition:0.5s width;
     }
 #busyOverlay > div:nth-of-type(2) > div:nth-of-type(2) {
+    color: #222;
     background-color: transparent;
     border: 0;
     box-sizing: border-box;

src/css/dashboard-common.css

@@ -1,11 +1,11 @@
 body {
     margin: 0;
-    padding: 0 0.5em 0.5em 0.5em;
+    padding: 0.25em 0.5em;
-    font: 14px sans-serif;
+    font: 14px Helvetica Neue, Helvetica, sans-serif;
     }
 h2, h3 {
     margin: 1em 0;
-    font-family: sans-serif;
+    font-family: inherit;
     }
 h2 {
     font-size: 18px;
@@ -17,7 +17,22 @@ a {
     text-decoration: none;
     }
 button {
-    padding: 0.33em;
+    padding: 7px;
+    font: inherit;
+    margin: 0;
+    background: #ddd;
+    color: #444;
+    border-radius: 5px;
+    border: 1px solid #aaa;
+    cursor: pointer;
+    -webkit-transition: 0.2s background, 0.2s border-color, 0.2s box-shadow;
+    transition: 0.2s background, 0.2s border-color, 0.2s box-shadow;
+    }
+button:hover {
+    border-color: dodgerblue;
+    background: #fafafa;
+    box-shadow: 0 0 15px rgba(0,0,0,0.2);
+    color: black;
     }
 div > p:first-child {
     margin-top: 0;

src/css/dashboard.css

@@ -2,11 +2,16 @@ html, body {
     margin: 0;
     border: 0;
     padding: 0;
-    font: 15px httpsb,sans-serif;
+    font: 15px Helvetica Neue, Helvetica, sans-serif;
     position: relative;
     width: 100%;
     height: 100%;
     overflow: hidden;
+    background:#fafafa;
+    color:#444;
+    }
+body {
+    padding:8px;
     }
 #dashboard-nav {
     margin: 0;
@@ -18,30 +23,28 @@ html, body {
     }
 #dashboard-nav-widgets {
     margin: 0;
-    border-bottom: 1px solid #ccc;
+    border-bottom: 1px solid #aaa;
     padding: 4px 0 0;
     white-space: nowrap;
-    background-color: white;
     }
 #dashboard-nav-widgets span {
     padding: 0 0.5em;
     font-size: larger;
+    font-weight: bold;
     }
 .tabButton {
-    background-color: #eee;
+    background-color: #ddd;
-    border: 1px solid #ccc;
+    border: 1px solid #aaa;
-    border-top-left-radius: 3px;
+    color: #444;
-    border-top-right-radius: 3px;
-    border-bottom: 1px solid #ccc;
-    color: black;
     cursor: pointer;
     display: inline-block;
     font: inherit;
     margin: 0;
-    padding: 4px;
+    padding: 7px;
     position: relative;
     text-decoration: none;
     top: 1px;
+    opacity: 0.7;
     }
 .tabButton:focus {
     outline: 0;
@@ -50,15 +53,16 @@ html, body {
     color: inherited;
     }
 .tabButton.selected {
-    background-color: white;
+    background: #fafafa;
-    border-bottom: 1px solid white;
+    border-bottom: 1px solid #fafafa;
+    opacity: 1;
     }
 iframe {
     margin: 0;
     border: 0;
     padding: 0;
     background-color: transparent;
-    width: 100%;
+    width: calc(100% - 16px);
     }
 
 @media (max-width: 600px) {

src/css/dyna-rules.css

@@ -11,7 +11,7 @@ code {
 }
 #diff {
     border: 0;
-    border-top: 1px solid #eee;
+    border-top: 1px solid #ccc;
     margin: 0;
     padding: 0.5em 0 0 0;
     white-space: nowrap;
@@ -21,61 +21,44 @@ code {
     border: 0;
     box-sizing: border-box;
     display: inline-block;
-    font: 12px/1.8 monospace;
     margin: 0;
     padding: 0;
     position: relative;
     white-space: normal;
     width: 50%;
+    font-size: 14px;
+    border-right: 1px solid #ccc;
+    }
+#diff .pane.left {
+    border-left: 1px solid #ccc;
     }
 #diff .pane .rulesContainer {
     position: relative;
+    font: 12px/1.8 monospace;
     min-height: 150px; /* too short is confusing */
     }
 #diff .ruleActions {
     padding: 0 0 1em 0;
     text-align: center;
     }
-body[dir="ltr"] #revertButton:after {
+body[dir="ltr"] #revertButton:after,
-    content: '\2009\f061';
-    font-family: FontAwesome;
-    font-style: normal;
-    font-weight: normal;
-    line-height: 1;
-    vertical-align: baseline;
-    display: inline-block;
-    }
-body[dir="rtl"] #revertButton:after {
-    content: '\2009\f060';
-    font-family: FontAwesome;
-    font-style: normal;
-    font-weight: normal;
-    line-height: 1;
-    vertical-align: baseline;
-    display: inline-block;
-    }
-body[dir="ltr"] #commitButton:before {
-    content: '\f060\2009';
-    font-family: FontAwesome;
-    font-style: normal;
-    font-weight: normal;
-    line-height: 1;
-    vertical-align: baseline;
-    display: inline-block;
-    }
 body[dir="rtl"] #commitButton:before {
-    content: '\f061\2009';
+    content: '\2192';
-    font-family: FontAwesome;
+    font: inherit;
-    font-style: normal;
-    font-weight: normal;
-    line-height: 1;
-    vertical-align: baseline;
     display: inline-block;
+    margin: 0 3px;
+    }
+body[dir="rtl"] #revertButton:after,
+body[dir="ltr"] #commitButton:before {
+    content: '\2190';
+    font: inherit;
+    display: inline-block;
+    margin: 0 3px;
     }
 #revertButton,
 #commitButton,
 #diff.edit #editEnterButton {
-    opacity: 0.25;
+    opacity: 0.4;
     pointer-events: none;
     }
 #editStopButton,
@@ -97,7 +80,7 @@ body[dir="rtl"] #commitButton:before {
     }
 #diff ul {
     border: 0;
-    border-top: 1px solid #eee;
+    border-top: 1px solid #ccc;
     list-style-type: none;
     margin: 0;
     overflow: hidden;
@@ -106,9 +89,6 @@ body[dir="rtl"] #commitButton:before {
 #diff.edit .right ul {
     visibility: hidden;
     }
-#diff .left {
-    border-right: 1px solid #eee;
-    }
 #diff .right > ul {
     color: #888;
     }
@@ -144,7 +124,7 @@ body[dir="rtl"] #commitButton:before {
     background-color: #f8f8ff;
     border: 0;
     margin: 0;
-    border-top: 1px solid #eee;
+    border-top: 1px solid #ccc;
     direction: ltr;
     font: 12px monospace;
     line-height: 1.8;
@@ -165,6 +145,9 @@ body[dir="rtl"] #commitButton:before {
                         http://www.w3.org/wiki/CSS/Properties/white-space */
     word-wrap: normal;
     }
+#diff textarea:focus {
+    border: 1px solid dodgerblue;
+    }
 #diff.edit textarea {
     visibility: visible;
     }

src/css/fonts/OFL.txt

@@ -1,97 +0,0 @@
-Copyright (c) <dates>, <Copyright Holder> (<URL|email>),
-with Reserved Font Name <Reserved Font Name>.
-Copyright (c) <dates>, <additional Copyright Holder> (<URL|email>),
-with Reserved Font Name <additional Reserved Font Name>.
-Copyright (c) <dates>, <additional Copyright Holder> (<URL|email>).
-
-This Font Software is licensed under the SIL Open Font License, Version 1.1.
-This license is copied below, and is also available with a FAQ at:
-http://scripts.sil.org/OFL
-
-
------------------------------------------------------------
-SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
------------------------------------------------------------
-
-PREAMBLE
-The goals of the Open Font License (OFL) are to stimulate worldwide
-development of collaborative font projects, to support the font creation
-efforts of academic and linguistic communities, and to provide a free and
-open framework in which fonts may be shared and improved in partnership
-with others.
-
-The OFL allows the licensed fonts to be used, studied, modified and
-redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded, 
-redistributed and/or sold with any software provided that any reserved
-names are not used by derivative works. The fonts and derivatives,
-however, cannot be released under any other type of license. The
-requirement for fonts to remain under this license does not apply
-to any document created using the fonts or their derivatives.
-
-DEFINITIONS
-"Font Software" refers to the set of files released by the Copyright
-Holder(s) under this license and clearly marked as such. This may
-include source files, build scripts and documentation.
-
-"Reserved Font Name" refers to any names specified as such after the
-copyright statement(s).
-
-"Original Version" refers to the collection of Font Software components as
-distributed by the Copyright Holder(s).
-
-"Modified Version" refers to any derivative made by adding to, deleting,
-or substituting -- in part or in whole -- any of the components of the
-Original Version, by changing formats or by porting the Font Software to a
-new environment.
-
-"Author" refers to any designer, engineer, programmer, technical
-writer or other person who contributed to the Font Software.
-
-PERMISSION & CONDITIONS
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of the Font Software, to use, study, copy, merge, embed, modify,
-redistribute, and sell modified and unmodified copies of the Font
-Software, subject to the following conditions:
-
-1) Neither the Font Software nor any of its individual components,
-in Original or Modified Versions, may be sold by itself.
-
-2) Original or Modified Versions of the Font Software may be bundled,
-redistributed and/or sold with any software, provided that each copy
-contains the above copyright notice and this license. These can be
-included either as stand-alone text files, human-readable headers or
-in the appropriate machine-readable metadata fields within text or
-binary files as long as those fields can be easily viewed by the user.
-
-3) No Modified Version of the Font Software may use the Reserved Font
-Name(s) unless explicit written permission is granted by the corresponding
-Copyright Holder. This restriction only applies to the primary font name as
-presented to the users.
-
-4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
-Software shall not be used to promote, endorse or advertise any
-Modified Version, except to acknowledge the contribution(s) of the
-Copyright Holder(s) and the Author(s) or with their explicit written
-permission.
-
-5) The Font Software, modified or unmodified, in part or in whole,
-must be distributed entirely under this license, and must not be
-distributed under any other license. The requirement for fonts to
-remain under this license does not apply to any document created
-using the Font Software.
-
-TERMINATION
-This license becomes null and void if any of the above conditions are
-not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
-OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
-COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
-DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
-OTHER DEALINGS IN THE FONT SOFTWARE.

src/settings.html

@@ -8,12 +8,16 @@
 <style>
 ul {
     padding-left: 1em;
+    margin: 1em 0;
     }
 ul#userSettings {
     padding-left: 0;
     }
 li {
-    margin-top: 0.25em;
+    margin-top: 0.4em;
+    }
+label {
+    margin-left: 7px;
     }
 ul#userSettings {
     list-style-type: none;
@@ -41,8 +45,7 @@ ul#userSettings {
     <!-- <li><input id="experimental-enabled" type="checkbox" disabled><label data-i18n="settingsExperimentalPrompt" for="experimental-enabled"></label> -->
     </ul>
 
-<div id="localData" style="margin: 0 1em;">
+<div id="localData" style="border-top: 1px solid #ccc">
-    <div style="margin: 2.5em 0; border-top: 1px solid #ccc;"></div>
     <ul>
         <li>
         <li style="display: none;"><span data-i18n="settingsLastBackupPrompt"></span><ul>
@@ -55,7 +58,7 @@ ul#userSettings {
         </ul>
     </div>
 
-<div style="margin: 2.5em 1em;">
+<div>
     <p><button type="button" id="export" data-i18n="aboutBackupDataButton"></button>&ensp;
        <button type="button" id="import" data-i18n="aboutRestoreDataButton"></button>
        <input id="restoreFilePicker" type="file" accept="text/plain" class="hiddenFileInput">