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

Refactored css classes to match flyonui. Switched to postgres arrays for permissions. Migrated file manager. Adjusted everything to work with the latest mooncore version

Browse Source
This commit is contained in:
ChiaraBm
2025-07-12 23:53:43 +02:00
parent eaece9e334
commit d88376f2fb
72 changed files with 2870 additions and 2227 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
Moonlight.Client.Runtime/Styles/additions/animations.css
View File

@@ -1,9 +0,0 @@
@keyframes shimmer {
0% {
background-position: 0 0
}
to {
background-position: -200% 0
}
}

93
Moonlight.Client.Runtime/Styles/additions/buttons.css
View File

@@ -1,93 +0,0 @@
/* Buttons */
.btn,
.btn-lg,
.btn-sm,
.btn-xs {
@apply cursor-pointer font-medium text-sm inline-flex items-center justify-center border border-transparent rounded-lg leading-5 shadow-sm transition active:scale-95;
}
.btn {
@apply px-3 py-2;
}
.btn-lg {
@apply px-4 py-3;
}
.btn-sm {
@apply px-2.5 py-1.5;
}
.btn-xs {
@apply px-2 py-0.5;
}
/* Colors */
.btn-primary {
@apply bg-primary hover:bg-primary/90 focus-visible:outline-primary text-diffcolor;
}
.btn-secondary {
@apply bg-secondary hover:bg-secondary/90 focus-visible:outline-secondary text-diffcolor;
}
.btn-tertiary {
@apply bg-tertiary hover:bg-tertiary/90 focus-visible:outline-tertiary text-diffcolor;
}
.btn-danger {
@apply bg-danger hover:bg-danger/90 focus-visible:outline-danger text-diffcolor;
}
.btn-warning {
@apply bg-warning hover:bg-warning/90 focus-visible:outline-warning text-diffcolor;
}
.btn-info {
@apply bg-info hover:bg-info/90 focus-visible:outline-info text-diffcolor;
}
.btn-success {
@apply bg-success hover:bg-success/90 focus-visible:outline-success text-diffcolor;
}
/* Disabled Buttons */
.btn:disabled,
.btn-lg:disabled,
.btn-sm:disabled,
.btn-xs:disabled {
@apply opacity-50 cursor-not-allowed pointer-events-none;
}
/* Colors for Disabled States */
.btn-primary:disabled {
@apply bg-primary/80 text-gray-300;
}
.btn-secondary:disabled {
@apply bg-secondary/80 text-gray-400;
}
.btn-tertiary:disabled {
@apply bg-tertiary/80 text-gray-300;
}
.btn-danger:disabled {
@apply bg-danger/80 text-gray-300;
}
.btn-warning:disabled {
@apply bg-warning/80 text-gray-400;
}
.btn-info:disabled {
@apply bg-info/80 text-gray-300;
}
.btn-success:disabled {
@apply bg-success/80 text-gray-300;
}

23
Moonlight.Client.Runtime/Styles/additions/cards.css
View File

@@ -1,23 +0,0 @@
.card {
@apply flex flex-col bg-gray-800 shadow-sm rounded-xl;
}
.card-header {
@apply p-5;
}
.card-header:has(+ .card-body) {
@apply pb-0;
}
.card-title {
@apply text-2xl font-semibold text-white;
}
.card-body {
@apply p-5 text-gray-200;
}
.card-footer {
@apply p-5;
}

8
Moonlight.Client.Runtime/Styles/additions/fonts.css
View File

@@ -1,8 +0,0 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=fallback') layer(base);
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap') layer(base);
@import url("https://cdn.jsdelivr.net/npm/lucide-static/font/lucide.css") layer(base);
@theme {
--font-inter: "Inter", var(--font-sans);
--font-scp: "Source Code Pro", var(--font-mono);
}

77
Moonlight.Client.Runtime/Styles/additions/forms.css
View File

