From ed782ced56528f1a2ee4a141cdcad8385b3c1f4c Mon Sep 17 00:00:00 2001
From: aftercase <74765798+aftercase@users.noreply.github.com>
Date: Mon, 16 Aug 2021 18:58:47 +0100
Subject: [PATCH] added load animation

Added load animation for archive page when it's searching.
---
 theme/bulma/archive.php              |  1 +
 theme/bulma/css/table-responsive.css | 32 +++++++++++++---------------
 2 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/theme/bulma/archive.php b/theme/bulma/archive.php
index 1092ff3..41e1921 100644
--- a/theme/bulma/archive.php
+++ b/theme/bulma/archive.php
@@ -20,6 +20,7 @@
             rowReorder: { selector: 'td:nth-child(2)'},
             responsive: true,
             processing: true,
+            language: {processing: '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span> '},
             autoWidth: false,
             ajax: "api/ajax_pastes.php",
             initComplete: function () {
diff --git a/theme/bulma/css/table-responsive.css b/theme/bulma/css/table-responsive.css
index 015ddfa..43a257e 100644
--- a/theme/bulma/css/table-responsive.css
+++ b/theme/bulma/css/table-responsive.css
@@ -2,6 +2,7 @@ table.dataTable.dtr-inline.collapsed > tbody > tr > td.child,
 table.dataTable.dtr-inline.collapsed > tbody > tr > th.child,
 table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty {
     cursor: default !important;
+    background-color: #e8e8e8;
 }
 table.dataTable.dtr-inline.collapsed > tbody > tr > td.child:before,
 table.dataTable.dtr-inline.collapsed > tbody > tr > th.child:before,
@@ -24,21 +25,20 @@ table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
     margin-top: -9px;
     display: block;
     position: absolute;
-    color: white;
     border: 0.15em solid white;
     border-radius: 1em;
     box-sizing: content-box;
     text-align: center;
     text-indent: 0 !important;
-    font-family: "Courier New", Courier, monospace;
+    font-family: 'Font Awesome\ 5 Free'; 
+    font-weight: 900;
     line-height: 1em;
-    content: "+";
-    background-color: #3298dc;
+    content:"\f054";
+    color: #3298dc;
 }
 table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before,
 table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before {
-    content: "-";
-    background-color: #d33333;
+    content:"\f078";
 }
 table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td.dtr-control,
 table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th.dtr-control {
@@ -65,30 +65,28 @@ table.dataTable.dtr-column > tbody > tr > th.dtr-control:before,
 table.dataTable.dtr-column > tbody > tr > td.control:before,
 table.dataTable.dtr-column > tbody > tr > th.control:before {
     top: 50%;
-    left: 50%;
-    height: 0.8em;
-    width: 0.8em;
-    margin-top: -0.5em;
-    margin-left: -0.5em;
+    left: 5px; 
+    height: 1em;
+    width: 1em;
+    margin-top: -9px;
     display: block;
     position: absolute;
-    color: white;
     border: 0.15em solid white;
     border-radius: 1em;
     box-sizing: content-box;
     text-align: center;
     text-indent: 0 !important;
-    font-family: "Courier New", Courier, monospace;
+    font-family: 'Font Awesome\ 5 Free'; 
+    font-weight: 900;
     line-height: 1em;
-    content: "+";
-    background-color: #31b131;
+    content:"\f054";
+    color: #3298dc;
 }
 table.dataTable.dtr-column > tbody > tr.parent td.dtr-control:before,
 table.dataTable.dtr-column > tbody > tr.parent th.dtr-control:before,
 table.dataTable.dtr-column > tbody > tr.parent td.control:before,
 table.dataTable.dtr-column > tbody > tr.parent th.control:before {
-    content: "-";
-    background-color: #d33333;
+    content:"\f078";
 }
 table.dataTable > tbody > tr.child {
     padding: 0.5em 1em;