リポジトリ / emssr / independent_common_compiler

/* Common scope notebook の見た目。

   色は VS Code の既定テーマの値をそのまま使う。

   地と枠は Light Modern / Dark Modern、音節の色は light_plus / dark_plus の

   token color を当てる。ここで色を新しく作らない。 */

:root {

  --bg:     #ffffff;   /* editor.background */

  --panel:  #f8f8f8;   /* sideBar.background */

  --ink:    #3b3b3b;   /* editor.foreground */

  --label:  #616161;   /* descriptionForeground */

  --axis:   #8c8c8c;   /* editorLineNumber.foreground */

  --ring:   #cecece;   /* input.border */

  --rule:   #e5e5e5;   /* panel.border */

  --sel:    #e8e8e8;   /* list.activeSelectionBackground */

  --mark:   #005fb8;   /* focusBorder。強調はこの一色 */

  /* token color（light_plus） */

  --tok-num:   #098658;   /* constant.numeric */

  --tok-key:   #0000ff;   /* keyword */

  --tok-ctrl:  #af00db;   /* keyword.control */

  --tok-var:   #001080;   /* variable */

  --tok-type:  #267f99;   /* entity.name.type */

  --tok-func:  #795e26;   /* entity.name.function */

  --tok-str:   #a31515;   /* string */

  --tok-cmt:   #008000;   /* comment */

  --tok-bad:   #cd3131;   /* invalid */

  /* 生成元の層を token color へ当てる */

  --dyad:   var(--tok-num);

  --bit:    var(--tok-ctrl);

  --store:  var(--tok-var);

  --omega:  var(--tok-key);

  --judge:  var(--tok-type);

  --region: var(--tok-type);

  --report: var(--tok-func);

  --frame:  var(--axis);

  --letter: var(--tok-str);

  /* 図の四本 */

  --acc:  var(--tok-str);    /* 境界とカット */

  --sub:  var(--tok-cmt);    /* 閉包と副次の線 */

  --warn: var(--tok-bad);    /* 出口境界と失敗 */

  --tu: #098658;

  --te: #cd3131;

  --mono: "Cascadia Mono", "Consolas", "SFMono-Regular", "Menlo", monospace;

  --ui: "Segoe UI", "Yu Gothic UI", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;

}

@media (prefers-color-scheme: dark) {

  :root:not([data-theme="light"]) {

    --bg:     #1f1f1f;

    --panel:  #181818;

    --ink:    #cccccc;

    --label:  #9d9d9d;

    --axis:   #6e7681;

    --ring:   #3c3c3c;

    --rule:   #2b2b2b;

    --sel:    #04395e;

    --mark:   #0078d4;

    --tok-num:   #b5cea8;

    --tok-key:   #569cd6;

    --tok-ctrl:  #c586c0;

    --tok-var:   #9cdcfe;

    --tok-type:  #4ec9b0;

    --tok-func:  #dcdcaa;

    --tok-str:   #ce9178;

    --tok-cmt:   #6a9955;

    --tok-bad:   #f44747;

    --tu: #b5cea8;

    --te: #f44747;

  }

}

* { box-sizing: border-box; }

[hidden] { display: none !important; }   /* display を上書きした要素にも効かせる */

html, body {

  margin: 0; height: 100%;

  background: var(--bg); color: var(--ink);

  font-family: var(--ui); font-size: 13px; line-height: 1.65;

}

button, input, select, textarea { font-family: inherit; }

/* ===== ヘッダ ===== */

#bar {

  display: flex; align-items: center; gap: 10px;

  height: 34px; padding: 0 12px;

  border-bottom: 1px solid var(--rule);

  background: var(--panel);

  font-size: 12px;

}

#bar .brand { font-weight: 650; letter-spacing: .01em; }

#bar .sp { flex: 0 0 4px; }

#bar .right { margin-left: auto; color: var(--label); display: flex; align-items: center; gap: 8px; }

#bar .right a { color: var(--mark); text-decoration: none; }

#bar .right a:hover { text-decoration: underline; }

#pick {

  font: inherit; background: var(--bg); color: var(--ink);

  border: 1px solid var(--ring); padding: 2px 6px; max-width: 320px;

}

.tag { padding: 1px 8px; border: 1px solid var(--ring); font-size: 11px; color: var(--label); }

.tag.ok  { color: var(--tu); border-color: var(--tu); }

.tag.bad { color: var(--te); border-color: var(--te); }

/* ===== 三分割 ===== */

