Variable notebookCellStylesConst

Type Declaration

• Readonly.dla-Box-Notebook: { position: "relative" }

  Datalayer notebook box styling

  • Readonlyposition: "relative"

    Relative positioning for layout

• Readonly.dla-Jupyter-Notebook .dla-Notebook-Container: { width: "100%" }

  Datalayer Jupyter notebook container

  • Readonlywidth: "100%"

    Full width to fill available space

• Readonly& .cm-editor: { fontSize: "var(--vscode-editor-font-size, 13px) !important" }

  CodeMirror 6 editor styling

  • ReadonlyfontSize: "var(--vscode-editor-font-size, 13px) !important"

    CodeMirror 6 requires !important for font size override

• Readonly& .CodeMirror: { fontSize: "var(--vscode-editor-font-size, 13px) !important" }

  CodeMirror 5 legacy editor styling

  • ReadonlyfontSize: "var(--vscode-editor-font-size, 13px) !important"

    CodeMirror requires !important for font size override

• Readonly& .datalayer-NotebookPanel-header: { display: "none" }

  Hide Datalayer notebook panel header (redundant with VS Code UI)

  • Readonlydisplay: "none"

    Hidden for cleaner UI

• Readonly& .dla-CellSidebar-Container: { backgroundColor: "var(--vscode-editor-background) !important" }

  Datalayer cell sidebar container

  • ReadonlybackgroundColor: "var(--vscode-editor-background) !important"

    Background matching VS Code editor

• Readonly& .dla-CellSidebar-Container *: { backgroundColor: "inherit !important" }

  All child elements of Datalayer sidebar container inherit background

  • ReadonlybackgroundColor: "inherit !important"

    Inherit background from parent

• Readonly& .jp-Cell: { fontSize: "var(--vscode-editor-font-size, 13px)"; width: "100%" }

  Individual notebook cell styling

  • ReadonlyfontSize: "var(--vscode-editor-font-size, 13px)"

    Consistent font size with global setting

  • Readonlywidth: "100%"

    Full width to accommodate sidebar

• Readonly& .jp-Cell .lm-Widget: { backgroundColor: "var(--vscode-editor-background) !important" }

  All lm-Widgets within cells - enforces background color consistency

  • ReadonlybackgroundColor: "var(--vscode-editor-background) !important"

    Background color matching VS Code editor

• Readonly& .jp-Cell-Sidebar: {
      backgroundColor: "var(--vscode-editor-background) !important";
      color: "var(--vscode-editor-foreground) !important";
      display: "flex !important";
  }

  Individual cell sidebar (left column with buttons)

  • ReadonlybackgroundColor: "var(--vscode-editor-background) !important"

    Background matching VS Code editor

  • Readonlycolor: "var(--vscode-editor-foreground) !important"

    Text color matching VS Code editor foreground

  • Readonlydisplay: "flex !important"

    Flex layout for vertical stacking

• Readonly& .jp-Cell-Sidebar button: {
      backgroundColor: "transparent !important";
      border: "none !important";
      color: "var(--vscode-editor-foreground) !important";
      cursor: "pointer !important";
  }

  Cell sidebar button styling

  • ReadonlybackgroundColor: "transparent !important"

    Transparent background for button appearance

  • Readonlyborder: "none !important"

    Remove default border

  • Readonlycolor: "var(--vscode-editor-foreground) !important"

    Text color matching VS Code editor

  • Readonlycursor: "pointer !important"

    Pointer cursor on hover

• Readonly& .jp-Cell-Sidebar button:hover: { backgroundColor: "var(--vscode-list-hoverBackground) !important" }

  Cell sidebar button hover state

  • ReadonlybackgroundColor: "var(--vscode-list-hoverBackground) !important"

    Hover background from VS Code theme

• Readonly& .jp-CodeMirrorEditor: { cursor: "text !important" }

  CodeMirror editor cursor styling

  • Readonlycursor: "text !important"

    Text cursor for typing interaction

