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

Upgraded to latest mooncore packages. Upgraded to tailwind v4

Browse Source
This commit is contained in:
ChiaraBm
2025-05-02 13:06:09 +02:00
parent 6657bae0cd
commit bbc6c0fbd3
28 changed files with 1386 additions and 1963 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
Moonlight.Client/Styles/additions/buttons.css
View File

@@ -4,7 +4,7 @@
.btn-lg,
.btn-sm,
.btn-xs {
@apply font-medium text-sm inline-flex items-center justify-center border border-transparent rounded-lg leading-5 shadow-sm transition;
@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 {
@@ -16,7 +16,7 @@
}
.btn-sm {
@apply px-2 py-1;
@apply px-2.5 py-1.5;
}
.btn-xs {
@@ -26,57 +26,31 @@
/* Colors */
.btn-primary {
@apply bg-primary-600 hover:bg-primary-500 focus-visible:outline-primary-600 text-diffcolor;
@apply bg-primary hover:bg-primary/90 focus-visible:outline-primary text-diffcolor;
}
.btn-secondary {
@apply bg-secondary-800 hover:bg-secondary-700 focus-visible:outline-secondary-800 text-diffcolor;
@apply bg-secondary hover:bg-secondary/90 focus-visible:outline-secondary text-diffcolor;
}
.btn-tertiary {
@apply bg-tertiary-600 hover:bg-tertiary-500 focus-visible:outline-tertiary-600 text-diffcolor;
@apply bg-tertiary hover:bg-tertiary/90 focus-visible:outline-tertiary text-diffcolor;
}
.btn-danger {
@apply bg-danger-600 hover:bg-danger-500 focus-visible:outline-danger-600 text-diffcolor;
@apply bg-danger hover:bg-danger/90 focus-visible:outline-danger text-diffcolor;
}
.btn-warning {
@apply bg-warning-500 hover:bg-warning-400 focus-visible:outline-warning-500 text-diffcolor;
@apply bg-warning hover:bg-warning/90 focus-visible:outline-warning text-diffcolor;
}
.btn-info {
@apply bg-info-600 hover:bg-info-500 focus-visible:outline-info-600 text-diffcolor;
@apply bg-info hover:bg-info/90 focus-visible:outline-info text-diffcolor;
}
.btn-success {
@apply bg-success-600 hover:bg-success-500 focus-visible:outline-success-600 text-diffcolor;
}
/* Outline */
.btn-outline-primary {
@apply bg-gray-800 hover:border-gray-600 text-primary-500;
}
.btn-outline-tertiary {
@apply bg-gray-800 hover:border-gray-600 text-tertiary-500;
}
.btn-outline-danger {
@apply bg-gray-800 hover:border-gray-600 text-danger-500;
}
.btn-outline-warning {
@apply bg-gray-800 hover:border-gray-600 text-warning-400;
}
.btn-outline-info {
@apply bg-gray-800 hover:border-gray-600 text-info-500;
}
.btn-outline-success {
@apply bg-gray-800 hover:border-gray-600 text-success-500;
@apply bg-success hover:bg-success/90 focus-visible:outline-success text-diffcolor;
}
/* Disabled Buttons */
@@ -91,55 +65,29 @@
/* Colors for Disabled States */
.btn-primary:disabled {
@apply bg-primary-600 text-gray-300;
@apply bg-primary/80 text-gray-300;
}
.btn-secondary:disabled {
@apply bg-secondary-800 text-gray-400;
@apply bg-secondary/80 text-gray-400;
}
.btn-tertiary:disabled {
@apply bg-tertiary-600 text-gray-300;
@apply bg-tertiary/80 text-gray-300;
}
.btn-danger:disabled {
@apply bg-danger-600 text-gray-300;
@apply bg-danger/80 text-gray-300;
}
.btn-warning:disabled {
@apply bg-warning-500 text-gray-400;
@apply bg-warning/80 text-gray-400;
}
.btn-info:disabled {
@apply bg-info-600 text-gray-300;
@apply bg-info/80 text-gray-300;
}
.btn-success:disabled {
@apply bg-success-600 text-gray-300;
}
/* Outline Disabled States */
.btn-outline-primary:disabled {
@apply bg-gray-800 border-gray-700 text-gray-500;
}
.btn-outline-tertiary:disabled {
@apply bg-gray-800 border-gray-700 text-gray-500;
}
.btn-outline-danger:disabled {
@apply bg-gray-800 border-gray-700 text-gray-500;
}
.btn-outline-warning:disabled {
@apply bg-gray-800 border-gray-700 text-gray-500;
}
.btn-outline-info:disabled {
@apply bg-gray-800 border-gray-700 text-gray-500;
}
.btn-outline-success:disabled {
@apply bg-gray-800 border-gray-700 text-gray-500;
@apply bg-success/80 text-gray-300;
}

12
Moonlight.Client/Styles/additions/cards.css
View File

@@ -3,17 +3,21 @@
}
.card-header {
@apply px-5 py-4 border-b border-gray-700/60 flex items-center;
@apply p-5;
}
.card-header:has(+ .card-body) {
@apply pb-0;
}
.card-title {
@apply font-semibold text-gray-100;
@apply text-2xl font-semibold text-white;
}
.card-body {
@apply px-5 py-5 text-gray-300;
@apply p-5 text-gray-200;
}
.card-footer {
@apply pt-3 pb-3 border-t border-gray-700/60 mt-auto;
@apply p-5;
}

11
Moonlight.Client/Styles/additions/fonts.css
View File

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

6
Moonlight.Client/Styles/additions/forms.css
View File

@@ -23,7 +23,7 @@ input[type="search"]::-webkit-search-results-decoration {
.form-textarea,
.form-multiselect,
.form-select {
@apply text-sm text-gray-100 leading-5 py-2 px-3 border-gray-700 focus:border-primary-500 shadow-sm rounded-lg;
@apply text-sm text-gray-100 leading-5 py-2 px-3 border-gray-700 focus:border-primary shadow-sm rounded-lg;
}
.form-input,
@@ -37,7 +37,7 @@ input[type="search"]::-webkit-search-results-decoration {
.form-checkbox,
.form-radio {
@apply text-primary-500 checked:bg-primary-500 checked:border-transparent border border-gray-700/60 focus:border-primary-500/50;
@apply text-primary checked:bg-primary checked:border-transparent border border-gray-700/60 focus:border-primary/50;
}
/* Switch element */
@@ -61,7 +61,7 @@ input[type="search"]::-webkit-search-results-decoration {
}
.form-switch input[type="checkbox"]:checked + label {
@apply bg-primary-600;
@apply bg-primary;
}
.form-switch input[type="checkbox"]:checked + label > span:first-child {

2
Moonlight.Client/Styles/additions/progress.css
View File

@@ -3,7 +3,7 @@
}
.progress-bar {
@apply bg-primary-500 rounded-full h-3;
@apply bg-primary rounded-full h-3;
transition: width 0.6s ease;
}

11
Moonlight.Client/Styles/additions/tabs.css Normal file
View File

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

164
Moonlight.Client/Styles/additions/theme.css
View File

@@ -1,122 +1,46 @@
@layer base {
:root {
/* Color Variables */
/* Primary */
--color-primary-50: 238 242 255;
--color-primary-100: 224 231 255;
--color-primary-200: 199 210 254;
--color-primary-300: 165 180 252;
--color-primary-400: 129 140 248;
--color-primary-500: 99 102 241;
--color-primary-600: 79 70 229;
--color-primary-700: 67 56 202;
--color-primary-800: 55 48 163;
--color-primary-900: 49 46 129;
--color-primary-950: 30 27 75;
/* Secondary */
--color-secondary-100: 249 249 249;
--color-secondary-200: 241 241 242;
--color-secondary-300: 219 223 233;
--color-secondary-400: 181 181 195;
--color-secondary-500: 153 161 183;
--color-secondary-600: 112 121 147;
--color-secondary-700: 68 78 107;
--color-secondary-800: 28 36 56;
--color-secondary-900: 17 23 33;
--color-secondary-950: 14 18 28;
/* Tertiary */
--color-tertiary-50: 245 243 255;
--color-tertiary-100: 237 233 254;
--color-tertiary-200: 221 214 254;
--color-tertiary-300: 196 181 253;
--color-tertiary-400: 167 139 250;
--color-tertiary-500: 139 92 246;
--color-tertiary-600: 124 58 237;
--color-tertiary-700: 109 40 217;
--color-tertiary-800: 91 33 182;
--color-tertiary-900: 76 29 149;
--color-tertiary-950: 46 16 101;
/* Warning */
--color-warning-50: 254 252 232;
--color-warning-100: 254 249 195;
--color-warning-200: 254 240 138;
--color-warning-300: 253 224 71;
--color-warning-400: 250 204 21;
--color-warning-500: 234 179 8;
--color-warning-600: 202 138 4;
--color-warning-700: 161 98 7;
--color-warning-800: 133 77 14;
--color-warning-900: 113 63 18;
--color-warning-950: 66 32 6;
/* Danger */
--color-danger-50: 254 242 242;
--color-danger-100: 254 226 226;
--color-danger-200: 254 202 202;
--color-danger-300: 252 165 165;
--color-danger-400: 248 113 113;
--color-danger-500: 239 68 68;
--color-danger-600: 220 38 38;
--color-danger-700: 185 28 28;
--color-danger-800: 153 27 27;
--color-danger-900: 127 29 29;
--color-danger-950: 69 10 10;
/* Success */
--color-success-50: 240 253 244;
--color-success-100: 220 252 231;
--color-success-200: 187 247 208;
--color-success-300: 134 239 172;
--color-success-400: 74 222 128;
--color-success-500: 34 197 94;
--color-success-600: 22 163 74;
--color-success-700: 21 128 61;
--color-success-800: 22 101 52;
--color-success-900: 20 83 45;
--color-success-950: 5 46 22;
/* Info */
--color-info-50: 239 246 255;
--color-info-100: 219 234 254;
--color-info-200: 191 219 254;
--color-info-300: 147 197 253;
--color-info-400: 96 165 250;
--color-info-500: 59 130 246;
--color-info-600: 37 99 235;
--color-info-700: 29 78 216;
--color-info-800: 30 64 175;
--color-info-900: 30 58 138;
--color-info-950: 23 37 84;
/* Gray */
--color-gray-100: 249 249 249;
--color-gray-200: 241 241 242;
--color-gray-300: 219 223 233;
--color-gray-400: 181 181 195;
--color-gray-500: 153 161 183;
--color-gray-600: 112 121 147;
--color-gray-700: 68 78 107;
--color-gray-750: 41 50 73;
--color-gray-800: 28 36 56;
--color-gray-900: 17 23 33;
--color-gray-950: 14 18 28;
@theme {
/* Color Variables */
/* Full Colors */
--color-light: 255 255 255;
--color-dark: 0 0 0;
}
--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/Styles/additions/theme.white.css Normal file
View File

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