@@ -1,77 +0,0 @@
/* Forms */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
-webkit-appearance: none;
}
.form-input,
.form-textarea,
.form-multiselect,
.form-select,
.form-checkbox,
.form-radio {
@apply bg-gray-700/60 border-2 focus:ring-0 focus:ring-offset-0 disabled:bg-gray-700/30 disabled:border-gray-700 disabled:hover:border-gray-700;
}
.form-checkbox {
@apply rounded;
}
.form-input,
.form-textarea,
.form-multiselect,
.form-select {
@apply text-sm text-gray-100 leading-5 py-2 px-3 border-gray-700 focus:border-primary shadow-sm rounded-lg;
}
.form-input,
.form-textarea {
@apply placeholder-gray-700;
}
.form-select {
@apply pr-10;
}
.form-checkbox,
.form-radio {
@apply text-primary checked:bg-primary checked:border-transparent border border-gray-700/60 focus:border-primary/50;
}
/* Switch element */
.form-switch {
@apply relative select-none;
width: 44px;
}
.form-switch label {
@apply block overflow-hidden cursor-pointer h-6 rounded-full;
}
.form-switch label > span:first-child {
@apply absolute block rounded-full;
width: 20px;
height: 20px;
top: 2px;
left: 2px;
right: 50%;
transition: all .15s ease-out;
}
.form-switch input[type="checkbox"]:checked + label {
@apply bg-primary;
}
.form-switch input[type="checkbox"]:checked + label > span:first-child {
left: 22px;
}
.form-switch input[type="checkbox"]:disabled + label {
@apply cursor-not-allowed bg-gray-700/20 border border-gray-700/60;
}
.form-switch input[type="checkbox"]:disabled + label > span:first-child {
@apply bg-gray-600;
}

28
Moonlight.Client.Runtime/Styles/additions/loaders.css
View File