#full {

  display: grid;

  grid-template-columns: 208px minmax(380px, 1fr) minmax(430px, 1.15fr);

  height: calc(100% - 34px);

}

body[data-mode="solo"] #full { display: none; }

body[data-mode="solo"] #bar .right .windows { display: none; }

#toc { border-right: 1px solid var(--rule); overflow: auto; padding: 10px 0 20px; background: var(--panel); }

#toc a {

  display: block; padding: 4px 12px; color: var(--label);

  text-decoration: none; font-size: 12px; border-left: 2px solid transparent;

}

#toc a:hover { background: var(--sel); }

#toc a.on { color: var(--ink); border-left-color: var(--mark); background: var(--sel); }

#toc a.add { color: var(--mark); margin-top: 8px; }

#toc .head { padding: 8px 12px 4px; color: var(--axis); font-size: 10.5px; letter-spacing: .08em; }

#sheet { overflow: auto; padding: 14px 24px 110px; }

/* ===== 道具立て ===== */

.toolbar {

  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;

  padding: 0 0 12px; border-bottom: 1px solid var(--rule); margin-bottom: 14px;

}

.toolbar button, .tools button, .adder button, .cell .bar button, .leaf > header button {

  font: inherit; font-size: 11px; padding: 3px 11px; cursor: pointer;

  border: 1px solid var(--ring); background: var(--bg); color: var(--ink);

}

.toolbar button:hover, .tools button:hover, .adder button:hover,

.cell .bar button:hover { border-color: var(--mark); color: var(--mark); }

/* ===== 表題と説明 ===== */

#intro .title {

  display: block; width: 100%; font-size: 19px; font-weight: 650;

  border: 0; border-bottom: 1px solid transparent; background: none; color: var(--ink);

  padding: 2px 0; margin: 0 0 6px; outline: 0;

}

#intro .title:hover, #intro .title:focus { border-bottom-color: var(--ring); }

#intro .lead { color: var(--label); margin: 0 0 12px; cursor: text; min-height: 1.2em; }

#intro .lead:hover { background: var(--panel); }

.leadedit, .noteedit, .settings textarea {

  display: block; width: 100%; font-family: var(--mono); font-size: 12px;

  border: 1px solid var(--ring); background: var(--bg); color: var(--ink);

  padding: 6px 8px; outline: 0; resize: vertical;

}

.leadedit { margin: 0 0 12px; min-height: 90px; }

code { font-family: var(--mono); background: var(--panel); padding: 0 3px;  }

/* ===== セル ===== */

.cell { border: 1px solid var(--rule); background: var(--panel); }

.cell.note { border: 0; border-left: 2px solid var(--ring); background: none; padding-left: 12px; }

.cell > .note { padding: 9px 12px; color: var(--label); cursor: text; }

.cell > .note:hover { background: var(--bg); }

.cell.note > .note { padding: 4px 0 6px; }

.cell > .note b { color: var(--ink); font-weight: 650; }

.cell > .note p { margin: 0 0 7px; }

.cell > .note p:last-child { margin: 0; }

.cell > .note h3, #intro .lead h3 {

  font-size: 14px; font-weight: 650; color: var(--ink);

  margin: 14px 0 6px; padding-bottom: 3px; border-bottom: 1px solid var(--rule);

}

.cell > .note h3:first-child { margin-top: 2px; }

.cell > .note h4, #intro .lead h4 { font-size: 12.5px; font-weight: 650; color: var(--ink); margin: 10px 0 4px; }

.cell .noteedit { margin: 6px 10px; width: calc(100% - 20px); }

.cell .row { display: flex; align-items: stretch; }

.cell .gut {

  flex: 0 0 48px; padding: 7px 8px; text-align: right;

  color: var(--axis); font-family: var(--mono); font-size: 11px;

  border-right: 1px solid var(--rule);

}

.cell textarea.src {

  flex: 1; min-width: 0; font-family: var(--mono); font-size: 13px; line-height: 1.75;

  border: 0; outline: 0; resize: vertical; padding: 6px 10px;

  background: var(--bg); color: var(--ink); min-height: 2.8em;

}

.cell textarea.src.over { outline: 2px solid var(--mark); outline-offset: -2px; }

.cell .bar {

  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;

  padding: 5px 10px 5px 56px; border-top: 1px solid var(--rule);

  font-size: 11px; color: var(--axis);

}

.cell .bar .hint { color: var(--axis); }

.tools { display: flex; gap: 4px; margin-left: auto; }

.cell.note .tools { padding: 0 0 6px; }

