Merge pull request #527 from dalf/fix-simple-modal

[fix] simple theme: fix modal dialog

searx/static/themes/simple/css/searxng-rtl.css

@@ -1525,6 +1525,7 @@ div.selectable_url pre {
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
+  display: block;
   background: var(--color-toolkit-dialog-background);
   position: fixed;
   top: 50%;
@@ -1561,6 +1562,9 @@ div.selectable_url pre {
   margin-top: 0.3em;
   margin-bottom: 0.3em;
 }
+.dialog-modal h3 {
+  margin-top: 0;
+}
 .btn-collapse {
   cursor: pointer;
 }
@@ -2185,6 +2189,19 @@ article.result-images .detail {
     margin-right: 1rem;
   }
 }
+.dialog-modal {
+  animation-name: dialogmodal;
+  animation-duration: 0.13s;
+}
+@keyframes dialogmodal {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.5;
+    transform: translate(-50%, -50%) scale(1.05);
+  }
+}
 #main_index {
   margin-top: 26vh;
 }

searx/static/themes/simple/css/searxng.css

@@ -1525,6 +1525,7 @@ div.selectable_url pre {
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
+  display: block;
   background: var(--color-toolkit-dialog-background);
   position: fixed;
   top: 50%;
@@ -1561,6 +1562,9 @@ div.selectable_url pre {
   margin-top: 0.3em;
   margin-bottom: 0.3em;
 }
+.dialog-modal h3 {
+  margin-top: 0;
+}
 .btn-collapse {
   cursor: pointer;
 }
@@ -2185,6 +2189,19 @@ article.result-images .detail {
     margin-right: 1rem;
   }
 }
+.dialog-modal {
+  animation-name: dialogmodal;
+  animation-duration: 0.13s;
+}
+@keyframes dialogmodal {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.5;
+    transform: translate(-50%, -50%) scale(1.05);
+  }
+}
 #main_index {
   margin-top: 26vh;
 }

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

@@ -0,0 +1,15 @@
+.dialog-modal {
+  animation-name: dialogmodal;
+  animation-duration: 0.13s;
+
+  @keyframes dialogmodal {
+    0% {
+      opacity: 0;
+    }
+
+    50% {
+      opacity: 0.5;
+      transform: translate(-50%, -50%) scale(1.05);
+    }
+  }
+}

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

@@ -16,6 +16,7 @@
 @import "toolkit.less";
 @import "autocomplete.less";
 @import "detail.less";
+@import "animations.less";
 
 // for index.html template
 @import "index.less";

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

@@ -183,6 +183,7 @@ div.selectable_url {
 .dialog-modal {
   .dialog();
 
+  display: block;
   background: var(--color-toolkit-dialog-background);
   position: fixed;
   top: 50%;
@@ -190,6 +191,10 @@ div.selectable_url {
   margin: 0 auto;
   transform: translate(-50%, -50%);
   z-index: 10000000;
+
+  h3 {
+    margin-top: 0;
+  }
 }
 
 // btn-collapse