Skip to content

Cockpit CSS Styling

Stef Walter edited this page May 12, 2016 · 2 revisions

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

Clone this wiki locally