From 2f797719fa0e243abc6c4b9b2cd521fb3897cd92 Mon Sep 17 00:00:00 2001
From: Yuri Kuznetsov <yurikuzn@users.noreply.github.com>
Date: Fri, 8 Jul 2022 14:23:09 +0300
Subject: [PATCH] backdrop opacity in var

---
 frontend/less/dark-vertical/custom.less    | 3 +++
 frontend/less/dark-vertical/variables.less | 1 +
 frontend/less/espo-vertical/custom.less    | 2 +-
 frontend/less/espo/elements/modal.less     | 4 ++++
 frontend/less/espo/root-variables.less     | 1 +
 frontend/less/espo/value-variables.less    | 1 +
 6 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 frontend/less/dark-vertical/custom.less

diff --git a/frontend/less/dark-vertical/custom.less b/frontend/less/dark-vertical/custom.less
new file mode 100644
index 0000000000..a578514d39
--- /dev/null
+++ b/frontend/less/dark-vertical/custom.less
@@ -0,0 +1,3 @@
+.side-menu-backdrop {
+    border-left: 1px solid var(--gray-dark);
+}
diff --git a/frontend/less/dark-vertical/variables.less b/frontend/less/dark-vertical/variables.less
index 6a50a5ba5d..9db61a38c4 100644
--- a/frontend/less/dark-vertical/variables.less
+++ b/frontend/less/dark-vertical/variables.less
@@ -57,6 +57,7 @@
 @modal-header-bg-value: @body-bg-value;
 @modal-footer-bg-value: @body-bg-value;
 @modal-content-bg-value: @body-bg-value;
+@modal-backdrop-opacity-value: 0.4;
 
 @modal-header-border-color-value: @modal-content-bg-value;
 
diff --git a/frontend/less/espo-vertical/custom.less b/frontend/less/espo-vertical/custom.less
index e80b26e563..0bb112b82c 100644
--- a/frontend/less/espo-vertical/custom.less
+++ b/frontend/less/espo-vertical/custom.less
@@ -23,7 +23,7 @@
 
 .side-menu-backdrop {
     background-color: @modal-backdrop-bg;
-    opacity: .5;
+    opacity: var(--modal-backdrop-opacity);
 }
 
 .alert {
diff --git a/frontend/less/espo/elements/modal.less b/frontend/less/espo/elements/modal.less
index cc9d1c2623..df724f4396 100644
--- a/frontend/less/espo/elements/modal.less
+++ b/frontend/less/espo/elements/modal.less
@@ -75,6 +75,10 @@
     }
 }
 
+.modal-backdrop.in {
+    opacity: var(--modal-backdrop-opacity);
+}
+
 .modal-footer {
     margin-top: @modal-title-padding;
     padding: @panel-padding @panel-padding @panel-padding;
diff --git a/frontend/less/espo/root-variables.less b/frontend/less/espo/root-variables.less
index f4ce5c1988..ae573e2dab 100644
--- a/frontend/less/espo/root-variables.less
+++ b/frontend/less/espo/root-variables.less
@@ -195,6 +195,7 @@
     --modal-header-bg: @modal-header-bg-value;
     --modal-footer-bg: @modal-footer-bg-value;
     --modal-content-bg: @modal-content-bg-value;
+    --modal-backdrop-opacity: @modal-backdrop-opacity-value;
 
     --text-color: @text-color-value;
     --text-white-color: @text-white-color-value;
diff --git a/frontend/less/espo/value-variables.less b/frontend/less/espo/value-variables.less
index ea4a86b413..1eee3914c5 100644
--- a/frontend/less/espo/value-variables.less
+++ b/frontend/less/espo/value-variables.less
@@ -63,6 +63,7 @@
 @modal-header-bg-value: @default-heading-bg-color-value;
 @modal-footer-bg-value: @body-bg-value;
 @modal-content-bg-value: @body-bg-value;
+@modal-backdrop-opacity-value: 0.5;
 
 @text-color-value: @gray-dark-value;
 @text-white-color-value: @white-color-value;