Numex yayın: style.css
This commit is contained in:
parent
24ac7a4676
commit
e9531e401b
203
style.css
Normal file
203
style.css
Normal file
|
|
@ -0,0 +1,203 @@
|
||||||
|
:root {
|
||||||
|
--bg: #070a14;
|
||||||
|
--bg2: #0b1020;
|
||||||
|
--panel: rgba(18, 25, 48, 0.62);
|
||||||
|
--panel-solid: #101731;
|
||||||
|
--stroke: rgba(140, 170, 255, 0.16);
|
||||||
|
--neon: #37e0ff;
|
||||||
|
--neon2: #8f7bff;
|
||||||
|
--pink: #ff5d9e;
|
||||||
|
--red: #ff4d6d;
|
||||||
|
--green: #39f5a0;
|
||||||
|
--txt: #dce6ff;
|
||||||
|
--dim: #8a97bd;
|
||||||
|
--glass-blur: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
|
||||||
|
background:
|
||||||
|
radial-gradient(1200px 600px at 15% -10%, rgba(55,224,255,0.10), transparent 60%),
|
||||||
|
radial-gradient(1000px 700px at 110% 110%, rgba(143,123,255,0.12), transparent 60%),
|
||||||
|
var(--bg);
|
||||||
|
color: var(--txt);
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 14px;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- ÜST BAR ---------- */
|
||||||
|
.topbar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 12px 18px;
|
||||||
|
border: 1px solid var(--stroke);
|
||||||
|
border-radius: 16px;
|
||||||
|
background: var(--panel);
|
||||||
|
backdrop-filter: blur(var(--glass-blur));
|
||||||
|
-webkit-backdrop-filter: blur(var(--glass-blur));
|
||||||
|
box-shadow: 0 6px 30px rgba(0,0,0,0.35);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.brand { display: flex; align-items: center; gap: 12px; }
|
||||||
|
.logo-mark {
|
||||||
|
width: 12px; height: 22px; border-radius: 3px;
|
||||||
|
background: linear-gradient(#37e0ff, #8f7bff, #ff5d9e);
|
||||||
|
box-shadow: 0 0 14px rgba(143,123,255,0.8);
|
||||||
|
}
|
||||||
|
.brand h1 { font-size: 22px; letter-spacing: 3px; font-weight: 800; }
|
||||||
|
.brand h1 span { color: var(--neon); text-shadow: 0 0 12px rgba(55,224,255,0.7); }
|
||||||
|
.tagline { font-size: 11px; color: var(--dim); letter-spacing: 1px; }
|
||||||
|
|
||||||
|
.hud { display: flex; gap: 22px; }
|
||||||
|
.hud-cell { display: flex; flex-direction: column; align-items: flex-end; }
|
||||||
|
.hud-label { font-size: 9px; letter-spacing: 2px; color: var(--dim); }
|
||||||
|
.hud-value {
|
||||||
|
font-size: 17px; font-weight: 700; font-family: "Consolas", monospace;
|
||||||
|
color: var(--neon);
|
||||||
|
}
|
||||||
|
.hud-cell.accent .hud-value { color: var(--pink); }
|
||||||
|
|
||||||
|
/* ---------- ÇALIŞMA ALANI ---------- */
|
||||||
|
.workspace {
|
||||||
|
flex: 1;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 265px 1fr 320px;
|
||||||
|
gap: 12px;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel {
|
||||||
|
position: relative;
|
||||||
|
border: 1px solid var(--stroke);
|
||||||
|
border-radius: 16px;
|
||||||
|
background: var(--panel);
|
||||||
|
backdrop-filter: blur(var(--glass-blur));
|
||||||
|
-webkit-backdrop-filter: blur(var(--glass-blur));
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 14px;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 6px 28px rgba(0,0,0,0.3);
|
||||||
|
}
|
||||||
|
/* panelin üst kenarına ince "canlı neon" vurgu şeridi */
|
||||||
|
.panel::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
|
||||||
|
background: linear-gradient(90deg, transparent, rgba(55,224,255,0.55), rgba(143,123,255,0.55), transparent);
|
||||||
|
opacity: 0.75;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.panel-title {
|
||||||
|
display: flex; align-items: center; gap: 8px;
|
||||||
|
font-size: 12px; letter-spacing: 2px; font-weight: 700; color: var(--txt);
|
||||||
|
margin-bottom: 14px;
|
||||||
|
}
|
||||||
|
.panel-title.sub { margin-top: 16px; margin-bottom: 8px; font-size: 11px; }
|
||||||
|
.t-bullet { width: 8px; height: 8px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 8px var(--neon); }
|
||||||
|
.t-bullet.warm { background: var(--pink); box-shadow: 0 0 8px var(--pink); }
|
||||||
|
|
||||||
|
/* ---------- SOL EDITOR ---------- */
|
||||||
|
.editor-panel { gap: 4px; overflow-y: auto; }
|
||||||
|
.editor-panel::-webkit-scrollbar { width: 5px; }
|
||||||
|
.editor-panel::-webkit-scrollbar-thumb { background: rgba(140,170,255,0.25); border-radius: 4px; }
|
||||||
|
|
||||||
|
.slider-group { margin-bottom: 14px; }
|
||||||
|
.slider-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
|
||||||
|
.slider-head label { font-size: 10px; letter-spacing: 1px; color: var(--dim); }
|
||||||
|
.slider-head output { font-family: "Consolas", monospace; color: var(--neon); font-size: 15px; font-weight: 700; }
|
||||||
|
|
||||||
|
input[type="range"] {
|
||||||
|
width: 100%; height: 5px; -webkit-appearance: none; appearance: none;
|
||||||
|
background: linear-gradient(90deg, rgba(55,224,255,0.5), rgba(143,123,255,0.5));
|
||||||
|
border-radius: 6px; outline: none; cursor: pointer;
|
||||||
|
}
|
||||||
|
input[type="range"]::-webkit-slider-thumb {
|
||||||
|
-webkit-appearance: none; appearance: none; width: 15px; height: 15px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #fff;
|
||||||
|
border: 2px solid var(--neon);
|
||||||
|
box-shadow: 0 0 10px rgba(55,224,255,0.9);
|
||||||
|
}
|
||||||
|
.slider-scale { display: flex; justify-content: space-between; font-size: 9px; color: var(--dim); margin-top: 4px; }
|
||||||
|
.lr-group { padding-top: 2px; }
|
||||||
|
|
||||||
|
.activation-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
|
||||||
|
.act-label { font-size: 10px; letter-spacing: 1px; color: var(--dim); }
|
||||||
|
.segmented { display: flex; border: 1px solid var(--stroke); border-radius: 9px; overflow: hidden; }
|
||||||
|
.seg-btn {
|
||||||
|
flex: 1; padding: 7px 0; font-size: 10px; letter-spacing: 1px; font-weight: 700;
|
||||||
|
background: transparent; color: var(--dim); border: none; cursor: pointer;
|
||||||
|
}
|
||||||
|
.seg-btn.active { background: linear-gradient(90deg, rgba(55,224,255,0.25), rgba(143,123,255,0.25)); color: var(--txt); box-shadow: inset 0 0 0 1px rgba(55,224,255,0.5); }
|
||||||
|
|
||||||
|
.controls { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
|
||||||
|
.ctrl-btn {
|
||||||
|
display: flex; align-items: center; justify-content: center; gap: 8px;
|
||||||
|
padding: 10px; border-radius: 10px; border: 1px solid var(--stroke);
|
||||||
|
font-weight: 700; letter-spacing: 1px; cursor: pointer; font-size: 12px;
|
||||||
|
background: linear-gradient(90deg, rgba(55,224,255,0.18), rgba(143,123,255,0.18));
|
||||||
|
color: var(--txt); transition: all .15s;
|
||||||
|
}
|
||||||
|
.ctrl-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(55,224,255,0.25); }
|
||||||
|
.ctrl-btn.run.running { background: rgba(255,77,109,0.24); box-shadow: 0 0 16px rgba(255,77,109,0.35); }
|
||||||
|
.ctrl-btn.run.running span::after { content: "LOW"; margin-left: 2px; font-size: 9px; opacity: .8; }
|
||||||
|
.ctrl-btn.step span::before { }
|
||||||
|
.ctrl-btn.reset { background: rgba(148,170,255,0.10); border-color: rgba(140,170,255,0.28); }
|
||||||
|
.ctrl-btn.reset span { color: #b9c6ea; text-shadow: 0 0 8px rgba(148,170,255,0.35); }
|
||||||
|
.ctrl-btn:active { transform: translateY(1px); }
|
||||||
|
|
||||||
|
.arch-preview { margin-top: auto; padding-top: 8px; }
|
||||||
|
.arch-label { font-size: 10px; letter-spacing: 1px; color: var(--dim); display: block; margin-bottom: 8px; }
|
||||||
|
.arch-bars { display: flex; align-items: flex-end; gap: 4px; height: 46px; align-items: center; justify-content: center; }
|
||||||
|
.arch-bar {
|
||||||
|
width: 22px; border-radius: 5px;
|
||||||
|
background: linear-gradient(180deg, var(--neon), var(--neon2));
|
||||||
|
box-shadow: 0 0 8px rgba(55,224,255,0.5);
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
font-size: 9px; color: #061020; font-weight: 800;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ---------- ORTA NET ---------- */
|
||||||
|
.net-section { position: relative; padding: 10px; }
|
||||||
|
.net-head { display: flex; justify-content: space-between; align-items: center; }
|
||||||
|
.net-layer-hint { font-size: 10px; letter-spacing: 1px; color: var(--dim); margin-bottom: 4px; }
|
||||||
|
#neuralCanvas {
|
||||||
|
flex: 1; width: 100%; border-radius: 10px; display: block; min-height: 0;
|
||||||
|
background:
|
||||||
|
radial-gradient(700px 400px at 50% 30%, rgba(34,50,100,0.6), rgba(7,10,20,0.95)),
|
||||||
|
linear-gradient(160deg, rgba(55,224,255,0.03), transparent 45%, rgba(143,123,255,0.04));
|
||||||
|
box-shadow: inset 0 0 60px rgba(20,40,90,0.35), inset 0 0 2px rgba(90,160,255,0.25);
|
||||||
|
}
|
||||||
|
.legend {
|
||||||
|
display: flex; justify-content: center; gap: 16px; padding-top: 10px; flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.lg-item { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--dim); letter-spacing: 1px; }
|
||||||
|
.swatch { width: 12px; height: 5px; border-radius: 3px; display: inline-block; }
|
||||||
|
.swatch.pos { background: #37c7ff; box-shadow: 0 0 6px #37c7ff; }
|
||||||
|
.swatch.neg { background: #ff4d5e; box-shadow: 0 0 6px #ff4d5e; }
|
||||||
|
.swatch.fwd { background: #8f7bff; box-shadow: 0 0 6px #8f7bff; }
|
||||||
|
.swatch.bwd { background: linear-gradient(90deg,#ffb03a,#ff5d3a); box-shadow: 0 0 6px #ff5d3a; }
|
||||||
|
|
||||||
|
/* ---------- SAĞ HEAT + LOSS ---------- */
|
||||||
|
.heat-panel { overflow-y: auto; }
|
||||||
|
.heat-panel::-webkit-scrollbar { width: 5px; }
|
||||||
|
.heat-panel::-webkit-scrollbar-thumb { background: rgba(140,170,255,0.25); border-radius: 4px; }
|
||||||
|
#heatCanvas { width: 100%; height: 210px; border-radius: 10px; background: rgba(5,8,18,0.6); flex-shrink: 0; }
|
||||||
|
.heat-scale { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 9px; color: var(--dim); letter-spacing: 1px; flex-shrink: 0; }
|
||||||
|
.heat-gradient-bar {
|
||||||
|
flex: 1; height: 6px; border-radius: 4px;
|
||||||
|
background: linear-gradient(90deg, rgba(255,60,80,0.9), rgba(20,24,40,0.9), rgba(55,199,255,0.9));
|
||||||
|
}
|
||||||
|
#lossCanvas { width: 100%; height: 130px; border-radius: 10px; background: rgba(5,8,18,0.6); flex-shrink: 0; }
|
||||||
Loading…
Reference in New Issue
Block a user