From 0cc35300f1f9af7d622f9fed4fd7c57f36aedd84 Mon Sep 17 00:00:00 2001 From: ChiaraBm Date: Mon, 27 Oct 2025 08:23:02 +0000 Subject: [PATCH] Updated mooncore styles. Adjusted theme editor and theme loading. Changed versions Upgraded mooncore.blazor.flyonui. Made moonlight flyonui/daisyui compatible --- .../Controllers/Frontend/FrontendPage.razor | 61 ++++--- .../Http/Controllers/LocalAuth/Login.razor | 2 +- .../Http/Controllers/LocalAuth/Register.razor | 2 +- .../Moonlight.ApiServer.csproj | 2 +- .../Moonlight.Client.Runtime.csproj | 4 + Moonlight.Client.Runtime/Styles/styles.css | 57 +------ Moonlight.Client.Runtime/Styles/theme.css | 66 ++++---- Moonlight.Client/Moonlight.Client.csproj | 4 +- .../MoonCore.Blazor.FlyonUi/mooncore.map | 21 ++- Moonlight.Client/Styles/mappings/classes.map | 15 +- Moonlight.Client/UI/App.razor | 2 +- .../UI/Components/ThemeEditor.razor | 24 ++- Moonlight.Client/UI/Shell/AppHeader.razor | 30 ++++ Moonlight.Client/UI/Shell/MainLayout.razor | 22 +++ .../UI/Shell/SidebarComponent.razor | 151 ++++++++++++++++++ Moonlight.Client/UI/Shell/SidebarDrawer.razor | 31 ++++ .../Sys/Customisation/Themes/Create.razor | 4 - Moonlight.Shared/Misc/ApplicationTheme.cs | 4 - Moonlight.Shared/Moonlight.Shared.csproj | 2 +- 19 files changed, 341 insertions(+), 163 deletions(-) create mode 100644 Moonlight.Client/UI/Shell/AppHeader.razor create mode 100644 Moonlight.Client/UI/Shell/MainLayout.razor create mode 100644 Moonlight.Client/UI/Shell/SidebarComponent.razor create mode 100644 Moonlight.Client/UI/Shell/SidebarDrawer.razor diff --git a/Moonlight.ApiServer/Http/Controllers/Frontend/FrontendPage.razor b/Moonlight.ApiServer/Http/Controllers/Frontend/FrontendPage.razor index 321977af..edea5c68 100644 --- a/Moonlight.ApiServer/Http/Controllers/Frontend/FrontendPage.razor +++ b/Moonlight.ApiServer/Http/Controllers/Frontend/FrontendPage.razor @@ -1,7 +1,7 @@ @using Moonlight.ApiServer.Database.Entities - + @@ -22,48 +22,45 @@ { } diff --git a/Moonlight.ApiServer/Http/Controllers/LocalAuth/Login.razor b/Moonlight.ApiServer/Http/Controllers/LocalAuth/Login.razor index 2fbdbad9..3d96ecc7 100644 --- a/Moonlight.ApiServer/Http/Controllers/LocalAuth/Login.razor +++ b/Moonlight.ApiServer/Http/Controllers/LocalAuth/Login.razor @@ -1,4 +1,4 @@ - + Login into your account diff --git a/Moonlight.ApiServer/Http/Controllers/LocalAuth/Register.razor b/Moonlight.ApiServer/Http/Controllers/LocalAuth/Register.razor index fc4cf118..238353fc 100644 --- a/Moonlight.ApiServer/Http/Controllers/LocalAuth/Register.razor +++ b/Moonlight.ApiServer/Http/Controllers/LocalAuth/Register.razor @@ -1,4 +1,4 @@ - + Register a new account diff --git a/Moonlight.ApiServer/Moonlight.ApiServer.csproj b/Moonlight.ApiServer/Moonlight.ApiServer.csproj index 9ba7714c..017ebaa5 100644 --- a/Moonlight.ApiServer/Moonlight.ApiServer.csproj +++ b/Moonlight.ApiServer/Moonlight.ApiServer.csproj @@ -13,7 +13,7 @@ Moonlight.ApiServer - 2.1.14 + 2.1.15 Moonlight Panel A build of the api server for moonlight development https://github.com/Moonlight-Panel/Moonlight diff --git a/Moonlight.Client.Runtime/Moonlight.Client.Runtime.csproj b/Moonlight.Client.Runtime/Moonlight.Client.Runtime.csproj index 510c55a4..4c81345a 100644 --- a/Moonlight.Client.Runtime/Moonlight.Client.Runtime.csproj +++ b/Moonlight.Client.Runtime/Moonlight.Client.Runtime.csproj @@ -19,6 +19,10 @@ + + + + diff --git a/Moonlight.Client.Runtime/Styles/styles.css b/Moonlight.Client.Runtime/Styles/styles.css index 6db3a9db..c4f849f3 100644 --- a/Moonlight.Client.Runtime/Styles/styles.css +++ b/Moonlight.Client.Runtime/Styles/styles.css @@ -9,14 +9,10 @@ @theme { --font-inter: "Inter", var(--font-sans); --font-scp: "Source Code Pro", var(--font-mono); - - --color-background: var(--mooncore-color-background); - --color-base-150: var(--mooncore-color-base-150); - --color-base-250: var(--mooncore-color-base-250); } @plugin "flyonui" { - themes: mooncore --default; + themes: moonlight --default; } @source "./node_modules/flyonui/dist/index.js"; @@ -45,60 +41,21 @@ width: var(--blazor-load-percentage, 0%); } -@plugin "flyonui/theme" { - name: "mooncore"; - default: true; - prefersdark: true; - color-scheme: "dark"; - --color-base-100: var(--mooncore-color-base-100); - --color-base-200: var(--mooncore-color-base-200); - --color-base-300: var(--mooncore-color-base-300); - --color-base-content: var(--mooncore-color-base-content); - --color-primary: var(--mooncore-color-primary); - --color-primary-content: var(--mooncore-color-primary-content); - --color-secondary: var(--mooncore-color-secondary); - --color-secondary-content: var(--mooncore-color-secondary-content); - --color-accent: var(--mooncore-color-accent); - --color-accent-content: var(--mooncore-color-accent-content); - --color-neutral: var(--mooncore-color-neutral); - --color-neutral-content: var(--mooncore-color-neutral-content); - --color-info: var(--mooncore-color-info); - --color-info-content: var(--mooncore-color-info-content); - --color-success: var(--mooncore-color-success); - --color-success-content: var(--mooncore-color-success-content); - --color-warning: var(--mooncore-color-warning); - --color-warning-content: var(--mooncore-color-warning-content); - --color-error: var(--mooncore-color-error); - --color-error-content: var(--mooncore-color-error-content); - --radius-selector: var(--mooncore-radius-selector); - --radius-field: var(--mooncore-radius-field); - --radius-box: var(--mooncore-radius-box); - --size-selector: var(--mooncore-size-selector); - --size-field: var(--mooncore-size-field); - --border: var(--mooncore-border); - --depth: var(--mooncore-depth); - --noise: var(--mooncore-noise); -} - @layer utilities { .btn { @apply text-sm font-medium inline-flex items-center justify-center; } - + .checkbox { @apply border-base-content/30 bg-base-100; } - + .input { - @apply !border-base-content/20 border-2 ring-0! outline-0! focus:border-primary! focus-within:border-primary! bg-base-200/50; - } - - .advance-select-toggle { - @apply !border-base-content/20 border-2 ring-0! outline-0! focus:border-primary! focus-within:border-primary! bg-base-200/50; + @apply !border-base-content/20 border-2 ring-0! outline-0! focus:border-primary! focus-within:border-primary! bg-base-100/50; } .select { - @apply !border-base-content/20 border-2 ring-0! outline-0! focus:border-primary! focus-within:border-primary! bg-base-200/50; + @apply !border-base-content/20 border-2 ring-0! outline-0! focus:border-primary! focus-within:border-primary! bg-base-100/50; } .table { @@ -111,10 +68,6 @@ @apply px-2.5 py-1.5 text-sm; } - .dropdown-menu { - @apply bg-base-150; - } - .advance-select-menu { @apply !border-base-content/20 border-2 ring-0! outline-0! bg-base-200/50 !pt-0 !px-0 !py-0; } diff --git a/Moonlight.Client.Runtime/Styles/theme.css b/Moonlight.Client.Runtime/Styles/theme.css index 8dba5958..7c475499 100644 --- a/Moonlight.Client.Runtime/Styles/theme.css +++ b/Moonlight.Client.Runtime/Styles/theme.css @@ -1,33 +1,35 @@ -@theme { - --mooncore-color-background: #0c0f18; - --mooncore-color-base-100: #1e2b47; - --mooncore-color-base-150: #1a2640; - --mooncore-color-base-200: #101a2e; - --mooncore-color-base-250: #0f1729; - --mooncore-color-base-300: #0c1221; - --mooncore-color-base-content: #dde5f5; - --mooncore-color-primary: oklch(.511 .262 276.966); - --mooncore-color-primary-content: #dde5f5; - --mooncore-color-secondary: oklch(37% 0.034 259.733); - --mooncore-color-secondary-content: #dde5f5; - --mooncore-color-accent: oklch(49.1% 0.27 292.581); - --mooncore-color-accent-content: #dde5f5; - --mooncore-color-neutral: oklch(27% 0.041 260.031); - --mooncore-color-neutral-content: oklch(92% 0.004 286.32); - --mooncore-color-info: oklch(.546 .245 262.881); - --mooncore-color-info-content: #dde5f5; - --mooncore-color-success: oklch(.627 .194 149.214); - --mooncore-color-success-content: #dde5f5; - --mooncore-color-warning: oklch(.828 .189 84.429); - --mooncore-color-warning-content: #dde5f5; - --mooncore-color-error: oklch(.586 .253 17.585); - --mooncore-color-error-content: #dde5f5; - --mooncore-radius-selector: 0.25rem; - --mooncore-radius-field: 0.5rem; - --mooncore-radius-box: 0.5rem; - --mooncore-size-selector: 0.25rem; - --mooncore-size-field: 0.25rem; - --mooncore-border: 1px; - --mooncore-depth: 0; - --mooncore-noise: 0; +@plugin "flyonui/theme" { + name: "moonlight"; + prefersdark: true; + color-scheme: "dark"; + + --color-base-100: #192032; + --color-base-200: #101522; + --color-base-300: #070a14; + + --color-base-content: #dde5f5; + --color-primary: oklch(.511 .262 276.966); + --color-primary-content: #dde5f5; + --color-secondary: oklch(37% 0.034 259.733); + --color-secondary-content: #dde5f5; + --color-accent: oklch(49.1% 0.27 292.581); + --color-accent-content: #dde5f5; + --color-neutral: oklch(27% 0.041 260.031); + --color-neutral-content: oklch(92% 0.004 286.32); + --color-info: oklch(.546 .245 262.881); + --color-info-content: #dde5f5; + --color-success: oklch(.627 .194 149.214); + --color-success-content: #dde5f5; + --color-warning: oklch(.828 .189 84.429); + --color-warning-content: #dde5f5; + --color-error: oklch(.586 .253 17.585); + --color-error-content: #dde5f5; + --radius-selector: 0.25rem; + --radius-field: 0.5rem; + --radius-box: 0.5rem; + --size-selector: 0.25rem; + --size-field: 0.25rem; + --border: 1px; + --depth: 0; + --noise: 0; } \ No newline at end of file diff --git a/Moonlight.Client/Moonlight.Client.csproj b/Moonlight.Client/Moonlight.Client.csproj index 5c6db8f1..9e3296d0 100644 --- a/Moonlight.Client/Moonlight.Client.csproj +++ b/Moonlight.Client/Moonlight.Client.csproj @@ -12,7 +12,7 @@ frontend Moonlight.Client - 2.1.14 + 2.1.15 Moonlight Panel A build of the client for moonlight development https://github.com/Moonlight-Panel/Moonlight @@ -26,7 +26,7 @@ - + diff --git a/Moonlight.Client/Styles/MoonCore.Blazor.FlyonUi/mooncore.map b/Moonlight.Client/Styles/MoonCore.Blazor.FlyonUi/mooncore.map index ddf06300..7d500b42 100755 --- a/Moonlight.Client/Styles/MoonCore.Blazor.FlyonUi/mooncore.map +++ b/Moonlight.Client/Styles/MoonCore.Blazor.FlyonUi/mooncore.map @@ -29,7 +29,6 @@ accordion-content accordion-toggle active active-tab:bg-primary -active-tab:hover:text-primary-content active-tab:text-primary-content advance-select-menu advance-select-option @@ -50,14 +49,13 @@ basis-full bg-background bg-background/60 bg-base-100 -bg-base-150 +bg-base-100/50 bg-base-200 bg-base-200! bg-base-200/50 bg-base-200/60 -bg-base-250 bg-base-300 -bg-base-300/50 +bg-base-300/15 bg-base-300/60 bg-error bg-info @@ -147,7 +145,7 @@ cursor-pointer cursor-progress diff disabled -divide-base-150/60 +divide-base-100/60 divide-y divider drawer @@ -231,8 +229,8 @@ h-full h-screen helper-text hidden +hover:bg-primary/20 hover:bg-primary/5 -hover:bg-transparent hover:cursor-pointer hover:text-base-content hover:text-base-content/60 @@ -309,6 +307,7 @@ max-sm:hidden max-w-64 max-w-7xl max-w-80 +max-w-fit max-w-full max-w-lg max-w-sm @@ -370,6 +369,7 @@ mt-10 mt-12 mt-2 mt-2.5 +mt-20 mt-3 mt-3.5 mt-4 @@ -426,6 +426,7 @@ pt-2 pt-3 px-1.5 px-2 +px-2.5 px-3 px-4 px-5 @@ -462,7 +463,6 @@ shadow-base-300/20 shadow-lg shadow-md shadow-none -shadow-sm shadow-xs shrink-0 size-10 @@ -473,6 +473,7 @@ size-8 size-8.5 sm:auto-cols-max sm:flex +sm:inline sm:items-center sm:items-end sm:justify-between @@ -502,6 +503,7 @@ sticky success-message switch tab +tab! tab-active table table-pin-cols @@ -560,9 +562,7 @@ transform transition transition-all transition-opacity -transition-transform translate-x-0 -translate-x-full truncate underline uppercase @@ -570,17 +570,14 @@ validate w-0 w-0.5 w-13 -w-20 w-4 w-56 w-6 w-64 -w-fit w-full whitespace-nowrap xl:flex xl:grid-cols-2 -z-1 z-40 z-50 z-69 diff --git a/Moonlight.Client/Styles/mappings/classes.map b/Moonlight.Client/Styles/mappings/classes.map index 338ace2a..8a269259 100644 --- a/Moonlight.Client/Styles/mappings/classes.map +++ b/Moonlight.Client/Styles/mappings/classes.map @@ -8,12 +8,14 @@ !justify-between !me-1.5 !ms-auto +!p-2.5 !px-2.5 !py-0.5 !rounded-full !rounded-xs !text-sm !w-2.5 +!w-8 *:[grid-area:1/1] *:first:rounded-tl-lg *:last:rounded-tr-lg @@ -65,16 +67,14 @@ badge-primary badge-soft badge-success basis-full -bg-background -bg-background/60 bg-base-100 -bg-base-150 +bg-base-100/50 bg-base-200 bg-base-200! bg-base-200/50 bg-base-200/60 -bg-base-250 bg-base-300 +bg-base-300/15 bg-base-300/45 bg-base-300/50 bg-base-300/60 @@ -190,7 +190,7 @@ cursor-progress custom-option diff disabled -divide-base-150/60 +divide-base-100/60 divide-y divider drawer @@ -298,6 +298,7 @@ h-screen helper-text hidden hover:bg-indigo-500 +hover:bg-primary/20 hover:bg-primary/5 hover:bg-transparent hover:cursor-pointer @@ -393,6 +394,7 @@ max-w-64 max-w-7xl max-w-8 max-w-80 +max-w-fit max-w-full max-w-lg max-w-md @@ -467,6 +469,7 @@ mt-10 mt-12 mt-2 mt-2.5 +mt-20 mt-3 mt-3.5 mt-4 @@ -602,6 +605,7 @@ sm:flex-nowrap sm:gap-y-0 sm:grid-cols-3 sm:grid-cols-6 +sm:inline sm:items-center sm:items-end sm:justify-between @@ -654,6 +658,7 @@ sticky success-message switch tab +tab! tab-active tab-content table diff --git a/Moonlight.Client/UI/App.razor b/Moonlight.Client/UI/App.razor index 6a5e06bf..8b318e0d 100644 --- a/Moonlight.Client/UI/App.razor +++ b/Moonlight.Client/UI/App.razor @@ -1,4 +1,4 @@ -@using Moonlight.Client.UI.Layouts +@using Moonlight.Client.UI.Shell @using Moonlight.Client.Services @using Moonlight.Client.UI.Partials diff --git a/Moonlight.Client/UI/Components/ThemeEditor.razor b/Moonlight.Client/UI/Components/ThemeEditor.razor index 25ee2098..0827d61c 100644 --- a/Moonlight.Client/UI/Components/ThemeEditor.razor +++ b/Moonlight.Client/UI/Components/ThemeEditor.razor @@ -7,11 +7,6 @@ Base Colors -
- - Background -
-
Base Content @@ -22,21 +17,11 @@ Base 100
-
- - Base 150 -
-
Base 200
-
- - Base 250 -
-
Base 300 @@ -78,6 +63,15 @@ Accent Content
+ +
+ + Neutral +
+
+ + Neutral Content +
diff --git a/Moonlight.Client/UI/Shell/AppHeader.razor b/Moonlight.Client/UI/Shell/AppHeader.razor new file mode 100644 index 00000000..535e7dae --- /dev/null +++ b/Moonlight.Client/UI/Shell/AppHeader.razor @@ -0,0 +1,30 @@ +@using MoonCore.Blazor.FlyonUi.Drawers + +@inject DrawerService DrawerService + + + +@code +{ + private async Task LaunchSidebarAsync() + { + await DrawerService.LaunchAsync(unfocusHide: true); + } +} \ No newline at end of file diff --git a/Moonlight.Client/UI/Shell/MainLayout.razor b/Moonlight.Client/UI/Shell/MainLayout.razor new file mode 100644 index 00000000..6002dd57 --- /dev/null +++ b/Moonlight.Client/UI/Shell/MainLayout.razor @@ -0,0 +1,22 @@ +@using MoonCore.Blazor.FlyonUi.Drawers +@using MoonCore.Blazor.FlyonUi.Modals +@using MoonCore.Blazor.FlyonUi.Toasts + +@inherits LayoutComponentBase + +
+ +
+ +
+ @Body + + + + +
+
+
\ No newline at end of file diff --git a/Moonlight.Client/UI/Shell/SidebarComponent.razor b/Moonlight.Client/UI/Shell/SidebarComponent.razor new file mode 100644 index 00000000..1b74d19c --- /dev/null +++ b/Moonlight.Client/UI/Shell/SidebarComponent.razor @@ -0,0 +1,151 @@ +@using System.Security.Claims +@using Microsoft.AspNetCore.Authorization +@using Microsoft.AspNetCore.Components.Authorization +@using Moonlight.Client.Interfaces +@using Moonlight.Client.Models + +@inherits MoonCore.Blazor.FlyonUi.Drawers.DrawerBase + +@inject NavigationManager Navigation +@inject IEnumerable SidebarItemProviders +@inject IAuthorizationService AuthorizationService + +@implements IDisposable + +@{ + var url = new Uri(Navigation.Uri); +} + +
+
+
+ Logo +
+

