From 7414e469b81ef40ad4a93eedf3a1938744c0d326 Mon Sep 17 00:00:00 2001
From: Andi Permana <andi.thea96@gmail.com>
Date: Wed, 10 Dec 2025 18:28:19 +0700
Subject: [PATCH] MDL-86086 theme_boost: Add visual distinction for readonly
 form inputs

---
 public/theme/boost/scss/moodle/forms.scss | 11 +++++++++++
 public/theme/boost/style/moodle.css       |  5 +++++
 public/theme/classic/style/moodle.css     |  5 +++++
 3 files changed, 21 insertions(+)

diff --git a/public/theme/boost/scss/moodle/forms.scss b/public/theme/boost/scss/moodle/forms.scss
index a77a483e6ed..2597fb85c9b 100644
--- a/public/theme/boost/scss/moodle/forms.scss
+++ b/public/theme/boost/scss/moodle/forms.scss
@@ -521,3 +521,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;
+}
diff --git a/public/theme/boost/style/moodle.css b/public/theme/boost/style/moodle.css
index a92d1993fd0..0865943aaf9 100644
--- a/public/theme/boost/style/moodle.css
+++ b/public/theme/boost/style/moodle.css
@@ -35379,6 +35379,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;
diff --git a/public/theme/classic/style/moodle.css b/public/theme/classic/style/moodle.css
index a1f19fff7b1..20b3e171ccc 100644
--- a/public/theme/classic/style/moodle.css
+++ b/public/theme/classic/style/moodle.css
@@ -35379,6 +35379,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;