• Readonly& .jp-Dialog: {
      backgroundColor: "var(--vscode-editorWidget-background) !important";
      border: "1px solid var(--vscode-editorWidget-border) !important";
  }

  Dialog box container - styled to match VS Code theme

  • ReadonlybackgroundColor: "var(--vscode-editorWidget-background) !important"

    Dialog background from VS Code widget theme

  • Readonlyborder: "1px solid var(--vscode-editorWidget-border) !important"

    Dialog border from VS Code widget theme

• Readonly& .jp-Dialog-body: {
      backgroundColor: "var(--vscode-editorWidget-background) !important";
      color: "var(--vscode-editor-foreground) !important";
  }

  Dialog body section

  • ReadonlybackgroundColor: "var(--vscode-editorWidget-background) !important"

    Body background from widget theme

  • Readonlycolor: "var(--vscode-editor-foreground) !important"

    Body text color from editor theme

• Readonly& .jp-Dialog-content: {
      backgroundColor: "var(--vscode-editorWidget-background) !important";
      color: "var(--vscode-editorWidget-foreground) !important";
  }

  Dialog content area

  • ReadonlybackgroundColor: "var(--vscode-editorWidget-background) !important"

    Dialog background matching widget theme

  • Readonlycolor: "var(--vscode-editorWidget-foreground) !important"

    Dialog text color from widget theme

• Readonly& .jp-Dialog-header: {
      backgroundColor: "var(--vscode-editorWidget-background) !important";
      color: "var(--vscode-editorWidget-foreground) !important";
  }

  Dialog header section

  • ReadonlybackgroundColor: "var(--vscode-editorWidget-background) !important"

    Header background from widget theme

  • Readonlycolor: "var(--vscode-editorWidget-foreground) !important"

    Header text color from widget theme

• Readonly& .jp-InputArea-editor: { fontSize: "var(--vscode-editor-font-size, 13px)" }

  Input area editor (code cells) styling

  • ReadonlyfontSize: "var(--vscode-editor-font-size, 13px)"

    Consistent font size for code input

• Readonly& .jp-Notebook: {
      flex: "1 1 auto !important";
      fontSize: "var(--vscode-editor-font-size, 13px)";
      height: "100%";
  }

  JupyterLab notebook container - flex layout to fill available space

  • Readonlyflex: "1 1 auto !important"

    Flex: grows/shrinks to fill container, basis is auto

  • ReadonlyfontSize: "var(--vscode-editor-font-size, 13px)"

    Consistent font size with global setting

  • Readonlyheight: "100%"

    Full height to match container

• Readonly& .jp-Notebook-cellSidebar: {
      backgroundColor: "var(--vscode-editor-background) !important";
      display: "flex !important";
      minWidth: "40px !important";
  }

  Notebook cell sidebar container

  • ReadonlybackgroundColor: "var(--vscode-editor-background) !important"

    Background color matching VS Code editor

  • Readonlydisplay: "flex !important"

    Flex layout for proper alignment

  • ReadonlyminWidth: "40px !important"

    Minimum width for sidebar buttons

• Readonly& .jp-Notebook-footer: { width: "100%" }

  Notebook footer styling

  • Readonlywidth: "100%"

    Full width to accommodate sidebar

• Readonly& .jp-NotebookPanel: { height: "100% !important"; width: "100% !important" }

  JupyterLab notebook panel wrapper

  • Readonlyheight: "100% !important"

    Full height to fill container

  • Readonlywidth: "100% !important"

    Full width to fill container

• Readonly& .jp-OutputArea: { fontSize: "var(--vscode-editor-font-size, 13px)" }

  Output area styling

  • ReadonlyfontSize: "var(--vscode-editor-font-size, 13px)"

    Consistent font size for output display

• Readonly& .jp-Toolbar: { display: "none" }

  Hide JupyterLab toolbar (VS Code has its own)

  • Readonlydisplay: "none"

    Hidden to use VS Code-style toolbar instead

• ReadonlyfontFamily: "var(--vscode-editor-font-family, \"SF Mono\", Monaco, \"Cascadia Code\", \"Roboto Mono\", Consolas, \"Courier New\", monospace)"

  Global font family for the notebook, uses VS Code editor font family setting with fallbacks

• ReadonlyfontSize: "var(--vscode-editor-font-size, 13px)"

  Global font size for the notebook, uses VS Code editor font size setting