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

With LESS function '.show-content-button' all the *Show-Media* links becomes
bottons.

Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>

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;

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);
+  }
+}

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

@@ -190,8 +190,7 @@ article[data-vim-selected].category-social {
   }
 
   .content,
-  .stat,
+  .stat {
-  .altlink {
     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;

searx/templates/simple/result_templates/default.html

@@ -3,7 +3,7 @@
 {{ result_header(result, favicons, image_proxify) -}}
 {{- result_sub_header(result) -}}
 {% if result.iframe_src -%}
-<p class="altlink"> &bull; <a class="btn-collapse collapsed media-loader disabled_if_nojs" data-target="#result-media-{{ index }}" data-btn-text-collapsed="{{ _('show media') }}" data-btn-text-not-collapsed="{{ _('hide media') }}">{{ icon('music-note') }} {{ _('show media') }}</a></p>
+<p class="altlink"><a class="btn-collapse collapsed media-loader disabled_if_nojs" data-target="#result-media-{{ index }}" data-btn-text-collapsed="{{ _('show media') }}" data-btn-text-not-collapsed="{{ _('hide media') }}">{{ icon('music-note') }} {{ _('show media') }}</a></p>
 {%- endif %}
 {%- if result.content %}
   <p class="content">

searx/templates/simple/result_templates/videos.html

@@ -3,7 +3,7 @@
 {{ result_header(result, favicons, image_proxify) }}
 {{ result_sub_header(result) }}
 {% if result.iframe_src -%}
-<p class="altlink"> &bull; <a class="btn-collapse collapsed media-loader disabled_if_nojs" data-target="#result-video-{{ index }}" data-btn-text-collapsed="{{ _('show video') }}" data-btn-text-not-collapsed="{{ _('hide video') }}">{{ icon('film-outline') }} {{ _('show video') }}</a></p>
+<p class="altlink"> <a class="btn-collapse collapsed media-loader disabled_if_nojs" data-target="#result-video-{{ index }}" data-btn-text-collapsed="{{ _('show video') }}" data-btn-text-not-collapsed="{{ _('hide video') }}">{{ icon('film-outline') }} {{ _('show video') }}</a></p>
 {%- endif %}
 {%- if result.content %}
   <p class="content">