Moonlight-Panel/Moonlight
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated mooncore styles. Adjusted theme editor and theme loading. Changed versions Upgraded mooncore.blazor.flyonui. Made moonlight flyonui/daisyui compatible

Browse Source
This commit is contained in:
ChiaraBm
2025-10-27 08:23:02 +00:00
parent 2f21806bea
commit 0cc35300f1
19 changed files with 341 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
Moonlight.Client.Runtime/Moonlight.Client.Runtime.csproj
View File

@@ -19,6 +19,10 @@
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="9.0.9" PrivateAssets="all" />
</ItemGroup>
<ItemGroup>
<Folder Include="wwwroot\css\" />
</ItemGroup>
<Import Project="Plugins.props" />
</Project>

57
Moonlight.Client.Runtime/Styles/styles.css
View File

@@ -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;
}

66
Moonlight.Client.Runtime/Styles/theme.css
View File

@@ -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;
}