@@ -1,28 +0,0 @@
.loader-spinner {
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
position: relative;
animation: loader-spinner-rotate 1s linear infinite
}
.loader-spinner::before {
content: "";
box-sizing: border-box;
position: absolute;
inset: 0px;
border-radius: 50%;
border: 3px solid #FFF;
animation: loader-spinner-prixClipFix 2s linear infinite ;
}
@keyframes loader-spinner-rotate {
100% {transform: rotate(360deg)}
}
@keyframes loader-spinner-prixClipFix {
0% {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
25% {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
50% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
75% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
}

25
Moonlight.Client.Runtime/Styles/additions/progress.css
View File

@@ -1,25 +0,0 @@
.progress {
@apply bg-gray-800 rounded-full overflow-hidden;
}
.progress-bar {
@apply bg-primary rounded-full h-3;
transition: width 0.6s ease;
}
.progress-bar.progress-intermediate {
animation: progress-animation 1s infinite linear;
transform-origin: 0 50%
}
@keyframes progress-animation {
0% {
transform: translateX(0) scaleX(0);
}
40% {
transform: translateX(0) scaleX(0.4);
}
100% {
transform: translateX(100%) scaleX(0.5);
}
}

9
Moonlight.Client.Runtime/Styles/additions/scrollbar.css
View File

@@ -1,9 +0,0 @@
* {
scrollbar-width: thin;
scrollbar-color: #64748b transparent;
}
.no-scrollbar {
scrollbar-width: none;
scrollbar-color: transparent transparent;
}

11
Moonlight.Client.Runtime/Styles/additions/tabs.css
View File

@@ -1,11 +0,0 @@
.tabs {
@apply flex gap-x-1 bg-gray-800 rounded-lg transition p-1;
}
.tabs .tabs-segment {
@apply cursor-pointer font-medium text-sm inline-flex items-center justify-center border border-transparent rounded-lg leading-5 text-gray-300 hover:text-primary py-1.5 px-3.5;
}
.tabs .tabs-segment-active {
@apply bg-primary hover:bg-primary/90 focus-visible:outline-primary text-diffcolor hover:text-diffcolor;
}

46
Moonlight.Client.Runtime/Styles/additions/theme.css
View File

@@ -1,46 +0,0 @@
@theme {
/* Color Variables */
--color-primary: oklch(.511 .262 276.966);
--color-secondary: rgb(31, 41, 55);
--color-tertiary: oklch(.627 .265 303.9);
--color-warning: oklch(.828 .189 84.429);
--color-danger: oklch(.586 .253 17.585);
--color-success: oklch(.627 .194 149.214);
--color-info: oklch(.546 .245 262.881);
/* Gray */
--color-gray-50: #e8eefc;
--color-gray-100: rgb(249 249 249);
--color-gray-200: rgb(241 241 242);
--color-gray-300: rgb(219 223 233);
--color-gray-400: rgb(181 181 195);
--color-gray-500: rgb(153 161 183);
--color-gray-600: rgb(112 121 147);
--color-gray-700: rgb(68 78 107);
--color-gray-750: rgb(41 50 73);
--color-gray-800: rgb(28 36 56);
--color-gray-900: rgb(17 23 33);
--color-gray-950: rgb(14 18 28);
/*
--color-gray-50: #e8eefc;
--color-gray-100: #ccd6ee;
--color-gray-200: #bec9e1;
--color-gray-300: #a3b2d5;
--color-gray-400: #7d91bb;
--color-gray-500: #5f719d;
--color-gray-600: #1a2640;
--color-gray-700: #101a2e;
--color-gray-750: #0f1729;
--color-gray-800: #0c1221;
--color-gray-900: #050a16;
--color-gray-950: #03060e;
*/
/* Full Colors */
--color-white: rgb(255 255 255);
--color-black: rgb(0 0 0);
--color-diffcolor: rgb(var(--color-white));
}

23
Moonlight.Client.Runtime/Styles/additions/theme.white.css
View File

@@ -1,23 +0,0 @@
@theme {
/* Gray (Inverted for White Mode) */
--color-gray-100: rgb(14 18 28); /* Formerly gray-950 */
--color-gray-200: rgb(17 23 33); /* Formerly gray-900 */
--color-gray-300: rgb(28 36 56); /* Formerly gray-800 */
--color-gray-400: rgb(41 50 73); /* Formerly gray-750 */
--color-gray-500: rgb(68 78 107); /* Formerly gray-700 */
--color-gray-600: rgb(112 121 147); /* Formerly gray-600 */
--color-gray-700: rgb(153 161 183); /* Formerly gray-500 */
--color-gray-750: rgb(181 181 195); /* Formerly gray-400 */
--color-gray-800: rgb(219 223 233); /* Formerly gray-300 */
--color-gray-900: rgb(241 241 242); /* Formerly gray-200 */
--color-gray-950: rgb(249 249 249); /* Formerly gray-100 */
/* Full Colors (Inverted) */
--color-white: rgb(0 0 0); /* Inverted to black */
--color-black: rgb(255 255 255); /* Inverted to white */
/* Special light mode stuff */
--color-diffcolor: rgb(255 255 255);
}

26
Moonlight.Client.Runtime/Styles/exports.css
View File

@@ -1,26 +0,0 @@
@import "./additions/fonts.css";
@import "./additions/theme.css" layer(theme);
/* @import "./additions/theme.white.css"; */
@import "./additions/buttons.css" layer(components);
@import "./additions/cards.css" layer(components);
@import "./additions/forms.css" layer(components);
@import "./additions/progress.css" layer(components);
@import "./additions/scrollbar.css" layer(components);
@import "./additions/loaders.css" layer(components);
@import "./additions/tabs.css" layer(components);
@source "./mappings/*.map";
#blazor-error-ui {
display: none;
}
#blazor-loader-label:after {
content: var(--blazor-load-percentage-text, "Loading");
}
#blazor-loader-progress {
width: var(--blazor-load-percentage, 0%);
}

30
Moonlight.Client.Runtime/Styles/extract-classes.js Normal file
View File

