Cockpit CSS Styling - cockpit-project/cockpit GitHub Wiki

We use Patternfly to style Cockpit. The file cockpit.css includes both Patternfly and Cockpit's styling. Sometimes there's a need for additional Cockpit specific styling shared between components.

That additional styling has a -ct in the various class names. The -ct namespace is used after the main class name, and sub-names go after it. This is similar to the Patternfly namespacing. For example:

.selector-ct {
    ...
}

.selector-ct-subclass {
    ...
}

Stabilization Effort

Before the Cockpit 0.106 release we stabilized cockpit.css and added the above namespaces. The following changes occurred.

Renamed:

  • .cockpit-info-table -> .info-table-ct (and related styling)
  • .cockpit-form-table -> .form-table-ct
  • .page -> .page-ct
  • .btn-control -> .btn-control-ct
  • .highlight -> .highlight-ct
  • .dialog-list -> .dialog-list-ct
  • .curtains -> .curtains-ct
  • .dialog-wait -> .dialog-wait-ct
  • .console -> .console-ct (and related styling)
  • .btn-onoff -> .btn-onoff-ct
  • .listing -> .listing-ct (and related styling)
  • .timeline -> .timeline-ct (and related styling)

Removed these styles:

  • .cockpit-graph
  • .cockpit-graph-label
  • .cockpit-graph-text
  • .filter-unimportant
  • .waiting
  • .cell-buttons
  • .spinner-white
  • .content-header-extra
  • .cockpit-modal-md
  • .modal-scrollable
  • .password-strength-meter