refactoring css

src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css

@@ -6,7 +6,7 @@
 .orb {
     position: absolute;
     border-radius: 100%;
-    z-index: -999;
+    z-index: var(--index-orb);
 }
 
 .green {
@@ -42,5 +42,5 @@
     position: fixed;
     top: 0;
     left: 0;
-    z-index: -1000;
+    z-index: var(--index-background);
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.css

@@ -5,7 +5,8 @@
     padding-right: 20px;
     padding-left: 10px;
     height: 100%;
-    border-left: 2px solid var(--light-grey);
+    border-left: 2px solid var(--line);
+    z-index: var(--index-component);
 }
 
 .duplicate {

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.css

@@ -3,6 +3,7 @@
     flex-direction: row;
     gap: 8px;
     align-items: center;
+    z-index: var(--index-component);
 }
 
 .search-container {
@@ -26,7 +27,7 @@
     width: 28px;
     min-width: 28px;
     border-radius: var(--small-radius);
-    background: var(--black);
+    background: var(--input-primary);
     overflow: hidden;
 }
 
@@ -40,7 +41,7 @@
 
     .square-button svg:hover {
         cursor: pointer;
-        background: var(--low-white);
+        background: var(--input-selected);
     }
 
 .selected-icon {

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.css

@@ -7,5 +7,5 @@
 }
 
 .content {
-
+    z-index: var(--index-content);
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css

@@ -4,10 +4,11 @@
     position: fixed;
     animation-name: fade-in;
     animation-duration: 0.4s;
-    border: 2px solid var(--low-white);
-    background: var(--semi-black);
+    border: 2px solid var(--input-selected);
+    background: var(--dropdown-content);
     right: 10px;
     margin-top: 4px;
+    z-index: var(--index-floating);
 }
 
 .invisible {
@@ -30,8 +31,8 @@
 }
 
 ::deep .input-text {
-    background: var(--low-white);
-    border: 2px solid var(--low-white);
+    background: var(--input-selected);
+    border: 2px solid var(--input-selected);
     border-radius: var(--small-radius);
     padding: 6px;
     color: var(--white);
@@ -64,7 +65,7 @@
     width: 18px;
     height: 18px;
     border-radius: 50%;
-    border: 3px solid var(--line-black);
+    border: 3px solid rgba(0, 0, 0, 0.2);
     border-top-color: var(--white);
     animation: loading 1s linear infinite;
     justify-self: center;
@@ -77,7 +78,7 @@
 
 .line {
     margin: 0 6px;
-    border-bottom: 2px solid var(--light-grey);
+    border-bottom: 2px solid var(--line);
 }
 
 .settings-element {
@@ -88,7 +89,7 @@
 }
 
     .settings-element:hover {
-        background: var(--light-grey)
+        background: var(--line)
     }
 
 

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css

@@ -6,10 +6,11 @@
     padding-left: 8px;
     padding-right: 2px;
     border-radius: var(--small-radius);
-    background: var(--black);
+    background: var(--input-primary);
     overflow: hidden;
     align-items: center;
     width: 140px;
+    z-index: var(--index-component);
 }
 
 ::deep .search-field {

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css

@@ -6,7 +6,6 @@
     gap: 6px;
     height: 20px;
     align-items: center;
-    z-index: 501;
 }
 
     .select-element:hover {
@@ -43,7 +42,7 @@
 }
 
     .sort:hover {
-        background: var(--low-white);
+        background: var(--input-selected);
     }
 
     .sort .select-label {
@@ -57,7 +56,7 @@
 }
 
     .filter:hover {
-        background: var(--low-white);
+        background: var(--input-selected);
     }
 
     .filter .select-label {
@@ -65,27 +64,13 @@
         margin-right: 6px;
     }
 
