Merge pull request #81 from return42/csp-bar-graph

 [fix] make /stats more CSP compliant

.dir-locals.el

@@ -49,6 +49,10 @@
 
 ((nil
   . ((fill-column . 80)
+     (indent-tabs-mode . nil)
+     ))
+ (makefile-gmake-mode
+  . ((indent-tabs-mode . t)
      ))
  (python-mode
   . ((indent-tabs-mode . nil)

searx/static/themes/__common__/less/new_issue.less

@@ -1,14 +1,19 @@
 .github-issue-button {
-  display: block;
-  padding: 8px 16px;
-  font-family: sans-serif;
-  font-size: 16px;
-  color: white;
-  background-color: #238636 !important; /* important is needed cause to an !important in logicodev-dark */
-  border: #2ea043;
-  border-radius: 10px !important;
-  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px;
+    display: block;
+    padding: 8px 16px;
+    font-family: sans-serif;
+    font-size: 16px;
+    color: white;
+    background-color: #238636 !important; /* important is needed cause to an !important in logicodev-dark */
+    border: #2ea043;
+    border-radius: 10px !important;
+    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px;
 }
+
 .github-issue-button:hover {
-  background-color: #2ea043;
+    background-color: #2ea043;
+}
+
+.issue-hide {
+    display: none;
 }

searx/static/themes/__common__/less/stats.less

@@ -0,0 +1,83 @@
+.engine-stats {
+
+    .engine-name {
+        width: 20rem;
+    }
+
+    .engine-score {
+        width: 7rem;
+        text-align: right;
+    }
+
+    .result-count {
+    }
+
+    .response-time {
+    }
+
+    .engine-reliability {
+        text-align: right;
+    }
+
+    table.engine-error {
+        max-width: 1280px;
+        margin: 1rem;
+        border: 1px solid gray;
+    }
+
+    table.engine-error th.engine-error-type,
+    table.engine-error td.engine-error-type,
+    failed-test {
+        width: 10rem;
+    }
+
+    table.engine-error span.log_parameters
+    {
+        border-right: 1px solid gray;
+        padding: 0 1rem 0 0;
+        margin: 0 0 0 0.5rem;
+    }
+}
+
+.bar-chart-value {
+    width: 3em;
+    display: inline-block;
+    text-align: right;
+    padding-right: 0.5rem;
+}
+
+.bar-chart-graph {
+    width: calc(100% - 5rem);
+    display: inline-block;
+}
+
+.bar-chart-bar {
+    border: 3px solid #5bc0de;
+    margin: 1px 0;
+}
+
+.bar-chart-serie1 {
+    border: 3px solid #5bc0de;
+    margin: 1px 0;
+    float: left;
+}
+
+.bar-chart-serie2 {
+    border: 3px solid #deb15b;
+    margin: 1px 0;
+    float: left;
+}
+
+.bar0{
+    width: 0;
+    border: 0;
+}
+
+.generate-bar(100);
+
+.generate-bar(@n, @i: 1) when (@i =< @n) {
+    .bar@{i} {
+        width: (@i * 100% / @n);
+    }
+    .generate-bar(@n, (@i + 1));
+}

searx/static/themes/oscar/css/logicodev-dark.css

@@ -13,6 +13,362 @@
 .github-issue-button:hover {
   background-color: #2ea043;
 }
+.issue-hide {
+  display: none;
+}
+.engine-stats .engine-name {
+  width: 20rem;
+}
+.engine-stats .engine-score {
+  width: 7rem;
+  text-align: right;
+}
+.engine-stats .engine-reliability {
+  text-align: right;
+}
+.engine-stats table.engine-error {
+  max-width: 1280px;
+  margin: 1rem;
+  border: 1px solid gray;
+}
+.engine-stats table.engine-error th.engine-error-type,
+.engine-stats table.engine-error td.engine-error-type,
+.engine-stats failed-test {
+  width: 10rem;
+}
+.engine-stats table.engine-error span.log_parameters {
+  border-right: 1px solid gray;
+  padding: 0 1rem 0 0;
+  margin: 0 0 0 0.5rem;
+}
+.bar-chart-value {
+  width: 3em;
+  display: inline-block;
+  text-align: right;
+  padding-right: 0.5rem;
+}
+.bar-chart-graph {
+  width: calc(100% - 5rem);
+  display: inline-block;
+}
+.bar-chart-bar {
+  border: 3px solid #5bc0de;
+  margin: 1px 0;
+}
+.bar-chart-serie1 {
+  border: 3px solid #5bc0de;
+  margin: 1px 0;
+  float: left;
+}
+.bar-chart-serie2 {
+  border: 3px solid #deb15b;
+  margin: 1px 0;
+  float: left;
+}
+.bar0 {
+  width: 0;
+  border: 0;
+}
+.bar1 {
+  width: 1%;
+}
+.bar2 {
+  width: 2%;
+}
+.bar3 {
+  width: 3%;
+}
+.bar4 {
+  width: 4%;
+}
+.bar5 {
+  width: 5%;
+}
+.bar6 {
+  width: 6%;
+}
+.bar7 {
+  width: 7%;
+}
+.bar8 {
+  width: 8%;
+}
+.bar9 {
+  width: 9%;
+}
+.bar10 {
+  width: 10%;
+}
+.bar11 {
+  width: 11%;
+}
+.bar12 {
+  width: 12%;
+}
+.bar13 {
+  width: 13%;
+}
+.bar14 {
+  width: 14%;
+}
+.bar15 {
+  width: 15%;
+}
+.bar16 {
+  width: 16%;
+}
+.bar17 {
+  width: 17%;
+}
+.bar18 {
+  width: 18%;
+}
+.bar19 {
+  width: 19%;
+}
+.bar20 {
+  width: 20%;
+}
+.bar21 {
+  width: 21%;
+}
+.bar22 {
+  width: 22%;
+}
+.bar23 {
+  width: 23%;
+}
+.bar24 {
+  width: 24%;
+}
+.bar25 {
+  width: 25%;
+}
+.bar26 {
+  width: 26%;
+}
+.bar27 {
+  width: 27%;
+}
+.bar28 {
+  width: 28%;
+}
+.bar29 {
+  width: 29%;
+}
+.bar30 {
+  width: 30%;
+}
+.bar31 {
+  width: 31%;
+}
+.bar32 {
+  width: 32%;
+}
+.bar33 {
+  width: 33%;
+}
+.bar34 {
+  width: 34%;
+}
+.bar35 {
+  width: 35%;
+}
+.bar36 {
+  width: 36%;
+}
+.bar37 {
+  width: 37%;
+}
+.bar38 {
+  width: 38%;
+}
+.bar39 {
+  width: 39%;
+}
+.bar40 {
+  width: 40%;
+}
+.bar41 {
+  width: 41%;
+}
+.bar42 {
+  width: 42%;
+}
+.bar43 {
+  width: 43%;
+}
+.bar44 {
+  width: 44%;
+}
+.bar45 {
+  width: 45%;
+}
+.bar46 {
+  width: 46%;
+}
+.bar47 {
+  width: 47%;
+}
+.bar48 {
+  width: 48%;
+}
+.bar49 {
+  width: 49%;
+}
+.bar50 {
+  width: 50%;
+}
+.bar51 {
+  width: 51%;
+}
+.bar52 {
+  width: 52%;
+}
+.bar53 {
+  width: 53%;
+}
+.bar54 {
+  width: 54%;
+}
+.bar55 {
+  width: 55%;
+}
+.bar56 {
+  width: 56%;
+}
+.bar57 {
+  width: 57%;
+}
+.bar58 {
+  width: 58%;
+}
+.bar59 {
+  width: 59%;
+}
+.bar60 {
+  width: 60%;
+}
+.bar61 {
+  width: 61%;
+}
+.bar62 {
+  width: 62%;
+}
+.bar63 {
+  width: 63%;
+}
+.bar64 {
+  width: 64%;
+}
+.bar65 {
+  width: 65%;
+}
+.bar66 {
+  width: 66%;
+}
+.bar67 {
+  width: 67%;
+}
+.bar68 {
+  width: 68%;
+}
+.bar69 {
+  width: 69%;
+}
+.bar70 {
+  width: 70%;
+}
+.bar71 {
+  width: 71%;
+}
+.bar72 {
+  width: 72%;
+}
+.bar73 {
+  width: 73%;
+}
+.bar74 {
+  width: 74%;
+}
+.bar75 {
+  width: 75%;
+}
+.bar76 {
+  width: 76%;
+}
+.bar77 {
+  width: 77%;
+}
+.bar78 {
+  width: 78%;
+}
+.bar79 {
+  width: 79%;
+}
+.bar80 {
+  width: 80%;
+}
+.bar81 {
+  width: 81%;
+}
+.bar82 {
+  width: 82%;
+}
+.bar83 {
+  width: 83%;
+}
+.bar84 {
+  width: 84%;
+}
+.bar85 {
+  width: 85%;
+}
+.bar86 {
+  width: 86%;
+}
+.bar87 {
+  width: 87%;
+}
+.bar88 {
+  width: 88%;
+}
+.bar89 {
+  width: 89%;
+}
+.bar90 {
+  width: 90%;
+}
+.bar91 {
+  width: 91%;
+}
+.bar92 {
+  width: 92%;
+}
+.bar93 {
+  width: 93%;
+}
+.bar94 {
+  width: 94%;
+}
+.bar95 {
+  width: 95%;
+}
+.bar96 {
+  width: 96%;
+}
+.bar97 {
+  width: 97%;
+}
+.bar98 {
+  width: 98%;
+}
+.bar99 {
+  width: 99%;
+}
+.bar100 {
+  width: 100%;
+}
 * {
   border-radius: 0 !important;
 }
@@ -986,24 +1342,6 @@ th:hover .engine-tooltip,
   padding: 0.4rem 0;
   width: 1px;
 }
-.stacked-bar-chart-serie1 {
-  display: flex;
-  flex-shrink: 0;
-  flex-grow: 0;
-  flex-basis: unset;
-  background: #5bc0de;
-  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-  padding: 0.4rem 0;
-}
-.stacked-bar-chart-serie2 {
-  display: flex;
-  flex-shrink: 0;
-  flex-grow: 0;
-  flex-basis: unset;
-  background: #deb15b;
-  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-  padding: 0.4rem 0;
-}
 /*Global*/
 body {
   background: #1d1f21 none !important;

searx/static/themes/oscar/css/logicodev.css

@@ -13,6 +13,362 @@
 .github-issue-button:hover {
   background-color: #2ea043;
 }
+.issue-hide {
+  display: none;
+}
+.engine-stats .engine-name {
+  width: 20rem;
+}
+.engine-stats .engine-score {
+  width: 7rem;
+  text-align: right;
+}
+.engine-stats .engine-reliability {
+  text-align: right;
+}
+.engine-stats table.engine-error {
+  max-width: 1280px;
+  margin: 1rem;
+  border: 1px solid gray;
+}
+.engine-stats table.engine-error th.engine-error-type,
+.engine-stats table.engine-error td.engine-error-type,
+.engine-stats failed-test {
+  width: 10rem;
+}
+.engine-stats table.engine-error span.log_parameters {
+  border-right: 1px solid gray;
+  padding: 0 1rem 0 0;
+  margin: 0 0 0 0.5rem;
+}
+.bar-chart-value {
+  width: 3em;
+  display: inline-block;
+  text-align: right;
+  padding-right: 0.5rem;
+}
+.bar-chart-graph {
+  width: calc(100% - 5rem);
+  display: inline-block;
+}
+.bar-chart-bar {
+  border: 3px solid #5bc0de;
+  margin: 1px 0;
+}
+.bar-chart-serie1 {
+  border: 3px solid #5bc0de;
+  margin: 1px 0;
+  float: left;
+}
+.bar-chart-serie2 {
+  border: 3px solid #deb15b;
+  margin: 1px 0;
+  float: left;
+}
+.bar0 {
+  width: 0;
+  border: 0;
+}
+.bar1 {
+  width: 1%;
+}
+.bar2 {
+  width: 2%;
+}
+.bar3 {
+  width: 3%;
+}
+.bar4 {
+  width: 4%;
+}
+.bar5 {
+  width: 5%;
+}
+.bar6 {
+  width: 6%;
+}
+.bar7 {
+  width: 7%;
+}
+.bar8 {
+  width: 8%;
+}
+.bar9 {
+  width: 9%;
+}
+.bar10 {
+  width: 10%;
+}
+.bar11 {
+  width: 11%;
+}
+.bar12 {
+  width: 12%;
+}
+.bar13 {
+  width: 13%;
+}
+.bar14 {
+  width: 14%;
+}
+.bar15 {
+  width: 15%;
+}
+.bar16 {
+  width: 16%;
+}
+.bar17 {
+  width: 17%;
+}
+.bar18 {
+  width: 18%;
+}
+.bar19 {
+  width: 19%;
+}
+.bar20 {
+  width: 20%;
+}
+.bar21 {
+  width: 21%;
+}
+.bar22 {
+  width: 22%;
+}
+.bar23 {
+  width: 23%;
+}
+.bar24 {
+  width: 24%;
+}
+.bar25 {
+  width: 25%;
+}
+.bar26 {
+  width: 26%;
+}
+.bar27 {
+  width: 27%;
+}
+.bar28 {
+  width: 28%;
+}
+.bar29 {
+  width: 29%;
+}
+.bar30 {
+  width: 30%;
+}
+.bar31 {
+  width: 31%;
+}
+.bar32 {
+  width: 32%;
+}
+.bar33 {
+  width: 33%;
+}
+.bar34 {
+  width: 34%;
+}
+.bar35 {
+  width: 35%;
+}
+.bar36 {
+  width: 36%;
+}
+.bar37 {
+  width: 37%;
+}
+.bar38 {
+  width: 38%;
+}
+.bar39 {
+  width: 39%;
+}
+.bar40 {
+  width: 40%;
+}
+.bar41 {
+  width: 41%;
+}
+.bar42 {
+  width: 42%;
+}
+.bar43 {
+  width: 43%;
+}
+.bar44 {
+  width: 44%;
+}
+.bar45 {
+  width: 45%;
+}
+.bar46 {
+  width: 46%;
+}
+.bar47 {
+  width: 47%;
+}
+.bar48 {
+  width: 48%;
+}
+.bar49 {
+  width: 49%;
+}
+.bar50 {
+  width: 50%;
+}
+.bar51 {
+  width: 51%;
+}
+.bar52 {
+  width: 52%;
+}
+.bar53 {
+  width: 53%;
+}
+.bar54 {
+  width: 54%;
+}
+.bar55 {
+  width: 55%;
+}
+.bar56 {
+  width: 56%;
+}
+.bar57 {
+  width: 57%;
+}
+.bar58 {
+  width: 58%;
+}
+.bar59 {
+  width: 59%;
+}
+.bar60 {
+  width: 60%;
+}
+.bar61 {
+  width: 61%;
+}
+.bar62 {
+  width: 62%;
+}
+.bar63 {
+  width: 63%;
+}
+.bar64 {
+  width: 64%;
+}
+.bar65 {
+  width: 65%;
+}
+.bar66 {
+  width: 66%;
+}
+.bar67 {
+  width: 67%;
+}
+.bar68 {
+  width: 68%;
+}
+.bar69 {
+  width: 69%;
+}
+.bar70 {
+  width: 70%;
+}
+.bar71 {
+  width: 71%;
+}
+.bar72 {
+  width: 72%;
+}
+.bar73 {
+  width: 73%;
+}
+.bar74 {
+  width: 74%;
+}
+.bar75 {
+  width: 75%;
+}
+.bar76 {
+  width: 76%;
+}
+.bar77 {
+  width: 77%;
+}
+.bar78 {
+  width: 78%;
+}
+.bar79 {
+  width: 79%;
+}
+.bar80 {
+  width: 80%;
+}
+.bar81 {
+  width: 81%;
+}
+.bar82 {
+  width: 82%;
+}
+.bar83 {
+  width: 83%;
+}
+.bar84 {
+  width: 84%;
+}
+.bar85 {
+  width: 85%;
+}
+.bar86 {
+  width: 86%;
+}
+.bar87 {
+  width: 87%;
+}
+.bar88 {
+  width: 88%;
+}
+.bar89 {
+  width: 89%;
+}
+.bar90 {
+  width: 90%;
+}
+.bar91 {
+  width: 91%;
+}
+.bar92 {
+  width: 92%;
+}
+.bar93 {
+  width: 93%;
+}
+.bar94 {
+  width: 94%;
+}
+.bar95 {
+  width: 95%;
+}
+.bar96 {
+  width: 96%;
+}
+.bar97 {
+  width: 97%;
+}
+.bar98 {
+  width: 98%;
+}
+.bar99 {
+  width: 99%;
+}
+.bar100 {
+  width: 100%;
+}
 .searx-navbar {
   background: #29314D;
   height: 2.3rem;
@@ -1013,21 +1369,3 @@ th:hover .engine-tooltip,
   padding: 0.4rem 0;
   width: 1px;
 }
-.stacked-bar-chart-serie1 {
-  display: flex;
-  flex-shrink: 0;
-  flex-grow: 0;
-  flex-basis: unset;
-  background: #5bc0de;
-  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-  padding: 0.4rem 0;
-}
-.stacked-bar-chart-serie2 {
-  display: flex;
-  flex-shrink: 0;
-  flex-grow: 0;
-  flex-basis: unset;
-  background: #deb15b;
-  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-  padding: 0.4rem 0;
-}

searx/static/themes/oscar/css/pointhi.css

@@ -13,6 +13,362 @@
 .github-issue-button:hover {
   background-color: #2ea043;
 }
+.issue-hide {
+  display: none;
+}
+.engine-stats .engine-name {
+  width: 20rem;
+}
+.engine-stats .engine-score {
+  width: 7rem;
+  text-align: right;
+}
+.engine-stats .engine-reliability {
+  text-align: right;
+}
+.engine-stats table.engine-error {
+  max-width: 1280px;
+  margin: 1rem;
+  border: 1px solid gray;
+}
+.engine-stats table.engine-error th.engine-error-type,
+.engine-stats table.engine-error td.engine-error-type,
+.engine-stats failed-test {
+  width: 10rem;
+}
+.engine-stats table.engine-error span.log_parameters {
+  border-right: 1px solid gray;
+  padding: 0 1rem 0 0;
+  margin: 0 0 0 0.5rem;
+}
+.bar-chart-value {
+  width: 3em;
+  display: inline-block;
+  text-align: right;
+  padding-right: 0.5rem;
+}
+.bar-chart-graph {
+  width: calc(100% - 5rem);
+  display: inline-block;
+}
+.bar-chart-bar {
+  border: 3px solid #5bc0de;
+  margin: 1px 0;
+}
+.bar-chart-serie1 {
+  border: 3px solid #5bc0de;
+  margin: 1px 0;
+  float: left;
+}
+.bar-chart-serie2 {
+  border: 3px solid #deb15b;
+  margin: 1px 0;
+  float: left;
+}
+.bar0 {
+  width: 0;
+  border: 0;
+}
+.bar1 {
+  width: 1%;
+}
+.bar2 {
+  width: 2%;
+}
+.bar3 {
+  width: 3%;
+}
+.bar4 {
+  width: 4%;
+}
+.bar5 {
+  width: 5%;
+}
+.bar6 {
+  width: 6%;
+}
+.bar7 {
+  width: 7%;
+}
+.bar8 {
+  width: 8%;
+}
+.bar9 {
+  width: 9%;
+}
+.bar10 {
+  width: 10%;
+}
+.bar11 {
+  width: 11%;
+}
+.bar12 {
+  width: 12%;
+}
+.bar13 {
+  width: 13%;
+}
+.bar14 {
+  width: 14%;
+}
+.bar15 {
+  width: 15%;
+}
+.bar16 {
+  width: 16%;
+}
+.bar17 {
+  width: 17%;
+}
+.bar18 {
+  width: 18%;
+}
+.bar19 {
+  width: 19%;
+}
+.bar20 {
+  width: 20%;
+}
+.bar21 {
+  width: 21%;
+}
+.bar22 {
+  width: 22%;
+}
+.bar23 {
+  width: 23%;
+}
+.bar24 {
+  width: 24%;
+}
+.bar25 {
+  width: 25%;
+}
+.bar26 {
+  width: 26%;
+}
+.bar27 {
+  width: 27%;
+}
+.bar28 {
+  width: 28%;
+}
+.bar29 {
+  width: 29%;
+}
+.bar30 {
+  width: 30%;
+}
+.bar31 {
+  width: 31%;
+}
+.bar32 {
+  width: 32%;
+}
+.bar33 {
+  width: 33%;
+}
+.bar34 {
+  width: 34%;
+}
+.bar35 {
+  width: 35%;
+}
+.bar36 {
+  width: 36%;
+}
+.bar37 {
+  width: 37%;
+}
+.bar38 {
+  width: 38%;
+}
+.bar39 {
+  width: 39%;
+}
+.bar40 {
+  width: 40%;
+}
+.bar41 {
+  width: 41%;
+}
+.bar42 {
+  width: 42%;
+}
+.bar43 {
+  width: 43%;
+}
+.bar44 {
+  width: 44%;
+}
+.bar45 {
+  width: 45%;
+}
+.bar46 {
+  width: 46%;
+}
+.bar47 {
+  width: 47%;
+}
+.bar48 {
+  width: 48%;
+}
+.bar49 {
+  width: 49%;
+}
+.bar50 {
+  width: 50%;
+}
+.bar51 {
+  width: 51%;
+}
+.bar52 {
+  width: 52%;
+}
+.bar53 {
+  width: 53%;
+}
+.bar54 {
+  width: 54%;
+}
+.bar55 {
+  width: 55%;
+}
+.bar56 {
+  width: 56%;
+}
+.bar57 {
+  width: 57%;
+}
+.bar58 {
+  width: 58%;
+}
+.bar59 {
+  width: 59%;
+}
+.bar60 {
+  width: 60%;
+}
+.bar61 {
+  width: 61%;
+}
+.bar62 {
+  width: 62%;
+}
+.bar63 {
+  width: 63%;
+}
+.bar64 {
+  width: 64%;
+}
+.bar65 {
+  width: 65%;
+}
+.bar66 {
+  width: 66%;
+}
+.bar67 {
+  width: 67%;
+}
+.bar68 {
+  width: 68%;
+}
+.bar69 {
+  width: 69%;
+}
+.bar70 {
+  width: 70%;
+}
+.bar71 {
+  width: 71%;
+}
+.bar72 {
+  width: 72%;
+}
+.bar73 {
+  width: 73%;
+}
+.bar74 {
+  width: 74%;
+}
+.bar75 {
+  width: 75%;
+}
+.bar76 {
+  width: 76%;
+}
+.bar77 {
+  width: 77%;
+}
+.bar78 {
+  width: 78%;
+}
+.bar79 {
+  width: 79%;
+}
+.bar80 {
+  width: 80%;
+}
+.bar81 {
+  width: 81%;
+}
+.bar82 {
+  width: 82%;
+}
+.bar83 {
+  width: 83%;
+}
+.bar84 {
+  width: 84%;
+}
+.bar85 {
+  width: 85%;
+}
+.bar86 {
+  width: 86%;
+}
+.bar87 {
+  width: 87%;
+}
+.bar88 {
+  width: 88%;
+}
+.bar89 {
+  width: 89%;
+}
+.bar90 {
+  width: 90%;
+}
+.bar91 {
+  width: 91%;
+}
+.bar92 {
+  width: 92%;
+}
+.bar93 {
+  width: 93%;
+}
+.bar94 {
+  width: 94%;
+}
+.bar95 {
+  width: 95%;
+}
+.bar96 {
+  width: 96%;
+}
+.bar97 {
+  width: 97%;
+}
+.bar98 {
+  width: 98%;
+}
+.bar99 {
+  width: 99%;
+}
+.bar100 {
+  width: 100%;
+}
 html {
   position: relative;
   min-height: 100%;
@@ -772,21 +1128,3 @@ td:hover .engine-tooltip,
   padding: 0.4rem 0;
   width: 1px;
 }
-.stacked-bar-chart-serie1 {
-  display: flex;
-  flex-shrink: 0;
-  flex-grow: 0;
-  flex-basis: unset;
-  background: #5bc0de;
-  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-  padding: 0.4rem 0;
-}
-.stacked-bar-chart-serie2 {
-  display: flex;
-  flex-shrink: 0;
-  flex-grow: 0;
-  flex-basis: unset;
-  background: #deb15b;
-  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-  padding: 0.4rem 0;
-}

searx/static/themes/oscar/src/less/logicodev-dark/oscar.less

@@ -1,5 +1,6 @@
 @import "../logicodev/variables.less";
 @import "../../../../__common__/less/new_issue.less";
+@import "../../../../__common__/less/stats.less";
 
 @stacked-bar-chart: rgb(213, 216, 215, 1);
 

searx/static/themes/oscar/src/less/logicodev/oscar.less

@@ -1,5 +1,6 @@
 @import "variables.less";
 @import "../../../../__common__/less/new_issue.less";
+@import "../../../../__common__/less/stats.less";
 
 @import "navbar.less";
 @import "footer.less";

searx/static/themes/oscar/src/less/logicodev/preferences.less

@@ -89,17 +89,3 @@ td:hover .engine-tooltip, th:hover .engine-tooltip, .engine-tooltip:hover {
     padding: 0.4rem 0;
     width: 1px;
 }
-
-.stacked-bar-chart-serie1 {
-    .stacked-bar-chart-base();
-    background: #5bc0de;
-    box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
-    padding: 0.4rem 0;
-}
-
-.stacked-bar-chart-serie2 {
-    .stacked-bar-chart-base();
-    background: #deb15b;
-    box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
-    padding: 0.4rem 0;
-}

searx/static/themes/oscar/src/less/pointhi/oscar.less

@@ -1,5 +1,6 @@
 @import "variables.less";
 @import "../../../../__common__/less/new_issue.less";
+@import "../../../../__common__/less/stats.less";
 
 @import "footer.less";
 @import "checkbox.less";

searx/static/themes/oscar/src/less/pointhi/preferences.less

@@ -77,18 +77,3 @@ th:hover .engine-tooltip, td:hover .engine-tooltip, .engine-tooltip:hover {
     padding: 0.4rem 0;
     width: 1px;
 }
-
-.stacked-bar-chart-serie1 {
-    .stacked-bar-chart-base();
-    background: #5bc0de;
-    box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
-    padding: 0.4rem 0;
-}
-
-.stacked-bar-chart-serie2 {
-    .stacked-bar-chart-base();
-    background: #deb15b;
-    box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
-    padding: 0.4rem 0;
-}
-

searx/static/themes/simple/css/searx-rtl.css

@@ -1,4 +1,4 @@
-/*! searx | 28-04-2021 | https://github.com/searxng/searxng */
+/*! searx | 17-05-2021 | https://github.com/searxng/searxng */
 /*
 * searx, A privacy-respecting, hackable metasearch engine
 *
@@ -19,6 +19,362 @@
 .github-issue-button:hover {
   background-color: #2ea043;
 }
+.issue-hide {
+  display: none;
+}
+.engine-stats .engine-name {
+  width: 20rem;
+}
+.engine-stats .engine-score {
+  width: 7rem;
+  text-align: right;
+}
+.engine-stats .engine-reliability {
+  text-align: right;
+}
+.engine-stats table.engine-error {
+  max-width: 1280px;
+  margin: 1rem;
+  border: 1px solid gray;
+}
+.engine-stats table.engine-error th.engine-error-type,
+.engine-stats table.engine-error td.engine-error-type,
+.engine-stats failed-test {
+  width: 10rem;
+}
+.engine-stats table.engine-error span.log_parameters {
+  border-right: 1px solid gray;
+  padding: 0 1rem 0 0;
+  margin: 0 0 0 0.5rem;
+}
+.bar-chart-value {
+  width: 3em;
+  display: inline-block;
+  text-align: right;
+  padding-right: 0.5rem;
+}
+.bar-chart-graph {
+  width: calc(100% - 5rem);
+  display: inline-block;
+}
+.bar-chart-bar {
+  border: 3px solid #5bc0de;
+  margin: 1px 0;
+}
+.bar-chart-serie1 {
+  border: 3px solid #5bc0de;
+  margin: 1px 0;
+  float: left;
+}
+.bar-chart-serie2 {
+  border: 3px solid #deb15b;
+  margin: 1px 0;
+  float: left;
+}
+.bar0 {
+  width: 0;
+  border: 0;
+}
+.bar1 {
+  width: 1%;
+}
+.bar2 {
+  width: 2%;
+}
+.bar3 {
+  width: 3%;
+}
+.bar4 {
+  width: 4%;
+}
+.bar5 {
+  width: 5%;
+}
+.bar6 {
+  width: 6%;
+}
+.bar7 {
+  width: 7%;
+}
+.bar8 {
+  width: 8%;
+}
+.bar9 {
+  width: 9%;
+}
+.bar10 {
+  width: 10%;
+}
+.bar11 {
+  width: 11%;
+}
+.bar12 {
+  width: 12%;
+}
+.bar13 {
+  width: 13%;
+}
+.bar14 {
+  width: 14%;
+}
+.bar15 {
+  width: 15%;
+}
+.bar16 {
+  width: 16%;
+}
+.bar17 {
+  width: 17%;
+}
+.bar18 {
+  width: 18%;
+}
+.bar19 {
+  width: 19%;
+}
+.bar20 {
+  width: 20%;
+}
+.bar21 {
+  width: 21%;
+}
+.bar22 {
+  width: 22%;
+}
+.bar23 {
+  width: 23%;
+}
+.bar24 {
+  width: 24%;
+}
+.bar25 {
+  width: 25%;
+}
+.bar26 {
+  width: 26%;
+}
+.bar27 {
+  width: 27%;
+}
+.bar28 {
+  width: 28%;
+}
+.bar29 {
+  width: 29%;
+}
+.bar30 {
+  width: 30%;
+}
+.bar31 {
+  width: 31%;
+}
+.bar32 {
+  width: 32%;
+}
+.bar33 {
+  width: 33%;
+}
+.bar34 {
+  width: 34%;
+}
+.bar35 {
+  width: 35%;
+}
+.bar36 {
+  width: 36%;
+}
+.bar37 {
+  width: 37%;
+}
+.bar38 {
+  width: 38%;
+}
+.bar39 {
+  width: 39%;
+}
+.bar40 {
+  width: 40%;
+}
+.bar41 {
+  width: 41%;
+}
+.bar42 {
+  width: 42%;
+}
+.bar43 {
+  width: 43%;
+}
+.bar44 {
+  width: 44%;
+}
+.bar45 {
+  width: 45%;
+}
+.bar46 {
+  width: 46%;
+}
+.bar47 {
+  width: 47%;
+}
+.bar48 {
+  width: 48%;
+}
+.bar49 {
+  width: 49%;
+}
+.bar50 {
+  width: 50%;
+}
+.bar51 {
+  width: 51%;
+}
+.bar52 {
+  width: 52%;
+}
+.bar53 {
+  width: 53%;
+}
+.bar54 {
+  width: 54%;
+}
+.bar55 {
+  width: 55%;
+}
+.bar56 {
+  width: 56%;
+}
+.bar57 {
+  width: 57%;
+}
+.bar58 {
+  width: 58%;
+}
+.bar59 {
+  width: 59%;
+}
+.bar60 {
+  width: 60%;
+}
+.bar61 {
+  width: 61%;
+}
+.bar62 {
+  width: 62%;
+}
+.bar63 {
+  width: 63%;
+}
+.bar64 {
+  width: 64%;
+}
+.bar65 {
+  width: 65%;
+}
+.bar66 {
+  width: 66%;
+}
+.bar67 {
+  width: 67%;
+}
+.bar68 {
+  width: 68%;
+}
+.bar69 {
+  width: 69%;
+}
+.bar70 {
+  width: 70%;
+}
+.bar71 {
+  width: 71%;
+}
+.bar72 {
+  width: 72%;
+}
+.bar73 {
+  width: 73%;
+}
+.bar74 {
+  width: 74%;
+}
+.bar75 {
+  width: 75%;
+}
+.bar76 {
+  width: 76%;
+}
+.bar77 {
+  width: 77%;
+}
+.bar78 {
+  width: 78%;
+}
+.bar79 {
+  width: 79%;
+}
+.bar80 {
+  width: 80%;
+}
+.bar81 {
+  width: 81%;
+}
+.bar82 {
+  width: 82%;
+}
+.bar83 {
+  width: 83%;
+}
+.bar84 {
+  width: 84%;
+}
+.bar85 {
+  width: 85%;
+}
+.bar86 {
+  width: 86%;
+}
+.bar87 {
+  width: 87%;
+}
+.bar88 {
+  width: 88%;
+}
+.bar89 {
+  width: 89%;
+}
+.bar90 {
+  width: 90%;
+}
+.bar91 {
+  width: 91%;
+}
+.bar92 {
+  width: 92%;
+}
+.bar93 {
+  width: 93%;
+}
+.bar94 {
+  width: 94%;
+}
+.bar95 {
+  width: 95%;
+}
+.bar96 {
+  width: 96%;
+}
+.bar97 {
+  width: 97%;
+}
+.bar98 {
+  width: 98%;
+}
+.bar99 {
+  width: 99%;
+}
+.bar100 {
+  width: 100%;
+}
 /*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
 /* Document
    ========================================================================== */
@@ -1250,24 +1606,6 @@ td:hover .engine-tooltip,
   padding: 0.4rem 0;
   width: 1px;
 }
-.stacked-bar-chart-serie1 {
-  display: flex;
-  flex-shrink: 0;
-  flex-grow: 0;
-  flex-basis: unset;
-  background: #5bc0de;
-  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-  padding: 0.4rem 0;
-}
-.stacked-bar-chart-serie2 {
-  display: flex;
-  flex-shrink: 0;
-  flex-grow: 0;
-  flex-basis: unset;
-  background: #deb15b;
-  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-  padding: 0.4rem 0;
-}
 /*! Autocomplete.js v2.6.3 | license MIT | (c) 2017, Baptiste Donaux | http://autocomplete-js.com */
 .autocomplete {
   position: absolute;
@@ -2132,7 +2470,7 @@ article.result-images[data-vim-selected]::before {
   box-shadow: 0px 0px 5px #CCC;
 }
 #sidebar .infobox h2 {
-  margin: 0 0 .5em 0;
+  margin: 0 0 0.5em 0;
 }
 #sidebar .infobox img {
   max-width: 100%;

searx/static/themes/simple/css/searx.css

@@ -1,4 +1,4 @@
-/*! searx | 28-04-2021 | https://github.com/searxng/searxng */
+/*! searx | 17-05-2021 | https://github.com/searxng/searxng */
 /*
 * searx, A privacy-respecting, hackable metasearch engine
 *
@@ -19,6 +19,362 @@
 .github-issue-button:hover {
   background-color: #2ea043;
 }
+.issue-hide {
+  display: none;
+}
+.engine-stats .engine-name {
+  width: 20rem;
+}
+.engine-stats .engine-score {
+  width: 7rem;
+  text-align: right;
+}
+.engine-stats .engine-reliability {
+  text-align: right;
+}
+.engine-stats table.engine-error {
+  max-width: 1280px;
+  margin: 1rem;
+  border: 1px solid gray;
+}
+.engine-stats table.engine-error th.engine-error-type,
+.engine-stats table.engine-error td.engine-error-type,
+.engine-stats failed-test {
+  width: 10rem;
+}
+.engine-stats table.engine-error span.log_parameters {
+  border-right: 1px solid gray;
+  padding: 0 1rem 0 0;
+  margin: 0 0 0 0.5rem;
+}
+.bar-chart-value {
+  width: 3em;
+  display: inline-block;
+  text-align: right;
+  padding-right: 0.5rem;
+}
+.bar-chart-graph {
+  width: calc(100% - 5rem);
+  display: inline-block;
+}
+.bar-chart-bar {
+  border: 3px solid #5bc0de;
+  margin: 1px 0;
+}
+.bar-chart-serie1 {
+  border: 3px solid #5bc0de;
+  margin: 1px 0;
+  float: left;
+}
+.bar-chart-serie2 {
+  border: 3px solid #deb15b;
+  margin: 1px 0;
+  float: left;
+}
+.bar0 {
+  width: 0;
+  border: 0;
+}
+.bar1 {
+  width: 1%;
+}
+.bar2 {
+  width: 2%;
+}
+.bar3 {
+  width: 3%;
+}
+.bar4 {
+  width: 4%;
+}
+.bar5 {
+  width: 5%;
+}
+.bar6 {
+  width: 6%;
+}
+.bar7 {
+  width: 7%;
+}
+.bar8 {
+  width: 8%;
+}
+.bar9 {
+  width: 9%;
+}
+.bar10 {
+  width: 10%;
+}
+.bar11 {
+  width: 11%;
+}
+.bar12 {
+  width: 12%;
+}
+.bar13 {
+  width: 13%;
+}
+.bar14 {
+  width: 14%;
+}
+.bar15 {
+  width: 15%;
+}
+.bar16 {
+  width: 16%;
+}
+.bar17 {
+  width: 17%;
+}
+.bar18 {
+  width: 18%;
+}
+.bar19 {
+  width: 19%;
+}
+.bar20 {
+  width: 20%;
+}
+.bar21 {
+  width: 21%;
+}
+.bar22 {
+  width: 22%;
+}
+.bar23 {
+  width: 23%;
+}
+.bar24 {
+  width: 24%;
+}
+.bar25 {
+  width: 25%;
+}
+.bar26 {
+  width: 26%;
+}
+.bar27 {
+  width: 27%;
+}
+.bar28 {
+  width: 28%;
+}
+.bar29 {
+  width: 29%;
+}
+.bar30 {
+  width: 30%;
+}
+.bar31 {
+  width: 31%;
+}
+.bar32 {
+  width: 32%;
+}
+.bar33 {
+  width: 33%;
+}
+.bar34 {
+  width: 34%;
+}
+.bar35 {
+  width: 35%;
+}
+.bar36 {
+  width: 36%;
+}
+.bar37 {
+  width: 37%;
+}
+.bar38 {
+  width: 38%;
+}
+.bar39 {
+  width: 39%;
+}
+.bar40 {
+  width: 40%;
+}
+.bar41 {
+  width: 41%;
+}
+.bar42 {
+  width: 42%;
+}
+.bar43 {
+  width: 43%;
+}
+.bar44 {
+  width: 44%;
+}
+.bar45 {
+  width: 45%;
+}
+.bar46 {
+  width: 46%;
+}
+.bar47 {
+  width: 47%;
+}
+.bar48 {
+  width: 48%;
+}
+.bar49 {
+  width: 49%;
+}
+.bar50 {
+  width: 50%;
+}
+.bar51 {
+  width: 51%;
+}
+.bar52 {
+  width: 52%;
+}
+.bar53 {
+  width: 53%;
+}
+.bar54 {
+  width: 54%;
+}
+.bar55 {
+  width: 55%;
+}
+.bar56 {
+  width: 56%;
+}
+.bar57 {
+  width: 57%;
+}
+.bar58 {
+  width: 58%;
+}
+.bar59 {
+  width: 59%;
+}
+.bar60 {
+  width: 60%;
+}
+.bar61 {
+  width: 61%;
+}
+.bar62 {
+  width: 62%;
+}
+.bar63 {
+  width: 63%;
+}
+.bar64 {
+  width: 64%;
+}
+.bar65 {
+  width: 65%;
+}
+.bar66 {
+  width: 66%;
+}
+.bar67 {
+  width: 67%;
+}
+.bar68 {
+  width: 68%;
+}
+.bar69 {
+  width: 69%;
+}
+.bar70 {
+  width: 70%;
+}
+.bar71 {
+  width: 71%;
+}
+.bar72 {
+  width: 72%;
+}
+.bar73 {
+  width: 73%;
+}
+.bar74 {
+  width: 74%;
+}
+.bar75 {
+  width: 75%;
+}
+.bar76 {
+  width: 76%;
+}
+.bar77 {
+  width: 77%;
+}
+.bar78 {
+  width: 78%;
+}
+.bar79 {
+  width: 79%;
+}
+.bar80 {
+  width: 80%;
+}
+.bar81 {
+  width: 81%;
+}
+.bar82 {
+  width: 82%;
+}
+.bar83 {
+  width: 83%;
+}
+.bar84 {
+  width: 84%;
+}
+.bar85 {
+  width: 85%;
+}
+.bar86 {
+  width: 86%;
+}
+.bar87 {
+  width: 87%;
+}
+.bar88 {
+  width: 88%;
+}
+.bar89 {
+  width: 89%;
+}
+.bar90 {
+  width: 90%;
+}
+.bar91 {
+  width: 91%;
+}
+.bar92 {
+  width: 92%;
+}
+.bar93 {
+  width: 93%;
+}
+.bar94 {
+  width: 94%;
+}
+.bar95 {
+  width: 95%;
+}
+.bar96 {
+  width: 96%;
+}
+.bar97 {
+  width: 97%;
+}
+.bar98 {
+  width: 98%;
+}
+.bar99 {
+  width: 99%;
+}
+.bar100 {
+  width: 100%;
+}
 /*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
 /* Document
    ========================================================================== */
@@ -1250,24 +1606,6 @@ td:hover .engine-tooltip,
   padding: 0.4rem 0;
   width: 1px;
 }
-.stacked-bar-chart-serie1 {
-  display: flex;
-  flex-shrink: 0;
-  flex-grow: 0;
-  flex-basis: unset;
-  background: #5bc0de;
-  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-  padding: 0.4rem 0;
-}
-.stacked-bar-chart-serie2 {
-  display: flex;
-  flex-shrink: 0;
-  flex-grow: 0;
-  flex-basis: unset;
-  background: #deb15b;
-  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
-  padding: 0.4rem 0;
-}
 /*! Autocomplete.js v2.6.3 | license MIT | (c) 2017, Baptiste Donaux | http://autocomplete-js.com */
 .autocomplete {
   position: absolute;
@@ -2132,7 +2470,7 @@ article.result-images[data-vim-selected]::before {
   box-shadow: 0px 0px 5px #CCC;
 }
 #sidebar .infobox h2 {
-  margin: 0 0 .5em 0;
+  margin: 0 0 0.5em 0;
 }
 #sidebar .infobox img {
   max-width: 100%;

searx/static/themes/simple/gruntfile.js

@@ -68,11 +68,12 @@ module.exports = function(grunt) {
         options: {
           paths: ["less"],
           plugins: [
-            new (require('less-plugin-clean-css'))({
-              advanced: true,
-              compatibility: '*'
-            })
+            new (require('less-plugin-clean-css'))()
           ],
+          sourceMap: true,
+          sourceMapURL: (name) => { const s = name.split('/'); return s[s.length - 1] + '.map';},
+          outputSourceFiles: false,
+          sourceMapRootpath: '../',
           banner: '/*! searx | <%= grunt.template.today("dd-mm-yyyy") %> | <%= process.env.GIT_URL %> */\n'
         },
         files: {

searx/static/themes/simple/js/searx.head.min.js

@@ -1,4 +1,4 @@
-/*! simple/searx.min.js | 23-04-2021 |  */
+/*! simple/searx.min.js | 17-05-2021 | https://github.com/searxng/searxng */
 
 (function(t,e){"use strict";var a=e.currentScript||function(){var t=e.getElementsByTagName("script");return t[t.length-1]}();t.searx={touch:"ontouchstart"in t||t.DocumentTouch&&document instanceof DocumentTouch||false,method:a.getAttribute("data-method"),autocompleter:a.getAttribute("data-autocompleter")==="true",search_on_category_select:a.getAttribute("data-search-on-category-select")==="true",infinite_scroll:a.getAttribute("data-infinite-scroll")==="true",static_path:a.getAttribute("data-static-path"),translations:JSON.parse(a.getAttribute("data-translations"))};e.getElementsByTagName("html")[0].className=t.searx.touch?"js touch":"js"})(window,document);
 //# sourceMappingURL=searx.head.min.js.map

searx/static/themes/simple/less/style.less

@@ -7,6 +7,7 @@
 @stacked-bar-chart: rgb(0, 0, 0);
 
 @import "../../__common__/less/new_issue.less";
+@import "../../__common__/less/stats.less";
 
 @import "normalize.less";
 

searx/static/themes/simple/less/toolkit.less

@@ -551,17 +551,3 @@ th:hover .engine-tooltip, td:hover .engine-tooltip, .engine-tooltip:hover {
   padding: 0.4rem 0;
   width: 1px;
 }
-
-.stacked-bar-chart-serie1 {
-  .stacked-bar-chart-base();
-  background: #5bc0de;
-  box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
-  padding: 0.4rem 0;
-}
-
-.stacked-bar-chart-serie2 {
-  .stacked-bar-chart-base();
-  background: #deb15b;
-  box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
-  padding: 0.4rem 0;
-}

searx/static/themes/simple/package.json

@@ -4,7 +4,7 @@
     "grunt-contrib-concat": "~1.0.1",
     "grunt-contrib-cssmin": "^2.2.1",
     "grunt-contrib-jshint": "~1.1.0",
-    "grunt-contrib-less": "^1.4.1",
+    "grunt-contrib-less": "~3.0.0",
     "grunt-contrib-uglify": "~3.4.0",
     "grunt-contrib-watch": "~1.1.0",
     "grunt-webfont": "^1.7.1",

searx/templates/__common__/new_issue.html

@@ -3,7 +3,7 @@
     <input name="title" type="hidden" value="Bug: {{ engine_name }} engine">
     <input name="labels" type="hidden" value="bug">
     <input name="template" type="hidden" value="bug-report.md">
-    <textarea name="body" style="display: none;">{{- '' -}}
+    <textarea name="body" class="issue-hide">{{- '' -}}
 
 **Version of SearXNG, commit number if you are using on master branch and stipulate if you forked SearXNG**
 <!-- If you are running on master branch using git execute this command

searx/templates/oscar/stats.html

@@ -24,18 +24,18 @@
                         {% include 'oscar/messages/no_data_available.html' %}
                     </div>
                 {% else %}
-                    <table class="table table-hover table-condensed table-striped">
+                    <table class="table table-hover table-condensed table-striped engine-stats">
                         <tr>
-                            <th scope="col" style="width:20rem;">{{ th_sort('name', _("Engine name")) }}</th>
-                            <th scope="col" style="width:7rem; text-align: right;">{{ th_sort('score', _('Scores')) }}</th>
-                            <th scope="col">{{ th_sort('result_count', _('Result count')) }}</th>
-                            <th scope="col">{{ th_sort('time', _('Response time')) }}</th>
-                            <th scope="col" style="text-align: right;">{{ th_sort('reliability', _('Reliability')) }}</th>
+                            <th scope="col" class="engine-name">{{ th_sort('name', _("Engine name")) }}</th>
+                            <th scope="col" class="engine-score">{{ th_sort('score', _('Scores')) }}</th>
+                            <th scope="col" class="result-count">{{ th_sort('result_count', _('Result count')) }}</th>
+                            <th scope="col" class="response-time">{{ th_sort('time', _('Response time')) }}</th>
+                            <th scope="col" class="engine-reliability">{{ th_sort('reliability', _('Reliability')) }}</th>
                         </tr>
                         {% for engine_stat in engine_stats.get('time', []) %}
                         <tr>
-                            <td><a href="{{ url_for('stats', engine=engine_stat.name|e) }}">{{ engine_stat.name }}</a></td>
-                            <td style="text-align: right;">
+                            <td class="engine-name"><a href="{{ url_for('stats', engine=engine_stat.name|e) }}">{{ engine_stat.name }}</a></td>
+                            <td class="engine-score">
                                 {%- if engine_stat.score -%}
                                 <span aria-labelledby="{{engine_stat.name}}_score" >{{ engine_stat.score|round(1) }}</span>
                                 <div class="engine-tooltip text-left" role="tooltip" id="{{engine_stat.name}}_score">{{- "" -}}
@@ -43,21 +43,21 @@
                                 </div>
                                 {%- endif -%}
                             </td>
-                            <td>
+                            <td class="result-count">
                                 {%- if engine_stat.result_count -%}
-                                <span class="stacked-bar-chart-value">{{- engine_stat.result_count | int -}}</span>{{- "" -}}
-                                <span class="stacked-bar-chart" aria-hidden="true">{{- "" -}}
-                                    <span style="width: calc(max(2px, 100%*{{ (engine_stat.result_count / engine_stats.max_result_count )|round(3) }}))" class="stacked-bar-chart-serie1"></span>{{- "" -}}
-                                </span>
+                                <div class="bar-chart-value">{{- engine_stat.result_count | int -}}</div>{{- "" -}}
+                                <div class="bar-chart-graph" aria-hidden="true">{{- "" -}}
+                                    <div class="bar-chart-bar bar{{ (100 * engine_stat.result_count / engine_stats.max_result_count)|round }}"></div>{{- "" -}}
+                                </div>
                                 {%- endif -%}
                             </td>
-                            <td>
+                            <td class="response-time">
                                 {%- if engine_stat.total -%}
-                                <span class="stacked-bar-chart-value">{{- engine_stat.total | round(1) -}}</span>{{- "" -}}
-                                <span class="stacked-bar-chart" aria-labelledby="{{engine_stat.name}}_time" aria-hidden="true">{{- "" -}}
-                                    <span style="width: calc(max(2px, 100%*{{ (engine_stat.http / engine_stats.max_time )|round(3) }}))" class="stacked-bar-chart-serie1"></span>{{- "" -}}
-                                    <span style="width: calc(100%*{{ engine_stat.processing / engine_stats.max_time |round(3) }})" class="stacked-bar-chart-serie2"></span>{{- "" -}}
-                                </span>{{- "" -}}
+                                <div class="bar-chart-value">{{- engine_stat.total | round(1) -}}</div>{{- "" -}}
+                                <div class="bar-chart-graph" aria-labelledby="{{engine_stat.name}}_time" aria-hidden="true">{{- "" -}}
+                                    <div class="bar-chart-serie1 bar{{ (100 * engine_stat.http / engine_stats.max_time)|round }}"></div>{{- "" -}}
+                                    <div class="bar-chart-serie2 bar{{ (100 * engine_stat.processing / engine_stats.max_time)|round }}"></div>{{- "" -}}
+                                </div>
                                 <div class="engine-tooltip text-left" role="tooltip" id="{{engine_stat.name}}_time">{{- "" -}}
                                     <table class="table table-striped">
                                         <tr>
@@ -88,7 +88,7 @@
                                 </div>
                                 {%- endif -%}
                             </td>
-                            <td style="text-align: right;"> {{ engine_reliabilities.get(engine_stat.name, {}).get('reliablity') }}</td>
+                            <td class="engine-reliability"> {{ engine_reliabilities.get(engine_stat.name, {}).get('reliablity') }}</td>
                         </tr>
                         {% endfor %}
                     </table>
@@ -105,20 +105,20 @@
                             {% set ns.first = false %}
                             <h3>{% if secondary %}{{ _('Warnings') }}{% else %}{{ _('Errors and exceptions') }}{% endif %}</h3>
                         {% endif %}
-                        <table class="table table-striped table-bordered">
-                            <tbody style="padding-top: 1rem;">
+                        <table class="table table-striped table-bordered engine-error">
+                            <tbody>
                                 <tr>
                                     {%- if error.exception_classname -%}
-                                        <th scope="row" style="width: 10rem">{{ _('Exception') }}</th><td>{{ error.exception_classname }}</td>
+                                        <th scope="row" class="engine-error-type">{{ _('Exception') }}</th><td>{{ error.exception_classname }}</td>
                                     {%- elif error.log_message -%}
-                                        <th scope="row" style="width: 10rem">{{ _('Message') }}</th><td>{{ error.log_message }}</td>
+                                        <th scope="row" class="engine-error-type">{{ _('Message') }}</th><td>{{ error.log_message }}</td>
                                     {%- endif -%}
-                                    <th scope="row" style="width: 10rem">{{ _('Percentage') }}</th><td style="width: 10rem">{{ error.percentage }}</td>
+                                    <th scope="row" class="engine-error-type">{{ _('Percentage') }}</th><td class="engine-error-type">{{ error.percentage }}</td>
                                 </tr>
                                 {% if error.log_parameters and error.log_parameters != (None, None, None) %}<tr><th scope="row">{{ _('Parameter') }}</th>{{- '' -}}
                                     <td colspan="3">
                                         {%- for param in error.log_parameters -%}
-                                            <span style="border-right: 1px solid gray; padding: 0 1rem 0 0; margin: 0 0 0 0.5rem;">{{ param }}</span>
+                                            <span class="log_parameters">{{ param }}</span>
                                         {%- endfor -%}
                                     </td>
                                 </tr>
@@ -135,7 +135,7 @@
                 <h3>{{ _('Checker') }}</h3>
                 <table class="table table-striped table-bordered">
                     <tr>
-                        <th scope="col" style="width: 10rem">{{ _('Failed test') }}</th>
+                        <th scope="col" class="failed-test">{{ _('Failed test') }}</th>
                         <th scope="col">{{ _('Comment(s)') }}</th>
                     </tr>
                     {% for test_name, results in engine_reliabilities[selected_engine_name].checker.items() %}

searx/templates/simple/stats.html

@@ -23,18 +23,18 @@
 {% if not engine_stats.get('time') %}
 {{ _('There is currently no data available. ') }}
 {% else %}
-<table style="max-width: 1280px; margin: 0 auto 0 0;">
+<table class="engine-stats">
     <tr>
-        <th scope="col" style="width:20rem;">{{ th_sort('name', _("Engine name")) }}</th>
-        <th scope="col" style="width:7rem; text-align: right;">{{ th_sort('score', _('Scores')) }}</th>
-        <th scope="col">{{ th_sort('result_count', _('Result count')) }}</th>
-        <th scope="col">{{ th_sort('time', _('Response time')) }}</th>
-        <th scope="col" style="text-align: right;">{{ th_sort('reliability', _('Reliability')) }}</th>
+        <th scope="col" class="engine-name">{{ th_sort('name', _("Engine name")) }}</th>
+        <th scope="col" class="engine-score">{{ th_sort('score', _('Scores')) }}</th>
+        <th scope="col" class="result-count">{{ th_sort('result_count', _('Result count')) }}</th>
+        <th scope="col" class="response-time">{{ th_sort('time', _('Response time')) }}</th>
+        <th scope="col" class="engine-reliability">{{ th_sort('reliability', _('Reliability')) }}</th>
     </tr>
     {% for engine_stat in engine_stats.get('time', []) %}
     <tr>
-        <td><a href="{{ url_for('stats', engine=engine_stat.name|e) }}">{{ engine_stat.name }}</a></td>
-        <td style="text-align: right;">
+        <td class="engine-name"><a href="{{ url_for('stats', engine=engine_stat.name|e) }}">{{ engine_stat.name }}</a></td>
+        <td class="engine-score">
             {% if engine_stat.score %}
             <span aria-labelledby="{{engine_stat.name}}_score" >{{ engine_stat.score|round(1) }}</span>
             <div class="engine-tooltip" role="tooltip" id="{{engine_stat.name}}_score">{{- "" -}}
@@ -42,21 +42,23 @@
             </div>
             {% endif %}
         </td>
-        <td>
+        <td class="engine-result-count">
             {%- if engine_stat.result_count -%}
-            <span class="stacked-bar-chart-value">{{- engine_stat.result_count | int -}}</span>{{- "" -}}
-            <span class="stacked-bar-chart" aria-hidden="true">{{- "" -}}
-                <span style="width: calc(max(2px, 100%*{{ (engine_stat.result_count / engine_stats.max_result_count )|round(3) }}))" class="stacked-bar-chart-serie1"></span>{{- "" -}}
-            </span>
+
+            <div class="bar-chart-value">{{- engine_stat.result_count | int -}}</div>{{- "" -}}
+        <div class="bar-chart-graph" aria-hidden="true">
+          <div class="bar-chart-bar bar{{ (100 * engine_stat.result_count / engine_stats.max_result_count)|round }}"></div>{{- "" -}}
+        </div>
             {%- endif -%}
         </td>
-        <td>
+        <td class="response-time">
             {%- if engine_stat.total -%}
-            <span class="stacked-bar-chart-value">{{- engine_stat.total | round(1) -}}</span>{{- "" -}}
-            <span class="stacked-bar-chart" aria-labelledby="{{engine_stat.name}}_time" aria-hidden="true">{{- "" -}}
-                <span style="width: calc(max(2px, 100%*{{ (engine_stat.http / engine_stats.max_time )|round(3) }}))" class="stacked-bar-chart-serie1"></span>{{- "" -}}
-                <span style="width: calc(100%*{{ engine_stat.processing / engine_stats.max_time |round(3) }})" class="stacked-bar-chart-serie2"></span>{{- "" -}}
-            </span>{{- "" -}}
+
+            <div class="bar-chart-value">{{- engine_stat.total | round(1) -}}</div>{{- "" -}}
+        <div class="bar-chart-graph" aria-labelledby="{{engine_stat.name}}_time" aria-hidden="true">
+              <div class="bar-chart-serie1 bar{{ (100 * engine_stat.http / engine_stats.max_time)|round }}"></div>{{- "" -}}
+              <div class="bar-chart-serie2 bar{{ (100 * engine_stat.processing / engine_stats.max_time)|round }}"></div>{{- "" -}}
+        </div>
             <div class="engine-tooltip" role="tooltip" id="{{engine_stat.name}}_time">{{- "" -}}
                 <table>
                     <tr>
@@ -87,7 +89,7 @@
             </div>
             {%- endif -%}
         </td>
-        <td style="text-align: right;"> {{ engine_reliabilities.get(engine_stat.name, {}).get('reliablity') }}</td>
+        <td class="engine-reliability"> {{ engine_reliabilities.get(engine_stat.name, {}).get('reliablity') }}</td>
     </tr>
     {% endfor %}
 </table>
@@ -103,20 +105,20 @@
                         {% set ns.first = false %}
                         <h3>{% if secondary %}{{ _('Warnings') }}{% else %}{{ _('Errors and exceptions') }}{% endif %}</h3>
                     {% endif %}
-                    <table style="max-width: 1280px; margin: 1rem; border: 1px solid gray;">
-                        <tbody style="padding-top: 1rem;">
+                    <table class="engine-error">
+                        <tbody>
                             <tr>
                                 {%- if error.exception_classname -%}
-                                    <th scope="row" style="width: 10rem">{{ _('Exception') }}</th><td>{{ error.exception_classname }}</td>
+                                    <th scope="row" class="engine-error-type">{{ _('Exception') }}</th><td>{{ error.exception_classname }}</td>
                                 {%- elif error.log_message -%}
-                                    <th scope="row" style="width: 10rem">{{ _('Message') }}</th><td>{{ error.log_message }}</td>
+                                    <th scope="row" class="engine-error-type">{{ _('Message') }}</th><td>{{ error.log_message }}</td>
                                 {%- endif -%}
-                                <th scope="row" style="width: 10rem">{{ _('Percentage') }}</th><td style="width: 10rem">{{ error.percentage }}</td>
+                                <th scope="row" class="engine-error-type">{{ _('Percentage') }}</th><td class="engine-error-type">{{ error.percentage }}</td>
                             </tr>
                             {% if error.log_parameters and error.log_parameters != (None, None, None) %}<tr><th scope="row">{{ _('Parameter') }}</th>{{- '' -}}
                                 <td colspan="3">
                                     {%- for param in error.log_parameters -%}
-                                        <span style="border-right: 1px solid gray; padding: 0 1rem 0 0; margin: 0 0 0 0.5rem;">{{ param }}</span>
+                                        <span class="log_parameters">{{ param }}</span>
                                     {%- endfor -%}
                                 </td>
                             </tr>
@@ -133,7 +135,7 @@
             <h3>{{ _('Checker') }}</h3>
             <table>
                 <tr>
-                    <th scope="col" style="width: 10rem">{{ _('Failed test') }}</th>
+                    <th scope="col" class="failed-test">{{ _('Failed test') }}</th>
                     <th scope="col">{{ _('Comment(s)') }}</th>
                 </tr>
                 {% for test_name, results in engine_reliabilities[selected_engine_name].checker.items() %}