From 4c051e316c376f16e3fe3a7cfc5b2e3b72168a51 Mon Sep 17 00:00:00 2001
From: Axel Cocat <ax.cocat@gmail.com>
Date: Sat, 5 Mar 2022 22:32:02 +0100
Subject: [PATCH] feat(datatables): add styling to paging buttons

---
 package-lock.json              |  4 ++--
 package.json                   |  2 +-
 static/css/datatables.css      | 21 ++++++++++++++-------
 static/partials/datatables.hbs |  5 +++++
 4 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 8016c17..121827e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
 	"name": "azerothcore-armory",
-	"version": "0.9.0",
+	"version": "0.9.1",
 	"lockfileVersion": 2,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "azerothcore-armory",
-			"version": "0.9.0",
+			"version": "0.9.1",
 			"license": "MIT",
 			"dependencies": {
 				"@supercharge/promise-pool": "^2.1.0",
diff --git a/package.json b/package.json
index e51a1d3..cf8630a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "azerothcore-armory",
-	"version": "0.9.0",
+	"version": "0.9.1",
 	"description": "",
 	"scripts": {
 		"build": "tsc -p tsconfig.json",
diff --git a/static/css/datatables.css b/static/css/datatables.css
index c3c1b35..180c06e 100644
--- a/static/css/datatables.css
+++ b/static/css/datatables.css
@@ -17,6 +17,7 @@
 .dataTables_wrapper .dataTables_length select {
 	color: #ffffff;
 }
+
 .dataTables_wrapper .dataTables_length select option {
 	color: #000000;
 }
@@ -35,15 +36,17 @@ table.dataTable.display tbody tr:hover {
 	background-color: #3f3f3f;
 }
 
-.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
-.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
-.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
-	color: #a3a3a3 !important;
+.dataTables_wrapper .dataTables_paginate .ellipsis {
+	color: #e6e6e6;
+	line-height: 32px;
 }
 
-.dataTables_wrapper .dataTables_paginate .paginate_button,
-.dataTables_wrapper .dataTables_paginate {
-	color: #e6e6e6 !important;
+.dataTables_wrapper .dataTables_paginate .button.is-dark.disabled {
+	background-color: #282f2f;
+	border-color: transparent;
+	box-shadow: none;
+	opacity: 0.5;
+	cursor: not-allowed;
 }
 
 table.dataTable.row-border tbody th,
@@ -52,3 +55,7 @@ table.dataTable.display tbody th,
 table.dataTable.display tbody td {
 	border-top: 1px solid #222222;
 }
+
+.dataTables_paginate .button {
+	margin-right: 2px;
+}
diff --git a/static/partials/datatables.hbs b/static/partials/datatables.hbs
index 2529f88..81a8790 100644
--- a/static/partials/datatables.hbs
+++ b/static/partials/datatables.hbs
@@ -3,3 +3,8 @@
 <link rel="stylesheet" type="text/css" href="/css/datatables.css">
 <script type="application/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
 <script type="application/javascript" src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
+
+<script type="application/javascript">
+	$.fn.dataTable.ext.classes.sPageButton = "button is-dark";
+	$.fn.dataTable.ext.classes.sPageButtonActive = "is-active is-outlined is-inverted";
+</script>