Add border and fix indentation for editable markdown cell (#13947)

eclipse-theia · Jul 25, 2024 · 3ffc717 · 3ffc717
1 parent 1a08090
commit 3ffc717
Showing 1 changed file with 17 additions and 5 deletions.
diff --git a/packages/notebook/src/browser/style/index.css b/packages/notebook/src/browser/style/index.css
@@ -16,6 +16,7 @@
 
 :root {
  --theia-notebook-markdown-size: 17px;
+ --theia-notebook-cell-editor-margin-right: 10px;
 }
 
 .theia-notebook-cell-list {
@@ -66,17 +67,29 @@
  font-size: var(--theia-notebook-markdown-size);
 }
 
-.theia-notebook-markdown-content > *:first-child {
+.theia-notebook-markdown-content>*:first-child {
  margin-top: 0;
  padding-top: 0;
 }
 
-.theia-notebook-markdown-content > *:only-child,
-.theia-notebook-markdown-content > *:last-child {
+.theia-notebook-markdown-content>*:only-child,
+.theia-notebook-markdown-content>*:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
 }
 
+/* Markdown cell edit mode */
+.theia-notebook-cell-content:has(> .theia-notebook-cell-editor) {
+ margin-left: 37px;
+ margin-right: var(--theia-notebook-cell-editor-margin-right);
+ outline: 1px solid var(--theia-notebook-cellBorderColor);
+}
+
+/* Markdown cell edit mode focused */
+.theia-notebook-cell.focused .theia-notebook-cell-content:has(> .theia-notebook-cell-editor) {
+ outline-color: var(--theia-notebook-focusedEditorBorder);
+}
+
 .theia-notebook-empty-markdown {
  opacity: 0.6;
 }
@@ -189,8 +202,7 @@
 
 .theia-notebook-main-container .theia-notebook-main-loading-indicator {
  /* `progress-animation` is defined in `packages/core/src/browser/style/progress-bar.css` */
- animation: progress-animation 1.8s 0s infinite
- cubic-bezier(0.645, 0.045, 0.355, 1);
+ animation: progress-animation 1.8s 0s infinite cubic-bezier(0.645, 0.045, 0.355, 1);
  background-color: var(--theia-progressBar-background);
  height: 2px;
 }