Add some styling to gnqa answer page.

Signed-off-by: Munyoki Kilyungi <me@bonfacemunyoki.com>
Co-authored-by: Alexander Kabui <alexanderkabua@gmail.com>

1 files changed, 23 insertions, 0 deletions

diff --git a/gn2/wqflask/templates/gnqa.html b/gn2/wqflask/templates/gnqa.html
index 5688655d..31a04aac 100644
--- a/gn2/wqflask/templates/gnqa.html
+++ b/gn2/wqflask/templates/gnqa.html
@@ -3,6 +3,7 @@
 
 {% block css %}
 <style>
+
  .htmx-indicator{
      display:none;
      opacity: 0;
@@ -53,6 +54,28 @@
  .answers {
      width: 75%;
  }
+
+ details > summary {
+     padding: 2px 6px;
+     width: 15em;
+     background-color: #ddd;
+     border: none;
+     box-shadow: 3px 3px 4px black;
+     cursor: pointer;
+ }
+
+ details > p {
+     border-radius: 0 0 10px 10px;
+     background-color: #ddd;
+     padding: 2px 6px;
+     margin: 0;
+     box-shadow: 3px 3px 4px black;
+ }
+
+ details[open] > summary {
+     background-color: #ccf;
+ }
+
 </style>
 {% endblock %}