UI improvements: better, consistent buttons, layout tweaks

src/3p-filters.html

@@ -13,13 +13,15 @@
 <button id="buttonApply" class="custom reloadAll disabled" data-i18n="3pApplyChanges"></button>
 <ul id="options">
     <li><input type="checkbox" id="autoUpdate"><label data-i18n="3pAutoUpdatePrompt1" for="autoUpdate"></label>&ensp;
-        <button class="custom reloadAll disabled" id="buttonUpdate" data-i18n="3pUpdateNow"></button>
-        <button id="buttonPurgeAll" class="custom disabled" data-i18n="3pPurgeAll"></button>
     <li><input type="checkbox" id="parseCosmeticFilters"><label data-i18n="3pParseAllABPHideFiltersPrompt1" for="parseCosmeticFilters"></label>
     <button class="whatisthis"></button>
     <div class="whatisthis-expandable para" data-i18n="3pParseAllABPHideFiltersInfo"></div>
-    <li><p id="listsOfBlockedHostsPrompt"></p>
 </ul>
+<div id="3pActionButtons">
+<button class="custom reloadAll disabled" id="buttonUpdate" data-i18n="3pUpdateNow"></button>
+<button id="buttonPurgeAll" class="custom disabled" data-i18n="3pPurgeAll"></button>
+</div>
+<p id="listsOfBlockedHostsPrompt"></p>
 <ul id="lists"></ul>
 
 

src/_locales/en/messages.json

@@ -40,7 +40,7 @@
     "description":"appears as tab name in dashboard"
   },
   "popupPowerSwitchInfo":{
-    "message":"Click: disable\/enable uBlock for this site.\n\nCtrl+click: disable uBlock only on this page.",
+    "message":"Click: disable\/enable uBlock for this site.",
     "description":"English: Click: disable\/enable uBlock for this site.\n\nCtrl+click: disable uBlock only on this page."
   },
   "popupBlockedRequestPrompt":{

src/css/3p-filters.css

@@ -2,9 +2,15 @@ ul {
     padding: 0;
     list-style-type: none;
     }
+label {
+    margin-left: 0.5em;
+    }
 #options li {
     margin-bottom: 0.5em;
     }
+#3pActionButtons {
+    margin-top: 5px;
+    }
 #lists {
     margin: 0.5em 0 4em 0;
     padding-left: 1em;
@@ -71,34 +77,6 @@ li.listEntry > a:nth-of-type(2) {
 .dim {
     opacity: 0.5;
     }
-/* I designed the button with: http://charliepark.org/bootstrap_buttons/ */
-button.custom {
-    padding: 5px;
-    border: 1px solid transparent;
-    border-color: #80b3ff #80b3ff hsl(216, 100%, 75%);
-    border-radius: 3px;
-    background-color: hsl(216, 100%, 75%);
-    background-image: linear-gradient(#a8cbff, #80b3ff);
-    background-repeat: repeat-x;
-    color: #222;
-    cursor: pointer;
-    opacity: 0.8;
-    }
-button.custom.disabled {
-    border-color: #dddddd #dddddd hsl(36, 0%, 85%);
-    background-color: hsl(36, 0%, 72%);
-    background-image: linear-gradient(#f2f2f2, #dddddd);
-    color: #aaa;
-    pointer-events: none;
-    }
-button.custom:hover {
-    opacity: 1.0;
-    }
-button.custom.reloadAll:not(.disabled) {
-    border-color: #ffcc7f #ffcc7f hsl(36, 100%, 73%);
-    background-color: hsl(36, 100%, 75%);
-    background-image: linear-gradient(#ffdca8, #ffcc7f);
-    }
 #buttonApply {
     display: initial;
     margin: 1em 0;
@@ -115,6 +93,10 @@ body[dir=rtl] #buttonApply {
 #buttonApply.disabled {
     display: none;
     }
+button.disabled {
+    opacity: 0.6;
+    pointer-events: none;
+    }
 span.status {
     margin: 0 0 0 1em;
     border: 1px solid transparent;
@@ -176,10 +158,8 @@ body.busy #busyOverlay {
     top: 0;
     }
 #busyOverlay > div:nth-of-type(2) {
-    background-color: #eee;
+    background-color: dimgray;
-    border: 1px solid transparent;
+    border-radius: 1.5em;
-    border-color: #80b3ff #80b3ff hsl(216, 100%, 75%);
-    border-radius: 3px;
     box-sizing: border-box;
     height: 3em;
     left: 10%;
@@ -188,10 +168,9 @@ body.busy #busyOverlay {
     width: 80%;
     }
 #busyOverlay > div:nth-of-type(2) > div:nth-of-type(1) {
-    background-color: hsl(216, 100%, 75%);
+    background: dodgerblue;
-    background-image: linear-gradient(#a8cbff, #80b3ff);
-    background-repeat: repeat-x;
     border: 0;
+    border-radius: 1.5em;
     box-sizing: border-box;
     height: 100%;
     left: 0;
@@ -202,7 +181,7 @@ body.busy #busyOverlay {
     transition:0.5s width;
     }
 #busyOverlay > div:nth-of-type(2) > div:nth-of-type(2) {
-    color: #222;
+    color: #eee;
     background-color: transparent;
     border: 0;
     box-sizing: border-box;

src/css/dashboard-common.css

@@ -21,19 +21,23 @@ button {
     padding: 7px;
     font: inherit;
     margin: 0;
-    background: #ddd;
+    background: dimgray;
-    color: #444;
+    color: #eee;
     border-radius: 5px;
-    border: 1px solid #aaa;
+    border: 1px solid dimgray;
     cursor: pointer;
-    -webkit-transition: 0.2s background, 0.2s border-color, 0.2s box-shadow;
+    -webkit-transition: 0.2s background, 0.2s border, 0.2s box-shadow;
-    transition: 0.2s background, 0.2s border-color, 0.2s box-shadow;
+    transition: 0.2s background, 0.2s border, 0.2s box-shadow;
     }
 button:hover {
     border-color: dodgerblue;
-    background: #fafafa;
+    background: dodgerblue;
-    box-shadow: 0 0 15px rgba(0,0,0,0.2);
+    box-shadow: 0 0 15px rgba(0,0,0,0.4);
-    color: black;
+    border-radius: 0;
+    color: white;
+    }
+label {
+    cursor: pointer;
     }
 div > p:first-child {
     margin-top: 0;

src/css/dashboard.css

@@ -7,7 +7,7 @@ html, body {
     width: 100%;
     height: 100%;
     overflow: hidden;
-    background:#fafafa;
+    background:#fdfdfd;
     color:#444;
     }
 body {
@@ -33,6 +33,13 @@ body {
     font-size: larger;
     font-weight: bold;
     }
+.homepageLink {
+    text-decoration: none;
+    color: inherit;
+    }
+.homepageLink:hover {
+    color: dodgerblue;
+    }
 .tabButton {
     background-color: #ddd;
     border: 1px solid #aaa;

src/dashboard.html

@@ -13,7 +13,7 @@
 <body>
 <div id="dashboard-nav">
     <div id="dashboard-nav-widgets">
-        <span data-i18n="extName"></span>
+        <a class="homepageLink" href="https://chrismatic.io/ublock/" target="_blank"><span data-i18n="extName"></span></a>
         <a class="tabButton" href="#settings.html" data-i18n="settingsPageName"></a>
         <a class="tabButton" href="#3p-filters.html" data-i18n="3pPageName"></a>
         <a class="tabButton" href="#1p-filters.html" data-i18n="1pPageName"></a>