Refs #16236 - New design for alerts

less/qfq-bs.css.less

@@ -851,22 +851,47 @@ span.qfq-typeahead-tag {
 
 .alert-interactive {
   position: fixed;
-  display: box;
+  display: block;
   left: 50%;
   transform: translate(-50%,0);
   top: 200px;
   max-height: 60%;
-  padding: 20px;
-  color: #d0d0d0;
-  min-width: 24%;
+  padding: 30px 20px 20px;
+  color: #333;
+  min-width: 300px;
   max-width: 90%;
-  border-left: 5px solid;
-  background-color: #333;
+  border: 1px solid;
+  border-left: 10px solid;
+  border-radius: 5px;
+  background-color: #fff;
+  box-shadow: 10px 10px 10px #ccc;
   overflow-y: auto;
   overflow-x: hidden;
 }
 
-.alert-interactive tr td {
+.darkmode .alert-interactive {
+   color: #d0d0d0;
+   border-left: 5px solid;
+   background-color: #333;
+ }
+
+.qfq-alert-reference {
+  position: absolute;
+  right: 10px;
+  top: 3px;
+  font-size: .7em;
+  color: #888;
+}
+
+.qfq-alert-timestamp {
+  position: absolute;
+  left: 10px;
+  top: 3px;
+  font-size: .7em;
+  color: #888;
+}
+
+.darkmode .alert-interactive tr td {
   color: #d0d0d0;
 }
 
@@ -882,29 +907,70 @@ span.qfq-typeahead-tag {
 
 .alert-side {
   position: fixed;
-  display: box;
+  display: block;
   right: 0px;
   top: 20px;
   padding: 20px;
+  color: #333;
+  border-top: 1px solid;
+  border-bottom: 1px solid;
+  border-left: 10px solid;
+  background-color: #fff;
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+  z-index: 10000; /* Always on top */
+}
+
+.darkmode .alert-side {
   color: #d0d0d0;
-  border-left: 5px solid;
   background-color: #333;
-  z-index: 10000; /* Always on top */
 }
 
 .border-success {
-  border-color: #5cb85c;
+  border-color: #79AC78;
+}
+
+.border-success .qfq-alert-reference, .border-success .qfq-alert-timestamp {
+  color: #79AC78;
 }
 
 .border-error {
-  border-color: #fb4f4f;
+  border-color: #FF8080;
+}
+
+.border-error .qfq-alert-reference, .border-error .qfq-alert-timestamp {
+  color: #FF8080;
 }
 
 .border-warning {
-  border-color: #fbb64f;
+  border-color: #F9B572;
+}
+
+.border-warning .qfq-alert-reference, .border-warning .qfq-alert-timestamp {
+  color: #F9B572;
 }
 
 .border-info {
+  border-color: #7286D3;
+}
+
+.border-info .qfq-alert-reference, .border-info .qfq-alert-timestamp {
+  color: #7286D3;
+}
+
+.darkmode .border-success {
+  border-color: #5cb85c;
+}
+
+.darkmode .border-error {
+  border-color: #fb4f4f;
+}
+
+.darkmode .border-warning {
+  border-color: #fbb64f;
+}
+
+.darkmode .border-info {
   border-color: #25adf1;
 }