| |
| |
| |
| |
| |
|
|
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap'); |
|
|
| |
| |
| |
| :root { |
| |
| --primary: #6366f1; |
| --primary-light: #818cf8; |
| --primary-dark: #4f46e5; |
| --secondary: #06b6d4; |
| --accent: #f59e0b; |
| --success: #10b981; |
| --warning: #f97316; |
| --danger: #ef4444; |
| |
| |
| --bg-primary: #0f0f1a; |
| --bg-secondary: #1a1a2e; |
| --bg-tertiary: #252542; |
| --bg-card: #16162a; |
| --bg-hover: #1e1e3a; |
| |
| |
| --text-primary: #f8fafc; |
| --text-secondary: #94a3b8; |
| --text-muted: #64748b; |
| --text-accent: #818cf8; |
| |
| |
| --border-color: #2d2d4a; |
| --border-light: #3d3d5c; |
| |
| |
| --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); |
| --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.2); |
| --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3); |
| --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.3); |
| --shadow-glow-strong: 0 0 40px rgba(99, 102, 241, 0.5); |
| |
| |
| --radius-sm: 6px; |
| --radius-md: 10px; |
| --radius-lg: 16px; |
| --radius-xl: 24px; |
| |
| |
| --transition-fast: 0.15s ease; |
| --transition-base: 0.25s ease; |
| --transition-slow: 0.4s ease; |
| |
| |
| --space-xs: 0.25rem; |
| --space-sm: 0.5rem; |
| --space-md: 1rem; |
| --space-lg: 1.5rem; |
| --space-xl: 2rem; |
| --space-2xl: 3rem; |
| --space-3xl: 4rem; |
| |
| |
| --sidebar-width: 280px; |
| --navbar-height: 64px; |
| } |
|
|
| |
| |
| |
| *, *::before, *::after { |
| box-sizing: border-box; |
| margin: 0; |
| padding: 0; |
| } |
|
|
| html { |
| scroll-behavior: smooth; |
| font-size: 16px; |
| } |
|
|
| body { |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; |
| background: var(--bg-primary); |
| color: var(--text-primary); |
| line-height: 1.6; |
| min-height: 100vh; |
| overflow-x: hidden; |
| } |
|
|
| |
| |
| |
| @keyframes fadeIn { |
| from { opacity: 0; } |
| to { opacity: 1; } |
| } |
|
|
| @keyframes fadeInUp { |
| from { |
| opacity: 0; |
| transform: translateY(30px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
|
|
| @keyframes fadeInDown { |
| from { |
| opacity: 0; |
| transform: translateY(-20px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
|
|
| @keyframes fadeInLeft { |
| from { |
| opacity: 0; |
| transform: translateX(-30px); |
| } |
| to { |
| opacity: 1; |
| transform: translateX(0); |
| } |
| } |
|
|
| @keyframes fadeInRight { |
| from { |
| opacity: 0; |
| transform: translateX(30px); |
| } |
| to { |
| opacity: 1; |
| transform: translateX(0); |
| } |
| } |
|
|
| @keyframes scaleIn { |
| from { |
| opacity: 0; |
| transform: scale(0.9); |
| } |
| to { |
| opacity: 1; |
| transform: scale(1); |
| } |
| } |
|
|
| @keyframes slideInUp { |
| from { |
| transform: translateY(100%); |
| } |
| to { |
| transform: translateY(0); |
| } |
| } |
|
|
| @keyframes pulse { |
| 0%, 100% { |
| opacity: 1; |
| transform: scale(1); |
| } |
| 50% { |
| opacity: 0.7; |
| transform: scale(1.05); |
| } |
| } |
|
|
| @keyframes glow { |
| 0%, 100% { |
| box-shadow: 0 0 5px var(--primary), 0 0 10px var(--primary), 0 0 15px var(--primary); |
| } |
| 50% { |
| box-shadow: 0 0 10px var(--primary), 0 0 20px var(--primary), 0 0 30px var(--primary); |
| } |
| } |
|
|
| @keyframes shimmer { |
| 0% { background-position: -200% 0; } |
| 100% { background-position: 200% 0; } |
| } |
|
|
| @keyframes float { |
| 0%, 100% { transform: translateY(0); } |
| 50% { transform: translateY(-10px); } |
| } |
|
|
| @keyframes rotate { |
| from { transform: rotate(0deg); } |
| to { transform: rotate(360deg); } |
| } |
|
|
| @keyframes bounce { |
| 0%, 100% { transform: translateY(0); } |
| 50% { transform: translateY(-5px); } |
| } |
|
|
| @keyframes typing { |
| from { width: 0; } |
| to { width: 100%; } |
| } |
|
|
| @keyframes blink { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0; } |
| } |
|
|
| @keyframes gradientShift { |
| 0% { background-position: 0% 50%; } |
| 50% { background-position: 100% 50%; } |
| 100% { background-position: 0% 50%; } |
| } |
|
|
| @keyframes particle { |
| 0% { |
| transform: translateY(100vh) rotate(0deg); |
| opacity: 0; |
| } |
| 10% { opacity: 1; } |
| 90% { opacity: 1; } |
| 100% { |
| transform: translateY(-100vh) rotate(720deg); |
| opacity: 0; |
| } |
| } |
|
|
| @keyframes wave { |
| 0%, 100% { transform: translateY(0); } |
| 25% { transform: translateY(-5px); } |
| 75% { transform: translateY(5px); } |
| } |
|
|
| @keyframes progress { |
| from { width: 0; } |
| to { width: var(--progress, 100%); } |
| } |
|
|
| |
| |
| |
| .animate-fade-in { animation: fadeIn 0.6s ease forwards; } |
| .animate-fade-in-up { animation: fadeInUp 0.6s ease forwards; } |
| .animate-fade-in-down { animation: fadeInDown 0.5s ease forwards; } |
| .animate-fade-in-left { animation: fadeInLeft 0.5s ease forwards; } |
| .animate-fade-in-right { animation: fadeInRight 0.5s ease forwards; } |
| .animate-scale-in { animation: scaleIn 0.5s ease forwards; } |
| .animate-float { animation: float 3s ease-in-out infinite; } |
| .animate-pulse { animation: pulse 2s ease-in-out infinite; } |
| .animate-glow { animation: glow 2s ease-in-out infinite; } |
| .animate-bounce { animation: bounce 1s ease-in-out infinite; } |
| .animate-rotate { animation: rotate 2s linear infinite; } |
|
|
| |
| .delay-100 { animation-delay: 0.1s; } |
| .delay-200 { animation-delay: 0.2s; } |
| .delay-300 { animation-delay: 0.3s; } |
| .delay-400 { animation-delay: 0.4s; } |
| .delay-500 { animation-delay: 0.5s; } |
| .delay-600 { animation-delay: 0.6s; } |
| .delay-700 { animation-delay: 0.7s; } |
| .delay-800 { animation-delay: 0.8s; } |
|
|
| |
| .scroll-animate { |
| opacity: 0; |
| transform: translateY(30px); |
| transition: opacity 0.6s ease, transform 0.6s ease; |
| } |
|
|
| .scroll-animate.visible { |
| opacity: 1; |
| transform: translateY(0); |
| } |
|
|
| |
| |
| |
| .navbar { |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| height: var(--navbar-height); |
| background: rgba(15, 15, 26, 0.85); |
| backdrop-filter: blur(20px); |
| border-bottom: 1px solid var(--border-color); |
| z-index: 1000; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 0 var(--space-xl); |
| animation: fadeInDown 0.5s ease; |
| } |
|
|
| .navbar-brand { |
| display: flex; |
| align-items: center; |
| gap: var(--space-sm); |
| text-decoration: none; |
| color: var(--text-primary); |
| font-weight: 700; |
| font-size: 1.1rem; |
| transition: var(--transition-base); |
| } |
|
|
| .navbar-brand:hover { |
| color: var(--primary-light); |
| } |
|
|
| .brand-logo { |
| width: 36px; |
| height: 36px; |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); |
| border-radius: var(--radius-md); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 1.2rem; |
| animation: float 3s ease-in-out infinite; |
| } |
|
|
| .navbar-nav { |
| display: flex; |
| align-items: center; |
| gap: var(--space-xs); |
| } |
|
|
| .nav-link { |
| display: flex; |
| align-items: center; |
| gap: var(--space-sm); |
| padding: var(--space-sm) var(--space-md); |
| color: var(--text-secondary); |
| text-decoration: none; |
| font-size: 0.9rem; |
| font-weight: 500; |
| border-radius: var(--radius-md); |
| transition: all var(--transition-base); |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .nav-link::before { |
| content: ''; |
| position: absolute; |
| bottom: 0; |
| left: 50%; |
| width: 0; |
| height: 2px; |
| background: linear-gradient(90deg, var(--primary), var(--secondary)); |
| transition: all var(--transition-base); |
| transform: translateX(-50%); |
| } |
|
|
| .nav-link:hover { |
| color: var(--text-primary); |
| background: var(--bg-hover); |
| } |
|
|
| .nav-link:hover::before { |
| width: 60%; |
| } |
|
|
| .nav-link.active { |
| color: var(--primary-light); |
| background: rgba(99, 102, 241, 0.1); |
| } |
|
|
| .nav-link.active::before { |
| width: 60%; |
| } |
|
|
| .nav-badge { |
| display: flex; |
| align-items: center; |
| gap: var(--space-sm); |
| padding: var(--space-xs) var(--space-md); |
| background: rgba(16, 185, 129, 0.1); |
| border: 1px solid rgba(16, 185, 129, 0.3); |
| border-radius: 20px; |
| font-size: 0.75rem; |
| font-weight: 600; |
| color: var(--success); |
| font-family: 'JetBrains Mono', monospace; |
| } |
|
|
| .nav-badge .dot { |
| width: 6px; |
| height: 6px; |
| background: var(--success); |
| border-radius: 50%; |
| animation: pulse 2s ease-in-out infinite; |
| } |
|
|
| |
| |
| |
| .btn { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| gap: var(--space-sm); |
| padding: var(--space-sm) var(--space-lg); |
| font-family: 'Inter', sans-serif; |
| font-size: 0.9rem; |
| font-weight: 600; |
| text-decoration: none; |
| border: none; |
| border-radius: var(--radius-md); |
| cursor: pointer; |
| transition: all var(--transition-base); |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .btn::before { |
| content: ''; |
| position: absolute; |
| top: 50%; |
| left: 50%; |
| width: 0; |
| height: 0; |
| background: rgba(255, 255, 255, 0.1); |
| border-radius: 50%; |
| transform: translate(-50%, -50%); |
| transition: width 0.4s ease, height 0.4s ease; |
| } |
|
|
| .btn:hover::before { |
| width: 200%; |
| height: 200%; |
| } |
|
|
| .btn-primary { |
| background: linear-gradient(135deg, var(--primary), var(--primary-dark)); |
| color: white; |
| box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4); |
| } |
|
|
| .btn-primary:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 6px 25px rgba(99, 102, 241, 0.5); |
| } |
|
|
| .btn-secondary { |
| background: var(--bg-tertiary); |
| color: var(--text-primary); |
| border: 1px solid var(--border-color); |
| } |
|
|
| .btn-secondary:hover { |
| background: var(--bg-hover); |
| border-color: var(--border-light); |
| transform: translateY(-2px); |
| } |
|
|
| .btn-outline { |
| background: transparent; |
| color: var(--primary-light); |
| border: 1px solid var(--primary); |
| } |
|
|
| .btn-outline:hover { |
| background: rgba(99, 102, 241, 0.1); |
| transform: translateY(-2px); |
| } |
|
|
| .btn-success { |
| background: linear-gradient(135deg, var(--success), #059669); |
| color: white; |
| box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4); |
| } |
|
|
| .btn-success:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 6px 25px rgba(16, 185, 129, 0.5); |
| } |
|
|
| .btn-lg { |
| padding: var(--space-md) var(--space-xl); |
| font-size: 1rem; |
| } |
|
|
| .btn-sm { |
| padding: var(--space-xs) var(--space-md); |
| font-size: 0.8rem; |
| } |
|
|
| |
| |
| |
| .badge { |
| display: inline-flex; |
| align-items: center; |
| gap: var(--space-xs); |
| padding: var(--space-xs) var(--space-sm); |
| font-size: 0.7rem; |
| font-weight: 600; |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| border-radius: var(--radius-sm); |
| font-family: 'JetBrains Mono', monospace; |
| } |
|
|
| .badge-primary { |
| background: rgba(99, 102, 241, 0.15); |
| color: var(--primary-light); |
| border: 1px solid rgba(99, 102, 241, 0.3); |
| } |
|
|
| .badge-secondary { |
| background: rgba(6, 182, 212, 0.15); |
| color: var(--secondary); |
| border: 1px solid rgba(6, 182, 212, 0.3); |
| } |
|
|
| .badge-success { |
| background: rgba(16, 185, 129, 0.15); |
| color: var(--success); |
| border: 1px solid rgba(16, 185, 129, 0.3); |
| } |
|
|
| .badge-warning { |
| background: rgba(249, 115, 22, 0.15); |
| color: var(--warning); |
| border: 1px solid rgba(249, 115, 22, 0.3); |
| } |
|
|
| .badge-accent { |
| background: rgba(245, 158, 11, 0.15); |
| color: var(--accent); |
| border: 1px solid rgba(245, 158, 11, 0.3); |
| } |
|
|
| |
| |
| |
| .card { |
| background: var(--bg-card); |
| border: 1px solid var(--border-color); |
| border-radius: var(--radius-lg); |
| padding: var(--space-xl); |
| transition: all var(--transition-base); |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .card::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| height: 3px; |
| background: linear-gradient(90deg, var(--primary), var(--secondary)); |
| transform: scaleX(0); |
| transition: transform var(--transition-base); |
| } |
|
|
| .card:hover { |
| transform: translateY(-5px); |
| border-color: var(--border-light); |
| box-shadow: var(--shadow-lg), var(--shadow-glow); |
| } |
|
|
| .card:hover::before { |
| transform: scaleX(1); |
| } |
|
|
| .card-icon { |
| width: 50px; |
| height: 50px; |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); |
| border-radius: var(--radius-md); |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| font-size: 1.5rem; |
| margin-bottom: var(--space-md); |
| animation: float 3s ease-in-out infinite; |
| } |
|
|
| .card-title { |
| font-size: 1.1rem; |
| font-weight: 700; |
| color: var(--text-primary); |
| margin-bottom: var(--space-sm); |
| } |
|
|
| .card-text { |
| font-size: 0.9rem; |
| color: var(--text-secondary); |
| line-height: 1.6; |
| } |
|
|
| |
| |
| |
| .callout { |
| display: flex; |
| gap: var(--space-md); |
| padding: var(--space-lg); |
| border-radius: var(--radius-md); |
| margin: var(--space-lg) 0; |
| animation: fadeInUp 0.5s ease; |
| } |
|
|
| .callout-icon { |
| font-size: 1.5rem; |
| flex-shrink: 0; |
| } |
|
|
| .callout-content { |
| flex: 1; |
| } |
|
|
| .callout-title { |
| font-weight: 600; |
| color: var(--text-primary); |
| margin-bottom: var(--space-xs); |
| } |
|
|
| .callout-text { |
| font-size: 0.9rem; |
| color: var(--text-secondary); |
| } |
|
|
| .callout-info { |
| background: rgba(99, 102, 241, 0.1); |
| border: 1px solid rgba(99, 102, 241, 0.3); |
| } |
|
|
| .callout-success { |
| background: rgba(16, 185, 129, 0.1); |
| border: 1px solid rgba(16, 185, 129, 0.3); |
| } |
|
|
| .callout-warning { |
| background: rgba(249, 115, 22, 0.1); |
| border: 1px solid rgba(249, 115, 22, 0.3); |
| } |
|
|
| .callout-tip { |
| background: rgba(245, 158, 11, 0.1); |
| border: 1px solid rgba(245, 158, 11, 0.3); |
| } |
|
|
| |
| |
| |
| .code-block { |
| background: #0d0d15; |
| border: 1px solid var(--border-color); |
| border-radius: var(--radius-md); |
| overflow: hidden; |
| margin: var(--space-md) 0; |
| animation: fadeInUp 0.5s ease; |
| } |
|
|
| .code-header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: var(--space-sm) var(--space-md); |
| background: var(--bg-tertiary); |
| border-bottom: 1px solid var(--border-color); |
| } |
|
|
| .code-dots { |
| display: flex; |
| gap: 6px; |
| } |
|
|
| .code-dot { |
| width: 10px; |
| height: 10px; |
| border-radius: 50%; |
| } |
|
|
| .code-dot.red { background: #ff5f56; } |
| .code-dot.yellow { background: #ffbd2e; } |
| .code-dot.green { background: #27c93f; } |
|
|
| .code-lang { |
| font-family: 'JetBrains Mono', monospace; |
| font-size: 0.7rem; |
| color: var(--text-muted); |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| } |
|
|
| .code-block pre { |
| padding: var(--space-md); |
| overflow-x: auto; |
| font-family: 'JetBrains Mono', monospace; |
| font-size: 0.85rem; |
| line-height: 1.7; |
| color: #cdd6f4; |
| margin: 0; |
| } |
|
|
| |
| .code-keyword { color: #cba6f7; } |
| .code-function { color: #89b4fa; } |
| .code-string { color: #a6e3a1; } |
| .code-comment { color: #6c7086; font-style: italic; } |
| .code-number { color: #fab387; } |
| .code-class { color: #f38ba8; } |
|
|
| |
| |
| |
| .table-container { |
| overflow-x: auto; |
| border-radius: var(--radius-md); |
| border: 1px solid var(--border-color); |
| margin: var(--space-lg) 0; |
| } |
|
|
| table { |
| width: 100%; |
| border-collapse: collapse; |
| font-size: 0.9rem; |
| } |
|
|
| th { |
| background: var(--bg-tertiary); |
| color: var(--text-secondary); |
| font-family: 'JetBrains Mono', monospace; |
| font-size: 0.75rem; |
| font-weight: 600; |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| padding: var(--space-md); |
| text-align: left; |
| border-bottom: 1px solid var(--border-color); |
| } |
|
|
| td { |
| padding: var(--space-md); |
| border-bottom: 1px solid var(--border-color); |
| color: var(--text-primary); |
| } |
|
|
| tr:hover td { |
| background: var(--bg-hover); |
| } |
|
|
| tr:last-child td { |
| border-bottom: none; |
| } |
|
|
| |
| |
| |
| .form-group { |
| margin-bottom: var(--space-lg); |
| } |
|
|
| .form-label { |
| display: block; |
| font-size: 0.8rem; |
| font-weight: 600; |
| color: var(--text-secondary); |
| text-transform: uppercase; |
| letter-spacing: 0.5px; |
| margin-bottom: var(--space-sm); |
| font-family: 'JetBrains Mono', monospace; |
| } |
|
|
| .form-input, |
| .form-select, |
| .form-textarea { |
| width: 100%; |
| background: var(--bg-tertiary); |
| border: 1px solid var(--border-color); |
| border-radius: var(--radius-md); |
| color: var(--text-primary); |
| font-family: 'Inter', sans-serif; |
| font-size: 0.95rem; |
| padding: var(--space-sm) var(--space-md); |
| transition: all var(--transition-base); |
| } |
|
|
| .form-input:focus, |
| .form-select:focus, |
| .form-textarea:focus { |
| outline: none; |
| border-color: var(--primary); |
| box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); |
| } |
|
|
| .form-input::placeholder, |
| .form-textarea::placeholder { |
| color: var(--text-muted); |
| } |
|
|
| .form-textarea { |
| min-height: 120px; |
| resize: vertical; |
| } |
|
|
| |
| |
| |
| .footer { |
| background: var(--bg-secondary); |
| border-top: 1px solid var(--border-color); |
| padding: var(--space-2xl) var(--space-xl); |
| text-align: center; |
| margin-top: auto; |
| } |
|
|
| .footer-text { |
| font-size: 0.85rem; |
| color: var(--text-muted); |
| font-family: 'JetBrains Mono', monospace; |
| } |
|
|
| .footer-brand { |
| color: var(--primary-light); |
| font-weight: 600; |
| } |
|
|
| |
| |
| |
| .particles-container { |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| pointer-events: none; |
| overflow: hidden; |
| z-index: 0; |
| } |
|
|
| .particle { |
| position: absolute; |
| width: 4px; |
| height: 4px; |
| background: var(--primary); |
| border-radius: 50%; |
| opacity: 0.3; |
| animation: particle 15s linear infinite; |
| } |
|
|
| .particle:nth-child(1) { left: 10%; animation-duration: 12s; animation-delay: 0s; } |
| .particle:nth-child(2) { left: 20%; animation-duration: 18s; animation-delay: 2s; background: var(--secondary); } |
| .particle:nth-child(3) { left: 30%; animation-duration: 14s; animation-delay: 4s; } |
| .particle:nth-child(4) { left: 40%; animation-duration: 20s; animation-delay: 1s; background: var(--accent); } |
| .particle:nth-child(5) { left: 50%; animation-duration: 16s; animation-delay: 3s; } |
| .particle:nth-child(6) { left: 60%; animation-duration: 13s; animation-delay: 5s; background: var(--success); } |
| .particle:nth-child(7) { left: 70%; animation-duration: 19s; animation-delay: 2s; } |
| .particle:nth-child(8) { left: 80%; animation-duration: 15s; animation-delay: 4s; background: var(--secondary); } |
| .particle:nth-child(9) { left: 90%; animation-duration: 17s; animation-delay: 1s; } |
|
|
| |
| |
| |
| .gradient-text { |
| background: linear-gradient(135deg, var(--primary-light), var(--secondary), var(--accent)); |
| background-size: 200% 200%; |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| animation: gradientShift 4s ease infinite; |
| } |
|
|
| |
| |
| |
| .page-wrapper { |
| padding-top: var(--navbar-height); |
| min-height: 100vh; |
| display: flex; |
| flex-direction: column; |
| position: relative; |
| z-index: 1; |
| } |
|
|
| |
| |
| |
| @media (max-width: 768px) { |
| .navbar { |
| padding: 0 var(--space-md); |
| } |
| |
| .nav-link span:not(.nav-icon) { |
| display: none; |
| } |
| |
| .navbar-brand span { |
| display: none; |
| } |
| |
| .nav-badge { |
| display: none; |
| } |
| |
| :root { |
| --sidebar-width: 0; |
| } |
| } |
|
|
| |
| |
| |
| ::-webkit-scrollbar { |
| width: 8px; |
| height: 8px; |
| } |
|
|
| ::-webkit-scrollbar-track { |
| background: var(--bg-secondary); |
| } |
|
|
| ::-webkit-scrollbar-thumb { |
| background: var(--border-light); |
| border-radius: 4px; |
| } |
|
|
| ::-webkit-scrollbar-thumb:hover { |
| background: var(--primary); |
| } |
|
|
| |
| |
| |
| ::selection { |
| background: rgba(99, 102, 241, 0.3); |
| color: var(--text-primary); |
| } |
|
|
