From 99e541083fae52584d04d4a2d9b45a9ea791bd93 Mon Sep 17 00:00:00 2001 From: Egamorf Date: Sun, 23 Feb 2025 19:31:16 +0100 Subject: [PATCH] Update style --- .../Layouts/MainLayout.razor | 7 +-- .../Layouts/MainLayout.razor.css | 14 ++---- .../Shared/Components/HeaderLayout.razor | 24 +++++----- .../Shared/Components/HeaderLayout.razor.cs | 16 ++++++- .../Shared/Components/HeaderLayout.razor.css | 47 +++++++++++++++++-- .../GameIdeas.BlazorApp/wwwroot/css/app.css | 14 +++++- 6 files changed, 91 insertions(+), 31 deletions(-) diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor index f9b7cd3..830f1af 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor @@ -8,7 +8,8 @@ @Body - - - + + + + diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css index 982fdd4..92cedd7 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Layouts/MainLayout.razor.css @@ -1,41 +1,37 @@ .page { - background: var(--background); - overflow: hidden + height: 100%; + overflow: hidden; + z-index: 1; } .orb { position: absolute; border-radius: 100%; + z-index: -1; } .green { - position: absolute; width: 80vh; height: 80vh; top: -20vh; background: #315941; filter: blur(30vh); - z-index: -999; } .blue { - position: absolute; width: 80vw; height: 80vw; left: 10vw; top: 50vh; background: #3A4156; filter: blur(30vh); - z-index: -999; } .red { - position: absolute; width: 100vh; height: 100vh; left: 60vw; - top: -30vh; + top: -40vh; background: #593533; filter: blur(30vh); - z-index: -999; } diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/HeaderLayout.razor b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/HeaderLayout.razor index e857a73..1655974 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/HeaderLayout.razor +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/HeaderLayout.razor @@ -12,28 +12,30 @@
- +
-
- +
+
-
-
- @ResourcesKey.ManualAdd +
+
+
+ @ResourcesKey.ManualAdd +
+
+ @ResourcesKey.AutoAdd +
-
- @ResourcesKey.AutoAdd -
-
+
-
diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/HeaderLayout.razor.cs b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/HeaderLayout.razor.cs index 8879ccd..0353f16 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/HeaderLayout.razor.cs +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/HeaderLayout.razor.cs @@ -4,8 +4,22 @@ namespace GameIdeas.BlazorApp.Shared.Components; public partial class HeaderLayout : LayoutComponentBase { - private Task HandleIconClicked() + private bool AddButtonsVisile = false; + private ElementReference DropdownAdd; + + private void HandleIconClicked() { throw new NotImplementedException(); } + + private async Task HandleMoreAddClickedAsync() + { + AddButtonsVisile = !AddButtonsVisile; + await DropdownAdd.FocusAsync(); + } + + private void HandlerDropdownAddFocusOut() + { + AddButtonsVisile = false; + } } diff --git a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/HeaderLayout.razor.css b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/HeaderLayout.razor.css index 43fa775..321d27b 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/HeaderLayout.razor.css +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/HeaderLayout.razor.css @@ -5,7 +5,6 @@ align-items: flex-end; padding: 0px 10px; height: 40px; - width: 100%; } .icon-container { @@ -17,6 +16,15 @@ height: 100%; } + .icon-container img { + max-height: 85%; + max-width: 85%; + } + +.icon-container:hover { + cursor: pointer; +} + .account-add-container { display: flex; flex-direction: row; @@ -26,6 +34,7 @@ .add-container { overflow: visible; + margin-right: 40px; } .add-buttons { @@ -33,6 +42,7 @@ flex-direction: row; background: var(--violet); border-radius: var(--small-radius); + overflow: hidden; } .button { @@ -44,23 +54,50 @@ } .first-button { - border-right: 1px solid var(--line-black); + border-right: 2px solid var(--line-black); +} + +.second-button .button-icon { + padding: 6px; } .button-icon { - color: var(--white); + fill: var(--white); } + .button-icon:hover { + background: var(--line-black); + cursor: pointer; + } + + .account-icon { - color: var(--light-grey); + fill: var(--light-grey); } .dropdown-more-add { + margin-top: 0px; + display: flex; + flex-direction: column; + gap: 4px; background: var(--violet); box-shadow: var(--drop-shadow); border-radius: var(--small-radius); + position: fixed; + padding: 4px; + animation-name: fade-in; + animation-duration: 0.4s } .drowdown-more-element { - width: 100%; + width: fit-content; +} + +.drowdown-more-element:hover { + color: var(--light-grey); + cursor: pointer; +} + +.invisible { + display: none; } \ 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 42733a1..afefa49 100644 --- a/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css +++ b/src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css @@ -18,16 +18,21 @@ html { font-family: 'Noto Sans', sans-serif; - font-size: 12px + font-size: 12px; + color: var(--white) } -html, body, .app { +html, body, #app { margin: 0; padding: 0; height: 100%; overflow: hidden; } +#app { + background: var(--background); +} + h1:focus { outline: none; } @@ -137,4 +142,9 @@ code { .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; +} + +@keyframes fade-in { + 0% {opacity: 0} + 100% {opacity: 1} } \ No newline at end of file