MDL-69069 theme_boost: color contrast for custom alerts

diff --git a/theme/boost/scss/moodle/course.scss b/theme/boost/scss/moodle/course.scss
index 1349003..7f73cd5 100644 (file)
--- a/theme/boost/scss/moodle/course.scss
+++ b/theme/boost/scss/moodle/course.scss
@@ -537,13 +537,15 @@ span.editinstructions {
     margin-left: 30px;
     font-size: $font-size-sm;
     padding: .1em .4em;
-    background-color: $state-info-bg;
-    color: $state-info-text;
     text-decoration: none;
     z-index: 9999;
+    border: $alert-border-width solid transparent;
 
-    @include box-shadow(2px 2px 5px 1px #ccc);
-    border: 1px solid $state-info-border;
+    @include alert-variant(
+        theme-color-level('info', $alert-bg-level),
+        theme-color-level('info', $alert-border-level),
+        theme-color-level('info', $alert-color-level)
+    );
 }
 
 /* Course drag and drop upload styles */
@@ -553,14 +555,15 @@ span.editinstructions {
     width: 40%;
     margin: 0 30%;
     padding: 6px;
-    border: 1px solid $state-info-border;
     text-align: center;
-    background: $state-info-bg;
-    color: $state-info-text;
     z-index: 1; // Required in order to have this above relatively positioned course content@mixin
+    border: $alert-border-width solid transparent;
 
-    @include box-shadow(2px 2px 5px 1px #ccc);
-    @include border-radius(8px);
+    @include alert-variant(
+        theme-color-level('info', $alert-bg-level),
+        theme-color-level('info', $alert-border-level),
+        theme-color-level('info', $alert-color-level)
+    );
 }
 
 .dndupload-preview {

diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index fb86dfc..5f29ad2 100644 (file)
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -13488,11 +13488,16 @@ span.editinstructions {
   margin-left: 30px;
   font-size: 0.8203125rem;
   padding: .1em .4em;
-  background-color: #def2f8;
-  color: #5bc0de;
   text-decoration: none;
   z-index: 9999;
-  border: 1px solid #d1edf6; }
+  border: 0 solid transparent;
+  color: #2f6473;
+  background-color: #def2f8;
+  border-color: #d1edf6; }
+  span.editinstructions hr {
+    border-top-color: #bce5f2; }
+  span.editinstructions .alert-link {
+    color: #20454f; }
 
 /* Course drag and drop upload styles */
 #dndupload-status {
@@ -13501,11 +13506,16 @@ span.editinstructions {
   width: 40%;
   margin: 0 30%;
   padding: 6px;
-  border: 1px solid #d1edf6;
   text-align: center;
-  background: #def2f8;
-  color: #5bc0de;
-  z-index: 1; }
+  z-index: 1;
+  border: 0 solid transparent;
+  color: #2f6473;
+  background-color: #def2f8;
+  border-color: #d1edf6; }
+  #dndupload-status hr {
+    border-top-color: #bce5f2; }
+  #dndupload-status .alert-link {
+    color: #20454f; }
 
 .dndupload-preview {
   color: #909090;

diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index b3c0961..fca686d 100644 (file)
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -13703,11 +13703,16 @@ span.editinstructions {
   margin-left: 30px;
   font-size: 0.8203125rem;
   padding: .1em .4em;
-  background-color: #def2f8;
-  color: #5bc0de;
   text-decoration: none;
   z-index: 9999;
-  border: 1px solid #d1edf6; }
+  border: 0 solid transparent;
+  color: #2f6473;
+  background-color: #def2f8;
+  border-color: #d1edf6; }
+  span.editinstructions hr {
+    border-top-color: #bce5f2; }
+  span.editinstructions .alert-link {
+    color: #20454f; }
 
 /* Course drag and drop upload styles */
 #dndupload-status {
@@ -13716,12 +13721,16 @@ span.editinstructions {
   width: 40%;
   margin: 0 30%;
   padding: 6px;
-  border: 1px solid #d1edf6;
   text-align: center;
-  background: #def2f8;
-  color: #5bc0de;
   z-index: 1;
-  border-radius: 8px; }
+  border: 0 solid transparent;
+  color: #2f6473;
+  background-color: #def2f8;
+  border-color: #d1edf6; }
+  #dndupload-status hr {
+    border-top-color: #bce5f2; }
+  #dndupload-status .alert-link {
+    color: #20454f; }
 
 .dndupload-preview {
   color: #909090;