242 lines
8.1 KiB
CSS
242 lines
8.1 KiB
CSS
/* Neural Lab — modern koyu tema */
|
||
:root {
|
||
--bg: #0a0e17;
|
||
--bg-2: #0f1420;
|
||
--panel: #121a28;
|
||
--panel-2: #161f30;
|
||
--line: #1e2a3d;
|
||
--line-2: #26344b;
|
||
--txt: #e6edf6;
|
||
--txt-dim: #8aa0bd;
|
||
--txt-dim2: #5f7391;
|
||
--accent: #5eead4;
|
||
--accent-2: #818cf8;
|
||
--pink: #f472b6;
|
||
--loss: #f97373;
|
||
--acc: #5eead4;
|
||
--radius: 14px;
|
||
--shadow: 0 10px 30px rgba(0,0,0,.45);
|
||
--mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
|
||
--sans: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
|
||
}
|
||
|
||
* { box-sizing: border-box; }
|
||
|
||
html, body {
|
||
margin: 0;
|
||
padding: 0;
|
||
background:
|
||
radial-gradient(1200px 700px at 15% -5%, #16223a 0%, transparent 55%),
|
||
radial-gradient(1100px 600px at 100% 0%, #1a1630 0%, transparent 45%),
|
||
var(--bg);
|
||
color: var(--txt);
|
||
font-family: var(--sans);
|
||
-webkit-font-smoothing: antialiased;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.app {
|
||
max-width: 1720px;
|
||
margin: 0 auto;
|
||
padding: 18px clamp(12px, 2vw, 28px) 28px;
|
||
}
|
||
|
||
/* ---------- Topbar ---------- */
|
||
.topbar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 18px;
|
||
flex-wrap: wrap;
|
||
padding: 14px 20px;
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
background: linear-gradient(180deg, rgba(22,31,48,.9), rgba(15,20,32,.75));
|
||
box-shadow: var(--shadow);
|
||
backdrop-filter: blur(8px);
|
||
}
|
||
.brand { display: flex; align-items: center; gap: 14px; }
|
||
.brand-dot {
|
||
width: 14px; height: 14px; border-radius: 50%;
|
||
background: radial-gradient(circle at 35% 35%, var(--accent), #0f766e);
|
||
box-shadow: 0 0 0 4px rgba(94,234,212,.12), 0 0 18px rgba(94,234,212,.55);
|
||
animation: pulse 2.4s ease-in-out infinite;
|
||
}
|
||
@keyframes pulse { 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(1.15); opacity:.8 } }
|
||
.brand-txt h1 {
|
||
margin: 0; font-size: 22px; letter-spacing: 3px; font-weight: 800;
|
||
}
|
||
.brand-txt h1 span { color: var(--accent); }
|
||
.brand-txt p { margin: 2px 0 0; font-size: 12px; color: var(--txt-dim2); letter-spacing: .3px; }
|
||
|
||
.topstats { display: flex; gap: 10px; flex-wrap: wrap; }
|
||
.stat {
|
||
min-width: 84px;
|
||
padding: 8px 14px;
|
||
border: 1px solid var(--line);
|
||
border-radius: 11px;
|
||
background: var(--panel);
|
||
display: flex; flex-direction: column; gap: 3px;
|
||
}
|
||
.stat .k { font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--txt-dim2); }
|
||
.stat b { font-family: var(--mono); font-size: 17px; font-weight: 700; }
|
||
.stat b.loss { color: var(--loss); }
|
||
.stat b.acc { color: var(--acc); }
|
||
.stat b.state { color: var(--accent-2); font-size: 14px; }
|
||
|
||
/* ---------- Grid ---------- */
|
||
.grid {
|
||
margin-top: 16px;
|
||
display: grid;
|
||
grid-template-columns: minmax(260px, 300px) minmax(380px, 1.15fr) minmax(380px, 1fr);
|
||
gap: 16px;
|
||
align-items: start;
|
||
}
|
||
@media (max-width: 1180px) {
|
||
.grid { grid-template-columns: 1fr 1fr; }
|
||
.controls { grid-column: 1 / -1; }
|
||
}
|
||
@media (max-width: 760px) {
|
||
.grid { grid-template-columns: 1fr; }
|
||
}
|
||
|
||
.panel {
|
||
border: 1px solid var(--line);
|
||
border-radius: var(--radius);
|
||
background: linear-gradient(180deg, var(--panel), var(--bg-2));
|
||
box-shadow: var(--shadow);
|
||
padding: 16px;
|
||
}
|
||
.panel-title {
|
||
margin: 0 0 14px;
|
||
font-size: 12px;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1.6px;
|
||
color: var(--txt-dim);
|
||
font-weight: 700;
|
||
border-bottom: 1px solid var(--line);
|
||
padding-bottom: 10px;
|
||
display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
|
||
}
|
||
.panel-title .hint { font-size: 10px; text-transform: none; letter-spacing: .2px; color: var(--txt-dim2); font-weight: 500; }
|
||
|
||
/* ---------- Kontroller ---------- */
|
||
.controls { display: flex; flex-direction: column; gap: 15px; }
|
||
.ctl { display: flex; flex-direction: column; gap: 7px; }
|
||
.ctl label { font-size: 12px; color: var(--txt-dim); display: flex; justify-content: space-between; align-items: baseline; }
|
||
.ctl label b { font-family: var(--mono); color: var(--accent); font-size: 13px; }
|
||
|
||
.seg { display: flex; gap: 5px; background: var(--bg-2); padding: 4px; border-radius: 10px; border: 1px solid var(--line); }
|
||
.seg button {
|
||
flex: 1;
|
||
border: none;
|
||
background: transparent;
|
||
color: var(--txt-dim);
|
||
font-family: var(--sans);
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
padding: 8px 6px;
|
||
border-radius: 7px;
|
||
cursor: pointer;
|
||
transition: all .18s;
|
||
}
|
||
.seg button:hover { color: var(--txt); background: rgba(255,255,255,.04); }
|
||
.seg button.on {
|
||
background: linear-gradient(180deg, rgba(94,234,212,.18), rgba(129,140,248,.14));
|
||
color: var(--accent);
|
||
box-shadow: inset 0 0 0 1px rgba(94,234,212,.35);
|
||
}
|
||
|
||
input[type=range] {
|
||
-webkit-appearance: none; appearance: none;
|
||
width: 100%; height: 5px; border-radius: 4px;
|
||
background: linear-gradient(90deg, var(--accent), var(--accent-2));
|
||
outline: none; cursor: pointer;
|
||
}
|
||
input[type=range]::-webkit-slider-thumb {
|
||
-webkit-appearance: none; appearance: none;
|
||
width: 18px; height: 18px; border-radius: 50%;
|
||
background: #eaf6ff; border: 2px solid var(--accent);
|
||
box-shadow: 0 0 12px rgba(94,234,212,.6); cursor: pointer;
|
||
}
|
||
input[type=range]::-moz-range-thumb {
|
||
width: 16px; height: 16px; border-radius: 50%;
|
||
background: #eaf6ff; border: 2px solid var(--accent); cursor: pointer;
|
||
}
|
||
|
||
.actions { display: flex; gap: 8px; }
|
||
button.primary, .actions button {
|
||
flex: 1;
|
||
padding: 11px 10px;
|
||
border-radius: 10px;
|
||
border: 1px solid var(--line-2);
|
||
background: var(--panel-2);
|
||
color: var(--txt);
|
||
font-family: var(--sans);
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: all .16s;
|
||
}
|
||
.actions button:hover { background: #1d283b; border-color: var(--accent-2); transform: translateY(-1px); }
|
||
.actions button:active { transform: translateY(0); }
|
||
button.primary {
|
||
background: linear-gradient(180deg, #14b8a6, #0d9488);
|
||
border-color: #14b8a6;
|
||
color: #04231f;
|
||
font-weight: 800;
|
||
}
|
||
button.primary:hover { background: linear-gradient(180deg, #2dd4bf, #14b8a6); }
|
||
button.primary.running { background: linear-gradient(180deg, #f43f5e, #e11d48); border-color: #f43f5e; color: #2b0410; }
|
||
.actions button.ghost { color: var(--txt-dim); }
|
||
|
||
.legend { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; font-size: 12px; color: var(--txt-dim); }
|
||
.lg { display: flex; align-items: center; gap: 9px; }
|
||
.lg i { width: 18px; height: 4px; border-radius: 3px; display: inline-block; }
|
||
.lg i.pos { background: linear-gradient(90deg, var(--accent), #22c55e); }
|
||
.lg i.neg { background: linear-gradient(90deg, #f43f5e, #fb7185); }
|
||
.lg i.clsA { height: 11px; width: 11px; border-radius: 50%; background: var(--accent); }
|
||
.lg i.clsB { height: 11px; width: 11px; border-radius: 50%; background: var(--pink); }
|
||
|
||
.checkline { margin: 6px 0 0; font-size: 11px; font-family: var(--mono); color: #4ade80; }
|
||
.checkline.warn { color: #fbbf24; }
|
||
|
||
/* ---------- Ağ Görselleştirme ---------- */
|
||
.netcanvas { width: 100%; border-radius: 12px; background: radial-gradient(circle at 50% 45%, #101827 0%, #0b101a 100%); border: 1px solid var(--line); }
|
||
#net { display: block; width: 100%; height: auto; }
|
||
|
||
.net-link { transition: stroke-opacity .2s; }
|
||
.net-node { cursor: pointer; transition: r .15s; }
|
||
.net-node:hover { stroke-width: 3.5; }
|
||
.net-lbl { font-family: var(--mono); font-size: 9px; fill: var(--txt-dim2); }
|
||
|
||
.nodedetail {
|
||
margin-top: 12px;
|
||
padding: 10px 13px;
|
||
border-radius: 10px;
|
||
background: var(--bg-2);
|
||
border: 1px solid var(--line);
|
||
font-family: var(--mono);
|
||
font-size: 12px;
|
||
color: var(--txt-dim);
|
||
min-height: 40px;
|
||
line-height: 1.55;
|
||
}
|
||
.nodedetail b { color: var(--accent); }
|
||
|
||
/* ---------- Karar Sınırı ---------- */
|
||
.dbwrap { display: flex; justify-content: center; }
|
||
#db { width: 100%; max-width: 440px; height: auto; border-radius: 12px; border: 1px solid var(--line); background: #0b101a; }
|
||
|
||
.charts { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
|
||
.chart { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px 6px; }
|
||
.ctitle { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
|
||
.ctitle.loss { color: var(--loss); }
|
||
.ctitle.acc { color: var(--acc); }
|
||
.chart canvas { display: block; width: 100%; height: auto; margin-top: 4px; }
|
||
|
||
.footer {
|
||
margin-top: 18px; text-align: center;
|
||
font-size: 11px; color: var(--txt-dim2); letter-spacing: .3px;
|
||
}
|