From e181276de907f7dccd1823a1458c36764a21e317 Mon Sep 17 00:00:00 2001
From: dm5wk <git@dm5wk.de>
Date: Wed, 29 May 2024 17:47:19 +0200
Subject: [PATCH] add range css selector

---
 band-plan.html | 14 ++++++++++----
 standard.css   | 36 +++++++++++++++++++-----------------
 2 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/band-plan.html b/band-plan.html
index 64754d6..02e7c37 100644
--- a/band-plan.html
+++ b/band-plan.html
@@ -257,12 +257,15 @@ div>label {
 						// e. g. cell-bandwidth-2700
 						// list like cw, narrow will be split to two entries
 						column.formatter = function(cell) {
-							let f = String(cell.getField()).toLowerCase().replace(/[\W]+/g, " ").replaceAll(" ", "_");
-							let v = String(cell.getValue()).toLowerCase().replaceAll("+", "_plus_").replace(/[^\w,]+/g, " ").replaceAll(" ", "_");
+							let f = String(cell.getField()).toLowerCase().replace(/[\W]+/g, " ").replaceAll(" ", "_").replace(/__+/g, "_");
+							let v = String(cell.getValue()).toLowerCase().replaceAll("+", "_plus_").replace(/[^\w,-]+/g, " ").replaceAll(" ", "_").replace(/__+/g, "_");
 							v.split(",").forEach((s) => {
 								cell.getElement().classList.add("cell-" + f + "-" + s.replace(/^_+|_+$/g, ""));
 							});
 							cell.getElement().classList.add("cell-" + f);
+							if ((f === "frequency") && (v.indexOf("-") > -1)) {
+								cell.getElement().classList.add("cell-" + f + "-" + "is_range");
+							}
 							return cell.getValue();
 						}
 					});
@@ -274,11 +277,14 @@ div>label {
 				// list like cw, narrow will be split to two entries
 				rowFormatter: function(row){
 					for (const [key, value] of Object.entries(row.getData())) {
-						let k = String(key).toLowerCase().replace(/[\W]+/g, " ").replaceAll(" ", "_");
-						let v = String(value).toLowerCase().replaceAll("+", "_plus_").replace(/[^\w,]+/g, " ").replaceAll(" ", "_");
+						let k = String(key).toLowerCase().replace(/[\W]+/g, " ").replaceAll(" ", "_").replace(/__+/g, "_");
+						let v = String(value).toLowerCase().replaceAll("+", "_plus_").replace(/[^\w,-]+/g, " ").replaceAll(" ", "_").replace(/__+/g, "_");
 						v.split(",").forEach((s) => {
 							row.getElement().classList.add("row-" + k + "-" + s.replace(/^_+|_+$/g, ""));
 						});
+						if ((k === "frequency") && (v.indexOf("-") > -1)) {
+							row.getElement().classList.add("row-" + k + "-" + "is_range");
+						}
 					}
 				},
 			});
diff --git a/standard.css b/standard.css
index 5056170..a0904d8 100644
--- a/standard.css
+++ b/standard.css
@@ -1,25 +1,27 @@
-div.cell-bandwidth-20 {
-	background-color: Salmon !important;
+.cell-bandwidth-20 {
+	background-color: color-mix(in srgb, Salmon 50%, transparent);
 }
-div.cell-bandwidth-200 {
-	background-color: LightPink !important;
+.cell-bandwidth-200 {
+	background-color: color-mix(in srgb, Pink 50%, transparent);
 }
-div.cell-bandwidth-500 {
-	background-color: LightGreen !important;
+.cell-bandwidth-500 {
+	background-color: color-mix(in srgb, Green 50%, transparent);
 }
-div.cell-bandwidth-2700 {
-	background-color: LightYellow !important;
+.cell-bandwidth-2700 {
+	background-color: color-mix(in srgb, Yellow 50%, transparent);
 }
-div.cell-bandwidth-6000 {
-	background-color: LightBlue !important;
+.cell-bandwidth-6000 {
+	background-color: color-mix(in srgb, Blue 50%, transparent);
 }
-div.cell-bandwidth-unrestricted {
-	background-color: LightGray !important;
+.cell-bandwidth-unrestricted {
+	background-color: color-mix(in srgb, Gray 50%, transparent);
 }
-div.cell-bandwidth-undefined {
-	background-color: Red !important;
+.row-bandwidth-undefined>.tabulator-cell {
+	background-color: color-mix(in srgb, Red 50%, transparent);
 }
-div.tabulator-cell[class*='contest_preferred'] {
-	background-color: Gold !important;
+.cell-frequency:not(.cell-frequency-is_range) {
+	background-color: color-mix(in srgb, Cyan 50%, transparent);
+}
+[class*='contest_preferred'] {
+	background-color: color-mix(in srgb, Gold 30%, transparent);
 }
-