c649f055d8
- Added main application entry point (app.jsx) and bootstrap file for React setup. - Created Wiki index page (Index.jsx) for documentation and file management. - Implemented utility functions for formatting and status handling in utils.js. - Set up Blade template (app.blade.php) for Inertia.js integration. - Defined API routes for metrics and terminal access in api.php. - Established console commands for scheduled tasks in console.php. - Created web routes for various application features including authentication, hypervisors, containers, cloud accounts, security, backups, and wiki management in web.php. - Developed setup scripts for Windows (setup.ps1) and Linux (setup.sh) environments. - Configured Tailwind CSS for styling with custom themes and animations in tailwind.config.js. - Set up Vite for asset bundling and development server in vite.config.js.
113 lines
3.5 KiB
CSS
113 lines
3.5 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
--background: 222.2 84% 4.9%;
|
|
--foreground: 210 40% 98%;
|
|
--card: 222.2 84% 4.9%;
|
|
--card-foreground: 210 40% 98%;
|
|
--popover: 222.2 84% 4.9%;
|
|
--popover-foreground: 210 40% 98%;
|
|
--primary: 184 100% 50%;
|
|
--primary-foreground: 222.2 47.4% 11.2%;
|
|
--secondary: 217.2 32.6% 17.5%;
|
|
--secondary-foreground: 210 40% 98%;
|
|
--muted: 217.2 32.6% 17.5%;
|
|
--muted-foreground: 215 20.2% 65.1%;
|
|
--accent: 217.2 32.6% 17.5%;
|
|
--accent-foreground: 210 40% 98%;
|
|
--destructive: 0 62.8% 30.6%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
--border: 217.2 32.6% 17.5%;
|
|
--input: 217.2 32.6% 17.5%;
|
|
--ring: 184 100% 50%;
|
|
--radius: 0.5rem;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
font-feature-settings: "rlig" 1, "calt" 1;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
/* Aceternity-style glassmorphism card */
|
|
.glass-card {
|
|
@apply relative overflow-hidden rounded-xl border border-white/10 bg-white/5 backdrop-blur-xl;
|
|
}
|
|
|
|
/* Gradient border effect */
|
|
.gradient-border {
|
|
@apply relative;
|
|
background: linear-gradient(var(--background), var(--background)) padding-box,
|
|
linear-gradient(135deg, #00d4ff, #9d4edd, #00ff88) border-box;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
/* Status badge variants */
|
|
.status-online { @apply bg-green-500/20 text-green-400 border border-green-500/30; }
|
|
.status-offline { @apply bg-red-500/20 text-red-400 border border-red-500/30; }
|
|
.status-warning { @apply bg-yellow-500/20 text-yellow-400 border border-yellow-500/30; }
|
|
.status-unknown { @apply bg-gray-500/20 text-gray-400 border border-gray-500/30; }
|
|
.status-running { @apply bg-cyan-500/20 text-cyan-400 border border-cyan-500/30; }
|
|
.status-stopped { @apply bg-slate-500/20 text-slate-400 border border-slate-500/30; }
|
|
|
|
/* Neon glow effects */
|
|
.glow-cyan { box-shadow: 0 0 20px rgba(0, 212, 255, 0.3); }
|
|
.glow-green { box-shadow: 0 0 20px rgba(0, 255, 136, 0.3); }
|
|
.glow-purple { box-shadow: 0 0 20px rgba(157, 78, 221, 0.3); }
|
|
|
|
/* Custom scrollbar */
|
|
.custom-scroll::-webkit-scrollbar {
|
|
@apply w-1.5;
|
|
}
|
|
.custom-scroll::-webkit-scrollbar-track {
|
|
@apply bg-transparent;
|
|
}
|
|
.custom-scroll::-webkit-scrollbar-thumb {
|
|
@apply rounded-full bg-white/10;
|
|
}
|
|
.custom-scroll::-webkit-scrollbar-thumb:hover {
|
|
@apply bg-white/20;
|
|
}
|
|
|
|
/* Terminal style */
|
|
.terminal {
|
|
@apply font-mono text-sm bg-black/60 text-green-400 p-4 rounded-lg;
|
|
}
|
|
}
|
|
|
|
/* Grid background pattern */
|
|
.bg-grid-pattern {
|
|
background-image:
|
|
linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
|
|
background-size: 50px 50px;
|
|
}
|
|
|
|
/* Aurora background */
|
|
.aurora-bg {
|
|
background: linear-gradient(
|
|
125deg,
|
|
rgba(0, 212, 255, 0.05) 0%,
|
|
rgba(157, 78, 221, 0.05) 33%,
|
|
rgba(0, 255, 136, 0.05) 66%,
|
|
rgba(0, 212, 255, 0.05) 100%
|
|
);
|
|
background-size: 400% 400%;
|
|
animation: aurora 15s ease infinite;
|
|
}
|
|
|
|
@keyframes aurora {
|
|
0% { background-position: 0% 50%; }
|
|
50% { background-position: 100% 50%; }
|
|
100% { background-position: 0% 50%; }
|
|
}
|