mirror of
https://github.com/Egonex-AI/Understand-Anything.git
synced 2026-06-22 10:58:03 +08:00
Berkcan Gümüşışık
b0cb17793a
Introduce keyboard shortcuts to the dashboard and add contributor docs. Adds a reusable useKeyboardShortcuts hook (with formatShortcutKey), a KeyboardShortcutsHelp modal component, and integrates shortcuts into App.tsx (registering keys like ?, Escape, /, ArrowLeft/Right, l, d and wiring store actions). Adds related styles (.glass-heavy, .kbd) to index.css. Also adds a comprehensive CONTRIBUTING.md with setup, workflow, testing, and PR guidelines.
183 lines
4.1 KiB
CSS
183 lines
4.1 KiB
CSS
@import "tailwindcss";
|
|
|
|
@theme {
|
|
/* Dark luxury color palette */
|
|
--color-root: #0a0a0a;
|
|
--color-surface: #111111;
|
|
--color-elevated: #1a1a1a;
|
|
--color-panel: #141414;
|
|
|
|
/* Gold accent spectrum */
|
|
--color-gold: #d4a574;
|
|
--color-gold-dim: #c9a96e;
|
|
--color-gold-bright: #e8c49a;
|
|
|
|
/* Text hierarchy */
|
|
--color-text-primary: #f5f0eb;
|
|
--color-text-secondary: #a39787;
|
|
--color-text-muted: #6b5f53;
|
|
|
|
/* Border tokens */
|
|
--color-border-subtle: rgba(212, 165, 116, 0.12);
|
|
--color-border-medium: rgba(212, 165, 116, 0.25);
|
|
|
|
/* Node type colors (muted, refined) */
|
|
--color-node-file: #4a7c9b;
|
|
--color-node-function: #5a9e6f;
|
|
--color-node-class: #8b6fb0;
|
|
--color-node-module: #c9a06c;
|
|
--color-node-concept: #b07a8a;
|
|
|
|
/* Diff overlay colors */
|
|
--color-diff-changed: #e05252;
|
|
--color-diff-affected: #d4a030;
|
|
--color-diff-changed-dim: rgba(224, 82, 82, 0.25);
|
|
--color-diff-affected-dim: rgba(212, 160, 48, 0.25);
|
|
|
|
/* Fonts */
|
|
--font-serif: 'DM Serif Display', Georgia, serif;
|
|
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
|
|
--font-sans: 'Inter', system-ui, sans-serif;
|
|
}
|
|
|
|
/* Base styles */
|
|
body {
|
|
font-family: var(--font-sans);
|
|
background-color: var(--color-root);
|
|
color: var(--color-text-primary);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* Subtle noise texture overlay */
|
|
.noise-overlay::before {
|
|
content: '';
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0.03;
|
|
pointer-events: none;
|
|
z-index: 9999;
|
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
/* Glass utility */
|
|
.glass {
|
|
background: rgba(20, 20, 20, 0.8);
|
|
border: 1px solid rgba(212, 165, 116, 0.1);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
}
|
|
|
|
.glass-heavy {
|
|
background: rgba(20, 20, 20, 0.95);
|
|
border: 1px solid rgba(212, 165, 116, 0.15);
|
|
backdrop-filter: blur(16px);
|
|
-webkit-backdrop-filter: blur(16px);
|
|
}
|
|
|
|
/* Keyboard shortcut key styling */
|
|
.kbd {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 1.75rem;
|
|
height: 1.75rem;
|
|
padding: 0 0.5rem;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
color: var(--color-gold);
|
|
background: rgba(212, 165, 116, 0.1);
|
|
border: 1px solid rgba(212, 165, 116, 0.3);
|
|
border-radius: 0.25rem;
|
|
box-shadow: 0 1px 0 rgba(212, 165, 116, 0.2);
|
|
}
|
|
|
|
/* Animation keyframes */
|
|
@keyframes fadeSlideIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(8px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from {
|
|
transform: translateY(100%);
|
|
}
|
|
to {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes goldPulse {
|
|
0%, 100% {
|
|
box-shadow: 0 0 0 0 rgba(212, 165, 116, 0.4);
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 20px 4px rgba(212, 165, 116, 0.15);
|
|
}
|
|
}
|
|
|
|
/* Animation utilities */
|
|
.animate-fade-slide-in {
|
|
animation: fadeSlideIn 0.3s ease-out forwards;
|
|
}
|
|
|
|
.animate-slide-up {
|
|
animation: slideUp 0.3s ease-out forwards;
|
|
}
|
|
|
|
.animate-gold-pulse {
|
|
animation: goldPulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
/* Node selection glow */
|
|
.node-glow {
|
|
box-shadow: 0 0 20px rgba(212, 165, 116, 0.15);
|
|
}
|
|
|
|
/* Diff overlay glow effects */
|
|
.diff-changed-glow {
|
|
box-shadow: 0 0 16px rgba(224, 82, 82, 0.25);
|
|
}
|
|
|
|
.diff-affected-glow {
|
|
box-shadow: 0 0 12px rgba(212, 160, 48, 0.2);
|
|
}
|
|
|
|
/* Diff fade for unrelated nodes */
|
|
.diff-faded {
|
|
opacity: 0.25;
|
|
filter: saturate(0.3);
|
|
transition: opacity 0.3s ease, filter 0.3s ease;
|
|
}
|
|
|
|
/* Custom scrollbar for dark luxury theme */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgba(212, 165, 116, 0.2);
|
|
border-radius: 3px;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(212, 165, 116, 0.35);
|
|
}
|
|
|
|
/* Override React Flow dark theme */
|
|
.react-flow__background {
|
|
background-color: var(--color-root) !important;
|
|
}
|