@@ -0,0 +1,30 @@
// extract-classes.js
const fs = require('fs');
module.exports = (opts = {}) => {
const classSet = new Set();
return {
postcssPlugin: 'extract-tailwind-classes',
Rule(rule) {
const selectorParser = require('postcss-selector-parser');
selectorParser(selectors => {
selectors.walkClasses(node => {
classSet.add(node.value);
});
}).processSync(rule.selector);
},
OnceExit() {
const classArray = Array.from(classSet).sort();
if (!fs.existsSync("./mappings")){
fs.mkdirSync("./mappings");
}
fs.writeFileSync('./mappings/mooncore.map', classArray.join('\n'));
console.log(`✅ Extracted ${classArray.length} Tailwind classes to tailwind-classes.txt`);
}
};
};
module.exports.postcss = true;

1093
Moonlight.Client.Runtime/Styles/mappings/mooncore.map Normal file → Executable file
View File

File diff suppressed because it is too large Load Diff

1317
Moonlight.Client.Runtime/Styles/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

29
Moonlight.Client.Runtime/Styles/package.json
View File

@@ -1,14 +1,23 @@
{
"dependencies": {
"@tailwindcss/cli": "^4.1.4",
"@tailwindcss/forms": "^0.5.10",
"tailwindcss": "^4.1.4",
"xml2js": "^0.6.2"
},
"name": "styles",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"pretailwind-build": "node resolveNuget.js ../Moonlight.Client.Runtime.csproj",
"tailwind-build": "npx tailwindcss -i style.css -o ../wwwroot/css/style.min.css",
"pretailwind": "node resolveNuget.js ../Moonlight.Client.Runtime.csproj",
"tailwind": "npx tailwindcss -i style.css -o ../wwwroot/css/style.min.css --watch"
"tailwind": "npx postcss styles.css -o ../wwwroot/css/style.min.css --watch",
"tailwind-build": "npx postcss styles.css -o ../wwwroot/css/style.min.css",
"mappings": "EXTRACT_CLASSES=true npx postcss styles.css -o ../wwwroot/css/style.min.css "
},
"author": "",
"license": "ISC",
"dependencies": {
"@tailwindcss/postcss": "^4.1.11",
"flyonui": "^2.2.0",
"tailwindcss": "^4.1.11",
"postcss": "^8.5.6",
"postcss-cli": "^11.0.1",
"postcss-selector-parser": "^7.1.0"
},
"devDependencies": {
}
}

11
Moonlight.Client.Runtime/Styles/postcss.config.js Normal file
View File

@@ -0,0 +1,11 @@
const tailwindcss = require('@tailwindcss/postcss');
const extractClasses = require('./extract-classes');
module.exports = {
plugins: [
tailwindcss
],
};
if(process.env.EXTRACT_CLASSES === "true")
module.exports.plugins.push(extractClasses);

1
Moonlight.Client.Runtime/Styles/preTailwind.css
View File

@@ -1 +0,0 @@
@import "./additions/fonts.css";

80
Moonlight.Client.Runtime/Styles/resolveNuget.js
View File

