You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
119 lines
6.7 KiB
119 lines
6.7 KiB
/* Ticker */ |
|
.ticker-wrap{ position:fixed; top:0; left:0; width:100%; height:36px; background: rgba(11,16,32,0.92); z-index:9999; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,0.4); } |
|
.ticker{ display:inline-block; white-space:nowrap; will-change:transform; animation: ticker 28s linear infinite; padding-left:100%; } |
|
.ticker:hover{ animation-play-state: paused; } |
|
.ticker-item{ display:inline-block; padding:8px 18px; font-family:'Press Start 2P',cursive; font-size:11px; color:#cbd5ff; opacity:0.95; } |
|
.ticker-item.buy{ color:#22c55e; } |
|
.ticker-item.sell{ color:#ef4444; } |
|
@keyframes ticker{ 0%{ transform:translateX(0);} 100%{ transform:translateX(-100%);} } |
|
|
|
/* offset hero a bit since ticker is fixed */ |
|
.hero{ padding-top: 64px; } |
|
|
|
/* Chip and delta styles */ |
|
.chip{ background:#0e1430; color:#cbd5ff; border:1px solid rgba(34,211,238,0.35); padding:6px 10px; border-radius:999px; font-size:11px; font-family:'Press Start 2P',cursive; } |
|
.delta{ margin-left:8px; font-size:10px; color:#22d3ee; opacity:0; transition:opacity .3s, transform .3s; font-family: 'Press Start 2P', cursive; text-shadow: 1px 1px 0px rgba(0,0,0,0.8); } |
|
.delta.show{ opacity:1; transform:translateY(-2px) } |
|
.delta.pos{ color:#22d3ee; text-shadow: 0 0 6px #22d3ee; } |
|
.delta.neg{ color:#ef4444; text-shadow: 0 0 6px #ef4444; } |
|
|
|
/* Money rain (from nancymoneysite) */ |
|
.money-rain{ position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:-1; } |
|
.money{ position:absolute; width:30px; height:15px; background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 50"><rect fill="%23116b32" width="100" height="50"/><text x="50" y="30" font-size="20" text-anchor="middle" fill="%23fff">$</text></svg>') no-repeat center/contain; opacity:.4; animation:rain linear infinite; } |
|
@keyframes rain{ 0%{ transform: translateY(-100vh) rotate(0deg);} 100%{ transform: translateY(100vh) rotate(360deg);} } |
|
|
|
/* Background animation from nancymoneysite */ |
|
.animated-background { position: fixed; top:0; left:0; width:100%; height:100%; z-index:-2; background: var(--bg); overflow:hidden; } |
|
.animated-wave { width:100%; height:100%; } |
|
.wave { fill:none; stroke:#22d3ee; stroke-width:1; stroke-opacity:0.18; animation: chartMove 6s ease-in-out infinite; filter: drop-shadow(0 0 5px rgba(34,211,238,0.25)); } |
|
.wave2 { stroke-opacity:0.12; animation-delay:-2s; } |
|
.wave3 { stroke-opacity:0.08; animation-delay:-1s; } |
|
@keyframes chartMove { |
|
0% { d: path("M0,90 L20,85 L40,80 L60,85 L80,70 L100,75"); } |
|
50% { d: path("M0,85 L20,70 L40,50 L60,30 L80,20 L100,10"); } |
|
100% { d: path("M0,90 L20,85 L40,80 L60,85 L80,70 L100,75"); } |
|
} |
|
|
|
|
|
/* Hero pot */ |
|
.hero-pot { display:flex; align-items:center; justify-content:center; gap:16px; margin: 12px 0 8px; } |
|
.hero-pot .amount { font-family:'Press Start 2P',cursive; font-size:34px; color:#fff; text-shadow:0 0 12px rgba(124,58,237,0.8); } |
|
.hero-pot .timer { color: var(--muted); font-size:10px; font-family: 'Press Start 2P', cursive; } |
|
|
|
/* Tabs */ |
|
.tabs .tabs-nav { display:flex; gap:8px; margin-bottom:8px; } |
|
.tabs .tab { background:#0e1430; color:#cbd5ff; border:1px solid rgba(124,58,237,0.25); padding:8px 12px; border-radius:8px; cursor:pointer; font-family:'Press Start 2P',cursive; font-size:11px; } |
|
.tabs .tab.active { background: linear-gradient(135deg, rgba(124,58,237,0.5), rgba(34,211,238,0.35)); color:#0b1020; } |
|
.tab-content { margin-top:8px; } |
|
.tab-content.active { display:block; } |
|
|
|
/* Numbers */ |
|
.big { font-size: 26px; font-family:'Press Start 2P',cursive; } |
|
|
|
/* 8-bit headings */ |
|
h2, h3, h4 { font-family: 'Press Start 2P', cursive; color: var(--accent); text-shadow: 2px 2px 0px rgba(0,0,0,0.5); } |
|
h2 { font-size: 14px; margin: 0 0 12px 0; } |
|
h3 { font-size: 12px; margin: 0 0 8px 0; } |
|
p { font-family: 'Press Start 2P', cursive; font-size: 10px; line-height: 1.6; } |
|
|
|
/* Select styling */ |
|
select { |
|
background: #0e1430; |
|
color: var(--text); |
|
border: 1px solid rgba(124,58,237,0.25); |
|
border-radius: 8px; |
|
padding: 10px; |
|
font-family: 'Press Start 2P', cursive; |
|
font-size: 10px; |
|
} |
|
|
|
/* Link styling */ |
|
a { |
|
color: var(--accent); |
|
text-decoration: none; |
|
font-family: 'Press Start 2P', cursive; |
|
font-size: 10px; |
|
} |
|
a:hover { |
|
color: #fff; |
|
text-shadow: 0 0 8px var(--accent); |
|
} |
|
|
|
/* 8-bit Dark Theme */ |
|
:root { |
|
--bg: #0b1020; |
|
--panel: #151b2e; |
|
--text: #dbe4ff; |
|
--muted: #8ea0c7; |
|
--primary: #7c3aed; |
|
--accent: #22d3ee; |
|
} |
|
*{box-sizing:border-box} |
|
body { margin:0; background:var(--bg); color:var(--text); font-family: 'Press Start 2P', cursive; font-size: 11px; line-height: 1.6; } |
|
.hero { padding: 48px 0 28px; background: radial-gradient(1200px 600px at 50% -10%, rgba(124,58,237,0.35), transparent 60%), #0b1020; text-align:center; } |
|
.hero h1 { font-family:'Press Start 2P', cursive; margin:0 0 8px; font-size: 28px; letter-spacing: 1px; } |
|
.hero .sub { color: var(--muted); margin:0; font-family: 'Press Start 2P', cursive; font-size: 10px; } |
|
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; } |
|
.panel { background: var(--panel); border:1px solid rgba(124,58,237,0.15); border-radius: 12px; padding: 16px; margin: 16px 0; box-shadow: 0 8px 30px rgba(124,58,237,0.10); } |
|
.row { display:flex; gap:16px; flex-wrap:wrap; } |
|
.col { flex:1 1 420px; } |
|
.grid2 { display:grid; grid-template-columns: 180px 1fr; gap:8px 12px; align-items:center; } |
|
.label { color: var(--muted); font-size: 10px; font-family: 'Press Start 2P', cursive; text-transform: uppercase; } |
|
.input { background:#0e1430; color:var(--text); border:1px solid rgba(124,58,237,0.25); border-radius:8px; padding:10px; width:100%; font-family: 'Press Start 2P', cursive; font-size: 10px; } |
|
.wallet-row { display:flex; gap:8px; margin: 8px 0 12px; } |
|
.btn { background: var(--primary); color:#fff; border:0; border-radius:8px; padding:10px 14px; font-family:'Press Start 2P', cursive; box-shadow:0 0 0 3px #000, 0 8px 0 0 #000; cursor:pointer; } |
|
.btn:active { position:relative; top:2px; box-shadow:0 0 0 3px #000, 0 6px 0 0 #000; } |
|
.btn.alt { background: var(--accent); color:#0b1020; } |
|
.btn.danger { background:#ef4444; } |
|
.muted { color: var(--muted); font-family: 'Press Start 2P', cursive; font-size: 10px; } |
|
.log { background:#060912; border:1px solid rgba(124,58,237,0.15); border-radius:8px; padding:12px; min-height:160px; font-family: ui-monospace, Menlo, Monaco, Consolas, 'Courier New', monospace; overflow:auto; } |
|
.foot { display:flex; justify-content:space-between; align-items:center; padding: 16px 0 48px; color: var(--muted); font-family: 'Press Start 2P', cursive; font-size: 10px; } |
|
@media (max-width: 720px){ |
|
.grid2{grid-template-columns:1fr; gap:12px;} |
|
.label{font-size:9px; margin-bottom:4px;} |
|
h2{font-size:12px;} |
|
.hero h1{font-size:20px;} |
|
.hero-pot .amount{font-size:24px;} |
|
.btn{font-size:9px; padding:8px 10px;} |
|
.input{font-size:9px;} |
|
}
|
|
|