From 414e04b4408e35151215c40fc6f4218ebafb1516 Mon Sep 17 00:00:00 2001
From: Wirlaburla <wirlaburla@worlio.com>
Date: Sat, 29 Jul 2023 02:18:06 -0500
Subject: [PATCH] redo page-selectors

---
 style.css | 75 +++++++++++++++++++++++++++++++++++--------------------
 1 file changed, 48 insertions(+), 27 deletions(-)

diff --git a/style.css b/style.css
index b44e945..78b6fa7 100644
--- a/style.css
+++ b/style.css
@@ -143,6 +143,54 @@ body > div.overlay .dialog table:not(.titlebox) {
 	overflow: auto;
 }
 
+/* = PAGE SELECTORS */
+div.page-selector {
+	display: inline-flex;
+	margin: 2px;
+}
+
+div.page-selector div.pagebutton {
+	background: var(--default-button-background);
+	border: var(--default-button-border);
+	text-align: center;
+	padding: 2px;
+	width: 24px;
+	height: 24px;
+}
+
+div.page-selector div.pagebutton:hover {
+	background: var(--hover-button-background);
+	border: var(--hover-button-border);
+}
+
+div.page-selector div.pagebutton:active {
+	background: var(--active-button-background);
+	border: var(--active-button-border);
+}
+
+div.page-selector div.pagebutton.disabled {
+	background: var(--disabled-button-background);
+	border: var(--disabled-button-border);
+}
+
+div.page-selector div.pagebutton a,
+div.page-selector div.pagebutton a:link,
+div.page-selector div.pagebutton a:visited {
+	font-family: var(--primary-font);
+	font-size: 12px;
+	text-decoration: none;
+	color: var(--main-text);
+}
+
+div.page-selector div.pagebutton.curpage a,
+div.page-selector div.pagebutton.curpage a:link,
+div.page-selector div.pagebutton.curpage a:visited {
+	color: var(--alert);
+}
+
+div.page-selector div.pagebutton.backpage { border-right: none; }
+div.page-selector div.pagebutton.forwpage { border-left: none; }
+
 /* == MAIN BODY */
 
 body {
@@ -1406,33 +1454,6 @@ heading .button {
 	height: 16px;
 }
 
-div.page-buttons {
-	display: inline-flex;
-	flex-grow: 0;
-	flex-shrink: 0;
-}
-
-div.page-buttons .button#first-page, 
-div.page-buttons .button#page-selector, 
-div.page-buttons .button#last-page {
-	cursor: pointer;
-}
-
-div.page-buttons .button#first-page div, 
-div.page-buttons .button#page-selector div, 
-div.page-buttons .button#last-page div {
-	display: inline-block;
-	width: 100%;
-	margin: 4px 0px;
-}
-div.page-buttons .button#first-page div a, 
-div.page-buttons .button#page-selector div a, 
-div.page-buttons .button#last-page div a {
-	color: var(--alert);
-	display: inline-block !important;
-	text-align: center;
-}
-
 .errors .error {
 	color: var(--error);
 	display: block;