@@ -1,80 +0,0 @@
const fs = require('fs');
const path = require('path');
const os = require('os');
const xml2js = require('xml2js');
// Helpers
function getPackageRefs(csprojPath) {
const xml = fs.readFileSync(csprojPath, 'utf8');
const parser = new xml2js.Parser();
return new Promise((resolve, reject) => {
parser.parseString(xml, (err, result) => {
if (err) return reject(err);
const itemGroups = result.Project.ItemGroup || [];
const refs = [];
for (const group of itemGroups) {
const packages = group.PackageReference || [];
for (const pkg of packages) {
const name = pkg.$.Include;
const version = pkg.$.Version || (pkg.Version && pkg.Version[0]);
if (name && version) {
refs.push({ name: name.toLowerCase(), version });
}
}
}
resolve(refs);
});
});
}
async function main() {
const csprojPath = process.argv[2];
if (!csprojPath || !fs.existsSync(csprojPath)) {
console.error('Usage: Missing csproj path');
process.exit(1);
}
const nugetPath = path.join(os.homedir(), '.nuget', 'packages');
const moonlightDir = path.join(__dirname, 'node_modules', 'moonlight');
fs.mkdirSync(moonlightDir, { recursive: true });
const refs = await getPackageRefs(csprojPath);
var outputCss = "";
var preOutputCss = "";
for (const { name, version } of refs) {
const packagePath = path.join(nugetPath, name, version);
const exportsFile = path.join(packagePath, 'styles', 'exports.css');
const preTailwindFile = path.join(packagePath, 'styles', 'preTailwind.css');
const sourceFolder = path.join(packagePath, 'src');
const rel = (p) => p.replace(/\\/g, '/');
if (fs.existsSync(exportsFile)) {
outputCss += `@import "${rel(exportsFile)}";\n`;
}
if (fs.existsSync(preTailwindFile)) {
preOutputCss += `@import "${rel(preTailwindFile)}";\n`;
}
if (fs.existsSync(sourceFolder)) {
outputCss += `@source "${rel(path.join(sourceFolder, "**", "*.razor"))}";\n`;
outputCss += `@source "${rel(path.join(sourceFolder, "**", "*.cs"))}";\n`;
outputCss += `@source "${rel(path.join(sourceFolder, "**", "*.html"))}";\n`;
}
}
fs.writeFileSync(path.join(moonlightDir, 'nuget.css'), outputCss);
fs.writeFileSync(path.join(moonlightDir, 'preTailwind.nuget.css'), preOutputCss);
console.log(`Generated nuget.css in ${moonlightDir}`);
}
main().catch(err => {
console.error(err);
process.exit(1);
});

21
Moonlight.Client.Runtime/Styles/style.css
View File

@@ -1,21 +0,0 @@
@import "./preTailwind.css";
@import "moonlight/preTailwind.nuget.css";
@import "tailwindcss";
@import "./exports.css";
@import "moonlight/nuget.css";
@plugin "@tailwindcss/forms" {
strategy: "base";
}
@source "../**/*.razor";
@source "../**/*.cs";
@source "../**/*.html";
@source "../../Moonlight.Client/**/*.razor";
@source "../../Moonlight.Client/**/*.cs";
@source "../../Moonlight.Client/**/*.html";
@source "./mappings/*.map";

112
Moonlight.Client.Runtime/Styles/styles.css Normal file
View File

@@ -0,0 +1,112 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=fallback') layer(base);
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap') layer()base;
@import url("https://cdn.jsdelivr.net/npm/lucide-static/font/lucide.css") layer(base);
@import "tailwindcss";
@import "./node_modules/flyonui/variants.css";
@import "./theme.css";
@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;
}
@source "./node_modules/flyonui/dist/index.js";
@source "../**/*.razor";
@source "../**/*.cs";
@source "../**/*.html";
@source "../../Moonlight.Client/**/*.cs";
@source "../../Moonlight.Client/**/*.html";
@source "../../Moonlight.Client/**/*.razor";
@source "../../Moonlight.Client/Styles/mappings/*.map";
@source "../../Moonlight.ApiServer/**/*.razor";
#blazor-error-ui {
display: none;
}
#blazor-loader-label:after {
content: var(--blazor-load-percentage-text, "Loading");
}
#blazor-loader-progress {
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;
}
.table {
:where(th, td) {
@apply py-1.5;
}
}
.dropdown-item {
@apply px-2.5 py-1.5 text-sm;
}
.dropdown-menu {
@apply bg-base-150;
}
}

33
Moonlight.Client.Runtime/Styles/theme.css Normal file
View File

@@ -0,0 +1,33 @@
@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(.627 .265 303.9);
--mooncore-color-accent-content: #dde5f5;
--mooncore-color-neutral: #dde5f5;
--mooncore-color-neutral-content: oklch(14% 0.005 285.823);
--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;
}