made alerts use red with transparent theme red. some UI improvs

1 files changed, 21 insertions, 1 deletions

diff --git a/src/App.scss b/src/App.scss
index 942f5fb2..047cd333 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -99,6 +99,8 @@ input, textarea, .select {
   box-sizing: border-box;
   display: inline-block;
   position: relative;
+  height: 29px;
+  line-height: 16px;
 
   .icon-down-open {
     position: absolute;
@@ -122,9 +124,11 @@ input, textarea, .select {
     margin: 0;
     color: $fallback--fg;
     color: var(--fg, $fallback--fg);
-    padding: 4px 3ch 3px 3px;
+    padding: 4px 2em 3px 3px;
     width: 100%;
     z-index: 1;
+    height: 29px;
+    line-height: 16px;
   }
 
   &[type=radio],
@@ -371,6 +375,22 @@ nav {
   }
 }
 
+.alert {
+  margin: 0.35em;
+  padding: 0.25em;
+  border-radius: $fallback--tooltipRadius;
+  border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+  color: $fallback--faint;
+  color: var(--faint, $fallback--faint);
+  min-height: 28px;
+  line-height: 28px;
+
+  &.error {
+    background-color: $fallback--cAlertRed;
+    background-color: var(--cAlertRed, $fallback--cAlertRed);
+  }
+}
+
 @media all and (max-width: 959px) {
   .mobile-hidden {
     display: none;