From 558416e7ad3fad31bc377fd614aa57cc9d4a101f Mon Sep 17 00:00:00 2001 From: Egamorf Date: Mon, 7 Apr 2025 22:35:12 +0200 Subject: [PATCH] refactoring css --- .../Layouts/MainLayout.razor.css | 4 +- .../Games/Filter/AdvancedGameFilter.razor.css | 5 ++- .../Pages/Games/Filter/GameFilter.razor.css | 5 ++- .../Pages/Games/GamesBase.razor.css | 2 +- .../Account/AccountSettings.razor.css | 15 +++---- .../Components/Search/SearchInput.razor.css | 3 +- .../Components/SelectListElement.razor.css | 23 ++--------- .../Select/MultipleSelectList.razor.css | 40 ++++++------------- .../Components/Select/SelectList.razor.css | 9 ++++- .../SliderRange/SliderRange.razor.cs | 2 +- .../SliderRange/SliderRange.razor.css | 1 + .../Layouts/Header/HeaderLayout.razor.css | 13 +++--- .../GameIdeas.BlazorApp/wwwroot/css/app.css | 23 ++++++++--- 13 files changed, 70 insertions(+), 75 deletions(-) diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css index cd61f2c..563f058 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css +++ b/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); } \ No newline at end of file diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.css index 4c0604a..e2e6529 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.css +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.css @@ -2,10 +2,11 @@ display: flex; flex-direction: column; gap: 10px; - padding-right: 20px; + 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 { diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.css index 75bae77..f1df118 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.css +++ b/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 { diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.css index 21c19a7..d1ba3fc 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.css +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/GamesBase.razor.css @@ -7,5 +7,5 @@ } .content { - + z-index: var(--index-content); } \ No newline at end of file diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css index 6a651ee..18ab1f3 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Account/AccountSettings.razor.css +++ b/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) } diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css index 17aca87..eedab03 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.css +++ b/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 { diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css index 82363ab..ad6d4c6 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/Components/SelectListElement.razor.css +++ b/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 { diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css index 857a5e9..bfdbc90 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/MultipleSelectList.razor.css +++ b/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); } diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css index 3e5473b..56150db 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Select/SelectList.razor.css +++ b/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; } diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.cs index bdc2846..41841cb 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.cs +++ b/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) diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.css index cf23999..c27647d 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.css +++ b/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"] { diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.css index 7661644..013f027 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Layouts/Header/HeaderLayout.razor.css +++ b/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); } \ No newline at end of file diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css index 725eae6..0158695 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css +++ b/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 {