Merge pull request #885 from return42/mod-simple

[mod] simple theme: define a '.show-content-button'

3 files changed, 24 insertions, 2 deletions

diff --git a/searx/static/themes/simple/src/less/definitions.less b/searx/static/themes/simple/src/less/definitions.less
index b42dcd6e2..abda5e37c 100644
--- a/searx/static/themes/simple/src/less/definitions.less
+++ b/searx/static/themes/simple/src/less/definitions.less
@@ -28,6 +28,8 @@
   /// Button Colors
   --color-btn-background: #3050ff;
   --color-btn-font: #fff;
+  --color-show-btn-background: #bbb;
+  --color-show-btn-font: #222;
   /// Search Input Colors
   --color-search-border: #bbb;
   --color-search-background: #fff;
@@ -129,6 +131,8 @@
   /// Button Colors
   --color-btn-background: #58f;
   --color-btn-font: #222;
+  --color-show-btn-background: #555;
+  --color-show-btn-font: #bbb;
   /// Search Input Colors
   --color-search-border: #555;
   --color-search-background: #222;
diff --git a/searx/static/themes/simple/src/less/mixins.less b/searx/static/themes/simple/src/less/mixins.less
index 7d8082f5a..a4bae7128 100644
--- a/searx/static/themes/simple/src/less/mixins.less
+++ b/searx/static/themes/simple/src/less/mixins.less
@@ -25,3 +25,16 @@
   -webkit-touch-callout: none;
   user-select: none;
 }
+
+.show-content-button() {
+  padding: 5px 10px;
+  .rounded-corners-tiny;
+  background: var(--color-show-btn-background);
+  color: var(--color-show-btn-font);
+  cursor: pointer;
+
+  &:hover {
+    background: var(--color-btn-background);
+    color: var(--color-btn-font);
+  }
+}
diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less
index 692d9e7c0..dd038cdf7 100644
--- a/searx/static/themes/simple/src/less/style.less
+++ b/searx/static/themes/simple/src/less/style.less
@@ -190,8 +190,7 @@ article[data-vim-selected].category-social {
   }
 
   .content,
-  .stat,
-  .altlink {
+  .stat {
     font-size: 0.9em;
     margin: 0;
     padding: 0;
@@ -206,6 +205,12 @@ article[data-vim-selected].category-social {
     }
   }
 
+  .altlink a {
+    font-size: 0.9em;
+    margin: 0 10px 0 0;
+    .show-content-button;
+  }
+
   .codelines {
     .highlight {
       color: inherit;