.cell .out { padding: 8px 10px 11px 56px; font-family: var(--mono); font-size: 12px; }

.cell .out:empty { display: none; }

.cell .out .err { color: var(--te); white-space: pre-wrap; }

.cell .out .expected { color: var(--tok-ctrl); white-space: pre-wrap; }

.cell .out .val { font-size: 15px; color: var(--ink); }

.cell .out .dim { color: var(--axis); }

.adder { display: flex; gap: 6px; padding: 5px 0 9px; opacity: .35; transition: opacity .12s; }

.adder:hover { opacity: 1; }

/* ===== 設定 ===== */

.settings { margin: 0; border-top: 1px solid var(--rule); }

.cell .settings { padding: 0 10px 8px 56px; }

#intro .settings { border: 0; margin: 0 0 16px; }

.settings > summary {

  cursor: pointer; font-size: 11px; color: var(--axis); padding: 5px 0;

  list-style: none;

}

.settings > summary::before { content: '▸ '; }

.settings[open] > summary::before { content: '▾ '; }

.fields { display: flex; gap: 12px; flex-wrap: wrap; padding: 2px 0 6px; }

.field { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--label); }

.field input {

  font-family: var(--mono); font-size: 11.5px; padding: 2px 5px;

  border: 1px solid var(--ring); background: var(--bg); color: var(--ink);

}

.formula {

  font-family: var(--mono); font-size: 12px; color: var(--label);

  border-left: 2px solid var(--ring); padding: 2px 0 2px 10px; margin: 8px 0 10px;

  white-space: pre-wrap; overflow-x: auto;

}

table { border-collapse: collapse; font-size: 11.5px; margin: 6px 0 10px; }

th, td { border: 1px solid var(--rule); padding: 1px 7px; text-align: right; }

th { color: var(--label); font-weight: 500; background: var(--panel); }

td.l, th.l { text-align: left; }

/* ===== scope のパネル ===== */

#scopewrap { border-left: 1px solid var(--rule); display: flex; flex-direction: column; min-width: 0; }

#palette {

  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;

  padding: 5px 8px; border-bottom: 1px solid var(--rule); background: var(--panel);

}

#palette .hint { color: var(--axis); font-size: 10.5px; margin-right: 2px; }

.tab {

  font-size: 11px; padding: 2px 9px; cursor: grab;

  border: 1px solid var(--ring); background: var(--bg); color: var(--ink);

  user-select: none;

}

.tab:active { cursor: grabbing; }

#grid, #soloScope { flex: 1; min-height: 0; min-width: 0; display: flex; overflow: auto; }

.solobody { flex: 1; overflow: auto; padding: 12px 16px 30px; min-width: 0; }

.node { display: flex; min-width: 0; min-height: 0; flex: 1 1 0; }

.node.row { flex-direction: row; }

.node.col { flex-direction: column; }

.gap { flex: 0 0 5px; background: var(--rule); cursor: col-resize; }

.node.col > .gap { cursor: row-resize; }

.leaf {

  display: flex; flex-direction: column; min-width: 210px; min-height: 120px;

  border: 1px solid transparent; position: relative; background: var(--bg);

}

.leaf > header {

  display: flex; align-items: center; gap: 3px; padding: 3px 6px;

  border-bottom: 1px solid var(--rule); background: var(--panel);

  font-size: 11px; color: var(--label); cursor: grab;

}

.leaf > header select.name {

  font: inherit; font-size: 11px; font-weight: 600; color: var(--ink);

  border: 1px solid transparent; background: none; padding: 1px 2px;

}

.leaf > header select.name:hover { border-color: var(--ring); }

.leaf > header .sp { margin-left: auto; }

.leaf > header button {

  font-size: 11px; line-height: 1.2; padding: 1px 5px;

  border-color: transparent; color: var(--axis);

}

.leaf > header button:hover { border-color: var(--ring); color: var(--ink); }

.leaf > header button:disabled { opacity: .3; cursor: default; }

.leaf > .body { flex: 1; overflow: auto; padding: 11px 13px 26px; min-width: 0; }

.dropmark {

  position: absolute; background: rgba(29, 78, 216, .16);

  border: 1px solid var(--mark); pointer-events: none; z-index: 5;

}

/* ===== scope の中身 ===== */

.scopebox { margin: 0 0 18px; }

.scopebox h2 { font-size: 12px; margin: 0 0 3px; font-weight: 650; letter-spacing: .03em; }

.scopebox svg, .leaf svg, .solobody svg { display: block; max-width: 100%; height: auto; }

