@questpie/admin 0.0.1 → 1.0.0

package/dist/client/styles/index.css

@@ -0,0 +1,434 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+@import "@fontsource-variable/dm-sans";
+@import "@fontsource-variable/jetbrains-mono";
+
+/* =============================================================================
+   Admin Theme
+   ============================================================================= */
+
+:root {
+	/* Core Colors - Light Mode */
+	--background: oklch(1 0 0);
+	--foreground: oklch(0.2686 0 89.88);
+	--card: oklch(0.9842 0.0034 247.86);
+	--card-foreground: oklch(0.2686 0 89.88);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.2686 0 89.88);
+	--primary: oklch(0.5984 0.3015 310.74);
+	--primary-foreground: oklch(0.98 0 0);
+	--secondary: oklch(0.9702 0 0);
+	--secondary-foreground: oklch(0.4386 0 89.88);
+	--muted: oklch(0.9702 0 0);
+	--muted-foreground: oklch(0.5555 0 0);
+	--accent: oklch(0.97 0 0);
+	--accent-foreground: oklch(0.2686 0 89.88);
+	--destructive: oklch(0.58 0.22 27);
+	--border: oklch(0.9219 0 89.88);
+	--input: oklch(0.9219 0 89.88);
+	--ring: oklch(0.5984 0.3015 310.74);
+
+	/* Chart Colors - Varied palette with brand cohesion */
+	--chart-1: oklch(0.65 0.28 310); /* Primary magenta */
+	--chart-2: oklch(0.65 0.2 250); /* Blue-violet */
+	--chart-3: oklch(0.7 0.18 180); /* Teal/cyan */
+	--chart-4: oklch(0.72 0.16 145); /* Emerald */
+	--chart-5: oklch(0.68 0.2 30); /* Warm coral */
+
+	/* Radius */
+	--radius: 0px;
+
+	/* Sidebar */
+	--sidebar: oklch(0.9842 0.0034 247.86);
+	--sidebar-foreground: oklch(0.2686 0 89.88);
+	--sidebar-primary: oklch(0.5984 0.3015 310.74);
+	--sidebar-primary-foreground: oklch(0.98 0 0);
+	--sidebar-accent: oklch(0.9702 0 0);
+	--sidebar-accent-foreground: oklch(0.2686 0 89.88);
+	--sidebar-border: oklch(0.9219 0 89.88);
+	--sidebar-ring: oklch(0.5984 0.3015 310.74);
+
+	/* Glass/Grid Vars */
+	--glass-blur: 16px;
+	--glass-blur-strong: 24px;
+	--glass-bg: oklch(1 0 0 / 0.6);
+	--glass-bg-subtle: oklch(1 0 0 / 0.4);
+	--glass-border: oklch(0 0 0 / 0.06);
+	--grid-line: oklch(0 0 0 / 0.015);
+	--grid-size: 24px;
+	--glow-primary: oklch(0.5984 0.3015 310.74 / 0.35);
+	--ambient-primary: oklch(0.5984 0.3015 310.74 / 0.18);
+	--ambient-secondary: oklch(0.5984 0.3015 310.74 / 0.08);
+
+	/* Spacing Scale */
+	--spacing-section: 1.5rem;
+	--spacing-card: 1.25rem;
+	--spacing-input: 0.75rem;
+
+	/* Typography */
+	--font-sans: "DM Sans Variable", ui-sans-serif, system-ui, sans-serif;
+	--font-mono: "JetBrains Mono Variable", ui-monospace, monospace;
+}
+
+/* Dark Mode */
+.dark {
+	--background: oklch(0.1448 0 89.88);
+	--foreground: oklch(0.8699 0 89.88);
+	--card: oklch(0.2178 0 89.88);
+	--card-foreground: oklch(0.8699 0 89.88);
+	--popover: oklch(0.2178 0 89.88);
+	--popover-foreground: oklch(0.8699 0 89.88);
+	--primary: oklch(0.5984 0.3015 310.74);
+	--primary-foreground: oklch(0.98 0 0);
+	--secondary: oklch(0.1776 0 89.88);
+	--secondary-foreground: oklch(0.8699 0 89.88);
+	--muted: oklch(0.2178 0 89.88);
+	--muted-foreground: oklch(0.5555 0 89.88);
+	--accent: oklch(0.1776 0 89.88);
+	--accent-foreground: oklch(0.8699 0 89.88);
+	--destructive: oklch(0.704 0.191 22.216);
+	--border: oklch(0.3211 0 89.88);
+	--input: oklch(0.3211 0 89.88);
+	--ring: oklch(0.5984 0.3015 310.74);
+
+	/* Chart Colors - Varied palette (dark mode optimized) */
+	--chart-1: oklch(0.72 0.24 310); /* Primary magenta - brighter */
+	--chart-2: oklch(0.7 0.18 250); /* Blue-violet */
+	--chart-3: oklch(0.75 0.16 180); /* Teal/cyan */
+	--chart-4: oklch(0.76 0.15 145); /* Emerald */
+	--chart-5: oklch(0.73 0.18 30); /* Warm coral */
+
+	--sidebar: oklch(0.1776 0 89.88);
+	--sidebar-foreground: oklch(0.8699 0 89.88);
+	--sidebar-primary: oklch(0.5984 0.3015 310.74);
+	--sidebar-primary-foreground: oklch(0.98 0 0);
+	--sidebar-accent: oklch(0.2178 0 89.88);
+	--sidebar-accent-foreground: oklch(0.8699 0 89.88);
+	--sidebar-border: oklch(0.3211 0 89.88);
+	--sidebar-ring: oklch(0.5984 0.3015 310.74);
+
+	--grid-line: oklch(1 0 0 / 0.015);
+	--glass-bg: oklch(0.15 0 0 / 0.7);
+	--glass-bg-subtle: oklch(0.15 0 0 / 0.5);
+	--glass-border: oklch(1 0 0 / 0.08);
+	--glow-primary: oklch(0.5984 0.3015 310.74 / 0.45);
+	--ambient-primary: oklch(0.5984 0.3015 310.74 / 0.24);
+	--ambient-secondary: oklch(0.5984 0.3015 310.74 / 0.12);
+}
+
+@theme inline {
+	--color-sidebar-ring: var(--sidebar-ring);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar: var(--sidebar);
+	--color-chart-5: var(--chart-5);
+	--color-chart-4: var(--chart-4);
+	--color-chart-3: var(--chart-3);
+	--color-chart-2: var(--chart-2);
+	--color-chart-1: var(--chart-1);
+	--color-ring: var(--ring);
+	--color-input: var(--input);
+	--color-border: var(--border);
+	--color-destructive: var(--destructive);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-accent: var(--accent);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-muted: var(--muted);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-secondary: var(--secondary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-primary: var(--primary);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-popover: var(--popover);
+	--color-card-foreground: var(--card-foreground);
+	--color-card: var(--card);
+	--color-foreground: var(--foreground);
+	--color-background: var(--background);
+	--radius-sm: 0px;
+	--radius-md: 0px;
+	--radius-lg: 0px;
+	--radius-xl: 0px;
+	--radius-2xl: 0px;
+	--radius-3xl: 0px;
+	--radius-4xl: 0px;
+	--radius-full: 0px;
+}
+
+/* =============================================================================
+   Rich Text Editor Styles
+   ============================================================================= */
+
+.qp-rich-text-editor__content {
+	min-height: 200px;
+	padding: 0.75rem;
+	outline: none;
+}
+
+.qp-rich-text-editor__content > *:first-child {
+	margin-top: 0;
+}
+
+.qp-rich-text-editor__content > *:last-child {
+	margin-bottom: 0;
+}
+
+.qp-rich-text-editor__content p {
+	margin: 0 0 0.75rem;
+}
+
+.qp-rich-text-editor__content h1 {
+	font-size: 1.5rem;
+	font-weight: 600;
+	margin: 1rem 0 0.75rem;
+}
+
+.qp-rich-text-editor__content h2 {
+	font-size: 1.25rem;
+	font-weight: 600;
+	margin: 1rem 0 0.75rem;
+}
+
+.qp-rich-text-editor__content h3 {
+	font-size: 1.125rem;
+	font-weight: 600;
+	margin: 1rem 0 0.75rem;
+}
+
+.qp-rich-text-editor__content ul,
+.qp-rich-text-editor__content ol {
+	padding-left: 1.5rem;
+	margin: 0.75rem 0;
+}
+
+.qp-rich-text-editor__content blockquote {
+	border-left: 2px solid var(--border);
+	padding-left: 0.75rem;
+	color: var(--muted-foreground);
+	margin: 0.75rem 0;
+}
+
+.qp-rich-text-editor__content code {
+	background: var(--muted);
+	padding: 0.1rem 0.25rem;
+	font-size: 0.875em;
+	font-family: var(--font-mono);
+}
+
+.qp-rich-text-editor__content pre {
+	background: var(--muted);
+	padding: 0.75rem;
+	overflow-x: auto;
+	font-family: var(--font-mono);
+}
+
+.qp-rich-text-editor__content hr {
+	border: none;
+	border-top: 1px solid var(--border);
+	margin: 1rem 0;
+}
+
+.qp-rich-text-editor__content table {
+	border-collapse: collapse;
+	margin: 1rem 0;
+	width: 100%;
+}
+
+.qp-rich-text-editor__content th,
+.qp-rich-text-editor__content td {
+	border: 1px solid var(--border);
+	padding: 0.5rem;
+	text-align: left;
+}
+
+.tippy-box[data-theme~="qp-rich-text-editor"] {
+	background: var(--popover);
+	color: var(--popover-foreground);
+	border: 1px solid var(--border);
+	box-shadow: 0 0 20px oklch(0 0 0 / 40%);
+}
+
+.qp-rich-text-editor__slash {
+	display: flex;
+	flex-direction: column;
+	gap: 0.25rem;
+	padding: 0.5rem;
+	min-width: 220px;
+}
+
+.qp-rich-text-editor__slash-item {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 0.125rem;
+	padding: 0.5rem;
+	font-size: 0.75rem;
+	line-height: 1.2;
+	color: var(--foreground);
+}
+
+.qp-rich-text-editor__slash-item--active,
+.qp-rich-text-editor__slash-item:hover {
+	background: var(--muted);
+}
+
+.qp-rich-text-editor__slash-title {
+	font-weight: 600;
+}
+
+.qp-rich-text-editor__slash-description {
+	color: var(--muted-foreground);
+}
+
+.qp-rich-text-editor__slash-empty {
+	padding: 0.5rem;
+	font-size: 0.75rem;
+	color: var(--muted-foreground);
+}
+
+/* =============================================================================
+   QUESTPIE Atmospheric Utilities
+   ============================================================================= */
+
+@utility bg-grid-quest {
+	background-image:
+		linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
+		linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
+	background-size: var(--grid-size, 24px) var(--grid-size, 24px);
+}
+
+/* Glow utilities - cyber aesthetic shadows */
+@utility glow-sm {
+	box-shadow: 0 0 10px oklch(0.55 0.3 300 / 15%);
+}
+
+@utility glow-md {
+	box-shadow: 0 0 15px oklch(0.55 0.3 300 / 20%);
+}
+
+@utility glow-lg {
+	box-shadow: 0 0 25px oklch(0.55 0.3 300 / 25%);
+}
+
+@utility glow-primary {
+	box-shadow: 0 0 20px var(--glow-primary, oklch(0.55 0.3 300 / 30%));
+}
+
+@utility glow-primary-sm {
+	box-shadow: 0 0 8px var(--glow-primary, oklch(0.55 0.3 300 / 25%));
+}
+
+@utility glow-destructive {
+	box-shadow: 0 0 20px oklch(0.65 0.22 27 / 30%);
+}
+
+/* Hover glow states */
+@utility hover-glow-sm {
+	&:hover {
+		box-shadow: 0 0 10px oklch(0.55 0.3 300 / 15%);
+	}
+}
+
+@utility hover-glow-md {
+	&:hover {
+		box-shadow: 0 0 15px oklch(0.55 0.3 300 / 20%);
+	}
+}
+
+@utility ambient-beam {
+	background: radial-gradient(
+		circle,
+		var(--ambient-primary, oklch(0.55 0.3 300 / 15%)) 0%,
+		transparent 70%
+	);
+	filter: blur(100px);
+}
+
+/* Glass Panel - for cards, sidebars, dialogs */
+@utility glass-panel {
+	background: var(--glass-bg);
+	backdrop-filter: blur(var(--glass-blur-strong));
+	border: 1px solid var(--glass-border);
+}
+
+/* Glass Panel Subtle - for inputs, accordions */
+@utility glass-subtle {
+	background: var(--glass-bg-subtle);
+	backdrop-filter: blur(var(--glass-blur));
+	border: 1px solid var(--glass-border);
+}
+
+/* Glass Surface - lighter glass for hover states */
+@utility glass-surface {
+	background: var(--glass-bg-subtle);
+	backdrop-filter: blur(var(--glass-blur));
+}
+
+/* =============================================================================
+   Base Styles
+   ============================================================================= */
+
+@layer base {
+	* {
+		@apply border-border outline-ring/50;
+	}
+	body {
+		@apply bg-background text-foreground;
+		font-family: var(--font-sans);
+	}
+}
+
+/* =============================================================================
+   Custom Scrollbar Styles
+   ============================================================================= */
+
+/* Thin scrollbar utility */
+@utility scrollbar-thin {
+	scrollbar-width: thin;
+	scrollbar-color: color-mix(in oklch, var(--border) 50%, transparent)
+		transparent;
+
+	&::-webkit-scrollbar {
+		width: 6px;
+		height: 6px;
+	}
+
+	&::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background: color-mix(in oklch, var(--border) 60%, transparent);
+		border-radius: 3px;
+	}
+
+	&::-webkit-scrollbar-thumb:hover {
+		background: var(--border);
+	}
+
+	&::-webkit-scrollbar-corner {
+		background: transparent;
+	}
+}
+
+/* =============================================================================
+   Field Focus Animation
+   ============================================================================= */
+
+@keyframes field-glow {
+	0%,
+	100% {
+		background-color: transparent;
+	}
+	50% {
+		background-color: hsl(var(--primary) / 0.08);
+	}
+}
+
+.animate-field-glow {
+	animation: field-glow 2s ease-in-out;
+}