Separating runtime from application code to improve building. Upgraded mooncore packages. Started switching to flyonui. Added PluginFramework plugin loading via mooncore

Moonlight.Client.Runtime/Styles/additions/animations.css

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

Moonlight.Client.Runtime/Styles/additions/buttons.css

@@ -0,0 +1,93 @@
+/* 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;
+}

Moonlight.Client.Runtime/Styles/additions/cards.css

@@ -0,0 +1,23 @@
+.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;
+}

Moonlight.Client.Runtime/Styles/additions/fonts.css

@@ -0,0 +1,8 @@
+@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);
+}

Moonlight.Client.Runtime/Styles/additions/forms.css

@@ -0,0 +1,77 @@
+/* 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;
+}

Moonlight.Client.Runtime/Styles/additions/loaders.css

@@ -0,0 +1,28 @@
+.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)}
+}

Moonlight.Client.Runtime/Styles/additions/progress.css

@@ -0,0 +1,25 @@
+.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);
+    }
+}

Moonlight.Client.Runtime/Styles/additions/scrollbar.css

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

Moonlight.Client.Runtime/Styles/additions/tabs.css

@@ -0,0 +1,11 @@
+.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;
+}

Moonlight.Client.Runtime/Styles/additions/theme.css

@@ -0,0 +1,46 @@
+@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));
+}

Moonlight.Client.Runtime/Styles/additions/theme.white.css

@@ -0,0 +1,23 @@
+@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);
+}