fix color settings for alert windows

diff --git a/public/alert.css b/public/alert.css
index 1619c3e42d3b3642331b7dea075a7dd1fdb01693..9cb4754f8054a658146d921818c88b9f58693bb7 100644 (file)
--- a/public/alert.css
+++ b/public/alert.css
@@ -4,7 +4,7 @@
     left:0;
     right:0;
     bottom:0;
-    background:rgba(0,0,0,0.2);
+    background:rgba(0,0,0,0.5);
     display:-webkit-flex;
     display:flex;
     -webkit-flex-direction:column;
@@ -16,8 +16,8 @@
 }
 
 .alert-outer {
-    background:white;
-    color:black;
+    background-color: var(--modal-bg);
+    color:var(--modal-color);
     border-radius:4px;
     display:-webkit-flex;
     display:flex;
@@ -26,7 +26,8 @@
     -webkit-align-self:center;
     align-self:center;
     text-align:center;
-    box-shadow:0 0 8px black;
+    box-shadow: 0 0 8px #000;
+    box-shadow: 0 0 8px var(--modal-shadow);
     max-width:75%;
     padding:4px;
 }
@@ -53,6 +54,9 @@
    min-width:10ex;
    margin:1ex;
    border:1px solid silver;
+   border:1px solid var(--chat-border);
+   background: inherit;
+   color: inherit;
 }
 
 .alert input[type=text]:focus, .alert  input[type=password]:focus {
@@ -75,10 +79,19 @@
 
 .alert button {
     margin:0.5ex;
-    border:1px solid gray;
-    background:#F1F1F1;
-    color:black;
-    border-radius:3px
+    border:0;
+    background-color: lightgray;
+    background-color: var(--modal-button-bg);
+    color: black;
+    text-align: center;
+    border-radius: 0.25rem;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.alert button:hover {
+    background-color: darkgray;
+    background-color: var(--modal-button-hover-bg);
 }
 
 .alert-prompt-buttons {

diff --git a/public/trivabble.css b/public/trivabble.css
index a0d9b873a9e989ce03419b51c1f4253cd141ad8a..cd22e9812c0136d347686c16f24f42f114a98f8d 100644 (file)
--- a/public/trivabble.css
+++ b/public/trivabble.css
@@ -731,7 +731,12 @@ td.blink {
     background-color: var(--modal-button-bg);
 }
 
-.modal-button:hover, #btn-settings:hover {
+.alert-outer button {
+    background-color: lightgray;
+    background-color: var(--modal-button-bg);
+}
+
+.modal-button:hover, #btn-settings:hover, .alert-outer button {
     background-color: darkgray;
     background-color: var(--modal-button-hover-bg);
 }