[mod] simple theme: build design for details (collapsables)

* set border top and bottom on sidebar collasables
* inrease peading on summary so its easier to click on mobile
* remove margins and add flex wrapper to normalize elements in sidebar

1 files changed, 19 insertions, 2 deletions

diff --git a/searx/static/themes/simple/src/less/style.less b/searx/static/themes/simple/src/less/style.less
index 4e2f71015..3545ed309 100644
--- a/searx/static/themes/simple/src/less/style.less
+++ b/searx/static/themes/simple/src/less/style.less
@@ -529,6 +529,10 @@ article[data-vim-selected].category-social {
   grid-area: urls;
 }
 
+#apis .wrapper {
+  display: flex;
+}
+
 #suggestions {
   .wrapper {
     display: flex;
@@ -598,6 +602,21 @@ article[data-vim-selected].category-social {
   color: var(--color-base-font);
 }
 
+summary.title {
+  cursor: pointer;
+  padding-top: 1em;
+}
+
+.sidebar-collapsable {
+  border-top: 1px solid var(--color-sidebar-border);
+  padding-bottom: 0.5em;
+}
+
+#sidebar-end-collapsable {
+  border-bottom: 1px solid var(--color-sidebar-border);
+  width: 100%;
+}
+
 #answers {
   grid-area: answers;
   background: var(--color-answer-background);
@@ -695,8 +714,6 @@ article[data-vim-selected].category-social {
 }
 
 #search_url {
-  margin-top: 8px;
-
   div.selectable_url {
     pre {
       width: 200em;