MDL-86086 theme_boost: Add visual distinction for readonly form inputs

theme/boost/scss/moodle/forms.scss

@@ -514,3 +514,14 @@ textarea[data-auto-rows] {
         }
     }
 }
+
+// Readonly inputs should have visual distinction from editable inputs.
+// Apply the same styling as disabled inputs to make them clearly readonly.
+.form-control[readonly] {
+    color: $input-disabled-color;
+    background-color: $input-disabled-bg;
+    border-color: $input-disabled-border-color;
+    // Follows disabled styles in bootstrap/forms/_form-control.scss.
+    // iOS fix for unreadable content.
+    opacity: 1;
+}

theme/boost/style/moodle.css

@@ -35256,6 +35256,11 @@ textarea[data-auto-rows] {
     display: none;
   }
 }
+.form-control[readonly] {
+  background-color: var(--bs-secondary-bg);
+  opacity: 1;
+}
+
 .pagelayout-login #region-main {
   border: 0;
   background-color: inherit;

theme/classic/style/moodle.css

@@ -35256,6 +35256,11 @@ textarea[data-auto-rows] {
     display: none;
   }
 }
+.form-control[readonly] {
+  background-color: var(--bs-secondary-bg);
+  opacity: 1;
+}
+
 .pagelayout-login #region-main {
   border: 0;
   background-color: inherit;