.scopebox table { font-family: var(--mono); }

.empty { color: var(--axis); }

svg text { font-family: var(--mono); fill: var(--label); }

svg .lab { fill: var(--ink); }

svg .wire { stroke: var(--axis); stroke-width: 1; fill: none; }

svg .edge { stroke: var(--ring); stroke-width: 1; fill: none; }

svg .box { fill: var(--bg); stroke: var(--axis); stroke-width: 1; }

svg .axis { stroke: var(--axis); stroke-width: 1; }

svg .grid { stroke: var(--ring); stroke-width: .7; }

/* ===== 単独ウィンドウ ===== */

body[data-mode="solo"] #solo { display: flex; flex-direction: column; height: calc(100% - 34px); }

#soloHead {

  padding: 6px 14px; border-bottom: 1px solid var(--rule);

  background: var(--panel); font-size: 11.5px; color: var(--label);

}

/* ===== 起動 ===== */

#boot { position: fixed; inset: 0; background: var(--bg); display: flex;

        align-items: center; justify-content: center; z-index: 40; }

#boot.done { display: none; }

.bootbox { width: 460px; }

.bootbox h1 { font-size: 16px; margin: 0 0 6px; font-weight: 650; }

.bootbox p { color: var(--label); margin: 0 0 12px; }

#bootlog { font-family: var(--mono); font-size: 11.5px; color: var(--axis);

           margin: 0; padding-left: 18px; }

#bootlog li.ok { color: var(--label); }

#bootlog li.bad { color: var(--te); }

/* ===== 説明セルの Markdown =====

   見出しから表まで、紙の技術文書の組み方に寄せる。 */

.md > :first-child { margin-top: 0; }

.md > :last-child { margin-bottom: 0; }

.md p { margin: 0 0 8px; }

.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 {

  color: var(--ink); font-weight: 650; line-height: 1.4;

  margin: 16px 0 6px;

}

.md h1 { font-size: 17px; padding-bottom: 4px; border-bottom: 1px solid var(--rule); }

.md h2 { font-size: 15px; padding-bottom: 3px; border-bottom: 1px solid var(--rule); }

.md h3 { font-size: 13.5px; }

.md h4, .md h5, .md h6 { font-size: 12.5px; }

.md ul, .md ol { margin: 0 0 8px; padding-left: 1.5em; }

.md li { margin: 1px 0; }

.md li > p { margin: 0 0 4px; }

.md blockquote {

  margin: 8px 0; padding: 2px 0 2px 12px;

  border-left: 3px solid var(--ring); color: var(--label);

}

.md hr { border: 0; border-top: 1px solid var(--rule); margin: 14px 0; }

.md a { color: var(--mark); }

.md code {

  font-family: var(--mono); font-size: 92%;

  background: var(--panel); border: 1px solid var(--rule); padding: 0 3px;

}

.md pre {

  margin: 8px 0; padding: 8px 10px; overflow-x: auto;

  background: var(--panel); border: 1px solid var(--rule);

}

.md pre code { background: none; border: 0; padding: 0; font-size: 12px; line-height: 1.55; }

.md table { border-collapse: collapse; margin: 8px 0; font-size: 12px; }

.md th, .md td { border: 1px solid var(--rule); padding: 3px 9px; text-align: left; }

.md th { background: var(--panel); font-weight: 600; color: var(--label); }

.md img, .md video, .md audio, .md svg { display: block; max-width: 100%; margin: 8px 0; }

.md figure { margin: 10px 0; }

.md figcaption { font-size: 11.5px; color: var(--axis); margin-top: 3px; }

.md kbd {

  font-family: var(--mono); font-size: 91%; padding: 0 4px;

  border: 1px solid var(--ring); border-bottom-width: 2px;

}

.md details { margin: 8px 0; }

.md details > summary { cursor: pointer; color: var(--label); }

.md sup, .md sub { font-size: 78%; }

/* 数式。行の中と別行で字送りを変える */

.md .katex { font-size: 1.04em; }

.md .katex-display { margin: 10px 0; overflow-x: auto; overflow-y: hidden; padding: 2px 0; }

/* 書きながら見る欄 */

.livepreview {

  margin: 4px 0 10px; padding: 8px 10px;

  border: 1px dashed var(--ring); background: var(--panel);

  color: var(--label); max-height: 44vh; overflow: auto;

}

.cell .livepreview { margin: 4px 10px 10px; }

textarea.over { outline: 2px solid var(--mark); outline-offset: -2px; }