forked from numexai/cyberbeats
233 lines
7.0 KiB
CSS
233 lines
7.0 KiB
CSS
/* FluidSim — Navier-Stokes 2D sıvı simülatörü · dark neon tema */
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
|
||
:root {
|
||
--bg: #07080f;
|
||
--panel: #0d101c;
|
||
--panel2: #111527;
|
||
--edge: #1d2438;
|
||
--txt: #dfe6ff;
|
||
--muted: #7f8aab;
|
||
--cyan: #00f0ff;
|
||
--pink: #ff2bd6;
|
||
--lime: #39ff88;
|
||
--amber: #ffe14d;
|
||
}
|
||
|
||
html, body {
|
||
height: 100%;
|
||
background: radial-gradient(1200px 700px at 50% -10%, #10162b 0%, var(--bg) 55%);
|
||
color: var(--txt);
|
||
font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
.stage {
|
||
max-width: min(1180px, 95vw);
|
||
margin: 0 auto;
|
||
padding: 14px 18px 20px;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 14px;
|
||
}
|
||
|
||
/* ── üst bar ─────────────────────────── */
|
||
.topbar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 14px;
|
||
flex-wrap: wrap;
|
||
padding: 12px 16px;
|
||
background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0)) , var(--panel);
|
||
border: 1px solid var(--edge);
|
||
border-radius: 14px;
|
||
}
|
||
.brand { display: flex; align-items: center; gap: 10px; }
|
||
.brand-icon {
|
||
font-size: 22px; color: var(--cyan);
|
||
text-shadow: 0 0 12px var(--cyan);
|
||
}
|
||
.brand h1 {
|
||
font-size: 22px; letter-spacing: 3px; font-weight: 800;
|
||
font-family: "Consolas", "Courier New", monospace;
|
||
}
|
||
.brand h1 .accent { color: var(--pink); text-shadow: 0 0 14px var(--pink); }
|
||
.tagline {
|
||
font-size: 11px; color: var(--muted);
|
||
letter-spacing: 1px; border-left: 1px solid var(--edge); padding-left: 10px;
|
||
}
|
||
|
||
.hud { display: flex; gap: 8px; flex-wrap: wrap; }
|
||
.hud-cell {
|
||
display: flex; flex-direction: column; align-items: center;
|
||
min-width: 58px; padding: 6px 10px;
|
||
background: var(--panel2);
|
||
border: 1px solid var(--edge); border-radius: 10px;
|
||
}
|
||
.hud-label { font-size: 9px; letter-spacing: 1.5px; color: var(--muted); }
|
||
.hud-value {
|
||
font-size: 16px; font-weight: 700; color: var(--cyan);
|
||
font-family: "Consolas", monospace;
|
||
}
|
||
.hud-cell.accent .hud-value { color: var(--pink); }
|
||
.hud-cell.accent { border-color: rgba(255,43,214,0.4); box-shadow: 0 0 14px rgba(255,43,214,0.12) inset; }
|
||
|
||
/* ── çalışma alanı ───────────────────── */
|
||
.workspace {
|
||
display: grid;
|
||
grid-template-columns: 1fr 250px;
|
||
gap: 14px;
|
||
flex: 1;
|
||
}
|
||
|
||
.sig-panel {
|
||
position: relative;
|
||
border: 1px solid var(--edge);
|
||
border-radius: 14px;
|
||
overflow-x: hidden;
|
||
overflow-y: auto;
|
||
background: #04050a;
|
||
min-height: 420px;
|
||
/* sağ panelle eşit yükseklik davranışı; içerik uzarsa panel kendi içinde scroll */
|
||
max-height: calc(100vh - 140px);
|
||
}
|
||
.sig-panel canvas {
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
min-height: 420px;
|
||
max-height: calc(100vh - 140px);
|
||
aspect-ratio: 16 / 10;
|
||
object-fit: fill;
|
||
cursor: crosshair;
|
||
touch-action: none;
|
||
image-rendering: pixelated;
|
||
}
|
||
.legend {
|
||
position: absolute; left: 10px; bottom: 8px;
|
||
display: flex; gap: 6px; flex-wrap: wrap;
|
||
}
|
||
.lg-item {
|
||
display: inline-flex; align-items: center; gap: 4px;
|
||
background: rgba(7,8,15,0.75);
|
||
border: 1px solid var(--edge);
|
||
padding: 3px 8px; font-size: 11px; color: var(--muted);
|
||
border-radius: 999px;
|
||
}
|
||
.lg-item kbd {
|
||
background: var(--panel2); color: var(--cyan);
|
||
border: 1px solid var(--edge); border-bottom-width: 2px;
|
||
padding: 0 6px; font-size: 10px; border-radius: 6px;
|
||
font-family: "Consolas", monospace;
|
||
}
|
||
|
||
/* ── sağ panel ──────────────────────── */
|
||
.panel {
|
||
background: var(--panel);
|
||
border: 1px solid var(--edge);
|
||
border-radius: 14px;
|
||
padding: 14px;
|
||
}
|
||
.panel-title {
|
||
display: flex; align-items: center; gap: 8px;
|
||
font-size: 12px; letter-spacing: 1.5px; color: var(--txt);
|
||
margin-bottom: 12px; font-weight: 700;
|
||
}
|
||
.t-bullet {
|
||
width: 8px; height: 8px; background: var(--cyan);
|
||
box-shadow: 0 0 10px var(--cyan);
|
||
border-radius: 2px;
|
||
}
|
||
.panel-title.sub { margin-top: 6px; }
|
||
|
||
.slider-group { margin-bottom: 16px; }
|
||
.slider-head {
|
||
display: flex; justify-content: space-between; align-items: baseline;
|
||
margin-bottom: 6px;
|
||
}
|
||
.slider-head label { font-size: 11px; color: var(--muted); letter-spacing: 0.5px; }
|
||
.slider-head output {
|
||
font-family: "Consolas", monospace; font-size: 12px; color: var(--lime);
|
||
}
|
||
input[type="range"] {
|
||
width: 100%; height: 5px;
|
||
-webkit-appearance: none; appearance: none;
|
||
background: var(--panel2);
|
||
border: 1px solid var(--edge);
|
||
border-radius: 999px; outline: none;
|
||
}
|
||
input[type="range"]::-webkit-slider-thumb {
|
||
-webkit-appearance: none; appearance: none;
|
||
width: 16px; height: 16px; border-radius: 50%;
|
||
background: var(--cyan);
|
||
border: 2px solid #06121a;
|
||
box-shadow: 0 0 10px rgba(0,240,255,0.6);
|
||
cursor: pointer;
|
||
}
|
||
input[type="range"]::-moz-range-thumb {
|
||
width: 16px; height: 16px; border-radius: 50%;
|
||
background: var(--cyan); border: 2px solid #06121a; cursor: pointer;
|
||
}
|
||
|
||
.mode-list { display: flex; flex-direction: column; gap: 6px; }
|
||
.ml-item {
|
||
display: flex; align-items: center; gap: 9px;
|
||
padding: 8px 10px;
|
||
border: 1px solid var(--edge);
|
||
border-radius: 9px; font-size: 12px; color: var(--muted);
|
||
cursor: pointer; transition: all 0.15s;
|
||
user-select: none;
|
||
}
|
||
.ml-item:hover { border-color: var(--cyan); color: var(--txt); }
|
||
.ml-item.active {
|
||
border-color: var(--cyan); color: var(--txt);
|
||
background: rgba(0,240,255,0.08);
|
||
box-shadow: 0 0 12px rgba(0,240,255,0.12) inset;
|
||
}
|
||
.ml-ic { filter: grayscale(0.4); }
|
||
|
||
.stat-box {
|
||
margin-top: 14px; padding-top: 12px;
|
||
border-top: 1px dashed var(--edge);
|
||
display: flex; flex-direction: column; gap: 6px;
|
||
}
|
||
.sb-row {
|
||
display: flex; justify-content: space-between;
|
||
font-size: 11px; color: var(--muted);
|
||
}
|
||
.sb-row b { color: var(--amber); font-family: "Consolas", monospace; font-weight: 600; }
|
||
|
||
/* ── alt bilgi ───────────────────────── */
|
||
.footbar {
|
||
display: flex; justify-content: center; gap: 18px; flex-wrap: wrap;
|
||
padding: 10px; font-size: 11px; color: var(--muted);
|
||
border-top: 1px solid var(--edge);
|
||
}
|
||
.hint { opacity: 0.85; }
|
||
|
||
@media (max-width: 760px) {
|
||
.stage { padding: 10px 12px 16px; }
|
||
.workspace { grid-template-columns: 1fr; }
|
||
/* "text-5xl → responsive" karşılığı: ana başlığı küçült, taşmasın */
|
||
.brand h1 { font-size: 18px; font-weight: 800; }
|
||
.brand .brand-icon { font-size: 17px; }
|
||
.tagline { display: none; }
|
||
/* "sabit w/h → responsive" karşılığı: HUD hücrelerini esnet */
|
||
.hud { width: 100%; justify-content: space-between; gap: 6px; }
|
||
.hud-cell { flex: 1; min-width: 0; padding: 5px 4px; }
|
||
.hud-value { font-size: 14px; }
|
||
.sig-panel { min-height: 300px; }
|
||
.sig-panel canvas { min-height: 300px; }
|
||
.legend { left: 6px; right: 6px; bottom: 6px; justify-content: center; }
|
||
.lg-item { font-size: 10px; padding: 2px 6px; }
|
||
}
|
||
|
||
/* orta: 761–980px sıkışmasın */
|
||
@media (min-width: 761px) and (max-width: 980px) {
|
||
.workspace { grid-template-columns: 1fr 220px; }
|
||
.brand h1 { font-size: 19px; }
|
||
.hud-value { font-size: 14px; }
|
||
}
|