Use variable for UI drop shadow

customize.dist/src/less2/include/colortheme-dark.less

@@ -50,6 +50,8 @@
 @cryptpad_text_col: @cryptpad_color_grey_200;
 @cryptpad_text_col_inv: @cryptpad_color_grey_900;
 
+@cryptpad_ui_shadow: 0px 0px 5px 1px #00000030;
+
 @cryptpad_color_blue: #326599; // former logo-1
 @cryptpad_color_light_blue: #00b7d8;
 @cryptpad_color_red: #ff1100;

customize.dist/src/less2/include/colortheme.less

@@ -50,6 +50,8 @@
 @cryptpad_text_col:@cryptpad_color_grey_800;
 @cryptpad_text_col_inv: @cryptpad_color_grey_50;
 
+@cryptpad_ui_shadow: 0px 0px 5px 1px #00000030;
+
 @cryptpad_color_blue: #326599; // former logo-1
 @cryptpad_color_light_blue: #00b7d8;
 @cryptpad_color_red: #ff1100;

customize.dist/src/less2/include/creation.less

@@ -329,7 +329,7 @@
                 max-height: 159px;
                 align-items: center;
                 .cp-creation-template-element {
-                    box-shadow: 0px 0px 5px 1px #00000030; // XXX DB: make shadow var
+                    box-shadow: @cryptpad_ui_shadow;
                     width: 300px;
                     max-width: calc(100% - 10px);
                     padding: 5px;

customize.dist/src/less2/include/drive.less

@@ -340,7 +340,7 @@
             margin-top: 10px;
             background-color: @cp_sidebar-left-item-bg;
             border-radius: @variables_radius;
-            box-shadow: 0px 0px 5px 1px #00000030; // XXX DB: make shadow var
+            box-shadow: @cryptpad_ui_shadow;
             .cp-app-drive-tree-root {
                 .fa-trash-o {
                     padding-left: 2px;
@@ -381,7 +381,7 @@
             }
         }
         .cp-app-drive-tree-docs {
-            box-shadow: 0px 0px 5px 1px #00000030; // XXX DB: make shadow var
+            box-shadow: @cryptpad_ui_shadow;
 
             .cp-app-drive-element-row {
                 &.cp-leftside-active {

customize.dist/src/less2/include/sidebar-layout.less

@@ -31,7 +31,7 @@
                     display: flex;
                     align-items: center;
                     .leftside-menu-category_main();
-                    box-shadow: 0px 0px 5px 1px #00000030; // XXX DB: make shadow var
+                    box-shadow: @cryptpad_ui_shadow;
                 }
             }
             &.cp-leftside-narrow {

www/kanban/app-kanban.less

@@ -36,7 +36,7 @@
             display: flex;
             flex-flow: column;
             border-radius: @variables_radius;
-            box-shadow: 0px 0px 5px 1px #00000030; // XXX DB: make shadow var
+            box-shadow: @cryptpad_ui_shadow;
         }
         color: @cp_kanban-fg;
         button {
@@ -186,7 +186,7 @@
         border-radius: @variables_radius;
         flex-wrap: wrap;
         background: @cp_kanban-item-bg;
-        box-shadow: 0px 0px 5px 1px #00000030; // XXX  DB: make shadow var
+        box-shadow: @cryptpad_ui_shadow;
         .tools_unselectable();
         touch-action: none;
         cursor: move;