-/***** Filter Theme *****/
-.filter {
-    padding: 2px 6px;
-}
-
-    .filter:hover {
-        background: var(--low-white);
-    }
-
-    .filter .select-label {
-        text-wrap: nowrap;
-        margin-right: 6px;
-    }
-
-/***** Filter Theme *****/
+/***** Advanced Filter Theme *****/
 .advancedfilter {
     padding: 2px 6px;
 }
 
     .advancedfilter:hover {
-        background: var(--low-white);
+        background: var(--input-selected);
     }
 
     .advancedfilter .select-label {

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css

@@ -5,7 +5,7 @@
 .select-container {
     margin-top: 4px;
     position: absolute;
-    z-index: 500;
+    z-index: var(--index-dropdown)
 }
 
 .align-right {
@@ -19,47 +19,33 @@
     border-radius: var(--small-radius);
     animation-name: fade-in;
     animation-duration: 0.4s;
-    z-index: 500;
+    background: var(--dropdown-content);
+    box-shadow: var(--drop-shadow);
+    padding: 4px 0;
+}
+
+.select-button {
+    z-index: var(--index-component)
 }
 
 .line {
     margin: 2px 6px;
-    border-bottom: 2px solid var(--low-white);
-}
-
-
-/***** Navigation Theme *****/
-.select-content.navigation {
-    background: var(--violet);
-    box-shadow: var(--drop-shadow);
-}
-
-/***** Sort Theme *****/
-.select-content.sort {
-    background: var(--semi-black);
-    box-shadow: var(--drop-shadow);
-    padding: 4px 0;
+    border-bottom: 2px solid var(--input-selected);
 }
 
 /***** Filter Theme *****/
 .select-content.filter {
-    background: var(--semi-black);
-    box-shadow: var(--drop-shadow);
-    padding: 4px 0;
-    min-width: 150px;
+    min-width: 140px;
 }
 
-/***** AdvanceFilter Theme *****/
+/***** Advanced Filter Theme *****/
 .select-content.advancedfilter {
-    background: var(--light-grey);
-    box-shadow: var(--drop-shadow);
-    padding: 4px 0;
-    min-width: 150px;
+    min-width: 210px;
 }
 
 ::deep .select-button.advancedfilter .search-container {
     height: 24px;
     width: 210px;
-    border: 2px solid var(--low-white);
+    border: 2px solid var(--input-selected);
 }
 

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css

@@ -5,6 +5,7 @@
 .select-container {
     margin-top: 4px;
     position: absolute;
+    z-index: var(--index-dropdown)
 }
 
 .align-right {
@@ -20,9 +21,13 @@
     animation-duration: 0.4s;
 }
 
+.select-button {
+    z-index: var(--index-component)
+}
+
 .line {
     margin: 2px 6px;
-    border-bottom: 2px solid var(--low-white);
+    border-bottom: 2px solid var(--input-selected);
 }
 
 
@@ -34,7 +39,7 @@
 
 /***** Sort Theme *****/
 .select-content.sort {
-    background: var(--semi-black);
+    background: var(--dropdown-content);
     box-shadow: var(--drop-shadow);
     padding: 4px 0;
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.cs

@@ -37,7 +37,7 @@ public partial class SliderRange
     {
         var percent1 = (double)(Params.ValueMin - Params.Min) / (Params.Max - Params.Min) * 100;
         var percent2 = (double)(Params.ValueMax - Params.Min) / (Params.Max - Params.Min) * 100;
-        return $"background: linear-gradient(to right, var(--light-grey) {percent1}% , var(--violet) {percent1}% , var(--violet) {percent2}%, var(--light-grey) {percent2}%)";
+        return $"background: linear-gradient(to right, var(--line) {percent1}% , var(--violet) {percent1}% , var(--violet) {percent2}%, var(--line) {percent2}%)";
     }
 
     private string StatusColor(int value)

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.css

@@ -1,6 +1,7 @@
 .container {
     position: relative;
     width: 100%;
+    z-index: var(--index-component)
 }
 
 input[type="range"] {

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.css

@@ -5,6 +5,7 @@
     align-items: flex-end;
     padding: 0px 10px;
     height: 40px;
+    z-index: var(--index-layout)
 }
 
 .icon-container {
@@ -33,7 +34,6 @@
 }
 
 .add-container {
-    overflow: visible;
     margin-right: 40px;
 }
 
@@ -42,7 +42,6 @@
     flex-direction: row;
     background: var(--violet);
     border-radius: var(--small-radius);
-    overflow: visible;
 }
 
 .button {
@@ -54,11 +53,15 @@
 }
 
 .first-button {
-    border-right: 2px solid var(--line-black);
+    border-right: 2px solid var(--violet-selected);
+    border-radius: var(--small-radius) 0 0 var(--small-radius);
+    overflow: hidden;
 }
 
 .second-button .button-icon {
     padding: 6px;
+    border-radius: 0 var(--small-radius) var(--small-radius) 0;
+    overflow: hidden;
 }
 
 .button-icon {
@@ -66,10 +69,10 @@
 }
 
     .button-icon:hover {
-        background: var(--line-black);
+        background: var(--violet-selected);
         cursor: pointer;
     }
 
 .account-icon {
-    fill: var(--light-grey);
+    fill: var(--line);
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css

@@ -7,16 +7,27 @@
     --red: #FF5E51;
     --yellow: #FFC107;
     --green: #43F8C0;
-    --light-grey: #5C5C5E;
-    --black: rgba(0, 0, 0, 0.8);
     --white: #fff;
-    --low-white: rgb(255, 255, 255, 0.1);
-    --semi-black: rgba(0, 0, 0, 0.5);
-    --line-black: rgba(0, 0, 0, 0.2);
+    --line: #5C5C5E;
+    --input-primary: rgba(0, 0, 0, 0.8);
+    --input-secondary: rgb(45, 45, 48);
+    --input-selected: rgb(255, 255, 255, 0.1);
+    --dropdown-content: rgb(45, 45, 48);
+
     --small-radius: 4px;
     --big-radius: 10px;
-    --radius: 6px;
+
     --drop-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
+
+    --index-background: -100;
+    --index-orb: -1;
+    --index-content: 0;
+    --index-layout: 100;
+    --index-component: 300;
+    --index-floating: 500;
+    --index-dropdown: 700;
+    --index-backdrop: 900;
+    --index-popup: 1000;
 }
 
 html {