Abhyudit22
feat: complete midnight glassmorphism UI upgrade, thermal POS receipt printing, command palette, and rate limiting
1ce73ea | @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap'); | |
| :root { | |
| /* Midnight Dark Glassmorphism Theme Palette (Permanent) */ | |
| --bg-app: #0b0f19; | |
| --bg-card: rgba(20, 28, 46, 0.85); | |
| --bg-card-hover: rgba(30, 41, 66, 0.92); | |
| --bg-input: rgba(30, 41, 59, 0.95); | |
| /* Glassmorphism Tokens */ | |
| --glass-bg: rgba(20, 28, 46, 0.8); | |
| --glass-bg-hover: rgba(30, 41, 66, 0.9); | |
| --glass-border: 1px solid rgba(255, 255, 255, 0.12); | |
| --glass-border-subtle: 1px solid rgba(255, 255, 255, 0.08); | |
| --glass-blur: blur(16px) saturate(180%); | |
| --glass-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.4); | |
| /* Brand Accents */ | |
| --accent-primary: #10b981; | |
| --accent-primary-hover: #059669; | |
| --accent-mint: #34d399; | |
| --accent-mint-light: rgba(16, 185, 129, 0.15); | |
| --accent-secondary: #14b8a6; | |
| --accent-cyan: #38bdf8; | |
| --accent-success: #10b981; | |
| --accent-danger: #f43f5e; | |
| --accent-danger-light: rgba(244, 63, 94, 0.15); | |
| --accent-warning: #f59e0b; | |
| --accent-purple: #a855f7; | |
| /* Gradients */ | |
| --gradient-primary: linear-gradient(135deg, #10b981 0%, #059669 100%); | |
| --gradient-btn: linear-gradient(135deg, #10b981 0%, #047857 100%); | |
| --gradient-header: linear-gradient(135deg, #34d399 0%, #10b981 100%); | |
| --gradient-hero: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); | |
| --gradient-glow: radial-gradient(circle at 50% 0%, rgba(16, 185, 129, 0.18), transparent 70%); | |
| /* Typography Colors */ | |
| --text-main: #f8fafc; | |
| --text-muted: #94a3b8; | |
| --text-light: #cbd5e1; | |
| --text-dark: #f8fafc; | |
| /* Borders & Shadows */ | |
| --border-light: #1e293b; | |
| --border-glow: 1px solid rgba(255, 255, 255, 0.12); | |
| --border-solid: #334155; | |
| --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); | |
| --shadow-md: 0 12px 40px rgba(0, 0, 0, 0.4); | |
| --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5); | |
| --shadow-glow: 0 0 24px rgba(16, 185, 129, 0.25); | |
| --radius-sm: 10px; | |
| --radius-md: 16px; | |
| --radius-lg: 24px; | |
| } | |
| *, *::before, *::after { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| html, body { | |
| width: 100%; | |
| min-height: 100vh; | |
| background-color: var(--bg-app); | |
| background-image: | |
| radial-gradient(at 0% 0%, rgba(16, 185, 129, 0.08) 0px, transparent 50%), | |
| radial-gradient(at 100% 100%, rgba(15, 90, 71, 0.06) 0px, transparent 50%), | |
| radial-gradient(at 50% 50%, rgba(13, 148, 136, 0.04) 0px, transparent 50%); | |
| background-attachment: fixed; | |
| color: var(--text-main); | |
| font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| line-height: 1.5; | |
| transition: background-color 0.3s ease, color 0.3s ease; | |
| } | |
| /* Custom Sleek Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 7px; | |
| height: 7px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: var(--bg-app); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #cbd5e1; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: var(--accent-primary); | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| line-height: 1.25; | |
| font-weight: 700; | |
| color: var(--text-main); | |
| } | |
| a { | |
| color: var(--accent-primary); | |
| text-decoration: none; | |
| transition: all 0.2s ease; | |
| } | |
| a:hover { | |
| color: var(--accent-mint); | |
| } | |
| /* Global Utility Classes */ | |
| .text-cyan { color: var(--accent-secondary) ; } | |
| .text-indigo { color: var(--accent-primary) ; } | |
| .text-violet { color: var(--accent-purple) ; } | |
| .text-green { color: var(--accent-success) ; } | |
| .text-red { color: var(--accent-danger) ; } | |
| .text-amber { color: var(--accent-warning) ; } | |
| .text-muted { color: var(--text-muted) ; } | |
| .gradient-text-header { | |
| color: var(--accent-primary); | |
| font-weight: 800; | |
| } | |
| .glass-panel, .glass-card { | |
| background: var(--glass-bg); | |
| backdrop-filter: var(--glass-blur); | |
| -webkit-backdrop-filter: var(--glass-blur); | |
| border: var(--glass-border); | |
| border-radius: var(--radius-md); | |
| box-shadow: var(--glass-shadow); | |
| } | |
| .glass-card-hover { | |
| transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; | |
| } | |
| .glass-card-hover:hover { | |
| transform: translateY(-2px); | |
| background: var(--glass-bg-hover); | |
| box-shadow: 0 12px 40px 0 rgba(15, 23, 42, 0.12); | |
| } | |
| .animate-fade-in { | |
| animation: fadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(8px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* POS Thermal Printer Styles (58mm / 80mm Layout) */ | |
| @media print { | |
| body * { | |
| visibility: hidden; | |
| } | |
| .printable-thermal-receipt, .printable-thermal-receipt * { | |
| visibility: visible; | |
| } | |
| .printable-thermal-receipt { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| width: 80mm; | |
| padding: 10px; | |
| font-family: 'Courier New', Courier, monospace; | |
| font-size: 12px; | |
| line-height: 1.3; | |
| color: #000000 ; | |
| background: #ffffff ; | |
| } | |
| @page { | |
| size: 80mm auto; | |
| margin: 0; | |
| } | |
| } |