Switched to new tailwind building
This commit is contained in:
@@ -1,9 +0,0 @@
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: 0 0
|
||||
}
|
||||
|
||||
to {
|
||||
background-position: -200% 0
|
||||
}
|
||||
}
|
||||
@@ -1,145 +0,0 @@
|
||||
/* Buttons */
|
||||
|
||||
.btn,
|
||||
.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;
|
||||
}
|
||||
|
||||
.btn {
|
||||
@apply px-3 py-2;
|
||||
}
|
||||
|
||||
.btn-lg {
|
||||
@apply px-4 py-3;
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
@apply px-2 py-1;
|
||||
}
|
||||
|
||||
.btn-xs {
|
||||
@apply px-2 py-0.5;
|
||||
}
|
||||
|
||||
/* Colors */
|
||||
|
||||
.btn-primary {
|
||||
@apply bg-primary-600 hover:bg-primary-500 focus-visible:outline-primary-600 text-diffcolor;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
@apply bg-secondary-800 hover:bg-secondary-700 focus-visible:outline-secondary-800 text-diffcolor;
|
||||
}
|
||||
|
||||
.btn-tertiary {
|
||||
@apply bg-tertiary-600 hover:bg-tertiary-500 focus-visible:outline-tertiary-600 text-diffcolor;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
@apply bg-danger-600 hover:bg-danger-500 focus-visible:outline-danger-600 text-diffcolor;
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
@apply bg-warning-500 hover:bg-warning-400 focus-visible:outline-warning-500 text-diffcolor;
|
||||
}
|
||||
|
||||
.btn-info {
|
||||
@apply bg-info-600 hover:bg-info-500 focus-visible:outline-info-600 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;
|
||||
}
|
||||
|
||||
/* 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-600 text-gray-300;
|
||||
}
|
||||
|
||||
.btn-secondary:disabled {
|
||||
@apply bg-secondary-800 text-gray-400;
|
||||
}
|
||||
|
||||
.btn-tertiary:disabled {
|
||||
@apply bg-tertiary-600 text-gray-300;
|
||||
}
|
||||
|
||||
.btn-danger:disabled {
|
||||
@apply bg-danger-600 text-gray-300;
|
||||
}
|
||||
|
||||
.btn-warning:disabled {
|
||||
@apply bg-warning-500 text-gray-400;
|
||||
}
|
||||
|
||||
.btn-info:disabled {
|
||||
@apply bg-info-600 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;
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
.card {
|
||||
@apply flex flex-col bg-gray-800 shadow-sm rounded-xl;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
@apply px-5 py-4 border-b border-gray-700/60 flex items-center;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
@apply font-semibold text-gray-100;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
@apply px-5 py-5;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
@apply pt-3 pb-3 border-t border-gray-700/60 mt-auto;
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Space+Mono,wght@0,200..900;1,200..900&display=swap');
|
||||
@@ -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-500 shadow-sm rounded-lg;
|
||||
}
|
||||
|
||||
.form-input,
|
||||
.form-textarea {
|
||||
@apply placeholder-gray-700;
|
||||
}
|
||||
|
||||
.form-select {
|
||||
@apply pr-10;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
/* 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-600;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
.loader {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border: 3px solid #FFF;
|
||||
border-bottom-color: transparent;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
animation: loader-rotation 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes loader-rotation {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
.progress {
|
||||
@apply bg-gray-800 rounded-full overflow-hidden;
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
@apply bg-primary-500 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);
|
||||
}
|
||||
}
|
||||
@@ -1,9 +0,0 @@
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #64748b transparent;
|
||||
}
|
||||
|
||||
.no-scrollbar {
|
||||
scrollbar-width: none;
|
||||
scrollbar-color: transparent transparent;
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
npx tailwindcss -i style.css -o ../wwwroot/css/MoonlightServers.min.css --watch
|
||||
@@ -1,2 +0,0 @@
|
||||
#! /bin/bash
|
||||
npx tailwindcss -i style.css -o ../wwwroot/css/MoonlightServers.min.css --watch
|
||||
1898
MoonlightServers.Frontend/Styles/package-lock.json
generated
1898
MoonlightServers.Frontend/Styles/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -1,8 +1,12 @@
|
||||
{
|
||||
"devDependencies": {
|
||||
"tailwindcss": "^3.4.11"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tailwindcss/forms": "^0.5.9"
|
||||
"@tailwindcss/cli": "^4.1.4",
|
||||
"@tailwindcss/forms": "^0.5.10",
|
||||
"tailwindcss": "^4.1.4",
|
||||
"xml2js": "^0.6.2"
|
||||
},
|
||||
"scripts": {
|
||||
"tailwind": "npx tailwindcss -i style.css -o ../wwwroot/css/style.min.css --watch",
|
||||
"pretailwind": "node resolveNuget.js ../MoonlightServers.Frontend.csproj"
|
||||
}
|
||||
}
|
||||
|
||||
80
MoonlightServers.Frontend/Styles/resolveNuget.js
Normal file
80
MoonlightServers.Frontend/Styles/resolveNuget.js
Normal file
@@ -0,0 +1,80 @@
|
||||
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);
|
||||
});
|
||||
@@ -1,12 +1,11 @@
|
||||
@import "tailwindcss/base";
|
||||
@import "tailwindcss/components";
|
||||
@import "moonlight/preTailwind.nuget.css";
|
||||
|
||||
@import "additions/animations.css";
|
||||
@import "additions/buttons.css";
|
||||
@import "additions/cards.css";
|
||||
@import "additions/fonts.css";
|
||||
@import "additions/progress.css";
|
||||
@import "additions/scrollbar.css";
|
||||
@import "additions/loaders.css";
|
||||
@import "tailwindcss";
|
||||
|
||||
@import "tailwindcss/utilities";
|
||||
@import "moonlight/nuget.css";
|
||||
|
||||
@plugin "@tailwindcss/forms";
|
||||
|
||||
@source "../**/*.razor";
|
||||
@source "../**/*.cs";
|
||||
@source "../**/*.html";
|
||||
@@ -1,131 +0,0 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
corePlugins: {
|
||||
preflight: false,
|
||||
},
|
||||
content: [
|
||||
'../**/*.razor',
|
||||
'mappings/*.map'
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
inter: ['Inter', 'sans-serif'],
|
||||
scp: ['Source Code Pro', 'mono'],
|
||||
},
|
||||
colors: {
|
||||
primary: {
|
||||
50: '#eef2ff',
|
||||
100: '#e0e7ff',
|
||||
200: '#c7d2fe',
|
||||
300: '#a5b4fc',
|
||||
400: '#818cf8',
|
||||
500: '#6366f1',
|
||||
600: '#4f46e5',
|
||||
700: '#4338ca',
|
||||
800: '#3730a3',
|
||||
900: '#312e81',
|
||||
950: '#1e1b4b'
|
||||
},
|
||||
secondary: {
|
||||
100: '#F9F9F9',
|
||||
200: '#F1F1F2',
|
||||
300: '#DBDFE9',
|
||||
400: '#B5B5C3',
|
||||
500: '#99A1B7',
|
||||
600: '#707993',
|
||||
700: '#444e6b',
|
||||
750: '#293249',
|
||||
800: '#1c2438',
|
||||
900: '#111721',
|
||||
950: '#0e121c',
|
||||
},
|
||||
tertiary: {
|
||||
50: '#f5f3ff',
|
||||
100: '#ede9fe',
|
||||
200: '#ddd6fe',
|
||||
300: '#c4b5fd',
|
||||
400: '#a78bfa',
|
||||
500: '#8b5cf6',
|
||||
600: '#7c3aed',
|
||||
700: '#6d28d9',
|
||||
800: '#5b21b6',
|
||||
900: '#4c1d95',
|
||||
950: '#2e1065'
|
||||
},
|
||||
warning: {
|
||||
50: '#fefce8',
|
||||
100: '#fef9c3',
|
||||
200: '#fef08a',
|
||||
300: '#fde047',
|
||||
400: '#facc15',
|
||||
500: '#eab308',
|
||||
600: '#ca8a04',
|
||||
700: '#a16207',
|
||||
800: '#854d0e',
|
||||
900: '#713f12',
|
||||
950: '#422006'
|
||||
},
|
||||
danger: {
|
||||
50: '#fef2f2',
|
||||
100: '#fee2e2',
|
||||
200: '#fecaca',
|
||||
300: '#fca5a5',
|
||||
400: '#f87171',
|
||||
500: '#ef4444',
|
||||
600: '#dc2626',
|
||||
700: '#b91c1c',
|
||||
800: '#991b1b',
|
||||
900: '#7f1d1d',
|
||||
950: '#450a0a'
|
||||
},
|
||||
success: {
|
||||
50: '#f0fdf4',
|
||||
100: '#dcfce7',
|
||||
200: '#bbf7d0',
|
||||
300: '#86efac',
|
||||
400: '#4ade80',
|
||||
500: '#22c55e',
|
||||
600: '#16a34a',
|
||||
700: '#15803d',
|
||||
800: '#166534',
|
||||
900: '#14532d',
|
||||
950: '#052e16'
|
||||
},
|
||||
info: {
|
||||
50: '#eff6ff',
|
||||
100: '#dbeafe',
|
||||
200: '#bfdbfe',
|
||||
300: '#93c5fd',
|
||||
400: '#60a5fa',
|
||||
500: '#3b82f6',
|
||||
600: '#2563eb',
|
||||
700: '#1d4ed8',
|
||||
800: '#1e40af',
|
||||
900: '#1e3a8a',
|
||||
950: '#172554'
|
||||
},
|
||||
gray: {
|
||||
100: '#F9F9F9',
|
||||
200: '#F1F1F2',
|
||||
300: '#DBDFE9',
|
||||
400: '#B5B5C3',
|
||||
500: '#99A1B7',
|
||||
600: '#707993',
|
||||
700: '#444e6b',
|
||||
750: '#293249',
|
||||
800: '#1c2438',
|
||||
900: '#111721',
|
||||
950: '#0e121c',
|
||||
}
|
||||
},
|
||||
textColor:{
|
||||
diffcolor: 'rgb(var(--color-diffcolor, var(--color-light)))'
|
||||
},
|
||||
animation: {
|
||||
'shimmer': 'shimmer 2s linear infinite',
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user