style(post form): style submit form in all themes

src/components/post-form/post-form.module.css

@@ -32,9 +32,9 @@
   color: var(--post-form-field-title-color);
   font-weight: var(--post-form-field-title-font-weight);
   border: var(--post-form-field-border);
-  padding: 0 5px;
+  padding: var(--post-form-field-title-padding);
+  font-size: var(--post-form-field-title-font-size);
   width: 80px;
-  font-size: 10pt;
 }
 
 .postFormButtonDesktop td {
@@ -44,38 +44,44 @@
   position: relative;
 }
 
+.postFormButtonDesktop input[type="text"], .postFormButtonDesktop textarea {
+  border: var(--post-form-field-input-border, revert);
+  font-family: var(--post-form-field-font-family, revert);
+  appearance: var(--post-form-field-input-appearance, revert);
+  outline: var(--post-form-field-input-outline, revert);
+  background-color: var(--post-form-field-input-background-color, revert);
+  color: var(--post-form-field-input-color, revert);
+  filter: var(--filter80);
+  padding: 2px 4px 3px;
+  font-size: 10pt;
+}
+
+.postFormButtonDesktop input[type="text"]:focus, .postFormButtonDesktop textarea:focus {
+  border: var(--post-form-field-input-focus-border, revert);
+}
+      
 .postFormButtonDesktop td > input[type="text"] {
   width: 244px;
-  margin: 0;
-  margin-right: 2px;
-  padding: 2px 4px 3px;
-  border: 1px solid #aaa;
-  outline: none;
-  appearance: none;
-  font-family: arial, helvetica, sans-serif;
-  font-size: 10pt;
 }
 
 .postFormButtonDesktop textarea {
   width: 292px;
-  margin-bottom: 0;
-  outline: none;
-  border-radius: none;
-  border: 1px solid #aaa;
-  padding: 2px 4px 3px;
-  appearance: none;
-  font-family: arial, helvetica, sans-serif;
-  font-size: 10pt;
   
   /* textareas have a gap below them that differs along browsers https://stackoverflow.com/a/7144960 */
   vertical-align: top;
 }
 
+.postFormButtonDesktop button {
+  margin-left: 2px;
+  filter: var(--filter80);
+}
+
 .linkType {
   font-weight: normal;
   position: absolute;
   white-space: nowrap;
   bottom: 3px;
+  padding-left: 3px;
 }
 
 @media (max-width: 640px) {

src/themes.css

@@ -112,6 +112,17 @@
   /* post form */
   --post-form-toggle-font-size: 22px;
   --post-form-toggle-font-weight: 700;
+  --post-form-field-title-background-color: #ea8;
+  --post-form-field-title-color: #800;
+  --post-form-field-border: 1px solid #800;
+  --post-form-field-title-font-weight: 700;
+  --post-form-field-title-padding: 0 5px;
+  --post-form-field-title-font-size: 10pt;
+  --post-form-field-input-border: 1px solid #aaa;
+  --post-form-field-font-family: arial, helvetica, sans-serif;
+  --post-form-field-input-appearance: none;
+  --post-form-field-input-outline: none;
+  --post-form-field-input-focus-border: 1px solid #ea8;
 
   /* quotelink */
   --post-quotelink-text-color: navy;
@@ -246,6 +257,13 @@
   --post-form-field-title-color: #000;
   --post-form-field-border: 1px solid #000;
   --post-form-field-title-font-weight: 700;
+  --post-form-field-title-padding: 0 5px;
+  --post-form-field-title-font-size: 10pt;
+  --post-form-field-input-border: 1px solid #aaa;
+  --post-form-field-font-family: arial, helvetica, sans-serif;
+  --post-form-field-input-appearance: none;
+  --post-form-field-input-outline: none;
+  --post-form-field-input-focus-border: 1px solid #98e;
 
   /* quotelink */
   --post-quotelink-text-color: #d00;
@@ -353,6 +371,11 @@
   /* post form */
   --post-form-toggle-font-size: 22px;
   --post-form-toggle-font-weight: 700;
+  --post-form-field-title-background-color: #ea8;
+  --post-form-field-title-color: #800;
+  --post-form-field-border: none;
+  --post-form-field-title-font-weight: 700;
+  --post-form-field-title-font-size: 16px;
 
   /* quotelink */
   --post-quotelink-text-color: navy;
@@ -474,6 +497,11 @@
   /* post form */
   --post-form-toggle-font-size: 22px;
   --post-form-toggle-font-weight: 700;
+  --post-form-field-title-background-color: #98e;
+  --post-form-field-title-color: #000;
+  --post-form-field-border: none;
+  --post-form-field-title-font-weight: 700;
+  --post-form-field-title-font-size: 16px;
 
   /* quotelink */
   --post-quotelink-text-color: #d00;
@@ -608,6 +636,17 @@
   /* post form */
   --post-form-toggle-font-size: 22px;
   --post-form-toggle-font-weight: 700;
+  --post-form-field-title-background-color: #282a2e;
+  --post-form-field-title-color: #c5c8c6;
+  --post-form-field-border: 1px solid #111;
+  --post-form-field-title-font-weight: 700;
+  --post-form-field-title-padding: 0 5px;
+  --post-form-field-title-font-size: 10pt;
+  --post-form-field-input-border: 1px solid #aaa;
+  --post-form-field-font-family: arial, helvetica, sans-serif;
+  --post-form-field-input-appearance: none;
+  --post-form-field-input-outline: none;
+  --post-form-field-input-focus-border: 1px solid #111;
 
   /* select */
   --select-border: 1px solid #575a60;
@@ -714,6 +753,17 @@
   /* post form */
   --post-form-toggle-font-size: 22px;
   --post-form-toggle-font-weight: 700;
+  --post-form-field-title-background-color: #ddd;
+  --post-form-field-title-color: #333;
+  --post-form-field-border: 1px solid #ccc;
+  --post-form-field-title-font-weight: 700;
+  --post-form-field-title-padding: 0 5px;
+  --post-form-field-title-font-size: 10pt;
+  --post-form-field-input-border: 1px solid #aaa;
+  --post-form-field-font-family: arial, helvetica, sans-serif;
+  --post-form-field-input-appearance: none;
+  --post-form-field-input-outline: none;
+  --post-form-field-input-focus-border: 1px solid #ea8;
 
   /* quotelink */
   --post-quotelink-text-color: #f60;