Cleanup init commit
This commit is contained in:
Extraltodeus
@@ -0,0 +1,455 @@
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
--bg: #14161a;
|
||||
--panel: #1c1f26;
|
||||
--panel2: #23272f;
|
||||
--border: #333842;
|
||||
--text: #d8dce3;
|
||||
--muted: #8b93a1;
|
||||
--accent: #e8a13c;
|
||||
--accent2: #6cb8e0;
|
||||
--danger: #d0654f;
|
||||
}
|
||||
|
||||
body { background: var(--bg); color: var(--text); font: 14px/1.45 'Segoe UI', system-ui, sans-serif; }
|
||||
|
||||
#root { display: flex; height: 100vh; }
|
||||
|
||||
.sidebar {
|
||||
width: 300px; flex-shrink: 0; background: var(--panel);
|
||||
border-right: 1px solid var(--border); padding: 14px;
|
||||
display: flex; flex-direction: column; gap: 12px; overflow-y: auto;
|
||||
}
|
||||
.sidebar h1 { font-size: 17px; color: var(--accent); }
|
||||
.sidebar h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-top: 4px; }
|
||||
|
||||
.model-list { display: flex; flex-direction: column; gap: 4px; }
|
||||
.model-item {
|
||||
padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px;
|
||||
cursor: pointer; font-size: 13px; word-break: break-all;
|
||||
}
|
||||
.model-item:hover { background: var(--panel2); }
|
||||
.model-item.selected { border-color: var(--accent); background: var(--panel2); }
|
||||
.model-item .src { color: var(--muted); font-size: 11px; }
|
||||
.model-item.loaded { border-color: var(--accent2); }
|
||||
.model-item-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
|
||||
.model-del {
|
||||
padding: 0 5px; font-size: 12px; border: none; background: transparent;
|
||||
flex-shrink: 0; opacity: .55; display: inline-flex; align-items: center;
|
||||
}
|
||||
.model-item:hover .model-del { opacity: 1; }
|
||||
.model-del:disabled { opacity: .2; }
|
||||
/* red = deletes the FILES from disk; blue = only forgets a registered entry */
|
||||
.model-trash { color: var(--danger); }
|
||||
.model-trash:hover:not(:disabled) { color: #ff7a6b; border-color: transparent; }
|
||||
.model-unreg { color: var(--accent2); }
|
||||
.model-unreg:hover:not(:disabled) { color: #9fd4f2; border-color: transparent; }
|
||||
|
||||
.row { display: flex; gap: 6px; align-items: center; }
|
||||
.row label { color: var(--muted); font-size: 12px; width: 58px; flex-shrink: 0; }
|
||||
select, input[type="text"], input[type="number"], textarea {
|
||||
background: var(--panel2); color: var(--text); border: 1px solid var(--border);
|
||||
border-radius: 5px; padding: 5px 7px; font: inherit; width: 100%;
|
||||
}
|
||||
textarea { resize: vertical; }
|
||||
|
||||
button {
|
||||
background: var(--panel2); color: var(--text); border: 1px solid var(--border);
|
||||
border-radius: 6px; padding: 6px 12px; cursor: pointer; font: inherit;
|
||||
}
|
||||
button:hover:not(:disabled) { border-color: var(--accent); }
|
||||
button:disabled { opacity: .45; cursor: default; }
|
||||
button.primary { background: var(--accent); color: #14161a; border-color: var(--accent); font-weight: 600; }
|
||||
button.danger { border-color: var(--danger); color: var(--danger); }
|
||||
|
||||
.gpu { margin-bottom: 8px; }
|
||||
.gpu .name { font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; }
|
||||
.gpu .bar { height: 8px; background: var(--panel2); border-radius: 4px; overflow: hidden; margin-top: 3px; }
|
||||
.gpu .fill { height: 100%; background: var(--accent2); transition: width .5s; }
|
||||
.dl-bar { height: 5px; background: var(--panel2); border-radius: 3px; overflow: hidden; margin-top: 3px; }
|
||||
.dl-fill { height: 100%; background: var(--accent); transition: width .4s; }
|
||||
|
||||
/* flex-shrink 0: as a flex item of the (full) sidebar it used to get squeezed
|
||||
to min-height, and the download progress bar overflowed onto "Browse" */
|
||||
.status-line { font-size: 12px; color: var(--muted); min-height: 16px; word-break: break-word; flex-shrink: 0; }
|
||||
.status-line .ok { color: var(--accent2); }
|
||||
.status-line .err { color: var(--danger); }
|
||||
|
||||
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
|
||||
|
||||
.messages { flex: 1; overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }
|
||||
.msg { max-width: 780px; padding: 10px 14px; border-radius: 10px; white-space: pre-wrap; word-break: break-word; }
|
||||
.msg.user { background: var(--panel2); align-self: flex-end; }
|
||||
.msg.assistant { background: var(--panel); border: 1px solid var(--border); align-self: flex-start; }
|
||||
.msg .msgmeta { font-size: 11px; color: var(--muted); margin-top: 6px; }
|
||||
|
||||
/* markdown rendering inside assistant bubbles (the bubble keeps pre-wrap for
|
||||
plain text; .md content manages its own whitespace) */
|
||||
.msg .md { white-space: normal; }
|
||||
.msg .md > :first-child { margin-top: 0; }
|
||||
.msg .md > :last-child { margin-bottom: 0; }
|
||||
.msg .md p, .msg .md ul, .msg .md ol, .msg .md pre, .msg .md blockquote,
|
||||
.msg .md h1, .msg .md h2, .msg .md h3, .msg .md h4, .msg .md table { margin: 6px 0; }
|
||||
.msg .md h1, .msg .md h2 { font-size: 15px; }
|
||||
.msg .md h3, .msg .md h4 { font-size: 13.5px; }
|
||||
.msg .md ul, .msg .md ol { padding-left: 20px; }
|
||||
.msg .md code {
|
||||
background: var(--panel2); padding: 1px 4px; border-radius: 4px;
|
||||
font-size: 12px; font-family: Consolas, 'Fira Code', monospace;
|
||||
}
|
||||
.msg .md pre {
|
||||
background: var(--panel2); border: 1px solid var(--border); border-radius: 6px;
|
||||
padding: 8px 10px; overflow-x: auto;
|
||||
}
|
||||
.msg .md pre code { background: none; padding: 0; }
|
||||
.msg .md table { border-collapse: collapse; }
|
||||
.msg .md th, .msg .md td { border: 1px solid var(--border); padding: 3px 8px; font-size: 12.5px; }
|
||||
.msg .md blockquote { border-left: 3px solid var(--border); padding-left: 10px; color: var(--muted); }
|
||||
.msg .md a { color: var(--accent2); }
|
||||
|
||||
/* inline edit of an assistant reply */
|
||||
.msg-edit textarea { width: 100%; min-width: 420px; resize: vertical; }
|
||||
.msg-edit-actions { display: flex; gap: 8px; margin-top: 6px; }
|
||||
|
||||
.composer { border-top: 1px solid var(--border); padding: 12px 22px; display: flex; flex-direction: column; gap: 8px; }
|
||||
.composer .controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
|
||||
.composer .controls label { font-size: 12px; color: var(--muted); }
|
||||
.composer .controls input { width: 64px; }
|
||||
.composer .inputrow { display: flex; gap: 8px; }
|
||||
.composer .inputrow textarea { flex: 1; min-height: 44px; max-height: 160px; }
|
||||
|
||||
.tabs { display: flex; gap: 4px; }
|
||||
.tabs button { flex: 1; padding: 5px 0; font-size: 12px; border-radius: 6px 6px 0 0; border-bottom: 2px solid transparent; }
|
||||
.tabs button.tab-on { border-bottom-color: var(--accent); color: var(--accent); font-weight: 600; }
|
||||
|
||||
.exp-tag {
|
||||
font-size: 9px; color: var(--danger); border: 1px solid var(--danger);
|
||||
border-radius: 6px; padding: 0 5px; vertical-align: middle; letter-spacing: .05em;
|
||||
}
|
||||
/* export greyed out when the "per-layer steering" mode doesn't produce a faithful checkpoint */
|
||||
.exp-grid { display: flex; flex-direction: column; gap: 7px; transition: opacity .18s; }
|
||||
.exp-grid-off { opacity: .4; pointer-events: none; }
|
||||
.exp-disabled-note { color: var(--danger); }
|
||||
|
||||
.diff-btn { padding: 0 6px; font-size: 11px; margin-left: 6px; }
|
||||
.diff-table { border-collapse: collapse; font-size: 11px; }
|
||||
.diff-table th { color: var(--muted); font-weight: 400; padding: 2px 4px; max-width: 60px; overflow: hidden; }
|
||||
.diff-table td { padding: 1px 4px; border: 1px solid rgba(255,255,255,.04); white-space: nowrap; }
|
||||
.diff-lay { color: var(--muted); }
|
||||
.diff-same { opacity: .45; }
|
||||
.diff-diff { outline: 1px solid var(--accent); }
|
||||
.diff-a { color: var(--accent2); }
|
||||
.diff-b { color: var(--accent); }
|
||||
.lv-ablate { cursor: pointer; }
|
||||
.lv-ablate:hover { color: var(--danger); }
|
||||
|
||||
.reg-list { display: flex; flex-direction: column; gap: 3px; }
|
||||
.reg-item {
|
||||
display: flex; justify-content: space-between; align-items: center; gap: 6px;
|
||||
font-size: 12px; padding: 4px 7px; border: 1px solid var(--border); border-radius: 5px;
|
||||
}
|
||||
.reg-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.reg-item button { padding: 2px 8px; font-size: 12px; flex-shrink: 0; }
|
||||
.preset-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
|
||||
.preset-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.preset-model { font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
.reg-item2 {
|
||||
display: flex; justify-content: space-between; align-items: center; gap: 8px;
|
||||
padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px;
|
||||
}
|
||||
.reg-item2.reg-warn { border-color: var(--danger); }
|
||||
.reg-item2 .reg-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
|
||||
.reg-item2 button { padding: 3px 9px; font-size: 12px; flex-shrink: 0; align-self: center; }
|
||||
.reg-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
.reg-tag {
|
||||
font-size: 9px; text-transform: uppercase; letter-spacing: .05em; padding: 0 5px;
|
||||
border-radius: 7px; background: var(--panel2); color: var(--muted); font-weight: 600;
|
||||
}
|
||||
.reg-tag.hub { background: rgba(108,184,224,.18); color: var(--accent2); }
|
||||
.reg-tag.base { background: rgba(140,220,160,.16); color: #7fce8f; }
|
||||
.reg-reason { color: var(--danger) !important; white-space: normal; }
|
||||
|
||||
.linkbtn {
|
||||
background: none; border: none; padding: 0; color: var(--accent2);
|
||||
font-size: 11px; cursor: pointer; text-decoration: underline;
|
||||
}
|
||||
.linkbtn:hover { color: var(--accent); }
|
||||
.linkbtn:disabled { color: var(--muted); cursor: default; text-decoration: none; }
|
||||
|
||||
.browser { border: 1px solid var(--border); border-radius: 6px; padding: 6px; }
|
||||
.browser-path { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 5px; }
|
||||
.browser-path .src { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
|
||||
.browser-list { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
|
||||
.browser-row {
|
||||
display: flex; justify-content: space-between; align-items: center; gap: 6px;
|
||||
padding: 2px 4px; border-radius: 4px; font-size: 12px;
|
||||
}
|
||||
.browser-row:hover { background: var(--panel2); }
|
||||
.browser-row.is-model { color: var(--accent); }
|
||||
.browser-name { cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
|
||||
.browser-row button { padding: 1px 8px; font-size: 11px; flex-shrink: 0; }
|
||||
|
||||
.fit-adv { border-left: 2px solid var(--border); padding-left: 8px; display: flex; flex-direction: column; gap: 6px; }
|
||||
|
||||
.conv-list { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
|
||||
.conv-item { padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; font-size: 12px; }
|
||||
.conv-item:hover { background: var(--panel2); }
|
||||
.conv-item.selected { border-color: var(--accent2); }
|
||||
.conv-title { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
|
||||
.conv-del { padding: 0 5px; font-size: 10px; border: none; color: var(--muted); }
|
||||
.conv-del:hover { color: var(--danger); }
|
||||
.conv-snippet { color: var(--muted); font-size: 11px; margin-top: 2px; }
|
||||
|
||||
.conv-header {
|
||||
display: flex; gap: 8px; align-items: center; padding: 8px 22px;
|
||||
border-bottom: 1px solid var(--border); background: var(--panel);
|
||||
}
|
||||
.conv-title-input { flex: 1; font-weight: 600; }
|
||||
.conv-tags-input { width: 220px; }
|
||||
.conv-header a { color: var(--accent2); font-size: 12px; text-decoration: none; border: 1px solid var(--border); border-radius: 5px; padding: 4px 9px; }
|
||||
.conv-header a:hover { border-color: var(--accent2); }
|
||||
|
||||
.tree-panel {
|
||||
border-bottom: 1px solid var(--border); background: var(--panel);
|
||||
padding: 8px 14px; max-height: 220px; overflow-y: auto; font-size: 12px;
|
||||
}
|
||||
.tree-node { display: flex; gap: 7px; align-items: baseline; padding: 2px 4px; cursor: pointer; border-radius: 4px; white-space: nowrap; overflow: hidden; }
|
||||
.tree-node:hover { background: var(--panel2); }
|
||||
.tree-node.on-path { background: rgba(108,184,224,.10); }
|
||||
.tn-role { width: 14px; text-align: center; border-radius: 3px; font-size: 10px; font-weight: 700; flex-shrink: 0; }
|
||||
.tn-role.user { color: var(--accent); }
|
||||
.tn-role.assistant { color: var(--accent2); }
|
||||
.tn-role.system { color: var(--muted); }
|
||||
.tn-text { overflow: hidden; text-overflow: ellipsis; color: var(--text); }
|
||||
.tn-frames { color: var(--accent); }
|
||||
.tree-hint { color: var(--muted); font-size: 11px; margin-top: 5px; }
|
||||
.fork-note { color: var(--accent); font-size: 12px; }
|
||||
|
||||
.msg.has-frames { cursor: pointer; }
|
||||
.msg.msg-selected { outline: 1px solid var(--accent2); }
|
||||
|
||||
.lensview {
|
||||
border-top: 1px solid var(--border); background: var(--panel);
|
||||
max-height: 46vh; overflow-y: auto; padding: 6px 12px; flex-shrink: 0;
|
||||
}
|
||||
/* drag handle above the lens view: sets its height manually */
|
||||
.v-resizer {
|
||||
height: 6px; cursor: ns-resize; flex-shrink: 0;
|
||||
background: linear-gradient(var(--border), transparent);
|
||||
}
|
||||
.v-resizer:hover { background: var(--accent2); opacity: .5; }
|
||||
.lv-controls { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); padding: 4px 0 8px; flex-wrap: wrap; }
|
||||
.lv-controls input[type="text"] { padding: 3px 6px; font-size: 12px; }
|
||||
.lv-controls button { padding: 3px 10px; font-size: 12px; }
|
||||
.lv-sep { width: 1px; height: 16px; background: var(--border); }
|
||||
.lv-pin { background: rgba(232,161,60,.15); color: var(--accent); border: 1px solid var(--accent); border-radius: 9px; padding: 1px 8px; cursor: pointer; font-size: 12px; }
|
||||
/* single scroll container (H + V): the bars stay at the edges so they're always
|
||||
visible, even when the grid overflows in height. The label column is pinned to
|
||||
the left (sticky) and scrolls vertically with the grid. */
|
||||
.lv-gridwrap { display: flex; align-items: flex-start; overflow: auto; max-height: 34vh; }
|
||||
.lv-labels { position: sticky; left: 0; z-index: 2; background: var(--panel); flex-shrink: 0; }
|
||||
.lv-scroll { flex-shrink: 0; }
|
||||
.lv-laylabel-hot { fill: var(--accent2); font-weight: 700; }
|
||||
.lv-filter-badge { color: var(--accent2); font-size: 11px; white-space: nowrap; }
|
||||
.lv-filter-badge.err { color: var(--danger); }
|
||||
.lv-filter-clear { cursor: pointer; }
|
||||
.lv-filter-clear:hover { color: var(--danger); }
|
||||
.lv-agg { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline; padding: 6px 2px; }
|
||||
.lv-agg-word { cursor: pointer; }
|
||||
.lv-agg-word:hover { color: var(--accent2); }
|
||||
.lv-agg-word.lv-agg-pinned { color: var(--accent); text-decoration: underline; }
|
||||
.lv-agg-word sup { font-size: 9px; color: var(--muted); }
|
||||
.lv-agg-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); padding: 2px 2px 6px; }
|
||||
.lv-agg-bar input[type="number"], .lv-agg-bar input[type="text"] { padding: 3px 6px; font-size: 12px; }
|
||||
.lv-hidden-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 0 2px 8px; }
|
||||
.lv-hidden-chip {
|
||||
font-size: 11px; color: var(--muted); border: 1px solid var(--border);
|
||||
border-radius: 5px; padding: 1px 6px; cursor: pointer; max-width: 160px;
|
||||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||
}
|
||||
.lv-hidden-chip:hover { border-color: var(--accent2); color: var(--accent2); }
|
||||
.lv-view-on { border-color: var(--accent) !important; color: var(--accent); }
|
||||
.lv-pinadd { position: relative; display: inline-flex; }
|
||||
.lv-pinadd input { padding: 3px 6px; font-size: 12px; }
|
||||
.lv-pinadd-cands {
|
||||
position: absolute; top: 100%; left: 0; margin-top: 3px; z-index: 12;
|
||||
display: flex; gap: 3px; flex-wrap: wrap; max-width: 240px;
|
||||
background: #0f1114; border: 1px solid var(--border); border-radius: 6px;
|
||||
padding: 4px; box-shadow: 0 4px 14px rgba(0,0,0,.5);
|
||||
}
|
||||
.lv-pinadd-cands button { padding: 2px 7px; font-size: 12px; }
|
||||
.lv-layerrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 0 2px 6px; }
|
||||
.lv-layerrow .layerpicker { flex: 1; min-width: 0; }
|
||||
.lv-lensbadge {
|
||||
font-size: 11px; color: var(--accent2); border: 1px solid var(--border);
|
||||
border-radius: 6px; padding: 1px 8px; max-width: 240px; overflow: hidden;
|
||||
text-overflow: ellipsis; white-space: nowrap;
|
||||
}
|
||||
.lv-svg { display: block; }
|
||||
.lv-toklabel { fill: var(--muted); font-size: 10px; text-anchor: start; }
|
||||
.lv-laylabel { fill: var(--muted); font-size: 10px; text-anchor: end; }
|
||||
.lv-word { fill: var(--text); font-size: 11px; }
|
||||
.lv-rank { fill: var(--muted); font-size: 7.5px; }
|
||||
.lv-cell { cursor: pointer; }
|
||||
.lv-cell:hover rect { stroke: var(--accent2); }
|
||||
.lv-tip {
|
||||
position: fixed; z-index: 10; background: #0f1114; border: 1px solid var(--border);
|
||||
border-radius: 6px; padding: 8px 10px; font-size: 12px; pointer-events: none;
|
||||
max-width: 260px; box-shadow: 0 4px 18px rgba(0,0,0,.5);
|
||||
}
|
||||
.lv-tip-head { color: var(--muted); font-size: 11px; margin-bottom: 5px; }
|
||||
.lv-trans { color: var(--accent2); font-size: 11px; font-style: italic; }
|
||||
.lv-tip-row { display: flex; justify-content: space-between; gap: 14px; }
|
||||
.lv-tip-row span:last-child { color: var(--muted); }
|
||||
.lv-tip-trans { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 5px; }
|
||||
.lv-tip-trans .lv-tip-head { margin-bottom: 3px; }
|
||||
.lv-pins { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 8px; }
|
||||
.lv-pinblock { margin-bottom: 12px; overflow-x: auto; }
|
||||
/* graph on top, heatmap below — never side by side (svgs are inline by default) */
|
||||
.lv-pinblock svg { display: block; }
|
||||
.lv-pinname { font-size: 12px; color: var(--accent); margin-bottom: 4px; }
|
||||
.lv-pinsub { color: inherit; }
|
||||
.lv-copybtn {
|
||||
padding: 0 5px; font-size: 12px; margin: 0 2px; line-height: 1.4;
|
||||
border: 1px solid var(--border); border-radius: 4px; color: var(--muted);
|
||||
background: var(--panel2); cursor: pointer; vertical-align: baseline;
|
||||
}
|
||||
.lv-copybtn:hover { color: var(--accent2); border-color: var(--accent2); }
|
||||
.lv-pinhov { color: var(--accent2); font-weight: 600; }
|
||||
.lv-grid { stroke: rgba(255,255,255,.06); }
|
||||
.lv-axis { fill: var(--muted); font-size: 9px; text-anchor: end; }
|
||||
.lv-axis-hot { fill: var(--accent2); font-weight: 700; }
|
||||
.lv-laylegend { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 5px; }
|
||||
.lv-laychip {
|
||||
font-size: 10px; padding: 0 5px; border: 1px solid; border-radius: 8px;
|
||||
cursor: pointer; user-select: none; line-height: 1.5;
|
||||
}
|
||||
.lv-laychip.dim { opacity: .3; }
|
||||
|
||||
.lens-live {
|
||||
border-top: 1px solid var(--border); background: var(--panel);
|
||||
padding: 8px 22px; max-height: 240px; overflow-y: auto;
|
||||
}
|
||||
.lens-head { display: flex; gap: 12px; align-items: center; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
|
||||
.phase { padding: 1px 8px; border-radius: 8px; font-weight: 600; }
|
||||
.phase.reading { background: rgba(232, 161, 60, .18); color: var(--accent); }
|
||||
.phase.thinking { background: rgba(108, 184, 224, .18); color: var(--accent2); }
|
||||
.lens-rows { display: flex; flex-direction: column; gap: 2px; }
|
||||
.lens-row { display: flex; gap: 10px; align-items: baseline; white-space: nowrap; overflow: hidden; }
|
||||
.lens-row .lnum { color: var(--muted); font-size: 11px; width: 34px; flex-shrink: 0; }
|
||||
.lword { font-size: 13px; }
|
||||
.lword sup { font-size: 9px; color: var(--muted); }
|
||||
|
||||
.sys { padding: 8px 22px; border-bottom: 1px solid var(--border); background: var(--panel); }
|
||||
.sys summary { cursor: pointer; font-size: 12px; color: var(--muted); }
|
||||
.sys textarea { margin-top: 6px; min-height: 40px; }
|
||||
|
||||
/* ---- Token editor ---- */
|
||||
.editor {
|
||||
width: 400px; flex-shrink: 0; background: var(--panel);
|
||||
border-left: 1px solid var(--border);
|
||||
display: flex; flex-direction: column; min-height: 0;
|
||||
}
|
||||
.ed-head {
|
||||
display: flex; justify-content: space-between; align-items: center;
|
||||
padding: 10px 14px; border-bottom: 1px solid var(--border);
|
||||
color: var(--accent); font-weight: 600;
|
||||
}
|
||||
.ed-close { padding: 2px 9px; }
|
||||
.ed-body { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 16px; }
|
||||
.ed-section { display: flex; flex-direction: column; gap: 7px; }
|
||||
.ed-section h3 {
|
||||
font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
|
||||
color: var(--muted); font-weight: 600;
|
||||
}
|
||||
.editor .src { color: var(--muted); font-size: 11px; }
|
||||
.ed-flash { animation: ed-flash 1.5s ease-out; border-radius: 8px; }
|
||||
@keyframes ed-flash {
|
||||
0% { background: rgba(232,161,60,.25); box-shadow: 0 0 0 2px var(--accent); }
|
||||
100% { background: transparent; box-shadow: none; }
|
||||
}
|
||||
.ed-toggle-on { border-color: var(--accent) !important; color: var(--accent); }
|
||||
|
||||
/* Mode toggle: steering (exploration) ↔ read projection (exportable).
|
||||
Sliding thumb, two halves tiling the track (4px insets, seam at the center). */
|
||||
.mode-toggle {
|
||||
position: relative; display: grid; grid-template-columns: 1fr 1fr;
|
||||
background: var(--panel2); border: 1px solid var(--border); border-radius: 10px;
|
||||
padding: 4px; isolation: isolate; user-select: none;
|
||||
}
|
||||
.mt-thumb {
|
||||
position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 4px;
|
||||
width: calc(50% - 4px); border-radius: 7px;
|
||||
transition: transform .24s cubic-bezier(.34,1.2,.44,1), background .2s, box-shadow .2s;
|
||||
}
|
||||
.mt-steer .mt-thumb {
|
||||
transform: translateX(0);
|
||||
background: linear-gradient(135deg, rgba(108,184,224,.92), rgba(108,184,224,.6));
|
||||
box-shadow: 0 2px 12px rgba(108,184,224,.4);
|
||||
}
|
||||
.mt-read .mt-thumb {
|
||||
transform: translateX(100%);
|
||||
background: linear-gradient(135deg, rgba(126,201,126,.94), rgba(126,201,126,.62));
|
||||
box-shadow: 0 2px 12px rgba(126,201,126,.4);
|
||||
}
|
||||
.mt-opt {
|
||||
position: relative; z-index: 1; background: none; border: none; border-radius: 7px;
|
||||
display: flex; flex-direction: column; align-items: center; gap: 3px;
|
||||
padding: 9px 6px 8px; cursor: pointer; color: var(--muted);
|
||||
transition: color .18s; text-align: center; line-height: 1.15;
|
||||
}
|
||||
.mt-opt:hover:not(.mt-on) { color: var(--text); }
|
||||
.mt-opt svg { opacity: .92; margin-bottom: 1px; }
|
||||
.mt-lab { font-size: 12px; font-weight: 600; }
|
||||
.mt-sub { font-size: 9.5px; letter-spacing: .02em; opacity: .82; }
|
||||
.mt-on { color: #14161a; }
|
||||
.mt-on .mt-sub { opacity: .74; }
|
||||
|
||||
.ed-rule { border: 1px solid var(--border); border-radius: 6px; padding: 5px 7px; }
|
||||
.ed-rule-off { opacity: .5; }
|
||||
.ed-rule-toggle {
|
||||
padding: 0 5px; font-size: 12px; border: none; background: transparent;
|
||||
color: var(--accent2); flex-shrink: 0; line-height: 1;
|
||||
}
|
||||
.ed-rule-off .ed-rule-toggle { color: var(--muted); }
|
||||
.ed-rule-toggle:hover { color: var(--accent); border-color: transparent; }
|
||||
.ed-rule-main { display: flex; align-items: center; gap: 6px; }
|
||||
.ed-rule-tok {
|
||||
font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||
flex: 1; min-width: 96px;
|
||||
}
|
||||
.ed-rule-factor { width: 62px !important; flex-shrink: 0; padding: 3px 5px !important; font-size: 12px !important; }
|
||||
.ed-rule-del { padding: 1px 7px; font-size: 11px; border: none; color: var(--muted); flex-shrink: 0; }
|
||||
.ed-rule-del:hover { color: var(--danger); }
|
||||
.ed-rule-layers { margin-top: 6px; border-top: 1px solid var(--border); padding-top: 6px; }
|
||||
|
||||
.rulebar {
|
||||
display: flex; gap: 1px; cursor: pointer; flex-shrink: 1;
|
||||
min-width: 42px; max-width: 118px; overflow: hidden;
|
||||
padding: 3px 2px; border-radius: 4px; align-items: center;
|
||||
}
|
||||
.rulebar:hover { background: var(--panel2); }
|
||||
.rb-seg { width: 2px; min-width: 1px; height: 12px; background: var(--panel2); border-radius: 1px; }
|
||||
.rb-seg.on { background: var(--accent); }
|
||||
|
||||
.layerpicker { display: flex; flex-direction: column; gap: 5px; }
|
||||
.lp-cells { display: flex; flex-wrap: wrap; gap: 3px; }
|
||||
.lp-cell {
|
||||
min-width: 22px; text-align: center; font-size: 11px; padding: 2px 3px;
|
||||
border: 1px solid var(--border); border-radius: 4px; cursor: pointer;
|
||||
color: var(--muted); user-select: none;
|
||||
}
|
||||
.lp-cell:hover { border-color: var(--accent2); }
|
||||
.lp-cell.on { background: rgba(232,161,60,.2); border-color: var(--accent); color: var(--accent); }
|
||||
.lp-cell.lp-approx { border-style: dashed; opacity: .75; }
|
||||
.lp-quick { display: flex; gap: 5px; }
|
||||
.lp-quick button { padding: 2px 9px; font-size: 11px; }
|
||||
|
||||
.ed-cands { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 11px; }
|
||||
.ed-cands button { padding: 2px 8px; font-size: 12px; }
|
||||
.ed-cands .ed-cand-on { border-color: var(--accent); color: var(--accent); background: rgba(232,161,60,.12); }
|
||||
|
||||
.ed-group { border: 1px solid var(--accent2); border-radius: 8px; padding: 9px; }
|
||||
.ed-group h3 { color: var(--accent2); }
|
||||
Reference in New Issue
Block a user