initial commit
This commit is contained in:
+174
@@ -0,0 +1,174 @@
|
||||
:root{
|
||||
--bg:#0b0f19;
|
||||
--panel:#0f1626;
|
||||
--panel2:#0d1322;
|
||||
--text:#e7eaf0;
|
||||
--muted:#9aa6bd;
|
||||
--border:#1f2a44;
|
||||
--accent:#6d5efc;
|
||||
--good:#22c55e;
|
||||
--warn:#f59e0b;
|
||||
--shadow: 0 10px 30px rgba(0,0,0,.35);
|
||||
--radius:18px;
|
||||
--mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
|
||||
--sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
|
||||
}
|
||||
|
||||
*{box-sizing:border-box}
|
||||
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:var(--sans)}
|
||||
a{color:inherit}
|
||||
|
||||
.app{display:flex;height:100vh;width:100vw;overflow:hidden}
|
||||
.sidebar{
|
||||
width:360px; min-width:320px; max-width:420px;
|
||||
background:linear-gradient(180deg, var(--panel) 0%, var(--panel2) 100%);
|
||||
border-right:1px solid var(--border);
|
||||
padding:16px;
|
||||
display:flex; flex-direction:column; gap:14px;
|
||||
}
|
||||
.brand{display:flex; align-items:center; gap:12px; padding:8px 8px 2px}
|
||||
.logo{
|
||||
width:44px;height:44px;border-radius:14px;
|
||||
background: radial-gradient(circle at 30% 20%, #8b7cff 0%, #6d5efc 40%, #3b33b8 100%);
|
||||
box-shadow: var(--shadow);
|
||||
display:flex; align-items:center; justify-content:center;
|
||||
font-weight:800; letter-spacing:.6px;
|
||||
}
|
||||
.brandText .title{font-weight:700}
|
||||
.brandText .subtitle{color:var(--muted);font-size:12px;margin-top:2px}
|
||||
|
||||
.panel{
|
||||
background: rgba(255,255,255,.02);
|
||||
border:1px solid var(--border);
|
||||
border-radius:var(--radius);
|
||||
padding:14px;
|
||||
box-shadow: var(--shadow);
|
||||
overflow:auto;
|
||||
}
|
||||
|
||||
.label{display:block;margin:10px 2px 6px;color:var(--muted);font-size:12px}
|
||||
.select,.input{
|
||||
width:100%;
|
||||
background:#0a1020;
|
||||
border:1px solid var(--border);
|
||||
color:var(--text);
|
||||
border-radius:12px;
|
||||
padding:10px 12px;
|
||||
outline:none;
|
||||
}
|
||||
.select:focus,.input:focus{border-color:#2a3b68; box-shadow:0 0 0 3px rgba(109,94,252,.18)}
|
||||
.hint{color:var(--muted);font-size:12px;margin-top:6px;line-height:1.3}
|
||||
|
||||
.row{display:flex; gap:12px; margin-top:8px}
|
||||
.col{flex:1}
|
||||
|
||||
.toggles{margin-top:10px; display:flex; flex-direction:column; gap:8px}
|
||||
.toggle{
|
||||
display:flex; align-items:center; gap:10px;
|
||||
padding:10px 10px;
|
||||
border:1px solid rgba(31,42,68,.8);
|
||||
background: rgba(0,0,0,.12);
|
||||
border-radius:14px;
|
||||
color:var(--text);
|
||||
user-select:none;
|
||||
}
|
||||
.toggle input{accent-color:var(--accent); width:16px; height:16px}
|
||||
|
||||
.buttons{margin-top:12px}
|
||||
.btn{
|
||||
border:1px solid var(--border);
|
||||
background: rgba(255,255,255,.04);
|
||||
color:var(--text);
|
||||
border-radius:14px;
|
||||
padding:10px 12px;
|
||||
cursor:pointer;
|
||||
transition: transform .05s ease, background .15s ease, border-color .15s ease;
|
||||
}
|
||||
.btn:hover{background: rgba(255,255,255,.06); border-color:#2a3b68}
|
||||
.btn:active{transform: translateY(1px)}
|
||||
.btn.primary{
|
||||
background: rgba(109,94,252,.18);
|
||||
border-color: rgba(109,94,252,.45);
|
||||
}
|
||||
.btn.primary:hover{background: rgba(109,94,252,.26)}
|
||||
.btn.icon{padding:6px 10px;border-radius:12px}
|
||||
|
||||
.stats{
|
||||
margin-top:14px;
|
||||
border-top:1px solid rgba(31,42,68,.7);
|
||||
padding-top:12px;
|
||||
display:flex; flex-direction:column; gap:6px;
|
||||
}
|
||||
.k{color:var(--muted);font-size:12px}
|
||||
.v{font-weight:650}
|
||||
.small{font-size:12px;color:var(--muted);line-height:1.35}
|
||||
.mono{font-family:var(--mono)}
|
||||
|
||||
.main{flex:1; position:relative}
|
||||
.globe{height:100%; width:100%}
|
||||
|
||||
/* Cesium container must fill */
|
||||
#cesiumContainer, .cesium-viewer, .cesium-viewer-cesiumWidget {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Hide default Cesium credits (we provide our own attribution elsewhere if you want) */
|
||||
.cesium-widget-credits { display:none !important; }
|
||||
|
||||
/* Top chips */
|
||||
.topbar{
|
||||
position:absolute; top:14px; left:14px; right:14px;
|
||||
display:flex; gap:10px; justify-content:flex-end;
|
||||
pointer-events:none;
|
||||
}
|
||||
.chip{
|
||||
pointer-events:none;
|
||||
padding:8px 10px;
|
||||
border-radius:999px;
|
||||
background: rgba(15,22,38,.75);
|
||||
border:1px solid rgba(31,42,68,.75);
|
||||
backdrop-filter: blur(8px);
|
||||
box-shadow: var(--shadow);
|
||||
font-size:12px;
|
||||
color: var(--muted);
|
||||
}
|
||||
.chip.warn{color:#fff; background: rgba(245,158,11,.20); border-color: rgba(245,158,11,.45)}
|
||||
|
||||
/* Detail card */
|
||||
.detail{
|
||||
position:absolute; right:14px; bottom:14px;
|
||||
width:min(520px, calc(100% - 28px));
|
||||
background: rgba(15,22,38,.92);
|
||||
border:1px solid rgba(31,42,68,.9);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
padding:12px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
.detailHeader{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:4px 2px 10px}
|
||||
.detailTitle{font-weight:750}
|
||||
.detailGrid{
|
||||
display:grid;
|
||||
grid-template-columns: repeat(2, minmax(0,1fr));
|
||||
gap:8px 16px;
|
||||
padding:8px 2px 10px;
|
||||
border-top:1px solid rgba(31,42,68,.65);
|
||||
border-bottom:1px solid rgba(31,42,68,.65);
|
||||
}
|
||||
.detailTle{
|
||||
white-space:pre;
|
||||
margin-top:10px;
|
||||
background: rgba(0,0,0,.18);
|
||||
border:1px solid rgba(31,42,68,.65);
|
||||
border-radius:14px;
|
||||
padding:10px;
|
||||
overflow:auto;
|
||||
max-height:140px;
|
||||
}
|
||||
|
||||
/* Static crisp background image behind Cesium */
|
||||
#cesiumContainer{
|
||||
background: url("/assets/bg/space.jpg") center center / cover no-repeat;
|
||||
background-color: #05060a; /* fallback */
|
||||
}
|
||||
Reference in New Issue
Block a user