Using custom properties for z-index values (#6733)

* Using custom properties for z-index values

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Reorder values

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Remove unused styles

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Different set of z-index css vars

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

* Revert z-index to main layout

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/layout/main-layout.module.scss

@@ -11,7 +11,7 @@
   grid-template-rows: [contents] 1fr [footer] auto;
   grid-template-columns: [sidebar] var(--sidebar-width) [contents] 1fr;
   width: 100%;
-  z-index: 1;
+  z-index: var(--z-index-base);
   height: 100%;
 }
 

src/renderer/components/layout/setting-layout.scss

@@ -10,7 +10,7 @@
   display: grid;
   color: var(--settingsColor);
   position: fixed;
-  z-index: 13!important;
+  z-index: var(--z-index-modals);
   left: 0;
   top: 0;
   right: 0;

src/renderer/components/layout/top-bar/top-bar.module.scss

@@ -5,7 +5,7 @@
 
 .topBar {
   background-color: var(--layoutBackground);
-  z-index: 2;
+  z-index: var(--z-index-above);
   grid-area: topbar;
   height: var(--main-layout-header);