From 0e455387d586a9b4072c322aeb52df8d05bf1406 Mon Sep 17 00:00:00 2001
From: Johannes Kimmel <fff@bareminimum.eu>
Date: Sun, 23 Apr 2023 00:58:19 +0200
Subject: [PATCH] more precise styling for del buttons and invalid fields

---
 index.html  | 7 ++++++-
 l3config.js | 2 ++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index f3a4a1e..f2a3cc3 100644
--- a/index.html
+++ b/index.html
@@ -9,9 +9,10 @@
 		<style>
 :root, html[data-theme='light'] {
 	--width: 80rem;
+	--danger: #cc0a00;
 }
 :invalid:not(form) {
-	border-color: red;
+	border-color: var(--danger);
 }
 fieldset > div {
 	display: flex;
@@ -31,6 +32,10 @@ fieldset select, input:not([type=checkbox]):not([type=radio]) {
 	width: initial;
 	min-width: 50%;
 	margin: 0.5rem 0;
+}
+button.del {
+	border-color: var(--danger);
+	color: var(--danger);
 }
 		</style>
 	</head>
diff --git a/l3config.js b/l3config.js
index 48c451e..f1d0173 100644
--- a/l3config.js
+++ b/l3config.js
@@ -87,6 +87,7 @@ class L3MultiSection {
 		let del = document.createElement('button');
 		del.setAttribute('type', 'button');
 		del.addEventListener('click', () => this.removeSection(newsection, nodes));
+		del.classList.add('del');
 		del.innerHTML = 'Remove';
 		nodes.append(del);
 
@@ -214,6 +215,7 @@ class L3MultiInput {
 		let div = newinput.node();
 		let delbutton = document.createElement('button');
 		delbutton.setAttribute('type', 'button');
+		delbutton.classList.add('del');
 		delbutton.innerHTML = '-';
 		delbutton.addEventListener('click', () => {
 			this.removeInput(newinput, div);