OpenClaw Bot
cda092e3a6
- Dark OLED theme with emerald/cyan accent gradients - Framer Motion animations (stagger, hover, fade effects) - shadcn/ui components: Cards, Badges, Progress, Dialog, Input - Responsive grid layout with glass-morphism cards - Animated status indicators with pulse effects - Sparkline uptime visualizations - Grid/List view toggle - Stats overview cards with color-coded borders - Tooltips on all interactive elements - Modern Plus Jakarta Sans typography - Production-ready with accessibility features
110 lines
3.0 KiB
CSS
110 lines
3.0 KiB
CSS
/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
|
|
!*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[13].oneOf[10].use[3]!./src/app/globals.css ***!
|
|
\*****************************************************************************************************************************************************************************************************************************************************************/
|
|
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');
|
|
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
:root {
|
|
--background: 222 47% 6%;
|
|
--foreground: 210 40% 98%;
|
|
--card: 222 47% 8%;
|
|
--card-foreground: 210 40% 98%;
|
|
--popover: 222 47% 8%;
|
|
--popover-foreground: 210 40% 98%;
|
|
--primary: 142 71% 45%;
|
|
--primary-foreground: 222 47% 6%;
|
|
--secondary: 217 33% 17%;
|
|
--secondary-foreground: 210 40% 98%;
|
|
--muted: 217 33% 17%;
|
|
--muted-foreground: 215 20% 65%;
|
|
--accent: 142 71% 45%;
|
|
--accent-foreground: 222 47% 6%;
|
|
--destructive: 0 84% 60%;
|
|
--destructive-foreground: 210 40% 98%;
|
|
--border: 217 33% 17%;
|
|
--input: 217 33% 17%;
|
|
--ring: 142 71% 45%;
|
|
--radius: 0.75rem;
|
|
--chart-1: 142 71% 45%;
|
|
--chart-2: 217 91% 60%;
|
|
--chart-3: 27 96% 61%;
|
|
--chart-4: 0 84% 60%;
|
|
--chart-5: 280 65% 60%;
|
|
}
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground font-sans antialiased;
|
|
font-feature-settings: "rlig" 1, "calt" 1;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.text-gradient {
|
|
@apply bg-clip-text text-transparent bg-gradient-to-r from-emerald-400 to-cyan-400;
|
|
}
|
|
|
|
.glass {
|
|
@apply bg-white/5 backdrop-blur-xl border border-white/10;
|
|
}
|
|
|
|
.glass-card {
|
|
@apply bg-slate-900/50 backdrop-blur-xl border border-slate-800/50 shadow-2xl;
|
|
}
|
|
|
|
.status-glow-up {
|
|
box-shadow: 0 0 20px rgba(34, 197, 94, 0.4), 0 0 40px rgba(34, 197, 94, 0.2);
|
|
}
|
|
|
|
.status-glow-down {
|
|
box-shadow: 0 0 20px rgba(239, 68, 68, 0.4), 0 0 40px rgba(239, 68, 68, 0.2);
|
|
}
|
|
|
|
.hover-lift {
|
|
@apply transition-all duration-300 ease-out;
|
|
}
|
|
|
|
.hover-lift:hover {
|
|
@apply -translate-y-1 shadow-2xl;
|
|
}
|
|
}
|
|
|
|
/* Custom scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: hsl(var(--background));
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: hsl(var(--border));
|
|
border-radius: 4px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: hsl(var(--muted-foreground));
|
|
}
|
|
|
|
/* Smooth scrolling */
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* Selection color */
|
|
::selection {
|
|
background: rgba(34, 197, 94, 0.3);
|
|
color: hsl(var(--foreground));
|
|
}
|
|
|