From 953b89fd6b8c0bb004a7ed3adbfcbbc836861f67 Mon Sep 17 00:00:00 2001
From: Mario Pietsch <pmariojo@gmail.com>
Date: Wed, 17 Aug 2022 15:54:15 +0200
Subject: [PATCH] CSS: Make input and button elements consistent for all
 browsers (#6910)

---
 themes/tiddlywiki/vanilla/base.tid | 28 ++++++++++++++++++++--------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/themes/tiddlywiki/vanilla/base.tid b/themes/tiddlywiki/vanilla/base.tid
index f50df6bcd..cbb8b1784 100644
--- a/themes/tiddlywiki/vanilla/base.tid
+++ b/themes/tiddlywiki/vanilla/base.tid
@@ -76,16 +76,17 @@ $else$
 	-webkit-box-sizing: border-box;
 }
 
-input[type="search"] {
-	outline-offset: initial;
-}
-
+/*
+** Button default styles. Makes them look consistent for all browsers
+*/
 html button {
 	line-height: 1.2;
 	color: <<colour button-foreground>>;
 	fill: <<colour button-foreground>>;
 	background: <<colour button-background>>;
-	border-color: <<colour button-border>>;
+	border: 1px solid <<colour button-border>>;
+	border-radius: 3px;
+	padding: 2px 5px;
 }
 
 button:disabled svg {
@@ -221,8 +222,19 @@ dl dt {
 	margin-top: 6px;
 }
 
-button, textarea, input, select {
-	outline-color: <<colour primary>>;
+/*
+** Definition for text input elements so they look consistent for all browsers
+*/
+
+textarea, input, select {
+	border: 2px solid <<colour tiddler-editor-border>>;
+	background-color: <<colour tiddler-editor-background>>;
+}
+
+/* Input elements accessibility -- overwrite the reset */
+:focus-visible {
+	outline: 2px solid <<colour primary>>;
+	outline-offset: -2px;    /* same as in reset.css [type='search'] but for more elements */
 }
 
 textarea,
@@ -231,7 +243,6 @@ input[type=search],
 input[type=""],
 input:not([type]) {
 	color: <<colour foreground>>;
-	background: <<colour background>>;
 }
 
 input[type="checkbox"] {
@@ -1174,6 +1185,7 @@ button.tc-btn-invisible.tc-remove-tag-button {
 
 .tc-tiddler-frame .tc-tiddler-controls {
 	float: right;
+	padding: 3px; /* make space for outline */
 }
 
 .tc-tiddler-controls .tc-drop-down {