diff --git a/src/css/cloud-ui.css b/src/css/cloud-ui.css
index 609b3cddc..334e58773 100644
--- a/src/css/cloud-ui.css
+++ b/src/css/cloud-ui.css
@@ -2,62 +2,52 @@
background: url("../img/cloud.png") hsl(216, 100%, 93%);
border-radius: 3px;
margin: 0.5em 0;
- padding: 1em 1em 0 1em;
+ padding: 0.5em;
position: relative;
}
#cloudWidget.hide {
display: none;
}
-#cloudWidget > button {
- display: inline-block;
- font-family: FontAwesome;
- font-size: 160%;
- font-style: normal;
- font-weight: normal;
- line-height: 1;
- padding: 0.2em 0.25em 0.1em 0.25em;
- position: relative;
- vertical-align: baseline;
+#cloudWidget .cloudTools {
+ align-items: center;
+ display: flex;
+ flex-wrap: nowrap;
}
-#cloudWidget > button[disabled] {
+#cloudWidget button[disabled] {
visibility: hidden;
}
-#cloudWidget > button.error {
+#cloudWidget button > span.fa {
+ font-size: 150%;
+ }
+#cloudWidget button.error {
color: red;
}
-#cloudPush:after {
- content: '\f0ee';
- }
-#cloudPull:before,
-#cloudPullAndMerge:before {
- content: '\f0ed';
-}
#cloudPullAndMerge {
- margin: 0 0.25em;
+ margin-left: 0.25em;
}
-#cloudPullAndMerge:after {
- content: '\f067';
+#cloudPullAndMerge > span {
+ position: relative;
+}
+#cloudPullAndMerge > span > span {
font-size: 50%;
position: absolute;
- right: 0;
- top: 10%;
}
-#cloudWidget > span {
+#cloudInfo {
color: gray;
display: inline-block;
font-size: 90%;
margin: 0 1em;
+ overflow: hidden;
padding: 0;
- vertical-align: bottom;
white-space: pre;
}
#cloudError {
color: red;
- margin: 0;
- padding: 0.5em 0;
- }
-#cloudError > span {
font-size: x-small;
+ margin: 0.5em 0 0 0;
+ }
+#cloudError:empty {
+ display: none;
}
#cloudWidget > #cloudCog {
cursor: pointer;
diff --git a/src/css/dashboard-common.css b/src/css/dashboard-common.css
index 869ea8428..a011dd33e 100644
--- a/src/css/dashboard-common.css
+++ b/src/css/dashboard-common.css
@@ -6,7 +6,7 @@ body {
padding: 0;
}
body > div.body {
- padding: 0 0.5em 0.5em 0.5em;
+ padding: 0 0.5em;
}
@media screen and (max-device-width: 960px) {
body {
@@ -91,7 +91,17 @@ input[type="checkbox"][disabled] + label {
background-color: #FEDAE0;
}
@media (max-height: 640px), (max-height: 800px) and (max-width: 480px) {
+ .body > p,
+ .body > ul {
+ margin: 0.5em 0;
+ }
.vverbose {
display: none !important;
}
}
+@media (max-height: 400px) {
+ html {
+ min-height: 400px !important;
+ overflow: auto !important;
+ }
+ }
diff --git a/src/js/cloud-ui.js b/src/js/cloud-ui.js
index d0a76bb7a..c5c404219 100644
--- a/src/js/cloud-ui.js
+++ b/src/js/cloud-ui.js
@@ -1,7 +1,7 @@
/*******************************************************************************
uBlock Origin - a browser extension to block requests.
- Copyright (C) 2015-2017 Raymond Hill
+ Copyright (C) 2015-2018 Raymond Hill
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
@@ -75,7 +75,7 @@ var onCloudDataReceived = function(entry) {
};
var time = new Date(entry.tstamp);
- widget.querySelector('span').textContent =
+ widget.querySelector('#cloudInfo').textContent =
entry.source + '\n' +
time.toLocaleString('fullwide', timeOptions);
};
@@ -111,7 +111,7 @@ var pushData = function() {
document.getElementById('cloudPush')
.classList
.toggle('error', failed);
- document.querySelector('#cloudError > span')
+ document.querySelector('#cloudError')
.textContent = failed ? error : '';
fetchCloudData();
}