Spaces:
Running
Running
| /* Custom Styles for CryptoPulse Explorer */ | |
| /* Smooth Scrolling */ | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| /* Custom Animations */ | |
| @keyframes float { | |
| 0%, 100% { | |
| transform: translateY(0px); | |
| } | |
| 50% { | |
| transform: translateY(-10px); | |
| } | |
| } | |
| .float-animation { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| /* Custom Scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #3b82f6; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #2563eb; | |
| } | |
| /* Table Row Hover Effect */ | |
| table tbody tr { | |
| transition: background-color 0.2s ease; | |
| } | |
| table tbody tr:hover { | |
| background-color: #f8fafc; | |
| } | |
| /* Gradient Text */ | |
| .gradient-text { | |
| background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| /* Card Hover Effects */ | |
| .hover-lift { | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .hover-lift:hover { | |
| transform: translateY(-4px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| /* Loading Animation */ | |
| .loading-spinner { | |
| border: 3px solid #f3f3f3; | |
| border-top: 3px solid #3b82f6; | |
| border-radius: 50%; | |
| width: 40px; | |
| height: 40px; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| /* Price Change Colors */ | |
| .price-up { | |
| color: #10b981; | |
| } | |
| .price-down { | |
| color: #ef4444; | |
| } | |
| /* Crypto Icon Container */ | |
| .crypto-icon { | |
| width: 40px; | |
| height: 40px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 50%; | |
| font-weight: bold; | |
| color: white; | |
| } | |
| /* Responsive Adjustments */ | |
| @media (max-width: 768px) { | |
| .mobile-stack { | |
| flex-direction: column; | |
| } | |
| .mobile-center { | |
| text-align: center; | |
| } | |
| .mobile-padding { | |
| padding: 1rem ; | |
| } | |
| } | |
| /* Button Pulse Effect */ | |
| @keyframes pulse { | |
| 0% { | |
| box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7); | |
| } | |
| 70% { | |
| box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); | |
| } | |
| 100% { | |
| box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); | |
| } | |
| } | |
| .pulse-button { | |
| animation: pulse 2s infinite; | |
| } | |
| /* Glass Morphism */ | |
| .glass-effect { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } |