Datasourceforcryptocurrency
/
static
/pages
/crypto-api-hub-integrated
/crypto-api-hub-integrated.css
| /** | |
| * Crypto API Hub Integrated - Styles | |
| * Modern, seamless UI with glassmorphism and animations | |
| */ | |
| /* ========================================================================= | |
| GLOBAL STYLES | |
| ========================================================================= */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: var(--font-main); | |
| background: var(--background-main); | |
| color: var(--text-normal); | |
| line-height: var(--lh-normal); | |
| overflow-x: hidden; | |
| position: relative; | |
| min-height: 100vh; | |
| } | |
| /* ========================================================================= | |
| BACKGROUND EFFECTS | |
| ========================================================================= */ | |
| .background-effects { | |
| position: fixed; | |
| inset: 0; | |
| pointer-events: none; | |
| z-index: 0; | |
| overflow: hidden; | |
| } | |
| .gradient-orb { | |
| position: absolute; | |
| border-radius: 50%; | |
| filter: blur(80px); | |
| opacity: 0.3; | |
| animation: float 20s ease-in-out infinite; | |
| } | |
| .orb-1 { | |
| width: 500px; | |
| height: 500px; | |
| background: radial-gradient(circle, rgba(59, 130, 246, 0.4) 0%, transparent 70%); | |
| top: -250px; | |
| left: -250px; | |
| animation-delay: 0s; | |
| } | |
| .orb-2 { | |
| width: 400px; | |
| height: 400px; | |
| background: radial-gradient(circle, rgba(139, 92, 246, 0.4) 0%, transparent 70%); | |
| bottom: -200px; | |
| right: -200px; | |
| animation-delay: 5s; | |
| } | |
| .orb-3 { | |
| width: 300px; | |
| height: 300px; | |
| background: radial-gradient(circle, rgba(34, 211, 238, 0.3) 0%, transparent 70%); | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| animation-delay: 10s; | |
| } | |
| @keyframes float { | |
| 0%, 100% { | |
| transform: translate(0, 0) scale(1); | |
| } | |
| 33% { | |
| transform: translate(30px, -30px) scale(1.1); | |
| } | |
| 66% { | |
| transform: translate(-20px, 20px) scale(0.9); | |
| } | |
| } | |
| /* ========================================================================= | |
| CONTAINER | |
| ========================================================================= */ | |
| .container { | |
| max-width: 1600px; | |
| margin: 0 auto; | |
| padding: var(--space-8); | |
| position: relative; | |
| z-index: 1; | |
| } | |
| /* ========================================================================= | |
| HEADER | |
| ========================================================================= */ | |
| .hub-header { | |
| background: var(--surface-glass); | |
| backdrop-filter: var(--blur-xl); | |
| -webkit-backdrop-filter: var(--blur-xl); | |
| border: 1px solid var(--border-light); | |
| border-radius: var(--radius-2xl); | |
| padding: var(--space-8); | |
| margin-bottom: var(--space-6); | |
| position: relative; | |
| overflow: hidden; | |
| box-shadow: var(--shadow-xl); | |
| animation: slideDown 0.8s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| .hub-header::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 4px; | |
| background: var(--gradient-primary); | |
| } | |
| @keyframes slideDown { | |
| from { | |
| opacity: 0; | |
| transform: translateY(-30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .header-content { | |
| display: grid; | |
| grid-template-columns: auto 1fr auto; | |
| gap: var(--space-8); | |
| align-items: center; | |
| } | |
| /* ========================================================================= | |
| LOGO SECTION | |
| ========================================================================= */ | |
| .logo-section { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-6); | |
| } | |
| .logo { | |
| width: 70px; | |
| height: 70px; | |
| background: var(--gradient-primary); | |
| border-radius: var(--radius-lg); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| box-shadow: var(--glow-blue-strong); | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| .logo svg { | |
| width: 40px; | |
| height: 40px; | |
| } | |
| .brand-text h1 { | |
| font-family: 'Space Grotesk', sans-serif; | |
| font-size: var(--fs-3xl); | |
| font-weight: var(--fw-black); | |
| background: var(--gradient-primary); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| margin-bottom: var(--space-1); | |
| line-height: var(--lh-tight); | |
| } | |
| .brand-text p { | |
| color: var(--text-muted); | |
| font-size: var(--fs-base); | |
| font-weight: var(--fw-medium); | |
| } | |
| /* ========================================================================= | |
| STATS | |
| ========================================================================= */ | |
| .stats-row { | |
| display: flex; | |
| gap: var(--space-12); | |
| } | |
| .stat { | |
| text-align: center; | |
| } | |
| .stat-value { | |
| font-size: var(--fs-4xl); | |
| font-weight: var(--fw-black); | |
| background: var(--gradient-primary); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| line-height: 1; | |
| margin-bottom: var(--space-2); | |
| } | |
| .stat-label { | |
| font-size: var(--fs-xs); | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: var(--tracking-widest); | |
| font-weight: var(--fw-bold); | |
| } | |
| /* ========================================================================= | |
| HEADER ACTIONS | |
| ========================================================================= */ | |
| .header-actions { | |
| display: flex; | |
| gap: var(--space-3); | |
| } | |
| .btn-gradient { | |
| padding: var(--space-3) var(--space-6); | |
| border: none; | |
| border-radius: var(--radius-md); | |
| font-weight: var(--fw-bold); | |
| font-size: var(--fs-base); | |
| cursor: pointer; | |
| transition: all var(--transition-normal); | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| box-shadow: var(--glow-blue); | |
| position: relative; | |
| overflow: hidden; | |
| background: var(--gradient-primary); | |
| color: white; | |
| } | |
| .btn-gradient:hover { | |
| transform: translateY(-4px); | |
| box-shadow: var(--glow-blue-strong); | |
| } | |
| .btn-gradient:active { | |
| transform: translateY(-2px); | |
| } | |
| /* ========================================================================= | |
| STATUS BAR | |
| ========================================================================= */ | |
| .status-bar { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: var(--space-4) var(--space-6); | |
| background: var(--surface-glass); | |
| border: 1px solid var(--border-light); | |
| border-radius: var(--radius-md); | |
| margin-bottom: var(--space-6); | |
| backdrop-filter: var(--blur-lg); | |
| -webkit-backdrop-filter: var(--blur-lg); | |
| animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both; | |
| } | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(20px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .status-indicator { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--space-3); | |
| font-size: var(--fs-sm); | |
| font-weight: var(--fw-semibold); | |
| color: var(--text-normal); | |
| } | |
| .status-dot { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| animation: pulse 2s ease-in-out infinite; | |
| } | |
| .status-active { | |
| background: var(--success); | |
| box-shadow: 0 0 10px var(--success); | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .status-info { | |
| font-size: var(--fs-sm); | |
| color: var(--text-muted); | |
| } | |
| /* ========================================================================= | |
| CONTROLS | |
| ========================================================================= */ | |
| .controls { | |
| background: var(--surface-glass); | |
| backdrop-filter: var(--blur-xl); | |
| -webkit-backdrop-filter: var(--blur-xl); | |
| border: 1px solid var(--border-light); | |
| border-radius: var(--radius-xl); | |
| padding: var(--space-6); | |
| margin-bottom: var(--space-6); | |
| animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; | |
| } | |
| .search-wrapper { | |
| position: relative; | |
| margin-bottom: var(--space-4); | |
| } | |
| .search-icon { | |
| position: absolute; | |
| left: var(--space-4); | |
| top: 50%; | |
| transform: translateY(-50%); | |
| color: var(--text-muted); | |
| pointer-events: none; | |
| } | |
| .search-input { | |
| width: 100%; | |
| padding: var(--space-4) var(--space-4) var(--space-4) var(--space-12); | |
| background: rgba(15, 23, 42, 0.60); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: var(--radius-md); | |
| color: var(--text-normal); | |
| font-size: var(--fs-base); | |
| font-weight: var(--fw-medium); | |
| transition: all var(--transition-fast); | |
| } | |
| .search-input:focus { | |
| outline: none; | |
| border-color: var(--brand-blue); | |
| background: rgba(15, 23, 42, 0.80); | |
| box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15); | |
| } | |
| .filter-tabs { | |
| display: flex; | |
| gap: var(--space-3); | |
| flex-wrap: wrap; | |
| } | |
| .filter-tab { | |
| padding: var(--space-3) var(--space-6); | |
| border: 1px solid var(--border-subtle); | |
| background: rgba(255, 255, 255, 0.05); | |
| border-radius: var(--radius-sm); | |
| color: var(--text-muted); | |
| font-weight: var(--fw-bold); | |
| font-size: var(--fs-sm); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| text-transform: uppercase; | |
| letter-spacing: var(--tracking-wide); | |
| } | |
| .filter-tab:hover { | |
| background: rgba(255, 255, 255, 0.1); | |
| border-color: var(--brand-blue); | |
| color: var(--text-normal); | |
| transform: translateY(-2px); | |
| } | |
| .filter-tab.active { | |
| background: var(--gradient-primary); | |
| border-color: transparent; | |
| color: white; | |
| transform: translateY(-2px); | |
| box-shadow: var(--glow-blue); | |
| } | |
| /* ========================================================================= | |
| SERVICES GRID | |
| ========================================================================= */ | |
| .services-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); | |
| gap: var(--space-6); | |
| margin-bottom: var(--space-6); | |
| } | |
| .service-card { | |
| background: var(--surface-glass); | |
| backdrop-filter: var(--blur-xl); | |
| -webkit-backdrop-filter: var(--blur-xl); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: var(--radius-xl); | |
| padding: var(--space-6); | |
| transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); | |
| position: relative; | |
| overflow: hidden; | |
| animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; | |
| } | |
| .service-card::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 4px; | |
| background: var(--gradient-primary); | |
| transform: scaleX(0); | |
| transform-origin: left; | |
| transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .service-card:hover { | |
| transform: translateY(-8px); | |
| box-shadow: var(--shadow-2xl); | |
| border-color: var(--border-medium); | |
| } | |
| .service-card:hover::before { | |
| transform: scaleX(1); | |
| } | |
| .service-header { | |
| display: flex; | |
| align-items: start; | |
| gap: var(--space-4); | |
| margin-bottom: var(--space-6); | |
| } | |
| .service-icon { | |
| width: 60px; | |
| height: 60px; | |
| background: var(--gradient-primary); | |
| border-radius: var(--radius-md); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-shrink: 0; | |
| box-shadow: var(--glow-blue); | |
| transition: transform var(--transition-normal); | |
| } | |
| .service-card:hover .service-icon { | |
| transform: scale(1.1) rotate(5deg); | |
| } | |
| .service-icon svg { | |
| width: 32px; | |
| height: 32px; | |
| } | |
| .service-info { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .service-name { | |
| font-family: 'Space Grotesk', sans-serif; | |
| font-size: var(--fs-xl); | |
| font-weight: var(--fw-black); | |
| color: var(--text-strong); | |
| margin-bottom: var(--space-2); | |
| line-height: var(--lh-tight); | |
| } | |
| .service-url { | |
| font-family: var(--font-mono); | |
| font-size: var(--fs-xs); | |
| color: var(--text-muted); | |
| word-break: break-all; | |
| opacity: 0.8; | |
| } | |
| .service-badges { | |
| display: flex; | |
| gap: var(--space-2); | |
| flex-wrap: wrap; | |
| margin-bottom: var(--space-5); | |
| } | |
| .badge { | |
| padding: var(--space-2) var(--space-3); | |
| border-radius: var(--radius-xs); | |
| font-size: var(--fs-xs); | |
| font-weight: var(--fw-bold); | |
| text-transform: uppercase; | |
| letter-spacing: var(--tracking-wide); | |
| display: inline-flex; | |
| align-items: center; | |
| gap: var(--space-1); | |
| } | |
| .badge-category { | |
| background: rgba(59, 130, 246, 0.2); | |
| color: var(--brand-blue-light); | |
| border: 1px solid rgba(59, 130, 246, 0.3); | |
| } | |
| .badge-endpoints { | |
| background: rgba(34, 211, 238, 0.2); | |
| color: var(--brand-cyan-light); | |
| border: 1px solid rgba(34, 211, 238, 0.3); | |
| } | |
| .badge-key { | |
| background: rgba(52, 211, 153, 0.2); | |
| color: var(--brand-green-light); | |
| border: 1px solid rgba(52, 211, 153, 0.3); | |
| } | |
| .endpoints-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--space-3); | |
| } | |
| .endpoint-item { | |
| background: rgba(0, 0, 0, 0.4); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: var(--radius-md); | |
| padding: var(--space-4); | |
| transition: all var(--transition-fast); | |
| } | |
| .endpoint-item:hover { | |
| border-color: var(--brand-blue); | |
| background: rgba(0, 0, 0, 0.6); | |
| transform: translateX(4px); | |
| } | |
| .endpoint-path { | |
| font-family: var(--font-mono); | |
| font-size: var(--fs-sm); | |
| color: var(--brand-cyan); | |
| word-break: break-all; | |
| margin-bottom: var(--space-3); | |
| line-height: var(--lh-relaxed); | |
| } | |
| .endpoint-actions { | |
| display: flex; | |
| gap: var(--space-2); | |
| } | |
| .btn-sm { | |
| padding: var(--space-2) var(--space-3); | |
| border: 1px solid var(--border-subtle); | |
| background: rgba(255, 255, 255, 0.08); | |
| color: var(--text-normal); | |
| border-radius: var(--radius-xs); | |
| font-weight: var(--fw-bold); | |
| font-size: var(--fs-sm); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| display: inline-flex; | |
| align-items: center; | |
| gap: var(--space-2); | |
| } | |
| .btn-sm:hover { | |
| background: var(--gradient-primary); | |
| border-color: transparent; | |
| color: white; | |
| transform: translateY(-2px); | |
| box-shadow: var(--glow-blue); | |
| } | |
| .no-endpoints { | |
| color: var(--text-muted); | |
| font-size: var(--fs-sm); | |
| font-style: italic; | |
| } | |
| .more-endpoints { | |
| text-align: center; | |
| color: var(--text-muted); | |
| margin-top: var(--space-2); | |
| font-size: var(--fs-sm); | |
| font-weight: var(--fw-medium); | |
| } | |
| /* ========================================================================= | |
| LOADING & EMPTY STATES | |
| ========================================================================= */ | |
| .loading-state { | |
| grid-column: 1 / -1; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: var(--space-16); | |
| text-align: center; | |
| } | |
| .loading-spinner { | |
| width: 50px; | |
| height: 50px; | |
| border: 4px solid var(--border-light); | |
| border-top-color: var(--brand-blue); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| margin-bottom: var(--space-4); | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| .loading-text { | |
| color: var(--text-muted); | |
| font-size: var(--fs-base); | |
| font-weight: var(--fw-medium); | |
| } | |
| .empty-state { | |
| grid-column: 1 / -1; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| padding: var(--space-16); | |
| text-align: center; | |
| } | |
| .empty-icon { | |
| font-size: 64px; | |
| margin-bottom: var(--space-4); | |
| opacity: 0.3; | |
| } | |
| .empty-text { | |
| color: var(--text-muted); | |
| font-size: var(--fs-lg); | |
| font-weight: var(--fw-medium); | |
| } | |
| /* ========================================================================= | |
| MODAL | |
| ========================================================================= */ | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| inset: 0; | |
| background: rgba(0, 0, 0, 0.9); | |
| backdrop-filter: blur(10px); | |
| z-index: var(--z-modal); | |
| padding: var(--space-8); | |
| overflow-y: auto; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .modal.active { | |
| display: flex; | |
| animation: fadeIn 0.3s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| .modal-content { | |
| background: var(--surface-elevated); | |
| backdrop-filter: var(--blur-xl); | |
| -webkit-backdrop-filter: var(--blur-xl); | |
| border: 1px solid var(--border-light); | |
| border-radius: var(--radius-2xl); | |
| max-width: 900px; | |
| width: 100%; | |
| max-height: 90vh; | |
| overflow-y: auto; | |
| box-shadow: var(--shadow-2xl); | |
| animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1); | |
| } | |
| @keyframes slideUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px) scale(0.95); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0) scale(1); | |
| } | |
| } | |
| .modal-header { | |
| padding: var(--space-8); | |
| border-bottom: 1px solid var(--border-light); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| background: var(--gradient-primary); | |
| } | |
| .modal-header h2 { | |
| font-family: 'Space Grotesk', sans-serif; | |
| font-size: var(--fs-2xl); | |
| font-weight: var(--fw-black); | |
| color: white; | |
| } | |
| .modal-close { | |
| width: 44px; | |
| height: 44px; | |
| border: none; | |
| background: rgba(255, 255, 255, 0.2); | |
| color: white; | |
| border-radius: var(--radius-sm); | |
| font-size: var(--fs-3xl); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .modal-close:hover { | |
| background: var(--danger); | |
| transform: rotate(90deg) scale(1.1); | |
| } | |
| .modal-body { | |
| padding: var(--space-8); | |
| } | |
| .form-group { | |
| margin-bottom: var(--space-6); | |
| } | |
| .form-label { | |
| display: block; | |
| font-weight: var(--fw-bold); | |
| font-size: var(--fs-base); | |
| margin-bottom: var(--space-3); | |
| color: var(--text-normal); | |
| } | |
| .form-input, | |
| .form-textarea { | |
| width: 100%; | |
| padding: var(--space-4); | |
| background: rgba(0, 0, 0, 0.4); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: var(--radius-md); | |
| color: var(--text-normal); | |
| font-family: var(--font-mono); | |
| font-size: var(--fs-base); | |
| transition: all var(--transition-fast); | |
| } | |
| .form-input:focus, | |
| .form-textarea:focus { | |
| outline: none; | |
| border-color: var(--brand-blue); | |
| box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.15); | |
| background: rgba(0, 0, 0, 0.6); | |
| } | |
| .form-textarea { | |
| min-height: 140px; | |
| resize: vertical; | |
| } | |
| .method-buttons { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: var(--space-3); | |
| } | |
| .method-btn { | |
| padding: var(--space-4); | |
| border: 1px solid var(--border-subtle); | |
| background: rgba(255, 255, 255, 0.05); | |
| color: var(--text-muted); | |
| border-radius: var(--radius-sm); | |
| font-weight: var(--fw-bold); | |
| font-size: var(--fs-base); | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| } | |
| .method-btn.active { | |
| background: var(--gradient-primary); | |
| border-color: transparent; | |
| color: white; | |
| box-shadow: var(--glow-blue); | |
| } | |
| .response-container { | |
| background: rgba(0, 0, 0, 0.6); | |
| border: 1px solid var(--border-subtle); | |
| border-radius: var(--radius-md); | |
| padding: var(--space-6); | |
| margin-top: var(--space-6); | |
| max-height: 400px; | |
| overflow-y: auto; | |
| } | |
| .response-json { | |
| font-family: var(--font-mono); | |
| font-size: var(--fs-sm); | |
| line-height: var(--lh-relaxed); | |
| color: var(--brand-cyan); | |
| white-space: pre-wrap; | |
| word-break: break-all; | |
| } | |
| /* ========================================================================= | |
| RESPONSIVE | |
| ========================================================================= */ | |
| @media (max-width: 1024px) { | |
| .header-content { | |
| grid-template-columns: 1fr; | |
| text-align: center; | |
| gap: var(--space-6); | |
| } | |
| .logo-section { | |
| justify-content: center; | |
| } | |
| .stats-row { | |
| justify-content: center; | |
| } | |
| .header-actions { | |
| justify-content: center; | |
| } | |
| .services-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| @media (max-width: 640px) { | |
| .container { | |
| padding: var(--space-4); | |
| } | |
| .hub-header { | |
| padding: var(--space-6); | |
| } | |
| .logo { | |
| width: 50px; | |
| height: 50px; | |
| } | |
| .logo svg { | |
| width: 28px; | |
| height: 28px; | |
| } | |
| .brand-text h1 { | |
| font-size: var(--fs-2xl); | |
| } | |
| .stats-row { | |
| flex-direction: column; | |
| gap: var(--space-4); | |
| } | |
| .header-actions { | |
| flex-direction: column; | |
| width: 100%; | |
| } | |
| .btn-gradient { | |
| justify-content: center; | |
| } | |
| .method-buttons { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |
| /* ========================================================================= | |
| CUSTOM SCROLLBAR | |
| ========================================================================= */ | |
| ::-webkit-scrollbar { | |
| width: 12px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: rgba(0, 0, 0, 0.4); | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: var(--gradient-primary); | |
| border-radius: 6px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: var(--brand-blue-light); | |
| } | |