2025-11-08 09:06:11 -06:00
|
|
|
:root{
|
|
|
|
|
--bg:#0b0b0f;
|
|
|
|
|
--panel:#111117;
|
|
|
|
|
--gold:#d4af37;
|
|
|
|
|
--text:#eaeaea;
|
|
|
|
|
--muted:#999;
|
|
|
|
|
--border:#20202a;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
*{box-sizing:border-box}
|
|
|
|
|
html,body{height:100%}
|
|
|
|
|
body{
|
|
|
|
|
margin:0; background:var(--bg); color:var(--text);
|
|
|
|
|
font:16px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, Apple Color Emoji, Segoe UI Emoji;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#app{
|
|
|
|
|
display:grid; grid-template-columns:320px 1fr; min-height:100vh;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sidebar{
|
|
|
|
|
border-right:1px solid var(--border);
|
|
|
|
|
background:var(--panel);
|
|
|
|
|
display:flex; flex-direction:column; min-height:0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.sidehead{padding:12px 14px; border-bottom:1px solid var(--border)}
|
|
|
|
|
.sidehead h1{margin:0 0 8px; font-weight:700; letter-spacing:.5px; color:var(--gold)}
|
|
|
|
|
.controls{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
|
|
|
|
|
.controls label{font-size:13px; color:var(--muted)}
|
|
|
|
|
.controls select{background:#000; color:var(--text); border:1px solid var(--border); padding:4px 6px}
|
|
|
|
|
|
|
|
|
|
#tree{padding:8px 10px; overflow:auto; flex:1}
|
|
|
|
|
.tree-node{margin:2px 0}
|
|
|
|
|
.dir>.dir-label{cursor:pointer; display:flex; align-items:center; gap:6px; padding:6px 6px; border-radius:8px}
|
|
|
|
|
.dir>.dir-label:hover{background:#15151d}
|
|
|
|
|
.dir.open>.children{display:block}
|
|
|
|
|
.dir .children{display:none; padding-left:14px; border-left:1px dashed #2a2a36; margin-left:8px}
|
|
|
|
|
|
|
|
|
|
.file{
|
|
|
|
|
display:flex; align-items:center; gap:8px;
|
|
|
|
|
color:var(--text); text-decoration:none; padding:4px 6px; border-radius:8px;
|
|
|
|
|
}
|
|
|
|
|
.file:hover{background:#15151d}
|
|
|
|
|
.file.active{background:rgba(212,175,55,.14); border:1px solid rgba(212,175,55,.25)}
|
|
|
|
|
.file .meta{color:var(--muted); font-size:12px; margin-left:auto}
|
|
|
|
|
.pin{color:var(--gold); font-weight:700; font-size:12px; padding:0 4px; border:1px solid var(--gold); border-radius:6px}
|
|
|
|
|
|
|
|
|
|
.content{display:flex; flex-direction:column; min-height:0}
|
|
|
|
|
.viewer{flex:1; min-height:0; display:grid}
|
|
|
|
|
.viewer iframe{width:100%; height:100%; border:0; background:#fff; border-top:1px solid var(--border)}
|
|
|
|
|
.viewer .md{padding:22px 24px; max-width:900px; margin:0 auto}
|
|
|
|
|
.viewer .md pre, .viewer .md code{overflow-x:auto; word-break:break-word}
|
|
|
|
|
|
|
|
|
|
.foot{border-top:1px solid var(--border); color:var(--muted); font-size:12px; padding:8px 12px}
|
|
|
|
|
|
|
|
|
|
@media (max-width: 900px){
|
|
|
|
|
#app{grid-template-columns:1fr; grid-template-rows:minmax(200px,44vh) 1fr}
|
|
|
|
|
.sidebar{min-height:200px}
|
|
|
|
|
.content{min-height:calc(56vh - 1px)}
|
|
|
|
|
}
|
