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

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

Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
This commit is contained in:
Markus Heiser 2022-02-08 17:45:18 +01:00
parent ace5401632
commit 16d05ca285
5 changed files with 26 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
searx/static/themes/simple/src/less/definitions.less
View File

@ -28,6 +28,8 @@
/// Button Colors /// Button Colors
--color-btn-background: #3050ff; --color-btn-background: #3050ff;
--color-btn-font: #fff; --color-btn-font: #fff;
--color-show-btn-background: #bbb;
--color-show-btn-font: #222;
/// Search Input Colors /// Search Input Colors
--color-search-border: #bbb; --color-search-border: #bbb;
--color-search-background: #fff; --color-search-background: #fff;
@ -129,6 +131,8 @@
/// Button Colors /// Button Colors
--color-btn-background: #58f; --color-btn-background: #58f;
--color-btn-font: #222; --color-btn-font: #222;
--color-show-btn-background: #555;
--color-show-btn-font: #bbb;
/// Search Input Colors /// Search Input Colors
--color-search-border: #555; --color-search-border: #555;
--color-search-background: #222; --color-search-background: #222;

13
searx/static/themes/simple/src/less/mixins.less
View File

@ -25,3 +25,16 @@
-webkit-touch-callout: none; -webkit-touch-callout: none;
user-select: 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);
}
}

9
searx/static/themes/simple/src/less/style.less
View File

@ -190,8 +190,7 @@ article[data-vim-selected].category-social {
} }
.content, .content,
.stat, .stat {
.altlink {
font-size: 0.9em; font-size: 0.9em;
margin: 0; margin: 0;
padding: 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 { .codelines {
.highlight { .highlight {
color: inherit; color: inherit;

2
searx/templates/simple/result_templates/default.html
View File

@ -3,7 +3,7 @@
{{ result_header(result, favicons, image_proxify) -}} {{ result_header(result, favicons, image_proxify) -}}
{{- result_sub_header(result) -}} {{- result_sub_header(result) -}}
{% if result.iframe_src -%} {% 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 %} {%- endif %}
{%- if result.content %} {%- if result.content %}
<p class="content"> <p class="content">

2
searx/templates/simple/result_templates/videos.html
View File

@ -3,7 +3,7 @@
{{ result_header(result, favicons, image_proxify) }} {{ result_header(result, favicons, image_proxify) }}
{{ result_sub_header(result) }} {{ result_sub_header(result) }}
{% if result.iframe_src -%} {% 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 %} {%- endif %}
{%- if result.content %} {%- if result.content %}
<p class="content"> <p class="content">