tao.chen/notebook-ai-extension
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 2 Wiki Activity

style: single AI button + inline prompt panel CSS

Browse Source
This commit is contained in:
tao.chen
2026-07-23 12:47:49 +08:00
parent 85e16914b5
commit 24bff6d2eb
1 changed files with 49 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style/base.css
+49 -5
View File
@@ -4,7 +4,7 @@
https://jupyterlab.readthedocs.io/en/stable/developer/css.html https://jupyterlab.readthedocs.io/en/stable/developer/css.html
*/ */
/* AI action buttons inside the native Cell toolbar (active cell, top-right). */ /* Single AI action button inside the native Cell toolbar (active cell, top-right). */
.opencode-cell-actions { .opencode-cell-actions {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -13,19 +13,63 @@
.opencode-cell-actions .opencode-btn { .opencode-cell-actions .opencode-btn {
border: none; border: none;
background: transparent; background: transparent;
padding: 0 4px; padding: 0 6px;
font-size: var(--jp-ui-font-size1); font-size: var(--jp-ui-font-size1);
line-height: 20px; line-height: 20px;
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
} }
.opencode-cell-actions .opencode-btn:hover:enabled {
background: var(--jp-layout-color2);
border-radius: 2px;
}
.opencode-cell-actions .opencode-btn:disabled { .opencode-cell-actions .opencode-btn:disabled {
opacity: 0.4; opacity: 0.4;
cursor: default; cursor: default;
} }
.opencode-cell-actions .opencode-btn:hover:enabled { /* Inline prompt panel attached to the cell when the AI button is clicked. */
background: var(--jp-layout-color2); .opencode-inline-prompt {
border-radius: 2px; display: flex;
flex-direction: column;
gap: 4px;
padding: 6px;
margin: 4px 8px;
border: 1px solid var(--jp-border-color2, #ddd);
border-radius: 4px;
background: var(--jp-layout-color1, #fff);
}
.opencode-inline-prompt textarea {
width: 100%;
resize: vertical;
font-family: var(--jp-code-font-family, monospace);
font-size: var(--jp-code-font-size, 13px);
box-sizing: border-box;
}
.opencode-inline-prompt .opencode-inline-actions {
display: flex;
justify-content: flex-end;
gap: 4px;
}
.opencode-inline-prompt .opencode-inline-actions button {
border: 1px solid var(--jp-border-color2, #ccc);
background: var(--jp-layout-color2, #f7f7f7);
padding: 2px 8px;
border-radius: 3px;
cursor: pointer;
font-size: var(--jp-ui-font-size1);
}
.opencode-inline-prompt .opencode-inline-actions button:hover:enabled {
background: var(--jp-layout-color3, #eaeaea);
}
.opencode-inline-prompt .opencode-inline-actions button:disabled {
opacity: 0.4;
cursor: default;
} }