Config UI: improve readonly style (#19132)

assets/css/app.css

@@ -56,7 +56,7 @@
 	--evcc-gray: var(--bs-gray-medium);
 	--evcc-gray-50: #93949e80;
 	--evcc-gray-25: #93949e40;
-
+	--evcc-gray-10: #93949e20;
 	--evcc-accent1: var(--evcc-dark-yellow);
 	--evcc-accent2: var(--evcc-darker-green);
 	--evcc-accent3: var(--evcc-darkest-green);
@@ -548,8 +548,8 @@ input::-webkit-datetime-edit {
 .form-control:read-only,
 .dark .form-control:disabled,
 .dark .form-control:read-only {
-	background-color: var(--bs-secondary-bg);
-	color: var(--bs-gray-dark);
+	background-color: var(--evcc-gray-10);
+	color: var(--bs-default-text);
 	opacity: 1;
 }
 

assets/js/components/Config/ChargerModal.vue

@@ -55,12 +55,7 @@
 				:label="$t('config.charger.ocppLabel')"
 				:help="$t('config.charger.ocppHelp')"
 			>
-				<input
-					type="text"
-					class="form-control border border-success bg-transparent"
-					:value="ocppUrl"
-					readonly
-				/>
+				<input type="text" class="form-control border" :value="ocppUrl" readonly />
 			</FormRow>
 
 			<Modbus