LP1999954 Modal header color contrast fixes
authorStephanie Leary <stephanie.leary@equinoxOLI.org>
Sat, 17 Dec 2022 00:58:36 +0000 (18:58 -0600)
committerJane Sandberg <js7389@princeton.edu>
Thu, 29 Dec 2022 21:28:25 +0000 (13:28 -0800)
Changes modal header and close button to white in order to pass WCAG
color contrast checks.

Signed-off-by: Stephanie Leary <stephanie.leary@equinoxOLI.org>
Signed-off-by: Jane Sandberg <js7389@princeton.edu>
Open-ILS/src/eg2/src/styles.css

index af633e7..2af095a 100644 (file)
@@ -291,6 +291,24 @@ body>.dropdown-menu {z-index: 2100;}
 @media (min-width: 1600px) { .modal-xl { max-width: 1500px; } }
 @media (min-width: 1700px) { .modal-xl { max-width: 1600px; } }
 
+/* Contrast for dialog titles */
+.modal-header .modal-title {
+  color: #fff;
+  font-weight: 600;
+}
+
+.modal-header .close,
+.modal-header .close:hover {
+  color: #fff;
+  opacity: 1;
+  text-shadow: none;
+}
+
+.modal-header .close:not(:disabled):not(.disabled):focus, 
+.modal-header .close:not(:disabled):not(.disabled):hover {
+  opacity: 1;
+}
+
 /**
  * Make the acquisitions search form's navigation tabs match
  * those of the staff interface. This is a global rule because