192 lines
13 KiB
CSS
192 lines
13 KiB
CSS
:root{--bg:#e6ecf4;--pane:#ffffff;--edit:#ffffff;--ink:#1b2a41;--muted:#5b6a80;--line:#cbd5e3;
|
|
--title:#cfe2f5;--title-ink:#0e2a45;--tab:#eef2f8;--hov:#e3ebf6;--hl:rgba(36,86,211,.2);--hl2:#dbe7fb;
|
|
--accent:#2456d3;--onaccent:#ffffff;--ok:#1a7f45;--err:#c62f2a;--warn:#a86a06;--onstatus:#ffffff;
|
|
--okbg:#e5f4ea;--errbg:#fbe7e5;--warnbg:#fbf0d9;--findbg:#fff0a8;--curbg:#ffd25e;--dot:#cdd5e1;
|
|
--c-com:#6b7c93;--c-str:#1f7a3d;--c-set:#a35a00;--c-act:#6b4fb3;--c-ann:#a02a74;--c-kw:#1c4fc4;--c-tok:#0b7a66;--c-lab:#4a5d78;--fs:13px;--lh:20px}
|
|
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#08111f;--pane:#0f1c30;--edit:#0b1626;--ink:#e4ecf8;--muted:#8a9db8;--line:#233752;
|
|
--title:#17476b;--title-ink:#eef6ff;--tab:#13233a;--hov:#1a2e4a;--hl:rgba(110,168,255,.28);--hl2:#1d3a5e;
|
|
--accent:#6ea8ff;--onaccent:#07162b;--ok:#4cc38a;--err:#ff7b72;--warn:#e3b341;--onstatus:#08111f;
|
|
--okbg:#0f2a27;--errbg:#2e1a24;--warnbg:#2b2617;--findbg:#4d4318;--curbg:#7a5f12;--dot:#1b2d48;
|
|
--c-com:#7e90aa;--c-str:#9ad0a0;--c-set:#e6b673;--c-act:#b39ddb;--c-ann:#f0a8d0;--c-kw:#7fb2ff;--c-tok:#7dd3c0;--c-lab:#9db4d6;}}
|
|
:root[data-theme=dark]{--bg:#08111f;--pane:#0f1c30;--edit:#0b1626;--ink:#e4ecf8;--muted:#8a9db8;--line:#233752;
|
|
--title:#17476b;--title-ink:#eef6ff;--tab:#13233a;--hov:#1a2e4a;--hl:rgba(110,168,255,.28);--hl2:#1d3a5e;
|
|
--accent:#6ea8ff;--onaccent:#07162b;--ok:#4cc38a;--err:#ff7b72;--warn:#e3b341;--onstatus:#08111f;
|
|
--okbg:#0f2a27;--errbg:#2e1a24;--warnbg:#2b2617;--findbg:#4d4318;--curbg:#7a5f12;--dot:#1b2d48;
|
|
--c-com:#7e90aa;--c-str:#9ad0a0;--c-set:#e6b673;--c-act:#b39ddb;--c-ann:#f0a8d0;--c-kw:#7fb2ff;--c-tok:#7dd3c0;--c-lab:#9db4d6;}
|
|
|
|
*{box-sizing:border-box}
|
|
[hidden]{display:none!important}
|
|
html,body{height:100%;margin:0}
|
|
body{display:flex;flex-direction:column;background:var(--bg);color:var(--ink);overflow:hidden;
|
|
font:13px/1.4 system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif}
|
|
button,input,select,textarea{font:inherit;color:inherit}
|
|
pre,code,.mono,.ta,.hl,.gutter,.out,td.mono,#pos{font-family:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'DejaVu Sans Mono','Liberation Mono',monospace}
|
|
:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
|
|
.spacer{flex:1}
|
|
.muted{color:var(--muted)}
|
|
|
|
/* menu bar */
|
|
#menubar{display:flex;align-items:center;gap:2px;height:32px;padding:0 8px;background:var(--pane);border-bottom:1px solid var(--line);flex:none}
|
|
.menu-btn{padding:4px 10px;background:none;border:0;border-radius:3px;cursor:pointer}
|
|
.menu-btn:hover,.menu-btn[aria-expanded=true]{background:var(--hov)}
|
|
#rootname{margin-left:auto;color:var(--muted);font-size:12px;padding-right:6px}
|
|
.dropdown{position:fixed;z-index:60;min-width:230px;padding:4px 0;background:var(--pane);border:1px solid var(--line)}
|
|
.mi{display:flex;align-items:center;gap:14px;padding:5px 14px 5px 26px;cursor:pointer;position:relative;white-space:nowrap}
|
|
.mi:hover,.mi:focus{background:var(--hl2);outline:0}
|
|
.mi .k{margin-left:auto;padding-left:24px;color:var(--muted);font-size:12px}
|
|
.mi .ck{position:absolute;left:8px}
|
|
.mi[aria-disabled=true]{opacity:.45;pointer-events:none}
|
|
.sep{height:1px;margin:4px 0;background:var(--line)}
|
|
|
|
/* layout */
|
|
main{flex:1;min-height:0;display:grid;grid-template-columns:var(--leftw,50%) 8px minmax(0,1fr);padding:8px}
|
|
main.no-right{grid-template-columns:minmax(0,1fr)}
|
|
main.no-right #split-v,main.no-right #right{display:none}
|
|
#right{display:grid;grid-template-rows:var(--toph,62%) 8px minmax(0,1fr);min-height:0;min-width:0}
|
|
#right.one{grid-template-rows:minmax(0,1fr)}
|
|
.split{background:none;position:relative}
|
|
.split::after{content:"";position:absolute;background:var(--line);opacity:0;transition:opacity .1s}
|
|
.split-v::after{left:3px;right:3px;top:0;bottom:0}
|
|
.split-h::after{top:3px;bottom:3px;left:0;right:0}
|
|
.split:hover::after,.split:focus-visible::after,.split.drag::after{opacity:1;background:var(--accent)}
|
|
.split-v{cursor:col-resize}
|
|
.split-h{cursor:row-resize}
|
|
.pane{display:flex;flex-direction:column;min-height:0;min-width:0;background:var(--pane);border:1px solid var(--line)}
|
|
.ptitle{display:flex;align-items:center;gap:10px;flex:none;padding:5px 6px 5px 12px;background:var(--title);color:var(--title-ink);font-weight:600}
|
|
.x{background:none;border:0;border-radius:3px;padding:0 6px;font-size:17px;line-height:1.1;cursor:pointer;opacity:.75}
|
|
.x:hover{opacity:1;background:rgba(127,127,127,.25)}
|
|
.psub{display:flex;align-items:center;gap:8px;flex:none;min-height:36px;padding:4px 8px;border-bottom:1px solid var(--line)}
|
|
.seg{display:flex;border:1px solid var(--line);border-radius:4px;overflow:hidden}
|
|
.seg button{border:0;background:none;padding:3px 11px;color:var(--muted);cursor:pointer;white-space:nowrap}
|
|
.seg button:hover{color:var(--ink)}
|
|
.seg button[aria-selected=true]{background:var(--hl2);color:var(--ink);font-weight:600}
|
|
.tools{display:flex;gap:5px}
|
|
.btn{padding:4px 12px;background:var(--pane);border:1px solid var(--line);border-radius:4px;cursor:pointer;white-space:nowrap}
|
|
.btn:hover{border-color:var(--accent)}
|
|
.btn.sm{padding:2px 9px}
|
|
.btn[aria-pressed=true]{background:var(--hl2);border-color:var(--accent)}
|
|
.btn.primary{background:var(--accent);color:var(--onaccent);border-color:var(--accent);font-weight:600}
|
|
.view{flex:1;min-height:0;position:relative;overflow:hidden}
|
|
.scroll{overflow:auto;padding:10px 14px}
|
|
.flush{padding:0}
|
|
.note{margin:0;padding:18px;color:var(--muted)}
|
|
.out{margin:0;font-size:12.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
|
|
.chip{padding:0 9px;border-radius:9px;font-size:12px;font-weight:600;background:var(--ok);color:var(--onstatus)}
|
|
.chip.warn{background:var(--warn)}
|
|
.chip.error,.chip.fail{background:var(--err)}
|
|
.chip.stale{opacity:.55}
|
|
.badge{margin-left:6px;padding:0 6px;border-radius:9px;background:var(--err);color:var(--onstatus);font-size:11px;font-weight:600}
|
|
.badge.warn{background:var(--warn)}
|
|
|
|
/* tabs and toolbar */
|
|
#tabs{display:flex;flex:none;overflow-x:auto;background:var(--tab);border-bottom:1px solid var(--line)}
|
|
.tab{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 12px;background:var(--tab);color:var(--muted);border-right:1px solid var(--line);cursor:pointer;white-space:nowrap;user-select:none}
|
|
.tab:hover{color:var(--ink)}
|
|
.tab[aria-selected=true]{background:var(--title);color:var(--title-ink);font-weight:600}
|
|
.tab .kind{font:600 11px ui-monospace,Menlo,Consolas,monospace;padding:0 4px;border:1px solid currentColor;border-radius:2px;background:none;color:inherit;opacity:.8;cursor:pointer}
|
|
.tab .kind:hover{opacity:1}
|
|
.tab .dot{width:8px;height:8px;border-radius:50%;background:var(--warn)}
|
|
.tab .tx{background:none;border:0;border-radius:3px;padding:0 5px;font-size:15px;line-height:1.1;cursor:pointer;color:inherit;opacity:.7}
|
|
.tab .tx:hover{opacity:1;background:rgba(127,127,127,.25)}
|
|
#toolbar{display:flex;align-items:center;gap:14px;flex:none;min-height:36px;padding:4px 8px;border-bottom:1px solid var(--line)}
|
|
.tb-item{display:flex;align-items:center;gap:6px;color:var(--muted)}
|
|
.tb-item select{background:var(--pane);border:1px solid var(--line);border-radius:4px;padding:2px 4px;max-width:180px}
|
|
#pos{font-size:12px}
|
|
.runbtn{padding:4px 18px;border:0;border-radius:4px;background:var(--accent);color:var(--onaccent);font-weight:600;cursor:pointer}
|
|
.runbtn[data-busy=true]{opacity:.6}
|
|
.runbtn:disabled{opacity:.4;cursor:default}
|
|
|
|
/* editor */
|
|
#editors{flex:1;min-height:0;position:relative;background:var(--edit)}
|
|
.ed{position:absolute;inset:0;display:flex;flex-direction:column}
|
|
.banner{display:flex;align-items:center;gap:10px;flex:none;padding:6px 12px;background:var(--warnbg);border-bottom:1px solid var(--line)}
|
|
.scroller{flex:1;min-height:0;overflow:auto;position:relative}
|
|
.rows{display:grid;grid-template-columns:auto 1fr;width:max-content;min-width:100%;min-height:100%}
|
|
.gutter,.hl,.ta{font-size:var(--fs);line-height:var(--lh);tab-size:4;font-variant-ligatures:none;letter-spacing:normal}
|
|
.gutter{position:sticky;left:0;z-index:1;margin:0;padding:8px 10px 8px 14px;text-align:right;color:var(--muted);background:var(--edit);border-right:1px solid var(--line);user-select:none}
|
|
.content{position:relative;min-width:0}
|
|
.hl{margin:0;padding:8px 28px 8px 10px;min-height:100%;white-space:pre;color:var(--ink);pointer-events:none}
|
|
.ta{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:8px 28px 8px 10px;border:0;resize:none;overflow:hidden;white-space:pre;background:transparent;color:transparent;caret-color:var(--ink);outline:0}
|
|
.ta::selection{background:rgba(110,168,255,.38);color:transparent}
|
|
.t-com{color:var(--c-com);font-style:italic}
|
|
.t-str{color:var(--c-str)}
|
|
.t-set{color:var(--c-set)}
|
|
.t-act{color:var(--c-act)}
|
|
.t-ann{color:var(--c-ann)}
|
|
.t-kw{color:var(--c-kw);font-weight:600}
|
|
.t-tok{color:var(--c-tok)}
|
|
.t-def{font-weight:700}
|
|
.t-tokdef{color:var(--c-tok);font-weight:700}
|
|
.t-lab{color:var(--c-lab);font-style:italic}
|
|
.t-op{color:var(--muted)}
|
|
.mk-err{background:var(--errbg);text-decoration:underline wavy var(--err);text-underline-offset:3px}
|
|
.mk-warn{text-decoration:underline wavy var(--warn);text-underline-offset:3px}
|
|
.mk-hl{background:var(--hl);box-shadow:0 0 0 1px var(--accent);border-radius:2px}
|
|
.mk-find{background:var(--findbg)}
|
|
.mk-cur{background:var(--curbg)}
|
|
.find{position:absolute;top:6px;right:22px;z-index:4;display:grid;gap:6px;padding:8px;background:var(--pane);border:1px solid var(--line)}
|
|
.find .row{display:flex;gap:5px;align-items:center}
|
|
.find input{width:190px;padding:3px 6px;background:var(--edit);border:1px solid var(--line);border-radius:3px}
|
|
.find .cnt{min-width:58px;color:var(--muted);font-size:12px}
|
|
#welcome{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--muted);text-align:center;padding:20px}
|
|
#welcome h2{margin:0;color:var(--ink);font-size:18px}
|
|
#welcome p{margin:0 0 10px}
|
|
.wbtns{display:flex;gap:8px}
|
|
|
|
/* diagram */
|
|
#dgm{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;background-color:var(--bg);background-image:radial-gradient(var(--dot) 1px,transparent 1px);background-size:22px 22px}
|
|
#dgm.drag{cursor:grabbing}
|
|
#dgm.empty{cursor:default}
|
|
#dgm.stale #stage{opacity:.45}
|
|
#stage{position:absolute;left:0;top:0;transform-origin:0 0}
|
|
#stage svg{display:block;overflow:visible}
|
|
#stage .al-node{cursor:pointer}
|
|
#stage .al-node.focus .al-box{stroke:var(--accent);stroke-width:3.5}
|
|
#stage text{user-select:none;-webkit-user-select:none}
|
|
#dnote{position:absolute;left:0;right:0;top:0}
|
|
|
|
/* tokens, problems */
|
|
table{border-collapse:collapse;width:100%;font-size:12.5px}
|
|
th{position:sticky;top:-10px;background:var(--pane);text-align:left;font-weight:600;color:var(--muted);padding:5px 10px;border-bottom:1px solid var(--line)}
|
|
td{padding:3px 10px;border-bottom:1px solid var(--line);vertical-align:top}
|
|
tbody tr:hover{background:var(--hl)}
|
|
tr.side td{opacity:.55}
|
|
td.num{text-align:right;color:var(--muted)}
|
|
.probs{list-style:none;margin:0;padding:0}
|
|
.prob{display:grid;grid-template-columns:60px 130px minmax(0,1fr) auto;gap:10px;padding:7px 14px;border-bottom:1px solid var(--line);cursor:pointer}
|
|
.prob:hover,.prob[aria-current=true]{background:var(--hl)}
|
|
.prob .sev{font-weight:600;color:var(--err)}
|
|
.prob.warning .sev{color:var(--warn)}
|
|
.prob .loc{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--muted);overflow-wrap:anywhere}
|
|
.prob .src{color:var(--muted);font-size:12px}
|
|
|
|
/* dialogs, toasts */
|
|
.modal-back{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-start;justify-content:center;padding-top:12vh;background:rgba(5,10,20,.5)}
|
|
.modal{width:min(560px,92vw);max-height:76vh;display:flex;flex-direction:column;background:var(--pane);border:1px solid var(--line)}
|
|
.modal h3{margin:0;padding:10px 14px;font-size:14px;background:var(--title);color:var(--title-ink)}
|
|
.mbody{padding:12px 14px;overflow:auto;min-height:0}
|
|
.mbody p{margin:0 0 6px}
|
|
.mfoot{display:flex;justify-content:flex-end;gap:8px;padding:10px 14px;border-top:1px solid var(--line)}
|
|
.crumbs{display:flex;flex-wrap:wrap;gap:2px;margin-bottom:8px;font-size:12.5px}
|
|
.crumbs button{background:none;border:0;padding:1px 5px;border-radius:3px;cursor:pointer;color:var(--accent)}
|
|
.crumbs button:hover{background:var(--hov)}
|
|
.flist{list-style:none;margin:8px 0 0;padding:0;height:260px;overflow:auto;border:1px solid var(--line);background:var(--edit)}
|
|
.flist li{display:flex;gap:10px;padding:4px 10px;cursor:pointer}
|
|
.flist li:hover{background:var(--hov)}
|
|
.flist li[aria-selected=true]{background:var(--hl2)}
|
|
.flist .sz{margin-left:auto;color:var(--muted);font-size:12px}
|
|
.mbody input[type=text]{width:100%;padding:5px 8px;background:var(--edit);border:1px solid var(--line);border-radius:4px}
|
|
#toasts{position:fixed;left:14px;bottom:14px;z-index:90;display:flex;flex-direction:column;gap:6px}
|
|
.toast{padding:7px 12px;background:var(--title);color:var(--title-ink);border:1px solid var(--line);max-width:420px}
|
|
.toast.error{background:var(--err);color:var(--onstatus)}
|
|
|
|
@media (max-width:900px){
|
|
body{overflow:auto}
|
|
main{display:block;overflow:visible}
|
|
.split{display:none}
|
|
#left{height:70vh}
|
|
#right{display:block;margin-top:8px}
|
|
#right>.panel{height:70vh;margin-bottom:8px}
|
|
}
|
|
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
|