From e691c2a9119fb7866e5538c565390e4c47adea0b Mon Sep 17 00:00:00 2001
From: YannickMol <YannickMol@users.noreply.github.com>
Date: Tue, 16 Feb 2021 19:56:15 +0100
Subject: [PATCH] Update readonly styling for code editor (#4085)

Fixes #3365
---
 app/src/interfaces/code/code.vue    | 2 +-
 app/src/styles/lib/_codemirror.scss | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/src/interfaces/code/code.vue b/app/src/interfaces/code/code.vue
index 738d13f54d..f61b14bd18 100644
--- a/app/src/interfaces/code/code.vue
+++ b/app/src/interfaces/code/code.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="interface-code codemirror-custom-styles">
+	<div class="interface-code codemirror-custom-styles" :class="{ disabled }">
 		<textarea ref="codemirrorEl" :value="stringValue" />
 
 		<v-button small icon secondary v-if="template" v-tooltip.left="$t('fill_template')" @click="fillTemplate">
diff --git a/app/src/styles/lib/_codemirror.scss b/app/src/styles/lib/_codemirror.scss
index 4af0eb5bb4..779c0e71b0 100644
--- a/app/src/styles/lib/_codemirror.scss
+++ b/app/src/styles/lib/_codemirror.scss
@@ -17,6 +17,10 @@
 	transition: all var(--fast) var(--transition);
 }
 
+.disabled .CodeMirror {
+	background-color: var(--background-subdued);
+}
+
 .CodeMirror .CodeMirror-placeholder{
 	color: var(--foreground-subdued);
 }