48949ebb3f
A complete blockchain implementation featuring: - synord: Full node with GHOSTDAG consensus - explorer-web: Modern React blockchain explorer with 3D DAG visualization - CLI wallet and tools - Smart contract SDK and example contracts (DEX, NFT, token) - WASM crypto library for browser/mobile
306 lines
8.7 KiB
CSS
306 lines
8.7 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
/* Dark theme (default) */
|
|
:root,
|
|
:root.dark {
|
|
--color-bg-primary: #0d1117;
|
|
--color-bg-secondary: #161b22;
|
|
--color-bg-tertiary: #1f2937;
|
|
--color-bg-card: #111827;
|
|
--color-border: #374151;
|
|
--color-border-light: #4b5563;
|
|
--color-text-primary: #f9fafb;
|
|
--color-text-secondary: #9ca3af;
|
|
--color-text-muted: #6b7280;
|
|
color-scheme: dark;
|
|
}
|
|
|
|
/* Light theme */
|
|
:root.light {
|
|
--color-bg-primary: #ffffff;
|
|
--color-bg-secondary: #f9fafb;
|
|
--color-bg-tertiary: #f3f4f6;
|
|
--color-bg-card: #ffffff;
|
|
--color-border: #e5e7eb;
|
|
--color-border-light: #d1d5db;
|
|
--color-text-primary: #111827;
|
|
--color-text-secondary: #4b5563;
|
|
--color-text-muted: #6b7280;
|
|
color-scheme: light;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
|
background-color: var(--color-bg-primary);
|
|
color: var(--color-text-primary);
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
code, .font-mono {
|
|
font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.card {
|
|
@apply bg-gray-900 border border-gray-800 rounded-lg;
|
|
}
|
|
|
|
.card-header {
|
|
@apply px-4 py-3 border-b border-gray-800;
|
|
}
|
|
|
|
.card-body {
|
|
@apply p-4;
|
|
}
|
|
|
|
.btn {
|
|
@apply px-4 py-2 rounded-lg font-medium transition-colors;
|
|
}
|
|
|
|
.btn-primary {
|
|
@apply bg-synor-600 hover:bg-synor-500 text-white;
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply bg-gray-800 hover:bg-gray-700 text-gray-100;
|
|
}
|
|
|
|
.link {
|
|
@apply text-synor-400 hover:text-synor-300 transition-colors;
|
|
}
|
|
|
|
.hash {
|
|
@apply font-mono text-sm break-all;
|
|
}
|
|
|
|
.stat-value {
|
|
@apply text-2xl font-semibold text-white;
|
|
}
|
|
|
|
.stat-label {
|
|
@apply text-sm text-gray-400;
|
|
}
|
|
|
|
.badge {
|
|
@apply inline-flex items-center px-2 py-0.5 rounded text-xs font-medium;
|
|
}
|
|
|
|
.badge-success {
|
|
@apply bg-green-900/50 text-green-400 border border-green-800;
|
|
}
|
|
|
|
.badge-warning {
|
|
@apply bg-yellow-900/50 text-yellow-400 border border-yellow-800;
|
|
}
|
|
|
|
.badge-info {
|
|
@apply bg-synor-900/50 text-synor-400 border border-synor-800;
|
|
}
|
|
|
|
.table-row {
|
|
@apply border-b border-gray-800 hover:bg-gray-800/50 transition-colors;
|
|
}
|
|
|
|
.input {
|
|
@apply w-full px-4 py-2 bg-gray-800 border border-gray-700 rounded-lg
|
|
text-gray-100 placeholder-gray-500 focus:outline-none
|
|
focus:border-synor-500 focus:ring-1 focus:ring-synor-500;
|
|
}
|
|
}
|
|
|
|
@layer utilities {
|
|
.scrollbar-thin {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: theme('colors.gray.700') transparent;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
.scrollbar-thin::-webkit-scrollbar-thumb {
|
|
background-color: theme('colors.gray.700');
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/* Animated gradient text */
|
|
.animate-gradient {
|
|
animation: gradient-shift 3s ease infinite;
|
|
}
|
|
|
|
@keyframes gradient-shift {
|
|
0%, 100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
}
|
|
|
|
/* Staggered fade-in for cards */
|
|
.animate-fade-in-up {
|
|
animation: fade-in-up 0.5s ease-out forwards;
|
|
opacity: 0;
|
|
}
|
|
|
|
@keyframes fade-in-up {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Glow pulse effect */
|
|
.animate-glow-pulse {
|
|
animation: glow-pulse 2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes glow-pulse {
|
|
0%, 100% {
|
|
box-shadow: 0 0 5px rgba(124, 58, 237, 0.3);
|
|
}
|
|
50% {
|
|
box-shadow: 0 0 20px rgba(124, 58, 237, 0.6);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ============================================
|
|
Light Theme Overrides
|
|
These are placed outside @layer to override
|
|
Tailwind utilities when .light class is present
|
|
============================================ */
|
|
|
|
/* Background color overrides */
|
|
.light .bg-gray-900 { background-color: #ffffff !important; }
|
|
.light .bg-gray-800 { background-color: #f9fafb !important; }
|
|
.light .bg-gray-950 { background-color: #ffffff !important; }
|
|
.light .bg-gray-950\/95 { background-color: rgba(255, 255, 255, 0.95) !important; }
|
|
.light .bg-gray-900\/40 { background-color: rgba(249, 250, 251, 0.9) !important; }
|
|
.light .bg-gray-900\/50 { background-color: rgba(249, 250, 251, 0.9) !important; }
|
|
.light .bg-gray-800\/50 { background-color: rgba(243, 244, 246, 0.8) !important; }
|
|
.light .bg-gray-800\/80 { background-color: rgba(243, 244, 246, 0.9) !important; }
|
|
|
|
/* Text color overrides */
|
|
.light .text-gray-100 { color: #1f2937 !important; }
|
|
.light .text-gray-200 { color: #374151 !important; }
|
|
.light .text-gray-300 { color: #4b5563 !important; }
|
|
.light .text-gray-400 { color: #6b7280 !important; }
|
|
.light .text-gray-500 { color: #9ca3af !important; }
|
|
.light .text-white { color: #111827 !important; }
|
|
|
|
/* Border color overrides */
|
|
.light .border-gray-700 { border-color: #d1d5db !important; }
|
|
.light .border-gray-700\/50 { border-color: rgba(209, 213, 219, 0.5) !important; }
|
|
.light .border-gray-800 { border-color: #e5e7eb !important; }
|
|
.light .divide-gray-800 > :not([hidden]) ~ :not([hidden]) { border-color: #e5e7eb !important; }
|
|
|
|
/* Card component */
|
|
.light .card {
|
|
background-color: #ffffff !important;
|
|
border-color: #e5e7eb !important;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
|
|
}
|
|
|
|
/* Header */
|
|
.light header {
|
|
background-color: rgba(255, 255, 255, 0.95) !important;
|
|
border-bottom-color: #e5e7eb !important;
|
|
}
|
|
|
|
/* Footer */
|
|
.light footer {
|
|
background-color: #f9fafb !important;
|
|
border-top-color: #e5e7eb !important;
|
|
}
|
|
|
|
/* Input fields */
|
|
.light input,
|
|
.light .input {
|
|
background-color: #f9fafb !important;
|
|
border-color: #d1d5db !important;
|
|
color: #111827 !important;
|
|
}
|
|
|
|
.light input::placeholder {
|
|
color: #9ca3af !important;
|
|
}
|
|
|
|
/* Hover states */
|
|
.light .hover\:bg-gray-800:hover { background-color: #f3f4f6 !important; }
|
|
.light .hover\:bg-gray-700:hover { background-color: #e5e7eb !important; }
|
|
.light .hover\:bg-gray-800\/50:hover { background-color: rgba(243, 244, 246, 0.8) !important; }
|
|
.light .hover\:text-white:hover { color: #111827 !important; }
|
|
|
|
/* Glassmorphism adjustments */
|
|
.light .backdrop-blur-xl {
|
|
background-color: rgba(255, 255, 255, 0.8) !important;
|
|
}
|
|
|
|
/* Badge adjustments for light mode */
|
|
.light .badge-success {
|
|
background-color: rgba(220, 252, 231, 0.8) !important;
|
|
border-color: #86efac !important;
|
|
}
|
|
|
|
.light .badge-warning {
|
|
background-color: rgba(254, 249, 195, 0.8) !important;
|
|
border-color: #fde047 !important;
|
|
}
|
|
|
|
.light .badge-info {
|
|
background-color: rgba(237, 233, 254, 0.8) !important;
|
|
border-color: #c4b5fd !important;
|
|
}
|
|
|
|
/* Scrollbar for light mode */
|
|
.light .scrollbar-thin {
|
|
scrollbar-color: #d1d5db transparent;
|
|
}
|
|
|
|
.light .scrollbar-thin::-webkit-scrollbar-thumb {
|
|
background-color: #d1d5db;
|
|
}
|
|
|
|
/* Stats card glassmorphism adjustments */
|
|
.light .bg-gray-900\/90 { background-color: rgba(255, 255, 255, 0.95) !important; }
|
|
.light .bg-gray-900\/95 { background-color: rgba(255, 255, 255, 0.98) !important; }
|
|
.light .from-white\/5 { --tw-gradient-from: rgba(0, 0, 0, 0.03) !important; }
|
|
.light .to-white\/0 { --tw-gradient-to: rgba(0, 0, 0, 0) !important; }
|
|
.light .bg-white\/5 { background-color: rgba(0, 0, 0, 0.05) !important; }
|
|
.light .bg-white\/10 { background-color: rgba(0, 0, 0, 0.08) !important; }
|
|
.light .group:hover .group-hover\:bg-white\/10 { background-color: rgba(0, 0, 0, 0.1) !important; }
|
|
|
|
/* Stats card gradient border adjustments for light mode */
|
|
.light .from-synor-500\/20 { --tw-gradient-from: rgba(124, 58, 237, 0.15) !important; }
|
|
.light .to-blue-500\/20 { --tw-gradient-to: rgba(59, 130, 246, 0.15) !important; }
|
|
.light .from-green-500\/30 { --tw-gradient-from: rgba(34, 197, 94, 0.2) !important; }
|
|
.light .to-emerald-500\/20 { --tw-gradient-to: rgba(16, 185, 129, 0.15) !important; }
|
|
.light .from-synor-500\/30 { --tw-gradient-from: rgba(124, 58, 237, 0.2) !important; }
|
|
.light .to-violet-500\/20 { --tw-gradient-to: rgba(139, 92, 246, 0.15) !important; }
|
|
.light .from-blue-500\/30 { --tw-gradient-from: rgba(59, 130, 246, 0.2) !important; }
|
|
.light .to-cyan-500\/20 { --tw-gradient-to: rgba(6, 182, 212, 0.15) !important; }
|
|
.light .from-amber-500\/30 { --tw-gradient-from: rgba(245, 158, 11, 0.2) !important; }
|
|
.light .to-orange-500\/20 { --tw-gradient-to: rgba(249, 115, 22, 0.15) !important; }
|
|
|
|
/* Glow effect adjustments */
|
|
.light .from-synor-500\/10 { --tw-gradient-from: rgba(124, 58, 237, 0.08) !important; }
|
|
.light .to-blue-500\/10 { --tw-gradient-to: rgba(59, 130, 246, 0.08) !important; }
|
|
|
|
/* View toggle adjustments */
|
|
.light .bg-synor-600 { background-color: rgb(124, 58, 237) !important; }
|
|
.light .bg-synor-500\/20 { background-color: rgba(124, 58, 237, 0.15) !important; }
|
|
.light .bg-synor-900\/50 { background-color: rgba(237, 233, 254, 0.5) !important; }
|