Moonlight v2.1

+
+
+
+
    + @foreach (var group in Items) + { + if (!string.IsNullOrEmpty(group.Key)) + { +
  • +
    @group.Key
    +
    • + } + + foreach (var item in group.Value) + { + var isActive = item.RequiresExactMatch + ? url.LocalPath == item.Path + : url.LocalPath.StartsWith(item.Path); + +
  • + + + @item.Name + +
    • + } + } +
+
+
+
+
+ + + +
+
+ @Username +
+
+ @Email +
+
+
+ + + +
+
+ +@code +{ + [CascadingParameter] public Task AuthState { get; set; } + + private Dictionary Items = new(); + + private string Username; + private string Email; + private ClaimsPrincipal Identity; + + protected override async Task OnInitializedAsync() + { + var authState = await AuthState; + + Identity = authState.User; + Username = Identity.FindFirst(ClaimTypes.Name)!.Value; + Email = Identity.FindFirst(ClaimTypes.Email)!.Value; + + var sidebarItems = new List(); + + foreach (var provider in SidebarItemProviders) + provider.ModifySidebar(sidebarItems); + + var itemsToRemove = new List(); + + foreach (var sidebarItem in sidebarItems) + { + if(string.IsNullOrEmpty(sidebarItem.Policy)) + continue; + + var authResult = await AuthorizationService.AuthorizeAsync(Identity, sidebarItem.Policy); + + if(authResult.Succeeded) + continue; + + itemsToRemove.Add(sidebarItem); + } + + foreach (var sidebarItem in itemsToRemove) + sidebarItems.Remove(sidebarItem); + + Items = sidebarItems + .GroupBy(x => x.Group ?? "") + .OrderByDescending(x => string.IsNullOrEmpty(x.Key)) + .ToDictionary(x => x.Key, x => x.OrderBy(y => y.Priority).ToArray()); + + Navigation.LocationChanged += OnNavigated; + } + + private async void OnNavigated(object? sender, LocationChangedEventArgs e) + { + // No async void without try catch to prevent hard app crashes when async task fails + + try + { + await InvokeAsync(StateHasChanged); + } + catch (Exception) + { + // ignored + } + } + + private Task LogoutAsync() + { + Navigation.NavigateTo("/api/auth/logout", true); + return Task.CompletedTask; + } + + public void Dispose() + { + Navigation.LocationChanged -= OnNavigated; + } +} \ No newline at end of file diff --git a/Moonlight.Client/UI/Shell/SidebarDrawer.razor b/Moonlight.Client/UI/Shell/SidebarDrawer.razor new file mode 100644 index 00000000..2a2626a9 --- /dev/null +++ b/Moonlight.Client/UI/Shell/SidebarDrawer.razor @@ -0,0 +1,31 @@ +@inherits MoonCore.Blazor.FlyonUi.Drawers.DrawerBase + +@inject NavigationManager Navigation + +@implements IDisposable + + + +@code +{ + protected override void OnInitialized() + { + Navigation.LocationChanged += OnLocationChanged; + } + + private async void OnLocationChanged(object? sender, LocationChangedEventArgs e) + { + try + { + await CloseAsync(); + } + catch (Exception) + { + // Ignored + } + } + + public void Dispose() + { + } +} \ No newline at end of file diff --git a/Moonlight.Client/UI/Views/Admin/Sys/Customisation/Themes/Create.razor b/Moonlight.Client/UI/Views/Admin/Sys/Customisation/Themes/Create.razor index 247bd319..ef66f2ff 100644 --- a/Moonlight.Client/UI/Views/Admin/Sys/Customisation/Themes/Create.razor +++ b/Moonlight.Client/UI/Views/Admin/Sys/Customisation/Themes/Create.razor @@ -68,12 +68,8 @@ { return new ApplicationTheme() { - ColorBackground = "#0c0f18", - ColorBase100 = "#1e2b47", - ColorBase150 = "#1a2640", ColorBase200 = "#101a2e", - ColorBase250 = "#0f1729", ColorBase300 = "#0c1221", ColorBaseContent = "#dde5f5", diff --git a/Moonlight.Shared/Misc/ApplicationTheme.cs b/Moonlight.Shared/Misc/ApplicationTheme.cs index b391ce59..f1cd4b4d 100644 --- a/Moonlight.Shared/Misc/ApplicationTheme.cs +++ b/Moonlight.Shared/Misc/ApplicationTheme.cs @@ -2,12 +2,8 @@ namespace Moonlight.Shared.Misc; public class ApplicationTheme { - public string ColorBackground { get; set; } - public string ColorBase100 { get; set; } - public string ColorBase150 { get; set; } public string ColorBase200 { get; set; } - public string ColorBase250 { get; set; } public string ColorBase300 { get; set; } public string ColorBaseContent { get; set; } diff --git a/Moonlight.Shared/Moonlight.Shared.csproj b/Moonlight.Shared/Moonlight.Shared.csproj index 452e911f..a2737bac 100644 --- a/Moonlight.Shared/Moonlight.Shared.csproj +++ b/Moonlight.Shared/Moonlight.Shared.csproj @@ -9,7 +9,7 @@ Moonlight.Shared shared Moonlight.Shared - 2.1.14 + 2.1.15 Moonlight Panel A build of the shared classes for moonlight development https://github.com/Moonlight-Panel/Moonlight