@theia/notebook 1.53.0-next.4 → 1.53.0-next.55

package/src/browser/style/index.css

@@ -1,467 +1,483 @@
-/********************************************************************************
- * Copyright (C) 2023 TypeFox and others.
- *
- * This program and the accompanying materials are made available under the
- * terms of the Eclipse Public License v. 2.0 which is available at
- * http://www.eclipse.org/legal/epl-2.0.
- *
- * This Source Code may also be made available under the following Secondary
- * Licenses when the conditions for such availability set forth in the Eclipse
- * Public License v. 2.0 are satisfied: GNU General Public License, version 2
- * with the GNU Classpath Exception which is available at
- * https://www.gnu.org/software/classpath/license.html.
- *
- * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
- ********************************************************************************/
-
-:root {
-  --theia-notebook-markdown-size: 17px;
-  --theia-notebook-cell-editor-margin-right: 10px;
-}
-
-.theia-notebook-cell-list {
-  overflow-y: auto;
-  list-style: none;
-  padding-left: 0px;
-  background-color: var(--theia-notebook-editorBackground);
-}
-
-.theia-notebook-cell {
-  display: flex;
-  margin: 10px 0px;
-}
-
-.theia-notebook-cell.draggable {
-  cursor: grab;
-}
-
-.theia-notebook-cell:hover .theia-notebook-cell-marker {
-  visibility: visible;
-}
-
-.theia-notebook-cell-marker {
-  background-color: var(--theia-notebook-inactiveFocusedCellBorder);
-  width: 3px;
-  margin: 0px 8px 0px 4px;
-  border-radius: 4px;
-  visibility: hidden;
-}
-
-.theia-notebook-cell-marker-selected {
-  visibility: visible;
-  background-color: var(--theia-notebook-focusedCellBorder);
-}
-
-.theia-notebook-cell-marker:hover {
-  width: 5px;
-  margin: 0px 6px 0px 4px;
-}
-
-.theia-notebook-cell-content {
-  flex: 1;
-  width: calc(100% - 15px);
-}
-
-/* Rendered Markdown Content */
-
-.theia-notebook-markdown-content {
-  padding: 8px 16px 8px 36px;
-  font-size: var(--theia-notebook-markdown-size);
-}
-
-.theia-notebook-markdown-content>* {
-  font-weight: 400;
-}
-
-.theia-notebook-markdown-content>*:first-child {
-  margin-top: 0;
-  padding-top: 0;
-}
-
-.theia-notebook-markdown-content>*:last-child {
-  margin-bottom: 0;
-  padding-bottom: 0;
-}
-
-/* Markdown cell edit mode */
-.theia-notebook-cell-content:has(.theia-notebook-markdown-editor-container>.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-markdown-editor-container>.theia-notebook-cell-editor) {
-  outline-color: var(--theia-notebook-focusedEditorBorder);
-}
-
-.theia-notebook-empty-markdown {
-  opacity: 0.6;
-}
-
-.theia-notebook-cell-editor {
-  padding: 10px 10px 0 10px;
-}
-
-.theia-notebook-cell-editor-container {
-  width: calc(100% - 46px);
-  flex: 1;
-  outline: 1px solid var(--theia-notebook-cellBorderColor);
-  margin: 0px 10px;
-}
-
-.theia-notebook-cell.focused .theia-notebook-cell-editor-container {
-  outline-color: var(--theia-notebook-focusedEditorBorder);
-}
-
-.notebook-cell-status {
-  display: flex;
-  flex-direction: row;
-  font-size: 12px;
-  height: 16px;
-}
-
-.notebook-cell-status-left {
-  display: flex;
-  flex-direction: row;
-  flex-grow: 1;
-}
-
-.notebook-cell-language-label {
-  padding: 0 5px;
-}
-
-.notebook-cell-language-label:hover {
-  cursor: pointer;
-  background-color: var(--theia-toolbar-hoverBackground);
-}
-
-.notebook-cell-status-item {
-  margin: 0 3px;
-  padding: 0 3px;
-  display: flex;
-  align-items: center;
-}
-
-.theia-notebook-cell-toolbar {
-  border: 1px solid var(--theia-notebook-cellToolbarSeparator);
-  display: flex;
-  position: absolute;
-  margin: -20px 0 0 66px;
-  padding: 2px;
-  background-color: var(--theia-editor-background);
-}
-
-.theia-notebook-cell-sidebar-toolbar {
-  display: flex;
-  flex-direction: column;
-  padding: 2px;
-  background-color: var(--theia-editor-background);
-  flex-grow: 1;
-}
-
-.theia-notebook-cell-sidebar {
-  display: flex;
-  flex-direction: column;
-}
-
-.theia-notebook-code-cell-execution-order {
-  display: block;
-  font-family: var(--monaco-monospace-font);
-  font-size: 10px;
-  opacity: 0.7;
-  text-align: center;
-  white-space: pre;
-  padding: 5px 0;
-}
-
-.theia-notebook-cell-toolbar-item {
-  height: 18px;
-  width: 18px;
-}
-
-.theia-notebook-cell-toolbar-item:hover {
-  background-color: var(--theia-toolbar-hoverBackground);
-}
-
-.theia-notebook-cell-toolbar-item:active {
-  background-color: var(--theia-toolbar-active);
-}
-
-.theia-notebook-cell-divider {
-  height: 25px;
-  width: 100%;
-}
-
-.theia-notebook-cell-with-sidebar {
-  display: flex;
-  flex-direction: row;
-}
-
-.theia-notebook-main-container {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
-}
-
-.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);
-  background-color: var(--theia-progressBar-background);
-  height: 2px;
-}
-
-.theia-notebook-viewport {
-  display: flex;
-  overflow: hidden;
-  height: 100%;
-}
-
-.theia-notebook-scroll-container {
-  flex: 1;
-  overflow: hidden;
-  position: relative;
-}
-
-.theia-notebook-main-toolbar {
-  background: var(--theia-editor-background);
-  display: flex;
-  flex-direction: row;
-  z-index: 1;
-  /*needed to be on rendered on top of monaco editors*/
-}
-
-.theia-notebook-main-toolbar-item {
-  height: 22px;
-  display: flex;
-  align-items: center;
-  margin: 0 4px;
-  padding: 2px;
-  text-align: center;
-  color: var(--theia-foreground) !important;
-  cursor: pointer;
-}
-
-.theia-notebook-main-toolbar-item.theia-mod-disabled:hover {
-  background-color: transparent;
-  cursor: default;
-}
-
-.theia-notebook-main-toolbar-item-text {
-  padding: 0 4px;
-  white-space: nowrap;
-}
-
-.theia-notebook-toolbar-separator {
-  width: 1px;
-  background-color: var(--theia-notebook-cellToolbarSeparator);
-  margin: 0 4px;
-}
-
-.theia-notebook-add-cell-buttons {
-  justify-content: center;
-  display: flex;
-}
-
-.theia-notebook-add-cell-button {
-  border: 1px solid var(--theia-notebook-cellToolbarSeparator);
-  background-color: var(--theia-editor-background);
-  color: var(--theia-foreground);
-  vertical-align: middle;
-  text-align: center;
-  height: 24px;
-  margin: 0 8px;
-}
-
-.theia-notebook-add-cell-button:hover {
-  background-color: var(--theia-toolbar-hoverBackground);
-}
-
-.theia-notebook-add-cell-button:active {
-  background-color: var(--theia-toolbar-active);
-}
-
-.theia-notebook-add-cell-button-icon {
-  vertical-align: middle;
-}
-
-.theia-notebook-cell-output-webview {
-  padding: 5px 0px;
-  margin: 0px 10px;
-  width: 100%;
-}
-
-.theia-notebook-cell-drop-indicator {
-  height: 2px;
-  background-color: var(--theia-notebook-focusedCellBorder);
-  width: 100%;
-}
-
-.theia-notebook-collapsed-output {
-  padding: 4px 8px;
-  color: var(--theia-foreground);
-  margin-left: 30px;
-  font-size: 14px;
-  line-height: 22px;
-  opacity: 0.7;
-}
-
-.theia-notebook-drag-ghost-image {
-  position: absolute;
-  top: -99999px;
-  left: -99999px;
-  max-height: 500px;
-  min-height: 100px;
-  background-color: var(--theia-editor-background);
-}
-
-/* Notebook Find Widget */
-
-.theia-notebook-overlay {
-  position: absolute;
-  z-index: 100;
-  right: 18px;
-}
-
-.theia-notebook-find-widget {
-  /* position: absolute;
-  z-index: 35;
-  height: 33px;
-  overflow: hidden; */
-  line-height: 19px;
-  transition: transform 200ms linear;
-  display: flex;
-  flex-direction: row;
-  padding: 0 4px;
-  box-sizing: border-box;
-  box-shadow: 0 0 8px 2px var(--theia-widget-shadow);
-  background-color: var(--theia-editorWidget-background);
-  color: var(--theia-editorWidget-foreground);
-  border-left: 1px solid var(--theia-widget-border);
-  border-right: 1px solid var(--theia-widget-border);
-  border-bottom: 1px solid var(--theia-widget-border);
-  border-bottom-left-radius: 4px;
-  border-bottom-right-radius: 4px;
-}
-
-.theia-notebook-find-widget.hidden {
-  display: none;
-  transform: translateY(calc(-100% - 10px));
-}
-
-.theia-notebook-find-widget.search-mode > * > *:nth-child(2) {
-  display: none;
-}
-
-.theia-notebook-find-widget-expand {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  cursor: pointer;
-  border-radius: 0;
-  margin-right: 4px;
-}
-
-.theia-notebook-find-widget-expand:focus {
-  outline: 1px solid var(--theia-focusBorder);
-}
-
-.theia-notebook-find-widget-expand:hover {
-  background-color: var(--theia-toolbar-hoverBackground);
-}
-
-.theia-notebook-find-widget-buttons-first {
-  margin-bottom: 4px;
-  height: 26px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.theia-notebook-find-widget-buttons-first > div,
-.theia-notebook-find-widget-buttons-second > div {
-    margin-right: 4px;
-}
-
-.theia-notebook-find-widget-buttons-second {
-  height: 26px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.theia-notebook-find-widget-inputs {
-  margin-top: 4px;
-  display: flex;
-  flex-direction: column;
-}
-
-.theia-notebook-find-widget-buttons {
-  margin-top: 4px;
-  margin-left: 4px;
-  display: flex;
-  flex-direction: column;
-}
-
-.theia-notebook-find-widget-matches-count {
-  width: 72px;
-  box-sizing: border-box;
-  overflow: hidden;
-  text-align: center;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.theia-notebook-find-widget-input-wrapper {
-  display: flex;
-  align-items: center;
-  background: var(--theia-input-background);
-  border-style: solid;
-  border-width: var(--theia-border-width);
-  border-color: var(--theia-input-background);
-  border-radius: 2px;
-  margin-bottom: 4px;
-}
-
-.theia-notebook-find-widget-input-wrapper:focus-within {
-  border-color: var(--theia-focusBorder);
-}
-
-.theia-notebook-find-widget-input-wrapper .option.enabled {
-  color: var(--theia-inputOption-activeForeground);
-  outline: 1px solid var(--theia-inputOption-activeBorder);
-  background-color: var(--theia-inputOption-activeBackground);
-}
-
-.theia-notebook-find-widget-input-wrapper .option {
-  margin: 2px;
-}
-
-.theia-notebook-find-widget-input-wrapper .theia-notebook-find-widget-input:focus {
-  border: none;
-  outline: none;
-}
-
-.theia-notebook-find-widget-input-wrapper .theia-notebook-find-widget-input {
-  background: none;
-  border: none;
-}
-
-.theia-notebook-find-widget-replace {
-  margin-bottom: 4px;
-}
-
-.theia-notebook-find-widget-buttons .disabled {
-  opacity: 0.5;
-}
-
-mark.theia-find-match {
-    color: var(--theia-editor-findMatchHighlightForeground);
-    background-color: var(--theia-editor-findMatchHighlightBackground);
-}
-
-mark.theia-find-match.theia-find-match-selected {
-    color: var(--theia-editor-findMatchForeground);
-    background-color: var(--theia-editor-findMatchBackground);
-}
+/********************************************************************************
+ * Copyright (C) 2023 TypeFox and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0-only WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+:root {
+  --theia-notebook-markdown-size: 17px;
+  --theia-notebook-cell-editor-margin-right: 10px;
+}
+
+.theia-notebook-cell-list {
+  overflow-y: auto;
+  list-style: none;
+  padding-left: 0px;
+  background-color: var(--theia-notebook-editorBackground);
+}
+
+.theia-notebook-cell {
+  display: flex;
+  margin: 10px 0px;
+}
+
+.theia-notebook-cell:focus {
+  outline: none;
+}
+
+.theia-notebook-cell.draggable {
+  cursor: grab;
+}
+
+.theia-notebook-cell:hover .theia-notebook-cell-marker {
+  visibility: visible;
+}
+
+.theia-notebook-cell-marker {
+  background-color: var(--theia-notebook-inactiveFocusedCellBorder);
+  width: 3px;
+  margin: 0px 8px 0px 4px;
+  border-radius: 4px;
+  visibility: hidden;
+}
+
+.theia-notebook-cell-marker-selected {
+  visibility: visible;
+  background-color: var(--theia-notebook-focusedCellBorder);
+}
+
+.theia-notebook-cell-marker:hover {
+  width: 5px;
+  margin: 0px 6px 0px 4px;
+}
+
+.theia-notebook-cell-content {
+  flex: 1;
+  width: calc(100% - 15px);
+}
+
+/* Rendered Markdown Content */
+
+.theia-notebook-markdown-content {
+  padding: 8px 16px 8px 36px;
+  font-size: var(--theia-notebook-markdown-size);
+}
+
+.theia-notebook-markdown-content>* {
+  font-weight: 400;
+}
+
+.theia-notebook-markdown-content>*:first-child {
+  margin-top: 0;
+  padding-top: 0;
+}
+
+.theia-notebook-markdown-content>*:last-child {
+  margin-bottom: 0;
+  padding-bottom: 0;
+}
+
+/* Markdown cell edit mode */
+.theia-notebook-cell-content:has(.theia-notebook-markdown-editor-container>.theia-notebook-cell-editor) {
+  margin-left: 36px;
+  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-markdown-editor-container>.theia-notebook-cell-editor) {
+  outline-color: var(--theia-notebook-focusedEditorBorder);
+}
+
+.theia-notebook-empty-markdown {
+  opacity: 0.6;
+}
+
+.theia-notebook-cell-editor {
+  padding: 10px 10px 0 10px;
+}
+
+.theia-notebook-cell-editor-container {
+  width: calc(100% - 46px);
+  flex: 1;
+  outline: 1px solid var(--theia-notebook-cellBorderColor);
+  margin: 0px 16px 0px 10px;
+}
+
+.theia-notebook-cell.focused .theia-notebook-cell-editor-container {
+  outline-color: var(--theia-notebook-focusedEditorBorder);
+}
+
+.notebook-cell-status {
+  display: flex;
+  flex-direction: row;
+  font-size: 12px;
+  height: 16px;
+}
+
+.notebook-cell-status-left {
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+}
+
+.notebook-cell-language-label {
+  padding: 0 5px;
+}
+
+.notebook-cell-language-label:hover {
+  cursor: pointer;
+  background-color: var(--theia-toolbar-hoverBackground);
+}
+
+.notebook-cell-status-item {
+  margin: 0 3px;
+  padding: 0 3px;
+  display: flex;
+  align-items: center;
+}
+
+.theia-notebook-cell-toolbar {
+  border: 1px solid var(--theia-notebook-cellToolbarSeparator);
+  display: flex;
+  position: absolute;
+  margin: -20px 0 0 66px;
+  padding: 2px;
+  background-color: var(--theia-editor-background);
+}
+
+.theia-notebook-cell-sidebar-toolbar {
+  display: flex;
+  flex-direction: column;
+  padding: 2px;
+  background-color: var(--theia-editor-background);
+  flex-grow: 1;
+}
+
+.theia-notebook-cell-sidebar {
+  display: flex;
+  flex-direction: column;
+}
+
+.theia-notebook-code-cell-execution-order {
+  display: block;
+  font-family: var(--monaco-monospace-font);
+  font-size: 10px;
+  opacity: 0.7;
+  text-align: center;
+  white-space: pre;
+  padding: 5px 0;
+}
+
+.theia-notebook-cell-toolbar-item {
+  height: 18px;
+  width: 18px;
+}
+
+.theia-notebook-cell-toolbar-item:hover {
+  background-color: var(--theia-toolbar-hoverBackground);
+}
+
+.theia-notebook-cell-toolbar-item:active {
+  background-color: var(--theia-toolbar-active);
+}
+
+.theia-notebook-cell-divider {
+  height: 25px;
+  width: 100%;
+}
+
+.theia-notebook-cell-with-sidebar {
+  display: flex;
+  flex-direction: row;
+}
+
+.theia-notebook-main-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.theia-notebook-main-container:focus {
+  outline: none;
+}
+
+.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);
+  background-color: var(--theia-progressBar-background);
+  height: 2px;
+}
+
+.theia-notebook-viewport {
+  display: flex;
+  overflow: hidden;
+  height: 100%;
+}
+
+.theia-notebook-scroll-container {
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+}
+
+.theia-notebook-main-toolbar {
+  background: var(--theia-editor-background);
+  display: flex;
+  flex-direction: row;
+  z-index: 1;
+  /*needed to be on rendered on top of monaco editors*/
+}
+
+.theia-notebook-main-toolbar-item {
+  height: 22px;
+  display: flex;
+  align-items: center;
+  margin: 0 4px;
+  padding: 2px;
+  text-align: center;
+  color: var(--theia-foreground) !important;
+  cursor: pointer;
+}
+
+.theia-notebook-main-toolbar-item.theia-mod-disabled:hover {
+  background-color: transparent;
+  cursor: default;
+}
+
+.theia-notebook-main-toolbar-item-text {
+  padding: 0 4px;
+  white-space: nowrap;
+}
+
+.theia-notebook-toolbar-separator {
+  width: 1px;
+  background-color: var(--theia-notebook-cellToolbarSeparator);
+  margin: 0 4px;
+}
+
+.theia-notebook-add-cell-buttons {
+  justify-content: center;
+  display: flex;
+}
+
+.theia-notebook-add-cell-button {
+  border: 1px solid var(--theia-notebook-cellToolbarSeparator);
+  background-color: var(--theia-editor-background);
+  color: var(--theia-foreground);
+  display: flex;
+  height: 24px;
+  margin: 0 8px;
+  padding: 2px 4px;
+}
+
+.theia-notebook-add-cell-button:hover {
+  background-color: var(--theia-toolbar-hoverBackground);
+}
+
+.theia-notebook-add-cell-button:active {
+  background-color: var(--theia-toolbar-active);
+}
+
+.theia-notebook-add-cell-button>* {
+  vertical-align: middle;
+}
+
+.theia-notebook-add-cell-button-icon::before {
+  font: normal normal normal 14px/1 codicon;
+}
+
+.theia-notebook-add-cell-button-text {
+  margin: 1px 0 0 4px;
+}
+
+.theia-notebook-cell-output-webview {
+  padding: 5px 0px;
+  margin: 0px 15px 0px 9px;
+  width: 100%;
+}
+
+.theia-notebook-cell-drop-indicator {
+  height: 2px;
+  background-color: var(--theia-notebook-focusedCellBorder);
+  width: 100%;
+}
+
+.theia-notebook-collapsed-output {
+  padding: 4px 8px;
+  color: var(--theia-foreground);
+  margin-left: 30px;
+  font-size: 14px;
+  line-height: 22px;
+  opacity: 0.7;
+}
+
+.theia-notebook-drag-ghost-image {
+  position: absolute;
+  top: -99999px;
+  left: -99999px;
+  max-height: 500px;
+  min-height: 100px;
+  background-color: var(--theia-editor-background);
+}
+
+/* Notebook Find Widget */
+
+.theia-notebook-overlay {
+  position: absolute;
+  z-index: 100;
+  right: 18px;
+}
+
+.theia-notebook-find-widget {
+  /* position: absolute;
+  z-index: 35;
+  height: 33px;
+  overflow: hidden; */
+  line-height: 19px;
+  transition: transform 200ms linear;
+  display: flex;
+  flex-direction: row;
+  padding: 0 4px;
+  box-sizing: border-box;
+  box-shadow: 0 0 8px 2px var(--theia-widget-shadow);
+  background-color: var(--theia-editorWidget-background);
+  color: var(--theia-editorWidget-foreground);
+  border-left: 1px solid var(--theia-widget-border);
+  border-right: 1px solid var(--theia-widget-border);
+  border-bottom: 1px solid var(--theia-widget-border);
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+
+.theia-notebook-find-widget.hidden {
+  display: none;
+  transform: translateY(calc(-100% - 10px));
+}
+
+.theia-notebook-find-widget.search-mode>*>*:nth-child(2) {
+  display: none;
+}
+
+.theia-notebook-find-widget-expand {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+  border-radius: 0;
+  margin-right: 4px;
+}
+
+.theia-notebook-find-widget-expand:focus {
+  outline: 1px solid var(--theia-focusBorder);
+}
+
+.theia-notebook-find-widget-expand:hover {
+  background-color: var(--theia-toolbar-hoverBackground);
+}
+
+.theia-notebook-find-widget-buttons-first {
+  margin-bottom: 4px;
+  height: 26px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.theia-notebook-find-widget-buttons-first>div,
+.theia-notebook-find-widget-buttons-second>div {
+  margin-right: 4px;
+}
+
+.theia-notebook-find-widget-buttons-second {
+  height: 26px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.theia-notebook-find-widget-inputs {
+  margin-top: 4px;
+  display: flex;
+  flex-direction: column;
+}
+
+.theia-notebook-find-widget-buttons {
+  margin-top: 4px;
+  margin-left: 4px;
+  display: flex;
+  flex-direction: column;
+}
+
+.theia-notebook-find-widget-matches-count {
+  width: 72px;
+  box-sizing: border-box;
+  overflow: hidden;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.theia-notebook-find-widget-input-wrapper {
+  display: flex;
+  align-items: center;
+  background: var(--theia-input-background);
+  border-style: solid;
+  border-width: var(--theia-border-width);
+  border-color: var(--theia-input-background);
+  border-radius: 2px;
+  margin-bottom: 4px;
+}
+
+.theia-notebook-find-widget-input-wrapper:focus-within {
+  border-color: var(--theia-focusBorder);
+}
+
+.theia-notebook-find-widget-input-wrapper .option.enabled {
+  color: var(--theia-inputOption-activeForeground);
+  outline: 1px solid var(--theia-inputOption-activeBorder);
+  background-color: var(--theia-inputOption-activeBackground);
+}
+
+.theia-notebook-find-widget-input-wrapper .option {
+  margin: 2px;
+}
+
+.theia-notebook-find-widget-input-wrapper .theia-notebook-find-widget-input:focus {
+  border: none;
+  outline: none;
+}
+
+.theia-notebook-find-widget-input-wrapper .theia-notebook-find-widget-input {
+  background: none;
+  border: none;
+}
+
+.theia-notebook-find-widget-replace {
+  margin-bottom: 4px;
+}
+
+.theia-notebook-find-widget-buttons .disabled {
+  opacity: 0.5;
+}
+
+mark.theia-find-match {
+  color: var(--theia-editor-findMatchHighlightForeground);
+  background-color: var(--theia-editor-findMatchHighlightBackground);
+}
+
+mark.theia-find-match.theia-find-match-selected {
+  color: var(--theia-editor-findMatchForeground);
+  background-color: var(--theia-editor-findMatchBackground);
+}