Merge pull request #460 from dalf/simple-minor-fixes

Simple theme: various fixes

6 files changed, 41 insertions, 14 deletions

diff --git a/searx/static/themes/simple/src/less/definitions.less b/searx/static/themes/simple/src/less/definitions.less
index 9df9019f2..d2e91f1c3 100644
--- a/searx/static/themes/simple/src/less/definitions.less
+++ b/searx/static/themes/simple/src/less/definitions.less
@@ -5,9 +5,10 @@
  */
 
 /// Light Theme
-html {
+:root {
   /// Base Colors
   --color-base-font: #444;
+  --color-base-font-rgb: 68, 68, 68;
   --color-base-background: #fff;
   --color-url-font: #29314d;
   --color-url-visited-font: #80b;
@@ -105,9 +106,10 @@ html {
 
 /// Dark Theme (autoswitch based on device pref)
 @media (prefers-color-scheme: dark) {
-  html {
+  :root {
     /// Base Colors
     --color-base-font: #bbb;
+    --color-base-font-rgb: 187, 187, 187;
     --color-base-background: #222;
     --color-url-font: #8af;
     --color-url-visited-font: #96b;
@@ -230,3 +232,7 @@ html {
 @icon-font-name:          "glyphicons-halflings-regular";
 //** Element ID within SVG icon file.
 @icon-font-svg-id:        "glyphicons_halflingsregular";
+
+// decoration of the select HTML elements
+@select-light-svg-path:   "../svg/select-light.svg";
+@select-dark-svg-path:    "../svg/select-dark.svg";
diff --git a/searx/static/themes/simple/src/less/preferences.less b/searx/static/themes/simple/src/less/preferences.less
index 70edc3c8f..e0e3dec4b 100644
--- a/searx/static/themes/simple/src/less/preferences.less
+++ b/searx/static/themes/simple/src/less/preferences.less
@@ -52,17 +52,25 @@
   }
 
   table.cookies {
-    width: auto;
+    width: 100%;
 
     th,
     td {
       text-align: left;
-      padding: 0.25em;
+      font-family: monospace;
+      font-size: 1rem;
+      padding: 0.5em;
+      vertical-align: top;
     }
 
-    th:first-child,
     td:first-child {
-      padding-right: 4em;
+      word-break: keep-all;
+      width: 14rem;
+      padding-right: 1rem;
+    }
+
+    td:last-child {
+      word-break: break-all;
     }
 
     & > tbody > tr:nth-child(even) > th,
@@ -88,7 +96,6 @@
     padding: 0.7em;
 
     a {
-      display: block;
       color: var(--color-settings-return-font);
     }
 
diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less
index a27d8a3e3..79c200dc8 100644
--- a/searx/static/themes/simple/src/less/style.less
+++ b/searx/static/themes/simple/src/less/style.less
@@ -468,7 +468,7 @@ article.result-images[data-vim-selected] {
       max-width: 100%;
       max-height: 12em;
       display: block;
-      margin: 0;
+      margin: 0 auto;
       padding: 0;
     }
 
diff --git a/searx/static/themes/simple/src/less/toolkit.less b/searx/static/themes/simple/src/less/toolkit.less
index 524cc93d1..681da43e7 100644
--- a/searx/static/themes/simple/src/less/toolkit.less
+++ b/searx/static/themes/simple/src/less/toolkit.less
@@ -328,7 +328,7 @@ select {
     -moz-appearance: none;
     border: none;
     border-bottom: 1px solid var(--color-toolkit-select-border);
-    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI1MTJweCIgaGVpZ2h0PSI1MTJweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwb2x5Z29uIHBvaW50cz0iMTI4LDE5MiAyNTYsMzIwIDM4NCwxOTIiLz48L2c+PC9zdmc+Cg==) no-repeat;
+    background: data-uri('image/svg+xml;charset=UTF-8', @select-light-svg-path) no-repeat;
     background-position-x: 105%;
     background-size: 2em;
     background-origin: content-box;
@@ -339,6 +339,12 @@ select {
       border-bottom: 1px solid var(--color-search-border);
     }
   }
+
+  @media (prefers-color-scheme: dark) {
+    select {
+      background-image: data-uri('image/svg+xml;charset=UTF-8', @select-dark-svg-path);
+    }
+  }
 }
 
 /* -- checkbox-onoff -- */
@@ -541,8 +547,8 @@ td:hover .engine-tooltip,
 .stacked-bar-chart-median {
   .stacked-bar-chart-base();
 
-  background: @stacked-bar-chart;
-  border: 1px solid fade(@stacked-bar-chart, 90%);
+  background: var(--color-base-font);
+  border: 1px solid rgba(var(--color-base-font-rgb), 0.9);
   padding: 0.3rem 0;
 }
 
@@ -550,7 +556,7 @@ td:hover .engine-tooltip,
   .stacked-bar-chart-base();
 
   background: transparent;
-  border: 1px solid fade(@stacked-bar-chart, 30%);
+  border: 1px solid rgba(var(--color-base-font-rgb), 0.3);
   padding: 0.3rem 0;
 }
 
@@ -558,7 +564,7 @@ td:hover .engine-tooltip,
   .stacked-bar-chart-base();
 
   background: transparent;
-  border-bottom: 1px dotted fade(@stacked-bar-chart, 50%);
+  border-bottom: 1px dotted rgba(var(--color-base-font-rgb), 0.5);
   padding: 0;
 }
 
@@ -566,7 +572,7 @@ td:hover .engine-tooltip,
   .stacked-bar-chart-base();
 
   background: transparent;
-  border-left: 1px solid fade(@stacked-bar-chart, 90%);
+  border-left: 1px solid rgba(var(--color-base-font-rgb), 0.9);
   padding: 0.4rem 0;
   width: 1px;
 }
diff --git a/searx/static/themes/simple/src/svg/select-dark.svg b/searx/static/themes/simple/src/svg/select-dark.svg
new file mode 100644
index 000000000..97335cea5
--- /dev/null
+++ b/searx/static/themes/simple/src/svg/select-dark.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
+<g><polygon fill="#ddd" points="128,192 256,320 384,192"/></g>
+</svg>
\ No newline at end of file
diff --git a/searx/static/themes/simple/src/svg/select-light.svg b/searx/static/themes/simple/src/svg/select-light.svg
new file mode 100644
index 000000000..3b707f018
--- /dev/null
+++ b/searx/static/themes/simple/src/svg/select-light.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512">
+<g><polygon points="128,192 256,320 384,192"/></g>
+</svg>
\ No newline at end of file