Skip to main content

Styling

Notebook UI is styled using Tailwind CSS framework, however, there are predefined empty CSS classes for certain elements:

  • main main window
  • .ccontainer cells container
  • .cgroup a single group of cells: 1 input + outputs + tools
  • .cframe a single inner group of cells: 1 input + outputs
  • .cborder a vertical line displayed at the right side from the cell group
  • .cwrapper an input/output cell wrapper
  • .cseparator a thin space between cells
  • .cinit a class for initialization cells
  • .cin a class for input cells parent element
  • .cout a class for output cells parent element
  • .ttint a class applied to focused cells
  • .cgi-ico a class for initialization cell group icon (usually a teal colored dot)

The vertical border-marker shown on the left side of the input cell can be styled using the following selector with pseudo-element:

.cin > :nth-child(2)::after {

}

Some input cell types can be differentiated too (a child element of one styled by .cin):

  • .clang-generic a class for any unknown cell type / language
  • .clang-markdown a class for input markdown cells
  • .clang-html a class for input html cells
  • .clang-wlx a class for input wlx cells
  • .clang-js a class for input js cells
  • .clang-slide a class for input slide cells

For wolfram language input cells the class field of the editor is empty.

The following classes are also available to style:

  • .cout .markdown a class for markdown output cells
  • .markdown h1 a set of selectors to style various markdown element
  • .markdown h2
  • ...

Root styles​

The following styles are applied to :root and defines editor's colors and fonts for UI

font-size: medium;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

--editor-key-meta: #404740;
--editor-key-keyword: #708;
--editor-key-atom: #219;
--editor-key-literal: #164;
--editor-key-string: #a11;
--editor-key-escape: #e40;
--editor-key-variable: #00f;
--editor-local-variable: #30a;
--editor-key-type: #085;
--editor-key-class: #167;
--editor-special-variable: #256;
--editor-key-property: #00c;
--editor-key-comment: #940;
--editor-key-invalid: #f00;
--editor-outline: #696969;

To override them - redefine :root class.

Local Styling​

HTML or WLX can be used to customize them locally for an individual notebook document.

See also: Templates.

Global Styles​

From the settings menu a global styles can be set

note

Note, that global styles are copied to exported Static HTML files as well

Last updated on