backdrop opacity in var

frontend/less/dark-vertical/custom.less

@@ -0,0 +1,3 @@
+.side-menu-backdrop {
+    border-left: 1px solid var(--gray-dark);
+}

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;
 

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 {

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;

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;

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;