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