diff --git a/style/base.css b/style/base.css index e650b5a..5438dc0 100644 --- a/style/base.css +++ b/style/base.css @@ -4,7 +4,7 @@ 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 { display: flex; align-items: center; @@ -13,19 +13,63 @@ .opencode-cell-actions .opencode-btn { border: none; background: transparent; - padding: 0 4px; + padding: 0 6px; font-size: var(--jp-ui-font-size1); line-height: 20px; cursor: pointer; white-space: nowrap; } +.opencode-cell-actions .opencode-btn:hover:enabled { + background: var(--jp-layout-color2); + border-radius: 2px; +} + .opencode-cell-actions .opencode-btn:disabled { opacity: 0.4; cursor: default; } -.opencode-cell-actions .opencode-btn:hover:enabled { - background: var(--jp-layout-color2); - border-radius: 2px; +/* Inline prompt panel attached to the cell when the AI button is clicked. */ +.opencode-inline-prompt { + 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; }